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

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

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

package/dist/cjs/stories/productCompare.stories.js

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<{
+        data: {
+            list: import("../biz-components/SelectStore/index.js").SelectStoreDataType[];
+        };
+        className?: string;
+    }, 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>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/stories/selectstore.stories.js

@@ -0,0 +1,2 @@
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var s in e)l(t,s,{get:e[s],enumerable:!0})},d=(t,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of n(e))!g.call(t,i)&&i!==s&&l(t,i,{get:()=>e[i],enumerable:!(o=m(e,i))||o.enumerable});return t};var f=t=>d(l({},"__esModule",{value:!0}),t);var y={};p(y,{Default:()=>h,default:()=>u});module.exports=f(y);var r=require("react/jsx-runtime"),a=require("../biz-components/index.js");const c={title:"Biz-Components/SelectStore",component:a.SelectStore,tags:["autodocs"],parameters:{layout:"centered"}};var u=c;const v={list:[{title:"Ultra-Long Playtime:",desc:"Rich and secure payment methods, fast and secure materials",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},mobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},padImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},miniImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"}},{title:"Delivery Method",desc:"Fast and secure delivery",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},mobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},padImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},miniImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"}},{title:"Service and Benefits",desc:"Fast and secure delivery",img:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},mobileImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},padImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"},miniImg:{url:"https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055",alt:"Creative Module"}}]},h=()=>(0,r.jsx)(a.SelectStore,{data:v});
+//# sourceMappingURL=selectstore.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/selectstore.stories.tsx"],
+  "sourcesContent": ["import type { Meta } from '@storybook/react'\nimport { SelectStore } from '../biz-components/index.js'\n\nconst meta = {\n  title: 'Biz-Components/SelectStore',\n  component: SelectStore,\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'centered',\n  },\n} satisfies Meta<typeof SelectStore>\n\nexport default meta\n\nconst data = {\n  list: [\n    {\n      title: 'Ultra-Long Playtime:',\n      desc: 'Rich and secure payment methods, fast and secure materials',\n      img: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      mobileImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      padImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      miniImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n    },\n    {\n      title: 'Delivery Method',\n      desc: 'Fast and secure delivery',\n      img: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      mobileImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      padImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      miniImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n    },\n    {\n      title: 'Service and Benefits',\n      desc: 'Fast and secure delivery',\n      img: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      mobileImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      padImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n      miniImg: {\n        url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n        alt: 'Creative Module',\n      },\n    },\n  ],\n} as {\n  list: {\n    title: string\n    desc: string\n    img: {\n      url: string\n      alt: string\n    }\n    mobileImg: {\n      url: string\n      alt: string\n    }\n    padImg: {\n      url: string\n      alt: string\n    }\n    miniImg: {\n      url: string\n      alt: string\n    }\n  }[]\n}\n\nexport const Default = () => <SelectStore data={data} />\n\n// list: [\n//     {\n//       title: 'Ultra-Long Playtime:',\n//       desc: 'Rich and secure payment methods, fast and secure materials',\n//       pay: [\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         }\n//       ],\n//       delivery: [\n//       ],\n//       service: []\n//     },\n//     {\n//       title: 'Delivery Method',\n//       desc: 'Fast and secure delivery',\n//       pay: [\n        \n//       ],\n//       service: [\n//       ],\n//       delivery: [\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/american-express-png-transparent-image_1.png?v=1758617366',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/image_1750.png?v=1758613055',\n//             alt: 'Creative Module',\n//           },\n//         },\n//       ],\n//     },\n//     {\n//       title: 'Service and Benefits',\n//       desc: 'Fast and secure delivery',\n//       pay: [\n//       ],\n//       delivery: [\n//       ],\n//       service: [\n//         {\n//           title: 'Fast, Free Shipping',\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121237171.png?v=1758620303',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           title: '30-Day Money-Back Guarantee',\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121237171.png?v=1758620303',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           title: 'Hassle-Free Warranty',\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121237171.png?v=1758620303',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           title: 'Lifetime Customer Support',\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121237171.png?v=1758620303',\n//             alt: 'Creative Module',\n//           },\n//         },\n//         {\n//           title: 'Lifetime Customer Support',\n//           img: {\n//             url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/Frame_2121237171.png?v=1758620303',\n//             alt: 'Creative Module',\n//           },\n//         }\n//       ],\n//     },\n//   ],"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAoG6B,IAAAK,EAAA,6BAnG7BC,EAA4B,sCAE5B,MAAMC,EAAO,CACX,MAAO,6BACP,UAAW,cACX,KAAM,CAAC,UAAU,EACjB,WAAY,CACV,OAAQ,UACV,CACF,EAEA,IAAOJ,EAAQI,EAEf,MAAMC,EAAO,CACX,KAAM,CACJ,CACE,MAAO,uBACP,KAAM,6DACN,IAAK,CACH,IAAK,qFACL,IAAK,iBACP,EACA,UAAW,CACT,IAAK,qFACL,IAAK,iBACP,EACA,OAAQ,CACN,IAAK,qFACL,IAAK,iBACP,EACA,QAAS,CACP,IAAK,qFACL,IAAK,iBACP,CACF,EACA,CACE,MAAO,kBACP,KAAM,2BACN,IAAK,CACH,IAAK,qFACL,IAAK,iBACP,EACA,UAAW,CACT,IAAK,qFACL,IAAK,iBACP,EACA,OAAQ,CACN,IAAK,qFACL,IAAK,iBACP,EACA,QAAS,CACP,IAAK,qFACL,IAAK,iBACP,CACF,EACA,CACE,MAAO,uBACP,KAAM,2BACN,IAAK,CACH,IAAK,qFACL,IAAK,iBACP,EACA,UAAW,CACT,IAAK,qFACL,IAAK,iBACP,EACA,OAAQ,CACN,IAAK,qFACL,IAAK,iBACP,EACA,QAAS,CACP,IAAK,qFACL,IAAK,iBACP,CACF,CACF,CACF,EAuBaN,EAAU,OAAM,OAAC,eAAY,KAAMM,EAAM",
+  "names": ["selectstore_stories_exports", "__export", "Default", "selectstore_stories_default", "__toCommonJS", "import_jsx_runtime", "import_biz_components", "meta", "data"]
+}

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

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: {
+        (props: Omit<import("../biz-components/Shelf/types.js").ShelfProps, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps> & {
+            className?: string;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

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

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

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

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

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

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

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