From d1c2d6547fc86411443e4832fba2aeef7123c522 Mon Sep 17 00:00:00 2001
From: Alexey Potsetsuev <wrouds@gmail.com>
Date: Tue, 23 Sep 2025 21:02:07 +0800
Subject: [PATCH] dbeaver/pro#6968 feat: add storybook (#3767)

* dbeaver/pro#6968 feat: add storybook

* chore: remove duplicate

* fix: ladle

* chore: remove storybook onboarding

* adds task to run storybook

---------

Co-authored-by: sergeyteleshev <iamsergeyteleshev@gmail.com>
---
 .vscode/tasks.json                            |   9 +
 .../@dbeaver/ui-kit/vite.config.ts            |  19 +-
 webapp/packages/eslint-config/flat.js         |   7 +-
 webapp/packages/eslint-config/package.json    |   1 +
 webapp/packages/storybook/.gitignore          |  27 +
 .../packages/storybook/.storybook/global.css  | 132 +++
 webapp/packages/storybook/.storybook/main.ts  |  20 +
 .../packages/storybook/.storybook/preview.ts  |  15 +
 webapp/packages/storybook/package.json        |  31 +
 .../src/stories/components/Button/Button.mdx  |  36 +
 .../src/stories/components/Button/Tokens.mdx  |  86 ++
 .../components/Button/button.stories.tsx      | 358 ++++++++
 webapp/packages/storybook/src/vite-env.d.ts   |   1 +
 webapp/packages/storybook/tsconfig.app.json   |  26 +
 webapp/packages/storybook/tsconfig.json       |   8 +
 webapp/packages/storybook/tsconfig.node.json  |  32 +
 webapp/packages/storybook/vite.config.ts      |  26 +
 webapp/yarn.lock                              | 807 +++++++++++++++++-
 18 files changed, 1621 insertions(+), 20 deletions(-)
 create mode 100644 webapp/packages/storybook/.gitignore
 create mode 100644 webapp/packages/storybook/.storybook/global.css
 create mode 100644 webapp/packages/storybook/.storybook/main.ts
 create mode 100644 webapp/packages/storybook/.storybook/preview.ts
 create mode 100644 webapp/packages/storybook/package.json
 create mode 100644 webapp/packages/storybook/src/stories/components/Button/Button.mdx
 create mode 100644 webapp/packages/storybook/src/stories/components/Button/Tokens.mdx
 create mode 100644 webapp/packages/storybook/src/stories/components/Button/button.stories.tsx
 create mode 100644 webapp/packages/storybook/src/vite-env.d.ts
 create mode 100644 webapp/packages/storybook/tsconfig.app.json
 create mode 100644 webapp/packages/storybook/tsconfig.json
 create mode 100644 webapp/packages/storybook/tsconfig.node.json
 create mode 100644 webapp/packages/storybook/vite.config.ts

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 93c09dfd67..b532438071 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -136,6 +136,15 @@
         "cwd": "${workspaceFolder}/webapp/common-react/@dbeaver/ui-kit"
       },
       "args": ["docs"]
+    },
+    {
+      "label": "Run Storybook",
+      "type": "shell",
+      "command": "yarn",
+      "options": {
+        "cwd": "${workspaceFolder}/webapp/packages/storybook"
+      },
+      "args": ["storybook"]
     }
   ],
   "inputs": [
diff --git a/webapp/common-react/@dbeaver/ui-kit/vite.config.ts b/webapp/common-react/@dbeaver/ui-kit/vite.config.ts
index 2b4adf60b7..e802fdcda6 100644
--- a/webapp/common-react/@dbeaver/ui-kit/vite.config.ts
+++ b/webapp/common-react/@dbeaver/ui-kit/vite.config.ts
@@ -1,10 +1,23 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
 import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
 import { assetResolverPlugin } from '@wroud/vite-plugin-asset-resolver';
 import { tscPlugin } from '@wroud/vite-plugin-tsc';
 import svgr from 'vite-plugin-svgr';
 
-/** @type {import('vite').UserConfig} */
-export default {
+export default defineConfig({
+  server: {
+    fs: {
+      strict: false,
+    },
+  },
   plugins: [
     svgr(),
     tailwindcss(),
@@ -15,4 +28,4 @@ export default {
       prebuild: true,
     }),
   ],
-};
+});
diff --git a/webapp/packages/eslint-config/flat.js b/webapp/packages/eslint-config/flat.js
index 8e2ce6f244..51125b0988 100644
--- a/webapp/packages/eslint-config/flat.js
+++ b/webapp/packages/eslint-config/flat.js
@@ -5,6 +5,7 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+import { defineConfig } from 'eslint/config';
 import cloudbeaverPlugin from '@cloudbeaver/eslint-plugin';
 import pluginReact from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
@@ -12,8 +13,10 @@ import tseslint from 'typescript-eslint';
 import eslint from '@eslint/js';
 import stylistic from '@stylistic/eslint-plugin';
 import eslintConfigPrettier from 'eslint-config-prettier';
+import storybook from 'eslint-plugin-storybook';
 
-export default tseslint.config(
+export default defineConfig(
+  storybook.configs['flat/recommended'],
   eslint.configs.recommended,
   tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
@@ -238,6 +241,6 @@ export default tseslint.config(
   },
   {
     files: ['**/*.cjs'],
-    ignores: ['**/lib'],
+    ignores: ['**/lib', '!.storybook'],
   },
 );
diff --git a/webapp/packages/eslint-config/package.json b/webapp/packages/eslint-config/package.json
index 34f13befdc..337ab601b9 100644
--- a/webapp/packages/eslint-config/package.json
+++ b/webapp/packages/eslint-config/package.json
@@ -30,6 +30,7 @@
     "eslint-config-prettier": "^10",
     "eslint-plugin-react": "^7",
     "eslint-plugin-react-hooks": "^5",
+    "eslint-plugin-storybook": "^9",
     "typescript-eslint": "^8"
   }
 }
diff --git a/webapp/packages/storybook/.gitignore b/webapp/packages/storybook/.gitignore
new file mode 100644
index 0000000000..f52343a92d
--- /dev/null
+++ b/webapp/packages/storybook/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log
+storybook-static
diff --git a/webapp/packages/storybook/.storybook/global.css b/webapp/packages/storybook/.storybook/global.css
new file mode 100644
index 0000000000..388b137073
--- /dev/null
+++ b/webapp/packages/storybook/.storybook/global.css
@@ -0,0 +1,132 @@
+@import 'tailwindcss' layer(base) prefix(tw);
+
+@layer theme {
+  main {
+    color: var(--dbv-kit-color-foreground);
+    background-color: var(--tw-color-gray-50);
+  }
+
+  a {
+    color: var(--tw-color-blue-600);
+    text-decoration: underline;
+
+    &:hover {
+      color: var(--tw-color-blue-700);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  code {
+    color: var(--tw-color-orange-700);
+  }
+
+  h1,
+  h2,
+  h3,
+  h3,
+  h5 {
+    font-weight: var(--tw-font-weight-semibold);
+    margin-block-start: 1em;
+    margin-block-end: 0.5em;
+  }
+
+  h1 {
+    font-size: var(--tw-text-2xl);
+  }
+
+  h2 {
+    font-size: var(--tw-text-xl);
+  }
+
+  h3 {
+    font-size: var(--tw-text-lg);
+  }
+
+  p {
+    font-size: var(--tw-text-base);
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+  }
+
+  kbd {
+    background-color: #eee;
+    border-radius: 3px;
+    border: 1px solid #b4b4b4;
+    box-shadow:
+      0 1px 1px rgba(0, 0, 0, 0.2),
+      0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+    color: #333;
+    display: inline-block;
+    font-size: 0.85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+  }
+
+  .codeblock {
+    background-color: var(--tw-color-gray-100);
+    padding: 1em;
+    border-radius: 0.25em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+  }
+
+  .comment {
+    color: var(--tw-color-gray-500);
+  }
+
+  .color-sample {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border-radius: 0.25em;
+  }
+}
+
+:root[data-theme='dark'] {
+  --dbv-kit-color-foreground: var(--tw-color-gray-200);
+  --dbv-kit-color-background: var(--tw-color-gray-900);
+  --dbv-kit-btn-loader-base-color: var(--tw-color-gray-900);
+
+  /* Primary Button */
+  --dbv-kit-btn-primary-foreground: var(--tw-color-gray-100);
+  --dbv-kit-btn-primary-background: var(--dbv-kit-color-primary-700);
+  --dbv-kit-btn-primary-background-hover: var(--dbv-kit-color-primary-600);
+  --dbv-kit-btn-primary-background-active: var(--dbv-kit-color-primary-500);
+
+  /* Secondary Button */
+  --dbv-kit-btn-secondary-foreground: var(--tw-color-gray-100);
+  --dbv-kit-btn-secondary-background: transparent;
+  --dbv-kit-btn-secondary-background-hover: var(--tw-color-gray-800);
+  --dbv-kit-btn-secondary-background-active: var(--tw-color-gray-700);
+  --dbv-kit-btn-secondary-border-color: var(--tw-color-gray-200);
+
+  /* Danger Button */
+  --dbv-kit-btn-danger-foreground: var(--tw-color-gray-100);
+  --dbv-kit-btn-danger-background: var(--tw-color-red-700);
+  --dbv-kit-btn-danger-background-hover: var(--tw-color-red-600);
+  --dbv-kit-btn-danger-background-active: var(--tw-color-red-500);
+
+  /* Input */
+  --dbv-kit-input-background: var(--tw-color-gray-800);
+  --dbv-kit-input-border-color: var(--tw-color-gray-700);
+  --dbv-kit-input-color: var(--tw-color-gray-100);
+  --dbv-kit-input-placeholder-foreground: var(--tw-color-gray-400);
+
+  main {
+    background-color: var(--tw-color-gray-900);
+  }
+
+  code {
+    color: var(--tw-color-orange-400);
+  }
+
+  a {
+    color: var(--tw-color-blue-300);
+  }
+
+  .codeblock {
+    background-color: var(--tw-color-gray-800);
+  }
+}
diff --git a/webapp/packages/storybook/.storybook/main.ts b/webapp/packages/storybook/.storybook/main.ts
new file mode 100644
index 0000000000..5049699627
--- /dev/null
+++ b/webapp/packages/storybook/.storybook/main.ts
@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [getAbsolutePath('@storybook/addon-docs')],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+};
+export default config;
diff --git a/webapp/packages/storybook/.storybook/preview.ts b/webapp/packages/storybook/.storybook/preview.ts
new file mode 100644
index 0000000000..37cb3fe5b8
--- /dev/null
+++ b/webapp/packages/storybook/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import './global.css';
+import type { Preview } from '@storybook/react-vite';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/webapp/packages/storybook/package.json b/webapp/packages/storybook/package.json
new file mode 100644
index 0000000000..17e1990f1b
--- /dev/null
+++ b/webapp/packages/storybook/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@cloudbeaver/storybook",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@dbeaver/ui-kit": "workspace:^",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@cloudbeaver/tsconfig": "workspace:*",
+    "@storybook/addon-docs": "^9",
+    "@storybook/react-vite": "^9",
+    "@tailwindcss/vite": "4.0.7",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5",
+    "@wroud/vite-plugin-asset-resolver": "^0",
+    "@wroud/vite-plugin-tsc": "^0",
+    "globals": "^16",
+    "storybook": "^9",
+    "tailwindcss": "4.0.7",
+    "typescript": "^5",
+    "vite": "^7"
+  }
+}
diff --git a/webapp/packages/storybook/src/stories/components/Button/Button.mdx b/webapp/packages/storybook/src/stories/components/Button/Button.mdx
new file mode 100644
index 0000000000..b4f7e8dc9b
--- /dev/null
+++ b/webapp/packages/storybook/src/stories/components/Button/Button.mdx
@@ -0,0 +1,36 @@
+
+
+# Button
+
+The Button component is a simple button that can be used in different contexts. It has several visual parameters that can be customized.
+
+## Class names
+
+- `.dbv-kit-button` - the main class name for the button component.
+- `.dbv-kit-button--primary` - the class name for the primary variant.
+- `.dbv-kit-button--secondary` - the class name for the secondary variant.
+- `.dbv-kit-button--danger` - the class name for the danger variant.
+- `.dbv-kit-button--small` - the class name for the small size.
+- `.dbv-kit-button--medium` - the class name for the medium size.
+- `.dbv-kit-button--large` - the class name for the large size.
+- `.dbv-kit-button--xlarge` - the class name for the extra large size.
+
+---
+
+- `.dbv-kit-button__icon` - the class name for the icon component.
+- `.dbv-kit-button__icon--start` - the class name for the icon with placement="start".
+- `.dbv-kit-button__icon--end` - the class name for the icon with placement="end".
+
+Underlying components docs:  
+[https://ariakit.org/reference/button](https://ariakit.org/reference/button)
+
+### Props:
+
+**variant**  
+primary | secondary | danger
+
+**size**  
+small | medium | large | xlarge
+
+**loading**  
+boolean
diff --git a/webapp/packages/storybook/src/stories/components/Button/Tokens.mdx b/webapp/packages/storybook/src/stories/components/Button/Tokens.mdx
new file mode 100644
index 0000000000..275de5bd07
--- /dev/null
+++ b/webapp/packages/storybook/src/stories/components/Button/Tokens.mdx
@@ -0,0 +1,86 @@
+
+
+# Button CSS Tokens
+
+This UI kit uses several CSS tokens to style buttons.
+
+## Common buttons tokens
+
+### Size and space
+
+- `--dbv-kit-btn-height:` var(--dbv-kit-control-height-medium) - Default button height
+- `--dbv-kit-btn-padding-inline:` --spacing(2.5) - Medium button inline paddings, other sizes are calculated based on that variable
+- `--dbv-kit-btn-gap:` calc(var(--dbv-kit-btn-padding-inline) /4) - Gap between button elements (mostly text and icon)
+- `--dbv-kit-btn-outline-offset:` 1px - Button outline offset
+
+### Basic colors
+
+- `--dbv-kit-btn-foreground:` var(--color-white) - Default button text color
+- `--dbv-kit-btn-background:` var(--dbv-kit-color-primary-600) - Default button background color
+- `--dbv-kit-btn-background-hover:` var(--dbv-kit-color-primary-700) - Button hover background color
+- `--dbv-kit-btn-background-active:` var(--dbv-kit-color-primary-800) - Button active background color
+
+### Border
+
+- `--dbv-kit-btn-border-width:` 1px - Button border width
+- `--dbv-kit-btn-border-color:` transparent; --dbv-kit-btn-border-style: solid - Button border color and style
+- `--dbv-kit-btn-border-radius:` var(--radius-md) - Button border radius
+
+### Font
+
+- `--dbv-kit-btn-font-weight:` var(--font-weight-normal) - Button font weight
+- `--dbv-kit-btn-font-size:` calc(var(--dbv-kit-font-size-base) * 0.875) - Button font size, default for medium-sized button, other sizes calculated based on that value
+
+### Loader
+
+- `--dbv-kit-btn-loader-base-color:` var(--tw-color-white) - This color used in loader to mix with other button colors like `color: color-mix(in srgb, var(--dbv-kit-btn-foreground) 25%, var(--dbv-kit-btn-loader-base-color))`. It should be light in light mode and one of the dark colors for dark theme.
+- `--dbv-kit-btn-loader-animation:` var(--animate-spin) - Button loader animation
+
+### Others
+
+- `--dbv-kit-btn-disabled-opacity:` 0.5 - Button opacity when disabled
+
+## Specific buttons tokens
+
+### Button Sizes
+
+The `--dbv-kit-btn-*-height` tokens are used to define the height of buttons for different size variants. Default buttons use `--control-height-*` variable as the base height.
+
+- Small button height: `--dbv-kit-btn-small-height`
+- Medium button height: `--dbv-kit-btn-medium-height`
+- Large button height: `--dbv-kit-btn-large-height`
+- Extra large button height: `--dbv-kit-btn-xlarge-height`
+
+### Button Padding
+
+The `--dbv-kit-btn-*-padding-inline` tokens are used to define the padding of buttons for different size variants.
+
+- Small button padding: `--dbv-kit-btn-small-padding-inline`
+- Medium button padding: `--dbv-kit-btn-medium-padding-inline`
+- Large button padding: `--dbv-kit-btn-large-padding-inline`
+- Extra large button padding: `--dbv-kit-btn-xlarge-padding-inline`
+
+### Button Colors
+
+- Primary button background: `--dbv-kit-btn-primary-background`
+- Primary button background (hover): `--dbv-kit-btn-primary-background-hover`
+- Primary button background (active): `--dbv-kit-btn-primary-background-active`
+- Secondary button background: `--dbv-kit-btn-secondary-background`
+- Secondary button background (hover): `--dbv-kit-btn-secondary-background-hover`
+- Secondary button background (active): `--dbv-kit-btn-secondary-background-active`
+- Secondary button border color: `--dbv-kit-btn-secondary-border-color`
+- Danger button background: `--dbv-kit-btn-danger-background`
+- Danger button background (hover): `--dbv-kit-btn-danger-background-hover`
+- Danger button background (active): `--dbv-kit-btn-danger-background-active`
+
+The `--dbv-kit-btn-*-background` and `--dbv-kit-btn-*-foreground` tokens are used to define the background and text color of buttons for different variants (primary, secondary, danger).
+
+To set another background or text color for your button, you can override the respective `--dbv-kit-btn-*` tokens in your CSS.
+
+### Button Borders
+
+Button border width: `--dbv-kit-btn-border-width`
+
+The `--dbv-kit-btn-border-width` token is used to define the border width of buttons.
+
+To change the border size of your button, you can override the `--dbv-kit-btn-border-width` token in your CSS.
diff --git a/webapp/packages/storybook/src/stories/components/Button/button.stories.tsx b/webapp/packages/storybook/src/stories/components/Button/button.stories.tsx
new file mode 100644
index 0000000000..7a14c1ab2c
--- /dev/null
+++ b/webapp/packages/storybook/src/stories/components/Button/button.stories.tsx
@@ -0,0 +1,358 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { Button, ButtonIcon } from '@dbeaver/ui-kit';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary', 'danger'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'primary',
+    },
+    size: {
+      options: ['small', 'medium', 'large', 'xlarge'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'medium',
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+  },
+};
+
+export const Variants = () => (
+  <div>
+    <h3 className="tw:text-lg tw:my-2">Variants</h3>
+    <p>Button component has 3 predefined variants: primary, secondary, and danger.</p>
+    <div className="codeblock tw:bg-gray-100 tw:p-4 tw:my-4">
+      <code>&lt;Button variant="primary"/&gt;</code>
+    </div>
+    <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+      <Button loading>Loading</Button>
+      <Button>Primary</Button>
+      <Button disabled>Disabled</Button>
+    </div>
+
+    <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+      <Button variant="secondary" loading>
+        Secondary
+      </Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="secondary" disabled>
+        Disabled
+      </Button>
+    </div>
+    <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+      <Button variant="danger" loading>
+        Danger
+      </Button>
+      <Button variant="danger">Danger</Button>
+      <Button variant="danger" disabled>
+        Disabled
+      </Button>
+    </div>
+
+    <div className="tw:my-4">
+      <h3>Design tokens for variants</h3>
+      <p className="tw:text-base">
+        Primary button background: <code>--dbv-kit-btn-primary-background</code>
+      </p>
+      <p className="tw:text-base">
+        Primary button background (hover): <code>--dbv-kit-btn-primary-background-hover</code>
+      </p>
+      <p className="tw:text-base">
+        Primary button background (active): <code>--dbv-kit-btn-primary-background-active</code>
+      </p>
+      <p className="tw:text-base">
+        Secondary button background: <code>--dbv-kit-btn-secondary-background</code>
+      </p>
+      <p className="tw:text-base">
+        Secondary button background (hover): <code>--dbv-kit-btn-secondary-background-hover</code>
+      </p>
+      <p className="tw:text-base">
+        Secondary button background (active): <code>--dbv-kit-btn-secondary-background-active</code>
+      </p>
+      <p className="tw:text-base">
+        Secondary button border color: <code>--dbv-kit-btn-secondary-border-color</code>
+      </p>
+      <p className="tw:text-base">
+        Danger button background: <code>--dbv-kit-btn-danger-background</code>
+      </p>
+      <p className="tw:text-base">
+        Danger button background (hover): <code>--dbv-kit-btn-danger-background-hover</code>
+      </p>
+      <p className="tw:text-base">
+        Danger button background (active): <code>--dbv-kit-btn-danger-background-active</code>
+      </p>
+    </div>
+  </div>
+);
+
+export const Sizes = () => (
+  <div>
+    <h2 className="tw:text-lg tw:my-2">Sizes</h2>
+    <p>Button component has 4 predefined sizes: small, medium, large, and extra large. Check the examples below:</p>
+    <div className="tw:flex tw:flex-col tw:gap-4">
+      <Button size="small">Small</Button>
+      <Button size="medium">Medium</Button>
+      <Button size="large">Large button</Button>
+      <Button size="xlarge">EXTRA Large button</Button>
+    </div>
+    <h3>Design tokens for sizes</h3>
+    <p>
+      The Button component uses the following design tokens to define the sizes of the buttons. You can customize these tokens to change the button
+      sizes.
+    </p>
+    <div className="tw:my-4">
+      <p className="tw:text-base">
+        Small button height: <code>--dbv-kit-btn-small-height</code>
+      </p>
+      <p className="tw:text-base">
+        Medium button height: <code>--dbv-kit-btn-medium-height</code>
+      </p>
+      <p className="tw:text-base">
+        Large button height: <code>--dbv-kit-btn-large-height</code>
+      </p>
+      <p className="tw:text-base">
+        Extra large button height: <code>--dbv-kit-btn-xlarge-height</code>
+      </p>
+    </div>
+  </div>
+);
+
+export const Icons = () => (
+  <div>
+    <h2>Icons</h2>
+    <h3>&lt;ButtonIcon&gt;</h3>
+    <code>.dbv-kit-button__icon</code>
+    <p>
+      To properly place an icon inside a button, you have to use ButtonIcon component. That component will compensate outer padding to balance the
+      button view. You need to specify the placement property to adjust the icon position.
+    </p>
+    <dl>
+      <dt className="tw:font-semibold">placement</dt>
+      <dd>start | end</dd>
+    </dl>
+    <div className="codeblock">
+      <code>
+        &lt;Button&gt; <br /> &nbsp;&nbsp;&lt;ButtonIcon placement="start"/&gt;
+        <br />
+        &nbsp; Text
+        <br /> &lt;Button/&gt;
+      </code>
+    </div>
+
+    <div>
+      <h4>Compare buttons:</h4>
+      <div className="tw:flex tw:gap-4 tw:items-center tw:my-4">
+        <Button variant="secondary">
+          <ButtonIcon placement="start">🧤</ButtonIcon>
+          Text
+        </Button>
+        <Button variant="secondary">🧤 Text</Button>
+      </div>
+      <p>
+        The left button uses ButtonIcon component and looks more balanced. If you feel that in your case it's not needed, feel free to not use the
+        <b> ButtonIcon </b> component.
+      </p>
+    </div>
+
+    <h3>Tokens</h3>
+    <div>
+      <code>--dbv-kit-btn-icon-margin-inline</code> - the margin between the icon and the text, by default calculated based on{' '}
+      <code>--dbv-kit-btn-padding-inline</code> for each size.
+    </div>
+
+    <h3>Examples</h3>
+    <p>
+      Here are some examples of how to use the Button component with icons. Don't forget to check the source code by pressing <kbd>s</kbd>
+    </p>
+    <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+      <Button size="small">
+        Love
+        <ButtonIcon placement="end">❤️</ButtonIcon>
+      </Button>
+
+      <Button className="tw:text-lime-300">
+        Have you seen
+        <ButtonIcon className="w-2">
+          <svg width="16" height="16" fill="none">
+            <g strokeWidth="0"></g>
+            <g strokeLinecap="round" strokeLinejoin="round"></g>
+            <g>
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8 16L3.54223 12.3383C1.93278 11.0162 1 9.04287 1 6.96005C1 3.11612 4.15607 0 8 0C11.8439 0 15 3.11612 15 6.96005C15 9.04287 14.0672 11.0162 12.4578 12.3383L8 16ZM3 6H5C6.10457 6 7 6.89543 7 8V9L3 7.5V6ZM11 6C9.89543 6 9 6.89543 9 8V9L13 7.5V6H11Z"
+                fill="currentColor"
+              ></path>
+            </g>
+          </svg>
+        </ButtonIcon>
+        UFO?
+      </Button>
+
+      <Button size="large">
+        <ButtonIcon placement="start">🎾</ButtonIcon>
+        Tennis
+      </Button>
+
+      <Button size="xlarge">
+        <ButtonIcon placement="start">🎾</ButtonIcon>
+        Tennis is Love
+        <ButtonIcon placement="end">❤️</ButtonIcon>
+      </Button>
+    </div>
+    <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+      <Button loading>
+        <ButtonIcon className="tw:w-8 tw:h-4" placement="start">
+          <svg width="16" height="16" fill="none">
+            <g strokeWidth="0"></g>
+            <g strokeLinecap="round" strokeLinejoin="round"></g>
+            <g>
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8 16L3.54223 12.3383C1.93278 11.0162 1 9.04287 1 6.96005C1 3.11612 4.15607 0 8 0C11.8439 0 15 3.11612 15 6.96005C15 9.04287 14.0672 11.0162 12.4578 12.3383L8 16ZM3 6H5C6.10457 6 7 6.89543 7 8V9L3 7.5V6ZM11 6C9.89543 6 9 6.89543 9 8V9L13 7.5V6H11Z"
+                fill="currentColor"
+              ></path>
+            </g>
+          </svg>
+        </ButtonIcon>
+        UFO
+      </Button>
+      <Button variant="secondary" loading>
+        <ButtonIcon placement="start">🎾</ButtonIcon>
+        Tennis
+      </Button>
+      <Button disabled>
+        <ButtonIcon placement="start">🎾</ButtonIcon>
+        Tennis
+      </Button>
+      <Button variant="danger">
+        <ButtonIcon placement="start">🎾</ButtonIcon>
+        Tennis
+      </Button>
+      <Button>
+        <ButtonIcon>🎾</ButtonIcon>
+      </Button>
+    </div>
+  </div>
+);
+
+const CustomLoader = () => (
+  <div>
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="tw:animate-spin tw:p-1">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeDasharray="31.415, 31.415" />
+    </svg>
+  </div>
+);
+
+export const Loading = () => {
+  const [loading, setLoading] = useState(true);
+
+  function toggleLoading() {
+    setLoading(prev => !prev);
+  }
+
+  return (
+    <div>
+      <h2>Loading</h2>
+      <h3>Design tokens</h3>
+      <p>
+        <code>--dbv-kit-btn-loader-base-color:</code> var(--tw-color-white);{' '}
+        <span className="comment">
+          // This color used in loader to mix with other button colors like{' '}
+          <i> color: color-mix(in srgb, var(--dbv-kit-btn-foreground) 25%, var(--dbv-kit-btn-loader-base-color));</i> It should be light in light mode
+          and one of the dark colors for dark theme.
+        </span>
+      </p>
+
+      <label>
+        Enable loaders <input type="checkbox" checked={loading} onChange={toggleLoading} />
+      </label>
+      <h3>Default loader</h3>
+      <p>Button component has a default loader that appears when the loading property is set to true.</p>
+      <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+        <Button loading={loading}>Primary</Button>
+        <Button variant="secondary" loading={loading}>
+          Secondary
+        </Button>
+        <Button variant="danger" loading={loading}>
+          Danger
+        </Button>
+      </div>
+      <h3> Custom loader</h3>
+
+      <p>Buttons support custom loaders.</p>
+
+      <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+        <Button loading={loading} loader={<span className="tw:flex tw:items-center tw:animate-spin">⚽️</span>}>
+          Loading
+        </Button>
+
+        <Button loading={loading} loader={<span className="tw:absolute tw:animate-bounce">🚴</span>}>
+          Loading
+        </Button>
+
+        <Button loading={loading} loader={<CustomLoader />}>
+          Custom SVG Loader
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const WithCustomRendering = () => {
+  return (
+    <div>
+      <h3 className="tw:text-lg tw:my-2">Custom renders</h3>
+      <p>
+        Button can be rendered as different HTML element using <code>render</code> property. Read more{' '}
+        <a href="https://ariakit.org/reference/button#render">in AriaKit documentation</a>
+      </p>
+      <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+        <Button render={<a target="_blank" href="/" />} size="small">
+          Link button
+        </Button>
+        <Button variant="secondary" render={<a />}>
+          Link secondary
+        </Button>
+        <Button render={({ children, className }) => <p className={className}>{children} render</p>} size="medium">
+          Paragraph
+        </Button>
+      </div>
+      <h3 className="tw:text-lg tw:my-2">Change on focus</h3>
+      <div className="tw:flex tw:gap-4 tw:my-4 tw:items-center">
+        <Button onFocusVisible={e => (e.currentTarget.textContent = 'Click me!')} render={<a href="/" />} size="small">
+          Link button
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/webapp/packages/storybook/src/vite-env.d.ts b/webapp/packages/storybook/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/webapp/packages/storybook/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/webapp/packages/storybook/tsconfig.app.json b/webapp/packages/storybook/tsconfig.app.json
new file mode 100644
index 0000000000..3dc7f11aa1
--- /dev/null
+++ b/webapp/packages/storybook/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "extends": "@cloudbeaver/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "../../common-react/@dbeaver/ui-kit"
+    }
+  ],
+  "include": [
+    "__custom_mocks__/**/*",
+    "src/**/*",
+    "src/**/*.json",
+    "src/**/*.css",
+    "src/**/*.scss"
+  ],
+  "exclude": [
+    "**/node_modules",
+    "dist/**/*",
+    "lib/**/*"
+  ]
+}
diff --git a/webapp/packages/storybook/tsconfig.json b/webapp/packages/storybook/tsconfig.json
new file mode 100644
index 0000000000..96a86c7b43
--- /dev/null
+++ b/webapp/packages/storybook/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "../../common-react/@dbeaver/ui-kit"
+    }
+  ]
+}
diff --git a/webapp/packages/storybook/tsconfig.node.json b/webapp/packages/storybook/tsconfig.node.json
new file mode 100644
index 0000000000..a9ee3c664b
--- /dev/null
+++ b/webapp/packages/storybook/tsconfig.node.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": [
+      "ES2023"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ],
+  "references": [
+    {
+      "path": "../../common-react/@dbeaver/ui-kit"
+    }
+  ]
+}
diff --git a/webapp/packages/storybook/vite.config.ts b/webapp/packages/storybook/vite.config.ts
new file mode 100644
index 0000000000..c6b631f448
--- /dev/null
+++ b/webapp/packages/storybook/vite.config.ts
@@ -0,0 +1,26 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { tscPlugin } from '@wroud/vite-plugin-tsc';
+import { assetResolverPlugin } from '@wroud/vite-plugin-asset-resolver';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tscPlugin({
+      tscArgs: ['-b'],
+      prebuild: true,
+      enableOverlay: true,
+    }),
+    assetResolverPlugin(),
+    tailwindcss(),
+  ],
+});
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index c7b2629287..cbcf8ab750 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2311,6 +2311,7 @@ __metadata:
     eslint-config-prettier: "npm:^10"
     eslint-plugin-react: "npm:^7"
     eslint-plugin-react-hooks: "npm:^5"
+    eslint-plugin-storybook: "npm:^9"
     typescript-eslint: "npm:^8"
   languageName: unknown
   linkType: soft
@@ -4386,6 +4387,30 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@cloudbeaver/storybook@workspace:packages/storybook":
+  version: 0.0.0-use.local
+  resolution: "@cloudbeaver/storybook@workspace:packages/storybook"
+  dependencies:
+    "@cloudbeaver/tsconfig": "workspace:*"
+    "@dbeaver/ui-kit": "workspace:^"
+    "@storybook/addon-docs": "npm:^9"
+    "@storybook/react-vite": "npm:^9"
+    "@tailwindcss/vite": "npm:4.0.7"
+    "@types/react": "npm:^19"
+    "@types/react-dom": "npm:^19"
+    "@vitejs/plugin-react": "npm:^5"
+    "@wroud/vite-plugin-asset-resolver": "npm:^0"
+    "@wroud/vite-plugin-tsc": "npm:^0"
+    globals: "npm:^16"
+    react: "npm:^19"
+    react-dom: "npm:^19"
+    storybook: "npm:^9"
+    tailwindcss: "npm:4.0.7"
+    typescript: "npm:^5"
+    vite: "npm:^7"
+  languageName: unknown
+  linkType: soft
+
 "@cloudbeaver/tests-runner@workspace:*, @cloudbeaver/tests-runner@workspace:packages/tests-runner":
   version: 0.0.0-use.local
   resolution: "@cloudbeaver/tests-runner@workspace:packages/tests-runner"
@@ -4781,6 +4806,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/aix-ppc64@npm:0.25.10"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/aix-ppc64@npm:0.25.9"
@@ -4788,6 +4820,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/android-arm64@npm:0.25.10"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/android-arm64@npm:0.25.9"
@@ -4795,6 +4834,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/android-arm@npm:0.25.10"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/android-arm@npm:0.25.9"
@@ -4802,6 +4848,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/android-x64@npm:0.25.10"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/android-x64@npm:0.25.9"
@@ -4809,6 +4862,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/darwin-arm64@npm:0.25.10"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/darwin-arm64@npm:0.25.9"
@@ -4816,6 +4876,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/darwin-x64@npm:0.25.10"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/darwin-x64@npm:0.25.9"
@@ -4823,6 +4890,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.10"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/freebsd-arm64@npm:0.25.9"
@@ -4830,6 +4904,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/freebsd-x64@npm:0.25.10"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/freebsd-x64@npm:0.25.9"
@@ -4837,6 +4918,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-arm64@npm:0.25.10"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-arm64@npm:0.25.9"
@@ -4844,6 +4932,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-arm@npm:0.25.10"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-arm@npm:0.25.9"
@@ -4851,6 +4946,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-ia32@npm:0.25.10"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-ia32@npm:0.25.9"
@@ -4858,6 +4960,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-loong64@npm:0.25.10"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-loong64@npm:0.25.9"
@@ -4865,6 +4974,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-mips64el@npm:0.25.10"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-mips64el@npm:0.25.9"
@@ -4872,6 +4988,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-ppc64@npm:0.25.10"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-ppc64@npm:0.25.9"
@@ -4879,6 +5002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-riscv64@npm:0.25.10"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-riscv64@npm:0.25.9"
@@ -4886,6 +5016,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-s390x@npm:0.25.10"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-s390x@npm:0.25.9"
@@ -4893,6 +5030,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/linux-x64@npm:0.25.10"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/linux-x64@npm:0.25.9"
@@ -4900,6 +5044,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.10"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/netbsd-arm64@npm:0.25.9"
@@ -4907,6 +5058,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/netbsd-x64@npm:0.25.10"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/netbsd-x64@npm:0.25.9"
@@ -4914,6 +5072,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.10"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/openbsd-arm64@npm:0.25.9"
@@ -4921,6 +5086,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/openbsd-x64@npm:0.25.10"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/openbsd-x64@npm:0.25.9"
@@ -4928,6 +5100,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openharmony-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/openharmony-arm64@npm:0.25.10"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openharmony-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/openharmony-arm64@npm:0.25.9"
@@ -4935,6 +5114,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/sunos-x64@npm:0.25.10"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/sunos-x64@npm:0.25.9"
@@ -4942,6 +5128,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/win32-arm64@npm:0.25.10"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/win32-arm64@npm:0.25.9"
@@ -4949,6 +5142,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/win32-ia32@npm:0.25.10"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/win32-ia32@npm:0.25.9"
@@ -4956,6 +5156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.25.10":
+  version: 0.25.10
+  resolution: "@esbuild/win32-x64@npm:0.25.10"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.25.9":
   version: 0.25.9
   resolution: "@esbuild/win32-x64@npm:0.25.9"
@@ -5992,6 +6199,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.6.1":
+  version: 0.6.1
+  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.6.1"
+  dependencies:
+    glob: "npm:^10.0.0"
+    magic-string: "npm:^0.30.0"
+    react-docgen-typescript: "npm:^2.2.2"
+  peerDependencies:
+    typescript: ">= 4.3.x"
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/0bcc2adbb49158018102bd9d84cd8572c770daee3d46733157933ef0330953bd5b9e102c26f2338ee7dfb8f21a7bb937134d23f8a7935d5dc88525a253557467
+  languageName: node
+  linkType: hard
+
 "@jridgewell/gen-mapping@npm:^0.3.12, @jridgewell/gen-mapping@npm:^0.3.5":
   version: 0.3.13
   resolution: "@jridgewell/gen-mapping@npm:0.3.13"
@@ -6430,7 +6654,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdx-js/react@npm:^3.1.0":
+"@mdx-js/react@npm:^3.0.0, @mdx-js/react@npm:^3.1.0":
   version: 3.1.1
   resolution: "@mdx-js/react@npm:3.1.1"
   dependencies:
@@ -6816,7 +7040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.2.0":
+"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.2, @rollup/pluginutils@npm:^5.2.0":
   version: 5.3.0
   resolution: "@rollup/pluginutils@npm:5.3.0"
   dependencies:
@@ -7000,6 +7224,115 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-docs@npm:^9":
+  version: 9.1.7
+  resolution: "@storybook/addon-docs@npm:9.1.7"
+  dependencies:
+    "@mdx-js/react": "npm:^3.0.0"
+    "@storybook/csf-plugin": "npm:9.1.7"
+    "@storybook/icons": "npm:^1.4.0"
+    "@storybook/react-dom-shim": "npm:9.1.7"
+    react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^9.1.7
+  checksum: 10c0/81f530b1230c60d344662aedb4839baa099da287c0188e8d5e10ab8cac0b02bb747e7d6475dbb1a85cba0cb5c475b8d48936355dd359020652ccbaba7d664aa0
+  languageName: node
+  linkType: hard
+
+"@storybook/builder-vite@npm:9.1.7":
+  version: 9.1.7
+  resolution: "@storybook/builder-vite@npm:9.1.7"
+  dependencies:
+    "@storybook/csf-plugin": "npm:9.1.7"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^9.1.7
+    vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+  checksum: 10c0/39306d65373a934c4274196d5451467acb4128252c61b7abb801153fdf9b8278ca4ee8c9911def229f9c6045f24d39610fb5f0e553892478e9f541cdb9287859
+  languageName: node
+  linkType: hard
+
+"@storybook/csf-plugin@npm:9.1.7":
+  version: 9.1.7
+  resolution: "@storybook/csf-plugin@npm:9.1.7"
+  dependencies:
+    unplugin: "npm:^1.3.1"
+  peerDependencies:
+    storybook: ^9.1.7
+  checksum: 10c0/059fa960174a3f421eb09b41d0da43c43a46548a2535acc17a0e7989bb78f954180212a43b58392dfec6e92a3482621a13ec1b6ff00d1157a2355d369129842a
+  languageName: node
+  linkType: hard
+
+"@storybook/global@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@storybook/global@npm:5.0.0"
+  checksum: 10c0/8f1b61dcdd3a89584540896e659af2ecc700bc740c16909a7be24ac19127ea213324de144a141f7caf8affaed017d064fea0618d453afbe027cf60f54b4a6d0b
+  languageName: node
+  linkType: hard
+
+"@storybook/icons@npm:^1.4.0":
+  version: 1.6.0
+  resolution: "@storybook/icons@npm:1.6.0"
+  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
+  checksum: 10c0/bbec9201a78a730195f9cf377b15856dc414a54d04e30d16c379d062425cc617bfd0d6586ba1716012cfbdab461f0c9693a6a52920f9bd09c7b4291fb116f59c
+  languageName: node
+  linkType: hard
+
+"@storybook/react-dom-shim@npm:9.1.7":
+  version: 9.1.7
+  resolution: "@storybook/react-dom-shim@npm:9.1.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: ^9.1.7
+  checksum: 10c0/bed0ebf47f2d2027a28d82be1af5c2413297bfae928b0c6d6a0752f3e30819821660c6abdcc75fa97e15593dc1c181dc36b36f488c8710db3adcabaf70695964
+  languageName: node
+  linkType: hard
+
+"@storybook/react-vite@npm:^9":
+  version: 9.1.7
+  resolution: "@storybook/react-vite@npm:9.1.7"
+  dependencies:
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.6.1"
+    "@rollup/pluginutils": "npm:^5.0.2"
+    "@storybook/builder-vite": "npm:9.1.7"
+    "@storybook/react": "npm:9.1.7"
+    find-up: "npm:^7.0.0"
+    magic-string: "npm:^0.30.0"
+    react-docgen: "npm:^8.0.0"
+    resolve: "npm:^1.22.8"
+    tsconfig-paths: "npm:^4.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: ^9.1.7
+    vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+  checksum: 10c0/be74d1cacafc83f0c9dc22019aeb1e62a3c6faa2bcf98c1cd109ba3219fb61387d1be9875ffa5a59e824e7b7182c3491de47b2dcb4136368ee6c2189cff74e20
+  languageName: node
+  linkType: hard
+
+"@storybook/react@npm:9.1.7":
+  version: 9.1.7
+  resolution: "@storybook/react@npm:9.1.7"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/react-dom-shim": "npm:9.1.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: ^9.1.7
+    typescript: ">= 4.9.x"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/6ba0d3877075c380d8ab47423cc8e93ff297018fadbbe2ecd224e3d60e6a0fdba561ea84c1ffb39228cb2efd1d8d432710c6ec0337b30f74a62dc2384df96c91
+  languageName: node
+  linkType: hard
+
 "@stylistic/eslint-plugin@npm:^5":
   version: 5.3.1
   resolution: "@stylistic/eslint-plugin@npm:5.3.1"
@@ -7447,7 +7780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^6":
+"@testing-library/jest-dom@npm:^6, @testing-library/jest-dom@npm:^6.6.3":
   version: 6.8.0
   resolution: "@testing-library/jest-dom@npm:6.8.0"
   dependencies:
@@ -7481,7 +7814,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^14":
+"@testing-library/user-event@npm:^14, @testing-library/user-event@npm:^14.6.1":
   version: 14.6.1
   resolution: "@testing-library/user-event@npm:14.6.1"
   peerDependencies:
@@ -7576,7 +7909,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__traverse@npm:*":
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.20.7":
   version: 7.28.0
   resolution: "@types/babel__traverse@npm:7.28.0"
   dependencies:
@@ -7889,6 +8222,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/doctrine@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@types/doctrine@npm:0.0.9"
+  checksum: 10c0/cdaca493f13c321cf0cacd1973efc0ae74569633145d9e6fc1128f32217a6968c33bea1f858275239fe90c98f3be57ec8f452b416a9ff48b8e8c1098b20fa51c
+  languageName: node
+  linkType: hard
+
 "@types/estree-jsx@npm:^1.0.0":
   version: 1.0.5
   resolution: "@types/estree-jsx@npm:1.0.5"
@@ -8093,6 +8433,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/resolve@npm:^1.20.2":
+  version: 1.20.6
+  resolution: "@types/resolve@npm:1.20.6"
+  checksum: 10c0/a9b0549d816ff2c353077365d865a33655a141d066d0f5a3ba6fd4b28bc2f4188a510079f7c1f715b3e7af505a27374adce2a5140a3ece2a059aab3d6e1a4244
+  languageName: node
+  linkType: hard
+
 "@types/semver@npm:^7":
   version: 7.7.1
   resolution: "@types/semver@npm:7.7.1"
@@ -8215,6 +8562,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/project-service@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/project-service@npm:8.44.0"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.44.0"
+    "@typescript-eslint/types": "npm:^8.44.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/b06e94ae2a2c167271b61200136283432b6a80ab8bcc175bdcb8f685f4daeb4e28b1d83a064f0a660f184811d67e16d4291ab5fac563e48f20213409be8e95e3
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/scope-manager@npm:8.43.0":
   version: 8.43.0
   resolution: "@typescript-eslint/scope-manager@npm:8.43.0"
@@ -8225,6 +8585,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/scope-manager@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.44.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.44.0"
+    "@typescript-eslint/visitor-keys": "npm:8.44.0"
+  checksum: 10c0/c221e0b9fe9021b1b41432d96818131c107cfc33fb1f8da6093e236c992ed6160dae6355dd5571fb71b9194a24b24734c032ded4c00500599adda2cc07ef8803
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/tsconfig-utils@npm:8.43.0, @typescript-eslint/tsconfig-utils@npm:^8.43.0":
   version: 8.43.0
   resolution: "@typescript-eslint/tsconfig-utils@npm:8.43.0"
@@ -8234,6 +8604,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/tsconfig-utils@npm:8.44.0, @typescript-eslint/tsconfig-utils@npm:^8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.44.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/453157f0da2d280b4536db6c80dfee4e5c98a1174109cc8d42b20eeb3fda2d54cb6f03f57a142280710091ed0a8e28f231658c253284b1c62960c2974047f3de
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/type-utils@npm:8.43.0":
   version: 8.43.0
   resolution: "@typescript-eslint/type-utils@npm:8.43.0"
@@ -8257,6 +8636,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:8.44.0, @typescript-eslint/types@npm:^8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/types@npm:8.44.0"
+  checksum: 10c0/d3a4c173294533215b4676a89e454e728cda352d6c923489af4306bf5166e51625bff6980708cb1c191bdb89c864d82bccdf96a9ed5a76f6554d6af8c90e2e1d
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:8.43.0":
   version: 8.43.0
   resolution: "@typescript-eslint/typescript-estree@npm:8.43.0"
@@ -8277,6 +8663,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/typescript-estree@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.44.0"
+  dependencies:
+    "@typescript-eslint/project-service": "npm:8.44.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.44.0"
+    "@typescript-eslint/types": "npm:8.44.0"
+    "@typescript-eslint/visitor-keys": "npm:8.44.0"
+    debug: "npm:^4.3.4"
+    fast-glob: "npm:^3.3.2"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^2.1.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/303dd3048ee0b980b63022626bdff212c0719ce5c5945fb233464f201aadeb3fd703118c8e255a26e1ae81f772bf76b60163119b09d2168f198d5ce1724c2a70
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/utils@npm:8.43.0":
   version: 8.43.0
   resolution: "@typescript-eslint/utils@npm:8.43.0"
@@ -8292,6 +8698,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/utils@npm:^8.8.1":
+  version: 8.44.0
+  resolution: "@typescript-eslint/utils@npm:8.44.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.7.0"
+    "@typescript-eslint/scope-manager": "npm:8.44.0"
+    "@typescript-eslint/types": "npm:8.44.0"
+    "@typescript-eslint/typescript-estree": "npm:8.44.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/85e5106a049c07e8130aaa104fa61057c4ce090600e1bf72dda48ebd5d4f5f515e95a6c35b85a581a295b34f1d1c2395b4bf72bef74870bed3d6894c727f1345
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:8.43.0":
   version: 8.43.0
   resolution: "@typescript-eslint/visitor-keys@npm:8.43.0"
@@ -8302,6 +8723,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:8.44.0":
+  version: 8.44.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.44.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.44.0"
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10c0/c1cb5c000ab56ddb96ddb0991a10ef3a48c76b3f3b3ab7a5a94d24e71371bf96aa22cfe4332625e49ad7b961947a21599ff7c6128253cc9495e8cbd2cad25d72
+  languageName: node
+  linkType: hard
+
 "@ungap/structured-clone@npm:^1.0.0":
   version: 1.3.0
   resolution: "@ungap/structured-clone@npm:1.3.0"
@@ -8561,7 +8992,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.15.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.14.0, acorn@npm:^8.15.0":
   version: 8.15.0
   resolution: "acorn@npm:8.15.0"
   bin:
@@ -8818,6 +9249,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ast-types@npm:^0.16.1":
+  version: 0.16.1
+  resolution: "ast-types@npm:0.16.1"
+  dependencies:
+    tslib: "npm:^2.0.1"
+  checksum: 10c0/abcc49e42eb921a7ebc013d5bec1154651fb6dbc3f497541d488859e681256901b2990b954d530ba0da4d0851271d484f7057d5eff5e07cb73e8b10909f711bf
+  languageName: node
+  linkType: hard
+
 "astral-regex@npm:^2.0.0":
   version: 2.0.0
   resolution: "astral-regex@npm:2.0.0"
@@ -9013,6 +9453,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"better-opn@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "better-opn@npm:3.0.2"
+  dependencies:
+    open: "npm:^8.0.4"
+  checksum: 10c0/911ef25d44da75aabfd2444ce7a4294a8000ebcac73068c04a60298b0f7c7506b60421aa4cd02ac82502fb42baaff7e4892234b51e6923eded44c5a11185f2f5
+  languageName: node
+  linkType: hard
+
 "bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
@@ -10375,6 +10824,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"define-lazy-prop@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "define-lazy-prop@npm:2.0.0"
+  checksum: 10c0/db6c63864a9d3b7dc9def55d52764968a5af296de87c1b2cc71d8be8142e445208071953649e0386a8cc37cfcf9a2067a47207f1eb9ff250c2a269658fdae422
+  languageName: node
+  linkType: hard
+
 "define-lazy-prop@npm:^3.0.0":
   version: 3.0.0
   resolution: "define-lazy-prop@npm:3.0.0"
@@ -10537,6 +10993,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"doctrine@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "doctrine@npm:3.0.0"
+  dependencies:
+    esutils: "npm:^2.0.2"
+  checksum: 10c0/c96bdccabe9d62ab6fea9399fdff04a66e6563c1d6fb3a3a063e8d53c3bb136ba63e84250bbf63d00086a769ad53aef92d2bd483f03f837fc97b71cbee6b2520
+  languageName: node
+  linkType: hard
+
 "dom-accessibility-api@npm:^0.5.9":
   version: 0.5.16
   resolution: "dom-accessibility-api@npm:0.5.16"
@@ -10904,6 +11369,106 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-register@npm:^3.5.0":
+  version: 3.6.0
+  resolution: "esbuild-register@npm:3.6.0"
+  dependencies:
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    esbuild: ">=0.12 <1"
+  checksum: 10c0/77193b7ca32ba9f81b35ddf3d3d0138efb0b1429d71b39480cfee932e1189dd2e492bd32bf04a4d0bc3adfbc7ec7381ceb5ffd06efe35f3e70904f1f686566d5
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0":
+  version: 0.25.10
+  resolution: "esbuild@npm:0.25.10"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.10"
+    "@esbuild/android-arm": "npm:0.25.10"
+    "@esbuild/android-arm64": "npm:0.25.10"
+    "@esbuild/android-x64": "npm:0.25.10"
+    "@esbuild/darwin-arm64": "npm:0.25.10"
+    "@esbuild/darwin-x64": "npm:0.25.10"
+    "@esbuild/freebsd-arm64": "npm:0.25.10"
+    "@esbuild/freebsd-x64": "npm:0.25.10"
+    "@esbuild/linux-arm": "npm:0.25.10"
+    "@esbuild/linux-arm64": "npm:0.25.10"
+    "@esbuild/linux-ia32": "npm:0.25.10"
+    "@esbuild/linux-loong64": "npm:0.25.10"
+    "@esbuild/linux-mips64el": "npm:0.25.10"
+    "@esbuild/linux-ppc64": "npm:0.25.10"
+    "@esbuild/linux-riscv64": "npm:0.25.10"
+    "@esbuild/linux-s390x": "npm:0.25.10"
+    "@esbuild/linux-x64": "npm:0.25.10"
+    "@esbuild/netbsd-arm64": "npm:0.25.10"
+    "@esbuild/netbsd-x64": "npm:0.25.10"
+    "@esbuild/openbsd-arm64": "npm:0.25.10"
+    "@esbuild/openbsd-x64": "npm:0.25.10"
+    "@esbuild/openharmony-arm64": "npm:0.25.10"
+    "@esbuild/sunos-x64": "npm:0.25.10"
+    "@esbuild/win32-arm64": "npm:0.25.10"
+    "@esbuild/win32-ia32": "npm:0.25.10"
+    "@esbuild/win32-x64": "npm:0.25.10"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-arm64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/openharmony-arm64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10c0/8ee5fdd43ed0d4092ce7f41577c63147f54049d5617763f0549c638bbe939e8adaa8f1a2728adb63417eb11df51956b7b0d8eb88ee08c27ad1d42960256158fa
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.25.0":
   version: 0.25.9
   resolution: "esbuild@npm:0.25.9"
@@ -11076,6 +11641,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-storybook@npm:^9":
+  version: 9.1.7
+  resolution: "eslint-plugin-storybook@npm:9.1.7"
+  dependencies:
+    "@typescript-eslint/utils": "npm:^8.8.1"
+  peerDependencies:
+    eslint: ">=8"
+    storybook: ^9.1.7
+  checksum: 10c0/f47cd4b4c5ee297c83c3112288461b736b438956fe0ab74dcdf3d0b4ac19495ec25185354110cc041ed01f25a2871df0e5ca0eeb94d5fc330df5720149f4d251
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:^8.4.0":
   version: 8.4.0
   resolution: "eslint-scope@npm:8.4.0"
@@ -11161,7 +11738,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^4.0.0":
+"esprima@npm:^4.0.0, esprima@npm:~4.0.0":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
   bin:
@@ -11518,6 +12095,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-up@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "find-up@npm:7.0.0"
+  dependencies:
+    locate-path: "npm:^7.2.0"
+    path-exists: "npm:^5.0.0"
+    unicorn-magic: "npm:^0.1.0"
+  checksum: 10c0/e6ee3e6154560bc0ab3bc3b7d1348b31513f9bdf49a5dd2e952495427d559fa48cdf33953e85a309a323898b43fa1bfbc8b80c880dfc16068384783034030008
+  languageName: node
+  linkType: hard
+
 "flat-cache@npm:^4.0.0":
   version: 4.0.1
   resolution: "flat-cache@npm:4.0.1"
@@ -11815,7 +12403,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^10.2.2":
+"glob@npm:^10.0.0, glob@npm:^10.2.2":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
   dependencies:
@@ -11868,6 +12456,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globals@npm:^16":
+  version: 16.4.0
+  resolution: "globals@npm:16.4.0"
+  checksum: 10c0/a14b447a78b664b42f6d324e8675fcae6fe5e57924fecc1f6328dce08af9b2ca3a3138501e1b1f244a49814a732dc60cfc1aa24e714e0b64ac8bd18910bfac90
+  languageName: node
+  linkType: hard
+
 "globalthis@npm:^1.0.4":
   version: 1.0.4
   resolution: "globalthis@npm:1.0.4"
@@ -12753,6 +13348,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
+  version: 2.2.1
+  resolution: "is-docker@npm:2.2.1"
+  bin:
+    is-docker: cli.js
+  checksum: 10c0/e828365958d155f90c409cdbe958f64051d99e8aedc2c8c4cd7c89dcf35329daed42f7b99346f7828df013e27deb8f721cf9408ba878c76eb9e8290235fbcdcc
+  languageName: node
+  linkType: hard
+
 "is-docker@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-docker@npm:3.0.0"
@@ -13077,6 +13681,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-wsl@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "is-wsl@npm:2.2.0"
+  dependencies:
+    is-docker: "npm:^2.0.0"
+  checksum: 10c0/a6fa2d370d21be487c0165c7a440d567274fbba1a817f2f0bfa41cc5e3af25041d84267baa22df66696956038a43973e72fca117918c91431920bdef490fa25e
+  languageName: node
+  linkType: hard
+
 "is-wsl@npm:^3.1.0":
   version: 3.1.0
   resolution: "is-wsl@npm:3.1.0"
@@ -13647,6 +14260,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-path@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "locate-path@npm:7.2.0"
+  dependencies:
+    p-locate: "npm:^6.0.0"
+  checksum: 10c0/139e8a7fe11cfbd7f20db03923cacfa5db9e14fa14887ea121345597472b4a63c1a42a8a5187defeeff6acf98fd568da7382aa39682d38f0af27433953a97751
+  languageName: node
+  linkType: hard
+
 "lodash.camelcase@npm:^4.3.0":
   version: 4.3.0
   resolution: "lodash.camelcase@npm:4.3.0"
@@ -13804,7 +14426,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.17":
+"magic-string@npm:^0.30.0, magic-string@npm:^0.30.17":
   version: 0.30.19
   resolution: "magic-string@npm:0.30.19"
   dependencies:
@@ -15175,6 +15797,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"open@npm:^8.0.4":
+  version: 8.4.2
+  resolution: "open@npm:8.4.2"
+  dependencies:
+    define-lazy-prop: "npm:^2.0.0"
+    is-docker: "npm:^2.1.1"
+    is-wsl: "npm:^2.2.0"
+  checksum: 10c0/bb6b3a58401dacdb0aad14360626faf3fb7fba4b77816b373495988b724fb48941cad80c1b65d62bb31a17609b2cd91c41a181602caea597ca80dfbcc27e84c9
+  languageName: node
+  linkType: hard
+
 "optionator@npm:^0.9.3":
   version: 0.9.4
   resolution: "optionator@npm:0.9.4"
@@ -15249,6 +15882,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-limit@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "p-limit@npm:4.0.0"
+  dependencies:
+    yocto-queue: "npm:^1.0.0"
+  checksum: 10c0/a56af34a77f8df2ff61ddfb29431044557fcbcb7642d5a3233143ebba805fc7306ac1d448de724352861cb99de934bc9ab74f0d16fe6a5460bdbdf938de875ad
+  languageName: node
+  linkType: hard
+
 "p-locate@npm:^4.1.0":
   version: 4.1.0
   resolution: "p-locate@npm:4.1.0"
@@ -15267,6 +15909,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-locate@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "p-locate@npm:6.0.0"
+  dependencies:
+    p-limit: "npm:^4.0.0"
+  checksum: 10c0/d72fa2f41adce59c198270aa4d3c832536c87a1806e0f69dffb7c1a7ca998fb053915ca833d90f166a8c082d3859eabfed95f01698a3214c20df6bb8de046312
+  languageName: node
+  linkType: hard
+
 "p-map@npm:^4.0.0":
   version: 4.0.0
   resolution: "p-map@npm:4.0.0"
@@ -15456,6 +16107,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-exists@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-exists@npm:5.0.0"
+  checksum: 10c0/b170f3060b31604cde93eefdb7392b89d832dfbc1bed717c9718cbe0f230c1669b7e75f87e19901da2250b84d092989a0f9e44d2ef41deb09aa3ad28e691a40a
+  languageName: node
+  linkType: hard
+
 "path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"
@@ -15910,6 +16568,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-docgen-typescript@npm:^2.2.2":
+  version: 2.4.0
+  resolution: "react-docgen-typescript@npm:2.4.0"
+  peerDependencies:
+    typescript: ">= 4.3.x"
+  checksum: 10c0/18e3e1c80d28abcdd72e62261d2f70b0904d9b088f9c2ebe485ffee5e46f5735208bc174a20ed2772112b3ca6432b5f3d5f0ac345872fe76e541f84543e49e50
+  languageName: node
+  linkType: hard
+
+"react-docgen@npm:^8.0.0":
+  version: 8.0.1
+  resolution: "react-docgen@npm:8.0.1"
+  dependencies:
+    "@babel/core": "npm:^7.28.0"
+    "@babel/traverse": "npm:^7.28.0"
+    "@babel/types": "npm:^7.28.2"
+    "@types/babel__core": "npm:^7.20.5"
+    "@types/babel__traverse": "npm:^7.20.7"
+    "@types/doctrine": "npm:^0.0.9"
+    "@types/resolve": "npm:^1.20.2"
+    doctrine: "npm:^3.0.0"
+    resolve: "npm:^1.22.1"
+    strip-indent: "npm:^4.0.0"
+  checksum: 10c0/bf7c4e12b4945433cf2a948021b661279bac75da50eb51dc5fd0acfa9b9e97c608614b474effc574b72df6acb956341b9d68e73945ece20bd6a384634f5924e7
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^19":
   version: 19.1.1
   resolution: "react-dom@npm:19.1.1"
@@ -16104,6 +16789,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recast@npm:^0.23.5":
+  version: 0.23.11
+  resolution: "recast@npm:0.23.11"
+  dependencies:
+    ast-types: "npm:^0.16.1"
+    esprima: "npm:~4.0.0"
+    source-map: "npm:~0.6.1"
+    tiny-invariant: "npm:^1.3.3"
+    tslib: "npm:^2.0.1"
+  checksum: 10c0/45b520a8f0868a5a24ecde495be9de3c48e69a54295d82a7331106554b75cfba75d16c909959d056e9ceed47a1be5e061e2db8b9ecbcd6ba44c2f3ef9a47bd18
+  languageName: node
+  linkType: hard
+
 "recma-build-jsx@npm:^1.0.0":
   version: 1.0.0
   resolution: "recma-build-jsx@npm:1.0.0"
@@ -16426,7 +17124,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.22.1, resolve@npm:^1.22.10":
+"resolve@npm:^1.22.1, resolve@npm:^1.22.10, resolve@npm:^1.22.8":
   version: 1.22.10
   resolution: "resolve@npm:1.22.10"
   dependencies:
@@ -16452,7 +17150,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.10#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
   version: 1.22.10
   resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
@@ -17027,7 +17725,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7, semver@npm:^7.3.5, semver@npm:^7.6.0":
+"semver@npm:^7, semver@npm:^7.3.5, semver@npm:^7.6.0, semver@npm:^7.6.2":
   version: 7.7.2
   resolution: "semver@npm:7.7.2"
   bin:
@@ -17330,7 +18028,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0, source-map@npm:~0.6.0":
+"source-map@npm:^0.6.0, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
   checksum: 10c0/ab55398007c5e5532957cb0beee2368529618ac0ab372d789806f5718123cc4367d57de3904b4e6a4170eb5a0b0f41373066d02ca0735a0c4d75c7d328d3e011
@@ -17437,6 +18135,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook@npm:^9":
+  version: 9.1.7
+  resolution: "storybook@npm:9.1.7"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@testing-library/jest-dom": "npm:^6.6.3"
+    "@testing-library/user-event": "npm:^14.6.1"
+    "@vitest/expect": "npm:3.2.4"
+    "@vitest/mocker": "npm:3.2.4"
+    "@vitest/spy": "npm:3.2.4"
+    better-opn: "npm:^3.0.2"
+    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0"
+    esbuild-register: "npm:^3.5.0"
+    recast: "npm:^0.23.5"
+    semver: "npm:^7.6.2"
+    ws: "npm:^8.18.0"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  bin:
+    storybook: ./bin/index.cjs
+  checksum: 10c0/daf3fb47ada1368604db7a1bc53775a5ceb485cd103351670e74d3378cb7bc1e396f72530a4821f3919207fb55ce7904ce894f55566844f9a14279553a8bd534
+  languageName: node
+  linkType: hard
+
 "strict-event-emitter@npm:^0.5.1":
   version: 0.5.1
   resolution: "strict-event-emitter@npm:0.5.1"
@@ -17645,6 +18370,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-indent@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "strip-indent@npm:4.1.0"
+  checksum: 10c0/ea8193b60a85769ca42d3589c865d4bc743017c1e6ce846332f0f49f103d127dfc25af81849bd00aa98420474fa171ecc2dbe8c1ccd7b9260c43477a5e79431a
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
@@ -17868,6 +18600,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-invariant@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "tiny-invariant@npm:1.3.3"
+  checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a
+  languageName: node
+  linkType: hard
+
 "tinybench@npm:^2.9.0":
   version: 2.9.0
   resolution: "tinybench@npm:2.9.0"
@@ -18023,6 +18762,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-dedent@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "ts-dedent@npm:2.2.0"
+  checksum: 10c0/175adea838468cc2ff7d5e97f970dcb798bbcb623f29c6088cb21aa2880d207c5784be81ab1741f56b9ac37840cbaba0c0d79f7f8b67ffe61c02634cafa5c303
+  languageName: node
+  linkType: hard
+
 "ts-log@npm:^2.2.3":
   version: 2.2.7
   resolution: "ts-log@npm:2.2.7"
@@ -18062,7 +18808,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.3, tslib@npm:^2.8.1":
+"tslib@npm:^2, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.5.0, tslib@npm:^2.6.3, tslib@npm:^2.8.1":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@@ -18334,6 +19080,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "unicorn-magic@npm:0.1.0"
+  checksum: 10c0/e4ed0de05b0a05e735c7d8a2930881e5efcfc3ec897204d5d33e7e6247f4c31eac92e383a15d9a6bccb7319b4271ee4bea946e211bf14951fec6ff2cbbb66a92
+  languageName: node
+  linkType: hard
+
 "unicorn-magic@npm:^0.3.0":
   version: 0.3.0
   resolution: "unicorn-magic@npm:0.3.0"
@@ -18456,6 +19209,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unplugin@npm:^1.3.1":
+  version: 1.16.1
+  resolution: "unplugin@npm:1.16.1"
+  dependencies:
+    acorn: "npm:^8.14.0"
+    webpack-virtual-modules: "npm:^0.6.2"
+  checksum: 10c0/dd5f8c5727d0135847da73cf03fb199107f1acf458167034886fda3405737dab871ad3926431b4f70e1e82cdac482ac1383cea4019d782a68515c8e3e611b6cc
+  languageName: node
+  linkType: hard
+
 "upath@npm:^1.2.0":
   version: 1.2.0
   resolution: "upath@npm:1.2.0"
@@ -18896,6 +19659,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-virtual-modules@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "webpack-virtual-modules@npm:0.6.2"
+  checksum: 10c0/5ffbddf0e84bf1562ff86cf6fcf039c74edf09d78358a6904a09bbd4484e8bb6812dc385fe14330b715031892dcd8423f7a88278b57c9f5002c84c2860179add
+  languageName: node
+  linkType: hard
+
 "wellknown@npm:^0":
   version: 0.5.0
   resolution: "wellknown@npm:0.5.0"
@@ -19309,7 +20079,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8, ws@npm:^8.17.1, ws@npm:^8.18.3":
+"ws@npm:^8, ws@npm:^8.17.1, ws@npm:^8.18.0, ws@npm:^8.18.3":
   version: 8.18.3
   resolution: "ws@npm:8.18.3"
   peerDependencies:
@@ -19456,6 +20226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yocto-queue@npm:^1.0.0":
+  version: 1.2.1
+  resolution: "yocto-queue@npm:1.2.1"
+  checksum: 10c0/5762caa3d0b421f4bdb7a1926b2ae2189fc6e4a14469258f183600028eb16db3e9e0306f46e8ebf5a52ff4b81a881f22637afefbef5399d6ad440824e9b27f9f
+  languageName: node
+  linkType: hard
+
 "yoctocolors-cjs@npm:^2.1.2":
   version: 2.1.3
   resolution: "yoctocolors-cjs@npm:2.1.3"