From 17b04764e630412c3f1a260dba4a4affc69751ac Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 18 Oct 2022 10:05:33 -0700 Subject: [PATCH] Stub out component stories with Figma links (#117) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(icons): export { icons } from sfgov-design-system/src/icons * fix(docs): get the icon library working again * chore(docs): tidy up icon library mdx * chore: nix 'icons' export from sfgov-design-system/src/icons * chore(docs): move "using icons" docs to components * docs: tweak icon design guidelines front matter * chore(lint): install stylelint-config-tailwindcss, ignore theme() * Updates the infima color vars for now * - Adds closing tags for img - Adds closing tags for br * Updates the comment format * ain't nothin but a lil bitta swizzlin (nav/sidebar) * chore(eslint): make react/prop-types warn, skipUndeclared * docs: remove placeholder form fields doc list * Updates beta version * Adds a landing page description * - Updates the footer content - Updates the tagline - Updates config to handle @apply and custom presets in css * Updates the landing page design * - Updates the font import to use variable font - Updates nav logo styling * Updates the top portion of the landing page * fix regex for color swatch * Adds the logo for use in the footer * - Swizzles the footer layout and footer logo - Styles the footer * Updates the design of the top navigation * Updates the design of the sidebar items * Changes paddingleft to padding * - Creates a BigLink component - Includes BigLink component in icons and colors - Changes icons file extension to mdx * - Moves the color libraries to a color directory - Updates the link to the color directory in the color doc - Updates the names of the two color library names * - Changes the file extension to mdx - Uses the new type-focused components * Adds mono import * Creates new type-focused components * Updates to use the CodeBlock from Docusaurus * - Renames the "spacing" page to "layout" - Adds the live editor to each of the examples * Makes minor updates to deal with proptype errors * - Updates to the 2.0.0-beta.22 release - Updates an icon path in a swizzled file * - Updates to the first RC - Fixes an import being broken by the update * fix broken links and add front end redirects * mark unused filepath, keeping for reference tho * Initial version of the tailwind class list * Removes unused imports * Removes unneeded escape characters from the regex * test redirects fix * chore(npm): npm audit fix * chore(docs): update new css docs for Docusaurus * fix(docs): update buttons docs for Docusaurus * chore(lint): tidy up docs components * fix(develop): nix develop command * chore(deps): fix stylelint-config-tailwindcss version in package-lock * chore(npm): rebuild package-lock * fix(docs): fix 
 whitespace

* chore(build): tweak wireit "clean" bits

* chore(tailwind): simplify content field

* feat(docs): add DoDont, Do and Dont components

* chore(docs): rewrite button docs with DoDont

* chore(eslint): allow trailing spaces in comments

* chore(docs): add doc comment in 

* fix(docs): sort icons alphabetically

* fix(docs): fix action blue swatch label

* feat(tailwind): add gridAutoFlow plugin

* fix(docs): don't use wireit for build; serve from ./public

* fix(docs): fix button specs path

* chore(lint): remove unused border components

* fix(lint): detect react version in eslint config

* chore(lint): lint docs (theme) components

* fix(icons): tweak icon replace logic

* chore: nix "docs/**/*.md?" from tailwind content list

* chore(docs): freshen up the website readme

* fix(sfgov-icon): fix svg twiddling bits

* fix(sfgov-icon): another attempt at fixing this...

* feat(sfgov-icon): set window.SFGovIcon

* Installs 'use-bus' for dispatching in the utillist

* Adds a description to the tailwind class list page

* Completes the styling of the utilist page

* Splits up the components into separate files

* fix(eslint): nix no-unused-vars override

* chore(npm): fix engine versions

* chore(deps): enforce consistent shared dependency versions

* chore: comment out unused BorderColor + BorderWidth for now

* chore: add validate npm script to /

* chore(docs): normalize icon data interface

* chore(docs): fix tailwind content paths

* chore(docs): output paths to build.log

* fix(docs): fix utility class link

* fix: hush babel about named json imports

* chore(deps): npm audit fix

* Quick update to the json file

* fix(docs): use dedent for css code blocks

* feat(docs): throw on broken links!

* DESSYS-217 lint md and mdx files (#100)

* DESSYS-217 lint md and mdx files

* remove eslint-mdx for now

* fix package-lock.json conflicts

* fix lint job

* Updates Docusaurus to 2.0.1

* Updates links within the content

* Updates the landing page images

* Updates the landing page

* Adds a storybook test page

* Moves the forms landing page to the directory

* Creates a test storybook embed in md files

* chore(docs): remove background color from Do + Dont

* Removes unused import

* Removes the test page that contained storybook

* Adds some non-breaking spaces to the content

* Updates the landing page

* Fixes landing page links

* Docusaurus: add custom Playground component (#102)

* chore(docs): fix inline icons in details docs

* chore(eslint): suggest lines before function declarations

* feat(docs): build out styled code playground

* chore(deps): upgrade docusaurus to 2.0.1

* chore(docs): install react-shadow

* chore: tweak export style

* chore(docs): add EncapsulatedStyleRoot

* - Removes commented out code
- Adds a class to the github button to add icon

* Adds an icon instead of "github" for the link

* Adds support for the docusaurus dark mode

* Makes updates to allow for better dark mode

* Adds the new do/don't component

* fix(docs): fix edit links

* fix(docs): tweak spawnSync() signature

* script for tailwind classes

* fix build script for css-manifest

* another fix attempt

* sorry for all the spam everyone :sob emoji:

* chore(docs): add figma link to KBD docs

* - Splits the Feature component into a sep file
- Replaces landing images with svg components

* fix(build): fix circular build-css-manifest dependencies

* chore(build): nix docs.js bundle

* Removes a console log

* fix(build): make sure css builds before manifest

* Heroku: upgrade stack, switch to nginx buildpack (#103)

* chore(heroku): upgrade stack, switch to nginx buildpack

* chore(heroku): delete static.json

* chore(heroku): stub out nginx config

* chore(heroku): mv config/nginx.conf{,.erb}

* chore(heroku): use papertrail

* chore(heroku): add Procfile for nginx solo mode

* chore(heroku): rewrite nginx.conf.erb from example

* chore(vscode): add $schema to app.json

* Fixes the link destinations

* Corrects the padding to match quick links

* fix(docs): tweak DoDont component borders

* Fix icons (#105)

* fix(build): fix circular build-css-manifest dependencies

* chore(build): nix docs.js bundle

* feat(css): add icons.css bundle + import in sfds.css

* chore(docs): install raw-loader

* chore(docs): move sfds.js import to docusaurus config

* chore(docs): import sfds.css + fonts.css in custom stylesheet

* chore(docs): inline sfds styles in EncapsulatedStyleRoot

* feat(css): add icons.css bundle, import in sfds.css

* fix(build): fix manifest build dependencies

* chore(docs): add note about styling 

* chore(docs): nix build.log output

* fix(docs): add back ExecutionEnvironment.canUseDOM check

* chore(docs): wrap EncapsulatedStyleRoot in browser check

* Move redirects to nginx config (#104)

* chore(vscode): tell vscode how to treat nginx.conf.erb

* chore(docs): disable client redirects plugin

* chore(docs): rename "Forms and fields" dir → "forms"

* chore(nginx): nix most env vars, add redirect map

* fix(nginx): move redirect map out of server block

* fix broken links our build caught :)

Co-authored-by: jacksongonzales 

* chore: bump sfgov-design-system to 2.5.0

* fix components link on home page

* Fix  in Docusaurus/React (#106)

* fix(docs): use memoized icon component

* chore(deps): update wireit

* chore(build): improve --watch file coverage

* fix(SFGovIcon): fall back on any child  if __svg is unset

* fix(docs): rework SFGovIconWrapper to re-render properly

* feat(storybook): bootstrap storybook

* chore: ignore storybook-static dir

* chore(docs): link storybook in website/public

* chore(lint): fix .eslintrc.js

* chore(eslint): globalize resolve extensions + react version

* chore(lint): fix storybook linting

* chore(eslint): tidy top-level eslintrc

* chore(storybook): rename output directory to storybook/public

* chore(docs): remove storybook stub page

* chore(docs): get smarter about broken docs links

* chore(docs): add Storybook navbar link

* chore(docs): symlink docs before running docusaurus

* chore(lint): be sure to lint storybook/.storybook

* chore(storybook): lint .storybook, add 

* chore(docs): nix Storybook URL for now

* chore: document  hack, lint

* fix(ci): try only building sfgov-design-system for reports

* fix(docs): use HEROKU_BRANCH if available

* chore(docs): configure ports for website + storybook development

* chore(docs): add Storybook link to Docusaurus

* chore(storybook): stub out theme, link to Docusaurus

* chore(develop): update top-level "start" script to run docusaurus + storybook in parallel

* fix: bad merge

* chore: nix storybook embed demo page

* fix(docs): try Storybook link with pathname://

* fix(docs): var cross-refs with NODE_ENV, not HEROKU_APP_NAME

* chore(storybook): get NODE_ENV right

* chore(deps): bump eslint

* chore(lint): remove unused disables

* chore(storybook): nix stock stories

* chore(storybook): delete static assets

* chore: stub out new storybook preview config

* chore: delete stock button stories

* chore: tidy up storybook configs

* chore: add (back) storybook intro page

* chore(deps): add sfgov-design-system to storybook

* fix: try recreating public dir before storybook build

* fix(lint): try disabling import/no-unresolved in storybook preview

* chore(ci): narrow node + npm engines semver range

* Revert "fix: try recreating public dir before storybook build"

This reverts commit 839687f007d0171cec0c4465b980ee93004a479f.

* chore: pull favicon.ico from sf.gov

* fix(heroku): wtf

* chore: don't over-specify storybook story order

* chore: disable actions addon, tweak story paths, add designs addon

* chore: stub out storybook component utils

* feat: add Icon component stories

* feat: add Button component stories

* chore(deps): install clsx + storybook-addon-designs

* feat: add Alerts & Banners stories

* feat: add Icons stories

* chore(lint): whitespace

* chore: set design panel name to "Figma"

* chore(lint): unused vars

* chore: stub out Blocks component group

* fix(storybook): fix SVG class attr

* chore(lint): turn off react/prop-types rule

* chore(lint): eslint --fix + typescript annotations

* chore: storybook utils updates

* fix: use text-slate-4 in alerts

* feat: add Keyboard stories

* feat: add Containers stories

* chore(lint): fix linting of .storybook

* fix: sort icon symbols alphabetically

* chore: sort global parameter keys

* feat: tweak Icon story, add AllIcons

* chore: rename "Kbd" story to ""

* feat(dev): add .tool-versions for asdf

* fix: wrap useBannerContent() children in 


* feat: add Tile component stories, polymorphic() util

* chore: add ts annotations

* feat: stub out Icon + Information lockups

* chore: rename Information stories

* chore: lint

* feat: stub out Locator Maps stories

* chore: set default parameters.design.type = 'figma'

* chore: stub out more component stories

* chore: lint

* chore: stub out form input stories

* chore: rename "Fields" to "Inputs"

* chore: stub out Tables, Lists, and Progress Indicators

* feat: add basic Step by Step stories

* chore: lint

* fix: fix context passing to withPropsTransform()

* chore: simplify button story components, table decorator

* chore(deps): install storysource addon

* fix: hide Storybook "Docs" tab

* feat: enable storysource addon

* feat: add StorybookLink component

* feat: add components index

* chore: add status column to components index

* chore: move StepByStep implementation to experiments

* chore: set titlePrefix for components + experiments dirs

* chore: move Alerts implementations to experiments

* chore: move Alerts implementations to experiments

* chore: fix up story titles

* chore: refactor TODOs with Stub.bind({})

* chore: move more implementations to experiments

* Fixes letter case of components/experiements paths

* chore(deps): install storybook-source-link, fix dev deps

* chore: set up storybook-source-link

* chore: add story source links for existing components

* fix: add missing  in icon table

* chore: tidy

* chore: tidy button stories

* chore: lowercase stories/* directories

* fix: stop using argTypes..defaultValue

* chore(lint): fix

* fix(editor): set eslint.workingDirectories

Co-authored-by: Corey Hunt 
Co-authored-by: jacksongonzales 
---
 .tool-versions                                |   1 +
 .vscode/settings.json                         |   7 +-
 package-lock.json                             | 971 ++++++++++++++----
 storybook/.eslintrc.js                        |   7 +-
 storybook/.storybook/main.js                  |  27 +-
 storybook/.storybook/preview.jsx              |  44 +-
 storybook/package.json                        |   6 +-
 storybook/src/Icon.jsx                        |  16 +
 storybook/src/utils.jsx                       | 141 +++
 .../stories/components/Alerts.stories.jsx     |  24 +
 .../stories/components/Blocks.stories.jsx     |  47 +
 .../stories/components/Buttons.stories.jsx    | 116 +++
 .../stories/components/Containers.stories.jsx |  22 +
 .../stories/components/Controls.stories.jsx   |  57 +
 .../components/Forms/Checkboxes.stories.jsx   |  35 +
 .../components/Forms/Chips.stories.jsx        |  20 +
 .../components/Forms/DateInputs.stories.jsx   |  18 +
 .../components/Forms/Fieldsets.stories.jsx    |  14 +
 .../components/Forms/RadioButtons.stories.jsx |  36 +
 .../components/Forms/TextInputs.stories.jsx   |  30 +
 .../components/Forms/UploadInputs.stories.jsx |  31 +
 .../components/IconInfoLockups.stories.jsx    |  29 +
 .../stories/components/Icons.stories.jsx      |  18 +
 .../stories/components/Keyboard.stories.jsx   |  23 +
 .../stories/components/Lists.stories.jsx      |  23 +
 .../components/LocatorMaps.stories.jsx        |  22 +
 .../stories/components/People.stories.jsx     |  19 +
 .../components/ProgressIndicators.stories.jsx |  15 +
 .../stories/components/StepByStep.stories.jsx |  15 +
 .../stories/components/Tables.stories.jsx     |  17 +
 .../stories/components/Tiles.stories.jsx      |  29 +
 .../stories/experiments/Alerts.stories.jsx    | 211 ++++
 .../experiments/Containers.stories.jsx        |  37 +
 .../stories/experiments/Fieldsets.stories.jsx |  57 +
 .../stories/experiments/Icons.stories.jsx     |  65 ++
 .../stories/experiments/Keyboard.stories.jsx  | 162 +++
 .../experiments/StepByStep.stories.jsx        | 169 +++
 .../stories/experiments/Tiles.stories.jsx     | 283 +++++
 website/docs/components/all.mdx               |  41 +
 website/docs/components/icons.mdx             |  10 +-
 website/src/components/StorybookLink.jsx      |   8 +
 website/src/components/index.js               |   1 +
 42 files changed, 2701 insertions(+), 223 deletions(-)
 create mode 100644 .tool-versions
 create mode 100644 storybook/src/Icon.jsx
 create mode 100644 storybook/src/utils.jsx
 create mode 100644 storybook/stories/components/Alerts.stories.jsx
 create mode 100644 storybook/stories/components/Blocks.stories.jsx
 create mode 100644 storybook/stories/components/Buttons.stories.jsx
 create mode 100644 storybook/stories/components/Containers.stories.jsx
 create mode 100644 storybook/stories/components/Controls.stories.jsx
 create mode 100644 storybook/stories/components/Forms/Checkboxes.stories.jsx
 create mode 100644 storybook/stories/components/Forms/Chips.stories.jsx
 create mode 100644 storybook/stories/components/Forms/DateInputs.stories.jsx
 create mode 100644 storybook/stories/components/Forms/Fieldsets.stories.jsx
 create mode 100644 storybook/stories/components/Forms/RadioButtons.stories.jsx
 create mode 100644 storybook/stories/components/Forms/TextInputs.stories.jsx
 create mode 100644 storybook/stories/components/Forms/UploadInputs.stories.jsx
 create mode 100644 storybook/stories/components/IconInfoLockups.stories.jsx
 create mode 100644 storybook/stories/components/Icons.stories.jsx
 create mode 100644 storybook/stories/components/Keyboard.stories.jsx
 create mode 100644 storybook/stories/components/Lists.stories.jsx
 create mode 100644 storybook/stories/components/LocatorMaps.stories.jsx
 create mode 100644 storybook/stories/components/People.stories.jsx
 create mode 100644 storybook/stories/components/ProgressIndicators.stories.jsx
 create mode 100644 storybook/stories/components/StepByStep.stories.jsx
 create mode 100644 storybook/stories/components/Tables.stories.jsx
 create mode 100644 storybook/stories/components/Tiles.stories.jsx
 create mode 100644 storybook/stories/experiments/Alerts.stories.jsx
 create mode 100644 storybook/stories/experiments/Containers.stories.jsx
 create mode 100644 storybook/stories/experiments/Fieldsets.stories.jsx
 create mode 100644 storybook/stories/experiments/Icons.stories.jsx
 create mode 100644 storybook/stories/experiments/Keyboard.stories.jsx
 create mode 100644 storybook/stories/experiments/StepByStep.stories.jsx
 create mode 100644 storybook/stories/experiments/Tiles.stories.jsx
 create mode 100644 website/docs/components/all.mdx
 create mode 100644 website/src/components/StorybookLink.jsx

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 00000000..eedff58c
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 16.16.0
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 92dc377b..6c4393b5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -26,5 +26,10 @@
   },
   "files.associations": {
     "/config/*.conf{,.erb}": "nginx"
-  }
+  },
+  "eslint.workingDirectories": [
+    "packages/*",
+    "storybook",
+    "website"
+  ]
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d8125af3..84839c14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,8 +26,8 @@
         "wireit": "^0.7.1"
       },
       "engines": {
-        "node": ">=14.x",
-        "npm": ">=8.x"
+        "node": "16.x",
+        "npm": "8.x"
       }
     },
     "node_modules/@algolia/autocomplete-core": {
@@ -208,16 +208,14 @@
     },
     "node_modules/@babel/compat-data": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.3.tgz",
-      "integrity": "sha512-prBHMK4JYYK+wDjJF1q99KK4JLL+egWS4nmNqdlMUgCExMZ+iZW0hGhyC3VEbsPjvaN0TBhW//VIFwBrk8sEiw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.3.tgz",
-      "integrity": "sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==",
+      "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -275,8 +273,7 @@
     },
     "node_modules/@babel/generator": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.3.tgz",
-      "integrity": "sha512-fqVZnmp1ncvZU757UzDheKZpfPgatqY59XtW2/j/18H7u76akb8xqvjw82f+i2UKd/ksYsSick/BCLQUUtJ/qQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.19.3",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -321,8 +318,7 @@
     },
     "node_modules/@babel/helper-compilation-targets": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz",
-      "integrity": "sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/compat-data": "^7.19.3",
         "@babel/helper-validator-option": "^7.18.6",
@@ -417,8 +413,7 @@
     },
     "node_modules/@babel/helper-function-name": {
       "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
-      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
+      "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.18.10",
         "@babel/types": "^7.19.0"
@@ -459,8 +454,7 @@
     },
     "node_modules/@babel/helper-module-transforms": {
       "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz",
-      "integrity": "sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -561,8 +555,7 @@
     },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -589,8 +582,7 @@
     },
     "node_modules/@babel/helpers": {
       "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz",
-      "integrity": "sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.19.0",
@@ -614,8 +606,7 @@
     },
     "node_modules/@babel/parser": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.3.tgz",
-      "integrity": "sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ==",
+      "license": "MIT",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1992,8 +1983,7 @@
     },
     "node_modules/@babel/traverse": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.3.tgz",
-      "integrity": "sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.18.6",
         "@babel/generator": "^7.19.3",
@@ -2012,8 +2002,7 @@
     },
     "node_modules/@babel/types": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.3.tgz",
-      "integrity": "sha512-hGCaQzIY22DJlDh9CH7NOxgKkFjBk0Cw9xDO1Xmh2151ti7wiGfQ3LauXzL4HP1fmFlTX6XjpRETTpUcv7wQLw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.18.10",
         "@babel/helper-validator-identifier": "^7.19.1",
@@ -3005,8 +2994,7 @@
     },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
-      "integrity": "sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==",
+      "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -3027,13 +3015,11 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+      "license": "Python-2.0"
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "13.17.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
-      "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
+      "license": "MIT",
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -3046,8 +3032,7 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -3057,8 +3042,7 @@
     },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
       "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
       },
@@ -3066,6 +3050,26 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@figspec/components": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lit": "^2.1.3"
+      }
+    },
+    "node_modules/@figspec/react": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@figspec/components": "^1.0.0",
+        "@lit-labs/react": "^1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "license": "MIT"
@@ -3083,8 +3087,7 @@
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.10.7",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
-      "integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
@@ -3096,8 +3099,7 @@
     },
     "node_modules/@humanwhocodes/gitignore-to-minimatch": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
-      "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==",
+      "license": "Apache-2.0",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/nzakas"
@@ -3105,8 +3107,7 @@
     },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=12.22"
       },
@@ -3117,8 +3118,7 @@
     },
     "node_modules/@humanwhocodes/object-schema": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+      "license": "BSD-3-Clause"
     },
     "node_modules/@hutson/parse-repository-url": {
       "version": "3.0.2",
@@ -4249,6 +4249,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/@lit-labs/react": {
+      "version": "1.0.8",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "1.4.1",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "1.6.22",
       "license": "MIT",
@@ -5231,6 +5241,236 @@
         }
       }
     },
+    "node_modules/@storybook/addon-storysource": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-6.5.12.tgz",
+      "integrity": "sha512-FpqEbBET2buZ3tzf0I902zokf0zhbeUWmkq8wUxygn4SKhog8yVbvzTIjG7l0kh53t+y/udirzjjAt66LgR2hA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addons": "6.5.12",
+        "@storybook/api": "6.5.12",
+        "@storybook/client-logger": "6.5.12",
+        "@storybook/components": "6.5.12",
+        "@storybook/router": "6.5.12",
+        "@storybook/source-loader": "6.5.12",
+        "@storybook/theming": "6.5.12",
+        "core-js": "^3.8.2",
+        "estraverse": "^5.2.0",
+        "loader-utils": "^2.0.0",
+        "prop-types": "^15.7.2",
+        "react-syntax-highlighter": "^15.4.5",
+        "regenerator-runtime": "^0.13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/addons": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.12.tgz",
+      "integrity": "sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/api": "6.5.12",
+        "@storybook/channels": "6.5.12",
+        "@storybook/client-logger": "6.5.12",
+        "@storybook/core-events": "6.5.12",
+        "@storybook/csf": "0.0.2--canary.4566f4d.1",
+        "@storybook/router": "6.5.12",
+        "@storybook/theming": "6.5.12",
+        "@types/webpack-env": "^1.16.0",
+        "core-js": "^3.8.2",
+        "global": "^4.4.0",
+        "regenerator-runtime": "^0.13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/api": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.12.tgz",
+      "integrity": "sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "6.5.12",
+        "@storybook/client-logger": "6.5.12",
+        "@storybook/core-events": "6.5.12",
+        "@storybook/csf": "0.0.2--canary.4566f4d.1",
+        "@storybook/router": "6.5.12",
+        "@storybook/semver": "^7.3.2",
+        "@storybook/theming": "6.5.12",
+        "core-js": "^3.8.2",
+        "fast-deep-equal": "^3.1.3",
+        "global": "^4.4.0",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "regenerator-runtime": "^0.13.7",
+        "store2": "^2.12.0",
+        "telejson": "^6.0.8",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/channels": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.12.tgz",
+      "integrity": "sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==",
+      "dev": true,
+      "dependencies": {
+        "core-js": "^3.8.2",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/client-logger": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.12.tgz",
+      "integrity": "sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==",
+      "dev": true,
+      "dependencies": {
+        "core-js": "^3.8.2",
+        "global": "^4.4.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/components": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.12.tgz",
+      "integrity": "sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "6.5.12",
+        "@storybook/csf": "0.0.2--canary.4566f4d.1",
+        "@storybook/theming": "6.5.12",
+        "core-js": "^3.8.2",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "regenerator-runtime": "^0.13.7",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/core-events": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.12.tgz",
+      "integrity": "sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==",
+      "dev": true,
+      "dependencies": {
+        "core-js": "^3.8.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/router": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.12.tgz",
+      "integrity": "sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "6.5.12",
+        "core-js": "^3.8.2",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "regenerator-runtime": "^0.13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/source-loader": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.12.tgz",
+      "integrity": "sha512-4iuILFsKNV70sEyjzIkOqgzgQx7CJ8kTEFz590vkmWXQNKz7YQzjgISIwL7GBw/myJgeb04bl5psVgY0cbG5vg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addons": "6.5.12",
+        "@storybook/client-logger": "6.5.12",
+        "@storybook/csf": "0.0.2--canary.4566f4d.1",
+        "core-js": "^3.8.2",
+        "estraverse": "^5.2.0",
+        "global": "^4.4.0",
+        "loader-utils": "^2.0.0",
+        "lodash": "^4.17.21",
+        "prettier": ">=2.2.1 <=2.3.0",
+        "regenerator-runtime": "^0.13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-storysource/node_modules/@storybook/theming": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.12.tgz",
+      "integrity": "sha512-uWOo84qMQ2R6c1C0faZ4Q0nY01uNaX7nXoJKieoiJ6ZqY9PSYxJl1kZLi3uPYnrxLZjzjVyXX8MgdxzbppYItA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "6.5.12",
+        "core-js": "^3.8.2",
+        "memoizerific": "^1.11.3",
+        "regenerator-runtime": "^0.13.7"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/addon-toolbars": {
       "version": "6.5.10",
       "dev": true,
@@ -10911,17 +11151,6 @@
         "ts-dedent": "^2.0.0"
       }
     },
-    "node_modules/@storybook/mdx1-csf/node_modules/prettier": {
-      "version": "2.3.0",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@storybook/node-logger": {
       "version": "6.5.10",
       "dev": true,
@@ -11357,17 +11586,6 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/@storybook/source-loader/node_modules/prettier": {
-      "version": "2.3.0",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/@storybook/store": {
       "version": "6.5.10",
       "dev": true,
@@ -12243,6 +12461,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.2",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/uglify-js": {
       "version": "3.17.0",
       "dev": true,
@@ -18109,8 +18332,7 @@
     },
     "node_modules/eslint": {
       "version": "8.24.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.24.0.tgz",
-      "integrity": "sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==",
+      "license": "MIT",
       "dependencies": {
         "@eslint/eslintrc": "^1.3.2",
         "@humanwhocodes/config-array": "^0.10.5",
@@ -18766,8 +18988,7 @@
     },
     "node_modules/eslint/node_modules/array-union": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -18820,8 +19041,7 @@
     },
     "node_modules/eslint/node_modules/find-up": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "license": "MIT",
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -18858,8 +19078,7 @@
     },
     "node_modules/eslint/node_modules/globby": {
       "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "license": "MIT",
       "dependencies": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
@@ -18894,8 +19113,7 @@
     },
     "node_modules/eslint/node_modules/locate-path": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "license": "MIT",
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -18908,8 +19126,7 @@
     },
     "node_modules/eslint/node_modules/p-limit": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "license": "MIT",
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -18922,8 +19139,7 @@
     },
     "node_modules/eslint/node_modules/p-locate": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "license": "MIT",
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -18936,16 +19152,14 @@
     },
     "node_modules/eslint/node_modules/path-exists": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/eslint/node_modules/slash": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -18972,8 +19186,7 @@
     },
     "node_modules/espree": {
       "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
-      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
@@ -18988,8 +19201,7 @@
     },
     "node_modules/espree/node_modules/acorn": {
       "version": "8.8.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-      "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==",
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -18999,8 +19211,7 @@
     },
     "node_modules/espree/node_modules/eslint-visitor-keys": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
-      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
+      "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -19482,6 +19693,19 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dev": true,
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
       "license": "Apache-2.0",
@@ -19985,6 +20209,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "license": "MIT",
@@ -20760,8 +20993,7 @@
     },
     "node_modules/grapheme-splitter": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+      "license": "MIT"
     },
     "node_modules/gray-matter": {
       "version": "4.0.3",
@@ -21120,6 +21352,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/history": {
       "version": "4.10.1",
       "license": "MIT",
@@ -22787,8 +23028,7 @@
     },
     "node_modules/js-sdsl": {
       "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
-      "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw=="
+      "license": "MIT"
     },
     "node_modules/js-string-escape": {
       "version": "1.0.1",
@@ -23086,6 +23326,33 @@
         "uc.micro": "^1.0.1"
       }
     },
+    "node_modules/lit": {
+      "version": "2.3.1",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.3.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "3.2.2",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "2.3.1",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "4.0.0",
       "license": "MIT",
@@ -23302,6 +23569,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dev": true,
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "license": "ISC",
@@ -26800,6 +27081,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
+      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/prettier-linter-helpers": {
       "version": "1.0.0",
       "dev": true,
@@ -27797,6 +28090,22 @@
         "react-dom": "^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-textarea-autosize": {
       "version": "8.3.4",
       "license": "MIT",
@@ -28147,6 +28456,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dev": true,
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "license": "MIT"
@@ -30469,6 +30802,37 @@
       "dev": true,
       "license": "(MIT OR GPL-3.0)"
     },
+    "node_modules/storybook-addon-designs": {
+      "version": "6.3.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@figspec/react": "^1.0.0"
+      }
+    },
+    "node_modules/storybook-source-link": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/storybook-source-link/-/storybook-source-link-2.0.1.tgz",
+      "integrity": "sha512-zFsxPcYz829iytk5fUmccEpGkzLqw5avSvYMpXCFv+PLqTEZZOQe18pboccpRG9sG0r4vhF+mbjjBS+dykI47g==",
+      "dev": true,
+      "peerDependencies": {
+        "@storybook/addons": "^6.4.0",
+        "@storybook/api": "^6.4.0",
+        "@storybook/components": "^6.4.0",
+        "@storybook/core-events": "^6.4.0",
+        "@storybook/theming": "^6.4.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stream-browserify": {
       "version": "2.0.2",
       "dev": true,
@@ -34172,6 +34536,7 @@
     "storybook": {
       "name": "@sfgov/storybook",
       "dependencies": {
+        "clsx": "^1.1.0",
         "sfgov-design-system": "2.5.0"
       },
       "devDependencies": {
@@ -34180,11 +34545,21 @@
         "@storybook/addon-essentials": "^6.5.10",
         "@storybook/addon-interactions": "^6.5.10",
         "@storybook/addon-links": "^6.5.10",
+        "@storybook/addon-storysource": "^6.5.12",
         "@storybook/builder-webpack5": "^6.5.10",
         "@storybook/manager-webpack5": "^6.5.10",
         "@storybook/react": "^6.5.10",
         "@storybook/testing-library": "^0.0.13",
-        "babel-loader": "^8.2.5"
+        "babel-loader": "^8.2.5",
+        "storybook-addon-designs": "^6.3.1",
+        "storybook-source-link": "^2.0.1"
+      }
+    },
+    "storybook/node_modules/clsx": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
     "website": {
@@ -34450,14 +34825,10 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.19.3.tgz",
-      "integrity": "sha512-prBHMK4JYYK+wDjJF1q99KK4JLL+egWS4nmNqdlMUgCExMZ+iZW0hGhyC3VEbsPjvaN0TBhW//VIFwBrk8sEiw=="
+      "version": "7.19.3"
     },
     "@babel/core": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.19.3.tgz",
-      "integrity": "sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==",
       "requires": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.18.6",
@@ -34496,8 +34867,6 @@
     },
     "@babel/generator": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.19.3.tgz",
-      "integrity": "sha512-fqVZnmp1ncvZU757UzDheKZpfPgatqY59XtW2/j/18H7u76akb8xqvjw82f+i2UKd/ksYsSick/BCLQUUtJ/qQ==",
       "requires": {
         "@babel/types": "^7.19.3",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -34529,8 +34898,6 @@
     },
     "@babel/helper-compilation-targets": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.19.3.tgz",
-      "integrity": "sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==",
       "requires": {
         "@babel/compat-data": "^7.19.3",
         "@babel/helper-validator-option": "^7.18.6",
@@ -34589,8 +34956,6 @@
     },
     "@babel/helper-function-name": {
       "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.19.0.tgz",
-      "integrity": "sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==",
       "requires": {
         "@babel/template": "^7.18.10",
         "@babel/types": "^7.19.0"
@@ -34616,8 +34981,6 @@
     },
     "@babel/helper-module-transforms": {
       "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.19.0.tgz",
-      "integrity": "sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==",
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-module-imports": "^7.18.6",
@@ -34679,9 +35042,7 @@
       "version": "7.18.10"
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
+      "version": "7.19.1"
     },
     "@babel/helper-validator-option": {
       "version": "7.18.6"
@@ -34697,8 +35058,6 @@
     },
     "@babel/helpers": {
       "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.19.0.tgz",
-      "integrity": "sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==",
       "requires": {
         "@babel/template": "^7.18.10",
         "@babel/traverse": "^7.19.0",
@@ -34714,9 +35073,7 @@
       }
     },
     "@babel/parser": {
-      "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.3.tgz",
-      "integrity": "sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ=="
+      "version": "7.19.3"
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.18.6",
@@ -35483,8 +35840,6 @@
     },
     "@babel/traverse": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.19.3.tgz",
-      "integrity": "sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ==",
       "requires": {
         "@babel/code-frame": "^7.18.6",
         "@babel/generator": "^7.19.3",
@@ -35500,8 +35855,6 @@
     },
     "@babel/types": {
       "version": "7.19.3",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.19.3.tgz",
-      "integrity": "sha512-hGCaQzIY22DJlDh9CH7NOxgKkFjBk0Cw9xDO1Xmh2151ti7wiGfQ3LauXzL4HP1fmFlTX6XjpRETTpUcv7wQLw==",
       "requires": {
         "@babel/helper-string-parser": "^7.18.10",
         "@babel/helper-validator-identifier": "^7.19.1",
@@ -36175,8 +36528,6 @@
     },
     "@eslint/eslintrc": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz",
-      "integrity": "sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==",
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -36190,33 +36541,40 @@
       },
       "dependencies": {
         "argparse": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+          "version": "2.0.1"
         },
         "globals": {
           "version": "13.17.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz",
-          "integrity": "sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==",
           "requires": {
             "type-fest": "^0.20.2"
           }
         },
         "js-yaml": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
           "requires": {
             "argparse": "^2.0.1"
           }
         },
         "type-fest": {
-          "version": "0.20.2",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+          "version": "0.20.2"
         }
       }
     },
+    "@figspec/components": {
+      "version": "1.0.1",
+      "dev": true,
+      "requires": {
+        "lit": "^2.1.3"
+      }
+    },
+    "@figspec/react": {
+      "version": "1.0.2",
+      "dev": true,
+      "requires": {
+        "@figspec/components": "^1.0.0",
+        "@lit-labs/react": "^1.0.2"
+      }
+    },
     "@gar/promisify": {
       "version": "1.1.3"
     },
@@ -36231,8 +36589,6 @@
     },
     "@humanwhocodes/config-array": {
       "version": "0.10.7",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
-      "integrity": "sha512-MDl6D6sBsaV452/QSdX+4CXIjZhIcI0PELsxUjk4U828yd58vk3bTIvk/6w5FY+4hIy9sLW0sfrV7K7Kc++j/w==",
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
         "debug": "^4.1.1",
@@ -36240,19 +36596,13 @@
       }
     },
     "@humanwhocodes/gitignore-to-minimatch": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz",
-      "integrity": "sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA=="
+      "version": "1.0.2"
     },
     "@humanwhocodes/module-importer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
-      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="
+      "version": "1.0.1"
     },
     "@humanwhocodes/object-schema": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
-      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+      "version": "1.2.1"
     },
     "@hutson/parse-repository-url": {
       "version": "3.0.2"
@@ -36977,6 +37327,14 @@
         }
       }
     },
+    "@lit-labs/react": {
+      "version": "1.0.8",
+      "dev": true
+    },
+    "@lit/reactive-element": {
+      "version": "1.4.1",
+      "dev": true
+    },
     "@mdx-js/mdx": {
       "version": "1.6.22",
       "requires": {
@@ -37318,12 +37676,21 @@
         "@storybook/addon-essentials": "^6.5.10",
         "@storybook/addon-interactions": "^6.5.10",
         "@storybook/addon-links": "^6.5.10",
+        "@storybook/addon-storysource": "^6.5.12",
         "@storybook/builder-webpack5": "^6.5.10",
         "@storybook/manager-webpack5": "^6.5.10",
         "@storybook/react": "^6.5.10",
         "@storybook/testing-library": "^0.0.13",
         "babel-loader": "^8.2.5",
-        "sfgov-design-system": "2.5.0"
+        "clsx": "^1.1.0",
+        "sfgov-design-system": "2.5.0",
+        "storybook-addon-designs": "^6.3.1",
+        "storybook-source-link": "^2.0.1"
+      },
+      "dependencies": {
+        "clsx": {
+          "version": "1.1.0"
+        }
       }
     },
     "@sideway/address": {
@@ -37535,6 +37902,162 @@
         "ts-dedent": "^2.0.0"
       }
     },
+    "@storybook/addon-storysource": {
+      "version": "6.5.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-storysource/-/addon-storysource-6.5.12.tgz",
+      "integrity": "sha512-FpqEbBET2buZ3tzf0I902zokf0zhbeUWmkq8wUxygn4SKhog8yVbvzTIjG7l0kh53t+y/udirzjjAt66LgR2hA==",
+      "dev": true,
+      "requires": {
+        "@storybook/addons": "6.5.12",
+        "@storybook/api": "6.5.12",
+        "@storybook/client-logger": "6.5.12",
+        "@storybook/components": "6.5.12",
+        "@storybook/router": "6.5.12",
+        "@storybook/source-loader": "6.5.12",
+        "@storybook/theming": "6.5.12",
+        "core-js": "^3.8.2",
+        "estraverse": "^5.2.0",
+        "loader-utils": "^2.0.0",
+        "prop-types": "^15.7.2",
+        "react-syntax-highlighter": "^15.4.5",
+        "regenerator-runtime": "^0.13.7"
+      },
+      "dependencies": {
+        "@storybook/addons": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.12.tgz",
+          "integrity": "sha512-y3cgxZq41YGnuIlBJEuJjSFdMsm8wnvlNOGUP9Q+Er2dgfx8rJz4Q22o4hPjpvpaj4XdBtxCJXI2NeFpN59+Cw==",
+          "dev": true,
+          "requires": {
+            "@storybook/api": "6.5.12",
+            "@storybook/channels": "6.5.12",
+            "@storybook/client-logger": "6.5.12",
+            "@storybook/core-events": "6.5.12",
+            "@storybook/csf": "0.0.2--canary.4566f4d.1",
+            "@storybook/router": "6.5.12",
+            "@storybook/theming": "6.5.12",
+            "@types/webpack-env": "^1.16.0",
+            "core-js": "^3.8.2",
+            "global": "^4.4.0",
+            "regenerator-runtime": "^0.13.7"
+          }
+        },
+        "@storybook/api": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.5.12.tgz",
+          "integrity": "sha512-DuUZmMlQxkFNU9Vgkp9aNfCkAongU76VVmygvCuSpMVDI9HQ2lG0ydL+ppL4XKoSMCCoXTY6+rg4hJANnH+1AQ==",
+          "dev": true,
+          "requires": {
+            "@storybook/channels": "6.5.12",
+            "@storybook/client-logger": "6.5.12",
+            "@storybook/core-events": "6.5.12",
+            "@storybook/csf": "0.0.2--canary.4566f4d.1",
+            "@storybook/router": "6.5.12",
+            "@storybook/semver": "^7.3.2",
+            "@storybook/theming": "6.5.12",
+            "core-js": "^3.8.2",
+            "fast-deep-equal": "^3.1.3",
+            "global": "^4.4.0",
+            "lodash": "^4.17.21",
+            "memoizerific": "^1.11.3",
+            "regenerator-runtime": "^0.13.7",
+            "store2": "^2.12.0",
+            "telejson": "^6.0.8",
+            "ts-dedent": "^2.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/channels": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.12.tgz",
+          "integrity": "sha512-X5XaKbe4b7LXJ4sUakBo00x6pXnW78JkOonHoaKoWsccHLlEzwfBZpVVekhVZnqtCoLT23dB8wjKgA71RYWoiw==",
+          "dev": true,
+          "requires": {
+            "core-js": "^3.8.2",
+            "ts-dedent": "^2.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/client-logger": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.12.tgz",
+          "integrity": "sha512-IrkMr5KZcudX935/C2balFbxLHhkvQnJ78rbVThHDVckQ7l3oIXTh66IMzldeOabVFDZEMiW8AWuGEYof+JtLw==",
+          "dev": true,
+          "requires": {
+            "core-js": "^3.8.2",
+            "global": "^4.4.0"
+          }
+        },
+        "@storybook/components": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.5.12.tgz",
+          "integrity": "sha512-NAAGl5PDXaHdVLd6hA+ttmLwH3zAVGXeUmEubzKZ9bJzb+duhFKxDa9blM4YEkI+palumvgAMm0UgS7ou680Ig==",
+          "dev": true,
+          "requires": {
+            "@storybook/client-logger": "6.5.12",
+            "@storybook/csf": "0.0.2--canary.4566f4d.1",
+            "@storybook/theming": "6.5.12",
+            "core-js": "^3.8.2",
+            "memoizerific": "^1.11.3",
+            "qs": "^6.10.0",
+            "regenerator-runtime": "^0.13.7",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/core-events": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.12.tgz",
+          "integrity": "sha512-0AMyMM19R/lHsYRfWqM8zZTXthasTAK2ExkSRzYi2GkIaVMxRKtM33YRwxKIpJ6KmIKIs8Ru3QCXu1mfCmGzNg==",
+          "dev": true,
+          "requires": {
+            "core-js": "^3.8.2"
+          }
+        },
+        "@storybook/router": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.5.12.tgz",
+          "integrity": "sha512-xHubde9YnBbpkDY5+zGO4Pr6VPxP8H9J2v4OTF3H82uaxCIKR0PKG0utS9pFKIsEiP3aM62Hb9qB8nU+v1nj3w==",
+          "dev": true,
+          "requires": {
+            "@storybook/client-logger": "6.5.12",
+            "core-js": "^3.8.2",
+            "memoizerific": "^1.11.3",
+            "qs": "^6.10.0",
+            "regenerator-runtime": "^0.13.7"
+          }
+        },
+        "@storybook/source-loader": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.12.tgz",
+          "integrity": "sha512-4iuILFsKNV70sEyjzIkOqgzgQx7CJ8kTEFz590vkmWXQNKz7YQzjgISIwL7GBw/myJgeb04bl5psVgY0cbG5vg==",
+          "dev": true,
+          "requires": {
+            "@storybook/addons": "6.5.12",
+            "@storybook/client-logger": "6.5.12",
+            "@storybook/csf": "0.0.2--canary.4566f4d.1",
+            "core-js": "^3.8.2",
+            "estraverse": "^5.2.0",
+            "global": "^4.4.0",
+            "loader-utils": "^2.0.0",
+            "lodash": "^4.17.21",
+            "prettier": ">=2.2.1 <=2.3.0",
+            "regenerator-runtime": "^0.13.7"
+          }
+        },
+        "@storybook/theming": {
+          "version": "6.5.12",
+          "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.12.tgz",
+          "integrity": "sha512-uWOo84qMQ2R6c1C0faZ4Q0nY01uNaX7nXoJKieoiJ6ZqY9PSYxJl1kZLi3uPYnrxLZjzjVyXX8MgdxzbppYItA==",
+          "dev": true,
+          "requires": {
+            "@storybook/client-logger": "6.5.12",
+            "core-js": "^3.8.2",
+            "memoizerific": "^1.11.3",
+            "regenerator-runtime": "^0.13.7"
+          }
+        }
+      }
+    },
     "@storybook/addon-toolbars": {
       "version": "6.5.10",
       "dev": true,
@@ -41450,12 +41973,6 @@
         "lodash": "^4.17.21",
         "prettier": ">=2.2.1 <=2.3.0",
         "ts-dedent": "^2.0.0"
-      },
-      "dependencies": {
-        "prettier": {
-          "version": "2.3.0",
-          "dev": true
-        }
       }
     },
     "@storybook/node-logger": {
@@ -41729,12 +42246,6 @@
         "lodash": "^4.17.21",
         "prettier": ">=2.2.1 <=2.3.0",
         "regenerator-runtime": "^0.13.7"
-      },
-      "dependencies": {
-        "prettier": {
-          "version": "2.3.0",
-          "dev": true
-        }
       }
     },
     "@storybook/store": {
@@ -42297,6 +42808,10 @@
       "version": "1.0.8",
       "dev": true
     },
+    "@types/trusted-types": {
+      "version": "2.0.2",
+      "dev": true
+    },
     "@types/uglify-js": {
       "version": "3.17.0",
       "dev": true,
@@ -46176,8 +46691,6 @@
     },
     "eslint": {
       "version": "8.24.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.24.0.tgz",
-      "integrity": "sha512-dWFaPhGhTAiPcCgm3f6LI2MBWbogMnTJzFBbhXVRQDJPkr9pGZvVjlVfXd+vyDcWPA2Ic9L2AXPIQM0+vk/cSQ==",
       "requires": {
         "@eslint/eslintrc": "^1.3.2",
         "@humanwhocodes/config-array": "^0.10.5",
@@ -46230,9 +46743,7 @@
           "version": "2.0.1"
         },
         "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw=="
+          "version": "2.1.0"
         },
         "chalk": {
           "version": "4.1.2",
@@ -46262,8 +46773,6 @@
         },
         "find-up": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
           "requires": {
             "locate-path": "^6.0.0",
             "path-exists": "^4.0.0"
@@ -46283,8 +46792,6 @@
         },
         "globby": {
           "version": "11.1.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
-          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
           "requires": {
             "array-union": "^2.1.0",
             "dir-glob": "^3.0.1",
@@ -46305,37 +46812,27 @@
         },
         "locate-path": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
           "requires": {
             "p-locate": "^5.0.0"
           }
         },
         "p-limit": {
           "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
           "requires": {
             "yocto-queue": "^0.1.0"
           }
         },
         "p-locate": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
           "requires": {
             "p-limit": "^3.0.2"
           }
         },
         "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+          "version": "4.0.0"
         },
         "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q=="
+          "version": "3.0.0"
         },
         "supports-color": {
           "version": "7.2.0",
@@ -46699,8 +47196,6 @@
     },
     "espree": {
       "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz",
-      "integrity": "sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==",
       "requires": {
         "acorn": "^8.8.0",
         "acorn-jsx": "^5.3.2",
@@ -46708,14 +47203,10 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.8.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz",
-          "integrity": "sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w=="
+          "version": "8.8.0"
         },
         "eslint-visitor-keys": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
-          "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA=="
+          "version": "3.3.0"
         }
       }
     },
@@ -47047,6 +47538,15 @@
         "reusify": "^1.0.4"
       }
     },
+    "fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dev": true,
+      "requires": {
+        "format": "^0.2.0"
+      }
+    },
     "faye-websocket": {
       "version": "0.11.4",
       "requires": {
@@ -47367,6 +47867,12 @@
         "mime-types": "^2.1.12"
       }
     },
+    "format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "dev": true
+    },
     "forwarded": {
       "version": "0.2.0"
     },
@@ -47881,9 +48387,7 @@
       "version": "4.2.10"
     },
     "grapheme-splitter": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
-      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+      "version": "1.0.4"
     },
     "gray-matter": {
       "version": "4.0.3",
@@ -48107,6 +48611,12 @@
       "version": "1.1.0",
       "dev": true
     },
+    "highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true
+    },
     "history": {
       "version": "4.10.1",
       "requires": {
@@ -49091,9 +49601,7 @@
       "version": "2.2.1"
     },
     "js-sdsl": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz",
-      "integrity": "sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw=="
+      "version": "4.1.4"
     },
     "js-string-escape": {
       "version": "1.0.1",
@@ -49279,6 +49787,30 @@
         "uc.micro": "^1.0.1"
       }
     },
+    "lit": {
+      "version": "2.3.1",
+      "dev": true,
+      "requires": {
+        "@lit/reactive-element": "^1.4.0",
+        "lit-element": "^3.2.0",
+        "lit-html": "^2.3.0"
+      }
+    },
+    "lit-element": {
+      "version": "3.2.2",
+      "dev": true,
+      "requires": {
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.2.0"
+      }
+    },
+    "lit-html": {
+      "version": "2.3.1",
+      "dev": true,
+      "requires": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "load-json-file": {
       "version": "4.0.0",
       "requires": {
@@ -49417,6 +49949,16 @@
     "lowercase-keys": {
       "version": "1.0.1"
     },
+    "lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dev": true,
+      "requires": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "requires": {
@@ -51564,6 +52106,12 @@
     "prepend-http": {
       "version": "2.0.0"
     },
+    "prettier": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.0.tgz",
+      "integrity": "sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==",
+      "dev": true
+    },
     "prettier-linter-helpers": {
       "version": "1.0.0",
       "dev": true,
@@ -52201,6 +52749,19 @@
         "react-use": "^15.3.3"
       }
     },
+    "react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      }
+    },
     "react-textarea-autosize": {
       "version": "8.3.4",
       "requires": {
@@ -52430,6 +52991,25 @@
         }
       }
     },
+    "refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dev": true,
+      "requires": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "dependencies": {
+        "prismjs": {
+          "version": "1.27.0",
+          "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+          "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+          "dev": true
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.2"
     },
@@ -54014,6 +54594,19 @@
       "version": "2.14.2",
       "dev": true
     },
+    "storybook-addon-designs": {
+      "version": "6.3.1",
+      "dev": true,
+      "requires": {
+        "@figspec/react": "^1.0.0"
+      }
+    },
+    "storybook-source-link": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/storybook-source-link/-/storybook-source-link-2.0.1.tgz",
+      "integrity": "sha512-zFsxPcYz829iytk5fUmccEpGkzLqw5avSvYMpXCFv+PLqTEZZOQe18pboccpRG9sG0r4vhF+mbjjBS+dykI47g==",
+      "dev": true
+    },
     "stream-browserify": {
       "version": "2.0.2",
       "dev": true,
diff --git a/storybook/.eslintrc.js b/storybook/.eslintrc.js
index d6974c61..7768f30b 100644
--- a/storybook/.eslintrc.js
+++ b/storybook/.eslintrc.js
@@ -3,13 +3,16 @@ module.exports = {
   parser: '@babel/eslint-parser',
   plugins: ['react'],
   ignorePatterns: [
-    'public/**'
+    'public/**',
+    '!.storybook/**'
   ],
   extends: [
     'plugin:sfgov/recommended',
     'plugin:react/recommended'
   ],
   rules: {
-    'react/no-unescaped-entities': ['warn']
+    'react/no-unescaped-entities': ['warn'],
+    'react/prop-types': ['off'],
+    'import/no-unresolved': ['warn']
   }
 }
diff --git a/storybook/.storybook/main.js b/storybook/.storybook/main.js
index 5a3d4f70..9821a5cb 100644
--- a/storybook/.storybook/main.js
+++ b/storybook/.storybook/main.js
@@ -1,18 +1,35 @@
 const { NODE_ENV } = process.env
+const storiesGlob = '**/*.stories.@(js|jsx|ts|tsx)'
 
 /** @type {import('@storybook/core-common').StorybookConfig} */
 module.exports = {
+  framework: '@storybook/react',
   stories: [
-    '../@(docs|stories)/**/*.stories.@(js|jsx|mdx|ts|tsx)'
+    '../docs/**/*.stories.md{,x}',
+    {
+      directory: '../stories/components',
+      titlePrefix: 'Components/',
+      files: storiesGlob
+    },
+    {
+      directory: '../stories/experiments',
+      titlePrefix: 'Experiments/',
+      files: storiesGlob
+    }
   ],
-  framework: '@storybook/react',
   core: {
     builder: '@storybook/builder-webpack5'
   },
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions'
+    'storybook-source-link',
+    '@storybook/addon-storysource',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false
+      }
+    },
+    'storybook-addon-designs'
   ],
 
   env: config => ({
diff --git a/storybook/.storybook/preview.jsx b/storybook/.storybook/preview.jsx
index dccf65a4..ef493615 100644
--- a/storybook/.storybook/preview.jsx
+++ b/storybook/.storybook/preview.jsx
@@ -1,37 +1,39 @@
-import React from 'react'
 import { addParameters } from '@storybook/react'
+import { withClasses, getDocsBaseUrl } from '../src/utils'
 
 /**
  * These are styles applied only to the preview panel.
  */
-/* eslint-disable import/no-unresolved -- FIXME: fails in CI */
+import 'sfgov-design-system'
 import 'sfgov-design-system/dist/css/sfds.css'
 import 'sfgov-design-system/dist/css/fonts.css'
-/* eslint-enable */
 
 addParameters({
-  options: {
-    storySort: {
-      method: 'alphabetical',
-      order: [
-        '*',
-        'Components',
-        'Experiments',
-        'Internal',
-        'Docusaurus'
-      ]
+  design: {
+    name: 'Figma',
+    type: 'figma'
+  },
+  sourceLinkPrefix: getDocsBaseUrl(),
+  previewTabs: {
+    'storybook/docs/panel': {
+      hidden: true
     }
   },
   docs: {
     components: {
-      wrapper: props => 
,
-      h1: props => 
,
-      h2: props => 
,
-      p: props => 
,
-      ol: props => 
    ,
-      ul: props =>