diff --git a/package.json b/package.json
index 122c894..ca03ef5 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "start": "cd packages/demo && npm run start"
+    "start": "npm run build:props && cd packages/demo && npm run start",
+    "build:props": "node ./scripts/build_props.mjs"
   },
   "workspaces": [
     "packages/*"
@@ -12,7 +13,12 @@
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "eslint-config-psfe": "1.0.5",
-    "husky": "^8.0.2"
+    "husky": "^8.0.2",
+    "@babel/core": "^7.19.1",
+    "@babel/helper-plugin-utils": "^7.20.2",
+    "@babel/parser": "^7.21.2",
+    "babel-plugin-jsx": "^1.2.0",
+    "es-dirname": "^0.1.0"
   },
   "dependencies": {
     "core-js": "^3.25.1",
diff --git a/packages/demo/index.scss b/packages/demo/index.scss
index f866dbd..5796069 100644
--- a/packages/demo/index.scss
+++ b/packages/demo/index.scss
@@ -22,5 +22,29 @@ html,
   height: 0;
 }
 
+.pivot-props-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-family: Arial, sans-serif;
+  font-size: 18px;
+  th,
+  td {
+    padding: 18px 0;
+    text-align: center;
+  }
+  th {
+    background-color: var(--semi-color-bg-0);
+    font-weight: bold;
+    width: auto;
+    border: 2px solid var(--semi-color-border);
+  }
 
+  td {
+    width: auto;
+    border: 2px solid var(--semi-color-border);
+  }
 
+  tr {
+    background-color: var(--semi-color-bg-0);
+  }
+}
diff --git a/packages/demo/loaders/index.js b/packages/demo/loaders/index.js
index b691249..bc351f7 100644
--- a/packages/demo/loaders/index.js
+++ b/packages/demo/loaders/index.js
@@ -38,7 +38,7 @@ module.exports = function loader(source) {
   const CodeBlockReg = /<CodeBlock(.*)>([\n\r\s\S]*?)<\/CodeBlock>/g;
   const H1Reg = /# (\w+)/;
   // eslint-disable-next-line prefer-destructuring
-  const component = H1Reg.exec(sourceCode)[1];
+  const component = H1Reg.exec(sourceCode) && H1Reg.exec(sourceCode)[1];
   let m;
   let importComponentsList = '';
   while ((m = CodeBlockReg.exec(newSource))) {
diff --git a/packages/demo/src/components/Button/index.mdx b/packages/demo/src/components/Button/index.mdx
index 63fb2a0..5fff583 100644
--- a/packages/demo/src/components/Button/index.mdx
+++ b/packages/demo/src/components/Button/index.mdx
@@ -1,3 +1,5 @@
+import Props from './props.mdx';
+
 # Button
 
 <div className="title">普通样式</div>
@@ -46,3 +48,5 @@
 <CodeBlock line={'5-1009'}>
   <Loading />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Button/props.mdx b/packages/demo/src/components/Button/props.mdx
new file mode 100644
index 0000000..5d0fcec
--- /dev/null
+++ b/packages/demo/src/components/Button/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"按钮默认插槽","default":"undefined"},{"key":"style","value":": React.CSSProperties & ButtonCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"onClick","value":": React.MouseEventHandler<HTMLButtonElement>","optional":true,"version":"1.0.0","description":"点击事件","default":"undefined"},{"key":"type","value":": 'primary' | 'default' | 'text' | 'link'","optional":true,"version":"1.0.0","description":"按钮类型","default":"'default'"},{"key":"size","value":": 'small' | 'middle' | 'large'","optional":true,"version":"1.0.0","description":"按钮是否禁用","default":"'middle'"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"按钮尺寸","default":"false"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"按钮是否正在加载状态","default":"false"},{"key":"debounce","value":": number | {\n  delay: number;\n  immediate: boolean;\n}","optional":true,"version":"1.0.0","description":"按钮是否防抖，可选择是否立即执行","default":"0"},{"key":"delay","value":": number"},{"key":"immediate","value":": boolean"},{"key":"throttle","value":": number | {\n  delay: number;\n  immediate: boolean;\n}","optional":true,"version":"1.0.0","description":"按钮是否节流","default":"false"},{"key":"delay","value":": number"},{"key":"immediate","value":": boolean"}]
+
## API 列表
+
<Table name='button' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Card/index.mdx b/packages/demo/src/components/Card/index.mdx
index df78168..62aa369 100644
--- a/packages/demo/src/components/Card/index.mdx
+++ b/packages/demo/src/components/Card/index.mdx
@@ -1,5 +1,6 @@
 import Actions from './svg/index.tsx';
 import More from './svg/tab.tsx';
+import Props from './props.mdx';
 
 # Card
 
@@ -105,3 +106,5 @@ import More from './svg/tab.tsx';
 <CodeBlock line={'5-7'}>
   <Loading />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Card/props.mdx b/packages/demo/src/components/Card/props.mdx
new file mode 100644
index 0000000..fb995bf
--- /dev/null
+++ b/packages/demo/src/components/Card/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties & CardCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"size","value":": 'small' | 'normal'","optional":true,"version":"1.0.0","description":"自定义大小","default":"undefined"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"卡片内容是否加载","default":"normal"},{"key":"title","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片标题","default":"undefined"},{"key":"actions","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片底部的操作组","default":"undefined"},{"key":"bordered","value":": boolean","optional":true,"version":"1.0.0","description":"是否有边框","default":"true"},{"key":"extra","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片右上角标签","default":"undefined"},{"key":"time","value":": string","optional":true,"version":"1.0.0","description":"时间标签","default":"undefined"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"内容","default":"undefined"},{"key":"cover","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"封面","default":"undefined"},{"key":"boradius","value":": boolean","optional":true,"version":"1.0.0","description":"边框角","default":"true"},{"key":"Grid","value":": boolean","optional":true,"version":"1.0.0","description":"栅格","default":"false"},{"key":"avatar","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"头像","default":"true"}]
+
## API 列表
+
<Table name='card' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Draggable/index.mdx b/packages/demo/src/components/Draggable/index.mdx
index 1192e45..1a98b86 100644
--- a/packages/demo/src/components/Draggable/index.mdx
+++ b/packages/demo/src/components/Draggable/index.mdx
@@ -1,3 +1,5 @@
+import Props from './props.mdx';
+
 # Draggable 拖拽
 
 一个轻量级，高性能的用于 React 的可扩展拖放组件。
@@ -71,3 +73,5 @@
 <CodeBlock style={{ flexWrap: 'nowrap' }}>
   <MultipleContainer />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Draggable/props.mdx b/packages/demo/src/components/Draggable/props.mdx
new file mode 100644
index 0000000..cd634ef
--- /dev/null
+++ b/packages/demo/src/components/Draggable/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"列表子项默认插槽","default":"undefined"},{"key":"index","value":": number","optional":true,"version":"1.0.0","description":"列表子项索引值","default":"undefined"},{"key":"top","value":": number","optional":true,"version":"1.0.0","description":"拖动元素相对定位的top偏移值","default":"undefined"},{"key":"left","value":": number","optional":true,"version":"1.0.0","description":"拖动元素相对定位的left偏移值","default":"undefined"}]
+
## API 列表
+
<Table name='draggable' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Icon/index.mdx b/packages/demo/src/components/Icon/index.mdx
index 3fa4d06..bd6fa7d 100644
--- a/packages/demo/src/components/Icon/index.mdx
+++ b/packages/demo/src/components/Icon/index.mdx
@@ -1,31 +1,35 @@
+import Props from './props.mdx';
+
 # Icon
 
 <div className="title">基本用法</div>
 <CodeBlock line={'5-7'}>
-  <IconList/>
+  <IconList />
 </CodeBlock>
 
 <div className="title">主题样式</div>
 <CodeBlock line={'5-7'}>
-  <Theme/>
+  <Theme />
 </CodeBlock>
 
 <div className="title">定义颜色和透明度</div>
 <CodeBlock line={'5-7'}>
-  <Color/>
+  <Color />
 </CodeBlock>
 
 <div className="title">尺寸</div>
 <CodeBlock line={'5-7'}>
-  <Size/>
+  <Size />
 </CodeBlock>
 
 <div className="title">自定义样式与旋转</div>
 <CodeBlock line={'5-7'}>
-  <Style/>
+  <Style />
 </CodeBlock>
 
 <div className="title">CDN引入</div>
 <CodeBlock line={'5-7'}>
-  <CDN/>
-</CodeBlock>
\ No newline at end of file
+  <CDN />
+</CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Icon/props.mdx b/packages/demo/src/components/Icon/props.mdx
new file mode 100644
index 0000000..2c224a9
--- /dev/null
+++ b/packages/demo/src/components/Icon/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"theme","value":": 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger'","optional":true,"version":"1.0.0","description":"图标类型","default":"'primary'"},{"key":"size","value":": string","optional":true,"version":"1.0.0","description":"图标尺寸","default":"'16'"},{"key":"color","value":": string","optional":true,"version":"1.0.0","description":"图标颜色","default":"'#212529'"},{"key":"icon","value":": string","optional":true,"version":"1.0.0","description":"图标来源","default":"undefined"},{"key":"ossIcon","value":": string","optional":true,"version":"1.0.0","description":"Pivot","default":"undefined"},{"key":"url","value":": string","optional":true,"version":"1.0.0","description":"自定义导入的icon链接","default":"undefined"},{"key":"rotate","value":": boolean","optional":true,"version":"1.0.0","description":"是否旋转","default":"false"}]
+
## API 列表
+
<Table name='icon' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Input/index.mdx b/packages/demo/src/components/Input/index.mdx
index 151e6d7..add0745 100644
--- a/packages/demo/src/components/Input/index.mdx
+++ b/packages/demo/src/components/Input/index.mdx
@@ -1,21 +1,25 @@
+import Props from './props.mdx';
+
 # Input
 
 <div className="title">基本用法</div>
 <CodeBlock line={'5-7'}>
-  <Base/>
+  <Base />
 </CodeBlock>
 
 <div className="title">输入框尺寸</div>
 <CodeBlock line={'5-7'}>
-  <Size/>
+  <Size />
 </CodeBlock>
 
 <div className="title">固定前缀和后缀</div>
 <CodeBlock line={'5-7'}>
-  <Prepend/>
+  <Prepend />
 </CodeBlock>
 
 <div className="title">密码框</div>
 <CodeBlock line={'5-7'}>
-  <Password/>
+  <Password />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Input/props.mdx b/packages/demo/src/components/Input/props.mdx
new file mode 100644
index 0000000..e3e0490
--- /dev/null
+++ b/packages/demo/src/components/Input/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"是否禁用","default":"false"},{"key":"size","value":": InputSize","optional":true,"version":"1.0.0","description":"图标尺寸","default":"'16'"},{"key":"onChange","value":": (e: ChangeEvent<HTMLInputElement>) => void","optional":true,"version":"1.0.0","description":"input内容修改时的回调","default":"undefined"},{"key":"icon","value":": string | React.ReactNode","optional":true,"version":"1.0.0","description":"右侧悬浮图标","default":"undefined"},{"key":"prepend","value":": string","optional":true,"version":"1.0.0","description":"固定前缀","default":"undefined"},{"key":"append","value":": string","optional":true,"version":"1.0.0","description":"固定后缀","default":"undefined"},{"key":"onClick","value":": any","optional":true,"version":"1.0.0","description":"点击输入框的回调","default":"undefined"},{"key":"iconOnClick","value":": any","optional":true,"version":"1.0.0","description":"点击图标的回调","default":"undefined"},{"key":"value","value":": string","optional":true,"version":"1.0.0","description":"输入框的值，单向绑定","default":"undefined"}]
+
## API 列表
+
<Table name='input' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Popover/index.mdx b/packages/demo/src/components/Popover/index.mdx
index 925fdd2..e871fd6 100644
--- a/packages/demo/src/components/Popover/index.mdx
+++ b/packages/demo/src/components/Popover/index.mdx
@@ -1,10 +1,14 @@
+import Props from './props.mdx';
+
 # Popover
 
 <div className="title">基本用法</div>
 <CodeBlock line={'5-7'}>
-  <Base/>
+  <Base />
 </CodeBlock>
 <div className="title">设置触发popover的条件</div>
 <CodeBlock line={'5-7'}>
-  <Trigger/>
+  <Trigger />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Popover/props.mdx b/packages/demo/src/components/Popover/props.mdx
new file mode 100644
index 0000000..b668a85
--- /dev/null
+++ b/packages/demo/src/components/Popover/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactElement","version":"1.0.0","description":"触发popover的内容","default":"undefined"},{"key":"content","value":": string | React.ReactNode","optional":true,"version":"1.0.0","description":"popover的内容","default":"undefined"},{"key":"placement","value":": PlaceType","optional":true,"version":"1.0.0","description":"设置popover的位置","default":"undefined"},{"key":"popoverClass","value":": string","optional":true,"version":"1.0.0","description":"为popover添加类名","default":"undefined"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"popover是否可用","default":"false"},{"key":"arrowShow","value":": boolean","optional":true,"version":"1.0.0","description":"是否显示箭头","default":"true"},{"key":"triggerType","value":": 'hover' | 'click'","optional":true,"version":"1.0.0","description":"触发popover的方式","default":"'hover'"}]
+
## API 列表
+
<Table name='popover' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Skeleton/index.mdx b/packages/demo/src/components/Skeleton/index.mdx
index bc0b6fe..ffab3b8 100644
--- a/packages/demo/src/components/Skeleton/index.mdx
+++ b/packages/demo/src/components/Skeleton/index.mdx
@@ -1,22 +1,26 @@
+import Props from './props.mdx';
+
 # skeleton
 
 <div className="title">普通样式</div>
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px"}}></Skeleton>
+  <Skeleton style={{ width: '380px' }}></Skeleton>
 </CodeBlock>
 <div className="title">带标题</div>
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px"}} title={true}></Skeleton>
+  <Skeleton style={{ width: '380px' }} title={true}></Skeleton>
 </CodeBlock>
 <div className="title">带头像</div>
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px"}} avatar={true}></Skeleton>
+  <Skeleton style={{ width: '380px' }} avatar={true}></Skeleton>
 </CodeBlock>
 <div className="title">块状</div>
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px",height:"90px"}} brick={true}></Skeleton>
+  <Skeleton style={{ width: '380px', height: '90px' }} brick={true}></Skeleton>
 </CodeBlock>
 <div className="title">静态</div>
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px",'--skeleton-active':'false'}}></Skeleton>
-</CodeBlock>
\ No newline at end of file
+  <Skeleton style={{ width: '380px', '--skeleton-active': 'false' }}></Skeleton>
+</CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Skeleton/props.mdx b/packages/demo/src/components/Skeleton/props.mdx
new file mode 100644
index 0000000..590805b
--- /dev/null
+++ b/packages/demo/src/components/Skeleton/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties & CardCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"active","value":": boolean","optional":true,"version":"1.0.0","description":"是否展示动画效果","default":"false"},{"key":"avatar","value":": boolean","optional":true,"version":"1.0.0","description":"头像占位","default":"false"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"是否加载","default":"undefined"},{"key":"row","value":": number","optional":true,"version":"1.0.0","description":"自定义条数","default":"4"},{"key":"title","value":": boolean","optional":true,"version":"1.0.0","description":"标题","default":"false"},{"key":"brick","value":": boolean","optional":true,"version":"1.0.0","description":"块状","default":"false"}]
+
## API 列表
+
<Table name='skeleton' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/table.tsx b/packages/demo/src/components/table.tsx
new file mode 100644
index 0000000..9b15675
--- /dev/null
+++ b/packages/demo/src/components/table.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+interface ITableProps {
+  params: any[];
+  name: string;
+}
+const Table: React.FC<ITableProps> = (props) => {
+  const { params, name } = props;
+  return (
+    <table className="pivot-props-table">
+      <thead>
+        <tr>
+          <th>参数名称</th>
+          <th>参数类型</th>
+          <th>是否必选</th>
+          <th>默认值</th>
+          <th>备注</th>
+          <th>版本支持</th>
+        </tr>
+      </thead>
+      <tbody>
+        {params.map((param) => {
+          return (
+            <tr>
+              <td>{param.key}</td>
+              <td>{param.value}</td>
+              <td>{param.optional ? '❌' : '✅'}</td>
+              <td>{param.default}</td>
+              <td>{param.description}</td>
+              <td>{param.version}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;
diff --git a/packages/demo/webpack.config.js b/packages/demo/webpack.config.js
index 2c63483..3b94046 100644
--- a/packages/demo/webpack.config.js
+++ b/packages/demo/webpack.config.js
@@ -21,20 +21,12 @@ module.exports = {
   },
   module: {
     rules: [
-      // {
-      //   test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
-      //   use: 'babel-loader',
-      // },
       {
         test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
         oneOf: [
           {
             resourceQuery: /code/, // code后缀，导入为字符串处理
-            use: [
-              {
-                loader: 'raw-loader',
-              },
-            ],
+            type: 'asset/source',
           },
           {
             use: 'babel-loader', // 导入为正常ts，tsx文件
diff --git a/packages/design-props/components/draggable.ts b/packages/design-props/components/draggable.ts
index f14dc8f..8024325 100644
--- a/packages/design-props/components/draggable.ts
+++ b/packages/design-props/components/draggable.ts
@@ -33,3 +33,30 @@ export interface DraggableItemProps extends PivotDesignProps {
    */
   left?: number;
 }
+// test
+export interface DraggableProps extends PivotDesignProps {
+  /**
+   * @version 1.0.0
+   * @description 列表子项默认插槽
+   * @default undefined
+   */
+  children?: React.ReactNode;
+  /**
+   * @version 1.0.0
+   * @description 列表子项索引值
+   * @default undefined
+   */
+  index?: number;
+  /**
+   * @version 1.0.0
+   * @description 拖动元素相对定位的top偏移值
+   * @default undefined
+   */
+  top?: number;
+  /**
+   * @version 1.0.0
+   * @description 拖动元素相对定位的left偏移值
+   * @default undefined
+   */
+  left?: number;
+}
diff --git a/packages/design/theme/global.scss b/packages/design/theme/global.scss
index f19f4cf..05474cd 100644
--- a/packages/design/theme/global.scss
+++ b/packages/design/theme/global.scss
@@ -26,6 +26,8 @@ body .semi-always-light {
   --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
   --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
   --semi-color-primary: rgba(var(--semi-brand-5), 1);
+  --semi-color-primary-dark: rgba(var(--semi-brand-0), 1);
+
   --semi-color-success: rgba(var(--semi-green-5), 1);
   --semi-color-warning: rgba(var(--semi-orange-5), 1);
   --semi-color-info-active: rgba(var(--semi-blue-7), 1);
@@ -123,6 +125,7 @@ body .semi-always-dark {
   --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
   --semi-color-primary: rgba(var(--semi-brand-5), 1);
   --semi-color-success: rgba(var(--semi-green-5), 1);
+  --semi-color-primary-dark: rgba(var(--semi-brand-0), 1);
   --semi-color-warning: rgba(var(--semi-orange-5), 1);
   --semi-color-info-active: rgba(var(--semi-blue-7), 1);
   --semi-color-link-active: rgba(var(--semi-blue-7), 1);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0034a62..849a8b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,9 +4,14 @@ importers:
 
   .:
     specifiers:
+      '@babel/core': ^7.19.1
+      '@babel/helper-plugin-utils': ^7.20.2
+      '@babel/parser': ^7.21.2
       '@commitlint/cli': ^17.3.0
       '@commitlint/config-conventional': ^17.3.0
+      babel-plugin-jsx: ^1.2.0
       core-js: ^3.25.1
+      es-dirname: ^0.1.0
       eslint-config-psfe: 1.0.5
       gsap: ^3.12.2
       husky: ^8.0.2
@@ -14,8 +19,13 @@ importers:
       core-js: 3.25.5
       gsap: 3.12.2
     devDependencies:
+      '@babel/core': 7.19.3
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/parser': 7.22.7
       '@commitlint/cli': 17.3.0
       '@commitlint/config-conventional': 17.3.0
+      babel-plugin-jsx: 1.2.0
+      es-dirname: 0.1.0
       eslint-config-psfe: 1.0.5_un26p26khajv6r2p2m4qierg4a
       husky: 8.0.2
 
@@ -281,7 +291,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.1
@@ -359,6 +369,11 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/helper-plugin-utils/7.22.5:
+    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helper-remap-async-to-generator/7.18.9_@babel+core@7.19.3:
     resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==}
     engines: {node: '>=6.9.0'}
@@ -463,6 +478,14 @@ packages:
       '@babel/types': 7.19.4
     dev: true
 
+  /@babel/parser/7.22.7:
+    resolution: {integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.19.3:
     resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
     engines: {node: '>=6.9.0'}
@@ -470,7 +493,7 @@ packages:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.18.9_@babel+core@7.19.3:
@@ -480,7 +503,7 @@ packages:
       '@babel/core': ^7.13.0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
       '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.19.3
     dev: true
@@ -493,7 +516,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.19.3
       '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.19.3
     transitivePeerDependencies:
@@ -508,7 +531,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -521,7 +544,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -534,7 +557,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -545,7 +568,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -556,7 +579,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -567,7 +590,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.19.3
     dev: true
 
@@ -578,7 +601,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -589,7 +612,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.19.3
     dev: true
 
@@ -602,7 +625,7 @@ packages:
       '@babel/compat-data': 7.19.4
       '@babel/core': 7.19.3
       '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.19.3
       '@babel/plugin-transform-parameters': 7.18.8_@babel+core@7.19.3
     dev: true
@@ -614,7 +637,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -625,7 +648,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
       '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.19.3
     dev: true
@@ -638,7 +661,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -652,7 +675,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-annotate-as-pure': 7.18.6
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -666,7 +689,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.19.3:
@@ -675,7 +698,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.19.3:
@@ -684,7 +707,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.19.3:
@@ -694,7 +717,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.19.3:
@@ -703,7 +726,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.19.3:
@@ -712,7 +735,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-import-assertions/7.18.6_@babel+core@7.19.3:
@@ -722,7 +745,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.19.3:
@@ -731,7 +754,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.19.3:
@@ -741,7 +764,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.19.3:
@@ -750,7 +773,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.19.3:
@@ -759,7 +782,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.19.3:
@@ -768,7 +791,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.19.3:
@@ -777,7 +800,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.19.3:
@@ -786,7 +809,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.19.3:
@@ -795,7 +818,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.19.3:
@@ -805,7 +828,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.19.3:
@@ -815,7 +838,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.19.3:
@@ -825,7 +848,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-arrow-functions/7.18.6_@babel+core@7.19.3:
@@ -835,7 +858,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-async-to-generator/7.18.6_@babel+core@7.19.3:
@@ -846,7 +869,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -859,7 +882,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-block-scoping/7.19.4_@babel+core@7.19.3:
@@ -869,7 +892,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-classes/7.19.0_@babel+core@7.19.3:
@@ -884,7 +907,7 @@ packages:
       '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-function-name': 7.19.0
       '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-replace-supers': 7.19.1
       '@babel/helper-split-export-declaration': 7.18.6
       globals: 11.12.0
@@ -899,7 +922,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-destructuring/7.19.4_@babel+core@7.19.3:
@@ -909,7 +932,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-dotall-regex/7.18.6_@babel+core@7.19.3:
@@ -920,7 +943,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-duplicate-keys/7.18.9_@babel+core@7.19.3:
@@ -930,7 +953,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-exponentiation-operator/7.18.6_@babel+core@7.19.3:
@@ -941,7 +964,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-builder-binary-assignment-operator-visitor': 7.18.9
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-for-of/7.18.8_@babel+core@7.19.3:
@@ -951,7 +974,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-function-name/7.18.9_@babel+core@7.19.3:
@@ -963,7 +986,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.3
       '@babel/helper-function-name': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-literals/7.18.9_@babel+core@7.19.3:
@@ -973,7 +996,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-member-expression-literals/7.18.6_@babel+core@7.19.3:
@@ -983,7 +1006,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-modules-amd/7.18.6_@babel+core@7.19.3:
@@ -994,7 +1017,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
       - supports-color
@@ -1008,7 +1031,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-simple-access': 7.19.4
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
@@ -1024,7 +1047,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-validator-identifier': 7.19.1
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
@@ -1039,7 +1062,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1052,7 +1075,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-new-target/7.18.6_@babel+core@7.19.3:
@@ -1062,7 +1085,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-object-super/7.18.6_@babel+core@7.19.3:
@@ -1072,7 +1095,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-replace-supers': 7.19.1
     transitivePeerDependencies:
       - supports-color
@@ -1085,7 +1108,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-property-literals/7.18.6_@babel+core@7.19.3:
@@ -1095,7 +1118,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-react-display-name/7.18.6_@babel+core@7.19.3:
@@ -1105,7 +1128,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-react-jsx-development/7.18.6_@babel+core@7.19.3:
@@ -1127,7 +1150,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-annotate-as-pure': 7.18.6
       '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.19.3
       '@babel/types': 7.19.4
     dev: true
@@ -1140,7 +1163,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-regenerator/7.18.6_@babel+core@7.19.3:
@@ -1150,7 +1173,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       regenerator-transform: 0.15.0
     dev: true
 
@@ -1161,7 +1184,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-shorthand-properties/7.18.6_@babel+core@7.19.3:
@@ -1171,7 +1194,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-spread/7.19.0_@babel+core@7.19.3:
@@ -1181,7 +1204,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
     dev: true
 
@@ -1192,7 +1215,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-template-literals/7.18.9_@babel+core@7.19.3:
@@ -1202,7 +1225,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-typeof-symbol/7.18.9_@babel+core@7.19.3:
@@ -1212,7 +1235,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-typescript/7.19.3_@babel+core@7.19.3:
@@ -1223,7 +1246,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -1236,7 +1259,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-unicode-regex/7.18.6_@babel+core@7.19.3:
@@ -1247,7 +1270,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/preset-env/7.19.4_@babel+core@7.19.3:
@@ -1342,7 +1365,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.19.3
       '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.19.3
       '@babel/types': 7.19.4
@@ -1396,7 +1419,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.19.4
+      '@babel/parser': 7.22.7
       '@babel/types': 7.19.4
     dev: true
 
@@ -1410,7 +1433,7 @@ packages:
       '@babel/helper-function-name': 7.19.0
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.19.4
+      '@babel/parser': 7.22.7
       '@babel/types': 7.19.4
       debug: 4.3.4
       globals: 11.12.0
@@ -2437,6 +2460,12 @@ packages:
       object.assign: 4.1.4
     dev: true
 
+  /babel-plugin-jsx/1.2.0:
+    resolution: {integrity: sha512-eYeaFsGl0BecHxx5dowVCeGZPXJJZNTyFwyNgf9RFU9Ya3WkpRPZow+kOzWZ++RerDiKpcUGfYFp6ovWCWzXcg==}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
   /babel-plugin-polyfill-corejs2/0.3.3_@babel+core@7.19.3:
     resolution: {integrity: sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==}
     peerDependencies:
@@ -3161,6 +3190,10 @@ packages:
       unbox-primitive: 1.0.2
     dev: true
 
+  /es-dirname/0.1.0:
+    resolution: {integrity: sha512-tcTj4pVFXe5EdiHCybjynDTlvkwuNN6JCg9+5BVB+n9qQoMyWOtxpREoL7rGO3sCIAX55Y6CYZi4s1c30uxvPg==}
+    dev: true
+
   /es-module-lexer/0.9.3:
     resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
 
diff --git a/scripts/build_props.mjs b/scripts/build_props.mjs
new file mode 100644
index 0000000..57113fb
--- /dev/null
+++ b/scripts/build_props.mjs
@@ -0,0 +1,135 @@
+import { readdirSync, readFileSync, writeFileSync } from "fs";
+import { resolve, extname } from "path";
+import { transformFromAstSync } from "@babel/core";
+import { declare } from "@babel/helper-plugin-utils";
+import { parse } from "@babel/parser";
+import dirname from "es-dirname";
+
+const __dirname = dirname();
+const ComponentsPath = resolve(
+  __dirname,
+  "../packages/design-props/components"
+);
+const ConpopnentDocsPath = resolve(
+  __dirname,
+  "../packages/demo/src/components"
+);
+
+const firstUpper = ([letter, ...rest]) => letter.toUpperCase() + rest.join("");
+const COMMENT_REG = /\@(\w+)\s+([\S^\\]+)/g;
+const inherit = [];
+
+function parseComment(comment) {
+  if (!comment) return {}
+  const r = {};
+  let m;
+  while ((m = COMMENT_REG.exec(comment))) {
+    r[m[1]] = m[2];
+  }
+  return r;
+}
+
+function h(componentMdxPath, component) {
+  const sourceCode = readFileSync(componentMdxPath, { encoding: "utf-8" });
+  const ast = parse(sourceCode, {
+    sourceType: "unambiguous",
+    plugins: ["typescript"],
+  });
+  const { code } = transformFromAstSync(ast, sourceCode, {
+    plugins: [[generatorPropsPlugin, { name: component }]],
+  });
+  return code;
+}
+/**
+ * @param {*} name 
+ * @param {*} docs 
+ */
+function generatePropsMd(name, docs) {
+  const DocsPath = resolve(ConpopnentDocsPath, `./${firstUpper(name)}/props.mdx`)
+  let table = `import Table from '../table.tsx'\n\rexport const params = ${JSON.stringify(docs)}\n\r## API 列表\n\r<Table name='${name}' params={params}/>`
+  // let table = `|参数名称|参数类型|是否可选|默认值|备注|版本支持|\n\r|:---|:---:|:---:|:---:|:---:|---:|\n\r`
+  // for (let doc of docs) {
+  //   const { key, value, optional, version, description, default: defaultVal } = doc;
+  //   table += `|${key}|${value}|${optional ? '可选' : '必选'}|${defaultVal}| ${description}| ${version}|\n\r`
+  // }
+  writeFileSync(DocsPath, table)
+}
+const generatorPropsPlugin = declare((api, options, dirname) => {
+  api.assertVersion(7);
+  return {
+    pre: (file) => {
+      // 用于存储props对象Array<{...}>
+      file.docs = [];
+    },
+    visitor: {
+      TSInterfaceDeclaration: (path, scope) => {
+        if (options.name === "index") {
+          path.traverse({
+            TSPropertySignature: (p) => {
+              // console.log(p.get('typeAnnotation').toString(),p.get('optional').node);
+              const key = p.get("key").toString();
+              const value = p.get("typeAnnotation").toString();
+              const optional = p.get("optional").node;
+              const commentStr = p.get("leadingComments")[0].node.value;
+              const comments = parseComment(commentStr);
+              inherit.push({ key, value, optional, ...comments });
+            },
+          });
+          return;
+        }
+        // ComponentProps
+        if (path.get("id").toString() === `${firstUpper(options.name)}Props`) {
+          // 匹配是否继承
+          for (let extend of path.get("extends")) {
+            if (extend.toString() === "PivotDesignProps") {
+              /**
+               * ```json
+    * {
+    *   key: 'className',
+    *   value: ': string',
+    *   optional: true,
+    *   comment: [version: '1.0.0', description: '自定义类名']
+               * },
+               * ```
+               */
+              scope.file.docs.push(...inherit);
+              break;
+            }
+          }
+          // 解析自己的props
+          // console.log(options.name, scope.file.docs);
+          path.traverse({
+            TSPropertySignature: (p) => {
+              // console.log(p.get('typeAnnotation').toString(),p.get('optional').node);
+              const key = p.get("key").toString();
+              const value = p.get("typeAnnotation").toString();
+              const optional = p.get("optional").node;
+              const commentStr = p.get("leadingComments").length > 0 && p.get("leadingComments")[0].node.value;
+              const comments = parseComment(commentStr);
+              scope.file.docs.push({ key, value, optional, ...comments });
+            },
+          });
+        }
+      },
+    },
+    post(file) {
+      if (options.name === 'index') return
+      console.log(file.docs);
+      // todo:create md table 使用自己的自定义组件吧
+      generatePropsMd(options.name, file.docs)
+    },
+  };
+});
+
+
+
+const components = readdirSync(ComponentsPath).filter((dir) => extname(dir));
+h(resolve(ComponentsPath, `./index.ts`), "index");
+
+for (let componentPath of components) {
+  if (componentPath === "index.ts") continue;
+  const componentMdxPath = resolve(ComponentsPath, `./${componentPath}`);
+  const component = componentPath.split(".")[0];
+  // if (component === "index") continue;
+  h(componentMdxPath, component);
+}