@anker-in/headless-ui 1.0.24 → 1.0.26-alpha.1761893017767

package/dist/esm/stories/ksp.stories.js

@@ -0,0 +1,129 @@
+import o from"../biz-components/Ksp/index.js";const e={title:"Biz-Components/Ksp",component:o,parameters:{layout:"fullscreen",docs:{description:{component:`
+# Ksp \u5173\u952E\u5356\u70B9\u7EC4\u4EF6
+
+\u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF08Key Selling Points\uFF09\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002
+
+## \u6838\u5FC3\u529F\u80FD
+
+- **\u56FE\u7247/\u89C6\u9891\u652F\u6301**\uFF1A\u6BCF\u4E2A\u5361\u7247\u53EF\u4EE5\u662F\u56FE\u7247\u6216\u89C6\u9891\uFF0C\u81EA\u52A8\u8BC6\u522B\u548C\u6E32\u67D3
+- **7 \u5361\u7247\u5E03\u5C40**\uFF1A\u56FA\u5B9A 7 \u4E2A\u5361\u7247\u4F4D\u7F6E\uFF0C\u5177\u6709\u4E0D\u540C\u7684\u5C3A\u5BF8\u548C\u6392\u5217
+- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u624B\u673A\u7AEF\u548C\u5E73\u677F/\u684C\u9762\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u5E03\u5C40\u65B9\u6848
+- **\u6587\u5B57\u8986\u76D6**\uFF1A\u6807\u9898\u548C\u63CF\u8FF0\u8986\u76D6\u5728\u5A92\u4F53\u5185\u5BB9\u4E0A
+- **\u81EA\u52A8\u64AD\u653E**\uFF1A\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u3001\u9759\u97F3
+
+## \u5E03\u5C40\u8BF4\u660E
+
+### \u684C\u9762\u7AEF/\u5E73\u677F\u7AEF\u5E03\u5C40\uFF083 \u884C\uFF09\uFF1A
+- **\u7B2C 1 \u884C**\uFF1A\u5927\u5361\u7247(59.53%) + \u5C0F\u5361\u7247(39.30%)
+- **\u7B2C 2 \u884C**\uFF1A\u5C0F\u5361\u7247(29.19%) + \u4E2D\u5361\u7247(39.30%) + \u5C0F\u5361\u7247(29.19%)
+- **\u7B2C 3 \u884C**\uFF1A\u5C0F\u5361\u7247(39.30%) + \u5927\u5361\u7247(59.53%)
+
+### \u624B\u673A\u7AEF\u5E03\u5C40\uFF085 \u884C\uFF09\uFF1A
+- **\u7B2C 1 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247
+- **\u7B2C 2 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247
+- **\u7B2C 3 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247
+- **\u7B2C 4 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247
+- **\u7B2C 5 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247
+
+## \u4F7F\u7528\u573A\u666F
+
+\u9002\u7528\u4E8E\u4EA7\u54C1\u8BE6\u60C5\u9875\uFF0C\u5C55\u793A\u4EA7\u54C1\u7684\u6838\u5FC3\u4F18\u52BF\u548C\u7279\u8272\u529F\u80FD\u3002
+
+## \u81EA\u5B9A\u4E49\u6837\u5F0F Class Names
+
+\u7EC4\u4EF6\u63D0\u4F9B\u4EE5\u4E0B\u56FA\u5B9A\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A
+
+### \u5E03\u5C40\u7C7B
+- \`.ksp-container\` - \u4E3B\u5BB9\u5668
+- \`.ksp-title\` - \u4E3B\u6807\u9898
+- \`.ksp-desktop-layout\` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668
+- \`.ksp-mobile-layout\` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668
+- \`.ksp-row\` - \u884C\u5BB9\u5668
+  - \`.ksp-row-1\` - \u7B2C 1 \u884C\uFF08\u684C\u9762\u7AEF\uFF09
+  - \`.ksp-row-2\` - \u7B2C 2 \u884C\uFF08\u684C\u9762\u7AEF\uFF09
+  - \`.ksp-row-3\` - \u7B2C 3 \u884C\uFF08\u684C\u9762\u7AEF\uFF09
+  - \`.ksp-row-mobile-1\` - \u7B2C 1 \u884C\uFF08\u624B\u673A\u7AEF\uFF09
+  - \`.ksp-row-mobile-2\` - \u7B2C 2 \u884C\uFF08\u624B\u673A\u7AEF\uFF09
+
+### \u5361\u7247\u7C7B
+- \`.ksp-card\` - \u5361\u7247\u5BB9\u5668
+- \`.ksp-card-image\` - \u5361\u7247\u56FE\u7247
+- \`.ksp-card-video\` - \u5361\u7247\u89C6\u9891
+  - \`.ksp-card-video-desktop\` - \u684C\u9762\u7AEF\u89C6\u9891
+  - \`.ksp-card-video-mobile\` - \u79FB\u52A8\u7AEF\u89C6\u9891
+- \`.ksp-card-content\` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42
+- \`.ksp-card-title\` - \u5361\u7247\u6807\u9898
+- \`.ksp-card-desc\` - \u5361\u7247\u63CF\u8FF0
+
+### \u4F7F\u7528\u793A\u4F8B
+
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u4E3B\u6807\u9898\u6837\u5F0F */
+.ksp-title {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* \u5361\u7247 hover \u6548\u679C */
+.ksp-card:hover {
+  transform: scale(1.02);
+  transition: transform 0.3s ease;
+}
+
+/* \u81EA\u5B9A\u4E49\u5361\u7247\u6807\u9898\u989C\u8272 */
+.ksp-card-title {
+  color: #fbbf24;
+}
+\`\`\`
+
+\u{1F4A1} \u67E5\u770B **CustomStyle** story \u4E86\u89E3\u5B8C\u6574\u793A\u4F8B
+        `}}},tags:["autodocs"],argTypes:{data:{description:"KSP \u6570\u636E\uFF0C\u5305\u542B title \u548C items\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09",control:{type:"object"}},className:{description:"\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0C\u53EF\u914D\u5408\u4EE5\u4E0B\u56FA\u5B9A class name \u4F7F\u7528 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n      \n**\u5E03\u5C40\u76F8\u5173\uFF1A**\n- `.ksp-container` - \u4E3B\u5BB9\u5668\n- `.ksp-desktop-layout` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- `.ksp-mobile-layout` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- `.ksp-row` - \u884C\u5BB9\u5668\n- `.ksp-row-1/2/3` - \u684C\u9762\u7AEF\u5404\u884C\n- `.ksp-row-mobile-1/2` - \u624B\u673A\u7AEF\u5404\u884C\n\n**\u5361\u7247\u76F8\u5173\uFF1A**\n- `.ksp-card` - \u5361\u7247\u5BB9\u5668\n- `.ksp-card-image` - \u5361\u7247\u56FE\u7247\n- `.ksp-card-video` - \u5361\u7247\u89C6\u9891\n- `.ksp-card-video-desktop` - \u684C\u9762\u7AEF\u89C6\u9891\n- `.ksp-card-video-mobile` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- `.ksp-card-content` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- `.ksp-card-title` - \u5361\u7247\u6807\u9898\n- `.ksp-card-desc` - \u5361\u7247\u63CF\u8FF0\n\n**\u6587\u672C\u76F8\u5173\uFF1A**\n- `.ksp-title` - \u4E3B\u6807\u9898",control:{type:"text"}}}};var a=e;const t={title:"Why Choose Our Product",items:[{title:"Improved Cleaning Efficiency",desc:"HydroJet\u2122 Floor Washing System",imageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80"},{title:"100% Cleaning Coverage",desc:"Edge-Cleaning CornerRover\u2122 Arm",imageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80"},{title:"All You Need, All-in-One",desc:"Complete Cleaning Solution",imageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80"},{title:"Less Maintenance",desc:"DuoSpiral\u2122 Detangle Brushes",imageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80"},{title:"Cleaning Power Upgrade",desc:"20,000 Pa Turbo Suction",imageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80"},{title:"Intelligent Cleaning",desc:"Smart App Control & Scheduling",imageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80"},{title:"AI.See\u2122 Obstacle Avoidance",desc:"Advanced Object Recognition",imageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80"}]},p={args:{data:t}},c={args:{data:{title:"\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC\u7684\u4EA7\u54C1",items:[{title:"\u6E05\u6D01\u6548\u7387\u5927\u5E45\u63D0\u5347",desc:"HydroJet\u2122 \u5730\u677F\u6E05\u6D01\u7CFB\u7EDF",imageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80"},{title:"100% \u6E05\u6D01\u8986\u76D6",desc:"CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2",imageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80"},{title:"\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01",desc:"\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848",imageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80"},{title:"\u66F4\u5C11\u7EF4\u62A4",desc:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",imageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80"},{title:"\u6E05\u6D01\u80FD\u529B\u5347\u7EA7",desc:"20,000 Pa \u5F3A\u529B\u5438\u5C18",imageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80"},{title:"\u667A\u80FD\u6E05\u6D01",desc:"APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6",imageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80"},{title:"AI \u667A\u80FD\u907F\u969C",desc:"\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F",imageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80"}]}}},i={args:{data:{title:"Experience the Difference",items:[{title:"Powerful Performance",desc:"See it in action",videoUrl:"https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",imageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80"},{title:"Smart Navigation",desc:"Advanced mapping technology",videoUrl:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",mobVideoUrl:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",imageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mobImageUrl:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80"},...t.items.slice(2)]}}},r={args:{data:{items:t.items}}},m={args:{data:t,className:"py-20",style:`
+    /* \u4E3B\u6807\u9898 - \u6E10\u53D8\u8272\u6587\u5B57\u6548\u679C */
+            .ksp-title {
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              -webkit-background-clip: text;
+              -webkit-text-fill-color: transparent;
+              background-clip: text;
+            }
+            
+            /* \u5361\u7247\u5BB9\u5668 - \u6DFB\u52A0\u8FC7\u6E21\u52A8\u753B */
+            .ksp-card {
+              transition: transform 0.3s ease;
+            }
+            
+            /* \u5361\u7247 hover \u6548\u679C - \u8F7B\u5FAE\u653E\u5927 */
+            .ksp-card:hover {
+              transform: scale(1.02);
+            }
+            
+            /* \u5361\u7247\u6807\u9898 - \u91D1\u8272\u6587\u5B57 */
+            .ksp-card-title {
+              color: #fbbf24;
+            }
+            
+            /* \u5361\u7247\u63CF\u8FF0 - \u6D45\u7070\u8272\u6587\u5B57 */
+            .ksp-card-desc {
+              color: #d1d5db;
+            }
+            
+            /* \u5361\u7247 hover \u6E10\u53D8\u8FB9\u6846\u6548\u679C */
+            .ksp-card::before {
+              content: '';
+              position: absolute;
+              inset: 0;
+              border: 2px solid transparent;
+              border-radius: 16px;
+              background: linear-gradient(135deg, #667eea, #764ba2) border-box;
+              -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+              -webkit-mask-composite: xor;
+              mask-composite: exclude;
+              opacity: 0;
+              transition: opacity 0.3s ease;
+            }
+            
+            .ksp-card:hover::before {
+              opacity: 1;
+            }
+    `}};export{c as Chinese,m as CustomStyle,p as Default,r as NoTitle,i as WithVideo,a as default};
+//# sourceMappingURL=ksp.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/ksp.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport Ksp from '../biz-components/Ksp/index.js'\nimport type { KspProps } from '../biz-components/Ksp/index.js'\n\nconst meta = {\n  title: 'Biz-Components/Ksp',\n  component: Ksp,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\n# Ksp \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n\n\u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF08Key Selling Points\uFF09\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n\n## \u6838\u5FC3\u529F\u80FD\n\n- **\u56FE\u7247/\u89C6\u9891\u652F\u6301**\uFF1A\u6BCF\u4E2A\u5361\u7247\u53EF\u4EE5\u662F\u56FE\u7247\u6216\u89C6\u9891\uFF0C\u81EA\u52A8\u8BC6\u522B\u548C\u6E32\u67D3\n- **7 \u5361\u7247\u5E03\u5C40**\uFF1A\u56FA\u5B9A 7 \u4E2A\u5361\u7247\u4F4D\u7F6E\uFF0C\u5177\u6709\u4E0D\u540C\u7684\u5C3A\u5BF8\u548C\u6392\u5217\n- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u624B\u673A\u7AEF\u548C\u5E73\u677F/\u684C\u9762\u7AEF\u4F7F\u7528\u4E0D\u540C\u7684\u5E03\u5C40\u65B9\u6848\n- **\u6587\u5B57\u8986\u76D6**\uFF1A\u6807\u9898\u548C\u63CF\u8FF0\u8986\u76D6\u5728\u5A92\u4F53\u5185\u5BB9\u4E0A\n- **\u81EA\u52A8\u64AD\u653E**\uFF1A\u89C6\u9891\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u3001\u9759\u97F3\n\n## \u5E03\u5C40\u8BF4\u660E\n\n### \u684C\u9762\u7AEF/\u5E73\u677F\u7AEF\u5E03\u5C40\uFF083 \u884C\uFF09\uFF1A\n- **\u7B2C 1 \u884C**\uFF1A\u5927\u5361\u7247(59.53%) + \u5C0F\u5361\u7247(39.30%)\n- **\u7B2C 2 \u884C**\uFF1A\u5C0F\u5361\u7247(29.19%) + \u4E2D\u5361\u7247(39.30%) + \u5C0F\u5361\u7247(29.19%)\n- **\u7B2C 3 \u884C**\uFF1A\u5C0F\u5361\u7247(39.30%) + \u5927\u5361\u7247(59.53%)\n\n### \u624B\u673A\u7AEF\u5E03\u5C40\uFF085 \u884C\uFF09\uFF1A\n- **\u7B2C 1 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n- **\u7B2C 2 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247\n- **\u7B2C 3 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n- **\u7B2C 4 \u884C**\uFF1A\u4E24\u4E2A\u534A\u5BBD\u5361\u7247\n- **\u7B2C 5 \u884C**\uFF1A\u5168\u5BBD\u5361\u7247\n\n## \u4F7F\u7528\u573A\u666F\n\n\u9002\u7528\u4E8E\u4EA7\u54C1\u8BE6\u60C5\u9875\uFF0C\u5C55\u793A\u4EA7\u54C1\u7684\u6838\u5FC3\u4F18\u52BF\u548C\u7279\u8272\u529F\u80FD\u3002\n\n## \u81EA\u5B9A\u4E49\u6837\u5F0F Class Names\n\n\u7EC4\u4EF6\u63D0\u4F9B\u4EE5\u4E0B\u56FA\u5B9A\u7684 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n\n### \u5E03\u5C40\u7C7B\n- \\`.ksp-container\\` - \u4E3B\u5BB9\u5668\n- \\`.ksp-title\\` - \u4E3B\u6807\u9898\n- \\`.ksp-desktop-layout\\` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-mobile-layout\\` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-row\\` - \u884C\u5BB9\u5668\n  - \\`.ksp-row-1\\` - \u7B2C 1 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-2\\` - \u7B2C 2 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-3\\` - \u7B2C 3 \u884C\uFF08\u684C\u9762\u7AEF\uFF09\n  - \\`.ksp-row-mobile-1\\` - \u7B2C 1 \u884C\uFF08\u624B\u673A\u7AEF\uFF09\n  - \\`.ksp-row-mobile-2\\` - \u7B2C 2 \u884C\uFF08\u624B\u673A\u7AEF\uFF09\n\n### \u5361\u7247\u7C7B\n- \\`.ksp-card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.ksp-card-image\\` - \u5361\u7247\u56FE\u7247\n- \\`.ksp-card-video\\` - \u5361\u7247\u89C6\u9891\n  - \\`.ksp-card-video-desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\n  - \\`.ksp-card-video-mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- \\`.ksp-card-content\\` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- \\`.ksp-card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.ksp-card-desc\\` - \u5361\u7247\u63CF\u8FF0\n\n### \u4F7F\u7528\u793A\u4F8B\n\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u4E3B\u6807\u9898\u6837\u5F0F */\n.ksp-title {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n/* \u5361\u7247 hover \u6548\u679C */\n.ksp-card:hover {\n  transform: scale(1.02);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u5361\u7247\u6807\u9898\u989C\u8272 */\n.ksp-card-title {\n  color: #fbbf24;\n}\n\\`\\`\\`\n\n\uD83D\uDCA1 \u67E5\u770B **CustomStyle** story \u4E86\u89E3\u5B8C\u6574\u793A\u4F8B\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    data: {\n      description: 'KSP \u6570\u636E\uFF0C\u5305\u542B title \u548C items\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09',\n      control: { type: 'object' },\n    },\n    className: {\n      description: `\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0C\u53EF\u914D\u5408\u4EE5\u4E0B\u56FA\u5B9A class name \u4F7F\u7528 CSS \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF1A\n      \n**\u5E03\u5C40\u76F8\u5173\uFF1A**\n- \\`.ksp-container\\` - \u4E3B\u5BB9\u5668\n- \\`.ksp-desktop-layout\\` - \u684C\u9762\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-mobile-layout\\` - \u624B\u673A\u7AEF\u5E03\u5C40\u5BB9\u5668\n- \\`.ksp-row\\` - \u884C\u5BB9\u5668\n- \\`.ksp-row-1/2/3\\` - \u684C\u9762\u7AEF\u5404\u884C\n- \\`.ksp-row-mobile-1/2\\` - \u624B\u673A\u7AEF\u5404\u884C\n\n**\u5361\u7247\u76F8\u5173\uFF1A**\n- \\`.ksp-card\\` - \u5361\u7247\u5BB9\u5668\n- \\`.ksp-card-image\\` - \u5361\u7247\u56FE\u7247\n- \\`.ksp-card-video\\` - \u5361\u7247\u89C6\u9891\n- \\`.ksp-card-video-desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\n- \\`.ksp-card-video-mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\n- \\`.ksp-card-content\\` - \u5361\u7247\u6587\u5B57\u8986\u76D6\u5C42\n- \\`.ksp-card-title\\` - \u5361\u7247\u6807\u9898\n- \\`.ksp-card-desc\\` - \u5361\u7247\u63CF\u8FF0\n\n**\u6587\u672C\u76F8\u5173\uFF1A**\n- \\`.ksp-title\\` - \u4E3B\u6807\u9898`,\n      control: { type: 'text' },\n    },\n  },\n} satisfies Meta<typeof Ksp>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\n// \u793A\u4F8B\u6570\u636E - 7 \u4E2A\u5361\u7247\nconst mockKspData: KspProps['data'] = {\n  title: 'Why Choose Our Product',\n  items: [\n    {\n      title: 'Improved Cleaning Efficiency',\n      desc: 'HydroJet\u2122 Floor Washing System',\n      imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: '100% Cleaning Coverage',\n      desc: 'Edge-Cleaning CornerRover\u2122 Arm',\n      imageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'All You Need, All-in-One',\n      desc: 'Complete Cleaning Solution',\n      imageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'Less Maintenance',\n      desc: 'DuoSpiral\u2122 Detangle Brushes',\n      imageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'Cleaning Power Upgrade',\n      desc: '20,000 Pa Turbo Suction',\n      imageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'Intelligent Cleaning',\n      desc: 'Smart App Control & Scheduling',\n      imageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n    },\n    {\n      title: 'AI.See\u2122 Obstacle Avoidance',\n      desc: 'Advanced Object Recognition',\n      imageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n      mobImageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n    },\n  ],\n}\n\n/**\n * \u9ED8\u8BA4\u72B6\u6001 - \u5C55\u793A\u5B8C\u6574\u7684 7 \u4E2A KSP \u5361\u7247\u5E03\u5C40\n * \n * \uD83D\uDCA1 \u63D0\u793A\uFF1A\u67E5\u770B \"CustomStyle\" story\uFF0C\u4E86\u89E3\u5982\u4F55\u4F7F\u7528\u56FA\u5B9A class name \u81EA\u5B9A\u4E49\u6837\u5F0F\n */\nexport const Default: Story = {\n  args: {\n    data: mockKspData,\n  },\n}\n\n/**\n * \u4E2D\u6587\u5185\u5BB9 - \u5C55\u793A\u4E2D\u6587\u5356\u70B9\n */\nexport const Chinese: Story = {\n  args: {\n    data: {\n      title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC\u7684\u4EA7\u54C1',\n      items: [\n        {\n          title: '\u6E05\u6D01\u6548\u7387\u5927\u5E45\u63D0\u5347',\n          desc: 'HydroJet\u2122 \u5730\u677F\u6E05\u6D01\u7CFB\u7EDF',\n          imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '100% \u6E05\u6D01\u8986\u76D6',\n          desc: 'CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2',\n          imageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01',\n          desc: '\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848',\n          imageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u66F4\u5C11\u7EF4\u62A4',\n          desc: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n          imageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u6E05\u6D01\u80FD\u529B\u5347\u7EA7',\n          desc: '20,000 Pa \u5F3A\u529B\u5438\u5C18',\n          imageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: '\u667A\u80FD\u6E05\u6D01',\n          desc: 'APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6',\n          imageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: 'AI \u667A\u80FD\u907F\u969C',\n          desc: '\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F',\n          imageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        },\n      ],\n    },\n  },\n}\n\n/**\n * \u89C6\u9891\u5185\u5BB9 - \u5C55\u793A\u89C6\u9891\u5361\u7247\n */\nexport const WithVideo: Story = {\n  args: {\n    data: {\n      title: 'Experience the Difference',\n      items: [\n        {\n          title: 'Powerful Performance',\n          desc: 'See it in action',\n          videoUrl: 'https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4',\n          mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n          imageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        },\n        {\n          title: 'Smart Navigation',\n          desc: 'Advanced mapping technology',\n          videoUrl: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n          mobVideoUrl: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n          imageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n          mobImageUrl: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        },\n        ...mockKspData.items.slice(2),\n      ],\n    },\n  },\n}\n\n/**\n * \u65E0\u6807\u9898 - \u53EA\u5C55\u793A\u5361\u7247\n */\nexport const NoTitle: Story = {\n  args: {\n    data: {\n      items: mockKspData.items,\n    },\n  },\n}\n\n/**\n * \u81EA\u5B9A\u4E49\u6837\u5F0F\u793A\u4F8B\n * \n * \u5C55\u793A\u5982\u4F55\u901A\u8FC7\u56FA\u5B9A\u7684 class name \u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\uFF1A\n * - `.ksp-title` - \u6E10\u53D8\u8272\u6807\u9898\n * - `.ksp-card` - hover \u7F29\u653E\u6548\u679C\n * - `.ksp-card-title` - \u91D1\u8272\u6807\u9898\n * - `.ksp-card-desc` - \u7070\u8272\u63CF\u8FF0\n * - `.ksp-card::before` - hover \u6E10\u53D8\u8FB9\u6846\n */\nexport const CustomStyle: Story = {\n  args: {\n    data: mockKspData,\n    className: 'py-20',\n    style: `\n    /* \u4E3B\u6807\u9898 - \u6E10\u53D8\u8272\u6587\u5B57\u6548\u679C */\n            .ksp-title {\n              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n              -webkit-background-clip: text;\n              -webkit-text-fill-color: transparent;\n              background-clip: text;\n            }\n            \n            /* \u5361\u7247\u5BB9\u5668 - \u6DFB\u52A0\u8FC7\u6E21\u52A8\u753B */\n            .ksp-card {\n              transition: transform 0.3s ease;\n            }\n            \n            /* \u5361\u7247 hover \u6548\u679C - \u8F7B\u5FAE\u653E\u5927 */\n            .ksp-card:hover {\n              transform: scale(1.02);\n            }\n            \n            /* \u5361\u7247\u6807\u9898 - \u91D1\u8272\u6587\u5B57 */\n            .ksp-card-title {\n              color: #fbbf24;\n            }\n            \n            /* \u5361\u7247\u63CF\u8FF0 - \u6D45\u7070\u8272\u6587\u5B57 */\n            .ksp-card-desc {\n              color: #d1d5db;\n            }\n            \n            /* \u5361\u7247 hover \u6E10\u53D8\u8FB9\u6846\u6548\u679C */\n            .ksp-card::before {\n              content: '';\n              position: absolute;\n              inset: 0;\n              border: 2px solid transparent;\n              border-radius: 16px;\n              background: linear-gradient(135deg, #667eea, #764ba2) border-box;\n              -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n              -webkit-mask-composite: xor;\n              mask-composite: exclude;\n              opacity: 0;\n              transition: opacity 0.3s ease;\n            }\n            \n            .ksp-card:hover::before {\n              opacity: 1;\n            }\n    `\n  },\n\n}\n"],
+  "mappings": "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",
+  "names": ["Ksp", "meta", "ksp_stories_default", "mockKspData", "Default", "Chinese", "WithVideo", "NoTitle", "CustomStyle"]
+}

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

@@ -0,0 +1,49 @@
+import type { StoryObj } from '@storybook/react';
+import type { ProductCompareProps } from '../biz-components/ProductCompare/index.js';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    } & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        className?: string | undefined;
+        data: {
+            title?: string;
+            subtitle?: string;
+            ourProduct?: import("../biz-components/index.js").ProductItemData;
+            competitor?: import("../biz-components/index.js").ProductItemData;
+            theme?: import("../types/props.js").Theme;
+            shape?: import("../types/props.js").Shape;
+        } & Record<string, any>;
+        style?: string | undefined;
+        uid?: string | undefined;
+        disabled?: boolean | undefined;
+        container?: {
+            desktopSpan: number;
+            mobileSpan: number;
+        } | undefined;
+        ref?: import("react").LegacyRef<any> | undefined;
+        key?: import("react").Key | null | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ImageCompare: Story;
+export declare const MixedMedia: Story;
+export declare const NoTitle: Story;
+export declare const CustomStyle: Story;
+export declare const LightTheme: Story;
+export declare const SquareShape: Story;
+export declare const RoundedShape: Story;
+export declare const LightSquare: Story;

package/dist/esm/stories/productCompare.stories.js

@@ -0,0 +1,63 @@
+import{jsx as o}from"react/jsx-runtime";import p from"../biz-components/ProductCompare/index.js";const r={title:"Biz-Components/ProductCompare",component:p,parameters:{layout:"fullscreen",docs:{description:{component:`
+# ProductCompare \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6
+
+\u7528\u4E8E\u5C55\u793A\u6211\u4EEC\u7684\u4EA7\u54C1\u4E0E\u7ADE\u54C1\u7684\u5BF9\u6BD4\u6548\u679C\uFF0C\u901A\u8FC7\u89C6\u89C9\u5316\u7684\u65B9\u5F0F\u7A81\u51FA\u4EA7\u54C1\u4F18\u52BF\u3002
+
+## \u{1F3AF} \u6838\u5FC3\u529F\u80FD
+
+- **\u53CC\u680F\u5BF9\u6BD4\u5E03\u5C40**\uFF1A\u5DE6\u4FA7\u7ADE\u54C1\uFF0839.3%\u5BBD\u5EA6\uFF09\uFF0C\u53F3\u4FA7\u6211\u4EEC\u7684\u4EA7\u54C1\uFF0859.53%\u5BBD\u5EA6\uFF09\uFF0C\u7A81\u51FA\u91CD\u70B9
+- **\u5A92\u4F53\u7C7B\u578B\u81EA\u9002\u5E94**\uFF1A\u81EA\u52A8\u8BC6\u522B\u89C6\u9891/\u56FE\u7247\u683C\u5F0F\uFF0C\u6839\u636E mimeType \u6E32\u67D3\u5BF9\u5E94\u5143\u7D20
+- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u79FB\u52A8\u7AEF\u5782\u76F4\u5E03\u5C40\uFF0C\u5E73\u677F/\u684C\u9762\u7AEF\u6C34\u5E73\u5E03\u5C40\uFF0C\u65AD\u70B9 1024px
+- **\u667A\u80FD\u61D2\u52A0\u8F7D**\uFF1A\u4F7F\u7528 Intersection Observer API\uFF0C\u8DDD\u79BB\u89C6\u53E3 1500px \u63D0\u524D\u52A0\u8F7D\uFF0C\u786E\u4FDD\u8FDB\u5165\u65F6\u5DF2\u51C6\u5907\u5C31\u7EEA
+- **\u89C6\u9891\u81EA\u52A8\u64AD\u653E**\uFF1A\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u3001\u9759\u97F3\uFF0C\u517C\u5BB9 iOS Safari\u3001\u5FAE\u4FE1/QQ \u6D4F\u89C8\u5668
+- **\u4E3B\u9898\u652F\u6301**\uFF1A\u5185\u7F6E light/dark \u4E3B\u9898\uFF0C\u4F7F\u7528 aiui-dark \u7C7B\u540D\u7EDF\u4E00\u7BA1\u7406
+- **\u5F62\u72B6\u53EF\u9009**\uFF1A\u652F\u6301 rounded\uFF08\u5706\u89D2\uFF09/ square\uFF08\u76F4\u89D2\uFF09\u4E24\u79CD\u98CE\u683C
+
+## \u{1F4F1} \u517C\u5BB9\u6027
+
+- **iOS Safari**\uFF1Awebkit-playsinline \u5185\u8054\u64AD\u653E
+- **Android Chrome**\uFF1A\u6807\u51C6 HTML5 \u89C6\u9891\u64AD\u653E
+- **\u5FAE\u4FE1/QQ \u6D4F\u89C8\u5668**\uFF1AX5 \u5185\u6838\u540C\u5C42\u64AD\u653E\uFF0C\u4E0D\u52AB\u6301\u5168\u5C4F
+- **\u684C\u9762\u6D4F\u89C8\u5668**\uFF1A\u7981\u7528\u753B\u4E2D\u753B\u548C\u8FDC\u7A0B\u64AD\u653E
+
+## \u{1F3A8} \u81EA\u5B9A\u4E49\u6837\u5F0F
+
+\u7EC4\u4EF6\u63D0\u4F9B\u8BED\u4E49\u5316 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\uFF1A
+- \`.product-compare\` - \u7EC4\u4EF6\u5BB9\u5668
+- \`.section-title / .section-subtitle\` - \u6807\u9898\uFF08\u5168\u5C40\u901A\u7528\u7C7B\uFF09
+- \`.product-compare-item\` - \u5355\u4E2A\u4EA7\u54C1\u5BB9\u5668
+- \`.product-compare-label\` - \u4EA7\u54C1\u6807\u7B7E
+- \`.product-compare-media\` - \u5A92\u4F53\u5143\u7D20
+- \`.product-compare-competitor / .product-compare-our-product\` - \u5177\u4F53\u4EA7\u54C1
+
+## \u{1F4A1} \u4F7F\u7528\u573A\u666F
+
+\u9002\u7528\u4E8E\u4EA7\u54C1\u8BE6\u60C5\u9875\u3001\u8425\u9500\u843D\u5730\u9875\u3001\u54C1\u724C\u5BF9\u6BD4\u7B49\u573A\u666F\uFF0C\u5E2E\u52A9\u7528\u6237\u5FEB\u901F\u4E86\u89E3\u4EA7\u54C1\u5DEE\u5F02\u5316\u4F18\u52BF\u3002
+        `}}},decorators:[a=>o("div",{style:{padding:"2em"},children:o(a,{})})],tags:["autodocs"]};var c=r;const t={title:"\u6027\u80FD\u5BF9\u6BD4",subtitle:"\u771F\u5B9E\u573A\u666F\u4E0B\u7684\u8868\u73B0\u5DEE\u5F02",ourProduct:{text:"Eufy E25",media:{url:"https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4",alt:"Eufy E25 \u4EA7\u54C1\u6F14\u793A",thumbnailURL:"https://via.placeholder.com/400x300",mimeType:"video/mp4",height:560,width:360,poster:{url:"https://via.placeholder.com/800x600/008CD6/ffffff?text=Anker+E25",mimeType:"image/jpeg"}},mobMedia:{url:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",alt:"Eufy E25 \u4EA7\u54C1\u6F14\u793A\uFF08\u79FB\u52A8\u7248\uFF09",thumbnailURL:"https://via.placeholder.com/300x400",mimeType:"video/mp4",poster:{url:"https://via.placeholder.com/600x800/008CD6/ffffff?text=Anker+E25",mimeType:"image/jpeg"}}},competitor:{text:"\u5176\u4ED6\u54C1\u724C",media:{url:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",alt:"\u7ADE\u54C1\u6F14\u793A",thumbnailURL:"https://via.placeholder.com/400x300",mimeType:"video/mp4",height:560,width:544,poster:{url:"https://via.placeholder.com/800x600/666666/ffffff?text=Competitor",mimeType:"image/jpeg"}},mobMedia:{url:"https://cdn.shopify.com/videos/c/o/v/3f97af0b92b2434eb2d11cb0307e3d08.mp4",alt:"\u7ADE\u54C1\u6F14\u793A\uFF08\u79FB\u52A8\u7248\uFF09",thumbnailURL:"https://via.placeholder.com/300x400",mimeType:"video/mp4",poster:{url:"https://via.placeholder.com/600x800/666666/ffffff?text=Competitor",mimeType:"image/jpeg"}}}},e={title:"\u4EA7\u54C1\u5916\u89C2\u5BF9\u6BD4",subtitle:"\u7EC6\u8282\u8BBE\u8BA1\u7684\u5DEE\u5F02",ourProduct:{text:"Anker \u65D7\u8230\u4EA7\u54C1",media:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop",alt:"Anker \u4EA7\u54C1\u56FE",thumbnailURL:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=400&h=300&fit=crop",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=600&h=800&fit=crop",alt:"Anker \u4EA7\u54C1\u56FE\uFF08\u79FB\u52A8\u7248\uFF09",thumbnailURL:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=300&h=400&fit=crop",mimeType:"image/jpeg"}},competitor:{text:"\u666E\u901A\u4EA7\u54C1",media:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=600&fit=crop",alt:"\u7ADE\u54C1\u56FE",thumbnailURL:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=800&fit=crop",alt:"\u7ADE\u54C1\u56FE\uFF08\u79FB\u52A8\u7248\uFF09",thumbnailURL:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=400&fit=crop",mimeType:"image/jpeg"}}},i={title:"\u521B\u65B0\u79D1\u6280\u5BF9\u6BD4",subtitle:"\u52A8\u6001\u5C55\u793A\u4E0E\u9759\u6001\u5BF9\u6BD4",ourProduct:{text:"Anker \u667A\u80FD\u5145\u7535",media:{url:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",alt:"Anker \u5145\u7535\u6F14\u793A",thumbnailURL:"https://via.placeholder.com/400x300",mimeType:"video/mp4",poster:{url:"https://via.placeholder.com/800x600/008CD6/ffffff?text=Smart+Charging",mimeType:"image/jpeg"}},mobMedia:{url:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",alt:"Anker \u5145\u7535\u6F14\u793A\uFF08\u79FB\u52A8\u7248\uFF09",thumbnailURL:"https://via.placeholder.com/300x400",mimeType:"video/mp4",poster:{url:"https://via.placeholder.com/600x800/008CD6/ffffff?text=Smart+Charging",mimeType:"image/jpeg"}}},competitor:{text:"\u4F20\u7EDF\u5145\u7535\u5668",media:{url:"https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=800&h=600&fit=crop",alt:"\u4F20\u7EDF\u5145\u7535\u5668",thumbnailURL:"https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=400&h=300&fit=crop",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=600&h=800&fit=crop",alt:"\u4F20\u7EDF\u5145\u7535\u5668\uFF08\u79FB\u52A8\u7248\uFF09",thumbnailURL:"https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=300&h=400&fit=crop",mimeType:"image/jpeg"}}},s={args:{data:t}},d={args:{data:e}},l={args:{data:i}},h={args:{data:{ourProduct:t.ourProduct,competitor:t.competitor}}},f={args:{data:{...t,title:"\u6781\u81F4\u6027\u80FD\u5BF9\u6BD4",subtitle:"\u79D1\u6280\u521B\u65B0\uFF0C\u8D85\u8D8A\u60F3\u8C61"},className:"bg-gradient-to-b from-gray-100 to-black p-20",style:`
+          .section-title {
+            background: linear-gradient(135deg, 
+              #ff0080 0%, 
+              #ff8c00 25%, 
+              #40e0d0 50%, 
+              #7b68ee 75%, 
+              #ff1493 100%
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 800;
+          }
+          .section-subtitle {
+            background: linear-gradient(90deg, 
+              #00f5ff 0%, 
+              #00ff88 25%, 
+              #ffeb3b 50%, 
+              #ff6ec7 75%, 
+              #ff0080 100%
+            );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+          }
+        `}},u={args:{data:{...t}}},n={args:{data:{...t,shape:"square"}}},g={args:{data:{...t,shape:"rounded"}}},b={args:{data:{...e,shape:"square"}}};export{f as CustomStyle,s as Default,d as ImageCompare,b as LightSquare,u as LightTheme,l as MixedMedia,h as NoTitle,g as RoundedShape,n as SquareShape,c as default};
+//# sourceMappingURL=productCompare.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/productCompare.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport ProductCompare from '../biz-components/ProductCompare/index.js'\nimport type { ProductCompareProps } from '../biz-components/ProductCompare/index.js'\n\nconst meta = {\n  title: 'Biz-Components/ProductCompare',\n  component: ProductCompare,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\n# ProductCompare \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6\n\n\u7528\u4E8E\u5C55\u793A\u6211\u4EEC\u7684\u4EA7\u54C1\u4E0E\u7ADE\u54C1\u7684\u5BF9\u6BD4\u6548\u679C\uFF0C\u901A\u8FC7\u89C6\u89C9\u5316\u7684\u65B9\u5F0F\u7A81\u51FA\u4EA7\u54C1\u4F18\u52BF\u3002\n\n## \uD83C\uDFAF \u6838\u5FC3\u529F\u80FD\n\n- **\u53CC\u680F\u5BF9\u6BD4\u5E03\u5C40**\uFF1A\u5DE6\u4FA7\u7ADE\u54C1\uFF0839.3%\u5BBD\u5EA6\uFF09\uFF0C\u53F3\u4FA7\u6211\u4EEC\u7684\u4EA7\u54C1\uFF0859.53%\u5BBD\u5EA6\uFF09\uFF0C\u7A81\u51FA\u91CD\u70B9\n- **\u5A92\u4F53\u7C7B\u578B\u81EA\u9002\u5E94**\uFF1A\u81EA\u52A8\u8BC6\u522B\u89C6\u9891/\u56FE\u7247\u683C\u5F0F\uFF0C\u6839\u636E mimeType \u6E32\u67D3\u5BF9\u5E94\u5143\u7D20\n- **\u54CD\u5E94\u5F0F\u8BBE\u8BA1**\uFF1A\u79FB\u52A8\u7AEF\u5782\u76F4\u5E03\u5C40\uFF0C\u5E73\u677F/\u684C\u9762\u7AEF\u6C34\u5E73\u5E03\u5C40\uFF0C\u65AD\u70B9 1024px\n- **\u667A\u80FD\u61D2\u52A0\u8F7D**\uFF1A\u4F7F\u7528 Intersection Observer API\uFF0C\u8DDD\u79BB\u89C6\u53E3 1500px \u63D0\u524D\u52A0\u8F7D\uFF0C\u786E\u4FDD\u8FDB\u5165\u65F6\u5DF2\u51C6\u5907\u5C31\u7EEA\n- **\u89C6\u9891\u81EA\u52A8\u64AD\u653E**\uFF1A\u652F\u6301\u81EA\u52A8\u64AD\u653E\u3001\u5FAA\u73AF\u3001\u9759\u97F3\uFF0C\u517C\u5BB9 iOS Safari\u3001\u5FAE\u4FE1/QQ \u6D4F\u89C8\u5668\n- **\u4E3B\u9898\u652F\u6301**\uFF1A\u5185\u7F6E light/dark \u4E3B\u9898\uFF0C\u4F7F\u7528 aiui-dark \u7C7B\u540D\u7EDF\u4E00\u7BA1\u7406\n- **\u5F62\u72B6\u53EF\u9009**\uFF1A\u652F\u6301 rounded\uFF08\u5706\u89D2\uFF09/ square\uFF08\u76F4\u89D2\uFF09\u4E24\u79CD\u98CE\u683C\n\n## \uD83D\uDCF1 \u517C\u5BB9\u6027\n\n- **iOS Safari**\uFF1Awebkit-playsinline \u5185\u8054\u64AD\u653E\n- **Android Chrome**\uFF1A\u6807\u51C6 HTML5 \u89C6\u9891\u64AD\u653E\n- **\u5FAE\u4FE1/QQ \u6D4F\u89C8\u5668**\uFF1AX5 \u5185\u6838\u540C\u5C42\u64AD\u653E\uFF0C\u4E0D\u52AB\u6301\u5168\u5C4F\n- **\u684C\u9762\u6D4F\u89C8\u5668**\uFF1A\u7981\u7528\u753B\u4E2D\u753B\u548C\u8FDC\u7A0B\u64AD\u653E\n\n## \uD83C\uDFA8 \u81EA\u5B9A\u4E49\u6837\u5F0F\n\n\u7EC4\u4EF6\u63D0\u4F9B\u8BED\u4E49\u5316 className\uFF0C\u65B9\u4FBF\u901A\u8FC7 CSS \u81EA\u5B9A\u4E49\uFF1A\n- \\`.product-compare\\` - \u7EC4\u4EF6\u5BB9\u5668\n- \\`.section-title / .section-subtitle\\` - \u6807\u9898\uFF08\u5168\u5C40\u901A\u7528\u7C7B\uFF09\n- \\`.product-compare-item\\` - \u5355\u4E2A\u4EA7\u54C1\u5BB9\u5668\n- \\`.product-compare-label\\` - \u4EA7\u54C1\u6807\u7B7E\n- \\`.product-compare-media\\` - \u5A92\u4F53\u5143\u7D20\n- \\`.product-compare-competitor / .product-compare-our-product\\` - \u5177\u4F53\u4EA7\u54C1\n\n## \uD83D\uDCA1 \u4F7F\u7528\u573A\u666F\n\n\u9002\u7528\u4E8E\u4EA7\u54C1\u8BE6\u60C5\u9875\u3001\u8425\u9500\u843D\u5730\u9875\u3001\u54C1\u724C\u5BF9\u6BD4\u7B49\u573A\u666F\uFF0C\u5E2E\u52A9\u7528\u6237\u5FEB\u901F\u4E86\u89E3\u4EA7\u54C1\u5DEE\u5F02\u5316\u4F18\u52BF\u3002\n        `,\n      },\n    },\n  },\n  decorators: [\n    Story => (\n      <div style={{ padding: '2em' }}>\n        <Story />\n      </div>\n    ),\n  ],\n  tags: ['autodocs'],\n} satisfies Meta<typeof ProductCompare>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\n// \u89C6\u9891\u5BF9\u6BD4\u793A\u4F8B\u6570\u636E\nconst videoCompareData: ProductCompareProps['data'] = {\n  title: '\u6027\u80FD\u5BF9\u6BD4',\n  subtitle: '\u771F\u5B9E\u573A\u666F\u4E0B\u7684\u8868\u73B0\u5DEE\u5F02',\n  ourProduct: {\n    text: 'Eufy E25',\n    media: {\n      url: 'https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4',\n      alt: 'Eufy E25 \u4EA7\u54C1\u6F14\u793A',\n      thumbnailURL: 'https://via.placeholder.com/400x300',\n      mimeType: 'video/mp4',\n      height: 560,\n      width: 360,\n      poster: {\n        url: 'https://via.placeholder.com/800x600/008CD6/ffffff?text=Anker+E25',\n        mimeType: 'image/jpeg',\n      }\n    },\n    mobMedia: {\n      url: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n      alt: 'Eufy E25 \u4EA7\u54C1\u6F14\u793A\uFF08\u79FB\u52A8\u7248\uFF09',\n      thumbnailURL: 'https://via.placeholder.com/300x400',\n      mimeType: 'video/mp4',\n      poster: {\n        url: 'https://via.placeholder.com/600x800/008CD6/ffffff?text=Anker+E25',\n        mimeType: 'image/jpeg',\n      }\n    },\n    \n\n  },\n  competitor: {\n    text: '\u5176\u4ED6\u54C1\u724C',\n    media: {\n      url: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n      alt: '\u7ADE\u54C1\u6F14\u793A',\n      thumbnailURL: 'https://via.placeholder.com/400x300',\n      mimeType: 'video/mp4',\n      height: 560,\n      width: 544,\n      poster: {\n        url: 'https://via.placeholder.com/800x600/666666/ffffff?text=Competitor',\n        mimeType: 'image/jpeg',\n      } \n    },\n    mobMedia: {\n      url: 'https://cdn.shopify.com/videos/c/o/v/3f97af0b92b2434eb2d11cb0307e3d08.mp4',\n      alt: '\u7ADE\u54C1\u6F14\u793A\uFF08\u79FB\u52A8\u7248\uFF09',\n      thumbnailURL: 'https://via.placeholder.com/300x400',\n      mimeType: 'video/mp4',\n      poster: {\n        url: 'https://via.placeholder.com/600x800/666666/ffffff?text=Competitor',\n        mimeType: 'image/jpeg',\n      } \n    },\n\n  },\n}\n\n// \u56FE\u7247\u5BF9\u6BD4\u793A\u4F8B\u6570\u636E\nconst imageCompareData: ProductCompareProps['data'] = {\n  title: '\u4EA7\u54C1\u5916\u89C2\u5BF9\u6BD4',\n  subtitle: '\u7EC6\u8282\u8BBE\u8BA1\u7684\u5DEE\u5F02',\n  ourProduct: {\n    text: 'Anker \u65D7\u8230\u4EA7\u54C1',\n    media: {\n      url: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop',\n      alt: 'Anker \u4EA7\u54C1\u56FE',\n      thumbnailURL: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=400&h=300&fit=crop',\n      mimeType: 'image/jpeg',\n    },\n    mobMedia: {\n      url: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=600&h=800&fit=crop',\n      alt: 'Anker \u4EA7\u54C1\u56FE\uFF08\u79FB\u52A8\u7248\uFF09',\n      thumbnailURL: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=300&h=400&fit=crop',\n      mimeType: 'image/jpeg',\n    },\n  },\n  competitor: {\n    text: '\u666E\u901A\u4EA7\u54C1',\n    media: {\n      url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=600&fit=crop',\n      alt: '\u7ADE\u54C1\u56FE',\n      thumbnailURL: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop',\n      mimeType: 'image/jpeg',\n    },\n    mobMedia: {\n      url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=800&fit=crop',\n      alt: '\u7ADE\u54C1\u56FE\uFF08\u79FB\u52A8\u7248\uFF09',\n      thumbnailURL: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&h=400&fit=crop',\n      mimeType: 'image/jpeg',\n    },\n  },\n}\n\n// \u6DF7\u5408\u5BF9\u6BD4\u793A\u4F8B\u6570\u636E\uFF08\u4E00\u8FB9\u89C6\u9891\u4E00\u8FB9\u56FE\u7247\uFF09\nconst mixedCompareData: ProductCompareProps['data'] = {\n  title: '\u521B\u65B0\u79D1\u6280\u5BF9\u6BD4',\n  subtitle: '\u52A8\u6001\u5C55\u793A\u4E0E\u9759\u6001\u5BF9\u6BD4',\n  ourProduct: {\n    text: 'Anker \u667A\u80FD\u5145\u7535',\n    media: {\n      url: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n      alt: 'Anker \u5145\u7535\u6F14\u793A',\n      thumbnailURL: 'https://via.placeholder.com/400x300',\n      mimeType: 'video/mp4',\n      poster: {\n        url: 'https://via.placeholder.com/800x600/008CD6/ffffff?text=Smart+Charging',\n        mimeType: 'image/jpeg',\n      }\n    },\n    mobMedia: {\n      url: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n      alt: 'Anker \u5145\u7535\u6F14\u793A\uFF08\u79FB\u52A8\u7248\uFF09',\n      thumbnailURL: 'https://via.placeholder.com/300x400',\n      mimeType: 'video/mp4',\n      poster: {\n        url: 'https://via.placeholder.com/600x800/008CD6/ffffff?text=Smart+Charging',\n        mimeType: 'image/jpeg',\n      }\n    },\n  },\n  competitor: {\n    text: '\u4F20\u7EDF\u5145\u7535\u5668',\n    media: {\n      url: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=800&h=600&fit=crop',\n      alt: '\u4F20\u7EDF\u5145\u7535\u5668',\n      thumbnailURL: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=400&h=300&fit=crop',\n      mimeType: 'image/jpeg',\n    },\n    mobMedia: {\n      url: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=600&h=800&fit=crop',\n      alt: '\u4F20\u7EDF\u5145\u7535\u5668\uFF08\u79FB\u52A8\u7248\uFF09',\n      thumbnailURL: 'https://images.unsplash.com/photo-1609091839311-d5365f9ff1c5?w=300&h=400&fit=crop',\n      mimeType: 'image/jpeg',\n    },\n  },\n}\n\n// \u9ED8\u8BA4\u89C6\u9891\u5BF9\u6BD4\u6545\u4E8B\nexport const Default: Story = {\n  args: {\n    data: videoCompareData,\n  },\n}\n\n// \u56FE\u7247\u5BF9\u6BD4\u6545\u4E8B\nexport const ImageCompare: Story = {\n  args: {\n    data: imageCompareData,\n  },\n}\n\n// \u6DF7\u5408\u5BF9\u6BD4\u6545\u4E8B\uFF08\u89C6\u9891 + \u56FE\u7247\uFF09\nexport const MixedMedia: Story = {\n  args: {\n    data: mixedCompareData,\n  },\n}\n\n// \u65E0\u6807\u9898\u7684\u5BF9\u6BD4\nexport const NoTitle: Story = {\n  args: {\n    data: {\n      ourProduct: videoCompareData.ourProduct,\n      competitor: videoCompareData.competitor,\n    },\n  },\n}\n\n// \u81EA\u5B9A\u4E49\u6837\u5F0F\uFF08\u5E26\u6E10\u53D8\u8272\u6587\u5B57\uFF09\nexport const CustomStyle: Story = {\n  args: {\n    data: {\n      ...videoCompareData,\n      title: '\u6781\u81F4\u6027\u80FD\u5BF9\u6BD4',\n      subtitle: '\u79D1\u6280\u521B\u65B0\uFF0C\u8D85\u8D8A\u60F3\u8C61',\n    },\n    className: 'bg-gradient-to-b from-gray-100 to-black p-20',\n    style: `\n          .section-title {\n            background: linear-gradient(135deg, \n              #ff0080 0%, \n              #ff8c00 25%, \n              #40e0d0 50%, \n              #7b68ee 75%, \n              #ff1493 100%\n            );\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            font-weight: 800;\n          }\n          .section-subtitle {\n            background: linear-gradient(90deg, \n              #00f5ff 0%, \n              #00ff88 25%, \n              #ffeb3b 50%, \n              #ff6ec7 75%, \n              #ff0080 100%\n            );\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n          }\n        `\n  },\n}\n\n// Light \u4E3B\u9898\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      ...videoCompareData,\n    },\n  },\n}\n\n\n\n// Square \u5F62\u72B6\nexport const SquareShape: Story = {\n  args: {\n    data: {\n      ...videoCompareData,\n      shape: 'square',\n    },\n  },\n}\n\n// Rounded \u5F62\u72B6\uFF08\u9ED8\u8BA4\uFF09\nexport const RoundedShape: Story = {\n  args: {\n    data: {\n      ...videoCompareData,\n      shape: 'rounded',\n    },\n  },\n}\n\n// Light \u4E3B\u9898 + Square \u5F62\u72B6\nexport const LightSquare: Story = {\n  args: {\n    data: {\n      ...imageCompareData,\n      shape: 'square',\n    },\n  },\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "ProductCompare", "meta", "Story", "productCompare_stories_default", "videoCompareData", "imageCompareData", "mixedCompareData", "Default", "ImageCompare", "MixedMedia", "NoTitle", "CustomStyle", "LightTheme", "SquareShape", "RoundedShape", "LightSquare"]
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import type { ProductHeroProps } from '../biz-components/ProductHero/types.js';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }, "ref"> & React.RefAttributes<any>>;
+    parameters: {
+        layout: string;
+        backgrounds: {
+            default: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LongTitle: Story;
+export declare const ShortSubtitle: Story;
+export declare const CustomCTA: Story;

package/dist/esm/stories/productHero.stories.js

@@ -0,0 +1,2 @@
+import"react";import o from"../biz-components/ProductHero/index.js";const e={title:"Biz Components/ProductHero",component:o,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 c=e;const t={title:"Buy your cleaning housekeeper now",poster:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-poster.png?v=1751427172",ctaLink:"/products/t2353111",ctaText:"shop now",subtitle:"The World's First HydrJet\u2122 Robot Vacuum with 20,000 Pa Turbo Suction",mobPoster:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-poster.png?v=1751427222"},n={args:{data:t}},p={args:{data:{...t,title:"Buy your advanced cleaning housekeeper with revolutionary technology now"}}},i={args:{data:{...t,subtitle:"Revolutionary Robot Vacuum"}}},u={args:{data:{...t,ctaText:"Learn More",ctaLink:"/learn-more"}}};export{u as CustomCTA,n as Default,p as LongTitle,i as ShortSubtitle,c as default};
+//# sourceMappingURL=productHero.stories.js.map

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

@@ -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: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-poster.png?v=1751427172',\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: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-poster.png?v=1751427222',\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"],
+  "mappings": "AAAA,MAAkB,QAElB,OAAOA,MAAiB,yCAGxB,MAAMC,EAAO,CACX,MAAO,6BACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,UAAW,gJACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIf,MAAME,EAAwC,CAC5C,MAAO,oCACP,OAAQ,qFACR,QAAS,qBACT,QAAS,WACT,SAAU,4EACV,UAAW,wFACb,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGF,EACH,MAAO,0EACT,CACF,CACF,EAEaG,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGH,EACH,SAAU,4BACZ,CACF,CACF,EAEaI,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGJ,EACH,QAAS,aACT,QAAS,aACX,CACF,CACF",
+  "names": ["ProductHero", "meta", "productHero_stories_default", "defaultData", "Default", "LongTitle", "ShortSubtitle", "CustomCTA"]
+}

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

@@ -0,0 +1,13 @@
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<any, "ref"> & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
+        className?: string;
+        data?: Record<string, any>;
+    }, "ref"> & import("react").RefAttributes<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/stories/specs.stories.js

@@ -0,0 +1,57 @@
+import{jsx as t}from"react/jsx-runtime";import e from"../biz-components/Specs/index.js";import{Container as a}from"../components/container.js";const n={title:"Biz-Components/Specs",component:e,parameters:{layout:"fullscreen"},tags:["autodocs"]};var l=n;const i={id:"68ea29e5ca34138c04aec30f",display:"visible",items:[{sku:"A1340011",name:"Anker <b>325</b> Power Bank (PowerCore 20K)",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A1268013_1_2430b504-15c6-441e-9914-ae215095e8b4.png?v=1753755824",value:"a1340-250w-power-bank",handle:"a1340-250w-power-bank"},{sku:"A2524014",name:"Anker <b>337</b> Power Bank (PowerCore 26K)",image:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A1277011_V1.png?v=1753755956",value:"a2524",handle:"a2524",shopify_id:"10034291441848"}],data:{LeftMenu:{data:[{title:"Product",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:"A1340011",handle:"a1340-250w-power-bank",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:"A2524014",handle:"a2524",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:{sku:"A1340011,A2524014",buttonText:"Buy Now"}},container:{mobileSpan:"12",desktopSpan:"12"},style:`.specs-wrapper {
+	background: #fff !important;
+}
+
+.specs-sku-node-text {
+	border-radius: 0 !important;
+}`,blockName:"Specs",blockType:"ipc-specs"},o={products:[{availableForSale:!0,productType:"charging only",onlineStoreUrl:null,publishedAt:"2025-07-29T03:54:52Z",totalInventory:399,description:'250W Multi-Device Fast Charging: Powered by the latest PD 3.1 technology, the power bank comes with 2 USB-C ports and 1 USB-A port to deliver up to 250W of power. Boost your MacBook Pro 16" (M2 Pro) to 50% in just 28 minutes. Intuitive Smart App: Use the Anker app to quickly locate your power bank with sound alerts, access real-time stats, and optimize device battery life with smart charging. Small Size, Huge Power: The power bank is the size of a soda can with a capacity of 27,650mAh and can charge a 13-inch MacBook Air (M2) 1.28 times or an iPhone 14 approximately 4.67 times. Please know that this power bank is 99.54Wh, which meets the requirements of the TSA(<100Wh) to be taken on airplanes as carry-on baggage. 170W Fast USB-C Recharge: Recharge your power bank at lightning speed with the convenience of dual USB-C ports, allowing you to fully replenish it in just 37 minutes. What You Get: Anker Prime 27,650mAh Power Bank (250W), 2 ft / 0.6 m 140W USB-C to USB-C charging cable, travel pouch, quick start guide, our worry-free 24-month warranty, and friendly customer service.',descriptionHtml:`<div data-mce-fragment="1" data-docx-has-block-data="false" data-page-id="BSbwdemQXoJ4lfxBpvVcKIWMnog">
+<div data-mce-fragment="1" class="ace-line ace-line old-record-id-XkuPddt2Lo3pPXxN9MdcN04HnNb">
+<div style="font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 0.875rem;">
+<div data-docx-has-block-data="false" data-page-id="BSbwdemQXoJ4lfxBpvVcKIWMnog">
+<div class="ace-line ace-line old-record-id-TNa5d1ywEoB7DGxde7Fc1Ua0nbb">
+<p>\xA0</p>
+<ul>
+<li>
+<div style="font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 0.875rem; display: inline !important;">
+<strong>250W Multi-Device\xA0</strong><strong>Fast</strong><strong> Charging: </strong>Powered by the latest PD 3.1 technology, the power bank comes with 2 USB-C ports and 1 USB-A port to deliver up to 250W of power. Boost your MacBook Pro 16" (M2 Pro) to 50% in just 28 minutes.</div>
+</li>
+<li>
+<strong>Intuitive Smart </strong><strong>App</strong><strong>: </strong>Use the Anker app to quickly locate your power bank with sound alerts, access real-time stats, and optimize device battery life with smart charging.</li>
+<li>
+<strong>Small Size, Huge Power:</strong> The power bank is the size of a soda can with a capacity of 27,650mAh and can charge a 13-inch MacBook Air (M2) 1.28 times or an iPhone 14 approximately 4.67 times. Please know that this power bank is 99.54Wh, which meets the requirements of the TSA(&lt;100Wh) to be taken on airplanes as carry-on baggage.</li>
+<li>
+<strong>1</strong><strong>7</strong><strong>0W Fast </strong><strong>USB-C</strong><strong> Recharge: </strong>Recharge your power bank at lightning speed with the convenience of dual USB-C ports, allowing you to fully replenish it in just 37 minutes.</li>
+<li>
+<strong>What You Get: </strong>Anker Prime 27,650mAh Power Bank (250W), 2 ft / 0.6 m 140W USB-C to USB-C charging cable, travel pouch, quick start guide, our worry-free 24-month warranty, and friendly customer service.</li>
+</ul>
+</div>
+</div>
+</div>
+</div>
+</div>
+<p><span data-mce-fragment="1" class="lark-record-clipboard" data-lark-record-format="docx/record" data-lark-record-data='{"isCut":false,"rootId":"BSbwdemQXoJ4lfxBpvVcKIWMnog","parentId":"BSbwdemQXoJ4lfxBpvVcKIWMnog","blockIds":[6,7,8,9,10],"recordIds":["XkuPddt2Lo3pPXxN9MdcN04HnNb","TNa5d1ywEoB7DGxde7Fc1Ua0nbb","Mbq6dRIj2oN6bDxdHUPcIluUnyg","H9VtdIlVfoyZuhx957Zc3Mnbnnf","KxuyddjiGok1j5xt8odceqn9nif"],"recordMap":{"XkuPddt2Lo3pPXxN9MdcN04HnNb":{"id":"XkuPddt2Lo3pPXxN9MdcN04HnNb","snapshot":{"type":"text","parent_id":"BSbwdemQXoJ4lfxBpvVcKIWMnog","comments":["7251516737602732034"],"locked":false,"hidden":false,"author":"6960514286405844995","children":[],"text":{"initialAttributedTexts":{"text":{"0":"250W Multi-Device Fast Charging: Powered by the latest PD 3.1 technology, the power bank comes with 2 USB-C ports and 1 USB-A port to deliver up to 250W of power. Boost your MacBook Pro 16\\" (M2 Pro) to 50% in just 28 minutes."},"attribs":{"0":"*0*1+i*2*0*1+4*0*1+b*0+m*3*0+2*0+2y*0*4+u*5*4+4*0*4+h*6*4+2*0*4+9"}},"apool":{"numToAttrib":{"0":["author","6960514286405844995"],"1":["bold","true"],"2":["abbreviation-data","{\\"id\\":\\"d422fb13-aa58-4592-a55c-e906b774afc6\\",\\"abbr_ids\\":\\"enterprise_7181707785976119298\\",\\"is_visible\\":1,\\"is_first\\":1}"],"3":["abbreviation-data","{\\"id\\":\\"59fbf9ee-ca61-4090-a3d5-4819f343f070\\",\\"abbr_ids\\":\\"enterprise_7257112388569497604,enterprise_46079230,enterprise_7257075173017862148,enterprise_7250018290582519812\\",\\"is_visible\\":1,\\"is_first\\":1}"],"4":["comment-id-7251516737602732034","true"],"5":["author","7251397625784664066"],"6":["author","6911999026934153218"]},"nextNum":7}},"align":"","folded":false}},"TNa5d1ywEoB7DGxde7Fc1Ua0nbb":{"id":"TNa5d1ywEoB7DGxde7Fc1Ua0nbb","snapshot":{"type":"text","parent_id":"BSbwdemQXoJ4lfxBpvVcKIWMnog","comments":[],"locked":false,"hidden":false,"author":"6960514286405844995","children":[],"text":{"apool":{"nextNum":3,"numToAttrib":{"0":["bold","true"],"1":["author","6960514286405844995"],"2":["abbreviation-data","{\\"id\\":\\"5689917c-5736-4006-a54b-fa3164aa54f5\\",\\"abbr_ids\\":\\"enterprise_7158749951980011523\\",\\"is_visible\\":1,\\"is_first\\":1}"]}},"initialAttributedTexts":{"attribs":{"0":"*1*0+g*2*1*0+3*1*0+2*1+44"},"text":{"0":"Intuitive Smart App: Use the Anker app to quickly locate your power bank with sound alerts, access real-time stats, and optimize device battery life with smart charging."}}},"align":"","folded":false}},"Mbq6dRIj2oN6bDxdHUPcIluUnyg":{"id":"Mbq6dRIj2oN6bDxdHUPcIluUnyg","snapshot":{"type":"text","parent_id":"BSbwdemQXoJ4lfxBpvVcKIWMnog","comments":["7251518263719723010"],"locked":false,"hidden":false,"author":"6960514286405844995","children":[],"text":{"apool":{"nextNum":5,"numToAttrib":{"0":["author","6960514286405844995"],"1":["bold","true"],"2":["comment-id-7251518263719723010","true"],"3":["author","6911999026934153218"],"4":["textHighlightBackground","rgb(251,191,188)"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1+n*0+2f*0*2+1*3*2*4+2*0*2*4+5*3*2*4+1*0*2+c*0*2*4+1*3*2*4+2*0*2*4+1*0*4+1*3*4+a*0+g*0*4+1*3*4+2*0*4+7"},"text":{"0":"Small Size, Huge Power: The power bank is the size of a soda can with a capacity of 27,650mAh and can charge a 13-inch MacBook Air (M2) 1.28 times or an iPhone 14 XX times."}}},"align":"","folded":false}},"H9VtdIlVfoyZuhx957Zc3Mnbnnf":{"id":"H9VtdIlVfoyZuhx957Zc3Mnbnnf","snapshot":{"type":"text","parent_id":"BSbwdemQXoJ4lfxBpvVcKIWMnog","comments":["7257138127599321089","7250360979459080193"],"locked":false,"hidden":false,"author":"6960514286405844995","children":[],"text":{"apool":{"nextNum":5,"numToAttrib":{"0":["author","6960514286405844995"],"1":["bold","true"],"2":["comment-id-7250360979459080193","true"],"3":["comment-id-7257138127599321089","true"],"4":["author","6911999026934153218"]}},"initialAttributedTexts":{"attribs":{"0":"*0*1*2*3+1*4*1*2*3+1*0*1*2*3+o*0*2*3+27*4*2*3+5*0*2*3+i*4*2*3+8*0*2*3+a*4*2*3+1*0*2*3+8*4*2*3+b"},"text":{"0":"170W Fast USB-C Recharge: Recharge your power bank at lightning speed with the convenience of dual USB-C ports, allowing you to fully replenish it in just 37 minutes."}}},"align":"","folded":false}},"KxuyddjiGok1j5xt8odceqn9nif":{"id":"KxuyddjiGok1j5xt8odceqn9nif","snapshot":{"type":"text","parent_id":"BSbwdemQXoJ4lfxBpvVcKIWMnog","comments":["7257121236814774275","7251518550442344476"],"locked":false,"hidden":false,"author":"6960514286405844995","children":[],"text":{"initialAttributedTexts":{"text":{"0":"What You Get: Anker Prime 27,650mAh Power Bank (250W), 2 ft (0.6 m) 140W USB-C to USB-C charging cable, travel pouch, quick start guide, our worry-free 24-month warranty, and friendly customer service."},"attribs":{"0":"*0*1+e*0+14*0*2+1*3*2+1*0*2+c*0+1e*4*3+b*4*0*5+6*0+1u"}},"apool":{"numToAttrib":{"0":["author","6960514286405844995"],"1":["bold","true"],"2":["comment-id-7257121236814774275","true"],"3":["author","6911999026934153218"],"4":["abbreviation-data","{\\"id\\":\\"c5b16e2c-8c3b-4d24-b1be-442fbe5196dc\\",\\"abbr_ids\\":\\"enterprise_7125383109633114114\\",\\"is_visible\\":1,\\"is_first\\":1}"],"5":["comment-id-7251518550442344476","true"]},"nextNum":6}},"align":"","folded":false}},"BSbwdemQXoJ4lfxBpvVcKIWMnog":{"id":"BSbwdemQXoJ4lfxBpvVcKIWMnog","snapshot":{"type":"page","parent_id":"","comments":null,"locked":false,"hidden":false,"author":"6960514286405844995","children":["P1lYdRH7Hor4BNxoOw3c015DnTb","FsSedByPioX2r8xoEfBcJgw8nCe","HE2qdl0viobsm6xdLyyck54ynGb","PMehdKa42ogL1mxIgXWcn4XRnUh","XkuPddt2Lo3pPXxN9MdcN04HnNb","TNa5d1ywEoB7DGxde7Fc1Ua0nbb","Mbq6dRIj2oN6bDxdHUPcIluUnyg","H9VtdIlVfoyZuhx957Zc3Mnbnnf","KxuyddjiGok1j5xt8odceqn9nif","KrUadg8Cdonh42xaKDZc79nJnJf","So00daSORoePWlx8DhAcUjkqn4f","Ebg7dQBveo0026xAneIcaOTcn1g","ZR0sdo11XoHqvGxB8j4cZnC0nee","GcYgdn5rmoLRL6xlLc6cXnY3nHd","LJ7DduoTso3D8mxW6D7cIaDMnph","TuYddBj4jop3wyxuBa3crbPFnwb","L5rldM6ysoM7faxmQFLcE8Ognxg","Bip4d8FKco9aGUxcuU6cWhJSn1b","PhEOdWCP0oAh2KxuZezcJv9inpc","H8GxdNxBwoOO50xHldFcDeYfnld","YGcfdYduQogOd4xnMkQcTJ8Pn7c","VtA6dG2jwoHA4yxNTISc8zRRndb","EnsMdHvDkoPx4cxx8jUcIempnxh","LeX2dWfRZod240xnyGqclSeYnUf","WZ9Jdzp3CodpiOxLlOUcEBP0n6b","Mqkmdz3dao61JOxo032cJ0ZYnvb","IMcdd88teodoW8xsjJtcEn28nsb","GvjFdmlrAoilbbxjqr2c2R5QnFd","YHsTdvEp1o4n4ZxwQCIcnpnFn0e","V9efdxPyioc2P3xzW0Uc7S0Hnif","QCSQdWrTRoCGCFxHz3ccLTHenpd","Rjcad7xCAoOzxBxNaE9cXx5bnQd","R6YedUcCQoFpt5xnU6Ac8xZrnvd","Gi6wd5qRaoewxRxV1H5cksuoneb","EQqZdA903oSF9vxPtQWceWHKnhf","LSu5d2IusoTxXPxmSzucd62Unkd","PIsDdxjDJo34tBxIw0ocu2n6nue","KQJkdl7dCoLIsWxRBhlc1HlMnwb","VuI6dRaTuohYuqxTjiPc8Y2RnTb","BXGqdAZHso4IFDxpme5cApGCnQg","Lrped7kXPocXelx5YthcZ0Kynmc","M7JidVWO5orTtQxMaRKclvHon8b","N33SddXYRowPtYxkIQrc2lc3nw3","Tj3jdoV60o7QSTxLVaJccOb4nAb","DDePdRYj4ojGy5xiU0Nc0Vk3nqg","NLw9dY8Zaod5uxxFTxgcRFVfnog"],"text":{"apool":{"nextNum":1,"numToAttrib":{"0":["author","6960514286405844995"]}},"initialAttributedTexts":{"attribs":{"0":"*0+1j"},"text":{"0":"A1340 Listing - Anker Prime 27,650mAh Power Bank (250W)"}}},"align":"","doc_info":{"editors":["6960514286405844995","6911999026934153218","7020952465340153884","7251397625784664066"],"options":["editors","create_time"],"deleted_editors":[]}}}},"payloadMap":{"XkuPddt2Lo3pPXxN9MdcN04HnNb":{"level":1},"TNa5d1ywEoB7DGxde7Fc1Ua0nbb":{"level":1},"Mbq6dRIj2oN6bDxdHUPcIluUnyg":{"level":1},"H9VtdIlVfoyZuhx957Zc3Mnbnnf":{"level":1},"KxuyddjiGok1j5xt8odceqn9nif":{"level":1}},"extra":{"mention_page_title":{},"external_mention_url":{}},"isKeepQuoteContainer":false,"selection":[{"id":6,"type":"text","selection":{"start":0,"end":225},"recordId":"XkuPddt2Lo3pPXxN9MdcN04HnNb"},{"id":7,"type":"text","selection":{"start":0,"end":169},"recordId":"TNa5d1ywEoB7DGxde7Fc1Ua0nbb"},{"id":8,"type":"text","selection":{"start":0,"end":172},"recordId":"Mbq6dRIj2oN6bDxdHUPcIluUnyg"},{"id":9,"type":"text","selection":{"start":0,"end":166},"recordId":"H9VtdIlVfoyZuhx957Zc3Mnbnnf"},{"id":10,"type":"text","selection":{"start":0,"end":201},"recordId":"KxuyddjiGok1j5xt8odceqn9nif"}],"pasteFlag":"e5364435-867e-4bf8-bb9a-74ece20b1280"}'></span> <button id="paste-helper-id" style="width: 0px; height: 0px; padding: 0px; margin: 0px; border: 0px; display: none;"></button></p>
+<div id="gtx-trans" style="position: absolute; left: 35px; top: -3.40625px;">
+<div class="gtx-trans-icon"><br></div>
+</div>`,title:"Anker Prime Power Bank (27K, 250W)",id:"gid://shopify/Product/10034291638456",name:"Anker Prime Power Bank (27K, 250W)",vendor:"beta-anker-us",handle:"a1340-250w-power-bank",path:"/a1340-250w-power-bank",slug:"a1340-250w-power-bank",price:{value:179.99,currencyCode:"USD"},listPrice:0,images:[{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/Rectangle1_25a10648-8f5f-4fa8-af31-78e60305985d.png?v=1753755974",altText:null,width:3e3,height:3e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A1340011_Rich_image_TD01_US_1200x1500px_V3.jpg?v=1753755974",altText:null,width:1200,height:1500},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A1340011_TD03_V1_2fb91afe-dc06-4c64-a8ed-d8f17c96c33a.jpg?v=1753755974",altText:null,width:1600,height:2e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A1340011_Rich_image_TD04_US.jpg?v=1753755974",altText:null,width:2400,height:3e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A1340011_TD05_V1_5b0cb041-ccf5-4d89-b5c9-e58fd5f7108a.jpg?v=1753755974",altText:null,width:1600,height:2e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A1340011_Rich_image_TD02_US_1600x2000px_V1.jpg?v=1753755974",altText:null,width:1600,height:2e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A13400B1_20241009_TD_e4a4a55a-6221-494a-aa7e-aa2b8a834e1e.png?v=1753755975",altText:"2024-10-09-v1A13400B1",width:2400,height:3e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A13400B1_Rich_image_TD01_US_1200x1500px_V3.jpg?v=1753755974",altText:null,width:1200,height:1500},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/71pS0WHwYbL_f98f499f-1b1c-41b4-8c49-92fd9f5342cc.jpg?v=1753755973",altText:null,width:1600,height:2e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A13400B1_Rich_image_TD04_US.jpg?v=1753755974",altText:null,width:2400,height:3e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/713YBqjTEfL_f9ecda02-b84a-4350-925f-9946b8bbe296.webp?v=1753755974",altText:null,width:1600,height:2e3},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A13400B1_Rich_image_TD02_US_1600x2000px_V1.jpg?v=1753755974",altText:null,width:1600,height:2e3}],variants:[{barcode:"194644130886",availableForSale:!0,product:{handle:"a1340-250w-power-bank"},id:"gid://shopify/ProductVariant/51588168679608",name:"Black",sku:"A1340011",price:179.99,image:{altText:null,url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/Rectangle1_25a10648-8f5f-4fa8-af31-78e60305985d.png?v=1753755974",width:3e3,height:3e3},listPrice:null,requiresShipping:!0,quantityAvailable:199,currentlyNotInStock:!1,sellingPlanAllocations:[],productHandle:"a1340-250w-power-bank",coupons:[{title:"WS24NJ137G95",starts_at:"2025-08-06T07:15:10.000Z",ends_at:null,variant_shopify_id:51588168679608,value_type:"fixed_amount",value:"-100.0",currency:"USD",fixed_value:"100.0",value_style:"$100",variant_price4wscode:79.99,discount_type:"WS24",amazon_deal:!1,cdi_id:45745,cdi_updated_at:"2025-08-28T04:15:55.794Z"}]}],options:[{__typename:"MultipleChoiceOption",id:"gid://shopify/ProductOption/12066912338104",displayName:"color",name:"Color",values:[{label:"Black",hexColors:["#000000"]},{label:"Champagne"}]}]},{availableForSale:!0,description:"The Anker Advantage: Join the 55+ million powered by our leading technology A Galaxy of Speed: A high-efficiency chipset provides 10W high-speed charging for Samsung Galaxy. iPhones get a boosted 5W charge at 10% faster than other wireless chargers Flip It: Charge in landscape orientation while watching videos or portrait mode for messaging and facial recognition Case Friendly: Don't fumble with your phone case. PowerWave charges directly through protective cases. Rubber/plastic/TPU cases less than 5 mm thick only. Magnetic and metal attachments or cards will prevent charging What You Get: Anker 313 Wireless Charger (Stand) / PowerWave Stand, 3 ft Micro USB Cable, welcome guide, worry-free 18-month warranty, and friendly customer service.",descriptionHtml:`<meta charset="utf-8">
+<ul class="a-unordered-list a-vertical a-spacing-mini" data-mce-fragment="1">
+<li data-mce-fragment="1"><span class="a-list-item" data-mce-fragment="1"><strong>The Anker Advantage</strong>: Join the 55+ million powered by our leading technology</span></li>
+<li data-mce-fragment="1"><span class="a-list-item" data-mce-fragment="1"><strong>A Galaxy of Speed</strong>: A high-efficiency chipset provides 10W high-speed charging for Samsung Galaxy. iPhones get a boosted 5W charge at 10% faster than other wireless chargers</span></li>
+<li data-mce-fragment="1"><span class="a-list-item" data-mce-fragment="1"><strong>Flip It</strong>: Charge in landscape orientation while watching videos or portrait mode for messaging and facial recognition</span></li>
+<li data-mce-fragment="1"><span class="a-list-item" data-mce-fragment="1"><strong>Case Friendly</strong>: Don't fumble with your phone case. PowerWave charges directly through protective cases. Rubber/plastic/TPU cases less than 5 mm thick only. Magnetic and metal attachments or cards will prevent charging</span></li>
+<li data-mce-fragment="1"><span class="a-list-item" data-mce-fragment="1"><strong>What You Ge</strong>t: Anker <strong>313</strong> Wireless Charger (Stand) / PowerWave Stand, 3 ft Micro USB Cable, welcome guide, worry-free 18-month warranty, and friendly customer service.</span></li>
+</ul>`,title:"Anker <b>313</b> Wireless Charger (Stand)",id:"gid://shopify/Product/10034295144632",name:"Anker <b>313</b> Wireless Charger (Stand)",vendor:"Anker",handle:"a2524",path:"/a2524",slug:"a2524",price:{value:23.99,currencyCode:"USD"},listPrice:0,images:[{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A2524011-Anker_313_Wireless_Charger_Stand_1.png?v=1753756317",altText:null,width:1801,height:1800},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/61Df3AbF-PL.jpg?v=1753756317",altText:null,width:1200,height:1500},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/71RT3xSwRJL.jpg?v=1753756317",altText:null,width:1200,height:1500},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/61NTug2RRHL.jpg?v=1753756317",altText:null,width:1200,height:1500},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/714rrWliSiL.jpg?v=1753756317",altText:null,width:1200,height:1500},{url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/61dbnVj78DL.jpg?v=1753756317",altText:null,width:1200,height:1500}],variants:[{barcode:"194644085698",availableForSale:!0,product:{handle:"a2524"},id:"gid://shopify/ProductVariant/51588205707448",name:"Black",sku:"A2524014",price:23.99,image:{altText:null,url:"https://cdn.shopify.com/s/files/1/0517/6767/3016/files/A2524011-Anker_313_Wireless_Charger_Stand_1.png?v=1753756317",width:1801,height:1800},listPrice:null,requiresShipping:!0,quantityAvailable:200,currentlyNotInStock:!1,sellingPlanAllocations:[],productHandle:"a2524"}],sellingPlanGroups:[],options:[{__typename:"MultipleChoiceOption",id:"gid://shopify/ProductOption/12066916303032",displayName:"color",name:"Color",values:[{label:"Black",hexColors:["#000000"]}]}]}],categories:[]},d=()=>t(a,{children:t(e,{data:i,buildData:o})});export{d as Default,l as default};
+//# sourceMappingURL=specs.stories.js.map