@anker-in/headless-ui 1.1.15 → 1.1.17-alpha.1765854227659

package/dist/cjs/stories/tabsWithMedia.stories.js

@@ -0,0 +1,68 @@
+"use strict";var c=Object.create;var o=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var r=(e,t)=>{for(var i in t)o(e,i,{get:t[i],enumerable:!0})},p=(e,t,i,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of d(t))!b.call(e,a)&&a!==i&&o(e,a,{get:()=>t[a],enumerable:!(n=f(t,a))||n.enumerable});return e};var h=(e,t,i)=>(i=e!=null?c(m(e)):{},p(t||!e||!e.__esModule?o(i,"default",{value:e,enumerable:!0}):i,e)),_=e=>p(o({},"__esModule",{value:!0}),e);var T={};r(T,{Default:()=>u,FourItems:()=>v,ThreeItems:()=>w,WithCustomStyles:()=>S,default:()=>y});module.exports=_(T);var R=require("react"),l=h(require("../biz-components/TabsWithMedia/index.js"));const g={title:"Biz Components/TabsWithMedia",component:l.default,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:"Tab \u5207\u6362\u5A92\u4F53\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u6301\u89C6\u9891\u81EA\u52A8\u5207\u6362 Tab\u3001Swiper \u5185\u5BB9\u5207\u6362\u3001\u52A8\u753B\u6548\u679C\uFF0C\u9002\u5408\u5C55\u793A\u591A\u4E2A\u529F\u80FD\u7279\u6027"}}},tags:["autodocs"]};var y=g;const s={title:"All You Need, All-in-One",poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046",alt:"All You Need, All-in-One",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/1478fa98828e4879890963a4c60fff14.mp4",alt:"All You Need, All-in-One Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046",mimeType:"video/mp4"},mobvideo:{url:"https://cdn.shopify.com/videos/c/vp/b8cf80b388c54228860dd0bf1de7c36c/b8cf80b388c54228860dd0bf1de7c36c.SD-480p-0.9Mbps-50503406.mp4",alt:"All You Need, All-in-One Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046",mimeType:"video/mp4"},items:[{tab:"Self-Emptying",desc:"3L dust bag supports up to 75 days of maintenance-free cleaning.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6a7e92ad-5be0-4ba1-a549-eb794a8cbdcb_Property_1_Self-Emptying.png?v=1751509824",alt:"Self-Emptying",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6a7e92ad-5be0-4ba1-a549-eb794a8cbdcb_Property_1_Self-Emptying.png?v=1751509824",mimeType:"image/png"},poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046",alt:"Self-Emptying Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046",mimeType:"image/png"}},{tab:"Self-Refilling",desc:"Features a 2.5L clean water tank, sufficient for 4 mopping sessions in a 2,000 sq ft house.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/98814790-6119-48d3-9518-3706103971ce_Property_1_Self-Refilling.png?v=1751509870",alt:"Self-Refilling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/98814790-6119-48d3-9518-3706103971ce_Property_1_Self-Refilling.png?v=1751509870",mimeType:"image/png"},poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/62f8efdb-baa0-4b66-b0ce-e43ba80aaa93_1952837054_2.png?v=1751440082",alt:"Self-Refilling Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/62f8efdb-baa0-4b66-b0ce-e43ba80aaa93_1952837054_2.png?v=1751440082",mimeType:"image/png"}},{tab:"Self-Washing",desc:"Automatically washes the mop after each session.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/cb041a84-9e89-4844-ac1b-8fc6fff8f13c_Property_1_Self-Washing.png?v=1751509912",alt:"Self-Washing",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/cb041a84-9e89-4844-ac1b-8fc6fff8f13c_Property_1_Self-Washing.png?v=1751509912",mimeType:"image/png"},poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/0506a613-f916-4bce-84ab-a3da4cd9078a_1952837054_4.png?v=1751440128",alt:"Self-Washing Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/0506a613-f916-4bce-84ab-a3da4cd9078a_1952837054_4.png?v=1751440128",mimeType:"image/png"}},{tab:"Hot Air Drying",desc:"Intelligent 35-50\xB0C (95-122\xB0F) temperature control for efficient drying.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/074f6c07-dc85-44b1-9351-fcc8b3423f1f_Property_1_Hot_Air_Drying.png?v=1751509932",alt:"Hot Air Drying",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/074f6c07-dc85-44b1-9351-fcc8b3423f1f_Property_1_Hot_Air_Drying.png?v=1751509932",mimeType:"image/png"},poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/65e9ba72-06d6-49cb-90b4-27406c409567_1952837054_3.png?v=1751440106",alt:"Hot Air Drying Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/65e9ba72-06d6-49cb-90b4-27406c409567_1952837054_3.png?v=1751440106",mimeType:"image/png"}},{tab:"Wastewater Collection",desc:"1.8L tank collects dirty water.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6f392913-919d-4842-9b40-a1736c3b1213_Property_1_Wastewater_Collection.png?v=1751509955",alt:"Wastewater Collection",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6f392913-919d-4842-9b40-a1736c3b1213_Property_1_Wastewater_Collection.png?v=1751509955",mimeType:"image/png"},poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/39b69bf4-e615-42b7-8eda-eaef031c79c4_1952837054_5.png?v=1751536624",alt:"Wastewater Collection Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/39b69bf4-e615-42b7-8eda-eaef031c79c4_1952837054_5.png?v=1751536624",mimeType:"image/png"}},{tab:"Automatic Detergent Dispensing",desc:"Automatically dispenses detergent, lasting up to  6 months.",icon:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/57d9d293-e511-40a5-a100-0763f7681ba6_Property_1_Automatic_Detergent_Dispensing.png?v=1751510012",alt:"Automatic Detergent Dispensing",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/57d9d293-e511-40a5-a100-0763f7681ba6_Property_1_Automatic_Detergent_Dispensing.png?v=1751510012",mimeType:"image/png"},poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/03b6c2d7-e5a8-47c4-9d21-20fcb70eb385_1952837054_6.png?v=1751536659",alt:"Automatic Detergent Dispensing Poster",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/03b6c2d7-e5a8-47c4-9d21-20fcb70eb385_1952837054_6.png?v=1751536659",mimeType:"image/png"}}]},u={args:{data:s}},w={args:{data:{...s,items:s.items.slice(0,3),timeIdx:[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2}]}}},v={args:{data:{...s,items:s.items.slice(0,4),timeIdx:[{time:2.4,point:2.4,highlightIdx:0},{time:2.5,point:4.9,highlightIdx:1},{time:2.5,point:7.4,highlightIdx:2},{time:2.8,point:10.2,highlightIdx:3}]}}},S={args:{data:s,className:"custom-tabs-with-media"},parameters:{docs:{description:{story:`
+\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A
+
+**\u6839\u5143\u7D20\uFF1A**
+- \`.tabs-with-media\` - \u7EC4\u4EF6\u6839\u5BB9\u5668
+
+**\u6807\u9898\u533A\u57DF\uFF1A**
+- \`.tabs-with-media__title\` - \u4E3B\u6807\u9898
+
+**\u6807\u7B7E\u9875\u533A\u57DF\uFF1A**
+- \`.tabs-with-media__tabs-wrapper\` - \u6807\u7B7E\u9875\u5916\u5C42\u5305\u88C5\u5668
+- \`.tabs-with-media__tabs-inner\` - \u6807\u7B7E\u9875\u5185\u5C42\u5BB9\u5668
+- \`.tabs-with-media__tabs-container\` - \u6807\u7B7E\u9875\u5BB9\u5668\uFF08\u5305\u542B\u6240\u6709\u6807\u7B7E\u9879\uFF09
+- \`.tabs-with-media__tab-item\` - \u5355\u4E2A\u6807\u7B7E\u9879\uFF08motion.div\uFF09
+- \`.tabs-with-media__tab-inner\` - \u6807\u7B7E\u9879\u5185\u5C42\u5BB9\u5668
+- \`.tabs-with-media__tab-content\` - \u6807\u7B7E\u9879\u5185\u5BB9\u5BB9\u5668
+- \`.tabs-with-media__tab-icon\` - \u6807\u7B7E\u56FE\u6807\u5BB9\u5668
+- \`.tabs-with-media__tab-icon-image\` - \u6807\u7B7E\u56FE\u6807\u56FE\u7247
+- \`.tabs-with-media__tab-text-wrapper\` - \u6807\u7B7E\u6587\u672C\u5305\u88C5\u5668
+- \`.tabs-with-media__tab-text\` - \u6807\u7B7E\u6587\u672C
+
+**\u63CF\u8FF0\u533A\u57DF\uFF1A**
+- \`.tabs-with-media__description-container\` - \u63CF\u8FF0\u533A\u57DF\u5916\u5C42\u5BB9\u5668
+- \`.tabs-with-media__description-swiper\` - \u63CF\u8FF0 Swiper \u5B9E\u4F8B
+- \`.tabs-with-media__description-slide\` - \u63CF\u8FF0\u6ED1\u5757
+- \`.tabs-with-media__description-content\` - \u63CF\u8FF0\u5185\u5BB9\u5BB9\u5668
+- \`.tabs-with-media__description-text\` - \u63CF\u8FF0\u6587\u672C
+
+**\u89C6\u9891\u533A\u57DF\uFF1A**
+- \`.tabs-with-media__video-wrapper\` - \u89C6\u9891\u5916\u5C42\u5BB9\u5668
+- \`.tabs-with-media__video\` - \u89C6\u9891\u5143\u7D20
+
+**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */
+.tabs-with-media__title {
+  color: #ff6b6b;
+}
+
+/* \u81EA\u5B9A\u4E49\u6807\u7B7E\u9879\u60AC\u505C\u6548\u679C */
+.tabs-with-media__tab-item:hover .tabs-with-media__tab-icon {
+  transform: scale(1.1);
+  transition: transform 0.3s ease;
+}
+
+/* \u81EA\u5B9A\u4E49\u6D3B\u8DC3\u6807\u7B7E\u6837\u5F0F */
+.tabs-with-media__tab-content {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */
+.tabs-with-media__description-text {
+  font-weight: 500;
+  line-height: 1.8;
+}
+
+/* \u81EA\u5B9A\u4E49\u89C6\u9891\u5C3A\u5BF8 */
+.tabs-with-media__video {
+  max-height: 600px;
+}
+
+/* \u81EA\u5B9A\u4E49\u6807\u7B7E\u56FE\u6807\u80CC\u666F */
+.tabs-with-media__tab-icon {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+\`\`\`
+        `}}}};
+//# sourceMappingURL=tabsWithMedia.stories.js.map

package/dist/cjs/stories/tabsWithMedia.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/tabsWithMedia.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport TabsWithMedia from '../biz-components/TabsWithMedia/index.js'\nimport type { TabsWithMediaProps } from '../biz-components/TabsWithMedia/types.js'\n\nconst meta = {\n  title: 'Biz Components/TabsWithMedia',\n  component: TabsWithMedia,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: 'Tab \u5207\u6362\u5A92\u4F53\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u6301\u89C6\u9891\u81EA\u52A8\u5207\u6362 Tab\u3001Swiper \u5185\u5BB9\u5207\u6362\u3001\u52A8\u753B\u6548\u679C\uFF0C\u9002\u5408\u5C55\u793A\u591A\u4E2A\u529F\u80FD\u7279\u6027',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof TabsWithMedia>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: TabsWithMediaProps['data'] = {\n  title: 'All You Need, All-in-One',\n  poster: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046',\n    alt: 'All You Need, All-in-One',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046',\n    mimeType: 'image/png',\n  },\n  video: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/1478fa98828e4879890963a4c60fff14.mp4',\n    alt: 'All You Need, All-in-One Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046',\n    mimeType: 'video/mp4',\n  },\n  mobvideo: {\n    url: 'https://cdn.shopify.com/videos/c/vp/b8cf80b388c54228860dd0bf1de7c36c/b8cf80b388c54228860dd0bf1de7c36c.SD-480p-0.9Mbps-50503406.mp4',\n    alt: 'All You Need, All-in-One Mobile Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046',\n    mimeType: 'video/mp4',\n  },\n  items: [\n    {\n      tab: 'Self-Emptying',\n      desc: '3L dust bag supports up to 75 days of maintenance-free cleaning.',\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6a7e92ad-5be0-4ba1-a549-eb794a8cbdcb_Property_1_Self-Emptying.png?v=1751509824',\n        alt: 'Self-Emptying',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6a7e92ad-5be0-4ba1-a549-eb794a8cbdcb_Property_1_Self-Emptying.png?v=1751509824',\n        mimeType: 'image/png',\n      },\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046',\n        alt: 'Self-Emptying Poster',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/a4bb1353-863a-4541-8abb-fd19f1db548d_1952837054.png?v=1751440046',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      tab: 'Self-Refilling',\n      desc: 'Features a 2.5L clean water tank, sufficient for 4 mopping sessions in a 2,000 sq ft house.',\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/98814790-6119-48d3-9518-3706103971ce_Property_1_Self-Refilling.png?v=1751509870',\n        alt: 'Self-Refilling',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/98814790-6119-48d3-9518-3706103971ce_Property_1_Self-Refilling.png?v=1751509870',\n        mimeType: 'image/png',\n      },\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/62f8efdb-baa0-4b66-b0ce-e43ba80aaa93_1952837054_2.png?v=1751440082',\n        alt: 'Self-Refilling Poster',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/62f8efdb-baa0-4b66-b0ce-e43ba80aaa93_1952837054_2.png?v=1751440082',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      tab: 'Self-Washing',\n      desc: 'Automatically washes the mop after each session.',\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/cb041a84-9e89-4844-ac1b-8fc6fff8f13c_Property_1_Self-Washing.png?v=1751509912',\n        alt: 'Self-Washing',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/cb041a84-9e89-4844-ac1b-8fc6fff8f13c_Property_1_Self-Washing.png?v=1751509912',\n        mimeType: 'image/png',\n      },\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/0506a613-f916-4bce-84ab-a3da4cd9078a_1952837054_4.png?v=1751440128',\n        alt: 'Self-Washing Poster',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/0506a613-f916-4bce-84ab-a3da4cd9078a_1952837054_4.png?v=1751440128',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      tab: 'Hot Air Drying',\n      desc: 'Intelligent 35-50\u00B0C (95-122\u00B0F) temperature control for efficient drying.',\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/074f6c07-dc85-44b1-9351-fcc8b3423f1f_Property_1_Hot_Air_Drying.png?v=1751509932',\n        alt: 'Hot Air Drying',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/074f6c07-dc85-44b1-9351-fcc8b3423f1f_Property_1_Hot_Air_Drying.png?v=1751509932',\n        mimeType: 'image/png',\n      },\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/65e9ba72-06d6-49cb-90b4-27406c409567_1952837054_3.png?v=1751440106',\n        alt: 'Hot Air Drying Poster',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/65e9ba72-06d6-49cb-90b4-27406c409567_1952837054_3.png?v=1751440106',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      tab: 'Wastewater Collection',\n      desc: '1.8L tank collects dirty water.',\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6f392913-919d-4842-9b40-a1736c3b1213_Property_1_Wastewater_Collection.png?v=1751509955',\n        alt: 'Wastewater Collection',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/6f392913-919d-4842-9b40-a1736c3b1213_Property_1_Wastewater_Collection.png?v=1751509955',\n        mimeType: 'image/png',\n      },\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/39b69bf4-e615-42b7-8eda-eaef031c79c4_1952837054_5.png?v=1751536624',\n        alt: 'Wastewater Collection Poster',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/39b69bf4-e615-42b7-8eda-eaef031c79c4_1952837054_5.png?v=1751536624',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      tab: 'Automatic Detergent Dispensing',\n      desc: 'Automatically dispenses detergent, lasting up to  6 months.',\n      icon: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/57d9d293-e511-40a5-a100-0763f7681ba6_Property_1_Automatic_Detergent_Dispensing.png?v=1751510012',\n        alt: 'Automatic Detergent Dispensing',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/57d9d293-e511-40a5-a100-0763f7681ba6_Property_1_Automatic_Detergent_Dispensing.png?v=1751510012',\n        mimeType: 'image/png',\n      },\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/03b6c2d7-e5a8-47c4-9d21-20fcb70eb385_1952837054_6.png?v=1751536659',\n        alt: 'Automatic Detergent Dispensing Poster',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/03b6c2d7-e5a8-47c4-9d21-20fcb70eb385_1952837054_6.png?v=1751536659',\n        mimeType: 'image/png',\n      },\n    },\n  ],\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\nexport const ThreeItems: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.slice(0, 3),\n      timeIdx: [\n        { time: 2.4, point: 2.4, highlightIdx: 0 },\n        { time: 2.5, point: 4.9, highlightIdx: 1 },\n        { time: 2.5, point: 7.4, highlightIdx: 2 },\n      ],\n    },\n  },\n}\n\nexport const FourItems: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      items: defaultData.items.slice(0, 4),\n      timeIdx: [\n        { time: 2.4, point: 2.4, highlightIdx: 0 },\n        { time: 2.5, point: 4.9, highlightIdx: 1 },\n        { time: 2.5, point: 7.4, highlightIdx: 2 },\n        { time: 2.8, point: 10.2, highlightIdx: 3 },\n      ],\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-tabs-with-media',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.tabs-with-media\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u6807\u9898\u533A\u57DF\uFF1A**\n- \\`.tabs-with-media__title\\` - \u4E3B\u6807\u9898\n\n**\u6807\u7B7E\u9875\u533A\u57DF\uFF1A**\n- \\`.tabs-with-media__tabs-wrapper\\` - \u6807\u7B7E\u9875\u5916\u5C42\u5305\u88C5\u5668\n- \\`.tabs-with-media__tabs-inner\\` - \u6807\u7B7E\u9875\u5185\u5C42\u5BB9\u5668\n- \\`.tabs-with-media__tabs-container\\` - \u6807\u7B7E\u9875\u5BB9\u5668\uFF08\u5305\u542B\u6240\u6709\u6807\u7B7E\u9879\uFF09\n- \\`.tabs-with-media__tab-item\\` - \u5355\u4E2A\u6807\u7B7E\u9879\uFF08motion.div\uFF09\n- \\`.tabs-with-media__tab-inner\\` - \u6807\u7B7E\u9879\u5185\u5C42\u5BB9\u5668\n- \\`.tabs-with-media__tab-content\\` - \u6807\u7B7E\u9879\u5185\u5BB9\u5BB9\u5668\n- \\`.tabs-with-media__tab-icon\\` - \u6807\u7B7E\u56FE\u6807\u5BB9\u5668\n- \\`.tabs-with-media__tab-icon-image\\` - \u6807\u7B7E\u56FE\u6807\u56FE\u7247\n- \\`.tabs-with-media__tab-text-wrapper\\` - \u6807\u7B7E\u6587\u672C\u5305\u88C5\u5668\n- \\`.tabs-with-media__tab-text\\` - \u6807\u7B7E\u6587\u672C\n\n**\u63CF\u8FF0\u533A\u57DF\uFF1A**\n- \\`.tabs-with-media__description-container\\` - \u63CF\u8FF0\u533A\u57DF\u5916\u5C42\u5BB9\u5668\n- \\`.tabs-with-media__description-swiper\\` - \u63CF\u8FF0 Swiper \u5B9E\u4F8B\n- \\`.tabs-with-media__description-slide\\` - \u63CF\u8FF0\u6ED1\u5757\n- \\`.tabs-with-media__description-content\\` - \u63CF\u8FF0\u5185\u5BB9\u5BB9\u5668\n- \\`.tabs-with-media__description-text\\` - \u63CF\u8FF0\u6587\u672C\n\n**\u89C6\u9891\u533A\u57DF\uFF1A**\n- \\`.tabs-with-media__video-wrapper\\` - \u89C6\u9891\u5916\u5C42\u5BB9\u5668\n- \\`.tabs-with-media__video\\` - \u89C6\u9891\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.tabs-with-media__title {\n  color: #ff6b6b;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u7B7E\u9879\u60AC\u505C\u6548\u679C */\n.tabs-with-media__tab-item:hover .tabs-with-media__tab-icon {\n  transform: scale(1.1);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u6D3B\u8DC3\u6807\u7B7E\u6837\u5F0F */\n.tabs-with-media__tab-content {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u672C\u6837\u5F0F */\n.tabs-with-media__description-text {\n  font-weight: 500;\n  line-height: 1.8;\n}\n\n/* \u81EA\u5B9A\u4E49\u89C6\u9891\u5C3A\u5BF8 */\n.tabs-with-media__video {\n  max-height: 600px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u7B7E\u56FE\u6807\u80CC\u666F */\n.tabs-with-media__tab-icon {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["tabsWithMedia_stories_exports", "__export", "Default", "FourItems", "ThreeItems", "WithCustomStyles", "tabsWithMedia_stories_default", "__toCommonJS", "import_react", "import_TabsWithMedia", "meta", "TabsWithMedia", "defaultData"]
+}

package/dist/cjs/stories/videoFeature.stories.js

@@ -0,0 +1,56 @@
+"use strict";var f=Object.create;var t=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var u=(e,o)=>{for(var a in o)t(e,a,{get:o[a],enumerable:!0})},r=(e,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of n(o))!m.call(e,i)&&i!==a&&t(e,i,{get:()=>o[i],enumerable:!(s=l(o,i))||s.enumerable});return e};var b=(e,o,a)=>(a=e!=null?f(c(e)):{},r(o||!e||!e.__esModule?t(a,"default",{value:e,enumerable:!0}):a,e)),v=e=>r(t({},"__esModule",{value:!0}),e);var x={};u(x,{Default:()=>g,DesktopOnly:()=>D,WithCustomStyles:()=>T,WithoutPosters:()=>S,WithoutSubtitle:()=>y,default:()=>_});module.exports=v(x);var R=require("react"),p=b(require("../biz-components/VideoFeature/index.js"));const h={title:"Biz Components/VideoFeature",component:p.default,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:"\u89C6\u9891\u7279\u6027\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u4EA7\u54C1\u89C6\u9891\u548C\u63CF\u8FF0\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}},tags:["autodocs"]};var _=h;const d={title:"DuoSpiral\u2122 Detangle Brushes",poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobPoster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobvideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},g={args:{data:d}},y={args:{data:{title:"DuoSpiral\u2122 Detangle Brushes",poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobPoster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobvideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}}}},D={args:{data:{title:"Advanced Cleaning Technology",subtitle:"Experience powerful cleaning with our latest innovation.",poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Advanced Cleaning Technology",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Advanced Cleaning Technology Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"}}}},S={args:{data:{title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"",mimeType:"video/mp4"},mobvideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"",mimeType:"video/mp4"}}}},T={args:{data:d,className:"custom-video-feature"},parameters:{docs:{description:{story:`
+\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236:
+
+**\u6839\u5143\u7D20:**
+- \`.video-feature\` - \u7EC4\u4EF6\u6839\u5BB9\u5668
+
+**\u6807\u9898\u533A\u57DF:**
+- \`.video-feature__title\` - \u4E3B\u6807\u9898
+- \`.video-feature__subtitle\` - \u526F\u6807\u9898
+
+**\u89C6\u9891\u533A\u57DF:**
+- \`.video-feature__video-wrapper\` - \u89C6\u9891\u5916\u5C42\u5BB9\u5668
+- \`.video-feature__desktop-video-container\` - \u684C\u9762\u7AEF\u89C6\u9891\u5BB9\u5668
+- \`.video-feature__mobile-video-container\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u5BB9\u5668
+- \`.video-feature__video\` - \u89C6\u9891\u5143\u7D20
+- \`.video-feature__video--desktop\` - \u684C\u9762\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26
+- \`.video-feature__video--mobile\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26
+
+**\u793A\u4F8B CSS \u7528\u6CD5:**
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u6839\u5BB9\u5668\u80CC\u666F */
+.video-feature {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 48px;
+}
+
+/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */
+.video-feature__title {
+  color: #fbbf24;
+  font-weight: 800;
+}
+
+/* \u81EA\u5B9A\u4E49\u526F\u6807\u9898\u6837\u5F0F */
+.video-feature__subtitle {
+  color: #e5e7eb;
+  opacity: 0.9;
+}
+
+/* \u81EA\u5B9A\u4E49\u89C6\u9891\u5BB9\u5668\u9634\u5F71 */
+.video-feature__video-wrapper {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+/* \u81EA\u5B9A\u4E49\u89C6\u9891\u60AC\u505C\u6548\u679C */
+.video-feature__video:hover {
+  transform: scale(1.02);
+  transition: transform 0.3s ease;
+}
+
+/* \u81EA\u5B9A\u4E49\u684C\u9762\u7AEF\u89C6\u9891\u8FB9\u6846 */
+.video-feature__video--desktop {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+\`\`\`
+        `}}}};
+//# sourceMappingURL=videoFeature.stories.js.map

package/dist/cjs/stories/videoFeature.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/videoFeature.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport VideoFeature from '../biz-components/VideoFeature/index.js'\nimport type { VideoFeatureProps } from '../biz-components/VideoFeature/types.js'\n\nconst meta = {\n  title: 'Biz Components/VideoFeature',\n  component: VideoFeature,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: '\u89C6\u9891\u7279\u6027\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u4EA7\u54C1\u89C6\u9891\u548C\u63CF\u8FF0\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof VideoFeature>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: VideoFeatureProps['data'] = {\n  title: 'DuoSpiral\u2122 Detangle Brushes',\n  poster: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    alt: 'DuoSpiral\u2122 Detangle Brushes',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'image/png',\n  },\n  subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n  video: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'video/mp4',\n  },\n  mobPoster: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'image/png',\n  },\n  mobvideo: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'video/mp4',\n  },\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  args: {\n    data: {\n      title: 'DuoSpiral\u2122 Detangle Brushes',\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        alt: 'DuoSpiral\u2122 Detangle Brushes',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'image/png',\n      },\n      video: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'video/mp4',\n      },\n      mobPoster: {\n        url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n        mimeType: 'image/png',\n      },\n      mobvideo: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n        mimeType: 'video/mp4',\n      },\n    },\n  },\n}\n\nexport const DesktopOnly: Story = {\n  args: {\n    data: {\n      title: 'Advanced Cleaning Technology',\n      subtitle: 'Experience powerful cleaning with our latest innovation.',\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        alt: 'Advanced Cleaning Technology',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'image/png',\n      },\n      video: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n        alt: 'Advanced Cleaning Technology Video',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'video/mp4',\n      },\n    },\n  },\n}\n\nexport const WithoutPosters: Story = {\n  args: {\n    data: {\n      title: 'DuoSpiral\u2122 Detangle Brushes',\n      subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n      video: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n        thumbnailURL: '',\n        mimeType: 'video/mp4',\n      },\n      mobvideo: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n        thumbnailURL: '',\n        mimeType: 'video/mp4',\n      },\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-video-feature',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236:\n\n**\u6839\u5143\u7D20:**\n- \\`.video-feature\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u6807\u9898\u533A\u57DF:**\n- \\`.video-feature__title\\` - \u4E3B\u6807\u9898\n- \\`.video-feature__subtitle\\` - \u526F\u6807\u9898\n\n**\u89C6\u9891\u533A\u57DF:**\n- \\`.video-feature__video-wrapper\\` - \u89C6\u9891\u5916\u5C42\u5BB9\u5668\n- \\`.video-feature__desktop-video-container\\` - \u684C\u9762\u7AEF\u89C6\u9891\u5BB9\u5668\n- \\`.video-feature__mobile-video-container\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u5BB9\u5668\n- \\`.video-feature__video\\` - \u89C6\u9891\u5143\u7D20\n- \\`.video-feature__video--desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26\n- \\`.video-feature__video--mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26\n\n**\u793A\u4F8B CSS \u7528\u6CD5:**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u6839\u5BB9\u5668\u80CC\u666F */\n.video-feature {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  padding: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.video-feature__title {\n  color: #fbbf24;\n  font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u526F\u6807\u9898\u6837\u5F0F */\n.video-feature__subtitle {\n  color: #e5e7eb;\n  opacity: 0.9;\n}\n\n/* \u81EA\u5B9A\u4E49\u89C6\u9891\u5BB9\u5668\u9634\u5F71 */\n.video-feature__video-wrapper {\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n}\n\n/* \u81EA\u5B9A\u4E49\u89C6\u9891\u60AC\u505C\u6548\u679C */\n.video-feature__video:hover {\n  transform: scale(1.02);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u684C\u9762\u7AEF\u89C6\u9891\u8FB9\u6846 */\n.video-feature__video--desktop {\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,gBAAAC,EAAA,qBAAAC,EAAA,mBAAAC,EAAA,oBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAR,GAAA,IAAAS,EAAkB,iBAElBC,EAAyB,sDAGzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,SACR,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,UAAW,wPACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIf,MAAME,EAAyC,CAC7C,MAAO,mCACP,OAAQ,CACN,IAAK,8HACL,IAAK,mCACL,aACE,8HACF,SAAU,WACZ,EACA,SAAU,mGACV,MAAO,CACL,IAAK,4EACL,IAAK,yCACL,aACE,8HACF,SAAU,WACZ,EACA,UAAW,CACT,IAAK,8HACL,IAAK,0CACL,aACE,8HACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,gDACL,aACE,8HACF,SAAU,WACZ,CACF,EAEaX,EAAiB,CAC5B,KAAM,CACJ,KAAMW,CACR,CACF,EAEaP,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,mCACP,OAAQ,CACN,IAAK,8HACL,IAAK,mCACL,aACE,8HACF,SAAU,WACZ,EACA,MAAO,CACL,IAAK,4EACL,IAAK,yCACL,aACE,8HACF,SAAU,WACZ,EACA,UAAW,CACT,IAAK,8HACL,IAAK,0CACL,aACE,8HACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,gDACL,aACE,8HACF,SAAU,WACZ,CACF,CACF,CACF,EAEaH,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,+BACP,SAAU,2DACV,OAAQ,CACN,IAAK,8HACL,IAAK,+BACL,aACE,8HACF,SAAU,WACZ,EACA,MAAO,CACL,IAAK,4EACL,IAAK,qCACL,aACE,8HACF,SAAU,WACZ,CACF,CACF,CACF,EAEaE,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,mCACP,SAAU,mGACV,MAAO,CACL,IAAK,4EACL,IAAK,yCACL,aAAc,GACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,gDACL,aAAc,GACd,SAAU,WACZ,CACF,CACF,CACF,EAEaD,EAA0B,CACrC,KAAM,CACJ,KAAMS,EACN,UAAW,sBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAuDT,CACF,CACF,CACF",
+  "names": ["videoFeature_stories_exports", "__export", "Default", "DesktopOnly", "WithCustomStyles", "WithoutPosters", "WithoutSubtitle", "videoFeature_stories_default", "__toCommonJS", "import_react", "import_VideoFeature", "meta", "VideoFeature", "defaultData"]
+}

package/dist/cjs/types/props.d.ts

@@ -28,14 +28,21 @@ export type Theme = 'light' | 'dark';
 export type Shape = 'rounded' | 'square';
 export type Align = 'left' | 'center' | 'right';
 export type Media = {
-    alt: string;
+    id?: number;
+    alt: string | undefined;
+    baseUrl?: string;
     url: string;
     thumbnailURL: string;
-    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
+    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml';
+    filename?: string;
     width?: number;
     height?: number;
     focalX?: number;
     focalY?: number;
+    poster?: {
+        url: string;
+        mimeType: 'image/jpeg' | 'image/png' | 'image/webp';
+    };
 };
 export type GSAPContext = {
     gsap?: any;

package/dist/cjs/types/props.js

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var s=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of i(e))!g.call(t,p)&&p!==o&&n(t,p,{get:()=>e[p],enumerable:!(r=a(e,p))||r.enumerable});return t};var m=t=>s(n({},"__esModule",{value:!0}),t);var l={};module.exports=m(l);
+"use strict";var p=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var s=(t,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!g.call(t,r)&&r!==i&&p(t,r,{get:()=>e[r],enumerable:!(n=o(e,r))||n.enumerable});return t};var m=t=>s(p({},"__esModule",{value:!0}),t);var l={};module.exports=m(l);
 //# sourceMappingURL=props.js.map

package/dist/cjs/types/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/types/props.ts"],
-  "sourcesContent": ["export interface ComponentCommonProps {\n  wrapperClassName?: string\n  style?: string\n  event?: any\n  condition?: any\n  className?: string\n  id?: string\n  key?: string\n}\n\nexport type ContainerProps = {\n  containerMode?: Mode\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\n\nexport type Img = {\n  url: string\n  alt?: string\n}\n\nexport type Video = {\n  url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n\nexport type Media = {\n  alt: string\n  url: string\n  thumbnailURL: string\n  mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp'\n  width?: number\n  height?: number\n  focalX?: number\n  focalY?: number\n}\n\nexport type GSAPContext = {\n  gsap?: any\n  ScrollTrigger?: any\n  SplitText?: any\n}\n"],
+  "sourcesContent": ["export interface ComponentCommonProps {\n  wrapperClassName?: string\n  style?: string\n  event?: any\n  condition?: any\n  className?: string\n  id?: string\n  key?: string\n}\n\nexport type ContainerProps = {\n  containerMode?: Mode\n  spaceY?: SpaceY\n  spaceTop?: SpaceTop\n  spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\n\nexport type Img = {\n  url: string\n  alt?: string\n}\n\nexport type Video = {\n  url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n\nexport type Media = {\n  id?: number\n  alt: string | undefined\n  baseUrl?: string\n  url: string\n  thumbnailURL: string\n  mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml'\n  filename?: string\n  width?: number\n  height?: number\n  focalX?: number\n  focalY?: number\n  poster?: {\n    url: string\n    mimeType: 'image/jpeg' | 'image/png' | 'image/webp'\n  }\n}\n\nexport type GSAPContext = {\n  gsap?: any\n  ScrollTrigger?: any\n  SplitText?: any\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["props_exports", "__toCommonJS"]
 }

package/dist/esm/biz-components/AccordionCards/index.d.ts

@@ -32,7 +32,7 @@ export type AccordionCardsType = {
     };
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<AccordionCardsType & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/AiuiProvider/index.d.ts

@@ -2,11 +2,11 @@ import React from 'react';
 interface AiuiContextType {
     trackingData: Record<string, any>;
     locale?: string;
-    copyWriting?: Record<string, string>;
     pathname?: string;
     storeDomain?: string;
     isLogin?: boolean;
     currencyCode?: string;
+    copyWriting?: Record<string, string>;
 }
 export declare const AiuiContext: React.Context<AiuiContextType>;
 export declare const useAiuiContext: () => AiuiContextType;

package/dist/esm/biz-components/AiuiProvider/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AiuiProvider/index.tsx"],
-  "sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n  trackingData: Record<string, any>\n  locale?: string\n  copyWriting?: Record<string, string>\n  pathname?: string\n  storeDomain?: string\n  isLogin?: boolean\n  currencyCode?: string\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n  trackingData: {},\n  locale: undefined,\n  copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n  const context = useContext(AiuiContext)\n  if (!context) {\n    throw new Error('useAiui must be used in <AiuiProvider>')\n  }\n  return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & AiuiContextType) => {\n  useEffect(() => {\n    const handleTrackClick = (e: any, el: any) => {\n      // e?.stopPropagation?.()\n      const out: any = {}\n      if (!el || !el.attributes) return out\n      for (const attr of Array.from(el.attributes)) {\n        const name = (attr as any)?.name\n        if (name?.startsWith('data-headless-')) {\n          out[name] = el.getAttribute(name)\n        }\n      }\n      const sku = out?.['data-headless-sku']\n      const nameType = out?.['data-headless-type-name']?.split?.('#')\n      const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n      const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: rest?.trackingData?.pageGroup || 'Home Page',\n          component_type: nameType?.[0] || '',\n          component_name: nameType?.[1] || '',\n          position: navPosition?.[1] || '',\n          navigation: navPosition?.[0] || '',\n          button_name: titleDesc?.[2] || '',\n          SKU: sku || '',\n          component_title: titleDesc?.[0] || '',\n          component_description: titleDesc?.[1] || '',\n        },\n      })\n    }\n    const observer = new MutationObserver(() => {\n      document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n        if (!el.hasAttribute('data-headless-track-bound')) {\n          el.addEventListener('click', e => handleTrackClick(e, el))\n          el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n        }\n      })\n    })\n    observer.observe(document.body, { childList: true, subtree: true })\n    // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n    document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n      if (!el.hasAttribute('data-headless-track-bound')) {\n        el.addEventListener('click', e => handleTrackClick(e, el))\n        el.setAttribute('data-headless-track-bound', 'true')\n      }\n    })\n    return () => observer.disconnect()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
+  "sourcesContent": ["import { gaTrack } from '../../shared/track.js'\nimport React, { createContext, useContext, useEffect } from 'react'\n\ninterface AiuiContextType {\n  trackingData: Record<string, any>\n  locale?: string\n  pathname?: string\n  storeDomain?: string\n  isLogin?: boolean\n  currencyCode?: string\n  copyWriting?: Record<string, string>\n}\n\nexport const AiuiContext = createContext<AiuiContextType>({\n  trackingData: {},\n  locale: undefined,\n  copyWriting: {},\n})\n\nexport const useAiuiContext = () => {\n  const context = useContext(AiuiContext)\n  if (!context) {\n    throw new Error('useAiui must be used in <AiuiProvider>')\n  }\n  return useContext(AiuiContext)\n}\n\nconst AiuiProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & AiuiContextType) => {\n  useEffect(() => {\n    const handleTrackClick = (e: any, el: any) => {\n      // e?.stopPropagation?.()\n      const out: any = {}\n      if (!el || !el.attributes) return out\n      for (const attr of Array.from(el.attributes)) {\n        const name = (attr as any)?.name\n        if (name?.startsWith('data-headless-')) {\n          out[name] = el.getAttribute(name)\n        }\n      }\n      const sku = out?.['data-headless-sku']\n      const nameType = out?.['data-headless-type-name']?.split?.('#')\n      const titleDesc = out?.['data-headless-title-desc-button']?.split?.('#')\n      const navPosition = out?.['data-headless-nav-postion']?.split?.('#')\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'component_click',\n        event_parameters: {\n          page_group: rest?.trackingData?.pageGroup || 'Home Page',\n          component_type: nameType?.[0] || '',\n          component_name: nameType?.[1] || '',\n          position: navPosition?.[1] || '',\n          navigation: navPosition?.[0] || '',\n          button_name: titleDesc?.[2] || '',\n          SKU: sku || '',\n          component_title: titleDesc?.[0] || '',\n          component_description: titleDesc?.[1] || '',\n        },\n      })\n    }\n    const observer = new MutationObserver(() => {\n      document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n        if (!el.hasAttribute('data-headless-track-bound')) {\n          el.addEventListener('click', e => handleTrackClick(e, el))\n          el.setAttribute('data-headless-track-bound', 'true') // \u907F\u514D\u91CD\u590D\u7ED1\u5B9A\n        }\n      })\n    })\n    observer.observe(document.body, { childList: true, subtree: true })\n    // \u521D\u59CB\u5316\u4E00\u6B21\u73B0\u6709\u8282\u70B9\n    document.querySelectorAll('[data-headless-type-name]').forEach(el => {\n      if (!el.hasAttribute('data-headless-track-bound')) {\n        el.addEventListener('click', e => handleTrackClick(e, el))\n        el.setAttribute('data-headless-track-bound', 'true')\n      }\n    })\n    return () => observer.disconnect()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return <AiuiContext.Provider value={rest}>{children}</AiuiContext.Provider>\n}\n\nexport default AiuiProvider\n"],
   "mappings": "AAoFS,cAAAA,MAAA,oBApFT,OAAS,WAAAC,MAAe,wBACxB,OAAgB,iBAAAC,EAAe,cAAAC,EAAY,aAAAC,MAAiB,QAYrD,MAAMC,EAAcH,EAA+B,CACxD,aAAc,CAAC,EACf,OAAQ,OACR,YAAa,CAAC,CAChB,CAAC,EAEYI,EAAiB,IAAM,CAElC,GAAI,CADYH,EAAWE,CAAW,EAEpC,MAAM,IAAI,MAAM,wCAAwC,EAE1D,OAAOF,EAAWE,CAAW,CAC/B,EAEME,EAAe,CAAC,CACpB,SAAAC,EACA,GAAGC,CACL,KAGEL,EAAU,IAAM,CACd,MAAMM,EAAmB,CAACC,EAAQC,IAAY,CAE5C,MAAMC,EAAW,CAAC,EAClB,GAAI,CAACD,GAAM,CAACA,EAAG,WAAY,OAAOC,EAClC,UAAWC,KAAQ,MAAM,KAAKF,EAAG,UAAU,EAAG,CAC5C,MAAMG,EAAQD,GAAc,KACxBC,GAAM,WAAW,gBAAgB,IACnCF,EAAIE,CAAI,EAAIH,EAAG,aAAaG,CAAI,EAEpC,CACA,MAAMC,EAAMH,IAAM,mBAAmB,EAC/BI,EAAWJ,IAAM,yBAAyB,GAAG,QAAQ,GAAG,EACxDK,EAAYL,IAAM,iCAAiC,GAAG,QAAQ,GAAG,EACjEM,EAAcN,IAAM,2BAA2B,GAAG,QAAQ,GAAG,EACnEZ,EAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAYQ,GAAM,cAAc,WAAa,YAC7C,eAAgBQ,IAAW,CAAC,GAAK,GACjC,eAAgBA,IAAW,CAAC,GAAK,GACjC,SAAUE,IAAc,CAAC,GAAK,GAC9B,WAAYA,IAAc,CAAC,GAAK,GAChC,YAAaD,IAAY,CAAC,GAAK,GAC/B,IAAKF,GAAO,GACZ,gBAAiBE,IAAY,CAAC,GAAK,GACnC,sBAAuBA,IAAY,CAAC,GAAK,EAC3C,CACF,CAAC,CACH,EACME,EAAW,IAAI,iBAAiB,IAAM,CAC1C,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,CACH,CAAC,EACD,OAAAQ,EAAS,QAAQ,SAAS,KAAM,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAElE,SAAS,iBAAiB,2BAA2B,EAAE,QAAQR,GAAM,CAC9DA,EAAG,aAAa,2BAA2B,IAC9CA,EAAG,iBAAiB,QAAS,GAAKF,EAAiB,EAAGE,CAAE,CAAC,EACzDA,EAAG,aAAa,4BAA6B,MAAM,EAEvD,CAAC,EACM,IAAMQ,EAAS,WAAW,CAEnC,EAAG,CAAC,CAAC,EAEEpB,EAACK,EAAY,SAAZ,CAAqB,MAAOI,EAAO,SAAAD,EAAS,GAGtD,IAAOa,EAAQd",
   "names": ["jsx", "gaTrack", "createContext", "useContext", "useEffect", "AiuiContext", "useAiuiContext", "AiuiProvider", "children", "rest", "handleTrackClick", "e", "el", "out", "attr", "name", "sku", "nameType", "titleDesc", "navPosition", "observer", "AiuiProvider_default"]
 }

package/dist/esm/biz-components/AplusDesc/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Img } from '../../types/props.js';
 type AplusItem = {
     img: Img;
@@ -16,7 +17,7 @@ type AplusDescType = {
     className?: string;
 };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<AplusDescType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/AplusDesc/index.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as n,jsx as e,jsxs as s}from"react/jsx-runtime";import{cn as x}from"../../helpers/utils.js";import{withLayout as c}from"../../shared/Styles.js";import{Picture as o,Text as d}from"../../components/index.js";const u=m=>{const{data:t}=m,{title:i,img:a,mobileImg:p,list:g}=t;return e(n,{children:s("div",{className:"w-full",children:[s("div",{className:"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col",children:[e("div",{className:" desktop:w-[600px] lg-desktop:w-[800px]",children:i&&e(d,{html:i,className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]"})}),s("div",{children:[a?.url&&e(o,{className:"desktop:block hidden w-[464px] rounded-2xl",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt||""}),p?.url&&e(o,{className:"desktop:hidden block w-[224px] rounded-2xl",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""})]})]}),e("div",{className:"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]",children:g.map((l,r)=>s("div",{className:"relative",children:[e(o,{className:" rounded-2xl",imgClassName:"",source:l?.img?.url,alt:l?.img?.alt||""}),s("div",{className:x("text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col",{"aiui-dark":l.theme==="dark"}),children:[e(d,{html:l?.title,className:" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]"}),e(d,{html:l?.desc,className:" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]"})]})]},r))})]})})};var N=c(u);export{N as default};
+"use client";import{Fragment as v,jsx as t,jsxs as s}from"react/jsx-runtime";import{cn as n}from"../../helpers/utils.js";import{withLayout as g}from"../../shared/Styles.js";import{Picture as m,Text as p}from"../../components/index.js";import{useExposure as x}from"../../hooks/useExposure.js";import{useRef as u}from"react";const f="image",k="aplus_desc",N=({index:o,item:e})=>{const l=u(null);return x(l,{componentType:f,componentName:k,position:o+1,componentTitle:e.title,componentDescription:e.desc}),s("div",{ref:l,className:"relative",children:[t(m,{className:" rounded-2xl",imgClassName:"",source:e?.img?.url,alt:e?.img?.alt||""}),s("div",{className:n("text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col",{"aiui-dark":e.theme==="dark"}),children:[t(p,{html:e?.title,className:" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]"}),t(p,{html:e?.desc,className:" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]"})]})]})},b=o=>{const{data:e}=o,{title:l,img:d,mobileImg:a,list:r}=e;return t(v,{children:s("div",{className:"w-full",children:[s("div",{className:"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col",children:[t("div",{className:" desktop:w-[600px] lg-desktop:w-[800px]",children:l&&t(p,{html:l,className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]"})}),s("div",{children:[d?.url&&t(m,{className:"desktop:block hidden w-[464px] rounded-2xl",imgClassName:"",source:e?.img?.url,alt:e?.img?.alt||""}),a?.url&&t(m,{className:"desktop:hidden block w-[224px] rounded-2xl",imgClassName:"",source:e?.mobileImg?.url,alt:e?.mobileImg?.alt||""})]})]}),t("div",{className:"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]",children:r.map((c,i)=>t(N,{index:i,item:c},i))})]})})};var A=g(b);export{A as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AplusDesc/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AplusDesc/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\ntype AplusItem = {\n  img: Img\n  mobileImg: Img\n  title: string\n  desc: string\n  theme: 'light' | 'dark'\n}\n\ntype AplusDescType = {\n  data: {\n    title: string\n    img: Img\n    mobileImg: Img\n    list: AplusItem[]\n  }\n  className?: string\n}\n\nconst AplusDesc = (props: AplusDescType) => {\n  const { data } = props\n  const { title, img, mobileImg, list } = data\n\n  return (\n    <>\n      <div className=\"w-full\">\n        <div className=\"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col\">\n          <div className=\" desktop:w-[600px] lg-desktop:w-[800px]\">\n            {title && (\n              <Text\n                html={title}\n                className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]\"\n              />\n            )}\n          </div>\n          <div>\n            {img?.url && (\n              <Picture\n                className=\"desktop:block hidden w-[464px] rounded-2xl\"\n                imgClassName=\"\"\n                source={data?.img?.url}\n                alt={data?.img?.alt || ''}\n              />\n            )}\n            {mobileImg?.url && (\n              <Picture\n                className=\"desktop:hidden block w-[224px] rounded-2xl\"\n                imgClassName=\"\"\n                source={data?.mobileImg?.url}\n                alt={data?.mobileImg?.alt || ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className=\"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]\">\n          {list.map((item, ind) => (\n            <div key={ind} className=\"relative\">\n              <Picture className=\" rounded-2xl\" imgClassName=\"\" source={item?.img?.url} alt={item?.img?.alt || ''} />\n              <div\n                className={cn(\n                  'text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Text html={item?.title} className=\" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n                <Text html={item?.desc} className=\" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(AplusDesc)\n"],
-  "mappings": "aA6BI,mBAAAA,EAKU,OAAAC,EAMJ,QAAAC,MAXN,oBA5BJ,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAoB9B,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,MAAAE,EAAO,IAAAC,EAAK,UAAAC,EAAW,KAAAC,CAAK,EAAIJ,EAExC,OACER,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAU,SACb,UAAAA,EAAC,OAAI,UAAU,qFACb,UAAAD,EAAC,OAAI,UAAU,0CACZ,SAAAS,GACCT,EAACK,EAAA,CACC,KAAMI,EACN,UAAU,iFACZ,EAEJ,EACAR,EAAC,OACE,UAAAS,GAAK,KACJV,EAACI,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQI,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDG,GAAW,KACVX,EAACI,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQI,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,GACF,EACAR,EAAC,OAAI,UAAU,+EACZ,SAAAY,EAAK,IAAI,CAACC,EAAMC,IACfb,EAAC,OAAc,UAAU,WACvB,UAAAD,EAACI,EAAA,CAAQ,UAAU,eAAe,aAAa,GAAG,OAAQS,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EACrGZ,EAAC,OACC,UAAWC,EACT,+JACA,CACE,YAAaW,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAb,EAACK,EAAA,CAAK,KAAMQ,GAAM,MAAO,UAAU,8DAA8D,EACjGb,EAACK,EAAA,CAAK,KAAMQ,GAAM,KAAM,UAAU,8DAA8D,GAClG,IAZQC,CAaV,CACD,EACH,GACF,EACF,CAEJ,EAEA,IAAOC,EAAQZ,EAAWG,CAAS",
-  "names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Picture", "Text", "AplusDesc", "props", "data", "title", "img", "mobileImg", "list", "item", "ind", "AplusDesc_default"]
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\ntype AplusItem = {\n  img: Img\n  mobileImg: Img\n  title: string\n  desc: string\n  theme: 'light' | 'dark'\n}\n\ntype AplusDescType = {\n  data: {\n    title: string\n    img: Img\n    mobileImg: Img\n    list: AplusItem[]\n  }\n  className?: string\n}\n\nconst componentType = 'image'\nconst componentName = 'aplus_desc'\n\nconst Item = ({ index, item }: { index: number; item: AplusItem }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: index + 1,\n    componentTitle: item.title,\n    componentDescription: item.desc,\n  })\n\n  return (\n    <div ref={ref} className=\"relative\">\n      <Picture className=\" rounded-2xl\" imgClassName=\"\" source={item?.img?.url} alt={item?.img?.alt || ''} />\n      <div\n        className={cn(\n          'text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col',\n          {\n            'aiui-dark': item.theme === 'dark',\n          }\n        )}\n      >\n        <Text html={item?.title} className=\" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n        <Text html={item?.desc} className=\" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]\" />\n      </div>\n    </div>\n  )\n}\n\nconst AplusDesc = (props: AplusDescType) => {\n  const { data } = props\n  const { title, img, mobileImg, list } = data\n\n  return (\n    <>\n      <div className=\"w-full\">\n        <div className=\"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col\">\n          <div className=\" desktop:w-[600px] lg-desktop:w-[800px]\">\n            {title && (\n              <Text\n                html={title}\n                className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]\"\n              />\n            )}\n          </div>\n          <div>\n            {img?.url && (\n              <Picture\n                className=\"desktop:block hidden w-[464px] rounded-2xl\"\n                imgClassName=\"\"\n                source={data?.img?.url}\n                alt={data?.img?.alt || ''}\n              />\n            )}\n            {mobileImg?.url && (\n              <Picture\n                className=\"desktop:hidden block w-[224px] rounded-2xl\"\n                imgClassName=\"\"\n                source={data?.mobileImg?.url}\n                alt={data?.mobileImg?.alt || ''}\n              />\n            )}\n          </div>\n        </div>\n        <div className=\"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]\">\n          {list.map((item, index) => (\n            <Item key={index} index={index} item={item} />\n          ))}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(AplusDesc)\n"],
+  "mappings": "aA0CM,OAqBF,YAAAA,EArBE,OAAAC,EACA,QAAAC,MADA,oBAzCN,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,UAAAC,MAAc,QAoBvB,MAAMC,EAAgB,QAChBC,EAAgB,aAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAA0C,CACpE,MAAMC,EAAMN,EAAuB,IAAI,EAEvC,OAAAD,EAAYO,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,MACrB,qBAAsBA,EAAK,IAC7B,CAAC,EAGCX,EAAC,OAAI,IAAKY,EAAK,UAAU,WACvB,UAAAb,EAACI,EAAA,CAAQ,UAAU,eAAe,aAAa,GAAG,OAAQQ,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EACrGX,EAAC,OACC,UAAWC,EACT,+JACA,CACE,YAAaU,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAZ,EAACK,EAAA,CAAK,KAAMO,GAAM,MAAO,UAAU,8DAA8D,EACjGZ,EAACK,EAAA,CAAK,KAAMO,GAAM,KAAM,UAAU,8DAA8D,GAClG,GACF,CAEJ,EAEME,EAAaC,GAAyB,CAC1C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,MAAAE,EAAO,IAAAC,EAAK,UAAAC,EAAW,KAAAC,CAAK,EAAIJ,EAExC,OACEhB,EAAAD,EAAA,CACE,SAAAE,EAAC,OAAI,UAAU,SACb,UAAAA,EAAC,OAAI,UAAU,qFACb,UAAAD,EAAC,OAAI,UAAU,0CACZ,SAAAiB,GACCjB,EAACK,EAAA,CACC,KAAMY,EACN,UAAU,iFACZ,EAEJ,EACAhB,EAAC,OACE,UAAAiB,GAAK,KACJlB,EAACI,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQY,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDG,GAAW,KACVnB,EAACI,EAAA,CACC,UAAU,6CACV,aAAa,GACb,OAAQY,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,GACF,EACAhB,EAAC,OAAI,UAAU,+EACZ,SAAAoB,EAAK,IAAI,CAACR,EAAMD,IACfX,EAACU,EAAA,CAAiB,MAAOC,EAAO,KAAMC,GAA3BD,CAAiC,CAC7C,EACH,GACF,EACF,CAEJ,EAEA,IAAOU,EAAQlB,EAAWW,CAAS",
+  "names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Picture", "Text", "useExposure", "useRef", "componentType", "componentName", "Item", "index", "item", "ref", "AplusDesc", "props", "data", "title", "img", "mobileImg", "list", "AplusDesc_default"]
 }

package/dist/esm/biz-components/BrandEquity/BrandEquity.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import type { BrandEquityProps } from './types.js';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<BrandEquityProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{forwardRef as k,useEffect as w,useRef as x,useState as N,useImperativeHandle as E}from"react";import{cn as i}from"../../helpers/utils.js";import y from"../../components/picture.js";import{withLayout as q}from"../../shared/Styles.js";import{useMediaQuery as S}from"react-responsive";import{useExposure as M}from"../../hooks/useExposure.js";import{Swiper as B,SwiperSlide as I}from"swiper/react";import{Pagination as j,FreeMode as A,Mousewheel as P}from"swiper/modules";import T from"../Title/index.js";const L="copy",H="store_benefits",z=(e,o)=>{const a=[];for(let r=0;r<e.length;r+=o)a.push(e.slice(r,r+o));return a},D=k(({data:{items:e=[],itemShape:o,title:a},className:r},n)=>{const[m,g]=N(!1),c=S({query:"(max-width: 768px)"}),u=x(null),d=x(null);E(n,()=>d.current),M(d,{componentType:L,componentName:H}),w(()=>{g(c)},[c]);const b=m?z(e,3):e;return p("div",{ref:d,className:i("brand-equity-wrapper w-full",r),children:[a&&t(T,{data:{title:a}}),m?p(B,{className:i(r),modules:[A,P,j],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:u.current},breakpoints:{0:{spaceBetween:12}},children:[b?.map((s,l)=>t(I,{className:"!flex flex-col gap-3",children:Array.isArray(s)&&s?.map((h,f)=>t(v,{data:h,itemShape:o,index:f},f))},"SwiperSlide"+l)),t("div",{ref:u,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((s,l)=>t(v,{data:s,itemShape:o,index:l},l))})]})}),v=({data:e,itemShape:o,index:a})=>p("div",{className:i("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a)},o==="round"?"rounded-box":"rounded-none"),children:[p("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,n)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(y,{source:r.avatar?.url,alt:r.avatar?.alt,className:"size-full object-cover"})},n))}):t(y,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]",children:e.description})]});var U=q(D);export{U as default};
+"use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{forwardRef as h,useEffect as k,useRef as f,useState as w,useImperativeHandle as N}from"react";import{cn as i}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as E}from"../../shared/Styles.js";import{useMediaQuery as q}from"react-responsive";import{useExposure as M}from"../../hooks/useExposure.js";import{Swiper as S,SwiperSlide as B}from"swiper/react";import{Pagination as I,FreeMode as j,Mousewheel as A}from"swiper/modules";import P from"../Title/index.js";const T="copy",L="store_benefits",H=(e,a)=>{const r=[];for(let o=0;o<e.length;o+=a)r.push(e.slice(o,o+a));return r},D=h(({data:{items:e=[],title:a},className:r},o)=>{const[d,v]=w(!1),c=q({query:"(max-width: 768px)"}),m=f(null),n=f(null);N(o,()=>n.current),M(n,{componentType:T,componentName:L}),k(()=>{v(c)},[c]);const g=d?H(e,3):e;return p("div",{ref:n,className:i("brand-equity-wrapper w-full",r),children:[a&&t(P,{data:{title:a}}),d?p(S,{className:i(r),modules:[j,A,I],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:m.current},breakpoints:{0:{spaceBetween:12}},children:[g?.map((l,s)=>t(B,{className:"!flex flex-col gap-3",children:Array.isArray(l)&&l?.map((b,u)=>t(y,{data:b,index:u},u))},"SwiperSlide"+s)),t("div",{ref:m,className:"mt-3 flex justify-center"})]}):t("div",{className:i("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((l,s)=>t(y,{data:l,index:s},s))})]})}),y=({data:e,index:a})=>p("div",{className:i("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(a)},"rounded-box"),children:[p("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]",children:e.title}),e.type==="avatar"?t("div",{className:"flex -space-x-2",children:e?.avatarList?.map((r,o)=>t("div",{className:i("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:t(x,{source:r.avatar?.url,alt:r.avatar?.alt,className:"size-full object-cover"})},o))}):t(x,{className:"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]",children:e.description})]});var O=E(D,{style:"overflow: hidden;"});export{O as default};
 //# sourceMappingURL=BrandEquity.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n  ({ data: { items = [], itemShape, title }, className }, ref) => {\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const paginationRef = useRef<HTMLDivElement>(null)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n        {title && <Title data={{ title: title }} />}\n        {isMobile ? (\n          <Swiper\n            className={cn(className)}\n            modules={[FreeMode, Mousewheel, Pagination]}\n            freeMode={true}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            pagination={{\n              clickable: true,\n              el: paginationRef.current,\n            }}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n              },\n            }}\n          >\n            {itemsArray?.map((item, jIndex) => (\n              <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n                {Array.isArray(item) &&\n                  item?.map((item, index) => (\n                    <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n            {items.map((item, index) => (\n              <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandEquityItem = ({\n  data,\n  itemShape,\n  index,\n}: {\n  data: BrandEquityItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'box-border flex w-full flex-col bg-white p-4',\n        'desktop:p-6 justify-between',\n        'laptop:col-span-3 lg-desktop:p-8',\n        'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, 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={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withLayout(BrandEquity)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withLayout", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "title", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
+  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(({ data: { items = [], title }, className }, ref) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const itemsArray = isMobile ? chunkArray(items, 3) : items\n  return (\n    <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n      {title && <Title data={{ title: title }} />}\n      {isMobile ? (\n        <Swiper\n          className={cn(className)}\n          modules={[FreeMode, Mousewheel, Pagination]}\n          freeMode={true}\n          mousewheel={{\n            forceToAxis: true,\n          }}\n          pagination={{\n            clickable: true,\n            el: paginationRef.current,\n          }}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n            },\n          }}\n        >\n          {itemsArray?.map((item, jIndex) => (\n            <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n              {Array.isArray(item) &&\n                item?.map((item, index) => <BrandEquityItem key={index} data={item} index={index} />)}\n            </SwiperSlide>\n          ))}\n          <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n        </Swiper>\n      ) : (\n        <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n          {items.map((item, index) => (\n            <BrandEquityItem key={index} data={item} index={index} />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nconst BrandEquityItem = ({ data, index }: { data: BrandEquityItemProps; index: number }) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'box-border flex w-full flex-col bg-white p-4',\n        'desktop:p-6 justify-between',\n        'laptop:col-span-3 lg-desktop:p-8',\n        'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        'rounded-box'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#080A0F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, 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={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:h-[36px] h-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#080A0F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withLayout(BrandEquity, { style: 'overflow: hidden;' })\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "forwardRef", "useEffect", "useRef", "useState", "useImperativeHandle", "cn", "Picture", "withLayout", "useMediaQuery", "useExposure", "Swiper", "SwiperSlide", "Pagination", "FreeMode", "Mousewheel", "Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "title", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "item", "jIndex", "index", "BrandEquityItem", "data", "BrandEquity_default"]
 }

package/dist/esm/biz-components/BrandEquity/types.d.ts

@@ -12,7 +12,6 @@ export interface BrandEquityProps extends ComponentCommonProps {
     data: {
         title?: string;
         items: BrandEquityItemProps[];
-        itemShape?: 'round' | 'square';
     };
     className?: string;
 }

package/dist/esm/biz-components/Category/index.d.ts

@@ -29,7 +29,7 @@ export interface CategoryProps {
     key?: string;
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<CategoryProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,jsxs as u}from"react/jsx-runtime";import C,{useImperativeHandle as w,useRef as c}from"react";import{cn as s}from"../../helpers/utils.js";import f from"../../components/picture.js";import{withLayout as I}from"../../shared/Styles.js";import _ from"../Title/index.js";import y from"./SwiperCategory.js";import{useExposure as v}from"../../hooks/useExposure.js";import{trackUrlRef as b}from"../../shared/trackUrlRef.js";import{Heading as N}from"../../components/heading.js";const l="image",m="category_banner",d=5,$=3,E=(e,o)=>{const t=[];for(let r=0;r<e.length;r+=o)t.push(e.slice(r,r+o));return t},L=({data:e,configuration:o})=>{const t=c(null);return v(t,{componentType:l,componentName:m,componentTitle:e?.name,position:o?.index+1}),u("div",{ref:t,className:s("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("div",{className:"transition-all duration-300 group-hover:scale-110",children:a("a",{"aria-label":e?.name,href:b(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>o?.event?.primaryButton(e,o?.index),children:a(f,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),a(N,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},S=({data:e,configuration:o,index:t,isFirstItemLarger:r})=>{const i=c(null);v(i,{componentType:l,componentName:m,componentTitle:e?.name,position:o?.index+1});const n=t===0;return u("div",{ref:i,className:s("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",r?s("p-4",n?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",o?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("a",{href:b(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${o?.index+1}`,onClick:()=>o?.event?.primaryButton(e,o?.index+1),children:a(f,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:s("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r?s(n?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),a("p",{className:s("text-info-primary text-center text-sm font-bold",r?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},T=({data:e,configuration:o})=>{const r=(o?.totalCategories??0)<=d;return a("div",{className:`gap-3 ${r?"grid grid-cols-2":"flex h-full flex-col"}`,children:e?.map((i,n)=>a(S,{index:n,data:i,configuration:o,isFirstItemLarger:r},n))})},M=C.forwardRef((e,o)=>{const{data:t,className:r="",key:i,event:n}=e,p=(t?.isShowSelect?t?.products:t?.productData)||[],g=p.length>d,h=p.length,k=E(p,g?$:d),x=c(null);return w(o,()=>x.current),u("div",{ref:x,className:s("w-full overflow-hidden",r,{"aiui-dark":t?.theme==="dark"}),children:[t?.title&&a(_,{data:{title:t?.title},className:"text-4xl"}),a("div",{className:"tablet:block hidden",children:a(y,{id:`Category${i}`,Slide:L,data:{list:p,configuration:{shape:t?.shape,event:n,title:t?.title,totalCategories:h}}})}),a("div",{className:"tablet:hidden block",children:a(y,{id:`Category1${i}`,Slide:T,data:{list:k,configuration:{shape:t?.shape,event:n,title:t?.title,totalCategories:h}},isHalf:g})}),a("div",{className:"h-7"})]})});var O=I(M);export{O as default};
+"use client";import{jsx as a,jsxs as d}from"react/jsx-runtime";import C,{useImperativeHandle as w,useRef as c}from"react";import{cn as s}from"../../helpers/utils.js";import x from"../../components/picture.js";import{withLayout as N}from"../../shared/Styles.js";import I from"../Title/index.js";import f from"./SwiperCategory.js";import{useExposure as v}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{Heading as $}from"../../components/heading.js";const l="image",m="category_banner",_=(e,t)=>{const o=[];for(let r=0;r<e.length;r+=t)o.push(e.slice(r,r+t));return o},S=({data:e,configuration:t})=>{const o=c(null);return v(o,{componentType:l,componentName:m,componentTitle:e?.name,position:t?.index+1}),d("div",{ref:o,className:s("tablet:h-[120px] laptop:h-[144px] desktop:h-[192px] lg-desktop:h-[240px]","tablet:p-3 laptop:p-4 desktop:p-6 lg-desktop:p-8","bg-container-secondary-1 hover:bg-info-white group box-border flex size-full cursor-pointer flex-col overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("div",{className:"transition-all duration-300 group-hover:scale-110",children:a("a",{"aria-label":e?.name,href:y(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,onClick:()=>t?.event?.primaryButton(e,t?.index),children:a(x,{alt:e?.image?.alt||"",source:e?.image?.url||"",className:"laptop:size-[88px] tablet:size-[72px] desktop:size-[116px] lg-desktop:size-[146px] m-auto flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover"})})}),a($,{as:"h3",className:"lg-desktop:text-[18px] text-info-primary box-border line-clamp-2 flex-1 text-center text-[14px] font-bold",children:e?.name})]})},b=({data:e,configuration:t,index:o,isFirstItemLarger:r})=>{const n=c(null);v(n,{componentType:l,componentName:m,componentTitle:e?.name,position:t?.index+1});const i=o===0;return d("div",{ref:n,className:s("bg-container-secondary-1 box-border flex w-full shrink-0 flex-col items-center justify-center overflow-hidden","hover:bg-info-white cursor-pointer duration-300",r?s("p-4",i?"aspect-h-[252] row-span-2":"aspect-h-[120]"):"max-h-[126px] px-3 py-4",t?.shape==="round"?"rounded-2xl":"rounded-none"),children:[a("a",{href:y(e?.link,`${l}_${m}`),"data-headless-type-name":`${l}#${m}`,"data-headless-title-desc-button":`${e?.name}`,"data-headless-nav-postion":`''#${t?.index+1}`,onClick:()=>t?.event?.primaryButton(e,t?.index+1),children:a(x,{source:e?.image?.url||"",alt:e?.image?.alt||"",className:s("m-auto mb-2 flex justify-center object-cover [&_img]:h-full [&_img]:w-auto [&_img]:object-cover",r?s(i?"max-h-[146px] overflow-hidden":"max-h-[72px] max-w-[72px]"):"size-[72px]")})}),a("p",{className:s("text-info-primary text-center text-sm font-bold",r?"line-clamp-2":"shrink-0 truncate"),children:e?.name})]})},D=({data:e,configuration:t})=>{const r=(t?.totalCategories??0)<6;return r?a("div",{className:"grid grid-cols-2 gap-3",children:e?.map((n,i)=>a(b,{index:i,data:n,configuration:t,isFirstItemLarger:r},i))}):a("div",{className:"flex h-full flex-col gap-3",children:e?.map((n,i)=>a(b,{index:i,data:n,configuration:t,isFirstItemLarger:r},i))})},H=C.forwardRef((e,t)=>{const{data:o,className:r="",key:n,event:i}=e,p=(o?.isShowSelect?o?.products:o?.productData)||[],u=p.length>5,g=p.length,k=_(p,u?3:5),h=c(null);return w(t,()=>h.current),d("div",{ref:h,className:s("w-full overflow-hidden",r,{"aiui-dark":o?.theme==="dark"}),children:[o?.title&&a(I,{data:{title:o?.title},className:"text-4xl"}),a("div",{className:"tablet:block hidden",children:a(f,{id:`Category${n}`,Slide:S,data:{list:p,configuration:{shape:o?.shape,event:i,title:o?.title,totalCategories:g}}})}),a("div",{className:"tablet:hidden block",children:a(f,{id:`Category1${n}`,Slide:D,data:{list:k,configuration:{shape:o?.shape,event:i,title:o?.title,totalCategories:g}},isHalf:u})}),a("div",{className:"h-7"})]})});var F=N(H);export{F as default};
 //# sourceMappingURL=index.js.map