diff --git a/.storybook/main.ts b/.storybook/main.ts
index 5a08c64..317aea7 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,6 +1,7 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -8,15 +9,19 @@ const config: StorybookConfig = {
     "@storybook/addon-a11y",
     "@chromatic-com/storybook",
   ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+
   docs: {},
+
   // staticDirs: ["../public"], //👈 Configures the static asset folder in Storybook
   features: {
     viewportStoryGlobals: true,
   },
+
   refs: {
     "react-tailwind-flowbite-components": {
       title: "Howso components",
@@ -29,5 +34,9 @@ const config: StorybookConfig = {
       expanded: false, // Optional, true by default
     },
   },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript"
+  }
 };
 export default config;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 0fde07c..ed397bd 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -43,6 +43,7 @@ const preview: Preview = {
       viewport: { value: undefined },
     },
   },
+
   decorators: [
     (Story: StoryFn, context) => {
       const mode: ThemeMode =
@@ -80,6 +81,8 @@ const preview: Preview = {
       />
     ),
   ],
+
+  tags: ["autodocs"]
 };
 export default preview;
 ``;
diff --git a/package-lock.json b/package-lock.json
index cd3ac41..a87fc0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,24 +9,24 @@
       "version": "0.0.0",
       "license": "ISC",
       "devDependencies": {
-        "@chromatic-com/storybook": "^2.0.2",
+        "@chromatic-com/storybook": "^3.2.0",
         "@fontsource/inter": "^5.0.5",
         "@hookform/error-message": "^2.0.1",
         "@howso/engine": "^6.0.0",
-        "@howso/react-tailwind-flowbite-components": "^6.0.1",
+        "@howso/react-tailwind-flowbite-components": "^6.1.0",
         "@howso/ui-internationalization-utils": "^1.0.5",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.6",
-        "@storybook/addon-a11y": "^8.3.1",
-        "@storybook/addon-actions": "^8.3.1",
-        "@storybook/addon-essentials": "^8.3.1",
-        "@storybook/addon-interactions": "^8.3.1",
-        "@storybook/addon-links": "^8.3.1",
-        "@storybook/addon-mdx-gfm": "^8.3.1",
-        "@storybook/blocks": "^8.3.1",
-        "@storybook/react": "^8.3.1",
-        "@storybook/react-vite": "^8.3.1",
-        "@storybook/test": "^8.3.1",
+        "@storybook/addon-a11y": "^8.3.6",
+        "@storybook/addon-actions": "^8.3.6",
+        "@storybook/addon-essentials": "^8.3.6",
+        "@storybook/addon-interactions": "^8.3.6",
+        "@storybook/addon-links": "^8.3.6",
+        "@storybook/addon-mdx-gfm": "^8.3.6",
+        "@storybook/blocks": "^8.3.6",
+        "@storybook/react": "^8.3.6",
+        "@storybook/react-vite": "^8.3.6",
+        "@storybook/test": "^8.3.6",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@types/react": "^18.2.14",
@@ -35,7 +35,7 @@
         "autoprefixer": "^10.4.18",
         "eslint": "^8.5.0",
         "eslint-config-react-app": "^7.0.1",
-        "eslint-plugin-storybook": "^0.8.0",
+        "eslint-plugin-storybook": "^0.10.1",
         "husky": "^7.0.4",
         "i18next-browser-languagedetector": "^8.0.0",
         "jest": "^29.6.1",
@@ -53,7 +53,7 @@
         "react-router-dom": "^6.14.1",
         "rollup": "^4.12.1",
         "rollup-plugin-postcss": "^4.0.2",
-        "storybook": "^8.3.1",
+        "storybook": "^8.3.6",
         "tailwindcss": "^3.4.1",
         "ts-jest": "^29.1.1",
         "typescript": "^5.5.2",
@@ -65,7 +65,7 @@
       },
       "peerDependencies": {
         "@hookform/error-message": "^2.0.1",
-        "@howso/react-tailwind-flowbite-components": "^6.0.1",
+        "@howso/react-tailwind-flowbite-components": "^6.1.0",
         "@howso/ui-internationalization-utils": "^1.0.5",
         "jotai": "^2.8.3",
         "react": "^18.0.0",
@@ -2179,12 +2179,15 @@
       "dev": true
     },
     "node_modules/@chromatic-com/storybook": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-2.0.2.tgz",
-      "integrity": "sha512-7bPIliISedeIpnVKbzktysFYW5n56bN91kxuOj1XXKixmjbUHRUMvcXd4K2liN6MiR5ZqJtmtcPsZ6CebbGlEA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-3.2.0.tgz",
+      "integrity": "sha512-gnD29KvZ1yeAYNeo8PdpZLE94W6YynyIuqZ1+mFIhDKcSGf84jllqt2sXtwzXodrT38NWlM5kijTS9Hpo0Pf9w==",
       "dev": true,
       "dependencies": {
-        "chromatic": "^11.4.0",
+        "@storybook/channels": "^8.3.0",
+        "@storybook/telemetry": "^8.3.0",
+        "@storybook/types": "^8.3.0",
+        "chromatic": "^11.15.0",
         "filesize": "^10.0.12",
         "jsonfile": "^6.1.0",
         "react-confetti": "^6.1.0",
@@ -2193,6 +2196,9 @@
       "engines": {
         "node": ">=16.0.0",
         "yarn": ">=1.22.18"
+      },
+      "peerDependencies": {
+        "storybook": "*"
       }
     },
     "node_modules/@chromatic-com/storybook/node_modules/ansi-regex": {
@@ -2207,29 +2213,6 @@
         "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@chromatic-com/storybook/node_modules/chromatic": {
-      "version": "11.5.1",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.5.1.tgz",
-      "integrity": "sha512-JMLih17sOwdD8h1w7XRTrs0g1DUicJxWkHzq0/nGB0CMIgfoylHq7uXpPEByu7l78lZLqcgneCPUuVEEfEWJDg==",
-      "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/@chromatic-com/storybook/node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -2835,9 +2818,9 @@
       }
     },
     "node_modules/@howso/react-tailwind-flowbite-components": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@howso/react-tailwind-flowbite-components/-/react-tailwind-flowbite-components-6.0.1.tgz",
-      "integrity": "sha512-IchhChODghWPkJEj3PVWk3d3bBbDhymjHnzNSo6oB0KkKdIoB0VJe3tC0VBJBIp8OrXxxJdR8UdL44dEzfoeBA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@howso/react-tailwind-flowbite-components/-/react-tailwind-flowbite-components-6.1.0.tgz",
+      "integrity": "sha512-Xt08cLqkejbpYBRFgPBrTjMuYTBSjY0Z68kbWP7yviSNMkeirPAO4dHOdRn71BuG5M4lXpGzAl5COCLQoUWIpQ==",
       "dev": true,
       "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "^4.9.6"
@@ -3637,9 +3620,9 @@
       }
     },
     "node_modules/@joshwooding/vite-plugin-react-docgen-typescript": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.3.1.tgz",
-      "integrity": "sha512-pdoMZ9QaPnVlSM+SdU/wgg0nyD/8wQ7y90ttO2CMCyrrm7RxveYIJ5eNfjPaoMFqW41LZra7QO9j+xV4Y18Glw==",
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.3.0.tgz",
+      "integrity": "sha512-2D6y7fNvFmsLmRt6UCOFJPvFoPMJGT0Uh1Wg0RaigUp7kdQPs6yYn8Dmx6GZkOH/NW0yMTwRz/p0SRMMRo50vA==",
       "dev": true,
       "dependencies": {
         "glob": "^7.2.0",
@@ -3768,9 +3751,9 @@
       }
     },
     "node_modules/@mdx-js/react": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz",
-      "integrity": "sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
+      "integrity": "sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==",
       "dev": true,
       "dependencies": {
         "@types/mdx": "^2.0.0"
@@ -4188,12 +4171,12 @@
       }
     },
     "node_modules/@storybook/addon-a11y": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.3.1.tgz",
-      "integrity": "sha512-/Xu0v6kk2xugXdB4EJCbrVZDEt/rtJwHDb+MHhxsxp2FYF/ZRDKHinJzyUMMM4BIoJVZQ8BgFjp7P1hprS7yug==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-8.3.6.tgz",
+      "integrity": "sha512-EeVzUN+WaLtz/DXVBL3rIGvP8+pTuJXA3lEz9CbTQXRO7QMhzTTXLKmp8xmSA2w5H01a8XpjLcZ5LYjdKrvw0g==",
       "dev": true,
       "dependencies": {
-        "@storybook/addon-highlight": "8.3.1",
+        "@storybook/addon-highlight": "8.3.6",
         "axe-core": "^4.2.0"
       },
       "funding": {
@@ -4201,13 +4184,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.1.tgz",
-      "integrity": "sha512-f00NxBNBcsMHqtwsOpRbZKrNMLdUjnSg1G6zYdVxAG7NwxzgpqPZm37I36ebFmgz/WO2XQ3ihxzfV2IKFuiZ6g==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.6.tgz",
+      "integrity": "sha512-nOqgl0WoZK2KwjaABaXMoIgrIHOQl9inOzJvqQau0HOtsvnXGXYfJXYnpjZenoZDoZXKbUDl0U2haDFx2a2fJw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4221,13 +4204,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.1.tgz",
-      "integrity": "sha512-HPQElHIi5SMWJTOimYt27QaiPrrwTprVShVfq3gQKpUcDJhT4qMpI3Bn3JCtthPlXlUA+miZcNdNRTIc2XzhSA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.6.tgz",
+      "integrity": "sha512-yBn+a8i5OJzJaX6Bx5MAkfei7c2nvq+RRmvuyvxw11rtDGR6Nz4OBBe56reWxo868wVUggpRTPJCMVe5tDYgVg==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4239,13 +4222,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.1.tgz",
-      "integrity": "sha512-zqVNRGQ2GS1ReDZ6YTAl+pLmnrOWwE3OUsByRfzHCYlmO55TxYi92HBTSbAXyWRKyqVUKH69PmbKGukc83aX2Q==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.6.tgz",
+      "integrity": "sha512-9IMLHgtWPuFoRCt3hDsIk1FbkK5SlCMDW1DDwtTBIeWYYZLvptS42+vGVTeQ8v5SejmVzZkzuUdzu3p4sb3IcA==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4258,20 +4241,20 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.3.1.tgz",
-      "integrity": "sha512-8ES7ThajpKDoMheAthnDDg/lXUsIxzV+EdHuE4WnRoiw+25XfYr9WIEuEpytRz/drouJhunOgOJV0kCPxZ3XgQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.3.6.tgz",
+      "integrity": "sha512-31Rk1TOhDIzGM2wNCUIB1xKuWtArW0D2Puua9warEXlQ3FtvwmxnPrwbIzw6ufYZDWPwl9phDYTcRh8WqZIoGg==",
       "dev": true,
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.3.1",
-        "@storybook/csf-plugin": "8.3.1",
+        "@storybook/blocks": "8.3.6",
+        "@storybook/csf-plugin": "8.3.6",
         "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "8.3.1",
+        "@storybook/react-dom-shim": "8.3.6",
         "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "fs-extra": "^11.1.0",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -4285,24 +4268,24 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.3.1.tgz",
-      "integrity": "sha512-5dNlKKJveBYqe1OT4dSE7V7ZjhULWnL238oeHz6wabjfL/l7W9MgLke5mxir4xSaAKf5sOg+QFK+RSmYYih4pg==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addon-actions": "8.3.1",
-        "@storybook/addon-backgrounds": "8.3.1",
-        "@storybook/addon-controls": "8.3.1",
-        "@storybook/addon-docs": "8.3.1",
-        "@storybook/addon-highlight": "8.3.1",
-        "@storybook/addon-measure": "8.3.1",
-        "@storybook/addon-outline": "8.3.1",
-        "@storybook/addon-toolbars": "8.3.1",
-        "@storybook/addon-viewport": "8.3.1",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.3.6.tgz",
+      "integrity": "sha512-MQPFvThlGU7wlda1xhBPQCmDh90cSSZ31OsVs1uC5kJh0aLbY2gYXPurq1G54kzrYo8SMfBxsXrCplz8Ir6UTg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-actions": "8.3.6",
+        "@storybook/addon-backgrounds": "8.3.6",
+        "@storybook/addon-controls": "8.3.6",
+        "@storybook/addon-docs": "8.3.6",
+        "@storybook/addon-highlight": "8.3.6",
+        "@storybook/addon-measure": "8.3.6",
+        "@storybook/addon-outline": "8.3.6",
+        "@storybook/addon-toolbars": "8.3.6",
+        "@storybook/addon-viewport": "8.3.6",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -4310,13 +4293,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.3.1.tgz",
-      "integrity": "sha512-hEB4O1a76SGEJypjPwjvBT8e9+pWptAD6VY995gtsOrMLaV0213DJV8aEGJRXhELEk2sr8WUaoYhzxxtgD97KA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.3.6.tgz",
+      "integrity": "sha512-A7uU+1OPVXGpkklEUJjSl2VEEDLCSNvmffUJlvW1GjajsNFIHOW2CSD+KnfFlQyPxyVbnWAYLqUP4XJxoqrvDw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0"
@@ -4326,18 +4309,18 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-interactions": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.3.1.tgz",
-      "integrity": "sha512-EQiemx7ZvI9r4WrWmKB7hvoh9XO+YJh61LNEBLrdnSnRITJKGFrJtqnfuSrvQXWxFVi6U1PtSqDzCV8z0IwK2g==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.3.6.tgz",
+      "integrity": "sha512-Y0YUJj0oE1+6DFkaTPXM/8+dwTSoy0ltj2Sn2KOTJYzxKQYXBp8TlUv0QOQiGH7o/GKXIWek/VlTuvG/JEeiWw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.3.1",
-        "@storybook/test": "8.3.1",
+        "@storybook/instrumenter": "8.3.6",
+        "@storybook/test": "8.3.6",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
       },
@@ -4346,13 +4329,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.3.1.tgz",
-      "integrity": "sha512-xhd1cXpHKn9mr87ImcEOV+YexDZcITzxFQoW2m5ocGkMyVFotK6NjOk/f9xsZAGIp4T7axsdEmwFNSovHgw91A==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.3.6.tgz",
+      "integrity": "sha512-EGEH/kEjndEldbqyiJ8XSASkxqwzL/lgA/+6mHpa6Ljxhk1s5IMGcdA1ymJYJ2BpNdkUxRj/uxAa38eGcQiJ/g==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.11",
@@ -4365,7 +4348,7 @@
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -4374,9 +4357,9 @@
       }
     },
     "node_modules/@storybook/addon-mdx-gfm": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-mdx-gfm/-/addon-mdx-gfm-8.3.1.tgz",
-      "integrity": "sha512-Kth9noYkHrK3s3XjQCG51Li42ecK4BVd0xS77xRrsmFBBR9fdBCPbMhR2g9WYmFJz5Vq2vEta9vBTXZUnxzNEg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-mdx-gfm/-/addon-mdx-gfm-8.3.6.tgz",
+      "integrity": "sha512-5Q/0YT/i9xdLyq7QvXvVfrcGVFHvJ3GEPM+XgGaX9C67ch3pYllAGDKJMtq3eDhgzxHkPT8NnjXb/9VLVYr75w==",
       "dev": true,
       "dependencies": {
         "remark-gfm": "^4.0.0",
@@ -4387,13 +4370,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.3.1.tgz",
-      "integrity": "sha512-XL7Rph0K0vggVcY7mxGws9SNzLJlCvzrPJdz1xZBKBLLd0fdpbR5Y+1oP1w/7qhZ9Xrg44VRVs4yUzCYUeK2OQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.3.6.tgz",
+      "integrity": "sha512-VHWeGgYjhzhwb2WAqYW/qyEPqg5pwKR/XqFfd+3tEirUs/64olL1l3lzLwZ8Cm07cJ81T8Z4myywb9kObZfQlw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4404,13 +4387,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.3.1.tgz",
-      "integrity": "sha512-bpxiffkMjWbrVAmbonzkGaTQp3zCECOP5B4Uw0oRfH7YVZgUsj1brRjVsMvBB1bwDP/ijj46X12OcZjqVEJP5Q==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.3.6.tgz",
+      "integrity": "sha512-+VXpM8SIHX2cn30qLlMvER9/6iioFRSn2sAfLniqy4RrcQmcMP+qgE7ZzbzExt7cneJh3VFsYqBS/HElu14Vgg==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4421,26 +4404,26 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.1.tgz",
-      "integrity": "sha512-bjlQP9a56O4OCI4g9tDNm51frBcHaFpHma3MJ1vg302oj/XOQrec/am2sA0E6L1l4Hih2PkRYTamo3+GmQRJug==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.6.tgz",
+      "integrity": "sha512-FJH+lRoZXENfpMR/G09ZqB0TmL/k6bv07GN1ysoVs420tKRgjfz6uXaZz5COrhcdISr5mTNmG+mw9x7xXTfX3Q==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.3.1.tgz",
-      "integrity": "sha512-Z0Ls3ThjOx56KE4I5ampOtfK7G4/AAa0bOoaFq7+bLOomXMtZsC3yyXyrm5YQ6ZHmeP2XaXmOe52HDsvq+ko2Q==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.3.6.tgz",
+      "integrity": "sha512-bL51v837W1cng/+0pypkoLsWKWmvux96zLOzqLCpcWAQ4OSMhW3foIWpCiFwMG/KY+GanoOocTx6i7j5hLtuTA==",
       "dev": true,
       "dependencies": {
         "memoizerific": "^1.11.3"
@@ -4450,13 +4433,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.3.1.tgz",
-      "integrity": "sha512-/wNLRVWR/edzHQAFvSW68VxHYmBcfXpL/XdO46I5Z1X/tXUd0rtgGZmliQ2jZ242FqxcT8guqqFGehbeYUns5w==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.3.6.tgz",
+      "integrity": "sha512-Oc5jU6EzfsENjrd91KcKyEKBh60RT+8uyLi1RIrymC2C/mzZMTEoNIrbnQt0eIqbjlHxn6y9JMJxHu4NJ4EmZg==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.11",
@@ -4481,7 +4464,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.3.1"
+        "storybook": "^8.3.6"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -4493,12 +4476,12 @@
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.3.1.tgz",
-      "integrity": "sha512-IxfgIuQo9R+zcwoBE85PkCSKWGbPVStJgm1VHO/mixIdZExanbAhDS+L21nAZCelTvcsObTN76BN953v2LjVGg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.3.6.tgz",
+      "integrity": "sha512-AF4+oFe1mvIHrLvaYsv8B0YSlXQtSlKTKwrXnUbcAbeGRwMmFKA1t3VyAcXV0yB9MtZ8YJsA/uKRkgGEaN7wJQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/csf-plugin": "8.3.1",
+        "@storybook/csf-plugin": "8.3.6",
         "@types/find-cache-dir": "^3.2.1",
         "browser-assert": "^1.2.1",
         "es-module-lexer": "^1.5.0",
@@ -4514,7 +4497,7 @@
       },
       "peerDependencies": {
         "@preact/preset-vite": "*",
-        "storybook": "^8.3.1",
+        "storybook": "^8.3.6",
         "typescript": ">= 4.3.x",
         "vite": "^4.0.0 || ^5.0.0",
         "vite-plugin-glimmerx": "*"
@@ -4531,23 +4514,36 @@
         }
       }
     },
+    "node_modules/@storybook/channels": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-8.3.6.tgz",
+      "integrity": "sha512-6ahY0n1A19diR5cI63lhDEpMaDsq7LFtMOgWab2NwCsdXoEAl6anvDptyPWW60umN3HrDzSKFdpRx4imOEjlWw==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.3.6"
+      }
+    },
     "node_modules/@storybook/components": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.1.tgz",
-      "integrity": "sha512-/CMqX40CpNOKow58oLyO/OvMhHiHCIvOGf/65lXHk/D9qECMvchFfA2/MH8H7HiJUIqoSPit194miBENK5kqdw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.6.tgz",
+      "integrity": "sha512-TXuoGZY7X3iixF45lXkYOFk8k2q9OHcqHyHyem1gATLLQXgyOvDgzm+VB7uKBNzssRQPEE+La70nfG8bq/viRw==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-L8YTtUipcBvl4F8jFNnXU3NM1hnLwZ3Ge2l+SRVKUGoAZzdf/I8O/0eOeZ+3LM3PvDn8bC9x+qjhNyDgtT+ieQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.6.tgz",
+      "integrity": "sha512-frwfgf0EJ7QL29DWZ5bla/g0eOOWqJGd14t+VUBlpP920zB6sdDfo7+p9JoCjD9u08lGeFDqbPNKayUk+0qDag==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.11",
@@ -4591,9 +4587,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.1.tgz",
-      "integrity": "sha512-K3JWJf79+BkJAbOnAns5KGQ9h0NCqWht/1B05frj9LuAD/U+0sikpByiC2QvJ+qtX4fODhqjRYvrv2jgP8o3mA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.6.tgz",
+      "integrity": "sha512-TJyJPFejO6Gyr3+bXqE/+LomQbivvfHEbee/GwtlRj0XF4KQlqnvuEdEdcK25JbD0NXT8AbyncEUmjoxE7ojQw==",
       "dev": true,
       "dependencies": {
         "unplugin": "^1.3.1"
@@ -4603,7 +4599,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/global": {
@@ -4613,9 +4609,9 @@
       "dev": true
     },
     "node_modules/@storybook/icons": {
-      "version": "1.2.10",
-      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.10.tgz",
-      "integrity": "sha512-310apKdDcjbbX2VSLWPwhEwAgjxTzVagrwucVZIdGPErwiAppX8KvBuWZgPo+rQLVrtH8S+pw1dbUwjcE6d7og==",
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.2.12.tgz",
+      "integrity": "sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q==",
       "dev": true,
       "engines": {
         "node": ">=14.0.0"
@@ -4626,9 +4622,9 @@
       }
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.3.1.tgz",
-      "integrity": "sha512-TtECvALgEPLafdy+YHXz2+xBPobiSMHj532nS7tkqxD9aRD1+Ocy6pWWNaP9+iiWWnHIWlTQ0M/7UEoCxV+Ksg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.3.6.tgz",
+      "integrity": "sha512-0RowbKwoB/s7rtymlnKNiyWN1Z3ZK5mwgzVjlRmzxDL8hrdi5KDjTNExuJTRR3ZaBP2RR0/I3m/n0p9JhHAZvg==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4640,47 +4636,47 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.1.tgz",
-      "integrity": "sha512-GHJr1/nNAfkzNs4P8z31zBN8ZBucMfl+aSH6ciCy12jN3dOmEfb67mx3aes2PmBJjY3K8HG2lgsO9tNKIyDJXQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.6.tgz",
+      "integrity": "sha512-Xt5VFZcL+G/9uzaHjzWFhxRNrP+4rPhSRKEvCZorAbC9+Hv+ZDs1JSZS5wMb4WKpXBZ0rwDVOLwngqbVtfRHuQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.1.tgz",
-      "integrity": "sha512-mpeeQi0DiK6lGiFEa/iAXNQykZB/wv9UiI5MYwxfgVTCCIh7skeBQsu/7Ye+C+KyXgrNmH5YAP3CjYfkFVimhQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.6.tgz",
+      "integrity": "sha512-/Wxvb7wbI2O2iH63arRQQyyojA630vibdshkFjuC/u1nYdptEV1jkxa0OYmbZbKCn4/ze6uH4hfsKOpDPV9SWg==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/react": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.3.1.tgz",
-      "integrity": "sha512-uxr5o5TzUHB1vFMgdayxatDTYUYWJxDse4hcpr+D2E5QMrMCKBk/KRYgJtnPhmEBASoT40lcZvYmEWnP973KWA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.3.6.tgz",
+      "integrity": "sha512-s3COryqIOYK7urgZaCPb77zlxGjPKr6dIsYmblQJcsFY2ZlG2x0Ysm8b5oRgD8Pv71hCJ0PKYA4RzDgBVYJS9A==",
       "dev": true,
       "dependencies": {
-        "@storybook/components": "^8.3.1",
+        "@storybook/components": "^8.3.6",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "^8.3.1",
-        "@storybook/preview-api": "^8.3.1",
-        "@storybook/react-dom-shim": "8.3.1",
-        "@storybook/theming": "^8.3.1",
+        "@storybook/manager-api": "^8.3.6",
+        "@storybook/preview-api": "^8.3.6",
+        "@storybook/react-dom-shim": "8.3.6",
+        "@storybook/theming": "^8.3.6",
         "@types/escodegen": "^0.0.6",
         "@types/estree": "^0.0.51",
         "@types/node": "^22.0.0",
@@ -4704,10 +4700,10 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "@storybook/test": "8.3.1",
+        "@storybook/test": "8.3.6",
         "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.3.1",
+        "storybook": "^8.3.6",
         "typescript": ">= 4.2.x"
       },
       "peerDependenciesMeta": {
@@ -4720,9 +4716,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.1.tgz",
-      "integrity": "sha512-nHMhXkt3FAm8c08QTTU70vpYhsAu65RpCv/uhYZ89H5OWvmLFHn36iJQPzlpWFtJHJ5+bAV/bfgNODR3BV1gRg==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.6.tgz",
+      "integrity": "sha512-9BO6VXIdli4GHSfiP/Z0gwAf7oQig3D/yWK2U1+91UWDV8nIAgnNBAi76U4ORC6MiK5MdkDfIikIxnLLeLnahA==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -4731,19 +4727,19 @@
       "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.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/react-vite": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.3.1.tgz",
-      "integrity": "sha512-WjLnYzaiLHCv09UnnMfjJL9RnjmReXbPpRs3VklH87UH8L6j4WLHw7JAEItnyS6ugTxFjcpEg1P1ud4D8c75nA==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.3.6.tgz",
+      "integrity": "sha512-KXi4ZT4X7DsB4OOIWeR1XMH/Oz6Rp4TlWBNx/TgSEDGYEkPooqZK/O0S+G+VIsrRGQUf/57YqO73mP6kNluxTA==",
       "dev": true,
       "dependencies": {
-        "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.1",
+        "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
         "@rollup/pluginutils": "^5.0.2",
-        "@storybook/builder-vite": "8.3.1",
-        "@storybook/react": "8.3.1",
+        "@storybook/builder-vite": "8.3.6",
+        "@storybook/react": "8.3.6",
         "find-up": "^5.0.0",
         "magic-string": "^0.30.0",
         "react-docgen": "^7.0.0",
@@ -4760,7 +4756,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.3.1",
+        "storybook": "^8.3.6",
         "vite": "^4.0.0 || ^5.0.0"
       }
     },
@@ -4782,15 +4778,28 @@
         "node": ">=10"
       }
     },
+    "node_modules/@storybook/telemetry": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-8.3.6.tgz",
+      "integrity": "sha512-fhpbZok7mPeujjFxAKo2vuqhfjhv5BO/mHH7Z8QtgsYqeR7px56arDRgV6CngBZWgFvrQ2wBS0HPV4nB6YWvJQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.3.6"
+      }
+    },
     "node_modules/@storybook/test": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.3.1.tgz",
-      "integrity": "sha512-/ZZFZHr+jsO7oBrLFrrCkgkJrh1/AgHBqO8QR0zdTiR0NK0vo2l9v9FXat/VFhSaYTIpVU/NQdNKiPGTKIfAVw==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.3.6.tgz",
+      "integrity": "sha512-WIc8LzK9jaEw+e3OiweEM2j3cppPzsWod59swuf6gDBf176EQLIyjtVc+Kh3qO4NNkcL+lwmqaLPjOxlBLaDbg==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.3.1",
+        "@storybook/instrumenter": "8.3.6",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.5.0",
         "@testing-library/user-event": "14.5.2",
@@ -4803,7 +4812,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@storybook/test/node_modules/@testing-library/dom": {
@@ -4926,16 +4935,29 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.1.tgz",
-      "integrity": "sha512-R6YZnIdN9P9gTauVkZfVmob0/i6/yaAQxnwfMgRLCaFD0TFQ+UQ2pCz40zPAUp3BcNPwMD168GVxmheBb8cGag==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.6.tgz",
+      "integrity": "sha512-LQjUk6GXRW9ELkoBKuqzQKFUW+ajfGPfVELcfs3/VQX61VhthJ4olov4bGPc04wsmmFMgN/qODxT485IwOHfPQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.1"
+        "storybook": "^8.3.6"
+      }
+    },
+    "node_modules/@storybook/types": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-8.3.6.tgz",
+      "integrity": "sha512-EY+bjIxxmKkFrL7CyDQb3EXbmy0+Y9OieaPrNNM7QXTfGgp81lXhfqMX3HLMMjplk+rcxVJLyzXSBx0nIn91fQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.3.6"
       }
     },
     "node_modules/@tailwindcss/container-queries": {
@@ -5249,9 +5271,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.19.5",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.5.tgz",
-      "integrity": "sha512-y6W03tvrACO72aijJ5uF02FRq5cgDR9lUxddQ8vyF+GvmjJQqbzDcJngEjURc+ZsG31VI3hODNZJ2URj86pzmg==",
+      "version": "4.19.6",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
+      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -5396,9 +5418,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.7",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
-      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.12.tgz",
+      "integrity": "sha512-sviUmCE8AYdaF/KIHLDJBQgeYzPBI0vf/17NaYehBJfYD1j6/L95Slh07NlyK2iNyBNaEkb3En2jRt+a8y3xZQ==",
       "dev": true
     },
     "node_modules/@types/mdast": {
@@ -5930,9 +5952,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.1.tgz",
-      "integrity": "sha512-SjxPFOtuINDUW8/UkElJYQSFtnWX7tMksSGW0vfjxMneFqxVr8YJ979QpMbDW7g+BIiq88RAGDjf7en6rvLPPQ==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.4.tgz",
+      "integrity": "sha512-L95zIAkEuTDbUX1IsjRl+vyBSLh3PwLLgKpghl37aCK9Jvw0iP+wKwIFhfjdUtA2myLgjrG6VU6JCFLv8q/3Ww==",
       "dev": true,
       "dependencies": {
         "tinyrainbow": "^1.2.0"
@@ -5954,13 +5976,13 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.1.tgz",
-      "integrity": "sha512-Y6Q9TsI+qJ2CC0ZKj6VBb+T8UPz593N113nnUykqwANqhgf3QkZeHFlusgKLTqrnVHbj/XDKZcDHol+dxVT+rQ==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.4.tgz",
+      "integrity": "sha512-MXDnZn0Awl2S86PSNIim5PWXgIAx8CIkzu35mBdSApUip6RFOGXBCf3YFyeEu8n1IHk4bWD46DeYFu9mQlFIRg==",
       "dev": true,
       "dependencies": {
-        "@vitest/pretty-format": "2.1.1",
-        "loupe": "^3.1.1",
+        "@vitest/pretty-format": "2.1.4",
+        "loupe": "^3.1.2",
         "tinyrainbow": "^1.2.0"
       },
       "funding": {
@@ -7000,9 +7022,9 @@
       }
     },
     "node_modules/chai": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
-      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz",
+      "integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==",
       "dev": true,
       "dependencies": {
         "assertion-error": "^2.0.1",
@@ -7093,6 +7115,29 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chromatic": {
+      "version": "11.16.1",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.16.1.tgz",
+      "integrity": "sha512-pdpURz0tLp2EJSwfDUHJAf8xufkL/FGZmNuyebv03WkTOZPUAxBMZ19/Y6sFST6MQvUGy/2VI5eNWnfWLDLwhQ==",
+      "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/ci-info": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@@ -8841,14 +8886,13 @@
       }
     },
     "node_modules/eslint-plugin-storybook": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.8.0.tgz",
-      "integrity": "sha512-CZeVO5EzmPY7qghO2t64oaFM+8FTaD4uzOEjHKp516exyTKo+skKAL9GI3QALS2BXhyALJjNtwbmr1XinGE8bA==",
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.10.1.tgz",
+      "integrity": "sha512-YpxkdqyiKpMIrRquuvBaCinsqmZJ86JvXRX/gtRa4Qctpk0ipFt2cWqEjkB1HHWWG0DVRXlUBKHjRogC2Ig1fg==",
       "dev": true,
       "dependencies": {
-        "@storybook/csf": "^0.0.1",
-        "@typescript-eslint/utils": "^5.62.0",
-        "requireindex": "^1.2.0",
+        "@storybook/csf": "^0.1.11",
+        "@typescript-eslint/utils": "^8.8.1",
         "ts-dedent": "^2.2.0"
       },
       "engines": {
@@ -8858,13 +8902,137 @@
         "eslint": ">=6"
       }
     },
-    "node_modules/eslint-plugin-storybook/node_modules/@storybook/csf": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz",
-      "integrity": "sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==",
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.12.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.12.2.tgz",
+      "integrity": "sha512-gPLpLtrj9aMHOvxJkSbDBmbRuYdtiEbnvO25bCMza3DhMjTQw0u7Y1M+YR5JPbMsXXnSPuCf5hfq0nEkQDL/JQ==",
       "dev": true,
       "dependencies": {
-        "lodash": "^4.17.15"
+        "@typescript-eslint/types": "8.12.2",
+        "@typescript-eslint/visitor-keys": "8.12.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/types": {
+      "version": "8.12.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.12.2.tgz",
+      "integrity": "sha512-VwDwMF1SZ7wPBUZwmMdnDJ6sIFk4K4s+ALKLP6aIQsISkPv8jhiw65sAK6SuWODN/ix+m+HgbYDkH+zLjrzvOA==",
+      "dev": true,
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.12.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.12.2.tgz",
+      "integrity": "sha512-mME5MDwGe30Pq9zKPvyduyU86PH7aixwqYR2grTglAdB+AN8xXQ1vFGpYaUSJ5o5P/5znsSBeNcs5g5/2aQwow==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.12.2",
+        "@typescript-eslint/visitor-keys": "8.12.2",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils": {
+      "version": "8.12.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.12.2.tgz",
+      "integrity": "sha512-UTTuDIX3fkfAz6iSVa5rTuSfWIYZ6ATtEocQ/umkRSyC9O919lbZ8dcH7mysshrCdrAM03skJOEYaBugxN+M6A==",
+      "dev": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.12.2",
+        "@typescript-eslint/types": "8.12.2",
+        "@typescript-eslint/typescript-estree": "8.12.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.12.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.12.2.tgz",
+      "integrity": "sha512-PChz8UaKQAVNHghsHcPyx1OMHoFRUEA7rJSK/mDhdq85bk+PLsUHUBqTQTFt18VJZbmxBovM65fezlheQRsSDA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "8.12.2",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/eslint-plugin-storybook/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/eslint-plugin-testing-library": {
@@ -9612,15 +9780,6 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
-    "node_modules/get-func-name": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
-      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -9925,9 +10084,9 @@
       }
     },
     "node_modules/hast-util-to-string": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
-      "integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
+      "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
       "dev": true,
       "dependencies": {
         "@types/hast": "^3.0.0"
@@ -13137,13 +13296,10 @@
       }
     },
     "node_modules/loupe": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
-      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
-      "dev": true,
-      "dependencies": {
-        "get-func-name": "^2.0.1"
-      }
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
+      "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
+      "dev": true
     },
     "node_modules/lru-cache": {
       "version": "5.1.1",
@@ -13164,9 +13320,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
       "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -16190,15 +16346,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/requireindex": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
-      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.5"
-      }
-    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -16887,12 +17034,12 @@
       }
     },
     "node_modules/storybook": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.1.tgz",
-      "integrity": "sha512-CYqt5KOpaTgb8OczNo2+EtMi8YNDPi4vNVebVlLDOroWxyulb8I7MIOH9gALczcIOb+TZUArPztjoa8rkXTaDQ==",
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.6.tgz",
+      "integrity": "sha512-9GVbtej6ZzPRUM7KRQ7848506FfHrUiJGqPuIQdoSJd09EmuEoLjmLAgEOmrHBQKgGYMaM7Vh9GsTLim6vwZTQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/core": "8.3.1"
+        "@storybook/core": "8.3.6"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -17620,6 +17767,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/ts-dedent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
@@ -18036,12 +18195,12 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.14.1.tgz",
-      "integrity": "sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.15.0.tgz",
+      "integrity": "sha512-jTPIs63W+DUEDW207ztbaoO7cQ4p5aVaB823LSlxpsFEU3Mykwxf3ZGC/wzxFJeZlASZYgVrWeo7LgOrqJZ8RA==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.12.1",
+        "acorn": "^8.14.0",
         "webpack-virtual-modules": "^0.6.2"
       },
       "engines": {
@@ -18057,9 +18216,9 @@
       }
     },
     "node_modules/unplugin/node_modules/acorn": {
-      "version": "8.12.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
diff --git a/package.json b/package.json
index 128c21c..80bb0ca 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
   ],
   "peerDependencies": {
     "@hookform/error-message": "^2.0.1",
-    "@howso/react-tailwind-flowbite-components": "^6.0.1",
+    "@howso/react-tailwind-flowbite-components": "^6.1.0",
     "@howso/ui-internationalization-utils": "^1.0.5",
     "jotai": "^2.8.3",
     "react": "^18.0.0",
@@ -47,24 +47,24 @@
     "@rollup/rollup-linux-x64-gnu": "^4.9.6"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
+    "@chromatic-com/storybook": "^3.2.0",
     "@fontsource/inter": "^5.0.5",
     "@hookform/error-message": "^2.0.1",
     "@howso/engine": "^6.0.0",
-    "@howso/react-tailwind-flowbite-components": "^6.0.1",
+    "@howso/react-tailwind-flowbite-components": "^6.1.0",
     "@howso/ui-internationalization-utils": "^1.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^8.3.1",
-    "@storybook/addon-actions": "^8.3.1",
-    "@storybook/addon-essentials": "^8.3.1",
-    "@storybook/addon-interactions": "^8.3.1",
-    "@storybook/addon-links": "^8.3.1",
-    "@storybook/addon-mdx-gfm": "^8.3.1",
-    "@storybook/blocks": "^8.3.1",
-    "@storybook/react": "^8.3.1",
-    "@storybook/react-vite": "^8.3.1",
-    "@storybook/test": "^8.3.1",
+    "@storybook/addon-a11y": "^8.3.6",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-mdx-gfm": "^8.3.6",
+    "@storybook/blocks": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/test": "^8.3.6",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.14",
@@ -73,7 +73,7 @@
     "autoprefixer": "^10.4.18",
     "eslint": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.10.1",
     "husky": "^7.0.4",
     "i18next-browser-languagedetector": "^8.0.0",
     "jest": "^29.6.1",
@@ -91,7 +91,7 @@
     "react-router-dom": "^6.14.1",
     "rollup": "^4.12.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.3.1",
+    "storybook": "^8.3.6",
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.1",
     "typescript": "^5.5.2",
diff --git a/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.stories.tsx b/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.stories.tsx
index 385655e..be04612 100644
--- a/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.stories.tsx
+++ b/src/components/Trainee/TraineeCreationStepper/TraineeCreationStepper.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { TraineeCreationStepper } from ".";
+import { withPadding } from "../../../storybook";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof TraineeCreationStepper> = {
@@ -8,8 +9,9 @@ const meta: Meta<typeof TraineeCreationStepper> = {
   tags: ["autodocs"],
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: "centered",
+    layout: "fullscreen",
   },
+  decorators: [withPadding],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {},
   args: {
diff --git a/src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.stories.tsx b/src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.stories.tsx
new file mode 100644
index 0000000..ee3bee1
--- /dev/null
+++ b/src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.stories.tsx
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TraineeIdentifiers } from ".";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof TraineeIdentifiers> = {
+  component: TraineeIdentifiers,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  args: {
+    name: "bath-reality-midnight",
+    id: "2d0d1e36-7331-4176-bf35-59241fabde78",
+    loading: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TraineeIdentifiers>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {},
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const NoName: Story = {
+  args: {
+    name: undefined,
+  },
+};
diff --git a/src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.tsx b/src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.tsx
new file mode 100644
index 0000000..0d71be5
--- /dev/null
+++ b/src/components/Trainee/TraineeIdentifiers/TraineeIdentifiers.tsx
@@ -0,0 +1,37 @@
+import { Identicon, Skeleton } from "@howso/react-tailwind-flowbite-components";
+import { ComponentProps, FC } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type TraineeIdentifiersProps = ComponentProps<"div"> & {
+  id?: string | null;
+  name?: string | null;
+  loading?: boolean;
+};
+export const TraineeIdentifiers: FC<TraineeIdentifiersProps> = ({
+  id,
+  name,
+  loading,
+  ...props
+}) => {
+  const primary = name || id;
+  const secondary = name && id ? id : undefined;
+
+  return (
+    <div
+      {...props}
+      className={twMerge(props.className, "flex flex-row items-center gap-4")}
+    >
+      <Identicon id={id} loading={loading} className="h-[32px]" />
+      <div className="truncate">
+        <div className="text-sm font-medium truncate">
+          {loading ? <Skeleton variant="text" className="w-32" /> : primary}
+        </div>
+        {(loading || secondary) && (
+          <div className="text-xs truncate">
+            {loading ? <Skeleton variant="text" className="w-64" /> : secondary}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Trainee/TraineeIdentifiers/index.ts b/src/components/Trainee/TraineeIdentifiers/index.ts
new file mode 100644
index 0000000..25b61d9
--- /dev/null
+++ b/src/components/Trainee/TraineeIdentifiers/index.ts
@@ -0,0 +1 @@
+export * from "./TraineeIdentifiers";
diff --git a/src/components/Trainee/index.ts b/src/components/Trainee/index.ts
index 5c86aa5..9d84df9 100644
--- a/src/components/Trainee/index.ts
+++ b/src/components/Trainee/index.ts
@@ -3,6 +3,7 @@ import { Languages } from "../../constants";
 import { TraineeCreationStepperI18nBundle } from "./TraineeCreationStepper";
 
 export * from "./TraineeCreationStepper";
+export * from "./TraineeIdentifiers";
 
 export const TraineeI18nBundles: I18nBundle<Languages, any>[] = [
   TraineeCreationStepperI18nBundle,