From 06534738f0e3da92327e304a207df1d342b4867c Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 19 Mar 2025 17:11:51 +0000
Subject: [PATCH 1/8] Update Storybook to fix composeStories

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/package.json                       |   4 +-
 .../src/app/(docs)/components/button/page.mdx |  23 +-
 canon-docs/src/snippets/button.tsx            | 120 +---
 canon-docs/yarn.lock                          | 493 ++++++++++-----
 packages/canon/.storybook/manager.ts          |  12 -
 packages/canon/package.json                   |  17 +-
 yarn.lock                                     | 562 +++++++++---------
 7 files changed, 682 insertions(+), 549 deletions(-)
 delete mode 100644 packages/canon/.storybook/manager.ts

diff --git a/canon-docs/package.json b/canon-docs/package.json
index 8558fac8e3..7bdaa718be 100644
--- a/canon-docs/package.json
+++ b/canon-docs/package.json
@@ -14,7 +14,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.1.4",
-    "@storybook/react": "^8.4.7",
+    "@storybook/react": "9.0.0-alpha.8",
     "@uiw/codemirror-themes": "^4.23.7",
     "@uiw/react-codemirror": "^4.23.7",
     "motion": "^12.4.1",
@@ -23,7 +23,7 @@
     "react-dom": "^18.0.2",
     "react-frame-component": "^5.2.7",
     "shiki": "^1.26.1",
-    "storybook": "^8.4.7"
+    "storybook": "9.0.0-alpha.8"
   },
   "devDependencies": {
     "@types/mdx": "^2.0.13",
diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index a92a6675d1..31d821772a 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -2,14 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import {
-  ButtonPreview,
-  ButtonSizes,
-  ButtonWithIcons,
-  ButtonFullWidth,
-  ButtonDisabled,
-  ButtonResponsive,
-} from '@/snippets/button';
+import { ButtonSnippet } from '@/snippets/button';
 import { buttonVariants } from '@/snippets/_snippets';
 import { buttonPropDefs } from './props';
 
@@ -20,7 +13,7 @@ A button component that can be used to trigger actions.
 <Snippet
   align="center"
   py={4}
-  preview={<ButtonPreview />}
+  preview={<ButtonSnippet story="Variants" />}
   code={`<Inline alignY="center">
   <Button iconStart="cloud" variant="primary">
     Button
@@ -71,7 +64,7 @@ Here's a view when buttons have different variants.
   align="center"
   py={4}
   open
-  preview={<ButtonPreview />}
+  preview={<ButtonSnippet story="Variants" />}
   code={buttonVariants}
 />
 
@@ -83,7 +76,7 @@ Here's a view when buttons have different sizes.
   align="center"
   py={4}
   open
-  preview={<ButtonSizes />}
+  preview={<ButtonSnippet story="Sizes" />}
   code={`<Inline alignY="center">
     <Button size="small">Small</Button>
     <Button size="medium">Medium</Button>
@@ -98,7 +91,7 @@ Here's a view when buttons have icons.
   align="center"
   py={4}
   open
-  preview={<ButtonWithIcons />}
+  preview={<ButtonSnippet story="WithIcons" />}
   code={`<Inline alignY="center">
     <Button iconStart="cloud">Button</Button>
     <Button iconEnd="chevronRight">Button</Button>
@@ -114,7 +107,7 @@ Here's a view when buttons are full width.
   align="center"
   py={4}
   open
-  preview={<ButtonFullWidth />}
+  preview={<ButtonSnippet story="FullWidth" />}
   code={`<Flex style={{ width: '300px' }}>
     <Button fullWidth>Full width</Button>
 </Flex>`}
@@ -128,7 +121,7 @@ Here's a view when buttons are disabled.
   align="center"
   py={4}
   open
-  preview={<ButtonDisabled />}
+  preview={<ButtonSnippet story="Disabled" />}
   code={`<Button disabled>Button</Button>`}
 />
 
@@ -140,7 +133,7 @@ Here's a view when buttons are responsive.
   align="center"
   py={4}
   open
-  preview={<ButtonResponsive />}
+  preview={<ButtonSnippet story="Responsive" />}
   code={`<Button variant={{ initial: 'primary', lg: 'secondary' }}>
     Responsive Button
   </Button>`}
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
index aa20b3e46a..e1b60fa72a 100644
--- a/canon-docs/src/snippets/button.tsx
+++ b/canon-docs/src/snippets/button.tsx
@@ -1,102 +1,26 @@
 'use client';
 
-import { Button, Flex, ButtonProps, Text } from '../../../packages/canon';
+import { composeStories } from '@storybook/react';
+import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
+import { useEffect, useState } from 'react';
 
-export const ButtonPreview = () => {
-  return (
-    <Flex align="center">
-      <Button iconStart="cloud" variant="primary">
-        Button
-      </Button>
-      <Button iconStart="cloud" variant="secondary">
-        Button
-      </Button>
-    </Flex>
-  );
-};
-
-export const ButtonSizes = () => {
-  return (
-    <Flex align="center">
-      <Button size="medium">Medium</Button>
-      <Button size="small">Small</Button>
-    </Flex>
-  );
-};
-
-export const ButtonWithIcons = () => {
-  return (
-    <Flex align="center">
-      <Button iconStart="cloud">Button</Button>
-      <Button iconEnd="chevron-right">Button</Button>
-      <Button iconStart="cloud" iconEnd="chevron-right">
-        Button
-      </Button>
-    </Flex>
-  );
-};
-
-export const ButtonFullWidth = () => {
-  return (
-    <Flex direction="column" style={{ width: '300px' }}>
-      <Button iconStart="cloud">Button</Button>
-      <Button iconEnd="chevron-right">Button</Button>
-      <Button iconStart="cloud" iconEnd="chevron-right">
-        Button
-      </Button>
-    </Flex>
-  );
-};
-
-export const ButtonDisabled = () => {
-  return <Button disabled>Button</Button>;
-};
-
-export const ButtonResponsive = () => {
-  return (
-    <Button variant={{ initial: 'primary', lg: 'secondary' }}>
-      Responsive Button
-    </Button>
-  );
-};
-
-export const ButtonPlayground = () => {
-  const variants: string[] = ['primary', 'secondary', 'tertiary'];
-
-  return (
-    <Flex direction="column">
-      {variants.map(variant => (
-        <Flex direction="column" key={variant}>
-          <Text>{variant}</Text>
-          {['small', 'medium'].map(size => (
-            <Flex align="center" key={size}>
-              <Button
-                iconStart="cloud"
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-              >
-                Button
-              </Button>
-              <Button
-                iconEnd="chevron-right"
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-              >
-                Button
-              </Button>
-              <Button
-                iconStart="cloud"
-                iconEnd="chevron-right"
-                style={{ width: '200px' }}
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-              >
-                Button
-              </Button>
-            </Flex>
-          ))}
-        </Flex>
-      ))}
-    </Flex>
-  );
+export const ButtonSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(ButtonStories);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Variants') return <stories.Variants />;
+  if (story === 'Sizes') return <stories.Sizes />;
+  if (story === 'WithIcons') return <stories.WithIcons />;
+  if (story === 'FullWidth') return <stories.FullWidth />;
+  if (story === 'Disabled') return <stories.Disabled />;
+  if (story === 'Responsive') return <stories.Responsive />;
+  if (story === 'Playground') return <stories.Playground />;
+
+  return null;
 };
diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock
index 858a1106e0..204a4bd898 100644
--- a/canon-docs/yarn.lock
+++ b/canon-docs/yarn.lock
@@ -5,12 +5,37 @@ __metadata:
   version: 6
   cacheKey: 8
 
-"@babel/runtime@npm:^7.18.6":
-  version: 7.26.0
-  resolution: "@babel/runtime@npm:7.26.0"
+"@adobe/css-tools@npm:^4.4.0":
+  version: 4.4.2
+  resolution: "@adobe/css-tools@npm:4.4.2"
+  checksum: ecc9f626fab00c0d17dc62a3427e515cb6f4413d565d7492184331604530e42e00efbd2d8f6a767b7dbfc68a8a581f270fcddf4eb6bb8cddbb52d1d1df38dc99
+  languageName: node
+  linkType: hard
+
+"@babel/code-frame@npm:^7.10.4":
+  version: 7.26.2
+  resolution: "@babel/code-frame@npm:7.26.2"
+  dependencies:
+    "@babel/helper-validator-identifier": ^7.25.9
+    js-tokens: ^4.0.0
+    picocolors: ^1.0.0
+  checksum: db13f5c42d54b76c1480916485e6900748bbcb0014a8aca87f50a091f70ff4e0d0a6db63cade75eb41fcc3d2b6ba0a7f89e343def4f96f00269b41b8ab8dd7b8
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
+  checksum: 5b85918cb1a92a7f3f508ea02699e8d2422fe17ea8e82acd445006c0ef7520fbf48e3dbcdaf7b0a1d571fc3a2715a29719e5226636cb6042e15fe6ed2a590944
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.6":
+  version: 7.26.10
+  resolution: "@babel/runtime@npm:7.26.10"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: c8e2c0504ab271b3467a261a8f119bf2603eb857a0d71e37791f4e3fae00f681365073cc79f141ddaa90c6077c60ba56448004ad5429d07ac73532be9f7cf28a
+  checksum: 22d2e0abb86e90de489ab16bb578db6fe2b63a88696db431198b24963749820c723f1982298cdbbea187f7b2b80fb4d98a514faf114ddb2fdc14a4b96277b955
   languageName: node
   linkType: hard
 
@@ -722,39 +747,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/components@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: b50923e759eea99320fdf8946056fb33614b9d993ca567207cd0d714e5fae83da485b64b0d74a18b84355396b33c28b5eea050484c40967873c540f83d314b9a
-  languageName: node
-  linkType: hard
-
-"@storybook/core@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/core@npm:8.6.4"
-  dependencies:
-    "@storybook/theming": 8.6.4
-    better-opn: ^3.0.2
-    browser-assert: ^1.2.1
-    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
-    esbuild-register: ^3.5.0
-    jsdoc-type-pratt-parser: ^4.0.0
-    process: ^0.11.10
-    recast: ^0.23.5
-    semver: ^7.6.2
-    util: ^0.12.5
-    ws: ^8.2.3
-  peerDependencies:
-    prettier: ^2 || ^3
-  peerDependenciesMeta:
-    prettier:
-      optional: true
-  checksum: 8352b0f65bd7c0462471409a7f086125f4e1a93e1777fa20268beb78109f9784cc1d75536a4f9136368db87ba3c5c11987c95835937ba4c2776f968365795d8f
-  languageName: node
-  linkType: hard
-
 "@storybook/global@npm:^5.0.0":
   version: 5.0.0
   resolution: "@storybook/global@npm:5.0.0"
@@ -762,66 +754,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/manager-api@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: 50447d3961dfab2b2f36afa76aaeb779a9b51ca66a912bc763103f18f2f71514191388b101ec83093ac9dee6ab509b955da41325f15d88cfe1c480e7d7d1f9eb
-  languageName: node
-  linkType: hard
-
-"@storybook/preview-api@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/preview-api@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: d8f642de8053686192e28f7ec748944c99c9e4d0cef7f13d96e840fd159c8bea2e3139b88a84eb16009fbda3152a61d9e075777211c10773e4d01fd103bf0e28
-  languageName: node
-  linkType: hard
-
-"@storybook/react-dom-shim@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/react-dom-shim@npm:8.6.4"
+"@storybook/react-dom-shim@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/react-dom-shim@npm:9.0.0-alpha.8"
   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.6.4
-  checksum: 0062191f312c0bf32e622904b9da7176c961cec99258c6b230c3fb6758c1cca95ac4142d4701628dc8eb922601d74c350549b78e146b5af1747edf8cb3def756
+    storybook: ^9.0.0-alpha.8
+  checksum: e235aca5a13900a580fdaa7b11ff00b7dbb389e3b2701ba12688d4d624fe83f6d1448a61c649f4f95f52d72e46fffa67be4cacbf005637110b4f3c372d821d38
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:^8.4.7":
-  version: 8.6.4
-  resolution: "@storybook/react@npm:8.6.4"
+"@storybook/react@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/react@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/components": 8.6.4
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 8.6.4
-    "@storybook/preview-api": 8.6.4
-    "@storybook/react-dom-shim": 8.6.4
-    "@storybook/theming": 8.6.4
+    "@storybook/react-dom-shim": 9.0.0-alpha.8
   peerDependencies:
-    "@storybook/test": 8.6.4
     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.6.4
-    typescript: ">= 4.2.x"
+    storybook: ^9.0.0-alpha.8
+    typescript: ">= 4.9.x"
   peerDependenciesMeta:
-    "@storybook/test":
-      optional: true
     typescript:
       optional: true
-  checksum: 4e9860c8e177d0dd496e7d6c53927daa8429b82f9c02d5b004de61244573901160a936ba37ce69810fb13e3602391e18723237a901c57e1bd19cf9f58241c30c
-  languageName: node
-  linkType: hard
-
-"@storybook/theming@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/theming@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: b7e13026c381e18e7ad2064e1528876eb01b7563ad16aababcac531ce76f5e59b985a72603f57d75465a611ea564bd46b9b1760634211faf4307f9265f06e044
+  checksum: 4ba2b0fe9cab5272856ab6e26dce732dc7baa4650539e9195c5dca0e15fccd87444ab5f580d17ccf5a98eff54621bbb733dd73c82aca2933f68ff753ff5246b3
   languageName: node
   linkType: hard
 
@@ -842,6 +800,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:10.4.0":
+  version: 10.4.0
+  resolution: "@testing-library/dom@npm:10.4.0"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.3.0
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.5.0
+    pretty-format: ^27.0.2
+  checksum: bb128b90be0c8cd78c5f5e67aa45f53de614cc048a2b50b230e736ec710805ac6c73375af354b83c74d710b3928d52b83a273a4cb89de4eb3efe49e91e706837
+  languageName: node
+  linkType: hard
+
+"@testing-library/jest-dom@npm:^6.6.3":
+  version: 6.6.3
+  resolution: "@testing-library/jest-dom@npm:6.6.3"
+  dependencies:
+    "@adobe/css-tools": ^4.4.0
+    aria-query: ^5.0.0
+    chalk: ^3.0.0
+    css.escape: ^1.5.1
+    dom-accessibility-api: ^0.6.3
+    lodash: ^4.17.21
+    redent: ^3.0.0
+  checksum: c1dc4260b05309a0084416639006cd105849acc5b102bef682a3b19bd6fce07ff6762085fc7f2599546c995a2fc66fdb1d70e50e22a634a0098524056cc9e511
+  languageName: node
+  linkType: hard
+
+"@testing-library/user-event@npm:^14.6.1":
+  version: 14.6.1
+  resolution: "@testing-library/user-event@npm:14.6.1"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 4cb8a81fea1fea83a42619e9545137b51636bb7a3182c596bb468e5664f1e4699a275c2d0fb8b6dcc3fe2684f9d87b0637ab7cb4f566051539146872c9141fcb
+  languageName: node
+  linkType: hard
+
 "@types/acorn@npm:^4.0.0":
   version: 4.0.6
   resolution: "@types/acorn@npm:4.0.6"
@@ -851,6 +849,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0
+  languageName: node
+  linkType: hard
+
 "@types/debug@npm:^4.0.0":
   version: 4.1.12
   resolution: "@types/debug@npm:4.1.12"
@@ -964,6 +969,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/uuid@npm:^9.0.1":
+  version: 9.0.8
+  resolution: "@types/uuid@npm:9.0.8"
+  checksum: b8c60b7ba8250356b5088302583d1704a4e1a13558d143c549c408bf8920535602ffc12394ede77f8a8083511b023704bc66d1345792714002bfa261b17c5275
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version: 8.19.1
   resolution: "@typescript-eslint/eslint-plugin@npm:8.19.1"
@@ -1143,6 +1155,47 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/expect@npm:3.0.9":
+  version: 3.0.9
+  resolution: "@vitest/expect@npm:3.0.9"
+  dependencies:
+    "@vitest/spy": 3.0.9
+    "@vitest/utils": 3.0.9
+    chai: ^5.2.0
+    tinyrainbow: ^2.0.0
+  checksum: 6df325d45e0ad4b6ad73a55e5328f615f92171fc4dbf3875972c08013727cfa435b9916636c7f3902a45f1874db10805d449311b70125edf1422dceb325ac982
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:3.0.9":
+  version: 3.0.9
+  resolution: "@vitest/pretty-format@npm:3.0.9"
+  dependencies:
+    tinyrainbow: ^2.0.0
+  checksum: 447b53bd962bc5978cf3e8c67f0600e38470ea63ab6ae24fb048dca79305828f37d9d854a7db1abc97ebde66a65187f87a99ca7969e43c750998c944e3ec48c6
+  languageName: node
+  linkType: hard
+
+"@vitest/spy@npm:3.0.9":
+  version: 3.0.9
+  resolution: "@vitest/spy@npm:3.0.9"
+  dependencies:
+    tinyspy: ^3.0.2
+  checksum: 1b90f40c4ac34529e7d098c745396a51e9b2f187d31d50a664ac7374db56edb3792862a35d1b8049e421705db6445761d687f9f8c5e298a9ca6cfa47d55625d7
+  languageName: node
+  linkType: hard
+
+"@vitest/utils@npm:3.0.9":
+  version: 3.0.9
+  resolution: "@vitest/utils@npm:3.0.9"
+  dependencies:
+    "@vitest/pretty-format": 3.0.9
+    loupe: ^3.1.3
+    tinyrainbow: ^2.0.0
+  checksum: d31797594598817670cc49dfcd4ded2953d707c62e5dc7807737e8108073e97499cf7ef2eb3295f1fb52446a8a85ba50aacef21126689251092bc8566bff4bb6
+  languageName: node
+  linkType: hard
+
 "acorn-jsx@npm:^5.0.0, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
@@ -1196,6 +1249,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-styles@npm:^5.0.0":
+  version: 5.2.0
+  resolution: "ansi-styles@npm:5.2.0"
+  checksum: d7f4e97ce0623aea6bc0d90dcd28881ee04cba06c570b97fd3391bd7a268eedfd9d5e2dd4fdcbdd82b8105df5faf6f24aaedc08eaf3da898e702db5948f63469
+  languageName: node
+  linkType: hard
+
 "ansi-styles@npm:^6.1.0":
   version: 6.2.1
   resolution: "ansi-styles@npm:6.2.1"
@@ -1210,7 +1270,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.3.2":
+"aria-query@npm:5.3.0":
+  version: 5.3.0
+  resolution: "aria-query@npm:5.3.0"
+  dependencies:
+    dequal: ^2.0.3
+  checksum: 305bd73c76756117b59aba121d08f413c7ff5e80fa1b98e217a3443fcddb9a232ee790e24e432b59ae7625aebcf4c47cb01c2cac872994f0b426f5bdfcd96ba9
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:^5.0.0, aria-query@npm:^5.3.2":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
   checksum: d971175c85c10df0f6d14adfe6f1292409196114ab3c62f238e208b53103686f46cc70695a4f775b73bc65f6a09b6a092fd963c4f3a5a7d690c8fc5094925717
@@ -1321,6 +1390,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"assertion-error@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "assertion-error@npm:2.0.1"
+  checksum: a0789dd882211b87116e81e2648ccb7f60340b34f19877dd020b39ebb4714e475eb943e14ba3e22201c221ef6645b7bfe10297e76b6ac95b48a9898c1211ce66
+  languageName: node
+  linkType: hard
+
 "ast-types-flow@npm:^0.0.8":
   version: 0.0.8
   resolution: "ast-types-flow@npm:0.0.8"
@@ -1420,13 +1496,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browser-assert@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "browser-assert@npm:1.2.1"
-  checksum: 8b2407cd04c1ed592cf892dec35942b7d72635829221e0788c9a16c4d2afa8b7156bc9705b1c4b32c30d88136c576fda3cbcb8f494d6f865264c706ea8798d92
-  languageName: node
-  linkType: hard
-
 "busboy@npm:1.6.0":
   version: 1.6.0
   resolution: "busboy@npm:1.6.0"
@@ -1491,7 +1560,7 @@ __metadata:
     "@mdx-js/loader": ^3.1.0
     "@mdx-js/react": ^3.1.0
     "@next/mdx": ^15.1.4
-    "@storybook/react": ^8.4.7
+    "@storybook/react": 9.0.0-alpha.8
     "@types/mdx": ^2.0.13
     "@types/node": ^20
     "@types/react": ^18.0.0
@@ -1507,7 +1576,7 @@ __metadata:
     react-dom: ^18.0.2
     react-frame-component: ^5.2.7
     shiki: ^1.26.1
-    storybook: ^8.4.7
+    storybook: 9.0.0-alpha.8
     typescript: ^5
   languageName: unknown
   linkType: soft
@@ -1519,7 +1588,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^4.0.0":
+"chai@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "chai@npm:5.2.0"
+  dependencies:
+    assertion-error: ^2.0.1
+    check-error: ^2.1.1
+    deep-eql: ^5.0.1
+    loupe: ^3.1.0
+    pathval: ^2.0.0
+  checksum: 15e4ba12d02df3620fd59b4a6e8efe43b47872ce61f1c0ca77ac1205a2a5898f3b6f1f52408fd1a708b8d07fdfb5e65b97af40bad9fd94a69ed8d4264c7a69f1
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "chalk@npm:3.0.0"
+  dependencies:
+    ansi-styles: ^4.1.0
+    supports-color: ^7.1.0
+  checksum: 8e3ddf3981c4da405ddbd7d9c8d91944ddf6e33d6837756979f7840a29272a69a5189ecae0ff84006750d6d1e92368d413335eab4db5476db6e6703a1d1e0505
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^4.0.0, chalk@npm:^4.1.0":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -1557,6 +1649,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"check-error@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "check-error@npm:2.1.1"
+  checksum: d785ed17b1d4a4796b6e75c765a9a290098cf52ff9728ce0756e8ffd4293d2e419dd30c67200aee34202463b474306913f2fcfaf1890641026d9fc6966fea27a
+  languageName: node
+  linkType: hard
+
 "client-only@npm:0.0.1":
   version: 0.0.1
   resolution: "client-only@npm:0.0.1"
@@ -1634,6 +1733,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"css.escape@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "css.escape@npm:1.5.1"
+  checksum: f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
+  languageName: node
+  linkType: hard
+
 "csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -1711,6 +1817,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deep-eql@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "deep-eql@npm:5.0.2"
+  checksum: 6aaaadb4c19cbce42e26b2bbe5bd92875f599d2602635dc97f0294bae48da79e89470aedee05f449e0ca8c65e9fd7e7872624d1933a1db02713d99c2ca8d1f24
+  languageName: node
+  linkType: hard
+
 "deep-is@npm:^0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -1747,7 +1860,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.0":
+"dequal@npm:^2.0.0, dequal@npm:^2.0.3":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
   checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
@@ -1790,6 +1903,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248
+  languageName: node
+  linkType: hard
+
+"dom-accessibility-api@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "dom-accessibility-api@npm:0.6.3"
+  checksum: c325b5144bb406df23f4affecffc117dbaec9af03daad9ee6b510c5be647b14d28ef0a4ea5ca06d696d8ab40bb777e5fed98b985976fdef9d8790178fa1d573f
+  languageName: node
+  linkType: hard
+
 "dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "dunder-proto@npm:1.0.1"
@@ -2931,6 +3058,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"indent-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "indent-string@npm:4.0.0"
+  checksum: 824cfb9929d031dabf059bebfe08cf3137365e112019086ed3dcff6a0a7b698cb80cf67ccccde0e25b9e2d7527aa6cc1fed1ac490c752162496caba3e6699612
+  languageName: node
+  linkType: hard
+
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -2941,7 +3075,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2, inherits@npm:^2.0.3":
+"inherits@npm:2":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -2983,16 +3117,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.0.4":
-  version: 1.2.0
-  resolution: "is-arguments@npm:1.2.0"
-  dependencies:
-    call-bound: ^1.0.2
-    has-tostringtag: ^1.0.2
-  checksum: aae9307fedfe2e5be14aebd0f48a9eeedf6b8c8f5a0b66257b965146d1e94abdc3f08e3dce3b1d908e1fa23c70039a88810ee1d753905758b9b6eebbab0bafeb
-  languageName: node
-  linkType: hard
-
 "is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
   version: 3.0.5
   resolution: "is-array-buffer@npm:3.0.5"
@@ -3120,7 +3244,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-generator-function@npm:^1.0.10, is-generator-function@npm:^1.0.7":
+"is-generator-function@npm:^1.0.10":
   version: 1.1.0
   resolution: "is-generator-function@npm:1.1.0"
   dependencies:
@@ -3235,7 +3359,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15, is-typed-array@npm:^1.1.3":
+"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
   version: 1.1.15
   resolution: "is-typed-array@npm:1.1.15"
   dependencies:
@@ -3320,7 +3444,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-tokens@npm:^3.0.0 || ^4.0.0":
+"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
   checksum: 8a95213a5a77deb6cbe94d86340e8d9ace2b93bc367790b260101d2f36a2eaf4e4e22d9fa9cf459b38af3a32fb4190e638024cf82ec95ef708680e405ea7cc78
@@ -3550,6 +3674,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
+  languageName: node
+  linkType: hard
+
 "longest-streak@npm:^3.0.0":
   version: 3.1.0
   resolution: "longest-streak@npm:3.1.0"
@@ -3568,6 +3699,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"loupe@npm:^3.1.0, loupe@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "loupe@npm:3.1.3"
+  checksum: 9b2530b1d5a44d2c9fc5241f97ea00296dca257173c535b4832bc31f9516e10387991feb5b3fff23df116c8fcf907ce3980f82b215dcc5d19cde17ce9b9ec3e1
+  languageName: node
+  linkType: hard
+
 "lru-cache@npm:^10.2.0":
   version: 10.4.3
   resolution: "lru-cache@npm:10.4.3"
@@ -3575,6 +3713,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
+  languageName: node
+  linkType: hard
+
 "markdown-extensions@npm:^2.0.0":
   version: 2.0.0
   resolution: "markdown-extensions@npm:2.0.0"
@@ -4086,6 +4233,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"min-indent@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "min-indent@npm:1.0.1"
+  checksum: bfc6dd03c5eaf623a4963ebd94d087f6f4bbbfd8c41329a7f09706b0cb66969c4ddd336abeb587bc44bc6f08e13bf90f0b374f9d71f9f01e04adc2cd6f083ef1
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -4453,6 +4607,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathval@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "pathval@npm:2.0.0"
+  checksum: 682b6a6289de7990909effef7dae9aa7bb6218c0426727bccf66a35b34e7bfbc65615270c5e44e3c9557a5cb44b1b9ef47fc3cb18bce6ad3ba92bcd28467ed7d
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -4467,6 +4628,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"polished@npm:^4.2.2":
+  version: 4.3.1
+  resolution: "polished@npm:4.3.1"
+  dependencies:
+    "@babel/runtime": ^7.17.8
+  checksum: a6f863c23f1d2f3f5cda3427b5885c9fb9e83b036d681e24820b143c7df40d2685bebb01c0939767120a28e1183671ae17c93db82ac30b3c20942180bb153bc7
+  languageName: node
+  linkType: hard
+
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -4492,10 +4662,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"process@npm:^0.11.10":
-  version: 0.11.10
-  resolution: "process@npm:0.11.10"
-  checksum: bfcce49814f7d172a6e6a14d5fa3ac92cc3d0c3b9feb1279774708a719e19acd673995226351a082a9ae99978254e320ccda4240ddc474ba31a76c79491ca7c3
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: ^5.0.1
+    ansi-styles: ^5.0.0
+    react-is: ^17.0.1
+  checksum: cf610cffcb793885d16f184a62162f2dd0df31642d9a18edf4ca298e909a8fe80bdbf556d5c9573992c102ce8bf948691da91bf9739bee0ffb6e79c8a8a6e088
   languageName: node
   linkType: hard
 
@@ -4561,6 +4735,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^17.0.1":
+  version: 17.0.2
+  resolution: "react-is@npm:17.0.2"
+  checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.0.2":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -4631,6 +4812,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "redent@npm:3.0.0"
+  dependencies:
+    indent-string: ^4.0.0
+    strip-indent: ^3.0.0
+  checksum: fa1ef20404a2d399235e83cc80bd55a956642e37dd197b4b612ba7327bf87fa32745aeb4a1634b2bab25467164ab4ed9c15be2c307923dd08b0fe7c52431ae6b
+  languageName: node
+  linkType: hard
+
 "reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9":
   version: 1.0.10
   resolution: "reflect.getprototypeof@npm:1.0.10"
@@ -5053,21 +5244,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^8.4.7":
-  version: 8.6.4
-  resolution: "storybook@npm:8.6.4"
+"storybook@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "storybook@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/core": 8.6.4
+    "@storybook/global": ^5.0.0
+    "@testing-library/dom": 10.4.0
+    "@testing-library/jest-dom": ^6.6.3
+    "@testing-library/user-event": ^14.6.1
+    "@types/uuid": ^9.0.1
+    "@vitest/expect": 3.0.9
+    "@vitest/spy": 3.0.9
+    better-opn: ^3.0.2
+    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
+    esbuild-register: ^3.5.0
+    jsdoc-type-pratt-parser: ^4.0.0
+    polished: ^4.2.2
+    recast: ^0.23.5
+    semver: ^7.6.2
+    uuid: ^9.0.0
+    ws: ^8.18.0
   peerDependencies:
     prettier: ^2 || ^3
   peerDependenciesMeta:
     prettier:
       optional: true
   bin:
-    getstorybook: ./bin/index.cjs
-    sb: ./bin/index.cjs
     storybook: ./bin/index.cjs
-  checksum: 96c59b5c6ac27dfb9fb85d110b0257a77264015454dd0ca7893ae9df04dbf31e523ff351ba45283f33a58ecb28fd985349aa9c1fb83ab51d0c781a4d5809fa15
+  checksum: d48c9b2b05279bc0ee8eabeb505e9b662d576fbd8902311cf6694e1c1eb3ef960e417e20f656b6bc869c14b59bedc77c89b70b50575beb2caa24fcd92d3d15b6
   languageName: node
   linkType: hard
 
@@ -5215,6 +5419,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-indent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-indent@npm:3.0.0"
+  dependencies:
+    min-indent: ^1.0.0
+  checksum: 18f045d57d9d0d90cd16f72b2313d6364fd2cb4bf85b9f593523ad431c8720011a4d5f08b6591c9d580f446e78855c5334a30fb91aa1560f5d9f95ed1b4a0530
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
@@ -5291,6 +5504,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tinyrainbow@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "tinyrainbow@npm:2.0.0"
+  checksum: 26360631d97e43955a07cfb70fe40a154ce4e2bcd14fa3d37ce8e2ed8f4fa9e5ba00783e4906bbfefe6dcabef5d3510f5bee207cb693bee4e4e7553f5454bef1
+  languageName: node
+  linkType: hard
+
+"tinyspy@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "tinyspy@npm:3.0.2"
+  checksum: 5db671b2ff5cd309de650c8c4761ca945459d7204afb1776db9a04fb4efa28a75f08517a8620c01ee32a577748802231ad92f7d5b194dc003ee7f987a2a06337
+  languageName: node
+  linkType: hard
+
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -5531,16 +5758,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:^0.12.5":
-  version: 0.12.5
-  resolution: "util@npm:0.12.5"
-  dependencies:
-    inherits: ^2.0.3
-    is-arguments: ^1.0.4
-    is-generator-function: ^1.0.7
-    is-typed-array: ^1.1.3
-    which-typed-array: ^1.1.2
-  checksum: 705e51f0de5b446f4edec10739752ac25856541e0254ea1e7e45e5b9f9b0cb105bc4bd415736a6210edc68245a7f903bf085ffb08dd7deb8a0e847f60538a38a
+"uuid@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "uuid@npm:9.0.1"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 39931f6da74e307f51c0fb463dc2462807531dc80760a9bff1e35af4316131b4fc3203d16da60ae33f07fdca5b56f3f1dd662da0c99fea9aaeab2004780cc5f4
   languageName: node
   linkType: hard
 
@@ -5617,7 +5840,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18, which-typed-array@npm:^1.1.2":
+"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18":
   version: 1.1.18
   resolution: "which-typed-array@npm:1.1.18"
   dependencies:
@@ -5678,9 +5901,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.2.3":
-  version: 8.18.0
-  resolution: "ws@npm:8.18.0"
+"ws@npm:^8.18.0":
+  version: 8.18.1
+  resolution: "ws@npm:8.18.1"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -5689,7 +5912,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 91d4d35bc99ff6df483bdf029b9ea4bfd7af1f16fc91231a96777a63d263e1eabf486e13a2353970efc534f9faa43bdbf9ee76525af22f4752cbc5ebda333975
+  checksum: 4658357185d891bc45cc2d42a84f9e192d047e8476fb5cba25b604f7d75ca87ca0dd54cd0b2cc49aeee57c79045a741cb7d0b14501953ac60c790cd105c42f23
   languageName: node
   linkType: hard
 
diff --git a/packages/canon/.storybook/manager.ts b/packages/canon/.storybook/manager.ts
deleted file mode 100644
index c88b10b392..0000000000
--- a/packages/canon/.storybook/manager.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { addons } from '@storybook/manager-api';
-import { create } from '@storybook/theming';
-
-const theme = create({
-  base: 'light',
-  brandTitle: 'Canon',
-  brandImage: 'logo.svg',
-});
-
-addons.setConfig({
-  theme,
-});
diff --git a/packages/canon/package.json b/packages/canon/package.json
index 5227e63fa5..c2c287f937 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -47,15 +47,16 @@
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
+    "@chromatic-com/storybook": "^4.0.0-0",
+    "@storybook/addon-essentials": "^9.0.0-alpha.8",
+    "@storybook/addon-interactions": "^9.0.0-alpha.8",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.6.4",
+    "@storybook/addon-themes": "^9.0.0-alpha.8",
     "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-webpack5": "^8.6.4",
-    "@storybook/test": "^8.6.4",
+    "@storybook/blocks": "^9.0.0-alpha.8",
+    "@storybook/react": "9.0.0-alpha.8",
+    "@storybook/react-webpack5": "^9.0.0-alpha.8",
+    "@storybook/test": "^8.6.7",
     "@testing-library/jest-dom": "^6.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
@@ -68,7 +69,7 @@
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.3.0",
-    "storybook": "^8.6.4"
+    "storybook": "^9.0.0-alpha.8"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
diff --git a/yarn.lock b/yarn.lock
index e5471a78c8..3d1c5c2c19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3779,16 +3779,17 @@ __metadata:
   dependencies:
     "@backstage/cli": "workspace:^"
     "@base-ui-components/react": ^1.0.0-alpha.5
+    "@chromatic-com/storybook": ^4.0.0-0
     "@remixicon/react": ^4.5.0
-    "@storybook/addon-essentials": ^8.6.4
-    "@storybook/addon-interactions": ^8.6.4
+    "@storybook/addon-essentials": ^9.0.0-alpha.8
+    "@storybook/addon-interactions": ^9.0.0-alpha.8
     "@storybook/addon-styling-webpack": ^1.0.1
-    "@storybook/addon-themes": ^8.6.4
+    "@storybook/addon-themes": ^9.0.0-alpha.8
     "@storybook/addon-webpack5-compiler-swc": ^2.1.0
-    "@storybook/blocks": ^8.6.4
-    "@storybook/react": ^8.6.4
-    "@storybook/react-webpack5": ^8.6.4
-    "@storybook/test": ^8.6.4
+    "@storybook/blocks": ^9.0.0-alpha.8
+    "@storybook/react": 9.0.0-alpha.8
+    "@storybook/react-webpack5": ^9.0.0-alpha.8
+    "@storybook/test": ^8.6.7
     "@testing-library/jest-dom": ^6.0.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
@@ -3802,7 +3803,7 @@ __metadata:
     react: ^18.0.2
     react-dom: ^18.0.2
     react-router-dom: ^6.3.0
-    storybook: ^8.6.4
+    storybook: ^9.0.0-alpha.8
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
     react: ^17.0.0 || ^18.0.0
@@ -8805,6 +8806,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@chromatic-com/storybook@npm:^4.0.0-0":
+  version: 4.0.0-next.3
+  resolution: "@chromatic-com/storybook@npm:4.0.0-next.3"
+  dependencies:
+    chromatic: ^11.27.0
+    filesize: ^10.0.12
+    jsonfile: ^6.1.0
+    react-confetti: ^6.1.0
+    strip-ansi: ^7.1.0
+  peerDependencies:
+    storybook: ^0.0.0-0 || ^9.0.0 || ^9.0.0-alpha.4
+  checksum: 5d01a6701f50afb42b89312240aca6ef81c37b9085462d4a7c7e70e94bb5cbfa3fd3e0a585453bcbb201baae88a8a8be9cbe5961ee176f5f7b7fcf13dc579c83
+  languageName: node
+  linkType: hard
+
 "@codemirror/autocomplete@npm:^6.0.0":
   version: 6.3.0
   resolution: "@codemirror/autocomplete@npm:6.3.0"
@@ -17265,131 +17281,113 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-actions@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-actions@npm:8.6.4"
-  dependencies:
-    "@storybook/global": ^5.0.0
-    "@types/uuid": ^9.0.1
-    dequal: ^2.0.2
-    polished: ^4.2.2
-    uuid: ^9.0.0
-  peerDependencies:
-    storybook: ^8.6.4
-  checksum: b08f73070ac90f2c0d404b63f3148ebe11d4683f0728fd04459df62b521422d8c17b3619f6c012a90571a2d5520ee34d35e02fd104c0298580177dd57e045312
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-backgrounds@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-backgrounds@npm:8.6.4"
+"@storybook/addon-backgrounds@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-backgrounds@npm:9.0.0-alpha.8"
   dependencies:
     "@storybook/global": ^5.0.0
     memoizerific: ^1.11.3
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 53a67d385d6241730d0d992552de58316cfa4c46f56fa5a81df8647c76356778164783b8a872e31b3624692f456186074e06407778cf4442ffc8596cdaded49e
+    storybook: ^9.0.0-alpha.8
+  checksum: 3f7527dda74c319d8f0f675136ee3691352cd3f1e0d1beea559708d60f46a17c52a53623b3fc664b8c40879a23c3a94d7326e4520a3846aafd0b3a5c7a1e85ad
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-controls@npm:8.6.4"
+"@storybook/addon-controls@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-controls@npm:9.0.0-alpha.8"
   dependencies:
     "@storybook/global": ^5.0.0
     dequal: ^2.0.2
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: a25c7f2ae7c3b4aee89ba865e5a305293d54bc4723f4e8e4f22d3c42a626d09b83a69521e728e2b3b35107a7709702801c1f5a4fe96e16871d77108282b8a8a2
+    storybook: ^9.0.0-alpha.8
+  checksum: 227dfebeff3be21cb15b06e39f7ce596472c458f77d514188c548ee8e3d19c52eb5dcec248fcfe2c5d91a5a27b48b93bec667cfa72620e8e9b1ab6065ddcee88
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-docs@npm:8.6.4"
+"@storybook/addon-docs@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-docs@npm:9.0.0-alpha.8"
   dependencies:
     "@mdx-js/react": ^3.0.0
-    "@storybook/blocks": 8.6.4
-    "@storybook/csf-plugin": 8.6.4
-    "@storybook/react-dom-shim": 8.6.4
+    "@storybook/blocks": 9.0.0-alpha.8
+    "@storybook/csf-plugin": 9.0.0-alpha.8
+    "@storybook/react-dom-shim": 9.0.0-alpha.8
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 28705136eb3117fcc46b4038a6fb8bf24207fa39b2b5043ab3dd124a3a186d02d36afdb03a456638ec652e1944679de0721361bca27caa5920b234e92c4e9149
+    storybook: ^9.0.0-alpha.8
+  checksum: 76726fb05e8bfc209645dc8e185abb625be4dd800fee3f75aba19d00e60e073cb4b1b5efa5c02df3bd751dc57dd59189ba3968ba65b8269865108d1334c23c0d
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-essentials@npm:8.6.4"
+"@storybook/addon-essentials@npm:^9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-essentials@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/addon-actions": 8.6.4
-    "@storybook/addon-backgrounds": 8.6.4
-    "@storybook/addon-controls": 8.6.4
-    "@storybook/addon-docs": 8.6.4
-    "@storybook/addon-highlight": 8.6.4
-    "@storybook/addon-measure": 8.6.4
-    "@storybook/addon-outline": 8.6.4
-    "@storybook/addon-toolbars": 8.6.4
-    "@storybook/addon-viewport": 8.6.4
+    "@storybook/addon-backgrounds": 9.0.0-alpha.8
+    "@storybook/addon-controls": 9.0.0-alpha.8
+    "@storybook/addon-docs": 9.0.0-alpha.8
+    "@storybook/addon-highlight": 9.0.0-alpha.8
+    "@storybook/addon-measure": 9.0.0-alpha.8
+    "@storybook/addon-outline": 9.0.0-alpha.8
+    "@storybook/addon-toolbars": 9.0.0-alpha.8
+    "@storybook/addon-viewport": 9.0.0-alpha.8
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 564cc7e6f4559572f12c7f015e40a3995c55c681704e4082ef80d9db0c7b06433a67473e810ea9d67a46121f3a4aca8d7851953bc7f109f54e96c069b05230e0
+    storybook: ^9.0.0-alpha.8
+  checksum: b3981fc97766c727ddd4d9edcaedb202a9aef3089129660e1f1573a8eab6db44002d48d5a0cc98f7cb24c9ebec9f28ef2fcfe59820f05f0a476d6c5da8c1a396
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-highlight@npm:8.6.4"
+"@storybook/addon-highlight@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-highlight@npm:9.0.0-alpha.8"
   dependencies:
     "@storybook/global": ^5.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: e080b543bd3fbe0e8d6e916f2abd562b7136371dff64e96d196532dca4958016b7890c6dcd48545f11c2ac31aa0d3a713b98d6fd2cde2a1f94b1ebaf7031095d
+    storybook: ^9.0.0-alpha.8
+  checksum: d3b98b333a00d53de2d5e778792d633eb6cbdb37a940b138f5c5c6990ad5f10071372278e1f3ce06025b3d96c117a8b19ec979ff540c8fa5595377a6cdebe494
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-interactions@npm:8.6.4"
+"@storybook/addon-interactions@npm:^9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-interactions@npm:9.0.0-alpha.8"
   dependencies:
     "@storybook/global": ^5.0.0
-    "@storybook/instrumenter": 8.6.4
-    "@storybook/test": 8.6.4
     polished: ^4.2.2
     ts-dedent: ^2.2.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 6abfd78b17aef00708eb6221d3fdfc45fb738e1fd206a5c08c3909476abe6f042a507b6226ff99708538196294f37aea1d743ca7c33ea270ca0456c0f332ab55
+    storybook: ^9.0.0-alpha.8
+  checksum: 16bed44a424971d8ea65de43d8b5eda7f28800b32e2a3b18ac73ac17ef1145ab1c96c2686f4f9172bfcb0776c05593caa02dee9fd31b3ebfbb1119b4f6510fd3
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-measure@npm:8.6.4"
+"@storybook/addon-measure@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-measure@npm:9.0.0-alpha.8"
   dependencies:
     "@storybook/global": ^5.0.0
     tiny-invariant: ^1.3.1
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: b020d052c87aab591b4b7e31dd60764af9f70140ad4d529d468cdf0c8eb45d02ad7ec2bc01a83d88a1547cf567da8db5e4ba0b4c7294e968df2bace3f07f4fd7
+    storybook: ^9.0.0-alpha.8
+  checksum: b30cc38f8ecc3664300cec8898446edb070250f1d7e4b42ab8bfba2d6b3245e58c7ed9c9abefdf07ff9d3eb42fd59dfafaa50f3e5d4f28b6e400461c0fb541ef
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-outline@npm:8.6.4"
+"@storybook/addon-outline@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-outline@npm:9.0.0-alpha.8"
   dependencies:
     "@storybook/global": ^5.0.0
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: d705c2dda8fc4b9af2ecb8217a0463f0f8213f836150627f67e4702d449071e5982580617ff75ae8c48960ca27e957fe3700c17cd854e05d326ceeaf622202c2
+    storybook: ^9.0.0-alpha.8
+  checksum: d66347d5ca3f786a07a52f96f2479ce768b2721fadcc19c24a1e6de5fad629866fe06f206a9240a305851ab638feb5d189024920a676fe41ef6651d4919e616e
   languageName: node
   linkType: hard
 
@@ -17404,34 +17402,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-themes@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-themes@npm:8.6.4"
+"@storybook/addon-themes@npm:^9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-themes@npm:9.0.0-alpha.8"
   dependencies:
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 11ae08e570df4d94ed452c0be6b15773d51c0a8003c6a238156262fafbb8e094fb5c3d20c11bceaae68461ba12fe305732e4d3ea53bf16c8e115ec2ef6fd1f00
+    storybook: ^9.0.0-alpha.8
+  checksum: 66de97b77be87d4791af0993e51660aa5a3e4536d90a56039551725d7eec16bc5a920cd955edac28d02502bf6f97c228ef5004884523d32e471a01cdffba83b7
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-toolbars@npm:8.6.4"
+"@storybook/addon-toolbars@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-toolbars@npm:9.0.0-alpha.8"
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: c15ef11c50ac067e5b226dba30db956405d94b5ff56d67279697bcdcc63367ef0ab523f091b8755f8b8ab5c1ac6e55c3ded9cef6f5b917261ea9a232bcf9a8dc
+    storybook: ^9.0.0-alpha.8
+  checksum: 5a06fe915e90cb75a11f6b04035e7b7ee58442ed78647abe08fd66330afd705f5c645f9c1c1850eeb479f2ac70440d4c112e0171ff11cb8c9eec09f0fd1a178b
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/addon-viewport@npm:8.6.4"
+"@storybook/addon-viewport@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/addon-viewport@npm:9.0.0-alpha.8"
   dependencies:
     memoizerific: ^1.11.3
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 746cd771f371b825da4c5b974602a1c14287212c19ddff9f593e77e9867a3efe76ccc9ee3e503efdcf91949bf3a03979c8f37aa2fe62eb888a3eb11dd208def2
+    storybook: ^9.0.0-alpha.8
+  checksum: 5b3070794bed9de04937a5a4315ce375894866e2e42d3cc19025d76087abb2c629a83916b7981731c4e0f34e6f310da91f7df20df970dfd88593fd1e23c8e894
   languageName: node
   linkType: hard
 
@@ -17445,30 +17443,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:8.6.4, @storybook/blocks@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/blocks@npm:8.6.4"
+"@storybook/blocks@npm:9.0.0-alpha.8, @storybook/blocks@npm:^9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/blocks@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/icons": ^1.2.12
+    "@storybook/icons": ^1.4.0
     ts-dedent: ^2.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    storybook: ^8.6.4
+    storybook: ^9.0.0-alpha.8
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: fb891491f99fa63c02c90e00d166c9299cf93512d2d6036a932a1c243cd568f7ca45af961b89a19ba1c1c51c4ad76d0de8d687249f1dcb8b3411fbec2b7cf238
+  checksum: 0802d6793125081f7b95ccfa7a56b56f2267e1b1984bafeec9192fbcf5ad81cb14a3f8e06dc36c680f4ad07d90f85335f4f54076bb52836f6d6cc778580a1fb9
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/builder-webpack5@npm:8.6.4"
+"@storybook/builder-webpack5@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/builder-webpack5@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/core-webpack": 8.6.4
+    "@storybook/core-webpack": 9.0.0-alpha.8
     "@types/semver": ^7.3.4
     browser-assert: ^1.2.1
     case-sensitive-paths-webpack-plugin: ^2.4.0
@@ -17493,66 +17491,33 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.6.0
   peerDependencies:
-    storybook: ^8.6.4
+    storybook: ^9.0.0-alpha.8
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 1de3fe0c3e6143aeb31c3d1952fad56cb896e00d6fbe1652ac78e230b5787c079c9b977c481f224b31e8ad6f08e0f4a6b65ec5262c87fe682e916d5068c671ff
+  checksum: 0d329f2160282bccfc58a679c26e14b141b89e48d3a0ef53bccf7df760f6f6df952e1e85ced2e17ea331873efa6ffe9bec939df0057168793e37358eff27d32c
   languageName: node
   linkType: hard
 
-"@storybook/components@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/components@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: b50923e759eea99320fdf8946056fb33614b9d993ca567207cd0d714e5fae83da485b64b0d74a18b84355396b33c28b5eea050484c40967873c540f83d314b9a
-  languageName: node
-  linkType: hard
-
-"@storybook/core-webpack@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/core-webpack@npm:8.6.4"
+"@storybook/core-webpack@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/core-webpack@npm:9.0.0-alpha.8"
   dependencies:
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 48d39eb184662b0c1e6e5a8acfba2057b35ea9151874dddc406322811a65d9f58b7cc454a06b913b239f7215cf62e6d8939994a78f9fa38d6e9744e9232758f1
+    storybook: ^9.0.0-alpha.8
+  checksum: 4b037b4bc9f3a7f97e29c8275542a08255c42ff68d4f0d6a7701980965ce77e6a33b62e59af88da1e4029475e42ae7a7a0ea20850621ae48fdc8c96213a6e04d
   languageName: node
   linkType: hard
 
-"@storybook/core@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/core@npm:8.6.4"
-  dependencies:
-    "@storybook/theming": 8.6.4
-    better-opn: ^3.0.2
-    browser-assert: ^1.2.1
-    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
-    esbuild-register: ^3.5.0
-    jsdoc-type-pratt-parser: ^4.0.0
-    process: ^0.11.10
-    recast: ^0.23.5
-    semver: ^7.6.2
-    util: ^0.12.5
-    ws: ^8.2.3
-  peerDependencies:
-    prettier: ^2 || ^3
-  peerDependenciesMeta:
-    prettier:
-      optional: true
-  checksum: 8352b0f65bd7c0462471409a7f086125f4e1a93e1777fa20268beb78109f9784cc1d75536a4f9136368db87ba3c5c11987c95835937ba4c2776f968365795d8f
-  languageName: node
-  linkType: hard
-
-"@storybook/csf-plugin@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/csf-plugin@npm:8.6.4"
+"@storybook/csf-plugin@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/csf-plugin@npm:9.0.0-alpha.8"
   dependencies:
     unplugin: ^1.3.1
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: f1750183ad0c83438803da83d705a0e73819ad7e0cfd010182cc504d8a37ab2f500df4c6ea61ec82b464b13e992a2a4cf6756aabb2a66e12e8c2ee3f22553929
+    storybook: ^9.0.0-alpha.8
+  checksum: f25a0c995c9295cefc8177b43d26b8312f50478bcc431fae5b532d96ffb2ddf60d9f806cea758fdee5424b767c97f1bfdc7ffb69aca1b05a7eedf224e3970e76
   languageName: node
   linkType: hard
 
@@ -17572,34 +17537,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/icons@npm:^1.2.12":
-  version: 1.2.12
-  resolution: "@storybook/icons@npm:1.2.12"
+"@storybook/icons@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@storybook/icons@npm:1.4.0"
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: a4c87cbfadfa1369680c4acc9d5ef90b9ff23e2ad603b6c0aba0dafe89780e5643c567160eb0544fe33f3b9f157adda2621ae45b4036ac001139a34926e00102
+    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
+  checksum: a1e41fa9539629cb22a985dac695ac396afc5eb6ded7ce81497499a737ebf7556521acc569dbc0454e0b231ae50e8a5afbeee246dfbf8dc06a16a9cc1caa5bc8
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/instrumenter@npm:8.6.4"
+"@storybook/instrumenter@npm:8.6.7":
+  version: 8.6.7
+  resolution: "@storybook/instrumenter@npm:8.6.7"
   dependencies:
     "@storybook/global": ^5.0.0
     "@vitest/utils": ^2.1.1
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: acfc58fd5c29ec78a00498441c97d4528e8f915956c67600c75e7a30d240fb86551e9ce0dad8c0f83c78a828417a64d8aff38db754b87b854c70507d8d3638d0
-  languageName: node
-  linkType: hard
-
-"@storybook/manager-api@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/manager-api@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: 50447d3961dfab2b2f36afa76aaeb779a9b51ca66a912bc763103f18f2f71514191388b101ec83093ac9dee6ab509b955da41325f15d88cfe1c480e7d7d1f9eb
+    storybook: ^8.6.7
+  checksum: 8b5bbdd73637233ddebf6d3f14d3904c6f122f29f2efe4a0172a1f03e066a88a3453ae3eef140b227eb626ee959c0c3522f62944407f4530e24e6a6ac804598b
   languageName: node
   linkType: hard
 
@@ -17612,12 +17568,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preset-react-webpack@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/preset-react-webpack@npm:8.6.4"
+"@storybook/preset-react-webpack@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/preset-react-webpack@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/core-webpack": 8.6.4
-    "@storybook/react": 8.6.4
+    "@storybook/core-webpack": 9.0.0-alpha.8
+    "@storybook/react": 9.0.0-alpha.8
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
     "@types/semver": ^7.3.4
     find-up: ^5.0.0
@@ -17630,20 +17586,11 @@ __metadata:
   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.6.4
+    storybook: ^9.0.0-alpha.8
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 9327cda765833877e77305767cfd7e90056d22c551593fc4a99557936bfd41972ad0702abf3e53f2112f020fcc850595176e226b595c87795ff9f4e5b2cf2fa0
-  languageName: node
-  linkType: hard
-
-"@storybook/preview-api@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/preview-api@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: d8f642de8053686192e28f7ec748944c99c9e4d0cef7f13d96e840fd159c8bea2e3139b88a84eb16009fbda3152a61d9e075777211c10773e4d01fd103bf0e28
+  checksum: 1a2436e9e295967ddd475a21d2f806590a5526189a1f781ccdfa89453a5ff8d4dbe6b0c0e0f2d5c08a13a2c0cce5376f8ddfe1c07a84c5021b5233c45c699596
   languageName: node
   linkType: hard
 
@@ -17665,84 +17612,68 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/react-dom-shim@npm:8.6.4"
+"@storybook/react-dom-shim@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/react-dom-shim@npm:9.0.0-alpha.8"
   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.6.4
-  checksum: 0062191f312c0bf32e622904b9da7176c961cec99258c6b230c3fb6758c1cca95ac4142d4701628dc8eb922601d74c350549b78e146b5af1747edf8cb3def756
+    storybook: ^9.0.0-alpha.8
+  checksum: e235aca5a13900a580fdaa7b11ff00b7dbb389e3b2701ba12688d4d624fe83f6d1448a61c649f4f95f52d72e46fffa67be4cacbf005637110b4f3c372d821d38
   languageName: node
   linkType: hard
 
-"@storybook/react-webpack5@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/react-webpack5@npm:8.6.4"
+"@storybook/react-webpack5@npm:^9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/react-webpack5@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/builder-webpack5": 8.6.4
-    "@storybook/preset-react-webpack": 8.6.4
-    "@storybook/react": 8.6.4
+    "@storybook/builder-webpack5": 9.0.0-alpha.8
+    "@storybook/preset-react-webpack": 9.0.0-alpha.8
+    "@storybook/react": 9.0.0-alpha.8
   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.6.4
-    typescript: ">= 4.2.x"
+    storybook: ^9.0.0-alpha.8
+    typescript: ">= 4.9.x"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: e30788afe3e5de10b9f5e061e4b180dadc6fcb607c6ef330f5dc0252249eef4ded5c809e2bb4491edd865bb3528f4ae9044b29e9a40fe8f5278fceaac8fbea8d
+  checksum: 25f8c99159e502ab0c5fae0ce6942aac9650e5aea4287adcb2dc7801add34b31db8f9a2079d3762fa0d3277616e60cf2c187b01a1440efa30ea1736b7c4b3281
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:8.6.4, @storybook/react@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/react@npm:8.6.4"
+"@storybook/react@npm:9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "@storybook/react@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/components": 8.6.4
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 8.6.4
-    "@storybook/preview-api": 8.6.4
-    "@storybook/react-dom-shim": 8.6.4
-    "@storybook/theming": 8.6.4
+    "@storybook/react-dom-shim": 9.0.0-alpha.8
   peerDependencies:
-    "@storybook/test": 8.6.4
     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.6.4
-    typescript: ">= 4.2.x"
+    storybook: ^9.0.0-alpha.8
+    typescript: ">= 4.9.x"
   peerDependenciesMeta:
-    "@storybook/test":
-      optional: true
     typescript:
       optional: true
-  checksum: 4e9860c8e177d0dd496e7d6c53927daa8429b82f9c02d5b004de61244573901160a936ba37ce69810fb13e3602391e18723237a901c57e1bd19cf9f58241c30c
+  checksum: 4ba2b0fe9cab5272856ab6e26dce732dc7baa4650539e9195c5dca0e15fccd87444ab5f580d17ccf5a98eff54621bbb733dd73c82aca2933f68ff753ff5246b3
   languageName: node
   linkType: hard
 
-"@storybook/test@npm:8.6.4, @storybook/test@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/test@npm:8.6.4"
+"@storybook/test@npm:^8.6.7":
+  version: 8.6.7
+  resolution: "@storybook/test@npm:8.6.7"
   dependencies:
     "@storybook/global": ^5.0.0
-    "@storybook/instrumenter": 8.6.4
+    "@storybook/instrumenter": 8.6.7
     "@testing-library/dom": 10.4.0
     "@testing-library/jest-dom": 6.5.0
     "@testing-library/user-event": 14.5.2
     "@vitest/expect": 2.0.5
     "@vitest/spy": 2.0.5
   peerDependencies:
-    storybook: ^8.6.4
-  checksum: 2c16f1cc8e0f6e57f5972a664839885467c7a8b01cf807b32ea7cdd3508354cd408603f05b3f6d1c118e4560f4224102df6dfc0242deb0d2ea670895e8cdcc81
-  languageName: node
-  linkType: hard
-
-"@storybook/theming@npm:8.6.4":
-  version: 8.6.4
-  resolution: "@storybook/theming@npm:8.6.4"
-  peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: b7e13026c381e18e7ad2064e1528876eb01b7563ad16aababcac531ce76f5e59b985a72603f57d75465a611ea564bd46b9b1760634211faf4307f9265f06e044
+    storybook: ^8.6.7
+  checksum: d269423580cbcc61de74a3940504f00bb580b389b04432aa6a0a7e8fed54536782ef254e8edcf6bac3ce98d35e439fdfd86316cf53f3435396f12cbc2e060541
   languageName: node
   linkType: hard
 
@@ -18700,7 +18631,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^6.0.0":
+"@testing-library/jest-dom@npm:^6.0.0, @testing-library/jest-dom@npm:^6.6.3":
   version: 6.6.3
   resolution: "@testing-library/jest-dom@npm:6.6.3"
   dependencies:
@@ -18757,7 +18688,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:14.5.2, @testing-library/user-event@npm:^14.0.0":
+"@testing-library/user-event@npm:14.5.2":
   version: 14.5.2
   resolution: "@testing-library/user-event@npm:14.5.2"
   peerDependencies:
@@ -18766,6 +18697,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^14.0.0, @testing-library/user-event@npm:^14.6.1":
+  version: 14.6.1
+  resolution: "@testing-library/user-event@npm:14.6.1"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 4cb8a81fea1fea83a42619e9545137b51636bb7a3182c596bb468e5664f1e4699a275c2d0fb8b6dcc3fe2684f9d87b0637ab7cb4f566051539146872c9141fcb
+  languageName: node
+  linkType: hard
+
 "@tokenizer/token@npm:^0.3.0":
   version: 0.3.0
   resolution: "@tokenizer/token@npm:0.3.0"
@@ -21229,15 +21169,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:>1.6.0":
-  version: 2.1.3
-  resolution: "@vitest/expect@npm:2.1.3"
+"@vitest/expect@npm:3.0.9, @vitest/expect@npm:>1.6.0":
+  version: 3.0.9
+  resolution: "@vitest/expect@npm:3.0.9"
   dependencies:
-    "@vitest/spy": 2.1.3
-    "@vitest/utils": 2.1.3
-    chai: ^5.1.1
-    tinyrainbow: ^1.2.0
-  checksum: c0651cb19d50733169bbc0477ea84d063272200de73bcaf0b13436000c1c5b334589d9dbe2d4245619b3c283e9b477ae24f49117a40eb6eb83adc79f18fe2f63
+    "@vitest/spy": 3.0.9
+    "@vitest/utils": 3.0.9
+    chai: ^5.2.0
+    tinyrainbow: ^2.0.0
+  checksum: 6df325d45e0ad4b6ad73a55e5328f615f92171fc4dbf3875972c08013727cfa435b9916636c7f3902a45f1874db10805d449311b70125edf1422dceb325ac982
   languageName: node
   linkType: hard
 
@@ -21250,21 +21190,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:2.1.3":
-  version: 2.1.3
-  resolution: "@vitest/pretty-format@npm:2.1.3"
+"@vitest/pretty-format@npm:2.1.9":
+  version: 2.1.9
+  resolution: "@vitest/pretty-format@npm:2.1.9"
   dependencies:
     tinyrainbow: ^1.2.0
-  checksum: ff4aa144a49c0ee579bfae940745b70a0ca3c504f52c23f1e8f5c0642824785232f844040d31b48eea71b5a80519809810359a75d29186ab40341174c50a4a0d
+  checksum: 33f7ff0a9d356ddd6534390a0aea260dc04a3022a94901c87d141bacf71d2b3fff2e3bf08a55dd424c5355fd3b41656cb7871c76372fef45ffac1ea89d0dc508
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:2.1.6":
-  version: 2.1.6
-  resolution: "@vitest/pretty-format@npm:2.1.6"
+"@vitest/pretty-format@npm:3.0.9":
+  version: 3.0.9
+  resolution: "@vitest/pretty-format@npm:3.0.9"
   dependencies:
-    tinyrainbow: ^1.2.0
-  checksum: 4cab9152ac97fa190db85bbe7e1ae8f1b5d2312fa3ccf7e813119933b2aaf4c763c6156a6d91cb186d3ed4be81f5bb70da2c731fde2d12457fe0871087d2be74
+    tinyrainbow: ^2.0.0
+  checksum: 447b53bd962bc5978cf3e8c67f0600e38470ea63ab6ae24fb048dca79305828f37d9d854a7db1abc97ebde66a65187f87a99ca7969e43c750998c944e3ec48c6
   languageName: node
   linkType: hard
 
@@ -21277,12 +21217,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:2.1.3":
-  version: 2.1.3
-  resolution: "@vitest/spy@npm:2.1.3"
+"@vitest/spy@npm:3.0.9":
+  version: 3.0.9
+  resolution: "@vitest/spy@npm:3.0.9"
   dependencies:
-    tinyspy: ^3.0.0
-  checksum: b04aad8e458087202b7a16d332365a142be055db8c4653d916ebb8d47eacf23c3edef23b3918490eed9f8cb69da240d72844c3570f38521fbe7e0647e01d0271
+    tinyspy: ^3.0.2
+  checksum: 1b90f40c4ac34529e7d098c745396a51e9b2f187d31d50a664ac7374db56edb3792862a35d1b8049e421705db6445761d687f9f8c5e298a9ca6cfa47d55625d7
   languageName: node
   linkType: hard
 
@@ -21298,25 +21238,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:2.1.3":
-  version: 2.1.3
-  resolution: "@vitest/utils@npm:2.1.3"
+"@vitest/utils@npm:3.0.9":
+  version: 3.0.9
+  resolution: "@vitest/utils@npm:3.0.9"
   dependencies:
-    "@vitest/pretty-format": 2.1.3
-    loupe: ^3.1.1
-    tinyrainbow: ^1.2.0
-  checksum: 0c1e262600bc329fab43bb19d575326a6d38175c2bdc345bc5326b81cf34303f22a1b67a0197dc6a935c3019e2f21c4da52a49c609967bea9cb4790a44a347ce
+    "@vitest/pretty-format": 3.0.9
+    loupe: ^3.1.3
+    tinyrainbow: ^2.0.0
+  checksum: d31797594598817670cc49dfcd4ded2953d707c62e5dc7807737e8108073e97499cf7ef2eb3295f1fb52446a8a85ba50aacef21126689251092bc8566bff4bb6
   languageName: node
   linkType: hard
 
 "@vitest/utils@npm:^2.1.1":
-  version: 2.1.6
-  resolution: "@vitest/utils@npm:2.1.6"
+  version: 2.1.9
+  resolution: "@vitest/utils@npm:2.1.9"
   dependencies:
-    "@vitest/pretty-format": 2.1.6
+    "@vitest/pretty-format": 2.1.9
     loupe: ^3.1.2
     tinyrainbow: ^1.2.0
-  checksum: 8b9c994eccb724d76128e875e8438d519bfae0126e7431e8682e7f07d9faeff929db1afa2742b188883e42508d4cdcb2326f9ae27c1b53b5f746d283a9e75462
+  checksum: b24fb9c6765801f2e0578ad5c32fadf9541a833301eaed2877a427096cf05214244b361f94eda80be2b9c841f58ae3c67d37dedc5a902b2cb44041979bae4d8f
   languageName: node
   linkType: hard
 
@@ -24380,16 +24320,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chai@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "chai@npm:5.1.1"
+"chai@npm:^5.1.1, chai@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "chai@npm:5.2.0"
   dependencies:
     assertion-error: ^2.0.1
     check-error: ^2.1.1
     deep-eql: ^5.0.1
     loupe: ^3.1.0
     pathval: ^2.0.0
-  checksum: 1e0a5e1b5febdfa8ceb97b9aff608286861ecb86533863119b2f39f07c08fb59f3c1791ab554947f009b9d71d509b9e4e734fb12133cb81f231c2c2ee7c1e738
+  checksum: 15e4ba12d02df3620fd59b4a6e8efe43b47872ce61f1c0ca77ac1205a2a5898f3b6f1f52408fd1a708b8d07fdfb5e65b97af40bad9fd94a69ed8d4264c7a69f1
   languageName: node
   linkType: hard
 
@@ -24548,6 +24488,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chromatic@npm:^11.27.0":
+  version: 11.27.0
+  resolution: "chromatic@npm:11.27.0"
+  peerDependencies:
+    "@chromatic-com/cypress": ^0.*.* || ^1.0.0
+    "@chromatic-com/playwright": ^0.*.* || ^1.0.0
+  peerDependenciesMeta:
+    "@chromatic-com/cypress":
+      optional: true
+    "@chromatic-com/playwright":
+      optional: true
+  bin:
+    chroma: dist/bin.js
+    chromatic: dist/bin.js
+    chromatic-cli: dist/bin.js
+  checksum: aaa024eb06e79072ee9c7d491818be052e7b6f0e20fc79323780ea2ccc2ce01f6157b19755d0b4b415a723d0d00cf610274dffc201c1041d2ca54ac98e240880
+  languageName: node
+  linkType: hard
+
 "chrome-trace-event@npm:^1.0.2":
   version: 1.0.2
   resolution: "chrome-trace-event@npm:1.0.2"
@@ -29292,6 +29251,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"filesize@npm:^10.0.12":
+  version: 10.1.6
+  resolution: "filesize@npm:10.1.6"
+  checksum: a797a9d41c8f27a9ae334d23f99fc5d903eac5d03c82190dc163901205435b56626fe1260c779ba3e87a2a34d426f19ff264c3f7d956e00f2d3ac69760b52e33
+  languageName: node
+  linkType: hard
+
 "filesize@npm:^8.0.6":
   version: 8.0.6
   resolution: "filesize@npm:8.0.6"
@@ -33917,7 +33883,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^6.0.1":
+"jsonfile@npm:^6.0.1, jsonfile@npm:^6.1.0":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
   dependencies:
@@ -35172,10 +35138,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loupe@npm:^3.1.0, loupe@npm:^3.1.1, loupe@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "loupe@npm:3.1.2"
-  checksum: 4a75bbe8877a1ced3603e08b1095cd6f4c987c50fe63719fdc3009029560f91e07a915e7f6eff1322bb62bfb2a2beeef06b13ccb3c12f81bda9f3674434dcab9
+"loupe@npm:^3.1.0, loupe@npm:^3.1.1, loupe@npm:^3.1.2, loupe@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "loupe@npm:3.1.3"
+  checksum: 9b2530b1d5a44d2c9fc5241f97ea00296dca257173c535b4832bc31f9516e10387991feb5b3fff23df116c8fcf907ce3980f82b215dcc5d19cde17ce9b9ec3e1
   languageName: node
   linkType: hard
 
@@ -40637,6 +40603,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-confetti@npm:^6.1.0":
+  version: 6.4.0
+  resolution: "react-confetti@npm:6.4.0"
+  dependencies:
+    tween-functions: ^1.2.0
+  peerDependencies:
+    react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
+  checksum: 70850ccbf970d961f415768f2ac81a7b4a9afad83997f137cffa04fc18be112ca2aef94f377b3353ca6bc7800290d812c8b9f9601b557980e6dd9c2a49eb5871
+  languageName: node
+  linkType: hard
+
 "react-copy-to-clipboard@npm:5.1.0, react-copy-to-clipboard@npm:^5.0.4":
   version: 5.1.0
   resolution: "react-copy-to-clipboard@npm:5.1.0"
@@ -43795,21 +43772,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^8.6.4":
-  version: 8.6.4
-  resolution: "storybook@npm:8.6.4"
+"storybook@npm:^9.0.0-alpha.8":
+  version: 9.0.0-alpha.8
+  resolution: "storybook@npm:9.0.0-alpha.8"
   dependencies:
-    "@storybook/core": 8.6.4
+    "@storybook/global": ^5.0.0
+    "@testing-library/dom": 10.4.0
+    "@testing-library/jest-dom": ^6.6.3
+    "@testing-library/user-event": ^14.6.1
+    "@types/uuid": ^9.0.1
+    "@vitest/expect": 3.0.9
+    "@vitest/spy": 3.0.9
+    better-opn: ^3.0.2
+    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
+    esbuild-register: ^3.5.0
+    jsdoc-type-pratt-parser: ^4.0.0
+    polished: ^4.2.2
+    recast: ^0.23.5
+    semver: ^7.6.2
+    uuid: ^9.0.0
+    ws: ^8.18.0
   peerDependencies:
     prettier: ^2 || ^3
   peerDependenciesMeta:
     prettier:
       optional: true
   bin:
-    getstorybook: ./bin/index.cjs
-    sb: ./bin/index.cjs
     storybook: ./bin/index.cjs
-  checksum: 96c59b5c6ac27dfb9fb85d110b0257a77264015454dd0ca7893ae9df04dbf31e523ff351ba45283f33a58ecb28fd985349aa9c1fb83ab51d0c781a4d5809fa15
+  checksum: d48c9b2b05279bc0ee8eabeb505e9b662d576fbd8902311cf6694e1c1eb3ef960e417e20f656b6bc869c14b59bedc77c89b70b50575beb2caa24fcd92d3d15b6
   languageName: node
   linkType: hard
 
@@ -45006,7 +44996,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyspy@npm:^3.0.0":
+"tinyrainbow@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "tinyrainbow@npm:2.0.0"
+  checksum: 26360631d97e43955a07cfb70fe40a154ce4e2bcd14fa3d37ce8e2ed8f4fa9e5ba00783e4906bbfefe6dcabef5d3510f5bee207cb693bee4e4e7553f5454bef1
+  languageName: node
+  linkType: hard
+
+"tinyspy@npm:^3.0.0, tinyspy@npm:^3.0.2":
   version: 3.0.2
   resolution: "tinyspy@npm:3.0.2"
   checksum: 5db671b2ff5cd309de650c8c4761ca945459d7204afb1776db9a04fb4efa28a75f08517a8620c01ee32a577748802231ad92f7d5b194dc003ee7f987a2a06337
@@ -45464,6 +45461,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tween-functions@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "tween-functions@npm:1.2.0"
+  checksum: 880708d680eff5c347ddcb9f922ad121703a91c78ce308ed309073e73a794b633eb0b80589a839365803f150515ad34c9646809ae8a0e90f09e62686eefb1ab6
+  languageName: node
+  linkType: hard
+
 "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0":
   version: 0.14.5
   resolution: "tweetnacl@npm:0.14.5"
@@ -47325,7 +47329,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:*, ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.16.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.2.3, ws@npm:^8.8.0":
+"ws@npm:*, ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.16.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.8.0":
   version: 8.18.1
   resolution: "ws@npm:8.18.1"
   peerDependencies:

From e38856727b3ec928eba62c313a531c8c4f85d221 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 23 Mar 2025 09:25:45 +0000
Subject: [PATCH 2/8] Upgrade Storybook

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/package.json |  21 +-
 yarn.lock                   | 475 ++++++++++++++++++------------------
 2 files changed, 253 insertions(+), 243 deletions(-)

diff --git a/packages/canon/package.json b/packages/canon/package.json
index c2c287f937..35b55637fe 100644
--- a/packages/canon/package.json
+++ b/packages/canon/package.json
@@ -47,21 +47,20 @@
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
-    "@chromatic-com/storybook": "^4.0.0-0",
-    "@storybook/addon-essentials": "^9.0.0-alpha.8",
-    "@storybook/addon-interactions": "^9.0.0-alpha.8",
+    "@storybook/addon-essentials": "^8.6.8",
+    "@storybook/addon-interactions": "^8.6.8",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^9.0.0-alpha.8",
-    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
-    "@storybook/blocks": "^9.0.0-alpha.8",
-    "@storybook/react": "9.0.0-alpha.8",
-    "@storybook/react-webpack5": "^9.0.0-alpha.8",
-    "@storybook/test": "^8.6.7",
+    "@storybook/addon-themes": "^8.6.8",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.8",
+    "@storybook/react": "^8.6.8",
+    "@storybook/react-webpack5": "^8.6.8",
+    "@storybook/test": "^8.6.8",
     "@testing-library/jest-dom": "^6.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "chalk": "^5.4.1",
-    "eslint-plugin-storybook": "^0.11.4",
+    "eslint-plugin-storybook": "^0.11.6",
     "glob": "^11.0.1",
     "globals": "^15.11.0",
     "lightningcss": "^1.29.1",
@@ -69,7 +68,7 @@
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.3.0",
-    "storybook": "^9.0.0-alpha.8"
+    "storybook": "^8.6.8"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",
diff --git a/yarn.lock b/yarn.lock
index 3d1c5c2c19..ea0ddbfe96 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3779,23 +3779,22 @@ __metadata:
   dependencies:
     "@backstage/cli": "workspace:^"
     "@base-ui-components/react": ^1.0.0-alpha.5
-    "@chromatic-com/storybook": ^4.0.0-0
     "@remixicon/react": ^4.5.0
-    "@storybook/addon-essentials": ^9.0.0-alpha.8
-    "@storybook/addon-interactions": ^9.0.0-alpha.8
+    "@storybook/addon-essentials": ^8.6.8
+    "@storybook/addon-interactions": ^8.6.8
     "@storybook/addon-styling-webpack": ^1.0.1
-    "@storybook/addon-themes": ^9.0.0-alpha.8
-    "@storybook/addon-webpack5-compiler-swc": ^2.1.0
-    "@storybook/blocks": ^9.0.0-alpha.8
-    "@storybook/react": 9.0.0-alpha.8
-    "@storybook/react-webpack5": ^9.0.0-alpha.8
-    "@storybook/test": ^8.6.7
+    "@storybook/addon-themes": ^8.6.8
+    "@storybook/addon-webpack5-compiler-swc": ^3.0.0
+    "@storybook/blocks": ^8.6.8
+    "@storybook/react": ^8.6.8
+    "@storybook/react-webpack5": ^8.6.8
+    "@storybook/test": ^8.6.8
     "@testing-library/jest-dom": ^6.0.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     chalk: ^5.4.1
     clsx: ^2.1.1
-    eslint-plugin-storybook: ^0.11.4
+    eslint-plugin-storybook: ^0.11.6
     glob: ^11.0.1
     globals: ^15.11.0
     lightningcss: ^1.29.1
@@ -3803,7 +3802,7 @@ __metadata:
     react: ^18.0.2
     react-dom: ^18.0.2
     react-router-dom: ^6.3.0
-    storybook: ^9.0.0-alpha.8
+    storybook: ^8.6.8
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0
     react: ^17.0.0 || ^18.0.0
@@ -8806,21 +8805,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^4.0.0-0":
-  version: 4.0.0-next.3
-  resolution: "@chromatic-com/storybook@npm:4.0.0-next.3"
-  dependencies:
-    chromatic: ^11.27.0
-    filesize: ^10.0.12
-    jsonfile: ^6.1.0
-    react-confetti: ^6.1.0
-    strip-ansi: ^7.1.0
-  peerDependencies:
-    storybook: ^0.0.0-0 || ^9.0.0 || ^9.0.0-alpha.4
-  checksum: 5d01a6701f50afb42b89312240aca6ef81c37b9085462d4a7c7e70e94bb5cbfa3fd3e0a585453bcbb201baae88a8a8be9cbe5961ee176f5f7b7fcf13dc579c83
-  languageName: node
-  linkType: hard
-
 "@codemirror/autocomplete@npm:^6.0.0":
   version: 6.3.0
   resolution: "@codemirror/autocomplete@npm:6.3.0"
@@ -17281,113 +17265,131 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-backgrounds@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-backgrounds@npm:9.0.0-alpha.8"
+"@storybook/addon-actions@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-actions@npm:8.6.8"
+  dependencies:
+    "@storybook/global": ^5.0.0
+    "@types/uuid": ^9.0.1
+    dequal: ^2.0.2
+    polished: ^4.2.2
+    uuid: ^9.0.0
+  peerDependencies:
+    storybook: ^8.6.8
+  checksum: 8799cdad3f4c604cb7dd11331e2a9a2786ea0dfb2dddde7dfc1f782d748911dc3c1d495828b89e70f49f114c6040507adce3d607d6a4ef146b8daf83070c7373
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-backgrounds@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-backgrounds@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
     memoizerific: ^1.11.3
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 3f7527dda74c319d8f0f675136ee3691352cd3f1e0d1beea559708d60f46a17c52a53623b3fc664b8c40879a23c3a94d7326e4520a3846aafd0b3a5c7a1e85ad
+    storybook: ^8.6.8
+  checksum: 4483217be3ca542ab37c5d565511295587097965f5df4f0c0ca83eca8d3f7f4bed3ef32eb5f7ef434a1fabd1727e06ad227ac52174d22b9c86611f0f18f0543e
   languageName: node
   linkType: hard
 
-"@storybook/addon-controls@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-controls@npm:9.0.0-alpha.8"
+"@storybook/addon-controls@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-controls@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
     dequal: ^2.0.2
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 227dfebeff3be21cb15b06e39f7ce596472c458f77d514188c548ee8e3d19c52eb5dcec248fcfe2c5d91a5a27b48b93bec667cfa72620e8e9b1ab6065ddcee88
+    storybook: ^8.6.8
+  checksum: 81ffa2fe6cc7daf23d8db1a14ea0a81d4e25b933c5df554f39ebcd5ce18348da7dcfd68d5d0fc862bb39f034767186cb4d568653593ca9f3af3e47044b907559
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-docs@npm:9.0.0-alpha.8"
+"@storybook/addon-docs@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-docs@npm:8.6.8"
   dependencies:
     "@mdx-js/react": ^3.0.0
-    "@storybook/blocks": 9.0.0-alpha.8
-    "@storybook/csf-plugin": 9.0.0-alpha.8
-    "@storybook/react-dom-shim": 9.0.0-alpha.8
+    "@storybook/blocks": 8.6.8
+    "@storybook/csf-plugin": 8.6.8
+    "@storybook/react-dom-shim": 8.6.8
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 76726fb05e8bfc209645dc8e185abb625be4dd800fee3f75aba19d00e60e073cb4b1b5efa5c02df3bd751dc57dd59189ba3968ba65b8269865108d1334c23c0d
+    storybook: ^8.6.8
+  checksum: 22becb8d5bfd23c092d2666650c8cf19d68e794842f6772dbc617303bf9f6f70f838de3eed2e070fb23c603ea141ef9bf1ce9b9f2c24f62884d6b52df2f54ba7
   languageName: node
   linkType: hard
 
-"@storybook/addon-essentials@npm:^9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-essentials@npm:9.0.0-alpha.8"
+"@storybook/addon-essentials@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-essentials@npm:8.6.8"
   dependencies:
-    "@storybook/addon-backgrounds": 9.0.0-alpha.8
-    "@storybook/addon-controls": 9.0.0-alpha.8
-    "@storybook/addon-docs": 9.0.0-alpha.8
-    "@storybook/addon-highlight": 9.0.0-alpha.8
-    "@storybook/addon-measure": 9.0.0-alpha.8
-    "@storybook/addon-outline": 9.0.0-alpha.8
-    "@storybook/addon-toolbars": 9.0.0-alpha.8
-    "@storybook/addon-viewport": 9.0.0-alpha.8
+    "@storybook/addon-actions": 8.6.8
+    "@storybook/addon-backgrounds": 8.6.8
+    "@storybook/addon-controls": 8.6.8
+    "@storybook/addon-docs": 8.6.8
+    "@storybook/addon-highlight": 8.6.8
+    "@storybook/addon-measure": 8.6.8
+    "@storybook/addon-outline": 8.6.8
+    "@storybook/addon-toolbars": 8.6.8
+    "@storybook/addon-viewport": 8.6.8
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: b3981fc97766c727ddd4d9edcaedb202a9aef3089129660e1f1573a8eab6db44002d48d5a0cc98f7cb24c9ebec9f28ef2fcfe59820f05f0a476d6c5da8c1a396
+    storybook: ^8.6.8
+  checksum: eaaca24361e850809eb06fd01d873aad1203dc419bc112d50e6327b9ea4daabfca03e9cc0843c1f36da4965b766a28813b6f668df4fc189c84ccdf40a9a0df30
   languageName: node
   linkType: hard
 
-"@storybook/addon-highlight@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-highlight@npm:9.0.0-alpha.8"
+"@storybook/addon-highlight@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-highlight@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: d3b98b333a00d53de2d5e778792d633eb6cbdb37a940b138f5c5c6990ad5f10071372278e1f3ce06025b3d96c117a8b19ec979ff540c8fa5595377a6cdebe494
+    storybook: ^8.6.8
+  checksum: 85eeb8d549b6b3358d31c8204a58164a2c6a7728d0d6e53799e65b4d3ab4cb29743bffc7f861b36d50eb2213f569668840a15c54c44beaefe7b707f2dc7966a5
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-interactions@npm:9.0.0-alpha.8"
+"@storybook/addon-interactions@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-interactions@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
+    "@storybook/instrumenter": 8.6.8
+    "@storybook/test": 8.6.8
     polished: ^4.2.2
     ts-dedent: ^2.2.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 16bed44a424971d8ea65de43d8b5eda7f28800b32e2a3b18ac73ac17ef1145ab1c96c2686f4f9172bfcb0776c05593caa02dee9fd31b3ebfbb1119b4f6510fd3
+    storybook: ^8.6.8
+  checksum: 99a28f5c4ad3d1f2c239a339158733691ee68e5bf062e015607cb717841ee8eecd1f5244936d64f3ac39c00da8f1de0806cf3333d35f1c79b4762b3a40261c4e
   languageName: node
   linkType: hard
 
-"@storybook/addon-measure@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-measure@npm:9.0.0-alpha.8"
+"@storybook/addon-measure@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-measure@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
     tiny-invariant: ^1.3.1
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: b30cc38f8ecc3664300cec8898446edb070250f1d7e4b42ab8bfba2d6b3245e58c7ed9c9abefdf07ff9d3eb42fd59dfafaa50f3e5d4f28b6e400461c0fb541ef
+    storybook: ^8.6.8
+  checksum: d31e576014aa960ad856a95a8156b65115856dc83b8670502ada1e730ec0ccade1f19e6f9eec2e80960c1b7c442b49777be4e4c4ccd05f849d66ba0d127b378d
   languageName: node
   linkType: hard
 
-"@storybook/addon-outline@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-outline@npm:9.0.0-alpha.8"
+"@storybook/addon-outline@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-outline@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: d66347d5ca3f786a07a52f96f2479ce768b2721fadcc19c24a1e6de5fad629866fe06f206a9240a305851ab638feb5d189024920a676fe41ef6651d4919e616e
+    storybook: ^8.6.8
+  checksum: 4d6e137b0de24da56aca1e41b39673488bda2634952027e982ae134ffb8aaa3ed67120c348c157f15d27c65dd530dec815df805c671f6e8a9f5d5697a84c251b
   languageName: node
   linkType: hard
 
@@ -17402,71 +17404,71 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-themes@npm:^9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-themes@npm:9.0.0-alpha.8"
+"@storybook/addon-themes@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-themes@npm:8.6.8"
   dependencies:
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 66de97b77be87d4791af0993e51660aa5a3e4536d90a56039551725d7eec16bc5a920cd955edac28d02502bf6f97c228ef5004884523d32e471a01cdffba83b7
+    storybook: ^8.6.8
+  checksum: c75aa43e1aaf5af0d2526319d35209a796c074983fbe053f6fab63277e4ae9b872d8b6ae796851e9d7f471e1c94d3ba4925ff7b3fadbe0986fdb922a87be824a
   languageName: node
   linkType: hard
 
-"@storybook/addon-toolbars@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-toolbars@npm:9.0.0-alpha.8"
+"@storybook/addon-toolbars@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-toolbars@npm:8.6.8"
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 5a06fe915e90cb75a11f6b04035e7b7ee58442ed78647abe08fd66330afd705f5c645f9c1c1850eeb479f2ac70440d4c112e0171ff11cb8c9eec09f0fd1a178b
+    storybook: ^8.6.8
+  checksum: 5c034aca498ddd91ca23cd571b4c7a9c6d643bd19cf0c67346f4ae4617292ca858dbe1170c566ac550ad6f7d564effee329d89e9f2fa1219e605d8b6cfe06572
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/addon-viewport@npm:9.0.0-alpha.8"
+"@storybook/addon-viewport@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/addon-viewport@npm:8.6.8"
   dependencies:
     memoizerific: ^1.11.3
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 5b3070794bed9de04937a5a4315ce375894866e2e42d3cc19025d76087abb2c629a83916b7981731c4e0f34e6f310da91f7df20df970dfd88593fd1e23c8e894
+    storybook: ^8.6.8
+  checksum: 8a9f21bad254ef1cb31cb4ff8fc6089e90894678bb234ad92c4e2aaae4f4c7a50fc31b559f30ff105b627872e14bbda1cb8c475f3429ac3207d7aae841915ba0
   languageName: node
   linkType: hard
 
-"@storybook/addon-webpack5-compiler-swc@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@storybook/addon-webpack5-compiler-swc@npm:2.1.0"
+"@storybook/addon-webpack5-compiler-swc@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@storybook/addon-webpack5-compiler-swc@npm:3.0.0"
   dependencies:
     "@swc/core": ^1.10.8
     swc-loader: ^0.2.6
-  checksum: 1a5ebc6842f29b342d4bb0a8efab183e521c07b96aee9071dbddb2d4c8ab3525dd79cd1b3be914d0f45dbb97a2cb5b78392e352ed5f406f891f9f10857e1315d
+  checksum: 4dbf7df5ed5c6c8a6f532c2761839206bdc9d3d4a11c5cf435b4ded44c8bcb57b83cf389dd8c9510e0dc90587d8ef0ba45730daf865ca8b24c58757dcb649f63
   languageName: node
   linkType: hard
 
-"@storybook/blocks@npm:9.0.0-alpha.8, @storybook/blocks@npm:^9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/blocks@npm:9.0.0-alpha.8"
+"@storybook/blocks@npm:8.6.8, @storybook/blocks@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/blocks@npm:8.6.8"
   dependencies:
-    "@storybook/icons": ^1.4.0
+    "@storybook/icons": ^1.2.12
     ts-dedent: ^2.0.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    storybook: ^9.0.0-alpha.8
+    storybook: ^8.6.8
   peerDependenciesMeta:
     react:
       optional: true
     react-dom:
       optional: true
-  checksum: 0802d6793125081f7b95ccfa7a56b56f2267e1b1984bafeec9192fbcf5ad81cb14a3f8e06dc36c680f4ad07d90f85335f4f54076bb52836f6d6cc778580a1fb9
+  checksum: 5d52e9e64179b4355b34f4fbafb2903249c654b7f3f8656887fa60e704b9d7ea8d57b617227d3e71d742eef64023b961b8eb938806ce267f86dfe437e967861d
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/builder-webpack5@npm:9.0.0-alpha.8"
+"@storybook/builder-webpack5@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/builder-webpack5@npm:8.6.8"
   dependencies:
-    "@storybook/core-webpack": 9.0.0-alpha.8
+    "@storybook/core-webpack": 8.6.8
     "@types/semver": ^7.3.4
     browser-assert: ^1.2.1
     case-sensitive-paths-webpack-plugin: ^2.4.0
@@ -17491,33 +17493,66 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.6.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
+    storybook: ^8.6.8
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 0d329f2160282bccfc58a679c26e14b141b89e48d3a0ef53bccf7df760f6f6df952e1e85ced2e17ea331873efa6ffe9bec939df0057168793e37358eff27d32c
+  checksum: 27bc38b1b46f681f2a24410b4b06973b516b5031f35b355cddc48c70eb7784537f6fadec2ceca367a818f13a8700877893730d676a3ce6ba25f3e5baf69bae6b
   languageName: node
   linkType: hard
 
-"@storybook/core-webpack@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/core-webpack@npm:9.0.0-alpha.8"
+"@storybook/components@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/components@npm:8.6.8"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: fb69c6d7804f91fffd3fc7d42ba5b144c7b808af6e6b764c14cdef11263897e551e5cc8a0fa379b9ed73f5c0438ed32d355c7ed63801046e1cb078c479d4cecf
+  languageName: node
+  linkType: hard
+
+"@storybook/core-webpack@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/core-webpack@npm:8.6.8"
   dependencies:
     ts-dedent: ^2.0.0
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: 4b037b4bc9f3a7f97e29c8275542a08255c42ff68d4f0d6a7701980965ce77e6a33b62e59af88da1e4029475e42ae7a7a0ea20850621ae48fdc8c96213a6e04d
+    storybook: ^8.6.8
+  checksum: f64234cac8402cb15e441922c4cd756cd81264f1051d7d31d5d6209169d7adc34296b88f2e3bcd8b416837686ad5b69ed023c53984cb22fdc18533ffdca1205d
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/csf-plugin@npm:9.0.0-alpha.8"
+"@storybook/core@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/core@npm:8.6.8"
+  dependencies:
+    "@storybook/theming": 8.6.8
+    better-opn: ^3.0.2
+    browser-assert: ^1.2.1
+    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
+    esbuild-register: ^3.5.0
+    jsdoc-type-pratt-parser: ^4.0.0
+    process: ^0.11.10
+    recast: ^0.23.5
+    semver: ^7.6.2
+    util: ^0.12.5
+    ws: ^8.2.3
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  checksum: d67dea27c021b51f17a0d5807b72a29ea174bb8c945fb41092fbf3698002810da0a510aa7e0e23e1682634362f9b52590ba1a09ef6dd40a2ad5653988b0b0e14
+  languageName: node
+  linkType: hard
+
+"@storybook/csf-plugin@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/csf-plugin@npm:8.6.8"
   dependencies:
     unplugin: ^1.3.1
   peerDependencies:
-    storybook: ^9.0.0-alpha.8
-  checksum: f25a0c995c9295cefc8177b43d26b8312f50478bcc431fae5b532d96ffb2ddf60d9f806cea758fdee5424b767c97f1bfdc7ffb69aca1b05a7eedf224e3970e76
+    storybook: ^8.6.8
+  checksum: 17dece5267ae2bfb735ccb26485722bb16dbb2c53aea18c94aa6f532a5b848b2a2558678b6ccad3dbfabbf596aa45d543aea3a1967afa1e97c244f8603d86ec9
   languageName: node
   linkType: hard
 
@@ -17537,7 +17572,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/icons@npm:^1.4.0":
+"@storybook/icons@npm:^1.2.12":
   version: 1.4.0
   resolution: "@storybook/icons@npm:1.4.0"
   peerDependencies:
@@ -17547,15 +17582,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/instrumenter@npm:8.6.7":
-  version: 8.6.7
-  resolution: "@storybook/instrumenter@npm:8.6.7"
+"@storybook/instrumenter@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/instrumenter@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
     "@vitest/utils": ^2.1.1
   peerDependencies:
-    storybook: ^8.6.7
-  checksum: 8b5bbdd73637233ddebf6d3f14d3904c6f122f29f2efe4a0172a1f03e066a88a3453ae3eef140b227eb626ee959c0c3522f62944407f4530e24e6a6ac804598b
+    storybook: ^8.6.8
+  checksum: 111508d96d3cacb04388a58a7977b2766616348a33f0d461f53786a73286e58e73dde637d26f6395f0841d323da30b4985707a801d43236394c8303c847351db
+  languageName: node
+  linkType: hard
+
+"@storybook/manager-api@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/manager-api@npm:8.6.8"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: ee575781572898fc2fa734750ccb4bad09fc021bd0878ca9a05d9668cb336610d53e8110f4ff3c2c180573a64e9caba8f50f59d0bd3f0398a5c98e2eafdd91ae
   languageName: node
   linkType: hard
 
@@ -17568,12 +17612,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preset-react-webpack@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/preset-react-webpack@npm:9.0.0-alpha.8"
+"@storybook/preset-react-webpack@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/preset-react-webpack@npm:8.6.8"
   dependencies:
-    "@storybook/core-webpack": 9.0.0-alpha.8
-    "@storybook/react": 9.0.0-alpha.8
+    "@storybook/core-webpack": 8.6.8
+    "@storybook/react": 8.6.8
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
     "@types/semver": ^7.3.4
     find-up: ^5.0.0
@@ -17586,11 +17630,20 @@ __metadata:
   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: ^9.0.0-alpha.8
+    storybook: ^8.6.8
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 1a2436e9e295967ddd475a21d2f806590a5526189a1f781ccdfa89453a5ff8d4dbe6b0c0e0f2d5c08a13a2c0cce5376f8ddfe1c07a84c5021b5233c45c699596
+  checksum: 019aceb0ba0b79779839a3719ab37a130d951e644dad574310e76ac67ccfc41ee53b118209726a7c851ad40965054b1e1f24b1481a02f4dc9bf65d2b537d6117
+  languageName: node
+  linkType: hard
+
+"@storybook/preview-api@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/preview-api@npm:8.6.8"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: ac923a342d09c9e51f67734acaea19a41dc87cfc6cb22aea262591396d41cd4b69896417b618c55f17a9d64660b659813475c30d338c9bb6aa45391cfe8328f0
   languageName: node
   linkType: hard
 
@@ -17612,68 +17665,84 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/react-dom-shim@npm:9.0.0-alpha.8"
+"@storybook/react-dom-shim@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/react-dom-shim@npm:8.6.8"
   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: ^9.0.0-alpha.8
-  checksum: e235aca5a13900a580fdaa7b11ff00b7dbb389e3b2701ba12688d4d624fe83f6d1448a61c649f4f95f52d72e46fffa67be4cacbf005637110b4f3c372d821d38
+    storybook: ^8.6.8
+  checksum: d48ba28fefe0bbe0bde02de6a99629d84ba9436fb539ffc6d779173f7b8f6ec466e26018e943d95fa079d73ace2d96d5911def0221754262782e8a5e8b20882d
   languageName: node
   linkType: hard
 
-"@storybook/react-webpack5@npm:^9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/react-webpack5@npm:9.0.0-alpha.8"
+"@storybook/react-webpack5@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/react-webpack5@npm:8.6.8"
   dependencies:
-    "@storybook/builder-webpack5": 9.0.0-alpha.8
-    "@storybook/preset-react-webpack": 9.0.0-alpha.8
-    "@storybook/react": 9.0.0-alpha.8
+    "@storybook/builder-webpack5": 8.6.8
+    "@storybook/preset-react-webpack": 8.6.8
+    "@storybook/react": 8.6.8
   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: ^9.0.0-alpha.8
-    typescript: ">= 4.9.x"
+    storybook: ^8.6.8
+    typescript: ">= 4.2.x"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 25f8c99159e502ab0c5fae0ce6942aac9650e5aea4287adcb2dc7801add34b31db8f9a2079d3762fa0d3277616e60cf2c187b01a1440efa30ea1736b7c4b3281
+  checksum: 49c60b8005e44c623f3a2d18694770ab72cb6fd2e51611592d287971f51f4218de2f228c677debda6aba5c6d97d71510e2ca303eaa2d3b67069262198ab17271
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/react@npm:9.0.0-alpha.8"
+"@storybook/react@npm:8.6.8, @storybook/react@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/react@npm:8.6.8"
   dependencies:
+    "@storybook/components": 8.6.8
     "@storybook/global": ^5.0.0
-    "@storybook/react-dom-shim": 9.0.0-alpha.8
+    "@storybook/manager-api": 8.6.8
+    "@storybook/preview-api": 8.6.8
+    "@storybook/react-dom-shim": 8.6.8
+    "@storybook/theming": 8.6.8
   peerDependencies:
+    "@storybook/test": 8.6.8
     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: ^9.0.0-alpha.8
-    typescript: ">= 4.9.x"
+    storybook: ^8.6.8
+    typescript: ">= 4.2.x"
   peerDependenciesMeta:
+    "@storybook/test":
+      optional: true
     typescript:
       optional: true
-  checksum: 4ba2b0fe9cab5272856ab6e26dce732dc7baa4650539e9195c5dca0e15fccd87444ab5f580d17ccf5a98eff54621bbb733dd73c82aca2933f68ff753ff5246b3
+  checksum: ebbfb2bed68d4ca8c8777769e5b752b1becf9cc1c3fd6f051df9a8eb012d209526b9e188812f3bf8ecf337a331c5049afa2236d2b073fbcafafd35e79cc3ed78
   languageName: node
   linkType: hard
 
-"@storybook/test@npm:^8.6.7":
-  version: 8.6.7
-  resolution: "@storybook/test@npm:8.6.7"
+"@storybook/test@npm:8.6.8, @storybook/test@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/test@npm:8.6.8"
   dependencies:
     "@storybook/global": ^5.0.0
-    "@storybook/instrumenter": 8.6.7
+    "@storybook/instrumenter": 8.6.8
     "@testing-library/dom": 10.4.0
     "@testing-library/jest-dom": 6.5.0
     "@testing-library/user-event": 14.5.2
     "@vitest/expect": 2.0.5
     "@vitest/spy": 2.0.5
   peerDependencies:
-    storybook: ^8.6.7
-  checksum: d269423580cbcc61de74a3940504f00bb580b389b04432aa6a0a7e8fed54536782ef254e8edcf6bac3ce98d35e439fdfd86316cf53f3435396f12cbc2e060541
+    storybook: ^8.6.8
+  checksum: 7787760fe34cc004a556dbdc6bf6ed8f64970c16d1afb985dc57ca269cffea2203538d3756440108cc4acd8430325162d5481d90e8835787ae9ac1bf55d2f387
+  languageName: node
+  linkType: hard
+
+"@storybook/theming@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/theming@npm:8.6.8"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 1be0dea23178af562133f1047165e170f7e90bec4c3cedbdcb59df22685f314273a06a4677835ab84e6dbc682b803590adad6963217971c8136b076ce69800aa
   languageName: node
   linkType: hard
 
@@ -18631,7 +18700,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^6.0.0, @testing-library/jest-dom@npm:^6.6.3":
+"@testing-library/jest-dom@npm:^6.0.0":
   version: 6.6.3
   resolution: "@testing-library/jest-dom@npm:6.6.3"
   dependencies:
@@ -18697,7 +18766,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^14.0.0, @testing-library/user-event@npm:^14.6.1":
+"@testing-library/user-event@npm:^14.0.0":
   version: 14.6.1
   resolution: "@testing-library/user-event@npm:14.6.1"
   peerDependencies:
@@ -21169,7 +21238,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:3.0.9, @vitest/expect@npm:>1.6.0":
+"@vitest/expect@npm:>1.6.0":
   version: 3.0.9
   resolution: "@vitest/expect@npm:3.0.9"
   dependencies:
@@ -24488,25 +24557,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.27.0":
-  version: 11.27.0
-  resolution: "chromatic@npm:11.27.0"
-  peerDependencies:
-    "@chromatic-com/cypress": ^0.*.* || ^1.0.0
-    "@chromatic-com/playwright": ^0.*.* || ^1.0.0
-  peerDependenciesMeta:
-    "@chromatic-com/cypress":
-      optional: true
-    "@chromatic-com/playwright":
-      optional: true
-  bin:
-    chroma: dist/bin.js
-    chromatic: dist/bin.js
-    chromatic-cli: dist/bin.js
-  checksum: aaa024eb06e79072ee9c7d491818be052e7b6f0e20fc79323780ea2ccc2ce01f6157b19755d0b4b415a723d0d00cf610274dffc201c1041d2ca54ac98e240880
-  languageName: node
-  linkType: hard
-
 "chrome-trace-event@npm:^1.0.2":
   version: 1.0.2
   resolution: "chrome-trace-event@npm:1.0.2"
@@ -28134,17 +28184,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-storybook@npm:^0.11.4":
-  version: 0.11.4
-  resolution: "eslint-plugin-storybook@npm:0.11.4"
+"eslint-plugin-storybook@npm:^0.11.6":
+  version: 0.11.6
+  resolution: "eslint-plugin-storybook@npm:0.11.6"
   dependencies:
     "@storybook/csf": ^0.1.11
     "@typescript-eslint/utils": ^8.8.1
     ts-dedent: ^2.2.0
   peerDependencies:
     eslint: ">=8"
-    typescript: ">=4.8.4 <5.8.0"
-  checksum: c3909478f32862a4d2687af240f91df9190e6c23e7618fee366dd8e7c1fa7f31c1c8bf9d49c8b4c01bd0f7857f5f85ccdfd6897d56bde353da3192652a2e9ded
+  checksum: 0dbc32176a729761c2f77187f6a3f7a5560727dd746f5b425aa0b8c35d0f4e979e0a3e86e0d647425343ba33616455abe5a72f30757d89ce85049a39d6062b4f
   languageName: node
   linkType: hard
 
@@ -29251,13 +29300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filesize@npm:^10.0.12":
-  version: 10.1.6
-  resolution: "filesize@npm:10.1.6"
-  checksum: a797a9d41c8f27a9ae334d23f99fc5d903eac5d03c82190dc163901205435b56626fe1260c779ba3e87a2a34d426f19ff264c3f7d956e00f2d3ac69760b52e33
-  languageName: node
-  linkType: hard
-
 "filesize@npm:^8.0.6":
   version: 8.0.6
   resolution: "filesize@npm:8.0.6"
@@ -33883,7 +33925,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^6.0.1, jsonfile@npm:^6.1.0":
+"jsonfile@npm:^6.0.1":
   version: 6.1.0
   resolution: "jsonfile@npm:6.1.0"
   dependencies:
@@ -40603,17 +40645,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-confetti@npm:^6.1.0":
-  version: 6.4.0
-  resolution: "react-confetti@npm:6.4.0"
-  dependencies:
-    tween-functions: ^1.2.0
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
-  checksum: 70850ccbf970d961f415768f2ac81a7b4a9afad83997f137cffa04fc18be112ca2aef94f377b3353ca6bc7800290d812c8b9f9601b557980e6dd9c2a49eb5871
-  languageName: node
-  linkType: hard
-
 "react-copy-to-clipboard@npm:5.1.0, react-copy-to-clipboard@npm:^5.0.4":
   version: 5.1.0
   resolution: "react-copy-to-clipboard@npm:5.1.0"
@@ -43772,34 +43803,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:^9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "storybook@npm:9.0.0-alpha.8"
+"storybook@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "storybook@npm:8.6.8"
   dependencies:
-    "@storybook/global": ^5.0.0
-    "@testing-library/dom": 10.4.0
-    "@testing-library/jest-dom": ^6.6.3
-    "@testing-library/user-event": ^14.6.1
-    "@types/uuid": ^9.0.1
-    "@vitest/expect": 3.0.9
-    "@vitest/spy": 3.0.9
-    better-opn: ^3.0.2
-    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
-    esbuild-register: ^3.5.0
-    jsdoc-type-pratt-parser: ^4.0.0
-    polished: ^4.2.2
-    recast: ^0.23.5
-    semver: ^7.6.2
-    uuid: ^9.0.0
-    ws: ^8.18.0
+    "@storybook/core": 8.6.8
   peerDependencies:
     prettier: ^2 || ^3
   peerDependenciesMeta:
     prettier:
       optional: true
   bin:
+    getstorybook: ./bin/index.cjs
+    sb: ./bin/index.cjs
     storybook: ./bin/index.cjs
-  checksum: d48c9b2b05279bc0ee8eabeb505e9b662d576fbd8902311cf6694e1c1eb3ef960e417e20f656b6bc869c14b59bedc77c89b70b50575beb2caa24fcd92d3d15b6
+  checksum: 93b92e53c00ff29b4864932c26c52dd4a45e76b3d46811a2bcdc0271ef37c96e2f8d1833982569ab6a6348d6e84d8348aecf74ee72164744459de4c78d0f6759
   languageName: node
   linkType: hard
 
@@ -45461,13 +45479,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tween-functions@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "tween-functions@npm:1.2.0"
-  checksum: 880708d680eff5c347ddcb9f922ad121703a91c78ce308ed309073e73a794b633eb0b80589a839365803f150515ad34c9646809ae8a0e90f09e62686eefb1ab6
-  languageName: node
-  linkType: hard
-
 "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0":
   version: 0.14.5
   resolution: "tweetnacl@npm:0.14.5"
@@ -47329,7 +47340,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:*, ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.16.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.8.0":
+"ws@npm:*, ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.16.0, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.2.3, ws@npm:^8.8.0":
   version: 8.18.1
   resolution: "ws@npm:8.18.1"
   peerDependencies:

From b15a7fe77be1c53559ca3ba47db9a79361561ec1 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 23 Mar 2025 09:28:19 +0000
Subject: [PATCH 3/8] Fix dependencies in docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/package.json |   4 +-
 canon-docs/yarn.lock    | 554 ++++++++++++----------------------------
 2 files changed, 168 insertions(+), 390 deletions(-)

diff --git a/canon-docs/package.json b/canon-docs/package.json
index 7bdaa718be..2bb88bd744 100644
--- a/canon-docs/package.json
+++ b/canon-docs/package.json
@@ -14,7 +14,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.1.4",
-    "@storybook/react": "9.0.0-alpha.8",
+    "@storybook/react": "^8.6.8",
     "@uiw/codemirror-themes": "^4.23.7",
     "@uiw/react-codemirror": "^4.23.7",
     "motion": "^12.4.1",
@@ -23,7 +23,7 @@
     "react-dom": "^18.0.2",
     "react-frame-component": "^5.2.7",
     "shiki": "^1.26.1",
-    "storybook": "9.0.0-alpha.8"
+    "storybook": "^8.6.8"
   },
   "devDependencies": {
     "@types/mdx": "^2.0.13",
diff --git a/canon-docs/yarn.lock b/canon-docs/yarn.lock
index 204a4bd898..6dbd15358b 100644
--- a/canon-docs/yarn.lock
+++ b/canon-docs/yarn.lock
@@ -5,32 +5,7 @@ __metadata:
   version: 6
   cacheKey: 8
 
-"@adobe/css-tools@npm:^4.4.0":
-  version: 4.4.2
-  resolution: "@adobe/css-tools@npm:4.4.2"
-  checksum: ecc9f626fab00c0d17dc62a3427e515cb6f4413d565d7492184331604530e42e00efbd2d8f6a767b7dbfc68a8a581f270fcddf4eb6bb8cddbb52d1d1df38dc99
-  languageName: node
-  linkType: hard
-
-"@babel/code-frame@npm:^7.10.4":
-  version: 7.26.2
-  resolution: "@babel/code-frame@npm:7.26.2"
-  dependencies:
-    "@babel/helper-validator-identifier": ^7.25.9
-    js-tokens: ^4.0.0
-    picocolors: ^1.0.0
-  checksum: db13f5c42d54b76c1480916485e6900748bbcb0014a8aca87f50a091f70ff4e0d0a6db63cade75eb41fcc3d2b6ba0a7f89e343def4f96f00269b41b8ab8dd7b8
-  languageName: node
-  linkType: hard
-
-"@babel/helper-validator-identifier@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
-  checksum: 5b85918cb1a92a7f3f508ea02699e8d2422fe17ea8e82acd445006c0ef7520fbf48e3dbcdaf7b0a1d571fc3a2715a29719e5226636cb6042e15fe6ed2a590944
-  languageName: node
-  linkType: hard
-
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.6":
+"@babel/runtime@npm:^7.18.6":
   version: 7.26.10
   resolution: "@babel/runtime@npm:7.26.10"
   dependencies:
@@ -747,6 +722,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/components@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/components@npm:8.6.8"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: fb69c6d7804f91fffd3fc7d42ba5b144c7b808af6e6b764c14cdef11263897e551e5cc8a0fa379b9ed73f5c0438ed32d355c7ed63801046e1cb078c479d4cecf
+  languageName: node
+  linkType: hard
+
+"@storybook/core@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/core@npm:8.6.8"
+  dependencies:
+    "@storybook/theming": 8.6.8
+    better-opn: ^3.0.2
+    browser-assert: ^1.2.1
+    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
+    esbuild-register: ^3.5.0
+    jsdoc-type-pratt-parser: ^4.0.0
+    process: ^0.11.10
+    recast: ^0.23.5
+    semver: ^7.6.2
+    util: ^0.12.5
+    ws: ^8.2.3
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  checksum: d67dea27c021b51f17a0d5807b72a29ea174bb8c945fb41092fbf3698002810da0a510aa7e0e23e1682634362f9b52590ba1a09ef6dd40a2ad5653988b0b0e14
+  languageName: node
+  linkType: hard
+
 "@storybook/global@npm:^5.0.0":
   version: 5.0.0
   resolution: "@storybook/global@npm:5.0.0"
@@ -754,32 +762,66 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/react-dom-shim@npm:9.0.0-alpha.8"
+"@storybook/manager-api@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/manager-api@npm:8.6.8"
   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: ^9.0.0-alpha.8
-  checksum: e235aca5a13900a580fdaa7b11ff00b7dbb389e3b2701ba12688d4d624fe83f6d1448a61c649f4f95f52d72e46fffa67be4cacbf005637110b4f3c372d821d38
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: ee575781572898fc2fa734750ccb4bad09fc021bd0878ca9a05d9668cb336610d53e8110f4ff3c2c180573a64e9caba8f50f59d0bd3f0398a5c98e2eafdd91ae
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "@storybook/react@npm:9.0.0-alpha.8"
-  dependencies:
-    "@storybook/global": ^5.0.0
-    "@storybook/react-dom-shim": 9.0.0-alpha.8
+"@storybook/preview-api@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/preview-api@npm:8.6.8"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: ac923a342d09c9e51f67734acaea19a41dc87cfc6cb22aea262591396d41cd4b69896417b618c55f17a9d64660b659813475c30d338c9bb6aa45391cfe8328f0
+  languageName: node
+  linkType: hard
+
+"@storybook/react-dom-shim@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/react-dom-shim@npm:8.6.8"
   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: ^9.0.0-alpha.8
-    typescript: ">= 4.9.x"
+    storybook: ^8.6.8
+  checksum: d48ba28fefe0bbe0bde02de6a99629d84ba9436fb539ffc6d779173f7b8f6ec466e26018e943d95fa079d73ace2d96d5911def0221754262782e8a5e8b20882d
+  languageName: node
+  linkType: hard
+
+"@storybook/react@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/react@npm:8.6.8"
+  dependencies:
+    "@storybook/components": 8.6.8
+    "@storybook/global": ^5.0.0
+    "@storybook/manager-api": 8.6.8
+    "@storybook/preview-api": 8.6.8
+    "@storybook/react-dom-shim": 8.6.8
+    "@storybook/theming": 8.6.8
+  peerDependencies:
+    "@storybook/test": 8.6.8
+    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.6.8
+    typescript: ">= 4.2.x"
   peerDependenciesMeta:
+    "@storybook/test":
+      optional: true
     typescript:
       optional: true
-  checksum: 4ba2b0fe9cab5272856ab6e26dce732dc7baa4650539e9195c5dca0e15fccd87444ab5f580d17ccf5a98eff54621bbb733dd73c82aca2933f68ff753ff5246b3
+  checksum: ebbfb2bed68d4ca8c8777769e5b752b1becf9cc1c3fd6f051df9a8eb012d209526b9e188812f3bf8ecf337a331c5049afa2236d2b073fbcafafd35e79cc3ed78
+  languageName: node
+  linkType: hard
+
+"@storybook/theming@npm:8.6.8":
+  version: 8.6.8
+  resolution: "@storybook/theming@npm:8.6.8"
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 1be0dea23178af562133f1047165e170f7e90bec4c3cedbdcb59df22685f314273a06a4677835ab84e6dbc682b803590adad6963217971c8136b076ce69800aa
   languageName: node
   linkType: hard
 
@@ -800,46 +842,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:10.4.0":
-  version: 10.4.0
-  resolution: "@testing-library/dom@npm:10.4.0"
-  dependencies:
-    "@babel/code-frame": ^7.10.4
-    "@babel/runtime": ^7.12.5
-    "@types/aria-query": ^5.0.1
-    aria-query: 5.3.0
-    chalk: ^4.1.0
-    dom-accessibility-api: ^0.5.9
-    lz-string: ^1.5.0
-    pretty-format: ^27.0.2
-  checksum: bb128b90be0c8cd78c5f5e67aa45f53de614cc048a2b50b230e736ec710805ac6c73375af354b83c74d710b3928d52b83a273a4cb89de4eb3efe49e91e706837
-  languageName: node
-  linkType: hard
-
-"@testing-library/jest-dom@npm:^6.6.3":
-  version: 6.6.3
-  resolution: "@testing-library/jest-dom@npm:6.6.3"
-  dependencies:
-    "@adobe/css-tools": ^4.4.0
-    aria-query: ^5.0.0
-    chalk: ^3.0.0
-    css.escape: ^1.5.1
-    dom-accessibility-api: ^0.6.3
-    lodash: ^4.17.21
-    redent: ^3.0.0
-  checksum: c1dc4260b05309a0084416639006cd105849acc5b102bef682a3b19bd6fce07ff6762085fc7f2599546c995a2fc66fdb1d70e50e22a634a0098524056cc9e511
-  languageName: node
-  linkType: hard
-
-"@testing-library/user-event@npm:^14.6.1":
-  version: 14.6.1
-  resolution: "@testing-library/user-event@npm:14.6.1"
-  peerDependencies:
-    "@testing-library/dom": ">=7.21.4"
-  checksum: 4cb8a81fea1fea83a42619e9545137b51636bb7a3182c596bb468e5664f1e4699a275c2d0fb8b6dcc3fe2684f9d87b0637ab7cb4f566051539146872c9141fcb
-  languageName: node
-  linkType: hard
-
 "@types/acorn@npm:^4.0.0":
   version: 4.0.6
   resolution: "@types/acorn@npm:4.0.6"
@@ -849,13 +851,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/aria-query@npm:^5.0.1":
-  version: 5.0.4
-  resolution: "@types/aria-query@npm:5.0.4"
-  checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0
-  languageName: node
-  linkType: hard
-
 "@types/debug@npm:^4.0.0":
   version: 4.1.12
   resolution: "@types/debug@npm:4.1.12"
@@ -969,13 +964,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/uuid@npm:^9.0.1":
-  version: 9.0.8
-  resolution: "@types/uuid@npm:9.0.8"
-  checksum: b8c60b7ba8250356b5088302583d1704a4e1a13558d143c549c408bf8920535602ffc12394ede77f8a8083511b023704bc66d1345792714002bfa261b17c5275
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/eslint-plugin@npm:^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0":
   version: 8.19.1
   resolution: "@typescript-eslint/eslint-plugin@npm:8.19.1"
@@ -1155,47 +1143,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:3.0.9":
-  version: 3.0.9
-  resolution: "@vitest/expect@npm:3.0.9"
-  dependencies:
-    "@vitest/spy": 3.0.9
-    "@vitest/utils": 3.0.9
-    chai: ^5.2.0
-    tinyrainbow: ^2.0.0
-  checksum: 6df325d45e0ad4b6ad73a55e5328f615f92171fc4dbf3875972c08013727cfa435b9916636c7f3902a45f1874db10805d449311b70125edf1422dceb325ac982
-  languageName: node
-  linkType: hard
-
-"@vitest/pretty-format@npm:3.0.9":
-  version: 3.0.9
-  resolution: "@vitest/pretty-format@npm:3.0.9"
-  dependencies:
-    tinyrainbow: ^2.0.0
-  checksum: 447b53bd962bc5978cf3e8c67f0600e38470ea63ab6ae24fb048dca79305828f37d9d854a7db1abc97ebde66a65187f87a99ca7969e43c750998c944e3ec48c6
-  languageName: node
-  linkType: hard
-
-"@vitest/spy@npm:3.0.9":
-  version: 3.0.9
-  resolution: "@vitest/spy@npm:3.0.9"
-  dependencies:
-    tinyspy: ^3.0.2
-  checksum: 1b90f40c4ac34529e7d098c745396a51e9b2f187d31d50a664ac7374db56edb3792862a35d1b8049e421705db6445761d687f9f8c5e298a9ca6cfa47d55625d7
-  languageName: node
-  linkType: hard
-
-"@vitest/utils@npm:3.0.9":
-  version: 3.0.9
-  resolution: "@vitest/utils@npm:3.0.9"
-  dependencies:
-    "@vitest/pretty-format": 3.0.9
-    loupe: ^3.1.3
-    tinyrainbow: ^2.0.0
-  checksum: d31797594598817670cc49dfcd4ded2953d707c62e5dc7807737e8108073e97499cf7ef2eb3295f1fb52446a8a85ba50aacef21126689251092bc8566bff4bb6
-  languageName: node
-  linkType: hard
-
 "acorn-jsx@npm:^5.0.0, acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
@@ -1249,13 +1196,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^5.0.0":
-  version: 5.2.0
-  resolution: "ansi-styles@npm:5.2.0"
-  checksum: d7f4e97ce0623aea6bc0d90dcd28881ee04cba06c570b97fd3391bd7a268eedfd9d5e2dd4fdcbdd82b8105df5faf6f24aaedc08eaf3da898e702db5948f63469
-  languageName: node
-  linkType: hard
-
 "ansi-styles@npm:^6.1.0":
   version: 6.2.1
   resolution: "ansi-styles@npm:6.2.1"
@@ -1270,16 +1210,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:5.3.0":
-  version: 5.3.0
-  resolution: "aria-query@npm:5.3.0"
-  dependencies:
-    dequal: ^2.0.3
-  checksum: 305bd73c76756117b59aba121d08f413c7ff5e80fa1b98e217a3443fcddb9a232ee790e24e432b59ae7625aebcf4c47cb01c2cac872994f0b426f5bdfcd96ba9
-  languageName: node
-  linkType: hard
-
-"aria-query@npm:^5.0.0, aria-query@npm:^5.3.2":
+"aria-query@npm:^5.3.2":
   version: 5.3.2
   resolution: "aria-query@npm:5.3.2"
   checksum: d971175c85c10df0f6d14adfe6f1292409196114ab3c62f238e208b53103686f46cc70695a4f775b73bc65f6a09b6a092fd963c4f3a5a7d690c8fc5094925717
@@ -1390,13 +1321,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assertion-error@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "assertion-error@npm:2.0.1"
-  checksum: a0789dd882211b87116e81e2648ccb7f60340b34f19877dd020b39ebb4714e475eb943e14ba3e22201c221ef6645b7bfe10297e76b6ac95b48a9898c1211ce66
-  languageName: node
-  linkType: hard
-
 "ast-types-flow@npm:^0.0.8":
   version: 0.0.8
   resolution: "ast-types-flow@npm:0.0.8"
@@ -1496,6 +1420,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browser-assert@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "browser-assert@npm:1.2.1"
+  checksum: 8b2407cd04c1ed592cf892dec35942b7d72635829221e0788c9a16c4d2afa8b7156bc9705b1c4b32c30d88136c576fda3cbcb8f494d6f865264c706ea8798d92
+  languageName: node
+  linkType: hard
+
 "busboy@npm:1.6.0":
   version: 1.6.0
   resolution: "busboy@npm:1.6.0"
@@ -1505,13 +1436,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "call-bind-apply-helpers@npm:1.0.1"
+"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "call-bind-apply-helpers@npm:1.0.2"
   dependencies:
     es-errors: ^1.3.0
     function-bind: ^1.1.2
-  checksum: 3c55343261bb387c58a4762d15ad9d42053659a62681ec5eb50690c6b52a4a666302a01d557133ce6533e8bd04530ee3b209f23dd06c9577a1925556f8fcccdf
+  checksum: b2863d74fcf2a6948221f65d95b91b4b2d90cfe8927650b506141e669f7d5de65cea191bf788838bc40d13846b7886c5bc5c84ab96c3adbcf88ad69a72fcdc6b
   languageName: node
   linkType: hard
 
@@ -1527,13 +1458,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "call-bound@npm:1.0.3"
+"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3, call-bound@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "call-bound@npm:1.0.4"
   dependencies:
-    call-bind-apply-helpers: ^1.0.1
-    get-intrinsic: ^1.2.6
-  checksum: a93bbe0f2d0a2d6c144a4349ccd0593d5d0d5d9309b69101710644af8964286420062f2cc3114dca120b9bc8cc07507952d4b1b3ea7672e0d7f6f1675efedb32
+    call-bind-apply-helpers: ^1.0.2
+    get-intrinsic: ^1.3.0
+  checksum: 2f6399488d1c272f56306ca60ff696575e2b7f31daf23bc11574798c84d9f2759dceb0cb1f471a85b77f28962a7ac6411f51d283ea2e45319009a19b6ccab3b2
   languageName: node
   linkType: hard
 
@@ -1560,7 +1491,7 @@ __metadata:
     "@mdx-js/loader": ^3.1.0
     "@mdx-js/react": ^3.1.0
     "@next/mdx": ^15.1.4
-    "@storybook/react": 9.0.0-alpha.8
+    "@storybook/react": ^8.6.8
     "@types/mdx": ^2.0.13
     "@types/node": ^20
     "@types/react": ^18.0.0
@@ -1576,7 +1507,7 @@ __metadata:
     react-dom: ^18.0.2
     react-frame-component: ^5.2.7
     shiki: ^1.26.1
-    storybook: 9.0.0-alpha.8
+    storybook: ^8.6.8
     typescript: ^5
   languageName: unknown
   linkType: soft
@@ -1588,30 +1519,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chai@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "chai@npm:5.2.0"
-  dependencies:
-    assertion-error: ^2.0.1
-    check-error: ^2.1.1
-    deep-eql: ^5.0.1
-    loupe: ^3.1.0
-    pathval: ^2.0.0
-  checksum: 15e4ba12d02df3620fd59b4a6e8efe43b47872ce61f1c0ca77ac1205a2a5898f3b6f1f52408fd1a708b8d07fdfb5e65b97af40bad9fd94a69ed8d4264c7a69f1
-  languageName: node
-  linkType: hard
-
-"chalk@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "chalk@npm:3.0.0"
-  dependencies:
-    ansi-styles: ^4.1.0
-    supports-color: ^7.1.0
-  checksum: 8e3ddf3981c4da405ddbd7d9c8d91944ddf6e33d6837756979f7840a29272a69a5189ecae0ff84006750d6d1e92368d413335eab4db5476db6e6703a1d1e0505
-  languageName: node
-  linkType: hard
-
-"chalk@npm:^4.0.0, chalk@npm:^4.1.0":
+"chalk@npm:^4.0.0":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -1649,13 +1557,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"check-error@npm:^2.1.1":
-  version: 2.1.1
-  resolution: "check-error@npm:2.1.1"
-  checksum: d785ed17b1d4a4796b6e75c765a9a290098cf52ff9728ce0756e8ffd4293d2e419dd30c67200aee34202463b474306913f2fcfaf1890641026d9fc6966fea27a
-  languageName: node
-  linkType: hard
-
 "client-only@npm:0.0.1":
   version: 0.0.1
   resolution: "client-only@npm:0.0.1"
@@ -1733,13 +1634,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css.escape@npm:^1.5.1":
-  version: 1.5.1
-  resolution: "css.escape@npm:1.5.1"
-  checksum: f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
-  languageName: node
-  linkType: hard
-
 "csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -1817,13 +1711,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-eql@npm:^5.0.1":
-  version: 5.0.2
-  resolution: "deep-eql@npm:5.0.2"
-  checksum: 6aaaadb4c19cbce42e26b2bbe5bd92875f599d2602635dc97f0294bae48da79e89470aedee05f449e0ca8c65e9fd7e7872624d1933a1db02713d99c2ca8d1f24
-  languageName: node
-  linkType: hard
-
 "deep-is@npm:^0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -1860,7 +1747,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.0, dequal@npm:^2.0.3":
+"dequal@npm:^2.0.0":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
   checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
@@ -1903,20 +1790,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.9":
-  version: 0.5.16
-  resolution: "dom-accessibility-api@npm:0.5.16"
-  checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248
-  languageName: node
-  linkType: hard
-
-"dom-accessibility-api@npm:^0.6.3":
-  version: 0.6.3
-  resolution: "dom-accessibility-api@npm:0.6.3"
-  checksum: c325b5144bb406df23f4affecffc117dbaec9af03daad9ee6b510c5be647b14d28ef0a4ea5ca06d696d8ab40bb777e5fed98b985976fdef9d8790178fa1d573f
-  languageName: node
-  linkType: hard
-
 "dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1":
   version: 1.0.1
   resolution: "dunder-proto@npm:1.0.1"
@@ -2063,12 +1936,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-object-atoms@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "es-object-atoms@npm:1.0.0"
+"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "es-object-atoms@npm:1.1.1"
   dependencies:
     es-errors: ^1.3.0
-  checksum: 26f0ff78ab93b63394e8403c353842b2272836968de4eafe97656adfb8a7c84b9099bf0fe96ed58f4a4cddc860f6e34c77f91649a58a5daa4a9c40b902744e3c
+  checksum: 214d3767287b12f36d3d7267ef342bbbe1e89f899cfd67040309fc65032372a8e60201410a99a1645f2f90c1912c8c49c8668066f6bdd954bcd614dda2e3da97
   languageName: node
   linkType: hard
 
@@ -2684,12 +2557,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"for-each@npm:^0.3.3":
-  version: 0.3.3
-  resolution: "for-each@npm:0.3.3"
+"for-each@npm:^0.3.3, for-each@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "for-each@npm:0.3.5"
   dependencies:
-    is-callable: ^1.1.3
-  checksum: 6c48ff2bc63362319c65e2edca4a8e1e3483a2fabc72fbe7feaf8c73db94fc7861bd53bc02c8a66a0c1dd709da6b04eec42e0abdd6b40ce47305ae92a25e5d28
+    is-callable: ^1.2.7
+  checksum: 3c986d7e11f4381237cc98baa0a2f87eabe74719eee65ed7bed275163082b940ede19268c61d04c6260e0215983b12f8d885e3c8f9aa8c2113bf07c37051745c
   languageName: node
   linkType: hard
 
@@ -2760,21 +2633,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7":
-  version: 1.2.7
-  resolution: "get-intrinsic@npm:1.2.7"
+"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
-    call-bind-apply-helpers: ^1.0.1
+    call-bind-apply-helpers: ^1.0.2
     es-define-property: ^1.0.1
     es-errors: ^1.3.0
-    es-object-atoms: ^1.0.0
+    es-object-atoms: ^1.1.1
     function-bind: ^1.1.2
-    get-proto: ^1.0.0
+    get-proto: ^1.0.1
     gopd: ^1.2.0
     has-symbols: ^1.1.0
     hasown: ^2.0.2
     math-intrinsics: ^1.1.0
-  checksum: a1597b3b432074f805b6a0ba1182130dd6517c0ea0c4eecc4b8834c803913e1ea62dfc412865be795b3dacb1555a21775b70cf9af7a18b1454ff3414e5442d4a
+  checksum: 301008e4482bb9a9cb49e132b88fee093bff373b4e6def8ba219b1e96b60158a6084f273ef5cafe832e42cd93462f4accb46a618d35fe59a2b507f2388c5b79d
   languageName: node
   linkType: hard
 
@@ -3058,13 +2931,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"indent-string@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "indent-string@npm:4.0.0"
-  checksum: 824cfb9929d031dabf059bebfe08cf3137365e112019086ed3dcff6a0a7b698cb80cf67ccccde0e25b9e2d7527aa6cc1fed1ac490c752162496caba3e6699612
-  languageName: node
-  linkType: hard
-
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -3075,7 +2941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2":
+"inherits@npm:2, inherits@npm:^2.0.3":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -3117,6 +2983,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arguments@npm:^1.0.4":
+  version: 1.2.0
+  resolution: "is-arguments@npm:1.2.0"
+  dependencies:
+    call-bound: ^1.0.2
+    has-tostringtag: ^1.0.2
+  checksum: aae9307fedfe2e5be14aebd0f48a9eeedf6b8c8f5a0b66257b965146d1e94abdc3f08e3dce3b1d908e1fa23c70039a88810ee1d753905758b9b6eebbab0bafeb
+  languageName: node
+  linkType: hard
+
 "is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
   version: 3.0.5
   resolution: "is-array-buffer@npm:3.0.5"
@@ -3168,7 +3044,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-callable@npm:^1.1.3, is-callable@npm:^1.2.7":
+"is-callable@npm:^1.2.7":
   version: 1.2.7
   resolution: "is-callable@npm:1.2.7"
   checksum: 61fd57d03b0d984e2ed3720fb1c7a897827ea174bd44402878e059542ea8c4aeedee0ea0985998aa5cc2736b2fa6e271c08587addb5b3959ac52cf665173d1ac
@@ -3244,7 +3120,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-generator-function@npm:^1.0.10":
+"is-generator-function@npm:^1.0.10, is-generator-function@npm:^1.0.7":
   version: 1.1.0
   resolution: "is-generator-function@npm:1.1.0"
   dependencies:
@@ -3359,7 +3235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15":
+"is-typed-array@npm:^1.1.13, is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15, is-typed-array@npm:^1.1.3":
   version: 1.1.15
   resolution: "is-typed-array@npm:1.1.15"
   dependencies:
@@ -3444,7 +3320,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
+"js-tokens@npm:^3.0.0 || ^4.0.0":
   version: 4.0.0
   resolution: "js-tokens@npm:4.0.0"
   checksum: 8a95213a5a77deb6cbe94d86340e8d9ace2b93bc367790b260101d2f36a2eaf4e4e22d9fa9cf459b38af3a32fb4190e638024cf82ec95ef708680e405ea7cc78
@@ -3674,13 +3550,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.21":
-  version: 4.17.21
-  resolution: "lodash@npm:4.17.21"
-  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
-  languageName: node
-  linkType: hard
-
 "longest-streak@npm:^3.0.0":
   version: 3.1.0
   resolution: "longest-streak@npm:3.1.0"
@@ -3699,13 +3568,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loupe@npm:^3.1.0, loupe@npm:^3.1.3":
-  version: 3.1.3
-  resolution: "loupe@npm:3.1.3"
-  checksum: 9b2530b1d5a44d2c9fc5241f97ea00296dca257173c535b4832bc31f9516e10387991feb5b3fff23df116c8fcf907ce3980f82b215dcc5d19cde17ce9b9ec3e1
-  languageName: node
-  linkType: hard
-
 "lru-cache@npm:^10.2.0":
   version: 10.4.3
   resolution: "lru-cache@npm:10.4.3"
@@ -3713,15 +3575,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "lz-string@npm:1.5.0"
-  bin:
-    lz-string: bin/bin.js
-  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
-  languageName: node
-  linkType: hard
-
 "markdown-extensions@npm:^2.0.0":
   version: 2.0.0
   resolution: "markdown-extensions@npm:2.0.0"
@@ -4233,13 +4086,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"min-indent@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "min-indent@npm:1.0.1"
-  checksum: bfc6dd03c5eaf623a4963ebd94d087f6f4bbbfd8c41329a7f09706b0cb66969c4ddd336abeb587bc44bc6f08e13bf90f0b374f9d71f9f01e04adc2cd6f083ef1
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -4607,13 +4453,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pathval@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "pathval@npm:2.0.0"
-  checksum: 682b6a6289de7990909effef7dae9aa7bb6218c0426727bccf66a35b34e7bfbc65615270c5e44e3c9557a5cb44b1b9ef47fc3cb18bce6ad3ba92bcd28467ed7d
-  languageName: node
-  linkType: hard
-
 "picocolors@npm:^1.0.0":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -4628,15 +4467,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"polished@npm:^4.2.2":
-  version: 4.3.1
-  resolution: "polished@npm:4.3.1"
-  dependencies:
-    "@babel/runtime": ^7.17.8
-  checksum: a6f863c23f1d2f3f5cda3427b5885c9fb9e83b036d681e24820b143c7df40d2685bebb01c0939767120a28e1183671ae17c93db82ac30b3c20942180bb153bc7
-  languageName: node
-  linkType: hard
-
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -4662,14 +4492,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.2":
-  version: 27.5.1
-  resolution: "pretty-format@npm:27.5.1"
-  dependencies:
-    ansi-regex: ^5.0.1
-    ansi-styles: ^5.0.0
-    react-is: ^17.0.1
-  checksum: cf610cffcb793885d16f184a62162f2dd0df31642d9a18edf4ca298e909a8fe80bdbf556d5c9573992c102ce8bf948691da91bf9739bee0ffb6e79c8a8a6e088
+"process@npm:^0.11.10":
+  version: 0.11.10
+  resolution: "process@npm:0.11.10"
+  checksum: bfcce49814f7d172a6e6a14d5fa3ac92cc3d0c3b9feb1279774708a719e19acd673995226351a082a9ae99978254e320ccda4240ddc474ba31a76c79491ca7c3
   languageName: node
   linkType: hard
 
@@ -4735,13 +4561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-is@npm:17.0.2"
-  checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
-  languageName: node
-  linkType: hard
-
 "react@npm:^18.0.2":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -4812,16 +4631,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redent@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "redent@npm:3.0.0"
-  dependencies:
-    indent-string: ^4.0.0
-    strip-indent: ^3.0.0
-  checksum: fa1ef20404a2d399235e83cc80bd55a956642e37dd197b4b612ba7327bf87fa32745aeb4a1634b2bab25467164ab4ed9c15be2c307923dd08b0fe7c52431ae6b
-  languageName: node
-  linkType: hard
-
 "reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9":
   version: 1.0.10
   resolution: "reflect.getprototypeof@npm:1.0.10"
@@ -5244,34 +5053,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook@npm:9.0.0-alpha.8":
-  version: 9.0.0-alpha.8
-  resolution: "storybook@npm:9.0.0-alpha.8"
+"storybook@npm:^8.6.8":
+  version: 8.6.8
+  resolution: "storybook@npm:8.6.8"
   dependencies:
-    "@storybook/global": ^5.0.0
-    "@testing-library/dom": 10.4.0
-    "@testing-library/jest-dom": ^6.6.3
-    "@testing-library/user-event": ^14.6.1
-    "@types/uuid": ^9.0.1
-    "@vitest/expect": 3.0.9
-    "@vitest/spy": 3.0.9
-    better-opn: ^3.0.2
-    esbuild: ^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0
-    esbuild-register: ^3.5.0
-    jsdoc-type-pratt-parser: ^4.0.0
-    polished: ^4.2.2
-    recast: ^0.23.5
-    semver: ^7.6.2
-    uuid: ^9.0.0
-    ws: ^8.18.0
+    "@storybook/core": 8.6.8
   peerDependencies:
     prettier: ^2 || ^3
   peerDependenciesMeta:
     prettier:
       optional: true
   bin:
+    getstorybook: ./bin/index.cjs
+    sb: ./bin/index.cjs
     storybook: ./bin/index.cjs
-  checksum: d48c9b2b05279bc0ee8eabeb505e9b662d576fbd8902311cf6694e1c1eb3ef960e417e20f656b6bc869c14b59bedc77c89b70b50575beb2caa24fcd92d3d15b6
+  checksum: 93b92e53c00ff29b4864932c26c52dd4a45e76b3d46811a2bcdc0271ef37c96e2f8d1833982569ab6a6348d6e84d8348aecf74ee72164744459de4c78d0f6759
   languageName: node
   linkType: hard
 
@@ -5419,15 +5215,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-indent@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "strip-indent@npm:3.0.0"
-  dependencies:
-    min-indent: ^1.0.0
-  checksum: 18f045d57d9d0d90cd16f72b2313d6364fd2cb4bf85b9f593523ad431c8720011a4d5f08b6591c9d580f446e78855c5334a30fb91aa1560f5d9f95ed1b4a0530
-  languageName: node
-  linkType: hard
-
 "strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
@@ -5504,20 +5291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyrainbow@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "tinyrainbow@npm:2.0.0"
-  checksum: 26360631d97e43955a07cfb70fe40a154ce4e2bcd14fa3d37ce8e2ed8f4fa9e5ba00783e4906bbfefe6dcabef5d3510f5bee207cb693bee4e4e7553f5454bef1
-  languageName: node
-  linkType: hard
-
-"tinyspy@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "tinyspy@npm:3.0.2"
-  checksum: 5db671b2ff5cd309de650c8c4761ca945459d7204afb1776db9a04fb4efa28a75f08517a8620c01ee32a577748802231ad92f7d5b194dc003ee7f987a2a06337
-  languageName: node
-  linkType: hard
-
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -5758,12 +5531,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"uuid@npm:^9.0.0":
-  version: 9.0.1
-  resolution: "uuid@npm:9.0.1"
-  bin:
-    uuid: dist/bin/uuid
-  checksum: 39931f6da74e307f51c0fb463dc2462807531dc80760a9bff1e35af4316131b4fc3203d16da60ae33f07fdca5b56f3f1dd662da0c99fea9aaeab2004780cc5f4
+"util@npm:^0.12.5":
+  version: 0.12.5
+  resolution: "util@npm:0.12.5"
+  dependencies:
+    inherits: ^2.0.3
+    is-arguments: ^1.0.4
+    is-generator-function: ^1.0.7
+    is-typed-array: ^1.1.3
+    which-typed-array: ^1.1.2
+  checksum: 705e51f0de5b446f4edec10739752ac25856541e0254ea1e7e45e5b9f9b0cb105bc4bd415736a6210edc68245a7f903bf085ffb08dd7deb8a0e847f60538a38a
   languageName: node
   linkType: hard
 
@@ -5840,17 +5617,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18":
-  version: 1.1.18
-  resolution: "which-typed-array@npm:1.1.18"
+"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18, which-typed-array@npm:^1.1.2":
+  version: 1.1.19
+  resolution: "which-typed-array@npm:1.1.19"
   dependencies:
     available-typed-arrays: ^1.0.7
     call-bind: ^1.0.8
-    call-bound: ^1.0.3
-    for-each: ^0.3.3
+    call-bound: ^1.0.4
+    for-each: ^0.3.5
+    get-proto: ^1.0.1
     gopd: ^1.2.0
     has-tostringtag: ^1.0.2
-  checksum: d2feea7f51af66b3a240397aa41c796585033e1069f18e5b6d4cd3878538a1e7780596fd3ea9bf347c43d9e98e13be09b37d9ea3887cef29b11bc291fd47bb52
+  checksum: 162d2a07f68ea323f88ed9419861487ce5d02cb876f2cf9dd1e428d04a63133f93a54f89308f337b27cabd312ee3d027cae4a79002b2f0a85b79b9ef4c190670
   languageName: node
   linkType: hard
 
@@ -5901,7 +5679,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.18.0":
+"ws@npm:^8.2.3":
   version: 8.18.1
   resolution: "ws@npm:8.18.1"
   peerDependencies:

From bbab6b6d9b05923bdedf71d05e4e1097e46285d0 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 23 Mar 2025 14:53:27 +0000
Subject: [PATCH 4/8] Update snippets

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/app/(docs)/components/box/page.mdx    |   4 +-
 .../app/(docs)/components/checkbox/page.mdx   |   7 +-
 .../app/(docs)/components/container/page.mdx  |   4 +-
 .../src/app/(docs)/components/field/page.mdx  |  11 +-
 .../src/app/(docs)/components/flex/page.mdx   |   4 +-
 .../src/app/(docs)/components/grid/page.mdx   |   4 +-
 .../app/(docs)/components/heading/page.mdx    |  12 +--
 .../(docs)/components/icon-button/page.mdx    |  19 ++--
 .../src/app/(docs)/components/icon/page.mdx   |   4 +-
 .../src/app/(docs)/components/input/page.mdx  |   6 +-
 .../src/app/(docs)/components/text/page.mdx   |  15 +--
 .../src/app/(docs)/theme/typography/page.mdx  |   8 +-
 .../src/app/(playground)/playground/page.tsx  |  19 ++--
 canon-docs/src/snippets/box.tsx               |  32 +++---
 canon-docs/src/snippets/checkbox.tsx          |  42 +++-----
 canon-docs/src/snippets/container.tsx         |  34 +++---
 canon-docs/src/snippets/field.tsx             |  34 +++---
 canon-docs/src/snippets/flex.tsx              |  41 +++----
 canon-docs/src/snippets/grid.tsx              |  36 +++----
 canon-docs/src/snippets/heading.tsx           |  52 +++------
 canon-docs/src/snippets/icon-button.tsx       |  73 ++++---------
 canon-docs/src/snippets/icon.tsx              |  19 +++-
 canon-docs/src/snippets/inline.tsx            |  47 --------
 canon-docs/src/snippets/input.tsx             |  43 +++-----
 canon-docs/src/snippets/text.tsx              | 102 +++---------------
 .../components/Heading/Heading.stories.tsx    |   5 +-
 packages/canon/src/components/Icon/icons.ts   |   2 +-
 packages/canon/src/components/Icon/types.ts   |   5 +-
 28 files changed, 238 insertions(+), 446 deletions(-)
 delete mode 100644 canon-docs/src/snippets/inline.tsx

diff --git a/canon-docs/src/app/(docs)/components/box/page.mdx b/canon-docs/src/app/(docs)/components/box/page.mdx
index c1413dbe19..1a96ffc621 100644
--- a/canon-docs/src/app/(docs)/components/box/page.mdx
+++ b/canon-docs/src/app/(docs)/components/box/page.mdx
@@ -2,7 +2,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { Snippet } from '@/components/Snippet';
-import { BoxPreview } from '@/snippets/box';
+import { BoxSnippet } from '@/snippets/box';
 import { boxPropDefs } from './props';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 
@@ -12,7 +12,7 @@ Box is the lowest-level component in Canon. It provides a consistent API for sty
 
 <Snippet
   py={4}
-  preview={<BoxPreview />}
+  preview={<BoxSnippet story="Preview" />}
   code={`<Box>
     <DecorativeBox />
 </Box>`}
diff --git a/canon-docs/src/app/(docs)/components/checkbox/page.mdx b/canon-docs/src/app/(docs)/components/checkbox/page.mdx
index fd2ec42e1b..42d67c7857 100644
--- a/canon-docs/src/app/(docs)/components/checkbox/page.mdx
+++ b/canon-docs/src/app/(docs)/components/checkbox/page.mdx
@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { CheckboxPreview, CheckboxAllVariants } from '@/snippets/checkbox';
+import { CheckboxSnippet } from '@/snippets/checkbox';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -11,8 +11,9 @@ import { checkboxPropDefs } from './props';
 A checkbox component that can be used to trigger actions.
 
 <Snippet
+  align="center"
   py={4}
-  preview={<CheckboxPreview />}
+  preview={<CheckboxSnippet story="Default" />}
   code={`<Checkbox label="Accept terms and conditions" />`}
 />
 
@@ -55,7 +56,7 @@ Here's a view when checkboxes have different variants.
   align="center"
   py={4}
   open
-  preview={<CheckboxAllVariants />}
+  preview={<CheckboxSnippet story="AllVariants" />}
   code={`<Inline alignY="center">
     <Checkbox />
     <Checkbox checked />
diff --git a/canon-docs/src/app/(docs)/components/container/page.mdx b/canon-docs/src/app/(docs)/components/container/page.mdx
index 0dbe0223e5..cd6b2d738d 100644
--- a/canon-docs/src/app/(docs)/components/container/page.mdx
+++ b/canon-docs/src/app/(docs)/components/container/page.mdx
@@ -2,7 +2,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { Snippet } from '@/components/Snippet';
-import { ContainerPreview } from '@/snippets/container';
+import { ContainerSnippet } from '@/snippets/container';
 import { containerPropDefs } from './props';
 
 # Container
@@ -12,7 +12,7 @@ content on the page.
 
 <Snippet
   py={4}
-  preview={<ContainerPreview />}
+  preview={<ContainerSnippet story="Preview" />}
   code={`<Container>
     <DecorativeBox />
 </Container>`}
diff --git a/canon-docs/src/app/(docs)/components/field/page.mdx b/canon-docs/src/app/(docs)/components/field/page.mdx
index 54c091faeb..ceaddcaac5 100644
--- a/canon-docs/src/app/(docs)/components/field/page.mdx
+++ b/canon-docs/src/app/(docs)/components/field/page.mdx
@@ -2,7 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { FieldPreview } from '@/snippets/field';
+import { FieldSnippet } from '@/snippets/field';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 import {
   fieldRootPropDefs,
@@ -15,7 +15,12 @@ import {
 
 A wrapper around `Input` or `Select` component to add label, description and error messages..
 
-<Snippet align="center" py={4} preview={<FieldPreview />} code={`<Field />`} />
+<Snippet
+  align="center"
+  py={4}
+  preview={<FieldSnippet story="Default" />}
+  code={`<Field />`}
+/>
 
 <Tabs.Root>
   <Tabs.List>
@@ -85,7 +90,7 @@ Here's a simple input with a label and description.
   align="center"
   py={4}
   open
-  preview={<FieldPreview />}
+  preview={<FieldSnippet story="WithLabelAndDescription" />}
   code={`<Field>
     <Field.Label>Name</Field.Label>
     <Field.Description>Visible on your profile</Field.Description>
diff --git a/canon-docs/src/app/(docs)/components/flex/page.mdx b/canon-docs/src/app/(docs)/components/flex/page.mdx
index 0e1a6a1fb8..3d0c22a90b 100644
--- a/canon-docs/src/app/(docs)/components/flex/page.mdx
+++ b/canon-docs/src/app/(docs)/components/flex/page.mdx
@@ -8,7 +8,7 @@ import {
   flexAlign,
 } from '@/snippets/_snippets';
 import { Snippet } from '@/components/Snippet';
-import { FlexPreview } from '@/snippets/flex';
+import { FlexSnippet } from '@/snippets/flex';
 import { flexPropDefs } from './props';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 
@@ -21,7 +21,7 @@ columns. All values are responsive.
 <Snippet
   py={4}
   align="center"
-  preview={<FlexPreview />}
+  preview={<FlexSnippet story="Default" />}
   code={`<Flex>
     <DecorativeBox />
     <DecorativeBox />
diff --git a/canon-docs/src/app/(docs)/components/grid/page.mdx b/canon-docs/src/app/(docs)/components/grid/page.mdx
index c57493b114..94f3eaec08 100644
--- a/canon-docs/src/app/(docs)/components/grid/page.mdx
+++ b/canon-docs/src/app/(docs)/components/grid/page.mdx
@@ -3,7 +3,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { grid } from '@/snippets/_snippets';
 import { Snippet } from '@/components/Snippet';
-import { GridPreview } from '@/snippets/grid';
+import { GridSnippet } from '@/snippets/grid';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 import { gridPropDefs, gridItemPropDefs } from './props';
 
@@ -14,7 +14,7 @@ more complex ones.
 
 <Snippet
   py={4}
-  preview={<GridPreview />}
+  preview={<GridSnippet story="Default" />}
   code={`<Grid>
     <DecorativeBox />
     <DecorativeBox />
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
index ad8131cdbd..98bdab6efb 100644
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ b/canon-docs/src/app/(docs)/components/heading/page.mdx
@@ -1,9 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import {
-  HeadingPreview,
-  HeadingAllVariants,
-  HeadingResponsive,
-} from '@/snippets/heading';
+import { HeadingSnippet } from '@/snippets/heading';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -15,7 +11,7 @@ Headings are used to structure the content of your page.
 
 <Snippet
   py={4}
-  preview={<HeadingPreview />}
+  preview={<HeadingSnippet story="Title1" />}
   code={`<Heading variant="title1">Hello World!</Heading>`}
 />
 
@@ -56,7 +52,7 @@ appearance of the heading.
 <Snippet
   py={2}
   open
-  preview={<HeadingAllVariants />}
+  preview={<HeadingSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Heading variant="display">Display</Heading>
     <Heading variant="title1">Title 1</Heading>
@@ -74,7 +70,7 @@ on the screen size.
 <Snippet
   py={4}
   open
-  preview={<HeadingResponsive />}
+  preview={<HeadingSnippet story="Responsive" />}
   code={`<Heading variant={{ initial: 'title2', lg: 'title1' }}>
     Responsive heading
   </Heading>`}
diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
index 28b6eefbf2..d1ea768a62 100644
--- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
@@ -2,12 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import {
-  IconButtonPreview,
-  IconButtonSizes,
-  IconButtonDisabled,
-  IconButtonResponsive,
-} from '@/snippets/icon-button';
+import { IconButtonSnippet } from '@/snippets/icon-button';
 import { iconButtonVariants } from '@/snippets/_snippets';
 import { iconButtonPropDefs } from './props';
 
@@ -18,11 +13,11 @@ A button component with a single icon that can be used to trigger actions.
 <Snippet
   align="center"
   py={4}
-  preview={<IconButtonPreview />}
+  preview={<IconButtonSnippet story="Variants" />}
   code={`<Flex align="center">
     <IconButton icon="cloud" variant="primary" />
     <IconButton icon="cloud" variant="secondary" />
-</Flex>`}
+  </Flex>`}
 />
 
 <Tabs.Root>
@@ -62,7 +57,7 @@ Here's a view when buttons have different variants.
   align="center"
   py={4}
   open
-  preview={<IconButtonPreview />}
+  preview={<IconButtonSnippet story="Variants" />}
   code={iconButtonVariants}
 />
 
@@ -74,7 +69,7 @@ Here's a view when buttons have different sizes.
   align="center"
   py={4}
   open
-  preview={<IconButtonSizes />}
+  preview={<IconButtonSnippet story="Sizes" />}
   code={`<Flex align="center">
     <IconButton icon="cloud" size="small" />
     <IconButton icon="cloud" size="medium" />
@@ -89,7 +84,7 @@ Here's a view when buttons are disabled.
   align="center"
   py={4}
   open
-  preview={<IconButtonDisabled />}
+  preview={<IconButtonSnippet story="Disabled" />}
   code={`<IconButton icon="cloud" disabled />`}
 />
 
@@ -101,6 +96,6 @@ Here's a view when buttons are responsive.
   align="center"
   py={4}
   open
-  preview={<IconButtonResponsive />}
+  preview={<IconButtonSnippet story="Responsive" />}
   code={`<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />`}
 />
diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
index 3d8d065374..78d8c85d01 100644
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon/page.mdx
@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { IconPreview } from '@/snippets/icon';
+import { IconSnippet } from '@/snippets/icon';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -12,7 +12,7 @@ Icons are used to represent an action or a state.
 <Snippet
   py={4}
   align="center"
-  preview={<IconPreview />}
+  preview={<IconSnippet story="Default" />}
   code={`<Icon name="heart" />`}
 />
 
diff --git a/canon-docs/src/app/(docs)/components/input/page.mdx b/canon-docs/src/app/(docs)/components/input/page.mdx
index 228ef68061..a74862a62e 100644
--- a/canon-docs/src/app/(docs)/components/input/page.mdx
+++ b/canon-docs/src/app/(docs)/components/input/page.mdx
@@ -2,7 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { InputPreview, InputSizes } from '@/snippets/input';
+import { InputSnippet } from '@/snippets/input';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 import { inputPropDefs } from './props';
 
@@ -13,7 +13,7 @@ A input component tfor your forms.
 <Snippet
   align="center"
   py={4}
-  preview={<InputPreview />}
+  preview={<InputSnippet story="Primary" />}
   code={`<Input label="Name" placeholder="Enter your name" />`}
 />
 
@@ -55,7 +55,7 @@ Here's a simple input with a label and description.
   align="center"
   py={4}
   open
-  preview={<InputSizes />}
+  preview={<InputSnippet story="Sizes" />}
   code={`<Grid>
     <Input size="sm" placeholder="Small" />
     <Input size="md" placeholder="Medium" />
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
index 9b904f84c4..ef18739199 100644
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ b/canon-docs/src/app/(docs)/components/text/page.mdx
@@ -1,10 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import {
-  TextPreview,
-  TextAllVariants,
-  TextResponsive,
-  TextAllWeights,
-} from '@/snippets/text';
+import { TextSnippet } from '@/snippets/text';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -16,7 +11,7 @@ The `Text` component is used to display content on your page.
 
 <Snippet
   py={4}
-  preview={<TextPreview />}
+  preview={<TextSnippet story="Default" />}
   code={`<Text style={{ maxWidth: '600px' }}>
     A man looks at a painting in a museum and says, “Brothers and sisters I
     have none, but that man&apos;s father is my father&apos;s son.” Who is in
@@ -60,7 +55,7 @@ appearance of the text.
 
 <Snippet
   open
-  preview={<TextAllVariants />}
+  preview={<TextSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Text variant="subtitle" style={{ maxWidth: '600px' }}>
       A man looks at a painting in a museum and says, “Brothers and sisters I
@@ -92,7 +87,7 @@ appearance of the text.
 
 <Snippet
   open
-  preview={<TextAllWeights />}
+  preview={<TextSnippet story="AllWeights" />}
   code={`<Flex direction="column" gap="4">
     <Text weight="regular" style={{ maxWidth: '600px' }}>
       A man looks at a painting in a museum and says, “Brothers and sisters I
@@ -114,7 +109,7 @@ on the screen size.
 
 <Snippet
   open
-  preview={<TextResponsive />}
+  preview={<TextSnippet story="Responsive" />}
   code={`<Text variant={{ initial: 'body', lg: 'subtitle' }}>
     Responsive text
   </Text>`}
diff --git a/canon-docs/src/app/(docs)/theme/typography/page.mdx b/canon-docs/src/app/(docs)/theme/typography/page.mdx
index 74b3144ef6..9ec36d6e8b 100644
--- a/canon-docs/src/app/(docs)/theme/typography/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/typography/page.mdx
@@ -1,5 +1,5 @@
-import { HeadingAllVariants } from '@/snippets/heading';
-import { TextAllVariants } from '@/snippets/text';
+import { HeadingSnippet } from '@/snippets/heading';
+import { TextSnippet } from '@/snippets/text';
 import { Snippet } from '@/components/Snippet';
 
 # Typography
@@ -20,7 +20,7 @@ component](?path=/docs/components-heading--docs).
 <Snippet
   py={2}
   open
-  preview={<HeadingAllVariants />}
+  preview={<HeadingSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Heading variant="display">Display</Heading>
     <Heading variant="title1">Title 1</Heading>
@@ -40,7 +40,7 @@ page.
 
 <Snippet
   open
-  preview={<TextAllVariants />}
+  preview={<TextSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Text variant="subtitle" style={{ maxWidth: '600px' }}>
       A man looks at a painting in a museum and says, “Brothers and sisters I
diff --git a/canon-docs/src/app/(playground)/playground/page.tsx b/canon-docs/src/app/(playground)/playground/page.tsx
index 354f07bb25..7184227a0a 100644
--- a/canon-docs/src/app/(playground)/playground/page.tsx
+++ b/canon-docs/src/app/(playground)/playground/page.tsx
@@ -5,10 +5,10 @@ import { Grid, Flex, Text } from '../../../../../packages/canon';
 import { screenSizes } from '@/utils/data';
 import { Frame } from '@/components/Frame';
 import { usePlayground } from '@/utils/playground-context';
-import { ButtonPlayground } from '@/snippets/button';
-import { CheckboxPlayground } from '@/snippets/checkbox';
-import { HeadingPlayground } from '@/snippets/heading';
-import { TextPlayground } from '@/snippets/text';
+import { ButtonSnippet } from '@/snippets/button';
+import { CheckboxSnippet } from '@/snippets/checkbox';
+import { HeadingSnippet } from '@/snippets/heading';
+import { TextSnippet } from '@/snippets/text';
 
 import styles from './styles.module.css';
 
@@ -55,16 +55,19 @@ const Content = () => {
   return (
     <Flex direction="column" gap="4">
       {selectedComponents.find(c => c === 'button') && (
-        <Line content={<ButtonPlayground />} title="Button" />
+        <Line content={<ButtonSnippet story="Playground" />} title="Button" />
       )}
       {selectedComponents.find(c => c === 'checkbox') && (
-        <Line content={<CheckboxPlayground />} title="Checkbox" />
+        <Line
+          content={<CheckboxSnippet story="Playground" />}
+          title="Checkbox"
+        />
       )}
       {selectedComponents.find(c => c === 'heading') && (
-        <Line content={<HeadingPlayground />} title="Heading" />
+        <Line content={<HeadingSnippet story="Playground" />} title="Heading" />
       )}
       {selectedComponents.find(c => c === 'text') && (
-        <Line content={<TextPlayground />} title="Text" />
+        <Line content={<TextSnippet story="Playground" />} title="Text" />
       )}
       {/* {selectedComponents.find(c => c === 'input') && (
         <Line content={<InputPlayground />} title="Input" />
diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx
index 2a99ebee7d..ff7725a5ad 100644
--- a/canon-docs/src/snippets/box.tsx
+++ b/canon-docs/src/snippets/box.tsx
@@ -1,20 +1,20 @@
 'use client';
 
-import { Box } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
 
-export const BoxPreview = () => {
-  return (
-    <Box
-      style={{
-        width: '64px',
-        height: '64px',
-        background: '#eaf2fd',
-        borderRadius: '4px',
-        border: '1px solid #2563eb',
-        color: '#2563eb',
-        backgroundImage:
-          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-      }}
-    />
-  );
+export const BoxSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(BoxStories);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Preview') return <stories.Preview />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx
index fe2a5b0219..fe71240d2d 100644
--- a/canon-docs/src/snippets/checkbox.tsx
+++ b/canon-docs/src/snippets/checkbox.tsx
@@ -1,32 +1,22 @@
 'use client';
 
-import { Checkbox, Flex, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
 
-export const CheckboxPreview = () => {
-  return <Checkbox label="Accept terms and conditions" />;
-};
+export const CheckboxSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(CheckboxStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const CheckboxAllVariants = () => {
-  return (
-    <Flex align="center">
-      <Checkbox />
-      <Checkbox checked />
-      <Checkbox label="Checkbox" />
-      <Checkbox label="Checkbox" checked />
-    </Flex>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const CheckboxPlayground = () => {
-  return (
-    <Flex direction="column">
-      <Text>All variants</Text>
-      <Flex align="center">
-        <Checkbox />
-        <Checkbox checked />
-        <Checkbox label="Checkbox" />
-        <Checkbox label="Checkbox" checked />
-      </Flex>
-    </Flex>
-  );
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'AllVariants') return <stories.AllVariants />;
+  if (story === 'Playground') return <stories.Playground />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
index 27c0ba9922..c73988c28e 100644
--- a/canon-docs/src/snippets/container.tsx
+++ b/canon-docs/src/snippets/container.tsx
@@ -1,24 +1,20 @@
 'use client';
 
-import { Box, Container } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
 
-const DecorativeBox = () => (
-  <Box
-    style={{
-      height: '64px',
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      border: '1px solid #2563eb',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    }}
-  />
-);
+export const ContainerSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(ContainerStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const ContainerPreview = () => {
-  return (
-    <Container>
-      <DecorativeBox />
-    </Container>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Preview') return <stories.Preview />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index e801d85641..dfe16a80a9 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,23 +1,21 @@
 'use client';
 
-import { Input, Field } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories';
 
-export const FieldPreview = () => {
-  return (
-    <div style={{ width: '300px' }}>
-      <Field.Root>
-        <Field.Label>Name</Field.Label>
-        <Input placeholder="Enter your name" />
-        <Field.Description>Visible on your profile</Field.Description>
-      </Field.Root>
-    </div>
-  );
-};
+export const FieldSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(FieldStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const InputPlayground = () => {
-  return (
-    <div style={{ maxWidth: '300px' }}>
-      <Input placeholder="Enter your name" />
-    </div>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'WithLabelAndDescription')
+    return <stories.WithLabelAndDescription />;
+  return null;
 };
diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx
index 8bfab8878e..d020a37537 100644
--- a/canon-docs/src/snippets/flex.tsx
+++ b/canon-docs/src/snippets/flex.tsx
@@ -1,31 +1,20 @@
 'use client';
 
-import { Flex } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
 
-const DecorativeBox = () => {
-  return (
-    <div
-      style={{
-        background: '#eaf2fd',
-        borderRadius: '4px',
-        boxShadow: '0 0 0 1px #2563eb',
-        height: '32px',
-        minWidth: '100px',
-        backgroundImage:
-          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-      }}
-    />
-  );
-};
+export const FlexSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(FlexStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const FlexPreview = () => {
-  return (
-    <div style={{ width: '320px' }}>
-      <Flex>
-        <DecorativeBox />
-        <DecorativeBox />
-        <DecorativeBox />
-      </Flex>
-    </div>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
index 87012b7630..8f72e8453c 100644
--- a/canon-docs/src/snippets/grid.tsx
+++ b/canon-docs/src/snippets/grid.tsx
@@ -1,26 +1,20 @@
 'use client';
 
-import { Box, Grid } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
 
-const FakeBox = () => (
-  <Box
-    style={{
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      boxShadow: '0 0 0 1px #2563eb',
-      height: '64px',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    }}
-  />
-);
+export const GridSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(GridStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const GridPreview = () => {
-  return (
-    <Grid>
-      <FakeBox />
-      <FakeBox />
-      <FakeBox />
-    </Grid>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx
index 484497e7a7..5ec970c4a7 100644
--- a/canon-docs/src/snippets/heading.tsx
+++ b/canon-docs/src/snippets/heading.tsx
@@ -1,42 +1,24 @@
 'use client';
 
-import { Heading, Flex, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
 
-export const HeadingPreview = () => {
-  return <Heading>Look mum, no hands!</Heading>;
-};
+export const HeadingSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(HeadingStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const HeadingAllVariants = () => {
-  return (
-    <Flex direction="column">
-      <Heading variant="display">Display</Heading>
-      <Heading variant="title1">Title 1</Heading>
-      <Heading variant="title2">Title 2</Heading>
-      <Heading variant="title3">Title 3</Heading>
-      <Heading variant="title4">Title 4</Heading>
-    </Flex>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const HeadingResponsive = () => {
-  return (
-    <Flex direction="column">
-      <Heading variant={{ initial: 'title2', lg: 'title1' }}>
-        Responsive heading
-      </Heading>
-    </Flex>
-  );
-};
+  if (!isReady) return null;
 
-export const HeadingPlayground = () => {
-  return (
-    <Flex direction="column">
-      <Text>All variants</Text>
-      <Heading variant="display">Display</Heading>
-      <Heading variant="title1">Title 1</Heading>
-      <Heading variant="title2">Title 2</Heading>
-      <Heading variant="title3">Title 3</Heading>
-      <Heading variant="title4">Title 4</Heading>
-    </Flex>
-  );
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'Title1') return <stories.Title1 />;
+  if (story === 'AllVariants') return <stories.AllVariants />;
+  if (story === 'Responsive') return <stories.Responsive />;
+  if (story === 'Playground') return <stories.Playground />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/icon-button.tsx b/canon-docs/src/snippets/icon-button.tsx
index 2079041456..954822cce6 100644
--- a/canon-docs/src/snippets/icon-button.tsx
+++ b/canon-docs/src/snippets/icon-button.tsx
@@ -1,57 +1,24 @@
 'use client';
 
-import { IconButton, Flex, ButtonProps, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
 
-export const IconButtonPreview = () => {
-  return (
-    <Flex align="center">
-      <IconButton icon="cloud" variant="primary" />
-      <IconButton icon="cloud" variant="secondary" />
-    </Flex>
-  );
-};
-
-export const IconButtonSizes = () => {
-  return (
-    <Flex align="center">
-      <IconButton icon="cloud" size="medium" />
-      <IconButton icon="cloud" size="small" />
-    </Flex>
-  );
-};
-
-export const IconButtonDisabled = () => {
-  return <IconButton icon="cloud" disabled />;
-};
-
-export const IconButtonResponsive = () => {
-  return (
-    <IconButton
-      icon="cloud"
-      variant={{ initial: 'primary', lg: 'secondary' }}
-    />
-  );
-};
-
-export const IconButtonPlayground = () => {
-  const variants: string[] = ['primary', 'secondary'];
-
-  return (
-    <Flex direction="column">
-      {variants.map(variant => (
-        <Flex direction="column" key={variant}>
-          <Text>{variant}</Text>
-          {['small', 'medium'].map(size => (
-            <Flex align="center" key={size}>
-              <IconButton
-                icon="cloud"
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-              />
-            </Flex>
-          ))}
-        </Flex>
-      ))}
-    </Flex>
-  );
+export const IconButtonSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(IconButtonStories);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Variants') return <stories.Variants />;
+  if (story === 'Sizes') return <stories.Sizes />;
+  if (story === 'Disabled') return <stories.Disabled />;
+  if (story === 'Responsive') return <stories.Responsive />;
+  if (story === 'Playground') return <stories.Playground />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx
index 126dbaf686..b0557ab2cd 100644
--- a/canon-docs/src/snippets/icon.tsx
+++ b/canon-docs/src/snippets/icon.tsx
@@ -1,7 +1,20 @@
 'use client';
 
-import { Icon } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
 
-export const IconPreview = () => {
-  return <Icon name="heart" />;
+export const IconSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(IconStories);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/inline.tsx b/canon-docs/src/snippets/inline.tsx
deleted file mode 100644
index 43fd56c650..0000000000
--- a/canon-docs/src/snippets/inline.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-
-import { Box, Flex } from '../../../packages/canon';
-
-const fakeBlockList = [
-  { width: 45, height: 60 },
-  { width: 150, height: 75 },
-  { width: 80, height: 50 },
-  { width: 120, height: 70 },
-  { width: 95, height: 65 },
-  { width: 80, height: 32 },
-  { width: 130, height: 60 },
-  { width: 100, height: 80 },
-  { width: 140, height: 45 },
-  { width: 85, height: 70 },
-  { width: 125, height: 50 },
-];
-
-const FakeBox = ({
-  width = 120,
-  height = 80,
-}: {
-  width?: number;
-  height?: number;
-}) => (
-  <Box
-    style={{
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      boxShadow: '0 0 0 1px #2563eb',
-      width,
-      height,
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    }}
-  />
-);
-
-export const InlinePreview = () => {
-  return (
-    <Flex>
-      {fakeBlockList.map((block, index) => (
-        <FakeBox key={index} width={block.width} height={block.height} />
-      ))}
-    </Flex>
-  );
-};
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index 69d0b62b7f..f4536cdde6 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,36 +1,21 @@
 'use client';
 
-import { Input, Grid } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
 
-export const InputPreview = () => {
-  return (
-    <div style={{ width: '300px' }}>
-      <Input placeholder="Enter your name" />
-    </div>
-  );
-};
+export const InputSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(InputStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const InputSizes = () => {
-  return (
-    <Grid style={{ width: '300px' }}>
-      <Input size="sm" placeholder="Small" />
-      <Input size="md" placeholder="Medium" />
-    </Grid>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const InputError = () => {
-  return (
-    <div style={{ width: '300px' }}>
-      <Input required />
-    </div>
-  );
-};
+  if (!isReady) return null;
 
-export const InputPlayground = () => {
-  return (
-    <div style={{ maxWidth: '300px' }}>
-      <Input placeholder="Enter your name" />
-    </div>
-  );
+  if (story === 'Primary') return <stories.Primary />;
+  if (story === 'Sizes') return <stories.Sizes />;
+
+  return null;
 };
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
index 4d39cbf6dd..e721dcc094 100644
--- a/canon-docs/src/snippets/text.tsx
+++ b/canon-docs/src/snippets/text.tsx
@@ -1,94 +1,24 @@
 'use client';
 
-import { Flex, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
 
-export const TextPreview = () => {
-  return (
-    <Text style={{ maxWidth: '600px' }}>
-      A man looks at a painting in a museum and says, “Brothers and sisters I
-      have none, but that man&apos;s father is my father&apos;s son.” Who is in
-      the painting?
-    </Text>
-  );
-};
+export const TextSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(TextStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const TextAllVariants = () => {
-  return (
-    <Flex direction="column">
-      <Text variant="subtitle" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="body" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="caption" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="label" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-    </Flex>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const TextAllWeights = () => {
-  return (
-    <Flex direction="column">
-      <Text weight="regular" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text weight="bold" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-    </Flex>
-  );
-};
+  if (!isReady) return null;
 
-export const TextResponsive = () => {
-  return (
-    <Text variant={{ initial: 'body', lg: 'subtitle' }}>Responsive text</Text>
-  );
-};
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'AllVariants') return <stories.AllVariants />;
+  if (story === 'AllWeights') return <stories.AllWeights />;
+  if (story === 'Responsive') return <stories.Responsive />;
+  if (story === 'Playground') return <stories.Playground />;
 
-export const TextPlayground = () => {
-  return (
-    <Flex direction="column">
-      <Text>Subtitle</Text>
-      <Text variant="subtitle" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text>Body</Text>
-      <Text variant="body" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text>Caption</Text>
-      <Text variant="caption" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text>Label</Text>
-      <Text variant="label" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-    </Flex>
-  );
+  return null;
 };
diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx
index 1357bde877..b4c0ab7546 100644
--- a/packages/canon/src/components/Heading/Heading.stories.tsx
+++ b/packages/canon/src/components/Heading/Heading.stories.tsx
@@ -42,7 +42,7 @@ export const Title1: Story = {
 
 export const AllVariants: Story = {
   render: () => (
-    <Flex>
+    <Flex direction="column" gap="4">
       <Heading variant="display">Display</Heading>
       <Heading variant="title1">Title 1</Heading>
       <Heading variant="title2">Title 2</Heading>
@@ -70,8 +70,7 @@ export const CustomTag: Story = {
 
 export const Playground: Story = {
   render: () => (
-    <Flex>
-      <Text>All variants</Text>
+    <Flex direction="column" gap="4">
       <Heading variant="display">Display</Heading>
       <Heading variant="title1">Title 1</Heading>
       <Heading variant="title2">Title 2</Heading>
diff --git a/packages/canon/src/components/Icon/icons.ts b/packages/canon/src/components/Icon/icons.ts
index 8cc862459c..615c918db7 100644
--- a/packages/canon/src/components/Icon/icons.ts
+++ b/packages/canon/src/components/Icon/icons.ts
@@ -130,4 +130,4 @@ export const icons: IconMap = {
   youtube: RiYoutubeLine,
   'zoom-in': RiZoomInLine,
   'zoom-out': RiZoomOutLine,
-};
+} as const;
diff --git a/packages/canon/src/components/Icon/types.ts b/packages/canon/src/components/Icon/types.ts
index 5cbdb8e147..4870a1afc4 100644
--- a/packages/canon/src/components/Icon/types.ts
+++ b/packages/canon/src/components/Icon/types.ts
@@ -15,6 +15,7 @@
  */
 
 import { ReactNode } from 'react';
+import type { RemixiconComponentType } from '@remixicon/react';
 
 /** @public */
 export type IconNames =
@@ -74,7 +75,7 @@ export type IconNames =
   | 'zoom-out';
 
 /** @public */
-export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
+export type IconMap = Partial<Record<IconNames, RemixiconComponentType>>;
 
 /** @public */
 export type IconProps = {
@@ -92,5 +93,5 @@ export interface IconContextProps {
 /** @public */
 export interface IconProviderProps {
   children?: ReactNode;
-  overrides?: Partial<Record<IconNames, React.ComponentType>>;
+  overrides?: Partial<Record<IconNames, RemixiconComponentType>>;
 }

From 5e80f0ba7e01064719a879a45422515798963a59 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 23 Mar 2025 14:58:57 +0000
Subject: [PATCH 5/8] Changeset + report

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/quick-carrots-open.md                          | 5 +++++
 packages/canon/report.api.md                              | 5 +++--
 packages/canon/src/components/Heading/Heading.stories.tsx | 1 -
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/quick-carrots-open.md

diff --git a/.changeset/quick-carrots-open.md b/.changeset/quick-carrots-open.md
new file mode 100644
index 0000000000..7cde586e64
--- /dev/null
+++ b/.changeset/quick-carrots-open.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Fix types on the Icon component.
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index e3d55339ea..6dfbc59ffb 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -13,6 +13,7 @@ import { default as React_2 } from 'react';
 import * as React_3 from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
+import type { RemixiconComponentType } from '@remixicon/react';
 import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-area';
 import { Tooltip as Tooltip_2 } from '@base-ui-components/react/tooltip';
 
@@ -636,7 +637,7 @@ export interface IconContextProps {
 }
 
 // @public (undocumented)
-export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
+export type IconMap = Partial<Record<IconNames, RemixiconComponentType>>;
 
 // @public (undocumented)
 export type IconNames =
@@ -711,7 +712,7 @@ export interface IconProviderProps {
   // (undocumented)
   children?: ReactNode;
   // (undocumented)
-  overrides?: Partial<Record<IconNames, React.ComponentType>>;
+  overrides?: Partial<Record<IconNames, RemixiconComponentType>>;
 }
 
 // @public (undocumented)
diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx
index b4c0ab7546..4b1d06aebd 100644
--- a/packages/canon/src/components/Heading/Heading.stories.tsx
+++ b/packages/canon/src/components/Heading/Heading.stories.tsx
@@ -18,7 +18,6 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Heading } from './Heading';
 import { Flex } from '../Flex';
-import { Text } from '../Text';
 
 const meta = {
   title: 'Components/Heading',

From e0dcdf687fabc95169bca9063103aacc5e84cda9 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sun, 23 Mar 2025 15:45:10 +0000
Subject: [PATCH 6/8] Fixed responsive values

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/app/(docs)/components/button/page.mdx  |  6 +-----
 .../src/app/(docs)/components/heading/page.mdx |  5 +----
 .../app/(docs)/components/icon-button/page.mdx |  6 +-----
 .../src/app/(docs)/components/text/page.mdx    |  4 +---
 canon-docs/src/snippets/box.tsx                |  8 --------
 canon-docs/src/snippets/button.tsx             |  8 --------
 canon-docs/src/snippets/checkbox.tsx           |  8 --------
 canon-docs/src/snippets/container.tsx          |  8 --------
 canon-docs/src/snippets/field.tsx              |  8 --------
 canon-docs/src/snippets/flex.tsx               |  8 --------
 canon-docs/src/snippets/grid.tsx               |  8 --------
 canon-docs/src/snippets/heading.tsx            |  8 --------
 canon-docs/src/snippets/icon-button.tsx        |  8 --------
 canon-docs/src/snippets/icon.tsx               |  8 --------
 canon-docs/src/snippets/input.tsx              |  8 --------
 canon-docs/src/snippets/text.tsx               |  8 --------
 .../canon/src/components/Flex/Flex.stories.tsx | 18 +++++++++++++++---
 17 files changed, 19 insertions(+), 116 deletions(-)

diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index 31d821772a..38eb819d4d 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -129,11 +129,7 @@ Here's a view when buttons are disabled.
 
 Here's a view when buttons are responsive.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<ButtonSnippet story="Responsive" />}
+<CodeBlock
   code={`<Button variant={{ initial: 'primary', lg: 'secondary' }}>
     Responsive Button
   </Button>`}
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
index 98bdab6efb..af4ea94648 100644
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ b/canon-docs/src/app/(docs)/components/heading/page.mdx
@@ -67,10 +67,7 @@ appearance of the heading.
 You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
-<Snippet
-  py={4}
-  open
-  preview={<HeadingSnippet story="Responsive" />}
+<CodeBlock
   code={`<Heading variant={{ initial: 'title2', lg: 'title1' }}>
     Responsive heading
   </Heading>`}
diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
index d1ea768a62..12eb8c61ce 100644
--- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
@@ -92,10 +92,6 @@ Here's a view when buttons are disabled.
 
 Here's a view when buttons are responsive.
 
-<Snippet
-  align="center"
-  py={4}
-  open
-  preview={<IconButtonSnippet story="Responsive" />}
+<CodeBlock
   code={`<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />`}
 />
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
index ef18739199..877f953c43 100644
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ b/canon-docs/src/app/(docs)/components/text/page.mdx
@@ -107,9 +107,7 @@ appearance of the text.
 You can also use the `variant` prop to change the appearance of the text based
 on the screen size.
 
-<Snippet
-  open
-  preview={<TextSnippet story="Responsive" />}
+<CodeBlock
   code={`<Text variant={{ initial: 'body', lg: 'subtitle' }}>
     Responsive text
   </Text>`}
diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx
index ff7725a5ad..df254b9f7e 100644
--- a/canon-docs/src/snippets/box.tsx
+++ b/canon-docs/src/snippets/box.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
 
 export const BoxSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(BoxStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Preview') return <stories.Preview />;
 
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
index e1b60fa72a..eaf87c7dce 100644
--- a/canon-docs/src/snippets/button.tsx
+++ b/canon-docs/src/snippets/button.tsx
@@ -2,17 +2,9 @@
 
 import { composeStories } from '@storybook/react';
 import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
-import { useEffect, useState } from 'react';
 
 export const ButtonSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(ButtonStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Variants') return <stories.Variants />;
   if (story === 'Sizes') return <stories.Sizes />;
diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx
index fe71240d2d..888f24c228 100644
--- a/canon-docs/src/snippets/checkbox.tsx
+++ b/canon-docs/src/snippets/checkbox.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
 
 export const CheckboxSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(CheckboxStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'AllVariants') return <stories.AllVariants />;
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
index c73988c28e..9faa6e06e2 100644
--- a/canon-docs/src/snippets/container.tsx
+++ b/canon-docs/src/snippets/container.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
 
 export const ContainerSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(ContainerStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Preview') return <stories.Preview />;
 
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index dfe16a80a9..2c913472d7 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories';
 
 export const FieldSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(FieldStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'WithLabelAndDescription')
diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx
index d020a37537..c4fc40926e 100644
--- a/canon-docs/src/snippets/flex.tsx
+++ b/canon-docs/src/snippets/flex.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
 
 export const FlexSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(FlexStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
index 8f72e8453c..1a41fe8ee6 100644
--- a/canon-docs/src/snippets/grid.tsx
+++ b/canon-docs/src/snippets/grid.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
 
 export const GridSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(GridStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 
diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx
index 5ec970c4a7..b4e3ac9997 100644
--- a/canon-docs/src/snippets/heading.tsx
+++ b/canon-docs/src/snippets/heading.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
 
 export const HeadingSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(HeadingStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'Title1') return <stories.Title1 />;
diff --git a/canon-docs/src/snippets/icon-button.tsx b/canon-docs/src/snippets/icon-button.tsx
index 954822cce6..b346d0be4f 100644
--- a/canon-docs/src/snippets/icon-button.tsx
+++ b/canon-docs/src/snippets/icon-button.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
 
 export const IconButtonSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(IconButtonStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Variants') return <stories.Variants />;
   if (story === 'Sizes') return <stories.Sizes />;
diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx
index b0557ab2cd..978af55204 100644
--- a/canon-docs/src/snippets/icon.tsx
+++ b/canon-docs/src/snippets/icon.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
 
 export const IconSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(IconStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
 
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index f4536cdde6..00f5dc5a01 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
 
 export const InputSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(InputStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Primary') return <stories.Primary />;
   if (story === 'Sizes') return <stories.Sizes />;
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
index e721dcc094..b42f58b877 100644
--- a/canon-docs/src/snippets/text.tsx
+++ b/canon-docs/src/snippets/text.tsx
@@ -1,18 +1,10 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { composeStories } from '@storybook/react';
 import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
 
 export const TextSnippet = ({ story }: { story: string }) => {
   const stories = composeStories(TextStories);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    setIsReady(true);
-  }, [story]);
-
-  if (!isReady) return null;
 
   if (story === 'Default') return <stories.Default />;
   if (story === 'AllVariants') return <stories.AllVariants />;
diff --git a/packages/canon/src/components/Flex/Flex.stories.tsx b/packages/canon/src/components/Flex/Flex.stories.tsx
index 3b7a7a07c5..58f96ce157 100644
--- a/packages/canon/src/components/Flex/Flex.stories.tsx
+++ b/packages/canon/src/components/Flex/Flex.stories.tsx
@@ -61,21 +61,33 @@ const DecorativeBox = () => {
 
 export const Default: Story = {
   args: {
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };
 
 export const ColumnDirection: Story = {
   args: {
     direction: 'column',
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };
 
 export const RowDirection: Story = {
   args: {
     direction: 'row',
-    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+    children: (
+      <>
+        <DecorativeBox />, <DecorativeBox />, <DecorativeBox />
+      </>
+    ),
   },
 };
 

From b6e92d89252df5d7eb3c2afe8ff938560cc9f355 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 25 Mar 2025 13:32:12 +0000
Subject: [PATCH 7/8] Code update

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/app/(docs)/components/box/page.mdx    |   2 +-
 .../src/app/(docs)/components/button/page.mdx |   4 +-
 .../app/(docs)/components/checkbox/page.mdx   |   2 +-
 .../app/(docs)/components/container/page.mdx  |   2 +-
 .../src/app/(docs)/components/field/page.mdx  |   2 +-
 .../src/app/(docs)/components/flex/page.mdx   |   4 +-
 .../src/app/(docs)/components/grid/page.mdx   |   4 +-
 .../app/(docs)/components/heading/page.mdx    |   2 +-
 .../(docs)/components/icon-button/page.mdx    |   4 +-
 .../src/app/(docs)/components/icon/page.mdx   |   2 +-
 .../src/app/(docs)/components/input/page.mdx  |   2 +-
 .../src/app/(docs)/components/text/page.mdx   |   2 +-
 .../src/app/(docs)/theme/theming/page.mdx     |   2 +-
 .../src/app/(docs)/theme/typography/page.mdx  |   3 +-
 .../src/app/(playground)/playground/page.tsx  |  10 +-
 canon-docs/src/snippets/box.tsx               |  12 --
 canon-docs/src/snippets/button.tsx            |  18 ---
 canon-docs/src/snippets/checkbox.tsx          |  14 --
 .../{_snippets.ts => code-snippets.ts}        |   0
 canon-docs/src/snippets/container.tsx         |  12 --
 canon-docs/src/snippets/field.tsx             |  13 --
 canon-docs/src/snippets/flex.tsx              |  12 --
 canon-docs/src/snippets/grid.tsx              |  12 --
 canon-docs/src/snippets/heading.tsx           |  16 ---
 canon-docs/src/snippets/icon-button.tsx       |  16 ---
 canon-docs/src/snippets/icon.tsx              |  12 --
 canon-docs/src/snippets/input.tsx             |  13 --
 canon-docs/src/snippets/stories-snippets.tsx  | 126 ++++++++++++++++++
 canon-docs/src/snippets/text.tsx              |  16 ---
 29 files changed, 150 insertions(+), 189 deletions(-)
 delete mode 100644 canon-docs/src/snippets/box.tsx
 delete mode 100644 canon-docs/src/snippets/button.tsx
 delete mode 100644 canon-docs/src/snippets/checkbox.tsx
 rename canon-docs/src/snippets/{_snippets.ts => code-snippets.ts} (100%)
 delete mode 100644 canon-docs/src/snippets/container.tsx
 delete mode 100644 canon-docs/src/snippets/field.tsx
 delete mode 100644 canon-docs/src/snippets/flex.tsx
 delete mode 100644 canon-docs/src/snippets/grid.tsx
 delete mode 100644 canon-docs/src/snippets/heading.tsx
 delete mode 100644 canon-docs/src/snippets/icon-button.tsx
 delete mode 100644 canon-docs/src/snippets/icon.tsx
 delete mode 100644 canon-docs/src/snippets/input.tsx
 create mode 100644 canon-docs/src/snippets/stories-snippets.tsx
 delete mode 100644 canon-docs/src/snippets/text.tsx

diff --git a/canon-docs/src/app/(docs)/components/box/page.mdx b/canon-docs/src/app/(docs)/components/box/page.mdx
index 1a96ffc621..25ce3b6cd8 100644
--- a/canon-docs/src/app/(docs)/components/box/page.mdx
+++ b/canon-docs/src/app/(docs)/components/box/page.mdx
@@ -2,7 +2,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { Snippet } from '@/components/Snippet';
-import { BoxSnippet } from '@/snippets/box';
+import { BoxSnippet } from '@/snippets/stories-snippets';
 import { boxPropDefs } from './props';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 
diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index 38eb819d4d..e1ecee8920 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -2,8 +2,8 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { ButtonSnippet } from '@/snippets/button';
-import { buttonVariants } from '@/snippets/_snippets';
+import { ButtonSnippet } from '@/snippets/stories-snippets';
+import { buttonVariants } from '@/snippets/code-snippets';
 import { buttonPropDefs } from './props';
 
 # Button
diff --git a/canon-docs/src/app/(docs)/components/checkbox/page.mdx b/canon-docs/src/app/(docs)/components/checkbox/page.mdx
index 42d67c7857..413636dc9a 100644
--- a/canon-docs/src/app/(docs)/components/checkbox/page.mdx
+++ b/canon-docs/src/app/(docs)/components/checkbox/page.mdx
@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { CheckboxSnippet } from '@/snippets/checkbox';
+import { CheckboxSnippet } from '@/snippets/stories-snippets';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
diff --git a/canon-docs/src/app/(docs)/components/container/page.mdx b/canon-docs/src/app/(docs)/components/container/page.mdx
index cd6b2d738d..40f0321624 100644
--- a/canon-docs/src/app/(docs)/components/container/page.mdx
+++ b/canon-docs/src/app/(docs)/components/container/page.mdx
@@ -2,7 +2,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { Snippet } from '@/components/Snippet';
-import { ContainerSnippet } from '@/snippets/container';
+import { ContainerSnippet } from '@/snippets/stories-snippets';
 import { containerPropDefs } from './props';
 
 # Container
diff --git a/canon-docs/src/app/(docs)/components/field/page.mdx b/canon-docs/src/app/(docs)/components/field/page.mdx
index ceaddcaac5..1526ce8c9f 100644
--- a/canon-docs/src/app/(docs)/components/field/page.mdx
+++ b/canon-docs/src/app/(docs)/components/field/page.mdx
@@ -2,7 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { FieldSnippet } from '@/snippets/field';
+import { FieldSnippet } from '@/snippets/stories-snippets';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 import {
   fieldRootPropDefs,
diff --git a/canon-docs/src/app/(docs)/components/flex/page.mdx b/canon-docs/src/app/(docs)/components/flex/page.mdx
index 3d0c22a90b..8150f3e3c5 100644
--- a/canon-docs/src/app/(docs)/components/flex/page.mdx
+++ b/canon-docs/src/app/(docs)/components/flex/page.mdx
@@ -6,9 +6,9 @@ import {
   flexSimple,
   flexResponsive,
   flexAlign,
-} from '@/snippets/_snippets';
+} from '@/snippets/code-snippets';
 import { Snippet } from '@/components/Snippet';
-import { FlexSnippet } from '@/snippets/flex';
+import { FlexSnippet } from '@/snippets/stories-snippets';
 import { flexPropDefs } from './props';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 
diff --git a/canon-docs/src/app/(docs)/components/grid/page.mdx b/canon-docs/src/app/(docs)/components/grid/page.mdx
index 94f3eaec08..c8604076eb 100644
--- a/canon-docs/src/app/(docs)/components/grid/page.mdx
+++ b/canon-docs/src/app/(docs)/components/grid/page.mdx
@@ -1,9 +1,9 @@
 import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
-import { grid } from '@/snippets/_snippets';
+import { grid } from '@/snippets/code-snippets';
 import { Snippet } from '@/components/Snippet';
-import { GridSnippet } from '@/snippets/grid';
+import { GridSnippet } from '@/snippets/stories-snippets';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 import { gridPropDefs, gridItemPropDefs } from './props';
 
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
index af4ea94648..10fd60bef1 100644
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ b/canon-docs/src/app/(docs)/components/heading/page.mdx
@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { HeadingSnippet } from '@/snippets/heading';
+import { HeadingSnippet } from '@/snippets/stories-snippets';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
index 12eb8c61ce..60530ec9ea 100644
--- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon-button/page.mdx
@@ -2,8 +2,8 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { IconButtonSnippet } from '@/snippets/icon-button';
-import { iconButtonVariants } from '@/snippets/_snippets';
+import { IconButtonSnippet } from '@/snippets/stories-snippets';
+import { iconButtonVariants } from '@/snippets/code-snippets';
 import { iconButtonPropDefs } from './props';
 
 # Icon Button
diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
index 78d8c85d01..66be460d13 100644
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon/page.mdx
@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { IconSnippet } from '@/snippets/icon';
+import { IconSnippet } from '@/snippets/stories-snippets';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
diff --git a/canon-docs/src/app/(docs)/components/input/page.mdx b/canon-docs/src/app/(docs)/components/input/page.mdx
index a74862a62e..0ecaaa5409 100644
--- a/canon-docs/src/app/(docs)/components/input/page.mdx
+++ b/canon-docs/src/app/(docs)/components/input/page.mdx
@@ -2,7 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { InputSnippet } from '@/snippets/input';
+import { InputSnippet } from '@/snippets/stories-snippets';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 import { inputPropDefs } from './props';
 
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
index 877f953c43..70d5de5504 100644
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ b/canon-docs/src/app/(docs)/components/text/page.mdx
@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { TextSnippet } from '@/snippets/text';
+import { TextSnippet } from '@/snippets/stories-snippets';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx
index cab9480a14..e3fc42da44 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx
@@ -1,7 +1,7 @@
 import { CodeBlock } from '@/components/CodeBlock';
 import * as Table from '@/components/Table';
 import { Chip } from '@/components/Chip';
-import { customTheme } from '@/snippets/_snippets';
+import { customTheme } from '@/snippets/code-snippets';
 
 # Theming
 
diff --git a/canon-docs/src/app/(docs)/theme/typography/page.mdx b/canon-docs/src/app/(docs)/theme/typography/page.mdx
index 9ec36d6e8b..98a342bc91 100644
--- a/canon-docs/src/app/(docs)/theme/typography/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/typography/page.mdx
@@ -1,5 +1,4 @@
-import { HeadingSnippet } from '@/snippets/heading';
-import { TextSnippet } from '@/snippets/text';
+import { HeadingSnippet, TextSnippet } from '@/snippets/stories-snippets';
 import { Snippet } from '@/components/Snippet';
 
 # Typography
diff --git a/canon-docs/src/app/(playground)/playground/page.tsx b/canon-docs/src/app/(playground)/playground/page.tsx
index 7184227a0a..3f1675551e 100644
--- a/canon-docs/src/app/(playground)/playground/page.tsx
+++ b/canon-docs/src/app/(playground)/playground/page.tsx
@@ -5,10 +5,12 @@ import { Grid, Flex, Text } from '../../../../../packages/canon';
 import { screenSizes } from '@/utils/data';
 import { Frame } from '@/components/Frame';
 import { usePlayground } from '@/utils/playground-context';
-import { ButtonSnippet } from '@/snippets/button';
-import { CheckboxSnippet } from '@/snippets/checkbox';
-import { HeadingSnippet } from '@/snippets/heading';
-import { TextSnippet } from '@/snippets/text';
+import {
+  ButtonSnippet,
+  CheckboxSnippet,
+  HeadingSnippet,
+  TextSnippet,
+} from '@/snippets/stories-snippets';
 
 import styles from './styles.module.css';
 
diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx
deleted file mode 100644
index df254b9f7e..0000000000
--- a/canon-docs/src/snippets/box.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
-
-export const BoxSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(BoxStories);
-
-  if (story === 'Preview') return <stories.Preview />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx
deleted file mode 100644
index eaf87c7dce..0000000000
--- a/canon-docs/src/snippets/button.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
-
-export const ButtonSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(ButtonStories);
-
-  if (story === 'Variants') return <stories.Variants />;
-  if (story === 'Sizes') return <stories.Sizes />;
-  if (story === 'WithIcons') return <stories.WithIcons />;
-  if (story === 'FullWidth') return <stories.FullWidth />;
-  if (story === 'Disabled') return <stories.Disabled />;
-  if (story === 'Responsive') return <stories.Responsive />;
-  if (story === 'Playground') return <stories.Playground />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx
deleted file mode 100644
index 888f24c228..0000000000
--- a/canon-docs/src/snippets/checkbox.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
-
-export const CheckboxSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(CheckboxStories);
-
-  if (story === 'Default') return <stories.Default />;
-  if (story === 'AllVariants') return <stories.AllVariants />;
-  if (story === 'Playground') return <stories.Playground />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/_snippets.ts b/canon-docs/src/snippets/code-snippets.ts
similarity index 100%
rename from canon-docs/src/snippets/_snippets.ts
rename to canon-docs/src/snippets/code-snippets.ts
diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx
deleted file mode 100644
index 9faa6e06e2..0000000000
--- a/canon-docs/src/snippets/container.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
-
-export const ContainerSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(ContainerStories);
-
-  if (story === 'Preview') return <stories.Preview />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
deleted file mode 100644
index 2c913472d7..0000000000
--- a/canon-docs/src/snippets/field.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories';
-
-export const FieldSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(FieldStories);
-
-  if (story === 'Default') return <stories.Default />;
-  if (story === 'WithLabelAndDescription')
-    return <stories.WithLabelAndDescription />;
-  return null;
-};
diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx
deleted file mode 100644
index c4fc40926e..0000000000
--- a/canon-docs/src/snippets/flex.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
-
-export const FlexSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(FlexStories);
-
-  if (story === 'Default') return <stories.Default />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx
deleted file mode 100644
index 1a41fe8ee6..0000000000
--- a/canon-docs/src/snippets/grid.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
-
-export const GridSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(GridStories);
-
-  if (story === 'Default') return <stories.Default />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx
deleted file mode 100644
index b4e3ac9997..0000000000
--- a/canon-docs/src/snippets/heading.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
-
-export const HeadingSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(HeadingStories);
-
-  if (story === 'Default') return <stories.Default />;
-  if (story === 'Title1') return <stories.Title1 />;
-  if (story === 'AllVariants') return <stories.AllVariants />;
-  if (story === 'Responsive') return <stories.Responsive />;
-  if (story === 'Playground') return <stories.Playground />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/icon-button.tsx b/canon-docs/src/snippets/icon-button.tsx
deleted file mode 100644
index b346d0be4f..0000000000
--- a/canon-docs/src/snippets/icon-button.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
-
-export const IconButtonSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(IconButtonStories);
-
-  if (story === 'Variants') return <stories.Variants />;
-  if (story === 'Sizes') return <stories.Sizes />;
-  if (story === 'Disabled') return <stories.Disabled />;
-  if (story === 'Responsive') return <stories.Responsive />;
-  if (story === 'Playground') return <stories.Playground />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx
deleted file mode 100644
index 978af55204..0000000000
--- a/canon-docs/src/snippets/icon.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
-
-export const IconSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(IconStories);
-
-  if (story === 'Default') return <stories.Default />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
deleted file mode 100644
index 00f5dc5a01..0000000000
--- a/canon-docs/src/snippets/input.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
-
-export const InputSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(InputStories);
-
-  if (story === 'Primary') return <stories.Primary />;
-  if (story === 'Sizes') return <stories.Sizes />;
-
-  return null;
-};
diff --git a/canon-docs/src/snippets/stories-snippets.tsx b/canon-docs/src/snippets/stories-snippets.tsx
new file mode 100644
index 0000000000..e7cc92811d
--- /dev/null
+++ b/canon-docs/src/snippets/stories-snippets.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import { composeStories } from '@storybook/react';
+import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
+import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories';
+import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
+import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
+import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories';
+import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
+import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
+import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
+import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
+import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
+import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
+import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
+export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
+  const stories = composeStories(BoxStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const ButtonSnippet = ({
+  story,
+}: {
+  story: keyof typeof ButtonStories;
+}) => {
+  const stories = composeStories(ButtonStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const CheckboxSnippet = ({
+  story,
+}: {
+  story: keyof typeof CheckboxStories;
+}) => {
+  const stories = composeStories(CheckboxStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const ContainerSnippet = ({
+  story,
+}: {
+  story: keyof typeof ContainerStories;
+}) => {
+  const stories = composeStories(ContainerStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const FlexSnippet = ({ story }: { story: keyof typeof FlexStories }) => {
+  const stories = composeStories(FlexStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const FieldSnippet = ({
+  story,
+}: {
+  story: keyof typeof FieldStories;
+}) => {
+  const stories = composeStories(FieldStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const GridSnippet = ({ story }: { story: keyof typeof GridStories }) => {
+  const stories = composeStories(GridStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const HeadingSnippet = ({
+  story,
+}: {
+  story: keyof typeof HeadingStories;
+}) => {
+  const stories = composeStories(HeadingStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const IconButtonSnippet = ({
+  story,
+}: {
+  story: keyof typeof IconButtonStories;
+}) => {
+  const stories = composeStories(IconButtonStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const IconSnippet = ({ story }: { story: keyof typeof IconStories }) => {
+  const stories = composeStories(IconStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const InputSnippet = ({
+  story,
+}: {
+  story: keyof typeof InputStories;
+}) => {
+  const stories = composeStories(InputStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
+
+export const TextSnippet = ({ story }: { story: keyof typeof TextStories }) => {
+  const stories = composeStories(TextStories);
+  const StoryComponent = stories[story as keyof typeof stories];
+
+  return StoryComponent ? <StoryComponent /> : null;
+};
diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx
deleted file mode 100644
index b42f58b877..0000000000
--- a/canon-docs/src/snippets/text.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client';
-
-import { composeStories } from '@storybook/react';
-import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
-
-export const TextSnippet = ({ story }: { story: string }) => {
-  const stories = composeStories(TextStories);
-
-  if (story === 'Default') return <stories.Default />;
-  if (story === 'AllVariants') return <stories.AllVariants />;
-  if (story === 'AllWeights') return <stories.AllWeights />;
-  if (story === 'Responsive') return <stories.Responsive />;
-  if (story === 'Playground') return <stories.Playground />;
-
-  return null;
-};

From fc2860c10258a52b229b12394da10a2e7d440d1d Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 25 Mar 2025 14:02:45 +0000
Subject: [PATCH 8/8] Update stories-snippets.tsx

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/src/snippets/stories-snippets.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/canon-docs/src/snippets/stories-snippets.tsx b/canon-docs/src/snippets/stories-snippets.tsx
index e7cc92811d..76137e9b82 100644
--- a/canon-docs/src/snippets/stories-snippets.tsx
+++ b/canon-docs/src/snippets/stories-snippets.tsx
@@ -13,6 +13,7 @@ import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.s
 import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
 import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
 import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
+
 export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => {
   const stories = composeStories(BoxStories);
   const StoryComponent = stories[story as keyof typeof stories];