npm - @anker-in/headless-ui - Versions diffs - 0.0.27-alpha.16 → 0.0.27-alpha.18 - Mend

@anker-in/headless-ui 0.0.27-alpha.16 → 0.0.27-alpha.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/dist/cjs/stories/marquee.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/marquee.stories.tsx"],
-  "sourcesContent": ["import React, { type ComponentType } from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee'\n\nconst meta = {\n  title: 'Biz Components/Marquee',\n  component: Marquee,\n  subcomponents: {\n    MarqueeList: MarqueeList as ComponentType<unknown>,\n    MarqueeImageContent: MarqueeImageContent as ComponentType<unknown>,\n    MarqueeTextContent: MarqueeTextContent as ComponentType<unknown>,\n  },\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: '\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ereact-fast-marquee<br>\u53EF\u4F7F\u7528react-fast-marquee\u6240\u6709props',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  args: {\n    speed: 50,\n  },\n  argTypes: {\n    direction: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['left', 'right', 'up', 'down'],\n      description: '\u8DD1\u9A6C\u706F\u6ED1\u52A8\u7684\u65B9\u5411',\n      table: {\n        defaultValue: {\n          summary: 'left',\n        },\n      },\n    },\n    speed: {\n      control: {\n        type: 'number',\n      },\n      description: '\u901F\u5EA6\uFF0C\u5355\u4F4D\uFF1A\u50CF\u7D20/\u79D2',\n    }\n  }\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317\" />\n        <MarqueeTextContent text=\"\u8DD1\u9A6C\u706F\u7EC4\u4EF6\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317\" />\n        <MarqueeTextContent className='text-nowrap' text=\"\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n}\n\nexport const MarqueeImage: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n}\n\nexport const MarqueeText: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeTextContent className='w-40' text=\"47%<br>R&D Employees\" />\n        <MarqueeTextContent className='w-40' text=\"100 Million<br>Global Customers\" />\n        <MarqueeTextContent className='w-60' text=\"Pioneering in Charging<br>Technology for 12 Years\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n}\n\nexport const MarqueeDirection: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n  args: {\n    direction: 'right',\n  },\n}"],
+  "sourcesContent": ["import React, { type ComponentType } from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Marquee, MarqueeList, MarqueeImageContent, MarqueeTextContent } from '../biz-components/Marquee'\n\nconst meta = {\n  title: 'Biz Components/Marquee',\n  component: Marquee,\n  subcomponents: {\n    MarqueeList: MarqueeList as ComponentType<unknown>,\n    MarqueeImageContent: MarqueeImageContent as ComponentType<unknown>,\n    MarqueeTextContent: MarqueeTextContent as ComponentType<unknown>,\n  },\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: '\u8DD1\u9A6C\u706FMarquee\uFF0C\u57FA\u4E8Ereact-fast-marquee<br>\u53EF\u4F7F\u7528react-fast-marquee\u6240\u6709props',\n      },\n    },\n  },\n  tags: ['autodocs'],\n  args: {\n    speed: 50,\n  },\n  argTypes: {\n    direction: {\n      control: {\n        type: 'inline-radio',\n      },\n      options: ['left', 'right', 'up', 'down'],\n      description: '\u8DD1\u9A6C\u706F\u6ED1\u52A8\u7684\u65B9\u5411',\n      table: {\n        defaultValue: {\n          summary: 'left',\n        },\n      },\n    },\n    speed: {\n      control: {\n        type: 'number',\n      },\n      description: '\u901F\u5EA6\uFF0C\u5355\u4F4D\uFF1A\u50CF\u7D20/\u79D2',\n    },\n  },\n} satisfies Meta<typeof Marquee>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317\" />\n        <MarqueeTextContent text=\"\u8DD1\u9A6C\u706F\u7EC4\u4EF6\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317\" />\n        <MarqueeTextContent className=\"text-nowrap\" text=\"\u53E6\u4E00\u4E2A\u8DD1\u9A6C\u706F\u7EC4\u4EF6\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n}\n\nexport const MarqueeImage: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n}\n\nexport const MarqueeText: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeTextContent className=\"w-40\" text=\"47%<br>R&D Employees\" />\n        <MarqueeTextContent className=\"w-40\" text=\"100 Million<br>Global Customers\" />\n        <MarqueeTextContent className=\"w-60\" text=\"Pioneering in Charging<br>Technology for 12 Years\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n}\n\nexport const MarqueeDirection: Story = {\n  render: args => (\n    <Marquee {...args}>\n      <MarqueeList>\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_6339.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_224.png?v=1745400317\" />\n        <MarqueeImageContent image=\"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Rectangle_222.png?v=1745400317\" />\n      </MarqueeList>\n    </Marquee>\n  ),\n  args: {\n    direction: 'right',\n  },\n}\n"],
   "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,qBAAAC,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAqDM,IAAAQ,EAAA,6BArDNC,EAA0C,iBAE1CC,EAA8E,qCAE9E,MAAMC,EAAO,CACX,MAAO,yBACP,UAAW,UACX,cAAe,CACb,YAAa,cACb,oBAAqB,sBACrB,mBAAoB,oBACtB,EACA,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW,wHACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,EACjB,KAAM,CACJ,MAAO,EACT,EACA,SAAU,CACR,UAAW,CACT,QAAS,CACP,KAAM,cACR,EACA,QAAS,CAAC,OAAQ,QAAS,KAAM,MAAM,EACvC,YAAa,mDACb,MAAO,CACL,aAAc,CACZ,QAAS,MACX,CACF,CACF,EACA,MAAO,CACL,QAAS,CACP,KAAM,QACR,EACA,YAAa,yDACf,CACF,CACF,EAEA,IAAOL,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,OAAQU,MACN,OAAC,WAAS,GAAGA,EACX,oBAAC,eACC,oBAAC,uBAAoB,MAAM,yFAAyF,KACpH,OAAC,sBAAmB,KAAK,iCAAQ,KACjC,OAAC,uBAAoB,MAAM,wFAAwF,KACnH,OAAC,sBAAmB,UAAU,cAAc,KAAK,mDAAW,KAC5D,OAAC,uBAAoB,MAAM,wFAAwF,GACrH,EACF,CAEJ,EAEaR,EAAsB,CACjC,OAAQQ,MACN,OAAC,WAAS,GAAGA,EACX,oBAAC,eACC,oBAAC,uBAAoB,MAAM,yFAAyF,KACpH,OAAC,uBAAoB,MAAM,wFAAwF,KACnH,OAAC,uBAAoB,MAAM,wFAAwF,GACrH,EACF,CAEJ,EAEaP,EAAqB,CAChC,OAAQO,MACN,OAAC,WAAS,GAAGA,EACX,oBAAC,eACC,oBAAC,sBAAmB,UAAU,OAAO,KAAK,uBAAuB,KACjE,OAAC,sBAAmB,UAAU,OAAO,KAAK,kCAAkC,KAC5E,OAAC,sBAAmB,UAAU,OAAO,KAAK,oDAAoD,GAChG,EACF,CAEJ,EAEaT,EAA0B,CACrC,OAAQS,MACN,OAAC,WAAS,GAAGA,EACX,oBAAC,eACC,oBAAC,uBAAoB,MAAM,yFAAyF,KACpH,OAAC,uBAAoB,MAAM,wFAAwF,KACnH,OAAC,uBAAoB,MAAM,wFAAwF,GACrH,EACF,EAEF,KAAM,CACJ,UAAW,OACb,CACF",
   "names": ["marquee_stories_exports", "__export", "Default", "MarqueeDirection", "MarqueeImage", "MarqueeText", "marquee_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Marquee", "meta", "args"]
 }

package/dist/cjs/stories/mediaplayerBase.stories.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MediaPlayerBase from '../biz-components/MediaPlayerBase';
+declare const meta: Meta<typeof MediaPlayerBase>;
+export default meta;
+type Story = StoryObj<typeof MediaPlayerBase>;
+export declare const Default: Story;

package/dist/cjs/stories/mediaplayerBase.stories.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var f=Object.create;var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var n=(e,t)=>{for(var a in t)r(e,a,{get:t[a],enumerable:!0})},i=(e,t,a,s)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let o of d(t))!c.call(e,o)&&o!==a&&r(e,o,{get:()=>t[o],enumerable:!(s=l(t,o))\|\|s.enumerable});return e};var b=(e,t,a)=>(a=e!=null?f(y(e)):{},i(t\|\|!e\|\|!e.__esModule?r(a,"default",{value:e,enumerable:!0}):a,e)),m=e=>i(r({},"__esModule",{value:!0}),e);var B={};n(B,{Default:()=>g,default:()=>M});module.exports=m(B);var p=b(require("../biz-components/MediaPlayerBase"));const h={title:"Biz-Components/MediaPlayerBase",component:p.default,parameters:{layout:"fullscreen"}};var M=h;const g={args:{title:"Live Charged.",videoTitle:`The World's <span class="text-brand-1">NO.1</span> Mobile Charging Brand*`,img:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/bb4296bf-5436-4998-866d-2665b11e6494_89394f2f67489421c24267fae7fba035.jpg?v=1745399761",btnText:"Watch Video",media:"https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4"}};
2	+ //# sourceMappingURL=mediaplayerBase.stories.js.map

package/dist/cjs/stories/mediaplayerBase.stories.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/mediaplayerBase.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaPlayerBase from '../biz-components/MediaPlayerBase'\n\nconst meta: Meta<typeof MediaPlayerBase> = {\n  title: 'Biz-Components/MediaPlayerBase',\n  component: MediaPlayerBase,\n  parameters: {\n    layout: 'fullscreen',\n  },\n}\n\nexport default meta\ntype Story = StoryObj<typeof MediaPlayerBase>\n\nexport const Default: Story = {\n  args: {\n    title: 'Live Charged.',\n    videoTitle: 'The World\\'s <span class=\"text-brand-1\">NO.1</span> Mobile Charging Brand*',\n    img: 'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/bb4296bf-5436-4998-866d-2665b11e6494_89394f2f67489421c24267fae7fba035.jpg?v=1745399761',\n    btnText: 'Watch Video',\n    media: 'https://cdn.shopify.com/videos/c/o/v/97144231c93943c4aae54f8056b1073b.mp4',\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GACA,IAAAK,EAA4B,gDAE5B,MAAMC,EAAqC,CACzC,MAAO,iCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,CACF,EAEA,IAAOJ,EAAQG,EAGR,MAAMJ,EAAiB,CAC5B,KAAM,CACJ,MAAO,gBACP,WAAY,4EACZ,IAAK,gJACL,QAAS,cACT,MAAO,2EACT,CACF",
+  "names": ["mediaplayerBase_stories_exports", "__export", "Default", "mediaplayerBase_stories_default", "__toCommonJS", "import_MediaPlayerBase", "meta", "MediaPlayerBase"]
+}

package/dist/cjs/stories/mediaplayerMulti.stories.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        (props: Omit<import("../biz-components/MediaPlayerMulti").TestimonialSectionProps, keyof import("../shared/Styles").StylesProps> & Partial<import("../shared/Styles").StylesProps> & {
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Multi: Story;

package/dist/cjs/stories/mediaplayerMulti.stories.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var l=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var d=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},c=(e,t,o,r)=>{if(t&&typeof t=="object"\|\|typeof t=="function")for(let a of m(t))!y.call(e,a)&&a!==o&&s(e,a,{get:()=>t[a],enumerable:!(r=f(t,a))\|\|r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?l(b(e)):{},c(t\|\|!e\|\|!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),p=e=>c(s({},"__esModule",{value:!0}),e);var I={};d(I,{Default:()=>M,Multi:()=>k,default:()=>g});module.exports=p(I);var n=u(require("../biz-components/MediaPlayerMulti"));const i=[{name:"MKBHD",description:"18.2 Million Youtube subscribers",quote:'"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like."',backgroundImage:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110"},{name:"Unbox Therapy",description:"18.2 Million Youtube subscribers",quote:'"I highly recommend the Anker Nano Pro. This truly is a no-brainer."',backgroundImage:"https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094"}],h={title:"Biz-Components/MediaPlayerMulti",component:n.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var g=h;const M={args:{items:i}},k={args:{items:i?.concat(i)}};
2	+ //# sourceMappingURL=mediaplayerMulti.stories.js.map

package/dist/cjs/stories/mediaplayerMulti.stories.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/mediaplayerMulti.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport MediaPlayerMulti from '../biz-components/MediaPlayerMulti'\n\nconst testimonialItems = [\n  {\n    name: 'MKBHD',\n    description: '18.2 Million Youtube subscribers',\n    quote:\n      '\"If efficiency means something to you, then definitely check out Anker, who makes these chargers and cables that I really like.\"',\n    backgroundImage:\n      'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/9b8ef5a9-97c5-4b81-9fdd-1c2805a12702_dca27557ea115cd0c51fa8ee0d7ebd7b.jpg?v=1745464110',\n  },\n  {\n    name: 'Unbox Therapy',\n    description: '18.2 Million Youtube subscribers',\n    quote: '\"I highly recommend the Anker Nano Pro. This truly is a no-brainer.\"',\n    backgroundImage:\n      'https://cdn.shopify.com/s/files/1/0819/5735/5793/files/1dd1b39c-1206-48a5-96ec-1083627f51bb_3a34a11a40cbfb857cec1f91eeeaff29.jpg?v=1745464094',\n  },\n]\n\nconst meta = {\n  title: 'Biz-Components/MediaPlayerMulti',\n  component: MediaPlayerMulti,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof MediaPlayerMulti>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    items: testimonialItems,\n  },\n}\n\nexport const Multi: Story = {\n  args: {\n    items: testimonialItems?.concat(testimonialItems),\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAA6B,iDAE7B,MAAMC,EAAmB,CACvB,CACE,KAAM,QACN,YAAa,mCACb,MACE,mIACF,gBACE,+IACJ,EACA,CACE,KAAM,gBACN,YAAa,mCACb,MAAO,uEACP,gBACE,+IACJ,CACF,EAEMC,EAAO,CACX,MAAO,kCACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAGR,MAAMN,EAAiB,CAC5B,KAAM,CACJ,MAAOK,CACT,CACF,EAEaJ,EAAe,CAC1B,KAAM,CACJ,MAAOI,GAAkB,OAAOA,CAAgB,CAClD,CACF",
+  "names": ["mediaplayerMulti_stories_exports", "__export", "Default", "Multi", "mediaplayerMulti_stories_default", "__toCommonJS", "import_MediaPlayerMulti", "testimonialItems", "meta", "MediaPlayerMulti"]
+}

package/dist/cjs/stories/shelfDisplay.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/shelfDisplay.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ShelfDisplay from '../biz-components/ShelfDisplay'\n\nconst meta = {\n  title: 'Biz-Components/ShelfDisplay',\n  component: ShelfDisplay,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ShelfDisplay>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    products: mockItems,\n    className: 'p-4',\n    primaryButton:\"Learn More\",\n    secondaryButton:\"Shop Now\",\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    products: mockItems,\n    className: 'p-4',\n    shape: 'round',\n    itemShape: 'round',\n    primaryButton:\"Learn More\",\n    secondaryButton:\"Shop Now\",\n  },\n}\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAAyB,6CAEzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EAAY,CAChB,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,CACF,EAEaP,EAAiB,CAC5B,KAAM,CACJ,SAAUO,EACV,UAAW,MACX,cAAc,aACd,gBAAgB,UAClB,CACF,EAEaN,EAAe,CAC1B,KAAM,CACJ,SAAUM,EACV,UAAW,MACX,MAAO,QACP,UAAW,QACX,cAAc,aACd,gBAAgB,UAClB,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ShelfDisplay from '../biz-components/ShelfDisplay'\n\nconst meta = {\n  title: 'Biz-Components/ShelfDisplay',\n  component: ShelfDisplay,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ShelfDisplay>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst mockItems = [\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n  {\n    price: '$1,999.00',\n    basePrice: '$2,999.00',\n    subTitle: 'Fast Charging for 3 Devices',\n    title: 'Anker Prime 27,650mAh Power Bank (250W)',\n    tagItems: ['New', '20% OFF'],\n    img: 'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554',\n  },\n]\n\nexport const Default: Story = {\n  args: {\n    products: mockItems,\n    className: 'p-4',\n    primaryButton: 'Learn More',\n    secondaryButton: 'Shop Now',\n  },\n}\n\nexport const Round: Story = {\n  args: {\n    products: mockItems,\n    className: 'p-4',\n    shape: 'round',\n    itemShape: 'round',\n    primaryButton: 'Learn More',\n    secondaryButton: 'Shop Now',\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAAyB,6CAEzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EAAY,CAChB,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,EACA,CACE,MAAO,YACP,UAAW,YACX,SAAU,8BACV,MAAO,0CACP,SAAU,CAAC,MAAO,SAAS,EAC3B,IAAK,8HACP,CACF,EAEaP,EAAiB,CAC5B,KAAM,CACJ,SAAUO,EACV,UAAW,MACX,cAAe,aACf,gBAAiB,UACnB,CACF,EAEaN,EAAe,CAC1B,KAAM,CACJ,SAAUM,EACV,UAAW,MACX,MAAO,QACP,UAAW,QACX,cAAe,aACf,gBAAiB,UACnB,CACF",
   "names": ["shelfDisplay_stories_exports", "__export", "Default", "Round", "shelfDisplay_stories_default", "__toCommonJS", "import_ShelfDisplay", "meta", "ShelfDisplay", "mockItems"]
 }

package/dist/cjs/stories/skeleton.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(t,o)=>{for(var r in o)l(t,r,{get:o[r],enumerable:!0})},m=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of c(o))!d.call(t,s)&&s!==r&&l(t,s,{get:()=>o[s],enumerable:!(n=i(o,s))||n.enumerable});return t};var y=t=>m(l({},"__esModule",{value:!0}),t);var g={};p(g,{Default:()=>h,Multiple:()=>x,WithText:()=>S,default:()=>u});module.exports=y(g);var e=require("react/jsx-runtime"),a=require("../components/index.js"),b=require("react");const f={title:"Components/Skeleton",component:a.Skeleton,parameters:{layout:"centered",docs:{description:{component:"\u9AA8\u67B6\u5C4F\u7EC4\u4EF6,\u7528\u6765\u5728\u6570\u636E\u52A0\u8F7D\u65F6\u5C55\u793A\u4E00\u4E2A\u5360\u4F4D\u56FE, \u53EF\u4EE5\u5305\u5728dom \u5916\u4F7F\u7528\uFF0C\u901A\u8FC7loading \u63A7\u5236\u663E\u793A\u9690\u85CF, \u4E5F\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u901A\u8FC7\u81EA\u5B9A\u4E49class\u63A7\u5236\u6837\u5F0F, \u7EC4\u5408\u6210\u60F3\u8981\u7684\u5E03\u5C40"}}},tags:["autodocs"]};var u=f;const h={args:{loading:!0,children:(0,e.jsx)("div",{className:"h-14 rounded-3xl overflow-hidden px-4 py-4 w-full",children:"Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates driving."})}},x={render(){return(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center",children:[(0,e.jsxs)("div",{className:"flex w-full justify-between",children:[(0,e.jsx)(a.Skeleton,{className:"size-12 rounded-full"}),(0,e.jsx)(a.Skeleton,{className:"h-12 w-[70%] "})]}),(0,e.jsx)(a.Skeleton,{className:"mt-2 h-40 w-[200px]"})]})}},S={render(){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.Skeleton,{loading:!0,children:"Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers, and downpours, often accompanied by gray skies."}),(0,e.jsx)("hr",{}),(0,e.jsx)(a.Skeleton,{loading:!1,children:"Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers, and downpours, often accompanied by gray skies."})]})}};
+"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(t,o)=>{for(var r in o)l(t,r,{get:o[r],enumerable:!0})},m=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of c(o))!d.call(t,s)&&s!==r&&l(t,s,{get:()=>o[s],enumerable:!(n=i(o,s))||n.enumerable});return t};var f=t=>m(l({},"__esModule",{value:!0}),t);var g={};p(g,{Default:()=>h,Multiple:()=>x,WithText:()=>S,default:()=>u});module.exports=f(g);var e=require("react/jsx-runtime"),a=require("../components/index.js"),b=require("react");const y={title:"Components/Skeleton",component:a.Skeleton,parameters:{layout:"centered",docs:{description:{component:"\u9AA8\u67B6\u5C4F\u7EC4\u4EF6,\u7528\u6765\u5728\u6570\u636E\u52A0\u8F7D\u65F6\u5C55\u793A\u4E00\u4E2A\u5360\u4F4D\u56FE, \u53EF\u4EE5\u5305\u5728dom \u5916\u4F7F\u7528\uFF0C\u901A\u8FC7loading \u63A7\u5236\u663E\u793A\u9690\u85CF, \u4E5F\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u901A\u8FC7\u81EA\u5B9A\u4E49class\u63A7\u5236\u6837\u5F0F, \u7EC4\u5408\u6210\u60F3\u8981\u7684\u5E03\u5C40"}}},tags:["autodocs"]};var u=y;const h={args:{loading:!0,children:(0,e.jsx)("div",{className:"h-14 w-full overflow-hidden rounded-3xl p-4",children:"Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates driving."})}},x={render(){return(0,e.jsxs)("div",{className:"flex flex-col items-center justify-center",children:[(0,e.jsxs)("div",{className:"flex w-full justify-between",children:[(0,e.jsx)(a.Skeleton,{className:"size-12 rounded-full"}),(0,e.jsx)(a.Skeleton,{className:"h-12 w-[70%] "})]}),(0,e.jsx)(a.Skeleton,{className:"mt-2 h-40 w-[200px]"})]})}},S={render(){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(a.Skeleton,{loading:!0,children:"Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers, and downpours, often accompanied by gray skies."}),(0,e.jsx)("hr",{}),(0,e.jsx)(a.Skeleton,{loading:!1,children:"Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers, and downpours, often accompanied by gray skies."})]})}};
 //# sourceMappingURL=skeleton.stories.js.map

package/dist/cjs/stories/skeleton.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/skeleton.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Skeleton } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Components/Skeleton',\n  component: Skeleton,\n  parameters: {\n    layout: 'centered',\n    docs: {\n      description: {\n        component:\n          '\u9AA8\u67B6\u5C4F\u7EC4\u4EF6,\u7528\u6765\u5728\u6570\u636E\u52A0\u8F7D\u65F6\u5C55\u793A\u4E00\u4E2A\u5360\u4F4D\u56FE, \u53EF\u4EE5\u5305\u5728dom \u5916\u4F7F\u7528\uFF0C\u901A\u8FC7loading \u63A7\u5236\u663E\u793A\u9690\u85CF, \u4E5F\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u901A\u8FC7\u81EA\u5B9A\u4E49class\u63A7\u5236\u6837\u5F0F, \u7EC4\u5408\u6210\u60F3\u8981\u7684\u5E03\u5C40',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Skeleton>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    loading: true,\n    children: (\n      <div className=\"h-14 rounded-3xl overflow-hidden px-4 py-4 w-full\">\n        Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates\n        driving.\n      </div>\n    ),\n  },\n}\n\nexport const Multiple: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col items-center justify-center\">\n        <div className=\"flex w-full justify-between\">\n          <Skeleton className=\"size-12 rounded-full\" />\n          <Skeleton className=\"h-12 w-[70%] \" />\n        </div>\n        <Skeleton className=\"mt-2 h-40 w-[200px]\" />\n      </div>\n    )\n  },\n}\n\nexport const WithText: Story = {\n  render() {\n    return (\n      <>\n        <Skeleton loading={true}>\n          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,\n          and downpours, often accompanied by gray skies.\n        </Skeleton>\n        <hr />\n        <Skeleton loading={false}>\n          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,\n          and downpours, often accompanied by gray skies.\n        </Skeleton>\n      </>\n    )\n  },\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,aAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA4BM,IAAAO,EAAA,6BA1BNC,EAAyB,kCACzBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,sBACP,UAAW,WACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UACE,wYACJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAIR,MAAMR,EAAiB,CAC5B,KAAM,CACJ,QAAS,GACT,YACE,OAAC,OAAI,UAAU,oDAAoD,8HAGnE,CAEJ,CACF,EAEaC,EAAkB,CAC7B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,4CACb,qBAAC,OAAI,UAAU,8BACb,oBAAC,YAAS,UAAU,uBAAuB,KAC3C,OAAC,YAAS,UAAU,gBAAgB,GACtC,KACA,OAAC,YAAS,UAAU,sBAAsB,GAC5C,CAEJ,CACF,EAEaC,EAAkB,CAC7B,QAAS,CACP,SACE,oBACE,oBAAC,YAAS,QAAS,GAAM,uKAGzB,KACA,OAAC,OAAG,KACJ,OAAC,YAAS,QAAS,GAAO,uKAG1B,GACF,CAEJ,CACF",
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\n\nimport { Skeleton } from '../components/index.js'\nimport React from 'react'\n\nconst meta = {\n  title: 'Components/Skeleton',\n  component: Skeleton,\n  parameters: {\n    layout: 'centered',\n    docs: {\n      description: {\n        component:\n          '\u9AA8\u67B6\u5C4F\u7EC4\u4EF6,\u7528\u6765\u5728\u6570\u636E\u52A0\u8F7D\u65F6\u5C55\u793A\u4E00\u4E2A\u5360\u4F4D\u56FE, \u53EF\u4EE5\u5305\u5728dom \u5916\u4F7F\u7528\uFF0C\u901A\u8FC7loading \u63A7\u5236\u663E\u793A\u9690\u85CF, \u4E5F\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u901A\u8FC7\u81EA\u5B9A\u4E49class\u63A7\u5236\u6837\u5F0F, \u7EC4\u5408\u6210\u60F3\u8981\u7684\u5E03\u5C40',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Skeleton>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    loading: true,\n    children: (\n      <div className=\"h-14 w-full overflow-hidden rounded-3xl p-4\">\n        Fog creeps across moors, hills, and rivers. It adds an eerie charm to the landscape, but also complicates\n        driving.\n      </div>\n    ),\n  },\n}\n\nexport const Multiple: Story = {\n  render() {\n    return (\n      <div className=\"flex flex-col items-center justify-center\">\n        <div className=\"flex w-full justify-between\">\n          <Skeleton className=\"size-12 rounded-full\" />\n          <Skeleton className=\"h-12 w-[70%] \" />\n        </div>\n        <Skeleton className=\"mt-2 h-40 w-[200px]\" />\n      </div>\n    )\n  },\n}\n\nexport const WithText: Story = {\n  render() {\n    return (\n      <>\n        <Skeleton loading={true}>\n          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,\n          and downpours, often accompanied by gray skies.\n        </Skeleton>\n        <hr />\n        <Skeleton loading={false}>\n          Rainfall is a constant companion. Umbrellas are practically a national accessory. Expect drizzles, showers,\n          and downpours, often accompanied by gray skies.\n        </Skeleton>\n      </>\n    )\n  },\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,aAAAC,EAAA,aAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GA4BM,IAAAO,EAAA,6BA1BNC,EAAyB,kCACzBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,sBACP,UAAW,WACX,WAAY,CACV,OAAQ,WACR,KAAM,CACJ,YAAa,CACX,UACE,wYACJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAIR,MAAMR,EAAiB,CAC5B,KAAM,CACJ,QAAS,GACT,YACE,OAAC,OAAI,UAAU,8CAA8C,8HAG7D,CAEJ,CACF,EAEaC,EAAkB,CAC7B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,4CACb,qBAAC,OAAI,UAAU,8BACb,oBAAC,YAAS,UAAU,uBAAuB,KAC3C,OAAC,YAAS,UAAU,gBAAgB,GACtC,KACA,OAAC,YAAS,UAAU,sBAAsB,GAC5C,CAEJ,CACF,EAEaC,EAAkB,CAC7B,QAAS,CACP,SACE,oBACE,oBAAC,YAAS,QAAS,GAAM,uKAGzB,KACA,OAAC,OAAG,KACJ,OAAC,YAAS,QAAS,GAAO,uKAG1B,GACF,CAEJ,CACF",
   "names": ["skeleton_stories_exports", "__export", "Default", "Multiple", "WithText", "skeleton_stories_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
 }

package/dist/cjs/stories/slogan.stories.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/slogan.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index'\n\nconst meta = {\n  title: 'Biz Components/Slogan',\n  component: Slogan,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years'\n    ],\n\n  }\n}\n\nexport const TitleOnly: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\"\n  }\n}\n\nexport const SingleFeature: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees'\n    ]\n  }\n}\n\nexport const TwoFeatures: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers'\n    ]\n  }\n}\n\nexport const CustomClassName: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years'\n    ],\n    className: 'bg-gray-100'\n  }\n}\n\nexport const CustomStyle = () => {\n  return (<Slogan\n    title=\"The World's No.1 Mobile Charging Brand*\"\n    features={['47%<br/>R&D Employees', '100 Million<br/>Global Customers', 'Pioneering in Charging<br/>Technology for 12 Years']}\n    className=\"bg-gray-100\"\n    style={`\n        \n        .slogan-title{\n          background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          animation: fadeIn 1s ease-in forwards;\n        }\n\n        @keyframes fadeIn {\n          from {\n            opacity: 0;\n          }\n          to {\n            opacity: 1;\n          }\n        }\n        .slogan-feature-text {\n          background-color: #f0f0f0;\n          padding: 10px;\n          border-radius: 10px;\n          animation: fadeIn 1s ease-in forwards;\n        }\n      `}\n  />)\n}\n\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GAmEU,IAAAU,EAAA,6BAnEVC,EAAkB,iBAElBC,EAAuB,mCAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAW,SACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,CAEF,CACF,EAEaE,EAAmB,CAC9B,KAAM,CACJ,MAAO,yCACT,CACF,EAEaD,EAAuB,CAClC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,uBACF,CACF,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,kCACF,CACF,CACF,EAEaL,EAAyB,CACpC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,OACjB,OAAC,UACP,MAAM,0CACN,SAAU,CAAC,wBAAyB,mCAAoC,oDAAoD,EAC5H,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { Slogan } from '../biz-components/index'\n\nconst meta = {\n  title: 'Biz Components/Slogan',\n  component: Slogan,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Slogan>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nexport const Default: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years',\n    ],\n  },\n}\n\nexport const TitleOnly: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n  },\n}\n\nexport const SingleFeature: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: ['47%<br/>R&D Employees'],\n  },\n}\n\nexport const TwoFeatures: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: ['47%<br/>R&D Employees', '100 Million<br/>Global Customers'],\n  },\n}\n\nexport const CustomClassName: Story = {\n  args: {\n    title: \"The World's No.1 Mobile Charging Brand*\",\n    features: [\n      '47%<br/>R&D Employees',\n      '100 Million<br/>Global Customers',\n      'Pioneering in Charging<br/>Technology for 12 Years',\n    ],\n    className: 'bg-gray-100',\n  },\n}\n\nexport const CustomStyle = () => {\n  return (\n    <Slogan\n      title=\"The World's No.1 Mobile Charging Brand*\"\n      features={[\n        '47%<br/>R&D Employees',\n        '100 Million<br/>Global Customers',\n        'Pioneering in Charging<br/>Technology for 12 Years',\n      ]}\n      className=\"bg-gray-100\"\n      style={`\n        \n        .slogan-title{\n          background: linear-gradient(90deg, #ff0000, #00ff00, #0000ff);\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          animation: fadeIn 1s ease-in forwards;\n        }\n\n        @keyframes fadeIn {\n          from {\n            opacity: 0;\n          }\n          to {\n            opacity: 1;\n          }\n        }\n        .slogan-feature-text {\n          background-color: #f0f0f0;\n          padding: 10px;\n          border-radius: 10px;\n          animation: fadeIn 1s ease-in forwards;\n        }\n      `}\n    />\n  )\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qBAAAE,EAAA,gBAAAC,EAAA,YAAAC,EAAA,kBAAAC,EAAA,cAAAC,EAAA,gBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAT,GA8DI,IAAAU,EAAA,6BA9DJC,EAAkB,iBAElBC,EAAuB,mCAEvB,MAAMC,EAAO,CACX,MAAO,wBACP,UAAW,SACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQK,EAIR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,CACF,CACF,EAEaE,EAAmB,CAC9B,KAAM,CACJ,MAAO,yCACT,CACF,EAEaD,EAAuB,CAClC,KAAM,CACJ,MAAO,0CACP,SAAU,CAAC,uBAAuB,CACpC,CACF,EAEaE,EAAqB,CAChC,KAAM,CACJ,MAAO,0CACP,SAAU,CAAC,wBAAyB,kCAAkC,CACxE,CACF,EAEaL,EAAyB,CACpC,KAAM,CACJ,MAAO,0CACP,SAAU,CACR,wBACA,mCACA,oDACF,EACA,UAAW,aACb,CACF,EAEaC,EAAc,OAEvB,OAAC,UACC,MAAM,0CACN,SAAU,CACR,wBACA,mCACA,oDACF,EACA,UAAU,cACV,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBT",
   "names": ["slogan_stories_exports", "__export", "CustomClassName", "CustomStyle", "Default", "SingleFeature", "TitleOnly", "TwoFeatures", "slogan_stories_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_biz_components", "meta"]
 }

package/dist/cjs/stories/text.stories.js.map CHANGED Viewed

@@ -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', '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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,UAAAC,EAAA,YAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAP,GAyFM,IAAAQ,EAAA,6BAvFNC,EAAqB,kCACrBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAW,OACX,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,IAAON,EAAQM,EAGR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaE,EAAe,CAC1B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaE,EAAgB,CAC3B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,OAAO,QAAQ,wDAA4C,KACjE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,OAAO,wDAA4C,GAClE,CAEJ,CACF,EAIaH,EAAc,CACzB,QAAS,CACP,SACE,OAAC,QACC,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\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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,SAAAC,EAAA,UAAAC,EAAA,YAAAC,EAAA,WAAAC,IAAA,eAAAC,EAAAP,GAyFM,IAAAQ,EAAA,6BAvFNC,EAAqB,kCACrBC,EAAkB,iBAElB,MAAMC,EAAO,CACX,MAAO,kBACP,UAAW,OACX,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,IAAON,EAAQM,EAGR,MAAMT,EAAiB,CAC5B,KAAM,CACJ,SAAU,gDACV,KAAM,EACN,OAAQ,QACV,CACF,EAEaE,EAAe,CAC1B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,KAC3D,OAAC,QAAK,KAAM,EAAG,wDAA4C,GAC7D,CAEJ,CACF,EAEaE,EAAgB,CAC3B,QAAS,CACP,SACE,QAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,OAAO,QAAQ,wDAA4C,KACjE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,SAAS,wDAA4C,KAClE,OAAC,QAAK,OAAO,OAAO,wDAA4C,GAClE,CAEJ,CACF,EAEaH,EAAc,CACzB,QAAS,CACP,SACE,OAAC,QACC,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wGASR,CAEJ,CACF",
   "names": ["text_stories_exports", "__export", "Default", "Html", "Sizes", "text_stories_default", "weight", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react", "meta"]
 }

package/dist/esm/biz-components/AccordionCards/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as f}from"react/jsx-runtime";import{cn as s}from"../../helpers/utils.js";import F from"../../components/picture.js";import C from"../../components/button.js";import{useState as c,useEffect as x,useRef as m}from"react";function L(){const[i,l]=c(window?.innerWidth||0);return x(()=>{const a=()=>l(window?.innerWidth||0);return window?.addEventListener("resize",a),()=>window?.removeEventListener("resize",a)},[]),i<=768}const T=({products:i=[],className:l="",shape:a="square",itemShape:w="square",event:g,primaryButton:y=""})=>{const k=L(),[E,p]=c(null),[N,v]=c({}),b=m([]),d=m({}),u=m({}),W=(t,e)=>{e&&(b.current[t]=e)},h=t=>{if(u.current?.[t]){const e={...d.current,[t]:!0};v(e),d.current=e}};return x(()=>{const t=b.current;return t?.forEach((e,n)=>{e.addEventListener("transitionend",()=>h(n))}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>h(n))})}},[]),k?r("div",{className:s("flex gap-4 overflow-x-auto w-full h-[400px]",l),children:i?.map((t,e)=>r("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:r(F,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img})},e))}):r("div",{className:s("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",l),children:i?.map((t,e)=>{const n=E===e;return f("div",{style:{flex:n?6:1,transition:"all 0.3s ease-in-out"},ref:o=>o&&W(e,o),className:s("relative overflow-hidden cursor-pointer",w==="round"?"rounded-2xl":""),onMouseEnter:()=>{p(e),u.current[e]=!0},onMouseLeave:()=>{p(null);const o={...d.current,[e]:!1};v(o),d.current=o,u.current[e]=!1},children:[r(F,{source:t?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),N?.[e]?f("div",{className:s("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",n?"opacity-100":"opacity-0"),children:[f("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:t?.subTitle})]}),r(C,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>g?.primaryButton?.onClick?.(t),className:s("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] border-[#FFFFFF] font-bold text-sm desktop:text-base",a==="round"?"rounded-2xl":""),children:y})]}):null]},e)})})};var z=T;export{z as default};
+"use client";import{jsx as r,jsxs as f}from"react/jsx-runtime";import{cn as s}from"../../helpers/utils.js";import h from"../../components/picture.js";import C from"../../components/button.js";import{useState as c,useEffect as x,useRef as m}from"react";function L(){const[i,l]=c(window?.innerWidth||0);return x(()=>{const a=()=>l(window?.innerWidth||0);return window?.addEventListener("resize",a),()=>window?.removeEventListener("resize",a)},[]),i<=768}const T=({products:i=[],className:l="",shape:a="square",itemShape:w="square",event:g,primaryButton:y=""})=>{const k=L(),[E,p]=c(null),[N,v]=c({}),b=m([]),d=m({}),u=m({}),W=(t,e)=>{e&&(b.current[t]=e)},F=t=>{if(u.current?.[t]){const e={...d.current,[t]:!0};v(e),d.current=e}};return x(()=>{const t=b.current;return t?.forEach((e,n)=>{e.addEventListener("transitionend",()=>F(n))}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>F(n))})}},[]),k?r("div",{className:s("flex h-[400px] w-full gap-4 overflow-x-auto",l),children:i?.map((t,e)=>r("div",{className:"shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]",children:r(h,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img})},e))}):r("div",{className:s("laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden",l),children:i?.map((t,e)=>{const n=E===e;return f("div",{style:{flex:n?6:1,transition:"all 0.3s ease-in-out"},ref:o=>o&&W(e,o),className:s("relative cursor-pointer overflow-hidden",w==="round"?"rounded-2xl":""),onMouseEnter:()=>{p(e),u.current[e]=!0},onMouseLeave:()=>{p(null);const o={...d.current,[e]:!1};v(o),d.current=o,u.current[e]=!1},children:[r(h,{source:t?.img,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),N?.[e]?f("div",{className:s("absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6","transition-all delay-300 duration-[50ms]",n?"opacity-100":"opacity-0"),children:[f("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]",children:t?.title}),r("h3",{className:"desktop:text-lg text-sm font-medium text-[#FFFFFF]",children:t?.subTitle})]}),r(C,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>g?.primaryButton?.onClick?.(t),className:s("desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]",a==="round"?"rounded-2xl":""),children:y})]}):null]},e)})})};var q=T;export{q as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccordionCards/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n    const [width, setWidth] = useState(window?.innerWidth || 0);\n    useEffect(() => {\n        const onResize = () => setWidth(window?.innerWidth || 0);\n        window?.addEventListener('resize', onResize);\n        return () => window?.removeEventListener('resize', onResize);\n    }, []);\n    return width <= 768;\n}\n\ntype AccordionCardsType = {\n    products: Array<{\n        /** \u6807\u9898\u6587\u672C */\n        title: string\n        /** \u56FE\u7247*/\n        img: string\n        /** \u5185\u5BB9\u8282\u70B9 */\n        subTitle: string\n    }>\n    className?: string\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u6309\u94AE\u4E8B\u4EF6*/\n    event?: {\n        primaryButton?: {\n            onClick: (v: any) => void\n        },\n    },\n}\n\nconst AccordionCards = ({\n    products = [],\n    className = '',\n    shape = 'square',\n    itemShape = 'square',\n    event,\n    primaryButton = '',\n}: AccordionCardsType) => {\n    const isMobile = useWindowWidth();\n    const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n    const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({});\n\n    const accordionRef = useRef<HTMLDivElement[]>([]);\n    const refWidth = useRef<{ [key: number]: boolean }>({});\n    const enterRef = useRef<{ [key: number]: boolean }>({});\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n        if (el) {\n            accordionRef.current[index] = el;\n        }\n    };\n\n    const handleTransitionEnd = (index: number) => {\n        if (enterRef.current?.[index]) {\n            const current = { ...refWidth.current, [index]: true }\n            setCurrentWidth(current)\n            refWidth.current = current\n        }\n    };\n\n    useEffect(() => {\n        const element = accordionRef.current;\n        element?.forEach((item, index) => {\n            item.addEventListener('transitionend', () => handleTransitionEnd(index));\n        })\n        return () => {\n            element?.forEach((item, index) => {\n                item.removeEventListener('transitionend', () => handleTransitionEnd(index)); \n            })\n        };\n    }, [])\n\n    // \u79FB\u52A8\u7AEF\n    if (isMobile) {\n        return (\n            <div className={cn(\"flex gap-4 overflow-x-auto w-full h-[400px]\", className)}>\n                {products?.map((item, idx) => (\n                    <div\n                        key={idx}\n                        className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\"\n                    >\n                        <Picture\n                            className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                            source={item?.img}\n                        />\n                    </div>\n                ))}\n            </div>\n        );\n    }\n\n    // \u684C\u9762\u7AEF\n    return (\n        <div className={cn(\"h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]\", className)}>\n            {products?.map((item, idx) => {\n                const isExpanded = hoverIndex === idx;\n                const flexValue = isExpanded ? 6 : 1;\n                return (\n                    <div\n                        key={idx}\n                        style={{\n                            flex: flexValue,\n                            transition: 'all 0.3s ease-in-out',\n                        }}\n                        ref={(el) => el && getRef(idx, el)}\n                        className={cn(\n                            'relative overflow-hidden cursor-pointer',\n                            itemShape === 'round' ? 'rounded-2xl' : ''\n                        )}\n                        onMouseEnter={() => {\n                            setHoverIndex(idx)\n                            enterRef.current[idx] = true\n                        }}\n                        onMouseLeave={() => {\n                            setHoverIndex(null)\n                            const current = { ...refWidth.current, [idx]: false }\n                            setCurrentWidth(current)\n                            refWidth.current = current\n                            enterRef.current[idx] = false\n                        }}\n                    >\n                        <Picture\n                            source={item?.img}\n                            className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n                        />\n                        {\n                            currentWidth?.[idx] ?\n                                <div className={cn(\n                                    'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n                                    'transition-all duration-[50ms] delay-[300ms]',\n                                    isExpanded ? 'opacity-100' : 'opacity-0'\n                                )}>\n                                    <div className=\"mr-1 flex-1 overflow-hidden\">\n                                        <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">{item?.title}</p>\n                                        <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n                                    </div>\n                                    <Button\n                                        size=\"sm\"\n                                        hoverEffect=\"slide\"\n                                        variant=\"secondary\"\n                                        onClick={() => event?.primaryButton?.onClick?.(item)}\n                                        className={cn(\n                                            'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] border-[#FFFFFF] font-bold text-sm desktop:text-base',\n                                            shape === 'round' ? 'rounded-2xl' : ''\n                                        )}\n                                    >\n                                        {primaryButton}\n                                    </Button>\n                                </div>: null\n                        }\n                    </div>\n                );\n            })}\n        </div>\n    );\n};\n\nexport default AccordionCards\n"],
-  "mappings": "AA2FwB,cAAAA,EAmDY,QAAAC,MAnDZ,oBA3FxB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAG5C,SAASC,GAAiB,CACtB,KAAM,CAACC,EAAOC,CAAQ,EAAIL,EAAS,QAAQ,YAAc,CAAC,EAC1D,OAAAC,EAAU,IAAM,CACZ,MAAMK,EAAW,IAAMD,EAAS,QAAQ,YAAc,CAAC,EACvD,eAAQ,iBAAiB,SAAUC,CAAQ,EACpC,IAAM,QAAQ,oBAAoB,SAAUA,CAAQ,CAC/D,EAAG,CAAC,CAAC,EACEF,GAAS,GACpB,CA0BA,MAAMG,EAAiB,CAAC,CACpB,SAAAC,EAAW,CAAC,EACZ,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,UAAAC,EAAY,SACZ,MAAAC,EACA,cAAAC,EAAgB,EACpB,IAA0B,CACtB,MAAMC,EAAWX,EAAe,EAC1B,CAACY,EAAYC,CAAa,EAAIhB,EAAwB,IAAI,EAC1D,CAACiB,EAAcC,CAAe,EAAIlB,EAAqC,CAAC,CAAC,EAEzEmB,EAAejB,EAAyB,CAAC,CAAC,EAC1CkB,EAAWlB,EAAmC,CAAC,CAAC,EAChDmB,EAAWnB,EAAmC,CAAC,CAAC,EAEhDoB,EAAS,CAACC,EAAeC,IAAuB,CAC9CA,IACAL,EAAa,QAAQI,CAAK,EAAIC,EAEtC,EAEMC,EAAuBF,GAAkB,CAC3C,GAAIF,EAAS,UAAUE,CAAK,EAAG,CAC3B,MAAMG,EAAU,CAAE,GAAGN,EAAS,QAAS,CAACG,CAAK,EAAG,EAAK,EACrDL,EAAgBQ,CAAO,EACvBN,EAAS,QAAUM,CACvB,CACJ,EAeA,OAbAzB,EAAU,IAAM,CACZ,MAAM0B,EAAUR,EAAa,QAC7B,OAAAQ,GAAS,QAAQ,CAACC,EAAML,IAAU,CAC9BK,EAAK,iBAAiB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CAC3E,CAAC,EACM,IAAM,CACTI,GAAS,QAAQ,CAACC,EAAML,IAAU,CAC9BK,EAAK,oBAAoB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CAC9E,CAAC,CACL,CACJ,EAAG,CAAC,CAAC,EAGDT,EAEInB,EAAC,OAAI,UAAWE,EAAG,8CAA+CY,CAAS,EACtE,SAAAD,GAAU,IAAI,CAACoB,EAAMC,IAClBlC,EAAC,OAEG,UAAU,kFAEV,SAAAA,EAACG,EAAA,CACG,UAAU,iEACV,OAAQ8B,GAAM,IAClB,GANKC,CAOT,CACH,EACL,EAMJlC,EAAC,OAAI,UAAWE,EAAG,iFAAkFY,CAAS,EACzG,SAAAD,GAAU,IAAI,CAACoB,EAAMC,IAAQ,CAC1B,MAAMC,EAAaf,IAAec,EAElC,OACIjC,EAAC,OAEG,MAAO,CACH,KALMkC,EAAa,EAAI,EAMvB,WAAY,sBAChB,EACA,IAAMN,GAAOA,GAAMF,EAAOO,EAAKL,CAAE,EACjC,UAAW3B,EACP,0CACAc,IAAc,QAAU,cAAgB,EAC5C,EACA,aAAc,IAAM,CAChBK,EAAca,CAAG,EACjBR,EAAS,QAAQQ,CAAG,EAAI,EAC5B,EACA,aAAc,IAAM,CAChBb,EAAc,IAAI,EAClB,MAAMU,EAAU,CAAE,GAAGN,EAAS,QAAS,CAACS,CAAG,EAAG,EAAM,EACpDX,EAAgBQ,CAAO,EACvBN,EAAS,QAAUM,EACnBL,EAAS,QAAQQ,CAAG,EAAI,EAC5B,EAEA,UAAAlC,EAACG,EAAA,CACG,OAAQ8B,GAAM,IACd,UAAU,iEACd,EAEIX,IAAeY,CAAG,EACdjC,EAAC,OAAI,UAAWC,EACZ,4FACA,+CACAiC,EAAa,cAAgB,WACjC,EACI,UAAAlC,EAAC,OAAI,UAAU,8BACX,UAAAD,EAAC,KAAE,UAAU,4EAA6E,SAAAiC,GAAM,MAAM,EACtGjC,EAAC,MAAG,UAAU,qDAAsD,SAAAiC,GAAM,SAAS,GACvF,EACAjC,EAACI,EAAA,CACG,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,QAAS,IAAMa,GAAO,eAAe,UAAUgB,CAAI,EACnD,UAAW/B,EACP,4GACAa,IAAU,QAAU,cAAgB,EACxC,EAEC,SAAAG,EACL,GACJ,EAAQ,OAjDXgB,CAmDT,CAER,CAAC,EACL,CAER,EAEA,IAAOE,EAAQxB",
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n  const [width, setWidth] = useState(window?.innerWidth || 0)\n  useEffect(() => {\n    const onResize = () => setWidth(window?.innerWidth || 0)\n    window?.addEventListener('resize', onResize)\n    return () => window?.removeEventListener('resize', onResize)\n  }, [])\n  return width <= 768\n}\n\ntype AccordionCardsType = {\n  products: Array<{\n    /** \u6807\u9898\u6587\u672C */\n    title: string\n    /** \u56FE\u7247*/\n    img: string\n    /** \u5185\u5BB9\u8282\u70B9 */\n    subTitle: string\n  }>\n  className?: string\n  /** \u6309\u94AE\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n  /** \u5361\u7247\u5F62\u72B6 */\n  itemShape?: 'round' | 'square'\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: string\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: {\n      onClick: (v: any) => void\n    }\n  }\n}\n\nconst AccordionCards = ({\n  products = [],\n  className = '',\n  shape = 'square',\n  itemShape = 'square',\n  event,\n  primaryButton = '',\n}: AccordionCardsType) => {\n  const isMobile = useWindowWidth()\n  const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n  const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({})\n\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const refWidth = useRef<{ [key: number]: boolean }>({})\n  const enterRef = useRef<{ [key: number]: boolean }>({})\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  const handleTransitionEnd = (index: number) => {\n    if (enterRef.current?.[index]) {\n      const current = { ...refWidth.current, [index]: true }\n      setCurrentWidth(current)\n      refWidth.current = current\n    }\n  }\n\n  useEffect(() => {\n    const element = accordionRef.current\n    element?.forEach((item, index) => {\n      item.addEventListener('transitionend', () => handleTransitionEnd(index))\n    })\n    return () => {\n      element?.forEach((item, index) => {\n        item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n      })\n    }\n  }, [])\n\n  // \u79FB\u52A8\u7AEF\n  if (isMobile) {\n    return (\n      <div className={cn('flex h-[400px] w-full gap-4 overflow-x-auto', className)}>\n        {products?.map((item, idx) => (\n          <div key={idx} className=\"shrink-0 grow-0 basis-[296px] border border-solid border-[#dddddd] bg-[#FFFFFF]\">\n            <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={item?.img} />\n          </div>\n        ))}\n      </div>\n    )\n  }\n\n  // \u684C\u9762\u7AEF\n  return (\n    <div className={cn('laptop:h-[448px] desktop:h-[560px] flex h-[336px] w-full gap-4 overflow-hidden', className)}>\n      {products?.map((item, idx) => {\n        const isExpanded = hoverIndex === idx\n        const flexValue = isExpanded ? 6 : 1\n        return (\n          <div\n            key={idx}\n            style={{\n              flex: flexValue,\n              transition: 'all 0.3s ease-in-out',\n            }}\n            ref={el => el && getRef(idx, el)}\n            className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n            onMouseEnter={() => {\n              setHoverIndex(idx)\n              enterRef.current[idx] = true\n            }}\n            onMouseLeave={() => {\n              setHoverIndex(null)\n              const current = { ...refWidth.current, [idx]: false }\n              setCurrentWidth(current)\n              refWidth.current = current\n              enterRef.current[idx] = false\n            }}\n          >\n            <Picture source={item?.img} className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n            {currentWidth?.[idx] ? (\n              <div\n                className={cn(\n                  'absolute inset-x-0 bottom-0 flex items-end justify-between overflow-hidden px-6 pb-6',\n                  'transition-all delay-300 duration-[50ms]',\n                  isExpanded ? 'opacity-100' : 'opacity-0'\n                )}\n              >\n                <div className=\"mr-1 flex-1 overflow-hidden\">\n                  <p className=\"laptop:text-2xl desktop:text-[32px] mb-1 text-xl font-bold text-[#FFFFFF]\">\n                    {item?.title}\n                  </p>\n                  <h3 className=\"desktop:text-lg text-sm font-medium text-[#FFFFFF]\">{item?.subTitle}</h3>\n                </div>\n                <Button\n                  size=\"sm\"\n                  hoverEffect=\"slide\"\n                  variant=\"secondary\"\n                  onClick={() => event?.primaryButton?.onClick?.(item)}\n                  className={cn(\n                    'desktop:text-base mb-1.5 overflow-hidden border-[#FFFFFF] bg-transparent text-sm font-bold text-[#FFFFFF]',\n                    shape === 'round' ? 'rounded-2xl' : ''\n                  )}\n                >\n                  {primaryButton}\n                </Button>\n              </div>\n            ) : null}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nexport default AccordionCards\n"],
+  "mappings": "aAyFY,cAAAA,EA2CI,QAAAC,MA3CJ,oBAxFZ,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QAG5C,SAASC,GAAiB,CACxB,KAAM,CAACC,EAAOC,CAAQ,EAAIL,EAAS,QAAQ,YAAc,CAAC,EAC1D,OAAAC,EAAU,IAAM,CACd,MAAMK,EAAW,IAAMD,EAAS,QAAQ,YAAc,CAAC,EACvD,eAAQ,iBAAiB,SAAUC,CAAQ,EACpC,IAAM,QAAQ,oBAAoB,SAAUA,CAAQ,CAC7D,EAAG,CAAC,CAAC,EACEF,GAAS,GAClB,CA0BA,MAAMG,EAAiB,CAAC,CACtB,SAAAC,EAAW,CAAC,EACZ,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,UAAAC,EAAY,SACZ,MAAAC,EACA,cAAAC,EAAgB,EAClB,IAA0B,CACxB,MAAMC,EAAWX,EAAe,EAC1B,CAACY,EAAYC,CAAa,EAAIhB,EAAwB,IAAI,EAC1D,CAACiB,EAAcC,CAAe,EAAIlB,EAAqC,CAAC,CAAC,EAEzEmB,EAAejB,EAAyB,CAAC,CAAC,EAC1CkB,EAAWlB,EAAmC,CAAC,CAAC,EAChDmB,EAAWnB,EAAmC,CAAC,CAAC,EAEhDoB,EAAS,CAACC,EAAeC,IAAuB,CAChDA,IACFL,EAAa,QAAQI,CAAK,EAAIC,EAElC,EAEMC,EAAuBF,GAAkB,CAC7C,GAAIF,EAAS,UAAUE,CAAK,EAAG,CAC7B,MAAMG,EAAU,CAAE,GAAGN,EAAS,QAAS,CAACG,CAAK,EAAG,EAAK,EACrDL,EAAgBQ,CAAO,EACvBN,EAAS,QAAUM,CACrB,CACF,EAeA,OAbAzB,EAAU,IAAM,CACd,MAAM0B,EAAUR,EAAa,QAC7B,OAAAQ,GAAS,QAAQ,CAACC,EAAML,IAAU,CAChCK,EAAK,iBAAiB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CACzE,CAAC,EACM,IAAM,CACXI,GAAS,QAAQ,CAACC,EAAML,IAAU,CAChCK,EAAK,oBAAoB,gBAAiB,IAAMH,EAAoBF,CAAK,CAAC,CAC5E,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAGDT,EAEAnB,EAAC,OAAI,UAAWE,EAAG,8CAA+CY,CAAS,EACxE,SAAAD,GAAU,IAAI,CAACoB,EAAMC,IACpBlC,EAAC,OAAc,UAAU,kFACvB,SAAAA,EAACG,EAAA,CAAQ,UAAU,6DAA6D,OAAQ8B,GAAM,IAAK,GAD3FC,CAEV,CACD,EACH,EAMFlC,EAAC,OAAI,UAAWE,EAAG,iFAAkFY,CAAS,EAC3G,SAAAD,GAAU,IAAI,CAACoB,EAAMC,IAAQ,CAC5B,MAAMC,EAAaf,IAAec,EAElC,OACEjC,EAAC,OAEC,MAAO,CACL,KALYkC,EAAa,EAAI,EAM7B,WAAY,sBACd,EACA,IAAKN,GAAMA,GAAMF,EAAOO,EAAKL,CAAE,EAC/B,UAAW3B,EAAG,0CAA2Cc,IAAc,QAAU,cAAgB,EAAE,EACnG,aAAc,IAAM,CAClBK,EAAca,CAAG,EACjBR,EAAS,QAAQQ,CAAG,EAAI,EAC1B,EACA,aAAc,IAAM,CAClBb,EAAc,IAAI,EAClB,MAAMU,EAAU,CAAE,GAAGN,EAAS,QAAS,CAACS,CAAG,EAAG,EAAM,EACpDX,EAAgBQ,CAAO,EACvBN,EAAS,QAAUM,EACnBL,EAAS,QAAQQ,CAAG,EAAI,EAC1B,EAEA,UAAAlC,EAACG,EAAA,CAAQ,OAAQ8B,GAAM,IAAK,UAAU,6DAA6D,EAClGX,IAAeY,CAAG,EACjBjC,EAAC,OACC,UAAWC,EACT,uFACA,2CACAiC,EAAa,cAAgB,WAC/B,EAEA,UAAAlC,EAAC,OAAI,UAAU,8BACb,UAAAD,EAAC,KAAE,UAAU,4EACV,SAAAiC,GAAM,MACT,EACAjC,EAAC,MAAG,UAAU,qDAAsD,SAAAiC,GAAM,SAAS,GACrF,EACAjC,EAACI,EAAA,CACC,KAAK,KACL,YAAY,QACZ,QAAQ,YACR,QAAS,IAAMa,GAAO,eAAe,UAAUgB,CAAI,EACnD,UAAW/B,EACT,4GACAa,IAAU,QAAU,cAAgB,EACtC,EAEC,SAAAG,EACH,GACF,EACE,OA/CCgB,CAgDP,CAEJ,CAAC,EACH,CAEJ,EAEA,IAAOE,EAAQxB",
   "names": ["jsx", "jsxs", "cn", "Picture", "Button", "useState", "useEffect", "useRef", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "isExpanded", "AccordionCards_default"]
 }

package/dist/esm/biz-components/BrandEquity/BrandEquity.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import d from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({items:p=[],itemShape:r="square",className:i=""})=>e("div",{className:a("brand-equity-wrapper w-full bg-[#F7F8F9]",i),children:e("div",{className:a("grid gap-3 px-4","tablet:px-8 tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10","desktop:px-[175px] lg-desktop:px-[268px]"),children:p.map((t,o)=>s("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6","desktop:gap-16 gap-12","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(o)},r==="round"?"rounded-[16px]":"rounded-none"),children:[s("div",{className:"flex items-center justify-between gap-3",children:[e("h3",{className:"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg",children:t.title}),t.avatarList?.length?e("div",{className:"flex -space-x-2",children:t.avatarList.map((l,n)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(d,{source:l,className:"size-full object-cover"})},n))}):e("span",{className:"text-[#1D1D1F]",children:t.icon})]}),e("p",{className:"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl",children:t.description})]},o))})});var b=c(m);export{b as default};
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import d from"../../components/picture.js";import{withStyles as c}from"../../shared/Styles.js";const m=({items:p=[],itemShape:i="square",className:r=""})=>e("div",{className:a("brand-equity-wrapper w-full bg-[#F7F8F9]",r),children:e("div",{className:a("grid gap-3 px-4","tablet:px-8 tablet:grid-cols-2 grid-cols-1","laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10","desktop:px-[175px] lg-desktop:px-[268px]"),children:p.map((t,s)=>o("div",{className:a("brand-equity-item","flex flex-col bg-white p-4","desktop:p-6","desktop:gap-16 gap-12","laptop:col-span-3",{"laptop:col-span-4":[0,5,6,11].includes(s)},i==="round"?"rounded-[16px]":"rounded-none"),children:[o("div",{className:"flex items-center justify-between gap-3",children:[e("h3",{className:"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg",children:t.title}),t.avatarList?.length?e("div",{className:"flex -space-x-2",children:t.avatarList.map((l,n)=>e("div",{className:a("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:e(d,{source:l,className:"size-full object-cover"})},n))}):e("span",{className:"text-[#1D1D1F]",children:t.icon})]}),e("p",{className:"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl",children:t.description})]},s))})});var b=c(m);export{b as default};
 //# sourceMappingURL=BrandEquity.js.map

package/dist/esm/biz-components/BrandEquity/BrandEquity.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n  icon?: React.ReactNode\n  title: string\n  description: string\n  avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n  items: BrandEquityItem[]\n  itemShape?: 'round' | 'square'\n  className?: string\n  theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', className = '' }) => {\n  return (\n    <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n      <div\n        className={cn(\n          'grid gap-3 px-4',\n          'tablet:px-8 tablet:grid-cols-2 grid-cols-1',\n          'laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10',\n          'desktop:px-[175px] lg-desktop:px-[268px]'\n        )}\n      >\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'brand-equity-item',\n              'flex flex-col bg-white p-4',\n              'desktop:p-6',\n              'desktop:gap-16 gap-12',\n              'laptop:col-span-3',\n              {\n                ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n              },\n              itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n            )}\n          >\n            <div className=\"flex items-center justify-between gap-3\">\n              <h3 className=\"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg\">\n                {item.title}\n              </h3>\n              {item.avatarList?.length ? (\n                <div className=\"flex -space-x-2\">\n                  {item.avatarList.map((avatarUrl: string, index: number) => (\n                    <div\n                      key={index}\n                      className={cn(\n                        'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                        'relative inline-block',\n                        'lg-desktop:size-[36px]'\n                      )}\n                    >\n                      <Picture source={avatarUrl} className=\"size-full object-cover\" />\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n              )}\n            </div>\n            <p className=\"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl\">\n              {item.description}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(BrandEquity)\n"],
-  "mappings": "AA+CY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/CZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,IAEhGR,EAAC,OAAI,UAAWE,EAAG,2CAA4CM,CAAS,EACtE,SAAAR,EAAC,OACC,UAAWE,EACT,kBACA,6CACA,qDACA,0CACF,EAEC,SAAAI,EAAM,IAAI,CAACG,EAAMC,IAChBT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,iBAAmB,cAC7C,EAEA,UAAAN,EAAC,OAAI,UAAU,0CACb,UAAAD,EAAC,MAAG,UAAU,oFACX,SAAAS,EAAK,MACR,EACCA,EAAK,YAAY,OAChBT,EAAC,OAAI,UAAU,kBACZ,SAAAS,EAAK,WAAW,IAAI,CAACE,EAAmBD,IACvCV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQQ,EAAW,UAAU,yBAAyB,GAP1DD,CAQP,CACD,EACH,EAEAV,EAAC,QAAK,UAAU,iBAAkB,SAAAS,EAAK,KAAK,GAEhD,EACAT,EAAC,KAAE,UAAU,iFACV,SAAAS,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOE,EAAQR,EAAWC,CAAW",
+  "sourcesContent": ["'use client'\nimport React from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { ComponentCommonProps } from '../../types/props.js'\n\nexport interface BrandEquityItem {\n  icon?: React.ReactNode\n  title: string\n  description: string\n  avatarList?: string[]\n}\n\nexport interface BrandEquityProps extends ComponentCommonProps {\n  items: BrandEquityItem[]\n  itemShape?: 'round' | 'square'\n  className?: string\n  theme?: 'light' | 'dark'\n}\n\nconst BrandEquity: React.FC<BrandEquityProps> = ({ items = [], itemShape = 'square', className = '' }) => {\n  return (\n    <div className={cn('brand-equity-wrapper w-full bg-[#F7F8F9]', className)}>\n      <div\n        className={cn(\n          'grid gap-3 px-4',\n          'tablet:px-8 tablet:grid-cols-2 grid-cols-1',\n          'laptop:gap-4 laptop:px-[140px] laptop:grid-cols-10',\n          'desktop:px-[175px] lg-desktop:px-[268px]'\n        )}\n      >\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'brand-equity-item',\n              'flex flex-col bg-white p-4',\n              'desktop:p-6',\n              'desktop:gap-16 gap-12',\n              'laptop:col-span-3',\n              {\n                ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n              },\n              itemShape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n            )}\n          >\n            <div className=\"flex items-center justify-between gap-3\">\n              <h3 className=\"text-sm font-semibold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F] 2xl:text-lg\">\n                {item.title}\n              </h3>\n              {item.avatarList?.length ? (\n                <div className=\"flex -space-x-2\">\n                  {item.avatarList.map((avatarUrl: string, index: number) => (\n                    <div\n                      key={index}\n                      className={cn(\n                        'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                        'relative inline-block',\n                        'lg-desktop:size-[36px]'\n                      )}\n                    >\n                      <Picture source={avatarUrl} className=\"size-full object-cover\" />\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <span className=\"text-[#1D1D1F]\">{item.icon}</span>\n              )}\n            </div>\n            <p className=\"text-xl font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F] 2xl:text-2xl\">\n              {item.description}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withStyles(BrandEquity)\n"],
+  "mappings": "aAgDY,OACE,OAAAA,EADF,QAAAC,MAAA,oBA/CZ,MAAkB,QAElB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,cAAAC,MAAkB,yBAiB3B,MAAMC,EAA0C,CAAC,CAAE,MAAAC,EAAQ,CAAC,EAAG,UAAAC,EAAY,SAAU,UAAAC,EAAY,EAAG,IAEhGR,EAAC,OAAI,UAAWE,EAAG,2CAA4CM,CAAS,EACtE,SAAAR,EAAC,OACC,UAAWE,EACT,kBACA,6CACA,qDACA,0CACF,EAEC,SAAAI,EAAM,IAAI,CAACG,EAAMC,IAChBT,EAAC,OAEC,UAAWC,EACT,oBACA,6BACA,cACA,wBACA,oBACA,CACG,oBAAsB,CAAC,EAAG,EAAG,EAAG,EAAE,EAAE,SAASQ,CAAK,CACrD,EACAH,IAAc,QAAU,iBAAmB,cAC7C,EAEA,UAAAN,EAAC,OAAI,UAAU,0CACb,UAAAD,EAAC,MAAG,UAAU,oFACX,SAAAS,EAAK,MACR,EACCA,EAAK,YAAY,OAChBT,EAAC,OAAI,UAAU,kBACZ,SAAAS,EAAK,WAAW,IAAI,CAACE,EAAmBD,IACvCV,EAAC,OAEC,UAAWE,EACT,iEACA,wBACA,wBACF,EAEA,SAAAF,EAACG,EAAA,CAAQ,OAAQQ,EAAW,UAAU,yBAAyB,GAP1DD,CAQP,CACD,EACH,EAEAV,EAAC,QAAK,UAAU,iBAAkB,SAAAS,EAAK,KAAK,GAEhD,EACAT,EAAC,KAAE,UAAU,iFACV,SAAAS,EAAK,YACR,IAtCKC,CAuCP,CACD,EACH,EACF,EAIJ,IAAOE,EAAQR,EAAWC,CAAW",
   "names": ["jsx", "jsxs", "cn", "Picture", "withStyles", "BrandEquity", "items", "itemShape", "className", "item", "index", "avatarUrl", "BrandEquity_default"]
 }

package/dist/esm/biz-components/Category/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as m,jsx as e,jsxs as i}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import s from"../../components/picture.js";const d=({className:r="",shape:a="square",products:p=[]})=>e(m,{children:e("div",{className:o("w-full",r),children:e("div",{className:o("flex overflow-hidden"),children:e("div",{className:o("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:p?.map((t,l)=>i("div",{className:o("bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden","laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8",a==="round"?"rounded-[16px]":"rounded-none"),children:[e(s,{className:"w-full object-cover",source:t?.img}),e("p",{className:"flex-1 text-sm text-center font-semibold desktop:text-lg",children:t?.title})]},l))})})})});var g=d;export{g as default};
+"use client";import{Fragment as m,jsx as e,jsxs as i}from"react/jsx-runtime";import"react";import{cn as o}from"../../helpers/utils.js";import s from"../../components/picture.js";const d=({className:r="",shape:a="square",products:p=[]})=>e(m,{children:e("div",{className:o("w-full",r),children:e("div",{className:o("flex overflow-hidden"),children:e("div",{className:o("flex w-full","laptop:gap-4 gap-3 overflow-x-auto overflow-y-hidden"),children:p?.map((t,l)=>i("div",{className:o("box-border flex min-w-[167px] max-w-[167px] flex-col overflow-hidden bg-[#EAEAEC] p-4","laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8",a==="round"?"rounded-[16px]":"rounded-none"),children:[e(s,{className:"w-full object-cover",source:t?.img}),e("p",{className:"desktop:text-lg flex-1 text-center text-sm font-semibold",children:t?.title})]},l))})})})});var u=d;export{u as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Category/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Category/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: string\n  title: string\n}\n\nexport interface CategoryProps {\n  products: CategoryItem[]\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  /** \u5361\u7247\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n}\n\nconst Category: React.FC<CategoryProps> = ({\n  className = '',\n  shape = 'square',\n  products = [],\n}) => {\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        <div className={cn('flex overflow-hidden')}>\n          <div className={cn('w-full flex', 'gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden')}>\n            {products?.map((item, index) => {\n              return (\n                <div\n                  key={index}\n                  className={cn(\n                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[167px] max-w-[167px] box-border overflow-hidden',\n                    'laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8',\n                    shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n                  )}\n                >\n                  <Picture\n                    className=\"w-full object-cover\"\n                    source={item?.img}\n                  />\n                  <p className=\"flex-1 text-sm text-center font-semibold desktop:text-lg\">\n                    {item?.title}\n                  </p>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Category\n"],
-  "mappings": "AAyBI,mBAAAA,EAcc,OAAAC,EARF,QAAAC,MANZ,oBAzBJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BAiBpB,MAAMC,EAAoC,CAAC,CACzC,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,SAAAC,EAAW,CAAC,CACd,IAEIP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAWE,EAAG,SAAUG,CAAS,EACpC,SAAAL,EAAC,OAAI,UAAWE,EAAG,sBAAsB,EACvC,SAAAF,EAAC,OAAI,UAAWE,EAAG,cAAe,sDAAsD,EACrF,SAAAK,GAAU,IAAI,CAACC,EAAMC,IAElBR,EAAC,OAEC,UAAWC,EACT,wFACA,+GACAI,IAAU,QAAU,iBAAmB,cACzC,EAEA,UAAAN,EAACG,EAAA,CACC,UAAU,sBACV,OAAQK,GAAM,IAChB,EACAR,EAAC,KAAE,UAAU,2DACV,SAAAQ,GAAM,MACT,IAbKC,CAcP,CAEH,EACH,EACF,EACF,EACF,EAIJ,IAAOC,EAAQN",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\n\nexport interface CategoryItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: string\n  title: string\n}\n\nexport interface CategoryProps {\n  products: CategoryItem[]\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  /** \u5361\u7247\u5F62\u72B6 */\n  shape?: 'round' | 'square'\n}\n\nconst Category: React.FC<CategoryProps> = ({ className = '', shape = 'square', products = [] }) => {\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        <div className={cn('flex overflow-hidden')}>\n          <div className={cn('flex w-full', 'laptop:gap-4 gap-3 overflow-x-auto overflow-y-hidden')}>\n            {products?.map((item, index) => {\n              return (\n                <div\n                  key={index}\n                  className={cn(\n                    'box-border flex min-w-[167px] max-w-[167px] flex-col overflow-hidden bg-[#EAEAEC] p-4',\n                    'laptop:min-w-[205px] laptop:max-w-[205px] desktop:min-w-[264px] desktop:max-w-[264px] laptop:p-6 desktop:p-8',\n                    shape === 'round' ? 'rounded-[16px]' : 'rounded-none'\n                  )}\n                >\n                  <Picture className=\"w-full object-cover\" source={item?.img} />\n                  <p className=\"desktop:text-lg flex-1 text-center text-sm font-semibold\">{item?.title}</p>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Category\n"],
+  "mappings": "aAsBI,mBAAAA,EAcc,OAAAC,EARF,QAAAC,MANZ,oBArBJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BAiBpB,MAAMC,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,MAAAC,EAAQ,SAAU,SAAAC,EAAW,CAAC,CAAE,IAEzFP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAWE,EAAG,SAAUG,CAAS,EACpC,SAAAL,EAAC,OAAI,UAAWE,EAAG,sBAAsB,EACvC,SAAAF,EAAC,OAAI,UAAWE,EAAG,cAAe,sDAAsD,EACrF,SAAAK,GAAU,IAAI,CAACC,EAAMC,IAElBR,EAAC,OAEC,UAAWC,EACT,wFACA,+GACAI,IAAU,QAAU,iBAAmB,cACzC,EAEA,UAAAN,EAACG,EAAA,CAAQ,UAAU,sBAAsB,OAAQK,GAAM,IAAK,EAC5DR,EAAC,KAAE,UAAU,2DAA4D,SAAAQ,GAAM,MAAM,IARhFC,CASP,CAEH,EACH,EACF,EACF,EACF,EAIJ,IAAOC,EAAQN",
   "names": ["Fragment", "jsx", "jsxs", "cn", "Picture", "Category", "className", "shape", "products", "item", "index", "Category_default"]
 }

package/dist/esm/biz-components/Evaluate/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Fragment as x,jsx as e,jsxs as l}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import n from"../../components/picture.js";import{Avatar as m,AvatarImage as v,AvatarFallback as c}from"../../components/avatar.js";const f=({className:r="",shape:s="square",products:o=[]})=>{const i=t=>t?Array.from(new Array(Number(t)))||[]:[];return e(x,{children:e("div",{className:a("w-full",r),children:e("div",{className:a("flex overflow-hidden"),children:e("div",{className:a("w-full flex","gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden"),children:o?.map((t,d)=>l("div",{className:a("bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden","laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6",s==="round"?"rounded-2xl":"rounded-none"),children:[l("div",{className:a("mb-8 w-full flex justify-between laptop:mb-11 desktop:mb-16"),children:[l("div",{className:"flex-1",children:[e("h4",{className:"text-sm font-semibold laptop:text-lg",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:i(t?.rating)?.map?.((u,p)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("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"})})},p))})]}),e("div",{className:"size-10 overflow-hidden desktop:size-12",children:l(m,{className:"w-full h-full",children:[e(v,{src:t?.avatar}),e(c,{children:t?.title})]})})]}),e("p",{className:"flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] desktop:text-2xl",children:t?.description||""}),l("div",{className:a("mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden",s==="round"?"rounded-[8px]":"rounded-none"),children:[e("div",{className:"flex items-center mr-3 size-12 laptop:size-16 desktop:size-20",children:e(n,{className:"w-full object-cover",source:t?.img})}),e("p",{className:"flex-1 text-sm font-semibold line-clamp-2 desktop:text-lg",children:t?.subTitle||""})]})]},d))})})})})};var k=f;export{k as default};
+"use client";import{Fragment as f,jsx as e,jsxs as l}from"react/jsx-runtime";import"react";import{cn as a}from"../../helpers/utils.js";import n from"../../components/picture.js";import{Avatar as m,AvatarImage as v,AvatarFallback as c}from"../../components/avatar.js";const x=({className:r="",shape:s="square",products:i=[]})=>{const o=t=>t?Array.from(new Array(Number(t)))||[]:[];return e(f,{children:e("div",{className:a("w-full",r),children:e("div",{className:a("flex overflow-hidden"),children:e("div",{className:a("flex w-full","laptop:gap-4 gap-3 overflow-x-auto overflow-y-hidden"),children:i?.map((t,d)=>l("div",{className:a("box-border flex min-w-[288px] max-w-[288px] flex-col overflow-hidden bg-[#EAEAEC] p-4","laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6",s==="round"?"rounded-2xl":"rounded-none"),children:[l("div",{className:a("laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between"),children:[l("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-semibold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:o(t?.rating)?.map?.((u,p)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("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"})})},p))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:l(m,{className:"size-full",children:[e(v,{src:t?.avatar}),e(c,{children:t?.title})]})})]}),e("p",{className:"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]",children:t?.description||""}),l("div",{className:a("mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3",s==="round"?"rounded-[8px]":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(n,{className:"w-full object-cover",source:t?.img})}),e("p",{className:"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold",children:t?.subTitle||""})]})]},d))})})})})};var k=x;export{k as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Evaluate/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: string\n  title: string\n  subTitle: string\n  description: string\n  avatar?: string\n  rating: number\n}\n\nexport interface EvaluateProps {\n  products: EvaluateItem[]\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  /** \u5F62\u72B6 */\n  shape?: 'round' | 'square'\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({\n  className = '',\n  shape = 'square',\n  products = [],\n}) => {\n\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        <div className={cn('flex overflow-hidden')}>\n          <div className={cn('w-full flex', 'gap-3 laptop:gap-4 overflow-x-auto overflow-y-hidden')}>\n            {products?.map((item, index) => {\n              return (\n                <div\n                  key={index}\n                  className={cn(\n                    'bg-[#EAEAEC] p-4 flex flex-col min-w-[288px] max-w-[288px] box-border overflow-hidden',\n                    'laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6',\n                    shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n                  )}\n                >\n                  <div className={cn('mb-8 w-full flex justify-between laptop:mb-11 desktop:mb-16')}>\n                    <div className=\"flex-1\">\n                      <h4 className=\"text-sm font-semibold laptop:text-lg\">{item?.title}</h4>\n                      <div className=\"mt-1 flex items-center\">\n                      {\n                        handleRating(item?.rating)?.map?.((_, index) => {\n                          return <div key={index} className=\"mr-1\">\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                              <path\n                                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\"\n                                fill=\"#F77234\"\n                              />\n                            </svg>\n                          </div>\n                        })\n                      }\n                      </div>\n                    </div>\n                    <div className=\"size-10 overflow-hidden desktop:size-12\">\n                      <Avatar className=\"w-full h-full\">\n                        <AvatarImage src={item?.avatar} />\n                        <AvatarFallback>{item?.title}</AvatarFallback>\n                      </Avatar>\n                    </div>\n                  </div>\n                  <p className=\"flex-1 line-clamp-6 font-bold text-xl text-[#1D1D1F] desktop:text-2xl\">\n                    {item?.description || ''}\n                  </p>\n                  <div className={cn('mt-11 p-3 flex items-center bg-[#F7F8F9] overflow-hidden', shape === 'round' ? 'rounded-[8px]' : 'rounded-none')}>\n                    <div className=\"flex items-center mr-3 size-12 laptop:size-16 desktop:size-20\">\n                      <Picture\n                        className=\"w-full object-cover\"\n                        source={item?.img}\n                      />\n                    </div>\n                    <p className=\"flex-1 text-sm font-semibold line-clamp-2 desktop:text-lg\">\n                      {item?.subTitle || ''}\n                    </p>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Evaluate\n"],
-  "mappings": "AAsCI,mBAAAA,EAgBkB,OAAAC,EADF,QAAAC,MAfhB,oBAtCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BAqBpD,MAAMC,EAAoC,CAAC,CACzC,UAAAC,EAAY,GACZ,MAAAC,EAAQ,SACR,SAAAC,EAAW,CAAC,CACd,IAAM,CAEJ,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEZ,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAWE,EAAG,SAAUM,CAAS,EACpC,SAAAR,EAAC,OAAI,UAAWE,EAAG,sBAAsB,EACvC,SAAAF,EAAC,OAAI,UAAWE,EAAG,cAAe,sDAAsD,EACrF,SAAAQ,GAAU,IAAI,CAACG,EAAMC,IAElBb,EAAC,OAEC,UAAWC,EACT,wFACA,+HACAO,IAAU,QAAU,cAAgB,cACtC,EAEA,UAAAR,EAAC,OAAI,UAAWC,EAAG,6DAA6D,EAC9E,UAAAD,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,uCAAwC,SAAAa,GAAM,MAAM,EAClEb,EAAC,OAAI,UAAU,yBAEb,SAAAW,EAAaE,GAAM,MAAM,GAAG,MAAM,CAACE,EAAGD,IAC7Bd,EAAC,OAAgB,UAAU,OAChC,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANec,CAOjB,CACD,EAEH,GACF,EACAd,EAAC,OAAI,UAAU,0CACb,SAAAC,EAACG,EAAA,CAAO,UAAU,gBAChB,UAAAJ,EAACK,EAAA,CAAY,IAAKQ,GAAM,OAAQ,EAChCb,EAACM,EAAA,CAAgB,SAAAO,GAAM,MAAM,GAC/B,EACF,GACF,EACAb,EAAC,KAAE,UAAU,wEACV,SAAAa,GAAM,aAAe,GACxB,EACAZ,EAAC,OAAI,UAAWC,EAAG,2DAA4DO,IAAU,QAAU,gBAAkB,cAAc,EACjI,UAAAT,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACG,EAAA,CACC,UAAU,sBACV,OAAQU,GAAM,IAChB,EACF,EACAb,EAAC,KAAE,UAAU,4DACV,SAAAa,GAAM,UAAY,GACrB,GACF,IA7CKC,CA8CP,CAEH,EACH,EACF,EACF,EACF,CAEJ,EAEA,IAAOE,EAAQT",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: string\n  title: string\n  subTitle: string\n  description: string\n  avatar?: string\n  rating: number\n}\n\nexport interface EvaluateProps {\n  products: EvaluateItem[]\n  className?: string\n  /** \u4E3B\u9898\u8272*/\n  theme?: 'light' | 'dark'\n  /** \u5F62\u72B6 */\n  shape?: 'round' | 'square'\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', shape = 'square', products = [] }) => {\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  return (\n    <>\n      <div className={cn('w-full', className)}>\n        <div className={cn('flex overflow-hidden')}>\n          <div className={cn('flex w-full', 'laptop:gap-4 gap-3 overflow-x-auto overflow-y-hidden')}>\n            {products?.map((item, index) => {\n              return (\n                <div\n                  key={index}\n                  className={cn(\n                    'box-border flex min-w-[288px] max-w-[288px] flex-col overflow-hidden bg-[#EAEAEC] p-4',\n                    'laptop:min-w-[316px] laptop:max-w-[316px] desktop:min-w-[404px] desktop:max-w-[404px] desktop:pt-4 desktop:px-6 desktop:pb-6',\n                    shape === 'round' ? 'rounded-2xl' : 'rounded-none'\n                  )}\n                >\n                  <div className={cn('laptop:mb-11 desktop:mb-16 mb-8 flex w-full justify-between')}>\n                    <div className=\"flex-1\">\n                      <h4 className=\"laptop:text-lg text-sm font-semibold\">{item?.title}</h4>\n                      <div className=\"mt-1 flex items-center\">\n                        {handleRating(item?.rating)?.map?.((_, index) => {\n                          return (\n                            <div key={index} className=\"mr-1\">\n                              <svg\n                                xmlns=\"http://www.w3.org/2000/svg\"\n                                width=\"16\"\n                                height=\"16\"\n                                viewBox=\"0 0 16 16\"\n                                fill=\"none\"\n                              >\n                                <path\n                                  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\"\n                                  fill=\"#F77234\"\n                                />\n                              </svg>\n                            </div>\n                          )\n                        })}\n                      </div>\n                    </div>\n                    <div className=\"desktop:size-12 size-10 overflow-hidden\">\n                      <Avatar className=\"size-full\">\n                        <AvatarImage src={item?.avatar} />\n                        <AvatarFallback>{item?.title}</AvatarFallback>\n                      </Avatar>\n                    </div>\n                  </div>\n                  <p className=\"desktop:text-2xl line-clamp-6 flex-1 text-xl font-bold text-[#1D1D1F]\">\n                    {item?.description || ''}\n                  </p>\n                  <div\n                    className={cn(\n                      'mt-11 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n                      shape === 'round' ? 'rounded-[8px]' : 'rounded-none'\n                    )}\n                  >\n                    <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n                      <Picture className=\"w-full object-cover\" source={item?.img} />\n                    </div>\n                    <p className=\"desktop:text-lg line-clamp-2 flex-1 text-sm font-semibold\">{item?.subTitle || ''}</p>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default Evaluate\n"],
+  "mappings": "aAkCI,mBAAAA,EAgBkB,OAAAC,EADF,QAAAC,MAfhB,oBAjCJ,MAAkB,QAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BAqBpD,MAAMC,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,MAAAC,EAAQ,SAAU,SAAAC,EAAW,CAAC,CAAE,IAAM,CACjG,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OACEZ,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAWE,EAAG,SAAUM,CAAS,EACpC,SAAAR,EAAC,OAAI,UAAWE,EAAG,sBAAsB,EACvC,SAAAF,EAAC,OAAI,UAAWE,EAAG,cAAe,sDAAsD,EACrF,SAAAQ,GAAU,IAAI,CAACG,EAAMC,IAElBb,EAAC,OAEC,UAAWC,EACT,wFACA,+HACAO,IAAU,QAAU,cAAgB,cACtC,EAEA,UAAAR,EAAC,OAAI,UAAWC,EAAG,6DAA6D,EAC9E,UAAAD,EAAC,OAAI,UAAU,SACb,UAAAD,EAAC,MAAG,UAAU,uCAAwC,SAAAa,GAAM,MAAM,EAClEb,EAAC,OAAI,UAAU,yBACZ,SAAAW,EAAaE,GAAM,MAAM,GAAG,MAAM,CAACE,EAAGD,IAEnCd,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GAZQc,CAaV,CAEH,EACH,GACF,EACAd,EAAC,OAAI,UAAU,0CACb,SAAAC,EAACG,EAAA,CAAO,UAAU,YAChB,UAAAJ,EAACK,EAAA,CAAY,IAAKQ,GAAM,OAAQ,EAChCb,EAACM,EAAA,CAAgB,SAAAO,GAAM,MAAM,GAC/B,EACF,GACF,EACAb,EAAC,KAAE,UAAU,wEACV,SAAAa,GAAM,aAAe,GACxB,EACAZ,EAAC,OACC,UAAWC,EACT,2DACAO,IAAU,QAAU,gBAAkB,cACxC,EAEA,UAAAT,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACG,EAAA,CAAQ,UAAU,sBAAsB,OAAQU,GAAM,IAAK,EAC9D,EACAb,EAAC,KAAE,UAAU,4DAA6D,SAAAa,GAAM,UAAY,GAAG,GACjG,IAnDKC,CAoDP,CAEH,EACH,EACF,EACF,EACF,CAEJ,EAEA,IAAOE,EAAQT",
   "names": ["Fragment", "jsx", "jsxs", "cn", "Picture", "Avatar", "AvatarImage", "AvatarFallback", "Evaluate", "className", "shape", "products", "handleRating", "num", "item", "index", "_", "Evaluate_default"]
 }

package/dist/esm/biz-components/Graphic/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as k}from"react/jsx-runtime";import p,{useMemo as d}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as f}from"../../shared/Styles.js";import{Carousel as u,CarouselContent as g,CarouselItem as h}from"../../components/index.js";import{Picture as b,Text as C}from"../../components/index.js";const r=p.forwardRef(({items:o,shape:i,className:n,...m},x)=>{const l=o?.length||0,c=d(()=>{const s="basis-[296px]";let t="";return l===1&&(t="basis-[100%]"),l===2&&(t="tablet:basis-1/2"),l===3&&(t="laptop:basis-1/3"),l>3&&(t="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${s} ${t}`},[l]);return e(u,{ref:x,opts:{align:"start"},className:a("px-4 tablet:px-8 laptop:px-16",n),...m,children:e(p.Fragment,{children:e(g,{children:o.map((s,t)=>e(h,{className:a("pl-3 laptop:pl-4 flex-shrink-0 h-[360px]",c),children:k("div",{className:a("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":i==="round"}),children:[e(b,{className:"h-full ",imgClassName:"h-full object-cover",source:s?.imgUrl}),e("div",{className:"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]",children:e(C,{html:s?.title,style:{color:s?.textColor},className:"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2"})})]})},t+s?.title))})},".0")})});r.displayName="Graphic";var S=f(r);export{S as default};
+"use client";import{jsx as e,jsxs as k}from"react/jsx-runtime";import p,{useMemo as d}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as f}from"../../shared/Styles.js";import{Carousel as u,CarouselContent as g,CarouselItem as h}from"../../components/index.js";import{Picture as b,Text as C}from"../../components/index.js";const r=p.forwardRef(({items:o,shape:i,className:n,...m},x)=>{const l=o?.length||0,c=d(()=>{const s="basis-[296px]";let t="";return l===1&&(t="basis-[100%]"),l===2&&(t="tablet:basis-1/2"),l===3&&(t="laptop:basis-1/3"),l>3&&(t="laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]"),`${s} ${t}`},[l]);return e(u,{ref:x,opts:{align:"start"},className:a("tablet:px-8 laptop:px-16 px-4",n),...m,children:e(p.Fragment,{children:e(g,{children:o.map((s,t)=>e(h,{className:a("laptop:pl-4 h-[360px] shrink-0 pl-3",c),children:k("div",{className:a("relative h-full",{"rounded-xl overflow-hidden laptop:rounded-2xl":i==="round"}),children:[e(b,{className:"h-full ",imgClassName:"h-full object-cover",source:s?.imgUrl}),e("div",{className:"laptop:p-6 absolute inset-0 z-[1] flex flex-col justify-end p-4",children:e(C,{html:s?.title,style:{color:s?.textColor},className:"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium"})})]})},t+s?.title))})},".0")})});r.displayName="Graphic";var S=f(r);export{S as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Graphic/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport interface GraphicProps {\n  className?: string\n  items: {\n    imgUrl: string\n    title: string\n    textColor?: string\n  }[]\n  shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ items, shape, className, ...props }, ref) => {\n  const itemsLength = items?.length || 0\n\n  const itemStyle = useMemo(() => {\n    const basisStyle = 'basis-[296px]'\n    let breakPointStyle = ''\n    if (itemsLength === 1) {\n      breakPointStyle = 'basis-[100%]'\n    }\n    if (itemsLength === 2) {\n      breakPointStyle = 'tablet:basis-1/2'\n    }\n    if (itemsLength === 3) {\n      breakPointStyle = 'laptop:basis-1/3'\n    }\n    if (itemsLength > 3) {\n      breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n    }\n    return `${basisStyle} ${breakPointStyle}`\n  }, [itemsLength])\n\n  return (\n    <Carousel\n      ref={ref}\n      opts={{\n        align: 'start',\n      }}\n      className={cn('px-4 tablet:px-8 laptop:px-16', className)}\n      {...props}\n    >\n      <React.Fragment key=\".0\">\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem\n              key={index + item?.title}\n              className={cn('pl-3 laptop:pl-4 flex-shrink-0 h-[360px]', itemStyle)}\n            >\n              <div className={cn(\"relative h-full\", {\n                ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round'\n              })}>\n                <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl} />\n                <div className=\"p-4 absolute inset-0 laptop:p-6 flex flex-col justify-end z-[1]\">\n                  <Text\n                    html={item?.title}\n                    style={{\n                      color: item?.textColor,\n                    }}\n                    className=\"text-[24px] lg-desktop:text-[32px] font-bold leading-[1.2] [&_span]:font-medium desktop:text-[24px] desktop:[&_span]:text-[18px] [&_span]:text-[14px] text-lines-2\"\n                  />\n                </div>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n      </React.Fragment>\n    </Carousel>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
-  "mappings": "AAqDc,OAGE,OAAAA,EAHF,QAAAC,MAAA,oBArDd,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAY9B,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,MAAAU,EAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC7G,MAAMC,EAAcL,GAAO,QAAU,EAE/BM,EAAYf,EAAQ,IAAM,CAC9B,MAAMgB,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,OACEjB,EAACM,EAAA,CACC,IAAKU,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWZ,EAAG,gCAAiCU,CAAS,EACvD,GAAGC,EAEJ,SAAAf,EAACE,EAAM,SAAN,CACC,SAAAF,EAACO,EAAA,CACE,SAAAK,EAAM,IAAI,CAACS,EAAMC,IAChBtB,EAACQ,EAAA,CAEC,UAAWJ,EAAG,2CAA4Cc,CAAS,EAEnE,SAAAjB,EAAC,OAAI,UAAWG,EAAG,kBAAmB,CACnC,gDAAkDS,IAAU,OAC/D,CAAC,EACC,UAAAb,EAACS,EAAA,CAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQY,GAAM,OAAQ,EACtFrB,EAAC,OAAI,UAAU,kEACb,SAAAA,EAACU,EAAA,CACC,KAAMW,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBKC,EAAQD,GAAM,KAiBrB,CACD,EACH,GAvBkB,IAwBpB,EACF,CAEJ,CAAC,EAEDV,EAAQ,YAAc,UAEtB,IAAOY,EAAQlB,EAAWM,CAAO",
+  "sourcesContent": ["'use client'\nimport React, { useMemo } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport interface GraphicProps {\n  className?: string\n  items: {\n    imgUrl: string\n    title: string\n    textColor?: string\n  }[]\n  shape?: 'round' | 'square'\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ items, shape, className, ...props }, ref) => {\n  const itemsLength = items?.length || 0\n\n  const itemStyle = useMemo(() => {\n    const basisStyle = 'basis-[296px]'\n    let breakPointStyle = ''\n    if (itemsLength === 1) {\n      breakPointStyle = 'basis-[100%]'\n    }\n    if (itemsLength === 2) {\n      breakPointStyle = 'tablet:basis-1/2'\n    }\n    if (itemsLength === 3) {\n      breakPointStyle = 'laptop:basis-1/3'\n    }\n    if (itemsLength > 3) {\n      breakPointStyle = 'laptop:basis-[288px] desktop:basis-[316px] lg-desktop:basis-[404px]'\n    }\n    return `${basisStyle} ${breakPointStyle}`\n  }, [itemsLength])\n\n  return (\n    <Carousel\n      ref={ref}\n      opts={{\n        align: 'start',\n      }}\n      className={cn('tablet:px-8 laptop:px-16 px-4', className)}\n      {...props}\n    >\n      <React.Fragment key=\".0\">\n        <CarouselContent>\n          {items.map((item, index) => (\n            <CarouselItem key={index + item?.title} className={cn('laptop:pl-4 h-[360px] shrink-0 pl-3', itemStyle)}>\n              <div\n                className={cn('relative h-full', {\n                  ['rounded-xl overflow-hidden laptop:rounded-2xl']: shape === 'round',\n                })}\n              >\n                <Picture className=\"h-full \" imgClassName=\"h-full object-cover\" source={item?.imgUrl} />\n                <div className=\"laptop:p-6 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n                  <Text\n                    html={item?.title}\n                    style={{\n                      color: item?.textColor,\n                    }}\n                    className=\"lg-desktop:text-[32px] desktop:text-[24px] desktop:[&_span]:text-[18px] text-lines-2 text-[24px] font-bold leading-[1.2] [&_span]:text-[14px] [&_span]:font-medium\"\n                  />\n                </div>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n      </React.Fragment>\n    </Carousel>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
+  "mappings": "aAmDc,OAKE,OAAAA,EALF,QAAAC,MAAA,oBAlDd,OAAOC,GAAS,WAAAC,MAAe,QAC/B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,YAAAC,EAAU,mBAAAC,EAAiB,gBAAAC,MAAoB,4BACxD,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAY9B,MAAMC,EAAUT,EAAM,WAAyC,CAAC,CAAE,MAAAU,EAAO,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC7G,MAAMC,EAAcL,GAAO,QAAU,EAE/BM,EAAYf,EAAQ,IAAM,CAC9B,MAAMgB,EAAa,gBACnB,IAAIC,EAAkB,GACtB,OAAIH,IAAgB,IAClBG,EAAkB,gBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,IAAgB,IAClBG,EAAkB,oBAEhBH,EAAc,IAChBG,EAAkB,uEAEb,GAAGD,CAAU,IAAIC,CAAe,EACzC,EAAG,CAACH,CAAW,CAAC,EAEhB,OACEjB,EAACM,EAAA,CACC,IAAKU,EACL,KAAM,CACJ,MAAO,OACT,EACA,UAAWZ,EAAG,gCAAiCU,CAAS,EACvD,GAAGC,EAEJ,SAAAf,EAACE,EAAM,SAAN,CACC,SAAAF,EAACO,EAAA,CACE,SAAAK,EAAM,IAAI,CAACS,EAAMC,IAChBtB,EAACQ,EAAA,CAAuC,UAAWJ,EAAG,sCAAuCc,CAAS,EACpG,SAAAjB,EAAC,OACC,UAAWG,EAAG,kBAAmB,CAC9B,gDAAkDS,IAAU,OAC/D,CAAC,EAED,UAAAb,EAACS,EAAA,CAAQ,UAAU,UAAU,aAAa,sBAAsB,OAAQY,GAAM,OAAQ,EACtFrB,EAAC,OAAI,UAAU,kEACb,SAAAA,EAACU,EAAA,CACC,KAAMW,GAAM,MACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,UAAU,qKACZ,EACF,GACF,GAhBiBC,EAAQD,GAAM,KAiBjC,CACD,EACH,GAtBkB,IAuBpB,EACF,CAEJ,CAAC,EAEDV,EAAQ,YAAc,UAEtB,IAAOY,EAAQlB,EAAWM,CAAO",
   "names": ["jsx", "jsxs", "React", "useMemo", "cn", "withStyles", "Carousel", "CarouselContent", "CarouselItem", "Picture", "Text", "Graphic", "items", "shape", "className", "props", "ref", "itemsLength", "itemStyle", "basisStyle", "breakPointStyle", "item", "index", "Graphic_default"]
 }

package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import m from"react";import{Button as c,Picture as k,Text as N}from"../../components/index.js";import{cn as t}from"../../helpers/index.js";import{withStyles as u}from"../../shared/Styles.js";const p=m.forwardRef(({title:d,subtitle:x,background:g,primaryButton:l,secondaryButton:s,theme:r="light",className:b,products:i=[]},v)=>{const n=r==="dark"?"text-white":"text-[#1D1D1F]",f=r==="dark"?"bg-white":"bg-[#1D1D1F]";return a("div",{ref:v,className:t(r==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full",b),children:[e(k,{className:"absolute top-0",source:g}),a("div",{className:"relative z-10 flex flex-col gap-8 px-32",children:[a("div",{className:"max-w-[686px] space-y-4",children:[e("h1",{className:t("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",n),children:d}),e("p",{className:t("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",n),children:x})]}),a("div",{className:"flex items-center gap-4",children:[s&&e(c,{size:"lg",variant:"primary",className:"hero-banner-primary-button",...s,children:s.text}),l&&e(c,{size:"lg",variant:"secondary",...l,className:"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white",children:l.text})]})]}),i.length>0&&e("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:i.map((h,o)=>a(m.Fragment,{children:[e(N,{className:t("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",r==="dark"?"text-white":"text-[#1D1D1F]"),children:h.title}),o<i.length-1&&e("div",{className:t("h-4 w-px",f)})]},o))})]})});p.displayName="HeroBanner";var H=u(p);export{H as default};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import m from"react";import{Button as c,Picture as k,Text as N}from"../../components/index.js";import{cn as t}from"../../helpers/index.js";import{withStyles as u}from"../../shared/Styles.js";const p=m.forwardRef(({title:d,subtitle:x,background:g,primaryButton:l,secondaryButton:s,theme:r="light",className:b,products:i=[]},v)=>{const n=r==="dark"?"text-white":"text-[#1D1D1F]",f=r==="dark"?"bg-white":"bg-[#1D1D1F]";return a("div",{ref:v,className:t(r==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full",b),children:[e(k,{className:"absolute top-0",source:g}),a("div",{className:"relative z-10 flex flex-col gap-8 px-32",children:[a("div",{className:"max-w-[686px] space-y-4",children:[e("h1",{className:t("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",n),children:d}),e("p",{className:t("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",n),children:x})]}),a("div",{className:"flex items-center gap-4",children:[s&&e(c,{size:"lg",variant:"primary",className:"hero-banner-primary-button",...s,children:s.text}),l&&e(c,{size:"lg",variant:"secondary",...l,className:"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white",children:l.text})]})]}),i.length>0&&e("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:i.map((h,o)=>a(m.Fragment,{children:[e(N,{className:t("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",r==="dark"?"text-white":"text-[#1D1D1F]"),children:h.title}),o<i.length-1&&e("div",{className:t("h-4 w-px",f)})]},o))})]})});p.displayName="HeroBanner";var H=u(p);export{H as default};
 //# sourceMappingURL=HeroBanner.js.map

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n  ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n    const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n    const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full',\n          className\n        )}\n      >\n        <Picture className=\"absolute top-0\" source={background} />\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"relative z-10 flex flex-col gap-8 px-32\">\n          <div className=\"max-w-[686px] space-y-4\">\n            <h1\n              className={cn(\n                'hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]',\n                textColorClass\n              )}\n            >\n              {title}\n            </h1>\n            <p\n              className={cn(\n                'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n                textColorClass\n              )}\n            >\n              {subtitle}\n            </p>\n          </div>\n\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"flex items-center gap-4\">\n            {secondaryButton && (\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\" {...secondaryButton}>\n                {secondaryButton.text}\n              </Button>\n            )}\n            {primaryButton && (\n              <Button\n                size=\"lg\"\n                variant=\"secondary\"\n                {...primaryButton}\n                className=\"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white\"\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {products.length > 0 && (\n          <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n            {products.map((product, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  className={cn(\n                    'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n                    theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n                  )}\n                >\n                  {product.title}\n                </Text>\n                {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "AAoBQ,cAAAA,EAGE,QAAAC,MAHF,oBApBR,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaN,EAAM,WACvB,CAAC,CAAE,MAAAO,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,UAAAC,EAAW,SAAAC,EAAW,CAAC,CAAE,EAAGC,IAAQ,CACnH,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,OACEb,EAAC,OACC,IAAKgB,EACL,UAAWX,EACTQ,IAAU,OAAS,YAAc,GACjC,wFACAC,CACF,EAEA,UAAAf,EAACI,EAAA,CAAQ,UAAU,iBAAiB,OAAQO,EAAY,EAExDV,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,MACC,UAAWM,EACT,oFACAY,CACF,EAEC,SAAAT,EACH,EACAT,EAAC,KACC,UAAWM,EACT,4EACAY,CACF,EAEC,SAAAR,EACH,GACF,EAGAT,EAAC,OAAI,UAAU,0BACZ,UAAAY,GACCb,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAA8B,GAAGU,EAC5E,SAAAA,EAAgB,KACnB,EAEDD,GACCZ,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,YACP,GAAGS,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,GACjBhB,EAAC,OAAI,UAAU,mDACZ,SAAAgB,EAAS,IAAI,CAACI,EAASC,IACtBpB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACK,EAAA,CACC,UAAWC,EACT,gFACAQ,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,GAAKhB,EAAC,OAAI,UAAWM,EAAG,WAAYa,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
+  "sourcesContent": ["'use client'\nimport React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n  ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n    const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n    const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          'lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full',\n          className\n        )}\n      >\n        <Picture className=\"absolute top-0\" source={background} />\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"relative z-10 flex flex-col gap-8 px-32\">\n          <div className=\"max-w-[686px] space-y-4\">\n            <h1\n              className={cn(\n                'hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]',\n                textColorClass\n              )}\n            >\n              {title}\n            </h1>\n            <p\n              className={cn(\n                'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n                textColorClass\n              )}\n            >\n              {subtitle}\n            </p>\n          </div>\n\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"flex items-center gap-4\">\n            {secondaryButton && (\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\" {...secondaryButton}>\n                {secondaryButton.text}\n              </Button>\n            )}\n            {primaryButton && (\n              <Button\n                size=\"lg\"\n                variant=\"secondary\"\n                {...primaryButton}\n                className=\"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white\"\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {products.length > 0 && (\n          <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n            {products.map((product, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  className={cn(\n                    'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n                    theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n                  )}\n                >\n                  {product.title}\n                </Text>\n                {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "aAqBQ,cAAAA,EAGE,QAAAC,MAHF,oBApBR,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaN,EAAM,WACvB,CAAC,CAAE,MAAAO,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,UAAAC,EAAW,SAAAC,EAAW,CAAC,CAAE,EAAGC,IAAQ,CACnH,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,OACEb,EAAC,OACC,IAAKgB,EACL,UAAWX,EACTQ,IAAU,OAAS,YAAc,GACjC,wFACAC,CACF,EAEA,UAAAf,EAACI,EAAA,CAAQ,UAAU,iBAAiB,OAAQO,EAAY,EAExDV,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,MACC,UAAWM,EACT,oFACAY,CACF,EAEC,SAAAT,EACH,EACAT,EAAC,KACC,UAAWM,EACT,4EACAY,CACF,EAEC,SAAAR,EACH,GACF,EAGAT,EAAC,OAAI,UAAU,0BACZ,UAAAY,GACCb,EAACG,EAAA,CAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAA8B,GAAGU,EAC5E,SAAAA,EAAgB,KACnB,EAEDD,GACCZ,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,YACP,GAAGS,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,GACjBhB,EAAC,OAAI,UAAU,mDACZ,SAAAgB,EAAS,IAAI,CAACI,EAASC,IACtBpB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACK,EAAA,CACC,UAAWC,EACT,gFACAQ,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,GAAKhB,EAAC,OAAI,UAAWM,EAAG,WAAYa,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
   "names": ["jsx", "jsxs", "React", "Button", "Picture", "Text", "cn", "withStyles", "HeroBanner", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "index", "HeroBanner_default"]
 }

package/dist/esm/biz-components/HeroBanner/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/index.tsx"],
-  "sourcesContent": ["export { default } from './HeroBanner.js'"],
+  "sourcesContent": ["export { default } from './HeroBanner.js'\n"],
   "mappings": "AAAA,OAAS,WAAAA,MAAe",
   "names": ["default"]
 }