npm - @anker-in/headless-ui - Versions diffs - 1.1.16 → 1.1.17-alpha.1765870943164 - Mend

@anker-in/headless-ui 1.1.16 → 1.1.17-alpha.1765870943164

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

Files changed (807) hide show

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

@@ -0,0 +1,50 @@
+"use strict";var n=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var h=(t,o)=>{for(var e in o)a(t,e,{get:o[e],enumerable:!0})},p=(t,o,e,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of d(o))!m.call(t,r)&&r!==e&&a(t,r,{get:()=>o[r],enumerable:!(c=u(o,r))||c.enumerable});return t};var y=(t,o,e)=>(e=t!=null?n(l(t)):{},p(o||!t||!t.__esModule?a(e,"default",{value:t,enumerable:!0}):e,t)),g=t=>p(a({},"__esModule",{value:!0}),t);var P={};h(P,{CustomCTA:()=>x,Default:()=>_,LongTitle:()=>S,ShortSubtitle:()=>T,WithCustomStyles:()=>C,default:()=>f});module.exports=g(P);var H=require("react"),i=y(require("../biz-components/ProductHero/index.js"));const b={title:"Biz Components/ProductHero",component:i.default,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:"\u4EA7\u54C1\u5C55\u793A\u7EC4\u4EF6\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001CTA \u6309\u94AE\u548C\u4EA7\u54C1\u56FE\u7247"}}},tags:["autodocs"]};var f=b;const s={title:"Buy your cleaning housekeeper now",poster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-poster.png?v=1751427172",alt:"Product Hero",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-poster.png?v=1751427172",mimeType:"image/png"},ctaLink:"/products/t2353111",ctaText:"shop now",subtitle:"The World's First HydrJet\u2122 Robot Vacuum with 20,000 Pa Turbo Suction",mobPoster:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-poster.png?v=1751427222",alt:"Product Hero Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-poster.png?v=1751427222",mimeType:"image/png"}},_={args:{data:s}},S={args:{data:{...s,title:"Buy your advanced cleaning housekeeper with revolutionary technology now"}}},T={args:{data:{...s,subtitle:"Revolutionary Robot Vacuum"}}},x={args:{data:{...s,ctaText:"Learn More",ctaLink:"/learn-more"}}},C={args:{data:s,className:"custom-product-hero"},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**
+- \`.product-hero\` - \u7EC4\u4EF6\u6839\u5BB9\u5668
+**\u5185\u5BB9\u533A\u57DF\uFF1A**
+- \`.product-hero__content\` - \u5185\u5BB9\u5BB9\u5668
+- \`.product-hero__text\` - \u6587\u672C\u5BB9\u5668
+- \`.product-hero__title\` - \u6807\u9898
+- \`.product-hero__subtitle\` - \u526F\u6807\u9898
+- \`.product-hero__subtitle--desktop\` - \u684C\u9762\u7AEF\u526F\u6807\u9898\u4FEE\u9970\u7B26
+- \`.product-hero__subtitle--mobile\` - \u79FB\u52A8\u7AEF\u526F\u6807\u9898\u4FEE\u9970\u7B26
+**CTA \u6309\u94AE\uFF1A**
+- \`.product-hero__cta-link\` - CTA \u94FE\u63A5
+- \`.product-hero__cta-button\` - CTA \u6309\u94AE
+**\u56FE\u7247\u5143\u7D20\uFF1A**
+- \`.product-hero__image\` - \u4EA7\u54C1\u56FE\u7247
+**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */
+.product-hero__title {
+  font-size: 3rem;
+  font-weight: 900;
+  color: #1e293b;
+}
+/* \u81EA\u5B9A\u4E49 CTA \u6309\u94AE */
+.product-hero__cta-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 16px 32px;
+}
+/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */
+.product-hero__image:hover {
+  transform: scale(1.02);
+  transition: transform 0.4s ease;
+}
+/* \u81EA\u5B9A\u4E49\u5185\u5BB9\u533A\u57DF */
+.product-hero__content {
+  padding: 24px;
+  background: rgba(255, 255, 255, 0.05);
+}
+\`\`\`
+        `}}}};
+//# sourceMappingURL=productHero.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/productHero.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ProductHero from '../biz-components/ProductHero/index.js'\nimport type { ProductHeroProps } from '../biz-components/ProductHero/types.js'\n\nconst meta = {\n  title: 'Biz Components/ProductHero',\n  component: ProductHero,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: '\u4EA7\u54C1\u5C55\u793A\u7EC4\u4EF6\uFF0C\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u3001CTA \u6309\u94AE\u548C\u4EA7\u54C1\u56FE\u7247',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ProductHero>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ProductHeroProps['data'] = {\n  title: 'Buy your cleaning housekeeper now',\n  poster: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-poster.png?v=1751427172',\n    alt: 'Product Hero',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-poster.png?v=1751427172',\n    mimeType: 'image/png',\n  },\n  ctaLink: '/products/t2353111',\n  ctaText: 'shop now',\n  subtitle: \"The World's First HydrJet\u2122 Robot Vacuum with 20,000 Pa Turbo Suction\",\n  mobPoster: {\n    url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-poster.png?v=1751427222',\n    alt: 'Product Hero Mobile',\n    thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-poster.png?v=1751427222',\n    mimeType: 'image/png',\n  },\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\nexport const LongTitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      title: 'Buy your advanced cleaning housekeeper with revolutionary technology now',\n    },\n  },\n}\n\nexport const ShortSubtitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      subtitle: 'Revolutionary Robot Vacuum',\n    },\n  },\n}\n\nexport const CustomCTA: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      ctaText: 'Learn More',\n      ctaLink: '/learn-more',\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-product-hero',\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- \\`.product-hero\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.product-hero__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.product-hero__text\\` - \u6587\u672C\u5BB9\u5668\n- \\`.product-hero__title\\` - \u6807\u9898\n- \\`.product-hero__subtitle\\` - \u526F\u6807\u9898\n- \\`.product-hero__subtitle--desktop\\` - \u684C\u9762\u7AEF\u526F\u6807\u9898\u4FEE\u9970\u7B26\n- \\`.product-hero__subtitle--mobile\\` - \u79FB\u52A8\u7AEF\u526F\u6807\u9898\u4FEE\u9970\u7B26\n\n**CTA \u6309\u94AE\uFF1A**\n- \\`.product-hero__cta-link\\` - CTA \u94FE\u63A5\n- \\`.product-hero__cta-button\\` - CTA \u6309\u94AE\n\n**\u56FE\u7247\u5143\u7D20\uFF1A**\n- \\`.product-hero__image\\` - \u4EA7\u54C1\u56FE\u7247\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.product-hero__title {\n  font-size: 3rem;\n  font-weight: 900;\n  color: #1e293b;\n}\n\n/* \u81EA\u5B9A\u4E49 CTA \u6309\u94AE */\n.product-hero__cta-button {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  padding: 16px 32px;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */\n.product-hero__image:hover {\n  transform: scale(1.02);\n  transition: transform 0.4s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u5185\u5BB9\u533A\u57DF */\n.product-hero__content {\n  padding: 24px;\n  background: rgba(255, 255, 255, 0.05);\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,EAAA,YAAAC,EAAA,cAAAC,EAAA,kBAAAC,EAAA,qBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAR,GAAA,IAAAS,EAAkB,iBAElBC,EAAwB,qDAGxB,MAAMC,EAAO,CACX,MAAO,6BACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,SACR,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,UAAW,gJACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOL,EAAQI,EAIf,MAAME,EAAwC,CAC5C,MAAO,oCACP,OAAQ,CACN,IAAK,qFACL,IAAK,eACL,aAAc,qFACd,SAAU,WACZ,EACA,QAAS,qBACT,QAAS,WACT,SAAU,4EACV,UAAW,CACT,IAAK,yFACL,IAAK,sBACL,aAAc,yFACd,SAAU,WACZ,CACF,EAEaV,EAAiB,CAC5B,KAAM,CACJ,KAAMU,CACR,CACF,EAEaT,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGS,EACH,MAAO,0EACT,CACF,CACF,EAEaR,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGQ,EACH,SAAU,4BACZ,CACF,CACF,EAEaX,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGW,EACH,QAAS,aACT,QAAS,aACX,CACF,CACF,EAEaP,EAA0B,CACrC,KAAM,CACJ,KAAMO,EACN,UAAW,qBACb,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,SAiDT,CACF,CACF,CACF",
+  "names": ["productHero_stories_exports", "__export", "CustomCTA", "Default", "LongTitle", "ShortSubtitle", "WithCustomStyles", "productHero_stories_default", "__toCommonJS", "import_react", "import_ProductHero", "meta", "ProductHero", "defaultData"]
+}

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

@@ -1,2 +1,2 @@
-"use strict";var n=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of l(t))!u.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var d=(e,t,o)=>(o=e!=null?n(f(e)):{},i(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>i(a({},"__esModule",{value:!0}),e);var B={};y(B,{Default:()=>S,Round:()=>P,default:()=>h});module.exports=b(B);var c=d(require("../biz-components/ShelfDisplay/index.js"));const g={title:"Biz-Components/ShelfDisplay",component:c.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var h=g;const p=[{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}}],S={args:{data:{productsCard:p,primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}},P={args:{data:{productsCard:p,shape:"round",itemShape:"round",primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}};
+"use strict";var c=Object.create;var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},i=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of f(t))!u.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(s=n(t,r))||s.enumerable});return e};var g=(e,t,o)=>(o=e!=null?c(l(e)):{},i(t||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),d=e=>i(a({},"__esModule",{value:!0}),e);var B={};y(B,{Default:()=>S,Round:()=>P,default:()=>h});module.exports=d(B);var m=g(require("../biz-components/ShelfDisplay/index.js")),w=require("gsap"),F=require("@gsap/react"),_=require("gsap/dist/ScrollTrigger"),C=require("gsap/dist/SplitText");const b={title:"Biz-Components/ShelfDisplay",component:m.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var h=b;const p=[{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}},{price:"$1,999.00",basePrice:"$2,999.00",subTitle:"Fast Charging for 3 Devices",title:"Anker Prime 27,650mAh Power Bank (250W)",tagItems:["New","20% OFF"],img:{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/e7be0a68-29b9-431c-8c0f-21bf968b1545_Product_Image_2.png?v=1744274554"}}],S={args:{data:{productsCard:p,primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}},P={args:{data:{productsCard:p,shape:"round",itemShape:"round",primaryButton:"Learn More",secondaryButton:"Shop Now"},className:"p-4"}};
 //# sourceMappingURL=shelfDisplay.stories.js.map

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

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

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

@@ -0,0 +1,105 @@
+"use strict";var c=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var g=(e,o)=>{for(var n in o)i(e,n,{get:o[n],enumerable:!0})},r=(e,o,n,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of m(o))!d.call(e,a)&&a!==n&&i(e,a,{get:()=>o[a],enumerable:!(s=u(o,a))||s.enumerable});return e};var S=(e,o,n)=>(n=e!=null?c(l(e)):{},r(o||!e||!e.__esModule?i(n,"default",{value:e,enumerable:!0}):n,e)),b=e=>r(i({},"__esModule",{value:!0}),e);var P={};g(P,{Default:()=>R,FourProducts:()=>y,SingleProduct:()=>h,WithCustomStyles:()=>C,default:()=>M});module.exports=b(P);var D=require("react"),p=S(require("../biz-components/SpecsComparison/index.js"));const _={title:"Biz Components/SpecsComparison",component:p.default,parameters:{layout:"fullscreen",backgrounds:{default:"light"},docs:{description:{component:"\u4EA7\u54C1\u89C4\u683C\u5BF9\u6BD4\u7EC4\u4EF6\uFF0C\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u89C4\u683C\u53C2\u6570\u5BF9\u6BD4"}}},tags:["autodocs"]};var M=_;const t={LeftMenu:{data:[{title:"",subTitle:["Clean Types","Portable Deep Cleaner","HydroJet\u2122 Mopping System","Mop Type","Downward Pressure","Rotations Per Minute","Suction Power","Auto-Detangling","Obstacle Avoidance","Omni Station","Obstacle Clearance Height","Minimum Height and Width Restrictions","Robot/Station","Run Time","App Control","Bluetooth","Wi-Fi"],isProduct:!0}]},RightMenu:{menus:[{sku:"T2353111",handle:"t2353111",subTitle:{"Wi-Fi":"\u2705","Mop Type":"Rolling Mop","Run Time":`Vacuum and Mop\uFF1A
+125 min (Standard)
+Vacuum\uFF1A
+216 min (Standard)`,Bluetooth:"\u2705","App Control":"\u2705","Clean Types":"Vacuum and Mop","Omni Station":"\u2705","Robot/Station":`Robot:
+12.83 \xD7 13.72 \xD7 4.40 in
+Station\uFF1A
+14.63 \xD7 19.07 \xD7 17.29 in`,"Suction Power":"20,000 Pa","Auto-Detangling":"DuoSpiral\u2122 Brushes","Downward Pressure":"1.5kg","Obstacle Avoidance":"RGB Camera + LED","Rotations Per Minute":"180RPM","Portable Deep Cleaner":"\u274C","Obstacle Clearance Height":"0.83 in","HydroJet\u2122 Mopping System":"\u2705","Minimum Height and Width Restrictions":"4.40 in / 12.83 in"}},{sku:"T2352111",handle:"t2352111",subTitle:{"Wi-Fi":"\u2705","Mop Type":"Rolling Mop","Run Time":`Vacuum and Mop\uFF1A
+125 min (Standard)
+Vacuum\uFF1A
+216 min (Standard)`,Bluetooth:"\u2705","App Control":"\u2705","Clean Types":"Vacuum and Mop","Omni Station":"\u2705","Robot/Station":`Robot:
+12.83 \xD7 13.72 \xD7 4.40 in
+Station\uFF1A
+14.63 \xD7 19.07 \xD7 17.29 in`,"Suction Power":"20,000 Pa","Auto-Detangling":"DuoSpiral\u2122 Brushes","Downward Pressure":"1.5kg","Obstacle Avoidance":"RGB Camera + LED","Rotations Per Minute":"180RPM","Portable Deep Cleaner":"\u2705","Obstacle Clearance Height":"0.83 in","HydroJet\u2122 Mopping System":"\u2705","Minimum Height and Width Restrictions":"4.40 in / 12.83 in"}}]},DefaultSelectMenu:{buttonText:"Buy Now"}},R={args:{data:t}},h={args:{data:{...t,RightMenu:{menus:[t.RightMenu.menus[0]]}}}},y={args:{data:{...t,RightMenu:{menus:[...t.RightMenu.menus,{sku:"T20801A1",handle:"t2080111-c",subTitle:{"Wi-Fi":"\u2705","Mop Type":"Rolling Mop","Run Time":`Vacuum and Mop\uFF1A
+136 min (Standard)
+Vacuum\uFF1A
+216 min (Standard)`,Bluetooth:"\u2705","App Control":"\u2705","Clean Types":"Vacuum and Mop","Omni Station":"\u2705","Robot/Station":`Robot:
+12.79 \xD7 13.66 \xD7 3.78 in
+Station:
+15.08 \xD7 18.39 \xD7 26.38 in`,"Suction Power":"8,000 Pa","Auto-Detangling":"Detangling Brush","Downward Pressure":"1kg","Obstacle Avoidance":"Active Binocular Infrared Camera + RGB camera","Rotations Per Minute":"170RPM","Portable Deep Cleaner":"\u274C","Obstacle Clearance Height":"0.79 in","HydroJet\u2122 Mopping System":"\u2705","Minimum Height and Width Restrictions":"4.02 in / 16.54 in"}},{sku:"T2351111",handle:"t2351111",subTitle:{"Wi-Fi":"\u2705","Mop Type":"Dual Rotating Mop Pads","Run Time":`Vacuum and Mop\uFF1A
+136 min (Standard)
+Vacuum\uFF1A
+173 min (Standard)`,Bluetooth:"\u2705","App Control":"\u2705","Clean Types":"Vacuum and Mop","Omni Station":"\u2705","Robot/Station":`Robot:
+12.8 \xD7 13.90 \xD7 4.47 in
+Station\uFF1A
+14.41 \xD7 18.90 \xD7 18.11 in`,"Suction Power":"8,000 Pa","Auto-Detangling":"Pro-Detangle Comb\u2122","Downward Pressure":"1kg","Obstacle Avoidance":"RGB Camera + LED","Rotations Per Minute":"180RPM","Portable Deep Cleaner":"\u274C","Obstacle Clearance Height":"0.83 in","HydroJet\u2122 Mopping System":"\u274C","Minimum Height and Width Restrictions":"5.12 in / 13.78 in"}}]}}}},C={args:{data:t,className:"custom-specs-comparison"},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**
+- \`.specs-comparison\` - \u7EC4\u4EF6\u6839\u5BB9\u5668
+**\u5BB9\u5668\u5143\u7D20\uFF1A**
+- \`.specs-comparison__container\` - \u4E3B\u5BB9\u5668
+- \`.specs-comparison__wrapper\` - \u5185\u5BB9\u5305\u88C5\u5668
+**\u4FA7\u8FB9\u680F\u5BFC\u822A\uFF1A**
+- \`.specs-comparison__sidebar\` - \u4FA7\u8FB9\u680F\u5BB9\u5668
+- \`.specs-comparison__nav\` - \u5BFC\u822A\u680F
+- \`.specs-comparison__nav-item\` - \u5BFC\u822A\u9879
+- \`.specs-comparison__nav-item--active\` - \u6FC0\u6D3B\u7684\u5BFC\u822A\u9879\u4FEE\u9970\u7B26
+**\u5185\u5BB9\u533A\u57DF\uFF1A**
+- \`.specs-comparison__content\` - \u5185\u5BB9\u5BB9\u5668
+- \`.specs-comparison__sections\` - \u533A\u5757\u5217\u8868\u5BB9\u5668
+- \`.specs-comparison__section\` - \u5355\u4E2A\u533A\u5757
+- \`.specs-comparison__section-title\` - \u533A\u5757\u6807\u9898
+**\u89C4\u683C\u884C\uFF1A**
+- \`.specs-comparison__row\` - \u89C4\u683C\u53C2\u6570\u884C
+- \`.specs-comparison__row--first\` - \u7B2C\u4E00\u884C\u4FEE\u9970\u7B26
+- \`.specs-comparison__spec-label\` - \u89C4\u683C\u53C2\u6570\u6807\u7B7E
+- \`.specs-comparison__values-grid\` - \u53C2\u6570\u503C\u7F51\u683C\u5BB9\u5668
+- \`.specs-comparison__values-grid--single\` - \u5355\u5217\u7F51\u683C\u4FEE\u9970\u7B26
+- \`.specs-comparison__values-grid--double\` - \u53CC\u5217\u7F51\u683C\u4FEE\u9970\u7B26
+- \`.specs-comparison__value-wrapper\` - \u53C2\u6570\u503C\u5916\u5C42\u5BB9\u5668
+- \`.specs-comparison__value\` - \u53C2\u6570\u503C\u6587\u672C
+**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u80CC\u666F\u8272 */
+.specs-comparison {
+  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
+}
+/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u9879\u6837\u5F0F */
+.specs-comparison__nav-item {
+  border-left: 3px solid transparent;
+  transition: all 0.3s ease;
+}
+.specs-comparison__nav-item--active {
+  border-left-color: #007bff;
+  background: linear-gradient(90deg, #fff 0%, rgba(0,123,255,0.05) 100%);
+}
+/* \u81EA\u5B9A\u4E49\u89C4\u683C\u884C\u60AC\u505C\u6548\u679C */
+.specs-comparison__row:hover {
+  background: rgba(255, 255, 255, 0.5);
+  transition: background 0.2s ease;
+}
+/* \u81EA\u5B9A\u4E49\u89C4\u683C\u6807\u7B7E */
+.specs-comparison__spec-label {
+  color: #495057;
+  font-weight: 600;
+}
+/* \u81EA\u5B9A\u4E49\u53C2\u6570\u503C */
+.specs-comparison__value {
+  color: #212529;
+  line-height: 1.6;
+}
+/* \u81EA\u5B9A\u4E49\u533A\u5757\u6807\u9898 */
+.specs-comparison__section-title {
+  color: #1a1a1a;
+  border-bottom: 2px solid #007bff;
+  padding-bottom: 8px;
+}
+\`\`\`
+        `}}}};
+//# sourceMappingURL=specsComparison.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/specsComparison.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport SpecsComparison from '../biz-components/SpecsComparison/index.js'\nimport type { SpecsComparisonProps } from '../biz-components/SpecsComparison/types.js'\n\nconst meta = {\n  title: 'Biz Components/SpecsComparison',\n  component: SpecsComparison,\n  parameters: {\n    layout: 'fullscreen',\n    backgrounds: {\n      default: 'light',\n    },\n    docs: {\n      description: {\n        component: '\u4EA7\u54C1\u89C4\u683C\u5BF9\u6BD4\u7EC4\u4EF6\uFF0C\u5C55\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u89C4\u683C\u53C2\u6570\u5BF9\u6BD4',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof SpecsComparison>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: SpecsComparisonProps['data'] = {\n  LeftMenu: {\n    data: [\n      {\n        title: '',\n        subTitle: [\n          'Clean Types',\n          'Portable Deep Cleaner',\n          'HydroJet\u2122 Mopping System',\n          'Mop Type',\n          'Downward Pressure',\n          'Rotations Per Minute',\n          'Suction Power',\n          'Auto-Detangling',\n          'Obstacle Avoidance',\n          'Omni Station',\n          'Obstacle Clearance Height',\n          'Minimum Height and Width Restrictions',\n          'Robot/Station',\n          'Run Time',\n          'App Control',\n          'Bluetooth',\n          'Wi-Fi',\n        ],\n        isProduct: true,\n      },\n    ],\n  },\n  RightMenu: {\n    menus: [\n      {\n        sku: 'T2353111',\n        handle: 't2353111',\n        subTitle: {\n          'Wi-Fi': '\u2705',\n          'Mop Type': 'Rolling Mop',\n          'Run Time': 'Vacuum and Mop\uFF1A\\n125 min (Standard)\\n\\nVacuum\uFF1A\\n216 min (Standard)',\n          Bluetooth: '\u2705',\n          'App Control': '\u2705',\n          'Clean Types': 'Vacuum and Mop',\n          'Omni Station': '\u2705',\n          'Robot/Station': 'Robot: \\n12.83 \u00D7 13.72 \u00D7 4.40 in\\nStation\uFF1A\\n14.63 \u00D7 19.07 \u00D7 17.29 in',\n          'Suction Power': '20,000 Pa',\n          'Auto-Detangling': 'DuoSpiral\u2122 Brushes',\n          'Downward Pressure': '1.5kg',\n          'Obstacle Avoidance': 'RGB Camera + LED',\n          'Rotations Per Minute': '180RPM',\n          'Portable Deep Cleaner': '\u274C',\n          'Obstacle Clearance Height': '0.83 in',\n          'HydroJet\u2122 Mopping System': '\u2705',\n          'Minimum Height and Width Restrictions': '4.40 in / 12.83 in',\n        },\n      },\n      {\n        sku: 'T2352111',\n        handle: 't2352111',\n        subTitle: {\n          'Wi-Fi': '\u2705',\n          'Mop Type': 'Rolling Mop',\n          'Run Time': 'Vacuum and Mop\uFF1A\\n125 min (Standard)\\n\\nVacuum\uFF1A\\n216 min (Standard)',\n          Bluetooth: '\u2705',\n          'App Control': '\u2705',\n          'Clean Types': 'Vacuum and Mop',\n          'Omni Station': '\u2705',\n          'Robot/Station': 'Robot: \\n12.83 \u00D7 13.72 \u00D7 4.40 in\\nStation\uFF1A\\n14.63 \u00D7 19.07 \u00D7 17.29 in',\n          'Suction Power': '20,000 Pa',\n          'Auto-Detangling': 'DuoSpiral\u2122 Brushes',\n          'Downward Pressure': '1.5kg',\n          'Obstacle Avoidance': 'RGB Camera + LED',\n          'Rotations Per Minute': '180RPM',\n          'Portable Deep Cleaner': '\u2705',\n          'Obstacle Clearance Height': '0.83 in',\n          'HydroJet\u2122 Mopping System': '\u2705',\n          'Minimum Height and Width Restrictions': '4.40 in / 12.83 in',\n        },\n      },\n    ],\n  },\n  DefaultSelectMenu: {\n    buttonText: 'Buy Now',\n  },\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\nexport const SingleProduct: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      RightMenu: {\n        menus: [defaultData.RightMenu.menus[0]],\n      },\n    },\n  },\n}\n\nexport const FourProducts: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      RightMenu: {\n        menus: [\n          ...defaultData.RightMenu.menus,\n          {\n            sku: 'T20801A1',\n            handle: 't2080111-c',\n            subTitle: {\n              'Wi-Fi': '\u2705',\n              'Mop Type': 'Rolling Mop',\n              'Run Time': 'Vacuum and Mop\uFF1A\\n136 min (Standard)\\n\\nVacuum\uFF1A\\n216 min (Standard)',\n              Bluetooth: '\u2705',\n              'App Control': '\u2705',\n              'Clean Types': 'Vacuum and Mop',\n              'Omni Station': '\u2705',\n              'Robot/Station': 'Robot:\\n12.79 \u00D7 13.66 \u00D7 3.78 in\\nStation:\\n15.08 \u00D7 18.39 \u00D7 26.38 in',\n              'Suction Power': '8,000 Pa',\n              'Auto-Detangling': 'Detangling Brush',\n              'Downward Pressure': '1kg',\n              'Obstacle Avoidance': 'Active Binocular Infrared Camera + RGB camera',\n              'Rotations Per Minute': '170RPM',\n              'Portable Deep Cleaner': '\u274C',\n              'Obstacle Clearance Height': '0.79 in',\n              'HydroJet\u2122 Mopping System': '\u2705',\n              'Minimum Height and Width Restrictions': '4.02 in / 16.54 in',\n            },\n          },\n          {\n            sku: 'T2351111',\n            handle: 't2351111',\n            subTitle: {\n              'Wi-Fi': '\u2705',\n              'Mop Type': 'Dual Rotating Mop Pads',\n              'Run Time': 'Vacuum and Mop\uFF1A\\n136 min (Standard)\\n\\nVacuum\uFF1A\\n173 min (Standard)',\n              Bluetooth: '\u2705',\n              'App Control': '\u2705',\n              'Clean Types': 'Vacuum and Mop',\n              'Omni Station': '\u2705',\n              'Robot/Station': 'Robot: \\n12.8 \u00D7 13.90 \u00D7 4.47 in\\nStation\uFF1A\\n14.41 \u00D7 18.90 \u00D7 18.11 in',\n              'Suction Power': '8,000 Pa',\n              'Auto-Detangling': 'Pro-Detangle Comb\u2122',\n              'Downward Pressure': '1kg',\n              'Obstacle Avoidance': 'RGB Camera + LED',\n              'Rotations Per Minute': '180RPM',\n              'Portable Deep Cleaner': '\u274C',\n              'Obstacle Clearance Height': '0.83 in',\n              'HydroJet\u2122 Mopping System': '\u274C',\n              'Minimum Height and Width Restrictions': '5.12 in / 13.78 in',\n            },\n          },\n        ],\n      },\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-specs-comparison',\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- \\`.specs-comparison\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u5BB9\u5668\u5143\u7D20\uFF1A**\n- \\`.specs-comparison__container\\` - \u4E3B\u5BB9\u5668\n- \\`.specs-comparison__wrapper\\` - \u5185\u5BB9\u5305\u88C5\u5668\n\n**\u4FA7\u8FB9\u680F\u5BFC\u822A\uFF1A**\n- \\`.specs-comparison__sidebar\\` - \u4FA7\u8FB9\u680F\u5BB9\u5668\n- \\`.specs-comparison__nav\\` - \u5BFC\u822A\u680F\n- \\`.specs-comparison__nav-item\\` - \u5BFC\u822A\u9879\n- \\`.specs-comparison__nav-item--active\\` - \u6FC0\u6D3B\u7684\u5BFC\u822A\u9879\u4FEE\u9970\u7B26\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.specs-comparison__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.specs-comparison__sections\\` - \u533A\u5757\u5217\u8868\u5BB9\u5668\n- \\`.specs-comparison__section\\` - \u5355\u4E2A\u533A\u5757\n- \\`.specs-comparison__section-title\\` - \u533A\u5757\u6807\u9898\n\n**\u89C4\u683C\u884C\uFF1A**\n- \\`.specs-comparison__row\\` - \u89C4\u683C\u53C2\u6570\u884C\n- \\`.specs-comparison__row--first\\` - \u7B2C\u4E00\u884C\u4FEE\u9970\u7B26\n- \\`.specs-comparison__spec-label\\` - \u89C4\u683C\u53C2\u6570\u6807\u7B7E\n- \\`.specs-comparison__values-grid\\` - \u53C2\u6570\u503C\u7F51\u683C\u5BB9\u5668\n- \\`.specs-comparison__values-grid--single\\` - \u5355\u5217\u7F51\u683C\u4FEE\u9970\u7B26\n- \\`.specs-comparison__values-grid--double\\` - \u53CC\u5217\u7F51\u683C\u4FEE\u9970\u7B26\n- \\`.specs-comparison__value-wrapper\\` - \u53C2\u6570\u503C\u5916\u5C42\u5BB9\u5668\n- \\`.specs-comparison__value\\` - \u53C2\u6570\u503C\u6587\u672C\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u80CC\u666F\u8272 */\n.specs-comparison {\n  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);\n}\n\n/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u9879\u6837\u5F0F */\n.specs-comparison__nav-item {\n  border-left: 3px solid transparent;\n  transition: all 0.3s ease;\n}\n\n.specs-comparison__nav-item--active {\n  border-left-color: #007bff;\n  background: linear-gradient(90deg, #fff 0%, rgba(0,123,255,0.05) 100%);\n}\n\n/* \u81EA\u5B9A\u4E49\u89C4\u683C\u884C\u60AC\u505C\u6548\u679C */\n.specs-comparison__row:hover {\n  background: rgba(255, 255, 255, 0.5);\n  transition: background 0.2s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u89C4\u683C\u6807\u7B7E */\n.specs-comparison__spec-label {\n  color: #495057;\n  font-weight: 600;\n}\n\n/* \u81EA\u5B9A\u4E49\u53C2\u6570\u503C */\n.specs-comparison__value {\n  color: #212529;\n  line-height: 1.6;\n}\n\n/* \u81EA\u5B9A\u4E49\u533A\u5757\u6807\u9898 */\n.specs-comparison__section-title {\n  color: #1a1a1a;\n  border-bottom: 2px solid #007bff;\n  padding-bottom: 8px;\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["specsComparison_stories_exports", "__export", "Default", "FourProducts", "SingleProduct", "WithCustomStyles", "specsComparison_stories_default", "__toCommonJS", "import_react", "import_SpecsComparison", "meta", "SpecsComparison", "defaultData"]
+}

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

@@ -0,0 +1,53 @@
+"use strict";var l=Object.create;var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,r=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 n(a))!r.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(g(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:()=>u,SingleItem:()=>S,ThreeItems:()=>w,WithCustomStyles:()=>T,default:()=>y});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 y=_;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"}}]},u={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 {
+  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 ADDED Viewed

@@ -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  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,SAoDT,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.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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"]
+}