diff --git a/.github/workflows/storybook-publish.yml b/.github/workflows/storybook-publish.yml
index 6e4f8df2..84603377 100644
--- a/.github/workflows/storybook-publish.yml
+++ b/.github/workflows/storybook-publish.yml
@@ -28,6 +28,10 @@ jobs:
       - name: Build
         run: yarn build
 
+      - name: Build storybook for Labs
+        working-directory: '.'
+        run: yarn storybook:build
+
       - name: Build storybook for web-components
         working-directory: 'packages/web-components'
         run: yarn storybook:build
@@ -35,6 +39,18 @@ jobs:
       - name: Build storybook for react
         working-directory: 'packages/react'
         run: yarn storybook:build
+      - name: Create CNAME
+        run: |
+          touch storybook-static/.nojekyll
+          touch storybook-static/CNAME
+          echo "labs.carbondesignsystem.com" > storybook-static/CNAME
+      # Deploy Labs Storybook Github Pages using `gh-pages` package
+      - name: Deploy Labs Storybook
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          npx gh-pages -d storybook-static -u "github-actions-bot <support+actions@github.com>" --message "chore(deploy): deploy storybook"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       # Deploy web-components Storybook Github Pages using `gh-pages` package
       - name: Deploy web-components Storybook
diff --git a/.gitignore b/.gitignore
index fcbc6b51..d928a641 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,5 @@ package.tgz
 .nx/*
 agentic.stories.js
 /.history
+
+*storybook.log
diff --git a/.storybook/index.scss b/.storybook/index.scss
new file mode 100644
index 00000000..2d5a2869
--- /dev/null
+++ b/.storybook/index.scss
@@ -0,0 +1 @@
+@forward '@carbon/styles';
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 00000000..8c3b8aa0
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,33 @@
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: [
+    './welcome/**/*.mdx',
+    './welcome/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [getAbsolutePath('@storybook/addon-essentials')],
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    options: {},
+  },
+  refs: {
+    'web-components': {
+      title: 'Web Components',
+      url: 'web-components/index.html',
+    },
+    react: {
+      title: 'React components',
+      url: 'react/index.html',
+    },
+  },
+};
+export default config;
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
new file mode 100644
index 00000000..23ab9f90
--- /dev/null
+++ b/.storybook/manager-head.html
@@ -0,0 +1,122 @@
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js" />
+<meta
+  name="description"
+  content="This is Carbon Labs, an innovation space for the creation of components leveraging Carbon Design System." />
+
+<!-- Open Graph -->
+<meta property="og:title" content="Carbon Labs" />
+<meta property="og:site_name" content="Carbon Labs" />
+<meta
+  property="og:description"
+  content="This is Carbon Labs, an innovation space for the creation of components leveraging Carbon Design System." />
+<meta
+  property="og:image"
+  content="https://media.github.ibm.com/user/1679/files/aa651000-7749-11eb-900e-eeb9312ed756" />
+<meta property="og:url" content="http://labs.carbondesignsystem.com" />
+
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" />
+
+<footer>
+  <dds-footer-container
+    key="footer"
+    disable-locale-button="true"
+    size="micro" />,
+</footer>
+
+<script
+  key="8"
+  type="module"
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js" />
+
+<!-- Storybook override -->
+<script>
+  setTimeout(function () {
+    document.title = 'Carbon Labs';
+  }, 1000);
+</script>
+
+<!-- Tealium/GA Set up -->
+<script type="text/javascript">
+  window._ibmAnalytics = {
+    settings: {
+      name: 'CarbonLabsStorybook',
+      isSpa: true,
+      tealiumProfileName: 'ibm-web-app',
+    },
+    onLoad: [['ibmStats.pageview', []]],
+  };
+  digitalData = {
+    page: {
+      pageInfo: {
+        ibm: {
+          siteId: 'IBM_' + _ibmAnalytics.settings.name,
+        },
+      },
+      category: {
+        primaryCategory: 'PC100',
+      },
+    },
+  };
+</script>
+
+<script
+  src="//1.www.s81c.com/common/stats/ibm-common.js"
+  type="text/javascript"
+  async="async"></script>
+
+<!-- Style overrides -->
+<style>
+  body {
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  body a[href='/?path=/settings/about'] {
+    display: none;
+  }
+
+  /* This style is required because of the compliance footer */
+  #root > div {
+    height: calc(100vh - 48px);
+  }
+
+  /* This style is required because of the compliance footer in smaller screens */
+  @media (max-width: 671px) {
+    nav[class^='css-'] {
+      height: 281px;
+    }
+  }
+
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 99999;
+  }
+
+  .os-content form span {
+    font-weight: 600;
+  }
+
+  .os-content a button {
+    color: #161616;
+  }
+
+  button.sidebar-item svg {
+    color: #161616;
+  }
+
+  a.sidebar-item[data-selected='true'] {
+    color: #161616;
+  }
+
+  a.sidebar-item[data-selected='true'] svg {
+    color: #161616;
+  }
+
+  mark[class*='css-'] {
+    color: #0f62fe;
+  }
+</style>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 00000000..01b3bfe5
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,41 @@
+<!--
+@license
+
+Copyright IBM Corp. 2023
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<link
+  rel="stylesheet"
+  href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+
+<script>
+  window.digitalData = window.digitalData || {
+    page: {
+      category: {
+        primaryCategory: '',
+      },
+      pageInfo: {
+        effectiveDate: '',
+        expiryDate: '',
+        language: 'en-US',
+        publishDate: '',
+        publisher: '',
+        version: 'Carbon Labs',
+        ibm: {
+          contentDelivery: '',
+          contentProducer: '',
+          country: 'US',
+          industry: '',
+          owner: '',
+          siteID: '',
+          subject: '',
+          type: '',
+        },
+      },
+      isDataLayerReady: true,
+    },
+  };
+</script>
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 00000000..05cf908b
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,15 @@
+import './styles.scss';
+
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/.storybook/styles.scss b/.storybook/styles.scss
new file mode 100644
index 00000000..264ad88e
--- /dev/null
+++ b/.storybook/styles.scss
@@ -0,0 +1,3 @@
+@use 'index.scss' as styles with (
+  $font-path: '~@ibm/plex'
+);
diff --git a/.storybook/welcome/CarbonLabs2.png b/.storybook/welcome/CarbonLabs2.png
new file mode 100644
index 00000000..cd477487
Binary files /dev/null and b/.storybook/welcome/CarbonLabs2.png differ
diff --git a/.storybook/welcome/Welcome.jsx b/.storybook/welcome/Welcome.jsx
new file mode 100644
index 00000000..60b5dbac
--- /dev/null
+++ b/.storybook/welcome/Welcome.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { ArrowRight } from '@carbon/icons-react';
+import { Link, Stack } from '@carbon/react';
+import './welcome.scss';
+export const Welcome = () => {
+  return (
+    <>
+      <div className="welcome__container">
+        <h2 className="welcome__heading">@carbon-labs</h2>
+        <Stack>
+          <Link
+            href="https://github.com/carbon-design-system/carbon-labs"
+            className="welcome__link"
+            renderIcon={ArrowRight}>
+            GitHub repo
+          </Link>
+          <Link
+            href="https://carbondesignsystem.com/"
+            className="welcome__link"
+            renderIcon={ArrowRight}>
+            Carbon Design System
+          </Link>
+          <Link
+            href="https://github.com/carbon-design-system/carbon/blob/main/SECURITY.md"
+            className="welcome__link"
+            renderIcon={ArrowRight}>
+            Security policy
+          </Link>
+        </Stack>
+      </div>
+    </>
+  );
+};
diff --git a/.storybook/welcome/Welcome.mdx b/.storybook/welcome/Welcome.mdx
new file mode 100644
index 00000000..59a56059
--- /dev/null
+++ b/.storybook/welcome/Welcome.mdx
@@ -0,0 +1,8 @@
+import { Welcome as Intro } from './Welcome';
+import { Meta, Unstyled } from '@storybook/blocks';
+
+<Meta title="Welcome to Carbon Labs" />
+
+<Unstyled>
+  <Intro />
+</Unstyled>
diff --git a/.storybook/welcome/welcome.scss b/.storybook/welcome/welcome.scss
new file mode 100644
index 00000000..649863c3
--- /dev/null
+++ b/.storybook/welcome/welcome.scss
@@ -0,0 +1,30 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+
+.welcome__container {
+  position: fixed;
+  padding: 3rem;
+  background: url('./CarbonLabs2.png') no-repeat center center fixed;
+  background-size: cover;
+  block-size: 100vh;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.welcome__heading {
+  @include type.type-style('productive-heading-07');
+
+  color: colors.$gray-80;
+}
+
+.welcome__link,
+.welcome__link:hover,
+.welcome__link.cds--link:visited {
+  margin-top: 1rem;
+  color: colors.$blue-70;
+}
+
+.welcome__link:first-child {
+  margin-top: 2rem;
+}
diff --git a/package.json b/package.json
index 332cd343..f29324cb 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,17 @@
     "lint:license:staged": "tools/check-license.cjs -w",
     "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
     "prepare": "husky install",
-    "reset": "yarn cache clean && yarn clean && yarn install && yarn build"
+    "reset": "yarn cache clean && yarn clean && yarn install && yarn build",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/web-components": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
     "@types/fs-extra": "^11.0.4",
     "@types/mocha": "^10.0.3",
     "@types/react": "^18.2.36",
@@ -59,12 +65,14 @@
     "husky": "^9.0.0",
     "lerna": "^8.0.0",
     "lint-staged": "^15.0.2",
+    "lit": "^3.2.1",
     "prettier": "^2.8.8",
     "prettier-config-carbon": "^0.11.0",
     "rollup": "^4.0.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
+    "storybook": "^8.4.7",
     "strip-comments": "^2.0.1",
     "stylelint": "15.11.0",
     "stylelint-config-carbon": "1.17.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 7c755ee9..acef5b42 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@carbon/labs-react",
+  "name": "@carbon-labs/react",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -7,8 +7,8 @@
   "license": "Apache-2.0",
   "repository": "https://github.com/carbon-design-system/carbon-labs",
   "scripts": {
+    "storybook": "storybook dev -p 6008",
     "generate": "node tasks/generate",
-    "storybook": "storybook dev -p 3000",
     "storybook:build": "storybook build",
     "test": "jest",
     "test:updateSnapshot": "jest -u"
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index a227ec25..bfcf6529 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@carbon/labs-web-components",
+  "name": "@carbon-labs/web-components",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -21,15 +21,15 @@
   },
   "scripts": {
     "build": "cem analyze --config ./custom-elements-manifest.config.js",
+    "storybook": "storybook dev -p 6007",
     "generate": "node tasks/generate",
-    "storybook": "storybook dev -p 6006",
     "storybook:build": "npx storybook build",
     "test": "yarn build && web-test-runner \"src/components/**/*.test.js\" --node-resolve",
     "test:updateSnapshot": "yarn build && web-test-runner \"src/components/**/*.test.js\" --node-resolve --update-snapshots"
   },
   "dependencies": {
     "@carbon/styles": "^1.70.0",
-    "lit": "^3.0.0"
+    "lit": "^3.2.1"
   },
   "devDependencies": {
     "@carbon/grid": "^11.21.1",
diff --git a/yarn.lock b/yarn.lock
index 7f06cdde..774594b3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2590,116 +2590,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon-labs/utilities@npm:0.14.0, @carbon-labs/utilities@workspace:packages/utilities":
+"@carbon-labs/react@workspace:packages/react":
   version: 0.0.0-use.local
-  resolution: "@carbon-labs/utilities@workspace:packages/utilities"
-  dependencies:
-    "@rollup/plugin-babel": "npm:^6.0.4"
-    babel-cli: "npm:^6.26.0"
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
-  languageName: unknown
-  linkType: soft
-
-"@carbon-labs/utilities@npm:0.8.0":
-  version: 0.8.0
-  resolution: "@carbon-labs/utilities@npm:0.8.0"
-  checksum: 10c0/f163a6e0367d43f463be787b6561454805c307f7ebacb8f9ff0a7c37ff13b1b854a763bebbef7a47069d8c37cbd8ddccb1cecd72ba75fe422d91bb154e796dd8
-  languageName: node
-  linkType: hard
-
-"@carbon-labs/utilities@npm:canary":
-  version: 0.14.1-canary.387
-  resolution: "@carbon-labs/utilities@npm:0.14.1-canary.387"
-  dependencies:
-    react: "npm:^18.3.1"
-    react-dom: "npm:^18.3.1"
-  checksum: 10c0/17f791a40f4f55689924b355fdecbfb254abd99325e1aee86ef96b7adb95e57d5be0b0eb928083137a6bad8a667d1bdfe33af2946502fa48434a133fb43756a3
-  languageName: node
-  linkType: hard
-
-"@carbon-labs/wc-example-button@workspace:packages/web-components/src/components/example-button":
-  version: 0.0.0-use.local
-  resolution: "@carbon-labs/wc-example-button@workspace:packages/web-components/src/components/example-button"
-  dependencies:
-    "@babel/runtime": "npm:^7.23.2"
-    "@carbon-labs/utilities": "npm:0.14.0"
-    "@carbon/web-components": "npm:2.20.0"
-  languageName: unknown
-  linkType: soft
-
-"@carbon/colors@npm:^11.28.0":
-  version: 11.28.0
-  resolution: "@carbon/colors@npm:11.28.0"
-  dependencies:
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  checksum: 10c0/7d7c8eecf7ae1a6e4a6cc1244be7015d5cfbe186f79b97091ddc0420f7c740a0f0d67cc31a7234d9e1819bb1a36e76695fbd568b28096990e6f6a552f7251505
-  languageName: node
-  linkType: hard
-
-"@carbon/feature-flags@npm:^0.24.0":
-  version: 0.24.0
-  resolution: "@carbon/feature-flags@npm:0.24.0"
-  dependencies:
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  checksum: 10c0/d9940d82120fb982c343f82b47d4a2be598d3934f20fa54fd2cc776a4d3c76b8f1c70596d43ff64a3fdeec37e1b7606a5233c0763240cc597f008553b0817c18
-  languageName: node
-  linkType: hard
-
-"@carbon/grid@npm:^11.21.0, @carbon/grid@npm:^11.21.1, @carbon/grid@npm:^11.29.0":
-  version: 11.29.0
-  resolution: "@carbon/grid@npm:11.29.0"
-  dependencies:
-    "@carbon/layout": "npm:^11.28.0"
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  checksum: 10c0/1a5d75351cd4a4d0ece570a7eff491431bfcb2ac8a9d0cffbfcd5025b3a1f3320ebcbd90b1adb6b9576e5f880a587349289914956cea1d2e4444334f8dd583d2
-  languageName: node
-  linkType: hard
-
-"@carbon/grid@npm:^11.30.0":
-  version: 11.30.0
-  resolution: "@carbon/grid@npm:11.30.0"
-  dependencies:
-    "@carbon/layout": "npm:^11.28.0"
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  checksum: 10c0/3ff04179c86d2ca9f8e1a578ea4c593f75d80d44b12f3df40d0dbc4c6cc0a4dc161f4f0a8b18a5ed9838e983ac4f5d6621957f2dc65e9c085545ea0299eda9ce
-  languageName: node
-  linkType: hard
-
-"@carbon/icon-helpers@npm:10.54.0, @carbon/icon-helpers@npm:^10.54.0":
-  version: 10.54.0
-  resolution: "@carbon/icon-helpers@npm:10.54.0"
-  dependencies:
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  checksum: 10c0/320318028f24e3a63f81be20e9bd0e74853b4a7fb3a5314ad11f8214f3f3ca3aba51a45b2ae6c46e51d46121ccf94d7cad9a96b5e2d45a364d1344101db6f809
-  languageName: node
-  linkType: hard
-
-"@carbon/icons-react@npm:^11.53.0":
-  version: 11.53.0
-  resolution: "@carbon/icons-react@npm:11.53.0"
-  dependencies:
-    "@carbon/icon-helpers": "npm:^10.54.0"
-    "@ibm/telemetry-js": "npm:^1.5.0"
-    prop-types: "npm:^15.7.2"
-  peerDependencies:
-    react: ">=16"
-  checksum: 10c0/f218ae63ec3bd111baa57f3b909cb77f47c00bac0fbb068b3d5091869172d5cbea19d2b758f47b60e3e17accca8fc562419b5c9e460cd50d02c83672095da4e8
-  languageName: node
-  linkType: hard
-
-"@carbon/icons@npm:11.53.0":
-  version: 11.53.0
-  resolution: "@carbon/icons@npm:11.53.0"
-  dependencies:
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  checksum: 10c0/ec19179cafb629d2354f906d70d44f85a911009c39f65602d2ad432ecd5264541110286a79fcd9566d569e78a8680190c84f4294839915a388ce07d8a72d6fa8
-  languageName: node
-  linkType: hard
-
-"@carbon/labs-react@workspace:packages/react":
-  version: 0.0.0-use.local
-  resolution: "@carbon/labs-react@workspace:packages/react"
+  resolution: "@carbon-labs/react@workspace:packages/react"
   dependencies:
     "@babel/core": "npm:^7.26.0"
     "@babel/plugin-proposal-export-default-from": "npm:^7.25.9"
@@ -2766,9 +2659,47 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/labs-web-components@workspace:packages/web-components":
+"@carbon-labs/utilities@npm:0.14.0, @carbon-labs/utilities@workspace:packages/utilities":
   version: 0.0.0-use.local
-  resolution: "@carbon/labs-web-components@workspace:packages/web-components"
+  resolution: "@carbon-labs/utilities@workspace:packages/utilities"
+  dependencies:
+    "@rollup/plugin-babel": "npm:^6.0.4"
+    babel-cli: "npm:^6.26.0"
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.3.1"
+  languageName: unknown
+  linkType: soft
+
+"@carbon-labs/utilities@npm:0.8.0":
+  version: 0.8.0
+  resolution: "@carbon-labs/utilities@npm:0.8.0"
+  checksum: 10c0/f163a6e0367d43f463be787b6561454805c307f7ebacb8f9ff0a7c37ff13b1b854a763bebbef7a47069d8c37cbd8ddccb1cecd72ba75fe422d91bb154e796dd8
+  languageName: node
+  linkType: hard
+
+"@carbon-labs/utilities@npm:canary":
+  version: 0.14.1-canary.387
+  resolution: "@carbon-labs/utilities@npm:0.14.1-canary.387"
+  dependencies:
+    react: "npm:^18.3.1"
+    react-dom: "npm:^18.3.1"
+  checksum: 10c0/17f791a40f4f55689924b355fdecbfb254abd99325e1aee86ef96b7adb95e57d5be0b0eb928083137a6bad8a667d1bdfe33af2946502fa48434a133fb43756a3
+  languageName: node
+  linkType: hard
+
+"@carbon-labs/wc-example-button@workspace:packages/web-components/src/components/example-button":
+  version: 0.0.0-use.local
+  resolution: "@carbon-labs/wc-example-button@workspace:packages/web-components/src/components/example-button"
+  dependencies:
+    "@babel/runtime": "npm:^7.23.2"
+    "@carbon-labs/utilities": "npm:0.14.0"
+    "@carbon/web-components": "npm:2.20.0"
+  languageName: unknown
+  linkType: soft
+
+"@carbon-labs/web-components@workspace:packages/web-components":
+  version: 0.0.0-use.local
+  resolution: "@carbon-labs/web-components@workspace:packages/web-components"
   dependencies:
     "@carbon/grid": "npm:^11.21.1"
     "@carbon/icon-helpers": "npm:10.54.0"
@@ -2806,7 +2737,7 @@ __metadata:
     commander: "npm:^12.0.0"
     cssnano: "npm:^7.0.0"
     gitignore-to-glob: "npm:^0.3.0"
-    lit: "npm:^3.0.0"
+    lit: "npm:^3.2.1"
     postcss: "npm:^8.4.49"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
@@ -2820,6 +2751,65 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@carbon/colors@npm:^11.28.0":
+  version: 11.28.0
+  resolution: "@carbon/colors@npm:11.28.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10c0/7d7c8eecf7ae1a6e4a6cc1244be7015d5cfbe186f79b97091ddc0420f7c740a0f0d67cc31a7234d9e1819bb1a36e76695fbd568b28096990e6f6a552f7251505
+  languageName: node
+  linkType: hard
+
+"@carbon/feature-flags@npm:^0.24.0":
+  version: 0.24.0
+  resolution: "@carbon/feature-flags@npm:0.24.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10c0/d9940d82120fb982c343f82b47d4a2be598d3934f20fa54fd2cc776a4d3c76b8f1c70596d43ff64a3fdeec37e1b7606a5233c0763240cc597f008553b0817c18
+  languageName: node
+  linkType: hard
+
+"@carbon/grid@npm:^11.21.0, @carbon/grid@npm:^11.21.1, @carbon/grid@npm:^11.30.0":
+  version: 11.30.0
+  resolution: "@carbon/grid@npm:11.30.0"
+  dependencies:
+    "@carbon/layout": "npm:^11.28.0"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10c0/3ff04179c86d2ca9f8e1a578ea4c593f75d80d44b12f3df40d0dbc4c6cc0a4dc161f4f0a8b18a5ed9838e983ac4f5d6621957f2dc65e9c085545ea0299eda9ce
+  languageName: node
+  linkType: hard
+
+"@carbon/icon-helpers@npm:10.54.0, @carbon/icon-helpers@npm:^10.54.0":
+  version: 10.54.0
+  resolution: "@carbon/icon-helpers@npm:10.54.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10c0/320318028f24e3a63f81be20e9bd0e74853b4a7fb3a5314ad11f8214f3f3ca3aba51a45b2ae6c46e51d46121ccf94d7cad9a96b5e2d45a364d1344101db6f809
+  languageName: node
+  linkType: hard
+
+"@carbon/icons-react@npm:^11.53.0":
+  version: 11.53.0
+  resolution: "@carbon/icons-react@npm:11.53.0"
+  dependencies:
+    "@carbon/icon-helpers": "npm:^10.54.0"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">=16"
+  checksum: 10c0/f218ae63ec3bd111baa57f3b909cb77f47c00bac0fbb068b3d5091869172d5cbea19d2b758f47b60e3e17accca8fc562419b5c9e460cd50d02c83672095da4e8
+  languageName: node
+  linkType: hard
+
+"@carbon/icons@npm:11.53.0":
+  version: 11.53.0
+  resolution: "@carbon/icons@npm:11.53.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10c0/ec19179cafb629d2354f906d70d44f85a911009c39f65602d2ad432ecd5264541110286a79fcd9566d569e78a8680190c84f4294839915a388ce07d8a72d6fa8
+  languageName: node
+  linkType: hard
+
 "@carbon/layout@npm:11.28.0, @carbon/layout@npm:^11.28.0":
   version: 11.28.0
   resolution: "@carbon/layout@npm:11.28.0"
@@ -2871,37 +2861,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/styles@npm:^1.70.0, @carbon/styles@npm:^1.71.0":
-  version: 1.71.0
-  resolution: "@carbon/styles@npm:1.71.0"
-  dependencies:
-    "@carbon/colors": "npm:^11.28.0"
-    "@carbon/feature-flags": "npm:^0.24.0"
-    "@carbon/grid": "npm:^11.29.0"
-    "@carbon/layout": "npm:^11.28.0"
-    "@carbon/motion": "npm:^11.24.0"
-    "@carbon/themes": "npm:^11.43.0"
-    "@carbon/type": "npm:^11.33.0"
-    "@ibm/plex": "npm:6.0.0-next.6"
-    "@ibm/plex-mono": "npm:0.0.3-alpha.0"
-    "@ibm/plex-sans": "npm:0.0.3-alpha.0"
-    "@ibm/plex-sans-arabic": "npm:0.0.3-alpha.0"
-    "@ibm/plex-sans-devanagari": "npm:0.0.3-alpha.0"
-    "@ibm/plex-sans-hebrew": "npm:0.0.3-alpha.0"
-    "@ibm/plex-sans-thai": "npm:0.0.3-alpha.0"
-    "@ibm/plex-sans-thai-looped": "npm:0.0.3-alpha.0"
-    "@ibm/plex-serif": "npm:0.0.3-alpha.0"
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  peerDependencies:
-    sass: ^1.33.0
-  peerDependenciesMeta:
-    sass:
-      optional: true
-  checksum: 10c0/a057da72de5cfb49b23973d928ef33f412cfe64c4ede341a281349e5ab42232b7cc5e78a13e85d3615bddd7c548afd29bd15a635e9361fbe4497390f23f870a6
-  languageName: node
-  linkType: hard
-
-"@carbon/styles@npm:^1.72.0":
+"@carbon/styles@npm:^1.70.0, @carbon/styles@npm:^1.71.0, @carbon/styles@npm:^1.72.0":
   version: 1.72.0
   resolution: "@carbon/styles@npm:1.72.0"
   dependencies:
@@ -2944,19 +2904,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/themes@npm:^11.43.0":
-  version: 11.43.0
-  resolution: "@carbon/themes@npm:11.43.0"
-  dependencies:
-    "@carbon/colors": "npm:^11.28.0"
-    "@carbon/layout": "npm:^11.28.0"
-    "@carbon/type": "npm:^11.33.0"
-    "@ibm/telemetry-js": "npm:^1.5.0"
-    color: "npm:^4.0.0"
-  checksum: 10c0/05f33db5af738c6dee9341713cdbc462c57f8bc766edc937c5081bf922e996fa90bb091361c2dee5d25d8ff7aff95d8a2bd986e40a41f9b7b085608e889d184a
-  languageName: node
-  linkType: hard
-
 "@carbon/type@npm:11.34.0, @carbon/type@npm:^11.34.0":
   version: 11.34.0
   resolution: "@carbon/type@npm:11.34.0"
@@ -2968,17 +2915,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/type@npm:^11.33.0":
-  version: 11.33.0
-  resolution: "@carbon/type@npm:11.33.0"
-  dependencies:
-    "@carbon/grid": "npm:^11.29.0"
-    "@carbon/layout": "npm:^11.28.0"
-    "@ibm/telemetry-js": "npm:^1.5.0"
-  checksum: 10c0/ec3f6beed58dd8e52ac4dd465d22fa8aa9f557c41a559f45fe2b1f10bad0ad9501e52b3781165993bba28f70025d42fa4ca2c8536a7121f476713f570e81eed7
-  languageName: node
-  linkType: hard
-
 "@carbon/web-components@npm:2.20.0":
   version: 2.20.0
   resolution: "@carbon/web-components@npm:2.20.0"
@@ -10835,6 +10771,10 @@ __metadata:
   dependencies:
     "@commitlint/cli": "npm:^19.0.0"
     "@commitlint/config-conventional": "npm:^19.0.0"
+    "@storybook/addon-essentials": "npm:^8.4.7"
+    "@storybook/blocks": "npm:^8.4.7"
+    "@storybook/web-components": "npm:^8.4.7"
+    "@storybook/web-components-vite": "npm:^8.4.7"
     "@types/fs-extra": "npm:^11.0.4"
     "@types/mocha": "npm:^10.0.3"
     "@types/react": "npm:^18.2.36"
@@ -10861,12 +10801,14 @@ __metadata:
     husky: "npm:^9.0.0"
     lerna: "npm:^8.0.0"
     lint-staged: "npm:^15.0.2"
+    lit: "npm:^3.2.1"
     prettier: "npm:^2.8.8"
     prettier-config-carbon: "npm:^0.11.0"
     rollup: "npm:^4.0.0"
     rollup-plugin-esbuild: "npm:^6.1.0"
     rollup-plugin-postcss: "npm:^4.0.2"
     rollup-plugin-postcss-lit: "npm:^2.1.0"
+    storybook: "npm:^8.4.7"
     strip-comments: "npm:^2.0.1"
     stylelint: "npm:15.11.0"
     stylelint-config-carbon: "npm:1.17.0"
@@ -10936,7 +10878,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:5.3.0, chalk@npm:^5.3.0":
+"chalk@npm:5.3.0":
   version: 5.3.0
   resolution: "chalk@npm:5.3.0"
   checksum: 10c0/8297d436b2c0f95801103ff2ef67268d362021b8210daf8ddbe349695333eb3610a71122172ff3b0272f1ef2cf7cc2c41fdaa4715f52e49ffe04c56340feed09
@@ -10987,7 +10929,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^5.4.1":
+"chalk@npm:^5.3.0, chalk@npm:^5.4.1":
   version: 5.4.1
   resolution: "chalk@npm:5.4.1"
   checksum: 10c0/b23e88132c702f4855ca6d25cb5538b1114343e41472d5263ee8a37cccfccd9c4216d111e1097c6a27830407a1dc81fecdf2a56f2c63033d4dbbd88c10b0dcef
@@ -16927,14 +16869,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.4, ignore@npm:^5.1.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4":
-  version: 5.3.1
-  resolution: "ignore@npm:5.3.1"
-  checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
-  languageName: node
-  linkType: hard
-
-"ignore@npm:^5.1.1":
+"ignore@npm:^5.0.4, ignore@npm:^5.1.1, ignore@npm:^5.1.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
   checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
@@ -19356,7 +19291,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lit@npm:^2.0.0 || ^3.0.0, lit@npm:^3.0.0, lit@npm:^3.1.0":
+"lit@npm:^2.0.0 || ^3.0.0, lit@npm:^3.0.0, lit@npm:^3.1.0, lit@npm:^3.2.1":
   version: 3.2.1
   resolution: "lit@npm:3.2.1"
   dependencies: