@anker-in/headless-ui 1.1.9-temp.120303 → 1.1.9-tmp-01

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

@@ -78,7 +78,7 @@ import t from"../biz-components/Ksp/index.js";const a={title:"Biz-Components/Ksp
 \`\`\`
 
 \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 p=a;const e={title:"Why Choose Our Product",items:[{title:"Improved Cleaning Efficiency",desc:"HydroJet\u2122 Floor Washing System",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"100% Cleaning Coverage",desc:"Edge-Cleaning CornerRover\u2122 Arm",image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"All You Need, All-in-One",desc:"Complete Cleaning Solution",image:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Less Maintenance",desc:"DuoSpiral\u2122 Detangle Brushes",image:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Cleaning Power Upgrade",desc:"20,000 Pa Turbo Suction",image:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Intelligent Cleaning",desc:"Smart App Control & Scheduling",image:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"AI.See\u2122 Obstacle Avoidance",desc:"Advanced Object Recognition",image:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}}]},s={args:{data:e}},i={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",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"100% \u6E05\u6D01\u8986\u76D6",desc:"CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2",image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01",desc:"\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848",image:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u66F4\u5C11\u7EF4\u62A4",desc:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",image:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u6E05\u6D01\u80FD\u529B\u5347\u7EA7",desc:"20,000 Pa \u5F3A\u529B\u5438\u5C18",image:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{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",mobImage:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"AI \u667A\u80FD\u907F\u969C",desc:"\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F",image:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",alt:"AI \u667A\u80FD\u907F\u969C",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",alt:"AI \u667A\u80FD\u907F\u969C",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}}]}}},m={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",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Powerful Performance",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Powerful Performance",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Smart Navigation",desc:"Advanced mapping technology",video:{url:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"video/mp4"},mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"video/mp4"},image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},...e.items.slice(2)]}}},c={args:{data:{items:e.items}}},h={args:{data:e,className:"py-20",style:`
+        `}}},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 p=a;const e={title:"Why Choose Our Product",items:[{title:"Improved Cleaning Efficiency",desc:"HydroJet\u2122 Floor Washing System",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"100% Cleaning Coverage",desc:"Edge-Cleaning CornerRover\u2122 Arm",image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"All You Need, All-in-One",desc:"Complete Cleaning Solution",image:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Less Maintenance",desc:"DuoSpiral\u2122 Detangle Brushes",image:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Cleaning Power Upgrade",desc:"20,000 Pa Turbo Suction",image:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Intelligent Cleaning",desc:"Smart App Control & Scheduling",image:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"AI.See\u2122 Obstacle Avoidance",desc:"Advanced Object Recognition",image:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",alt:"AI.See\u2122 Obstacle Avoidance",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}}]},i={args:{data:e}},s={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",image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Improved Cleaning Efficiency",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"100% \u6E05\u6D01\u8986\u76D6",desc:"CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2",image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"100% Cleaning Coverage",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u4E00\u673A\u591A\u7528\uFF0C\u5168\u80FD\u6E05\u6D01",desc:"\u5B8C\u6574\u7684\u6E05\u6D01\u89E3\u51B3\u65B9\u6848",image:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",alt:"All You Need, All-in-One",thumbnailURL:"https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u66F4\u5C11\u7EF4\u62A4",desc:"DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934",image:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",alt:"Less Maintenance",thumbnailURL:"https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u6E05\u6D01\u80FD\u529B\u5347\u7EA7",desc:"20,000 Pa \u5F3A\u529B\u5438\u5C18",image:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",alt:"Cleaning Power Upgrade",thumbnailURL:"https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"\u667A\u80FD\u6E05\u6D01",desc:"APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6",image:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",alt:"Intelligent Cleaning",thumbnailURL:"https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"AI \u667A\u80FD\u907F\u969C",desc:"\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F",image:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",alt:"AI \u667A\u80FD\u907F\u969C",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",alt:"AI \u667A\u80FD\u907F\u969C",thumbnailURL:"https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}}]}}},m={args:{data:{title:"Experience the Difference",items:[{title:"Powerful Performance",desc:"See it in action",video:{url:"https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4",alt:"Powerful Performance Video",mimeType:"video/mp4"},mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",alt:"Powerful Performance Video",mimeType:"video/mp4"},image:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",alt:"Powerful Performance",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",alt:"Powerful Performance",thumbnailURL:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},{title:"Smart Navigation",desc:"Advanced mapping technology",video:{url:"https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"video/mp4"},mobVideo:{url:"https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"video/mp4"},image:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80",mimeType:"image/jpeg"},mobImage:{url:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",alt:"Smart Navigation",thumbnailURL:"https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80",mimeType:"image/jpeg"}},...e.items.slice(2)]}}},c={args:{data:{items:e.items}}},l={args:{data:e,className:"py-20",style:`
     /* \u4E3B\u6807\u9898 - \u6E10\u53D8\u8272\u6587\u5B57\u6548\u679C */
             .ksp-title {
               background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -124,5 +124,5 @@ import t from"../biz-components/Ksp/index.js";const a={title:"Biz-Components/Ksp
             .ksp-card:hover::before {
               opacity: 1;
             }
-    `}};export{i as Chinese,h as CustomStyle,s as Default,c as NoTitle,m as WithVideo,p as default};
+    `}};export{s as Chinese,l as CustomStyle,i as Default,c as NoTitle,m as WithVideo,p as default};
 //# sourceMappingURL=ksp.stories.js.map

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

@@ -1,7 +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      image: {\n        url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n        alt: 'Improved Cleaning Efficiency',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        alt: 'Improved Cleaning Efficiency',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: '100% Cleaning Coverage',\n      desc: 'Edge-Cleaning CornerRover\u2122 Arm',\n      image: {\n        url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n        alt: '100% Cleaning Coverage',\n        thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        alt: '100% Cleaning Coverage',\n        thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'All You Need, All-in-One',\n      desc: 'Complete Cleaning Solution',\n      image: {\n        url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n        alt: 'All You Need, All-in-One',\n        thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        alt: 'All You Need, All-in-One',\n        thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Less Maintenance',\n      desc: 'DuoSpiral\u2122 Detangle Brushes',\n      image: {\n        url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n        alt: 'Less Maintenance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        alt: 'Less Maintenance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Cleaning Power Upgrade',\n      desc: '20,000 Pa Turbo Suction',\n      image: {\n        url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n        alt: 'Cleaning Power Upgrade',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        alt: 'Cleaning Power Upgrade',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Intelligent Cleaning',\n      desc: 'Smart App Control & Scheduling',\n      image: {\n        url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n        alt: 'Intelligent Cleaning',\n        thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        alt: 'Intelligent Cleaning',\n        thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'AI.See\u2122 Obstacle Avoidance',\n      desc: 'Advanced Object Recognition',\n      image: {\n        url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n        alt: 'AI.See\u2122 Obstacle Avoidance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        alt: 'AI.See\u2122 Obstacle Avoidance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\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          image: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            alt: 'Improved Cleaning Efficiency',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            alt: 'Improved Cleaning Efficiency',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '100% \u6E05\u6D01\u8986\u76D6',\n          desc: 'CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2',\n          image: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            alt: '100% Cleaning Coverage',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            alt: '100% Cleaning Coverage',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\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          image: {\n            url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n            alt: 'All You Need, All-in-One',\n            thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n            alt: 'All You Need, All-in-One',\n            thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u66F4\u5C11\u7EF4\u62A4',\n          desc: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n          image: {\n            url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n            alt: 'Less Maintenance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n            alt: 'Less Maintenance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u6E05\u6D01\u80FD\u529B\u5347\u7EA7',\n          desc: '20,000 Pa \u5F3A\u529B\u5438\u5C18',\n          image: {\n            url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n            alt: 'Cleaning Power Upgrade',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n            alt: 'Cleaning Power Upgrade',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\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          mobImage: {\n            url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n            alt: 'Intelligent Cleaning',\n            thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: 'AI \u667A\u80FD\u907F\u969C',\n          desc: '\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F',\n          image: {\n            url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n            alt: 'AI \u667A\u80FD\u907F\u969C',\n            thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n            alt: 'AI \u667A\u80FD\u907F\u969C',\n            thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\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          image: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            alt: 'Powerful Performance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            alt: 'Powerful Performance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: 'Smart Navigation',\n          desc: 'Advanced mapping technology',\n          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'video/mp4',\n          },\n          mobVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'video/mp4',\n          },\n          image: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\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              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"],
-  "mappings": "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",
+  "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      image: {\n        url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n        alt: 'Improved Cleaning Efficiency',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        alt: 'Improved Cleaning Efficiency',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: '100% Cleaning Coverage',\n      desc: 'Edge-Cleaning CornerRover\u2122 Arm',\n      image: {\n        url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n        alt: '100% Cleaning Coverage',\n        thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        alt: '100% Cleaning Coverage',\n        thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'All You Need, All-in-One',\n      desc: 'Complete Cleaning Solution',\n      image: {\n        url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n        alt: 'All You Need, All-in-One',\n        thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        alt: 'All You Need, All-in-One',\n        thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Less Maintenance',\n      desc: 'DuoSpiral\u2122 Detangle Brushes',\n      image: {\n        url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n        alt: 'Less Maintenance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        alt: 'Less Maintenance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Cleaning Power Upgrade',\n      desc: '20,000 Pa Turbo Suction',\n      image: {\n        url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n        alt: 'Cleaning Power Upgrade',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        alt: 'Cleaning Power Upgrade',\n        thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'Intelligent Cleaning',\n      desc: 'Smart App Control & Scheduling',\n      image: {\n        url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n        alt: 'Intelligent Cleaning',\n        thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        alt: 'Intelligent Cleaning',\n        thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n    },\n    {\n      title: 'AI.See\u2122 Obstacle Avoidance',\n      desc: 'Advanced Object Recognition',\n      image: {\n        url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n        alt: 'AI.See\u2122 Obstacle Avoidance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\n      mobImage: {\n        url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        alt: 'AI.See\u2122 Obstacle Avoidance',\n        thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n        mimeType: 'image/jpeg',\n      },\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          image: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            alt: 'Improved Cleaning Efficiency',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            alt: 'Improved Cleaning Efficiency',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '100% \u6E05\u6D01\u8986\u76D6',\n          desc: 'CornerRover\u2122 \u8FB9\u89D2\u6E05\u6D01\u81C2',\n          image: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            alt: '100% Cleaning Coverage',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            alt: '100% Cleaning Coverage',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\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          image: {\n            url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n            alt: 'All You Need, All-in-One',\n            thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n            alt: 'All You Need, All-in-One',\n            thumbnailURL: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u66F4\u5C11\u7EF4\u62A4',\n          desc: 'DuoSpiral\u2122 \u9632\u7F20\u7ED5\u5237\u5934',\n          image: {\n            url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n            alt: 'Less Maintenance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n            alt: 'Less Maintenance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u6E05\u6D01\u80FD\u529B\u5347\u7EA7',\n          desc: '20,000 Pa \u5F3A\u529B\u5438\u5C18',\n          image: {\n            url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n            alt: 'Cleaning Power Upgrade',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n            alt: 'Cleaning Power Upgrade',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558002038-1055907df827?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: '\u667A\u80FD\u6E05\u6D01',\n          desc: 'APP \u8FDC\u7A0B\u63A7\u5236\u4E0E\u5B9A\u65F6',\n          image: {\n            url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n            alt: 'Intelligent Cleaning',\n            thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n            alt: 'Intelligent Cleaning',\n            thumbnailURL: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: 'AI \u667A\u80FD\u907F\u969C',\n          desc: '\u5148\u8FDB\u7684\u7269\u4F53\u8BC6\u522B\u6280\u672F',\n          image: {\n            url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n            alt: 'AI \u667A\u80FD\u907F\u969C',\n            thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n            alt: 'AI \u667A\u80FD\u907F\u969C',\n            thumbnailURL: 'https://images.unsplash.com/photo-1535378917042-10a22c95931a?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\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          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/763f24558ba84e098b817740384a0f38.mp4',\n            alt: 'Powerful Performance Video',\n            mimeType: 'video/mp4',\n          },\n          mobVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n            alt: 'Powerful Performance Video',\n            mimeType: 'video/mp4',\n          },\n          image: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            alt: 'Powerful Performance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            alt: 'Powerful Performance',\n            thumbnailURL: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          title: 'Smart Navigation',\n          desc: 'Advanced mapping technology',\n          video: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/61c978092bd24ca585f8a188b77458a6.mp4',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'video/mp4',\n          },\n          mobVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/bb1e9dcefc9e433a8bdf70215c39eedc.mp4',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'video/mp4',\n          },\n          image: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=1200&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\n          mobImage: {\n            url: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            alt: 'Smart Navigation',\n            thumbnailURL: 'https://images.unsplash.com/photo-1563213126-a4273aed2016?w=600&h=800&fit=crop&q=80',\n            mimeType: 'image/jpeg',\n          },\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              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"],
+  "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

@@ -1,13 +1,54 @@
 import type { StoryObj } from '@storybook/react';
-declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
+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;
+            titleType?: import("../biz-components/ProductCompare/index.js").TitleType;
+            titleIcon?: import("../types/props.js").Media;
+            subtitle?: string;
+            subtitleImage?: import("../types/props.js").Media;
+            textAlign?: import("../biz-components/ProductCompare/index.js").TextAlign;
+            products?: import("../biz-components/index.js").ProductItemData[];
+            twoImageRatio?: import("../biz-components/ProductCompare/index.js").TwoImageRatio;
+            threeImageRatio?: import("../biz-components/ProductCompare/index.js").ThreeImageRatio;
+            theme?: import("../types/props.js").Theme;
+        } & Record<string, any>;
+        style?: (string | React.CSSProperties) | 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;
+export declare const SellingPointTitle: Story;
+export declare const PrimaryTitle: Story;
+export declare const SecondaryTitle: Story;
+export declare const CenterAlign: Story;
+export declare const WithSubtitleImage: Story;
+export declare const TwoImagesEqualRatio: Story;
+export declare const ThreeImages: Story;
+export declare const DarkTheme: Story;
+export declare const CompleteExample: Story;

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

@@ -50,5 +50,5 @@ import{jsx as e}from"react/jsx-runtime";import a from"../biz-components/ProductC
 - \`.product-compare-item\` - \u5355\u4E2A\u4EA7\u54C1\u5BB9\u5668
 - \`.product-compare-label\` - \u4EA7\u54C1\u6807\u7B7E
 - \`.product-compare-media\` - \u5A92\u4F53\u5143\u7D20
-        `}}},decorators:[o=>e("div",{style:{padding:"2em"},children:e(o,{})})],tags:["autodocs"]};var r=p;const t={title:"\u6027\u80FD\u5BF9\u6BD4",titleType:"primary",subtitle:"\u771F\u5B9E\u573A\u666F\u4E0B\u7684\u8868\u73B0\u5DEE\u5F02",textAlign:"left",twoImageRatio:"2:3",theme:"light",products:[{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},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:"https://via.placeholder.com/800x600/666666/ffffff?text=Competitor",mobPoster:"https://via.placeholder.com/600x800/666666/ffffff?text=Competitor"},{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},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:"https://via.placeholder.com/800x600/008CD6/ffffff?text=Anker+E25",mobPoster:"https://via.placeholder.com/600x800/008CD6/ffffff?text=Anker+E25"}]},m={args:{data:t}},s={args:{data:{...t,titleType:"selling-point",title:"\u8D85\u5F3A\u7EED\u822A\u80FD\u529B",titleIcon:{url:"https://cdn-icons-png.flaticon.com/512/1828/1828884.png",alt:"\u7535\u6C60\u56FE\u6807",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u5356\u70B9\u6807\u9898\u7C7B\u578B\uFF1A\u5E26\u56FE\u6807\uFF0C\u6807\u9898\u989C\u8272\u4E3A #00BEFA"}}}},c={args:{data:{...t,titleType:"primary",title:"\u6027\u80FD\u5BF9\u6BD4"}},parameters:{docs:{description:{story:"\u4E00\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=4"}}}},l={args:{data:{...t,titleType:"secondary",title:"\u6E05\u6D01\u6548\u679C\u5BF9\u6BD4"}},parameters:{docs:{description:{story:"\u4E8C\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=3\uFF0C\u5B57\u4F53\u8F83\u5C0F"}}}},d={args:{data:{...t,textAlign:"center"}},parameters:{docs:{description:{story:"\u6807\u9898\u548C\u526F\u6807\u9898\u5C45\u4E2D\u5BF9\u9F50"}}}},n={args:{data:{...t,subtitleImage:{url:"https://via.placeholder.com/800x200/008CD6/ffffff?text=Feature+Comparison+Chart",alt:"\u529F\u80FD\u5BF9\u6BD4\u56FE",mimeType:"image/png",width:800,height:200}}},parameters:{docs:{description:{story:"\u5728\u526F\u6807\u9898\u4E0B\u65B9\u663E\u793A\u56FE\u7247"}}}},h={args:{data:{...t,twoImageRatio:"1:1"}},parameters:{docs:{description:{story:"2\u5F20\u56FE\u7247\u7B49\u5BBD 1:1 \u6BD4\u4F8B"}}}},f={args:{data:{...t,title:"\u591A\u4EA7\u54C1\u5BF9\u6BD4",subtitle:"\u4E09\u6B3E\u4EA7\u54C1\u5168\u9762\u5BF9\u6BD4",products:[{text:"\u54C1\u724C A",media:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=600&fit=crop",alt:"\u54C1\u724C A",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=800&fit=crop",alt:"\u54C1\u724C A",mimeType:"image/jpeg"}},{text:"\u54C1\u724C B",media:{url:"https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=800&h=600&fit=crop",alt:"\u54C1\u724C B",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=600&h=800&fit=crop",alt:"\u54C1\u724C B",mimeType:"image/jpeg"}},{text:"Anker \u65D7\u8230",media:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop",alt:"Anker \u65D7\u8230",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=600&h=800&fit=crop",alt:"Anker \u65D7\u8230",mimeType:"image/jpeg"}}]}},parameters:{docs:{description:{story:"3\u5F20\u56FE\u7247 1:1:1 \u7B49\u5BBD\u5E03\u5C40"}}}},g={args:{data:{...t,theme:"dark"}},parameters:{docs:{description:{story:"Dark \u4E3B\u9898\u6837\u5F0F"}}}},y={args:{data:{titleType:"selling-point",title:"\u667A\u80FD\u6E05\u6D01\u7CFB\u7EDF",titleIcon:{url:"https://cdn-icons-png.flaticon.com/512/2917/2917995.png",alt:"\u667A\u80FD\u56FE\u6807",mimeType:"image/png"},subtitle:"\u5168\u65B9\u4F4D\u5BF9\u6BD4\uFF0C\u770B\u89C1\u771F\u5B9E\u5DEE\u5F02",subtitleImage:{url:"https://via.placeholder.com/600x150/008CD6/ffffff?text=AI+Powered+Cleaning",alt:"AI \u6E05\u6D01\u7CFB\u7EDF",mimeType:"image/png",width:600,height:150},textAlign:"center",theme:"light",twoImageRatio:"2:3",products:[{text:"\u666E\u901A\u4EA7\u54C1",media:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop",alt:"\u666E\u901A\u4EA7\u54C1",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop",alt:"\u666E\u901A\u4EA7\u54C1",mimeType:"image/jpeg"}},{text:"Anker \u667A\u80FD\u7248",media:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop",alt:"Anker \u667A\u80FD\u7248",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=600&h=800&fit=crop",alt:"Anker \u667A\u80FD\u7248",mimeType:"image/jpeg"}}]}},parameters:{docs:{description:{story:"\u7EFC\u5408\u793A\u4F8B\uFF1A\u5C55\u793A\u591A\u79CD\u529F\u80FD\u7EC4\u5408\u4F7F\u7528"}}}};export{d as CenterAlign,y as CompleteExample,g as DarkTheme,m as Default,c as PrimaryTitle,l as SecondaryTitle,s as SellingPointTitle,f as ThreeImages,h as TwoImagesEqualRatio,n as WithSubtitleImage,r as default};
+        `}}},decorators:[o=>e("div",{style:{padding:"2em"},children:e(o,{})})],tags:["autodocs"]};var r=p;const t={title:"\u6027\u80FD\u5BF9\u6BD4",titleType:"primary",subtitle:"\u771F\u5B9E\u573A\u666F\u4E0B\u7684\u8868\u73B0\u5DEE\u5F02",textAlign:"left",twoImageRatio:"2:3",theme:"light",products:[{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},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/800x600/666666/ffffff?text=Competitor",alt:"Competitor Poster",mimeType:"image/png"},mobPoster:{url:"https://via.placeholder.com/600x800/666666/ffffff?text=Competitor",alt:"Competitor Mobile Poster",mimeType:"image/png"}},{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},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/800x600/008CD6/ffffff?text=Anker+E25",alt:"Anker E25 Poster",mimeType:"image/png"},mobPoster:{url:"https://via.placeholder.com/600x800/008CD6/ffffff?text=Anker+E25",alt:"Anker E25 Mobile Poster",mimeType:"image/png"}}]},m={args:{data:t}},s={args:{data:{...t,titleType:"selling-point",title:"\u8D85\u5F3A\u7EED\u822A\u80FD\u529B",titleIcon:{url:"https://cdn-icons-png.flaticon.com/512/1828/1828884.png",alt:"\u7535\u6C60\u56FE\u6807",mimeType:"image/png"}}},parameters:{docs:{description:{story:"\u5356\u70B9\u6807\u9898\u7C7B\u578B\uFF1A\u5E26\u56FE\u6807\uFF0C\u6807\u9898\u989C\u8272\u4E3A #00BEFA"}}}},c={args:{data:{...t,titleType:"primary",title:"\u6027\u80FD\u5BF9\u6BD4"}},parameters:{docs:{description:{story:"\u4E00\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=4"}}}},l={args:{data:{...t,titleType:"secondary",title:"\u6E05\u6D01\u6548\u679C\u5BF9\u6BD4"}},parameters:{docs:{description:{story:"\u4E8C\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=3\uFF0C\u5B57\u4F53\u8F83\u5C0F"}}}},d={args:{data:{...t,textAlign:"center"}},parameters:{docs:{description:{story:"\u6807\u9898\u548C\u526F\u6807\u9898\u5C45\u4E2D\u5BF9\u9F50"}}}},n={args:{data:{...t,subtitleImage:{url:"https://via.placeholder.com/800x200/008CD6/ffffff?text=Feature+Comparison+Chart",alt:"\u529F\u80FD\u5BF9\u6BD4\u56FE",mimeType:"image/png",width:800,height:200}}},parameters:{docs:{description:{story:"\u5728\u526F\u6807\u9898\u4E0B\u65B9\u663E\u793A\u56FE\u7247"}}}},h={args:{data:{...t,twoImageRatio:"1:1"}},parameters:{docs:{description:{story:"2\u5F20\u56FE\u7247\u7B49\u5BBD 1:1 \u6BD4\u4F8B"}}}},g={args:{data:{...t,title:"\u591A\u4EA7\u54C1\u5BF9\u6BD4",subtitle:"\u4E09\u6B3E\u4EA7\u54C1\u5168\u9762\u5BF9\u6BD4",products:[{text:"\u54C1\u724C A",media:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=600&fit=crop",alt:"\u54C1\u724C A",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=800&fit=crop",alt:"\u54C1\u724C A",mimeType:"image/jpeg"}},{text:"\u54C1\u724C B",media:{url:"https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=800&h=600&fit=crop",alt:"\u54C1\u724C B",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=600&h=800&fit=crop",alt:"\u54C1\u724C B",mimeType:"image/jpeg"}},{text:"Anker \u65D7\u8230",media:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop",alt:"Anker \u65D7\u8230",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=600&h=800&fit=crop",alt:"Anker \u65D7\u8230",mimeType:"image/jpeg"}}]}},parameters:{docs:{description:{story:"3\u5F20\u56FE\u7247 1:1:1 \u7B49\u5BBD\u5E03\u5C40"}}}},f={args:{data:{...t,theme:"dark"}},parameters:{docs:{description:{story:"Dark \u4E3B\u9898\u6837\u5F0F"}}}},y={args:{data:{titleType:"selling-point",title:"\u667A\u80FD\u6E05\u6D01\u7CFB\u7EDF",titleIcon:{url:"https://cdn-icons-png.flaticon.com/512/2917/2917995.png",alt:"\u667A\u80FD\u56FE\u6807",mimeType:"image/png"},subtitle:"\u5168\u65B9\u4F4D\u5BF9\u6BD4\uFF0C\u770B\u89C1\u771F\u5B9E\u5DEE\u5F02",subtitleImage:{url:"https://via.placeholder.com/600x150/008CD6/ffffff?text=AI+Powered+Cleaning",alt:"AI \u6E05\u6D01\u7CFB\u7EDF",mimeType:"image/png",width:600,height:150},textAlign:"center",theme:"light",twoImageRatio:"2:3",products:[{text:"\u666E\u901A\u4EA7\u54C1",media:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop",alt:"\u666E\u901A\u4EA7\u54C1",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop",alt:"\u666E\u901A\u4EA7\u54C1",mimeType:"image/jpeg"}},{text:"Anker \u667A\u80FD\u7248",media:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop",alt:"Anker \u667A\u80FD\u7248",mimeType:"image/jpeg"},mobMedia:{url:"https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=600&h=800&fit=crop",alt:"Anker \u667A\u80FD\u7248",mimeType:"image/jpeg"}}]}},parameters:{docs:{description:{story:"\u7EFC\u5408\u793A\u4F8B\uFF1A\u5C55\u793A\u591A\u79CD\u529F\u80FD\u7EC4\u5408\u4F7F\u7528"}}}};export{d as CenterAlign,y as CompleteExample,f as DarkTheme,m as Default,c as PrimaryTitle,l as SecondaryTitle,s as SellingPointTitle,g as ThreeImages,h as TwoImagesEqualRatio,n as WithSubtitleImage,r as default};
 //# sourceMappingURL=productCompare.stories.js.map

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

@@ -1,7 +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\u4EA7\u54C1\u5BF9\u6BD4\u6548\u679C\uFF0C\u901A\u8FC7\u89C6\u89C9\u5316\u7684\u65B9\u5F0F\u7A81\u51FA\u4EA7\u54C1\u4F18\u52BF\uFF0C\u652F\u63012-3\u4E2A\u4EA7\u54C1\u7684\u7075\u6D3B\u5BF9\u6BD4\u3002\n\n## \uD83C\uDFAF \u6838\u5FC3\u529F\u80FD\n\n- **\u7075\u6D3B\u5E03\u5C40**\uFF1A\u652F\u63012-3\u4E2A\u4EA7\u54C1\u5BF9\u6BD4\uFF0C\u53EF\u914D\u7F6E\u5BBD\u5EA6\u6BD4\u4F8B\n- **3\u79CD\u6807\u9898\u7C7B\u578B**\uFF1A\n  - \u5356\u70B9\u6807\u9898\uFF08selling-point\uFF09\uFF1A\u5E26\u56FE\u6807\uFF0C\u6807\u9898\u989C\u8272 #00BEFA\n  - \u4E00\u7EA7\u6807\u9898\uFF08primary\uFF09\uFF1A\u5E38\u89C4\u6807\u9898\uFF0Csize=4\n  - \u4E8C\u7EA7\u6807\u9898\uFF08secondary\uFF09\uFF1A\u8F83\u5C0F\u6807\u9898\uFF0Csize=3\n- **\u6587\u672C\u5BF9\u9F50**\uFF1A\u652F\u6301\u5DE6\u5BF9\u9F50\u548C\u5C45\u4E2D\u5BF9\u9F50\n- **\u526F\u6807\u9898\u56FE\u7247**\uFF1A\u652F\u6301\u5728\u526F\u6807\u9898\u4E0B\u65B9\u663E\u793A\u56FE\u7247\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\n- **\u667A\u80FD\u61D2\u52A0\u8F7D**\uFF1A\u4F7F\u7528 Intersection Observer API\uFF0C\u8DDD\u79BB\u89C6\u53E3 1500px \u63D0\u524D\u52A0\u8F7D\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\n- **\u5706\u89D2\u914D\u7F6E**\uFF1A\u652F\u6301\u5706\u89D2\uFF08laptop \u4EE5\u4E0B 12px\uFF0Claptop \u4EE5\u4E0A 16px\uFF09\u548C\u76F4\u89D2\n\n## \uD83D\uDCD0 \u5E03\u5C40\u6BD4\u4F8B\n\n### 2\u5F20\u56FE\u7247\n- 2:3 \u6BD4\u4F8B\uFF08\u9ED8\u8BA4\uFF09\n- 1:1 \u6BD4\u4F8B\uFF08\u53EF\u914D\u7F6E\uFF09\n\n### 3\u5F20\u56FE\u7247\n- 1:1:1 \u7B49\u5BBD\n\n## \uD83C\uDFF7\uFE0F \u6807\u7B7E\u6837\u5F0F\n\n- **\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1**\uFF1Abg-brand-0 \u80CC\u666F\uFF0C\u767D\u8272\u6587\u5B57\n- **\u5176\u4ED6\u4EA7\u54C1**\uFF1Argba(0,0,0,0.2) \u80CC\u666F\uFF0C\u767D\u8272\u6587\u5B57\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\uFF1A\n- \\`.product-compare\\` - \u7EC4\u4EF6\u5BB9\u5668\n- \\`.product-compare-title / .product-compare-subtitle\\` - \u6807\u9898/\u526F\u6807\u9898\n- \\`.product-compare-title-icon\\` - \u6807\u9898\u56FE\u6807\uFF08\u5356\u70B9\u7C7B\u578B\uFF09\n- \\`.product-compare-subtitle-image\\` - \u526F\u6807\u9898\u56FE\u7247\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        `,\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// \u57FA\u7840\u6570\u636E\uFF082\u5F20\u56FE\u7247 2:3 \u6BD4\u4F8B\uFF09\nconst defaultData: ProductCompareProps['data'] = {\n  title: '\u6027\u80FD\u5BF9\u6BD4',\n  titleType: 'primary',\n  subtitle: '\u771F\u5B9E\u573A\u666F\u4E0B\u7684\u8868\u73B0\u5DEE\u5F02',\n  textAlign: 'left',\n  twoImageRatio: '2:3',\n  theme: 'light',\n  products: [\n    {\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      },\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      },\n      poster: 'https://via.placeholder.com/800x600/666666/ffffff?text=Competitor',\n      mobPoster: 'https://via.placeholder.com/600x800/666666/ffffff?text=Competitor',\n    },\n    {\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      },\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      },\n      poster: 'https://via.placeholder.com/800x600/008CD6/ffffff?text=Anker+E25',\n      mobPoster: 'https://via.placeholder.com/600x800/008CD6/ffffff?text=Anker+E25',\n    },\n  ],\n}\n\n// \u9ED8\u8BA4\uFF1A2\u5F20\u56FE\u7247 2:3 \u6BD4\u4F8B\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\n// \u6807\u9898\u7C7B\u578B\uFF1A\u5356\u70B9\uFF08\u5E26\u56FE\u6807\uFF09\nexport const SellingPointTitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      titleType: 'selling-point',\n      title: '\u8D85\u5F3A\u7EED\u822A\u80FD\u529B',\n      titleIcon: {\n        url: 'https://cdn-icons-png.flaticon.com/512/1828/1828884.png',\n        alt: '\u7535\u6C60\u56FE\u6807',\n        mimeType: 'image/png',\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5356\u70B9\u6807\u9898\u7C7B\u578B\uFF1A\u5E26\u56FE\u6807\uFF0C\u6807\u9898\u989C\u8272\u4E3A #00BEFA',\n      },\n    },\n  },\n}\n\n// \u6807\u9898\u7C7B\u578B\uFF1A\u4E00\u7EA7\u6807\u9898\nexport const PrimaryTitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      titleType: 'primary',\n      title: '\u6027\u80FD\u5BF9\u6BD4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u4E00\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=4',\n      },\n    },\n  },\n}\n\n// \u6807\u9898\u7C7B\u578B\uFF1A\u4E8C\u7EA7\u6807\u9898\nexport const SecondaryTitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      titleType: 'secondary',\n      title: '\u6E05\u6D01\u6548\u679C\u5BF9\u6BD4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u4E8C\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=3\uFF0C\u5B57\u4F53\u8F83\u5C0F',\n      },\n    },\n  },\n}\n\n// \u6587\u672C\u5C45\u4E2D\u5BF9\u9F50\nexport const CenterAlign: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      textAlign: 'center',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u6807\u9898\u548C\u526F\u6807\u9898\u5C45\u4E2D\u5BF9\u9F50',\n      },\n    },\n  },\n}\n\n// \u526F\u6807\u9898\u4E0B\u65B9\u5E26\u56FE\u7247\nexport const WithSubtitleImage: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      subtitleImage: {\n        url: 'https://via.placeholder.com/800x200/008CD6/ffffff?text=Feature+Comparison+Chart',\n        alt: '\u529F\u80FD\u5BF9\u6BD4\u56FE',\n        mimeType: 'image/png',\n        width: 800,\n        height: 200,\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5728\u526F\u6807\u9898\u4E0B\u65B9\u663E\u793A\u56FE\u7247',\n      },\n    },\n  },\n}\n\n// 2\u5F20\u56FE\u7247 1:1 \u6BD4\u4F8B\nexport const TwoImagesEqualRatio: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      twoImageRatio: '1:1',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '2\u5F20\u56FE\u7247\u7B49\u5BBD 1:1 \u6BD4\u4F8B',\n      },\n    },\n  },\n}\n\n// 3\u5F20\u56FE\u7247 1:1:1\nexport const ThreeImages: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      title: '\u591A\u4EA7\u54C1\u5BF9\u6BD4',\n      subtitle: '\u4E09\u6B3E\u4EA7\u54C1\u5168\u9762\u5BF9\u6BD4',\n      products: [\n        {\n          text: '\u54C1\u724C A',\n          media: {\n            url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=600&fit=crop',\n            alt: '\u54C1\u724C A',\n            mimeType: 'image/jpeg',\n          },\n          mobMedia: {\n            url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=800&fit=crop',\n            alt: '\u54C1\u724C A',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          text: '\u54C1\u724C B',\n          media: {\n            url: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=800&h=600&fit=crop',\n            alt: '\u54C1\u724C B',\n            mimeType: 'image/jpeg',\n          },\n          mobMedia: {\n            url: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=600&h=800&fit=crop',\n            alt: '\u54C1\u724C B',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          text: 'Anker \u65D7\u8230',\n          media: {\n            url: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop',\n            alt: 'Anker \u65D7\u8230',\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 \u65D7\u8230',\n            mimeType: 'image/jpeg',\n          },\n        },\n      ],\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '3\u5F20\u56FE\u7247 1:1:1 \u7B49\u5BBD\u5E03\u5C40',\n      },\n    },\n  },\n}\n\n// \u5E26\u5706\u89D2\n// Dark \u4E3B\u9898\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: 'Dark \u4E3B\u9898\u6837\u5F0F',\n      },\n    },\n  },\n}\n\n// \u7EFC\u5408\u793A\u4F8B\uFF1A\u5356\u70B9\u6807\u9898 + \u5C45\u4E2D\u5BF9\u9F50 + \u526F\u6807\u9898\u56FE\u7247 + \u5706\u89D2\nexport const CompleteExample: Story = {\n  args: {\n    data: {\n      titleType: 'selling-point',\n      title: '\u667A\u80FD\u6E05\u6D01\u7CFB\u7EDF',\n      titleIcon: {\n        url: 'https://cdn-icons-png.flaticon.com/512/2917/2917995.png',\n        alt: '\u667A\u80FD\u56FE\u6807',\n        mimeType: 'image/png',\n      },\n      subtitle: '\u5168\u65B9\u4F4D\u5BF9\u6BD4\uFF0C\u770B\u89C1\u771F\u5B9E\u5DEE\u5F02',\n      subtitleImage: {\n        url: 'https://via.placeholder.com/600x150/008CD6/ffffff?text=AI+Powered+Cleaning',\n        alt: 'AI \u6E05\u6D01\u7CFB\u7EDF',\n        mimeType: 'image/png',\n        width: 600,\n        height: 150,\n      },\n      textAlign: 'center',\n      theme: 'light',\n      twoImageRatio: '2:3',\n      products: [\n        {\n          text: '\u666E\u901A\u4EA7\u54C1',\n          media: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop',\n            alt: '\u666E\u901A\u4EA7\u54C1',\n            mimeType: 'image/jpeg',\n          },\n          mobMedia: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop',\n            alt: '\u666E\u901A\u4EA7\u54C1',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          text: 'Anker \u667A\u80FD\u7248',\n          media: {\n            url: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop',\n            alt: 'Anker \u667A\u80FD\u7248',\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 \u667A\u80FD\u7248',\n            mimeType: 'image/jpeg',\n          },\n        },\n      ],\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u7EFC\u5408\u793A\u4F8B\uFF1A\u5C55\u793A\u591A\u79CD\u529F\u80FD\u7EC4\u5408\u4F7F\u7528',\n      },\n    },\n  },\n}\n"],
-  "mappings": "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,oDACT,CACF,CACF,CACF,EAIaS,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGT,EACH,MAAO,MACT,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,+BACT,CACF,CACF,CACF,EAGaU,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,UAAW,gBACX,MAAO,uCACP,UAAW,CACT,IAAK,0DACL,IAAK,2BACL,SAAU,WACZ,EACA,SAAU,2EACV,cAAe,CACb,IAAK,6EACL,IAAK,8BACL,SAAU,YACV,MAAO,IACP,OAAQ,GACV,EACA,UAAW,SACX,MAAO,QACP,cAAe,MACf,SAAU,CACR,CACE,KAAM,2BACN,MAAO,CACL,IAAK,iFACL,IAAK,2BACL,SAAU,YACZ,EACA,SAAU,CACR,IAAK,iFACL,IAAK,2BACL,SAAU,YACZ,CACF,EACA,CACE,KAAM,2BACN,MAAO,CACL,IAAK,oFACL,IAAK,2BACL,SAAU,YACZ,EACA,SAAU,CACR,IAAK,oFACL,IAAK,2BACL,SAAU,YACZ,CACF,CACF,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,4FACT,CACF,CACF,CACF",
+  "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\u4EA7\u54C1\u5BF9\u6BD4\u6548\u679C\uFF0C\u901A\u8FC7\u89C6\u89C9\u5316\u7684\u65B9\u5F0F\u7A81\u51FA\u4EA7\u54C1\u4F18\u52BF\uFF0C\u652F\u63012-3\u4E2A\u4EA7\u54C1\u7684\u7075\u6D3B\u5BF9\u6BD4\u3002\n\n## \uD83C\uDFAF \u6838\u5FC3\u529F\u80FD\n\n- **\u7075\u6D3B\u5E03\u5C40**\uFF1A\u652F\u63012-3\u4E2A\u4EA7\u54C1\u5BF9\u6BD4\uFF0C\u53EF\u914D\u7F6E\u5BBD\u5EA6\u6BD4\u4F8B\n- **3\u79CD\u6807\u9898\u7C7B\u578B**\uFF1A\n  - \u5356\u70B9\u6807\u9898\uFF08selling-point\uFF09\uFF1A\u5E26\u56FE\u6807\uFF0C\u6807\u9898\u989C\u8272 #00BEFA\n  - \u4E00\u7EA7\u6807\u9898\uFF08primary\uFF09\uFF1A\u5E38\u89C4\u6807\u9898\uFF0Csize=4\n  - \u4E8C\u7EA7\u6807\u9898\uFF08secondary\uFF09\uFF1A\u8F83\u5C0F\u6807\u9898\uFF0Csize=3\n- **\u6587\u672C\u5BF9\u9F50**\uFF1A\u652F\u6301\u5DE6\u5BF9\u9F50\u548C\u5C45\u4E2D\u5BF9\u9F50\n- **\u526F\u6807\u9898\u56FE\u7247**\uFF1A\u652F\u6301\u5728\u526F\u6807\u9898\u4E0B\u65B9\u663E\u793A\u56FE\u7247\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\n- **\u667A\u80FD\u61D2\u52A0\u8F7D**\uFF1A\u4F7F\u7528 Intersection Observer API\uFF0C\u8DDD\u79BB\u89C6\u53E3 1500px \u63D0\u524D\u52A0\u8F7D\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\n- **\u5706\u89D2\u914D\u7F6E**\uFF1A\u652F\u6301\u5706\u89D2\uFF08laptop \u4EE5\u4E0B 12px\uFF0Claptop \u4EE5\u4E0A 16px\uFF09\u548C\u76F4\u89D2\n\n## \uD83D\uDCD0 \u5E03\u5C40\u6BD4\u4F8B\n\n### 2\u5F20\u56FE\u7247\n- 2:3 \u6BD4\u4F8B\uFF08\u9ED8\u8BA4\uFF09\n- 1:1 \u6BD4\u4F8B\uFF08\u53EF\u914D\u7F6E\uFF09\n\n### 3\u5F20\u56FE\u7247\n- 1:1:1 \u7B49\u5BBD\n\n## \uD83C\uDFF7\uFE0F \u6807\u7B7E\u6837\u5F0F\n\n- **\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1**\uFF1Abg-brand-0 \u80CC\u666F\uFF0C\u767D\u8272\u6587\u5B57\n- **\u5176\u4ED6\u4EA7\u54C1**\uFF1Argba(0,0,0,0.2) \u80CC\u666F\uFF0C\u767D\u8272\u6587\u5B57\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\uFF1A\n- \\`.product-compare\\` - \u7EC4\u4EF6\u5BB9\u5668\n- \\`.product-compare-title / .product-compare-subtitle\\` - \u6807\u9898/\u526F\u6807\u9898\n- \\`.product-compare-title-icon\\` - \u6807\u9898\u56FE\u6807\uFF08\u5356\u70B9\u7C7B\u578B\uFF09\n- \\`.product-compare-subtitle-image\\` - \u526F\u6807\u9898\u56FE\u7247\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        `,\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// \u57FA\u7840\u6570\u636E\uFF082\u5F20\u56FE\u7247 2:3 \u6BD4\u4F8B\uFF09\nconst defaultData: ProductCompareProps['data'] = {\n  title: '\u6027\u80FD\u5BF9\u6BD4',\n  titleType: 'primary',\n  subtitle: '\u771F\u5B9E\u573A\u666F\u4E0B\u7684\u8868\u73B0\u5DEE\u5F02',\n  textAlign: 'left',\n  twoImageRatio: '2:3',\n  theme: 'light',\n  products: [\n    {\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      },\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      },\n      poster: {\n        url: 'https://via.placeholder.com/800x600/666666/ffffff?text=Competitor',\n        alt: 'Competitor Poster',\n        mimeType: 'image/png',\n      },\n      mobPoster: {\n        url: 'https://via.placeholder.com/600x800/666666/ffffff?text=Competitor',\n        alt: 'Competitor Mobile Poster',\n        mimeType: 'image/png',\n      },\n    },\n    {\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      },\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      },\n      poster: {\n        url: 'https://via.placeholder.com/800x600/008CD6/ffffff?text=Anker+E25',\n        alt: 'Anker E25 Poster',\n        mimeType: 'image/png',\n      },\n      mobPoster: {\n        url: 'https://via.placeholder.com/600x800/008CD6/ffffff?text=Anker+E25',\n        alt: 'Anker E25 Mobile Poster',\n        mimeType: 'image/png',\n      },\n    },\n  ],\n}\n\n// \u9ED8\u8BA4\uFF1A2\u5F20\u56FE\u7247 2:3 \u6BD4\u4F8B\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\n// \u6807\u9898\u7C7B\u578B\uFF1A\u5356\u70B9\uFF08\u5E26\u56FE\u6807\uFF09\nexport const SellingPointTitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      titleType: 'selling-point',\n      title: '\u8D85\u5F3A\u7EED\u822A\u80FD\u529B',\n      titleIcon: {\n        url: 'https://cdn-icons-png.flaticon.com/512/1828/1828884.png',\n        alt: '\u7535\u6C60\u56FE\u6807',\n        mimeType: 'image/png',\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5356\u70B9\u6807\u9898\u7C7B\u578B\uFF1A\u5E26\u56FE\u6807\uFF0C\u6807\u9898\u989C\u8272\u4E3A #00BEFA',\n      },\n    },\n  },\n}\n\n// \u6807\u9898\u7C7B\u578B\uFF1A\u4E00\u7EA7\u6807\u9898\nexport const PrimaryTitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      titleType: 'primary',\n      title: '\u6027\u80FD\u5BF9\u6BD4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u4E00\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=4',\n      },\n    },\n  },\n}\n\n// \u6807\u9898\u7C7B\u578B\uFF1A\u4E8C\u7EA7\u6807\u9898\nexport const SecondaryTitle: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      titleType: 'secondary',\n      title: '\u6E05\u6D01\u6548\u679C\u5BF9\u6BD4',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u4E8C\u7EA7\u6807\u9898\u7C7B\u578B\uFF1Asize=3\uFF0C\u5B57\u4F53\u8F83\u5C0F',\n      },\n    },\n  },\n}\n\n// \u6587\u672C\u5C45\u4E2D\u5BF9\u9F50\nexport const CenterAlign: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      textAlign: 'center',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u6807\u9898\u548C\u526F\u6807\u9898\u5C45\u4E2D\u5BF9\u9F50',\n      },\n    },\n  },\n}\n\n// \u526F\u6807\u9898\u4E0B\u65B9\u5E26\u56FE\u7247\nexport const WithSubtitleImage: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      subtitleImage: {\n        url: 'https://via.placeholder.com/800x200/008CD6/ffffff?text=Feature+Comparison+Chart',\n        alt: '\u529F\u80FD\u5BF9\u6BD4\u56FE',\n        mimeType: 'image/png',\n        width: 800,\n        height: 200,\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u5728\u526F\u6807\u9898\u4E0B\u65B9\u663E\u793A\u56FE\u7247',\n      },\n    },\n  },\n}\n\n// 2\u5F20\u56FE\u7247 1:1 \u6BD4\u4F8B\nexport const TwoImagesEqualRatio: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      twoImageRatio: '1:1',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '2\u5F20\u56FE\u7247\u7B49\u5BBD 1:1 \u6BD4\u4F8B',\n      },\n    },\n  },\n}\n\n// 3\u5F20\u56FE\u7247 1:1:1\nexport const ThreeImages: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      title: '\u591A\u4EA7\u54C1\u5BF9\u6BD4',\n      subtitle: '\u4E09\u6B3E\u4EA7\u54C1\u5168\u9762\u5BF9\u6BD4',\n      products: [\n        {\n          text: '\u54C1\u724C A',\n          media: {\n            url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&h=600&fit=crop',\n            alt: '\u54C1\u724C A',\n            mimeType: 'image/jpeg',\n          },\n          mobMedia: {\n            url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=800&fit=crop',\n            alt: '\u54C1\u724C A',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          text: '\u54C1\u724C B',\n          media: {\n            url: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=800&h=600&fit=crop',\n            alt: '\u54C1\u724C B',\n            mimeType: 'image/jpeg',\n          },\n          mobMedia: {\n            url: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=600&h=800&fit=crop',\n            alt: '\u54C1\u724C B',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          text: 'Anker \u65D7\u8230',\n          media: {\n            url: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop',\n            alt: 'Anker \u65D7\u8230',\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 \u65D7\u8230',\n            mimeType: 'image/jpeg',\n          },\n        },\n      ],\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '3\u5F20\u56FE\u7247 1:1:1 \u7B49\u5BBD\u5E03\u5C40',\n      },\n    },\n  },\n}\n\n// \u5E26\u5706\u89D2\n// Dark \u4E3B\u9898\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      ...defaultData,\n      theme: 'dark',\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: 'Dark \u4E3B\u9898\u6837\u5F0F',\n      },\n    },\n  },\n}\n\n// \u7EFC\u5408\u793A\u4F8B\uFF1A\u5356\u70B9\u6807\u9898 + \u5C45\u4E2D\u5BF9\u9F50 + \u526F\u6807\u9898\u56FE\u7247 + \u5706\u89D2\nexport const CompleteExample: Story = {\n  args: {\n    data: {\n      titleType: 'selling-point',\n      title: '\u667A\u80FD\u6E05\u6D01\u7CFB\u7EDF',\n      titleIcon: {\n        url: 'https://cdn-icons-png.flaticon.com/512/2917/2917995.png',\n        alt: '\u667A\u80FD\u56FE\u6807',\n        mimeType: 'image/png',\n      },\n      subtitle: '\u5168\u65B9\u4F4D\u5BF9\u6BD4\uFF0C\u770B\u89C1\u771F\u5B9E\u5DEE\u5F02',\n      subtitleImage: {\n        url: 'https://via.placeholder.com/600x150/008CD6/ffffff?text=AI+Powered+Cleaning',\n        alt: 'AI \u6E05\u6D01\u7CFB\u7EDF',\n        mimeType: 'image/png',\n        width: 600,\n        height: 150,\n      },\n      textAlign: 'center',\n      theme: 'light',\n      twoImageRatio: '2:3',\n      products: [\n        {\n          text: '\u666E\u901A\u4EA7\u54C1',\n          media: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=600&fit=crop',\n            alt: '\u666E\u901A\u4EA7\u54C1',\n            mimeType: 'image/jpeg',\n          },\n          mobMedia: {\n            url: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&h=800&fit=crop',\n            alt: '\u666E\u901A\u4EA7\u54C1',\n            mimeType: 'image/jpeg',\n          },\n        },\n        {\n          text: 'Anker \u667A\u80FD\u7248',\n          media: {\n            url: 'https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?w=800&h=600&fit=crop',\n            alt: 'Anker \u667A\u80FD\u7248',\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 \u667A\u80FD\u7248',\n            mimeType: 'image/jpeg',\n          },\n        },\n      ],\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: '\u7EFC\u5408\u793A\u4F8B\uFF1A\u5C55\u793A\u591A\u79CD\u529F\u80FD\u7EC4\u5408\u4F7F\u7528',\n      },\n    },\n  },\n}\n"],
+  "mappings": "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,CACL,IAAK,oFACL,IAAK,qBACL,SAAU,YACZ,EACA,SAAU,CACR,IAAK,oFACL,IAAK,qBACL,SAAU,YACZ,CACF,CACF,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,oDACT,CACF,CACF,CACF,EAIaS,EAAmB,CAC9B,KAAM,CACJ,KAAM,CACJ,GAAGT,EACH,MAAO,MACT,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,+BACT,CACF,CACF,CACF,EAGaU,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,UAAW,gBACX,MAAO,uCACP,UAAW,CACT,IAAK,0DACL,IAAK,2BACL,SAAU,WACZ,EACA,SAAU,2EACV,cAAe,CACb,IAAK,6EACL,IAAK,8BACL,SAAU,YACV,MAAO,IACP,OAAQ,GACV,EACA,UAAW,SACX,MAAO,QACP,cAAe,MACf,SAAU,CACR,CACE,KAAM,2BACN,MAAO,CACL,IAAK,iFACL,IAAK,2BACL,SAAU,YACZ,EACA,SAAU,CACR,IAAK,iFACL,IAAK,2BACL,SAAU,YACZ,CACF,EACA,CACE,KAAM,2BACN,MAAO,CACL,IAAK,oFACL,IAAK,2BACL,SAAU,YACZ,EACA,SAAU,CACR,IAAK,oFACL,IAAK,2BACL,SAAU,YACZ,CACF,CACF,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,4FACT,CACF,CACF,CACF",
   "names": ["jsx", "ProductCompare", "meta", "Story", "productCompare_stories_default", "defaultData", "Default", "SellingPointTitle", "PrimaryTitle", "SecondaryTitle", "CenterAlign", "WithSubtitleImage", "TwoImagesEqualRatio", "ThreeImages", "DarkTheme", "CompleteExample"]
 }

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

@@ -1,5 +1,25 @@
+import React from 'react';
 import type { StoryObj } from '@storybook/react';
-declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
+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;