@anker-in/headless-ui 1.1.9-temp-120108 → 1.1.9-temp-120802

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/HeroBanner.stories.tsx"],
-  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n      endDate: '2025-11-15T03:32:00.000Z',\n      endDate_tz: 'America/Sao_Paulo',\n      dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPadImage: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithPlayButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: 'https://placehold.co/1920x930?text=1920x930',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: 'https://placehold.co/768x660?text=768x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: 'https://placehold.co/390x660?text=390x660',\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      playVideoButton: {\n        text: 'Shop Now',\n      },\n      videoConfig: {\n        videoUrl: 'https://cdn.shopify.com/videos/c/o/v/dc7f4359715b4da8a999f8e30a9a358b.mp4',\n        setVideoUrl: (v: string) => {\n          console.log('setVideoUrl', v)\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithPadImage", "WithPlayButton", "v"]
+  "sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport React from 'react'\nimport HeroBanner from '../biz-components/HeroBanner/HeroBanner.js'\n\nconst meta = {\n  title: 'Biz-Components/HeroBanner',\n  component: HeroBanner,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nHeroBanner \u7EC4\u4EF6\u7528\u4E8E\u5C55\u793A\u7F51\u7AD9\u7684\u4E3B\u8981\u5185\u5BB9\u533A\u57DF\uFF0C\u901A\u5E38\u5305\u542B\u6807\u9898\u3001\u526F\u6807\u9898\u548C\u884C\u52A8\u6309\u94AE\u3002\n\n### \u7279\u70B9\n- \u652F\u6301\u4EAE\u8272\u548C\u6697\u8272\u4E3B\u9898\n- \u4F7F\u7528 Mont For Anker \u5B57\u4F53\u4F5C\u4E3A\u6807\u9898\n- \u53EF\u914D\u7F6E\u4E3B\u6309\u94AE\u548C\u6B21\u8981\u6309\u94AE\n- \u53EF\u914D\u7F6E\u6A21\u5757\u8DF3\u8F6C\u94FE\u63A5\n- \u652F\u6301\u5E95\u90E8\u7279\u6027\u5217\u8868\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof HeroBanner>\n\nexport default meta\ntype Story = StoryObj<typeof HeroBanner>\n\nconst defaultBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst padBackground =\n  'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aee13b30b2c77fc8d0a46e4f19fa48cb_6a25debf-f95e-4ca6-990b-babcad65216c.png?v=1745468206'\n\nconst darkBackground =\n  'https://cdn.shopify.com/s/files/1/0517/6767/3016/files/87e32d61fc407d5e6c8aff00f3453072.jpg?v=1745999899'\n\nexport const LightTheme: Story = {\n  args: {\n    data: {\n      title: 'Anker Laptop Power',\n      subtitle: 'Anker Prime 240W GaN Desktop Charger (4 Ports)',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      blockLink: '/this-is-block-link',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/this-is-shop-now-link',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/this-is-learn-more-link',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n      endDate: '2025-11-15T03:32:00.000Z',\n      endDate_tz: 'America/Sao_Paulo',\n      dateFormat: '{\"day\":\"Day\",\"hour\":\"Hours\",\"minute\":\"Mins\",\"second\":\"Secs\"}',\n    },\n  },\n}\n\nexport const DarkTheme: Story = {\n  args: {\n    data: {\n      title: 'Power Your Life',\n      subtitle:\n        'Experience the next generation of charging technology with our innovative solutions designed for modern life.',\n      pcImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: darkBackground,\n        alt: 'dark background',\n        thumbnailURL: darkBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const MultiBanner = () => {\n  return (\n    <div className=\"flex flex-col\">\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...LightTheme!.args!.data, size: 'sm' }} />\n      {/* @ts-ignore */}\n      <HeroBanner data={{ ...DarkTheme!.args!.data, size: 'sm' }} className=\"mt-[8px]\" />\n    </div>\n  )\n}\n\nexport const WithoutSecondaryButton: Story = {\n  args: {\n    data: {\n      title: 'Future of Charging',\n      subtitle:\n        'Step into the future with our revolutionary charging solutions that redefine the way you power your devices.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'default background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Shop Now',\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n        { title: 'Anker Prime 27,650mAh Power Bank (250W)' },\n        { title: 'Anker Prime 240W GaN Desktop Charger (4 Ports)' },\n      ],\n    },\n  },\n}\n\nexport const WithVideoModal: Story = {\n  args: {\n    data: {\n      title: 'Experience Anker Innovation',\n      subtitle: 'Watch our latest product demo and discover the future of charging technology',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'tech background',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'tech background mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'dark',\n      primaryButton: {\n        text: 'Shop Now',\n        link: '/shop',\n      },\n      secondaryButton: {\n        text: 'Learn More',\n        link: '/learn-more',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch Demo',\n        playIcon: true,\n        videoUrl: {\n          url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n          alt: 'product demo video',\n          thumbnailURL: defaultBackground,\n          mimeType: 'video/mp4',\n        },\n      },\n      caption: [\n        { title: 'Anker Prime 240W GaN Desktop Charger' },\n        { title: 'Anker PowerCore 27,650mAh Power Bank' },\n        { title: 'Anker Wireless Charging Station' },\n      ],\n    },\n  },\n}\n\nexport const WithYoutubeVideo: Story = {\n  args: {\n    data: {\n      title: 'Anker Prime Series',\n      subtitle: 'See our Prime series in action. Experience the power that drives innovation.',\n      pcImage: {\n        url: defaultBackground,\n        alt: 'anker products',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      padImage: {\n        url: defaultBackground,\n        alt: 'anker products pad',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      mobileImage: {\n        url: defaultBackground,\n        alt: 'anker products mobile',\n        thumbnailURL: defaultBackground,\n        mimeType: 'image/jpeg',\n      },\n      theme: 'light',\n      primaryButton: {\n        text: 'Buy Now',\n        link: '/buy',\n      },\n      secondaryButton: {\n        text: 'Explore',\n        link: '/explore',\n        isShowPlayVideoButton: true,\n        playVideoButtonText: 'Watch on YouTube',\n        youtubeId: 'dQw4w9WgXcQ', // Example YouTube ID\n      },\n      caption: [\n        { title: 'Prime 240W Desktop Charger' },\n        { title: 'Prime 27,650mAh Power Bank' },\n        { title: 'Prime 100W Wireless Charger' },\n      ],\n    },\n  },\n}\n\nexport const ScrollableBackgroundVideo = () => {\n  return (\n    <div className=\"min-h-[500vh]\">\n      {/* \u7B2C\u4E00\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          theme: 'dark',\n          title: 'Powered by Innovation',\n          subtitle:\n            'Scroll down to test IntersectionObserver - videos play only when in viewport and restart from beginning each time.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'fallback background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'fallback background mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'background video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'background video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'First Video',\n            link: '/first',\n          },\n          secondaryButton: {\n            text: 'Learn More',\n            link: '/learn',\n          },\n          caption: [\n            { title: 'IntersectionObserver Controlled' },\n            { title: 'Auto Play on Viewport Entry' },\n            { title: 'Restart from Beginning' },\n          ],\n        }}\n      />\n\n      {/* \u4E2D\u95F4\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-gray-900 to-black py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">IntersectionObserver \u89C6\u9891\u63A7\u5236</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u667A\u80FD\u89C6\u9891\u64AD\u653E</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u89C6\u9891\u53EA\u5728\u8FDB\u5165\u89C6\u7A97\u65F6\u64AD\u653E\uFF0C\u79BB\u5F00\u89C6\u7A97\u65F6\u81EA\u52A8\u6682\u505C\u3002\u6BCF\u6B21\u91CD\u65B0\u8FDB\u5165\u89C6\u7A97\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u4E00\u81F4\u7684\u89C2\u770B\u4F53\u9A8C\u3002\u4F7F\u7528\n                IntersectionObserver API \u5B9E\u73B0\u7CBE\u51C6\u7684\u89C6\u7A97\u68C0\u6D4B\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u6027\u80FD\u4F18\u5316</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u6682\u505C\u64AD\u653E\uFF0C\u51CF\u5C11CPU\u548C\u5185\u5B58\u5360\u7528\u3002\u63D0\u524D50px\u5F00\u59CB\u68C0\u6D4B\uFF0C\n                \u786E\u4FDD\u89C6\u9891\u5728\u7528\u6237\u770B\u5230\u65F6\u5DF2\u7ECF\u51C6\u5907\u5C31\u7EEA\u3002threshold\u8BBE\u7F6E\u4E3A0.1\uFF0C\u5F5310%\u5143\u7D20\u53EF\u89C1\u65F6\u89E6\u53D1\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E8C\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Second Video Banner',\n          subtitle: 'This is the second video to test multiple banners with IntersectionObserver.',\n          pcImage: {\n            url: darkBackground,\n            alt: 'second banner background',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: darkBackground,\n            alt: 'second banner mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_2mb.mp4',\n            alt: 'second video desktop',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/8b833ba483e64ba5839f55c455d91f2c.mp4',\n            alt: 'second video tablet',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://sample-videos.com/zip/10/mp4/SampleVideo_640x360_1mb.mp4',\n            alt: 'second video mobile',\n            thumbnailURL: darkBackground,\n            mimeType: 'video/mp4',\n          },\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Second Video',\n            link: '/second',\n          },\n          secondaryButton: {\n            text: 'Explore More',\n            link: '/explore',\n          },\n          caption: [\n            { title: 'Independent Video Control' },\n            { title: 'Pause When Out of View' },\n            { title: 'Resource Efficient' },\n          ],\n        }}\n      />\n\n      {/* \u66F4\u591A\u95F4\u9694\u5185\u5BB9 */}\n      <div className=\"bg-gradient-to-b from-black to-gray-900 py-20 text-white\">\n        <div className=\"container mx-auto max-w-4xl px-4\">\n          <h2 className=\"mb-8 text-center text-4xl font-bold\">\u591A\u89C6\u9891\u7BA1\u7406</h2>\n          <div className=\"space-y-8\">\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u72EC\u7ACB\u63A7\u5236</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6BCF\u4E2A\u89C6\u9891banner\u90FD\u6709\u72EC\u7ACB\u7684IntersectionObserver\uFF0C\u4E92\u4E0D\u5E72\u6270\u3002\n                \u5F53\u4E00\u4E2A\u89C6\u9891\u64AD\u653E\u65F6\uFF0C\u5176\u4ED6\u4E0D\u5728\u89C6\u7A97\u5185\u7684\u89C6\u9891\u4F1A\u4FDD\u6301\u6682\u505C\u72B6\u6001\u3002\n              </p>\n            </div>\n\n            <div className=\"rounded-lg bg-gray-800 p-8\">\n              <h3 className=\"mb-4 text-2xl font-semibold\">\u7528\u6237\u4F53\u9A8C</h3>\n              <p className=\"leading-relaxed text-gray-300\">\n                \u6EDA\u52A8\u65F6\u7528\u6237\u770B\u5230\u7684\u6BCF\u4E2A\u89C6\u9891\u90FD\u4F1A\u4ECE\u5934\u5F00\u59CB\u64AD\u653E\uFF0C\u63D0\u4F9B\u5B8C\u6574\u7684\u89C2\u770B\u4F53\u9A8C\u3002\n                \u79BB\u5F00\u89C6\u7A97\u65F6\u6682\u505C\u53EF\u4EE5\u8282\u7701\u8BBE\u5907\u8D44\u6E90\u548C\u7F51\u7EDC\u6D41\u91CF\u3002\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      {/* \u7B2C\u4E09\u4E2A\u89C6\u9891 Banner */}\n      <HeroBanner\n        data={{\n          title: 'Third Video Experience',\n          subtitle: 'Final banner to demonstrate seamless video management across multiple sections.',\n          pcImage: {\n            url: defaultBackground,\n            alt: 'third banner background',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          mobileImage: {\n            url: defaultBackground,\n            alt: 'third banner mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'image/jpeg',\n          },\n          pcVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video desktop',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          padVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/c84b5ba3176f47a79d843d334812d645.mp4',\n            alt: 'third video tablet',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          mobileVideo: {\n            url: 'https://cdn.shopify.com/videos/c/o/v/50981dfe2910408fa76436ca394cbc6f.mp4',\n            alt: 'third video mobile',\n            thumbnailURL: defaultBackground,\n            mimeType: 'video/mp4',\n          },\n          theme: 'dark',\n          isShowVideo: true,\n          primaryButton: {\n            text: 'Third Video',\n            link: '/third',\n          },\n          secondaryButton: {\n            text: 'Complete Test',\n            link: '/complete',\n          },\n          caption: [\n            { title: 'Seamless Performance' },\n            { title: 'Multiple Video Management' },\n            { title: 'Optimized for All Devices' },\n          ],\n        }}\n      />\n\n      {/* \u5E95\u90E8\u603B\u7ED3\u5185\u5BB9 */}\n      <div className=\"bg-black py-20 text-white\">\n        <div className=\"container mx-auto px-4 text-center\">\n          <h2 className=\"mb-4 text-3xl font-bold\">IntersectionObserver \u6D4B\u8BD5\u5B8C\u6210</h2>\n          <p className=\"mb-8 text-gray-400\">\u6EDA\u52A8\u56DE\u9876\u90E8\u518D\u6B21\u6D4B\u8BD5\u89C6\u9891\u8FDB\u5165\u548C\u79BB\u5F00\u89C6\u7A97\u7684\u6548\u679C</p>\n          <div className=\"mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3\">\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u667A\u80FD\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u8FDB\u5165\u89C6\u7A97\u81EA\u52A8\u64AD\u653E\uFF0C\u79BB\u5F00\u81EA\u52A8\u6682\u505C</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u4ECE\u5934\u64AD\u653E</h4>\n              <p className=\"text-sm text-gray-400\">\u6BCF\u6B21\u8FDB\u5165\u89C6\u7A97\u90FD\u4ECE\u89C6\u9891\u5F00\u5934\u5F00\u59CB</p>\n            </div>\n            <div className=\"rounded border border-gray-700 p-6\">\n              <h4 className=\"mb-2 text-lg font-semibold\">\u6027\u80FD\u4F18\u5316</h4>\n              <p className=\"text-sm text-gray-400\">\u591A\u89C6\u9891\u72EC\u7ACB\u63A7\u5236\uFF0C\u8D44\u6E90\u9AD8\u6548\u5229\u7528</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "HeroBanner", "meta", "HeroBanner_stories_default", "defaultBackground", "padBackground", "darkBackground", "LightTheme", "DarkTheme", "MultiBanner", "WithoutSecondaryButton", "WithVideoModal", "WithYoutubeVideo", "ScrollableBackgroundVideo"]
 }

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

@@ -1,15 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/AccordionCards/index.js").AccordionCardsType & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }, "ref"> & import("react").RefAttributes<any>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,27 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & import("class-variance-authority").VariantProps<(props?: ({
-        variant?: "default" | "destructive" | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
-        status?: "success" | "error" | "warning" | "info";
-        closable?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    subcomponents: {
-        AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
-        AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-    };
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,38 +1,5 @@
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<{
-        asChild?: boolean;
-        className?: string;
-        style?: React.CSSProperties;
-        onClick?: Function;
-        isAdaptation?: boolean;
-        minSize?: number;
-        maxSize?: number;
-        textClassName?: string;
-    } & import("class-variance-authority").VariantProps<(props?: ({
-        size?: "small" | "medium" | "large" | null | undefined;
-    } & import("class-variance-authority/types").ClassProp) | undefined) => string> & Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
-    tags: string[];
-    subcomponents: any;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    argTypes: {
-        size: {
-            description: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-    };
-};
+/// <reference types="react" />
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const AvatarType: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,30 +1,6 @@
 import type { StoryObj } from '@storybook/react';
-import { Badge } from '../components/index.js';
-declare const meta: {
-    title: string;
-    component: typeof Badge;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-    };
-    args: {
-        size: "lg";
-    };
-};
+import React from 'react';
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,15 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/BrandEquity/types.js").BrandEquityProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }, "ref"> & import("react").RefAttributes<any>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,49 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../components/button.js").ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-    argTypes: {
-        variant: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        hoverEffect: {
-            description: string;
-            control: {
-                type: "select";
-            };
-            options: string[];
-        };
-    };
-    args: {
-        variant: "primary";
-        size: "base";
-        children: string;
-        disabled: false;
-        loading: false;
-        hoverEffect: "none";
-    };
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;

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

@@ -1,25 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    subcomponents: {
-        CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-        CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-        CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-        CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-        CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    };
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,15 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("../biz-components/Category/index.js").CategoryProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../shared/Styles.js").StylesProps> & Partial<import("../shared/Styles.js").StylesProps & import("../shared/Styles.js").ContainerProps> & {
-        className?: string;
-        data?: Record<string, any>;
-    }, "ref"> & import("react").RefAttributes<any>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,35 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../components/checkbox.js").CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-    argTypes: {
-        size: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-    };
-    args: {
-        size: "base";
-    };
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,26 +1,5 @@
 import React from 'react';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<{
-        asChild?: boolean;
-        children?: React.ReactNode;
-        className?: string;
-        childClassName?: string;
-        spaceY?: import("../types/props.js").SpaceY;
-        spaceTop?: import("../types/props.js").SpaceTop;
-        spaceBottom?: import("../types/props.js").SpaceBottom;
-        mode?: import("../types/props.js").Mode;
-    } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithPaddingAndBackground: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/stories/container.stories.js

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import"react";import{Container as t}from"../components/index.js";import"../helpers/utils.js";const o={title:"Layout/Container",component:t,parameters:{layout:"fullscreen",docs:{description:{component:`
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import"react";import{Container as t}from"../components/index.js";const o={title:"Layout/Container",component:t,parameters:{layout:"fullscreen",docs:{description:{component:`
 Container \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002
 
 ### \u5B9E\u73B0\u7EC6\u8282
@@ -11,5 +11,5 @@ Container \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u67
   - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)
   - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)
 
-        `}}},tags:["autodocs"]};var i=o;const m=()=>e(t,{className:"p-4",children:e("div",{className:"rounded-lg bg-blue-100 p-4 text-center",children:"\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6"})}),n=()=>e(t,{className:"bg-gray-50 p-4",children:a("div",{className:"space-y-4",children:[a("div",{className:"rounded-lg bg-white p-4 shadow-sm",children:[e("h3",{className:"text-lg font-medium",children:"\u5185\u5BB9\u533A\u5757 1"}),e("p",{className:"text-gray-600",children:"\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B"})]}),a("div",{className:"rounded-lg bg-white p-4 shadow-sm",children:[e("h3",{className:"text-lg font-medium",children:"\u5185\u5BB9\u533A\u5757 2"}),e("p",{className:"text-gray-600",children:"\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F"})]})]})}),c=()=>e(t,{className:"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4",children:a("div",{className:"rounded-lg bg-white p-4 shadow-sm",children:[e("h3",{className:"text-lg font-medium",children:"\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD"}),a("p",{className:"text-gray-600",children:["\u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A",e("br",{}),"\u9ED8\u8BA4: px-4 (16px)",e("br",{}),"tablet: px-6 (24px)",e("br",{}),"laptop: px-8 (32px)"]})]})}),g=()=>a(t,{className:"p-4",children:[e("header",{className:"rounded-t-lg bg-gray-800 p-4 text-white",children:e("h2",{className:"text-xl",children:"\u9875\u9762\u6807\u9898"})}),a("main",{className:"border-x border-gray-200 bg-white p-4",children:[e("p",{className:"mb-4 text-gray-600",children:"\u4E3B\u8981\u5185\u5BB9\u533A\u57DF"}),a("div",{className:"laptop:grid-cols-2 grid grid-cols-1 gap-4",children:[e("div",{className:"rounded bg-blue-50 p-4",children:"\u5185\u5BB9\u5757 1"}),e("div",{className:"rounded bg-purple-50 p-4",children:"\u5185\u5BB9\u5757 2"})]})]}),e("footer",{className:"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4",children:e("p",{className:"text-sm text-gray-500",children:"\u9875\u811A\u5185\u5BB9"})})]});export{m as Basic,g as NestedContent,c as ResponsivePadding,n as WithPaddingAndBackground,i as default};
+        `}}},tags:["autodocs"]};var d=o;const l=()=>e(t,{className:"p-4",children:e("div",{className:"rounded-lg bg-blue-100 p-4 text-center",children:"\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6"})}),i=()=>e(t,{className:"bg-gray-50 p-4",children:a("div",{className:"space-y-4",children:[a("div",{className:"rounded-lg bg-white p-4 shadow-sm",children:[e("h3",{className:"text-lg font-medium",children:"\u5185\u5BB9\u533A\u5757 1"}),e("p",{className:"text-gray-600",children:"\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B"})]}),a("div",{className:"rounded-lg bg-white p-4 shadow-sm",children:[e("h3",{className:"text-lg font-medium",children:"\u5185\u5BB9\u533A\u5757 2"}),e("p",{className:"text-gray-600",children:"\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F"})]})]})}),m=()=>e(t,{className:"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4",children:a("div",{className:"rounded-lg bg-white p-4 shadow-sm",children:[e("h3",{className:"text-lg font-medium",children:"\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD"}),a("p",{className:"text-gray-600",children:["\u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A",e("br",{}),"\u9ED8\u8BA4: px-4 (16px)",e("br",{}),"tablet: px-6 (24px)",e("br",{}),"laptop: px-8 (32px)"]})]})}),n=()=>a(t,{className:"p-4",children:[e("header",{className:"rounded-t-lg bg-gray-800 p-4 text-white",children:e("h2",{className:"text-xl",children:"\u9875\u9762\u6807\u9898"})}),a("main",{className:"border-x border-gray-200 bg-white p-4",children:[e("p",{className:"mb-4 text-gray-600",children:"\u4E3B\u8981\u5185\u5BB9\u533A\u57DF"}),a("div",{className:"laptop:grid-cols-2 grid grid-cols-1 gap-4",children:[e("div",{className:"rounded bg-blue-50 p-4",children:"\u5185\u5BB9\u5757 1"}),e("div",{className:"rounded bg-purple-50 p-4",children:"\u5185\u5BB9\u5757 2"})]})]}),e("footer",{className:"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4",children:e("p",{className:"text-sm text-gray-500",children:"\u9875\u811A\u5185\u5BB9"})})]});export{l as Basic,n as NestedContent,m as ResponsivePadding,i as WithPaddingAndBackground,d as default};
 //# sourceMappingURL=container.stories.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/stories/container.stories.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport { cn } from '../helpers/utils.js'\n\nconst meta = {\n  title: 'Layout/Container',\n  component: Container,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nContainer \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- \u57FA\u4E8E Tailwind CSS \u5B9E\u73B0\n- \u9ED8\u8BA4\u6700\u5927\u5BBD\u5EA6\u4E3A 1664px\n- \u54CD\u5E94\u5F0F\u8FB9\u8DDD\u8BBE\u8BA1\uFF1A\n  - \u9ED8\u8BA4: \u5DE6\u53F3\u8FB9\u8DDD 16px (mx-4)\n  - tablet: \u5DE6\u53F3\u8FB9\u8DDD 32px (mx-8)\n  - laptop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)\n\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Container>\n\nexport default meta\n\ntype Story = StoryObj<typeof Container>\n\n// \u57FA\u7840\u793A\u4F8B\nexport const Basic = () => (\n  <Container className=\"p-4\">\n    <div className=\"rounded-lg bg-blue-100 p-4 text-center\">\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6</div>\n  </Container>\n)\n\n// \u5E26\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\nexport const WithPaddingAndBackground = () => (\n  <Container className=\"bg-gray-50 p-4\">\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 1</h3>\n        <p className=\"text-gray-600\">\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B</p>\n      </div>\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 2</h3>\n        <p className=\"text-gray-600\">\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F</p>\n      </div>\n    </div>\n  </Container>\n)\n\n// \u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD\nexport const ResponsivePadding = () => (\n  <Container className=\"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4\">\n    <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n      <h3 className=\"text-lg font-medium\">\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD</h3>\n      <p className=\"text-gray-600\">\n        \u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A\n        <br />\n        \u9ED8\u8BA4: px-4 (16px)\n        <br />\n        tablet: px-6 (24px)\n        <br />\n        laptop: px-8 (32px)\n      </p>\n    </div>\n  </Container>\n)\n\n// \u5D4C\u5957\u5185\u5BB9\u793A\u4F8B\nexport const NestedContent = () => (\n  <Container className=\"p-4\">\n    <header className=\"rounded-t-lg bg-gray-800 p-4 text-white\">\n      <h2 className=\"text-xl\">\u9875\u9762\u6807\u9898</h2>\n    </header>\n    <main className=\"border-x border-gray-200 bg-white p-4\">\n      <p className=\"mb-4 text-gray-600\">\u4E3B\u8981\u5185\u5BB9\u533A\u57DF</p>\n      <div className=\"laptop:grid-cols-2 grid grid-cols-1 gap-4\">\n        <div className=\"rounded bg-blue-50 p-4\">\u5185\u5BB9\u5757 1</div>\n        <div className=\"rounded bg-purple-50 p-4\">\u5185\u5BB9\u5757 2</div>\n      </div>\n    </main>\n    <footer className=\"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4\">\n      <p className=\"text-sm text-gray-500\">\u9875\u811A\u5185\u5BB9</p>\n    </footer>\n  </Container>\n)\n"],
-  "mappings": "AAuCI,cAAAA,EAQE,QAAAC,MARF,oBAvCJ,MAAkB,QAClB,OAAS,aAAAC,MAAiB,yBAE1B,MAAmB,sBAEnB,MAAMC,EAAO,CACX,MAAO,mBACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAKR,MAAME,EAAQ,IACnBL,EAACE,EAAA,CAAU,UAAU,MACnB,SAAAF,EAAC,OAAI,UAAU,yCAAyC,mGAAiB,EAC3E,EAIWM,EAA2B,IACtCN,EAACE,EAAA,CAAU,UAAU,iBACnB,SAAAD,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,MAAG,UAAU,sBAAsB,sCAAM,EAC1CA,EAAC,KAAE,UAAU,gBAAgB,gGAAc,GAC7C,EACAC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,MAAG,UAAU,sBAAsB,sCAAM,EAC1CA,EAAC,KAAE,UAAU,gBAAgB,kEAAS,GACxC,GACF,EACF,EAIWO,EAAoB,IAC/BP,EAACE,EAAA,CAAU,UAAU,yEACnB,SAAAD,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,MAAG,UAAU,sBAAsB,gDAAM,EAC1CC,EAAC,KAAE,UAAU,gBAAgB,yHAE3BD,EAAC,OAAG,EAAE,4BAENA,EAAC,OAAG,EAAE,sBAENA,EAAC,OAAG,EAAE,uBAER,GACF,EACF,EAIWQ,EAAgB,IAC3BP,EAACC,EAAA,CAAU,UAAU,MACnB,UAAAF,EAAC,UAAO,UAAU,0CAChB,SAAAA,EAAC,MAAG,UAAU,UAAU,oCAAI,EAC9B,EACAC,EAAC,QAAK,UAAU,wCACd,UAAAD,EAAC,KAAE,UAAU,qBAAqB,gDAAM,EACxCC,EAAC,OAAI,UAAU,4CACb,UAAAD,EAAC,OAAI,UAAU,yBAAyB,gCAAK,EAC7CA,EAAC,OAAI,UAAU,2BAA2B,gCAAK,GACjD,GACF,EACAA,EAAC,UAAO,UAAU,iEAChB,SAAAA,EAAC,KAAE,UAAU,wBAAwB,oCAAI,EAC3C,GACF",
+  "sourcesContent": ["import React from 'react'\nimport { Container } from '../components/index.js'\nimport type { Meta, StoryObj } from '@storybook/react'\n\nconst meta = {\n  title: 'Layout/Container',\n  component: Container,\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      description: {\n        component: `\nContainer \u5BB9\u5668\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u9650\u5236\u548C\u7EA6\u675F\u5185\u5BB9\u7684\u6700\u5927\u5BBD\u5EA6\uFF0C\u5B9E\u73B0\u54CD\u5E94\u5F0F\u7684\u9875\u9762\u5E03\u5C40\u3002\n\n### \u5B9E\u73B0\u7EC6\u8282\n- \u57FA\u4E8E Tailwind CSS \u5B9E\u73B0\n- \u9ED8\u8BA4\u6700\u5927\u5BBD\u5EA6\u4E3A 1664px\n- \u54CD\u5E94\u5F0F\u8FB9\u8DDD\u8BBE\u8BA1\uFF1A\n  - \u9ED8\u8BA4: \u5DE6\u53F3\u8FB9\u8DDD 16px (mx-4)\n  - tablet: \u5DE6\u53F3\u8FB9\u8DDD 32px (mx-8)\n  - laptop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - desktop: \u5DE6\u53F3\u8FB9\u8DDD 64px (mx-16)\n  - lg-desktop: \u5DE6\u53F3\u8FB9\u8DDD 128px (mx-32)\n\n        `,\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof Container>\n\nexport default meta\n\ntype Story = StoryObj<typeof Container>\n\n// \u57FA\u7840\u793A\u4F8B\nexport const Basic = () => (\n  <Container className=\"p-4\">\n    <div className=\"rounded-lg bg-blue-100 p-4 text-center\">\u57FA\u7840\u5BB9\u5668 - \u81EA\u52A8\u5C45\u4E2D\uFF0C\u54CD\u5E94\u5F0F\u5BBD\u5EA6</div>\n  </Container>\n)\n\n// \u5E26\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\nexport const WithPaddingAndBackground = () => (\n  <Container className=\"bg-gray-50 p-4\">\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 1</h3>\n        <p className=\"text-gray-600\">\u5E26\u6709\u5185\u8FB9\u8DDD\u548C\u80CC\u666F\u8272\u7684\u5BB9\u5668\u793A\u4F8B</p>\n      </div>\n      <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n        <h3 className=\"text-lg font-medium\">\u5185\u5BB9\u533A\u5757 2</h3>\n        <p className=\"text-gray-600\">\u5C55\u793A\u5185\u5BB9\u7684\u7EC4\u7EC7\u65B9\u5F0F</p>\n      </div>\n    </div>\n  </Container>\n)\n\n// \u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD\nexport const ResponsivePadding = () => (\n  <Container className=\"tablet:px-6 laptop:px-8 bg-gradient-to-r from-blue-50 to-purple-50 p-4\">\n    <div className=\"rounded-lg bg-white p-4 shadow-sm\">\n      <h3 className=\"text-lg font-medium\">\u54CD\u5E94\u5F0F\u5185\u8FB9\u8DDD</h3>\n      <p className=\"text-gray-600\">\n        \u5728\u4E0D\u540C\u5C4F\u5E55\u5C3A\u5BF8\u4E0B\u6709\u4E0D\u540C\u7684\u6C34\u5E73\u5185\u8FB9\u8DDD\uFF1A\n        <br />\n        \u9ED8\u8BA4: px-4 (16px)\n        <br />\n        tablet: px-6 (24px)\n        <br />\n        laptop: px-8 (32px)\n      </p>\n    </div>\n  </Container>\n)\n\n// \u5D4C\u5957\u5185\u5BB9\u793A\u4F8B\nexport const NestedContent = () => (\n  <Container className=\"p-4\">\n    <header className=\"rounded-t-lg bg-gray-800 p-4 text-white\">\n      <h2 className=\"text-xl\">\u9875\u9762\u6807\u9898</h2>\n    </header>\n    <main className=\"border-x border-gray-200 bg-white p-4\">\n      <p className=\"mb-4 text-gray-600\">\u4E3B\u8981\u5185\u5BB9\u533A\u57DF</p>\n      <div className=\"laptop:grid-cols-2 grid grid-cols-1 gap-4\">\n        <div className=\"rounded bg-blue-50 p-4\">\u5185\u5BB9\u5757 1</div>\n        <div className=\"rounded bg-purple-50 p-4\">\u5185\u5BB9\u5757 2</div>\n      </div>\n    </main>\n    <footer className=\"rounded-b-lg border-x border-b border-gray-200 bg-gray-100 p-4\">\n      <p className=\"text-sm text-gray-500\">\u9875\u811A\u5185\u5BB9</p>\n    </footer>\n  </Container>\n)\n"],
+  "mappings": "AAsCI,cAAAA,EAQE,QAAAC,MARF,oBAtCJ,MAAkB,QAClB,OAAS,aAAAC,MAAiB,yBAG1B,MAAMC,EAAO,CACX,MAAO,mBACP,UAAWD,EACX,WAAY,CACV,OAAQ,aACR,KAAM,CACJ,YAAa,CACX,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAcb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAKR,MAAME,EAAQ,IACnBL,EAACE,EAAA,CAAU,UAAU,MACnB,SAAAF,EAAC,OAAI,UAAU,yCAAyC,mGAAiB,EAC3E,EAIWM,EAA2B,IACtCN,EAACE,EAAA,CAAU,UAAU,iBACnB,SAAAD,EAAC,OAAI,UAAU,YACb,UAAAA,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,MAAG,UAAU,sBAAsB,sCAAM,EAC1CA,EAAC,KAAE,UAAU,gBAAgB,gGAAc,GAC7C,EACAC,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,MAAG,UAAU,sBAAsB,sCAAM,EAC1CA,EAAC,KAAE,UAAU,gBAAgB,kEAAS,GACxC,GACF,EACF,EAIWO,EAAoB,IAC/BP,EAACE,EAAA,CAAU,UAAU,yEACnB,SAAAD,EAAC,OAAI,UAAU,oCACb,UAAAD,EAAC,MAAG,UAAU,sBAAsB,gDAAM,EAC1CC,EAAC,KAAE,UAAU,gBAAgB,yHAE3BD,EAAC,OAAG,EAAE,4BAENA,EAAC,OAAG,EAAE,sBAENA,EAAC,OAAG,EAAE,uBAER,GACF,EACF,EAIWQ,EAAgB,IAC3BP,EAACC,EAAA,CAAU,UAAU,MACnB,UAAAF,EAAC,UAAO,UAAU,0CAChB,SAAAA,EAAC,MAAG,UAAU,UAAU,oCAAI,EAC9B,EACAC,EAAC,QAAK,UAAU,wCACd,UAAAD,EAAC,KAAE,UAAU,qBAAqB,gDAAM,EACxCC,EAAC,OAAI,UAAU,4CACb,UAAAD,EAAC,OAAI,UAAU,yBAAyB,gCAAK,EAC7CA,EAAC,OAAI,UAAU,2BAA2B,gCAAK,GACjD,GACF,EACAA,EAAC,UAAO,UAAU,iEAChB,SAAAA,EAAC,KAAE,UAAU,wBAAwB,oCAAI,EAC3C,GACF",
   "names": ["jsx", "jsxs", "Container", "meta", "container_stories_default", "Basic", "WithPaddingAndBackground", "ResponsivePadding", "NestedContent"]
 }

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

@@ -1,14 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: (props: import("../cpn-components/CpnBanner/types.js").BannerProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,12 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: (props: import("../cpn-components/CpnCountDown/types.js").CountDownProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,14 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: (props: import("../cpn-components/CpnNavigation/types.js").NavigationProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,14 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: (props: import("../cpn-components/CpnProductCard/types.js").ProductCardProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,14 +1,6 @@
+/// <reference types="react" />
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: (props: import("../cpn-components/CpnTitle/types.js").TitleProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

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

@@ -1,19 +1,4 @@
-declare const meta: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Omit<{
-        data: {
-            shape?: "rounded" | "square";
-            productsTab: import("../biz-components/CreativeModule/index.js").CreativeModuleDataType[];
-        };
-        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;
-    };
-};
+/// <reference types="react" />
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, import("react").ComponentProps<TCmpOrArgs>>;
 export default meta;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,7 @@
 import React from 'react';
 import { Dialog } from '../components/index.js';
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: React.FC<import("@radix-ui/react-dialog").DialogProps>;
-    subcomponents: any;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof Dialog>;
 export declare const Default: Story;

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

@@ -1,19 +1,7 @@
+import React from 'react';
 import { Drawer } from '../components/index.js';
 import type { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: typeof Drawer;
-    subcomponents: any;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-};
+declare const meta: ComponentAnnotations<import("@storybook/react").ReactRenderer, React.ComponentProps<TCmpOrArgs>>;
 export default meta;
 type Story = StoryObj<typeof Drawer>;
 export declare const Default: Story;