From 3d8cc33443a3cf79738663c83b3240654a4a9295 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Tue, 16 Jul 2024 15:52:24 -0700
Subject: [PATCH] chore: consolidate components and docs into one Storybook
 (#494)

* converting remaining mdx files

* changing all primary story names to default to prep for docs migration

* adding overview pages in storybook

* changing name of Default story to BaseStory

* adding form components

* reorganizing stories

* fixing heroes overview

* updating storybook to v8.2.4
---
 apps/html-storybook/package.json              |  25 +-
 .../.storybook/manager-head.html              |   6 -
 apps/vue-storybook/.storybook/preview.ts      |  18 +-
 apps/vue-storybook/package.json               |  19 +-
 packages/vue/components.d.ts                  |   2 +
 .../AsteroidWatchWidget.stories.js            |   4 +-
 .../components/BackToTop/BackToTop.stories.js |   6 +-
 .../components/BaseAudio/BaseAudio.stories.js |   2 +-
 .../BaseButton/BaseButton.stories.ts          |   5 +-
 .../BaseCheckboxGroup.stories.js              |  39 +
 .../BaseCheckboxGroup.stories.mdx             |  68 --
 .../BaseHeading/BaseHeading.stories.js        |   4 +-
 .../components/BaseImage/BaseImage.stories.ts |   2 +-
 .../BaseImageCaption.stories.js               |   2 +-
 .../BaseImagePlaceholder.stories.js           |   4 +-
 .../components/BaseLink/BaseLink.stories.js   |   5 +-
 .../components/BaseModal/BaseModal.stories.js |   4 +-
 .../BasePlaceholder.stories.js                |   6 +-
 .../BaseRadioGroup/BaseRadioGroup.stories.js  |  47 +
 .../BaseRadioGroup/BaseRadioGroup.stories.mdx |  68 --
 .../BaseSwimlane/BaseSwimlane.stories.js      |  45 +
 .../BaseSwimlane/BaseSwimlane.stories.mdx     |  64 --
 .../src/components/BaseTag/BaseTag.stories.js |   2 +-
 .../components/BaseTimer/BaseTimer.stories.js |   3 +-
 .../BaseUnitToggle/BaseUnitToggle.stories.js  |   3 +-
 .../components/BaseVideo/BaseVideo.stories.js |   2 +-
 .../BlockAudio/BlockAudio.stories.js          |   2 +-
 .../components/BlockCard/BlockCard.stories.js |   2 +-
 .../BlockCardGroup/BlockCardGroup.stories.js  |   2 +-
 .../BlockCircleImageCard.stories.js           |   2 +-
 .../components/BlockCta/BlockCta.stories.js   |   2 +-
 .../BlockHeading/BlockHeading.stories.js      |   2 +-
 .../BlockIframeEmbed.stories.js               |   2 +-
 .../BlockImage/BlockImage.stories.js          |   5 +-
 .../BlockImageCarousel.stories.js             |   2 +-
 .../BlockImageCarouselItem.stories.js         |   2 +-
 .../BlockImageComparison.stories.js           |   2 +-
 .../BlockImageGallery.stories.js              |   2 +-
 .../BlockInlineImage.stories.js               |   3 +-
 .../BlockKeyPoints/BlockKeyPoints.stories.js  |   2 +-
 .../BlockLinkCard/BlockLinkCard.stories.js    |   3 +-
 .../BlockLinkCarousel.stories.js              |   3 +-
 .../BlockLinkTile/BlockLinkTile.stories.js    |   3 +-
 .../BlockListCards/BlockListCards.stories.js  |   2 +-
 .../BlockQuote/BlockQuote.stories.js          |   4 +-
 .../BlockRelatedLinks.stories.js              |   2 +-
 .../BlockStreamfield.stories.js               |   2 +-
 .../BlockTable/BlockTable.stories.js          |   2 +-
 .../BlockTeaser/BlockTeaser.stories.js        |   2 +-
 .../components/BlockText/BlockText.stories.js |   2 +-
 .../BlockTwitterEmbed.stories.js              |   2 +-
 .../BlockVideo/BlockVideo.stories.js          |   2 +-
 .../BlockVideoEmbed.stories.js                |   2 +-
 .../CalendarButton/CalendarButton.stories.js  |   6 +-
 .../DetailHeadline/DetailHeadline.stories.js  |   4 +-
 .../components/DsnWidget/DsnWidget.stories.js |   4 +-
 .../EventDetailHero.stories.js                |   4 +-
 .../FormContact/FormContact.stories.js        |   6 +-
 .../components/FormContact/FormContact.vue    | 123 +--
 .../FormNewsletterSignup.stories.js           |   6 +-
 .../FormNewsletterSignup.vue                  | 129 +--
 .../components/HeroLarge/HeroLarge.stories.js |   2 +-
 .../HeroListingIndex.stories.js               |   2 +-
 .../components/HeroMedia/HeroMedia.stories.js |   9 +-
 .../HeroMedium/HeroMedium.stories.js          |  12 +-
 .../src/components/HeroMedium/HeroMedium.vue  |  25 +-
 .../HeroMedium/HeroSmall.stories.js           |  57 ++
 .../HomepageCarousel.stories.js               |   5 +-
 .../HomepageCarouselItem.stories.js           |   5 +-
 .../HomepageEmbedBlock.stories.js             |   4 +-
 .../HomepageFeaturedRobot.stories.js          |   5 +-
 .../HomepageMissionsCarousel.stories.js       |   4 +-
 .../HomepageStats/HomepageStats.stories.js    |   6 +-
 .../HomepageTeaserBlock.stories.js            |   7 +-
 .../vue/src/components/Icons/Icons.stories.ts |   2 +-
 .../LogoCaltech/LogoCaltech.stories.js        |   8 +-
 .../LogoTribrand/LogoTribrand.stories.js      |  11 +-
 .../MissionDetailAbout.stories.js             |   4 +-
 .../MissionDetailHero.stories.js              |   5 +-
 .../MissionDetailHighlights.stories.js        |   5 +-
 .../MissionDetailInlineImage.stories.js       |   4 +-
 .../MissionDetailStats.stories.js             |   5 +-
 .../MissionDetailStreamfield.stories.js       |   4 +-
 .../MixinAnimationCaret.stories.ts            |   4 +-
 .../MixinCarousel/MixinCarousel.stories.js    |   6 +-
 .../MixinVideoBg/MixinVideoBg.stories.js      |  14 +-
 .../NavDesktop/NavDesktop.stories.js          |   5 +-
 .../NavHeading/NavHeading.stories.js          |   4 +-
 .../NavHighlight/NavHighlight.stories.js      |   4 +-
 .../NavLinkList/NavLinkList.stories.js        |   4 +-
 .../NavLogoLinks/NavLogoLinks.stories.js      |   4 +-
 .../components/NavMobile/NavMobile.stories.js |   5 +-
 .../NavSearchForm/NavSearchForm.stories.js    |   4 +-
 .../NavSecondary/NavSecondary.stories.js      |   4 +-
 .../components/NavSocial/NavSocial.stories.js |   6 +-
 .../NewsDetailMediaContact.stories.js         |   4 +-
 .../ParallaxContainer.stories.js              |   8 +-
 .../PodcastSeriesCarousel.stories.js          |   4 +-
 .../RoboticsDetailStats.stories.js            |   4 +-
 .../SearchFilterGroup.stories.js              |   3 +-
 .../SearchInput/SearchInput.stories.js        |   2 +-
 .../components/SearchInput/SearchInput.vue    |  72 +-
 .../SearchPagination.stories.js               |   3 +-
 .../SearchResultCard.stories.js               |   2 +-
 .../SearchResultGridItem.stories.js           |   3 +-
 .../SearchSelectMenu.stories.js               |   2 +-
 .../ShareButtons/ShareButtons.stories.js      |   4 +-
 .../ShareButtonsEdu.stories.js                |   4 +-
 .../components/SkipLink/SkipLink.stories.js   |   4 +-
 .../SwimlaneCTA/SwimlaneCTA.stories.js        |  57 ++
 .../SwimlaneCTA/SwimlaneCTA.stories.mdx       |  77 --
 .../components/SwimlaneCTA/SwimlaneCTA.vue    |  17 +-
 .../components/TextArea/TextArea.stories.js   |  28 +
 .../vue/src/components/TextArea/TextArea.vue  |  74 ++
 .../components/TextInput/TextInput.stories.js |  30 +
 .../src/components/TextInput/TextInput.vue    |  87 ++
 .../components/TheFooter/TheFooter.stories.js |  11 +-
 .../ThumbnailCarousel.stories.js              |   4 +-
 .../TopicDetailMissionCarousel.stories.js     |   4 +-
 .../TopicDetailMissionCarouselItem.stories.js |   4 +-
 .../TopicDetailMissionSpotlight.stories.js    |   4 +-
 .../TopicDetailMore.stories.js                |   4 +-
 .../TopicDetailMoreItem.stories.js            |   4 +-
 .../TopicDetailStreamfield.stories.js         |   4 +-
 .../YearTicker/YearTicker.stories.js          |   6 +-
 .../vue/src/docs/foundation/color.docs.mdx    |   2 +-
 .../vue/src/docs/foundation/grid.stories.js   |   2 +-
 .../foundation/grid_layouthelpers.stories.js  |   2 +-
 .../vue/src/docs/foundation/themes.stories.js |   2 +-
 .../src/docs/foundation/typography.stories.js |   5 +-
 .../docs/getting-started/designer.docs.mdx    |  18 +
 .../docs/getting-started/developer.docs.mdx   |  81 ++
 .../src/docs/guides/accessibility.docs.mdx    |  39 +
 .../vue/src/docs/guides/responsive.docs.mdx   |  67 ++
 .../vue/src/docs/guides/responsive.stories.js |  36 +
 packages/vue/src/docs/introduction.docs.mdx   |  42 +
 packages/vue/src/docs/overviews/base.docs.mdx |  88 ++
 .../docs/overviews/blocks.docs.mdx.disabled   | 185 ++++
 .../src/docs/overviews/components.docs.mdx    |  48 +
 .../vue/src/docs/overviews/forms.docs.mdx     |  59 ++
 .../vue/src/docs/overviews/global.docs.mdx    |  15 +
 .../docs/overviews/global_footers.docs.mdx    |  21 +
 .../docs/overviews/global_headers.docs.mdx    |  21 +
 .../vue/src/docs/overviews/heroes.docs.mdx    |  48 +
 .../vue/src/docs/overviews/mixins.docs.mdx    |  39 +
 .../vue/src/docs/overviews/search.docs.mdx    |  30 +
 .../vue/src/docs/overviews/utilities.docs.mdx |  22 +
 packages/vue/src/docs/roadmap.docs.mdx        |  25 +
 packages/vue/src/docs/utils/ComponentItem.jsx | 102 ++
 packages/vue/src/docs/utils/ComponentList.jsx |  17 +
 .../PageContent/PageContent.stories.js        |   2 +-
 .../PageEventDetail.stories.js                |   2 +-
 .../PageNewsDetail/PageNewsDetail.stories.js  |  16 +-
 .../edu/PageEduNewsDetail.stories.js          |   6 +-
 pnpm-lock.yaml                                | 879 +++++-------------
 155 files changed, 2109 insertions(+), 1401 deletions(-)
 create mode 100644 packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.js
 delete mode 100644 packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx
 create mode 100644 packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.js
 delete mode 100644 packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.mdx
 create mode 100644 packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.js
 delete mode 100644 packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.mdx
 create mode 100644 packages/vue/src/components/HeroMedium/HeroSmall.stories.js
 create mode 100644 packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.js
 delete mode 100644 packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.mdx
 create mode 100644 packages/vue/src/components/TextArea/TextArea.stories.js
 create mode 100644 packages/vue/src/components/TextArea/TextArea.vue
 create mode 100644 packages/vue/src/components/TextInput/TextInput.stories.js
 create mode 100644 packages/vue/src/components/TextInput/TextInput.vue
 create mode 100644 packages/vue/src/docs/getting-started/designer.docs.mdx
 create mode 100644 packages/vue/src/docs/getting-started/developer.docs.mdx
 create mode 100644 packages/vue/src/docs/guides/accessibility.docs.mdx
 create mode 100644 packages/vue/src/docs/guides/responsive.docs.mdx
 create mode 100644 packages/vue/src/docs/guides/responsive.stories.js
 create mode 100644 packages/vue/src/docs/introduction.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/base.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/blocks.docs.mdx.disabled
 create mode 100644 packages/vue/src/docs/overviews/components.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/forms.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/global.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/global_footers.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/global_headers.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/heroes.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/mixins.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/search.docs.mdx
 create mode 100644 packages/vue/src/docs/overviews/utilities.docs.mdx
 create mode 100644 packages/vue/src/docs/roadmap.docs.mdx
 create mode 100644 packages/vue/src/docs/utils/ComponentItem.jsx
 create mode 100644 packages/vue/src/docs/utils/ComponentList.jsx

diff --git a/apps/html-storybook/package.json b/apps/html-storybook/package.json
index 9233e398..cc6f6836 100644
--- a/apps/html-storybook/package.json
+++ b/apps/html-storybook/package.json
@@ -26,7 +26,8 @@
     "lint:fix": "eslint .storybook --fix",
     "build": "pnpm run prepare && storybook build -c .storybook -o storybook_compiled",
     "percy": "percy storybook http://localhost:7007",
-    "percy:dry-run": "percy storybook http://localhost:7007 --dry-run"
+    "percy:dry-run": "percy storybook http://localhost:7007 --dry-run",
+    "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
@@ -41,16 +42,16 @@
     "@percy/cli": "^1.28.6",
     "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-docs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-viewport": "^8.2.1",
-    "@storybook/html": "^8.2.1",
-    "@storybook/html-vite": "^8.2.1",
-    "@storybook/manager-api": "^8.2.1",
-    "@storybook/preview-api": "^8.2.1",
-    "@storybook/theming": "^8.2.1",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-docs": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/addon-links": "^8.2.4",
+    "@storybook/addon-viewport": "^8.2.4",
+    "@storybook/html": "^8.2.4",
+    "@storybook/html-vite": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/preview-api": "^8.2.4",
+    "@storybook/theming": "^8.2.4",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
     "npm-run-all": "^4.1.5",
@@ -58,7 +59,7 @@
     "postcss-import": "^16.1.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.4",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
diff --git a/apps/vue-storybook/.storybook/manager-head.html b/apps/vue-storybook/.storybook/manager-head.html
index db1aee5f..d5f24a75 100644
--- a/apps/vue-storybook/.storybook/manager-head.html
+++ b/apps/vue-storybook/.storybook/manager-head.html
@@ -12,13 +12,7 @@
     color: inherit !important;
   }
 
-  /* www should be in uppercase */
-  .sidebar-item#www {
-    text-transform: uppercase;
-  }
-
   /* create illusion of hrs between sidebar sections */
-  .sidebar-item#www,
   .sidebar-item#appendix {
     border-radius: 0;
     border-top: 2px solid rgba(0, 0, 0, 0.1);
diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
index d94d85c6..1f16bf37 100644
--- a/apps/vue-storybook/.storybook/preview.ts
+++ b/apps/vue-storybook/.storybook/preview.ts
@@ -104,7 +104,7 @@ const preview: Preview = {
           'Getting Started',
           ['Developer'],
           'Guides',
-          'Foundation',
+          'Foundations',
           [
             'Colors',
             'Typography',
@@ -112,8 +112,18 @@ const preview: Preview = {
             'Logos',
             'Themes',
             'Grid and Layout',
+            ['Docs'],
             'Responsive Design'
           ],
+          'Navigation',
+          [
+            'Overview',
+            'Headers',
+            ['Overview', 'WWW'],
+            'Footers',
+            ['Overview', 'WWW'],
+            'Secondary Navigation'
+          ],
           'Global Layout',
           [
             'Overview',
@@ -139,7 +149,7 @@ const preview: Preview = {
             'Blocks',
             ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
             'Heroes',
-            ['*', 'HeroMedia', 'HeroListingIndex'],
+            ['Overview', 'HeroSmall', 'HeroMedium', 'HeroLarge', 'HeroMedia', 'HeroListingIndex'],
             'Forms',
             ['Overview', 'TextInput', 'TextArea'],
             'Search',
@@ -149,7 +159,9 @@ const preview: Preview = {
             'Utilities',
             ['Overview', '*'],
             'EDU'
-          ]
+          ],
+          'Mixins',
+          ['Overview']
         ]
       }
     }
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 598d281f..8b750405 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -29,7 +29,8 @@
     "start": "http-server storybook_compiled -p 6006 -c-1 -s",
     "test": "test-storybook --stories-json --maxWorkers=4",
     "test:cross-browser": "test-storybook --stories-json --verbose --maxWorkers=4 --browsers chromium webkit firefox",
-    "test:ci": "test-storybook --stories-json --maxWorkers=4"
+    "test:ci": "test-storybook --stories-json --maxWorkers=4",
+    "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
     "@explorer-1/common": "workspace:*",
@@ -49,13 +50,15 @@
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/blocks": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/preview-api": "^8.2.4",
     "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.2.1",
-    "@storybook/vue3": "^8.2.1",
-    "@storybook/vue3-vite": "^8.2.1",
+    "@storybook/theming": "^8.2.4",
+    "@storybook/vue3": "^8.2.4",
+    "@storybook/vue3-vite": "^8.2.4",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
@@ -69,7 +72,7 @@
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.4",
     "storybook-addon-vue-slots": "^0.9.29",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
diff --git a/packages/vue/components.d.ts b/packages/vue/components.d.ts
index fb0c4dac..89ad7910 100644
--- a/packages/vue/components.d.ts
+++ b/packages/vue/components.d.ts
@@ -200,6 +200,8 @@ declare module 'vue' {
     ShareButtonsEdu: typeof import('./src/components/ShareButtonsEdu/ShareButtonsEdu.vue')['default']
     SkipLink: typeof import('./src/components/SkipLink/SkipLink.vue')['default']
     SwimlaneCTA: typeof import('./src/components/SwimlaneCTA/SwimlaneCTA.vue')['default']
+    TextArea: typeof import('./src/components/TextArea/TextArea.vue')['default']
+    TextInput: typeof import('./src/components/TextInput/TextInput.vue')['default']
     TheFooter: typeof import('./src/components/TheFooter/TheFooter.vue')['default']
     TheFooterSignUp: typeof import('./src/components/TheFooter/TheFooterSignUp.vue')['default']
     ThumbnailCarousel: typeof import('./src/components/ThumbnailCarousel/ThumbnailCarousel.vue')['default']
diff --git a/packages/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js b/packages/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js
index 9524193a..d3e30690 100644
--- a/packages/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js
+++ b/packages/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js
@@ -1,7 +1,7 @@
 import AsteroidWatchWidget from './AsteroidWatchWidget.vue'
 
 export default {
-  title: 'Components/AsteroidWatchWidget',
+  title: 'Components/WWW/AsteroidWatchWidget',
   component: AsteroidWatchWidget,
   excludeStories: /.*Data$/,
   decorators: [
@@ -151,6 +151,6 @@ export const AsteroidWatchWidgetData = {
   ]
 }
 
-export const Base = {
+export const BaseStory = {
   args: AsteroidWatchWidgetData
 }
diff --git a/packages/vue/src/components/BackToTop/BackToTop.stories.js b/packages/vue/src/components/BackToTop/BackToTop.stories.js
index 90072927..5bd59492 100644
--- a/packages/vue/src/components/BackToTop/BackToTop.stories.js
+++ b/packages/vue/src/components/BackToTop/BackToTop.stories.js
@@ -16,9 +16,9 @@ const BackToTopTemplate = (args) => ({
   `
 })
 
-export const Default = BackToTopTemplate.bind({})
-Default.storyName = 'BackToTop'
-Default.args = {
+export const BaseStory = BackToTopTemplate.bind({})
+BaseStory.storyName = 'BackToTop'
+BaseStory.args = {
   threshhold: 300,
   scrollTo: 0
 }
diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.stories.js b/packages/vue/src/components/BaseAudio/BaseAudio.stories.js
index e0222265..e00e4863 100644
--- a/packages/vue/src/components/BaseAudio/BaseAudio.stories.js
+++ b/packages/vue/src/components/BaseAudio/BaseAudio.stories.js
@@ -23,7 +23,7 @@ export const BaseAudioData = {
   loop: false
 }
 
-export const Base = {
+export const BaseStory = {
   name: 'BaseAudio', // single story hoisting
   args: BaseAudioData
 }
diff --git a/packages/vue/src/components/BaseButton/BaseButton.stories.ts b/packages/vue/src/components/BaseButton/BaseButton.stories.ts
index fbf1ae39..8ab0f251 100644
--- a/packages/vue/src/components/BaseButton/BaseButton.stories.ts
+++ b/packages/vue/src/components/BaseButton/BaseButton.stories.ts
@@ -8,7 +8,7 @@ export default {
   tags: ['autodocs'],
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     docs: {
       description: {
@@ -45,7 +45,8 @@ export const BaseButtonData = {
   default: 'Button'
 }
 
-export const PrimaryButton = {
+export const BaseStory = {
+  name: 'Primary Button',
   args: {
     ...BaseButtonData,
     variant: 'primary'
diff --git a/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.js b/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.js
new file mode 100644
index 00000000..376b863f
--- /dev/null
+++ b/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.js
@@ -0,0 +1,39 @@
+import BaseCheckboxGroup from './BaseCheckboxGroup.vue'
+
+export default {
+  title: 'Components/Base/BaseCheckboxGroup',
+  component: BaseCheckboxGroup
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    options: [
+      {
+        id: 'educators',
+        title: 'Educators',
+        text: null
+      },
+      {
+        id: 'educator-workshop',
+        title: 'Educators Workshops',
+        text: 'Southern California'
+      },
+      {
+        id: 'students',
+        title: 'Students K-12',
+        text: null
+      },
+      {
+        id: 'internships',
+        title: 'Internships',
+        text: null
+      }
+    ],
+    group: 'edumail',
+    heading: 'JPL Education Groups',
+    subHeading:
+      'The JPL Education Office also offers email updates about classroom activities and workshops for educators, projects and competitons for K-12 students and internship opportunities at JPL and NASA.',
+    title: 'Education Email Groups'
+  }
+}
diff --git a/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx b/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx
deleted file mode 100644
index 2010b82e..00000000
--- a/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import BaseCheckboxGroup from './BaseCheckboxGroup.vue'
-
-<Meta
-  title="Components/Base/BaseCheckboxGroup"
-  component={BaseCheckboxGroup}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const BaseCheckboxGroupData = {
-  options: [
-    {
-      id: 'educators',
-      title: 'Educators',
-      text: null
-    },
-    {
-      id: 'educator-workshop',
-      title: 'Educators Workshops',
-      text: 'Southern California'
-    },
-    {
-      id: 'students',
-      title: 'Students K-12',
-      text: null
-    },
-    {
-      id: 'internships',
-      title: 'Internships',
-      text: null
-    }
-  ],
-  group: 'edumail',
-  heading: 'JPL Education Groups',
-  subHeading:
-    'The JPL Education Office also offers email updates about classroom activities and workshops for educators, projects and competitons for K-12 students and internship opportunities at JPL and NASA.',
-  title: 'Education Email Groups'
-}
-
-export const BaseCheckboxGroupTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BaseCheckboxGroup },
-  template: `<BaseCheckboxGroup :options="options" :group="group" :heading="heading" :sub-heading="subHeading" :title="title"
-></BaseCheckboxGroup>`
-})
-
-# Base Checkbox Group
-
-## Usage
-
-The BaseCheckboxGroup component is expected to contain an array of options and a grouping name with the goal of selecting multiple options.
-
-<Canvas>
-  <Story
-    name="Default"
-    args={BaseCheckboxGroupData}
-  >
-    {BaseCheckboxGroupTemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={BaseCheckboxGroup} />
-
-## Example data
-
-<code language="json">{JSON.stringify(BaseCheckboxGroupData, null, 2)}</code>
diff --git a/packages/vue/src/components/BaseHeading/BaseHeading.stories.js b/packages/vue/src/components/BaseHeading/BaseHeading.stories.js
index c312a70f..3d2367c9 100644
--- a/packages/vue/src/components/BaseHeading/BaseHeading.stories.js
+++ b/packages/vue/src/components/BaseHeading/BaseHeading.stories.js
@@ -23,7 +23,7 @@ export default {
   },
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     viewMode: 'docs',
     docs: {
@@ -36,7 +36,7 @@ export default {
 }
 
 // stories
-export const H1 = {
+export const BaseStory = {
   name: 'H1',
   args: { size: 'h1', level: 'h1', default: 'Heading 1' }
 }
diff --git a/packages/vue/src/components/BaseImage/BaseImage.stories.ts b/packages/vue/src/components/BaseImage/BaseImage.stories.ts
index c1be25f5..8a9a39c5 100644
--- a/packages/vue/src/components/BaseImage/BaseImage.stories.ts
+++ b/packages/vue/src/components/BaseImage/BaseImage.stories.ts
@@ -31,7 +31,7 @@ export const BaseImageData = {
   objectFitClass: 'contain'
 }
 // stories
-export const Default = {
+export const BaseStory = {
   args: BaseImageData,
   decorators: [() => ({ template: '<div class="max-w-full"><story /></div>' })]
 }
diff --git a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.stories.js b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.stories.js
index 81862d5c..b1f81d14 100644
--- a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.stories.js
+++ b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.stories.js
@@ -20,7 +20,7 @@ export const BaseImageCaptionData = {
   detailUrl: '/image-detail/slug/'
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: BaseImageCaptionData
   }
diff --git a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js
index 393e5212..9960e4cf 100644
--- a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js
+++ b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js
@@ -42,6 +42,7 @@ export const BaseImagePlaceholderData = {
 }
 
 export const WithImage = {
+  name: 'With Image',
   args: {
     ...BaseImagePlaceholderData,
     BaseImageProps: {
@@ -55,7 +56,8 @@ export const WithImage = {
     }
   }
 }
-export const NoImage = {
+export const BaseStory = {
+  name: 'No Image',
   args: {
     ...BaseImagePlaceholderData,
     BaseImageProps: {
diff --git a/packages/vue/src/components/BaseLink/BaseLink.stories.js b/packages/vue/src/components/BaseLink/BaseLink.stories.js
index 2d2f6638..883a9256 100644
--- a/packages/vue/src/components/BaseLink/BaseLink.stories.js
+++ b/packages/vue/src/components/BaseLink/BaseLink.stories.js
@@ -4,7 +4,7 @@ export default {
   component: BaseLink,
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     }
   },
   argTypes: {
@@ -27,7 +27,8 @@ export const BaseLinkData = {
 }
 
 // stories
-export const Primary = {
+export const BaseStory = {
+  name: 'Primary',
   args: { ...BaseLinkData }
 }
 
diff --git a/packages/vue/src/components/BaseModal/BaseModal.stories.js b/packages/vue/src/components/BaseModal/BaseModal.stories.js
index 16d81c6b..ccb25402 100644
--- a/packages/vue/src/components/BaseModal/BaseModal.stories.js
+++ b/packages/vue/src/components/BaseModal/BaseModal.stories.js
@@ -71,8 +71,8 @@ export const BaseModalDialogData = {
 }
 
 // stories
-export const Default = BaseModalTemplate.bind({})
-Default.args = { ...BaseModalData }
+export const BaseStory = BaseModalTemplate.bind({})
+BaseStory.args = { ...BaseModalData }
 
 export const CustomTrigger = BaseModalWithTriggerTemplate.bind({})
 CustomTrigger.args = { ...BaseModalData }
diff --git a/packages/vue/src/components/BasePlaceholder/BasePlaceholder.stories.js b/packages/vue/src/components/BasePlaceholder/BasePlaceholder.stories.js
index 034d0d70..d6836668 100644
--- a/packages/vue/src/components/BasePlaceholder/BasePlaceholder.stories.js
+++ b/packages/vue/src/components/BasePlaceholder/BasePlaceholder.stories.js
@@ -24,6 +24,6 @@ const BasePlaceholderTemplate = (args) => ({
   template: `<div><BasePlaceholder /></div>`
 })
 
-export const Base = BasePlaceholderTemplate.bind({})
-Base.storyName = 'BasePlaceholder' // single story hoisting
-Base.args = { ...BasePlaceholderData }
+export const BaseStory = BasePlaceholderTemplate.bind({})
+BaseStory.storyName = 'BasePlaceholder' // single story hoisting
+BaseStory.args = { ...BasePlaceholderData }
diff --git a/packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.js b/packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.js
new file mode 100644
index 00000000..912b3fa7
--- /dev/null
+++ b/packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.js
@@ -0,0 +1,47 @@
+import BaseRadioGroup from './BaseRadioGroup.vue'
+
+export default {
+  title: 'Components/Base/BaseRadioGroup',
+  component: BaseRadioGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The BaseRadioGroup component is expected to contain an array of options and a grouping name with the goal of selecting a single option.'
+      }
+    }
+  }
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    options: [
+      {
+        id: 'breaking',
+        title: 'Breaking News',
+        text: 'All JPL News delivered immediately'
+      },
+      {
+        id: 'daily',
+        title: 'Daily News',
+        text: 'Single Daily JPL News summary'
+      },
+      {
+        id: 'weekly',
+        title: 'Weekly News',
+        text: 'Single Weekly JPL News summary'
+      },
+      {
+        id: 'monthly',
+        title: 'Monthly News',
+        text: 'Monthly Digest for JPL News'
+      }
+    ],
+    group: 'email',
+    preselected: 'breaking',
+    heading: 'JPL Forms',
+    subHeading: 'Choose how frequently you want to receive updates (opt out anytime):',
+    title: 'Email Groups'
+  }
+}
diff --git a/packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.mdx b/packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.mdx
deleted file mode 100644
index 12d00b0d..00000000
--- a/packages/vue/src/components/BaseRadioGroup/BaseRadioGroup.stories.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import BaseRadioGroup from './BaseRadioGroup.vue'
-
-<Meta
-  title="Components/Base/BaseRadioGroup"
-  component={BaseRadioGroup}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const BaseRadioGroupData = {
-  options: [
-    {
-      id: 'breaking',
-      title: 'Breaking News',
-      text: 'All JPL News delivered immediately'
-    },
-    {
-      id: 'daily',
-      title: 'Daily News',
-      text: 'Single Daily JPL News summary'
-    },
-    {
-      id: 'weekly',
-      title: 'Weekly News',
-      text: 'Single Weekly JPL News summary'
-    },
-    {
-      id: 'monthly',
-      title: 'Monthly News',
-      text: 'Monthly Digest for JPL News'
-    }
-  ],
-  group: 'email',
-  preselected: 'breaking',
-  heading: 'JPL Forms',
-  subHeading: 'Choose how frequently you want to receive updates (opt out anytime):',
-  title: 'Email Groups'
-}
-
-export const BaseRadioGroupTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BaseRadioGroup },
-  template: `<BaseRadioGroup :options="options" :group="group" :preselected="preselected" :heading="heading" :sub-heading="subHeading" :title="title"
-></BaseRadioGroup>`
-})
-
-# Base Radio Group
-
-## Usage
-
-The BaseRadioGroup component is expected to contain an array of options and a grouping name with the goal of selecting a single option.
-
-<Canvas>
-  <Story
-    name="Default"
-    args={BaseRadioGroupData}
-  >
-    {BaseRadioGroupTemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={BaseRadioGroup} />
-
-## Example data
-
-<code language="json">{JSON.stringify(BaseRadioGroupData, null, 2)}</code>
diff --git a/packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.js b/packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.js
new file mode 100644
index 00000000..c01204aa
--- /dev/null
+++ b/packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.js
@@ -0,0 +1,45 @@
+import BaseSwimlane from './BaseSwimlane.vue'
+
+export default {
+  title: 'Components/Base/BaseSwimlane',
+  component: BaseSwimlane,
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component: `The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through.`
+      }
+    }
+  }
+}
+
+export const BaseSwimlaneData = {
+  words: [
+    'Artists',
+    'Communicators',
+    'Designers',
+    'Disruptors',
+    'Dreamers',
+    'Educators',
+    'Engineers',
+    'Innovators',
+    'Inventors',
+    'Makers',
+    'Problem Solvers',
+    'Roboticists',
+    'Scientists',
+    'Software Engineers',
+    'Thinkers',
+    'Visualizers'
+  ],
+  rows: 9,
+  scale: 2,
+  transition: 'ease-out',
+  transitionDuration: 1800,
+  transitionDelay: 800
+}
+
+// stories
+export const BaseStory = {
+  args: BaseSwimlaneData
+}
diff --git a/packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.mdx b/packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.mdx
deleted file mode 100644
index d465758a..00000000
--- a/packages/vue/src/components/BaseSwimlane/BaseSwimlane.stories.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import BaseSwimlane from './BaseSwimlane.vue'
-
-<Meta
-  title="Components/Base/BaseSwimlane"
-  component={BaseSwimlane}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const BaseSwimlaneData = {
-  words: [
-    'Artists',
-    'Communicators',
-    'Designers',
-    'Disruptors',
-    'Dreamers',
-    'Educators',
-    'Engineers',
-    'Innovators',
-    'Inventors',
-    'Makers',
-    'Problem Solvers',
-    'Roboticists',
-    'Scientists',
-    'Software Engineers',
-    'Thinkers',
-    'Visualizers'
-  ],
-  rows: 9,
-  scale: 2,
-  transition: 'ease-out',
-  transitionDuration: 1800,
-  transitionDelay: 800
-}
-
-export const BaseSwimlaneTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BaseSwimlane },
-  template: `<BaseSwimlane :words="words" :rows="rows" :scale="scale" :transition="transition" :transition-duration="transitionDuration" :transition-delay="transitionDelay"
-></BaseSwimlane>`
-})
-
-# Base Swimlane
-
-## Usage
-
-The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through.
-
-<Canvas>
-  <Story
-    name="Default"
-    args={BaseSwimlaneData}
-  >
-    {BaseSwimlaneTemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={BaseSwimlane} />
-
-## Example data
-
-<code language="json">{JSON.stringify(BaseSwimlaneData, null, 2)}</code>
diff --git a/packages/vue/src/components/BaseTag/BaseTag.stories.js b/packages/vue/src/components/BaseTag/BaseTag.stories.js
index 5e3a9256..cfb8b4b4 100644
--- a/packages/vue/src/components/BaseTag/BaseTag.stories.js
+++ b/packages/vue/src/components/BaseTag/BaseTag.stories.js
@@ -19,7 +19,7 @@ export default {
   },
   parameters: {
     slots: {
-      default: 'Default slot'
+      default: 'BaseStory slot'
     }
   }
 }
diff --git a/packages/vue/src/components/BaseTimer/BaseTimer.stories.js b/packages/vue/src/components/BaseTimer/BaseTimer.stories.js
index 02288bef..2046020a 100644
--- a/packages/vue/src/components/BaseTimer/BaseTimer.stories.js
+++ b/packages/vue/src/components/BaseTimer/BaseTimer.stories.js
@@ -5,7 +5,8 @@ export default {
   component: BaseTimer
 }
 
-export const FullDateTime = {
+export const BaseStory = {
+  name: 'Full Date Time',
   args: {
     targetDateTime: '2011-11-26 15:02:21+01:00',
     selectedUnits: ['years', 'months', 'days', 'hours', 'minutes', 'seconds'],
diff --git a/packages/vue/src/components/BaseUnitToggle/BaseUnitToggle.stories.js b/packages/vue/src/components/BaseUnitToggle/BaseUnitToggle.stories.js
index 624cc24e..1041335b 100644
--- a/packages/vue/src/components/BaseUnitToggle/BaseUnitToggle.stories.js
+++ b/packages/vue/src/components/BaseUnitToggle/BaseUnitToggle.stories.js
@@ -42,7 +42,8 @@ Imperial.args = {
   valueSystem: 'imperial'
 }
 
-export const Metric = {
+export const BaseStory = {
+  name: 'Metric',
   args: {
     unitPair: 'MI_KM',
     value: 999999,
diff --git a/packages/vue/src/components/BaseVideo/BaseVideo.stories.js b/packages/vue/src/components/BaseVideo/BaseVideo.stories.js
index a999fb0e..140e80ba 100644
--- a/packages/vue/src/components/BaseVideo/BaseVideo.stories.js
+++ b/packages/vue/src/components/BaseVideo/BaseVideo.stories.js
@@ -22,7 +22,7 @@ export const BaseVideoData = {
   width: null
 }
 
-export const Base = {
+export const BaseStory = {
   args: {
     data: BaseVideoData
   }
diff --git a/packages/vue/src/components/BlockAudio/BlockAudio.stories.js b/packages/vue/src/components/BlockAudio/BlockAudio.stories.js
index 5dacad11..751ef0ee 100644
--- a/packages/vue/src/components/BlockAudio/BlockAudio.stories.js
+++ b/packages/vue/src/components/BlockAudio/BlockAudio.stories.js
@@ -26,4 +26,4 @@ export const BlockAudioData = {
     type: 'audio'
   }
 }
-export const Base = { name: 'BlockAudio', args: { data: BlockAudioData } }
+export const BaseStory = { name: 'BlockAudio', args: { data: BlockAudioData } }
diff --git a/packages/vue/src/components/BlockCard/BlockCard.stories.js b/packages/vue/src/components/BlockCard/BlockCard.stories.js
index abfb1b3a..70cfc9eb 100644
--- a/packages/vue/src/components/BlockCard/BlockCard.stories.js
+++ b/packages/vue/src/components/BlockCard/BlockCard.stories.js
@@ -31,4 +31,4 @@ export const BlockCardData = {
   }
 }
 
-export const Item = { name: 'BlockCard', args: BlockCardData }
+export const BaseStory = { name: 'BlockCard', args: BlockCardData }
diff --git a/packages/vue/src/components/BlockCardGroup/BlockCardGroup.stories.js b/packages/vue/src/components/BlockCardGroup/BlockCardGroup.stories.js
index 3468a9d2..cf9fb325 100644
--- a/packages/vue/src/components/BlockCardGroup/BlockCardGroup.stories.js
+++ b/packages/vue/src/components/BlockCardGroup/BlockCardGroup.stories.js
@@ -65,7 +65,7 @@ export const BlockCardGroupData = [
   }
 ]
 
-export const Group = {
+export const BaseStory = {
   name: 'BlockCardGroup',
   args: { facts: BlockCardGroupData }
 }
diff --git a/packages/vue/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js b/packages/vue/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js
index 1997cbe1..5ec1c108 100644
--- a/packages/vue/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js
+++ b/packages/vue/src/components/BlockCircleImageCard/BlockCircleImageCard.stories.js
@@ -45,7 +45,7 @@ export const BlockCircleImageCardData = {
   icon: true
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     ...BlockCircleImageCardData,
     icon: false
diff --git a/packages/vue/src/components/BlockCta/BlockCta.stories.js b/packages/vue/src/components/BlockCta/BlockCta.stories.js
index abf06ed4..41da2cce 100644
--- a/packages/vue/src/components/BlockCta/BlockCta.stories.js
+++ b/packages/vue/src/components/BlockCta/BlockCta.stories.js
@@ -17,7 +17,7 @@ export const BlockCtaData = {
   externalLink: ''
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: BlockCtaData
   }
diff --git a/packages/vue/src/components/BlockHeading/BlockHeading.stories.js b/packages/vue/src/components/BlockHeading/BlockHeading.stories.js
index eb3d3644..a00aecd9 100644
--- a/packages/vue/src/components/BlockHeading/BlockHeading.stories.js
+++ b/packages/vue/src/components/BlockHeading/BlockHeading.stories.js
@@ -14,7 +14,7 @@ export const BlockHeadingData = {
 }
 
 // stories
-export const Heading = {
+export const BaseStory = {
   name: 'BlockHeading',
   args: {
     data: BlockHeadingData
diff --git a/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js b/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js
index bf6096c7..4e5629c1 100644
--- a/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js
+++ b/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.stories.js
@@ -25,7 +25,7 @@ export const BlockIframeEmbedData = {
   url: `https://eyes.nasa.gov/apps/orrery/#/sc_perseverance`
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: BlockIframeEmbedData
   }
diff --git a/packages/vue/src/components/BlockImage/BlockImage.stories.js b/packages/vue/src/components/BlockImage/BlockImage.stories.js
index 45e19ee3..352637bb 100644
--- a/packages/vue/src/components/BlockImage/BlockImage.stories.js
+++ b/packages/vue/src/components/BlockImage/BlockImage.stories.js
@@ -84,8 +84,9 @@ const BlockImageTemplate = (args) => ({
     <BlockImage v-bind="args" />`
 })
 
-export const Standard = BlockImageTemplate.bind({})
-Standard.args = {
+export const BaseStory = BlockImageTemplate.bind({})
+BaseStory.storyName = 'Standard'
+BaseStory.args = {
   data: BlockImageData,
   fullBleed: BlockImageData.fullBleed
 }
diff --git a/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js b/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js
index 18a3f1ee..9eb0507d 100644
--- a/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js
+++ b/packages/vue/src/components/BlockImageCarousel/BlockImageCarousel.stories.js
@@ -98,7 +98,7 @@ export const BlockImageCarouselData = [
 ]
 
 // stories
-export const Carousel = {
+export const BaseStory = {
   name: 'BlockImageCarousel',
   args: {
     blockId: 'ev106po56n',
diff --git a/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.stories.js b/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.stories.js
index fbd3ea90..0c0a62b5 100644
--- a/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.stories.js
+++ b/packages/vue/src/components/BlockImageCarouselItem/BlockImageCarouselItem.stories.js
@@ -51,7 +51,7 @@ export const BlockImageCarouselItemData = {
   }
 }
 
-export const SingleItem = {
+export const BaseStory = {
   name: 'BlockImageCarouselItem',
   args: {
     image: BlockImageCarouselItemData.item.image,
diff --git a/packages/vue/src/components/BlockImageComparison/BlockImageComparison.stories.js b/packages/vue/src/components/BlockImageComparison/BlockImageComparison.stories.js
index 2f7543d4..954bd95b 100644
--- a/packages/vue/src/components/BlockImageComparison/BlockImageComparison.stories.js
+++ b/packages/vue/src/components/BlockImageComparison/BlockImageComparison.stories.js
@@ -38,7 +38,7 @@ export const BlockImageComparisonData = {
 }
 
 // stories
-export const Comparison = {
+export const BaseStory = {
   name: 'BlockImageComparison',
   args: {
     data: BlockImageComparisonData
diff --git a/packages/vue/src/components/BlockImageGallery/BlockImageGallery.stories.js b/packages/vue/src/components/BlockImageGallery/BlockImageGallery.stories.js
index 9dfb8055..28cd0fcd 100644
--- a/packages/vue/src/components/BlockImageGallery/BlockImageGallery.stories.js
+++ b/packages/vue/src/components/BlockImageGallery/BlockImageGallery.stories.js
@@ -49,7 +49,7 @@ export const ImageGalleryData = {
   items: BlockImageCarouselData.slice(1)
 }
 
-export const Gallery = {
+export const BaseStory = {
   name: 'BlockImageGallery',
   args: ImageGalleryData
 }
diff --git a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.stories.js b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.stories.js
index 4691349e..907466a7 100644
--- a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.stories.js
+++ b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.stories.js
@@ -28,7 +28,8 @@ export const BlockInlineImageData = {
   }
 }
 
-export const AlignRight = {
+export const BaseStory = {
+  name: 'Align Right',
   args: { data: BlockInlineImageData.block }
 }
 
diff --git a/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.stories.js b/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.stories.js
index 756d62dc..cf9b383d 100644
--- a/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.stories.js
+++ b/packages/vue/src/components/BlockKeyPoints/BlockKeyPoints.stories.js
@@ -20,7 +20,7 @@ export const BlockKeyPointsData = {
 }
 
 // stories
-export const KeyPoints = {
+export const BaseStory = {
   name: 'BlockKeyPoints',
   args: {
     data: BlockKeyPointsData
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
index c5004fd3..6c774e03 100644
--- a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
+++ b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
@@ -50,7 +50,8 @@ export const BlockLinkCardData = {
   compact: false
 }
 
-export const SingleItem = {
+export const BaseStory = {
+  name: 'Single Item',
   args: {
     ...BlockLinkCardData
   }
diff --git a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js
index aaa88c95..c048eac9 100644
--- a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js
+++ b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.stories.js
@@ -169,7 +169,8 @@ const BlockLinkCarouselMultipleTemplate = (args) => ({
 })
 
 // stories
-export const CardCarousel = {
+export const BaseStory = {
+  name: 'Card Carousel',
   args: {
     itemType: 'cards',
     heading: 'Related Pages',
diff --git a/packages/vue/src/components/BlockLinkTile/BlockLinkTile.stories.js b/packages/vue/src/components/BlockLinkTile/BlockLinkTile.stories.js
index 2f28ace4..48d6fe60 100644
--- a/packages/vue/src/components/BlockLinkTile/BlockLinkTile.stories.js
+++ b/packages/vue/src/components/BlockLinkTile/BlockLinkTile.stories.js
@@ -45,7 +45,8 @@ export const BlockLinkTileData = {
   }
 }
 
-export const SingleItem = {
+export const BaseStory = {
+  name: 'Single Item',
   args: {
     data: BlockLinkTileData.card,
     headingLevel: 'h2',
diff --git a/packages/vue/src/components/BlockListCards/BlockListCards.stories.js b/packages/vue/src/components/BlockListCards/BlockListCards.stories.js
index 35fe1f02..d2d37894 100644
--- a/packages/vue/src/components/BlockListCards/BlockListCards.stories.js
+++ b/packages/vue/src/components/BlockListCards/BlockListCards.stories.js
@@ -61,7 +61,7 @@ export const BlockListCardsData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   name: 'BlockListCards',
   args: {
     data: BlockListCardsData
diff --git a/packages/vue/src/components/BlockQuote/BlockQuote.stories.js b/packages/vue/src/components/BlockQuote/BlockQuote.stories.js
index 0144ceea..f0f07c8a 100644
--- a/packages/vue/src/components/BlockQuote/BlockQuote.stories.js
+++ b/packages/vue/src/components/BlockQuote/BlockQuote.stories.js
@@ -44,8 +44,8 @@ const BlockQuoteTemplate = (args) => ({
   template: `<BlockQuote v-bind="args" />`
 })
 
-export const Default = BlockQuoteTemplate.bind({})
-Default.args = {
+export const BaseStory = BlockQuoteTemplate.bind({})
+BaseStory.args = {
   data: {
     quote: BlockQuoteData.quote,
     attribution: BlockQuoteData.attribution,
diff --git a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.stories.js b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.stories.js
index 6de13cd3..1af81dcc 100644
--- a/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.stories.js
+++ b/packages/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.stories.js
@@ -52,7 +52,7 @@ export const BlockRelatedLinksData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BlockRelatedLinks',
   args: {
     ...BlockRelatedLinksData
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
index 1a93bbc2..633c5199 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
@@ -76,7 +76,7 @@ export const BlockStreamfieldData = {
   ]
 }
 
-export const Default = {
+export const BaseStory = {
   args: { data: BlockStreamfieldData.body, variant: 'default' }
 }
 
diff --git a/packages/vue/src/components/BlockTable/BlockTable.stories.js b/packages/vue/src/components/BlockTable/BlockTable.stories.js
index 83baba57..b6de2608 100644
--- a/packages/vue/src/components/BlockTable/BlockTable.stories.js
+++ b/packages/vue/src/components/BlockTable/BlockTable.stories.js
@@ -12,7 +12,7 @@ export const BlockTableData = {
     "{'data': [['Header 1', 'Header 2', 'Header 3'], ['Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet'], [None, None, None]], 'cell': [], 'first_row_is_table_header': True, 'first_col_is_header': False, 'table_caption': 'Third row intentionally blank to test parsing.'}"
 }
 
-export const Table = {
+export const BaseStory = {
   name: 'BlockTable',
   args: {
     data: BlockTableData
diff --git a/packages/vue/src/components/BlockTeaser/BlockTeaser.stories.js b/packages/vue/src/components/BlockTeaser/BlockTeaser.stories.js
index de8081e9..1f8fe480 100644
--- a/packages/vue/src/components/BlockTeaser/BlockTeaser.stories.js
+++ b/packages/vue/src/components/BlockTeaser/BlockTeaser.stories.js
@@ -50,7 +50,7 @@ export const BlockTeaserData = {
   ]
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     ...BlockTeaserData
   }
diff --git a/packages/vue/src/components/BlockText/BlockText.stories.js b/packages/vue/src/components/BlockText/BlockText.stories.js
index 8d92da62..1c0ac247 100644
--- a/packages/vue/src/components/BlockText/BlockText.stories.js
+++ b/packages/vue/src/components/BlockText/BlockText.stories.js
@@ -12,7 +12,7 @@ export default {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BlockText',
   args: {
     variant: 'large',
diff --git a/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js b/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js
index d68fa4d6..efe2c825 100644
--- a/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js
+++ b/packages/vue/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js
@@ -11,7 +11,7 @@ export const BlockTwitterEmbedData = {
   username: 'NASAJPL'
 }
 
-export const List = {
+export const BaseStory = {
   name: 'BlockTwitterEmbed',
   args: {
     data: BlockTwitterEmbedData
diff --git a/packages/vue/src/components/BlockVideo/BlockVideo.stories.js b/packages/vue/src/components/BlockVideo/BlockVideo.stories.js
index 7dcc4752..3ddf0536 100644
--- a/packages/vue/src/components/BlockVideo/BlockVideo.stories.js
+++ b/packages/vue/src/components/BlockVideo/BlockVideo.stories.js
@@ -17,7 +17,7 @@ export const BlockVideoData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BlockVideo',
   args: { data: BlockVideoData.block }
 }
diff --git a/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.stories.js b/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.stories.js
index 979ef40a..5105ad14 100644
--- a/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.stories.js
+++ b/packages/vue/src/components/BlockVideoEmbed/BlockVideoEmbed.stories.js
@@ -17,4 +17,4 @@ export const BlockVideoEmbedData = {
   }
 }
 
-export const Default = { name: 'BlockVideoEmbed', args: { data: BlockVideoEmbedData.data } }
+export const BaseStory = { name: 'BlockVideoEmbed', args: { data: BlockVideoEmbedData.data } }
diff --git a/packages/vue/src/components/CalendarButton/CalendarButton.stories.js b/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
index 3fef3035..a796571a 100644
--- a/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
+++ b/packages/vue/src/components/CalendarButton/CalendarButton.stories.js
@@ -1,7 +1,7 @@
 import CalendarButton from './CalendarButton.vue'
 
 export default {
-  title: 'Components/CalendarButton',
+  title: 'Components/Utilities/CalendarButton',
   component: CalendarButton,
   excludeStories: /.*Data$/
 }
@@ -30,7 +30,7 @@ const CalendarButtonTemplate = (args) => ({
   `
 })
 
-export const Default = CalendarButtonTemplate.bind({})
-Default.args = {
+export const BaseStory = CalendarButtonTemplate.bind({})
+BaseStory.args = {
   ...CalendarButtonData
 }
diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js b/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
index f19761c5..45a27ac1 100644
--- a/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
+++ b/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
@@ -1,7 +1,7 @@
 import DetailHeadline from './DetailHeadline.vue'
 
 export default {
-  title: 'Components/DetailHeadline',
+  title: 'Components/Utilities/DetailHeadline',
   component: DetailHeadline,
   excludeStories: /.*Data$/
 }
@@ -26,7 +26,7 @@ export const DetailHeadlineData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: DetailHeadlineData
 }
 
diff --git a/packages/vue/src/components/DsnWidget/DsnWidget.stories.js b/packages/vue/src/components/DsnWidget/DsnWidget.stories.js
index b25258a6..6c88c0ac 100644
--- a/packages/vue/src/components/DsnWidget/DsnWidget.stories.js
+++ b/packages/vue/src/components/DsnWidget/DsnWidget.stories.js
@@ -1,7 +1,7 @@
 import DsnWidget from './DsnWidget.vue'
 
 export default {
-  title: 'Components/DsnWidget',
+  title: 'Components/WWW/DsnWidget',
   component: DsnWidget,
   excludeStories: /.*Data$/,
   argTypes: {
@@ -22,7 +22,7 @@ export const DsnWidgetData = {
   __typename: 'DeepSpaceNetworkWidget'
 }
 
-export const Base = {
+export const BaseStory = {
   args: {
     data: DsnWidgetData
   }
diff --git a/packages/vue/src/components/EventDetailHero/EventDetailHero.stories.js b/packages/vue/src/components/EventDetailHero/EventDetailHero.stories.js
index 7f9e56af..fb201389 100644
--- a/packages/vue/src/components/EventDetailHero/EventDetailHero.stories.js
+++ b/packages/vue/src/components/EventDetailHero/EventDetailHero.stories.js
@@ -1,7 +1,7 @@
 import EventDetailHero from './EventDetailHero.vue'
 
 export default {
-  title: 'WWW/EventDetail/EventDetailHero',
+  title: 'Components/WWW/EventDetail/EventDetailHero',
   component: EventDetailHero,
   decorators: [
     () => ({
@@ -45,7 +45,7 @@ export const EventDetailHeroData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     image: EventDetailHeroData.heroImage,
     startDateSplit: EventDetailHeroData.startDateSplit
diff --git a/packages/vue/src/components/FormContact/FormContact.stories.js b/packages/vue/src/components/FormContact/FormContact.stories.js
index 734e18f2..e8577cac 100644
--- a/packages/vue/src/components/FormContact/FormContact.stories.js
+++ b/packages/vue/src/components/FormContact/FormContact.stories.js
@@ -1,7 +1,7 @@
 import FormContact from './FormContact.vue'
 
 export default {
-  title: 'Components/FormContact',
+  title: 'Components/Forms/FormContact',
   component: FormContact
 }
 
@@ -12,5 +12,5 @@ const FormContactTemplate = () => ({
 })
 
 // stories
-export const Contact = FormContactTemplate.bind({})
-Contact.storyName = 'FormContact'
+export const BaseStory = FormContactTemplate.bind({})
+BaseStory.storyName = 'FormContact'
diff --git a/packages/vue/src/components/FormContact/FormContact.vue b/packages/vue/src/components/FormContact/FormContact.vue
index 592c0366..a58778c7 100755
--- a/packages/vue/src/components/FormContact/FormContact.vue
+++ b/packages/vue/src/components/FormContact/FormContact.vue
@@ -14,97 +14,46 @@
           size="h6"
           >Contact Information</BaseHeading
         >
-        <div class="mt-8">
-          <label
-            id="full_name_label"
-            for="full_name"
-            class="text-gray-dark text-subtitle"
-          >
-            Name <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <input
-              id="full_name"
-              type="text"
-              name="full_name"
-              required
-              aria-required="true"
-              aria-labelledby="full_name_label"
-              placeholder="enter your first and last name"
-              class="w-full px-4 py-3"
-            />
-          </div>
-        </div>
-        <div class="mt-8">
-          <label
-            id="email_label"
-            for="email"
-            class="text-gray-dark text-subtitle"
-          >
-            Email <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <input
-              id="email"
-              type="text"
-              name="email"
-              required
-              aria-required="true"
-              aria-labelledby="email_label"
-              placeholder="enter your email"
-              class="w-full px-4 py-3"
-            />
-          </div>
-        </div>
+        <TextInput
+          class="mt-8"
+          input-name="full_name"
+          label="Name"
+          type="text"
+          required
+          placeholder="enter your first and last name"
+        />
+        <TextInput
+          class="mt-8"
+          input-name="email"
+          label="Email"
+          type="email"
+          required
+          placeholder="enter your email"
+        />
         <BaseHeading
           level="h2"
           size="h6"
           class="mt-12"
           >Write Us</BaseHeading
         >
+        <TextInput
+          class="mt-8"
+          input-name="subject"
+          label="Subject"
+          type="text"
+          required
+          placeholder="write a subject"
+        />
+        <TextArea
+          class="mt-8"
+          input-name="message"
+          label="Message"
+          input-class="w-full px-4 py-3"
+          required
+          placeholder="write your message..."
+        />
+
         <div class="mt-8">
-          <label
-            id="subject_label"
-            for="subject"
-            class="text-gray-dark text-subtitle"
-          >
-            Subject <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <input
-              id="subject"
-              type="text"
-              name="subject"
-              required
-              aria-required="true"
-              aria-labelledby="subject_label"
-              placeholder="write a subject"
-              class="w-full px-4 py-3"
-            />
-          </div>
-        </div>
-        <div class="mt-8">
-          <label
-            id="message_label"
-            for="message"
-            class="text-subtitle text-gray-dark"
-          >
-            Message <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <textarea
-              id="message"
-              name="message"
-              required
-              aria-required="true"
-              aria-labelledby="message_label"
-              placeholder="write your message..."
-              rows="4"
-              class="w-full px-4 py-3"
-            ></textarea>
-          </div>
-        </div>
-        <div class="mt-4">
           <BaseButton
             type="submit"
             variant="primary"
@@ -136,13 +85,17 @@ import qs from 'qs'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
+import TextInput from './../TextInput/TextInput.vue'
+import TextArea from './../TextArea/TextArea.vue'
 
 export default defineComponent({
   name: 'FormContact',
   components: {
     LayoutHelper,
     BaseHeading,
-    BaseButton
+    BaseButton,
+    TextArea,
+    TextInput
   },
   data() {
     return {
diff --git a/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.stories.js b/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.stories.js
index 26f61454..d13f6638 100644
--- a/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.stories.js
+++ b/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.stories.js
@@ -1,7 +1,7 @@
 import FormNewsletterSignup from './FormNewsletterSignup.vue'
 
 export default {
-  title: 'Components/FormNewsletterSignup',
+  title: 'Components/Forms/FormNewsletterSignup',
   component: FormNewsletterSignup
 }
 
@@ -12,5 +12,5 @@ const FormNewsletterSignupTemplate = () => ({
 })
 
 // stories
-export const NewsletterSignup = FormNewsletterSignupTemplate.bind({})
-NewsletterSignup.storyName = 'FormNewsletterSignup'
+export const BaseStory = FormNewsletterSignupTemplate.bind({})
+BaseStory.storyName = 'FormNewsletterSignup'
diff --git a/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.vue b/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.vue
index f3810ff9..4e8582d6 100755
--- a/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.vue
+++ b/packages/vue/src/components/FormNewsletterSignup/FormNewsletterSignup.vue
@@ -27,93 +27,44 @@
             size="h6"
             >Contact Information</BaseHeading
           >
-          <div class="mt-8">
-            <label
-              id="email_label"
-              for="email"
-              class="text-gray-dark text-subtitle"
-            >
-              Email <span class="text-jpl-red">*</span>
-            </label>
-            <div class="mt-2">
-              <input
-                id="email"
-                v-model="prefilledEmail"
-                type="email"
-                name="data[email]"
-                required
-                aria-required="true"
-                aria-labelledby="email_label"
-                placeholder="enter your email"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
-          <div class="mt-8">
-            <label
-              id="first_name_label"
-              for="first_name"
-              class="text-gray-dark text-subtitle"
-            >
-              First Name
-            </label>
-            <div class="mt-2">
-              <input
-                id="first_name"
-                type="text"
-                name="data[fname]"
-                maxlength="32"
-                aria-required="false"
-                aria-labelledby="first_name_label"
-                placeholder="enter your first name"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
-          <div class="mt-8">
-            <label
-              id="last_name_label"
-              for="last_name"
-              class="text-gray-dark text-subtitle"
-            >
-              Last Name
-            </label>
-            <div class="mt-2">
-              <input
-                id="last_name"
-                type="text"
-                name="data[lname]"
-                maxlength="64"
-                aria-required="false"
-                aria-labelledby="last_name_label"
-                placeholder="enter your last name"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
-          <div class="mt-8">
-            <label
-              id="zip_code_label"
-              for="zip_code"
-              class="text-gray-dark text-subtitle"
-            >
-              Zip
-            </label>
-            <div class="mt-2">
-              <input
-                id="zip_code"
-                type="text"
-                name="data[zip]"
-                pattern="[0-9]{5-10}"
-                maxlength="10"
-                title="Five digit zip code"
-                aria-required="false"
-                aria-labelledby="zip_code_label"
-                placeholder="enter your 5-digit zip code"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
+          <TextInput
+            v-model="prefilledEmail"
+            class="mt-8"
+            input-name="data[email]"
+            label="Email"
+            type="email"
+            required
+            placeholder="enter your email"
+          />
+
+          <TextInput
+            class="mt-8"
+            input-name="data[fname]"
+            label="First Name"
+            type="text"
+            placeholder="enter your first name"
+          />
+
+          <TextInput
+            class="mt-8"
+            input-name="data[lname]"
+            label="Last Name"
+            type="text"
+            maxlength="64"
+            placeholder="enter your last name"
+          />
+
+          <TextInput
+            class="mt-8"
+            input-name="data[zip]"
+            label="Zip"
+            type="text"
+            maxlength="10"
+            pattern="[0-9]{5-10}"
+            title="Five digit zip code"
+            placeholder="enter your 5-digit zip code"
+          />
+
           <BaseHeading
             level="h2"
             size="h6"
@@ -181,6 +132,7 @@ import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import BaseRadioGroup from './../BaseRadioGroup/BaseRadioGroup.vue'
 import BaseCheckboxGroup from './../BaseCheckboxGroup/BaseCheckboxGroup.vue'
+import TextInput from './../TextInput/TextInput.vue'
 
 const iContactForm =
   'https://app.icontact.com/icp/core/mycontacts/signup/designer/form/?id=5&cid=1389932&lid=11365'
@@ -267,7 +219,8 @@ export default defineComponent({
     BaseHeading,
     BaseButton,
     BaseCheckboxGroup,
-    BaseRadioGroup
+    BaseRadioGroup,
+    TextInput
   },
   data() {
     return {
diff --git a/packages/vue/src/components/HeroLarge/HeroLarge.stories.js b/packages/vue/src/components/HeroLarge/HeroLarge.stories.js
index ff54b948..2aa732cc 100644
--- a/packages/vue/src/components/HeroLarge/HeroLarge.stories.js
+++ b/packages/vue/src/components/HeroLarge/HeroLarge.stories.js
@@ -36,7 +36,7 @@ export const HeroLargeData = {
 }
 
 // stories
-export const Hero = {
+export const BaseStory = {
   name: 'HeroLarge',
   args: {
     eyebrow: 'Robotics at JPL',
diff --git a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js
index 48d512a5..51d5e89b 100644
--- a/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js
+++ b/packages/vue/src/components/HeroListingIndex/HeroListingIndex.stories.js
@@ -37,7 +37,7 @@ export const HeroListingIndexData = {
 
 // templates
 
-export const Default = {
+export const BaseStory = {
   args: {
     customLabel: 'Featured',
     pageData: HeroListingIndexData.listingPage
diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.stories.js b/packages/vue/src/components/HeroMedia/HeroMedia.stories.js
index 18c94900..745c2579 100644
--- a/packages/vue/src/components/HeroMedia/HeroMedia.stories.js
+++ b/packages/vue/src/components/HeroMedia/HeroMedia.stories.js
@@ -8,7 +8,11 @@ export default {
     html: {
       root: '#storyDecorator'
     },
-    viewMode: 'canvas'
+    docs: {
+      description: {
+        component: 'No text overlay, just an image or video with a caption below.'
+      }
+    }
   },
   excludeStories: /.*Data$/
 }
@@ -74,7 +78,8 @@ export const HeroMediaData = {
 }
 
 // stories
-export const Hero = {
+export const BaseStory = {
+  name: 'Hero',
   args: HeroMediaData
 }
 export const CustomImageCaption = {
diff --git a/packages/vue/src/components/HeroMedium/HeroMedium.stories.js b/packages/vue/src/components/HeroMedium/HeroMedium.stories.js
index 5a8ca6fc..e6539e8a 100644
--- a/packages/vue/src/components/HeroMedium/HeroMedium.stories.js
+++ b/packages/vue/src/components/HeroMedium/HeroMedium.stories.js
@@ -54,7 +54,7 @@ export const HeroMediumData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     customTag: 'News',
     customLabel: HeroMediumData.label,
@@ -63,6 +63,16 @@ export const Default = {
     customVideo: undefined
   }
 }
+export const Compact = {
+  args: {
+    customTag: 'News',
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: undefined,
+    compact: true
+  }
+}
 export const Video = {
   args: {
     customLabel: HeroMediumData.label,
diff --git a/packages/vue/src/components/HeroMedium/HeroMedium.vue b/packages/vue/src/components/HeroMedium/HeroMedium.vue
index e546f93a..60b4dd48 100644
--- a/packages/vue/src/components/HeroMedium/HeroMedium.vue
+++ b/packages/vue/src/components/HeroMedium/HeroMedium.vue
@@ -1,7 +1,8 @@
 <template>
   <section
     aria-label="Feature"
-    class="HeroMedium ThemeVariantDark relative flex items-center overflow-hidden"
+    class="ThemeVariantDark relative flex items-center overflow-hidden"
+    :class="compact ? 'HeroSmall' : 'HeroMedium'"
   >
     <div class="absolute inset-0 z-10 overflow-hidden bg-black">
       <!-- video always overrides the image -->
@@ -29,13 +30,22 @@
         />
       </picture>
     </div>
-    <div class="lg:flex lg:items-end lg:relative lg:h-full absolute bottom-0 z-20 w-full">
+    <div
+      class="lg:flex lg:items-end lg:relative lg:h-full z-20 w-full"
+      :class="{
+        'absolute  bottom-0': !compact
+      }"
+    >
       <div
         class="bg-gradient-to-b lg:bg-gradient-to-bl from-transparent lg:from-transparent-w50 to-black lg:to-transparent-black-75 absolute inset-0"
       ></div>
       <div
         v-if="feature"
-        class="lg:px-10 2xl:px-0 lg:pb-0 lg:py-0 text-contrast container relative px-4 pt-40 pb-2 mx-auto mb-10 text-white"
+        class="px-4 lg:px-10 2xl:px-0 lg:pb-0 lg:py-0 text-contrast container relative mx-auto text-white"
+        :class="{
+          'pt-40 pb-2 mb-10': !compact,
+          'my-6 lg:mt-0 lg:mb-10': compact
+        }"
       >
         <nuxt-link
           :to="feature.url"
@@ -100,7 +110,8 @@ export default defineComponent({
   components: {
     IconArrow,
     BaseLink,
-    MixinVideoBg
+    MixinVideoBg,
+    BaseTag
   },
   props: {
     feature: {
@@ -119,6 +130,11 @@ export default defineComponent({
       type: String,
       default: 'View'
     },
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     // to override media
     // use-case: news detail pages use this b/c their feature hero is structured differently
     customVideo: {
@@ -162,5 +178,6 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+@import '@explorer-1/common/src/scss/components/HeroSmall';
 @import '@explorer-1/common/src/scss/components/HeroMedium';
 </style>
diff --git a/packages/vue/src/components/HeroMedium/HeroSmall.stories.js b/packages/vue/src/components/HeroMedium/HeroSmall.stories.js
new file mode 100644
index 00000000..f01cfe29
--- /dev/null
+++ b/packages/vue/src/components/HeroMedium/HeroSmall.stories.js
@@ -0,0 +1,57 @@
+import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
+import { HeroMediumData } from './HeroMedium.stories'
+import HeroMedium from './HeroMedium.vue'
+
+export default {
+  title: 'Components/Heroes/HeroSmall',
+  component: HeroMedium,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    themes: {
+      clearable: false,
+      list: [
+        {
+          name: 'FullWidthDocs',
+          class: 'sbdocs-preview-full-width',
+          default: true,
+          visible: false
+        }
+      ]
+    },
+    docs: {
+      description: {
+        component:
+          '`HeroSmall` is the same component as `HeroMedium, but with `compact` set to `true`.'
+      }
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BaseStory = {
+  args: {
+    customTag: 'News',
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: undefined,
+    compact: true
+  }
+}
+export const Video = {
+  args: {
+    customTag: 'News',
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: BaseVideoData,
+    compact: true
+  }
+}
diff --git a/packages/vue/src/components/HomepageCarousel/HomepageCarousel.stories.js b/packages/vue/src/components/HomepageCarousel/HomepageCarousel.stories.js
index 7e0bd0ca..77be780c 100644
--- a/packages/vue/src/components/HomepageCarousel/HomepageCarousel.stories.js
+++ b/packages/vue/src/components/HomepageCarousel/HomepageCarousel.stories.js
@@ -2,7 +2,7 @@ import { HomepageCarouselItemData } from './../HomepageCarouselItem/HomepageCaro
 import HomepageCarousel from './HomepageCarousel.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageCarousel',
+  title: 'Components/WWW/Homepage/HomepageCarousel',
   component: HomepageCarousel,
   excludeStories: /.*Data$/,
   parameters: {
@@ -83,7 +83,8 @@ const HomepageCarouselShuffledData = () => {
 }
 
 // stories
-export const Carousel = {
+export const BaseStory = {
+  name: 'HomepageCarousel',
   args: {
     items: HomepageCarouselData,
     duration: 10000
diff --git a/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js b/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js
index 8b8aefc1..b8dc9c24 100644
--- a/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js
+++ b/packages/vue/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.js
@@ -2,7 +2,7 @@ import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import HomepageCarouselItem from './HomepageCarouselItem.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageCarousel/HomepageCarouselItem',
+  title: 'Components/WWW/Homepage/HomepageCarousel/HomepageCarouselItem',
   component: HomepageCarouselItem,
   decorators: [
     () => ({
@@ -46,7 +46,8 @@ export const HomepageCarouselItemData = {
   }
 }
 
-export const SingleItem = {
+export const BaseStory = {
+  name: 'Single Item',
   args: {
     item: {
       ...HomepageCarouselItemData.item,
diff --git a/packages/vue/src/components/HomepageEmbedBlock/HomepageEmbedBlock.stories.js b/packages/vue/src/components/HomepageEmbedBlock/HomepageEmbedBlock.stories.js
index b8e779f7..d1a79adf 100644
--- a/packages/vue/src/components/HomepageEmbedBlock/HomepageEmbedBlock.stories.js
+++ b/packages/vue/src/components/HomepageEmbedBlock/HomepageEmbedBlock.stories.js
@@ -2,7 +2,7 @@ import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.storie
 import HomepageEmbedBlock from './HomepageEmbedBlock.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageEmbedBlock',
+  title: 'Components/WWW/Homepage/HomepageEmbedBlock',
   component: HomepageEmbedBlock,
   decorators: [
     () => ({
@@ -27,7 +27,7 @@ export const HomepageEmbedBlockData = [
 ]
 
 // stories
-export const Default = {
+export const BaseStory = {
   name: 'HomepageEmbedBlock',
   args: {
     data: HomepageEmbedBlockData
diff --git a/packages/vue/src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.stories.js b/packages/vue/src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.stories.js
index 04842fc3..d17c8729 100644
--- a/packages/vue/src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.stories.js
+++ b/packages/vue/src/components/HomepageFeaturedRobot/HomepageFeaturedRobot.stories.js
@@ -1,6 +1,6 @@
 import HomepageFeaturedRobot from './HomepageFeaturedRobot.vue'
 export default {
-  title: 'WWW/Homepage/HomepageFeaturedRobot',
+  title: 'Components/WWW/Homepage/HomepageFeaturedRobot',
   component: HomepageFeaturedRobot,
   excludeStories: /.*Data$/,
   parameters: {
@@ -63,7 +63,8 @@ export const HomepageFeaturedRobotData = {
 }
 
 // stories
-export const FeaturedRobot = {
+export const BaseStory = {
+  name: 'Featured Robot',
   args: {
     data: HomepageFeaturedRobotData
   }
diff --git a/packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.stories.js b/packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.stories.js
index c4d346f7..fdf69425 100644
--- a/packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.stories.js
+++ b/packages/vue/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.stories.js
@@ -7,7 +7,7 @@ import HomepageMissionsCarousel from './HomepageMissionsCarousel.vue'
 import HomepageMissionsCarouselItem from './HomepageMissionsCarouselItem.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageMissionsCarousel',
+  title: 'Components/WWW/Homepage/HomepageMissionsCarousel',
   component: HomepageMissionsCarousel,
   excludeStories: /.*Data$/,
   parameters: {
@@ -134,7 +134,7 @@ const HomepageMissionsCarouselItemTemplate = (args) => ({
 })
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     data: HomepageMissionsCarouselData.missionsCarousel
   }
diff --git a/packages/vue/src/components/HomepageStats/HomepageStats.stories.js b/packages/vue/src/components/HomepageStats/HomepageStats.stories.js
index e4533081..0a0b96db 100644
--- a/packages/vue/src/components/HomepageStats/HomepageStats.stories.js
+++ b/packages/vue/src/components/HomepageStats/HomepageStats.stories.js
@@ -1,7 +1,7 @@
 import HomepageStats from './HomepageStats.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageStats',
+  title: 'Components/WWW/Homepage/HomepageStats',
   component: HomepageStats,
   excludeStories: /.*Data$/,
   parameters: {
@@ -57,8 +57,8 @@ const HomepageStatsTemplate = (args) => ({
   />`
 })
 
-export const Base = HomepageStatsTemplate.bind({})
-Base.args = HomepageStatsData
+export const BaseStory = HomepageStatsTemplate.bind({})
+BaseStory.args = HomepageStatsData
 
 export const StaticDate = HomepageStatsTemplate.bind({})
 StaticDate.args = {
diff --git a/packages/vue/src/components/HomepageTeaserBlock/HomepageTeaserBlock.stories.js b/packages/vue/src/components/HomepageTeaserBlock/HomepageTeaserBlock.stories.js
index f8bf6e90..b762c4a3 100644
--- a/packages/vue/src/components/HomepageTeaserBlock/HomepageTeaserBlock.stories.js
+++ b/packages/vue/src/components/HomepageTeaserBlock/HomepageTeaserBlock.stories.js
@@ -1,7 +1,7 @@
 import HomepageTeaserBlock from './HomepageTeaserBlock.vue'
 
 export default {
-  title: 'WWW/Homepage/HomepageTeaserBlock',
+  title: 'Components/WWW/Homepage/HomepageTeaserBlock',
   component: HomepageTeaserBlock,
   excludeStories: /.*(Data|Decorator)$/,
   parameters: {
@@ -76,8 +76,9 @@ export const HomepageTeaserBlockData = {
 }
 
 // stories
-export const TeaserBlock = HomepageTeaserBlockTemplate.bind({})
-TeaserBlock.args = {
+export const BaseStory = HomepageTeaserBlockTemplate.bind({})
+BaseStory.storyName = 'Teaser Block'
+BaseStory.args = {
   ...HomepageTeaserBlockData
 }
 
diff --git a/packages/vue/src/components/Icons/Icons.stories.ts b/packages/vue/src/components/Icons/Icons.stories.ts
index ba73673d..3cd9dd56 100644
--- a/packages/vue/src/components/Icons/Icons.stories.ts
+++ b/packages/vue/src/components/Icons/Icons.stories.ts
@@ -53,7 +53,7 @@ import IconUser from './IconUser.vue'
 import IconVolume from './IconVolume.vue'
 
 export default {
-  title: 'Foundation/Icons',
+  title: 'Foundations/Icons',
   component: IconArrows,
   subcomponents: {
     IconArrow,
diff --git a/packages/vue/src/components/LogoCaltech/LogoCaltech.stories.js b/packages/vue/src/components/LogoCaltech/LogoCaltech.stories.js
index 26207cf3..e102db5f 100644
--- a/packages/vue/src/components/LogoCaltech/LogoCaltech.stories.js
+++ b/packages/vue/src/components/LogoCaltech/LogoCaltech.stories.js
@@ -1,7 +1,7 @@
 import LogoCaltech from './LogoCaltech.vue'
 
 export default {
-  title: 'Foundation/Logos/LogoCaltech',
+  title: 'Foundations/Logos/LogoCaltech',
   component: LogoCaltech,
   argTypes: {
     size: {
@@ -34,6 +34,6 @@ const LogoCaltechComponentTemplate = (args) => ({
   template: `<LogoCaltech :class="size" />`
 })
 
-export const Caltech = LogoCaltechComponentTemplate.bind({})
-Caltech.storyName = 'LogoCaltech' // single story hoisting
-Caltech.args = { size: 'text-base' }
+export const BaseStory = LogoCaltechComponentTemplate.bind({})
+BaseStory.storyName = 'LogoCaltech' // single story hoisting
+BaseStory.args = { size: 'text-base' }
diff --git a/packages/vue/src/components/LogoTribrand/LogoTribrand.stories.js b/packages/vue/src/components/LogoTribrand/LogoTribrand.stories.js
index 70d60231..dd18b949 100644
--- a/packages/vue/src/components/LogoTribrand/LogoTribrand.stories.js
+++ b/packages/vue/src/components/LogoTribrand/LogoTribrand.stories.js
@@ -3,7 +3,7 @@ import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg
 import LogoTribrand from './LogoTribrand.vue'
 
 export default {
-  title: 'Foundation/Logos/LogoTribrand',
+  title: 'Foundations/Logos/LogoTribrand',
   component: LogoTribrand,
   excludeStories: /.*Data$/,
   parameters: {
@@ -28,9 +28,10 @@ const LogoTribrandImageTemplate = (args) => ({
   template: `<img :src="src" alt="Logo Image" />`
 })
 
-export const LogoInlineSvg = LogoTribrandComponentTemplate.bind({})
-LogoInlineSvg.args = { invert: false, size: 'text-base' }
-LogoInlineSvg.argTypes = {
+export const BaseStory = LogoTribrandComponentTemplate.bind({})
+BaseStory.storyName = 'Logo Inline SVG'
+BaseStory.args = { invert: false, size: 'text-base' }
+BaseStory.argTypes = {
   size: {
     control: {
       type: 'select',
@@ -43,7 +44,7 @@ LogoInlineSvg.argTypes = {
     }
   }
 }
-LogoInlineSvg.decorators = [
+BaseStory.decorators = [
   () => ({
     template: `<div class="inline-block" :class="invert ? 'bg-black ' : 'bg-white '"><story/></div>`,
     props: ['size', 'invert']
diff --git a/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.stories.js b/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.stories.js
index 5e8f1e1d..73a2def7 100644
--- a/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.stories.js
+++ b/packages/vue/src/components/MissionDetailAbout/MissionDetailAbout.stories.js
@@ -1,7 +1,7 @@
 import MissionDetailAbout from './MissionDetailAbout.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailAbout',
+  title: 'Components/WWW/MissionDetail/MissionDetailAbout',
   component: MissionDetailAbout,
   decorators: [
     () => ({
@@ -60,7 +60,7 @@ export const MissionDetailAboutData = {
 }
 
 // stories
-export const Default = { args: MissionDetailAboutData }
+export const BaseStory = { args: MissionDetailAboutData }
 
 export const NoInstruments = {
   args: {
diff --git a/packages/vue/src/components/MissionDetailHero/MissionDetailHero.stories.js b/packages/vue/src/components/MissionDetailHero/MissionDetailHero.stories.js
index 6f05837e..b50f511d 100644
--- a/packages/vue/src/components/MissionDetailHero/MissionDetailHero.stories.js
+++ b/packages/vue/src/components/MissionDetailHero/MissionDetailHero.stories.js
@@ -13,7 +13,7 @@ import imageInstrumentOco2WebP from '@explorer-1/common-storybook/src/images/mis
 import MissionDetailHero from './MissionDetailHero.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailHero',
+  title: 'Components/WWW/MissionDetail/MissionDetailHero',
   component: MissionDetailHero,
   argTypes: {
     templateStyle: {
@@ -89,7 +89,8 @@ const MissionDetailHeroTemplate = (args) => ({
 })
 
 // stories
-export const CubeRrt = {
+export const BaseStory = {
+  name: 'CubeRRT',
   args: {
     templateStyle: 'light',
     title: 'CubeRRT',
diff --git a/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.stories.js b/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.stories.js
index 5bb7000c..1f3c6bc1 100644
--- a/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.stories.js
+++ b/packages/vue/src/components/MissionDetailHighlights/MissionDetailHighlights.stories.js
@@ -7,7 +7,7 @@ import imagePlanetMarsB from '@explorer-1/common-storybook/src/images/mission-hi
 
 import MissionDetailHighlights from './MissionDetailHighlights.vue'
 export default {
-  title: 'WWW/MissionDetail/MissionHighlights',
+  title: 'Components/WWW/MissionDetail/MissionHighlights',
   component: MissionDetailHighlights,
   parameters: {
     viewMode: 'canvas'
@@ -103,7 +103,8 @@ const MissionDetailHighlightsNoImagesTemplate = (args) => ({
 })
 
 // stories
-export const Earth = {
+export const BaseStory = {
+  name: 'Earth',
   args: {
     animation: MissionDetailHighlightsData.showHighlightsAnimation,
     graphic: MissionDetailHighlightsData.highlightsGraphic,
diff --git a/packages/vue/src/components/MissionDetailInlineImage/MissionDetailInlineImage.stories.js b/packages/vue/src/components/MissionDetailInlineImage/MissionDetailInlineImage.stories.js
index ce85eb42..a8fe87ec 100644
--- a/packages/vue/src/components/MissionDetailInlineImage/MissionDetailInlineImage.stories.js
+++ b/packages/vue/src/components/MissionDetailInlineImage/MissionDetailInlineImage.stories.js
@@ -2,7 +2,7 @@ import { BaseImageCaptionData } from './../BaseImageCaption/BaseImageCaption.sto
 import MissionDetailInlineImage from './MissionDetailInlineImage.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailInlineImage',
+  title: 'Components/WWW/MissionDetail/MissionDetailInlineImage',
   component: MissionDetailInlineImage,
   argTypes: {
     alignTo: {
@@ -34,7 +34,7 @@ const MissionDetailInlineImageData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     alignment: MissionDetailInlineImageData.alignTo,
     text: MissionDetailInlineImageData.text,
diff --git a/packages/vue/src/components/MissionDetailStats/MissionDetailStats.stories.js b/packages/vue/src/components/MissionDetailStats/MissionDetailStats.stories.js
index 5624e500..4c6040f9 100644
--- a/packages/vue/src/components/MissionDetailStats/MissionDetailStats.stories.js
+++ b/packages/vue/src/components/MissionDetailStats/MissionDetailStats.stories.js
@@ -4,7 +4,7 @@ import MissionDetailStatsMicro from './MissionDetailStatsMicro.vue'
 import { distanceTypes } from './DistanceStats.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailStats',
+  title: 'Components/WWW/MissionDetail/MissionDetailStats',
   component: MissionDetailStats,
   subcomponents: { MissionDetailStatsMini, MissionDetailStatsMicro },
   decorators: [
@@ -50,7 +50,8 @@ export const MissionDetailStatsData = {
   status: 'future'
 }
 
-export const Full = {
+export const BaseStory = {
+  name: 'Full',
   args: MissionDetailStatsData,
   render: (args) => ({
     setup() {
diff --git a/packages/vue/src/components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js b/packages/vue/src/components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js
index bf25e1bd..6bc81889 100644
--- a/packages/vue/src/components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js
+++ b/packages/vue/src/components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js
@@ -3,7 +3,7 @@ import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.sto
 import MissionDetailStreamfield from './MissionDetailStreamfield.vue'
 
 export default {
-  title: 'WWW/MissionDetail/MissionDetailStreamfield',
+  title: 'Components/WWW/MissionDetail/MissionDetailStreamfield',
   component: MissionDetailStreamfield,
   excludeStories: /.*Data$/
 }
@@ -52,4 +52,4 @@ export const MissionDetailStreamfieldData = {
   ]
 }
 
-export const Streamfield = { args: { data: MissionDetailStreamfieldData.feature } }
+export const BaseStory = { args: { data: MissionDetailStreamfieldData.feature } }
diff --git a/packages/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.stories.ts b/packages/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.stories.ts
index c6ca287e..2f4fb3c2 100644
--- a/packages/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.stories.ts
+++ b/packages/vue/src/components/MixinAnimationCaret/MixinAnimationCaret.stories.ts
@@ -5,7 +5,7 @@ export default {
   component: MixinAnimationCaret,
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     viewMode: 'docs',
     docs: {
@@ -17,7 +17,7 @@ export default {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     default: 'Text with caret'
   }
diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.stories.js b/packages/vue/src/components/MixinCarousel/MixinCarousel.stories.js
index 085f9bdf..a5fe8694 100644
--- a/packages/vue/src/components/MixinCarousel/MixinCarousel.stories.js
+++ b/packages/vue/src/components/MixinCarousel/MixinCarousel.stories.js
@@ -12,7 +12,7 @@ export default {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   name: 'BaseCarousel',
   args: {
     heading: 'Heading',
@@ -24,8 +24,8 @@ export const Default = {
       return { args }
     },
     template: `<MixinCarousel v-bind="args">
-    <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide">
-      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide" data-chromatic="ignore">
+    <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide bg-gray-dark">
+      <img src="https://picsum.photos/550/483" width="550" height="483" :alt="'Demo slide ' + index" data-chromatic="ignore">
     </div>
   </MixinCarousel>`
   })
diff --git a/packages/vue/src/components/MixinVideoBg/MixinVideoBg.stories.js b/packages/vue/src/components/MixinVideoBg/MixinVideoBg.stories.js
index 166f18cb..b13011bf 100644
--- a/packages/vue/src/components/MixinVideoBg/MixinVideoBg.stories.js
+++ b/packages/vue/src/components/MixinVideoBg/MixinVideoBg.stories.js
@@ -4,20 +4,10 @@ import MixinVideoBg from './MixinVideoBg.vue'
 export default {
   title: 'Mixins/MixinVideoBg',
   component: MixinVideoBg,
-  excludeStories: /.*Data$/,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
-    })
-  ],
-  parameters: {
-    html: {
-      root: '#storyDecorator'
-    }
-  }
+  excludeStories: /.*Data$/
 }
 
-export const Base = {
+export const BaseStory = {
   name: 'MixinVideoBg',
   args: { video: BaseVideoData }
 }
diff --git a/packages/vue/src/components/NavDesktop/NavDesktop.stories.js b/packages/vue/src/components/NavDesktop/NavDesktop.stories.js
index d3cab3cc..4c12a14a 100644
--- a/packages/vue/src/components/NavDesktop/NavDesktop.stories.js
+++ b/packages/vue/src/components/NavDesktop/NavDesktop.stories.js
@@ -7,7 +7,7 @@ import NavDesktopDropdownContent from './NavDesktopDropdownContent.vue'
 import NavDesktopDropdownMore from './NavDesktopDropdownMore.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavDesktop',
+  title: 'Navigation/Headers/WWW/NavDesktop',
   component: NavDesktop,
   excludeStories: /.*Data$/,
   parameters: {
@@ -168,7 +168,8 @@ export const NavDesktopData = {
   ]
 }
 
-export const Nav = {
+export const BaseStory = {
+  name: 'NavDesktop',
   args: {
     data: NavDesktopData,
     headerVisible: true,
diff --git a/packages/vue/src/components/NavHeading/NavHeading.stories.js b/packages/vue/src/components/NavHeading/NavHeading.stories.js
index 45cd1f4c..ee0645de 100644
--- a/packages/vue/src/components/NavHeading/NavHeading.stories.js
+++ b/packages/vue/src/components/NavHeading/NavHeading.stories.js
@@ -2,7 +2,7 @@ import { MenuLinkColumnWithHeaderData } from './../NavLinkList/NavLinkList.stori
 import NavHeading from './NavHeading.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavHeading',
+  title: 'Navigation/Elements/NavHeading',
   component: NavHeading,
   decorators: [
     () => ({
@@ -18,6 +18,6 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const Default = {
+export const BaseStory = {
   args: { data: MenuLinkColumnWithHeaderData }
 }
diff --git a/packages/vue/src/components/NavHighlight/NavHighlight.stories.js b/packages/vue/src/components/NavHighlight/NavHighlight.stories.js
index 5449e15f..3798f692 100644
--- a/packages/vue/src/components/NavHighlight/NavHighlight.stories.js
+++ b/packages/vue/src/components/NavHighlight/NavHighlight.stories.js
@@ -1,7 +1,7 @@
 import NavHighlight from './NavHighlight.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavHighlight',
+  title: 'Navigation/Elements/NavHighlight',
   component: NavHighlight,
   decorators: [
     () => ({
@@ -34,7 +34,7 @@ export const MenuHighlightColumnData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     customLabel: MenuHighlightColumnData.label,
     highlight: MenuHighlightColumnData.highlight
diff --git a/packages/vue/src/components/NavLinkList/NavLinkList.stories.js b/packages/vue/src/components/NavLinkList/NavLinkList.stories.js
index d73ae295..336fd9ab 100644
--- a/packages/vue/src/components/NavLinkList/NavLinkList.stories.js
+++ b/packages/vue/src/components/NavLinkList/NavLinkList.stories.js
@@ -1,7 +1,7 @@
 import NavLinkList from './NavLinkList.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavLinkList',
+  title: 'Navigation/Elements/NavLinkList',
   component: NavLinkList,
   decorators: [
     () => ({
@@ -39,7 +39,7 @@ export const MenuLinkColumnWithHeaderData = {
   ]
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: MenuLinkColumnWithHeaderData
   }
diff --git a/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js b/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js
index 379d3b3c..0b87f639 100644
--- a/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js
+++ b/packages/vue/src/components/NavLogoLinks/NavLogoLinks.stories.js
@@ -2,13 +2,13 @@ import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg
 import NavLogoLinks from './NavLogoLinks.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavLogoLinks',
+  title: 'Navigation/Elements/NavLogoLinks',
   component: NavLogoLinks,
   excludeStories: /.*Data$/
 }
 
 // TODO: VUE3 -- fix logo image in story
-export const Default = {
+export const BaseStory = {
   args: {
     src: LogoColor
   },
diff --git a/packages/vue/src/components/NavMobile/NavMobile.stories.js b/packages/vue/src/components/NavMobile/NavMobile.stories.js
index e6b75601..b8d4e2f6 100644
--- a/packages/vue/src/components/NavMobile/NavMobile.stories.js
+++ b/packages/vue/src/components/NavMobile/NavMobile.stories.js
@@ -4,7 +4,7 @@ import NavMobileDropdown from './NavMobileDropdown.vue'
 import NavMobileLink from './NavMobileLink.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavMobile',
+  title: 'Navigation/Headers/WWW/NavMobile',
   component: NavMobile,
   excludeStories: /.*Data$/,
   parameters: {
@@ -113,7 +113,8 @@ const NavMobileTertiaryNavData = [
   }
 ]
 
-export const Nav = {
+export const BaseStory = {
+  name: 'NavMobile',
   args: {
     data: NavMobileData,
     headerVisible: true,
diff --git a/packages/vue/src/components/NavSearchForm/NavSearchForm.stories.js b/packages/vue/src/components/NavSearchForm/NavSearchForm.stories.js
index 66e1d380..a5aefd14 100644
--- a/packages/vue/src/components/NavSearchForm/NavSearchForm.stories.js
+++ b/packages/vue/src/components/NavSearchForm/NavSearchForm.stories.js
@@ -1,12 +1,12 @@
 import NavSearchForm from './NavSearchForm.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavSearchForm',
+  title: 'Navigation/Elements/NavSearchForm',
   component: NavSearchForm,
   excludeStories: /.*Data$/
 }
 
-export const Form = {
+export const BaseStory = {
   args: {
     mobile: false
   }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.stories.js b/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
index 4cc3a0ae..678449a9 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.stories.js
@@ -1,7 +1,7 @@
 import NavSecondary from './NavSecondary.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavSecondary',
+  title: 'Navigation/Secondary Navigation/NavSecondary',
   component: NavSecondary,
   excludeStories: /.*Data$/,
   parameters: {
@@ -18,7 +18,7 @@ export const NavSecondaryData = {
     '[{"path": "/go/test-site", "title": "Test Go Site", "children": []}, {"path": "/go/test-site/has-children", "title": "Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children", "title": "Lvl 3 Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-1", "title": "Lvl 4 No Children 1"}, {"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-2", "title": "Lvl 4 No Children 2"}]}, {"path": "/go/test-site/has-children/level-3-no-children", "title": "Lvl 3 No Children", "children": []}]}, {"path": "/go/test-site/no-children-1", "title": "No Children 1", "children": []}, {"path": "/go/test-site/no-children-2", "title": "No Children 2", "children": []}, {"path": "/go/test-site/has-children", "title": "Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children", "title": "Lvl 3 Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-1", "title": "Lvl 4 No Children 1"}, {"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-2", "title": "Lvl 4 No Children 2"}]}, {"path": "/go/test-site/has-children/level-3-no-children", "title": "Lvl 3 No Children", "children": []}]}]'
 }
 
-export const SecondaryNav = {
+export const BaseStory = {
   name: 'NavSecondary',
   args: { breadcrumb: NavSecondaryData.breadcrumb }
 }
diff --git a/packages/vue/src/components/NavSocial/NavSocial.stories.js b/packages/vue/src/components/NavSocial/NavSocial.stories.js
index 71cde46d..5d84aa89 100644
--- a/packages/vue/src/components/NavSocial/NavSocial.stories.js
+++ b/packages/vue/src/components/NavSocial/NavSocial.stories.js
@@ -1,14 +1,14 @@
 import NavSocial from './NavSocial.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavSocial',
+  title: 'Navigation/Elements/NavSocial',
   component: NavSocial,
   excludeStories: /.*Data$/
 }
 
-export const Social = { args: { dark: false } }
+export const BaseStory = { args: { dark: false } }
 
-export const SocialDark = {
+export const Dark = {
   args: { dark: true },
   render: (args) => ({
     components: { NavSocial },
diff --git a/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.stories.js b/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.stories.js
index c2150593..33d4b732 100644
--- a/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.stories.js
+++ b/packages/vue/src/components/NewsDetailMediaContact/NewsDetailMediaContact.stories.js
@@ -1,7 +1,7 @@
 import NewsDetailMediaContact from './NewsDetailMediaContact.vue'
 
 export default {
-  title: 'WWW/NewsDetail/NewsDetailMediaContact',
+  title: 'Components/WWW/NewsDetail/NewsDetailMediaContact',
   component: NewsDetailMediaContact
 }
 
@@ -16,7 +16,7 @@ const contacts = [
   }
 ]
 
-export const Single = { args: { contacts, releaseNumber: '2020-140' } }
+export const BaseStory = { args: { contacts, releaseNumber: '2020-140' } }
 
 export const Multiple = {
   args: {
diff --git a/packages/vue/src/components/ParallaxContainer/ParallaxContainer.stories.js b/packages/vue/src/components/ParallaxContainer/ParallaxContainer.stories.js
index 1b025f93..d8db7fe8 100644
--- a/packages/vue/src/components/ParallaxContainer/ParallaxContainer.stories.js
+++ b/packages/vue/src/components/ParallaxContainer/ParallaxContainer.stories.js
@@ -2,7 +2,7 @@ import ParallaxElement from './../ParallaxElement/ParallaxElement.vue'
 import ParallaxContainer from './ParallaxContainer.vue'
 
 export default {
-  title: 'Components/ParallaxContainer',
+  title: 'Components/Utilities/ParallaxContainer',
   component: ParallaxContainer,
   decorators: [
     () => ({
@@ -39,9 +39,9 @@ const ParallaxContainerTemplate = (args) => ({
   </ParallaxContainer>`
 })
 
-export const Default = ParallaxContainerTemplate.bind({})
-Default.storyName = 'ParallaxContainer'
-Default.args = {
+export const BaseStory = ParallaxContainerTemplate.bind({})
+BaseStory.storyName = 'ParallaxContainer'
+BaseStory.args = {
   invert: true,
   overflow: true
 }
diff --git a/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.stories.js b/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.stories.js
index a40e3174..22d8f66d 100644
--- a/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.stories.js
+++ b/packages/vue/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.stories.js
@@ -1,7 +1,7 @@
 import PodcastSeriesCarousel from './PodcastSeriesCarousel.vue'
 
 export default {
-  title: 'WWW/PodcastDetail/PodcastSeriesCarousel',
+  title: 'Components/WWW/PodcastDetail/PodcastSeriesCarousel',
   component: PodcastSeriesCarousel,
   parameters: {
     docs: {
@@ -225,7 +225,7 @@ export const PodcastSeriesCarouselData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     series: PodcastSeriesCarouselData.series,
     initialSeasonId: PodcastSeriesCarouselData.parent?.id
diff --git a/packages/vue/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js b/packages/vue/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js
index e23af806..0f758e8c 100644
--- a/packages/vue/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js
+++ b/packages/vue/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js
@@ -2,7 +2,7 @@ import RoboticsDetailStats from './RoboticsDetailStats.vue'
 import RoboticsDetailStatsMini from './RoboticsDetailStatsMini.vue'
 
 export default {
-  title: 'WWW/RoboticsDetail/RoboticsDetailStats',
+  title: 'Components/WWW/RoboticsDetail/RoboticsDetailStats',
   component: RoboticsDetailStats,
   subcomponents: { RoboticsDetailStatsMini },
   decorators: [
@@ -67,7 +67,7 @@ export const RoboticsDetailStatsData = {
   ]
 }
 
-export const Base = {
+export const BaseStory = {
   args: {
     mass: RoboticsDetailStatsData.mass,
     height: RoboticsDetailStatsData.height,
diff --git a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js
index 9de2ddcd..61c384ad 100644
--- a/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js
+++ b/packages/vue/src/components/SearchFilterGroup/SearchFilterGroup.stories.js
@@ -19,7 +19,8 @@ const SearchFilterGroupTemplate = (args) => ({
 />`
 })
 
-export const TopicFilter = {
+export const BaseStory = {
+  name: 'Topic Filter',
   args: {
     filterBy: [],
     buckets: [
diff --git a/packages/vue/src/components/SearchInput/SearchInput.stories.js b/packages/vue/src/components/SearchInput/SearchInput.stories.js
index b94f090d..f54615cd 100644
--- a/packages/vue/src/components/SearchInput/SearchInput.stories.js
+++ b/packages/vue/src/components/SearchInput/SearchInput.stories.js
@@ -6,7 +6,7 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     searchQuery: '',
     placeholder: '',
diff --git a/packages/vue/src/components/SearchInput/SearchInput.vue b/packages/vue/src/components/SearchInput/SearchInput.vue
index 306015cc..4d3018ab 100644
--- a/packages/vue/src/components/SearchInput/SearchInput.vue
+++ b/packages/vue/src/components/SearchInput/SearchInput.vue
@@ -1,6 +1,41 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import IconSearch from './../Icons/IconSearch.vue'
+
+interface SearchInputProps {
+  underlinedInput?: boolean
+  underlinedInputValue?: string
+  placeholder?: string
+  autoFocus?: boolean
+  defaultColors?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<SearchInputProps>(), {
+  underlinedInput: false,
+  underlinedInputValue: undefined,
+  placeholder: '',
+  autoFocus: false,
+  defaultColors: true
+})
+
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel()
+const isFocused = ref(false)
+const searchQueryRef = ref(undefined)
+
+onMounted(() => {
+  if (props.autoFocus && searchQueryRef.value) {
+    const inputField = searchQueryRef.value as HTMLElement
+    inputField.focus()
+    isFocused.value = true
+  }
+})
+</script>
 <template>
   <!--
-    A somewhat generic component that can be used for handiling search input
+    A somewhat generic component that can be used for handling search input
     We do this in at least two places:
       * on pages (such as the search page and listing pages)
       * for site-wide search -->
@@ -48,41 +83,6 @@
     />
   </div>
 </template>
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import IconSearch from './../Icons/IconSearch.vue'
-
-interface SearchInputProps {
-  underlinedInput?: boolean
-  underlinedInputValue?: string
-  placeholder?: string
-  autoFocus?: boolean
-  defaultColors?: boolean
-}
-
-// define props
-const props = withDefaults(defineProps<SearchInputProps>(), {
-  underlinedInput: false,
-  underlinedInputValue: undefined,
-  placeholder: '',
-  autoFocus: false,
-  defaultColors: true
-})
-
-const emit = defineEmits(['input', 'esc'])
-
-const model = defineModel()
-const isFocused = ref(false)
-const searchQueryRef = ref(undefined)
-
-onMounted(() => {
-  if (props.autoFocus && searchQueryRef.value) {
-    const inputField = searchQueryRef.value as HTMLElement
-    inputField.focus()
-    isFocused.value = true
-  }
-})
-</script>
 <style lang="scss" scoped>
 .custom-focus {
   input {
diff --git a/packages/vue/src/components/SearchPagination/SearchPagination.stories.js b/packages/vue/src/components/SearchPagination/SearchPagination.stories.js
index 00ef8b2f..db620cc6 100644
--- a/packages/vue/src/components/SearchPagination/SearchPagination.stories.js
+++ b/packages/vue/src/components/SearchPagination/SearchPagination.stories.js
@@ -6,7 +6,8 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const TwoPages = {
+export const BaseStory = {
+  name: 'Two Pages',
   args: {
     totalPages: 2,
     currentPage: 1
diff --git a/packages/vue/src/components/SearchResultCard/SearchResultCard.stories.js b/packages/vue/src/components/SearchResultCard/SearchResultCard.stories.js
index 4db0828e..a6feb7f0 100644
--- a/packages/vue/src/components/SearchResultCard/SearchResultCard.stories.js
+++ b/packages/vue/src/components/SearchResultCard/SearchResultCard.stories.js
@@ -36,7 +36,7 @@ export const SearchResultCardData = {
   featured: false
 }
 
-export const StandardResult = { args: SearchResultCardData }
+export const BaseStory = { name: 'Standard Result', args: SearchResultCardData }
 
 export const FeaturedResult = {
   args: { ...SearchResultCardData, featured: true }
diff --git a/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.stories.js b/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.stories.js
index 8154bf41..c48a9621 100644
--- a/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.stories.js
+++ b/packages/vue/src/components/SearchResultGridItem/SearchResultGridItem.stories.js
@@ -46,7 +46,8 @@ export const SearchResultGridCardData = {
   headingLevel: 'h2'
 }
 
-export const StandardResult = {
+export const BaseStory = {
+  name: 'Standard Result',
   args: {
     ...SearchResultGridCardData.page,
     pageContentType: SearchResultGridCardData.page.content_type
diff --git a/packages/vue/src/components/SearchSelectMenu/SearchSelectMenu.stories.js b/packages/vue/src/components/SearchSelectMenu/SearchSelectMenu.stories.js
index 42c5018f..68bd86cd 100644
--- a/packages/vue/src/components/SearchSelectMenu/SearchSelectMenu.stories.js
+++ b/packages/vue/src/components/SearchSelectMenu/SearchSelectMenu.stories.js
@@ -5,7 +5,7 @@ export default {
   component: SearchSelectMenu
 }
 
-export const SortBy = {
+export const BaseStory = {
   args: {
     title: 'Sort by',
     options: [
diff --git a/packages/vue/src/components/ShareButtons/ShareButtons.stories.js b/packages/vue/src/components/ShareButtons/ShareButtons.stories.js
index f2906656..7d5063d3 100644
--- a/packages/vue/src/components/ShareButtons/ShareButtons.stories.js
+++ b/packages/vue/src/components/ShareButtons/ShareButtons.stories.js
@@ -1,7 +1,7 @@
 import ShareButtons from './ShareButtons.vue'
 
 export default {
-  title: 'Components/ShareButtons',
+  title: 'Components/Utilities/ShareButtons',
   component: ShareButtons,
   excludeStories: /.*Data$/
 }
@@ -13,4 +13,4 @@ export const BlockShareButtonsData = {
   inline: false
 }
 
-export const Default = { args: BlockShareButtonsData }
+export const BaseStory = { args: BlockShareButtonsData }
diff --git a/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js b/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js
index 22cbffca..f1130828 100644
--- a/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js
+++ b/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js
@@ -5,8 +5,8 @@ export default {
   component: ShareButtonsEdu
 }
 
-export const ShareButtons = {
-  name: 'Share Buttons EDU',
+export const BaseStory = {
+  name: 'ShareButtonsEdu',
   args: {
     url: 'https://jpl.nasa.gov/edu/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
     title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight"
diff --git a/packages/vue/src/components/SkipLink/SkipLink.stories.js b/packages/vue/src/components/SkipLink/SkipLink.stories.js
index cebeee49..0f80b084 100644
--- a/packages/vue/src/components/SkipLink/SkipLink.stories.js
+++ b/packages/vue/src/components/SkipLink/SkipLink.stories.js
@@ -1,9 +1,9 @@
 import SkipLink from './SkipLink.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/SkipLink',
+  title: 'Navigation/Elements/SkipLink',
   component: SkipLink,
   excludeStories: /.*Data$/
 }
 
-export const Default = {}
+export const BaseStory = {}
diff --git a/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.js b/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.js
new file mode 100644
index 00000000..4b4069f3
--- /dev/null
+++ b/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.js
@@ -0,0 +1,57 @@
+import SwimlaneCTA from './SwimlaneCTA.vue'
+
+export default {
+  title: 'Components/WWW/SwimlaneCTA',
+  component: SwimlaneCTA,
+  parameters: {
+    docs: {
+      description: {
+        component: `The SwimlaneCTA component combines BaseSwimlane with other elements (JPL logo, links, etc.) to create the component that is used on the WWW homepage.`
+      }
+    }
+  }
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    darkMode: true,
+    targetLink: 'https://jpl.nasa.gov/about',
+    backgroundImages: [
+      'https://picsum.photos/1380/540?random=1',
+      'https://picsum.photos/1380/540?random=2',
+      'https://picsum.photos/1380/540?random=3',
+      'https://picsum.photos/1380/540?random=4',
+      'https://picsum.photos/1380/540?random=5'
+    ],
+    backgroundImagesSmall: [
+      'https://picsum.photos/1380/540?random=1',
+      'https://picsum.photos/1380/540?random=2',
+      'https://picsum.photos/1380/540?random=3',
+      'https://picsum.photos/1380/540?random=4',
+      'https://picsum.photos/1380/540?random=5'
+    ],
+    words: [
+      'Artists',
+      'Communicators',
+      'Designers',
+      'Disruptors',
+      'Dreamers',
+      'Developers',
+      'Educators',
+      'Engineers',
+      'Innovators',
+      'Inventors',
+      'Makers',
+      'Problem Solvers',
+      'Roboticists',
+      'Scientists',
+      'Software Engineers',
+      'Thinkers',
+      'Visualizers'
+    ],
+    rows: 9,
+    transitionDuration: 1800,
+    transitionDelay: 800
+  }
+}
diff --git a/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.mdx b/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.mdx
deleted file mode 100644
index 75e4082d..00000000
--- a/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.stories.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import SwimlaneCTA from './SwimlaneCTA.vue'
-
-<Meta
-  title="Components/SwimlaneCTA"
-  component={SwimlaneCTA}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const SwimlaneCTAData = {
-  darkMode: true,
-  targetLink: 'https://jpl.nasa.gov/about',
-  backgroundImages: [
-    'https://picsum.photos/1380/540?random=1',
-    'https://picsum.photos/1380/540?random=2',
-    'https://picsum.photos/1380/540?random=3',
-    'https://picsum.photos/1380/540?random=4',
-    'https://picsum.photos/1380/540?random=5'
-  ],
-  backgroundImagesSmall: [
-    'https://picsum.photos/1380/540?random=1',
-    'https://picsum.photos/1380/540?random=2',
-    'https://picsum.photos/1380/540?random=3',
-    'https://picsum.photos/1380/540?random=4',
-    'https://picsum.photos/1380/540?random=5'
-  ],
-  words: [
-    'Artists',
-    'Communicators',
-    'Designers',
-    'Disruptors',
-    'Dreamers',
-    'Developers',
-    'Educators',
-    'Engineers',
-    'Innovators',
-    'Inventors',
-    'Makers',
-    'Problem Solvers',
-    'Roboticists',
-    'Scientists',
-    'Software Engineers',
-    'Thinkers',
-    'Visualizers'
-  ],
-  rows: 9,
-  transitionDuration: 1800,
-  transitionDelay: 800
-}
-export const SwimlaneCTATemplate = (args) => ({
-  props: Object.keys(args),
-  components: { SwimlaneCTA },
-  template: `<SwimlaneCTA :dark-mode="darkMode" :background-images="backgroundImages" :background-images-small="backgroundImagesSmall" :target-link="targetLink"/>`
-})
-
-# SwimlaneCTA
-
-## Usage
-
-The SwimlaneCTA component combines [BaseSwimlane](?path=/story/www-components-base-baseswimlane--default) with other elements (JPL logo, links, etc.) to create the component that is used on the WWW homepage.
-
-<Canvas className="sbdocs-preview-full-width">
-  <Story
-    name="SwimlaneCTA"
-    args={SwimlaneCTAData}
-  >
-    {SwimlaneCTATemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={SwimlaneCTA} />
-
-## Example data
-
-<code language="json">{JSON.stringify(SwimlaneCTAData, null, 2)}</code>
diff --git a/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue b/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue
index a72daf77..9cc86592 100644
--- a/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue
+++ b/packages/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue
@@ -16,7 +16,7 @@
       >
         <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
         <div
-          class="lg:pr-12 lg:py-5 lg:flex-row relative z-20 flex flex-col justify-center w-full px-5 py-6"
+          class="lg:pr-12 lg:py-5 lg:flex-row relative z-20 flex flex-col justify-center w-full px-5 py-6 font-primary"
         >
           <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
             <div class="text-contrast relative z-20 p-2 pl-0">
@@ -24,7 +24,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png"
+                  :src="jplLogoSFFF"
                   alt="JPL Logo"
                   width="106"
                   height="32"
@@ -34,7 +34,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-222222-94h28w@2x.png"
+                  :src="jplLogo222"
                   alt="JPL Logo"
                   width="111"
                   height="32"
@@ -74,7 +74,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png"
+                  :src="jplLogoFFF"
                   alt="JPL Logo"
                   width="106"
                   height="32"
@@ -84,7 +84,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-222222-94h28w@2x.png"
+                  :src="jplLogo222"
                   alt="JPL Logo"
                   width="111"
                   height="32"
@@ -118,6 +118,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import jplLogoSFFF from '@explorer-1/common/src/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png'
+import jplLogoFFF from '@explorer-1/common/src/images/png/brand-jpl-logo-FFFFFF-94h28w@2x.png'
+import jplLogo222 from '@explorer-1/common/src/images/png/brand-jpl-logo-222222-94h28w@2x.png'
+
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseSwimlane from './../BaseSwimlane/BaseSwimlane.vue'
 
@@ -183,6 +187,9 @@ export default defineComponent({
   },
   data() {
     return {
+      jplLogoFFF: jplLogoFFF,
+      jplLogo222: jplLogo222,
+      jplLogoSFFF: jplLogoSFFF,
       mobileRows: 2,
       desktopRows: 9,
       mobileScale: 1.9,
diff --git a/packages/vue/src/components/TextArea/TextArea.stories.js b/packages/vue/src/components/TextArea/TextArea.stories.js
new file mode 100644
index 00000000..730100ba
--- /dev/null
+++ b/packages/vue/src/components/TextArea/TextArea.stories.js
@@ -0,0 +1,28 @@
+import TextArea from './TextArea.vue'
+
+export default {
+  title: 'Components/Forms/TextArea',
+  component: TextArea
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    inputName: 'message',
+    required: true,
+    label: 'Your Message',
+    placeholder: 'Enter your message here',
+    rows: 10
+  }
+}
+
+export const HiddenLabel = {
+  name: 'Hidden Label',
+  args: {
+    inputName: 'message',
+    label: 'Your Message',
+    showLabel: false,
+    required: false,
+    placeholder: 'Your message here'
+  }
+}
diff --git a/packages/vue/src/components/TextArea/TextArea.vue b/packages/vue/src/components/TextArea/TextArea.vue
new file mode 100644
index 00000000..f994fb07
--- /dev/null
+++ b/packages/vue/src/components/TextArea/TextArea.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+interface TextAreaProps {
+  inputName: string
+  label: string
+  cols?: number
+  rows?: number
+  required?: boolean
+  showLabel?: boolean
+  placeholder?: string
+  labelClass?: string
+  inputClass?: string
+}
+// define props
+const props = withDefaults(defineProps<TextAreaProps>(), {
+  cols: undefined,
+  rows: 4,
+  required: false,
+  label: undefined,
+  showLabel: true,
+  placeholder: undefined,
+  labelClass: undefined,
+  inputClass: undefined
+})
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel({ type: String })
+const TextAreaRef = ref(undefined)
+const isFocused = ref(false)
+
+const inputId = computed(() => {
+  return `${props.inputName}_input`
+})
+const labelId = computed(() => {
+  return `${inputId.value}_label`
+})
+</script>
+<template>
+  <div>
+    <label
+      v-if="props.showLabel"
+      :id="labelId"
+      :for="inputId"
+      :class="props.labelClass ? props.labelClass : 'block text-subtitle text-gray-dark mb-2'"
+    >
+      {{ props.label }}
+      <template v-if="props.required">
+        <span class="text-error">*</span>
+      </template>
+    </label>
+    <textarea
+      :id="inputId"
+      ref="TextAreaRef"
+      v-model="model"
+      :cols="props.cols"
+      :rows="props.rows"
+      :name="props.inputName"
+      :required="props.required"
+      :placeholder="props.placeholder"
+      :aria-required="props.required"
+      :aria-labelledby="props.showLabel ? labelId : undefined"
+      :aria-label="!props.showLabel ? props.label : undefined"
+      :class="
+        props.inputClass
+          ? props.inputClass
+          : 'border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl'
+      "
+      @keydown.esc="emit('esc')"
+      @input="emit('input', $event.target)"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    ></textarea>
+  </div>
+</template>
diff --git a/packages/vue/src/components/TextInput/TextInput.stories.js b/packages/vue/src/components/TextInput/TextInput.stories.js
new file mode 100644
index 00000000..dd9960dd
--- /dev/null
+++ b/packages/vue/src/components/TextInput/TextInput.stories.js
@@ -0,0 +1,30 @@
+import TextInput from './TextInput.vue'
+
+export default {
+  title: 'Components/Forms/TextInput',
+  component: TextInput
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    inputName: 'name',
+    type: 'text',
+    required: true,
+    label: 'Your Name',
+    ariaLabel: 'Your Name',
+    placeholder: 'Enter your name here',
+    autofocus: true
+  }
+}
+
+export const HiddenLabel = {
+  args: {
+    inputName: 'name',
+    type: 'text',
+    required: false,
+    placeholder: 'Your name here',
+    label: 'Name',
+    showLabel: false
+  }
+}
diff --git a/packages/vue/src/components/TextInput/TextInput.vue b/packages/vue/src/components/TextInput/TextInput.vue
new file mode 100644
index 00000000..6f93e37a
--- /dev/null
+++ b/packages/vue/src/components/TextInput/TextInput.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+interface TextInputProps {
+  inputName: string
+  type?: string
+  required?: boolean
+  label: string
+  showLabel?: boolean
+  placeholder?: string
+  maxlength?: string
+  pattern?: string
+  title?: string
+  autofocus?: boolean
+  labelClass?: string
+  inputClass?: string
+}
+// define props
+const props = withDefaults(defineProps<TextInputProps>(), {
+  type: 'text',
+  showLabel: true,
+  required: false,
+  placeholder: undefined,
+  autoFocus: false,
+  maxlength: undefined,
+  pattern: undefined,
+  title: undefined,
+  labelClass: undefined,
+  inputClass: undefined
+})
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel({ type: String })
+const TextInputRef = ref(undefined)
+const isFocused = ref(false)
+
+const inputId = computed(() => {
+  return `${props.inputName}_input`
+})
+const labelId = computed(() => {
+  return `${inputId.value}_label`
+})
+onMounted(() => {
+  if (props.autoFocus && TextInputRef.value) {
+    const inputField = TextInputRef.value as HTMLInputElement
+    inputField.focus()
+    isFocused.value = true
+  }
+})
+</script>
+<template>
+  <div>
+    <label
+      v-if="props.showLabel"
+      :id="labelId"
+      :for="inputId"
+      :class="props.labelClass ? props.labelClass : 'block text-subtitle text-gray-dark'"
+      >{{ props.label }}
+      <template v-if="props.required">
+        <span class="text-error">*</span>
+      </template></label
+    >
+    <input
+      :id="inputId"
+      ref="TextInputRef"
+      v-model="model"
+      :name="props.inputName"
+      :type="props.type"
+      :required="props.required"
+      :title="props.title"
+      :placeholder="props.placeholder"
+      :maxlength="props.maxlength"
+      :pattern="props.pattern"
+      :aria-required="props.required"
+      :aria-labelledby="props.showLabel ? labelId : undefined"
+      :aria-label="!props.showLabel ? props.label : undefined"
+      :class="
+        props.inputClass
+          ? props.inputClass
+          : 'border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl'
+      "
+      @keydown.esc="emit('esc')"
+      @input="emit('input', $event.target)"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+  </div>
+</template>
diff --git a/packages/vue/src/components/TheFooter/TheFooter.stories.js b/packages/vue/src/components/TheFooter/TheFooter.stories.js
index 457cade5..9512683a 100644
--- a/packages/vue/src/components/TheFooter/TheFooter.stories.js
+++ b/packages/vue/src/components/TheFooter/TheFooter.stories.js
@@ -1,11 +1,16 @@
 import TheFooter from './TheFooter.vue'
 
 export default {
-  title: 'WWW/Header & Footer/TheFooter',
+  title: 'Navigation/Footers/External Footer',
   component: TheFooter,
   excludeStories: /.*Data$/,
   parameters: {
-    viewMode: 'canvas'
+    docs: {
+      description: {
+        component:
+          'This component can be used for any external footer. Its styles will change based on the theme being used.'
+      }
+    }
   }
 }
 
@@ -594,7 +599,7 @@ export const TheFooterData = {
   ]
 }
 
-export const Footer = {
+export const BaseStory = {
   args: {
     data: TheFooterData,
     commitSha: 'commit no.'
diff --git a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
index 422b252c..8c0195b8 100644
--- a/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
+++ b/packages/vue/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js
@@ -1,7 +1,7 @@
 import ThumbnailCarousel from './ThumbnailCarousel.vue'
 
 export default {
-  title: 'Components/ThumbnailCarousel',
+  title: 'Components/Utilities/ThumbnailCarousel',
   component: ThumbnailCarousel,
   parameters: {
     docs: {
@@ -103,4 +103,4 @@ export const ThumbnailCarouselData = {
   ]
 }
 
-export const Default = { args: ThumbnailCarouselData }
+export const BaseStory = { args: ThumbnailCarouselData }
diff --git a/packages/vue/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.stories.js b/packages/vue/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.stories.js
index 57325bc3..c2854bcc 100644
--- a/packages/vue/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.stories.js
+++ b/packages/vue/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.stories.js
@@ -1,6 +1,6 @@
 import TopicDetailMissionCarousel from './TopicDetailMissionCarousel.vue'
 export default {
-  title: 'WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarousel',
+  title: 'Components/WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarousel',
   component: TopicDetailMissionCarousel,
   excludeStories: /.*Data$/
 }
@@ -83,7 +83,7 @@ export const TopicDetailMissionCarouselData = [
   }
 ]
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     title: 'Mars',
     relatedMissionsLinkUrl: 'http://localhost:3000/missions?mission_target=Mars',
diff --git a/packages/vue/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js b/packages/vue/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js
index 66aac0e3..7dddc97d 100644
--- a/packages/vue/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js
+++ b/packages/vue/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js
@@ -3,7 +3,7 @@
 import TopicDetailMissionCarouselItem from './TopicDetailMissionCarouselItem.vue'
 
 export default {
-  title: 'WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarouselItem',
+  title: 'Components/WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarouselItem',
   component: TopicDetailMissionCarouselItem,
   decorators: [
     () => ({
@@ -35,4 +35,4 @@ export const TopicDetailMissionCarouselItemData = {
   url: '/missions/gravity-recovery-and-climate-experiment-follow-on-grace-fo/'
 }
 
-export const SingleItem = { args: { data: TopicDetailMissionCarouselItemData } }
+export const BaseStory = { args: { data: TopicDetailMissionCarouselItemData } }
diff --git a/packages/vue/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.stories.js b/packages/vue/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.stories.js
index fc6e398f..4caf6665 100644
--- a/packages/vue/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.stories.js
+++ b/packages/vue/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.stories.js
@@ -1,6 +1,6 @@
 import TopicDetailMissionSpotlight from './TopicDetailMissionSpotlight.vue'
 export default {
-  title: 'WWW/TopicDetail/TopicDetailMissionSpotlight',
+  title: 'Components/WWW/TopicDetail/TopicDetailMissionSpotlight',
   component: TopicDetailMissionSpotlight,
   decorators: [
     () => ({
@@ -50,7 +50,7 @@ export const TopicDetailMissionSpotlightData = {
 }
 
 // stories
-export const MissionSpotlight = {
+export const BaseStory = {
   args: {
     data: TopicDetailMissionSpotlightData
   }
diff --git a/packages/vue/src/components/TopicDetailMore/TopicDetailMore.stories.js b/packages/vue/src/components/TopicDetailMore/TopicDetailMore.stories.js
index 35546e81..41bafc21 100644
--- a/packages/vue/src/components/TopicDetailMore/TopicDetailMore.stories.js
+++ b/packages/vue/src/components/TopicDetailMore/TopicDetailMore.stories.js
@@ -1,6 +1,6 @@
 import TopicDetailMore from './TopicDetailMore.vue'
 export default {
-  title: 'WWW/TopicDetail/TopicDetailMore',
+  title: 'Components/WWW/TopicDetail/TopicDetailMore',
   component: TopicDetailMore,
   excludeStories: /.*Data$/
 }
@@ -181,7 +181,7 @@ export const TopicDetailMoreData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     topic: 'Mars',
     more: TopicDetailMoreData.moreAboutTopic,
diff --git a/packages/vue/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js b/packages/vue/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js
index e1f8c6fc..650b6b5b 100644
--- a/packages/vue/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js
+++ b/packages/vue/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js
@@ -1,6 +1,6 @@
 import TopicDetailMoreItem from './TopicDetailMoreItem.vue'
 export default {
-  title: 'WWW/TopicDetail/TopicDetailMore/TopicDetailMoreItem',
+  title: 'Components/WWW/TopicDetail/TopicDetailMore/TopicDetailMoreItem',
   component: TopicDetailMoreItem,
   decorators: [
     () => ({
@@ -84,7 +84,7 @@ const TopicDetailMoreItemData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     data: TopicDetailMoreItemData.default
   }
diff --git a/packages/vue/src/components/TopicDetailStreamfield/TopicDetailStreamfield.stories.js b/packages/vue/src/components/TopicDetailStreamfield/TopicDetailStreamfield.stories.js
index 4baf0a50..be359c06 100644
--- a/packages/vue/src/components/TopicDetailStreamfield/TopicDetailStreamfield.stories.js
+++ b/packages/vue/src/components/TopicDetailStreamfield/TopicDetailStreamfield.stories.js
@@ -4,7 +4,7 @@ import { BlockRelatedLinksData } from './../BlockRelatedLinks/BlockRelatedLinks.
 import TopicDetailStreamfield from './TopicDetailStreamfield.vue'
 
 export default {
-  title: 'WWW/TopicDetail/TopicDetailStreamfield',
+  title: 'Components/WWW/TopicDetail/TopicDetailStreamfield',
   component: TopicDetailStreamfield,
   decorators: [
     () => ({
@@ -31,4 +31,4 @@ export const TopicDetailStreamfieldData = {
   ]
 }
 
-export const Default = { args: { data: TopicDetailStreamfieldData.body, topic: 'Topic Name' } }
+export const BaseStory = { args: { data: TopicDetailStreamfieldData.body, topic: 'Topic Name' } }
diff --git a/packages/vue/src/components/YearTicker/YearTicker.stories.js b/packages/vue/src/components/YearTicker/YearTicker.stories.js
index ad67b019..1f875b0a 100644
--- a/packages/vue/src/components/YearTicker/YearTicker.stories.js
+++ b/packages/vue/src/components/YearTicker/YearTicker.stories.js
@@ -1,7 +1,7 @@
 import YearTicker from './YearTicker.vue'
 
 export default {
-  title: 'Components/YearTicker',
+  title: 'Components/Utilities/YearTicker',
   component: YearTicker,
   excludeStories: /.*Data$/
 }
@@ -33,5 +33,5 @@ const YearTickerTemplate = (args) => ({
   template: `<YearTicker :targetYear="demoYear"/>`
 })
 
-export const Default = YearTickerTemplate.bind({})
-Default.storyName = 'YearTicker'
+export const BaseStory = YearTickerTemplate.bind({})
+BaseStory.storyName = 'YearTicker'
diff --git a/packages/vue/src/docs/foundation/color.docs.mdx b/packages/vue/src/docs/foundation/color.docs.mdx
index 798663a2..7af4257b 100644
--- a/packages/vue/src/docs/foundation/color.docs.mdx
+++ b/packages/vue/src/docs/foundation/color.docs.mdx
@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas } from '@storybook/blocks'
 
-<Meta title="Foundation/Colors" />
+<Meta title="Foundations/Colors" />
 
 # Colors
 
diff --git a/packages/vue/src/docs/foundation/grid.stories.js b/packages/vue/src/docs/foundation/grid.stories.js
index f1597a1b..c1edd387 100644
--- a/packages/vue/src/docs/foundation/grid.stories.js
+++ b/packages/vue/src/docs/foundation/grid.stories.js
@@ -1,6 +1,6 @@
 import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
 export default {
-  title: 'Foundation/Grid and Layout',
+  title: 'Foundations/Grid and Layout',
   component: LayoutHelper,
   tags: ['!autodocs']
 }
diff --git a/packages/vue/src/docs/foundation/grid_layouthelpers.stories.js b/packages/vue/src/docs/foundation/grid_layouthelpers.stories.js
index 6239faf2..c0391f1e 100644
--- a/packages/vue/src/docs/foundation/grid_layouthelpers.stories.js
+++ b/packages/vue/src/docs/foundation/grid_layouthelpers.stories.js
@@ -3,7 +3,7 @@ import LayoutHelper, { indents } from './../../components/LayoutHelper/LayoutHel
 // TODO: DOCS: update this to match the full grid/layout documentation
 
 export default {
-  title: 'Foundation/Grid and Layout/Column Layout Helpers',
+  title: 'Foundations/Grid and Layout/Column Layout Helpers',
   component: LayoutHelper,
   tags: ['!autodocs'],
   argTypes: {
diff --git a/packages/vue/src/docs/foundation/themes.stories.js b/packages/vue/src/docs/foundation/themes.stories.js
index 761edde9..3f5d1279 100644
--- a/packages/vue/src/docs/foundation/themes.stories.js
+++ b/packages/vue/src/docs/foundation/themes.stories.js
@@ -1,7 +1,7 @@
 import DynamicTokens from './DynamicTokens.vue'
 
 export default {
-  title: 'Foundation/Themes',
+  title: 'Foundations/Themes',
   component: DynamicTokens,
   tags: ['!autodocs']
 }
diff --git a/packages/vue/src/docs/foundation/typography.stories.js b/packages/vue/src/docs/foundation/typography.stories.js
index 1aa88f53..45551fb2 100644
--- a/packages/vue/src/docs/foundation/typography.stories.js
+++ b/packages/vue/src/docs/foundation/typography.stories.js
@@ -3,9 +3,8 @@ import IconLocation from './../../components/Icons/IconLocation.vue'
 import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
 
 export default {
-  title: 'Foundation/Typography',
+  title: 'Foundations/Typography',
   component: FontVariants,
-  subcomponents: { BaseHeading, IconLocation },
   tags: ['!autodocs']
 }
 
@@ -108,7 +107,7 @@ export const HeadingIcons = {
 export const TextContrast = {
   args: {},
   render: () => ({
-    template: `<div style="background-image: url(/explorer-1/bg-stars.jpg); background-color: #000;" class="bg-cover bg-no-repeat bg-center">
+    template: `<div style="background-image: url('https://picsum.photos/1000/400');" class="bg-cover bg-no-repeat bg-center">
   <div class="p-10 bg-black/30">
     <span class="text-h3 text-white text-contrast">
       This text uses a text shadow that increases readability when used with a semi-transparent overlay.
diff --git a/packages/vue/src/docs/getting-started/designer.docs.mdx b/packages/vue/src/docs/getting-started/designer.docs.mdx
new file mode 100644
index 00000000..ffc12f2a
--- /dev/null
+++ b/packages/vue/src/docs/getting-started/designer.docs.mdx
@@ -0,0 +1,18 @@
+import { Meta, Description } from '@storybook/blocks'
+
+<Meta title="Getting Started/Designer" />
+
+# Getting Started Guide for Designers
+
+Designers are encouraged to browse through the Explorer 1 Storybook to become familiar with the design system and its offerings and limitations. Most of the documentation is developer-focused, but the following sections provide helpful overviews:
+
+## Design system foundations
+
+- [Colors](?path=/docs/foundation-colors--docs)
+- [Typography](?path=/docs/foundation-typography--docs)
+- [Icons](?path=/docs/foundation-icons--docs)
+- [Grid and Layout](?path=/docs/foundation-grid-and-layout--docs)
+
+## Components
+
+Explorer 1 comprises components that range from very simple, single-purpose elements to complex combinations of multiple other components. We've categorized these into a few broad buckets, but the lines between them are blurry. Learn more about the types of components offered by Explorer 1 and how to use them by starting on our [Components overview](?path=/docs/components-overview--docs) page.
diff --git a/packages/vue/src/docs/getting-started/developer.docs.mdx b/packages/vue/src/docs/getting-started/developer.docs.mdx
new file mode 100644
index 00000000..c0041af9
--- /dev/null
+++ b/packages/vue/src/docs/getting-started/developer.docs.mdx
@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Getting Started/Developer" />
+
+# Getting Started Guide for Developers
+
+To use the Explorer 1 design system, there are three things you will need:
+
+1. [The @nasa-jpl/explorer-1 npm package](#using-the-npm-package)
+2. [Familiarity with the design system foundations](#design-system-foundations)
+3. [Components and HTML templates](#components-and-html-templates)
+
+<span id="using-the-npm-package"></span>
+
+## Using the npm package
+
+[![npm](https://img.shields.io/npm/v/@nasa-jpl/explorer-1)](https://npmjs.com/package/@nasa-jpl/explorer-1)
+
+This package includes all of the frontend assets (JS and SCSS) necessary to create components using the HTML markup examples in this Storybook. For information on how to install and use the npm package, please refer to the [@nasa-jpl/explorer-1 README](https://github.com/nasa-jpl/explorer-1).
+
+<span id="design-system-foundations"></span>
+
+## Design system foundations
+
+Usage of the Explorer 1 design system is based on utility CSS classes, specifically Tailwind CSS, a utility-first CSS framework. We recommended becoming familiar with [how to use Tailwind CSS](https://tailwindcss.com/docs).
+
+Browse the [Foundation section](?path=/docs/foundation-colors--docs) of this Storybook to become familiar with how to use utility classes for:
+
+- [Colors](?path=/docs/foundation-colors--docs)
+- [Typography](?path=/docs/foundation-typography--docs)
+- [Icons](?path=/docs/foundation-icons--docs)
+- [Grid and Layout](?path=/docs/foundation-grid-and-layout--docs)
+
+<span id="components-and-html-templates"></span>
+
+## Components and HTML templates
+
+Explorer 1 comprises components that range from very simple, single-purpose elements to complex combinations of multiple other components. We've categorized these into a few broad buckets, but the lines between them are blurry. Learn more about the types of components offered by Explorer 1 and how to use them by starting on our [Components overview](?path=/docs/components-overview--docs) page.
+
+### HTML templates
+
+HTML templates are provided by this Storybook in both Docs view and Canvas view. You can also modify the component "controls" to customize the component.
+
+#### How to copy HTML snippets from Docs view
+
+1. Find the story block you want to copy.
+2. In the bottom right corner of the block, click on "Show code".
+3. In the bottom right corner of the now-visible code block, click on "Copy".
+
+<details className="pl-4 -mt-3 text-sm">
+  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Docs view</span></summary>
+
+![how to copy snippets from Docs view](./gif/html-storybook-simple.gif)
+
+</details>
+
+4. You can customize the component by modifying the controls. The code will update to match.
+
+<details className="pl-4 -mt-3 text-sm">
+  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to customize a component</span></summary>
+
+![how to customize a component](./gif/html-storybook-customized.gif)
+
+</details>
+
+#### How to copy HTML snippets from Canvas view
+
+Canvas view is useful to isolate your view to a single rendition of the component. Some components are also only available in Canvas view.
+
+1. To switch to Canvas view, find the component you want and click on the "Canvas" tab in the upper left.
+2. Make sure addons (the tabbed pane under the rendered component) are enabled by clicking on the three dots to the right of the JPL logo and checking "Show addons", or by typing `A`. If you still don't see the addons pane, you may need to toggle "Change addons orientation" in the menu (or type `D`) a couple times.
+3. Click on the "HTML" tab within the addons pane.
+4. Click on "Copy" in the bottom right of the screen or manually copy and paste the code block.
+5. You can also customize the component by modifying the controls in the "Controls" tab within the Add-ons viewer. The code will update to match.
+
+<details className="pl-4 text-sm">
+  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Canvas view</span></summary>
+
+![how to copy snippets from Canvas view](./gif/storybook-canvas.gif)
+
+</details>
diff --git a/packages/vue/src/docs/guides/accessibility.docs.mdx b/packages/vue/src/docs/guides/accessibility.docs.mdx
new file mode 100644
index 00000000..0e0f921f
--- /dev/null
+++ b/packages/vue/src/docs/guides/accessibility.docs.mdx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta
+  title="Guides/Accessibility"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Accessibility
+
+Usage of Explorer 1 must be in compliance with [Section 508 of the Rehabilitation Act of 2001](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/final-rule/text-of-the-standards-and-guidelines) which states that:
+
+> Electronic content shall conform to Level A and Level AA Success Criteria and Conformance Requirements in [WCAG 2.0](https://www.w3.org/TR/WCAG20/)
+
+## Our QA Strategy
+
+To meet compliance requirements, we use the following strategy:
+
+1. When developing a component, employ best practices to make individual components accessible.
+2. Follow up with [manual testing](#manual-testing) of the component.
+3. Use automated accessibility tests as part of our CI/CD process for any final checks.
+4. Finally, run checks (manual and automated) on select full pages.
+
+### Automated testing options
+
+Automated tests are a good baseline, but note they can only find [30 to 40% of issues](https://alphagov.github.io/accessibility-tool-audit/).
+
+- For individual components, the Explorer 1 Storybook uses the [a11y addon](https://github.com/storybookjs/storybook/tree/master/addons/a11y), and in some cases [Axe](https://www.deque.com/axe/) in jsdom via Storyshots
+- For full pages, [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) checks are recommended.
+
+<span id="manual-testing"></span>
+
+### Manual testing
+
+When conducting manual accessibility testing, check for the following as a baseline:
+
+- Keyboard-only navigation is possible
+- Screen reader announces the UI as expected
+- Mobile touch interaction testing with iOS Safari or Android
+- Zoom the whole browser UI, or font size, or on-screen magnifier
diff --git a/packages/vue/src/docs/guides/responsive.docs.mdx b/packages/vue/src/docs/guides/responsive.docs.mdx
new file mode 100644
index 00000000..06757dd5
--- /dev/null
+++ b/packages/vue/src/docs/guides/responsive.docs.mdx
@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import * as Stories from './responsive.stories'
+
+<Meta of={Stories} />
+
+# Responsive Design
+
+Responsive design adapts the flow and layout of information to respond to a user’s behavior and environment based on screen size, platform and orientation. Adapting the flow of information and visual elements may sometimes require an optimized user experience to help fit content within certain parameters of a particular display or device. It may also require limiting the layout of the design to only include necessary modules, depending on a device’s parameters and resolution.
+
+- [Breakpoints and Containers](#breakpoints-and-containers)
+- [Maximum Width](#maximum-width)
+- [Tokens](#tokens)
+
+<span id="breakpoints-and-containers"></span>
+
+## Breakpoints and Containers
+
+> The examples on this page illustrate breakpoints based on viewport size. Try changing your browser size to see how the examples adapt. You can also switch over to canvas view and toggle through different viewport sizes using the toolbar menu.
+
+Breakpoints are the values at which content included on a webpage is resized and reflowed to fit a screen size on a particular device. Designing for different breakpoints allows designers and developers to optimize the display of information for mobile, tablet and desktop users alike.
+
+We set our breakpoints and associated containers via the `screens` and `containers.screens` options in our [Tailwind CSS configuration](?path=/docs/appendix-tailwindcss--docs). These containers are used in conjunction with our [Grid](?path=/docs/foundation-grid-and-layout--docs) to create the site and page layouts, all the way down to the component level.
+
+| Screen Token | Viewport `min-width` | `.container` `max-width` |
+| :----------- | -------------------: | -----------------------: |
+| `sm`         |              `640px` |                  `640px` |
+| `md`         |              `768px` |                  `768px` |
+| `lg`         |             `1024px` |                 `1024px` |
+| `xl`         |             `1280px` |                 `1280px` |
+| `2xl`        |             `1440px` |                 `1320px` |
+| `3xl`        |             `1800px` |                 `1320px` |
+
+The below example uses [Tokens](#tokens) to set the maximum width based on the screens defined in our Tailwind config. It also illustrates the foundation of the design system's layout for desktop screens.
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.Demo}
+/>
+
+<span id="maximum-width"></span>
+
+## Maximum width
+
+Explorer 1 uses screen `3xl` as its maximum width. No content in a component, not even in those labeled as "full bleed," ever exceeds `3xl`, although visual layout elements may (i.e. background colors). You can find examples of this in our [Grid & Layout](?path=/docs/foundation-grid-and-layout--docs#page-layout-recommendations) documentation.
+
+```html
+<div class="max-w-screen-3xl mx-auto">Content</div>
+```
+
+<span id="tokens"></span>
+
+## Tokens
+
+Screen tokens are used with Tailwind CSS classes to control widths:
+
+`.max-w-screen-{token}`
+
+They can also be used as directives for writing media queries:
+
+```css
+@screen lg {
+  /* rules for large screens */
+}
+@screen xl {
+  /* rules for xl screens */
+}
+```
diff --git a/packages/vue/src/docs/guides/responsive.stories.js b/packages/vue/src/docs/guides/responsive.stories.js
new file mode 100644
index 00000000..07845762
--- /dev/null
+++ b/packages/vue/src/docs/guides/responsive.stories.js
@@ -0,0 +1,36 @@
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+
+export default {
+  title: 'Guides/Responsive Design',
+  component: LayoutHelper,
+  tags: ['!autodocs']
+}
+
+export const Demo = {
+  args: {},
+  render: () => ({
+    template: `<div class="bg-gray-light border">
+  <code>body</code>
+  <div class="max-w-screen-3xl mx-auto bg-black text-white">
+    <code>.max-w-screen-3xl</code>
+      <div class="sm:BaseGrid container mx-auto bg-gray-light text-black">
+        <div class="col-start-1 col-end-13">
+          <code class="text-black">.container with nested grid</code>
+        </div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">1</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">2</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">3</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">4</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">5</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">6</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">7</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">8</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">9</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">10</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">11</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">12</div>
+      </div>
+  </div>
+</div>`
+  })
+}
diff --git a/packages/vue/src/docs/introduction.docs.mdx b/packages/vue/src/docs/introduction.docs.mdx
new file mode 100644
index 00000000..d9c88e22
--- /dev/null
+++ b/packages/vue/src/docs/introduction.docs.mdx
@@ -0,0 +1,42 @@
+import { Meta, Description } from '@storybook/blocks'
+
+<Meta title="Introduction" />
+
+# Explorer 1
+
+## JPL's Design System
+
+Consisting of working code, design components, guidelines, and resources, JPL's design system for digital experiences—called **Explorer 1**—helps JPL's product teams build more efficiently, at scale, and on brand. It is maintained by JPL's DesignLab team and regularly evolves to meet the changing needs of the Lab.
+
+##### GOALS:
+
+The design system aims to help UI consistency and quality, streamline the design and development process and provide guidance for design and development efforts.
+
+<br />
+
+## Design System Benefits
+
+##### EFFICIENCY
+
+Designers no longer need to repeatedly rebuild components from scratch. A shared library of components streamlines this process and leaves little room for error.
+
+##### CONSISTENCY
+
+Having a shared set of principles and rules to build components makes it easier to create consistent user experiences that accurately reflect JPL across a variety of platforms.
+
+##### SCALE
+
+Increased efficiency and consistency facilitate building products that scale
+
+<br />
+
+## How to use this website
+
+This website uses [Storybook](https://storybook.js.org/) to display our documentation and components. If you are new to the platform, we recommend reviewing Storybook's intro on how to [browse stories](https://storybook.js.org/docs/html/get-started/browse-stories). We also provide in-depth getting started guides for [developers](?path=/docs/getting-started-developer--docs) and [designers](?path=/docs/getting-started-designer--docs).
+
+<br />
+<br />
+
+---
+
+Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)
diff --git a/packages/vue/src/docs/overviews/base.docs.mdx b/packages/vue/src/docs/overviews/base.docs.mdx
new file mode 100644
index 00000000..8908fc94
--- /dev/null
+++ b/packages/vue/src/docs/overviews/base.docs.mdx
@@ -0,0 +1,88 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BaseButtonStories from './../../components/BaseButton/BaseButton.stories'
+import * as BaseHeadingStories from './../../components/BaseHeading/BaseHeading.stories'
+import * as BaseImageStories from './../../components/BaseImage/BaseImage.stories'
+import * as BaseImageCaptionStories from './../../components/BaseImageCaption/BaseImageCaption.stories'
+import * as BaseImagePlaceholderStories from './../../components/BaseImagePlaceholder/BaseImagePlaceholder.stories'
+import * as BaseLinkStories from './../../components/BaseLink/BaseLink.stories'
+import * as BasePlaceholderStories from './../../components/BasePlaceholder/BasePlaceholder.stories'
+
+<Meta title="Components/Base/Overview" />
+
+# Base Components
+
+Base components are the simplest elements that sometimes stand on their own, but more often are used in combination with others to assemble larger components.
+
+- [Basic elements](#basic-elements)
+- [Media](#media)
+- [Other](#other)
+
+<br />
+
+<span id="basic-elements"></span>
+
+## Basic elements
+
+<ComponentList
+  components={[
+    {
+      heading: 'BaseLink',
+      meta: BaseLinkStories,
+      path: '/docs/components-base-baselink--docs'
+    },
+    {
+      heading: 'BaseButton',
+      meta: BaseButtonStories,
+      path: '/docs/components-base-basebutton--docs'
+    },
+    {
+      heading: 'BaseHeading',
+      meta: BaseHeadingStories,
+      path: '/docs/components-base-baseheading--docs'
+    }
+  ]}
+/>
+
+<br />
+
+<span id="media"></span>
+
+## Media
+
+<ComponentList
+  components={[
+    {
+      heading: 'BaseImage',
+      meta: BaseImageStories,
+      path: '/docs/components-base-baseimage--docs'
+    },
+    {
+      heading: 'BaseImageCaption',
+      meta: BaseImageCaptionStories,
+      path: '/docs/components-base-baseimagecaption--docs'
+    },
+    {
+      heading: 'BaseImagePlaceholder',
+      customDescription: 'A backdrop for lazy-loaded images that can fill a set aspect ratio.',
+      meta: BaseImagePlaceholderStories,
+      path: '/docs/components-base-baseimageplaceholder--docs'
+    }
+  ]}
+/>
+
+<br />
+
+<span id="other"></span>
+
+## Other
+
+<ComponentList
+  components={[
+    {
+      heading: 'BasePlaceholder',
+      meta: BasePlaceholderStories,
+      path: '/docs/components-base-baseplaceholder--docs'
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/blocks.docs.mdx.disabled b/packages/vue/src/docs/overviews/blocks.docs.mdx.disabled
new file mode 100644
index 00000000..77976c2c
--- /dev/null
+++ b/packages/vue/src/docs/overviews/blocks.docs.mdx.disabled
@@ -0,0 +1,185 @@
+{/* TODO: refactor to include all blocks in the vue storybook */}
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import _ as BlockAccordionStories from './../../components/BlockAccordion/BlockAccordion.stories'
+import _ as BlockCardGroupStories from './../../components/BlockCardGroup/BlockCardGroup.stories'
+import _ as BlockCardStories from './../../components/BlockCard/BlockCard.stories'
+import _ as BlockCircleImageCardStories from './../../components/BlockCircleImageCard/BlockCircleImageCard.stories'
+import _ as BlockIframeEmbedStories from './../../components/BlockIframeEmbed/BlockIframeEmbed.stories'
+import _ as BlockImageCarouselStories from './../../components/BlockImageCarousel/BlockImageCarousel.stories'
+import _ as BlockImageGalleryStories from './../../components/BlockImageGallery/BlockImageGallery.stories'
+import _ as BlockImageStories from './../../components/BlockImage/BlockImage.stories'
+import _ as BlockInlineImageStories from './../../components/BlockInlineImage/BlockInlineImage.stories'
+import _ as BlockKeyPointsStories from './../../components/BlockKeyPoints/BlockKeyPoints.stories'
+import _ as BlockLinkCardStories from './../../components/BlockLinkCard/BlockLinkCard.stories'
+import _ as BlockLinkCarouselStories from './../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
+import _ as BlockLinkTileStories from './../../components/BlockLinkTile/BlockLinkTile.stories'
+import _ as BlockQuoteStories from './../../components/BlockQuote/BlockQuote.stories'
+import _ as BlockRelatedLinksStories from './../../components/BlockRelatedLinks/BlockRelatedLinks.stories'
+import _ as BlockTableStories from './../../components/BlockTable/BlockTable.stories'
+import _ as BlockTeaserStories from './../../components/BlockTeaser/BlockTeaser.stories'
+import _ as BlockTextStories from './../../components/BlockText/BlockText.stories'
+import \* as BlockVideoEmbedStories from './../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+
+<Meta title="Components/Blocks/Overview" />
+
+# Block Components
+
+Self contained components that combine multiple other components or are otherwise more complex than base components. Blocks can be easily added to the flow of a page, though some may require additional markup to achieve the desired layout.
+
+- [Hero blocks](#hero-blocks)
+- [Text and information blocks](#text-and-information-blocks)
+- [Media and media galleries](#media-and-media-galleries)
+- [Card types](#card-types)
+
+<br />
+
+<span id="hero-blocks"></span>
+
+## Hero blocks
+
+Reserved for the top of the page. Learn more about our heroes on the [heroes overview page](?path=/docs/components-blocks-heroes-overview--docs).
+
+<br />
+
+<span id="text-and-information-blocks"></span>
+
+## Text and information blocks
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockText',
+      meta: BlockTextStories,
+      path: '/docs/components-blocks-blocktext--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-sm'
+    },
+    {
+      heading: 'BlockKeyPoints',
+      meta: BlockKeyPointsStories,
+      path: '/docs/components-blocks-blockkeypoints--docs'
+    },
+    {
+      heading: 'BlockQuote',
+      meta: BlockQuoteStories,
+      path: '/docs/components-blocks-blockquote--docs'
+    },
+    {
+      heading: 'BlockRelatedLinks',
+      meta: BlockRelatedLinksStories,
+      path: '/docs/components-blocks-blockrelatedlinks--docs',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockTable',
+      meta: BlockTableStories,
+      path: '/docs/components-blocks-blocktable--docs'
+    },
+    {
+      heading: 'BlockTeaser',
+      meta: BlockTeaserStories,
+      path: '/docs/components-blocks-blockteaser--docs',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockAccordion',
+      meta: BlockAccordionStories,
+      path: '/docs/components-blocks-blockaccordion--docs',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockCardGroup',
+      customDescription:
+        'A collection of smaller cards that support images, labels, headings, and descriptions, laid out in a grid on medium and larger screens, or in a carousel on small screens.',
+      meta: BlockCardGroupStories,
+      path: '/docs/components-blocks-blockcardgroup--docs',
+      canvasClass: 'sbdocs-inline-height',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockLinkCarousel',
+      description: 'A mixed-bleed carousel with more than one slide visible at a time.',
+      meta: BlockLinkCarouselStories,
+      path: '/docs/components-blocks-blocklinkcarousel--docs',
+      canvasClass: 'sbdocs-inline-height',
+      fullWidth: true
+    }
+  ]}
+/>
+
+<br />
+
+<span id="media-and-media-galleries"></span>
+
+## Media and media galleries
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockImage',
+      meta: BlockImageStories,
+      path: '/docs/components-blocks-blockimage--docs'
+    },
+    {
+      heading: 'BlockInlineImage',
+      meta: BlockInlineImageStories,
+      path: '/docs/components-blocks-blockinlineimage--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-sm',
+      fullWidth: true
+    },
+    {
+      heading: 'BlockVideoEmbed',
+      meta: BlockVideoEmbedStories,
+      path: '/docs/components-blocks-blockvideoembed--docs'
+    },
+    {
+      heading: 'BlockIframeEmbed',
+      meta: BlockIframeEmbedStories,
+      path: '/docs/components-blocks-blockiframeembed--docs',
+      hideCanvas: true
+    },
+    {
+      heading: 'BlockImageCarousel',
+      meta: BlockImageCarouselStories,
+      path: '/docs/components-blocks-blockimagecarousel--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-sm'
+    },
+    {
+      heading: 'BlockImageGallery',
+      meta: BlockImageGalleryStories,
+      path: '/docs/components-blocks-blockimagegallery--docs',
+      fullWidth: true,
+      fullCanvas: true
+    }
+  ]}
+/>
+
+<span id="card-types"></span>
+
+## Card Types
+
+<ComponentList
+  components={[
+    {
+      heading: 'BlockCard',
+      meta: BlockCardStories,
+      path: '/docs/components-blocks-blockcard--docs'
+    },
+    {
+      heading: 'BlockLinkCard',
+      meta: BlockLinkCardStories,
+      path: '/docs/components-blocks-blocklinkcard--docs'
+    },
+    {
+      heading: 'BlockLinkTile',
+      meta: BlockLinkTileStories,
+      path: '/docs/components-blocks-blocklinktile--docs'
+    },
+    {
+      heading: 'BlockCircleImageCard',
+      meta: BlockCircleImageCardStories,
+      path: '/docs/components-blocks-blockimagecard--docs',
+      fullWidth: true
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/components.docs.mdx b/packages/vue/src/docs/overviews/components.docs.mdx
new file mode 100644
index 00000000..9706e068
--- /dev/null
+++ b/packages/vue/src/docs/overviews/components.docs.mdx
@@ -0,0 +1,48 @@
+import { Meta, Canvas, Story } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BaseImageStories from './../../components/BaseImage/BaseImage.stories'
+import * as BaseImageCaptionStories from './../../components/BaseImageCaption/BaseImageCaption.stories'
+import * as BlockImageStories from './../../components/BlockImage/BlockImage.stories'
+
+<Meta
+  title="Components/Overview"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Components
+
+Explorer 1 comprises components that range from very simple, single-purpose elements to complex combinations of multiple other components. We've categorized these into a few broad buckets, but the lines between them are blurry.
+
+- **[Base](?path=/docs/components-base-overview--docs)** components are the simplest elements that sometimes stand on their own, but more often are used in combination with others to assemble larger components. Examples include [BaseLink](?path=/docs/components-base-baselink--docs), [BaseButton](?path=/docs/components-base-basebutton--docs), and [BaseHeading](?path=/docs/components-base-baseheading--docs).
+- **[Blocks](?path=/docs/components-blocks-overview--docs)** are components that combine multiple other components or are otherwise more complex. Examples include [BlockImage](?path=/docs/components-blocks-blockimage--docs), [BlockQuote](?path=/docs/components-blocks-blockquote--docs), and [BlockTeaser](?path=/docs/components-blocks-blockteaser--docs).
+- We also break out **[Form](?path=/docs/components-forms-overview--docs)** and **[Search](?path=/docs/components-search-overview--docs)** components into their own groups because they have their own significant complexities that relate to their user interactions.
+- [Mixins](?path=/docs/components-mixins-overview--docs) are intended for developer use when creating new components, but aren't meant to be used alone. General users of Explorer 1 usually don't need to refer to these mixins.
+
+## Base vs. block components
+
+To illustrate the difference between base and block components, consider images. We have both `BaseImage` and `BlockImage` components. The difference is that `BaseImage` is nothing more than the `<img>` element (with our minimum set of attributes, wrapped in a div), whereas `BlockImage` combines a `BaseImage` with a `BaseImageCaption` (plus a few other bells and whistles).
+
+<ComponentList
+  components={[
+    {
+      heading: 'BaseImage',
+      customDescription: 'Just an image, nothing else.',
+      meta: BaseImageStories,
+      path: '/docs/components-base-baseimage--docs'
+    },
+    {
+      heading: 'BaseImageCaption',
+      customDescription: 'Just the caption.',
+      path: '/docs/components-base-baseimagecaption--docs',
+      meta: BaseImageCaptionStories
+    },
+    {
+      heading: 'BlockImage',
+      customDescription:
+        '`BlockImage` = `BaseImage` + `BaseImageCaption`, plus adding support for expanding the image in a lightbox and styling it to be a full-bleed image.',
+      meta: BlockImageStories,
+      path: '/docs/components-blocks-blockimage--docs',
+      fullWidth: true
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/forms.docs.mdx b/packages/vue/src/docs/overviews/forms.docs.mdx
new file mode 100644
index 00000000..c6290d1b
--- /dev/null
+++ b/packages/vue/src/docs/overviews/forms.docs.mdx
@@ -0,0 +1,59 @@
+import { Meta, Canvas, Story } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as FormContactStories from './../../components/FormContact/FormContact.stories'
+import * as TextInputStories from './../../components/TextInput/TextInput.stories'
+import * as TextAreaStories from './../../components/TextArea/TextArea.stories'
+import * as BaseButtonStories from './../../components/BaseButton/BaseButton.stories'
+
+<Meta title="Components/Forms/Overview" />
+
+# Form Components
+
+Form styles are currently limited to text inputs and text areas. Explorer 1 does not include any form functionality other than native HTML form controls. If you require more functionality in your forms,
+you will need to build that into your implementation of the design system.
+
+You can construct a form by combining the following components:
+
+<ComponentList
+  components={[
+    {
+      heading: 'TextInput',
+      meta: TextInputStories,
+      path: '/docs/components-forms-textinput--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-2xs'
+    },
+    {
+      heading: 'TextArea',
+      meta: TextAreaStories,
+      path: '/docs/components-forms-textarea--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-xs'
+    },
+    {
+      heading: 'BaseButton',
+      customDescription:
+        'Our usual base button component. This component is not limited to usage in forms.',
+      meta: BaseButtonStories,
+      path: '/docs/components-base-basebutton--docs'
+    }
+  ]}
+/>
+
+<br />
+
+## Contact Form
+
+Below is contact form that was created using the above components and a couple `div` wrappers to adjust spacing between fields.
+
+<Canvas
+  meta={FormContactStories}
+  of={FormContactStories.BaseStory}
+/>
+
+Depending on your framework, you will need to modify the `<form>` attributes and possibly convert the submit `<button>` to an input, such as:
+
+```html
+<input
+  type="submit"
+  class="BaseButton text-contrast-none inline-block -primary"
+/>
+```
diff --git a/packages/vue/src/docs/overviews/global.docs.mdx b/packages/vue/src/docs/overviews/global.docs.mdx
new file mode 100644
index 00000000..be51d501
--- /dev/null
+++ b/packages/vue/src/docs/overviews/global.docs.mdx
@@ -0,0 +1,15 @@
+import { Meta, Canvas, Story } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+
+<Meta
+  title="Navigation/Overview"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Navigation
+
+Use these components as global layout elements in your website or application.
+
+- [Headers](?path=/docs/navigation-headers-overview--docs)
+- [Footers](?path=/docs/navigation-footers-overview--docs)
+- [Secondary Navigation](?path=/docs/navigation-footers-overview--docs)
diff --git a/packages/vue/src/docs/overviews/global_footers.docs.mdx b/packages/vue/src/docs/overviews/global_footers.docs.mdx
new file mode 100644
index 00000000..0d54366b
--- /dev/null
+++ b/packages/vue/src/docs/overviews/global_footers.docs.mdx
@@ -0,0 +1,21 @@
+import { Meta, Canvas, Story } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as TheFooterStories from './../../components/TheFooter/TheFooter.stories'
+
+<Meta title="Navigation/Footers/Overview" />
+
+# Footers
+
+Footers are to be placed at the very bottom of your website or application. Footer styles are specific to your site's visibility and theme (internal vs. external/public). If you are using the [Internal Theme](?path=/docs/foundation-themes--docs#internal-theme), be sure to use the [Internal Footer](?path=/docs/global-layout-footers-for-internal-sites--docs). If your website or application is public-facing, be sure to use the External footer (coming soon).
+
+<ComponentList
+  components={[
+    {
+      heading: 'External Footer',
+      meta: TheFooterStories,
+      path: '/story/navigation-footers-external-footer--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/global_headers.docs.mdx b/packages/vue/src/docs/overviews/global_headers.docs.mdx
new file mode 100644
index 00000000..74dbc644
--- /dev/null
+++ b/packages/vue/src/docs/overviews/global_headers.docs.mdx
@@ -0,0 +1,21 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as NavDesktopStories from './../../components/NavDesktop/NavDesktop.stories'
+
+<Meta title="Navigation/Headers/Overview" />
+
+# Headers
+
+Headers are to be placed at the very top of your website or application. Header styles are specific to your site's visibility (internal vs. external/public) and theme.
+
+<ComponentList
+  components={[
+    {
+      heading: 'External Header (WWW)',
+      meta: NavDesktopStories,
+      path: '/story/navigation-headers-www-navdesktop--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/heroes.docs.mdx b/packages/vue/src/docs/overviews/heroes.docs.mdx
new file mode 100644
index 00000000..f17e508b
--- /dev/null
+++ b/packages/vue/src/docs/overviews/heroes.docs.mdx
@@ -0,0 +1,48 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as HeroSmallStories from './../../components/HeroMedium/HeroSmall.stories'
+import * as HeroMediumStories from './../../components/HeroMedium/HeroMedium.stories'
+import * as HeroLargeStories from './../../components/HeroLarge/HeroLarge.stories'
+import * as HeroMediaStories from './../../components/HeroMedia/HeroMedia.stories'
+
+<Meta title="Components/Heroes/Overview" />
+
+# Hero Blocks
+
+Hero components are reserved for usage at the top of the page. There should only be one hero per page. All hero blocks include page layout assumptions and use a max width of `max-w-screen-3xl`.
+
+<ComponentList
+  components={[
+    {
+      heading: 'Small',
+      meta: HeroSmallStories,
+      path: '/story/components-heroes-herosmall--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'Medium',
+      meta: HeroMediumStories,
+      path: '/story/components-heroes-heromedium--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'Large',
+      customDescription:
+        'Includes a large text overlay that works best with background images that have a focal point on the right side of the image.',
+      meta: HeroLargeStories,
+      path: '/story/components-heroes-herolarge--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'Media Only',
+      meta: HeroMediaStories,
+      path: '/docs/components-heroes-heromedia--docs',
+      fullWidth: true,
+      fullCanvas: true,
+      canvasClass: 'sbdocs-inline-height'
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/mixins.docs.mdx b/packages/vue/src/docs/overviews/mixins.docs.mdx
new file mode 100644
index 00000000..ec9f0c78
--- /dev/null
+++ b/packages/vue/src/docs/overviews/mixins.docs.mdx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as MixinAnimationCaretStories from './../../components/MixinAnimationCaret/MixinAnimationCaret.stories'
+import * as MixinVideoBgStories from './../../components/MixinVideoBg/MixinVideoBg.stories'
+import * as MixinCarouselStories from './../../components/MixinCarousel/MixinCarousel.stories'
+
+<Meta title="Mixins/Overview" />
+
+# Mixins
+
+Mixins are intended for developer use when creating new components, but aren't meant to be used alone, as they usually require additional components to function properly, or additional markup for accessibility. General users of Explorer 1 should look at [Base](?path=/docs/base-overview--docs) and [Block](?path=/docs/blocks-overview--docs) components instead.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'MixinAnimationCaret',
+      meta: MixinAnimationCaretStories,
+      path: '/docs/mixins-mixinanimationcaret--docs'
+    },
+    {
+      heading: 'MixinVideoBg',
+      customDescription:
+        "A video mixin that autoplays a muted video and retains the video's aspect ratio. Useful for creating background video layouts.",
+      meta: MixinVideoBgStories,
+      path: '/docs/mixins-mixinvideobg--docs',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'MixinCarousel',
+      meta: MixinCarouselStories,
+      path: '/docs/mixins-mixincarousel--docs',
+      fullWidth: true,
+      fullCanvas: true
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/search.docs.mdx b/packages/vue/src/docs/overviews/search.docs.mdx
new file mode 100644
index 00000000..a2d08ecc
--- /dev/null
+++ b/packages/vue/src/docs/overviews/search.docs.mdx
@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as SearchInputStories from './../../components/SearchInput/SearchInput.stories'
+import * as SearchResultCardStories from './../../components/SearchResultCard/SearchResultCard.stories'
+
+<Meta
+  title="Components/Search/Overview"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Search Components
+
+Styles for a basic search input field and result items are available for use. Explorer 1 only provides styles for search components, it does not provide any search functionality.
+
+<ComponentList
+  components={[
+    {
+      heading: 'SearchInput',
+      meta: SearchInputStories,
+      path: '/docs/components-search-searchinput--docs'
+    },
+    {
+      heading: 'SearchResultCard',
+      meta: SearchResultCardStories,
+      path: '/docs/components-search-searchresultcard--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-xs',
+      fullWidth: true
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/overviews/utilities.docs.mdx b/packages/vue/src/docs/overviews/utilities.docs.mdx
new file mode 100644
index 00000000..e248e1a2
--- /dev/null
+++ b/packages/vue/src/docs/overviews/utilities.docs.mdx
@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BackToTopStories from './../../components/BackToTop/BackToTop.stories'
+
+<Meta
+  title="Components/Utilities/Overview"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Utilities
+
+Components that provide specialized functionalities for enhancing the user experience.
+
+<ComponentList
+  components={[
+    {
+      heading: 'BackToTop',
+      meta: BackToTopStories,
+      path: '/docs/components-utilities-backtotop--docs'
+    }
+  ]}
+/>
diff --git a/packages/vue/src/docs/roadmap.docs.mdx b/packages/vue/src/docs/roadmap.docs.mdx
new file mode 100644
index 00000000..38b0d4c1
--- /dev/null
+++ b/packages/vue/src/docs/roadmap.docs.mdx
@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Roadmap" />
+
+# Roadmap
+
+## Now
+
+- Add `BlockAccordion`
+- Add internal header and footer components
+- Add overview page for /Components/Blocks
+
+## Next
+
+- Components to support the EDU theme and functionality
+- Improvements to the accessibility guide and getting started guide for designers
+- Add more overview pages
+
+## Later
+
+- Adding branding assets (logos) in a downloadable format
+- Guidance on website headers and footers
+- Dependency graphs for each component
+- Multiple `dist` targets: purged, not purged, modern browsers only, etc.
+- Tailwind 3
diff --git a/packages/vue/src/docs/utils/ComponentItem.jsx b/packages/vue/src/docs/utils/ComponentItem.jsx
new file mode 100644
index 00000000..1a1f57b0
--- /dev/null
+++ b/packages/vue/src/docs/utils/ComponentItem.jsx
@@ -0,0 +1,102 @@
+/* eslint-disable prettier/prettier */
+/* Custom react component for rendering TOC of components
+ * docs: https://storybook.js.org/docs/react/writing-docs/docs-page#custom-inline-rendering
+ */
+
+import React from 'react'
+import { Canvas, Description } from '@storybook/blocks'
+
+export function ComponentItem(props) {
+  /*
+    props: {
+      heading,      // required: heading for the card, usually component name
+      meta,         // required: CSF exports (import * as Stories). CSF must have a Story export named "Default"
+      customDescription, // optional: override the CSF component description
+      canvasClass,  // optional: use sbdocs classes to adjust the height of the canvas
+      fullWidth,    // optional: if the canvas should be full width as opposed to side-by-side
+      fullCanvas,   // optional: if the canvas should be full bleed
+      hideCanvas,   // optional: if the canvas should be hidden
+    }
+  */
+
+  const hrefTo = (path) => {
+    return new Promise((resolve) => {
+      const { location } = document
+
+      // Drop the `iframe.html` from the preview path
+      const sbPath = location.pathname.replace(/iframe\.html$/, '')
+      const url = `${location.origin + sbPath}?${Object.entries({ path })
+        .map((item) => `${item[0]}=${item[1]}`)
+        .join('&')}`
+
+      parent.window.location = url
+    })
+  }
+  const navigate = (path) => {
+    hrefTo(path)
+  }
+  if (props.meta) {
+    let wrapperClass = 'text-base'
+    if (props.fullWidth) {
+      if (props.fullCanvas) {
+        wrapperClass += ' sbdocs-preview-full-width'
+      }
+    } else {
+      wrapperClass += ' lg:flex items-start pt-3'
+    }
+
+    let canvasWrapperClass = ''
+    if (props.fullWidth) {
+      if (props.fullCanvas) {
+        canvasWrapperClass += ' sbdocs-preview-full-width'
+      }
+    } else {
+      canvasWrapperClass += ' lg:w-1/2'
+    }
+
+    return (
+      <div className={wrapperClass}>
+        <div className={'reactdocs-container pr-5' + (props.fullWidth ? '' : ' lg:w-1/2')}>
+          <h3 className="text-base tracking-tight font-medium mt-3 mb-3">
+            <button
+              className="sbdocs sbdocs-a font-medium"
+              onClick={() => {
+                navigate(props.path)
+              }}
+            >
+              {props.heading}
+            </button>
+          </h3>
+          <div>
+            {props.customDescription ? (
+              <p>{props.customDescription}</p>
+            ) : props.meta ? (
+              <Description of={props.meta} />
+            ) : (
+              ''
+            )}
+          </div>
+        </div>
+
+        <div className={canvasWrapperClass}>
+          {props.hideCanvas ? (
+            <button
+              className="mt-6 p-6 flex justify-center shadow-sm border border-gray-light-mid rounded-md items-center"
+              onClick={() => {
+                navigate(props.path)
+              }}
+            >
+              <div className="text-gray-mid">View component for details</div>
+            </button>
+          ) : (
+            <Canvas
+              className={props.canvasClass}
+              meta={props.meta}
+              of={props.meta.BaseStory}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/packages/vue/src/docs/utils/ComponentList.jsx b/packages/vue/src/docs/utils/ComponentList.jsx
new file mode 100644
index 00000000..c0693938
--- /dev/null
+++ b/packages/vue/src/docs/utils/ComponentList.jsx
@@ -0,0 +1,17 @@
+/* eslint-disable prettier/prettier */
+/* Custom react component for rendering TOC of components
+ * docs: https://storybook.js.org/docs/react/writing-docs/docs-page#custom-inline-rendering
+ */
+
+import React from 'react'
+import { ComponentItem } from './ComponentItem'
+
+export function ComponentList(props) {
+  return (
+    <div className="reactdocs-content">
+      {props.components.map((component, index) => {
+        return <ComponentItem key={index} {...component} />
+      })}
+    </div>
+  )
+}
diff --git a/packages/vue/src/templates/PageContent/PageContent.stories.js b/packages/vue/src/templates/PageContent/PageContent.stories.js
index 39f28bcf..cb78de92 100644
--- a/packages/vue/src/templates/PageContent/PageContent.stories.js
+++ b/packages/vue/src/templates/PageContent/PageContent.stories.js
@@ -79,7 +79,7 @@ export const ContentPageData = {
 }
 
 // stories
-export const Template = {
+export const BaseStory = {
   name: 'PageContent',
   args: {
     data: ContentPageData
diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
index 822cae24..ad0c7c32 100644
--- a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
+++ b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js
@@ -16,7 +16,7 @@ export default {
 }
 
 // stories
-export const EventDetail = {
+export const BaseStory = {
   args: {
     data: {
       id: '285',
diff --git a/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.stories.js b/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.stories.js
index 67cbf27f..7beff6e4 100644
--- a/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.stories.js
+++ b/packages/vue/src/templates/PageNewsDetail/PageNewsDetail.stories.js
@@ -28,7 +28,7 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const NewsDetail = {
+export const BaseStory = {
   args: {
     data: {
       slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
@@ -75,7 +75,7 @@ export const NewsDetail = {
 export const InlineHero = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline'
     }
   }
@@ -84,7 +84,7 @@ export const InlineHero = {
 export const HeroCarousel = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
     }
   }
@@ -93,7 +93,7 @@ export const HeroCarousel = {
 export const HeroImageComparison = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline',
       hero: [
         {
@@ -107,7 +107,7 @@ export const HeroImageComparison = {
 export const HeroVideo = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: [
         {
           blockType: 'VideoBlock',
@@ -123,7 +123,7 @@ export const HeroVideo = {
 export const HeroVideoEmbed = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline',
       hero: [
         {
@@ -141,7 +141,7 @@ export const HeroVideoEmbed = {
 export const NoHero = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: []
     }
   }
@@ -150,7 +150,7 @@ export const NoHero = {
 export const WithTopper = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       topper:
         '<p>Editor’s Note: Mars Helicopter flight delayed to no earlier than April 14.</p><p><a href="https://mars.nasa.gov/technology/helicopter/status/291/mars-helicopter-flight-delayed-to-no-earlier-than-april-14/"><i>Read here for more information</i></a><i>.</i></p><p></p><hr/><p></p>'
     }
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js
index ede6708d..07489f41 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail.stories.js
@@ -18,7 +18,7 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const EduNewsDetail = {
+export const BaseStory = {
   args: {
     data: {
       slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
@@ -48,7 +48,7 @@ export const EduNewsDetail = {
 export const InlineHero = {
   args: {
     data: {
-      ...EduNewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline'
     }
   }
@@ -57,7 +57,7 @@ export const InlineHero = {
 export const NoHero = {
   args: {
     data: {
-      ...EduNewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: []
     }
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f98cf4f5..d144a818 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,35 +67,35 @@ importers:
         specifier: ^1.2.0
         version: 1.10.3
       '@storybook/addon-a11y':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/addon-docs':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/addon-essentials':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/addon-links':
-        specifier: ^8.2.1
-        version: 8.2.1(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/addon-viewport':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/html':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/html-vite':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))
       '@storybook/manager-api':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/preview-api':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/theming':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@whitespace/storybook-addon-html':
         specifier: ^6.1.1
         version: 6.1.1(prettier@3.3.1)(react-syntax-highlighter@15.5.0(react@18.3.1))
@@ -118,8 +118,8 @@ importers:
         specifier: ^5.0.5
         version: 5.0.7
       storybook:
-        specifier: ^8.2.1
-        version: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+        specifier: ^8.2.4
+        version: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       tailwindcss:
         specifier: ^3.4.3
         version: 3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))
@@ -185,26 +185,32 @@ importers:
         specifier: ^1.2.0
         version: 1.10.3
       '@storybook/addon-a11y':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/addon-essentials':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/blocks':
-        specifier: ^8.2.1
-        version: 8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/manager-api':
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/preview-api':
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/test-runner':
         specifier: ^0.19.0
-        version: 0.19.0(@types/node@20.14.2)(encoding@0.1.13)(prettier@3.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.4.5))
+        version: 0.19.0(@types/node@20.14.2)(encoding@0.1.13)(prettier@3.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.4.5))
       '@storybook/theming':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/vue3':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))
       '@storybook/vue3-vite':
-        specifier: ^8.2.1
-        version: 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))(vue@3.4.27(typescript@5.4.5))
+        specifier: ^8.2.4
+        version: 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))(vue@3.4.27(typescript@5.4.5))
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
         version: 5.0.5(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))(vue@3.4.27(typescript@5.4.5))
@@ -245,11 +251,11 @@ importers:
         specifier: ^5.0.5
         version: 5.0.7
       storybook:
-        specifier: ^8.2.1
-        version: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+        specifier: ^8.2.4
+        version: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       storybook-addon-vue-slots:
         specifier: ^0.9.29
-        version: 0.9.29(@storybook/blocks@8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/components@8.1.11(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/core-events@8.1.11)(@storybook/preview-api@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/theming@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/types@8.1.11)(@storybook/vue3@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5))
+        version: 0.9.29(@storybook/blocks@8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/components@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/core-events@8.1.11)(@storybook/preview-api@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/theming@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/types@8.1.11)(@storybook/vue3@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5))
       tailwindcss:
         specifier: ^3.4.3
         version: 3.4.4(ts-node@10.9.2(@types/node@20.14.2)(typescript@5.4.5))
@@ -1268,11 +1274,6 @@ packages:
   '@dual-bundle/import-meta-resolve@4.1.0':
     resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1':
-    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
-    peerDependencies:
-      react: '>=16.8.0'
-
   '@esbuild/aix-ppc64@0.19.12':
     resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
@@ -2309,168 +2310,6 @@ packages:
   '@polka/url@1.0.0-next.25':
     resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
 
-  '@radix-ui/primitive@1.0.1':
-    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
-
-  '@radix-ui/react-compose-refs@1.0.1':
-    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-context@1.0.1':
-    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-dialog@1.0.5':
-    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-dismissable-layer@1.0.5':
-    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-focus-guards@1.0.1':
-    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-focus-scope@1.0.4':
-    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-id@1.0.1':
-    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-portal@1.0.4':
-    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-presence@1.0.1':
-    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-primitive@1.0.3':
-    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-slot@1.0.2':
-    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.0.1':
-    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.0.1':
-    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-escape-keydown@1.0.3':
-    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.0.1':
-    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@rollup/plugin-alias@5.1.0':
     resolution: {integrity: sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==}
     engines: {node: '>=14.0.0'}
@@ -2701,87 +2540,87 @@ packages:
   '@sinonjs/fake-timers@10.3.0':
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
-  '@storybook/addon-a11y@8.2.1':
-    resolution: {integrity: sha512-t+SiKtxutMJNHrv8wbpqTBlB3DSpGa4JRoW5aR4FnDMVTAOC/m0CD0+IbXzdwvxk/SmXuEe8HH7XFeShs9zQPg==}
+  '@storybook/addon-a11y@8.2.4':
+    resolution: {integrity: sha512-LyAvwDoAoyQSNwyI/KCq80pNBiLZCFqnAVyLU26QhB+Ydubn8T2kZf/zQ1Nf3eG1wZ4ONoekv06Mw5yY8ZdOjA==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-actions@8.2.1':
-    resolution: {integrity: sha512-rosuPmufr41Uojjo1ok+1r2X3/qS4WvOn6Wc8SGos9oQZwCoIbRIABOg8sz41UatPKcYHF9sJKBy8l1NXCz6LQ==}
+  '@storybook/addon-actions@8.2.4':
+    resolution: {integrity: sha512-l1dlzWBBkR/5aullsX8N1ZbYr2bkeHPAaMCRy1jG5BBA8IHbi55JFwmJ8XF2gXkT2GyAZnePzb43RuLXz4KxFQ==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-backgrounds@8.2.1':
-    resolution: {integrity: sha512-/60Ft8RtcfG/khqpZ8X4u3UZsgabzWgmAHY8hnbcM2uKO6dk6jHjiN4C72MKJ9eKnxcjoNGXN7igJzw5ebMbcg==}
+  '@storybook/addon-backgrounds@8.2.4':
+    resolution: {integrity: sha512-4oU25rFyr4OgMxHe4RpLJ7lxVwUDfdTi1j/YVyHfYv8koTqjagso8bv0uj0ujP5C3dSsVO0sp3/JOfPDkEUtrA==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-controls@8.2.1':
-    resolution: {integrity: sha512-qSlTftH0VuchVnGJWdf62bdRdeaiAKvGMTja/TVvEW1TgQ8hl508sUT9LtmbuyqKqvGGxWTPTFRIBoXQx59VeQ==}
+  '@storybook/addon-controls@8.2.4':
+    resolution: {integrity: sha512-e56aUYhxyR8zJJstRAUP3WILhWTcvgRf5bysTtiyjFAL7U47cuCr043+IYEsxLkXhuZTKX2pcYSrjBtT5bYkVA==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-docs@8.2.1':
-    resolution: {integrity: sha512-/p2Xj/txqrxZgqIOhsIDjtZJaklTbxO3qrHIvHpeFvF9iWV4IN7D0JFpIoHhRA+bo94mWtZwPVEDABPnGpYUZA==}
+  '@storybook/addon-docs@8.2.4':
+    resolution: {integrity: sha512-oyrDw4nGfntu5Hkhr2Qt1wUOyLaVVERQekYyejyir92QhM10UeA7ZarPXNLfCTj7rbTrWmM1Waka9Tsf8TGMrw==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-essentials@8.2.1':
-    resolution: {integrity: sha512-c9OH5J097NwbuLFejZsmZSQv7Gz+gk4r1H4Nak8JeUZL5CapkY3HWe0dhWl6u6YqGcjhEjcuFvLoWbctKoSr/Q==}
+  '@storybook/addon-essentials@8.2.4':
+    resolution: {integrity: sha512-4upNauDJAJxauxnoUpUvzDnLo18C2yTVxgg+Id9wrKpt9C+CYH2oXyXzxoYGucYWZEe7zgCO6rWrGrKEisiLPQ==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-highlight@8.2.1':
-    resolution: {integrity: sha512-rz4Hj2J8jz4Zdq+pF5hMWpwHrsPQNmyGkG+MBli7GEge4Bed6HAQkDT8sE/3OGgizrudE1YBLnAIO1M+Lk85Ew==}
+  '@storybook/addon-highlight@8.2.4':
+    resolution: {integrity: sha512-Ll/2y0m/q9ko9jFt40qsiee4fds6vpcwwxi3mPAVwRV/J7PpMzPkoLxM54bKpeHiWdTeGCXRguXNvyeQMQf3pg==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-links@8.2.1':
-    resolution: {integrity: sha512-k07LuKnYr+URPdmTbei9r7tO9VCV8vd2zfBlbXyg+GuaVqDZBrZD8Xd9QAMB8O3+iA7uPHTXSOH92IO3QiRfSg==}
+  '@storybook/addon-links@8.2.4':
+    resolution: {integrity: sha512-1FgD6YXdXXSEDrp2aO4LxYt/X7LnBYx7cLlFla+xbn1CZLGqWLLeOT+BFd29wxpzs3u1Tap9r1iz1vRYL5ziyg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.2.1
+      storybook: ^8.2.4
     peerDependenciesMeta:
       react:
         optional: true
 
-  '@storybook/addon-measure@8.2.1':
-    resolution: {integrity: sha512-+6yfp+cm+QI/KjJ8ShgP7lpC8Yf8MGOUMDRjsPm99fzrOEAZ6QAocCOGUyCs6Uyij+Mpn+QTm9ulfAPYXSL8gA==}
+  '@storybook/addon-measure@8.2.4':
+    resolution: {integrity: sha512-bSyE3mGDaaIKoe6Kt/f20YXKsn8WSoJUHrfKA68gbb+H3tegVQaqeS2KY5YzLqvjHe1qSmrO132NJt8RixLOPQ==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-outline@8.2.1':
-    resolution: {integrity: sha512-rsC+r56PB4Hlu5fAybAP78u/cY6I5bYlC6JrLwU44igH0wFQR2XdpQ7OLYZaeu8nKDtanS29D+99KVk4oyzRBw==}
+  '@storybook/addon-outline@8.2.4':
+    resolution: {integrity: sha512-1C6NrvSDREgCZ7o/1n7Ca81uDDzrSrzWiOkh4OeA7PPQ/445cAOX2OMvxzNkKDIT9GLCLNi9M5XIVyGxJVS4dQ==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-toolbars@8.2.1':
-    resolution: {integrity: sha512-UzK2TPEDt2bwi+IGeK2OXTc3VqIhqxqQ2tbXdBBVBwnsV4u4quvlXrnMKugaf0YdkeIRewJq/u2J+bQNs5TErw==}
+  '@storybook/addon-toolbars@8.2.4':
+    resolution: {integrity: sha512-iPnSr+hdz40Uoqg2cimyWf01/Y8GdgdMKB+b47TGIxtn9SEFBXck00ZG8ttwBvEsecu9K9CDt20fIOnr6oK5tQ==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/addon-viewport@8.2.1':
-    resolution: {integrity: sha512-mk5FGH8W6IIjbRRpCPagjWfY77UgHmxUUYzUagc9KZKG0MfSy6hYtXaWy5NrZOegblS5K9cGNdKXdM59Rc9JFg==}
+  '@storybook/addon-viewport@8.2.4':
+    resolution: {integrity: sha512-58DcoX0xGpWlJfc0iLDjggkVPYzT4JdCZA2ioK9SQXQMsUzGFwR5PAAJv1tivYp7467tNkXvcM3QTb3Q3g8p4g==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/blocks@8.2.1':
-    resolution: {integrity: sha512-7E5WAx5JcrPBCjonogfTvcLJ1y6IFQzqLv1mone8TH1b5lCHuLtWMxYY/4oQabfEanVUpo81KfbyooiR3FXlOA==}
+  '@storybook/blocks@8.2.4':
+    resolution: {integrity: sha512-Hl2Dpg41YiJLSVXxjEJPjgPShrDJM3RY6HEEOjqTcAADsheX1IHAWXMJSJGMmne3Sew6VdJXPuHBIOFV4suZxg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.2.1
+      storybook: ^8.2.4
     peerDependenciesMeta:
       react:
         optional: true
       react-dom:
         optional: true
 
-  '@storybook/builder-vite@8.2.1':
-    resolution: {integrity: sha512-2L8TTWodvvFrPEXywKd4+Ut1wAyC0XbPCjdwXthMbtCOYsqBltirWRxZ4cfO7Bj6uR54qgfx3uHf53ez/kwDQw==}
+  '@storybook/builder-vite@8.2.4':
+    resolution: {integrity: sha512-hDx0ZLcnFrIJaVoFMu41d9w1uWmwy/DDUuIbSd0T7xHwWyVqgI8lmaQlBIp81/QmSKaUB964UduHcdIjkoWoYA==}
     peerDependencies:
       '@preact/preset-vite': '*'
-      storybook: ^8.2.1
+      storybook: ^8.2.4
       typescript: '>= 4.3.x'
       vite: ^4.0.0 || ^5.0.0
       vite-plugin-glimmerx: '*'
@@ -2799,14 +2638,13 @@ packages:
   '@storybook/client-logger@8.1.11':
     resolution: {integrity: sha512-DVMh2usz3yYmlqCLCiCKy5fT8/UR9aTh+gSqwyNFkGZrIM4otC5A8eMXajXifzotQLT5SaOEnM3WzHwmpvMIEA==}
 
-  '@storybook/codemod@8.2.1':
-    resolution: {integrity: sha512-LYvVLOKj5mDbbAPLrxd3BWQaemTqp2y5RV5glNqsPq3FoFX4rn4VnWb5X/YBWsMqqCK+skimH/f7HQ5fDvWubg==}
+  '@storybook/codemod@8.2.4':
+    resolution: {integrity: sha512-QcZdqjX4NvkVcWR3yI9it3PfqmBOCR+3iY6j4PmG7p5IE0j9kXMKBbeFrBRprSijHKlwcjbc3bRx2SnKF6AFEg==}
 
-  '@storybook/components@8.1.11':
-    resolution: {integrity: sha512-iXKsNu7VmrLBtjMfPj7S4yJ6T13GU6joKcVcrcw8wfrQJGlPFp4YaURPBUEDxvCt1XWi5JkaqJBvb48kIrROEQ==}
+  '@storybook/components@8.2.4':
+    resolution: {integrity: sha512-JLT1RoR/RXX+ZTeFoY85CRHb9Zz3l0PRRUSetEjoIJdnBGeL5C38bs0s9QnYjpCDLUlhdYhTln+GzmbyH8ocpA==}
     peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+      storybook: ^8.2.4
 
   '@storybook/core-common@8.1.11':
     resolution: {integrity: sha512-Ix0nplD4I4DrV2t9B+62jaw1baKES9UbR/Jz9LVKFF9nsua3ON0aVe73dOjMxFWBngpzBYWe+zYBTZ7aQtDH4Q==}
@@ -2819,13 +2657,13 @@ packages:
   '@storybook/core-events@8.1.11':
     resolution: {integrity: sha512-vXaNe2KEW9BGlLrg0lzmf5cJ0xt+suPjWmEODH5JqBbrdZ67X6ApA2nb6WcxDQhykesWCuFN5gp1l+JuDOBi7A==}
 
-  '@storybook/core@8.2.1':
-    resolution: {integrity: sha512-hmuBRtT0JwmvEpsi4f/hh/QOqiEUmvV1xCbLQy+FEqMBxk5VsksVLKXJiWFG5lYodmjdxCLCb37JDVuOOZIIpw==}
+  '@storybook/core@8.2.4':
+    resolution: {integrity: sha512-jePmsGZT2hhUNQs8ED6+hFVt2m4hrMseO8kkN7Mcsve1MIujzHUS7Gjo4uguBwHJJOtiXB2fw4OSiQCmsXscZA==}
 
-  '@storybook/csf-plugin@8.2.1':
-    resolution: {integrity: sha512-/3nT7kvOsGSS8ym4qDFuz28h43BjiodLbRwUNa+p50fpO59s3F8MbK4lSBHPFXfTViWfrOZ5gL7CHe1f8PFJRA==}
+  '@storybook/csf-plugin@8.2.4':
+    resolution: {integrity: sha512-7V2tmeyAwv4/AQiBpB+7fCpphnY1yhcz+Zv9esUOHKqFn5+7u9FKpEXFFcf6fcbqXr2KoNw2F1EnTv3K/SxXrg==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
   '@storybook/csf-tools@8.1.11':
     resolution: {integrity: sha512-6qMWAg/dBwCVIHzANM9lSHoirwqSS+wWmv+NwAs0t9S94M75IttHYxD3IyzwaSYCC5llp0EQFvtXXAuSfFbibg==}
@@ -2842,17 +2680,17 @@ packages:
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  '@storybook/html-vite@8.2.1':
-    resolution: {integrity: sha512-s9L8WL2IpkHy+y5qrnx+MQN5olaR/zsOUX53a9tWgQ0PtAlJpIOB51kPCrlhFR0+6x5S5TZe25IM9xdWmspdKg==}
+  '@storybook/html-vite@8.2.4':
+    resolution: {integrity: sha512-Iz6RfN1plrzIaqM7eYxbWml6zOOTgDNkyMEEIHWsrGBB3Cuk2yDpLabFCXCYTfvpPP/s24U+NWeAHztp2Y7EPg==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/html@8.2.1':
-    resolution: {integrity: sha512-vyOab069HuoPh9lTznMWNjCLJbpSMPWvrUVji3J7Y+Ka5mUR+1dL/Tz6fOBDLpbjadvzYi654nqQzvfnUNxpfw==}
+  '@storybook/html@8.2.4':
+    resolution: {integrity: sha512-yWNbX+KKEdb9um/GmwaMuRy4/SfTvNW71qMWJDfU527rlAgGRlyBLO8FQqdNsD9tTE3MD3nCZDGQEvhy/tlXrw==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
   '@storybook/icons@1.2.9':
     resolution: {integrity: sha512-cOmylsz25SYXaJL/gvTk/dl3pyk7yBFRfeXTsHvTA3dfhoU/LWSq0NKL9nM7WBasJyn6XPSGnLS4RtKXLw5EUg==}
@@ -2861,62 +2699,51 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@storybook/manager-api@8.2.1':
-    resolution: {integrity: sha512-xFd4E6kmIITaQ+XiC6id1hqw9q8+HZqF3e49BBWhd3NtcdWuen+6RFH2Rk6uTI3ueWHKc7YdoIWsvkm6B/BJ1g==}
+  '@storybook/manager-api@8.2.4':
+    resolution: {integrity: sha512-ayiOtcGupSeLCi2doEsRpALNPo4MBWYruc+e3jjkeVJQIg9A1ipSogNQh8unuOmq9rezO4/vcNBd6MxLs3xLWg==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
   '@storybook/node-logger@8.1.11':
     resolution: {integrity: sha512-wdzFo7B2naGhS52L3n1qBkt5BfvQjs8uax6B741yKRpiGgeAN8nz8+qelkD25MbSukxvbPgDot7WJvsMU/iCzg==}
 
-  '@storybook/preview-api@8.2.1':
-    resolution: {integrity: sha512-hBmlGmIlcvfEktqlUHhPRu8216IfT0oareIMn7Zut7hNfymWIXg+svNMNDkgydvYzyOJdl9l8lGDJXIBse3fkA==}
+  '@storybook/preview-api@8.2.4':
+    resolution: {integrity: sha512-IxOiUYYzNnk1OOz3zQBhsa3P1fsgqeMBZcH7TjiQWs9osuWG20oqsFR6+Z3dxoW8IuQHvpnREGKvAbRsDsThcA==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
-  '@storybook/react-dom-shim@8.2.1':
-    resolution: {integrity: sha512-c6nfjyqiNduN6qk9yMP3EVNMslTJB+KGpKEDjpNOBGrTLkapp4dKTk8fN3EiFc3jEwhfN+xY+19eXwq7JBWCtg==}
+  '@storybook/react-dom-shim@8.2.4':
+    resolution: {integrity: sha512-p2ypPWuKKFY/ij7yYjvdnrOcfdpxnAJd9D4/2Hm2eVioE4y8HQSND54t9OfkW+498Ez7ph4zW9ez005XqzH/+w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
   '@storybook/test-runner@0.19.0':
     resolution: {integrity: sha512-7bA+hUcIYM1j8IcWE43FaUoTRXeYsISQycQFSztZwbcx9mSAEWDbiVfuwl6G7R71nK2hfNgKO5VjEBeVDsnWcw==}
     engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0}
     hasBin: true
 
-  '@storybook/theming@8.1.11':
-    resolution: {integrity: sha512-Chn/opjO6Rl1isNobutYqAH2PjKNkj09YBw/8noomk6gElSa3JbUTyaG/+JCHA6OG/9kUsqoKDb5cZmAKNq/jA==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
-        optional: true
-
-  '@storybook/theming@8.2.1':
-    resolution: {integrity: sha512-HJCOP3r+PG4hxowLVSzrOQLHTCJg6A7sAbk5QeULy0fcVgVGyMXeuxJhynf2j4wYTb9u93QCXWFlqEZhNBX++Q==}
+  '@storybook/theming@8.2.4':
+    resolution: {integrity: sha512-B4HQMzTeg1TgV9uPDIoDkMSnP839Y05I9+Tw60cilAD+jTqrCvMlccHfehsTzJk+gioAflunATcbU05TMZoeIQ==}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
 
   '@storybook/types@8.1.11':
     resolution: {integrity: sha512-k9N5iRuY2+t7lVRL6xeu6diNsxO3YI3lS4Juv3RZ2K4QsE/b3yG5ElfJB8DjHDSHwRH4ORyrU71KkOCUVfvtnw==}
 
-  '@storybook/vue3-vite@8.2.1':
-    resolution: {integrity: sha512-ovEh+FNJXfm00l/tCzuOIL0nZ5ECvHmcOCnDvMkp6pEW9v7JLPJ3A64giaTA6WJ9KMgP4KUVk9Uv3jS4Lv6Yug==}
+  '@storybook/vue3-vite@8.2.4':
+    resolution: {integrity: sha512-tRXduE0Ez1nxaz15iF483ofxm/tCr4a9kk7VXZluCgqu8vCyMYkZUaujc1DweuaIWCCVC0p+JfowOx/dl5oxFg==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
       vite: ^4.0.0 || ^5.0.0
 
-  '@storybook/vue3@8.2.1':
-    resolution: {integrity: sha512-YNtAj7YcYck/MPv4h5DqjsINKeHnL4Q2Owz7V8+T+mcMRCKgomesNsHs+G17SRd9lJ2qgCYM5/qKdj7ZeMMa9w==}
+  '@storybook/vue3@8.2.4':
+    resolution: {integrity: sha512-GD75+f1xpqivAWfkWSE1jmZu0jM7MFuVaNfIqLeC8rZyre4WMkOOpp6oM+UxkVQVqlz2tWW9ZG7+8n99gUnN2Q==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      storybook: ^8.2.1
+      storybook: ^8.2.4
       vue: ^3.0.0
 
   '@stylistic/eslint-plugin-js@2.1.0':
@@ -3752,10 +3579,6 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
-  aria-hidden@1.2.4:
-    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
-    engines: {node: '>=10'}
-
   array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
     engines: {node: '>= 0.4'}
@@ -4624,9 +4447,6 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
-  detect-node-es@1.1.0:
-    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
-
   devalue@4.3.3:
     resolution: {integrity: sha512-UH8EL6H2ifcY8TbD2QsxwCC/pr5xSwPvv85LrLXVihmHVC3T3YqTCIwnR5ak0yO1KYqlxrPVOA/JVZJYPy2ATg==}
 
@@ -5245,10 +5065,6 @@ packages:
     resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
     engines: {node: '>= 0.4'}
 
-  get-nonce@1.0.1:
-    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
-    engines: {node: '>=6'}
-
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -5618,9 +5434,6 @@ packages:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
 
-  invariant@2.2.4:
-    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
-
   ioredis@5.4.1:
     resolution: {integrity: sha512-2YZsvl7jopIa1gaePkeMtd9rAcSjOOjPtpcLlOeusyO+XH2SK5ZcT+UCrElPP+WVIInh2TzeI4XW9ENaSLVVHA==}
     engines: {node: '>=12.22.0'}
@@ -7777,36 +7590,6 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-remove-scroll-bar@2.3.6:
-    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.5.5:
-    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-style-singleton@2.2.1:
-    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   react-syntax-highlighter@15.5.0:
     resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
     peerDependencies:
@@ -8291,8 +8074,8 @@ packages:
       react-dom:
         optional: true
 
-  storybook@8.2.1:
-    resolution: {integrity: sha512-YT6//jQk5vfBCRVgcq1oBDUz8kE9PELTJAZr9VeeaLay/Fl5cUeNxjP7bm06hCOyYQ2gSUe4jF6TAwzwGePMLQ==}
+  storybook@8.2.4:
+    resolution: {integrity: sha512-ASavW8vIHiWpFY+4M6ngeqK5oL4OkxqdpmQYxvRqH0gA1G1hfq/vmDw4YC4GnqKwyWPQh2kaV5JFurKZVaeaDQ==}
     hasBin: true
 
   streamx@2.18.0:
@@ -8947,26 +8730,6 @@ packages:
   urlpattern-polyfill@8.0.2:
     resolution: {integrity: sha512-Qp95D4TPJl1kC9SKigDcqgyM2VDVO4RiJc2d4qe5GrYm+zbIQCWWKAFaJNQ4BhdFeDGwBmAxqJBwWSJDb9T3BQ==}
 
-  use-callback-ref@1.3.2:
-    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-sidecar@1.1.2:
-    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -10349,10 +10112,6 @@ snapshots:
 
   '@dual-bundle/import-meta-resolve@4.1.0': {}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-
   '@esbuild/aix-ppc64@0.19.12':
     optional: true
 
@@ -11646,151 +11405,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.25': {}
 
-  '@radix-ui/primitive@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.7
-
-  '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-context@1.0.1(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-dialog@1.0.5(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      aria-hidden: 1.2.4
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-remove-scroll: 2.5.5(@types/react@18.3.3)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-dismissable-layer@1.0.5(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-focus-scope@1.0.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-id@1.0.1(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-portal@1.0.4(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-primitive': 1.0.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-presence@1.0.1(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-primitive@1.0.3(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.3)(react@18.3.1)
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.3)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.24.7
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.3
-
   '@rollup/plugin-alias@5.1.0(rollup@3.29.4)':
     dependencies:
       slash: 4.0.0
@@ -12046,106 +11660,106 @@ snapshots:
     dependencies:
       '@sinonjs/commons': 3.0.1
 
-  '@storybook/addon-a11y@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-a11y@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
-      '@storybook/addon-highlight': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-highlight': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       axe-core: 4.9.1
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
-  '@storybook/addon-actions@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-actions@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       uuid: 9.0.1
 
-  '@storybook/addon-backgrounds@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-backgrounds@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-controls@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       dequal: 2.0.3
       lodash: 4.17.21
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-docs@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-docs@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@babel/core': 7.24.7
       '@mdx-js/react': 3.0.1(@types/react@18.3.3)(react@18.3.1)
-      '@storybook/blocks': 8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/csf-plugin': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/blocks': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/csf-plugin': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/react-dom-shim': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@types/react': 18.3.3
       fs-extra: 11.2.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       rehype-external-links: 3.0.0
       rehype-slug: 6.0.0
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/addon-essentials@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
-    dependencies:
-      '@storybook/addon-actions': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-backgrounds': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-controls': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-docs': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-highlight': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-measure': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-outline': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-toolbars': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/addon-viewport': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+  '@storybook/addon-essentials@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+    dependencies:
+      '@storybook/addon-actions': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-backgrounds': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-controls': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-docs': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-highlight': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-measure': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-outline': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-toolbars': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/addon-viewport': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/addon-highlight@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-highlight@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
-  '@storybook/addon-links@8.2.1(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-links@8.2.4(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.3.1
 
-  '@storybook/addon-measure@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-measure@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-outline@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-outline@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-toolbars@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-toolbars@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
-  '@storybook/addon-viewport@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/addon-viewport@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       memoizerific: 1.11.3
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
-  '@storybook/blocks@8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/blocks@8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
@@ -12158,7 +11772,7 @@ snapshots:
       memoizerific: 1.11.3
       polished: 4.3.1
       react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       telejson: 7.2.0
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
@@ -12166,9 +11780,9 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))':
+  '@storybook/builder-vite@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))':
     dependencies:
-      '@storybook/csf-plugin': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/csf-plugin': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@types/find-cache-dir': 3.2.1
       browser-assert: 1.2.1
       es-module-lexer: 1.5.3
@@ -12176,7 +11790,7 @@ snapshots:
       find-cache-dir: 3.3.2
       fs-extra: 11.2.0
       magic-string: 0.30.10
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
       vite: 5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1)
     optionalDependencies:
@@ -12196,12 +11810,12 @@ snapshots:
     dependencies:
       '@storybook/global': 5.0.0
 
-  '@storybook/codemod@8.2.1':
+  '@storybook/codemod@8.2.4':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/preset-env': 7.24.7(@babel/core@7.24.7)
       '@babel/types': 7.24.7
-      '@storybook/core': 8.2.1
+      '@storybook/core': 8.2.4
       '@storybook/csf': 0.1.11
       '@types/cross-spawn': 6.0.6
       cross-spawn: 7.0.3
@@ -12216,23 +11830,9 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/components@8.1.11(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@storybook/components@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
-      '@radix-ui/react-dialog': 1.0.5(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.3)(react@18.3.1)
-      '@storybook/client-logger': 8.1.11
-      '@storybook/csf': 0.1.11
-      '@storybook/global': 5.0.0
-      '@storybook/icons': 1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@storybook/theming': 8.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@storybook/types': 8.1.11
-      memoizerific: 1.11.3
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
   '@storybook/core-common@8.1.11(encoding@0.1.13)(prettier@3.3.1)':
     dependencies:
@@ -12276,7 +11876,7 @@ snapshots:
       '@storybook/csf': 0.1.11
       ts-dedent: 2.2.0
 
-  '@storybook/core@8.2.1':
+  '@storybook/core@8.2.4':
     dependencies:
       '@storybook/csf': 0.1.11
       '@types/express': 4.17.21
@@ -12294,9 +11894,9 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/csf-plugin@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       unplugin: 1.10.1
 
   '@storybook/csf-tools@8.1.11':
@@ -12327,12 +11927,12 @@ snapshots:
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/html-vite@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))':
+  '@storybook/html-vite@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))':
     dependencies:
-      '@storybook/builder-vite': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))
-      '@storybook/html': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/builder-vite': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))
+      '@storybook/html': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       magic-string: 0.30.10
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - supports-color
@@ -12340,10 +11940,14 @@ snapshots:
       - vite
       - vite-plugin-glimmerx
 
-  '@storybook/html@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/html@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
+      '@storybook/components': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/global': 5.0.0
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      '@storybook/manager-api': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/preview-api': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/theming': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
 
   '@storybook/icons@1.2.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
@@ -12351,23 +11955,23 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/manager-api@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/manager-api@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
   '@storybook/node-logger@8.1.11': {}
 
-  '@storybook/preview-api@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/preview-api@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
-  '@storybook/react-dom-shim@8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
+  '@storybook/react-dom-shim@8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
-  '@storybook/test-runner@0.19.0(@types/node@20.14.2)(encoding@0.1.13)(prettier@3.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.4.5))':
+  '@storybook/test-runner@0.19.0(@types/node@20.14.2)(encoding@0.1.13)(prettier@3.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(ts-node@10.9.2(@swc/core@1.6.13)(@types/node@20.14.2)(typescript@5.4.5))':
     dependencies:
       '@babel/core': 7.24.7
       '@babel/generator': 7.24.7
@@ -12377,7 +11981,7 @@ snapshots:
       '@storybook/core-common': 8.1.11(encoding@0.1.13)(prettier@3.3.1)
       '@storybook/csf': 0.1.8
       '@storybook/csf-tools': 8.1.11
-      '@storybook/preview-api': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/preview-api': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@swc/core': 1.6.13
       '@swc/jest': 0.2.36(@swc/core@1.6.13)
       expect-playwright: 0.8.0
@@ -12403,19 +12007,9 @@ snapshots:
       - supports-color
       - ts-node
 
-  '@storybook/theming@8.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@storybook/theming@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
     dependencies:
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1)
-      '@storybook/client-logger': 8.1.11
-      '@storybook/global': 5.0.0
-      memoizerific: 1.11.3
-    optionalDependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  '@storybook/theming@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))':
-    dependencies:
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
 
   '@storybook/types@8.1.11':
     dependencies:
@@ -12423,13 +12017,13 @@ snapshots:
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
 
-  '@storybook/vue3-vite@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))(vue@3.4.27(typescript@5.4.5))':
+  '@storybook/vue3-vite@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
-      '@storybook/builder-vite': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))
-      '@storybook/vue3': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))
+      '@storybook/builder-vite': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(typescript@5.4.5)(vite@5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1))
+      '@storybook/vue3': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))
       find-package-json: 1.2.0
       magic-string: 0.30.10
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       typescript: 5.4.5
       vite: 5.3.2(@types/node@20.14.2)(sass@1.77.4)(terser@5.31.1)
       vue-component-meta: 2.0.21(typescript@5.4.5)
@@ -12440,12 +12034,16 @@ snapshots:
       - vite-plugin-glimmerx
       - vue
 
-  '@storybook/vue3@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))':
+  '@storybook/vue3@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
+      '@storybook/components': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/global': 5.0.0
+      '@storybook/manager-api': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/preview-api': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/theming': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@vue/compiler-core': 3.4.27
       lodash: 4.17.21
-      storybook: 8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))
+      storybook: 8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.4.27(typescript@5.4.5)
@@ -13521,10 +13119,6 @@ snapshots:
 
   argparse@2.0.1: {}
 
-  aria-hidden@1.2.4:
-    dependencies:
-      tslib: 2.6.3
-
   array-buffer-byte-length@1.0.1:
     dependencies:
       call-bind: 1.0.7
@@ -14435,8 +14029,6 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
-  detect-node-es@1.1.0: {}
-
   devalue@4.3.3: {}
 
   devlop@1.1.0:
@@ -15246,8 +14838,6 @@ snapshots:
       has-symbols: 1.0.3
       hasown: 2.0.2
 
-  get-nonce@1.0.1: {}
-
   get-package-type@0.1.0: {}
 
   get-port-please@3.1.2: {}
@@ -15682,10 +15272,6 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.0.6
 
-  invariant@2.2.4:
-    dependencies:
-      loose-envify: 1.4.0
-
   ioredis@5.4.1:
     dependencies:
       '@ioredis/commands': 1.2.0
@@ -18459,34 +18045,6 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-remove-scroll-bar@2.3.6(@types/react@18.3.3)(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
-      tslib: 2.6.3
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  react-remove-scroll@2.5.5(@types/react@18.3.3)(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      react-remove-scroll-bar: 2.3.6(@types/react@18.3.3)(react@18.3.1)
-      react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
-      tslib: 2.6.3
-      use-callback-ref: 1.3.2(@types/react@18.3.3)(react@18.3.1)
-      use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  react-style-singleton@2.2.1(@types/react@18.3.3)(react@18.3.1):
-    dependencies:
-      get-nonce: 1.0.1
-      invariant: 2.2.4
-      react: 18.3.1
-      tslib: 2.6.3
-    optionalDependencies:
-      '@types/react': 18.3.3
-
   react-syntax-highlighter@15.5.0(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.24.7
@@ -19039,26 +18597,26 @@ snapshots:
 
   std-env@3.7.0: {}
 
-  storybook-addon-vue-slots@0.9.29(@storybook/blocks@8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/components@8.1.11(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@storybook/core-events@8.1.11)(@storybook/preview-api@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/theming@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/types@8.1.11)(@storybook/vue3@8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5)):
+  storybook-addon-vue-slots@0.9.29(@storybook/blocks@8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/components@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/core-events@8.1.11)(@storybook/preview-api@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/theming@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7))))(@storybook/types@8.1.11)(@storybook/vue3@8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vue@3.4.27(typescript@5.4.5)):
     dependencies:
-      '@storybook/blocks': 8.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/components': 8.1.11(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@storybook/blocks': 8.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/components': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/core-events': 8.1.11
-      '@storybook/preview-api': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
-      '@storybook/theming': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/preview-api': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
+      '@storybook/theming': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))
       '@storybook/types': 8.1.11
-      '@storybook/vue3': 8.2.1(storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))
+      '@storybook/vue3': 8.2.4(storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)))(vue@3.4.27(typescript@5.4.5))
       vue: 3.4.27(typescript@5.4.5)
     optionalDependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  storybook@8.2.1(@babel/preset-env@7.24.7(@babel/core@7.24.7)):
+  storybook@8.2.4(@babel/preset-env@7.24.7(@babel/core@7.24.7)):
     dependencies:
       '@babel/core': 7.24.7
       '@babel/types': 7.24.7
-      '@storybook/codemod': 8.2.1
-      '@storybook/core': 8.2.1
+      '@storybook/codemod': 8.2.4
+      '@storybook/core': 8.2.4
       '@types/semver': 7.5.8
       '@yarnpkg/fslib': 2.10.3
       '@yarnpkg/libzip': 2.3.0
@@ -19889,21 +19447,6 @@ snapshots:
 
   urlpattern-polyfill@8.0.2: {}
 
-  use-callback-ref@1.3.2(@types/react@18.3.3)(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      tslib: 2.6.3
-    optionalDependencies:
-      '@types/react': 18.3.3
-
-  use-sidecar@1.1.2(@types/react@18.3.3)(react@18.3.1):
-    dependencies:
-      detect-node-es: 1.1.0
-      react: 18.3.1
-      tslib: 2.6.3
-    optionalDependencies:
-      '@types/react': 18.3.3
-
   util-deprecate@1.0.2: {}
 
   util@0.12.5: