@anker-in/headless-ui 0.0.27-alpha.0 → 0.0.27-alpha.2

package/dist/esm/stories/heading.stories.d.ts

@@ -30,6 +30,7 @@ declare const meta: {
                 type: "select";
             };
             options: string[];
+            description: string;
             table: {
                 defaultValue: {
                     summary: string;
@@ -71,8 +72,8 @@ declare const meta: {
     };
     args: {
         as: "h1";
-        size: 5;
-        weight: "normal";
+        size: 1;
+        weight: "bold";
         align: "left";
     };
 };

package/dist/esm/stories/heading.stories.js

@@ -1,2 +1,2 @@
-import{Fragment as a,jsx as o,jsxs as r}from"react/jsx-runtime";import{Heading as e}from"../components/index.js";import"react";const t={title:"Typography/Heading",component:e,parameters:{layout:"padded",docs:{description:{component:"Heading \u7EC4\u4EF6, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:[1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE5\u52301\uFF0C\u8D8A\u6765\u8D8A\u5C0F",table:{defaultValue:{summary:"5"}}},weight:{control:{type:"select"},options:["light","normal","medium","bold"],table:{defaultValue:{summary:"normal"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:5,weight:"normal",align:"left"}};var s=t;const p={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog."}},d={render:()=>r(a,{children:[o(e,{size:1,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:2,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:3,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:4,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})};export{d as All,p as Default,s as default};
+import{Fragment as a,jsx as o,jsxs as r}from"react/jsx-runtime";import{Heading as e}from"../components/index.js";import"react";const t={title:"Typography/Heading",component:e,parameters:{layout:"padded",docs:{description:{component:"Heading \u7EC4\u4EF6, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837"}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},options:[1,2,3,4,5],description:"\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE5\u52301\uFF0C\u8D8A\u6765\u8D8A\u5C0F",table:{defaultValue:{summary:"5"}}},weight:{control:{type:"select"},options:["medium","semibold","bold","extraBold","black"],description:"\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700",table:{defaultValue:{summary:"black"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},options:["h1","h2","h3","h4","h5","h6"],description:"html \u6807\u7B7E\u7C7B\u578B",table:{defaultValue:{summary:"h1"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{as:"h1",size:1,weight:"bold",align:"left"}};var n=t;const d={args:{as:"h1",children:" The quick brown fox jumps over the lazy dog."}},p={render:()=>r(a,{children:[o(e,{size:1,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:2,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:3,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:4,children:"The quick brown fox jumps over the lazy dog."}),o(e,{size:5,children:"The quick brown fox jumps over the lazy dog."})]})};export{p as All,d as Default,n as default};
 //# sourceMappingURL=heading.stories.js.map

package/dist/esm/stories/heading.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/heading.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Heading',\n  component: Heading,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: 'Heading \u7EC4\u4EF6, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: [1, 2, 3, 4, 5],\n      description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE5\u52301\uFF0C\u8D8A\u6765\u8D8A\u5C0F',\n      table: {\n        defaultValue: { summary: '5' },\n      },\n    },\n    weight: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'bold'],\n      table: {\n        defaultValue: { summary: 'normal' },\n      },\n    },\n    align: {\n      control: {\n        type: 'select',\n      },\n      options: ['left', 'center', 'right'],\n      table: {\n        defaultValue: { summary: undefined },\n      },\n    },\n    color: {\n      control: {\n        type: 'color',\n      },\n    },\n    as: {\n      control: {\n        type: 'select',\n      },\n      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      description: 'html \u6807\u7B7E\u7C7B\u578B',\n      table: {\n        defaultValue: { summary: 'h1' },\n      },\n    },\n    html: {\n      type: 'string',\n      description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n    },\n  },\n  args: {\n    as: 'h1',\n    size: 5,\n    weight: 'normal',\n    align: 'left',\n  },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    as: 'h1',\n    children: ' The quick brown fox jumps over the lazy dog.',\n  },\n}\n\nexport const All: Story = {\n  render: () => (\n    <>\n      <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n    </>\n  ),\n}\n"],
-  "mappings": "AAuFI,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBArFJ,OAAS,WAAAC,MAAe,yBACxB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,qJACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,EAAG,EAAG,EAAG,EAAG,CAAC,EACvB,YAAa,6EACb,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,MAAM,EAC7C,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,SACR,MAAO,MACT,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,+CACZ,CACF,EAEaC,EAAa,CACxB,OAAQ,IACNL,EAAAF,EAAA,CACE,UAAAC,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Heading } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Heading',\n  component: Heading,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: 'Heading \u7EC4\u4EF6, \u57FA\u672C\u548Ctext \u7EC4\u4EF6\u4E00\u6837\uFF0C\u53EA\u662F\u9ED8\u8BA4\u7684\u6807\u7B7E\u7C7B\u578B\u4E0D\u4E00\u6837',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: [1, 2, 3, 4, 5],\n      description: '\u6587\u672C\u5C3A\u5BF8\uFF0C\u4ECE5\u52301\uFF0C\u8D8A\u6765\u8D8A\u5C0F',\n      table: {\n        defaultValue: { summary: '5' },\n      },\n    },\n    weight: {\n      control: {\n        type: 'select',\n      },\n      options: ['medium', 'semibold', 'bold', 'extraBold', 'black'],\n      description: '\u6587\u672C\u7C97\u7EC6, \u4ECE500\u5230900 \uFF0C\u9ED8\u8BA4\u662F700',\n      table: {\n        defaultValue: { summary: 'black' },\n      },\n    },\n    align: {\n      control: {\n        type: 'select',\n      },\n      options: ['left', 'center', 'right'],\n      table: {\n        defaultValue: { summary: undefined },\n      },\n    },\n    color: {\n      control: {\n        type: 'color',\n      },\n    },\n    as: {\n      control: {\n        type: 'select',\n      },\n      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      description: 'html \u6807\u7B7E\u7C7B\u578B',\n      table: {\n        defaultValue: { summary: 'h1' },\n      },\n    },\n    html: {\n      type: 'string',\n      description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n    },\n  },\n  args: {\n    as: 'h1',\n    size: 1,\n    weight: 'bold',\n    align: 'left',\n  },\n} satisfies Meta<typeof Heading>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    as: 'h1',\n    children: ' The quick brown fox jumps over the lazy dog.',\n  },\n}\n\nexport const All: Story = {\n  render: () => (\n    <>\n      <Heading size={1}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={2}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={3}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={4}>The quick brown fox jumps over the lazy dog.</Heading>\n      <Heading size={5}>The quick brown fox jumps over the lazy dog.</Heading>\n    </>\n  ),\n}\n"],
+  "mappings": "AAwFI,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAtFJ,OAAS,WAAAC,MAAe,yBACxB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,qBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,qJACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,EAAG,EAAG,EAAG,EAAG,CAAC,EACvB,YAAa,6EACb,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,SAAU,WAAY,OAAQ,YAAa,OAAO,EAC5D,YAAa,2EACb,MAAO,CACL,aAAc,CAAE,QAAS,OAAQ,CACnC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,KAAM,KAAM,KAAM,KAAM,KAAM,IAAI,EAC5C,YAAa,gCACb,MAAO,CACL,aAAc,CAAE,QAAS,IAAK,CAChC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,GAAI,KACJ,KAAM,EACN,OAAQ,OACR,MAAO,MACT,CACF,EAEA,IAAOE,EAAQD,EAIR,MAAME,EAAiB,CAC5B,KAAM,CACJ,GAAI,KACJ,SAAU,+CACZ,CACF,EAEaC,EAAa,CACxB,OAAQ,IACNL,EAAAF,EAAA,CACE,UAAAC,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,EAC9DF,EAACE,EAAA,CAAQ,KAAM,EAAG,wDAA4C,GAChE,CAEJ",
   "names": ["Fragment", "jsx", "jsxs", "Heading", "meta", "heading_stories_default", "Default", "All"]
 }

package/dist/esm/stories/text.stories.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as e}from"../components/index.js";import"react";const r={title:"Typography/Text",component:e,parameters:{layout:"padded",docs:{description:{component:"\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9."}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898",options:[1,2,3],table:{defaultValue:{summary:"3"}}},weight:{control:{type:"select"},options:["light","normal","medium","bold"],table:{defaultValue:{summary:"normal"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"normal",align:"left",html:"",as:"p"}};var n=r;const s={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"normal"}},p={render(){return o("div",{className:"flex flex-col",children:[t(e,{size:1,children:"The quick brown fox jumps over the lazy dog."}),t(e,{size:2,children:"The quick brown fox jumps over the lazy dog."}),t(e,{size:3,children:"The quick brown fox jumps over the lazy dog."})]})}},c={render(){return o("div",{className:"flex flex-col",children:[t(e,{weight:"light",children:"The quick brown fox jumps over the lazy dog."}),t(e,{weight:"normal",children:"The quick brown fox jumps over the lazy dog."}),t(e,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),t(e,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."})]})}},f={render(){return t(e,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as e}from"../components/index.js";import"react";const r={title:"Typography/Text",component:e,parameters:{layout:"padded",docs:{description:{component:"\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9."}}},tags:["autodocs"],argTypes:{size:{control:{type:"select"},description:"\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898",options:[1,2,3],table:{defaultValue:{summary:"3"}}},weight:{control:{type:"select"},options:["light","normal","medium","semibold","bold"],table:{defaultValue:{summary:"normal"}}},align:{control:{type:"select"},options:["left","center","right"],table:{defaultValue:{summary:void 0}}},color:{control:{type:"color"}},as:{control:{type:"select"},description:"html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C",options:["div","label","p","span"],table:{defaultValue:{summary:"span"}}},html:{type:"string",description:"\u76F8\u5F53\u4E8E dangerouslySetInnerHTML"}},args:{size:3,weight:"normal",align:"left",html:"",as:"p"}};var n=r;const s={args:{children:" The quick brown fox jumps over the lazy dog.",size:3,weight:"normal"}},p={render(){return o("div",{className:"flex flex-col",children:[t(e,{size:1,children:"The quick brown fox jumps over the lazy dog."}),t(e,{size:2,children:"The quick brown fox jumps over the lazy dog."}),t(e,{size:3,children:"The quick brown fox jumps over the lazy dog."})]})}},c={render(){return o("div",{className:"flex flex-col",children:[t(e,{weight:"light",children:"The quick brown fox jumps over the lazy dog."}),t(e,{weight:"normal",children:"The quick brown fox jumps over the lazy dog."}),t(e,{weight:"medium",children:"The quick brown fox jumps over the lazy dog."}),t(e,{weight:"bold",children:"The quick brown fox jumps over the lazy dog."})]})}},d={render(){return t(e,{html:`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(
       to right, 
       #00ff00,   /* \u7EFF\u8272 */
       #00ff99,   /* \u6D45\u7EFF\u8272 */
@@ -6,5 +6,5 @@ import{jsx as t,jsxs as o}from"react/jsx-runtime";import{Text as e}from"../compo
       #0099ff,   /* \u6D45\u84DD\u8272 */
       #8000ff,   /* \u7D2B\u8272 */
       #ff00ff    /* \u7C89\u8272 */
-    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`})}};export{s as Default,f as Html,p as Sizes,n as default,c as weight};
+    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`})}};export{s as Default,d as Html,p as Sizes,n as default,c as weight};
 //# sourceMappingURL=text.stories.js.map

package/dist/esm/stories/text.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/text.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Text',\n  component: Text,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: '\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      description: '\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898',\n      options: [1, 2, 3],\n      table: {\n        defaultValue: { summary: '3' },\n      },\n    },\n    weight: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'bold'],\n      table: {\n        defaultValue: { summary: 'normal' },\n      },\n    },\n    align: {\n      control: {\n        type: 'select',\n      },\n      options: ['left', 'center', 'right'],\n      table: {\n        defaultValue: { summary: undefined },\n      },\n    },\n    color: {\n      control: {\n        type: 'color',\n      },\n    },\n    as: {\n      control: {\n        type: 'select',\n      },\n      description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n      options: ['div', 'label', 'p', 'span'],\n      table: {\n        defaultValue: { summary: 'span' },\n      },\n    },\n    html: {\n      type: 'string',\n      description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n    },\n  },\n  args: {\n    size: 3,\n    weight: 'normal',\n    align: 'left',\n    html: '',\n    as: 'p',\n  },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    children: ' The quick brown fox jumps over the lazy dog.',\n    size: 3,\n    weight: 'normal',\n  },\n}\n\nexport const Sizes: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\nexport const weight: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\n\n\nexport const Html: Story = {\n  render() {\n    return (\n      <Text\n        html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n      to right, \n      #00ff00,   /* \u7EFF\u8272 */\n      #00ff99,   /* \u6D45\u7EFF\u8272 */\n      #00ffff,   /* \u9752\u8272 */\n      #0099ff,   /* \u6D45\u84DD\u8272 */\n      #8000ff,   /* \u7D2B\u8272 */\n      #ff00ff    /* \u7C89\u8272 */\n    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n      />\n    )\n  },\n}\n"],
-  "mappings": "AAyFM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvFN,OAAS,QAAAC,MAAY,yBACrB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,6EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,+FACb,QAAS,CAAC,EAAG,EAAG,CAAC,EACjB,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,MAAM,EAC7C,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,sFACb,QAAS,CAAC,MAAO,QAAS,IAAK,MAAM,EACrC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,KAAM,EACN,OAAQ,SACR,MAAO,OACP,KAAM,GACN,GAAI,GACN,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaC,EAAe,CAC1B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaK,EAAgB,CAC3B,QAAS,CACP,OACEN,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,OAAO,QAAQ,wDAA4C,EACjEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,OAAO,wDAA4C,GAClE,CAEJ,CACF,EAIaM,EAAc,CACzB,QAAS,CACP,OACER,EAACE,EAAA,CACC,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGASR,CAEJ,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Text } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Typography/Text',\n  component: Text,\n  parameters: {\n    layout: 'padded',\n    docs: {\n      description: {\n        component: '\u6587\u672C\u7EC4\u4EF6, \u7528\u4E8E\u5C55\u793A\u6587\u672C\u5185\u5BB9.',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: {\n        type: 'select',\n      },\n      description: '\u6587\u672C\u5C3A\u5BF8 3: \u6B63\u6587, 2: \u8865\u5145\u6587\u672C, 1: \u5C0F\u6807\u9898',\n      options: [1, 2, 3],\n      table: {\n        defaultValue: { summary: '3' },\n      },\n    },\n    weight: {\n      control: {\n        type: 'select',\n      },\n      options: ['light', 'normal', 'medium', 'semibold', 'bold'],\n      table: {\n        defaultValue: { summary: 'normal' },\n      },\n    },\n    align: {\n      control: {\n        type: 'select',\n      },\n      options: ['left', 'center', 'right'],\n      table: {\n        defaultValue: { summary: undefined },\n      },\n    },\n    color: {\n      control: {\n        type: 'color',\n      },\n    },\n    as: {\n      control: {\n        type: 'select',\n      },\n      description: 'html \u6807\u7B7E\u7C7B\u578B, div\u548Cp\u4F1A\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C',\n      options: ['div', 'label', 'p', 'span'],\n      table: {\n        defaultValue: { summary: 'span' },\n      },\n    },\n    html: {\n      type: 'string',\n      description: '\u76F8\u5F53\u4E8E dangerouslySetInnerHTML',\n    },\n  },\n  args: {\n    size: 3,\n    weight: 'normal',\n    align: 'left',\n    html: '',\n    as: 'p',\n  },\n} satisfies Meta<typeof Text>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    children: ' The quick brown fox jumps over the lazy dog.',\n    size: 3,\n    weight: 'normal',\n  },\n}\n\nexport const Sizes: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text size={1}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={2}>The quick brown fox jumps over the lazy dog.</Text>\n        <Text size={3}>The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\nexport const weight: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col\">\n        <Text weight=\"light\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"normal\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"medium\">The quick brown fox jumps over the lazy dog.</Text>\n        <Text weight=\"bold\">The quick brown fox jumps over the lazy dog.</Text>\n      </div>\n    )\n  },\n}\n\n\n\nexport const Html: Story = {\n  render() {\n    return (\n      <Text\n        html={`The <span style='font-size:20px;font:bold; -webkit-background-clip: text; background: linear-gradient(\n      to right, \n      #00ff00,   /* \u7EFF\u8272 */\n      #00ff99,   /* \u6D45\u7EFF\u8272 */\n      #00ffff,   /* \u9752\u8272 */\n      #0099ff,   /* \u6D45\u84DD\u8272 */\n      #8000ff,   /* \u7D2B\u8272 */\n      #ff00ff    /* \u7C89\u8272 */\n    );color: transparent;background-clip: text;'>quick brown fox</span> <br/> jumps over the lazy dog.`}\n      />\n    )\n  },\n}\n"],
+  "mappings": "AAyFM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAvFN,OAAS,QAAAC,MAAY,yBACrB,MAAkB,QAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,KAAM,CACJ,YAAa,CACX,UAAW,6EACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,SAAU,CACR,KAAM,CACJ,QAAS,CACP,KAAM,QACR,EACA,YAAa,+FACb,QAAS,CAAC,EAAG,EAAG,CAAC,EACjB,MAAO,CACL,aAAc,CAAE,QAAS,GAAI,CAC/B,CACF,EACA,OAAQ,CACN,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,QAAS,SAAU,SAAU,WAAY,MAAM,EACzD,MAAO,CACL,aAAc,CAAE,QAAS,QAAS,CACpC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,QAAS,CAAC,OAAQ,SAAU,OAAO,EACnC,MAAO,CACL,aAAc,CAAE,QAAS,MAAU,CACrC,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,OACR,CACF,EACA,GAAI,CACF,QAAS,CACP,KAAM,QACR,EACA,YAAa,sFACb,QAAS,CAAC,MAAO,QAAS,IAAK,MAAM,EACrC,MAAO,CACL,aAAc,CAAE,QAAS,MAAO,CAClC,CACF,EACA,KAAM,CACJ,KAAM,SACN,YAAa,4CACf,CACF,EACA,KAAM,CACJ,KAAM,EACN,OAAQ,SACR,MAAO,OACP,KAAM,GACN,GAAI,GACN,CACF,EAEA,IAAOE,EAAQD,EAGR,MAAME,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaC,EAAe,CAC1B,QAAS,CACP,OACEL,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,EAC3DF,EAACE,EAAA,CAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaK,EAAgB,CAC3B,QAAS,CACP,OACEN,EAAC,OAAI,UAAU,gBACb,UAAAD,EAACE,EAAA,CAAK,OAAO,QAAQ,wDAA4C,EACjEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,SAAS,wDAA4C,EAClEF,EAACE,EAAA,CAAK,OAAO,OAAO,wDAA4C,GAClE,CAEJ,CACF,EAIaM,EAAc,CACzB,QAAS,CACP,OACER,EAACE,EAAA,CACC,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGASR,CAEJ,CACF",
   "names": ["jsx", "jsxs", "Text", "meta", "text_stories_default", "Default", "Sizes", "weight", "Html"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "0.0.27-alpha.0",
+  "version": "0.0.27-alpha.2",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -32,7 +32,6 @@
   },
   "description": "",
   "files": [
-    "src/**",
     "dist/**",
     "*.css",
     "README.md",
@@ -41,7 +40,7 @@
   "sideEffects": false,
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "GPLv3",
   "devDependencies": {
     "@babel/preset-env": "^7.24.6",
     "@babel/preset-react": "^7.24.6",

package/style.css

@@ -423,11 +423,6 @@ video {
     max-width: var(--breakpoint-xl);
   }
 }
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -741,6 +736,9 @@ video {
 .max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
+.w-0 {
+  width: 0px;
+}
 .w-2 {
   width: 0.5rem;
 }
@@ -762,9 +760,6 @@ video {
 .w-full {
   width: 100%;
 }
-.min-w-0 {
-  min-width: 0px;
-}
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -981,10 +976,6 @@ video {
 .bg-bg-2 {
   background-color: var(--bg-color-2);
 }
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
 .bg-black\/80 {
   background-color: rgb(0 0 0 / 0.8);
 }
@@ -1251,22 +1242,22 @@ video {
   line-height: 1.5rem;
 }
 .text-heading-1 {
-  font-size: 24px;
+  font-size: 14px;
   line-height: 120%;
   letter-spacing: -0.48px;
 }
 .text-heading-2 {
-  font-size: 32px;
+  font-size: 20px;
   line-height: 120%;
   letter-spacing: -0.64px;
 }
 .text-heading-3 {
-  font-size: 40px;
+  font-size: 24px;
   line-height: 120%;
   letter-spacing: -0.8px;
 }
 .text-heading-5 {
-  font-size: 56px;
+  font-size: 40px;
   line-height: 120%;
   letter-spacing: -1.12px;
 }
@@ -1297,9 +1288,15 @@ video {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-black {
+  font-weight: 900;
+}
 .font-bold {
   font-weight: 700;
 }
+.font-extrabold {
+  font-weight: 800;
+}
 .font-light {
   font-weight: 300;
 }
@@ -1334,10 +1331,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(134 134 140 / var(--tw-text-opacity, 1));
 }
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
-}
 .text-btn-primary {
   color: var(--btn-bg-color);
 }
@@ -1356,6 +1349,9 @@ video {
 .text-info-quaternary {
   color: var(--info-quaternary-color);
 }
+.text-info-white {
+  color: var(--info-white-color);
+}
 .text-lines-1 {
   color: var(--line-color-1);
 }
@@ -1371,10 +1367,6 @@ video {
 .text-primary {
   color: var(--brand-color-1);
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
 .underline {
   text-decoration-line: underline;
 }
@@ -1626,48 +1618,91 @@ video {
   opacity: 0.5;
 }
 @media (min-width: var(--breakpoint-sm)) {
-  .sm\:mx-8 {
+  .tablet\:mx-8 {
     margin-left: 2rem;
     margin-right: 2rem;
   }
-  .sm\:flex-row {
+  .tablet\:flex-row {
     flex-direction: row;
   }
-  .sm\:justify-end {
+  .tablet\:justify-end {
     justify-content: flex-end;
   }
-  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  .tablet\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(0.5rem * var(--tw-space-x-reverse));
     margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
-  .sm\:rounded-lg {
+  .tablet\:rounded-lg {
     border-radius: 0.5rem;
   }
-  .sm\:text-left {
+  .tablet\:text-left {
     text-align: left;
   }
 }
 @media (min-width: var(--breakpoint-md)) {
-  .md\:mx-16 {
+  .laptop\:-bottom-\[40px\] {
+    bottom: -40px;
+  }
+  .laptop\:bottom-\[40px\] {
+    bottom: 40px;
+  }
+  .laptop\:mx-16 {
     margin-left: 4rem;
     margin-right: 4rem;
   }
-  .md\:gap-4 {
+  .laptop\:w-\[30px\] {
+    width: 30px;
+  }
+  .laptop\:gap-4 {
     gap: 1rem;
   }
 }
 @media (min-width: var(--breakpoint-lg)) {
-  .lg\:mx-16 {
+  .desktop\:mx-16 {
     margin-left: 4rem;
     margin-right: 4rem;
   }
+  .desktop\:text-\[36px\] {
+    font-size: 36px;
+  }
+  .desktop\:text-\[48px\] {
+    font-size: 48px;
+  }
 }
 @media (min-width: var(--breakpoint-xl)) {
-  .xl\:mx-auto {
+  .lg-desktop\:mx-auto {
     margin-left: auto;
     margin-right: auto;
   }
+  .lg-desktop\:p-6 {
+    padding: 1.5rem;
+  }
+  .lg-desktop\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  .lg-desktop\:pb-\[32px\] {
+    padding-bottom: 32px;
+  }
+  .lg-desktop\:pt-\[32px\] {
+    padding-top: 32px;
+  }
+  .lg-desktop\:text-\[16px\] {
+    font-size: 16px;
+  }
+  .lg-desktop\:text-\[24px\] {
+    font-size: 24px;
+  }
+  .lg-desktop\:text-\[32px\] {
+    font-size: 32px;
+  }
+  .lg-desktop\:text-\[48px\] {
+    font-size: 48px;
+  }
+  .lg-desktop\:text-\[64px\] {
+    font-size: 64px;
+  }
 }
 .\[\&\>\*\]\:\!invisible>* {
   visibility: hidden !important;

package/src/biz-components/BrandEquity/BrandEquity.tsx

@@ -1,77 +0,0 @@
-import React from 'react'
-
-import { cn } from '../../helpers/utils'
-import Picture from '../../components/picture'
-import { withStyles } from '../../shared/Styles.js'
-import type { ComponentCommonProps } from '../../types/props.js'
-
-export interface BrandEquityItem {
-  icon?: React.ReactNode
-  title: string
-  description: string
-  avatarList?: string[]
-}
-
-export interface BrandEquityProps extends ComponentCommonProps {
-  items: BrandEquityItem[]
-  itemShape?: 'round' | 'square'
-  className?: string
-  theme?: 'light' | 'dark'
-}
-
-const BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', style = '', className = '' }) => {
-  return (
-    <div className={cn('brand-equity-wrapper w-full', className)}>
-      <div
-        className={cn(
-          'grid gap-3 px-4',
-          'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-          'md:gap-4',
-          'lg:px-[140px] xl:px-[175px] 2xl:px-[268px]'
-        )}
-      >
-        {items.map((item, index) => (
-          <div
-            key={index}
-            className={cn(
-              'brand-equity-item',
-              'bg-white p-4 flex flex-col',
-              'lg:p-6',
-              'gap-12 lg:gap-16',
-              itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'
-            )}
-          >
-            <div className="flex justify-between items-center gap-3">
-              <h3 className="text-sm font-semibold text-[#1D1D1F] leading-[1.2] tracking-[-0.02em] 2xl:text-lg">
-                {item.title}
-              </h3>
-              {item.avatarList?.length ? (
-                <div className="flex -space-x-2">
-                  {item.avatarList.map((avatarUrl: string, index: number) => (
-                    <div
-                      key={index}
-                      className={cn(
-                        'size-[30px] rounded-full border-2 border-white overflow-hidden',
-                        'relative inline-block',
-                        'xl:size-[36px]'
-                      )}
-                    >
-                      <Picture source={avatarUrl} className="w-full h-full object-cover" />
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-[#1D1D1F]">{item.icon}</span>
-              )}
-            </div>
-            <p className="font-bold text-xl text-[#1D1D1F] leading-[1.2] tracking-[-0.04em] 2xl:text-2xl">
-              {item.description}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export default withStyles(BrandEquity)

package/src/biz-components/BrandEquity/index.ts

@@ -1 +0,0 @@
-export { default } from './BrandEquity.js'

package/src/biz-components/Category/index.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import { cn } from '../../helpers/utils'
-import Picture from '../../components/picture'
-
-export interface CategoryItem {
-  /** 产品图片*/
-  img: string
-  title: string
-}
-
-export interface CategoryProps {
-  products: CategoryItem[]
-  className?: string
-  /** 主题色*/
-  theme?: 'light' | 'dark'
-  /** 卡片形状 */
-  shape?: 'round' | 'square'
-}
-
-const Category: React.FC<CategoryProps> = ({
-  className = '',
-  shape = 'square',
-  products = [],
-}) => {
-  return (
-    <>
-      <div className={cn('w-full', className)}>
-        <div className={cn('flex overflow-hidden', 'md:px-[140px] lg:px-[268px]')}>
-          <div className={cn('w-full flex', 'gap-3 md:gap-4 overflow-x-auto overflow-y-hidden')}>
-            {products?.map((item, index) => {
-              return (
-                <div
-                  key={index}
-                  className={cn(
-                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden',
-                    'md:min-w-[205px] md:max-w-[205px] lg:min-w-[264px] lg:max-w-[264px] md:p-6 lg:p-8',
-                    shape === 'round' ? 'rounded-[16px]' : 'rounded-none'
-                  )}
-                >
-                  <Picture
-                    className="w-full object-cover"
-                    source={item?.img}
-                  />
-                  <p className="flex-1 text-sm text-center font-semibold lg:text-lg">
-                    {item?.title}
-                  </p>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default Category

package/src/biz-components/Evaluate/index.tsx

@@ -1,85 +0,0 @@
-import React from 'react'
-import { cn } from '../../helpers/utils'
-import Picture from '../../components/picture'
-import { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar'
-
-export interface EvaluateItem {
-  /** 产品图片*/
-  img: string
-  title: string
-  subTitle: string
-  description: string
-  avatar?: string
-}
-
-export interface EvaluateProps {
-  products: EvaluateItem[]
-  className?: string
-  /** 主题色*/
-  theme?: 'light' | 'dark'
-  /** 形状 */
-  shape?: 'round' | 'square'
-}
-
-const Evaluate: React.FC<EvaluateProps> = ({
-  className = '',
-  shape = 'square',
-  products = [],
-}) => {
-  return (
-    <>
-      <div className={cn('w-full', className)}>
-        <div className={cn('flex overflow-hidden', 'md:px-[140px] lg:px-[268px]')}>
-          <div className={cn('w-full flex', 'gap-3 md:gap-4 overflow-x-auto overflow-y-hidden')}>
-            {products?.map((item, index) => {
-              return (
-                <div
-                  key={index}
-                  className={cn(
-                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden',
-                    'md:min-w-[316px] md:max-w-[316px] lg:min-w-[404px] lg:max-w-[404px] lg:pt-4 lg:px-6 lg:pb-6',
-                    shape === 'round' ? 'rounded-2xl' : 'rounded-none'
-                  )}
-                >
-                  <div className={cn('mb-8 w-full flex justify-between md:mb-11 lg:mb-16')}>
-                    <div className="flex-1">
-                      <h4 className="text-sm font-semibold md:text-lg">{item?.title}</h4>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                        <path
-                          d="M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z"
-                          fill="#F77234"
-                        />
-                      </svg>
-                    </div>
-                    <div className="size-10 overflow-hidden lg:size-12">
-                      <Avatar className="w-full h-full">
-                        <AvatarImage src={item?.avatar} />
-                        <AvatarFallback>{item?.title}</AvatarFallback>
-                      </Avatar>
-                    </div>
-                  </div>
-                  <p className="flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] lg:text-2xl">
-                    {item?.description || ''}
-                  </p>
-                  <div className={cn('mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden', shape === 'round' ? 'rounded-[8px]' : 'rounded-none')}>
-                    <div className="flex items-center mr-3 size-12 md:size-16 lg:size-20">
-                      <Picture
-                        className="w-full object-cover"
-                        source={item?.img}
-                      />
-                    </div>
-                    <p className="flex-1 text-sm font-semibold line-clamp-2 lg:text-lg">
-                      {item?.subTitle || ''}
-                    </p>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default Evaluate