diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore
new file mode 100644
index 0000000000..df5ef5bc6d
--- /dev/null
+++ b/packages/ui/.gitignore
@@ -0,0 +1,15 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+
+# Storybook build output
+storybook-static/
+
+# IDE
+.vscode/
+.idea/
+
+# Temporary files
+*.tmp
+*.temp
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
new file mode 100644
index 0000000000..5f87bbb2d9
--- /dev/null
+++ b/packages/ui/.storybook/main.ts
@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['../stories/components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: '@storybook/react-vite',
+  viteFinal: async (config) => {
+    const { mergeConfig } = await import('vite')
+    // 动态导入 @tailwindcss/vite 以避免 ESM/CJS 兼容性问题
+    const tailwindPlugin = (await import('@tailwindcss/vite')).default
+    return mergeConfig(config, {
+      plugins: [tailwindPlugin()]
+    })
+  }
+}
+
+export default config
diff --git a/packages/ui/.storybook/preview.tsx b/packages/ui/.storybook/preview.tsx
new file mode 100644
index 0000000000..3830b9b44c
--- /dev/null
+++ b/packages/ui/.storybook/preview.tsx
@@ -0,0 +1,16 @@
+import '../stories/tailwind.css'
+
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 0698bad4a6..e2df651ed4 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -22,54 +22,34 @@ npm install @heroui/react framer-motion react react-dom tailwindcss
 
 ## 配置
 
-### 1. Tailwind CSS 配置
+### 1. Tailwind CSS v4 配置
 
-在你的项目根目录创建 `tailwind.config.js` 文件：
+本组件库使用 Tailwind CSS v4，配置方式已改变。在你的主 CSS 文件（如 `src/styles/tailwind.css`）中：
 
-```javascript
-const { heroui } = require('@heroui/react')
+```css
+@import 'tailwindcss';
 
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    // 你的应用内容
-    './src/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
+/* 必须扫描组件库文件以提取类名 */
+@source '../node_modules/@cherrystudio/ui/dist/**/*.{js,mjs}';
 
-    // 包含 @cherrystudio/ui 组件
-    './node_modules/@cherrystudio/ui/dist/**/*.{js,ts,jsx,tsx}',
+/* 你的应用源文件 */
+@source './src/**/*.{js,ts,jsx,tsx}';
 
-    // 包含 HeroUI 主题
-    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
-  ],
-  theme: {
-    extend: {
-      // 你的自定义主题扩展
-    }
-  },
-  darkMode: 'class',
-  plugins: [
-    heroui({
-      // HeroUI 主题配置
-      // 参考: https://heroui.com/docs/customization/theme
-    })
-  ]
+/*
+ * 如果你的应用直接使用 HeroUI 组件，需要添加：
+ * @source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+ * @plugin '@heroui/react/plugin';
+ */
+
+/* 自定义主题配置（可选） */
+@theme {
+  /* 你的主题扩展 */
 }
 ```
 
-### 2. CSS 导入
+注意：Tailwind CSS v4 不再使用 `tailwind.config.js` 文件，所有配置都在 CSS 中完成。
 
-在你的主 CSS 文件中导入 Tailwind：
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-### 3. Provider 配置
+### 2. Provider 配置
 
 在你的 App 根组件中添加 HeroUI Provider：
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index b35677bf05..631167e1bf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,7 +13,9 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "eslint src --ext .ts,.tsx --fix",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "ui",
@@ -46,11 +48,18 @@
   },
   "devDependencies": {
     "@heroui/react": "^2.8.4",
+    "@storybook/addon-docs": "^9.1.6",
+    "@storybook/react-vite": "^9.1.6",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
+    "@types/styled-components": "^5.1.34",
+    "antd": "^5.22.5",
+    "eslint-plugin-storybook": "9.1.6",
     "framer-motion": "^12.23.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "storybook": "^9.1.6",
+    "styled-components": "^6.1.15",
     "tsdown": "^0.12.9",
     "typescript": "^5.6.2",
     "vitest": "^3.2.4"
diff --git a/packages/ui/stories/README.md b/packages/ui/stories/README.md
new file mode 100644
index 0000000000..286c2307b4
--- /dev/null
+++ b/packages/ui/stories/README.md
@@ -0,0 +1,41 @@
+# Stories 文档
+
+这里存放所有组件的 Storybook stories 文件，与源码分离以保持项目结构清晰。
+
+## 目录结构
+
+```
+stories/
+├── components/
+│   ├── base/           # 基础组件 stories
+│   ├── display/        # 展示组件 stories
+│   ├── interactive/    # 交互组件 stories
+│   ├── icons/          # 图标组件 stories
+│   ├── layout/         # 布局组件 stories
+│   └── composite/      # 复合组件 stories
+└── README.md          # 本说明文件
+```
+
+## 命名约定
+
+- 文件名格式：`ComponentName.stories.tsx`
+- Story 标题格式：`分类/组件名`，如 `Base/CustomTag`
+- 导入路径：使用相对路径导入源码组件，如 `../../../src/components/base/ComponentName`
+
+## 编写指南
+
+每个 stories 文件应该包含：
+
+1. **Default** - 基本用法示例
+2. **Variants** - 不同变体/状态
+3. **Interactive** - 交互行为演示（如果适用）
+4. **Use Cases** - 实际使用场景
+
+## 启动 Storybook
+
+```bash
+cd packages/ui
+yarn storybook
+```
+
+访问 http://localhost:6006 查看组件文档。
diff --git a/packages/ui/stories/components/base/CustomTag.stories.tsx b/packages/ui/stories/components/base/CustomTag.stories.tsx
new file mode 100644
index 0000000000..5b3ac9121f
--- /dev/null
+++ b/packages/ui/stories/components/base/CustomTag.stories.tsx
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { AlertTriangleIcon, StarIcon } from 'lucide-react'
+import { action } from 'storybook/actions'
+
+import CustomTag from '../../../src/components/base/CustomTag'
+
+const meta: Meta<typeof CustomTag> = {
+  title: 'Base/CustomTag',
+  component: CustomTag,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: { control: 'color' },
+    size: { control: { type: 'range', min: 8, max: 24, step: 1 } },
+    disabled: { control: 'boolean' },
+    inactive: { control: 'boolean' },
+    closable: { control: 'boolean' },
+    onClose: { action: 'closed' },
+    onClick: { action: 'clicked' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// 基础示例
+export const Default: Story = {
+  args: {
+    children: '默认标签',
+    color: '#1890ff'
+  }
+}
+
+// 带图标
+export const WithIcon: Story = {
+  args: {
+    children: '带图标',
+    color: '#52c41a',
+    icon: <StarIcon size={12} />
+  }
+}
+
+// 可关闭
+export const Closable: Story = {
+  args: {
+    children: '可关闭标签',
+    color: '#fa8c16',
+    closable: true,
+    onClose: action('tag-closed')
+  }
+}
+
+// 不同尺寸
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <CustomTag color="#1890ff" size={10}>
+        小号
+      </CustomTag>
+      <CustomTag color="#1890ff" size={14}>
+        中号
+      </CustomTag>
+      <CustomTag color="#1890ff" size={18}>
+        大号
+      </CustomTag>
+    </div>
+  )
+}
+
+// 不同状态
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex gap-2">
+        <CustomTag color="#52c41a">正常</CustomTag>
+        <CustomTag color="#52c41a" disabled>
+          禁用
+        </CustomTag>
+        <CustomTag color="#52c41a" inactive>
+          未激活
+        </CustomTag>
+      </div>
+      <div className="flex gap-2">
+        <CustomTag color="#1890ff" onClick={action('clicked')}>
+          可点击
+        </CustomTag>
+        <CustomTag color="#fa541c" tooltip="这是一个提示">
+          带提示
+        </CustomTag>
+      </div>
+    </div>
+  )
+}
+
+// 实际使用场景
+export const UseCases: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h4 className="mb-2">技能标签:</h4>
+        <div className="flex flex-wrap gap-2">
+          <CustomTag color="#1890ff">React</CustomTag>
+          <CustomTag color="#52c41a">TypeScript</CustomTag>
+          <CustomTag color="#fa8c16">Tailwind</CustomTag>
+        </div>
+      </div>
+
+      <div>
+        <h4 className="mb-2">状态标签:</h4>
+        <div className="flex gap-2">
+          <CustomTag color="#52c41a" icon={<AlertTriangleIcon size={12} />}>
+            进行中
+          </CustomTag>
+          <CustomTag color="#fa541c" closable onClose={action('task-removed')}>
+            待处理
+          </CustomTag>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/stories/components/base/ErrorTag.stories.tsx b/packages/ui/stories/components/base/ErrorTag.stories.tsx
new file mode 100644
index 0000000000..15d75b78f6
--- /dev/null
+++ b/packages/ui/stories/components/base/ErrorTag.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ErrorTag } from '../../../src/components/base/ErrorTag'
+
+const meta: Meta<typeof ErrorTag> = {
+  title: 'Base/ErrorTag',
+  component: ErrorTag,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    iconSize: { control: { type: 'range', min: 10, max: 20, step: 1 } },
+    message: { control: 'text' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    message: '错误信息'
+  }
+}
+
+export const ServerError: Story = {
+  args: {
+    message: '服务器连接失败'
+  }
+}
+
+export const ValidationError: Story = {
+  args: {
+    message: '数据验证失败',
+    iconSize: 16
+  }
+}
+
+export const Examples: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <ErrorTag message="操作失败" />
+      <ErrorTag message="权限不足" />
+      <ErrorTag message="文件上传失败" iconSize={18} />
+    </div>
+  )
+}
diff --git a/packages/ui/stories/components/base/SuccessTag.stories.tsx b/packages/ui/stories/components/base/SuccessTag.stories.tsx
new file mode 100644
index 0000000000..99b2a6a492
--- /dev/null
+++ b/packages/ui/stories/components/base/SuccessTag.stories.tsx
@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { SuccessTag } from '../../../src/components/base/SuccessTag'
+
+const meta: Meta<typeof SuccessTag> = {
+  title: 'Base/SuccessTag',
+  component: SuccessTag,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    iconSize: { control: { type: 'range', min: 10, max: 24, step: 1 } },
+    message: { control: 'text' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default
+export const Default: Story = {
+  args: {
+    message: 'Success'
+  }
+}
+
+// Different Messages
+export const DifferentMessages: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <SuccessTag message="Operation completed" />
+      <SuccessTag message="File saved successfully" />
+      <SuccessTag message="Data uploaded" />
+      <SuccessTag message="Connection established" />
+      <SuccessTag message="Task finished" />
+    </div>
+  )
+}
+
+// Different Icon Sizes
+export const IconSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <SuccessTag iconSize={10} message="Small icon" />
+      <SuccessTag iconSize={14} message="Default icon" />
+      <SuccessTag iconSize={18} message="Large icon" />
+      <SuccessTag iconSize={24} message="Extra large icon" />
+    </div>
+  )
+}
+
+// In Context
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="rounded-lg border border-gray-200 p-4">
+        <h3 className="mb-2 font-semibold">Form Submission</h3>
+        <p className="mb-3 text-sm text-gray-600">Your form has been processed.</p>
+        <SuccessTag message="Form submitted successfully" />
+      </div>
+
+      <div className="rounded-lg border border-gray-200 p-4">
+        <h3 className="mb-2 font-semibold">File Upload</h3>
+        <div className="mb-2 space-y-2">
+          <div className="text-sm">document.pdf</div>
+          <div className="text-sm">image.png</div>
+          <div className="text-sm">data.csv</div>
+        </div>
+        <SuccessTag message="3 files uploaded" />
+      </div>
+
+      <div className="rounded-lg border border-gray-200 p-4">
+        <h3 className="mb-2 font-semibold">System Status</h3>
+        <div className="space-y-2">
+          <SuccessTag message="All systems operational" />
+          <SuccessTag message="Database connected" />
+          <SuccessTag message="API responding" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Use Cases
+export const UseCases: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4">
+      <div className="space-y-2">
+        <h4 className="font-medium">Actions</h4>
+        <div className="space-y-2">
+          <SuccessTag message="Saved" />
+          <SuccessTag message="Published" />
+          <SuccessTag message="Deployed" />
+          <SuccessTag message="Synced" />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <h4 className="font-medium">States</h4>
+        <div className="space-y-2">
+          <SuccessTag message="Active" />
+          <SuccessTag message="Online" />
+          <SuccessTag message="Ready" />
+          <SuccessTag message="Verified" />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/stories/components/base/WarnTag.stories.tsx b/packages/ui/stories/components/base/WarnTag.stories.tsx
new file mode 100644
index 0000000000..c3925128b5
--- /dev/null
+++ b/packages/ui/stories/components/base/WarnTag.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { WarnTag } from '../../../src/components/base/WarnTag'
+
+const meta: Meta<typeof WarnTag> = {
+  title: 'Base/WarnTag',
+  component: WarnTag,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    iconSize: { control: { type: 'range', min: 10, max: 20, step: 1 } },
+    message: { control: 'text' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    message: '警告信息'
+  }
+}
+
+export const LongMessage: Story = {
+  args: {
+    message: '这是一个比较长的警告信息'
+  }
+}
+
+export const CustomIconSize: Story = {
+  args: {
+    message: '自定义图标大小',
+    iconSize: 18
+  }
+}
+
+export const Examples: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <WarnTag message="表单验证失败" />
+      <WarnTag message="网络连接不稳定" />
+      <WarnTag message="存储空间不足" iconSize={16} />
+    </div>
+  )
+}
diff --git a/packages/ui/stories/components/layout/HorizontalScrollContainer.stories.tsx b/packages/ui/stories/components/layout/HorizontalScrollContainer.stories.tsx
new file mode 100644
index 0000000000..8d67057943
--- /dev/null
+++ b/packages/ui/stories/components/layout/HorizontalScrollContainer.stories.tsx
@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import HorizontalScrollContainer from '../../../src/components/layout/HorizontalScrollContainer'
+
+const meta: Meta<typeof HorizontalScrollContainer> = {
+  title: 'Layout/HorizontalScrollContainer',
+  component: HorizontalScrollContainer,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    scrollDistance: { control: { type: 'range', min: 50, max: 500, step: 50 } },
+    gap: { control: 'text' },
+    expandable: { control: 'boolean' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default example
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="flex gap-2">
+        {Array.from({ length: 20 }, (_, i) => (
+          <div key={i} className="rounded bg-gray-100 px-4 py-2 whitespace-nowrap">
+            Item {i + 1}
+          </div>
+        ))}
+      </div>
+    ),
+    scrollDistance: 200
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// With Tags
+export const WithTags: Story = {
+  args: {
+    children: (
+      <>
+        {[
+          'React',
+          'TypeScript',
+          'JavaScript',
+          'HTML',
+          'CSS',
+          'Node.js',
+          'Express',
+          'MongoDB',
+          'PostgreSQL',
+          'Docker',
+          'Kubernetes',
+          'AWS',
+          'Azure',
+          'GraphQL',
+          'REST API'
+        ].map((tag) => (
+          <span key={tag} className="rounded-full bg-blue-500 px-3 py-1 text-xs whitespace-nowrap text-white">
+            {tag}
+          </span>
+        ))}
+      </>
+    ),
+    gap: '8px'
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// Expandable
+export const Expandable: Story = {
+  args: {
+    expandable: true,
+    children: (
+      <>
+        {['Frontend', 'Backend', 'DevOps', 'Mobile', 'Desktop', 'Web', 'Cloud', 'Database', 'Security', 'Testing'].map(
+          (category) => (
+            <div key={category} className="rounded bg-green-500 px-3.5 py-1.5 text-sm whitespace-nowrap text-white">
+              {category}
+            </div>
+          )
+        )}
+      </>
+    ),
+    gap: '10px'
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// With Cards
+export const WithCards: Story = {
+  args: {
+    scrollDistance: 300,
+    gap: '16px',
+    children: (
+      <>
+        {Array.from({ length: 10 }, (_, i) => (
+          <div key={i} className="min-w-[200px] rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+            <h4 className="mb-2 font-semibold">Card {i + 1}</h4>
+            <p className="text-sm text-gray-600">This is a sample card content for demonstration purposes.</p>
+          </div>
+        ))}
+      </>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// Interactive Example
+export const Interactive: Story = {
+  render: function InteractiveExample() {
+    const [items, setItems] = useState([
+      'Apple',
+      'Banana',
+      'Cherry',
+      'Date',
+      'Elderberry',
+      'Fig',
+      'Grape',
+      'Honeydew',
+      'Kiwi',
+      'Lemon',
+      'Mango',
+      'Orange'
+    ])
+
+    return (
+      <div className="w-96">
+        <HorizontalScrollContainer gap="8px" scrollDistance={150}>
+          {items.map((item) => (
+            <div
+              key={item}
+              className="cursor-pointer rounded-2xl bg-orange-500 px-4 py-2 whitespace-nowrap text-white hover:bg-orange-600"
+              onClick={() => alert(`Clicked: ${item}`)}>
+              {item}
+            </div>
+          ))}
+        </HorizontalScrollContainer>
+        <button
+          type="button"
+          className="mt-4 rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+          onClick={() => setItems([...items, `Item ${items.length + 1}`])}>
+          Add Item
+        </button>
+      </div>
+    )
+  }
+}
+
+// Different Gaps
+export const DifferentGaps: Story = {
+  render: () => (
+    <div className="flex w-96 flex-col gap-6">
+      <div>
+        <h4 className="mb-2 font-semibold">Small Gap (4px)</h4>
+        <HorizontalScrollContainer gap="4px">
+          {Array.from({ length: 15 }, (_, i) => (
+            <span key={i} className="rounded bg-purple-600 px-3 py-1.5 text-white">
+              Item {i + 1}
+            </span>
+          ))}
+        </HorizontalScrollContainer>
+      </div>
+
+      <div>
+        <h4 className="mb-2 font-semibold">Medium Gap (12px)</h4>
+        <HorizontalScrollContainer gap="12px">
+          {Array.from({ length: 15 }, (_, i) => (
+            <span key={i} className="rounded bg-cyan-500 px-3 py-1.5 text-white">
+              Item {i + 1}
+            </span>
+          ))}
+        </HorizontalScrollContainer>
+      </div>
+
+      <div>
+        <h4 className="mb-2 font-semibold">Large Gap (20px)</h4>
+        <HorizontalScrollContainer gap="20px">
+          {Array.from({ length: 15 }, (_, i) => (
+            <span key={i} className="rounded bg-pink-500 px-3 py-1.5 text-white">
+              Item {i + 1}
+            </span>
+          ))}
+        </HorizontalScrollContainer>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/stories/components/layout/Scrollbar.stories.tsx b/packages/ui/stories/components/layout/Scrollbar.stories.tsx
new file mode 100644
index 0000000000..d8dad28a83
--- /dev/null
+++ b/packages/ui/stories/components/layout/Scrollbar.stories.tsx
@@ -0,0 +1,259 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import Scrollbar from '../../../src/components/layout/Scrollbar'
+
+const meta: Meta<typeof Scrollbar> = {
+  title: 'Layout/Scrollbar',
+  component: Scrollbar,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default example
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="p-4">
+        {Array.from({ length: 50 }, (_, i) => (
+          <p key={i} className="mb-2">
+            Line {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+        ))}
+      </div>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96 h-64 border border-gray-300 rounded">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// With Cards
+export const WithCards: Story = {
+  args: {
+    children: (
+      <div className="p-4 space-y-4">
+        {Array.from({ length: 20 }, (_, i) => (
+          <div key={i} className="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
+            <h3 className="mb-2 text-lg font-semibold">Card {i + 1}</h3>
+            <p className="text-sm text-gray-600">
+              This is a sample card with some content to demonstrate scrolling behavior.
+            </p>
+          </div>
+        ))}
+      </div>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-96 h-96 bg-gray-50 rounded-lg">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// Horizontal Layout
+export const HorizontalContent: Story = {
+  args: {
+    children: (
+      <div className="p-4">
+        <div className="flex gap-4 mb-4">
+          {Array.from({ length: 10 }, (_, i) => (
+            <div key={i} className="min-w-[150px] p-3 bg-blue-100 rounded">
+              Column {i + 1}
+            </div>
+          ))}
+        </div>
+        {Array.from({ length: 30 }, (_, i) => (
+          <p key={i} className="mb-2">
+            Row {i + 1}: Additional content to enable vertical scrolling
+          </p>
+        ))}
+      </div>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[500px] h-80 border border-gray-300 rounded overflow-x-auto">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// Interactive List
+export const InteractiveList: Story = {
+  render: () => {
+    const handleScroll = () => {
+      console.log('Scrolling...')
+    }
+
+    return (
+      <div className="w-96 h-64 border border-gray-300 rounded">
+        <Scrollbar onScroll={handleScroll}>
+          <div className="p-4">
+            {Array.from({ length: 30 }, (_, i) => (
+              <div
+                key={i}
+                className="mb-2 p-3 bg-gray-100 rounded cursor-pointer hover:bg-gray-200 transition-colors"
+                onClick={() => alert(`Clicked item ${i + 1}`)}>
+                Interactive Item {i + 1}
+              </div>
+            ))}
+          </div>
+        </Scrollbar>
+      </div>
+    )
+  }
+}
+
+// Code Block
+export const CodeBlock: Story = {
+  args: {
+    children: (
+      <pre className="p-4 font-mono text-sm">
+        {`function calculateTotal(items) {
+  let total = 0;
+
+  for (const item of items) {
+    if (item.price && item.quantity) {
+      total += item.price * item.quantity;
+    }
+  }
+
+  return total;
+}
+
+const items = [
+  { name: 'Apple', price: 0.5, quantity: 10 },
+  { name: 'Banana', price: 0.3, quantity: 15 },
+  { name: 'Orange', price: 0.6, quantity: 8 },
+  { name: 'Grape', price: 2.0, quantity: 3 },
+  { name: 'Watermelon', price: 5.0, quantity: 1 }
+];
+
+const totalCost = calculateTotal(items);
+console.log('Total cost:', totalCost);
+
+// More code to demonstrate scrolling
+class ShoppingCart {
+  constructor() {
+    this.items = [];
+  }
+
+  addItem(item) {
+    this.items.push(item);
+  }
+
+  removeItem(name) {
+    this.items = this.items.filter(item => item.name !== name);
+  }
+
+  getTotal() {
+    return calculateTotal(this.items);
+  }
+
+  checkout() {
+    const total = this.getTotal();
+    if (total > 0) {
+      console.log('Processing payment...');
+      return true;
+    }
+    return false;
+  }
+}`}
+      </pre>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px] h-96 bg-gray-900 text-green-400 rounded-lg overflow-hidden">
+        <Story />
+      </div>
+    )
+  ]
+}
+
+// Long Article
+export const LongArticle: Story = {
+  args: {
+    children: (
+      <article className="p-6 max-w-prose">
+        <h1 className="mb-4 text-2xl font-bold">The Art of Scrolling</h1>
+
+        <p className="mb-4">
+          Scrolling is a fundamental interaction pattern in user interfaces. It allows users to navigate through content
+          that exceeds the visible viewport, making it possible to present large amounts of information in a limited space.
+        </p>
+
+        <h2 className="mb-3 text-xl font-semibold">History of Scrolling</h2>
+        <p className="mb-4">
+          The concept of scrolling dates back to the early days of computing, when terminal displays could only show a
+          limited number of lines. As content grew beyond what could fit on a single screen, the need for scrolling became
+          apparent.
+        </p>
+
+        <h2 className="mb-3 text-xl font-semibold">Types of Scrolling</h2>
+        <ul className="mb-4 ml-6 list-disc">
+          <li className="mb-2">Vertical Scrolling - The most common type</li>
+          <li className="mb-2">Horizontal Scrolling - Often used for timelines and galleries</li>
+          <li className="mb-2">Infinite Scrolling - Continuously loads new content</li>
+          <li className="mb-2">Parallax Scrolling - Creates depth through different scroll speeds</li>
+        </ul>
+
+        <h2 className="mb-3 text-xl font-semibold">Best Practices</h2>
+        <p className="mb-4">
+          When implementing scrolling in your applications, consider the following best practices:
+        </p>
+
+        <ol className="mb-4 ml-6 list-decimal">
+          <li className="mb-2">Always provide visual feedback for scrollable areas</li>
+          <li className="mb-2">Ensure scroll performance is smooth and responsive</li>
+          <li className="mb-2">Consider keyboard navigation for accessibility</li>
+          <li className="mb-2">Use appropriate scroll indicators</li>
+          <li className="mb-2">Test on various devices and screen sizes</li>
+        </ol>
+
+        <p className="mb-4">
+          Modern web technologies have made it easier than ever to implement sophisticated scrolling behaviors. CSS
+          properties like scroll-behavior and overscroll-behavior provide fine-grained control over the scrolling
+          experience.
+        </p>
+
+        <h2 className="mb-3 text-xl font-semibold">Performance Considerations</h2>
+        <p className="mb-4">
+          Scrolling performance is crucial for user experience. Poor scrolling performance can make an application feel
+          sluggish and unresponsive. Key factors affecting scroll performance include:
+        </p>
+
+        <ul className="mb-4 ml-6 list-disc">
+          <li className="mb-2">DOM complexity and size</li>
+          <li className="mb-2">CSS animations and transforms</li>
+          <li className="mb-2">JavaScript event handlers</li>
+          <li className="mb-2">Image loading and rendering</li>
+        </ul>
+
+        <p className="mb-4">
+          To optimize scrolling performance, consider using techniques like virtual scrolling for large lists, debouncing
+          scroll event handlers, and leveraging CSS transforms for animations.
+        </p>
+      </article>
+    )
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px] h-96 bg-white border border-gray-300 rounded-lg">
+        <Story />
+      </div>
+    )
+  ]
+}
\ No newline at end of file
diff --git a/packages/ui/stories/hero.ts b/packages/ui/stories/hero.ts
new file mode 100644
index 0000000000..8e847137e8
--- /dev/null
+++ b/packages/ui/stories/hero.ts
@@ -0,0 +1,3 @@
+// hero.ts
+import { heroui } from '@heroui/react'
+export default heroui()
diff --git a/packages/ui/stories/tailwind.css b/packages/ui/stories/tailwind.css
new file mode 100644
index 0000000000..b3f097db26
--- /dev/null
+++ b/packages/ui/stories/tailwind.css
@@ -0,0 +1,13 @@
+/* Storybook 专用的 Tailwind CSS 配置 */
+@import 'tailwindcss';
+
+/* 扫描组件文件 */
+@source '../src/components/**/*.{js,ts,jsx,tsx}';
+
+/* 扫描 stories 文件 */
+@source './components/**/*.{js,ts,jsx,tsx}';
+
+/* HeroUI 组件样式 */
+@plugin './hero.ts';
+@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
deleted file mode 100644
index 58fe3624ac..0000000000
--- a/packages/ui/tailwind.config.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// Tailwind config for UI component library
-// This config is used for development and provides a template for consumers
-
-let heroui
-try {
-  // Try to load heroui if available (dev environment)
-  heroui = require('@heroui/react').heroui
-} catch (e) {
-  // Fallback for environments without heroui
-  heroui = () => ({})
-}
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    // 扫描当前包的所有组件文件
-    './src/**/*.{js,ts,jsx,tsx}',
-    // 扫描 HeroUI 的组件样式（如果存在）
-    './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
-  ],
-  theme: {
-    extend: {
-      // 基础组件库主题扩展
-    }
-  },
-  darkMode: 'class',
-  plugins: [heroui()]
-}
diff --git a/packages/ui/tsdown.config.ts b/packages/ui/tsdown.config.ts
index 569c983b40..5ec6a3dc93 100644
--- a/packages/ui/tsdown.config.ts
+++ b/packages/ui/tsdown.config.ts
@@ -12,5 +12,15 @@ export default defineConfig({
   clean: true,
   dts: true,
   tsconfig: 'tsconfig.json',
-  external: ['react', 'react-dom']
+  // 将 HeroUI、Tailwind 和其他 peer dependencies 标记为外部依赖
+  external: [
+    'react',
+    'react-dom',
+    '@heroui/react',
+    '@heroui/theme',
+    'framer-motion',
+    'tailwindcss',
+    // 保留 styled-components 作为外部依赖（迁移期间）
+    'styled-components'
+  ]
 })
diff --git a/yarn.lock b/yarn.lock
index b48fd0fa1c..73e547e7c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2059,6 +2059,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.28.0":
+  version: 7.28.4
+  resolution: "@babel/core@npm:7.28.4"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.3"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-module-transforms": "npm:^7.28.3"
+    "@babel/helpers": "npm:^7.28.4"
+    "@babel/parser": "npm:^7.28.4"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/traverse": "npm:^7.28.4"
+    "@babel/types": "npm:^7.28.4"
+    "@jridgewell/remapping": "npm:^2.3.5"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/ef5a6c3c6bf40d3589b5593f8118cfe2602ce737412629fb6e26d595be2fcbaae0807b43027a5c42ec4fba5b895ff65891f2503b5918c8a3ea3542ab44d4c278
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/generator@npm:7.28.0"
@@ -2072,6 +2095,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/generator@npm:7.28.3"
+  dependencies:
+    "@babel/parser": "npm:^7.28.3"
+    "@babel/types": "npm:^7.28.2"
+    "@jridgewell/gen-mapping": "npm:^0.3.12"
+    "@jridgewell/trace-mapping": "npm:^0.3.28"
+    jsesc: "npm:^3.0.2"
+  checksum: 10c0/0ff58bcf04f8803dcc29479b547b43b9b0b828ec1ee0668e92d79f9e90f388c28589056637c5ff2fd7bcf8d153c990d29c448d449d852bf9d1bc64753ca462bc
+  languageName: node
+  linkType: hard
+
 "@babel/helper-compilation-targets@npm:^7.27.2":
   version: 7.27.2
   resolution: "@babel/helper-compilation-targets@npm:7.27.2"
@@ -2115,6 +2151,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.28.3":
+  version: 7.28.3
+  resolution: "@babel/helper-module-transforms@npm:7.28.3"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+    "@babel/traverse": "npm:^7.28.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/549be62515a6d50cd4cfefcab1b005c47f89bd9135a22d602ee6a5e3a01f27571868ada10b75b033569f24dc4a2bb8d04bfa05ee75c16da7ade2d0db1437fcdb
+  languageName: node
+  linkType: hard
+
 "@babel/helper-plugin-utils@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-plugin-utils@npm:7.27.1"
@@ -2153,6 +2202,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/helpers@npm:7.28.4"
+  dependencies:
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.4"
+  checksum: 10c0/aaa5fb8098926dfed5f223adf2c5e4c7fbba4b911b73dfec2d7d3083f8ba694d201a206db673da2d9b3ae8c01793e795767654558c450c8c14b4c2175b4fcb44
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.28.3, @babel/parser@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/parser@npm:7.28.4"
+  dependencies:
+    "@babel/types": "npm:^7.28.4"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/58b239a5b1477ac7ed7e29d86d675cc81075ca055424eba6485872626db2dc556ce63c45043e5a679cd925e999471dba8a3ed4864e7ab1dbf64306ab72c52707
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.25.4, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.27.5, @babel/parser@npm:^7.27.7, @babel/parser@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/parser@npm:7.28.0"
@@ -2222,6 +2292,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/traverse@npm:7.28.4"
+  dependencies:
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.3"
+    "@babel/helper-globals": "npm:^7.28.0"
+    "@babel/parser": "npm:^7.28.4"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.28.4"
+    debug: "npm:^4.3.1"
+  checksum: 10c0/ee678fdd49c9f54a32e07e8455242390d43ce44887cea6567b233fe13907b89240c377e7633478a32c6cf1be0e17c2f7f3b0c59f0666e39c5074cc47b968489c
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/types@npm:7.28.4"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10c0/ac6f909d6191319e08c80efbfac7bd9a25f80cc83b43cd6d82e7233f7a6b9d6e7b90236f3af7400a3f83b576895bcab9188a22b584eb0f224e80e6d4e95f4517
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.25.4, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.6, @babel/types@npm:^7.28.0":
   version: 7.28.1
   resolution: "@babel/types@npm:7.28.1"
@@ -2530,13 +2625,20 @@ __metadata:
   resolution: "@cherrystudio/ui@workspace:packages/ui"
   dependencies:
     "@heroui/react": "npm:^2.8.4"
+    "@storybook/addon-docs": "npm:^9.1.6"
+    "@storybook/react-vite": "npm:^9.1.6"
     "@types/react": "npm:^19.0.12"
     "@types/react-dom": "npm:^19.0.4"
+    "@types/styled-components": "npm:^5.1.34"
+    antd: "npm:^5.22.5"
     clsx: "npm:^2.1.1"
+    eslint-plugin-storybook: "npm:9.1.6"
     framer-motion: "npm:^12.23.12"
     lucide-react: "npm:^0.525.0"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
+    storybook: "npm:^9.1.6"
+    styled-components: "npm:^6.1.15"
     tsdown: "npm:^0.12.9"
     typescript: "npm:^5.6.2"
     vitest: "npm:^3.2.4"
@@ -3437,6 +3539,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/aix-ppc64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/aix-ppc64@npm:0.25.9"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-arm64@npm:0.18.20"
@@ -3451,6 +3560,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/android-arm64@npm:0.25.9"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-arm@npm:0.18.20"
@@ -3465,6 +3581,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-arm@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/android-arm@npm:0.25.9"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-x64@npm:0.18.20"
@@ -3479,6 +3602,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/android-x64@npm:0.25.9"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/darwin-arm64@npm:0.18.20"
@@ -3493,6 +3623,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/darwin-arm64@npm:0.25.9"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/darwin-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/darwin-x64@npm:0.18.20"
@@ -3507,6 +3644,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/darwin-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/darwin-x64@npm:0.25.9"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/freebsd-arm64@npm:0.18.20"
@@ -3521,6 +3665,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.9"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/freebsd-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/freebsd-x64@npm:0.18.20"
@@ -3535,6 +3686,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/freebsd-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/freebsd-x64@npm:0.25.9"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-arm64@npm:0.18.20"
@@ -3549,6 +3707,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-arm64@npm:0.25.9"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-arm@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-arm@npm:0.18.20"
@@ -3563,6 +3728,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-arm@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-arm@npm:0.25.9"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ia32@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-ia32@npm:0.18.20"
@@ -3577,6 +3749,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ia32@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-ia32@npm:0.25.9"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-loong64@npm:0.18.20"
@@ -3591,6 +3770,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-loong64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-loong64@npm:0.25.9"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-mips64el@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-mips64el@npm:0.18.20"
@@ -3605,6 +3791,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-mips64el@npm:0.25.9"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-ppc64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-ppc64@npm:0.18.20"
@@ -3619,6 +3812,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-ppc64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-ppc64@npm:0.25.9"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-riscv64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-riscv64@npm:0.18.20"
@@ -3633,6 +3833,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-riscv64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-riscv64@npm:0.25.9"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-s390x@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-s390x@npm:0.18.20"
@@ -3647,6 +3854,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-s390x@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-s390x@npm:0.25.9"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/linux-x64@npm:0.18.20"
@@ -3661,6 +3875,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/linux-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/linux-x64@npm:0.25.9"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-arm64@npm:0.25.8":
   version: 0.25.8
   resolution: "@esbuild/netbsd-arm64@npm:0.25.8"
@@ -3668,6 +3889,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.9"
+  conditions: os=netbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/netbsd-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/netbsd-x64@npm:0.18.20"
@@ -3682,6 +3910,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/netbsd-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/netbsd-x64@npm:0.25.9"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-arm64@npm:0.25.8":
   version: 0.25.8
   resolution: "@esbuild/openbsd-arm64@npm:0.25.8"
@@ -3689,6 +3924,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.9"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openbsd-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/openbsd-x64@npm:0.18.20"
@@ -3703,6 +3945,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openbsd-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/openbsd-x64@npm:0.25.9"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/openharmony-arm64@npm:0.25.8":
   version: 0.25.8
   resolution: "@esbuild/openharmony-arm64@npm:0.25.8"
@@ -3710,6 +3959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/openharmony-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/openharmony-arm64@npm:0.25.9"
+  conditions: os=openharmony & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/sunos-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/sunos-x64@npm:0.18.20"
@@ -3724,6 +3980,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/sunos-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/sunos-x64@npm:0.25.9"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/win32-arm64@npm:0.18.20"
@@ -3738,6 +4001,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-arm64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/win32-arm64@npm:0.25.9"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-ia32@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/win32-ia32@npm:0.18.20"
@@ -3752,6 +4022,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-ia32@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/win32-ia32@npm:0.25.9"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/win32-x64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/win32-x64@npm:0.18.20"
@@ -3766,6 +4043,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@esbuild/win32-x64@npm:0.25.9":
+  version: 0.25.9
+  resolution: "@esbuild/win32-x64@npm:0.25.9"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
   version: 4.6.0
   resolution: "@eslint-community/eslint-utils@npm:4.6.0"
@@ -3777,6 +4061,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint-community/eslint-utils@npm:^4.7.0":
+  version: 4.9.0
+  resolution: "@eslint-community/eslint-utils@npm:4.9.0"
+  dependencies:
+    eslint-visitor-keys: "npm:^3.4.3"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 10c0/8881e22d519326e7dba85ea915ac7a143367c805e6ba1374c987aa2fbdd09195cc51183d2da72c0e2ff388f84363e1b220fd0d19bef10c272c63455162176817
+  languageName: node
+  linkType: hard
+
 "@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1":
   version: 4.12.1
   resolution: "@eslint-community/regexpp@npm:4.12.1"
@@ -6787,6 +7082,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.12
   resolution: "@jridgewell/gen-mapping@npm:0.3.12"
@@ -6797,7 +7109,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/remapping@npm:^2.3.4":
+"@jridgewell/remapping@npm:^2.3.4, @jridgewell/remapping@npm:^2.3.5":
   version: 2.3.5
   resolution: "@jridgewell/remapping@npm:2.3.5"
   dependencies:
@@ -7728,6 +8040,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mdx-js/react@npm:^3.0.0":
+  version: 3.1.1
+  resolution: "@mdx-js/react@npm:3.1.1"
+  dependencies:
+    "@types/mdx": "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ">=16"
+    react: ">=16"
+  checksum: 10c0/34ca98bc2a0f969894ea144dc5c8a5294690505458cd24965cd9be854d779c193ad9192bf9143c4c18438fafd1902e100d99067e045c69319288562d497558c6
+  languageName: node
+  linkType: hard
+
 "@mermaid-js/parser@npm:^0.6.2":
   version: 0.6.2
   resolution: "@mermaid-js/parser@npm:0.6.2"
@@ -10168,6 +10492,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/pluginutils@npm:^5.0.2":
+  version: 5.3.0
+  resolution: "@rollup/pluginutils@npm:5.3.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    estree-walker: "npm:^2.0.2"
+    picomatch: "npm:^4.0.2"
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10c0/001834bf62d7cf5bac424d2617c113f7f7d3b2bf3c1778cbcccb72cdc957b68989f8e7747c782c2b911f1dde8257f56f8ac1e779e29e74e638e3f1e2cac2bcd0
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-linux-x64-gnu@npm:4.45.1":
   version: 4.45.1
   resolution: "@rollup/rollup-linux-x64-gnu@npm:4.45.1"
@@ -11409,6 +11749,115 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-docs@npm:^9.1.6":
+  version: 9.1.6
+  resolution: "@storybook/addon-docs@npm:9.1.6"
+  dependencies:
+    "@mdx-js/react": "npm:^3.0.0"
+    "@storybook/csf-plugin": "npm:9.1.6"
+    "@storybook/icons": "npm:^1.4.0"
+    "@storybook/react-dom-shim": "npm:9.1.6"
+    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.6
+  checksum: 10c0/705d1ae124365d8bb7c1bfe77769255329b1cf105b6b94ba828b63841b466c3ca32bce0ef98a0c2309790b5d03083a8db917b68683ba8f8dd7d463c17bbc4a6c
+  languageName: node
+  linkType: hard
+
+"@storybook/builder-vite@npm:9.1.6":
+  version: 9.1.6
+  resolution: "@storybook/builder-vite@npm:9.1.6"
+  dependencies:
+    "@storybook/csf-plugin": "npm:9.1.6"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^9.1.6
+    vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+  checksum: 10c0/0bb0b615863fedc23f11376ec8884507fdca4e16f7ff60a88c681ab93bba118c0951bfd7ad0adfd88232444ecab4e08b2b0257b459bee3c1bab66d718b3d3d08
+  languageName: node
+  linkType: hard
+
+"@storybook/csf-plugin@npm:9.1.6":
+  version: 9.1.6
+  resolution: "@storybook/csf-plugin@npm:9.1.6"
+  dependencies:
+    unplugin: "npm:^1.3.1"
+  peerDependencies:
+    storybook: ^9.1.6
+  checksum: 10c0/2fef07876d9b2d1445009d8a297293c0cfea88d53537798f6be15c5ab696216c09f4cceaf60de49ad2145c954748e0e8e90128f14dd6bcd9ba25021b051fe133
+  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.4.0
+  resolution: "@storybook/icons@npm:1.4.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/fd0514fb3fa431a8b5939fe1d9fc336b253ef2c25b34792d2d4ee59e13321108d34f8bf223a0981482f54f83c5ef47ffd1a98c376ca9071011c1b8afe2b01d43
+  languageName: node
+  linkType: hard
+
+"@storybook/react-dom-shim@npm:9.1.6":
+  version: 9.1.6
+  resolution: "@storybook/react-dom-shim@npm:9.1.6"
+  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.6
+  checksum: 10c0/ae4a148d9b5258d8fffe3b2f45bccf3c35374286489fa797a3c4c395a54f17148ae8d38ac1785dfbed8781a7c31356a77994bb737d5b8736e5424aa339b865f0
+  languageName: node
+  linkType: hard
+
+"@storybook/react-vite@npm:^9.1.6":
+  version: 9.1.6
+  resolution: "@storybook/react-vite@npm:9.1.6"
+  dependencies:
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.6.1"
+    "@rollup/pluginutils": "npm:^5.0.2"
+    "@storybook/builder-vite": "npm:9.1.6"
+    "@storybook/react": "npm:9.1.6"
+    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.6
+    vite: ^5.0.0 || ^6.0.0 || ^7.0.0
+  checksum: 10c0/5616afb90ef03058b6114f2d752783b123c2eb379dd4c4b33e29dbf6bd0b75f1be8817fa2852cb9a520f043b5568ab6d9502629a9aba942fd94f80c481797534
+  languageName: node
+  linkType: hard
+
+"@storybook/react@npm:9.1.6":
+  version: 9.1.6
+  resolution: "@storybook/react@npm:9.1.6"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/react-dom-shim": "npm:9.1.6"
+  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.6
+    typescript: ">= 4.9.x"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/8cef325b2008296eb4bff609fb2059f7a20aaea861e657387ad4f9ebfd5605d094ad66555840971c5160bbc68f41c86f8e3d6280633e7747ddbd71c5e1a352e5
+  languageName: node
+  linkType: hard
+
 "@strongtz/win32-arm64-msvc@npm:^0.4.7":
   version: 0.4.7
   resolution: "@strongtz/win32-arm64-msvc@npm:0.4.7"
@@ -12398,6 +12847,47 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/babel__core@npm:^7.20.5":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": "npm:^7.20.7"
+    "@babel/types": "npm:^7.20.7"
+    "@types/babel__generator": "npm:*"
+    "@types/babel__template": "npm:*"
+    "@types/babel__traverse": "npm:*"
+  checksum: 10c0/bdee3bb69951e833a4b811b8ee9356b69a61ed5b7a23e1a081ec9249769117fa83aaaf023bb06562a038eb5845155ff663e2d5c75dd95c1d5ccc91db012868ff
+  languageName: node
+  linkType: hard
+
+"@types/babel__generator@npm:*":
+  version: 7.27.0
+  resolution: "@types/babel__generator@npm:7.27.0"
+  dependencies:
+    "@babel/types": "npm:^7.0.0"
+  checksum: 10c0/9f9e959a8792df208a9d048092fda7e1858bddc95c6314857a8211a99e20e6830bdeb572e3587ae8be5429e37f2a96fcf222a9f53ad232f5537764c9e13a2bbd
+  languageName: node
+  linkType: hard
+
+"@types/babel__template@npm:*":
+  version: 7.4.4
+  resolution: "@types/babel__template@npm:7.4.4"
+  dependencies:
+    "@babel/parser": "npm:^7.1.0"
+    "@babel/types": "npm:^7.0.0"
+  checksum: 10c0/cc84f6c6ab1eab1427e90dd2b76ccee65ce940b778a9a67be2c8c39e1994e6f5bbc8efa309f6cea8dc6754994524cd4d2896558df76d92e7a1f46ecffee7112b
+  languageName: node
+  linkType: hard
+
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.20.7":
+  version: 7.28.0
+  resolution: "@types/babel__traverse@npm:7.28.0"
+  dependencies:
+    "@babel/types": "npm:^7.28.2"
+  checksum: 10c0/b52d7d4e8fc6a9018fe7361c4062c1c190f5778cf2466817cb9ed19d69fbbb54f9a85ffedeb748ed8062d2cf7d4cc088ee739848f47c57740de1c48cbf0d0994
+  languageName: node
+  linkType: hard
+
 "@types/body-parser@npm:*":
   version: 1.19.6
   resolution: "@types/body-parser@npm:1.19.6"
@@ -12758,6 +13248,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"
@@ -12839,6 +13336,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hoist-non-react-statics@npm:*":
+  version: 3.3.7
+  resolution: "@types/hoist-non-react-statics@npm:3.3.7"
+  dependencies:
+    hoist-non-react-statics: "npm:^3.3.0"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/ed8f4e88338f7d021d0f956adf6089d2a12b2e254a03c05292324f2e986d2376eb9efdb8a4f04596823e8fca88c9d06361d20dab4a2a00dc935fb36ac911de55
+  languageName: node
+  linkType: hard
+
 "@types/html-to-text@npm:^9":
   version: 9.0.4
   resolution: "@types/html-to-text@npm:9.0.4"
@@ -12955,6 +13463,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdx@npm:^2.0.0":
+  version: 2.0.13
+  resolution: "@types/mdx@npm:2.0.13"
+  checksum: 10c0/5edf1099505ac568da55f9ae8a93e7e314e8cbc13d3445d0be61b75941226b005e1390d9b95caecf5dcb00c9d1bab2f1f60f6ff9876dc091a48b547495007720
+  languageName: node
+  linkType: hard
+
 "@types/mime-types@npm:^3":
   version: 3.0.1
   resolution: "@types/mime-types@npm:3.0.1"
@@ -13098,6 +13613,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/responselike@npm:^1.0.0":
   version: 1.0.3
   resolution: "@types/responselike@npm:1.0.3"
@@ -13135,6 +13657,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/styled-components@npm:^5.1.34":
+  version: 5.1.34
+  resolution: "@types/styled-components@npm:5.1.34"
+  dependencies:
+    "@types/hoist-non-react-statics": "npm:*"
+    "@types/react": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/5bce93ea2c6161fc45daaf863eefdc20672e839ae486597c40b95e7978e249c160c1bc9706f56cb5152a7ef63cf485d15a9502889169ef945281f511e4b2d5a0
+  languageName: node
+  linkType: hard
+
 "@types/stylis@npm:4.2.5":
   version: 4.2.5
   resolution: "@types/stylis@npm:4.2.5"
@@ -13293,6 +13826,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/project-service@npm:8.43.0":
+  version: 8.43.0
+  resolution: "@typescript-eslint/project-service@npm:8.43.0"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.43.0"
+    "@typescript-eslint/types": "npm:^8.43.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/c9058b5fbf9642c35a303641e4ff2d0df1ddac337275bab84b56167f1019fbcb7e69959239fed82e53c747f58d6ee4c1859cf5b018803cba1b1aab430439d728
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/scope-manager@npm:8.30.1, @typescript-eslint/scope-manager@npm:^8.30.1":
   version: 8.30.1
   resolution: "@typescript-eslint/scope-manager@npm:8.30.1"
@@ -13303,6 +13849,25 @@ __metadata:
   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"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.43.0"
+    "@typescript-eslint/visitor-keys": "npm:8.43.0"
+  checksum: 10c0/f87b3c3a5d3ad18326945288fa5b9b9fa662d87f466dc159e1514e00e359e830b80557f213acb3d23d5d600826b4cc4cfa5d2d479f8aba1b9834df19a640a779
+  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"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/b3a472368ad31e31e58ef019f6afec7387f5885e3fd423c71f3910b6d6b767324fde8bd60bec2e7505cc130317ece7fbc91314c44cdfea74ff76b5039bf26d52
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/type-utils@npm:8.30.1, @typescript-eslint/type-utils@npm:^8.0.0, @typescript-eslint/type-utils@npm:^8.30.1":
   version: 8.30.1
   resolution: "@typescript-eslint/type-utils@npm:8.30.1"
@@ -13325,6 +13890,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:8.43.0, @typescript-eslint/types@npm:^8.43.0":
+  version: 8.43.0
+  resolution: "@typescript-eslint/types@npm:8.43.0"
+  checksum: 10c0/60d19b695affce128fe1076ebe4cff7e05d38dd50155d653fc9e995eafa56c299fd49ad4d9d2997f118a75fb57e3ca18001623bc3ef3fa0111f863079203e4b2
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:8.30.1, @typescript-eslint/typescript-estree@npm:^8.30.1":
   version: 8.30.1
   resolution: "@typescript-eslint/typescript-estree@npm:8.30.1"
@@ -13343,6 +13915,26 @@ __metadata:
   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"
+  dependencies:
+    "@typescript-eslint/project-service": "npm:8.43.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.43.0"
+    "@typescript-eslint/types": "npm:8.43.0"
+    "@typescript-eslint/visitor-keys": "npm:8.43.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/184ba925067d7fbcb377450195a89511f030a49d080e27058fa78078a069d86c1936b1a82ce6f19ff24c30c4de8b779deb050c36b06db5372c95fc7e5be7115a
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/utils@npm:8.30.1, @typescript-eslint/utils@npm:^8.30.1":
   version: 8.30.1
   resolution: "@typescript-eslint/utils@npm:8.30.1"
@@ -13358,6 +13950,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/utils@npm:^8.8.1":
+  version: 8.43.0
+  resolution: "@typescript-eslint/utils@npm:8.43.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.7.0"
+    "@typescript-eslint/scope-manager": "npm:8.43.0"
+    "@typescript-eslint/types": "npm:8.43.0"
+    "@typescript-eslint/typescript-estree": "npm:8.43.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/42fc8c60551361d80b5c53b303ba8cd20cf914665168416ad0a278cd44aae587311af9e4461f92ed28b5f36091d275a0e9974482d5e9ba95fc00108a537cdd36
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:8.30.1":
   version: 8.30.1
   resolution: "@typescript-eslint/visitor-keys@npm:8.30.1"
@@ -13368,6 +13975,16 @@ __metadata:
   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"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.43.0"
+    eslint-visitor-keys: "npm:^4.2.1"
+  checksum: 10c0/5d576eaf7bea41933ba726f4b24410bd3fc2521ef286967c3dc630c6a90fabff2a2d7c4d12cb841d3f946d2e5e6fb2605e7edd84e3360308fe379dbf2b8dc2fa
+  languageName: node
+  linkType: hard
+
 "@uiw/codemirror-extensions-basic-setup@npm:4.25.1":
   version: 4.25.1
   resolution: "@uiw/codemirror-extensions-basic-setup@npm:4.25.1"
@@ -14689,6 +15306,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"antd@npm:^5.22.5":
+  version: 5.27.3
+  resolution: "antd@npm:5.27.3"
+  dependencies:
+    "@ant-design/colors": "npm:^7.2.1"
+    "@ant-design/cssinjs": "npm:^1.23.0"
+    "@ant-design/cssinjs-utils": "npm:^1.1.3"
+    "@ant-design/fast-color": "npm:^2.0.6"
+    "@ant-design/icons": "npm:^5.6.1"
+    "@ant-design/react-slick": "npm:~1.1.2"
+    "@babel/runtime": "npm:^7.26.0"
+    "@rc-component/color-picker": "npm:~2.0.1"
+    "@rc-component/mutate-observer": "npm:^1.1.0"
+    "@rc-component/qrcode": "npm:~1.0.0"
+    "@rc-component/tour": "npm:~1.15.1"
+    "@rc-component/trigger": "npm:^2.3.0"
+    classnames: "npm:^2.5.1"
+    copy-to-clipboard: "npm:^3.3.3"
+    dayjs: "npm:^1.11.11"
+    rc-cascader: "npm:~3.34.0"
+    rc-checkbox: "npm:~3.5.0"
+    rc-collapse: "npm:~3.9.0"
+    rc-dialog: "npm:~9.6.0"
+    rc-drawer: "npm:~7.3.0"
+    rc-dropdown: "npm:~4.2.1"
+    rc-field-form: "npm:~2.7.0"
+    rc-image: "npm:~7.12.0"
+    rc-input: "npm:~1.8.0"
+    rc-input-number: "npm:~9.5.0"
+    rc-mentions: "npm:~2.20.0"
+    rc-menu: "npm:~9.16.1"
+    rc-motion: "npm:^2.9.5"
+    rc-notification: "npm:~5.6.4"
+    rc-pagination: "npm:~5.1.0"
+    rc-picker: "npm:~4.11.3"
+    rc-progress: "npm:~4.0.0"
+    rc-rate: "npm:~2.13.1"
+    rc-resize-observer: "npm:^1.4.3"
+    rc-segmented: "npm:~2.7.0"
+    rc-select: "npm:~14.16.8"
+    rc-slider: "npm:~11.1.8"
+    rc-steps: "npm:~6.0.1"
+    rc-switch: "npm:~4.1.0"
+    rc-table: "npm:~7.52.6"
+    rc-tabs: "npm:~15.7.0"
+    rc-textarea: "npm:~1.10.2"
+    rc-tooltip: "npm:~6.4.0"
+    rc-tree: "npm:~5.13.1"
+    rc-tree-select: "npm:~5.27.0"
+    rc-upload: "npm:~4.9.2"
+    rc-util: "npm:^5.44.4"
+    scroll-into-view-if-needed: "npm:^3.1.0"
+    throttle-debounce: "npm:^5.0.2"
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: 10c0/26ed550278185a2a3ea5e5c9a0aad6ece8e094278c3e412df3914b97ea801770139c5c897016aeb5bf560cc0043847dd495931d7dd6cd6ff104ff121265a95d4
+  languageName: node
+  linkType: hard
+
 "antd@patch:antd@npm%3A5.27.0#~/.yarn/patches/antd-npm-5.27.0-aa91c36546.patch":
   version: 5.27.0
   resolution: "antd@patch:antd@npm%3A5.27.0#~/.yarn/patches/antd-npm-5.27.0-aa91c36546.patch::version=5.27.0&hash=a9067b"
@@ -14963,6 +15640,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
+
 "ast-v8-to-istanbul@npm:^0.3.3":
   version: 0.3.3
   resolution: "ast-v8-to-istanbul@npm:0.3.3"
@@ -15141,6 +15827,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
+
 "bignumber.js@npm:^9.0.0":
   version: 9.2.1
   resolution: "bignumber.js@npm:9.2.1"
@@ -17440,7 +18135,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"doctrine@npm:3.0.0":
+"doctrine@npm:3.0.0, doctrine@npm:^3.0.0":
   version: 3.0.0
   resolution: "doctrine@npm:3.0.0"
   dependencies:
@@ -18103,6 +18798,95 @@ __metadata:
   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.9
+  resolution: "esbuild@npm:0.25.9"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.9"
+    "@esbuild/android-arm": "npm:0.25.9"
+    "@esbuild/android-arm64": "npm:0.25.9"
+    "@esbuild/android-x64": "npm:0.25.9"
+    "@esbuild/darwin-arm64": "npm:0.25.9"
+    "@esbuild/darwin-x64": "npm:0.25.9"
+    "@esbuild/freebsd-arm64": "npm:0.25.9"
+    "@esbuild/freebsd-x64": "npm:0.25.9"
+    "@esbuild/linux-arm": "npm:0.25.9"
+    "@esbuild/linux-arm64": "npm:0.25.9"
+    "@esbuild/linux-ia32": "npm:0.25.9"
+    "@esbuild/linux-loong64": "npm:0.25.9"
+    "@esbuild/linux-mips64el": "npm:0.25.9"
+    "@esbuild/linux-ppc64": "npm:0.25.9"
+    "@esbuild/linux-riscv64": "npm:0.25.9"
+    "@esbuild/linux-s390x": "npm:0.25.9"
+    "@esbuild/linux-x64": "npm:0.25.9"
+    "@esbuild/netbsd-arm64": "npm:0.25.9"
+    "@esbuild/netbsd-x64": "npm:0.25.9"
+    "@esbuild/openbsd-arm64": "npm:0.25.9"
+    "@esbuild/openbsd-x64": "npm:0.25.9"
+    "@esbuild/openharmony-arm64": "npm:0.25.9"
+    "@esbuild/sunos-x64": "npm:0.25.9"
+    "@esbuild/win32-arm64": "npm:0.25.9"
+    "@esbuild/win32-ia32": "npm:0.25.9"
+    "@esbuild/win32-x64": "npm:0.25.9"
+  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/aaa1284c75fcf45c82f9a1a117fe8dc5c45628e3386bda7d64916ae27730910b51c5aec7dd45a6ba19256be30ba2935e64a8f011a3f0539833071e06bf76d5b3
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.25.4, esbuild@npm:^0.25.5, esbuild@npm:~0.25.0":
   version: 0.25.8
   resolution: "esbuild@npm:0.25.8"
@@ -18536,6 +19320,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-storybook@npm:9.1.6":
+  version: 9.1.6
+  resolution: "eslint-plugin-storybook@npm:9.1.6"
+  dependencies:
+    "@typescript-eslint/utils": "npm:^8.8.1"
+  peerDependencies:
+    eslint: ">=8"
+    storybook: ^9.1.6
+  checksum: 10c0/a37164b7397e1c0a0fcc3db11fd6b4825df2ee12cc5a550dbc33725ea9f843781d1eddd4b95f6263ad3449b59a8ea7dd3fb6cb77552b27b7d396d5e9625b0700
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-unused-imports@npm:^4.1.4":
   version: 4.1.4
   resolution: "eslint-plugin-unused-imports@npm:4.1.4"
@@ -18573,6 +19369,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-visitor-keys@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "eslint-visitor-keys@npm:4.2.1"
+  checksum: 10c0/fcd43999199d6740db26c58dbe0c2594623e31ca307e616ac05153c9272f12f1364f5a0b1917a8e962268fdecc6f3622c1c2908b4fcc2e047a106fe6de69dc43
+  languageName: node
+  linkType: hard
+
 "eslint@npm:^9.22.0":
   version: 9.24.0
   resolution: "eslint@npm:9.24.0"
@@ -18641,7 +19444,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^4.0.1":
+"esprima@npm:^4.0.1, esprima@npm:~4.0.0":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
   bin:
@@ -19279,6 +20082,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"
@@ -20239,6 +21053,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hoist-non-react-statics@npm:^3.3.0":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: "npm:^16.7.0"
+  checksum: 10c0/fe0889169e845d738b59b64badf5e55fa3cf20454f9203d1eb088df322d49d4318df774828e789898dcb280e8a5521bb59b3203385662ca5e9218a6ca5820e74
+  languageName: node
+  linkType: hard
+
 "hookable@npm:^5.5.3":
   version: 5.5.3
   resolution: "hookable@npm:5.5.3"
@@ -20718,6 +21541,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-core-module@npm:^2.16.0":
+  version: 2.16.1
+  resolution: "is-core-module@npm:2.16.1"
+  dependencies:
+    hasown: "npm:^2.0.2"
+  checksum: 10c0/898443c14780a577e807618aaae2b6f745c8538eca5c7bc11388a3f2dc6de82b9902bcc7eb74f07be672b11bbe82dd6a6edded44a00cb3d8f933d0459905eedd
+  languageName: node
+  linkType: hard
+
 "is-decimal@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-decimal@npm:1.0.4"
@@ -21232,7 +22064,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.2.3":
+"json5@npm:^2.2.2, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -21884,6 +22716,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-es@npm:4.17.21, lodash-es@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash-es@npm:4.17.21"
@@ -22133,6 +22974,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.0":
+  version: 0.30.19
+  resolution: "magic-string@npm:0.30.19"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+  checksum: 10c0/db23fd2e2ee98a1aeb88a4cdb2353137fcf05819b883c856dd79e4c7dfb25151e2a5a4d5dbd88add5e30ed8ae5c51bcf4accbc6becb75249d924ec7b4fbcae27
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.30.17":
   version: 0.30.17
   resolution: "magic-string@npm:0.30.17"
@@ -24192,7 +25042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^8.4.0":
+"open@npm:^8.0.4, open@npm:^8.4.0":
   version: 8.4.2
   resolution: "open@npm:8.4.2"
   dependencies:
@@ -24356,6 +25206,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:^3.0.0":
   version: 3.0.0
   resolution: "p-locate@npm:3.0.0"
@@ -24374,6 +25233,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"
@@ -24617,6 +25485,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"
@@ -24638,6 +25513,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-parse@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "path-parse@npm:1.0.7"
+  checksum: 10c0/11ce261f9d294cc7a58d6a574b7f1b935842355ec66fba3c3fd79e0f036462eaf07d0aa95bb74ff432f9afef97ce1926c720988c6a7451d8a584930ae7de86e1
+  languageName: node
+  linkType: hard
+
 "path-posix@npm:^1.0.0":
   version: 1.0.0
   resolution: "path-posix@npm:1.0.0"
@@ -25987,6 +26869,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rc-table@npm:~7.52.6":
+  version: 7.52.7
+  resolution: "rc-table@npm:7.52.7"
+  dependencies:
+    "@babel/runtime": "npm:^7.10.1"
+    "@rc-component/context": "npm:^1.4.0"
+    classnames: "npm:^2.2.5"
+    rc-resize-observer: "npm:^1.1.0"
+    rc-util: "npm:^5.44.3"
+    rc-virtual-list: "npm:^3.14.2"
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: 10c0/b0aa65ad145b9176258cc5ddaed972a4bbb695a514f11adb49c843d16f2e30692c378c9798223741764eb597fdc93985b2e7bc9daccb4b88a568c799ace9c990
+  languageName: node
+  linkType: hard
+
 "rc-tabs@npm:~15.7.0":
   version: 15.7.0
   resolution: "rc-tabs@npm:15.7.0"
@@ -26152,6 +27051,44 @@ __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:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version: 19.1.1
+  resolution: "react-dom@npm:19.1.1"
+  dependencies:
+    scheduler: "npm:^0.26.0"
+  peerDependencies:
+    react: ^19.1.1
+  checksum: 10c0/8c91198510521299c56e4e8d5e3a4508b2734fb5e52f29eeac33811de64e76fe586ad32c32182e2e84e070d98df67125da346c3360013357228172dbcd20bcdd
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^19.0.0":
   version: 19.1.0
   resolution: "react-dom@npm:19.1.0"
@@ -26213,7 +27150,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.13.1":
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
@@ -26381,6 +27318,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version: 19.1.1
+  resolution: "react@npm:19.1.1"
+  checksum: 10c0/8c9769a2dfd02e603af6445058325e6c8a24b47b185d0e461f66a6454765ddcaecb3f0a90184836c68bb509f3c38248359edbc42f0d07c23eb500a5c30c87b4e
+  languageName: node
+  linkType: hard
+
 "react@npm:^19.0.0":
   version: 19.1.0
   resolution: "react@npm:19.1.0"
@@ -26463,6 +27407,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
+
 "redent@npm:^3.0.0":
   version: 3.0.0
   resolution: "redent@npm:3.0.0"
@@ -26806,6 +27763,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@npm:^1.22.1, resolve@npm:^1.22.8":
+  version: 1.22.10
+  resolution: "resolve@npm:1.22.10"
+  dependencies:
+    is-core-module: "npm:^2.16.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10c0/8967e1f4e2cc40f79b7e080b4582b9a8c5ee36ffb46041dccb20e6461161adf69f843b43067b4a375de926a2cd669157e29a29578191def399dd5ef89a1b5203
+  languageName: node
+  linkType: hard
+
+"resolve@patch:resolve@npm%3A^1.22.1#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:
+    is-core-module: "npm:^2.16.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10c0/52a4e505bbfc7925ac8f4cd91fd8c4e096b6a89728b9f46861d3b405ac9a1ccf4dcbf8befb4e89a2e11370dacd0160918163885cbc669369590f2f31f4c58939
+  languageName: node
+  linkType: hard
+
 "responselike@npm:^2.0.0":
   version: 2.0.1
   resolution: "responselike@npm:2.0.1"
@@ -27325,7 +28308,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.7.2":
+"semver@npm:^7.6.2, semver@npm:^7.7.2":
   version: 7.7.2
   resolution: "semver@npm:7.7.2"
   bin:
@@ -27860,6 +28843,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook@npm:^9.1.6":
+  version: 9.1.6
+  resolution: "storybook@npm:9.1.6"
+  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/19b27eb988781d67ad49d010fe7c5cf57ace168cc3414492819d43fc5d79a0c5551030409031dace02febdf804d0c5e357a868f4c90f1a7f35728eeb8c511b91
+  languageName: node
+  linkType: hard
+
 "stream-head@npm:^3.0.0":
   version: 3.0.0
   resolution: "stream-head@npm:3.0.0"
@@ -28021,6 +29031,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-bom@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-bom@npm:3.0.0"
+  checksum: 10c0/51201f50e021ef16672593d7434ca239441b7b760e905d9f33df6e4f3954ff54ec0e0a06f100d028af0982d6f25c35cd5cda2ce34eaebccd0250b8befb90d8f1
+  languageName: node
+  linkType: hard
+
 "strip-dirs@npm:^2.0.0":
   version: 2.1.0
   resolution: "strip-dirs@npm:2.1.0"
@@ -28046,6 +29063,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"
@@ -28162,6 +29186,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styled-components@npm:^6.1.15":
+  version: 6.1.19
+  resolution: "styled-components@npm:6.1.19"
+  dependencies:
+    "@emotion/is-prop-valid": "npm:1.2.2"
+    "@emotion/unitless": "npm:0.8.1"
+    "@types/stylis": "npm:4.2.5"
+    css-to-react-native: "npm:3.2.0"
+    csstype: "npm:3.1.3"
+    postcss: "npm:8.4.49"
+    shallowequal: "npm:1.1.0"
+    stylis: "npm:4.3.2"
+    tslib: "npm:2.6.2"
+  peerDependencies:
+    react: ">= 16.8.0"
+    react-dom: ">= 16.8.0"
+  checksum: 10c0/8d20427a5debe54bfa3b55f79af2a3577551ed7f1d1cd34df986b73fd01ac519f9081b7737cc1f76e12fbc483fa50551e55be0bc984296e623cc6a2364697cd8
+  languageName: node
+  linkType: hard
+
 "stylis@npm:4.3.2":
   version: 4.3.2
   resolution: "stylis@npm:4.3.2"
@@ -28210,6 +29254,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-preserve-symlinks-flag@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "supports-preserve-symlinks-flag@npm:1.0.0"
+  checksum: 10c0/6c4032340701a9950865f7ae8ef38578d8d7053f5e10518076e6554a9381fa91bd9c6850193695c141f32b21f979c985db07265a758867bac95de05f7d8aeb39
+  languageName: node
+  linkType: hard
+
 "swagger-jsdoc@npm:^6.2.8":
   version: 6.2.8
   resolution: "swagger-jsdoc@npm:6.2.8"
@@ -28541,7 +29592,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:^1.0.6":
+"tiny-invariant@npm:^1.0.6, tiny-invariant@npm:^1.3.3":
   version: 1.3.3
   resolution: "tiny-invariant@npm:1.3.3"
   checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a
@@ -28803,7 +29854,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-api-utils@npm:^2.0.0, ts-api-utils@npm:^2.0.1":
+"ts-api-utils@npm:^2.0.0, ts-api-utils@npm:^2.0.1, ts-api-utils@npm:^2.1.0":
   version: 2.1.0
   resolution: "ts-api-utils@npm:2.1.0"
   peerDependencies:
@@ -28823,7 +29874,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-dedent@npm:^2.2.0":
+"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
   version: 2.2.0
   resolution: "ts-dedent@npm:2.2.0"
   checksum: 10c0/175adea838468cc2ff7d5e97f970dcb798bbcb623f29c6088cb21aa2880d207c5784be81ab1741f56b9ac37840cbaba0c0d79f7f8b67ffe61c02634cafa5c303
@@ -28844,6 +29895,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsconfig-paths@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "tsconfig-paths@npm:4.2.0"
+  dependencies:
+    json5: "npm:^2.2.2"
+    minimist: "npm:^1.2.6"
+    strip-bom: "npm:^3.0.0"
+  checksum: 10c0/09a5877402d082bb1134930c10249edeebc0211f36150c35e1c542e5b91f1047b1ccf7da1e59babca1ef1f014c525510f4f870de7c9bda470c73bb4e2721b3ea
+  languageName: node
+  linkType: hard
+
 "tsdown@npm:^0.12.9":
   version: 0.12.9
   resolution: "tsdown@npm:0.12.9"
@@ -29178,6 +30240,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
+
 "unified@npm:^11.0.0, unified@npm:^11.0.5":
   version: 11.0.5
   resolution: "unified@npm:11.0.5"
@@ -29367,6 +30436,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
+
 "unzip-crx-3@npm:^0.2.0":
   version: 0.2.0
   resolution: "unzip-crx-3@npm:0.2.0"
@@ -29911,6 +30990,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
+
 "whatwg-encoding@npm:^3.1.1":
   version: 3.1.1
   resolution: "whatwg-encoding@npm:3.1.1"
@@ -30368,6 +31454,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
+
 "youtube-video-element@npm:^1.6.1":
   version: 1.6.2
   resolution: "youtube-video-element@npm:1.6.2"