@anker-in/headless-ui 1.0.25 → 1.0.26-alpha.111003

package/dist/cjs/stories/tabWithImage.stories.js

@@ -0,0 +1,54 @@
+"use strict";var l=Object.create;var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var n=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(e,a)=>{for(var t in a)m(e,t,{get:a[t],enumerable:!0})},p=(e,a,t,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of r(a))!g.call(e,s)&&s!==t&&m(e,s,{get:()=>a[s],enumerable:!(o=c(a,s))||o.enumerable});return e};var d=(e,a,t)=>(t=e!=null?l(n(e)):{},p(a||!e||!e.__esModule?m(t,"default",{value:e,enumerable:!0}):t,e)),h=e=>p(m({},"__esModule",{value:!0}),e);var F={};f(F,{Default:()=>y,SingleItem:()=>S,ThreeItems:()=>w,WithCustomStyles:()=>T,default:()=>u});module.exports=h(F);var M=require("react"),b=d(require("../biz-components/TabWithImage/index.js"));const _={title:"Biz Components/TabWithImage",component:b.default,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:"Tab \u5207\u6362\u548C\u56FE\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u4F7F\u7528\u6ED1\u52A8\u80CC\u666F\u9AD8\u4EAE\u6548\u679C\u548C Framer Motion \u52A8\u753B"}}},tags:["autodocs"]};var u=_;const i={desc:"Effortless customization at your fingertips.",title:"Smart App Control",datalist:[{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Customizable Cleaning Modes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Customizable Cleaning Modes",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Customizable Cleaning Modes Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Customizable Cleaning Modes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}},{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",alt:"Multi-Floor Mapping",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903",mimeType:"image/png"},title:"Multi-Floor Mapping",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",alt:"Multi-Floor Mapping Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",alt:"Multi-Floor Mapping Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193",mimeType:"image/png"}}]},y={args:{data:i}},w={args:{data:{...i,datalist:[...i.datalist,{image:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",alt:"Smart Scheduling",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585",mimeType:"image/png"},title:"Smart Scheduling",imgPad:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",alt:"Smart Scheduling Pad",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131",mimeType:"image/png"},imageMob:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",alt:"Smart Scheduling Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614",mimeType:"image/png"}}]}}},S={args:{data:{...i,datalist:[i.datalist[0]]}}},T={args:{data:i,className:"custom-tab-with-image"},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**
+- \`.tab-with-image\` - \u7EC4\u4EF6\u6839\u5BB9\u5668
+
+**\u5185\u5BB9\u533A\u57DF\uFF1A**
+- \`.tab-with-image__content\` - \u5185\u5BB9\u5BB9\u5668
+- \`.tab-with-image__header\` - \u5934\u90E8\u5BB9\u5668
+- \`.tab-with-image__title\` - \u6807\u9898
+- \`.tab-with-image__description\` - \u63CF\u8FF0\u6587\u672C
+
+**Tab \u533A\u57DF\uFF1A**
+- \`.tab-with-image__tabs-wrapper\` - Tab \u5916\u5C42\u5BB9\u5668
+- \`.tab-with-image__tabs\` - Tab \u5217\u8868\u5BB9\u5668
+- \`.tab-with-image__slider\` - \u6ED1\u52A8\u80CC\u666F
+- \`.tab-with-image__tab\` - \u5355\u4E2A Tab
+- \`.tab-with-image__tab--active\` - \u6FC0\u6D3B\u7684 Tab \u4FEE\u9970\u7B26
+- \`.tab-with-image__tab-title\` - Tab \u6807\u9898
+
+**\u56FE\u7247\u533A\u57DF\uFF1A**
+- \`.tab-with-image__image-wrapper\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668
+- \`.tab-with-image__image-motion\` - \u56FE\u7247\u52A8\u753B\u5BB9\u5668
+- \`.tab-with-image__image\` - \u56FE\u7247\u5143\u7D20
+
+**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**
+\`\`\`css
+/* \u81EA\u5B9A\u4E49 Tab \u6837\u5F0F */
+.tab-with-image__tab {
+  font-weight: 600;
+  padding: 12px 24px;
+}
+
+/* \u81EA\u5B9A\u4E49\u6FC0\u6D3B\u72B6\u6001 */
+.tab-with-image__tab--active {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white !important;
+}
+
+/* \u81EA\u5B9A\u4E49\u6ED1\u52A8\u80CC\u666F */
+.tab-with-image__slider {
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+}
+
+/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5BB9\u5668 */
+.tab-with-image__image-wrapper {
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+\`\`\`
+        `}}}};
+//# sourceMappingURL=tabWithImage.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/tabWithImage.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport TabWithImage from '../biz-components/TabWithImage/index.js'\nimport type { TabWithImageProps } from '../biz-components/TabWithImage/types.js'\n\nconst meta = {\n  title: 'Biz Components/TabWithImage',\n  component: TabWithImage,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: 'Tab \u5207\u6362\u548C\u56FE\u7247\u5C55\u793A\u7EC4\u4EF6\uFF0C\u4F7F\u7528\u6ED1\u52A8\u80CC\u666F\u9AD8\u4EAE\u6548\u679C\u548C Framer Motion \u52A8\u753B',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof TabWithImage>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: TabWithImageProps['data'] = {\n  desc: 'Effortless customization at your fingertips.',\n  title: 'Smart App Control',\n  datalist: [\n    {\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n        alt: 'Customizable Cleaning Modes',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n        mimeType: 'image/png',\n      },\n      title: 'Customizable Cleaning Modes',\n      imgPad: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n        alt: 'Customizable Cleaning Modes Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n        mimeType: 'image/png',\n      },\n      imageMob: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n        alt: 'Customizable Cleaning Modes Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n        mimeType: 'image/png',\n      },\n    },\n    {\n      image: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n        alt: 'Multi-Floor Mapping',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n        mimeType: 'image/png',\n      },\n      title: 'Multi-Floor Mapping',\n      imgPad: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n        alt: 'Multi-Floor Mapping Pad',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n        mimeType: 'image/png',\n      },\n      imageMob: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n        alt: 'Multi-Floor Mapping Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\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      datalist: [\n        ...defaultData.datalist,\n        {\n          image: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n            alt: 'Smart Scheduling',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n            mimeType: 'image/png',\n          },\n          title: 'Smart Scheduling',\n          imgPad: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n            alt: 'Smart Scheduling Pad',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n            mimeType: 'image/png',\n          },\n          imageMob: {\n            url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n            alt: 'Smart Scheduling Mobile',\n            thumbnailURL:\n              'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n            mimeType: 'image/png',\n          },\n        },\n      ],\n    },\n  },\n}\n\nexport const SingleItem: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      datalist: [defaultData.datalist[0]],\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-tab-with-image',\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- \\`.tab-with-image\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.tab-with-image__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.tab-with-image__header\\` - \u5934\u90E8\u5BB9\u5668\n- \\`.tab-with-image__title\\` - \u6807\u9898\n- \\`.tab-with-image__description\\` - \u63CF\u8FF0\u6587\u672C\n\n**Tab \u533A\u57DF\uFF1A**\n- \\`.tab-with-image__tabs-wrapper\\` - Tab \u5916\u5C42\u5BB9\u5668\n- \\`.tab-with-image__tabs\\` - Tab \u5217\u8868\u5BB9\u5668\n- \\`.tab-with-image__slider\\` - \u6ED1\u52A8\u80CC\u666F\n- \\`.tab-with-image__tab\\` - \u5355\u4E2A Tab\n- \\`.tab-with-image__tab--active\\` - \u6FC0\u6D3B\u7684 Tab \u4FEE\u9970\u7B26\n- \\`.tab-with-image__tab-title\\` - Tab \u6807\u9898\n\n**\u56FE\u7247\u533A\u57DF\uFF1A**\n- \\`.tab-with-image__image-wrapper\\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668\n- \\`.tab-with-image__image-motion\\` - \u56FE\u7247\u52A8\u753B\u5BB9\u5668\n- \\`.tab-with-image__image\\` - \u56FE\u7247\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49 Tab \u6837\u5F0F */\n.tab-with-image__tab {\n  font-weight: 600;\n  padding: 12px 24px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6FC0\u6D3B\u72B6\u6001 */\n.tab-with-image__tab--active {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white !important;\n}\n\n/* \u81EA\u5B9A\u4E49\u6ED1\u52A8\u80CC\u666F */\n.tab-with-image__slider {\n  background: rgba(255, 255, 255, 0.2);\n  backdrop-filter: blur(10px);\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u5BB9\u5668 */\n.tab-with-image__image-wrapper {\n  border-radius: 24px;\n  overflow: hidden;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,eAAAC,EAAA,eAAAC,EAAA,qBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAAA,IAAAQ,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,+JACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIf,MAAME,EAAyC,CAC7C,KAAM,+CACN,MAAO,oBACP,SAAU,CACR,CACE,MAAO,CACL,IAAK,gIACL,IAAK,8BACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,8BACP,OAAQ,CACN,IAAK,gIACL,IAAK,kCACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,qCACL,aACE,gIACF,SAAU,WACZ,CACF,EACA,CACE,MAAO,CACL,IAAK,kIACL,IAAK,sBACL,aACE,kIACF,SAAU,WACZ,EACA,MAAO,sBACP,OAAQ,CACN,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,kIACL,IAAK,6BACL,aACE,kIACF,SAAU,WACZ,CACF,CACF,CACF,EAEaV,EAAiB,CAC5B,KAAM,CACJ,KAAMU,CACR,CACF,EAEaR,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGQ,EACH,SAAU,CACR,GAAGA,EAAY,SACf,CACE,MAAO,CACL,IAAK,gIACL,IAAK,mBACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,mBACP,OAAQ,CACN,IAAK,gIACL,IAAK,uBACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,CACF,CACF,CACF,CACF,CACF,EAEaT,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGS,EACH,SAAU,CAACA,EAAY,SAAS,CAAC,CAAC,CACpC,CACF,CACF,EAEaP,EAA0B,CACrC,KAAM,CACJ,KAAMO,EACN,UAAW,uBACb,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,SAqDT,CACF,CACF,CACF",
+  "names": ["tabWithImage_stories_exports", "__export", "Default", "SingleItem", "ThreeItems", "WithCustomStyles", "tabWithImage_stories_default", "__toCommonJS", "import_react", "import_TabWithImage", "meta", "TabWithImage", "defaultData"]
+}

package/dist/cjs/stories/tabsWithMedia.stories.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import type { TabsWithMediaProps } from '../biz-components/TabsWithMedia/types.js';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<Omit<TabsWithMediaProps & 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>;
+    }, "ref"> & React.RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ThreeItems: Story;
+export declare const FourItems: Story;

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

@@ -0,0 +1,73 @@
+"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 x={};r(x,{Default:()=>u,FourItems:()=>v,ThreeItems:()=>w,WithCustomStyles:()=>S,default:()=>y});module.exports=_(x);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\u5BB9\u5668\u5706\u89D2 */
+.tabs-with-media__video-wrapper {
+  border-radius: 32px;
+}
+
+/* \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:\n          '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\u5BB9\u5668\u5706\u89D2 */\n.tabs-with-media__video-wrapper {\n  border-radius: 32px;\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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,cAAAC,EAAA,eAAAC,EAAA,qBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAP,GAAA,IAAAQ,EAAkB,iBAElBC,EAA0B,uDAG1B,MAAMC,EAAO,CACX,MAAO,+BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,SACR,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,UACE,qPACJ,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIf,MAAME,EAA0C,CAC9C,MAAO,2BACP,OAAQ,CACN,IAAK,0HACL,IAAK,2BACL,aACE,0HACF,SAAU,WACZ,EACA,MAAO,CACL,IAAK,4EACL,IAAK,iCACL,aACE,0HACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,qIACL,IAAK,wCACL,aACE,0HACF,SAAU,WACZ,EACA,MAAO,CACL,CACE,IAAK,gBACL,KAAM,mEACN,KAAM,CACJ,IAAK,wIACL,IAAK,gBACL,aACE,wIACF,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,0HACL,IAAK,uBACL,aACE,0HACF,SAAU,WACZ,CACF,EACA,CACE,IAAK,iBACL,KAAM,8FACN,KAAM,CACJ,IAAK,yIACL,IAAK,iBACL,aACE,yIACF,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,4HACL,IAAK,wBACL,aACE,4HACF,SAAU,WACZ,CACF,EACA,CACE,IAAK,eACL,KAAM,mDACN,KAAM,CACJ,IAAK,uIACL,IAAK,eACL,aACE,uIACF,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,4HACL,IAAK,sBACL,aACE,4HACF,SAAU,WACZ,CACF,EACA,CACE,IAAK,iBACL,KAAM,iFACN,KAAM,CACJ,IAAK,yIACL,IAAK,iBACL,aACE,yIACF,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,4HACL,IAAK,wBACL,aACE,4HACF,SAAU,WACZ,CACF,EACA,CACE,IAAK,wBACL,KAAM,kCACN,KAAM,CACJ,IAAK,gJACL,IAAK,wBACL,aACE,gJACF,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,4HACL,IAAK,+BACL,aACE,4HACF,SAAU,WACZ,CACF,EACA,CACE,IAAK,iCACL,KAAM,8DACN,KAAM,CACJ,IAAK,yJACL,IAAK,iCACL,aACE,yJACF,SAAU,WACZ,EACA,OAAQ,CACN,IAAK,4HACL,IAAK,wCACL,aACE,4HACF,SAAU,WACZ,CACF,CACF,CACF,EAEaV,EAAiB,CAC5B,KAAM,CACJ,KAAMU,CACR,CACF,EAEaR,EAAoB,CAC/B,KAAM,CACJ,KAAM,CACJ,GAAGQ,EACH,MAAOA,EAAY,MAAM,MAAM,EAAG,CAAC,EACnC,QAAS,CACP,CAAE,KAAM,IAAK,MAAO,IAAK,aAAc,CAAE,EACzC,CAAE,KAAM,IAAK,MAAO,IAAK,aAAc,CAAE,EACzC,CAAE,KAAM,IAAK,MAAO,IAAK,aAAc,CAAE,CAC3C,CACF,CACF,CACF,EAEaT,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGS,EACH,MAAOA,EAAY,MAAM,MAAM,EAAG,CAAC,EACnC,QAAS,CACP,CAAE,KAAM,IAAK,MAAO,IAAK,aAAc,CAAE,EACzC,CAAE,KAAM,IAAK,MAAO,IAAK,aAAc,CAAE,EACzC,CAAE,KAAM,IAAK,MAAO,IAAK,aAAc,CAAE,EACzC,CAAE,KAAM,IAAK,MAAO,KAAM,aAAc,CAAE,CAC5C,CACF,CACF,CACF,EAEaP,EAA0B,CACrC,KAAM,CACJ,KAAMO,EACN,UAAW,wBACb,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAwET,CACF,CACF,CACF",
+  "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.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import type { VideoFeatureProps } from '../biz-components/VideoFeature/types.js';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<Omit<VideoFeatureProps & 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>;
+    }, "ref"> & React.RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithoutSubtitle: Story;
+export declare const DesktopOnly: Story;
+export declare const WithoutPosters: Story;

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

@@ -0,0 +1,57 @@
+"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 T={};u(T,{Default:()=>g,DesktopOnly:()=>D,WithCustomStyles:()=>x,WithoutPosters:()=>S,WithoutSubtitle:()=>y,default:()=>_});module.exports=v(T);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"}}}},x={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\u5706\u89D2\u548C\u9634\u5F71 */
+.video-feature__video-wrapper {
+  border-radius: 24px;
+  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\u5706\u89D2\u548C\u9634\u5F71 */\n.video-feature__video-wrapper {\n  border-radius: 24px;\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;AAAA,SAwDT,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/tailwind.config.d.ts

@@ -0,0 +1,253 @@
+declare const _default: {
+    content: string[];
+    theme: {
+        extend: {
+            screens: {
+                xxs: {
+                    max: string;
+                };
+                xs: {
+                    max: string;
+                };
+                sm: {
+                    max: string;
+                };
+                md: {
+                    max: string;
+                };
+                l: {
+                    max: string;
+                };
+                l1: {
+                    max: string;
+                };
+                x: {
+                    max: string;
+                };
+                xl: {
+                    max: string;
+                };
+                xxl: {
+                    max: string;
+                };
+                xxxl: {
+                    max: string;
+                };
+                'min-md': {
+                    min: string;
+                };
+                'min-l1': {
+                    min: string;
+                };
+                'min-l': {
+                    min: string;
+                };
+                'min-x': {
+                    min: string;
+                };
+                'min-xl': {
+                    min: string;
+                };
+                'min-xsl': {
+                    min: string;
+                };
+                'min-xxl': {
+                    min: string;
+                };
+                'min-xxxl': {
+                    min: string;
+                };
+                'l-xl': {
+                    min: string;
+                    max: string;
+                };
+                'l-lx': {
+                    min: string;
+                    max: string;
+                };
+                'md-l': {
+                    min: string;
+                    max: string;
+                };
+                'md-xxl': {
+                    min: string;
+                    max: string;
+                };
+                'xl-xxl': {
+                    min: string;
+                    max: string;
+                };
+                xm: {
+                    min: string;
+                    max: string;
+                };
+                lg: {
+                    min: string;
+                    max: string;
+                };
+                mx: {
+                    min: string;
+                    max: string;
+                };
+                mxl: {
+                    min: string;
+                    max: string;
+                };
+            };
+            colors: {
+                brand: {
+                    0: string;
+                    1: string;
+                };
+                success: {
+                    0: string;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                };
+                error: {
+                    0: string;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                };
+                warning: {
+                    0: string;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                };
+                info: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    quaternary: string;
+                    white: string;
+                };
+                container: {
+                    primary: string;
+                    secondary: {
+                        0: string;
+                        1: string;
+                    };
+                };
+                bg: {
+                    0: string;
+                    1: string;
+                    2: string;
+                };
+                lines: {
+                    DEFAULT: string;
+                    1: string;
+                    2: string;
+                    3: string;
+                    4: string;
+                    5: string;
+                };
+                masks: {
+                    0: string;
+                    1: string;
+                };
+                tab: {
+                    word: {
+                        0: string;
+                        1: string;
+                        2: string;
+                    };
+                    stroke: {
+                        0: string;
+                        1: string;
+                        2: string;
+                    };
+                    fill: {
+                        0: string;
+                        1: string;
+                        2: string;
+                    };
+                };
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                btn: {
+                    primary: {
+                        DEFAULT: string;
+                        foreground: string;
+                        active: string;
+                        disabled: {
+                            DEFAULT: string;
+                            foreground: string;
+                        };
+                        border: {
+                            DEFAULT: string;
+                        };
+                    };
+                    secondary: {
+                        DEFAULT: string;
+                        foreground: string;
+                        active: string;
+                        disabled: {
+                            DEFAULT: string;
+                            foreground: string;
+                            borderColor: string;
+                        };
+                    };
+                };
+                badge: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                skeleton: {
+                    DEFAULT: string;
+                };
+                background: {
+                    DEFAULT: string;
+                };
+            };
+            borderRadius: {
+                btn: string;
+            };
+            lineHeight: {
+                tight: string;
+                normal: string;
+                loose: string;
+            };
+            letterSpacing: {
+                DEFAULT: string;
+            };
+            width: {
+                xxxl: string;
+                xxl: string;
+                xl: string;
+                l: string;
+                s: string;
+            };
+            gap: {
+                s: string;
+                m: string;
+                l: string;
+                xl: string;
+                xxl: string;
+            };
+            rowGap: {
+                s: string;
+                m: string;
+                l: string;
+                xl: string;
+                xxl: string;
+            };
+            columnGap: {
+                s: string;
+                m: string;
+                l: string;
+                xl: string;
+                xxl: string;
+            };
+        };
+    };
+    plugins: never[];
+};
+export default _default;

package/dist/cjs/tests/BrandEquity.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/cjs/tests/Ksp.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';