diff --git a/package-lock.json b/package-lock.json
index 607dc8b6f6..9ed5c2cee7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@babel/cli": "^7.25.7",
         "@babel/core": "^7.25.7",
         "@babel/preset-env": "^7.25.7",
+        "@chromatic-com/storybook": "^3.2.2",
         "@docsearch/js": "^3.6.2",
         "@percy/cli": "^1.30.2",
         "@popperjs/core": "^2.11.8",
@@ -20,14 +21,14 @@
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-replace": "^6.0.1",
         "@stackblitz/sdk": "^1.11.0",
-        "@storybook/addon-a11y": "^8.4.2",
-        "@storybook/addon-essentials": "^8.4.2",
-        "@storybook/addon-themes": "^8.4.2",
-        "@storybook/blocks": "^8.4.2",
-        "@storybook/html": "^8.4.2",
-        "@storybook/html-vite": "^8.4.2",
-        "@storybook/manager-api": "^8.4.2",
-        "@storybook/test": "^8.4.2",
+        "@storybook/addon-a11y": "^8.4.5",
+        "@storybook/addon-essentials": "^8.4.5",
+        "@storybook/addon-themes": "^8.4.5",
+        "@storybook/blocks": "^8.4.5",
+        "@storybook/html": "^8.4.5",
+        "@storybook/html-vite": "^8.4.5",
+        "@storybook/manager-api": "^8.4.5",
+        "@storybook/test": "^8.4.5",
         "autoprefixer": "^10.4.20",
         "babel-loader": "^9.2.1",
         "bundlewatch": "^0.4.0",
@@ -73,7 +74,7 @@
         "sass-true": "^8.1.0",
         "shelljs": "^0.8.5",
         "sirv-cli": "^3.0.0",
-        "storybook": "^8.4.2",
+        "storybook": "^8.4.5",
         "stylelint": "^16.9.0",
         "stylelint-config-twbs-bootstrap": "^15.1.0",
         "tarteaucitronjs": "^1.19.0",
@@ -1877,6 +1878,53 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@chromatic-com/storybook": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-3.2.2.tgz",
+      "integrity": "sha512-xmXt/GW0hAPbzNTrxYuVo43Adrtjue4DeVrsoIIEeJdGaPNNeNf+DHMlJKOBdlHmCnFUoe9R/0mLM9zUp5bKWw==",
+      "dev": true,
+      "dependencies": {
+        "chromatic": "^11.15.0",
+        "filesize": "^10.0.12",
+        "jsonfile": "^6.1.0",
+        "react-confetti": "^6.1.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "yarn": ">=1.22.18"
+      },
+      "peerDependencies": {
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
+      }
+    },
+    "node_modules/@chromatic-com/storybook/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@chromatic-com/storybook/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -3445,12 +3493,12 @@
       "dev": true
     },
     "node_modules/@storybook/addon-a11y": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.4.2.tgz",
-      "integrity": "sha512-v6Tl+qr3Eslf06qmt2hq1ticYi7oRLIFosePQUOlW1+cgdIbV+r1IxsZ7creCDWX4kIMTbUFhbET9LTYGHem1A==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.4.5.tgz",
+      "integrity": "sha512-lqIOpWJZNR0Ur+2zUcnFAMvdOe7kYEDeXPv1TM7fwEGyzKPYoM/k5xPA2cJCrYwtydxOqqrmn1jUIw0Qdkhuhg==",
       "dev": true,
       "dependencies": {
-        "@storybook/addon-highlight": "8.4.2",
+        "@storybook/addon-highlight": "8.4.5",
         "axe-core": "^4.2.0"
       },
       "funding": {
@@ -3458,13 +3506,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.4.2.tgz",
-      "integrity": "sha512-+hA200XN5aeA4T3jq8IifQq6Y+9FyNQ0Q+blM1L0Tl7WLzBc7B1kHQnKvhSj5pvMSBWc/Q/kY7Ev5t9gdOu13g==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.4.5.tgz",
+      "integrity": "sha512-rbB19uiGJ61XHbKIbS1a9bUS6re5L8rT5NMNeEJhCxXRpFUPrlTXMSoD/Pgcn3ENeEMVZsm8/eCzxAVgAP3Mgg==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -3478,13 +3526,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.4.2.tgz",
-      "integrity": "sha512-s4uag5VKuk8q2MSnuNS7Sv+v1/mykzGPXe/zZRW2ammtkdHp8Uy78eQS2G0aiG02chXCX+qQgWMyy5QItDcTFQ==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.4.5.tgz",
+      "integrity": "sha512-FeMt4qHCMYDQiLGGDKiRuSPXFup2WXOaZSdL137v1W36wEL/vGkK1A5iQt1qJ8MZzL5WZQuedox8rSybFy7eow==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -3496,13 +3544,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.4.2.tgz",
-      "integrity": "sha512-raCbHEj1xl4F3wKH6IdfEXNRaxKpY4QGhjSTE8Pte5iJSVhKG86taLqqRr+4dC7H1/LVMPU1XCGV4mkgDGtyxQ==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.4.5.tgz",
+      "integrity": "sha512-RVTtDDuESLYc1+SJQv2kI7wzBddzAS9uoEe8P75quN6S4pC0GxAB6xirWZ2+WOcba4eHosY+PxMwuBXQfH78Ew==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -3514,19 +3562,19 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.4.2.tgz",
-      "integrity": "sha512-jIpykha7hv2Inlrq31ZoYg2QhuCuvcO+Q+uvhT45RDTB+2US/fg3rJINKlw2Djq8RPPOXvty5W0yvE6CrWKhnQ==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.4.5.tgz",
+      "integrity": "sha512-zPELIl7wXormOylVaaSpkUIuuCCxrO+OFPMKZnlENt6zSReyy0dJu4V0tzfV8FCw+V4D6Y4wrLRk/TIG951Ojw==",
       "dev": true,
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.4.2",
-        "@storybook/csf-plugin": "8.4.2",
-        "@storybook/react-dom-shim": "8.4.2",
+        "@storybook/blocks": "8.4.5",
+        "@storybook/csf-plugin": "8.4.5",
+        "@storybook/react-dom-shim": "8.4.5",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "ts-dedent": "^2.0.0"
@@ -3536,24 +3584,24 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.2.tgz",
-      "integrity": "sha512-+/vfPrXM/GWU3Kbrg92PepwAZr7lOeulTTYF4THK0CL3DfUUlkGNpBPLP5PtjCuIkVrTCjXiIEdVWk47d5m2+w==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addon-actions": "8.4.2",
-        "@storybook/addon-backgrounds": "8.4.2",
-        "@storybook/addon-controls": "8.4.2",
-        "@storybook/addon-docs": "8.4.2",
-        "@storybook/addon-highlight": "8.4.2",
-        "@storybook/addon-measure": "8.4.2",
-        "@storybook/addon-outline": "8.4.2",
-        "@storybook/addon-toolbars": "8.4.2",
-        "@storybook/addon-viewport": "8.4.2",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.5.tgz",
+      "integrity": "sha512-AxetQo/zSPIu3RZqWG2opwAz22Bb+jpf1nWbHp0kEpCrBemcWd8X2gonVmXNOC1PDKNl3jcWyc3lmg/+3mxjYg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-actions": "8.4.5",
+        "@storybook/addon-backgrounds": "8.4.5",
+        "@storybook/addon-controls": "8.4.5",
+        "@storybook/addon-docs": "8.4.5",
+        "@storybook/addon-highlight": "8.4.5",
+        "@storybook/addon-measure": "8.4.5",
+        "@storybook/addon-outline": "8.4.5",
+        "@storybook/addon-toolbars": "8.4.5",
+        "@storybook/addon-viewport": "8.4.5",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -3561,13 +3609,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.4.2.tgz",
-      "integrity": "sha512-vTtwp7nyJ09SXrsMnH+pukCjHjRMjQXgHZHxvbrv09uoH8ldQMv9B7u+X+9Wcy/jYSKFz/ng7pWo4b4a2oXHkg==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.4.5.tgz",
+      "integrity": "sha512-sMA7v+4unaKY+5RDhow6lLncJqNX9ZLUnBIt3vzY1ntUsOYVwykAY1Hq4Ysj0luCBXjJJdJ6223ylrycnb7Ilw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0"
@@ -3577,13 +3625,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.4.2.tgz",
-      "integrity": "sha512-z+j6xQwcUBSpgzl1XDU+xU4YYgLraLMljECW7NvRNyJ/PYixvol8R3wtzWbr+CBpxmvbXjEJCPlF+EjF9/mBWQ==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.4.5.tgz",
+      "integrity": "sha512-+sNjew991YaoXQyWWloFybjEGrDO40Jk6w8BgZs2X7oc3D5t/6oFzvyC862U++LGqKFA3quXDeBjEb92CI9cRA==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -3594,13 +3642,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.4.2.tgz",
-      "integrity": "sha512-oTMlPEyT4CBqzcQbfemoJzJ6yzeRAmvrAx9ssaBcnQQRsKxo0D2Ri/Jmm6SNcR0yBHxYRkvIH+2phLw8aiflCQ==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.4.5.tgz",
+      "integrity": "sha512-XlpN98AUDnWQWNFSFVm+HkRUzm3xIUMjBGTkv6HsL6zt6XoJ+LsQMca+PPtYqlBJA+5CU41xMDaG8HC/p+sd3A==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -3611,13 +3659,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-themes": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.4.2.tgz",
-      "integrity": "sha512-SEeADvNxdkgfCEK4kxuV5w0ZFkdWQjJ3GySgLaXZM7FkEySfHyRIvkcoJml6Q0zJdChywVYNTRXonL0hmBlo7Q==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-8.4.5.tgz",
+      "integrity": "sha512-4ZheodvdAjAXbzx3HLmPxin5ULh1lPp7QH8Yi8SijRcreUYFiKvPfaTvR0pEcaFppwPXu1gVQlud5GLMTLEQgQ==",
       "dev": true,
       "dependencies": {
         "ts-dedent": "^2.0.0"
@@ -3627,26 +3675,26 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.4.2.tgz",
-      "integrity": "sha512-DidzW/NQS224niMJIjcJI2ls83emqygUcS9GYNGgdc5Xwro/TPgGYOXP2qnXgYUxXQTHbrxmIbHdEehxC7CcYQ==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.4.5.tgz",
+      "integrity": "sha512-hOq5560ONOU/qrslrwosWzxnC4nrF8HZWD43ciKwtethm8HuptU2M+Jrui1CRsMScEZLopWWVE9o0vJMdKpIFQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.4.2.tgz",
-      "integrity": "sha512-qVQ2UaxCNsUSFHnAAAizNPIJ/QwfMg7p5bBdpYROTZXJe+bxVp0rFzZmQgHZ3/sn+lzE4ItM4QEfxkfQUWi1ag==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.4.5.tgz",
+      "integrity": "sha512-l7Y41gIbJAsIN/QCg1QJ9sr61FLz1C/imUotcDej41tOHxUTSQOlXpNtVnfhUM1vGQc0yNpP3pVxj8BpXi0cAw==",
       "dev": true,
       "dependencies": {
         "memoizerific": "^1.11.3"
@@ -3656,13 +3704,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.4.2.tgz",
-      "integrity": "sha512-yAAvmOWaD8gIrepOxCh/RxQqd/1xZIwd/V+gsvAhW/thawN+SpI+zK63gmcqAPLX84hJ3Dh5pegRk0SoHNuDVA==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.4.5.tgz",
+      "integrity": "sha512-Z+LHauSqm3A4HBR9pUEf9KQhD3/3xYMt0FXgA+GHCAyDa6lFeD1C6r9Y2nlT+9dt8gv9B9oygTZvV6GqFVyRSQ==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.11",
@@ -3676,7 +3724,7 @@
       "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.4.2"
+        "storybook": "^8.4.5"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -3688,12 +3736,12 @@
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.2.tgz",
-      "integrity": "sha512-dO5FB5yH1C6tr/kBHn1frvGwp8Pt0D1apgXWkJ5ITWEUfh6WwOqX2fqsWsqaNwE7gP0qn0XgwCIEkI/4Mj55SA==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.5.tgz",
+      "integrity": "sha512-fZXWQcG5ccHCAS8NbyUwu8/5aVlZr4zmWbvKxoyvcVeuxJIsWa9RUS8Mtu7hdi+r/Wk8AlpckqhHo6go0iaDcA==",
       "dev": true,
       "dependencies": {
-        "@storybook/csf-plugin": "8.4.2",
+        "@storybook/csf-plugin": "8.4.5",
         "browser-assert": "^1.2.1",
         "ts-dedent": "^2.0.0"
       },
@@ -3702,14 +3750,14 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2",
+        "storybook": "^8.4.5",
         "vite": "^4.0.0 || ^5.0.0"
       }
     },
     "node_modules/@storybook/components": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.2.tgz",
-      "integrity": "sha512-+W59oF7D73LAxLNmCfFrfs98cH9pyNHK9HlJoO5/lKbK4IdWhhOoqUR/AJ3ueksoLuetFat4DxyE8SN1H4Bvrg==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.5.tgz",
+      "integrity": "sha512-2PdnKfqNNv3sO7qILgWXiNvmLOi503oN9OMemNCQjTIvdvySc5JpS9/eClwcl/JfmE4qHdSHZr8dLLkBM9S7+Q==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -3720,9 +3768,9 @@
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.4.2.tgz",
-      "integrity": "sha512-hF8GWoUZTjwwuV5j4OLhMHZtZQL/NYcVUBReC2Ba06c8PkFIKqKZwATr1zKd301gQ5Qwcn9WgmZxJTMgdKQtOg==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.4.5.tgz",
+      "integrity": "sha512-aB1sQNX5nRoUAqg5u1py0MuR/VPd6c6PhECa4rW6pmr7kZcfyP4PP6UFpXuN71ypTQlkRE3Vc5PQZ3gLhE9o3g==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.11",
@@ -3772,9 +3820,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.4.2.tgz",
-      "integrity": "sha512-1f0t6W5xbC1sSAHHs3uXYPIQs2NXAEtIGqn6X9i3xbbub6hDS8PF8BIm7dOjQ8dZOPp7d9ltR64V5CoLlsOigA==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.4.5.tgz",
+      "integrity": "sha512-qd2rQTglOTS+phQmTbNTXNjNyxdGvolaqHqDNMw3Vf6h9o3U+mLkwnDWNVnQ9oqvOoUEAqpBthgwzU9FhkIk+A==",
       "dev": true,
       "dependencies": {
         "unplugin": "^1.3.1"
@@ -3784,7 +3832,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/global": {
@@ -3794,16 +3842,16 @@
       "dev": true
     },
     "node_modules/@storybook/html": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/html/-/html-8.4.2.tgz",
-      "integrity": "sha512-6fYyKu2hCeYLI3TEphw1Ly73VaZmklo3aiJv/HDfm4K9QYD3q3T5RL8XiikOk1SDCweY5kDe8/9kjpjMNwkVSw==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/html/-/html-8.4.5.tgz",
+      "integrity": "sha512-cw91JgTi94ttgt//hAgPbp9in04n+ZmlMZr2TW2oYz7mEerw6//WfKLNLsvJR2HV9wWDJ9QlmL3ywj/6j/3HzA==",
       "dev": true,
       "dependencies": {
-        "@storybook/components": "8.4.2",
+        "@storybook/components": "8.4.5",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "8.4.2",
-        "@storybook/preview-api": "8.4.2",
-        "@storybook/theming": "8.4.2",
+        "@storybook/manager-api": "8.4.5",
+        "@storybook/preview-api": "8.4.5",
+        "@storybook/theming": "8.4.5",
         "ts-dedent": "^2.0.0"
       },
       "engines": {
@@ -3814,17 +3862,17 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/html-vite": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/html-vite/-/html-vite-8.4.2.tgz",
-      "integrity": "sha512-MxB8ih1sipjmlW6+bSWkGljwn+TWnqWY19UZQuElCQq1lNaGT4WvHVUsecRFOf60xzzTsdikKwKI10cHD5/1Aw==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/html-vite/-/html-vite-8.4.5.tgz",
+      "integrity": "sha512-u4Nr3LTYltXsbhCsvjQAZP5Qfi6ggECJRaXx6nxeMq2gR1jN0bR049ycyl1QtrCWdTergZDMGqCanyvBU4p8pw==",
       "dev": true,
       "dependencies": {
-        "@storybook/builder-vite": "8.4.2",
-        "@storybook/html": "8.4.2",
+        "@storybook/builder-vite": "8.4.5",
+        "@storybook/html": "8.4.5",
         "magic-string": "^0.30.0"
       },
       "engines": {
@@ -3835,7 +3883,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/icons": {
@@ -3852,9 +3900,9 @@
       }
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.4.2.tgz",
-      "integrity": "sha512-gPYCZ/0O6gRLI3zmenu2N6QtKzxDZFdT2xf4RWcNUSZyp28RZkRCIgKFMt3fTmvE0yMzAjQyRSkBdrONjQ44HA==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.4.5.tgz",
+      "integrity": "sha512-8qM35FkueuRpJr0zA6ENvhQICbo+iKL1ln450DwV1kKJtc41KdbA3CuCvtZ/FnoPsFnwdtPjhhICFtRt8LRTSg==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -3865,13 +3913,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.2.tgz",
-      "integrity": "sha512-rhPc4cgQDKDH8NUyRh/ZaJW7QIhR/PO5MNX4xc+vz71sM2nO7ONA/FrgLtCuu4SULdwilEPvGefYvLK0dE+Caw==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.5.tgz",
+      "integrity": "sha512-t39JaMy3UX4StbUH/tIDcaflBDxTcyIq853wQtBMhVL3e1+Dw3MIiiG/5bw79HU4R7kSmPVLXIIbV3FmXkq7KQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -3882,9 +3930,9 @@
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.2.tgz",
-      "integrity": "sha512-5X/xvIvDPaWJKUBCo5zVeBbbjkhnwcI2KPkuOgrHVRRhuQ5WqD0RYxVtOOFNyQXme7g0nNl5RFNgvT7qv9qGeg==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.5.tgz",
+      "integrity": "sha512-MKIZ2jQO/3cUdsT57eq8jRgB6inALo9BxrQ88f7mqzltOkMvADvTAY6y8JZqTUoDzWTH/ny/8SGGdtpqlxRuiQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -3895,9 +3943,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.2.tgz",
-      "integrity": "sha512-FZVTM1f34FpGnf6e3MDIKkz05gmn8H9wEccvQAgr8pEFe8VWfrpVWeUrmatSAfgrCMNXYC1avDend8UX6IM8Fg==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.5.tgz",
+      "integrity": "sha512-YTWTfPagptEYXJsnxAl3zP97Ev0zebtaEV0WgjGaEeumr+zsfgKKwzzHxgrtumBmDzwkuKlzFwlQB5A8keOIGA==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -3906,18 +3954,18 @@
       "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.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/test": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.4.2.tgz",
-      "integrity": "sha512-MipTdboStv0hsqF2Sw8TZgP0YnxCcDYwxkTOd4hmRzev/7Brtvpi4pqjqh8k98ZCvhrCPAPVIoX5drk+oi3YUA==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.4.5.tgz",
+      "integrity": "sha512-mHsRc6m60nfcEBsjvUkKz+Jnz0or4WH5jmJ1VL2pGKO4VzESCPqAwDnwDqP2YyeSQ0b/MAKUT5kdoLE2RE2eVw==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.4.2",
+        "@storybook/instrumenter": "8.4.5",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.5.0",
         "@testing-library/user-event": "14.5.2",
@@ -3929,13 +3977,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.4.2"
+        "storybook": "^8.4.5"
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.2.tgz",
-      "integrity": "sha512-9j4fnu5LcV+qSs1rdwf61Bt14lms0T1LOZkHxGNcS1c1oH+cPS+sxECh2lxtni+mvOAHUlBs9pKhVZzRPdWpvg==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.5.tgz",
+      "integrity": "sha512-45e/jeG4iuqdZcHg3PbB6dwXQTwlnnEB7r/QcVExyC7ibrkTnjUfvxzyUw4mmU3CXETFGD5EcUobFkgK+/aPxQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -4338,9 +4386,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.4.tgz",
-      "integrity": "sha512-L95zIAkEuTDbUX1IsjRl+vyBSLh3PwLLgKpghl37aCK9Jvw0iP+wKwIFhfjdUtA2myLgjrG6VU6JCFLv8q/3Ww==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.5.tgz",
+      "integrity": "sha512-4ZOwtk2bqG5Y6xRGHcveZVr+6txkH7M2e+nPFd6guSoN638v/1XQ0K06eOpi0ptVU/2tW/pIU4IoPotY/GZ9fw==",
       "dev": true,
       "dependencies": {
         "tinyrainbow": "^1.2.0"
@@ -4362,12 +4410,12 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.4.tgz",
-      "integrity": "sha512-MXDnZn0Awl2S86PSNIim5PWXgIAx8CIkzu35mBdSApUip6RFOGXBCf3YFyeEu8n1IHk4bWD46DeYFu9mQlFIRg==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.5.tgz",
+      "integrity": "sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==",
       "dev": true,
       "dependencies": {
-        "@vitest/pretty-format": "2.1.4",
+        "@vitest/pretty-format": "2.1.5",
         "loupe": "^3.1.2",
         "tinyrainbow": "^1.2.0"
       },
@@ -6196,6 +6244,29 @@
       "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
       "dev": true
     },
+    "node_modules/chromatic": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.18.1.tgz",
+      "integrity": "sha512-hkNT9vA6K9+PnE/khhZYBnRCOm8NonaQDs7RZ8YHFo7/lh1b/x/uFMkTjWjaj/mkM6QOR/evu5VcZMtcaauSlw==",
+      "dev": true,
+      "bin": {
+        "chroma": "dist/bin.js",
+        "chromatic": "dist/bin.js",
+        "chromatic-cli": "dist/bin.js"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -8234,6 +8305,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/filesize": {
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+      "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.4.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -12739,6 +12819,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-confetti": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
+      "integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
+      "dev": true,
+      "dependencies": {
+        "tween-functions": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -13960,12 +14055,12 @@
       }
     },
     "node_modules/storybook": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.2.tgz",
-      "integrity": "sha512-GMCgyAulmLNrkUtDkCpFO4SB77YrpiIxq6e5tzaQdXEuaDu1mdNwOuP3VG7nE2FzxmqDvagSgriM68YW9iFaZA==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.5.tgz",
+      "integrity": "sha512-9tfgabXnMibYp3SvoaJXXMD63Pw0SA9Hnf5v6TxysCYZs4DZ/04fAkK+9RW+K4C5JkV83qXMMlrsPj766R47fg==",
       "dev": true,
       "dependencies": {
-        "@storybook/core": "8.4.2"
+        "@storybook/core": "8.4.5"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -15076,6 +15171,12 @@
       "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
       "dev": true
     },
+    "node_modules/tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==",
+      "dev": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -15382,9 +15483,9 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.15.0.tgz",
-      "integrity": "sha512-jTPIs63W+DUEDW207ztbaoO7cQ4p5aVaB823LSlxpsFEU3Mykwxf3ZGC/wzxFJeZlASZYgVrWeo7LgOrqJZ8RA==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.0.tgz",
+      "integrity": "sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.14.0",
@@ -15392,14 +15493,6 @@
       },
       "engines": {
         "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "webpack-sources": "^3"
-      },
-      "peerDependenciesMeta": {
-        "webpack-sources": {
-          "optional": true
-        }
       }
     },
     "node_modules/unzipper": {
@@ -15534,9 +15627,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.4.10",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
-      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
       "peer": true,
       "dependencies": {
diff --git a/package.json b/package.json
index f7deee9861..d1002e8251 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "@babel/cli": "^7.25.7",
     "@babel/core": "^7.25.7",
     "@babel/preset-env": "^7.25.7",
+    "@chromatic-com/storybook": "^3.2.2",
     "@docsearch/js": "^3.6.2",
     "@percy/cli": "^1.30.2",
     "@popperjs/core": "^2.11.8",
@@ -115,14 +116,14 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@stackblitz/sdk": "^1.11.0",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-themes": "^8.4.2",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/html": "^8.4.2",
-    "@storybook/html-vite": "^8.4.2",
-    "@storybook/manager-api": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-themes": "^8.4.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/html": "^8.4.5",
+    "@storybook/html-vite": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "bundlewatch": "^0.4.0",
@@ -168,7 +169,7 @@
     "sass-true": "^8.1.0",
     "shelljs": "^0.8.5",
     "sirv-cli": "^3.0.0",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.5",
     "stylelint": "^16.9.0",
     "stylelint-config-twbs-bootstrap": "^15.1.0",
     "tarteaucitronjs": "^1.19.0",