@anker-in/headless-ui 1.0.26-temp-111005 → 1.0.26-temp.1

package/dist/cjs/biz-components/InlineVideo/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/InlineVideo/index.tsx"],
-  "sourcesContent": ["import { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport type { Theme } from '../../types/props.js'\n\nexport interface InlineVideoData {\n  title: string\n  subtitle?: string\n  desc: string\n  poster?: string\n  videoUrl: string\n  mobPoster?: string\n  mobVideoUrl: string\n  theme?: Theme\n}\n\nexport interface InlineVideoProps {\n  data: InlineVideoData\n  className?: string\n}\n\nexport default function VideoWithTitle(props: InlineVideoProps) {\n  const { title, subtitle, desc, poster, videoUrl, mobPoster, mobVideoUrl, theme = 'light' } = props?.data ?? {}\n\n  return (\n    <section\n      className={cn(\n        'inline-video-section flex flex-col items-center rounded-[16px]',\n        'text-info-primary', // \u4F7F\u7528\u4E3B\u9898\u989C\u8272\u53D8\u91CF\n        {\n          'aiui-dark': theme === 'dark', // \u6DF1\u8272\u6A21\u5F0F\n        },\n        props.className\n      )}\n    >\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className={cn('inline-video-content laptop:items-center flex w-full flex-col items-start')}>\n        {/* \u6807\u9898 */}\n        <Heading\n          as={'h2'}\n          size={4}\n          html={title}\n          className=\"inline-video-title laptop:text-center shrink text-left\"\n        />\n\n        {/* \u526F\u6807\u9898\u548C\u63CF\u8FF0\u5BB9\u5668 */}\n        <div className=\"inline-video-text-wrapper\">\n          {/* \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09 */}\n          {subtitle && (\n            <Heading\n              size={3}\n              as={'h5'}\n              html={subtitle}\n              className={cn('inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left')}\n            />\n          )}\n\n          {/* \u63CF\u8FF0\u6587\u672C */}\n          <Text\n            as={'p'}\n            size={4}\n            html={desc}\n            className=\"inline-video-description min-md:mt-[4px] min-md:w-[650px] min-l:mt-[16px] min-l:w-[600px] min-xl:mt-[4px] min-xl:w-[650px] min-xxl:mt-[8px] min-xxl:w-[820px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]\"\n          />\n        </div>\n      </div>\n\n      {/* \u89C6\u9891\u5BB9\u5668 */}\n      <div className=\"inline-video-container tablet:aspect-[3060/1180] mt-[24px] aspect-[398/400] w-full overflow-hidden rounded-[16px] xl:h-[360px]\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={poster}\n          src={videoUrl}\n          loop\n          className=\"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]\"\n        ></video>\n\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={mobPoster}\n          src={mobVideoUrl}\n          loop\n          className=\"inline-video-mobile tablet:hidden block w-full\"\n        ></video>\n      </div>\n    </section>\n  )\n}\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BArCRC,EAA8B,qCAC9BC,EAAmB,kCAmBJ,SAARJ,EAAgCK,EAAyB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,OAAAC,EAAQ,SAAAC,EAAU,UAAAC,EAAW,YAAAC,EAAa,MAAAC,EAAQ,OAAQ,EAAIR,GAAO,MAAQ,CAAC,EAE7G,SACE,QAAC,WACC,aAAW,MACT,iEACA,oBACA,CACE,YAAaQ,IAAU,MACzB,EACAR,EAAM,SACR,EAGA,qBAAC,OAAI,aAAW,MAAG,2EAA2E,EAE5F,oBAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yDACZ,KAGA,QAAC,OAAI,UAAU,4BAEZ,UAAAC,MACC,OAAC,WACC,KAAM,EACN,GAAI,KACJ,KAAMA,EACN,aAAW,MAAG,oFAAoF,EACpG,KAIF,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMC,EACN,UAAU,0SACZ,GACF,GACF,KAGA,QAAC,OAAI,UAAU,iIAEb,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQC,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,+EACX,KAGD,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQC,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,iDACX,GACH,GACF,CAEJ",
+  "sourcesContent": ["import { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport type { Theme } from '../../types/props.js'\n\nexport interface InlineVideoData {\n  title: string\n  subtitle?: string\n  desc: string\n  poster?: string\n  videoUrl: string\n  mobPoster?: string\n  mobVideoUrl: string\n  theme?: Theme\n}\n\nexport interface InlineVideoProps {\n  data: InlineVideoData\n  className?: string\n}\n\nexport default function VideoWithTitle(props: InlineVideoProps) {\n  const { title, subtitle, desc, poster, videoUrl, mobPoster, mobVideoUrl, theme = 'light' } = props?.data ?? {}\n\n  return (\n    <section\n      className={cn(\n        'inline-video-section flex flex-col items-center rounded-box',\n        'text-info-primary', // \u4F7F\u7528\u4E3B\u9898\u989C\u8272\u53D8\u91CF\n        {\n          'aiui-dark': theme === 'dark', // \u6DF1\u8272\u6A21\u5F0F\n        },\n        props.className\n      )}\n    >\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className={cn('inline-video-content laptop:items-center flex w-full flex-col items-start')}>\n        {/* \u6807\u9898 */}\n        <Heading\n          as={'h2'}\n          size={4}\n          html={title}\n          className=\"inline-video-title laptop:text-center shrink text-left\"\n        />\n\n        {/* \u526F\u6807\u9898\u548C\u63CF\u8FF0\u5BB9\u5668 */}\n        <div className=\"inline-video-text-wrapper\">\n          {/* \u526F\u6807\u9898\uFF08\u53EF\u9009\uFF09 */}\n          {subtitle && (\n            <Heading\n              size={3}\n              as={'h5'}\n              html={subtitle}\n              className={cn('inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left')}\n            />\n          )}\n\n          {/* \u63CF\u8FF0\u6587\u672C */}\n          <Text\n            as={'p'}\n            size={4}\n            html={desc}\n            className=\"inline-video-description min-md:mt-[4px] min-md:w-[650px] min-l:mt-[16px] min-l:w-[600px] min-xl:mt-[4px] min-xl:w-[650px] min-xxl:mt-[8px] min-xxl:w-[820px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]\"\n          />\n        </div>\n      </div>\n\n      {/* \u89C6\u9891\u5BB9\u5668 */}\n      <div className=\"inline-video-container tablet:aspect-[3060/1180] mt-[24px] aspect-[398/400] w-full overflow-hidden rounded-box xl:h-[360px]\">\n        {/* \u684C\u9762\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={poster}\n          src={videoUrl}\n          loop\n          className=\"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]\"\n        ></video>\n\n        {/* \u79FB\u52A8\u7AEF\u89C6\u9891 */}\n        <video\n          playsInline\n          autoPlay\n          muted\n          poster={mobPoster}\n          src={mobVideoUrl}\n          loop\n          className=\"inline-video-mobile tablet:hidden block w-full\"\n        ></video>\n      </div>\n    </section>\n  )\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BArCRC,EAA8B,qCAC9BC,EAAmB,kCAmBJ,SAARJ,EAAgCK,EAAyB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,OAAAC,EAAQ,SAAAC,EAAU,UAAAC,EAAW,YAAAC,EAAa,MAAAC,EAAQ,OAAQ,EAAIR,GAAO,MAAQ,CAAC,EAE7G,SACE,QAAC,WACC,aAAW,MACT,8DACA,oBACA,CACE,YAAaQ,IAAU,MACzB,EACAR,EAAM,SACR,EAGA,qBAAC,OAAI,aAAW,MAAG,2EAA2E,EAE5F,oBAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yDACZ,KAGA,QAAC,OAAI,UAAU,4BAEZ,UAAAC,MACC,OAAC,WACC,KAAM,EACN,GAAI,KACJ,KAAMA,EACN,aAAW,MAAG,oFAAoF,EACpG,KAIF,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMC,EACN,UAAU,0SACZ,GACF,GACF,KAGA,QAAC,OAAI,UAAU,8HAEb,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQC,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,+EACX,KAGD,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,OAAQC,EACR,IAAKC,EACL,KAAI,GACJ,UAAU,iDACX,GACH,GACF,CAEJ",
   "names": ["InlineVideo_exports", "__export", "VideoWithTitle", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "props", "title", "subtitle", "desc", "poster", "videoUrl", "mobPoster", "mobVideoUrl", "theme"]
 }

package/dist/cjs/biz-components/Ksp/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Media } from '../../types/props.js';
+import type { Media, Theme } from '../../types/props.js';
 /**
  * KSP 卡片项数据结构
  */
@@ -25,6 +25,8 @@ export interface KspData {
     title?: string;
     /** KSP 卡片列表（需要 7 个项） */
     items: KspCardItem[];
+    /** 主题，默认 light */
+    theme?: Theme;
 }
 /**
  * Ksp 组件 Props

package/dist/cjs/biz-components/Ksp/index.js

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var x=(l,a)=>{for(var o in a)n(l,o,{get:a[o],enumerable:!0})},f=(l,a,o,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of u(a))!b.call(l,s)&&s!==o&&n(l,s,{get:()=>a[s],enumerable:!(t=m(a,s))||t.enumerable});return l};var k=l=>f(n({},"__esModule",{value:!0}),l);var w={};x(w,{default:()=>y});module.exports=k(w);var p=require("react/jsx-runtime"),c=require("../../components/index.js"),r=require("../../helpers/utils.js"),i=require("../../shared/Styles.js");const g=({title:l,desc:a,image:o,mobImage:t,video:s,mobVideo:e,className:d})=>(0,p.jsxs)("div",{className:(0,r.cn)("ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f] text-white",d),children:[s&&e?(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:s?.url,poster:o?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),(0,p.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:e?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(o||t)&&(0,p.jsx)(c.Picture,{source:o?.url||t?.url,alt:o?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,p.jsxs)("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[(0,p.jsx)(c.Heading,{size:3,html:l,className:"ksp-card-title hidden w-full tablet:block"}),(0,p.jsx)(c.Heading,{size:2,html:l,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),(0,p.jsx)(c.Text,{size:2,html:a,className:"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]}),h={4:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-2 laptop:col-span-6"},5:{0:"col-span-2 laptop:col-span-6",1:"col-span-2 tablet:col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-1 laptop:col-span-4",4:"col-span-2 tablet:col-span-1 laptop:col-span-3"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4"},7:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4",6:"col-span-2 laptop:col-span-6"},8:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-4"},9:{0:"col-span-2 laptop:col-span-3",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-4",3:"col-span-1 tablet:col-span-2 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-3",8:"col-span-2 laptop:col-span-4"}},N=(l,a)=>h[a]?.[l]||"";function v({data:l,className:a}){const{title:o,items:t}=l;return(0,p.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,r.cn)("ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]",a),children:[(0,p.jsx)(c.Heading,{as:"h1",size:4,html:o,className:"ksp-title text-left text-white laptop:text-center"}),(0,p.jsx)("div",{className:"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4",children:t.map((s,e)=>(0,p.jsx)(g,{...s,className:N(e,t.length)},e))})]})}var y=(0,i.withLayout)(v);
+"use strict";var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var k=(l,a)=>{for(var o in a)r(l,o,{get:a[o],enumerable:!0})},f=(l,a,o,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of x(a))!b.call(l,s)&&s!==o&&r(l,s,{get:()=>a[s],enumerable:!(t=u(a,s))||t.enumerable});return l};var h=l=>f(r({},"__esModule",{value:!0}),l);var w={};k(w,{default:()=>C});module.exports=h(w);var p=require("react/jsx-runtime"),e=require("../../components/index.js"),i=require("../../helpers/utils.js"),d=require("../../shared/Styles.js");const g=({title:l,desc:a,image:o,mobImage:t,video:s,mobVideo:c,className:n,theme:m})=>(0,p.jsxs)("div",{className:(0,i.cn)("ksp-card relative overflow-hidden rounded-box text-info-primary",{"aiui-dark":m==="dark"},n),children:[s&&c?(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:s?.url,poster:o?.url,className:"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block"}),(0,p.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,src:c?.url,poster:t?.url,className:"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden"})]}):(o||t)&&(0,p.jsx)(e.Picture,{source:o?.url||t?.url,alt:o?.alt||t?.alt||"",className:"ksp-card-image h-full w-full",imgClassName:"h-full w-full object-cover object-bottom"}),(0,p.jsxs)("div",{className:"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]",children:[(0,p.jsx)(e.Heading,{size:3,html:l,className:"ksp-card-title hidden w-full tablet:block"}),(0,p.jsx)(e.Heading,{size:2,html:l,className:"ksp-card-title block w-full tablet:hidden tablet:w-[340px]"}),(0,p.jsx)(e.Text,{size:2,html:a,className:"ksp-card-desc text-info-primary mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]"})]})]}),N={4:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-2 laptop:col-span-6"},5:{0:"col-span-2 laptop:col-span-6",1:"col-span-2 tablet:col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-1 laptop:col-span-4",4:"col-span-2 tablet:col-span-1 laptop:col-span-3"},6:{0:"col-span-2 tablet:col-span-1 laptop:col-span-4",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4"},7:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-3",3:"col-span-2 tablet:col-span-1 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-1 laptop:col-span-4",6:"col-span-2 laptop:col-span-6"},8:{0:"col-span-2 laptop:col-span-6",1:"col-span-1 laptop:col-span-4",2:"col-span-1 laptop:col-span-4",3:"col-span-1 laptop:col-span-3",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-4"},9:{0:"col-span-2 laptop:col-span-3",1:"col-span-1 laptop:col-span-3",2:"col-span-1 laptop:col-span-4",3:"col-span-1 tablet:col-span-2 laptop:col-span-4",4:"col-span-1 laptop:col-span-3",5:"col-span-2 tablet:col-span-1 laptop:col-span-3",6:"col-span-1 laptop:col-span-3",7:"col-span-1 laptop:col-span-3",8:"col-span-2 laptop:col-span-4"}},v=(l,a)=>N[a]?.[l]||"";function y({data:l,className:a}){const{title:o,items:t,theme:s="light"}=l;return(0,p.jsxs)("section",{"data-ui-component-id":"ksp",className:(0,i.cn)("ksp-container flex scroll-mt-[108px] flex-col justify-center text-info-primary laptop:scroll-mt-[46px]",{"aiui-dark":s==="dark"},a),children:[(0,p.jsx)(e.Heading,{as:"h1",size:4,html:o,className:"ksp-title text-left text-white laptop:text-center"}),(0,p.jsx)("div",{className:"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4",children:t.map((c,n)=>(0,p.jsx)(g,{...c,className:v(n,t.length)},n))})]})}var C=(0,d.withLayout)(y);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/Ksp/index.js.map

@@ -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 } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className }: ImageCardProps) => {\n  return (\n    <div className={cn('ksp-card relative overflow-hidden rounded-[16px] bg-[#1f1f1f] text-white', className)}>\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop absolute bottom-0 hidden w-full laptop:inline-block\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={image?.url || mobImage?.url}\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\n        />\n      </div>\n    </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',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-2 laptop:col-span-6',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-1 laptop:col-span-4',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n    6: 'col-span-2 laptop:col-span-6',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-4',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-3',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-3',\n    8: 'col-span-2 laptop:col-span-4',\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 }: KspProps) {\n  const { title, items } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn('ksp-container flex scroll-mt-[108px] flex-col justify-center laptop:scroll-mt-[46px]', className)}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      <div className=\"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4\">\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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDQ,IAAAI,EAAA,6BApDRC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCA8C3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,CAAU,OAE1E,QAAC,OAAI,aAAW,MAAG,2EAA4EA,CAAS,EACrG,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,mIACZ,GACF,GACF,EAQEM,EAAwD,CAC5D,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,gDACL,EACA,EAAG,CACD,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAN,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAa,CAAM,EAAID,EACzB,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MAAG,uFAAwFN,CAAS,EAE/G,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KACrG,OAAC,OAAI,UAAU,wFACZ,SAAAa,EAAM,IAAI,CAACC,EAAML,OAChB,OAACV,EAAA,CAAuB,GAAGe,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOhB,KAAQ,cAAWkB,CAAG",
-  "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "items", "item"]
+  "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 {\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 relative overflow-hidden rounded-box text-info-primary',\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 absolute bottom-0 hidden w-full laptop:inline-block\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile absolute inline-block -translate-y-[80px] object-contain object-center laptop:hidden\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={image?.url || mobImage?.url}\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image h-full w-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content absolute left-[16px] top-[16px] desktop:left-[24px] desktop:top-[24px] lg-desktop:left-[32px] lg-desktop:top-[32px]\">\n        <Heading size={3} html={title} className=\"ksp-card-title hidden w-full tablet:block\" />\n        <Heading size={2} html={title} className=\"ksp-card-title block w-full tablet:hidden tablet:w-[340px]\" />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc text-info-primary mt-[4px] text-[14px] tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px]\"\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',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-2 laptop:col-span-6',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-1 laptop:col-span-4',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-3',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-1 laptop:col-span-4',\n    6: 'col-span-2 laptop:col-span-6',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6',\n    1: 'col-span-1 laptop:col-span-4',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 laptop:col-span-3',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-4',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-3',\n    1: 'col-span-1 laptop:col-span-3',\n    2: 'col-span-1 laptop:col-span-4',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-4',\n    4: 'col-span-1 laptop:col-span-3',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3',\n    6: 'col-span-1 laptop:col-span-3',\n    7: 'col-span-1 laptop:col-span-3',\n    8: 'col-span-2 laptop:col-span-4',\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 }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container flex scroll-mt-[108px] flex-col justify-center text-info-primary laptop:scroll-mt-[46px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title text-left text-white laptop:text-center\" />\n      <div className=\"ksp-layout grid grid-cols-2 tablet:grid-cols-3 laptop:grid-cols-10 gap-3 laptop:gap-4\">\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": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgEQ,IAAAI,EAAA,6BAhERC,EAAuC,qCACvCC,EAAmB,kCACnBC,EAA2B,kCAkD3B,MAAMC,EAAY,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,MAAAC,CAAM,OAEjF,QAAC,OACC,aAAW,MACT,kEACA,CACE,YAAaA,IAAU,MACzB,EACAD,CACF,EAEC,UAAAF,GAASC,KACR,oBACE,oBAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKD,GAAO,IACZ,OAAQF,GAAO,IACf,UAAU,4FACZ,KACA,OAAC,SACC,YAAW,GACX,SAAQ,GACR,MAAK,GACL,KAAI,GACJ,IAAKG,GAAU,IACf,OAAQF,GAAU,IAClB,UAAU,4HACZ,GACF,GAECD,GAASC,OACR,OAAC,WACC,OAAQD,GAAO,KAAOC,GAAU,IAChC,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,+BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,uIACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,4CAA4C,KACrF,OAAC,WAAQ,KAAM,EAAG,KAAMA,EAAO,UAAU,6DAA6D,KACtG,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,qJACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,gDACL,EACA,EAAG,CACD,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,8BACL,EACA,EAAG,CACD,EAAG,+BACH,EAAG,+BACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,iDACH,EAAG,+BACH,EAAG,+BACH,EAAG,8BACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAP,CAAU,EAAa,CAC1C,KAAM,CAAE,MAAAN,EAAO,MAAAc,EAAO,MAAAP,EAAQ,OAAQ,EAAIM,EAC1C,SACE,QAAC,WACC,uBAAqB,MACrB,aAAW,MACT,yGACA,CACE,YAAaN,IAAU,MACzB,EACAD,CACF,EAEA,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KACrG,OAAC,OAAI,UAAU,wFACZ,SAAAc,EAAM,IAAI,CAACC,EAAML,OAChB,OAACX,EAAA,CAAuB,GAAGgB,EAAM,UAAWN,EAAmBC,EAAOI,EAAM,MAAM,GAAlEJ,CAAqE,CACtF,EACH,GACF,CAEJ,CAEA,IAAOjB,KAAQ,cAAWmB,CAAG",
+  "names": ["Ksp_exports", "__export", "Ksp_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "ImageCard", "title", "desc", "image", "mobImage", "video", "mobVideo", "className", "theme", "LAYOUT_CONFIG", "getCardLayoutClass", "index", "totalCount", "Ksp", "data", "items", "item"]
 }

package/dist/cjs/biz-components/MarqueeReview/index.js

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var k=(t,a)=>{for(var s in a)n(t,s,{get:a[s],enumerable:!0})},N=(t,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of u(a))!w.call(t,p)&&p!==s&&n(t,p,{get:()=>a[p],enumerable:!(i=g(a,p))||i.enumerable});return t};var C=t=>N(n({},"__esModule",{value:!0}),t);var R={};k(R,{default:()=>I});module.exports=C(R);var e=require("react/jsx-runtime"),l=require("../../components/index.js"),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const c=9,b=3,y=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(s,i)=>t.slice(i*a,(i+1)*a)),L=()=>(0,e.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),M=({item:t})=>(0,e.jsxs)("div",{className:"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]",children:[(0,e.jsxs)("div",{className:"flex justify-between",children:[(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(l.Text,{size:4,html:t.name,className:"hidden laptop:block"}),(0,e.jsx)(l.Text,{size:2,html:t.name,className:"block laptop:hidden"}),(0,e.jsx)("div",{className:"mt-2 flex gap-1",children:new Array(t.rating||5).fill(0).map((a,s)=>(0,e.jsx)(L,{},s))})]}),(0,e.jsxs)(l.Avatar,{size:"small",className:" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]",children:[(0,e.jsx)(l.AvatarImage,{src:t.avatar?.url,alt:t.avatar?.alt||""}),(0,e.jsx)(l.AvatarFallback,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)(l.Heading,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function T({data:t,className:a}){const{title:s,subtitle:i,items:p=[],theme:d="light"}=t,h=y(p.length<c?[...p,...p.slice(c-p.length)]:p,b).slice(0,3).map(o=>[...o,...o]);return(0,e.jsxs)("section",{className:(0,m.cn)("flex flex-col items-center justify-center py-3 text-info-primary",a,{"aiui-dark":d==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:s,className:"w-full text-left laptop:text-center"}),(0,e.jsx)(l.Text,{size:2,html:i,className:"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,e.jsx)("div",{className:(0,m.cn)("mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]"),children:h.map((o,r)=>(0,e.jsx)("div",{className:(0,m.cn)("animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit",{"top-10":r===0||r===2,"hidden desktop:flex":r===1,"hidden tablet:flex":r===2}),children:o.map((f,v)=>(0,e.jsx)(M,{item:f},v))},r))})]})}var I=(0,x.withLayout)(T);
+"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var k=(t,a)=>{for(var s in a)n(t,s,{get:a[s],enumerable:!0})},N=(t,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of u(a))!w.call(t,p)&&p!==s&&n(t,p,{get:()=>a[p],enumerable:!(i=g(a,p))||i.enumerable});return t};var b=t=>N(n({},"__esModule",{value:!0}),t);var R={};k(R,{default:()=>I});module.exports=b(R);var e=require("react/jsx-runtime"),l=require("../../components/index.js"),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const c=9,C=3,y=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(s,i)=>t.slice(i*a,(i+1)*a)),L=()=>(0,e.jsx)("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})}),M=({item:t})=>(0,e.jsxs)("div",{className:"flex h-[240px] flex-grow flex-col justify-between rounded-box bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]",children:[(0,e.jsxs)("div",{className:"flex justify-between",children:[(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)(l.Text,{size:4,html:t.name,className:"hidden laptop:block"}),(0,e.jsx)(l.Text,{size:2,html:t.name,className:"block laptop:hidden"}),(0,e.jsx)("div",{className:"mt-2 flex gap-1",children:new Array(t.rating||5).fill(0).map((a,s)=>(0,e.jsx)(L,{},s))})]}),(0,e.jsxs)(l.Avatar,{size:"small",className:" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]",children:[(0,e.jsx)(l.AvatarImage,{src:t.avatar?.url,alt:t.avatar?.alt||""}),(0,e.jsx)(l.AvatarFallback,{children:(t.name??"").slice(0,2).toUpperCase()})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)(l.Heading,{as:"h6",size:2,html:`"${t.comment}`,className:"line-clamp-5 min-h-[120px] text-wrap"})})]});function T({data:t,className:a}){const{title:s,subtitle:i,items:p=[],theme:d="light"}=t,h=y(p.length<c?[...p,...p.slice(c-p.length)]:p,C).slice(0,3).map(o=>[...o,...o]);return(0,e.jsxs)("section",{className:(0,m.cn)("flex flex-col items-center justify-center py-3 text-info-primary",a,{"aiui-dark":d==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:s,className:"w-full text-left laptop:text-center"}),(0,e.jsx)(l.Text,{size:2,html:i,className:"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]"}),(0,e.jsx)("div",{className:(0,m.cn)("mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]"),children:h.map((o,r)=>(0,e.jsx)("div",{className:(0,m.cn)("animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit",{"top-10":r===0||r===2,"hidden desktop:flex":r===1,"hidden tablet:flex":r===2}),children:o.map((f,v)=>(0,e.jsx)(M,{item:f},v))},r))})]})}var I=(0,x.withLayout)(T);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/MarqueeReview/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MarqueeReview/index.tsx"],
-  "sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } 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\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n  /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n  name: string\n  /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n  avatar: Media\n  /** \u8BC4\u8BBA\u5185\u5BB9 */\n  comment: string\n  /** \u8BC4\u5206(1-5\u661F) */\n  rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n  /** \u4E3B\u6807\u9898 */\n  title: string\n  /** \u526F\u6807\u9898 */\n  subtitle: string\n  /** \u8BC4\u8BBA\u5217\u8868 */\n  items: ReviewItem[]\n  /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n  theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n  return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n    array.slice(index * size, (index + 1) * size)\n  )\n}\n\nconst StarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n      fill=\"#F77234\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-2xl bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n          <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n          <AvatarImage src={item.avatar?.url} alt={item.avatar?.alt || ''} />\n          <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n      </div>\n      <div>\n        <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n      </div>\n    </div>\n  )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n *   data={{\n *     title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n *     subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n *     items: [\n *       {\n *         name: \"\u5F20\u4E09\",\n *         avatar: \"/avatar1.jpg\",\n *         comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n *         rating: 5\n *       }\n *     ]\n *   }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n  const { title, subtitle, items = [], theme = 'light' } = data\n\n  const chunkItems = _chunk(\n    items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n    COUNT\n  )\n    .slice(0, 3)\n    .map(item => [...item, ...item])\n\n  return (\n    <section\n      className={cn('flex flex-col items-center justify-center py-3 text-info-primary', className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit', {\n              'top-10': index === 0 || index === 2,\n              'hidden desktop:flex': index === 1,\n              'hidden tablet:flex': index === 2,\n            })}\n          >\n            {items.map((item, innerIndex) => (\n              <Card key={innerIndex} item={item} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(MarqueeReview)\n"],
+  "sourcesContent": ["import { Text, Heading, Avatar, AvatarImage, AvatarFallback } 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\nconst FIX_ITEMS_LENGTH = 9\nconst COUNT = 3\n\n/**\n * \u8BC4\u8BBA\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface ReviewItem {\n  /** \u8BC4\u8BBA\u8005\u540D\u79F0 */\n  name: string\n  /** \u8BC4\u8BBA\u8005\u5934\u50CF URL */\n  avatar: Media\n  /** \u8BC4\u8BBA\u5185\u5BB9 */\n  comment: string\n  /** \u8BC4\u5206(1-5\u661F) */\n  rating?: number\n}\n\n/**\n * \u8F6E\u64AD\u8BC4\u8BBA\u6570\u636E\u7ED3\u6784\n */\nexport interface MarqueeReviewData {\n  /** \u4E3B\u6807\u9898 */\n  title: string\n  /** \u526F\u6807\u9898 */\n  subtitle: string\n  /** \u8BC4\u8BBA\u5217\u8868 */\n  items: ReviewItem[]\n  /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n  theme?: Theme\n}\n\n/**\n * MarqueeReview \u7EC4\u4EF6 Props\n */\nexport interface MarqueeReviewProps {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\nconst _chunk = <T,>(array: T[], size: number): T[][] => {\n  return Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>\n    array.slice(index * size, (index + 1) * size)\n  )\n}\n\nconst StarIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path\n      d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n      fill=\"#F77234\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"flex h-[240px] flex-grow flex-col justify-between rounded-box bg-container-primary p-[16px] text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"hidden laptop:block\" />\n          <Text size={2} html={item.name} className=\"block laptop:hidden\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" h-[40px]  w-[40px] laptop:h-[48px] laptop:w-[48px]\">\n          <AvatarImage src={item.avatar?.url} alt={item.avatar?.alt || ''} />\n          <AvatarFallback>{(item.name ?? '').slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n      </div>\n      <div>\n        <Heading as=\"h6\" size={2} html={`\"${item.comment}`} className=\"line-clamp-5 min-h-[120px] text-wrap\" />\n      </div>\n    </div>\n  )\n}\n\n/**\n * MarqueeReview - \u5782\u76F4\u6EDA\u52A8\u7684\u8BC4\u8BBA\u8F6E\u64AD\u7EC4\u4EF6\n *\n * \u7528\u4E8E\u5C55\u793A\u7528\u6237\u8BC4\u8BBA,\u652F\u6301\u591A\u5217\u5782\u76F4\u65E0\u9650\u6EDA\u52A8\u6548\u679C\u3002\n *\n * @example\n * ```tsx\n * <MarqueeReview\n *   data={{\n *     title: \"\u5BA2\u6237\u8BC4\u4EF7\",\n *     subtitle: \"\u770B\u770B\u7528\u6237\u600E\u4E48\u8BF4\",\n *     items: [\n *       {\n *         name: \"\u5F20\u4E09\",\n *         avatar: \"/avatar1.jpg\",\n *         comment: \"\u975E\u5E38\u597D\u7528\u7684\u4EA7\u54C1!\",\n *         rating: 5\n *       }\n *     ]\n *   }}\n * />\n * ```\n */\nfunction MarqueeReview({ data, className }: MarqueeReviewProps) {\n  const { title, subtitle, items = [], theme = 'light' } = data\n\n  const chunkItems = _chunk(\n    items.length < FIX_ITEMS_LENGTH ? [...items, ...items.slice(FIX_ITEMS_LENGTH - items.length)] : items,\n    COUNT\n  )\n    .slice(0, 3)\n    .map(item => [...item, ...item])\n\n  return (\n    <section\n      className={cn('flex flex-col items-center justify-center py-3 text-info-primary', className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"w-full text-left laptop:text-center\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"mt-[4px] w-full text-left text-[14px] tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical mt-[24px] flex h-[480px] gap-4 overflow-hidden laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex flex-col gap-4 flex-1 h-fit', {\n              'top-10': index === 0 || index === 2,\n              'hidden desktop:flex': index === 1,\n              'hidden tablet:flex': index === 2,\n            })}\n          >\n            {items.map((item, innerIndex) => (\n              <Card key={innerIndex} item={item} />\n            ))}\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(MarqueeReview)\n"],
   "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsDI,IAAAI,EAAA,6BAtDJC,EAAmE,qCACnEC,EAAmB,kCACnBC,EAA2B,kCAG3B,MAAMC,EAAmB,EACnBC,EAAQ,EAwCRC,EAAS,CAAKC,EAAYC,IACvB,MAAM,KAAK,CAAE,OAAQ,KAAK,KAAKD,EAAM,OAASC,CAAI,CAAE,EAAG,CAACC,EAAGC,IAChEH,EAAM,MAAMG,EAAQF,GAAOE,EAAQ,GAAKF,CAAI,CAC9C,EAGIG,EAAW,OACf,OAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,EAOIC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,QAAC,OAAI,UAAU,uLACb,qBAAC,OAAI,UAAU,uBACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,QAAK,KAAM,EAAG,KAAMA,EAAK,KAAM,UAAU,sBAAsB,KAChE,OAAC,OAAI,UAAU,kBACZ,aAAI,MAAMA,EAAK,QAAU,CAAC,EAAE,KAAK,CAAC,EAAE,IAAI,CAACJ,EAAGC,OAC3C,OAACC,EAAA,GAAcD,CAAO,CACvB,EACH,GACF,KACA,QAAC,UAAO,KAAK,QAAQ,UAAU,sDAC7B,oBAAC,eAAY,IAAKG,EAAK,QAAQ,IAAK,IAAKA,EAAK,QAAQ,KAAO,GAAI,KACjE,OAAC,kBAAiB,UAAAA,EAAK,MAAQ,IAAI,MAAM,EAAG,CAAC,EAAE,YAAY,EAAE,GAC/D,GACF,KACA,OAAC,OACC,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAM,IAAIA,EAAK,OAAO,GAAI,UAAU,uCAAuC,EACvG,GACF,EA2BJ,SAASC,EAAc,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAuB,CAC9D,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,OAAQ,EAAIL,EAEnDM,EAAaf,EACjBa,EAAM,OAASf,EAAmB,CAAC,GAAGe,EAAO,GAAGA,EAAM,MAAMf,EAAmBe,EAAM,MAAM,CAAC,EAAIA,EAChGd,CACF,EACG,MAAM,EAAG,CAAC,EACV,IAAIQ,GAAQ,CAAC,GAAGA,EAAM,GAAGA,CAAI,CAAC,EAEjC,SACE,QAAC,WACC,aAAW,MAAG,mEAAoEG,EAAW,CAC3F,YAAaI,IAAU,MACzB,CAAC,EAED,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMH,EAAO,UAAU,sCAAsC,KACvF,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,8KACZ,KACA,OAAC,OACC,aAAW,MACT,2HACF,EAEC,SAAAG,EAAW,IAAI,CAACF,EAAOT,OACtB,OAAC,OAEC,aAAW,MAAG,mEAAoE,CAChF,SAAUA,IAAU,GAAKA,IAAU,EACnC,sBAAuBA,IAAU,EACjC,qBAAsBA,IAAU,CAClC,CAAC,EAEA,SAAAS,EAAM,IAAI,CAACN,EAAMS,OAChB,OAACV,EAAA,CAAsB,KAAMC,GAAlBS,CAAwB,CACpC,GATIZ,CAUP,CACD,EACH,GACF,CAEJ,CAEA,IAAOZ,KAAQ,cAAWgB,CAAa",
   "names": ["MarqueeReview_exports", "__export", "MarqueeReview_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_utils", "import_Styles", "FIX_ITEMS_LENGTH", "COUNT", "_chunk", "array", "size", "_", "index", "StarIcon", "Card", "item", "MarqueeReview", "data", "className", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex"]
 }

package/dist/{esm/src/biz-components/MediaPlayerBase/index.d.ts → cjs/biz-components/MediaPlayerBase/index.backup.d.ts}

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import type { MediaPlayerBaseProps } from './types.js';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 }, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/cjs/biz-components/MediaPlayerBase/index.backup.js

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

package/dist/cjs/biz-components/MediaPlayerBase/index.backup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.backup.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: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\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            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          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className=\"relative\"\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                  ref={titleFadeInRef}\n                  className=\"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              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen\"\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\"\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\"\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          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["index_backup_exports", "__export", "index_backup_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "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", "Button", "ScrollLoadVideo"]
+}

package/dist/cjs/biz-components/MediaPlayerBase/index.js

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

package/dist/cjs/biz-components/MediaPlayerBase/index.js.map

@@ -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: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\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            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          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className=\"relative\"\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                  ref={titleFadeInRef}\n                  className=\"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              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen\"\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\"\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\"\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          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "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", "Button", "ScrollLoadVideo"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react'\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'\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// \u52A8\u753B\u914D\u7F6E\u5E38\u91CF\nconst ANIMATION_CONFIG = {\n  TEXT_START_OFFSET: '10%',\n  TEXT_ANIMATION_MULTIPLIER: 1.5,\n  TEXT_ANIMATION_OFFSET: 80,\n  VIDEO_HEIGHT_BASE: 102,\n  OVERLAP_FACTOR: 0.5,\n  VIDEO_PROGRESS_THRESHOLD: 0.9,\n  HEIGHT_CHANGE_THRESHOLD: 5, // \u9AD8\u5EA6\u53D8\u5316\u9608\u503C(px)\n} as const\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\ninterface ScrollTriggerInstance {\n  progress: number\n  kill: () => void\n}\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\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<HTMLDivElement>(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<ScrollTriggerInstance | null>(null)\n    const heightTriggerRef = useRef<ScrollTriggerInstance | 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    // \u89C6\u9891\u64AD\u653E\u63A7\u5236\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    // \u4F18\u5316: \u4F7F\u7528 ResizeObserver \u66FF\u4EE3 debounce + resize \u4E8B\u4EF6\n    useEffect(() => {\n      if (!titleRef.current || !sticky) return\n\n      // \u8BA1\u7B97\u5E03\u5C40\u5C3A\u5BF8\u7684\u6838\u5FC3\u51FD\u6570\n      const calculateLayout = () => {\n        if (!titleRef.current) return\n\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\n        const newBtb = distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom\n        const newTitleHeight = titleRef.current.clientHeight + screenHeight\n\n        // \u4F7F\u7528\u9608\u503C\u68C0\u6D4B,\u907F\u514D\u9891\u7E41\u66F4\u65B0\n        setbtb(prevBtb => {\n          return Math.abs(newBtb - prevBtb) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD ? newBtb : prevBtb\n        })\n\n        setTitleHeight(prevHeight => {\n          return Math.abs(newTitleHeight - prevHeight) > ANIMATION_CONFIG.HEIGHT_CHANGE_THRESHOLD\n            ? newTitleHeight\n            : prevHeight\n        })\n      }\n\n      // \u521D\u59CB\u8BA1\u7B97\n      calculateLayout()\n\n      // ResizeObserver \u76D1\u542C\u5C3A\u5BF8\u53D8\u5316\n      const resizeObserver = new ResizeObserver(() => {\n        // \u4F7F\u7528 requestAnimationFrame \u6279\u91CF\u66F4\u65B0\n        requestAnimationFrame(() => {\n          calculateLayout()\n        })\n      })\n\n      resizeObserver.observe(titleRef.current)\n\n      // \u76D1\u542C\u7A97\u53E3\u6EDA\u52A8(\u7528\u4E8E\u8BA1\u7B97 btb)\n      const handleScroll = () => {\n        requestAnimationFrame(() => {\n          calculateLayout()\n        })\n      }\n\n      // \u4F7F\u7528\u8282\u6D41\u7684\u6EDA\u52A8\u76D1\u542C\n      let scrollTimeout: NodeJS.Timeout\n      const throttledScroll = () => {\n        if (!scrollTimeout) {\n          scrollTimeout = setTimeout(() => {\n            handleScroll()\n            scrollTimeout = null as any\n          }, 100)\n        }\n      }\n\n      window.addEventListener('scroll', throttledScroll, { passive: true })\n\n      return () => {\n        resizeObserver.disconnect()\n        window.removeEventListener('scroll', throttledScroll)\n        if (scrollTimeout) clearTimeout(scrollTimeout)\n      }\n    }, [sticky])\n\n    // \u4F18\u5316: GSAP \u52A8\u753B\u8BBE\u7F6E\n    useEffect(() => {\n      if (!inView || !titleAnimation || titleAnimation !== 'fade-in' || !titleFadeInRef.current) return\n\n      const titleElement = titleFadeInRef.current\n      const height = titleElement.clientHeight || 80\n\n      // \u5206\u8BCD\n      splitTextInstance.current = new SplitText(titleElement, {\n        type: 'words',\n        wordsClass: 'word',\n      })\n\n      const words = splitTextInstance.current.words\n      const total = words.length\n      const interval = 1 / total\n\n      // \u9884\u8BA1\u7B97\u6BCF\u4E2A\u5355\u8BCD\u7684\u52A8\u753B\u53C2\u6570 - \u907F\u514D\u6BCF\u5E27\u91CD\u590D\u8BA1\u7B97\n      const wordAnimations = words.map((_, i) => {\n        const start = (i / total) * (1 - ANIMATION_CONFIG.OVERLAP_FACTOR)\n        const width = interval * (1 + ANIMATION_CONFIG.OVERLAP_FACTOR)\n        return { start, width }\n      })\n\n      // \u521D\u59CB\u5316\u900F\u660E\u5EA6\n      gsap.set(words, { opacity: 0 })\n\n      // \u521B\u5EFA\u6587\u5B57\u6DE1\u5165 ScrollTrigger\n      scrollTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: `top center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        end: `top+=${height * ANIMATION_CONFIG.TEXT_ANIMATION_MULTIPLIER + ANIMATION_CONFIG.TEXT_ANIMATION_OFFSET}px center-=${ANIMATION_CONFIG.TEXT_START_OFFSET}`,\n        scrub: true,\n        onUpdate: self => {\n          const progress = self.progress\n\n          // \u6279\u91CF\u66F4\u65B0\u6587\u5B57\u900F\u660E\u5EA6\n          words.forEach((word, i) => {\n            const { start, width } = wordAnimations[i]\n            let opacity = (progress - start) / width\n            opacity = Math.max(0, Math.min(opacity, 1))\n            gsap.set(word, { opacity })\n          })\n\n          // \u66F4\u65B0\u80CC\u666F\u900F\u660E\u5EA6\n          if (bgRef.current) {\n            gsap.set(bgRef.current, { opacity: progress })\n          }\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        splitTextInstance.current?.revert()\n        scrollTriggerRef.current?.kill()\n      }\n    }, [titleAnimation, inView])\n\n    // \u89C6\u9891\u9AD8\u5EA6\u52A8\u753B ScrollTrigger\n    useEffect(() => {\n      if (!inView || !titleRef.current) return\n\n      heightTriggerRef.current = ScrollTrigger.create({\n        trigger: titleRef.current,\n        start: 'bottom bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: self => {\n          setVideoHeightProgress(self.progress)\n        },\n      }) as ScrollTriggerInstance\n\n      return () => {\n        heightTriggerRef.current?.kill()\n      }\n    }, [inView])\n\n    // \u66DD\u5149\u57CB\u70B9\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    // \u8BA1\u7B97\u89C6\u9891\u5BB9\u5668\u7684 z-index\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < ANIMATION_CONFIG.VIDEO_PROGRESS_THRESHOLD) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    // \u5904\u7406\u6309\u94AE\u70B9\u51FB\n    const handleBtnClick = useCallback(() => {\n      setVisible(true)\n      onBtnClick?.()\n    }, [onBtnClick])\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\n    // \u975E sticky \u6A21\u5F0F - \u7B80\u5355\u5E03\u5C40\n    if (!sticky) {\n      return (\n        <>\n          <div\n            id={id}\n            className={cn(\n              'relative overflow-hidden',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {/* \u5185\u5BB9\u5C42 */}\n              {!titleAnimation && (\n                <div className=\"media-content text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button variant=\"link\" className={cn('member-equity-button-secondary')} onClick={handleBtnClick}>\n                      {btnText}\n                    </Button>\n                  )}\n                </div>\n              )}\n\n              {/* \u89C6\u9891\u5C42 */}\n              <ScrollLoadVideo\n                videoRef={videoRef}\n                poster={img?.url || ''}\n                src={video?.url!}\n                className=\"tablet:block hidden size-full\"\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\"\n                videoClassName=\"object-cover\"\n                muted\n                loop\n                playsInline\n                autoplay\n                webkit-playsinline\n                x5-playsinline\n              />\n            </div>\n\n            {/* \u57CB\u70B9\u5143\u7D20 */}\n            <div ref={trackRef} className=\"absolute bottom-0 left-0 h-px w-full\" />\n          </div>\n\n          {visible && youtubeId && (\n            <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n          )}\n        </>\n      )\n    }\n\n    // Sticky \u6A21\u5F0F - \u590D\u6742\u5E03\u5C40\n    return (\n      <>\n        <div\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 text-info-primary 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-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-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {btnText && (\n                  <Button variant=\"link\" className={cn('member-equity-button-secondary ')} onClick={handleBtnClick}>\n                    {btnText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n        <div\n          style={{\n            marginBottom: `-${btb}px`,\n            marginTop: `-${titleHeight}px`,\n            zIndex: zIndexVideo,\n          }}\n          className=\"relative\"\n        >\n          <div className=\"sticky top-0\">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden h-screen w-full', {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px]  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              )}\n              <div\n                className=\"media-cover absolute left-0 top-0 size-full\"\n                style={{\n                  height: `${ANIMATION_CONFIG.VIDEO_HEIGHT_BASE - videoHeightProgress * 100}vh`,\n                }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\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\"\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          <div className={cn('relative box-content block', aspect)} style={{ height: `${btb}px` }} ref={trackRef} />\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": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "ANIMATION_CONFIG", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "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", "calculateLayout", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "newBtb", "newTitleHeight", "prevBtb", "prevHeight", "resizeObserver", "handleScroll", "scrollTimeout", "throttledScroll", "titleElement", "height", "words", "total", "interval", "wordAnimations", "_", "i", "start", "width", "self", "progress", "word", "opacity", "zIndexVideo", "handleBtnClick", "aspect", "Button", "ScrollLoadVideo"]
 }

package/dist/cjs/biz-components/MediaPlayerSticky/index.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var ne=Object.create;var v=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ue=(s,t)=>{for(var r in t)v(s,r,{get:t[r],enumerable:!0})},E=(s,t,r,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ie(t))!ce.call(s,n)&&n!==r&&v(s,n,{get:()=>t[n],enumerable:!(l=le(t,n))||l.enumerable});return s};var c=(s,t,r)=>(r=s!=null?ne(oe(s)):{},E(t||!s||!s.__esModule?v(r,"default",{value:s,enumerable:!0}):r,s)),de=s=>E(v({},"__esModule",{value:!0}),s);var ye={};ue(ye,{default:()=>fe});module.exports=de(ye);var e=require("react/jsx-runtime"),a=c(require("react")),S=require("es-toolkit"),L=require("react-intersection-observer"),m=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),$=c(require("../Slogan/index.js")),Y=require("../VideoModal/YouTubePlayer.js"),u=require("../../components/gird.js"),q=require("../../components/container.js"),F=c(require("../BrandEquity/index.js")),I=c(require("../MemberEquity/index.js")),j=c(require("../Spacer/index.js")),G=c(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),V=c(require("../../helpers/ScrollLoadVideo.js"));const P=({defaultConverters:s})=>({...s,text:t=>{const{node:r}=t;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),k=({children:s,spaceY:t,className:r})=>{const l=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(q.Container,{spaceY:t,className:(0,m.cn)("!bg-transparent",r),children:(0,e.jsxs)(u.Grid,{children:[!l&&(0,e.jsx)(u.GridItem,{span:1}),(0,e.jsx)(u.GridItem,{span:l?12:10,children:s}),!l&&(0,e.jsx)(u.GridItem,{span:1})]})})},pe=a.default.forwardRef(({children:s,id:t,components:r})=>{const l=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:l,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:s}),(0,e.jsx)(e.Fragment,{children:r?.map(n=>{switch(n.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(F.default,{data:n,style:n?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(k,{spaceY:"none",children:(0,e.jsx)(I.default,{data:n,className:"w-full",style:n?.style})})});case"ipc-spacer":return(0,e.jsx)(j.default,{data:n,style:n?.style,className:"!bg-transparent"});default:return null}})})]})}),me=(0,a.forwardRef)(({className:s="",id:t,data:{title:r,videoTitle:l,mobVideo:n,mobImg:f,img:y,isYouTube:O,youtubePcId:R,youtubeMobileId:Q,video:g,theme:M,shape:W,components:_}})=>{const H=(0,a.useRef)(null),b=(0,a.useRef)(null),{ref:A,inView:d}=(0,L.useInView)(),[ve,D]=(0,a.useState)(0),[T,J]=(0,a.useState)(!1),[K,U]=(0,a.useState)(!1),X=(0,a.useRef)(null),i=(0,a.useRef)(null),Z=typeof r=="string"?r:r&&(0,x.convertLexicalToHTML)({data:r,converters:P});typeof l=="string"||l&&(0,x.convertLexicalToHTML)({data:l,converters:P});const[ee,te]=(0,a.useState)(0),[o,re]=(0,a.useState)(!1),z=(0,N.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{re(z)},[z]);const w=(0,S.debounce)(()=>{if(b.current){const h=b.current.getBoundingClientRect(),p=o?window.screen.height:window.innerHeight,se=window.scrollY||window.pageYOffset,ae=h.bottom+se,C=document.documentElement.scrollHeight-ae;te(C>p?p:C),D(p)}},2e3);return(0,a.useEffect)(()=>{d&&!T&&(H.current?.play(),J(!0))},[d,T]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function h(){const p=o?window.screen.height:window.innerHeight;i.current&&(i.current.scrollTrigger?.kill(),i.current.kill(),i.current=null),i.current=G.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${p*1.8}px bottom`,scrub:.5,invalidateOnRefresh:!0},defaults:{ease:"none",force3D:!0}}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{yPercent:150,duration:1},"<")}return d&&h(),()=>{i.current&&(i.current.scrollTrigger?.kill(),i.current.kill(),i.current=null)}},[d,o,t]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,m.cn)("relative z-20 h-screen w-full",s,{"aiui-dark":M==="dark","rounded-box":W==="rounded"}),ref:X,children:(0,e.jsx)("div",{ref:A,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:(0,e.jsx)(k,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)($.default,{className:"sticky-title antialiased",data:{title:Z||"",theme:M}})})})}),(0,e.jsxs)("div",{ref:b,style:{marginBottom:`-${ee}px`,zIndex:d?2:1},className:(0,m.cn)(t,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full"),children:[O?(0,e.jsx)(Y.YouTubePlayer,{youTubeId:o&&Q||R}):g?.url&&(0,e.jsx)(V.default,{videoRef:H,poster:o&&f?.url?f?.url:y?.url,src:o&&n?.url?n?.url:g?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{U(!0)}}),y?.url&&(!g?.url||K)&&(0,e.jsx)("img",{src:o&&f?.url?f?.url:y?.url,alt:y?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(pe,{components:_}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var fe=(0,B.withLayout)(me);
+"use strict";"use client";var ae=Object.create;var y=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,le=Object.prototype.hasOwnProperty;var ce=(s,t)=>{for(var r in t)y(s,r,{get:t[r],enumerable:!0})},S=(s,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of ne(t))!le.call(s,o)&&o!==r&&y(s,o,{get:()=>t[o],enumerable:!(n=oe(t,o))||n.enumerable});return s};var i=(s,t,r)=>(r=s!=null?ae(ie(s)):{},S(t||!s||!s.__esModule?y(r,"default",{value:s,enumerable:!0}):r,s)),de=s=>S(y({},"__esModule",{value:!0}),s);var fe={};ce(fe,{default:()=>ue});module.exports=de(fe);var e=require("react/jsx-runtime"),a=i(require("react")),L=require("es-toolkit"),P=require("react-intersection-observer"),m=require("../../helpers/utils.js"),C=require("../../shared/Styles.js"),$=i(require("../Slogan/index.js")),B=require("../VideoModal/YouTubePlayer.js"),c=require("../../components/gird.js"),Y=require("../../components/container.js"),q=i(require("../BrandEquity/index.js")),F=i(require("../MemberEquity/index.js")),I=i(require("../Spacer/index.js")),j=i(require("gsap")),x=require("@payloadcms/richtext-lexical/html"),N=require("react-responsive"),G=i(require("../../helpers/ScrollLoadVideo.js"));const T=({defaultConverters:s})=>({...s,text:t=>{const{node:r}=t;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),h=({children:s,spaceY:t,className:r})=>{const n=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,e.jsx)(Y.Container,{spaceY:t,className:(0,m.cn)("!bg-transparent",r),children:(0,e.jsxs)(c.Grid,{children:[!n&&(0,e.jsx)(c.GridItem,{span:1}),(0,e.jsx)(c.GridItem,{span:n?12:10,children:s}),!n&&(0,e.jsx)(c.GridItem,{span:1})]})})},pe=a.default.forwardRef(({children:s,id:t,components:r})=>{const n=(0,a.useRef)(null);return(0,e.jsxs)("div",{ref:n,className:"relative z-10",children:[(0,e.jsx)(e.Fragment,{children:s}),(0,e.jsx)(e.Fragment,{children:r?.map(o=>{switch(o.blockType){case"ipc-brand-equity":return(0,e.jsx)("div",{className:"relative z-20 bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(q.default,{data:o,style:o?.style})})});case"ipc-member-equity":return(0,e.jsx)("div",{className:"relative z-20 w-full bg-transparent",children:(0,e.jsx)(h,{spaceY:"none",children:(0,e.jsx)(F.default,{data:o,className:"w-full",style:o?.style})})});case"ipc-spacer":return(0,e.jsx)(I.default,{data:o,style:o?.style,className:"!bg-transparent"});default:return null}})})]})}),me=(0,a.forwardRef)(({className:s="",id:t,data:{title:r,videoTitle:n,mobVideo:o,mobImg:u,img:f,isYouTube:V,youtubePcId:k,youtubeMobileId:Q,video:v,theme:M,shape:O,components:W}})=>{const R=(0,a.useRef)(null),b=(0,a.useRef)(null),{ref:_,inView:d}=(0,P.useInView)(),[ye,A]=(0,a.useState)(0),[H,J]=(0,a.useState)(!1),[K,U]=(0,a.useState)(!1),X=(0,a.useRef)(null),Z=typeof r=="string"?r:r&&(0,x.convertLexicalToHTML)({data:r,converters:T});typeof n=="string"||n&&(0,x.convertLexicalToHTML)({data:n,converters:T});const[D,ee]=(0,a.useState)(0),[l,te]=(0,a.useState)(!1),z=(0,N.useMediaQuery)({query:"(max-width: 768px)"});(0,a.useEffect)(()=>{te(z)},[z]);const w=(0,L.debounce)(()=>{if(b.current){const g=b.current.getBoundingClientRect(),p=l?window.screen.height:window.innerHeight,re=window.scrollY||window.pageYOffset,se=g.bottom+re,E=document.documentElement.scrollHeight-se;ee(E>p?p:E),A(p)}},2e3);return(0,a.useEffect)(()=>{d&&!H&&(R.current?.play(),J(!0))},[d,H]),(0,a.useEffect)(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),(0,a.useEffect)(()=>{function g(){const p=l?window.screen.height:window.innerHeight;j.default.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${p*1.8}px bottom`,scrub:.2}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}d&&g()},[d]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{id:t,className:(0,m.cn)("relative z-20 h-screen w-full",s,{"aiui-dark":M==="dark","rounded-box":O==="rounded"}),ref:X,children:(0,e.jsx)("div",{ref:_,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2",children:(0,e.jsx)(h,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:(0,e.jsx)($.default,{className:"sticky-title",data:{title:Z||"",theme:M}})})})}),(0,e.jsxs)("div",{ref:b,style:{marginBottom:`-${D}px`,zIndex:d?2:1},className:(0,m.cn)(t,"relative mt-[-200vh]"),children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("media-cover","relative h-screen w-full"),children:[V?(0,e.jsx)(B.YouTubePlayer,{youTubeId:l&&Q||k}):v?.url&&(0,e.jsx)(G.default,{videoRef:R,poster:l&&u?.url?u?.url:f?.url,src:l&&o?.url?o?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{U(!0)}}),f?.url&&(!v?.url||K)&&(0,e.jsx)("img",{src:l&&u?.url?u?.url:f?.url,alt:f?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover  object-[82%]"}),(0,e.jsx)("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"}})]})}),(0,e.jsx)("div",{className:"relative h-screen w-full"}),(0,e.jsx)(pe,{components:W}),(0,e.jsx)("div",{className:"relative h-screen w-full"})]})]})});var ue=(0,C.withLayout)(me);
 //# sourceMappingURL=index.js.map