npm - @anker-in/headless-ui - Versions diffs - 1.1.74 → 1.1.75 - Mend

@anker-in/headless-ui 1.1.74 → 1.1.75

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 (201) hide show

package/dist/esm/biz-components/Ksp/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } 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  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {\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  /** \u4E3B\u9898 */\n  theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\n  return (\n    <div\n      className={cn(\n        'ksp-card rounded-box text-info-primary relative overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\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 laptop:inline-block absolute bottom-0 hidden w-full\"\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 laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={\n              image?.url && mobImage?.url ? `${image.url} 1920, ${mobImage.url} 767` : image?.url || mobImage?.url\n            }\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image size-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n        <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n        <Heading\n          size={2}\n          html={title}\n          className=\"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all\"\n        />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\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\u652F\u6301 4-9 \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 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className, ...rest }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      {...rest}\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n      <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n        {items.map((item, index) => (\n          <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "theme", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "rest", "items", "item", "Ksp_default"]
+  "sourcesContent": ["'use client'\n\nimport { useMediaQuery } from 'react-responsive'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } 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  /** \u79FB\u52A8\u7AEF\u56FE\u7247 */\n  mobImage?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 */\n  mobVideo?: Media\n\n  /** \u5E73\u677F\u7AEF\u56FE\u7247 (\u2265768px) */\n  tabletImage?: Media\n  /** \u5E73\u677F\u7AEF\u89C6\u9891 (\u2265768px) */\n  tabletVideo?: Media\n\n  /** \u5C0F\u684C\u9762\u7AEF\u56FE\u7247 (\u22651025px) */\n  laptopImage?: Media\n  /** \u5C0F\u684C\u9762\u7AEF\u89C6\u9891 (\u22651025px) */\n  laptopVideo?: Media\n\n  /** \u684C\u9762\u7AEF\u56FE\u7247 (\u22651440px) */\n  desktopImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 (\u22651440px) */\n  desktopVideo?: Media\n  /** \u5927\u684C\u9762\u7AEF\u56FE\u7247 */\n  image?: Media\n  /** \u5927\u684C\u9762\u7AEF\u89C6\u9891 */\n  video?: 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  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6\u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E\n */\nexport interface KspClassNames {\n  /** \u6574\u4F53\u5BB9\u5668\u7C7B\u540D */\n  root?: string\n  /** \u4E3B\u6807\u9898\u7C7B\u540D */\n  title?: string\n  /** \u5361\u7247\u5E03\u5C40\u5BB9\u5668\u7C7B\u540D */\n  layout?: string\n  /** \u5355\u4E2A\u5361\u7247\u7C7B\u540D */\n  card?: string\n  /** \u5361\u7247\u89C6\u9891\u7C7B\u540D */\n  cardVideo?: string\n  /** \u5361\u7247\u56FE\u7247\u7C7B\u540D */\n  cardImage?: string\n  /** \u5361\u7247\u56FE\u7247 img \u5143\u7D20\u7C7B\u540D */\n  cardImageImg?: string\n  /** \u5361\u7247\u5185\u5BB9\u533A\u7C7B\u540D */\n  cardContent?: string\n  /** \u5361\u7247\u6807\u9898\u7C7B\u540D */\n  cardTitle?: string\n  /** \u5361\u7247\u63CF\u8FF0\u7C7B\u540D */\n  cardDesc?: string\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n  classNames?: KspClassNames\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u4E3B\u9898 */\n  theme?: Theme\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u914D\u7F6E */\n  classNames?: KspClassNames\n}\n\nconst ImageCard = ({\n  title,\n  desc,\n  // \u65B0\u7684\u65AD\u70B9\u5A92\u4F53\u5C5E\u6027\n  mobImage,\n  mobVideo,\n  tabletImage,\n  tabletVideo,\n  laptopImage,\n  laptopVideo,\n  desktopImage,\n  desktopVideo,\n  // \u4FDD\u7559\u65E7\u5C5E\u6027\u4F5C\u4E3A\u5927\u5C4F\u9ED8\u8BA4\u503C\n  image,\n  video,\n  className,\n  theme,\n  classNames,\n}: ImageCardProps) => {\n  // \u54CD\u5E94\u5F0F\u65AD\u70B9\u68C0\u6D4B\n  const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n  const isTablet = useMediaQuery({ query: '(min-width: 768px) and (max-width: 1024px)' })\n  const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n  // desktop \u53CA\u4EE5\u4E0A\u4F7F\u7528\u9ED8\u8BA4\n\n  // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u89C6\u9891\u6E90\uFF08\u5E26 fallback\uFF09\n  const getCurrentVideo = (): Media | undefined => {\n    if (isMobile) return mobVideo || tabletVideo || laptopVideo || desktopVideo || video\n    if (isTablet) return tabletVideo || laptopVideo || desktopVideo || video\n    if (isLaptop) return laptopVideo || desktopVideo || video\n    return desktopVideo || video\n  }\n\n  // \u83B7\u53D6\u5F53\u524D\u65AD\u70B9\u7684\u5C01\u9762\u56FE\n  const getCurrentPoster = (): Media | undefined => {\n    if (isMobile) return mobImage || tabletImage || laptopImage || desktopImage || image\n    if (isTablet) return tabletImage || laptopImage || desktopImage || image\n    if (isLaptop) return laptopImage || desktopImage || image\n    return desktopImage || image\n  }\n\n  const currentVideo = getCurrentVideo()\n  const currentPoster = getCurrentPoster()\n\n  // \u6784\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6E90\n  const buildImageSource = (): string | undefined => {\n    const sources: string[] = []\n    const lgDesktop = image?.url || desktopImage?.url\n    const desktop = desktopImage?.url || image?.url\n    const laptop = laptopImage?.url || desktop\n    const tablet = tabletImage?.url || laptop\n    const mobile = mobImage?.url || tablet\n\n    if (lgDesktop) sources.push(lgDesktop)\n    if (desktop && desktop !== lgDesktop) sources.push(`${desktop} 1920`)\n    if (laptop && laptop !== desktop) sources.push(`${laptop} 1440`)\n    if (tablet && tablet !== laptop) sources.push(`${tablet} 1025`)\n    if (mobile && mobile !== tablet) sources.push(`${mobile} 768`)\n\n    return sources.length > 0 ? sources.join(', ') : undefined\n  }\n\n  // \u5224\u65AD\u662F\u5426\u6709\u89C6\u9891\n  const hasVideo = !!currentVideo?.url\n\n  // \u5224\u65AD\u662F\u5426\u6709\u4EFB\u4F55\u56FE\u7247\n  const hasAnyImage = !!(mobImage?.url || tabletImage?.url || laptopImage?.url || desktopImage?.url || image?.url)\n\n  return (\n    <div\n      className={cn(\n        'ksp-card rounded-box text-info-primary relative overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className,\n        classNames?.card\n      )}\n    >\n      {hasVideo ? (\n        <video\n          playsInline\n          autoPlay\n          muted\n          loop\n          src={currentVideo?.url}\n          poster={currentPoster?.url}\n          className={cn('ksp-card-video absolute bottom-0 w-full object-cover', classNames?.cardVideo)}\n        />\n      ) : (\n        hasAnyImage && (\n          <Picture\n            source={buildImageSource()}\n            alt={currentPoster?.alt || ''}\n            className={cn('ksp-card-image size-full', classNames?.cardImage)}\n            imgClassName={cn('size-full object-cover object-bottom', classNames?.cardImageImg)}\n          />\n        )\n      )}\n      <div className={cn('ksp-card-content desktop:p-6 lg-desktop:p-8 p-4', classNames?.cardContent)}>\n        <Heading\n          size={3}\n          html={title}\n          className={cn('ksp-card-title tablet:block hidden w-full', classNames?.cardTitle)}\n        />\n        <Heading\n          size={2}\n          html={title}\n          className={cn(\n            'ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full',\n            classNames?.cardTitle\n          )}\n        />\n        <Text\n          size={2}\n          html={desc}\n          className={cn(\n            'ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            classNames?.cardDesc\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\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\u652F\u6301 4-9 \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 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className, classNames, ...rest }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      {...rest}\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className,\n        classNames?.root\n      )}\n    >\n      <Heading\n        as=\"h1\"\n        size={4}\n        html={title}\n        className={cn('ksp-title laptop:text-center text-left', classNames?.title)}\n      />\n      <div\n        className={cn(\n          'ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 mt-[24px] grid grid-cols-2 gap-3',\n          classNames?.layout\n        )}\n      >\n        {items.map((item, index) => (\n          <ImageCard\n            key={index}\n            {...item}\n            className={getCardLayoutClass(index, items.length)}\n            classNames={classNames}\n          />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
+  "mappings": "aAoLQ,cAAAA,EAmBF,QAAAC,MAnBE,oBAlLR,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBA+F3B,MAAMC,EAAY,CAAC,CACjB,MAAAC,EACA,KAAAC,EAEA,SAAAC,EACA,SAAAC,EACA,YAAAC,EACA,YAAAC,EACA,YAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EAEA,MAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,WAAAC,CACF,IAAsB,CAEpB,MAAMC,EAAWtB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDuB,EAAWvB,EAAc,CAAE,MAAO,4CAA6C,CAAC,EAChFwB,EAAWxB,EAAc,CAAE,MAAO,6CAA8C,CAAC,EAIjFyB,EAAkB,IAClBH,EAAiBZ,GAAYE,GAAeE,GAAeE,GAAgBE,EAC3EK,EAAiBX,GAAeE,GAAeE,GAAgBE,EAC/DM,EAAiBV,GAAeE,GAAgBE,EAC7CF,GAAgBE,EAInBQ,EAAmB,IACnBJ,EAAiBb,GAAYE,GAAeE,GAAeE,GAAgBE,EAC3EM,EAAiBZ,GAAeE,GAAeE,GAAgBE,EAC/DO,EAAiBX,GAAeE,GAAgBE,EAC7CF,GAAgBE,EAGnBU,EAAeF,EAAgB,EAC/BG,EAAgBF,EAAiB,EAGjCG,EAAmB,IAA0B,CACjD,MAAMC,EAAoB,CAAC,EACrBC,EAAYd,GAAO,KAAOF,GAAc,IACxCiB,EAAUjB,GAAc,KAAOE,GAAO,IACtCgB,EAASpB,GAAa,KAAOmB,EAC7BE,EAASvB,GAAa,KAAOsB,EAC7BE,EAAS1B,GAAU,KAAOyB,EAEhC,OAAIH,GAAWD,EAAQ,KAAKC,CAAS,EACjCC,GAAWA,IAAYD,GAAWD,EAAQ,KAAK,GAAGE,CAAO,OAAO,EAChEC,GAAUA,IAAWD,GAASF,EAAQ,KAAK,GAAGG,CAAM,OAAO,EAC3DC,GAAUA,IAAWD,GAAQH,EAAQ,KAAK,GAAGI,CAAM,OAAO,EAC1DC,GAAUA,IAAWD,GAAQJ,EAAQ,KAAK,GAAGK,CAAM,MAAM,EAEtDL,EAAQ,OAAS,EAAIA,EAAQ,KAAK,IAAI,EAAI,MACnD,EAGMM,EAAW,CAAC,CAACT,GAAc,IAG3BU,EAAc,CAAC,EAAE5B,GAAU,KAAOE,GAAa,KAAOE,GAAa,KAAOE,GAAc,KAAOE,GAAO,KAE5G,OACElB,EAAC,OACC,UAAWK,EACT,kEACA,CACE,YAAagB,IAAU,MACzB,EACAD,EACAE,GAAY,IACd,EAEC,UAAAe,EACCtC,EAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAK6B,GAAc,IACnB,OAAQC,GAAe,IACvB,UAAWxB,EAAG,uDAAwDiB,GAAY,SAAS,EAC7F,EAEAgB,GACEvC,EAACI,EAAA,CACC,OAAQ2B,EAAiB,EACzB,IAAKD,GAAe,KAAO,GAC3B,UAAWxB,EAAG,2BAA4BiB,GAAY,SAAS,EAC/D,aAAcjB,EAAG,uCAAwCiB,GAAY,YAAY,EACnF,EAGJtB,EAAC,OAAI,UAAWK,EAAG,kDAAmDiB,GAAY,WAAW,EAC3F,UAAAvB,EAACG,EAAA,CACC,KAAM,EACN,KAAMM,EACN,UAAWH,EAAG,4CAA6CiB,GAAY,SAAS,EAClF,EACAvB,EAACG,EAAA,CACC,KAAM,EACN,KAAMM,EACN,UAAWH,EACT,mFACAiB,GAAY,SACd,EACF,EACAvB,EAACK,EAAA,CACC,KAAM,EACN,KAAMK,EACN,UAAWJ,EACT,qJACAiB,GAAY,QACd,EACF,GACF,GACF,CAEJ,EAMMiB,EAAwD,CAC5D,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,wQACL,EACA,EAAG,CACD,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAxB,EAAW,WAAAE,EAAY,GAAGuB,CAAK,EAAa,CAC/D,KAAM,CAAE,MAAArC,EAAO,MAAAsC,EAAO,MAAAzB,EAAQ,OAAQ,EAAIuB,EAC1C,OACE5C,EAAC,WACE,GAAG6C,EACJ,uBAAqB,MACrB,UAAWxC,EACT,yGACA,CACE,YAAagB,IAAU,MACzB,EACAD,EACAE,GAAY,IACd,EAEA,UAAAvB,EAACG,EAAA,CACC,GAAG,KACH,KAAM,EACN,KAAMM,EACN,UAAWH,EAAG,yCAA0CiB,GAAY,KAAK,EAC3E,EACAvB,EAAC,OACC,UAAWM,EACT,kGACAiB,GAAY,MACd,EAEC,SAAAwB,EAAM,IAAI,CAACC,EAAMN,IAChB1C,EAACQ,EAAA,CAEE,GAAGwC,EACJ,UAAWP,EAAmBC,EAAOK,EAAM,MAAM,EACjD,WAAYxB,GAHPmB,CAIP,CACD,EACH,GACF,CAEJ,CAEA,IAAOO,EAAQ1C,EAAWqC,CAAG",
+  "names": ["jsx", "jsxs", "useMediaQuery", "Heading", "Picture", "Text", "cn", "withLayout", "ImageCard", "title", "desc", "mobImage", "mobVideo", "tabletImage", "tabletVideo", "laptopImage", "laptopVideo", "desktopImage", "desktopVideo", "image", "video", "className", "theme", "classNames", "isMobile", "isTablet", "isLaptop", "getCurrentVideo", "getCurrentPoster", "currentVideo", "currentPoster", "buildImageSource", "sources", "lgDesktop", "desktop", "laptop", "tablet", "mobile", "hasVideo", "hasAnyImage", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "rest", "items", "item", "Ksp_default"]
 }

package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{Fragment as Ne,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as u,useRef as n,useMemo as ge,useEffect as P,forwardRef as ve,useImperativeHandle as ye}from"react";import{debounce as xe}from"lodash";import{cn as a}from"../../helpers/utils.js";import{withLayout as be}from"../../shared/Styles.js";import Q from"../../components/button.js";import{VideoModal as he}from"../VideoModal/index.js";import{convertLexicalToHTML as W}from"@payloadcms/richtext-lexical/html";import{useInView as we}from"react-intersection-observer";import{useExposure as He}from"../../hooks/useExposure.js";import X from"../../helpers/ScrollLoadVideo.js";import{gsap as _}from"gsap";import{SplitText as Te}from"gsap/dist/SplitText";import{ScrollTrigger as Z}from"gsap/dist/ScrollTrigger";const ke="media_player_base",Me="video",A=({defaultConverters:f})=>({...f,text:k=>{const{node:t}=k;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),ee=ve(({className:f="",id:k,onBtnClick:t,data:{title:g,videoTitle:v,btnText:y,youtubeId:S,video:V,mobileVideo:te,theme:$,img:B,shape:C,titleAnimation:x="fade-in",...re},...D},oe)=>{const{sticky:s}=re,[j,F]=u(!1),[q,ne]=u(0),[se,le]=u(0),[b,ie]=u(0),[U,M]=u(!1),h=n(null),Y=n(null),r=n(null),w=n(null),O=n(null),H=n(null),N=n(null),L=n(null),{ref:ae,inView:l}=we();ye(oe,()=>r.current);const T=typeof g=="string"?g:g&&W({data:g,converters:A}),R=typeof v=="string"?v:v&&W({data:v,converters:A});P(()=>{l?(h.current?.play(),F(!0)):(h.current?.pause(),F(!1))},[l]);const z=xe(()=>{if(r.current){const c=r.current.getBoundingClientRect(),i=window.innerHeight,d=window.scrollY||window.pageYOffset,o=c.bottom+d,p=document.documentElement.scrollHeight-o;ne(p>i?i:p)}if(r.current){const c=r.current.clientHeight,i=window.innerHeight;le(c+i)}},600);P(()=>(z(),window.addEventListener("resize",z),()=>{window.removeEventListener("resize",z)}),[]),P(()=>{function c(){if(!w.current||x!=="fade-in")return;const d=w.current?.clientHeight||80;H.current=new Te(w.current,{type:"words",wordsClass:"word"});const o=H.current.words;_.set(o,{opacity:0}),N.current=Z.create({trigger:r.current,start:"top center-=10%",end:`top+=${d*1.5+80}px center-=10%`,scrub:!0,onUpdate:G=>{const p=G.progress,J=o.length,de=1/J,K=.5;o.forEach((pe,ue)=>{const me=ue/J*(1-K),fe=de*(1+K);let I=(p-me)/fe;I=Math.max(0,Math.min(I,1)),_.set(pe,{opacity:I})}),_.set(Y.current,{opacity:p})}})}function i(){L.current=Z.create({trigger:r.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:d=>{const o=d.progress;console.log("progress__",o),ie(o)}})}return l&&(c(),i()),()=>{H.current&&H.current.revert(),N.current&&N.current.kill(),L.current&&L.current.kill()}},[x,l]),He(O,{componentType:Me,componentName:ke,componentTitle:R});const ce=ge(()=>l&&b>0&&b<.9?3:l?2:1,[b,l]),E="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return m(Ne,{children:[s&&e("div",{...D,ref:r,className:a("relative z-10",E,{"aiui-dark":$==="dark","rounded-box":C==="rounded"},f),children:e("div",{ref:ae,children:!x&&m("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!j&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),R&&j&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:R}}),y&&e(Q,{variant:"link",className:a("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{M(!0),t&&t?.()},children:y})]})})}),m("div",{...s?{}:D,style:s?{marginBottom:`-${q}px`,marginTop:`-${se}px`,zIndex:ce}:{},className:a("relative",f),children:[e("div",{className:"sticky top-0 ",children:m("div",{id:k,className:a("relative overflow-hidden",s?"h-screen w-full":E,{"aiui-dark":$==="dark","rounded-box":C==="rounded"}),children:[x==="fade-in"&&T&&e("div",{children:e("div",{ref:w,className:"media-player-base-title lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}})}),y&&e("div",{className:"flex items-center justify-center",children:e(Q,{variant:"link",className:a("media-player-base-button member-equity-button-secondary text-btn-primary-foreground z-20 translate-y-10"),onClick:()=>{M(!0),t&&t?.()},children:y})}),m("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-b*100}vh`},children:[e(X,{videoRef:h,poster:B?.url||"",src:V?.url,className:"tablet:block hidden size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(X,{videoRef:h,poster:B?.url||"",src:te?.url||V?.url,className:"tablet:hidden block size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),s&&e("div",{className:a(s&&"relative box-content block",E),style:s?{height:`${q}px`}:{},ref:O})]}),U&&S&&e(he,{visible:U,youTubeId:S,onCloseModal:()=>M(!1)})]})});ee.displayName="MediaPlayerBase";var je=be(ee);export{je as default};
+"use client";import{Fragment as Ne,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as v,useRef as r,useMemo as ye,useEffect as _,forwardRef as xe,useImperativeHandle as he}from"react";import{debounce as be}from"lodash";import{cn as i}from"../../helpers/utils.js";import{withLayout as we}from"../../shared/Styles.js";import X from"../../components/button.js";import{VideoModal as He}from"../VideoModal/index.js";import{convertLexicalToHTML as Z}from"@payloadcms/richtext-lexical/html";import{useInView as Te}from"react-intersection-observer";import{useExposure as ke}from"../../hooks/useExposure.js";import A from"../../helpers/ScrollLoadVideo.js";import{gsap as d}from"gsap";import{SplitText as ee}from"gsap/dist/SplitText";import{ScrollTrigger as S}from"gsap/dist/ScrollTrigger";const Me="media_player_base",Le="video";d.registerPlugin(S,ee);const te=({defaultConverters:y})=>({...y,text:L=>{const{node:t}=L;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),re=xe(({className:y="",id:L,onBtnClick:t,data:{title:x,videoTitle:h,btnText:b,youtubeId:V,video:$,mobileVideo:ne,theme:B,img:C,shape:D,titleAnimation:w="fade-in",...oe},...F},se)=>{const{sticky:n}=oe,[j,q]=v(!1),[U,le]=v(0),[ie,ae]=v(0),[H,ce]=v(0),[Y,N]=v(!1),T=r(null),O=r(null),o=r(null),k=r(null),G=r(null),M=r(null),u=r(null),R=r(null),z=r(null),{ref:de,inView:l}=Te();he(se,()=>o.current);const m=typeof x=="string"?x:x&&Z({data:x,converters:te}),J=typeof h=="string"?h:h&&Z({data:h,converters:te});_(()=>{l?(T.current?.play(),q(!0)):(T.current?.pause(),q(!1))},[l]);const I=be(()=>{if(o.current){const f=o.current.getBoundingClientRect(),a=window.innerHeight,g=window.scrollY||window.pageYOffset,s=f.bottom+g,c=document.documentElement.scrollHeight-s;le(c>a?a:c)}if(o.current){const f=o.current.clientHeight,a=window.innerHeight;ae(f+a)}},600);_(()=>(I(),window.addEventListener("resize",I),()=>{window.removeEventListener("resize",I)}),[]),_(()=>{function f(){if(!k.current||w!=="fade-in")return;const g=k.current?.clientHeight||80;M.current=new ee(k.current,{type:"words",wordsClass:"word"});const s=M.current.words;d.set(s,{opacity:0}),u.current&&d.set(u.current,{opacity:0}),R.current=S.create({trigger:o.current,start:"top center-=10%",end:`top+=${g*1.5+80}px center-=10%`,scrub:!0,onUpdate:K=>{const c=K.progress,Q=s.length,ue=1/Q,W=.5;s.forEach((me,fe)=>{const ge=fe/Q*(1-W),ve=ue*(1+W);let P=(c-ge)/ve;P=Math.max(0,Math.min(P,1)),d.set(me,{opacity:P})}),d.set(O.current,{opacity:c}),u.current&&d.set(u.current,{opacity:c>=.6?1:0})}})}function a(){z.current=S.create({trigger:o.current,start:"bottom bottom",end:"bottom top",scrub:!0,onUpdate:g=>{const s=g.progress;console.log("progress__",s),ce(s)}})}return l&&(f(),a()),()=>{M.current&&M.current.revert(),R.current&&R.current.kill(),z.current&&z.current.kill()}},[w,l]),ke(G,{componentType:Le,componentName:Me,componentTitle:m});const pe=ye(()=>l&&H>0&&H<.9?3:l?2:1,[H,l]),E="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(Ne,{children:[n&&e("div",{...F,ref:o,className:i("pointer-events-none relative z-10",E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"},y),children:e("div",{ref:de,children:!w&&p("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[m&&!j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),J&&j&&e("div",{className:"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:J}}),b&&e(X,{variant:"link",className:i("member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]})})}),p("div",{...n?{}:F,style:n?{marginBottom:`-${U}px`,marginTop:`-${ie}px`,zIndex:pe}:{zIndex:5},className:i("relative",y),children:[e("div",{className:"sticky top-0 ",children:p("div",{id:L,className:i("relative overflow-hidden",n?"h-screen w-full":E,{"aiui-dark":B==="dark","rounded-box":D==="rounded"}),children:[w==="fade-in"&&p("div",{className:i("absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center",n?"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2":"left-0 top-0"),children:[m&&e("div",{ref:k,className:"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:m}}),b&&e(X,{ref:u,variant:"link",className:i("media-player-base-button member-equity-button-secondary text-info-primary"),onClick:()=>{N(!0),t&&t?.()},children:b})]}),p("div",{className:"media-cover left-0 top-0 h-screen w-screen overflow-hidden",style:{height:`${102-H*100}vh`},children:[e(A,{videoRef:T,poster:C?.url||"",src:$?.url,className:"tablet:block hidden size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e(A,{videoRef:T,poster:C?.url||"",src:ne?.url||$?.url,className:"tablet:hidden block size-full min-h-screen",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{ref:O,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),n&&e("div",{className:i(n&&"pointer-events-none relative box-content block",E),style:n?{height:`${U}px`}:{},ref:G})]}),Y&&V&&e(He,{visible:Y,youTubeId:V,onCloseModal:()=>N(!1)})]})});re.displayName="MediaPlayerBase";var je=we(re);export{je as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/MediaPlayerBase/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div>\n                  <div\n                    ref={titleFadeInRef}\n                    className=\"media-player-base-title lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                </div>\n              )}\n              {btnText && (\n                <div className=\"flex items-center justify-center\">\n                  <Button\n                    variant=\"link\"\n                    className={cn(\n                      'media-player-base-button member-equity-button-secondary text-btn-primary-foreground z-20 translate-y-10'\n                    )}\n                    onClick={() => {\n                      setVisible(true)\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                  </Button>\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\n// \u6CE8\u518C gsap \u63D2\u4EF6\ngsap.registerPlugin(ScrollTrigger, SplitText)\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const btnFadeInRef = useRef<HTMLButtonElement>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        if (btnFadeInRef.current) gsap.set(btnFadeInRef.current, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n            if (btnFadeInRef.current) {\n              gsap.set(btnFadeInRef.current, { opacity: progress >= 0.6 ? 1 : 0 })\n            }\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-info-primary text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : { zIndex: 5 }\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && (\n                <div\n                  className={cn(\n                    'absolute z-30 flex w-full flex-col items-center justify-center gap-4 px-4 text-center',\n                    sticky ? 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2' : 'left-0 top-0'\n                  )}\n                >\n                  {title_html && (\n                    <div\n                      ref={titleFadeInRef}\n                      className=\"media-player-base-title lg-desktop:text-[64px] text-info-primary text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      ref={btnFadeInRef}\n                      variant=\"link\"\n                      className={cn('media-player-base-button member-equity-button-secondary text-info-primary')}\n                      onClick={() => {\n                        setVisible(true)\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "btnFadeInRef", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "MediaPlayerBase_default"]
 }

package/dist/esm/biz-components/PromotionalBar/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,jsxs as h}from"react/jsx-runtime";import*as g from"react";import{cn as p}from"../../helpers/index.js";import{Heading as v,Button as k,Picture as B}from"../../components/index.js";import{withLayout as M}from"../../shared/Styles.js";const P=o=>{if(!o)return;const{mobile:e,tablet:u,laptop:d,desktop:f,lgDesktop:c}=o,t=[],s=b=>b?.url,i=s(c),n=s(f),r=s(d),l=s(u),m=s(e);return i?t.push(i):n?t.push(n):r?t.push(r):l?t.push(l):m&&t.push(m),n&&i&&t.push(`${n} 1920`),r&&(n||i)&&t.push(`${r} 1440`),l&&(r||n||i)&&t.push(`${l} 1024`),m&&(l||r||n||i)&&t.push(`${m} 768`),t.length>0?t.join(", "):void 0},x=g.forwardRef(({classNames:o,data:e,className:u,...d},f)=>{const{backgroundImage:c}=e,t=g.useMemo(()=>P(c),[c]);return a("div",{ref:f,...d,className:p("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",o?.root,u),children:h("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[h("div",{className:p("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",o?.content),children:[e.contentTitle&&a(v,{className:p("line-clamp-2 text-[#F5F6F7]",o?.title),html:e.contentTitle,size:3}),e.contentDesc&&a("p",{className:p("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",o?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),a("div",{className:"laptop:mt-4 mt-2",children:e.buttonText&&a(k,{as:"a",variant:"link",className:p("!p-0 text-[#F5F6F7]",o?.button),href:e.buttonLink,iconClassName:"size-4",children:e.buttonText})})]}),a(B,{source:t,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});x.displayName="PromotionalBar";var F=M(x);export{F as default};
+"use client";import{jsx as s,jsxs as h}from"react/jsx-runtime";import*as g from"react";import{cn as p}from"../../helpers/index.js";import{Heading as v,Button as k,Picture as B}from"../../components/index.js";import{withLayout as P}from"../../shared/Styles.js";import{getLocalizedPath as M}from"../../helpers/index.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";const D=o=>{if(!o)return;const{mobile:e,tablet:m,laptop:u,desktop:d,lgDesktop:f}=o,t=[],n=b=>b?.url,r=n(f),i=n(d),a=n(u),l=n(m),c=n(e);return r?t.push(r):i?t.push(i):a?t.push(a):l?t.push(l):c&&t.push(c),i&&r&&t.push(`${i} 1920`),a&&(i||r)&&t.push(`${a} 1440`),l&&(a||i||r)&&t.push(`${l} 1024`),c&&(l||a||i||r)&&t.push(`${c} 768`),t.length>0?t.join(", "):void 0},x=g.forwardRef(({classNames:o,data:e,className:m,...u},d)=>{const{locale:f="us"}=T(),{backgroundImage:t}=e,n=g.useMemo(()=>D(t),[t]);return s("div",{ref:d,...u,className:p("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",o?.root,m),children:h("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[h("div",{className:p("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",o?.content),children:[e.contentTitle&&s(v,{className:p("line-clamp-2 text-[#F5F6F7]",o?.title),html:e.contentTitle,size:3}),e.contentDesc&&s("p",{className:p("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",o?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),s("div",{className:"laptop:mt-4 mt-2",children:e.buttonText&&s(k,{as:"a",variant:"link",className:p("!p-0 text-[#F5F6F7]",o?.button),href:M(e.buttonLink||"",f),iconClassName:"size-4",children:e.buttonText})})]}),s(B,{source:n,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});x.displayName="PromotionalBar";var w=P(x);export{w as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/PromotionalBar/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { backgroundImage } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root, className)}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading\n                className={cn('line-clamp-2 text-[#F5F6F7]', classNames?.title)}\n                html={data.contentTitle}\n                size={3}\n              />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n                  href={data.buttonLink}\n                  iconClassName=\"size-4\"\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
-  "mappings": "aA6GU,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBA3GV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAoD3B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBrB,EAAM,WAC3B,CAAC,CAAE,WAAAsB,EAAY,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACjD,KAAM,CAAE,gBAAAnB,CAAgB,EAAIgB,EACtBI,EAAgB3B,EAAM,QAAQ,IAC3BM,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACET,EAAC,OACC,IAAK4B,EACJ,GAAGD,EACJ,UAAWxB,EAAG,kDAAmDqB,GAAY,KAAME,CAAS,EAG5F,SAAAzB,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAqB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJzB,EAACI,EAAA,CACC,UAAWD,EAAG,8BAA+BqB,GAAY,KAAK,EAC9D,KAAMC,EAAK,aACX,KAAM,EACR,EAEDA,EAAK,aACJzB,EAAC,KACC,UAAWG,EACT,6HACAqB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEFzB,EAAC,OAAI,UAAU,mBACZ,SAAAyB,EAAK,YACJzB,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBqB,GAAY,MAAM,EACvD,KAAMC,EAAK,WACX,cAAc,SAEb,SAAAA,EAAK,WACR,EAEJ,GACF,EACAzB,EAACM,EAAA,CACC,OAAQuB,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CACF,EAEAN,EAAe,YAAc,iBAC7B,IAAOO,EAAQvB,EAAWgB,CAAc",
-  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "pictureSource", "PromotionalBar_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\nimport { getLocalizedPath } from '../../helpers/index.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(\n  ({ classNames, data, className, ...rest }, ref) => {\n    const { locale = 'us' } = useAiuiContext()\n    const { backgroundImage } = data\n    const pictureSource = React.useMemo(() => {\n      return convertResponsiveImageToString(backgroundImage)\n    }, [backgroundImage])\n    return (\n      <div\n        ref={ref}\n        {...rest}\n        className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root, className)}\n      >\n        {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n        <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n          <div\n            className={cn(\n              'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n              classNames?.content\n            )}\n          >\n            {data.contentTitle && (\n              <Heading\n                className={cn('line-clamp-2 text-[#F5F6F7]', classNames?.title)}\n                html={data.contentTitle}\n                size={3}\n              />\n            )}\n            {data.contentDesc && (\n              <p\n                className={cn(\n                  'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n                  classNames?.description\n                )}\n                dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n              />\n            )}\n            <div className=\"laptop:mt-4 mt-2\">\n              {data.buttonText && (\n                <Button\n                  as=\"a\"\n                  variant=\"link\"\n                  className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n                  href={getLocalizedPath(data.buttonLink || '', locale)}\n                  iconClassName=\"size-4\"\n                >\n                  {data.buttonText}\n                </Button>\n              )}\n            </div>\n          </div>\n          <Picture\n            source={pictureSource}\n            className=\"absolute inset-0 z-10 \"\n            imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
+  "mappings": "aAgHU,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBA9GV,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,oBAAAC,MAAwB,yBACjC,OAAS,kBAAAC,MAAsB,2BAmD/B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBvB,EAAM,WAC3B,CAAC,CAAE,WAAAwB,EAAY,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACjD,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAItB,EAAe,EACnC,CAAE,gBAAAE,CAAgB,EAAIgB,EACtBK,EAAgB9B,EAAM,QAAQ,IAC3BQ,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACEX,EAAC,OACC,IAAK8B,EACJ,GAAGD,EACJ,UAAW1B,EAAG,kDAAmDuB,GAAY,KAAME,CAAS,EAG5F,SAAA3B,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAuB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJ3B,EAACI,EAAA,CACC,UAAWD,EAAG,8BAA+BuB,GAAY,KAAK,EAC9D,KAAMC,EAAK,aACX,KAAM,EACR,EAEDA,EAAK,aACJ3B,EAAC,KACC,UAAWG,EACT,6HACAuB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEF3B,EAAC,OAAI,UAAU,mBACZ,SAAA2B,EAAK,YACJ3B,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBuB,GAAY,MAAM,EACvD,KAAMlB,EAAiBmB,EAAK,YAAc,GAAII,CAAM,EACpD,cAAc,SAEb,SAAAJ,EAAK,WACR,EAEJ,GACF,EACA3B,EAACM,EAAA,CACC,OAAQ0B,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CACF,EAEAP,EAAe,YAAc,iBAC7B,IAAOQ,EAAQ1B,EAAWkB,CAAc",
+  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "getLocalizedPath", "useAiuiContext", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "className", "rest", "ref", "locale", "pictureSource", "PromotionalBar_default"]
 }

package/dist/esm/biz-components/Title/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as v}from"react/jsx-runtime";import W,{useEffect as X,useRef as m,useImperativeHandle as Y,useState as tt}from"react";import{gsap as w}from"gsap";import{SplitText as H}from"gsap/dist/SplitText";import{ScrollTrigger as R}from"gsap/dist/ScrollTrigger";import{cn as c}from"../../helpers/utils.js";import{cva as E}from"class-variance-authority";import{Heading as et,Text as nt}from"../../components/index.js";import{withLayout as rt}from"../../shared/Styles.js";import{trackUrlRef as it}from"../../shared/trackUrlRef.js";import{useInView as st}from"react-intersection-observer";import ot from"./Countdown.js";const M="link",V="title",at=E("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),lt=E("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),P=({data:r,className:p})=>{const{theme:e="light",extensions:i,title:u,caption:f,align:s}=r;return i?.textLink?v("a",{className:c({"aiui-dark":e==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":e==="light"},{"text-[#F5F6F7]":e==="dark"},{"justify-center mt-4":s==="center"},{"mt-1 laptop:mt-0":s==="left"},p),href:it(i?.link,`${M}_${V}`),"data-headless-type-name":`${M}#${V}`,"data-headless-title-desc-button":`${u}#${f}`,children:[t("div",{className:"truncate whitespace-nowrap",children:i?.textLink}),t("div",{className:"lg-desktop:size-5 size-4",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 20 20",fill:"none",children:t("path",{d:"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z",fill:e==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]}):null},$=W.forwardRef(({data:r,className:p,as:e="h2",weight:i="bold",...u},f)=>{const{title:s,caption:T,subtitle:b,countdown:k,showCountdown:z=!1,theme:d="light",extensions:A,align:o="left"}=r,F=m(null),a=m(null),n=m(null),l=m(null),[B,S]=tt(!0),{ref:j,inView:y}=st();Y(f,()=>F.current);const D=()=>{S(!1)};return X(()=>{w.registerPlugin(H,R);function I(){if(!a.current)return;const _=a.current?.clientHeight||80;n.current&&n.current.revert(),l.current&&l.current.kill(),n.current=new H(a.current,{type:"words",wordsClass:"word"});const g=n.current.words;w.set(g,{opacity:0}),l.current=R.create({trigger:a.current,start:"bottom bottom-=4%",end:`bottom+=${_*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:O=>{const U=O.progress,N=g.length||1,Z=.5,h=1/N,L=h*(1-Z),C=(N-1)*L+h,q=Math.min(1,C>0?U/C:0);g.forEach((G,J)=>{const K=J*L,Q=h;let x=(q-K)/Q;x=Math.max(0,Math.min(1,x)),w.set(G,{opacity:x})})}})}return y&&I(),()=>{n.current&&n.current.revert(),l.current&&l.current.kill()}},[y]),v("div",{...u,id:A?.id,className:"titleBottom title-box flex items-end justify-between gap-2 pb-6",ref:F,children:[v("div",{ref:j,className:c("flex-1",p,{"aiui-dark":d==="dark","text-center":o==="center","text-left":o==="left"}),children:[(T||s)&&t(et,{ref:a,as:e,size:4,html:T||s,weight:i,className:at({theme:d})}),b&&t(nt,{html:b,as:"p",className:lt({theme:d})}),t(P,{data:r,className:c({"laptop:hidden":o==="left"})}),z&&k&&B&&t(ot,{className:c("mt-4 justify-start",{"justify-center":o==="center"}),config:k,onCountdownEnd:D,theme:d})]}),t(P,{data:r,className:c("hidden",{"laptop:flex":o==="left"})})]})});$.displayName="Title";var Tt=rt($);export{Tt as default};
+"use client";import{jsx as e,jsxs as b}from"react/jsx-runtime";import tt,{useEffect as et,useRef as u,useImperativeHandle as nt,useState as st}from"react";import{gsap as v}from"gsap";import{SplitText as D}from"gsap/dist/SplitText";import{ScrollTrigger as M}from"gsap/dist/ScrollTrigger";import{cn as d}from"../../helpers/utils.js";import{cva as E}from"class-variance-authority";import{Heading as rt,Text as it,Countdown as ot}from"../../components/index.js";import{withLayout as at}from"../../shared/Styles.js";import{trackUrlRef as lt}from"../../shared/trackUrlRef.js";import{useInView as ct}from"react-intersection-observer";const C="link",R="title",dt=E("",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),mt=E("desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]",{variants:{theme:{light:"text-[#080A0F]",dark:"text-[#F5F6F7]"}},defaultVariants:{theme:"light"}}),V=({data:r,className:p})=>{const{theme:n="light",extensions:i,title:f,caption:h,align:o}=r;return i?.textLink?b("a",{className:d({"aiui-dark":n==="dark"},"hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]",{"text-[#080A0F]":n==="light"},{"text-[#F5F6F7]":n==="dark"},{"justify-center mt-4":o==="center"},{"mt-1 laptop:mt-0":o==="left"},p),href:lt(i?.link,`${C}_${R}`),"data-headless-type-name":`${C}#${R}`,"data-headless-title-desc-button":`${f}#${h}`,children:[e("div",{className:"truncate whitespace-nowrap",children:i?.textLink}),e("div",{className:"lg-desktop:size-5 size-4",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",viewBox:"0 0 20 20",fill:"none",children:e("path",{d:"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z",fill:n==="dark"?"#F5F6F7":"#080A0F",className:"transition-all duration-[0.4s]"})})})]}):null},z=tt.forwardRef(({data:r,className:p,as:n="h2",weight:i="bold",...f},h)=>{const{title:o,caption:T,subtitle:k,countdown:t,showCountdown:S=!1,theme:m="light",extensions:P,align:a="left"}=r,y=u(null),l=u(null),s=u(null),c=u(null),[$,A]=st(!0),{ref:B,inView:F}=ct();nt(h,()=>y.current);const _=()=>{A(!1)},I=t?.targetDateTime||t?.targetDate||"",j=t?.targetDateTime_tz,O=t?.labels?{day:t.labels.days||"Day",hour:t.labels.hours||"Hours",minute:t.labels.minutes||"Mins",second:t.labels.seconds||"Secs"}:void 0;return et(()=>{v.registerPlugin(D,M);function U(){if(!l.current)return;const W=l.current?.clientHeight||80;s.current&&s.current.revert(),c.current&&c.current.kill(),s.current=new D(l.current,{type:"words",wordsClass:"word"});const g=s.current.words;v.set(g,{opacity:0}),c.current=M.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${W*1.5+60}px bottom-=4%`,scrub:!0,invalidateOnRefresh:!0,onUpdate:Z=>{const q=Z.progress,L=g.length||1,G=.5,w=1/L,N=w*(1-G),H=(L-1)*N+w,J=Math.min(1,H>0?q/H:0);g.forEach((K,Q)=>{const X=Q*N,Y=w;let x=(J-X)/Y;x=Math.max(0,Math.min(1,x)),v.set(K,{opacity:x})})}})}return F&&U(),()=>{s.current&&s.current.revert(),c.current&&c.current.kill()}},[F]),b("div",{...f,id:P?.id,className:"titleBottom title-box flex items-end justify-between gap-2 pb-6",ref:y,children:[b("div",{ref:B,className:d("flex-1",p,{"aiui-dark":m==="dark","text-center":a==="center","text-left":a==="left"}),children:[(T||o)&&e(rt,{ref:l,as:n,size:4,html:T||o,weight:i,className:dt({theme:m})}),k&&e(it,{html:k,as:"p",className:mt({theme:m})}),e(V,{data:r,className:d({"laptop:hidden":a==="left"})}),S&&t&&$&&e(ot,{endDate:I,endDate_tz:j,timeLabels:O,showDays:t?.showDays,showHours:t?.showHours,showMinutes:t?.showMinutes,showSeconds:t?.showSeconds,theme:m,onExpire:_,hideWhenExpired:!0,align:a==="center"?"center":"left",className:d("mt-4")})]}),e(V,{data:r,className:d("hidden",{"laptop:flex":a==="left"})})]})});z.displayName="Title";var kt=at(z);export{kt as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Title/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\nimport Countdown from './Countdown.js'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-[#F5F6F7]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n  'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-[#F5F6F7]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n  const { theme = 'light', extensions, title, caption, align } = data\n  if (!extensions?.textLink) return null\n  return (\n    <a\n      className={cn(\n        { 'aiui-dark': theme === 'dark' },\n        'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n        { 'text-[#080A0F]': theme === 'light' },\n        { 'text-[#F5F6F7]': theme === 'dark' },\n        { 'justify-center mt-4': align === 'center' },\n        { 'mt-1 laptop:mt-0': align === 'left' },\n        className\n      )}\n      href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n      data-headless-type-name={`${componentType}#${componentName}`}\n      data-headless-title-desc-button={`${title}#${caption}`}\n    >\n      <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n      <div className=\"lg-desktop:size-5 size-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 20 20\" fill=\"none\">\n          <path\n            d=\"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z\"\n            fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n            className=\"transition-all duration-[0.4s]\"\n          />\n        </svg>\n      </div>\n    </a>\n  )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n  ({ data, className, as = 'h2', weight = 'bold', ...rest }, ref) => {\n    const {\n      title,\n      caption,\n      subtitle,\n      countdown,\n      showCountdown = false,\n      theme = 'light',\n      extensions,\n      align = 'left',\n    } = data\n    const innerRef = useRef<HTMLDivElement>(null)\n    const titleRef = useRef<HTMLHeadingElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n    const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n    const handleCountdownEnd = () => {\n      setIsCountdownVisible(false)\n    }\n\n    useEffect(() => {\n      gsap.registerPlugin(SplitText, ScrollTrigger)\n      function gsapResize() {\n        if (!titleRef.current) return\n        const height = titleRef.current?.clientHeight || 80\n        if (splitTextInstance.current) {\n          splitTextInstance.current.revert()\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n        }\n        splitTextInstance.current = new SplitText(titleRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom-=4%',\n          end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n          scrub: true,\n          invalidateOnRefresh: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length || 1\n            const overlap = 0.5\n            const interval = 1 / total\n            const step = interval * (1 - overlap)\n            const lastEnd = (total - 1) * step + interval\n            const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n            words.forEach((word: any, i: number) => {\n              const start = i * step\n              const width = interval\n              let opacity = (normalizedProgress - start) / width\n              opacity = Math.max(0, Math.min(1, opacity))\n              gsap.set(word, { opacity })\n            })\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    return (\n      <div\n        {...rest}\n        id={extensions?.id}\n        className=\"titleBottom title-box flex items-end justify-between gap-2 pb-6\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-left': align === 'left',\n          })}\n        >\n          {(caption || title) && (\n            <Heading\n              ref={titleRef}\n              as={as}\n              size={4}\n              html={caption || title}\n              weight={weight}\n              className={titleHeadingVariants({ theme })}\n            />\n          )}\n          {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n          <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n          {showCountdown && countdown && isCountdownVisible && (\n            <Countdown\n              className={cn('mt-4 justify-start', {\n                'justify-center': align === 'center',\n              })}\n              config={countdown}\n              onCountdownEnd={handleCountdownEnd}\n              theme={theme}\n            />\n          )}\n        </div>\n        <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n      </div>\n    )\n  }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "withLayout", "trackUrlRef", "useInView", "Countdown", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "className", "theme", "extensions", "title", "caption", "align", "Title", "as", "weight", "rest", "ref", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef, useImperativeHandle, useState } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { cva } from 'class-variance-authority'\nimport { Heading, Text, Countdown } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitlePropsBase } from './types.js'\n\nexport interface TitleProps extends TitlePropsBase, Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {}\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\n/**\n * \u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst titleHeadingVariants = cva('', {\n  variants: {\n    theme: {\n      light: 'text-[#080A0F]',\n      dark: 'text-[#F5F6F7]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * \u526F\u6807\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst subtitleVariants = cva(\n  'desktop:text-base desktop:mt-2 lg-desktop:text-[18px] mt-1 text-[14px] font-bold leading-[1.4] tracking-[-0.36px]',\n  {\n    variants: {\n      theme: {\n        light: 'text-[#080A0F]',\n        dark: 'text-[#F5F6F7]',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n    },\n  }\n)\n\nconst TitleButton = ({ data, className }: { data: TitleProps['data']; className?: string }) => {\n  const { theme = 'light', extensions, title, caption, align } = data\n  if (!extensions?.textLink) return null\n  return (\n    <a\n      className={cn(\n        { 'aiui-dark': theme === 'dark' },\n        'hover:text-brand-0 [&_svg_path]:hover:fill-brand-0 lg-desktop:text-base flex items-center overflow-hidden text-sm font-[700] leading-[1.4] transition-all duration-[0.4s]',\n        { 'text-[#080A0F]': theme === 'light' },\n        { 'text-[#F5F6F7]': theme === 'dark' },\n        { 'justify-center mt-4': align === 'center' },\n        { 'mt-1 laptop:mt-0': align === 'left' },\n        className\n      )}\n      href={trackUrlRef(extensions?.link, `${componentType}_${componentName}`)}\n      data-headless-type-name={`${componentType}#${componentName}`}\n      data-headless-title-desc-button={`${title}#${caption}`}\n    >\n      <div className=\"truncate whitespace-nowrap\">{extensions?.textLink}</div>\n      <div className=\"lg-desktop:size-5 size-4\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 20 20\" fill=\"none\">\n          <path\n            d=\"M6.91058 4.41083C7.23602 4.08539 7.76353 4.08539 8.08897 4.41083L13.089 9.41083C13.4144 9.73626 13.4144 10.2638 13.089 10.5892L8.08897 15.5892C7.76353 15.9146 7.23602 15.9146 6.91058 15.5892C6.58515 15.2638 6.58514 14.7363 6.91058 14.4108L11.3214 10L6.91058 5.58921C6.58514 5.26377 6.58514 4.73626 6.91058 4.41083Z\"\n            fill={theme === 'dark' ? '#F5F6F7' : '#080A0F'}\n            className=\"transition-all duration-[0.4s]\"\n          />\n        </svg>\n      </div>\n    </a>\n  )\n}\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(\n  ({ data, className, as = 'h2', weight = 'bold', ...rest }, ref) => {\n    const {\n      title,\n      caption,\n      subtitle,\n      countdown,\n      showCountdown = false,\n      theme = 'light',\n      extensions,\n      align = 'left',\n    } = data\n    const innerRef = useRef<HTMLDivElement>(null)\n    const titleRef = useRef<HTMLHeadingElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n    // \u63A7\u5236\u5012\u8BA1\u65F6\u663E\u793A\u72B6\u6001\n    const [isCountdownVisible, setIsCountdownVisible] = useState(true)\n\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    // \u5012\u8BA1\u65F6\u7ED3\u675F\u56DE\u8C03\n    const handleCountdownEnd = () => {\n      setIsCountdownVisible(false)\n    }\n\n    // CMS field mapping: new targetDateTime > legacy targetDate\n    const countdownEndDate = countdown?.targetDateTime || countdown?.targetDate || ''\n    const countdownTz = countdown?.targetDateTime_tz\n    // Label mapping: plural keys (Title CMS format) \u2192 atomic Countdown format\n    const countdownLabels = countdown?.labels\n      ? {\n          day: countdown.labels.days || 'Day',\n          hour: countdown.labels.hours || 'Hours',\n          minute: countdown.labels.minutes || 'Mins',\n          second: countdown.labels.seconds || 'Secs',\n        }\n      : undefined\n\n    useEffect(() => {\n      gsap.registerPlugin(SplitText, ScrollTrigger)\n      function gsapResize() {\n        if (!titleRef.current) return\n        const height = titleRef.current?.clientHeight || 80\n        if (splitTextInstance.current) {\n          splitTextInstance.current.revert()\n        }\n        if (scrollTriggerRef.current) {\n          scrollTriggerRef.current.kill()\n        }\n        splitTextInstance.current = new SplitText(titleRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom-=4%',\n          end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\n          scrub: true,\n          invalidateOnRefresh: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length || 1\n            const overlap = 0.5\n            const interval = 1 / total\n            const step = interval * (1 - overlap)\n            const lastEnd = (total - 1) * step + interval\n            const normalizedProgress = Math.min(1, lastEnd > 0 ? progress / lastEnd : 0)\n            words.forEach((word: any, i: number) => {\n              const start = i * step\n              const width = interval\n              let opacity = (normalizedProgress - start) / width\n              opacity = Math.max(0, Math.min(1, opacity))\n              gsap.set(word, { opacity })\n            })\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      }\n    }, [inView])\n\n    return (\n      <div\n        {...rest}\n        id={extensions?.id}\n        className=\"titleBottom title-box flex items-end justify-between gap-2 pb-6\"\n        ref={innerRef}\n      >\n        <div\n          ref={inViewRef}\n          className={cn('flex-1', className, {\n            'aiui-dark': theme === 'dark',\n            'text-center': align === 'center',\n            'text-left': align === 'left',\n          })}\n        >\n          {(caption || title) && (\n            <Heading\n              ref={titleRef}\n              as={as}\n              size={4}\n              html={caption || title}\n              weight={weight}\n              className={titleHeadingVariants({ theme })}\n            />\n          )}\n          {subtitle && <Text html={subtitle} as=\"p\" className={subtitleVariants({ theme })} />}\n          <TitleButton data={data} className={cn({ 'laptop:hidden': align === 'left' })} />\n          {showCountdown && countdown && isCountdownVisible && (\n            <Countdown\n              endDate={countdownEndDate}\n              endDate_tz={countdownTz}\n              timeLabels={countdownLabels}\n              showDays={countdown?.showDays}\n              showHours={countdown?.showHours}\n              showMinutes={countdown?.showMinutes}\n              showSeconds={countdown?.showSeconds}\n              theme={theme}\n              onExpire={handleCountdownEnd}\n              hideWhenExpired={true}\n              align={align === 'center' ? 'center' : 'left'}\n              className={cn('mt-4')}\n            />\n          )}\n        </div>\n        <TitleButton data={data} className={cn('hidden', { ['laptop:flex']: align === 'left' })} />\n      </div>\n    )\n  }\n)\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useEffect", "useRef", "useImperativeHandle", "useState", "gsap", "SplitText", "ScrollTrigger", "cn", "cva", "Heading", "Text", "Countdown", "withLayout", "trackUrlRef", "useInView", "componentType", "componentName", "titleHeadingVariants", "subtitleVariants", "TitleButton", "data", "className", "theme", "extensions", "title", "caption", "align", "Title", "as", "weight", "rest", "ref", "subtitle", "countdown", "showCountdown", "innerRef", "titleRef", "splitTextInstance", "scrollTriggerRef", "isCountdownVisible", "setIsCountdownVisible", "inViewRef", "inView", "handleCountdownEnd", "countdownEndDate", "countdownTz", "countdownLabels", "gsapResize", "height", "words", "self", "progress", "total", "overlap", "interval", "step", "lastEnd", "normalizedProgress", "word", "i", "start", "width", "opacity", "Title_default"]
 }

package/dist/esm/biz-components/Title/types.d.ts CHANGED Viewed

@@ -9,10 +9,19 @@ export interface Feature {
  * 倒计时配置
  */
 export interface CountdownConfig {
+    /**
+     * 新 CMS 字段，ISO 8601 带时区（如 '2026-03-28T16:00:00.000Z'）。优先于 targetDate 使用。
+     */
+    targetDateTime?: string;
+    /**
+     * 时区标识符（如 'Asia/Shanghai'），与 targetDateTime 配合使用
+     */
+    targetDateTime_tz?: string;
     /**
      * 倒计时目标时间（ISO 8601 格式或任何 dayjs 支持的格式）
+     * @deprecated 请使用 targetDateTime 替代。仅用于兼容旧 CMS 数据。
      */
-    targetDate: string;
+    targetDate?: string;
     /**
      * 是否显示天数
      * @default true

package/dist/esm/biz-components/VideoModal/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as c}from"react/jsx-runtime";import{Dialog as s,DialogContent as d}from"../../components/dialog.js";import{YouTubePlayer as u}from"../VideoModal/YouTubePlayer.js";const p=i=>{const{visible:r,youTubeId:e,videoUrl:t,onCloseModal:l,className:n,...a}=i;return o(s,{open:r,onOpenChange:()=>l(),children:c(d,{...a,className:`max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden ${n||""}`,children:[e?o(u,{youTubeId:e}):null,t?o("video",{className:"size-full overflow-hidden rounded-2xl object-cover",src:t,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,o("div",{onClick:()=>l(),className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:o("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18 18 6M6 6l12 12"})})})]})})};export{p as VideoModal};
+import{jsx as o,jsxs as u}from"react/jsx-runtime";import{Dialog as a,DialogContent as n}from"../../components/dialog.js";import{YouTubePlayer as s}from"../VideoModal/YouTubePlayer.js";const d=i=>{const{visible:r,youTubeId:e,videoUrl:t,onCloseModal:l,className:p,...c}=i;return o(a,{open:r,onOpenChange:()=>l(),children:u(n,{className:"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[e?o(s,{youTubeId:e}):t?o("video",{className:"size-full overflow-hidden rounded-2xl object-cover",src:t,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,o("div",{onClick:()=>l(),className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:o("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18 18 6M6 6l12 12"})})})]})})};export{d as VideoModal};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/VideoModal/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/VideoModal/index.tsx"],
-  "sourcesContent": ["import { Dialog, DialogContent } from '../../components/dialog.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\n\nexport interface VideoModalType extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  visible: boolean\n  youTubeId?: string\n  videoUrl?: string\n  onCloseModal: () => void\n}\n\nconst VideoModal = (props: VideoModalType) => {\n  const { visible, youTubeId, videoUrl, onCloseModal, className, ...rest } = props\n\n  return (\n    <Dialog open={visible} onOpenChange={() => onCloseModal()}>\n      <DialogContent\n        {...rest}\n        className={`max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden ${className || ''}`}\n      >\n        {youTubeId ? <YouTubePlayer youTubeId={youTubeId} /> : null}\n        {videoUrl ? (\n          <video\n            className=\"size-full overflow-hidden rounded-2xl object-cover\"\n            src={videoUrl}\n            muted\n            loop\n            autoPlay\n            controls\n          />\n        ) : null}\n        <div\n          onClick={() => onCloseModal()}\n          className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            strokeWidth=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className=\"HomeCharger_closeWrap__Z7aBo\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n          </svg>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { VideoModal }\n"],
-  "mappings": "AAeM,OAIe,OAAAA,EAJf,QAAAC,MAAA,oBAfN,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,iBAAAC,MAAqB,iCAS9B,MAAMC,EAAcC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,aAAAC,EAAc,UAAAC,EAAW,GAAGC,CAAK,EAAIN,EAE3E,OACEN,EAACE,EAAA,CAAO,KAAMK,EAAS,aAAc,IAAMG,EAAa,EACtD,SAAAT,EAACE,EAAA,CACE,GAAGS,EACJ,UAAW,yFAAyFD,GAAa,EAAE,GAElH,UAAAH,EAAYR,EAACI,EAAA,CAAc,UAAWI,EAAW,EAAK,KACtDC,EACCT,EAAC,SACC,UAAU,qDACV,IAAKS,EACL,MAAK,GACL,KAAI,GACJ,SAAQ,GACR,SAAQ,GACV,EACE,KACJT,EAAC,OACC,QAAS,IAAMU,EAAa,EAC5B,UAAU,wHAEV,SAAAV,EAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,YAAY,MACZ,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,SAAAA,EAAC,QAAK,cAAc,QAAQ,eAAe,QAAQ,EAAE,uBAAuB,EAC9E,EACF,GACF,EACF,CAEJ",
+  "sourcesContent": ["import { Dialog, DialogContent } from '../../components/dialog.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\n\nexport interface VideoModalType extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  visible: boolean\n  youTubeId?: string\n  videoUrl?: string\n  onCloseModal: () => void\n}\n\nconst VideoModal = (props: VideoModalType) => {\n  const { visible, youTubeId, videoUrl, onCloseModal, className, ...rest } = props\n\n  return (\n    <Dialog open={visible} onOpenChange={() => onCloseModal()}>\n      <DialogContent className=\"max-h-3/4 h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n        {youTubeId ? (\n          <YouTubePlayer youTubeId={youTubeId} />\n        ) : videoUrl ? (\n          <video\n            className=\"size-full overflow-hidden rounded-2xl object-cover\"\n            src={videoUrl}\n            muted\n            loop\n            autoPlay\n            controls\n          />\n        ) : null}\n        <div\n          onClick={() => onCloseModal()}\n          className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            strokeWidth=\"1.5\"\n            stroke=\"currentColor\"\n            aria-hidden=\"true\"\n            data-slot=\"icon\"\n            className=\"HomeCharger_closeWrap__Z7aBo\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n          </svg>\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport { VideoModal }\n"],
+  "mappings": "AAeM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAfN,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,iBAAAC,MAAqB,iCAS9B,MAAMC,EAAcC,GAA0B,CAC5C,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,aAAAC,EAAc,UAAAC,EAAW,GAAGC,CAAK,EAAIN,EAE3E,OACEN,EAACE,EAAA,CAAO,KAAMK,EAAS,aAAc,IAAMG,EAAa,EACtD,SAAAT,EAACE,EAAA,CAAc,UAAU,wFACtB,UAAAK,EACCR,EAACI,EAAA,CAAc,UAAWI,EAAW,EACnCC,EACFT,EAAC,SACC,UAAU,qDACV,IAAKS,EACL,MAAK,GACL,KAAI,GACJ,SAAQ,GACR,SAAQ,GACV,EACE,KACJT,EAAC,OACC,QAAS,IAAMU,EAAa,EAC5B,UAAU,wHAEV,SAAAV,EAAC,OACC,MAAM,6BACN,KAAK,OACL,QAAQ,YACR,YAAY,MACZ,OAAO,eACP,cAAY,OACZ,YAAU,OACV,UAAU,+BAEV,SAAAA,EAAC,QAAK,cAAc,QAAQ,eAAe,QAAQ,EAAE,uBAAuB,EAC9E,EACF,GACF,EACF,CAEJ",
   "names": ["jsx", "jsxs", "Dialog", "DialogContent", "YouTubePlayer", "VideoModal", "props", "visible", "youTubeId", "videoUrl", "onCloseModal", "className", "rest"]
 }