@anker-in/headless-ui 1.0.26-alpha.1762500619766 → 1.0.26-alpha.1762502118179

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
  2. package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
  3. package/dist/cjs/biz-components/ImageWithText/types.d.ts +2 -0
  4. package/dist/cjs/biz-components/ImageWithText/types.js.map +1 -1
  5. package/dist/cjs/biz-components/Ksp/index.js +1 -1
  6. package/dist/cjs/biz-components/Ksp/index.js.map +2 -2
  7. package/dist/cjs/biz-components/Title/index.js +1 -1
  8. package/dist/cjs/biz-components/Title/index.js.map +3 -3
  9. package/dist/cjs/biz-components/Title/types.d.ts +2 -1
  10. package/dist/cjs/biz-components/Title/types.js +1 -1
  11. package/dist/cjs/biz-components/Title/types.js.map +1 -1
  12. package/dist/cjs/stories/imageWithText.stories.js +2 -2
  13. package/dist/cjs/stories/imageWithText.stories.js.map +2 -2
  14. package/dist/cjs/types/props.d.ts +1 -1
  15. package/dist/cjs/types/props.js +1 -1
  16. package/dist/cjs/types/props.js.map +1 -1
  17. package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
  18. package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
  19. package/dist/esm/biz-components/ImageWithText/types.d.ts +2 -0
  20. package/dist/esm/biz-components/Ksp/index.js +1 -1
  21. package/dist/esm/biz-components/Ksp/index.js.map +2 -2
  22. package/dist/esm/biz-components/Title/index.js +1 -1
  23. package/dist/esm/biz-components/Title/index.js.map +3 -3
  24. package/dist/esm/biz-components/Title/types.d.ts +2 -1
  25. package/dist/esm/stories/imageWithText.stories.js +2 -2
  26. package/dist/esm/stories/imageWithText.stories.js.map +2 -2
  27. package/dist/esm/types/props.d.ts +1 -1
  28. package/package.json +1 -1
  29. package/tailwind.config.js +4 -2
package/dist/cjs/stories/imageWithText.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/stories/imageWithText.stories.tsx"],
4
- "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ImageWithText from '../biz-components/ImageWithText/index.js'\nimport type { ImageWithTextProps } from '../biz-components/ImageWithText/types.js'\n\nconst meta = {\n title: 'Biz Components/ImageWithText',\n component: ImageWithText,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component:\n '\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A\\n\\n' +\n '1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E\\n' +\n '2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E\\n\\n' +\n '\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ImageWithText>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ImageWithTextProps['data'] = {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n subtitle: 'iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.',\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F',\n },\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithDescriptionText: Story = {\n args: {\n data: {\n ...defaultData,\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F',\n },\n },\n },\n}\n\nexport const WithDescriptionTextDark: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898',\n },\n },\n },\n}\n\nexport const MinimalContent: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Simple Title',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Simple Title',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Simple Title Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Simple Title Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u5E03\u5C40\u4F4D\u7F6E\u53D8\u4F53 ====================\n\nexport const LayoutRight: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const LayoutTop: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'top',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A',\n },\n },\n },\n}\n\nexport const LayoutBottom: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'bottom',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301 ====================\n\nconst videoData: ImageWithTextProps['data'] = {\n title: 'DuoSpiral\u2122 Detangle Brushes',\n subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n mediaType: 'video',\n image: {\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 mobileImage: {\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 mobileVideo: {\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 WithVideo: Story = {\n args: {\n data: videoData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\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}\n\nexport const WithVideoRight: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'right',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const WithVideoTop: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'top',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 ====================\n\nconst featureData: ImageWithTextProps['data'] = {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n alt: 'AI.See\u2122 Obstacle Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n alt: 'AI.See\u2122 Obstacle Avoidance Pad',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n alt: 'AI.See\u2122 Obstacle Avoidance Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n mimeType: 'image/png',\n },\n items: [\n {\n icon: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n text: 'LED',\n desc: 'Equipped with LEDs for dark environments',\n },\n {\n icon: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n text: '200+',\n desc: 'Identifies and avoids 200+ objects.',\n },\n ],\n}\n\nexport const WithItems: Story = {\n args: {\n data: featureData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithItemsImageRight: Story = {\n args: {\n data: {\n ...featureData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7',\n },\n },\n },\n}\n\nexport const WithItemsDark: Story = {\n args: {\n data: {\n ...featureData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithItemsVideo: Story = {\n args: {\n data: {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n mediaType: 'video',\n video: videoData.video,\n padVideo: videoData.video,\n mobVideo: {\n url: 'https://cdn.shopify.com/videos/c/o/v/00a233ef01dc40628874e563c8abffac.mp4',\n alt: 'AI Feature Video',\n thumbnailURL: '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 poster: videoData.image,\n padPoster: videoData.image,\n mobPoster: videoData.mobileImage,\n items: featureData.items,\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== TabWithImage \u6A21\u5F0F ====================\n\nconst tabData: ImageWithTextProps['data'] = {\n desc: 'Effortless customization at your fingertips.',\n title: 'Smart App Control',\n datalist: [\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Customizable Cleaning Modes',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Customizable Cleaning Modes',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Customizable Cleaning Modes Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Customizable Cleaning Modes Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n alt: 'Multi-Floor Mapping',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n mimeType: 'image/png',\n },\n title: 'Multi-Floor Mapping',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n alt: 'Multi-Floor Mapping Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n alt: 'Multi-Floor Mapping Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n mimeType: 'image/png',\n },\n },\n ],\n}\n\nexport const TabMode: Story = {\n args: {\n data: tabData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C',\n },\n },\n },\n}\n\nexport const TabModeThreeItems: Story = {\n args: {\n data: {\n ...tabData,\n datalist: [\n ...tabData.datalist!,\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Smart Scheduling',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Smart Scheduling',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Smart Scheduling Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Smart Scheduling Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879',\n },\n },\n },\n}\n\nexport const TabModeWithVideo: Story = {\n args: {\n data: {\n title: 'Smart App Control',\n desc: 'Effortless customization at your fingertips.',\n mediaType: 'video',\n datalist: [\n {\n title: 'Customizable Cleaning Modes',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Customizable Cleaning Modes Video',\n thumbnailURL: '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 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: 'Customizable Cleaning Modes Poster',\n thumbnailURL: '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 image: tabData.datalist![0].image,\n imgPad: tabData.datalist![0].imgPad,\n imageMob: tabData.datalist![0].imageMob,\n },\n {\n title: 'Multi-Floor Mapping',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Multi-Floor Mapping Video',\n thumbnailURL: '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 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: 'Multi-Floor Mapping Poster',\n thumbnailURL: '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 image: tabData.datalist![1].image,\n imgPad: tabData.datalist![1].imgPad,\n imageMob: tabData.datalist![1].imageMob,\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-image-with-text',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.image-with-text\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n- \\`.image-with-text--dark\\` - \u6DF1\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n- \\`.image-with-text--light\\` - \u6D45\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.image-with-text__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.image-with-text__title\\` - \u6807\u9898\n- \\`.image-with-text__subtitle\\` - \u526F\u6807\u9898\n\n**\u63CF\u8FF0\u533A\u57DF\uFF1A**\n- \\`.image-with-text__description\\` - \u63CF\u8FF0\u5BB9\u5668\n- \\`.image-with-text__description-icon\\` - \u63CF\u8FF0\u56FE\u6807\n- \\`.image-with-text__description-text\\` - \u63CF\u8FF0\u6587\u672C\n\n**\u56FE\u7247\u533A\u57DF\uFF1A**\n- \\`.image-with-text__image-wrapper\\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668\n- \\`.image-with-text__image\\` - \u56FE\u7247\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5E03\u5C40\u95F4\u8DDD */\n.image-with-text {\n gap: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.image-with-text__title {\n color: #2563eb;\n font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */\n.image-with-text__image:hover {\n transform: scale(1.05);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u56FE\u6807 */\n.image-with-text__description-icon {\n filter: brightness(1.2);\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React from 'react'\nimport type { Meta, StoryObj } from '@storybook/react'\nimport ImageWithText from '../biz-components/ImageWithText/index.js'\nimport type { ImageWithTextProps } from '../biz-components/ImageWithText/types.js'\n\nconst meta = {\n title: 'Biz Components/ImageWithText',\n component: ImageWithText,\n parameters: {\n layout: 'padded',\n docs: {\n description: {\n component:\n '\u591A\u529F\u80FD\u56FE\u6587\u5C55\u793A\u7EC4\u4EF6\uFF0C\u652F\u63012\u79CD\u6A21\u5F0F\uFF1A\\n\\n' +\n '1. **\u57FA\u7840\u6A21\u5F0F**\uFF1A\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C4\u79CD\u5E03\u5C40\u4F4D\u7F6E(\u4E0A\u4E0B\u5DE6\u53F3)\uFF0C\u53EF\u9009\u529F\u80FD\u5217\u8868\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF(PC/Pad/Mobile)\u72EC\u7ACB\u914D\u7F6E\\n' +\n '2. **Tab\u6A21\u5F0F**\uFF1ATab\u5207\u6362\u5C55\u793A\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E\\n\\n' +\n '\u6240\u6709\u6A21\u5F0F\u90FD\u652F\u6301\u4E09\u7AEF\u54CD\u5E94\u5F0F\u914D\u7F6E\uFF08\u684C\u9762\u7AEF\u3001\u5E73\u677F\u7AEF\u3001\u79FB\u52A8\u7AEF\uFF09',\n },\n },\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof ImageWithText>\n\nexport default meta\n\ntype Story = StoryObj<typeof meta>\n\nconst defaultData: ImageWithTextProps['data'] = {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n subtitle: 'iPath Laser Navigation plans optimal cleaning routes with pinpoint accuracy to ensure nothing is missed.',\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n items: [\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n alt: 'LED',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: 'LED',\n desc: 'Equipped with LEDs for dark environments',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n alt: '200+',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: '200+',\n desc: 'Identifies and avoids 200+ objects.',\n },\n ],\n}\n\nexport const Default: Story = {\n args: {\n data: defaultData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9ED8\u8BA4\u5E03\u5C40(\u5DE6\u4FA7)\uFF1A\u56FE\u7247\u5728\u5DE6\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u53F3\u4FA7\uFF0C\u8FD9\u662F\u6700\u5E38\u7528\u7684\u5E03\u5C40\u65B9\u5F0F',\n },\n },\n },\n}\n\nexport const DarkTheme: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6DF1\u8272\u4E3B\u9898\uFF1A\u901A\u8FC7\u8BBE\u7F6Etheme\u4E3Adark\u542F\u7528\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithDescriptionText: Story = {\n args: {\n data: {\n ...defaultData,\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\uFF1A\u6DFB\u52A0desc\u548CdescIcon\u5B57\u6BB5\u663E\u793A\u989D\u5916\u7684\u4EA7\u54C1\u63CF\u8FF0\u4FE1\u606F',\n },\n },\n },\n}\n\nexport const WithDescriptionTextDark: Story = {\n args: {\n data: {\n ...defaultData,\n theme: 'dark',\n desc: '20,000Pa',\n descIcon:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E26\u63CF\u8FF0\u6587\u672C\u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithoutSubtitle: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Precise Navigation',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Precise Navigation',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Precise Navigation Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Precise Navigation Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u65E0\u526F\u6807\u9898\uFF1A\u53EA\u663E\u793A\u6807\u9898\u548C\u56FE\u7247\uFF0C\u4E0D\u663E\u793A\u526F\u6807\u9898',\n },\n },\n },\n}\n\nexport const MinimalContent: Story = {\n args: {\n data: {\n theme: 'light',\n title: 'Simple Title',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n alt: 'Simple Title',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/precise_navigation.png?v=1751271008',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n alt: 'Simple Title Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/3eff1459-0ad0-4484-9768-6912c863e0b7_eufy_E25_HydroJet_Robot_Vacuum_20_000_Pa_Suction_All-in-One_Cleaning_1.png?v=1752660252',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n alt: 'Simple Title Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/mob-e25-precise-navigation.png?v=1752581556',\n mimeType: 'image/png',\n },\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u6700\u5C0F\u5185\u5BB9\uFF1A\u4EC5\u5305\u542B\u6807\u9898\u548C\u56FE\u7247\u7684\u6700\u7B80\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u5E03\u5C40\u4F4D\u7F6E\u53D8\u4F53 ====================\n\nexport const LayoutRight: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u53F3\u4FA7\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const LayoutTop: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'top',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u9876\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Atop\u5B9E\u73B0\uFF0C\u9002\u5408\u7AD6\u5C4F\u5C55\u793A',\n },\n },\n },\n}\n\nexport const LayoutBottom: Story = {\n args: {\n data: {\n ...defaultData,\n layout: 'bottom',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u5E95\u90E8\u5E03\u5C40\uFF1A\u56FE\u7247\u5728\u4E0B\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0A\u65B9\uFF0C\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Abottom\u5B9E\u73B0',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301 ====================\n\nconst videoData: ImageWithTextProps['data'] = {\n title: 'DuoSpiral\u2122 Detangle Brushes',\n subtitle: 'DuoSpiral\u2122 brushes prevent hair from getting tangled for a hassle-free cleaning experience.',\n mediaType: 'video',\n image: {\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 mobileImage: {\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 WithVideo: Story = {\n args: {\n data: videoData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u652F\u6301(\u9ED8\u8BA4\u5DE6\u4FA7\u5E03\u5C40)\uFF1A\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\uFF0C\u4F7F\u7528video\u548CmobileVideo\u5B57\u6BB5\u5C55\u793A\u89C6\u9891\u5185\u5BB9\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}\n\nexport const WithVideoRight: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'right',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u53F3\u4FA7\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u53F3\u4FA7\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u5DE6\u4FA7\uFF0C\u7ED3\u5408mediaType\u548Clayout\u5B9E\u73B0',\n },\n },\n },\n}\n\nexport const WithVideoTop: Story = {\n args: {\n data: {\n ...videoData,\n layout: 'top',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\u9876\u90E8\u5E03\u5C40\uFF1A\u89C6\u9891\u5728\u4E0A\u65B9\uFF0C\u6587\u5B57\u5185\u5BB9\u5728\u4E0B\u65B9\uFF0C\u9002\u5408\u5F3A\u8C03\u89C6\u9891\u5185\u5BB9\u7684\u573A\u666F',\n },\n },\n },\n}\n\n// ==================== \u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 ====================\n\nconst featureData: ImageWithTextProps['data'] = {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n alt: 'AI.See\u2122 Obstacle Avoidance',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance.png?v=1751341747',\n mimeType: 'image/png',\n },\n padImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n alt: 'AI.See\u2122 Obstacle Avoidance Pad',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e25-pad-ai.png?v=1752582807',\n mimeType: 'image/png',\n },\n mobileImage: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n alt: 'AI.See\u2122 Obstacle Avoidance Mobile',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/aiAvoidance-mob.png?v=1751341780',\n mimeType: 'image/png',\n },\n items: [\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n alt: 'LED',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon_8330e9da-f343-4f9b-8f7c-fe0a0eccbe2f.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: 'LED',\n desc: 'Equipped with LEDs for dark environments',\n },\n {\n icon: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n alt: '200+',\n thumbnailURL: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/icon2_fb84c5b0-dfe6-4930-b637-a8735ed0f946.svg?v=1751875015',\n mimeType: 'image/svg+xml',\n },\n text: '200+',\n desc: 'Identifies and avoids 200+ objects.',\n },\n ],\n}\n\nexport const WithItems: Story = {\n args: {\n data: featureData,\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868\uFF1A\u901A\u8FC7\u6DFB\u52A0items\u6570\u7EC4\u5C55\u793A\u4EA7\u54C1\u529F\u80FD\u7279\u6027\u5217\u8868\uFF0C\u652F\u6301\u56FE\u7247/\u89C6\u9891\u548C\u5E03\u5C40\u4F4D\u7F6E\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithItemsImageRight: Story = {\n args: {\n data: {\n ...featureData,\n layout: 'right',\n },\n },\n parameters: {\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u56FE\u7247\u5728\u53F3\u4FA7\uFF1A\u901A\u8FC7\u8BBE\u7F6Elayout\u4E3Aright\u5C06\u56FE\u7247\u653E\u7F6E\u5728\u53F3\u4FA7',\n },\n },\n },\n}\n\nexport const WithItemsDark: Story = {\n args: {\n data: {\n ...featureData,\n theme: 'dark',\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u6DF1\u8272\u4E3B\u9898',\n },\n },\n },\n}\n\nexport const WithItemsVideo: Story = {\n args: {\n data: {\n title: 'AI.See\u2122 Obstacle Avoidance',\n subtitle: 'Advanced AI and RGB visual recognition.',\n mediaType: 'video',\n video: videoData.video,\n padVideo: videoData.video,\n mobVideo: videoData.mobVideo,\n items: featureData.items,\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: '\u57FA\u7840\u6A21\u5F0F + \u529F\u80FD\u5217\u8868 - \u89C6\u9891\u652F\u6301\uFF1A\u529F\u80FD\u5217\u8868\u6A21\u5F0F\u4E5F\u652F\u6301\u89C6\u9891\u5C55\u793A\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u914D\u7F6E',\n },\n },\n },\n}\n\n// ==================== TabWithImage \u6A21\u5F0F ====================\n\nconst tabData: ImageWithTextProps['data'] = {\n desc: 'Effortless customization at your fingertips.',\n title: 'Smart App Control',\n datalist: [\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Customizable Cleaning Modes',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Customizable Cleaning Modes',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Customizable Cleaning Modes Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Customizable Cleaning Modes Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n alt: 'Multi-Floor Mapping',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/e55fcd7a-cebf-45c1-bb71-452abdaf95ae_Frame_2121235327_1.png?v=1751439903',\n mimeType: 'image/png',\n },\n title: 'Multi-Floor Mapping',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n alt: 'Multi-Floor Mapping Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ccdbbbff-5c33-4805-a434-e04a12e32a72_Frame_2121235493.png?v=1752735394',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n alt: 'Multi-Floor Mapping Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/ac28983f-6257-469d-81bb-03dfb54429b6_Frame_2121235514_1.png?v=1752735193',\n mimeType: 'image/png',\n },\n },\n ],\n}\n\nexport const TabMode: Story = {\n args: {\n data: tabData,\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F\uFF1A\u5F53data\u4E2D\u5305\u542Bdatalist\u6570\u7EC4\u65F6\u81EA\u52A8\u542F\u7528\uFF0C\u652F\u6301Tab\u5207\u6362\u548C\u56FE\u7247\u52A8\u753B\u6548\u679C',\n },\n },\n },\n}\n\nexport const TabModeThreeItems: Story = {\n args: {\n data: {\n ...tabData,\n datalist: [\n ...tabData.datalist!,\n {\n image: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n alt: 'Smart Scheduling',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/4e735b0f-8e44-4715-ae1e-d18977ca5404_Frame_2121235327.png?v=1751439585',\n mimeType: 'image/png',\n },\n title: 'Smart Scheduling',\n imgPad: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n alt: 'Smart Scheduling Pad',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/efc82cbc-e848-4ba8-95ae-9e2766323588_Frame_2121235504.png?v=1752664131',\n mimeType: 'image/png',\n },\n imageMob: {\n url: 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n alt: 'Smart Scheduling Mobile',\n thumbnailURL:\n 'https://cdn.shopify.com/s/files/1/0521/9411/5753/files/7ef86e71-eba4-46a5-ab44-61c8bf7c2232_Frame_2121235328.png?v=1752582614',\n mimeType: 'image/png',\n },\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u4E09\u4E2ATab\u9879',\n },\n },\n },\n}\n\nexport const TabModeWithVideo: Story = {\n args: {\n data: {\n title: 'Smart App Control',\n desc: 'Effortless customization at your fingertips.',\n mediaType: 'video',\n datalist: [\n {\n title: 'Customizable Cleaning Modes',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Customizable Cleaning Modes Video',\n thumbnailURL: '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 image: tabData.datalist![0].image,\n imgPad: tabData.datalist![0].imgPad,\n imageMob: tabData.datalist![0].imageMob,\n },\n {\n title: 'Multi-Floor Mapping',\n video: {\n url: 'https://cdn.shopify.com/videos/c/o/v/82766208a03240b2b0a5f461578923dc.mp4',\n alt: 'Multi-Floor Mapping Video',\n thumbnailURL: '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 image: tabData.datalist![1].image,\n imgPad: tabData.datalist![1].imgPad,\n imageMob: tabData.datalist![1].imageMob,\n },\n ],\n },\n },\n parameters: {\n backgrounds: {\n default: 'dark',\n },\n docs: {\n description: {\n story: 'TabWithImage\u6A21\u5F0F - \u89C6\u9891\u652F\u6301\uFF1ATab\u6A21\u5F0F\u73B0\u5728\u4E5F\u652F\u6301\u89C6\u9891\uFF0C\u901A\u8FC7\u8BBE\u7F6EmediaType\u4E3Avideo\u542F\u7528\uFF0C\u652F\u6301\u4E09\u7AEF\u72EC\u7ACB\u89C6\u9891\u914D\u7F6E',\n },\n },\n },\n}\n\nexport const WithCustomStyles: Story = {\n args: {\n data: defaultData,\n className: 'custom-image-with-text',\n },\n parameters: {\n docs: {\n description: {\n story: `\n\u8BE5\u793A\u4F8B\u5C55\u793A\u4E86\u5982\u4F55\u901A\u8FC7\u6DFB\u52A0\u81EA\u5B9A\u4E49 CSS \u7C7B\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u6837\u5F0F\u3002\u7EC4\u4EF6\u4E2D\u5DF2\u6DFB\u52A0\u4EE5\u4E0B CSS \u7C7B\u4FBF\u4E8E\u6837\u5F0F\u5B9A\u5236\uFF1A\n\n**\u6839\u5143\u7D20\uFF1A**\n- \\`.image-with-text\\` - \u7EC4\u4EF6\u6839\u5BB9\u5668\n- \\`.image-with-text--dark\\` - \u6DF1\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n- \\`.image-with-text--light\\` - \u6D45\u8272\u4E3B\u9898\u4FEE\u9970\u7B26\n\n**\u5185\u5BB9\u533A\u57DF\uFF1A**\n- \\`.image-with-text__content\\` - \u5185\u5BB9\u5BB9\u5668\n- \\`.image-with-text__title\\` - \u6807\u9898\n- \\`.image-with-text__subtitle\\` - \u526F\u6807\u9898\n\n**\u63CF\u8FF0\u533A\u57DF\uFF1A**\n- \\`.image-with-text__description\\` - \u63CF\u8FF0\u5BB9\u5668\n- \\`.image-with-text__description-icon\\` - \u63CF\u8FF0\u56FE\u6807\n- \\`.image-with-text__description-text\\` - \u63CF\u8FF0\u6587\u672C\n\n**\u56FE\u7247\u533A\u57DF\uFF1A**\n- \\`.image-with-text__image-wrapper\\` - \u56FE\u7247\u5916\u5C42\u5BB9\u5668\n- \\`.image-with-text__image\\` - \u56FE\u7247\u5143\u7D20\n\n**\u793A\u4F8B CSS \u7528\u6CD5\uFF1A**\n\\`\\`\\`css\n/* \u81EA\u5B9A\u4E49\u5E03\u5C40\u95F4\u8DDD */\n.image-with-text {\n gap: 48px;\n}\n\n/* \u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F */\n.image-with-text__title {\n color: #2563eb;\n font-weight: 800;\n}\n\n/* \u81EA\u5B9A\u4E49\u56FE\u7247\u60AC\u505C\u6548\u679C */\n.image-with-text__image:hover {\n transform: scale(1.05);\n transition: transform 0.3s ease;\n}\n\n/* \u81EA\u5B9A\u4E49\u63CF\u8FF0\u56FE\u6807 */\n.image-with-text__description-icon {\n filter: brightness(1.2);\n}\n\\`\\`\\`\n `,\n },\n },\n },\n}\n"],
5
+ "mappings": "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ACJ,KAAMgB,CACR,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,qPACT,CACF,CACF,CACF,EAEad,EAA6B,CACxC,KAAM,CACJ,KAAM,CACJ,GAAGc,EACH,OAAQ,OACV,CACF,EACA,WAAY,CACV,KAAM,CACJ,YAAa,CACX,MAAO,qLACT,CACF,CACF,CACF,EAEaf,EAAuB,CAClC,KAAM,CACJ,KAAM,CACJ,GAAGe,EACH,MAAO,MACT,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,gFACT,CACF,CACF,CACF,EAEab,EAAwB,CACnC,KAAM,CACJ,KAAM,CACJ,MAAO,kCACP,SAAU,0CACV,UAAW,QACX,MAAOY,EAAU,MACjB,SAAUA,EAAU,MACpB,SAAUA,EAAU,SACpB,MAAOC,EAAY,KACrB,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,0NACT,CACF,CACF,CACF,EAIMC,EAAsC,CAC1C,KAAM,+CACN,MAAO,oBACP,SAAU,CACR,CACE,MAAO,CACL,IAAK,gIACL,IAAK,8BACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,8BACP,OAAQ,CACN,IAAK,gIACL,IAAK,kCACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,qCACL,aACE,gIACF,SAAU,WACZ,CACF,EACA,CACE,MAAO,CACL,IAAK,kIACL,IAAK,sBACL,aACE,kIACF,SAAU,WACZ,EACA,MAAO,sBACP,OAAQ,CACN,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,kIACL,IAAK,6BACL,aACE,kIACF,SAAU,WACZ,CACF,CACF,CACF,EAEavB,EAAiB,CAC5B,KAAM,CACJ,KAAMuB,CACR,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,yLACT,CACF,CACF,CACF,EAEatB,EAA2B,CACtC,KAAM,CACJ,KAAM,CACJ,GAAGsB,EACH,SAAU,CACR,GAAGA,EAAQ,SACX,CACE,MAAO,CACL,IAAK,gIACL,IAAK,mBACL,aACE,gIACF,SAAU,WACZ,EACA,MAAO,mBACP,OAAQ,CACN,IAAK,gIACL,IAAK,uBACL,aACE,gIACF,SAAU,WACZ,EACA,SAAU,CACR,IAAK,gIACL,IAAK,0BACL,aACE,gIACF,SAAU,WACZ,CACF,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,kDACT,CACF,CACF,CACF,EAEarB,EAA0B,CACrC,KAAM,CACJ,KAAM,CACJ,MAAO,oBACP,KAAM,+CACN,UAAW,QACX,SAAU,CACR,CACE,MAAO,8BACP,MAAO,CACL,IAAK,4EACL,IAAK,oCACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOqB,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,EACA,CACE,MAAO,sBACP,MAAO,CACL,IAAK,4EACL,IAAK,4BACL,aAAc,8HACd,SAAU,WACZ,EACA,MAAOA,EAAQ,SAAU,CAAC,EAAE,MAC5B,OAAQA,EAAQ,SAAU,CAAC,EAAE,OAC7B,SAAUA,EAAQ,SAAU,CAAC,EAAE,QACjC,CACF,CACF,CACF,EACA,WAAY,CACV,YAAa,CACX,QAAS,MACX,EACA,KAAM,CACJ,YAAa,CACX,MAAO,oPACT,CACF,CACF,CACF,EAEapB,EAA0B,CACrC,KAAM,CACJ,KAAMiB,EACN,UAAW,wBACb,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,SA+CT,CACF,CACF,CACF",
6
6
  "names": ["imageWithText_stories_exports", "__export", "DarkTheme", "Default", "LayoutBottom", "LayoutRight", "LayoutTop", "MinimalContent", "TabMode", "TabModeThreeItems", "TabModeWithVideo", "WithCustomStyles", "WithDescriptionText", "WithDescriptionTextDark", "WithItems", "WithItemsDark", "WithItemsImageRight", "WithItemsVideo", "WithVideo", "WithVideoRight", "WithVideoTop", "WithoutSubtitle", "imageWithText_stories_default", "__toCommonJS", "import_react", "import_ImageWithText", "meta", "ImageWithText", "defaultData", "videoData", "featureData", "tabData"]
7
7
  }
package/dist/cjs/types/props.d.ts CHANGED
@@ -32,7 +32,7 @@ export type Media = {
32
32
  baseUrl?: string;
33
33
  url: string;
34
34
  thumbnailURL: string;
35
- mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp';
35
+ mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml';
36
36
  filename?: string;
37
37
  width?: number;
38
38
  height?: number;
package/dist/cjs/types/props.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var p=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var s=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of a(e))!g.call(t,n)&&n!==o&&p(t,n,{get:()=>e[n],enumerable:!(r=i(e,n))||r.enumerable});return t};var m=t=>s(p({},"__esModule",{value:!0}),t);var l={};module.exports=m(l);
1
+ "use strict";var p=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var m=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of a(e))!g.call(t,n)&&n!==o&&p(t,n,{get:()=>e[n],enumerable:!(r=i(e,n))||r.enumerable});return t};var s=t=>m(p({},"__esModule",{value:!0}),t);var l={};module.exports=s(l);
2
2
  //# sourceMappingURL=props.js.map
package/dist/cjs/types/props.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/types/props.ts"],
4
- "sourcesContent": ["export interface ComponentCommonProps {\n style?: string\n event?: any\n condition?: any\n className?: string\n id?: string\n key?: string\n}\n\nexport type ContainerProps = {\n containerMode?: Mode\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\n\nexport type Img = {\n url: string\n alt?: string\n}\n\nexport type Video = {\n url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n\nexport type Media = {\n id?: number\n alt: string | undefined\n baseUrl?: string\n url: string\n thumbnailURL: string\n mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp'\n filename?: string\n width?: number\n height?: number\n focalX?: number\n focalY?: number\n poster?: {\n url: string\n mimeType: 'image/jpeg' | 'image/png' | 'image/webp'\n }\n}\n\nexport type GSAPContext = {\n gsap?: any\n ScrollTrigger?: any\n SplitText?: any\n}\n"],
4
+ "sourcesContent": ["export interface ComponentCommonProps {\n style?: string\n event?: any\n condition?: any\n className?: string\n id?: string\n key?: string\n}\n\nexport type ContainerProps = {\n containerMode?: Mode\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\n\nexport type Img = {\n url: string\n alt?: string\n}\n\nexport type Video = {\n url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n\nexport type Media = {\n id?: number\n alt: string | undefined\n baseUrl?: string\n url: string\n thumbnailURL: string\n mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp' | 'image/svg+xml'\n filename?: string\n width?: number\n height?: number\n focalX?: number\n focalY?: number\n poster?: {\n url: string\n mimeType: 'image/jpeg' | 'image/png' | 'image/webp'\n }\n}\n\nexport type GSAPContext = {\n gsap?: any\n ScrollTrigger?: any\n SplitText?: any\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["props_exports", "__toCommonJS"]
7
7
  }
package/dist/esm/biz-components/ImageWithText/ImageWithText.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import de,{useImperativeHandle as re,useRef as h,useState as g,useEffect as xe}from"react";import{Heading as u,Picture as P,Text as D}from"../../components/index.js";import{cn as x}from"../../helpers/utils.js";import{withLayout as ne}from"../../shared/Styles.js";import{useExposure as ce}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as L}from"../../hooks/useIntersectionObserver.js";import{motion as O,AnimatePresence as q}from"framer-motion";const he="image",ge="image_with_text",B=de.forwardRef(({data:G,className:J},K)=>{const{title:f,subtitle:_,desc:v,descIcon:w,image:c,padImage:M,mobileImage:V,theme:b="dark",items:E=[],imagePosition:Q,layout:U,mediaType:X="image",datalist:m=[],video:H,padVideo:S,mobVideo:W,poster:Y,padPoster:Z,mobPoster:ee}=G,i=U||Q||"left",k=h(null),y=h(null),N=h(null),T=h(null),[p,te]=g(0),z=h([]),[R,ie]=g({left:0,width:0}),[n,ae]=g(""),[j,oe]=g(""),[A,le]=g("");ce(k,{componentType:he,componentName:ge,componentTitle:f,componentDescription:_}),re(K,()=>k.current),xe(()=>{if(m.length>0){const t=z.current[p];if(t){const{offsetLeft:l,offsetWidth:r}=t;ie({left:l,width:r})}}},[p,m.length]),L(y,{once:!0,threshold:.1,callback:()=>{H?.url&&ae(H.url)}}),L(N,{once:!0,threshold:.1,callback:()=>{S?.url&&oe(S.url)}}),L(T,{once:!0,threshold:.1,callback:()=>{W?.url&&le(W.url)}});const se=(t,l)=>{te(t),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},o=m.length>0,$=X==="video",a=E.length>0,F=()=>{if(o&&m[p]){const t=m[p];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return c?`${c.url},${M?.url||c.url} 1024, ${V?.url||c.url} 768`:""},C=()=>{if(o){const d=m[p],I=d.poster?.url||d.image?.url,me=d.padPoster?.url||d.imgPad?.url||I,pe=d.mobPoster?.url||d.imageMob?.url||I;return e(q,{mode:"wait",children:e(O.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[e("div",{ref:y,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:I,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:N,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:me,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:T,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:A||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},d.video?.url||d.image.url)})}const t=Y?.url||c?.url,l=Z?.url||M?.url||t,r=ee?.url||V?.url||t;return s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[e("div",{ref:y,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:N,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:l,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:T,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:r,src:A||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return s("section",{ref:k,"data-ui-component-id":"ImageWithText",className:x("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!o,"flex-col":!o&&(i==="top"||i==="bottom"),"flex-col laptop:flex-row":!o&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":o,"image-with-text--dark text-white":b==="dark","image-with-text--light text-[#1f1f1f]":b==="light","aiui-dark":a&&b==="dark"},J),children:[o&&s("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{className:"image-with-text__header",children:[e(u,{as:"h3",size:4,html:f,className:"image-with-text__title"}),e(D,{as:"p",size:1,html:v,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:R.left,width:R.width}}),m.map((t,l)=>e("div",{ref:r=>{z.current[l]=r},onClick:r=>se(l,r),className:x("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",p===l?"image-with-text__tab--active text-black":"text-white"),children:e(u,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},l))]})})]}),!o&&s("div",{className:x("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":a,"order-1 laptop:order-2":a&&i==="left","order-1":a&&i==="right"||!a&&(i==="top"||i==="left"),"order-2":!a&&(i==="bottom"||i==="right")}),children:[e(u,{as:"h2",size:4,html:f,className:x("image-with-text__title",{"w-full text-left":a})}),_&&e(D,{as:"p",size:a?4:3,html:_,className:x("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!a,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":a})}),!a&&(v||w)&&s("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[w&&e("img",{src:w,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),v&&e(u,{as:"h4",size:5,html:v,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),a&&e("div",{className:"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0",children:E.map((t,l)=>s("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[s("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[e(P,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(u,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(D,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},l))})]}),e("div",{className:x("image-with-text__media-wrapper",{"order-1":!o&&(i==="top"||i==="left"),"order-2":!o&&(i==="bottom"||i==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":a,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="right","relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":o}),children:o?$?C():e(q,{mode:"wait",children:e(O.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(P,{source:F(),alt:m[p].image.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},m[p].image.url)}):$?C():e(P,{source:F(),className:x("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!a})})})]})});B.displayName="ImageWithText";var ye=ne(B);export{ye as default};
1
+ "use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import re,{useImperativeHandle as xe,useRef as h,useState as g,useEffect as ne}from"react";import{Heading as u,Picture as D,Text as L}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as ce}from"../../shared/Styles.js";import{useExposure as he}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as M}from"../../hooks/useIntersectionObserver.js";import{motion as q,AnimatePresence as B}from"framer-motion";const ge="image",ue="image_with_text",G=re.forwardRef(({data:J,className:K},Q)=>{const{title:_,subtitle:w,desc:v,descIcon:b,image:c,padImage:V,mobileImage:E,theme:k="dark",items:H=[],imagePosition:U,layout:X,mediaType:Y="image",datalist:m=[],video:S,padVideo:W,mobVideo:z,poster:Z,padPoster:ee,mobPoster:te,cols:f=1}=J,i=X||U||"left",y=h(null),N=h(null),T=h(null),I=h(null),[d,ie]=g(0),R=h([]),[A,ae]=g({left:0,width:0}),[n,oe]=g(""),[$,le]=g(""),[j,se]=g("");he(y,{componentType:ge,componentName:ue,componentTitle:_,componentDescription:w}),xe(Q,()=>y.current),ne(()=>{if(m.length>0){const t=R.current[d];if(t){const{offsetLeft:l,offsetWidth:x}=t;ae({left:l,width:x})}}},[d,m.length]),M(N,{once:!0,threshold:.1,callback:()=>{S?.url&&oe(S.url)}}),M(T,{once:!0,threshold:.1,callback:()=>{W?.url&&le(W.url)}}),M(I,{once:!0,threshold:.1,callback:()=>{z?.url&&se(z.url)}});const me=(t,l)=>{ie(t),l.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"})},o=m.length>0,F=Y==="video",a=H.length>0,C=()=>{if(o&&m[d]){const t=m[d];return`${t.image.url} ,${t.imgPad?.url||t.image.url} 1440, ${t.imageMob?.url||t.image.url} 767`}return c?`${c.url},${V?.url||c.url} 1024, ${E?.url||c.url} 768`:""},O=()=>{if(o){const p=m[d],P=p.poster?.url||p.image?.url,de=p.padPoster?.url||p.imgPad?.url||P,pe=p.mobPoster?.url||p.imageMob?.url||P;return e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:P,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:de,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})},p.video?.url||p.image.url)})}const t=Z?.url||c?.url,l=ee?.url||V?.url||t,x=te?.url||E?.url||t;return s("div",{className:"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:n,loop:!0,className:"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:l,src:$||n,loop:!0,className:"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:j||n,loop:!0,className:"image-with-text__video image-with-text__video--mobile block tablet:hidden"})})]})};return s("section",{ref:y,"data-ui-component-id":"ImageWithText",className:r("image-with-text",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!o,"flex-col":!o&&(i==="top"||i==="bottom"),"flex-col laptop:flex-row":!o&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":o,"image-with-text--dark text-white":k==="dark","image-with-text--light text-[#1f1f1f]":k==="light","aiui-dark":a&&k==="dark"},K),children:[o&&s("div",{className:"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]",children:[s("div",{className:"image-with-text__header",children:[e(u,{as:"h3",size:4,html:_,className:"image-with-text__title"}),e(L,{as:"p",size:1,html:v,className:"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]}),e("div",{className:"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden",children:s("div",{className:"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out",style:{left:A.left,width:A.width}}),m.map((t,l)=>e("div",{ref:x=>{R.current[l]=x},onClick:x=>me(l,x),className:r("image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]",d===l?"image-with-text__tab--active text-black":"text-white"),children:e(u,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},l))]})})]}),!o&&s("div",{className:r("image-with-text__content flex flex-col justify-center",{"w-full items-start laptop:w-fit":a,"order-1 laptop:order-2":a&&i==="left","order-1":a&&i==="right"||!a&&(i==="top"||i==="left"),"order-2":!a&&(i==="bottom"||i==="right")}),children:[e(u,{as:"h2",size:4,html:_,className:r("image-with-text__title",{"w-full text-left":a})}),w&&e(L,{as:"p",size:a?4:3,html:w,className:r("image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]",{"laptop:mt-[16px]":!a,"text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":a})}),!a&&(v||b)&&s("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[b&&e("img",{src:b,alt:"icon",className:"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]"}),v&&e(u,{as:"h4",size:5,html:v,className:"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]"})]}),a&&e("div",{className:r("image-with-text__items w-full grid gap-6",{"grid-cols-1":f===1,"grid-cols-2":f===2,"grid-cols-3":f===3,"grid-cols-4":f===4}),children:H.map((t,l)=>s("div",{className:"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]",children:[s("div",{className:"image-with-text__item-header flex flex-row items-center gap-[8px]",children:[e(D,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]"}),e(u,{size:5,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(L,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]},l))})]}),e("div",{className:r("image-with-text__media-wrapper",{"order-1":!o&&(i==="top"||i==="left"),"order-2":!o&&(i==="bottom"||i==="right"),"aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":a,"order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="left","order-2 laptop:basis-[63%] desktop:basis-[57%]":a&&i==="right","relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":o}),children:o?F?O():e(B,{mode:"wait",children:e(q.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(D,{source:C(),alt:m[d].image.alt,className:"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]"})},m[d].image.url)}):F?O():e(D,{source:C(),className:r("image-with-text__image",{"rounded-[10px] laptop:rounded-[16px]":!a})})})]})});G.displayName="ImageWithText";var Ne=ce(G);export{Ne as default};
2
2
  //# sourceMappingURL=ImageWithText.js.map
package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ImageWithText/ImageWithText.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n imagePosition,\n layout,\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n poster,\n padPoster,\n mobPoster,\n } = data\n\n // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n const effectiveLayout = layout || imagePosition || 'left'\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (video?.url) {\n setLoadedDesktopVideoSrc(video.url)\n }\n },\n })\n\n // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(tabletVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (padVideo?.url) {\n setLoadedTabletVideoSrc(padVideo.url)\n }\n },\n })\n\n // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(mobileVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (mobVideo?.url) {\n setLoadedMobileVideoSrc(mobVideo.url)\n }\n },\n })\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n }\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image.url} ,${activeTab.imgPad?.url || activeTab.image.url} 1440, ${activeTab.imageMob?.url || activeTab.image.url} 767`\n }\n if (image) {\n return `${image.url},${padImage?.url || image.url} 1024, ${mobileImage?.url || image.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.mobPoster?.url || activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = poster?.url || image?.url\n const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'image-with-text--dark text-white': theme === 'dark',\n 'image-with-text--light text-[#1f1f1f]': theme === 'light',\n 'aiui-dark': hasItems && theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col justify-center', {\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full items-start laptop:w-fit': hasItems,\n // order\u63A7\u5236\n 'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n 'order-1':\n (hasItems && effectiveLayout === 'right') ||\n (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n 'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n })}\n >\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full text-left': hasItems,\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n }\n )}\n />\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div className=\"image-with-text__items flex w-full flex-col justify-around gap-0 tablet:flex-row tablet:justify-start tablet:gap-[90px] laptop:w-fit laptop:flex-col laptop:justify-around laptop:gap-0\">\n {items.map((item: ImageWithTextItem, index: number) => (\n <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n />\n <Heading\n size={5}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n className={cn('image-with-text__media-wrapper', {\n // \u57FA\u7840\u6A21\u5F0F\n 'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n 'order-2': !isTabMode && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n 'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image.alt}\n className=\"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture\n source={getImageSource()}\n className={cn('image-with-text__image', {\n 'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n })}\n />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "motion", "AnimatePresence", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useIntersectionObserverDelay } from '../../hooks/useIntersectionObserver.js'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport type { ImageWithTextProps, ImageWithTextItem, ImageWithTextTabItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'image_with_text'\n\nconst ImageWithText = React.forwardRef<HTMLDivElement, ImageWithTextProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n desc,\n descIcon,\n image,\n padImage,\n mobileImage,\n theme = 'dark',\n items = [],\n imagePosition,\n layout,\n mediaType = 'image',\n datalist = [],\n video,\n padVideo,\n mobVideo,\n poster,\n padPoster,\n mobPoster,\n cols = 1,\n } = data\n\n // \u5411\u540E\u517C\u5BB9\uFF1A\u5982\u679C\u63D0\u4F9B\u4E86 imagePosition \u4F46\u6CA1\u6709 layout\uFF0C\u4F7F\u7528 imagePosition\n const effectiveLayout = layout || imagePosition || 'left'\n\n const boxRef = useRef<HTMLDivElement>(null)\n const desktopVideoRef = useRef<HTMLDivElement>(null)\n const tabletVideoRef = useRef<HTMLDivElement>(null)\n const mobileVideoRef = useRef<HTMLDivElement>(null)\n\n // Tab\u72B6\u6001\u7BA1\u7406\n const [activeIndex, setActiveIndex] = useState(0)\n const tabRefs = useRef<Array<HTMLDivElement | null>>([])\n const [sliderStyle, setSliderStyle] = useState({ left: 0, width: 0 })\n\n // \u89C6\u9891\u61D2\u52A0\u8F7D\u72B6\u6001\n const [loadedDesktopVideoSrc, setLoadedDesktopVideoSrc] = useState('')\n const [loadedTabletVideoSrc, setLoadedTabletVideoSrc] = useState('')\n const [loadedMobileVideoSrc, setLoadedMobileVideoSrc] = useState('')\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n // Tab\u6ED1\u5757\u4F4D\u7F6E\u8BA1\u7B97\n useEffect(() => {\n if (datalist.length > 0) {\n const current = tabRefs.current[activeIndex]\n if (current) {\n const { offsetLeft, offsetWidth } = current\n setSliderStyle({ left: offsetLeft, width: offsetWidth })\n }\n }\n }, [activeIndex, datalist.length])\n\n // \u684C\u9762\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(desktopVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (video?.url) {\n setLoadedDesktopVideoSrc(video.url)\n }\n },\n })\n\n // \u5E73\u677F\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(tabletVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (padVideo?.url) {\n setLoadedTabletVideoSrc(padVideo.url)\n }\n },\n })\n\n // \u79FB\u52A8\u7AEF\u89C6\u9891\u61D2\u52A0\u8F7D\n useIntersectionObserverDelay(mobileVideoRef, {\n once: true,\n threshold: 0.1,\n callback: () => {\n if (mobVideo?.url) {\n setLoadedMobileVideoSrc(mobVideo.url)\n }\n },\n })\n\n const handleTabClick = (index: number, e: React.MouseEvent<HTMLDivElement>) => {\n setActiveIndex(index)\n ;(e.target as HTMLElement).scrollIntoView({\n behavior: 'smooth',\n inline: 'center',\n block: 'nearest',\n })\n }\n\n // \u5224\u65AD\u662F\u5426\u4E3ATabWithImage\u6A21\u5F0F\uFF08\u4F18\u5148\u7EA7\u6700\u9AD8\uFF09\n const isTabMode = datalist.length > 0\n\n // \u5224\u65AD\u5F53\u524D\u662F\u5426\u4E3A\u89C6\u9891\u6A21\u5F0F\n const isVideo = mediaType === 'video'\n\n // \u5224\u65AD\u662F\u5426\u6709\u529F\u80FD\u5217\u8868\n const hasItems = items.length > 0\n\n // \u83B7\u53D6\u56FE\u7247\u6E90\n const getImageSource = () => {\n if (isTabMode && datalist[activeIndex]) {\n const activeTab = datalist[activeIndex]\n return `${activeTab.image.url} ,${activeTab.imgPad?.url || activeTab.image.url} 1440, ${activeTab.imageMob?.url || activeTab.image.url} 767`\n }\n if (image) {\n return `${image.url},${padImage?.url || image.url} 1024, ${mobileImage?.url || image.url} 768`\n }\n return ''\n }\n\n // \u6E32\u67D3\u89C6\u9891\u5185\u5BB9\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\n const renderVideo = () => {\n if (isTabMode) {\n const activeTab = datalist[activeIndex]\n // Tab\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF0C\u4F7F\u7528 image/imgPad/imageMob \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = activeTab.poster?.url || activeTab.image?.url\n const tabletPoster = activeTab.padPoster?.url || activeTab.imgPad?.url || desktopPoster\n const mobilePoster = activeTab.mobPoster?.url || activeTab.imageMob?.url || desktopPoster\n\n return (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={activeTab.video?.url || activeTab.image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__video-motion absolute left-0 top-0 w-full\"\n >\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n </motion.div>\n </AnimatePresence>\n )\n }\n\n // \u57FA\u7840\u6A21\u5F0F\u4E0B\u7684\u89C6\u9891\uFF08\u652F\u6301\u4E09\u7AEF\uFF09\uFF0C\u4F7F\u7528 image/padImage/mobileImage \u4F5C\u4E3A\u5C01\u9762\uFF08\u5411\u540E\u517C\u5BB9 poster \u5B57\u6BB5\uFF09\n const desktopPoster = poster?.url || image?.url\n const tabletPoster = padPoster?.url || padImage?.url || desktopPoster\n const mobilePoster = mobPoster?.url || mobileImage?.url || desktopPoster\n\n return (\n <div className=\"image-with-text__video-wrapper overflow-hidden rounded-[10px] laptop:rounded-[16px]\">\n {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n <div ref={desktopVideoRef} className=\"image-with-text__desktop-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={desktopPoster}\n src={loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--desktop hidden h-full w-full object-cover lg-desktop:block\"\n ></video>\n </div>\n {/* \u5E73\u677F\u7AEF\u89C6\u9891 */}\n <div ref={tabletVideoRef} className=\"image-with-text__tablet-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={tabletPoster}\n src={loadedTabletVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--tablet hidden tablet:block lg-desktop:hidden\"\n ></video>\n </div>\n {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n <div ref={mobileVideoRef} className=\"image-with-text__mobile-video-container\">\n <video\n playsInline\n autoPlay\n muted\n poster={mobilePoster}\n src={loadedMobileVideoSrc || loadedDesktopVideoSrc}\n loop\n className=\"image-with-text__video image-with-text__video--mobile block tablet:hidden\"\n ></video>\n </div>\n </div>\n )\n }\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ImageWithText\"\n className={cn(\n 'image-with-text',\n {\n // \u57FA\u7840\u6A21\u5F0F\u6837\u5F0F - \u652F\u6301\u4E0A\u4E0B\u5DE6\u53F3\u5E03\u5C40\n 'flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]': !isTabMode,\n 'flex-col': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'bottom'),\n 'flex-col laptop:flex-row': !isTabMode && (effectiveLayout === 'left' || effectiveLayout === 'right'),\n // TabWithImage\u6A21\u5F0F\u6837\u5F0F\n 'flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]': isTabMode,\n // \u4E3B\u9898\u6837\u5F0F\n 'image-with-text--dark text-white': theme === 'dark',\n 'image-with-text--light text-[#1f1f1f]': theme === 'light',\n 'aiui-dark': hasItems && theme === 'dark',\n },\n className\n )}\n >\n {/* TabWithImage\u6A21\u5F0F\u7684\u5185\u5BB9\u548CTab\u63A7\u5236 */}\n {isTabMode && (\n <div className=\"image-with-text__tab-content inline-flex flex-col justify-center min-md:gap-[24px] laptop:basis-[36%]\">\n <div className=\"image-with-text__header\">\n <Heading as={'h3'} size={4} html={title} className=\"image-with-text__title\" />\n <Text\n as={'p'}\n size={1}\n html={desc}\n className=\"image-with-text__description mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n <div className=\"image-with-text__tabs-wrapper relative md:overflow-hidden md:overflow-x-scroll md:scrollbar-hidden\">\n <div className=\"image-with-text__tabs relative inline-flex rounded-[24px] bg-[#1D1D1F] px-[4px] md:my-[24px]\">\n {/* \u6ED1\u52A8\u80CC\u666F */}\n <div\n className=\"image-with-text__slider absolute bottom-0 top-0 rounded-[24px] bg-white transition-all duration-300 ease-in-out\"\n style={{\n left: sliderStyle.left,\n width: sliderStyle.width,\n }}\n />\n\n {/* Tab Items */}\n {datalist.map((item: ImageWithTextTabItem, index: number) => (\n <div\n key={index}\n ref={el => {\n tabRefs.current[index] = el\n }}\n onClick={e => handleTabClick(index, e)}\n className={cn(\n 'image-with-text__tab relative z-10 cursor-pointer rounded-[24px] px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px] min-xxl:px-[28px] min-xxl:py-[15px]',\n activeIndex === index ? 'image-with-text__tab--active text-black' : 'text-white'\n )}\n >\n <Heading\n as=\"h1\"\n size={1}\n html={item?.title}\n className=\"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]\"\n />\n </div>\n ))}\n </div>\n </div>\n </div>\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u5185\u5BB9\u533A\u57DF */}\n {!isTabMode && (\n <div\n className={cn('image-with-text__content flex flex-col justify-center', {\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'w-full items-start laptop:w-fit': hasItems,\n // order\u63A7\u5236\n 'order-1 laptop:order-2': hasItems && effectiveLayout === 'left',\n 'order-1':\n (hasItems && effectiveLayout === 'right') ||\n (!hasItems && (effectiveLayout === 'top' || effectiveLayout === 'left')),\n 'order-2': !hasItems && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n })}\n >\n <Heading\n as={'h2'}\n size={4}\n html={title}\n className={cn('image-with-text__title', {\n 'w-full text-left': hasItems,\n })}\n />\n {subtitle && (\n <Text\n as={'p'}\n size={hasItems ? 4 : 3}\n html={subtitle}\n className={cn(\n 'image-with-text__subtitle mt-[4px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]',\n {\n 'laptop:mt-[16px]': !hasItems,\n 'text-left min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]': hasItems,\n }\n )}\n />\n )}\n\n {/* \u57FA\u7840\u6A21\u5F0F\u7684\u63CF\u8FF0\uFF08\u4E0D\u4F7F\u7528items\u65F6\uFF09 */}\n {!hasItems && (desc || descIcon) && (\n <div className=\"image-with-text__description flex flex-row gap-[8px]\">\n {descIcon && (\n <img\n src={descIcon}\n alt=\"icon\"\n className=\"image-with-text__description-icon h-[36px] w-[36px] desktop:h-[48px] desktop:w-[48px]\"\n />\n )}\n {desc && (\n <Heading\n as={'h4'}\n size={5}\n html={desc}\n className=\"image-with-text__description-text text-[#3AD1FF] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px]\"\n />\n )}\n </div>\n )}\n\n {/* \u529F\u80FD\u5217\u8868\uFF08\u5F53\u6709items\u65F6\u663E\u793A\uFF09 */}\n {hasItems && (\n <div\n className={cn('image-with-text__items w-full grid gap-6', {\n 'grid-cols-1': cols === 1,\n 'grid-cols-2': cols === 2,\n 'grid-cols-3': cols === 3,\n 'grid-cols-4': cols === 4,\n })}\n >\n {items.map((item: ImageWithTextItem, index: number) => (\n <div key={index} className=\"image-with-text__item mt-[24px] laptop:mt-[32px] desktop:mt-[48px]\">\n <div className=\"image-with-text__item-header flex flex-row items-center gap-[8px]\">\n <Picture\n source={item.icon?.url}\n alt={item.icon?.alt}\n className=\"image-with-text__item-icon h-[28px] -translate-y-[12%] md:text-[40px] min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px]\"\n />\n <Heading\n size={5}\n as=\"h6\"\n className=\"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent\"\n >\n {item.text}\n </Heading>\n </div>\n <Text\n size={4}\n as=\"p\"\n html={item.desc}\n className=\"image-with-text__item-desc -mt-[2px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/* \u56FE\u7247/\u89C6\u9891\u533A\u57DF */}\n <div\n className={cn('image-with-text__media-wrapper', {\n // \u57FA\u7840\u6A21\u5F0F\n 'order-1': !isTabMode && (effectiveLayout === 'top' || effectiveLayout === 'left'),\n 'order-2': !isTabMode && (effectiveLayout === 'bottom' || effectiveLayout === 'right'),\n // \u4F7F\u7528items\u65F6\u7684\u7279\u6B8A\u6837\u5F0F\uFF08\u7C7B\u4F3C\u539FFeature\u6A21\u5F0F\uFF09\n 'aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0':\n hasItems,\n 'order-2 laptop:order-1 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'left',\n 'order-2 laptop:basis-[63%] desktop:basis-[57%]': hasItems && effectiveLayout === 'right',\n // TabWithImage\u6A21\u5F0F\n 'relative w-full flex-shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]':\n isTabMode,\n })}\n >\n {isTabMode ? (\n // TabWithImage\u6A21\u5F0F - \u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\n isVideo ? (\n renderVideo()\n ) : (\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={datalist[activeIndex].image.url}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.3 }}\n className=\"image-with-text__image-motion absolute left-0 top-0 w-full\"\n >\n <Picture\n source={getImageSource()}\n alt={datalist[activeIndex].image.alt}\n className=\"image-with-text__image rounded-[16px] md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448]\"\n />\n </motion.div>\n </AnimatePresence>\n )\n ) : isVideo ? (\n // \u57FA\u7840\u6A21\u5F0F - \u89C6\u9891\n renderVideo()\n ) : (\n // \u57FA\u7840\u6A21\u5F0F - \u56FE\u7247\n <Picture\n source={getImageSource()}\n className={cn('image-with-text__image', {\n 'rounded-[10px] laptop:rounded-[16px]': !hasItems,\n })}\n />\n )}\n </div>\n </section>\n )\n})\n\nImageWithText.displayName = 'ImageWithText'\n\nexport default withLayout(ImageWithText)\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "useIntersectionObserverDelay", "motion", "AnimatePresence", "componentType", "componentName", "ImageWithText", "data", "className", "ref", "title", "subtitle", "desc", "descIcon", "image", "padImage", "mobileImage", "theme", "items", "imagePosition", "layout", "mediaType", "datalist", "video", "padVideo", "mobVideo", "poster", "padPoster", "mobPoster", "cols", "effectiveLayout", "boxRef", "desktopVideoRef", "tabletVideoRef", "mobileVideoRef", "activeIndex", "setActiveIndex", "tabRefs", "sliderStyle", "setSliderStyle", "loadedDesktopVideoSrc", "setLoadedDesktopVideoSrc", "loadedTabletVideoSrc", "setLoadedTabletVideoSrc", "loadedMobileVideoSrc", "setLoadedMobileVideoSrc", "current", "offsetLeft", "offsetWidth", "handleTabClick", "index", "e", "isTabMode", "isVideo", "hasItems", "getImageSource", "activeTab", "renderVideo", "desktopPoster", "tabletPoster", "mobilePoster", "item", "el", "ImageWithText_default"]
7
7
  }
package/dist/esm/biz-components/ImageWithText/types.d.ts CHANGED
@@ -113,6 +113,8 @@ export interface ImageWithTextProps {
113
113
  items?: ImageWithTextItem[];
114
114
  /** Tab数据列表（TabWithImage模式，当存在时优先级最高） */
115
115
  datalist?: ImageWithTextTabItem[];
116
+ /** 功能项列数，默认 1行1列 */
117
+ cols?: number;
116
118
  };
117
119
  /** 自定义类名 */
118
120
  className?: string;
package/dist/esm/biz-components/Ksp/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as w,jsx as e,jsxs as p}from"react/jsx-runtime";import{Heading as i,Picture as c,Text as n}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";const s=({title:l,desc:o,image:a,mobImage:t,video:d,mobVideo:m,className:x})=>p("div",{className:r("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",x),children:[d&&m?p(w,{children:[e("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:d?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),e("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:m?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(a||t)&&e(c,{source:a?.url||t?.url,alt:a?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),p("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[e(i,{size:3,html:l,className:"ksp-card-title hidden w-full tablet:block"}),e(i,{size:2,html:l,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),e(n,{size:2,html:o,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function h({data:l,className:o}){const{title:a,items:t}=l;return p("section",{"data-ui-component-id":"ksp",className:r("ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]",o),children:[e(i,{as:"h1",size:4,html:a,className:"ksp-title text-left text-white laptop:text-center"}),p("div",{className:"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex",children:[p("div",{className:"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[0]}),e(s,{className:"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[1]})]}),p("div",{className:"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[4]}),e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[3]}),e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[2]})]}),p("div",{className:"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]",...t[5]}),e(s,{className:"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]",...t[6]})]})]}),p("div",{className:"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden",children:[e(s,{className:"h-[240px] w-[100%]",...t[0]}),p("div",{className:"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[e(s,{className:"w-[50%]",...t[1]}),e(s,{className:"w-[50%]",...t[2]})]}),e(s,{className:"max-h-[240px] w-[100%]",...t[6]}),p("div",{className:"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[e(s,{className:"w-[50%]",...t[3]}),e(s,{className:"w-[50%]",...t[4]})]}),e(s,{className:"max-h-[280px] w-[100%]",...t[5]})]})]})}var u=k(h);export{u as default};
1
+ import{Fragment as w,jsx as e,jsxs as p}from"react/jsx-runtime";import{Heading as i,Picture as c,Text as n}from"../../components/index.js";import{cn as r}from"../../helpers/utils.js";import{withLayout as k}from"../../shared/Styles.js";const s=({title:l,desc:o,image:a,mobImage:t,video:d,mobVideo:m,className:x})=>p("div",{className:r("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]",x),children:[d&&m?p(w,{children:[e("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:d?.url,poster:a?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),e("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:m?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(a||t)&&e(c,{source:a?.url||t?.url,alt:a?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),p("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[e(i,{size:3,html:l,className:"ksp-card-title hidden w-full tablet:block"}),e(i,{size:2,html:l,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),e(n,{size:2,html:o,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]});function h({data:l,className:o}){const{title:a,items:t}=l;return p("section",{"data-ui-component-id":"ksp",className:r("ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]",o),children:[e(i,{as:"h1",size:4,html:a,className:"ksp-title text-left text-white laptop:text-center"}),p("div",{className:"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex",children:[p("div",{className:"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[0]}),e(s,{className:"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[1]})]}),p("div",{className:"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[4]}),e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[3]}),e(s,{className:"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]",...t[2]})]}),p("div",{className:"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4",children:[e(s,{className:"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]",...t[5]}),e(s,{className:"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]",...t[6]})]})]}),p("div",{className:"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden",children:[e(s,{className:"h-[240px] w-[100%]",...t[0]}),p("div",{className:"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[e(s,{className:"w-[50%]",...t[1]}),e(s,{className:"w-[50%]",...t[2]})]}),e(s,{className:"max-h-[240px] w-[100%]",...t[6]}),p("div",{className:"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]",children:[e(s,{className:"w-[50%]",...t[3]}),e(s,{className:"w-[50%]",...t[4]})]}),e(s,{className:"max-h-[280px] w-[100%]",...t[5]})]})]})}var u=k(h);export{u as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Ksp/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
4
- "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n /** \u6807\u9898 */\n title?: string\n /** \u63CF\u8FF0 */\n desc?: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst ImageCard = ({\n title,\n desc,\n image,\n mobImage,\n video,\n mobVideo,\n className,\n}: ImageCardProps) => {\n return (\n <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={image?.url || mobImage?.url}\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image h-full w-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n </div>\n )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n * data={{\n * title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n * items: [\n * {\n * title: '\u9AD8\u6027\u80FD',\n * desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n * image: '/desktop.jpg',\n * mobImage: '/mobile.jpg'\n * },\n * // ... \u9700\u8981 7 \u4E2A\u9879\n * ]\n * }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n const { title, items } = data\n return (\n <section\n data-ui-component-id=\"ksp\"\n className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center bg-black laptop:scroll-mt-[46px]', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n {/* ipad, pc\u7AEF */}\n <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[0]}\n />\n <ImageCard\n className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[1]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[4]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[3]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[2]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n {...items[5]}\n />\n <ImageCard\n className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n {...items[6]}\n />\n </div>\n </div>\n\n {/* \u624B\u673A\u7AEF */}\n <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[1]} />\n <ImageCard className=\"w-[50%]\" {...items[2]} />\n </div>\n <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[3]} />\n <ImageCard className=\"w-[50%]\" {...items[4]} />\n </div>\n <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n </div>\n </section>\n )\n}\n\n\nexport default withLayout(Ksp)"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n /** \u6807\u9898 */\n title?: string\n /** \u63CF\u8FF0 */\n desc?: string\n /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n image?: Media\n /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n mobImage?: Media\n /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n video?: Media\n /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n /** \u4E3B\u6807\u9898 */\n title?: string\n /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n /** KSP \u6570\u636E */\n data: KspData\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n className?: string\n}\n\nconst ImageCard = ({\n title,\n desc,\n image,\n mobImage,\n video,\n mobVideo,\n className,\n}: ImageCardProps) => {\n return (\n <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f]', className)}>\n {video && mobVideo ? (\n <>\n <video\n playsInline\n autoPlay\n muted\n loop\n src={video?.url}\n poster={image?.url}\n className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n />\n <video\n playsInline\n autoPlay\n muted\n loop\n src={mobVideo?.url}\n poster={mobImage?.url}\n className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n />\n </>\n ) : (\n (image || mobImage) && (\n <Picture\n source={image?.url || mobImage?.url}\n alt={image?.alt || mobImage?.alt || ''}\n className=\"ksp-card-image h-full w-full\"\n imgClassName=\"h-full w-full object-cover object-bottom\"\n />\n )\n )}\n <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n <Text\n size={2}\n html={desc}\n className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n />\n </div>\n\n </div>\n )\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n * \n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u9700\u8981 7 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n * \n * @example\n * ```tsx\n * <Ksp\n * data={{\n * title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n * items: [\n * {\n * title: '\u9AD8\u6027\u80FD',\n * desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n * image: '/desktop.jpg',\n * mobImage: '/mobile.jpg'\n * },\n * // ... \u9700\u8981 7 \u4E2A\u9879\n * ]\n * }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n const { title, items } = data\n return (\n <section\n data-ui-component-id=\"ksp\"\n className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n {/* ipad, pc\u7AEF */}\n <div className=\"ksp-desktop-layout mt-[24px] hidden flex-col gap-4 text-white min-md:mt-[24px] min-xxl:mt-[24px] tablet:flex\">\n <div className=\"ksp-row ksp-row-1 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[59.53%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[0]}\n />\n <ImageCard\n className=\"w-[39.30%] tablet:min-h-[240px] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[1]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-2 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[4]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[39.30%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[3]}\n />\n <ImageCard\n className=\"w-[33%] tablet:min-h-[240px] laptop:w-[29.19%] desktop:min-h-[256px] lg-desktop:min-h-[320px]\"\n {...items[2]}\n />\n </div>\n\n <div className=\"ksp-row ksp-row-3 flex flex-nowrap items-stretch gap-4\">\n <ImageCard\n className=\"order-2 w-[59.53%] tablet:min-h-[240px] desktop:order-1 desktop:min-h-[256px] desktop:w-[39.30%] lg-desktop:min-h-[320px]\"\n {...items[5]}\n />\n <ImageCard\n className=\"order-1 w-[39.30%] tablet:min-h-[240px] desktop:order-2 desktop:min-h-[256px] desktop:w-[59.53%] lg-desktop:min-h-[320px]\"\n {...items[6]}\n />\n </div>\n </div>\n\n {/* \u624B\u673A\u7AEF */}\n <div className=\"ksp-mobile-layout mt-[24px] flex flex-col gap-[12px] text-white tablet:hidden\">\n <ImageCard className=\"h-[240px] w-[100%]\" {...items[0]} />\n <div className=\"ksp-row ksp-row-mobile-1 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[1]} />\n <ImageCard className=\"w-[50%]\" {...items[2]} />\n </div>\n <ImageCard className=\"max-h-[240px] w-[100%]\" {...items[6]} />\n <div className=\"ksp-row ksp-row-mobile-2 flex max-h-[240px] flex-nowrap items-stretch gap-[12px]\">\n <ImageCard className=\"w-[50%]\" {...items[3]} />\n <ImageCard className=\"w-[50%]\" {...items[4]} />\n </div>\n <ImageCard className=\"max-h-[280px] w-[100%]\" {...items[5]} />\n </div>\n </section>\n )\n}\n\n\nexport default withLayout(Ksp)"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "Ksp", "data", "items", "Ksp_default"]
7
7
  }
package/dist/esm/biz-components/Title/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as o,jsxs as R}from"react/jsx-runtime";import C,{useEffect as F,useRef as n,useImperativeHandle as O}from"react";import{gsap as u}from"gsap";import{SplitText as v}from"gsap/dist/SplitText";import{ScrollTrigger as x}from"gsap/dist/ScrollTrigger";import{cn as T}from"../../helpers/utils.js";import{Heading as _}from"../../components/index.js";import{withLayout as q}from"../../shared/Styles.js";import"../../hooks/useExposure.js";import{trackUrlRef as A}from"../../shared/trackUrlRef.js";import{useInView as G}from"react-intersection-observer";const k="link",y="title",b=C.forwardRef(({data:L,className:E,as:H="h2"},M)=>{const{title:i,caption:s,theme:p,extensions:l}=L,f=n(null),e=n(null),t=n(null),r=n(null),{ref:N,inView:d}=G();return O(M,()=>f.current),F(()=>{u.registerPlugin(v,x);function $(){if(!e.current)return;const D=e.current?.clientHeight||80;t.current&&t.current.revert(),r.current&&r.current.kill(),t.current=new v(e.current,{type:"words",wordsClass:"word"});const a=t.current.words;u.set(a,{opacity:0}),r.current=x.create({trigger:e.current,start:"bottom bottom-=4%",end:`bottom+=${D*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:P=>{const S=P.progress,g=a.length||1,z=.5,c=1/g,h=c*(1-z),w=(g-1)*h+c,I=Math.min(1,w>0?S/w:0);a.forEach((V,U)=>{const j=U*h,B=c;let m=(I-j)/B;m=Math.max(0,Math.min(1,m)),u.set(V,{opacity:m})})}})}return d&&$(),()=>{t.current&&t.current.revert(),r.current&&r.current.kill()}},[d]),(i||s)&&R("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:f,children:[o("div",{ref:N,className:T("space-y-4 flex-1",E,{"aiui-dark":p==="dark"}),children:o(_,{ref:e,as:H,size:4,html:s||i})}),l?.textLink&&R("a",{className:T({"aiui-dark":p==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:A(l?.link,`${k}_${y}`),"data-headless-type-name":`${k}#${y}`,"data-headless-title-desc-button":`${i}#${s}`,children:[l?.textLink,o("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:o("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});b.displayName="Title";var ot=q(b);export{ot as default};
1
+ "use client";import{jsx as i,jsxs as L}from"react/jsx-runtime";import F,{useEffect as O,useRef as n,useImperativeHandle as _}from"react";import{gsap as f}from"gsap";import{SplitText as v}from"gsap/dist/SplitText";import{ScrollTrigger as T}from"gsap/dist/ScrollTrigger";import{cn as k}from"../../helpers/utils.js";import{Heading as q}from"../../components/index.js";import{withLayout as A}from"../../shared/Styles.js";import"../../hooks/useExposure.js";import{trackUrlRef as G}from"../../shared/trackUrlRef.js";import{useInView as J}from"react-intersection-observer";const y="link",b="title",R=F.forwardRef(({data:E,className:H,as:M="h2"},N)=>{const{title:o,caption:s,theme:p,extensions:l,align:a="left"}=E,d=n(null),e=n(null),t=n(null),r=n(null),{ref:$,inView:g}=J();return _(N,()=>d.current),O(()=>{f.registerPlugin(v,T);function D(){if(!e.current)return;const P=e.current?.clientHeight||80;t.current&&t.current.revert(),r.current&&r.current.kill(),t.current=new v(e.current,{type:"words",wordsClass:"word"});const c=t.current.words;f.set(c,{opacity:0}),r.current=T.create({trigger:e.current,start:"bottom bottom-=4%",end:`bottom+=${P*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:S=>{const z=S.progress,h=c.length||1,I=.5,m=1/h,x=m*(1-I),w=(h-1)*x+m,V=Math.min(1,w>0?z/w:0);c.forEach((U,j)=>{const B=j*x,C=m;let u=(V-B)/C;u=Math.max(0,Math.min(1,u)),f.set(U,{opacity:u})})}})}return g&&D(),()=>{t.current&&t.current.revert(),r.current&&r.current.kill()}},[g]),(o||s)&&L("div",{className:"mb-6 flex items-end justify-between overflow-hidden title-box",ref:d,children:[i("div",{ref:$,className:k("space-y-4 flex-1",H,{"aiui-dark":p==="dark","text-center":a==="center","text-right":a==="right","text-left":a==="left"}),children:i(q,{ref:e,as:M,size:4,html:s||o})}),l?.textLink&&L("a",{className:k({"aiui-dark":p==="dark"},"flex items-center text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:G(l?.link,`${y}_${b}`),"data-headless-type-name":`${y}#${b}`,"data-headless-title-desc-button":`${o}#${s}`,children:[l?.textLink,i("svg",{width:"24",height:"24",className:"mb-[3px]",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",children:i("path",{className:"transition-all duration-[0.4s]",d:"M10.5 8L14.5 12L10.5 16",stroke:"#777","stroke-width":"1.5","stroke-linecap":"round"})})]})]})});R.displayName="Title";var ot=A(R);export{ot as default};
2
2
  //# sourceMappingURL=index.js.map