@anker-in/headless-ui 1.1.9-alpha.1764084619241 → 1.1.9-alpha.1764141671439

package/dist/esm/stories/videoFeature.stories.js

@@ -0,0 +1,56 @@
+import"react";import o from"../biz-components/VideoFeature/index.js";const a={title:"Biz Components/VideoFeature",component:o,parameters:{layout:"padded",backgrounds:{default:"dark"},docs:{description:{component:"\u89C6\u9891\u7279\u6027\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u4EA7\u54C1\u89C6\u9891\u548C\u63CF\u8FF0\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD"}}},tags:["autodocs"]};var r=a;const e={title:"DuoSpiral\u2122 Detangle Brushes",poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobPoster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobvideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}},d={args:{data:e}},p={args:{data:{title:"DuoSpiral\u2122 Detangle Brushes",poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"DuoSpiral\u2122 Detangle Brushes",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"},mobPoster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",alt:"DuoSpiral\u2122 Detangle Brushes Mobile",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"image/png"},mobvideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811",mimeType:"video/mp4"}}}},f={args:{data:{title:"Advanced Cleaning Technology",subtitle:"Experience powerful cleaning with our latest innovation.",poster:{url:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",alt:"Advanced Cleaning Technology",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"image/png"},video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"Advanced Cleaning Technology Video",thumbnailURL:"https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806",mimeType:"video/mp4"}}}},l={args:{data:{title:"DuoSpiral\u2122 Detangle Brushes",subtitle:"DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.",video:{url:"https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Video",thumbnailURL:"",mimeType:"video/mp4"},mobvideo:{url:"https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4",alt:"DuoSpiral\u2122 Detangle Brushes Mobile Video",thumbnailURL:"",mimeType:"video/mp4"}}}},n={args:{data:e,className:"custom-video-feature"},parameters:{docs:{description:{story:`
+\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236:
+
+**\u6839\u5143\u7D20:**
+- \`.video-feature\` - \u7EC4\u4EF6\u6839\u5BB9\u5668
+
+**\u6807\u9898\u533A\u57DF:**
+- \`.video-feature__title\` - \u4E3B\u6807\u9898
+- \`.video-feature__subtitle\` - \u526F\u6807\u9898
+
+**\u89C6\u9891\u533A\u57DF:**
+- \`.video-feature__video-wrapper\` - \u89C6\u9891\u5916\u5C42\u5BB9\u5668
+- \`.video-feature__desktop-video-container\` - \u684C\u9762\u7AEF\u89C6\u9891\u5BB9\u5668
+- \`.video-feature__mobile-video-container\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u5BB9\u5668
+- \`.video-feature__video\` - \u89C6\u9891\u5143\u7D20
+- \`.video-feature__video--desktop\` - \u684C\u9762\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26
+- \`.video-feature__video--mobile\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26
+
+**\u793A\u4F8B CSS \u7528\u6CD5:**
+\`\`\`css
+/* \u81EA\u5B9A\u4E49\u6839\u5BB9\u5668\u80CC\u666F */
+.video-feature {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 48px;
+}
+
+/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */
+.video-feature__title {
+  color: #fbbf24;
+  font-weight: 800;
+}
+
+/* \u81EA\u5B9A\u4E49\u526F\u6807\u9898\u6837\u5F0F */
+.video-feature__subtitle {
+  color: #e5e7eb;
+  opacity: 0.9;
+}
+
+/* \u81EA\u5B9A\u4E49\u89C6\u9891\u5BB9\u5668\u9634\u5F71 */
+.video-feature__video-wrapper {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+/* \u81EA\u5B9A\u4E49\u89C6\u9891\u60AC\u505C\u6548\u679C */
+.video-feature__video:hover {
+  transform: scale(1.02);
+  transition: transform 0.3s ease;
+}
+
+/* \u81EA\u5B9A\u4E49\u684C\u9762\u7AEF\u89C6\u9891\u8FB9\u6846 */
+.video-feature__video--desktop {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+}
+\`\`\`
+        `}}}};export{d as Default,f as DesktopOnly,n as WithCustomStyles,l as WithoutPosters,p as WithoutSubtitle,r as default};
+//# sourceMappingURL=videoFeature.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/stories/videoFeature.stories.tsx"],
+  "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport VideoFeature from '../biz-components/VideoFeature/index.js'\nimport type { VideoFeatureProps } from '../biz-components/VideoFeature/types.js'\n\nconst meta = {\n  title: 'Biz Components/VideoFeature',\n  component: VideoFeature,\n  parameters: {\n    layout: 'padded',\n    backgrounds: {\n      default: 'dark',\n    },\n    docs: {\n      description: {\n        component: '\u89C6\u9891\u7279\u6027\u5C55\u793A\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5C55\u793A\u4EA7\u54C1\u89C6\u9891\u548C\u63CF\u8FF0\uFF0C\u652F\u6301\u684C\u9762\u7AEF\u548C\u79FB\u52A8\u7AEF\u4E0D\u540C\u89C6\u9891\uFF0C\u5E26\u61D2\u52A0\u8F7D\u529F\u80FD',\n      },\n    },\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof VideoFeature>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: VideoFeatureProps['data'] = {\n  title: 'DuoSpiral\u2122 Detangle Brushes',\n  poster: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    alt: 'DuoSpiral\u2122 Detangle Brushes',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'image/png',\n  },\n  subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n  video: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n    mimeType: 'video/mp4',\n  },\n  mobPoster: {\n    url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'image/png',\n  },\n  mobvideo: {\n    url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n    alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n    thumbnailURL:\n      'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n    mimeType: 'video/mp4',\n  },\n}\n\nexport const Default: Story = {\n  args: {\n    data: defaultData,\n  },\n}\n\nexport const WithoutSubtitle: Story = {\n  args: {\n    data: {\n      title: 'DuoSpiral\u2122 Detangle Brushes',\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        alt: 'DuoSpiral\u2122 Detangle Brushes',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'image/png',\n      },\n      video: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'video/mp4',\n      },\n      mobPoster: {\n        url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Mobile',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n        mimeType: 'image/png',\n      },\n      mobvideo: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_3_790f438a-3cb2-4a8b-a79b-4f47825ee911.png?v=1752820811',\n        mimeType: 'video/mp4',\n      },\n    },\n  },\n}\n\nexport const DesktopOnly: Story = {\n  args: {\n    data: {\n      title: 'Advanced Cleaning Technology',\n      subtitle: 'Experience powerful cleaning with our latest innovation.',\n      poster: {\n        url: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        alt: 'Advanced Cleaning Technology',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'image/png',\n      },\n      video: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n        alt: 'Advanced Cleaning Technology Video',\n        thumbnailURL:\n          'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/videoframe_0_2_a320c1e6-6860-481b-9d1d-fc8a3338ebaf.png?v=1752820806',\n        mimeType: 'video/mp4',\n      },\n    },\n  },\n}\n\nexport const WithoutPosters: Story = {\n  args: {\n    data: {\n      title: 'DuoSpiral\u2122 Detangle Brushes',\n      subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n      video: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Video',\n        thumbnailURL: '',\n        mimeType: 'video/mp4',\n      },\n      mobvideo: {\n        url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n        alt: 'DuoSpiral\u2122 Detangle Brushes Mobile Video',\n        thumbnailURL: '',\n        mimeType: 'video/mp4',\n      },\n    },\n  },\n}\n\nexport const WithCustomStyles: Story = {\n  args: {\n    data: defaultData,\n    className: 'custom-video-feature',\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236:\n\n**\u6839\u5143\u7D20:**\n- \\`.video-feature\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n\n**\u6807\u9898\u533A\u57DF:**\n- \\`.video-feature__title\\` - \u4E3B\u6807\u9898\n- \\`.video-feature__subtitle\\` - \u526F\u6807\u9898\n\n**\u89C6\u9891\u533A\u57DF:**\n- \\`.video-feature__video-wrapper\\` - \u89C6\u9891\u5916\u5C42\u5BB9\u5668\n- \\`.video-feature__desktop-video-container\\` - \u684C\u9762\u7AEF\u89C6\u9891\u5BB9\u5668\n- \\`.video-feature__mobile-video-container\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u5BB9\u5668\n- \\`.video-feature__video\\` - \u89C6\u9891\u5143\u7D20\n- \\`.video-feature__video--desktop\\` - \u684C\u9762\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26\n- \\`.video-feature__video--mobile\\` - \u79FB\u52A8\u7AEF\u89C6\u9891\u4FEE\u9970\u7B26\n\n**\u793A\u4F8B CSS \u7528\u6CD5:**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u6839\u5BB9\u5668\u80CC\u666F */\n.video-feature {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  padding: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u989C\u8272 */\n.video-feature__title {\n  color: #fbbf24;\n  font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u526F\u6807\u9898\u6837\u5F0F */\n.video-feature__subtitle {\n  color: #e5e7eb;\n  opacity: 0.9;\n}\n\n/* \u81EA\u5B9A\u4E49\u89C6\u9891\u5BB9\u5668\u9634\u5F71 */\n.video-feature__video-wrapper {\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n}\n\n/* \u81EA\u5B9A\u4E49\u89C6\u9891\u60AC\u505C\u6548\u679C */\n.video-feature__video:hover {\n  transform: scale(1.02);\n  transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u684C\u9762\u7AEF\u89C6\u9891\u8FB9\u6846 */\n.video-feature__video--desktop {\n  border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\\`\\`\\`\n        `,\n      },\n    },\n  },\n}\n"],
+  "mappings": "AAAA,MAAkB,QAElB,OAAOA,MAAkB,0CAGzB,MAAMC,EAAO,CACX,MAAO,8BACP,UAAWD,EACX,WAAY,CACV,OAAQ,SACR,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,UAAW,wPACb,CACF,CACF,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAIf,MAAME,EAAyC,CAC7C,MAAO,mCACP,OAAQ,CACN,IAAK,8HACL,IAAK,mCACL,aACE,8HACF,SAAU,WACZ,EACA,SAAU,mGACV,MAAO,CACL,IAAK,4EACL,IAAK,yCACL,aACE,8HACF,SAAU,WACZ,EACA,UAAW,CACT,IAAK,8HACL,IAAK,0CACL,aACE,8HACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,gDACL,aACE,8HACF,SAAU,WACZ,CACF,EAEaC,EAAiB,CAC5B,KAAM,CACJ,KAAMD,CACR,CACF,EAEaE,EAAyB,CACpC,KAAM,CACJ,KAAM,CACJ,MAAO,mCACP,OAAQ,CACN,IAAK,8HACL,IAAK,mCACL,aACE,8HACF,SAAU,WACZ,EACA,MAAO,CACL,IAAK,4EACL,IAAK,yCACL,aACE,8HACF,SAAU,WACZ,EACA,UAAW,CACT,IAAK,8HACL,IAAK,0CACL,aACE,8HACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,gDACL,aACE,8HACF,SAAU,WACZ,CACF,CACF,CACF,EAEaC,EAAqB,CAChC,KAAM,CACJ,KAAM,CACJ,MAAO,+BACP,SAAU,2DACV,OAAQ,CACN,IAAK,8HACL,IAAK,+BACL,aACE,8HACF,SAAU,WACZ,EACA,MAAO,CACL,IAAK,4EACL,IAAK,qCACL,aACE,8HACF,SAAU,WACZ,CACF,CACF,CACF,EAEaC,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,mCACP,SAAU,mGACV,MAAO,CACL,IAAK,4EACL,IAAK,yCACL,aAAc,GACd,SAAU,WACZ,EACA,SAAU,CACR,IAAK,4EACL,IAAK,gDACL,aAAc,GACd,SAAU,WACZ,CACF,CACF,CACF,EAEaC,EAA0B,CACrC,KAAM,CACJ,KAAML,EACN,UAAW,sBACb,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAuDT,CACF,CACF,CACF",
+  "names": ["VideoFeature", "meta", "videoFeature_stories_default", "defaultData", "Default", "WithoutSubtitle", "DesktopOnly", "WithoutPosters", "WithCustomStyles"]
+}

package/dist/esm/types/props.d.ts

@@ -28,14 +28,21 @@ export type Theme = 'light' | 'dark';
 export type Shape = 'rounded' | 'square';
 export type Align = 'left' | 'center' | 'right';
 export type Media = {
-    alt: string;
+    id?: number;
+    alt: string | undefined;
+    baseUrl?: string;
     url: string;
     thumbnailURL: string;
-    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
+    mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml';
+    filename?: string;
     width?: number;
     height?: number;
     focalX?: number;
     focalY?: number;
+    poster?: {
+        url: string;
+        mimeType: 'image/jpeg' | 'image/png' | 'image/webp';
+    };
 };
 export type GSAPContext = {
     gsap?: any;

package/dist/tokens/base.css

@@ -38,6 +38,8 @@
   --container-primary-color: #ffffff;
   --container-secondary-color-0: #f5f5f7;
   --container-secondary-color-1: #EAEAEC;
+  --container-tertiary-color: #EAEAEC;
+
   --bg-color-0: #f5f5f7;
   --bg-color-1: #ffffff;
   --bg-color-2: rgba(0, 190, 250, 0.08);
@@ -118,6 +120,7 @@
   --container-primary-color: #1d1d1f;
   --container-secondary-color-0: #353537;
   --container-secondary-color-1: #F7F8F9;
+  --container-tertiary-color: #F7F8F9;
 
   
   --bg-color-0: #000000;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/headless-ui",
-  "version": "1.1.9-alpha.1764084619241",
+  "version": "1.1.9-alpha.1764141671439",
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -68,8 +68,8 @@
     "@babel/preset-react": "^7.24.6",
     "@babel/preset-typescript": "^7.24.6",
     "@hyrious/esbuild-plugin-commonjs": "^0.2.6",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.3.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.12",
     "@types/jump.js": "^1.0.6",
     "@types/node": "^20",
@@ -93,17 +93,19 @@
     "stylelint": "^16.6.0"
   },
   "dependencies": {
-    "@payloadcms/richtext-lexical": "^3.39.1",
-    "@radix-ui/react-avatar": "^1.1.9",
-    "@radix-ui/react-checkbox": "^1.3.1",
-    "@radix-ui/react-dialog": "^1.1.13",
-    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@payloadcms/richtext-lexical": "^3.62.1",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-popover": "^1.1.13",
-    "@radix-ui/react-radio-group": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.2",
-    "@radix-ui/react-tabs": "^1.1.11",
-    "@radix-ui/react-visually-hidden": "^1.2.2",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
+    "@testing-library/dom": "^10.4.1",
+    "@types/lodash": "^4.17.20",
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -118,6 +120,7 @@
     "fitty": "^2.4.2",
     "framer-motion": "^12.23.24",
     "jump.js": "^1.0.2",
+    "lexical": "^0.38.2",
     "postcss": "^8.4.38",
     "react-fast-marquee": "^1.6.5",
     "react-intersection-observer": "^9.4.0",
@@ -126,6 +129,7 @@
     "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
+    "typescript": "5.4.5",
     "vaul": "^1.1.2"
   },
   "peerDependencies": {
@@ -154,6 +158,7 @@
     "test": "jest",
     "test:snapshots:update": "jest -u",
     "test:coverage": "jest --coverage && jest-coverage-badges output \"./badges\"",
+    "test:watch": "jest --watch",
     "clean": "rm -rf .turbo node_modules dist style.css"
   }
 }

package/style.css

@@ -104,7 +104,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 } /*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
 */ /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -1160,6 +1160,10 @@ video {
 .bg-warning-4 {
   background-color: var(--warning-color-4);
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .\!bg-none {
   background-image: none !important;
 }
@@ -1410,6 +1414,12 @@ video {
 .text-info-secondary {
   color: var(--info-secondary-color);
 }
+.text-info-tertiary {
+  color: var(--info-tertiary-color);
+}
+.text-info-white {
+  color: var(--info-white-color);
+}
 .text-lines-1 {
   color: var(--line-color-1);
 }
@@ -1485,7 +1495,6 @@ video {
 }
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 .transition-colors {

package/tailwind.config.js

@@ -28,10 +28,15 @@ module.exports = {
           '50.1%': { transform: 'translateY(calc(-100% + 3rem))' },
           '100%': { transform: 'translateY(0)' },
         },
+        'progress-bar': {
+          from: { transform: 'translate3d(-100%, -2px, 0)' },
+          to: { transform: 'translate3d(0, -2px, 0)' },
+        },
       },
       animation: {
         'marquee-scroll': 'marquee-scroll 20s linear infinite',
         'scroll-text': 'scroll-text 2s ease-in-out infinite',
+        'progress-bar': 'progress-bar var(--interval-time) ease-out',
       },
       maskImage: {
         'fade-vertical': 'linear-gradient(to bottom, transparent, black 20%, black 80%, transparent)',
@@ -72,9 +77,11 @@ module.exports = {
         container: {
           primary: 'var(--container-primary-color)',
           secondary: {
+            default: 'var(--container-secondary-color-0)',
             0: 'var(--container-secondary-color-0)',
             1: 'var(--container-secondary-color-1)',
           },
+          tertiary: 'var(--container-tertiary-color)',
         },
         tabs: {
           list: {
@@ -181,4 +188,21 @@ module.exports = {
       },
     },
   },
+  plugins: [
+    function (options) {
+      var addUtilities = options.addUtilities
+      var theme = options.theme
+      var maskUtilities = {
+        '.mask-fade-vertical': {
+          '-webkit-mask-image': theme('maskImage.fade-vertical'),
+          'mask-image': theme('maskImage.fade-vertical'),
+          '-webkit-mask-repeat': 'no-repeat',
+          'mask-repeat': 'no-repeat',
+          '-webkit-mask-size': '100% 100%',
+          'mask-size': '100% 100%',
+        },
+      }
+      addUtilities(maskUtilities)
+    },
+  ],
 }

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

@@ -1,27 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import React from 'react';
-import HeroBanner from '../biz-components/HeroBanner/HeroBanner.js';
-declare const meta: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Omit<Omit<import("../biz-components/HeroBanner/types.js").HeroBannerProps & 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;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-};
-export default meta;
-type Story = StoryObj<typeof HeroBanner>;
-export declare const LightTheme: Story;
-export declare const DarkTheme: Story;
-export declare const MultiBanner: () => import("react/jsx-runtime").JSX.Element;
-export declare const WithoutSecondaryButton: Story;
-export declare const WithPadImage: Story;
-export declare const WithPlayButton: Story;

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

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import MemberEquity from '../biz-components/MemberEquity/index.js';
-declare const meta: Meta<typeof MemberEquity>;
-export default meta;
-type Story = StoryObj<typeof MemberEquity>;
-export declare const Default: Story;
-export declare const Round: Story;
-export declare const CustomButtons: Story;
-export declare const CustomStyles: Story;

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

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import MultiLayoutGraphicBlock from '../biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js';
-declare const meta: Meta<typeof MultiLayoutGraphicBlock>;
-export default meta;
-type Story = StoryObj<typeof MultiLayoutGraphicBlock>;
-export declare const Default: Story;
-export declare const ThirdWidth: Story;
-export declare const WithCarousel: Story;
-export declare const WithTabs: Story;

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

@@ -1,17 +0,0 @@
-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[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Round: Story;
-export declare const CustomLayout: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,27 +0,0 @@
-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[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;

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

@@ -1,39 +0,0 @@
-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;
-                };
-            };
-        };
-    };
-};
-export default meta;
-export declare const Default: () => import("react/jsx-runtime").JSX.Element;
-export declare const AvatarType: () => import("react/jsx-runtime").JSX.Element;
-export declare const AvatarSize: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,31 +0,0 @@
-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";
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Examples: Story;

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

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Tabs from '../biz-components/Tabs/index.js';
-declare const meta: Meta<typeof Tabs>;
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-export declare const Default: Story;
-export declare const Dark: Story;

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

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Board from '../components/board.js';
-declare const meta: Meta<typeof Board>;
-export default meta;
-type Story = StoryObj<typeof Board>;
-export declare const Default: Story;

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

@@ -1,16 +0,0 @@
-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[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const CustomBackground: Story;

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

@@ -1,56 +0,0 @@
-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";
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Link: Story;
-export declare const WithIcon: Story;
-export declare const Loading: Story;
-export declare const Aschild: Story;
-export declare const Spinner: Story;
-export declare const AsLinkTag: Story;

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

@@ -1,27 +0,0 @@
-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[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const WithHeader: Story;
-export declare const WithImage: Story;

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

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Carousel } from '../components/index.js';
-declare const meta: Meta<typeof Carousel>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Vertical: Story;
-export declare const OverrideClassName: Story;

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

@@ -1,17 +0,0 @@
-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[];
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-export declare const Round: Story;
-export declare const MoreThanFive: () => import("react/jsx-runtime").JSX.Element;