npm - @anker-in/headless-ui - Versions diffs - 1.1.68 → 1.1.69 - Mend

@anker-in/headless-ui 1.1.68 → 1.1.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (292) hide show

package/dist/cjs/biz-components/InlineVideo/index.d.ts CHANGED Viewed

@@ -9,8 +9,7 @@ export interface InlineVideoData {
     mobVideoUrl: string;
     theme?: Theme;
 }
-export interface InlineVideoProps {
+export interface InlineVideoProps extends React.HTMLAttributes<HTMLElement> {
     data: InlineVideoData;
-    className?: string;
 }
-export default function VideoWithTitle(props: InlineVideoProps): import("react/jsx-runtime").JSX.Element;
+export default function VideoWithTitle({ data, className, ...rest }: InlineVideoProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/biz-components/InlineVideo/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(i,e)=>{for(var l in e)p(i,l,{get:e[l],enumerable:!0})},h=(i,e,l,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of f(e))!u.call(i,o)&&o!==l&&p(i,o,{get:()=>e[o],enumerable:!(s=v(e,o))||s.enumerable});return i};var g=i=>h(p({},"__esModule",{value:!0}),i);var w={};b(w,{default:()=>d});module.exports=g(w);var t=require("react/jsx-runtime"),n=require("../../components/index.js"),a=require("../../helpers/utils.js");function d(i){const{title:e,subtitle:l,desc:s,poster:o,videoUrl:m,mobPoster:r,mobVideoUrl:x,theme:c="light"}=i?.data??{};return(0,t.jsxs)("section",{className:(0,a.cn)("inline-video-section rounded-box flex flex-col items-center","text-info-primary",{"aiui-dark":c==="dark"},i.className),children:[(0,t.jsxs)("div",{className:(0,a.cn)("inline-video-content laptop:items-center flex w-full flex-col items-start"),children:[(0,t.jsx)(n.Heading,{as:"h2",size:4,html:e,className:"inline-video-title laptop:text-center shrink text-left"}),(0,t.jsxs)("div",{className:"inline-video-text-wrapper",children:[l&&(0,t.jsx)(n.Heading,{size:3,as:"h5",html:l,className:(0,a.cn)("inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left")}),(0,t.jsx)(n.Text,{as:"p",size:4,html:s,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]"})]})]}),(0,t.jsxs)("div",{className:"inline-video-container tablet:aspect-[3060/1180] rounded-box mt-[24px] aspect-[398/400] w-full overflow-hidden xl:h-[360px]",children:[(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:m,loop:!0,className:"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]"}),(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:r,src:x,loop:!0,className:"inline-video-mobile tablet:hidden block w-full"})]})]})}
+"use strict";var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var w=(i,e)=>{for(var o in e)a(i,o,{get:e[o],enumerable:!0})},g=(i,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of b(e))!h.call(i,l)&&l!==o&&a(i,l,{get:()=>e[l],enumerable:!(s=u(e,l))||s.enumerable});return i};var N=i=>g(a({},"__esModule",{value:!0}),i);var k={};w(k,{default:()=>d});module.exports=N(k);var t=require("react/jsx-runtime"),n=require("../../components/index.js"),p=require("../../helpers/utils.js");function d({data:i,className:e,...o}){const{title:s,subtitle:l,desc:r,poster:m,videoUrl:x,mobPoster:c,mobVideoUrl:v,theme:f="light"}=i??{};return(0,t.jsxs)("section",{...o,className:(0,p.cn)("inline-video-section rounded-box flex flex-col items-center","text-info-primary",{"aiui-dark":f==="dark"},e),children:[(0,t.jsxs)("div",{className:(0,p.cn)("inline-video-content laptop:items-center flex w-full flex-col items-start"),children:[(0,t.jsx)(n.Heading,{as:"h2",size:4,html:s,className:"inline-video-title laptop:text-center shrink text-left"}),(0,t.jsxs)("div",{className:"inline-video-text-wrapper",children:[l&&(0,t.jsx)(n.Heading,{size:3,as:"h5",html:l,className:(0,p.cn)("inline-video-subtitle laptop:mt-[8px] laptop:text-center mt-[4px] w-full text-left")}),(0,t.jsx)(n.Text,{as:"p",size:4,html:r,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]"})]})]}),(0,t.jsxs)("div",{className:"inline-video-container tablet:aspect-[3060/1180] rounded-box mt-[24px] aspect-[398/400] w-full overflow-hidden xl:h-[360px]",children:[(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:m,src:x,loop:!0,className:"inline-video-desktop tablet:block hidden size-full object-cover xl:h-[360px]"}),(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:c,src:v,loop:!0,className:"inline-video-mobile tablet:hidden block w-full"})]})]})}
 //# sourceMappingURL=index.js.map

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

@@ -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 rounded-box flex flex-col items-center',\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 as={'h2'} size={4} html={title} className=\"inline-video-title laptop:text-center shrink text-left\" />\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] rounded-box mt-[24px] aspect-[398/400] w-full overflow-hidden 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,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAMC,EAAO,UAAU,yDAAyD,KAG5G,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"]
+  "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 extends React.HTMLAttributes<HTMLElement> {\n  data: InlineVideoData\n}\n\nexport default function VideoWithTitle({ data, className, ...rest }: InlineVideoProps) {\n  const { title, subtitle, desc, poster, videoUrl, mobPoster, mobVideoUrl, theme = 'light' } = data ?? {}\n\n  return (\n    <section\n      {...rest}\n      className={cn(\n        'inline-video-section rounded-box flex flex-col items-center',\n        'text-info-primary', // \u4F7F\u7528\u4E3B\u9898\u989C\u8272\u53D8\u91CF\n        {\n          'aiui-dark': theme === 'dark', // \u6DF1\u8272\u6A21\u5F0F\n        },\n        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 as={'h2'} size={4} html={title} className=\"inline-video-title laptop:text-center shrink text-left\" />\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] rounded-box mt-[24px] aspect-[398/400] w-full overflow-hidden 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,kCAkBJ,SAARJ,EAAgC,CAAE,KAAAK,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAqB,CACrF,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,KAAAC,EAAM,OAAAC,EAAQ,SAAAC,EAAU,UAAAC,EAAW,YAAAC,EAAa,MAAAC,EAAQ,OAAQ,EAAIV,GAAQ,CAAC,EAEtG,SACE,QAAC,WACE,GAAGE,EACJ,aAAW,MACT,8DACA,oBACA,CACE,YAAaQ,IAAU,MACzB,EACAT,CACF,EAGA,qBAAC,OAAI,aAAW,MAAG,2EAA2E,EAE5F,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,yDAAyD,KAG5G,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", "data", "className", "rest", "title", "subtitle", "desc", "poster", "videoUrl", "mobPoster", "mobVideoUrl", "theme"]
 }

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

@@ -30,7 +30,7 @@ export interface KspData {
 /**
  * Ksp 组件 Props
  */
-export interface KspProps {
+export interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {
     /** KSP 数据 */
     data: KspData;
     /** 自定义类名 */

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Ksp/index.tsx"],
-  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u4E3B\u9898 */\n  theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\n  return (\n    <div\n      className={cn(\n        'ksp-card rounded-box text-info-primary relative overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={\n              image?.url && mobImage?.url ? `${image.url} 1920, ${mobImage.url} 767` : image?.url || mobImage?.url\n            }\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image size-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n        <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n        <Heading\n          size={2}\n          html={title}\n          className=\"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all\"\n        />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n *\n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u652F\u6301 4-9 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n *\n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n      <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n        {items.map((item, index) => (\n          <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
-  "mappings": "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,OACED,GAAO,KAAOC,GAAU,IAAM,GAAGD,EAAM,GAAG,UAAUC,EAAS,GAAG,OAASD,GAAO,KAAOC,GAAU,IAEnG,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,2BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,kDACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,sDAAsD,KAC/F,OAAC,WACC,KAAM,EACN,KAAMA,EACN,UAAU,6FACZ,KACA,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,+JACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,wQACL,EACA,EAAG,CACD,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,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"]
+  "sourcesContent": ["import { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media, Theme } from '../../types/props.js'\n\n/**\n * KSP \u5361\u7247\u9879\u6570\u636E\u7ED3\u6784\n */\nexport interface KspCardItem {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u63CF\u8FF0 */\n  desc?: string\n  /** \u684C\u9762\u7AEF\u56FE\u7247 URL */\n  image?: Media\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 URL */\n  mobImage?: Media\n  /** \u684C\u9762\u7AEF\u89C6\u9891 URL */\n  video?: Media\n  /** \u79FB\u52A8\u7AEF\u89C6\u9891 URL */\n  mobVideo?: Media\n}\n\n/**\n * KSP \u6570\u636E\u7ED3\u6784\n */\nexport interface KspData {\n  /** \u4E3B\u6807\u9898 */\n  title?: string\n  /** KSP \u5361\u7247\u5217\u8868\uFF08\u9700\u8981 7 \u4E2A\u9879\uFF09 */\n  items: KspCardItem[]\n  /** \u4E3B\u9898\uFF0C\u9ED8\u8BA4 light */\n  theme?: Theme\n}\n\n/**\n * Ksp \u7EC4\u4EF6 Props\n */\nexport interface KspProps extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {\n  /** KSP \u6570\u636E */\n  data: KspData\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n}\n\ninterface ImageCardProps extends KspCardItem {\n  /** \u81EA\u5B9A\u4E49\u7C7B\u540D */\n  className?: string\n  /** \u4E3B\u9898 */\n  theme?: Theme\n}\n\nconst ImageCard = ({ title, desc, image, mobImage, video, mobVideo, className, theme }: ImageCardProps) => {\n  return (\n    <div\n      className={cn(\n        'ksp-card rounded-box text-info-primary relative overflow-hidden',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      {video && mobVideo ? (\n        <>\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={video?.url}\n            poster={image?.url}\n            className=\"ksp-card-video ksp-card-video-desktop laptop:inline-block absolute bottom-0 hidden w-full\"\n          />\n          <video\n            playsInline\n            autoPlay\n            muted\n            loop\n            src={mobVideo?.url}\n            poster={mobImage?.url}\n            className=\"ksp-card-video ksp-card-video-mobile laptop:hidden absolute inline-block translate-y-[-80px] object-contain object-center\"\n          />\n        </>\n      ) : (\n        (image || mobImage) && (\n          <Picture\n            source={\n              image?.url && mobImage?.url ? `${image.url} 1920, ${mobImage.url} 767` : image?.url || mobImage?.url\n            }\n            alt={image?.alt || mobImage?.alt || ''}\n            className=\"ksp-card-image size-full\"\n            imgClassName=\"h-full w-full object-cover object-bottom\"\n          />\n        )\n      )}\n      <div className=\"ksp-card-content desktop:p-6 lg-desktop:p-8 p-4\">\n        <Heading size={3} html={title} className=\"ksp-card-title tablet:block hidden w-full break-all\" />\n        <Heading\n          size={2}\n          html={title}\n          className=\"ksp-card-title tablet:hidden tablet:w-[340px] xs-tablet:text-[16px] block w-full break-all\"\n        />\n        <Text\n          size={2}\n          html={desc}\n          className=\"ksp-card-desc text-info-primary tablet:block tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] break-all text-[14px]\"\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5E03\u5C40\u914D\u7F6E\u6620\u5C04\u8868\n * \u6839\u636E items \u6570\u91CF\u548C\u7D22\u5F15\u4F4D\u7F6E\uFF0C\u5B9A\u4E49\u6BCF\u4E2A\u5361\u7247\u7684\u6805\u683C\u5E03\u5C40\u7C7B\u540D\n */\nconst LAYOUT_CONFIG: Record<number, Record<number, string>> = {\n  4: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  5: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n  },\n  6: {\n    0: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  7: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-2 tablet:col-span-1 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    6: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n  },\n  8: {\n    0: 'col-span-2 laptop:col-span-6 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[440] laptop:aspect-h-[240] desktop:aspect-w-[648] desktop:aspect-h-[256] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n  9: {\n    0: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    1: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    2: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    3: 'col-span-1 tablet:col-span-2 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    4: 'col-span-1 laptop:col-span-4 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n    5: 'col-span-2 tablet:col-span-1 laptop:col-span-3 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    6: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    7: 'col-span-1 laptop:col-span-3 aspect-w-[173] aspect-h-[240] tablet:aspect-w-[227] tablet:aspect-h-[240] laptop:aspect-w-[212] laptop:aspect-h-[240] desktop:aspect-w-[316] desktop:aspect-h-[256] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[320]',\n    8: 'col-span-2 laptop:col-span-4 aspect-w-[358] aspect-h-[240] tablet:aspect-w-[465] tablet:aspect-h-[240] laptop:aspect-w-[288] laptop:aspect-h-[240] desktop:aspect-w-[426] desktop:aspect-h-[256] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[320]',\n  },\n}\n\n/**\n * \u83B7\u53D6\u5361\u7247\u7684\u5E03\u5C40\u7C7B\u540D\n * @param index - \u5361\u7247\u7D22\u5F15\n * @param totalCount - \u5361\u7247\u603B\u6570\n * @returns \u5E03\u5C40\u7C7B\u540D\n */\nconst getCardLayoutClass = (index: number, totalCount: number): string => {\n  return LAYOUT_CONFIG[totalCount]?.[index] || ''\n}\n\n/**\n * Ksp - Key Selling Point \u5173\u952E\u5356\u70B9\u7EC4\u4EF6\n *\n * \u5C55\u793A\u4EA7\u54C1\u7684\u5173\u952E\u5356\u70B9\uFF0C\u652F\u6301\u56FE\u7247\u548C\u89C6\u9891\uFF0C\u5177\u6709\u590D\u6742\u7684\u54CD\u5E94\u5F0F\u5E03\u5C40\u3002\n * \u5E03\u5C40\u652F\u6301 4-9 \u4E2A\u5361\u7247\u9879\uFF0C\u5206\u522B\u5BF9\u5E94\u4E0D\u540C\u5C3A\u5BF8\u548C\u4F4D\u7F6E\u3002\n *\n * @example\n * ```tsx\n * <Ksp\n *   data={{\n *     title: '\u4E3A\u4EC0\u4E48\u9009\u62E9\u6211\u4EEC',\n *     items: [\n *       {\n *         title: '\u9AD8\u6027\u80FD',\n *         desc: '\u5F3A\u5927\u7684\u5904\u7406\u80FD\u529B',\n *         image: '/desktop.jpg',\n *         mobImage: '/mobile.jpg'\n *       },\n *       // ... \u9700\u8981 4-9 \u4E2A\u9879\n *     ]\n *   }}\n * />\n * ```\n */\nfunction Ksp({ data, className, ...rest }: KspProps) {\n  const { title, items, theme = 'light' } = data\n  return (\n    <section\n      {...rest}\n      data-ui-component-id=\"ksp\"\n      className={cn(\n        'ksp-container text-info-primary laptop:scroll-mt-[46px] flex scroll-mt-[108px] flex-col justify-center',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"ksp-title laptop:text-center text-left text-white\" />\n      <div className=\"ksp-layout tablet:grid-cols-3 laptop:grid-cols-10 laptop:gap-4 grid grid-cols-2 gap-3\">\n        {items.map((item, index) => (\n          <ImageCard key={index} {...item} className={getCardLayoutClass(index, items.length)} />\n        ))}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(Ksp)\n"],
+  "mappings": "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,OACED,GAAO,KAAOC,GAAU,IAAM,GAAGD,EAAM,GAAG,UAAUC,EAAS,GAAG,OAASD,GAAO,KAAOC,GAAU,IAEnG,IAAKD,GAAO,KAAOC,GAAU,KAAO,GACpC,UAAU,2BACV,aAAa,2CACf,KAGJ,QAAC,OAAI,UAAU,kDACb,oBAAC,WAAQ,KAAM,EAAG,KAAMH,EAAO,UAAU,sDAAsD,KAC/F,OAAC,WACC,KAAM,EACN,KAAMA,EACN,UAAU,6FACZ,KACA,OAAC,QACC,KAAM,EACN,KAAMC,EACN,UAAU,+JACZ,GACF,GACF,EAQEO,EAAwD,CAC5D,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,wQACL,EACA,EAAG,CACD,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,sPACL,EACA,EAAG,CACD,EAAG,uPACH,EAAG,uPACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,yQACH,EAAG,uPACH,EAAG,uPACH,EAAG,sPACL,CACF,EAQMC,EAAqB,CAACC,EAAeC,IAClCH,EAAcG,CAAU,IAAID,CAAK,GAAK,GA2B/C,SAASE,EAAI,CAAE,KAAAC,EAAM,UAAAP,EAAW,GAAGQ,CAAK,EAAa,CACnD,KAAM,CAAE,MAAAd,EAAO,MAAAe,EAAO,MAAAR,EAAQ,OAAQ,EAAIM,EAC1C,SACE,QAAC,WACE,GAAGC,EACJ,uBAAqB,MACrB,aAAW,MACT,yGACA,CACE,YAAaP,IAAU,MACzB,EACAD,CACF,EAEA,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMN,EAAO,UAAU,oDAAoD,KACrG,OAAC,OAAI,UAAU,wFACZ,SAAAe,EAAM,IAAI,CAACC,EAAMN,OAChB,OAACX,EAAA,CAAuB,GAAGiB,EAAM,UAAWP,EAAmBC,EAAOK,EAAM,MAAM,GAAlEL,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", "rest", "items", "item"]
 }

package/dist/cjs/biz-components/MarqueeReview/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Media, Theme } from '../../types/props.js';
 /**
  * 评论项数据结构
@@ -28,14 +29,12 @@ export interface MarqueeReviewData {
 /**
  * MarqueeReview 组件 Props
  */
-export interface MarqueeReviewProps {
+export interface MarqueeReviewProps extends React.HTMLAttributes<HTMLElement> {
     /** 评论数据 */
     data: MarqueeReviewData;
-    /** 自定义类名 */
-    className?: string;
 }
-declare const _default: import("react").ForwardRefExoticComponent<MarqueeReviewProps & {
+declare const _default: React.ForwardRefExoticComponent<MarqueeReviewProps & {
     style?: string | React.CSSProperties;
     container?: import("../../shared/Styles.js").ContainerProps["container"];
-} & import("react").RefAttributes<any>>;
+} & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use strict";var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var C=(t,a)=>{for(var s in a)m(t,s,{get:a[s],enumerable:!0})},L=(t,a,s,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of w(a))!u.call(t,i)&&i!==s&&m(t,i,{get:()=>a[i],enumerable:!(p=g(a,i))||p.enumerable});return t};var k=t=>L(m({},"__esModule",{value:!0}),t);var R={};C(R,{default:()=>A});module.exports=k(R);var e=require("react/jsx-runtime"),l=require("../../components/index.js"),n=require("../../helpers/utils.js"),x=require("../../shared/Styles.js");const c=9,y=3,N=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(s,p)=>t.slice(p*a,(p+1)*a)),b=()=>(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=()=>(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"13",viewBox:"0 0 14 13",fill:"none",children:(0,e.jsx)("path",{d:"M6.07501 0.418036C6.35012 -0.139398 7.145 -0.139397 7.42011 0.418037L8.9242 3.46565C9.03344 3.68701 9.24462 3.84043 9.4889 3.87593L12.8521 4.36464C13.4673 4.45403 13.7129 5.21 13.2678 5.64391L10.8341 8.01614C10.6574 8.18844 10.5767 8.43669 10.6184 8.67999L11.1929 12.0296C11.298 12.6423 10.655 13.1095 10.1047 12.8203L7.09656 11.2388C6.87807 11.1239 6.61705 11.1239 6.39855 11.2388L3.39038 12.8203C2.84016 13.1095 2.19709 12.6423 2.30217 12.0296L2.87668 8.67999C2.91841 8.43669 2.83775 8.18844 2.66098 8.01614L0.227318 5.64391C-0.21782 5.21 0.0278133 4.45403 0.642979 4.36464L4.00622 3.87593C4.2505 3.84043 4.46167 3.68701 4.57092 3.46565L6.07501 0.418036Z",fill:"#75787F"})}),I=({item:t})=>(0,e.jsxs)("div",{className:"rounded-box bg-container-primary text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px] flex h-[240px] grow flex-col justify-between p-[16px]",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:"laptop:block hidden"}),(0,e.jsx)(l.Text,{size:2,html:t.name,className:"laptop:hidden block"}),(0,e.jsxs)("div",{className:"mt-2 flex gap-1",children:[new Array(t.rating||5).fill(0).map((a,s)=>(0,e.jsx)(b,{},s)),new Array(5-(t.rating||5)).fill(0).map((a,s)=>(0,e.jsx)("span",{children:M()},s))]})]}),(0,e.jsxs)(l.Avatar,{size:"small",className:" laptop:size-[48px]  size-[40px]",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:p,items:i=[],theme:h="light"}=t,d=N(i.length<c?[...i,...i.slice(c-i.length)]:i,y).slice(0,3).map(o=>[...o,...o]);return(0,e.jsxs)("section",{className:(0,n.cn)("text-info-primary flex flex-col items-center justify-center py-3",a,{"aiui-dark":h==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:s,className:"laptop:text-center w-full text-left"}),(0,e.jsx)(l.Text,{size:2,html:p,className:"tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]"}),(0,e.jsx)("div",{className:(0,n.cn)("mask-fade-vertical laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px] mt-[24px] flex h-[480px] gap-4 overflow-hidden"),children:d.map((o,r)=>(0,e.jsx)("div",{className:(0,n.cn)("animate-marquee-scroll relative flex h-fit flex-1 flex-col gap-4",{"top-10":r===0||r===2,"hidden desktop:flex":r===1,"hidden tablet:flex":r===2}),children:o.map((f,v)=>(0,e.jsx)(I,{item:f},v))},r))})]})}var A=(0,x.withLayout)(T);
+"use strict";var c=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var L=(t,a)=>{for(var s in a)c(t,s,{get:a[s],enumerable:!0})},k=(t,a,s,i)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of u(a))!C.call(t,p)&&p!==s&&c(t,p,{get:()=>a[p],enumerable:!(i=w(a,p))||i.enumerable});return t};var b=t=>k(c({},"__esModule",{value:!0}),t);var q={};L(q,{default:()=>I});module.exports=b(q);var e=require("react/jsx-runtime"),_=require("react"),l=require("../../components/index.js"),m=require("../../helpers/utils.js"),d=require("../../shared/Styles.js");const x=9,y=3,N=(t,a)=>Array.from({length:Math.ceil(t.length/a)},(s,i)=>t.slice(i*a,(i+1)*a)),M=()=>(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"})}),T=()=>(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"13",viewBox:"0 0 14 13",fill:"none",children:(0,e.jsx)("path",{d:"M6.07501 0.418036C6.35012 -0.139398 7.145 -0.139397 7.42011 0.418037L8.9242 3.46565C9.03344 3.68701 9.24462 3.84043 9.4889 3.87593L12.8521 4.36464C13.4673 4.45403 13.7129 5.21 13.2678 5.64391L10.8341 8.01614C10.6574 8.18844 10.5767 8.43669 10.6184 8.67999L11.1929 12.0296C11.298 12.6423 10.655 13.1095 10.1047 12.8203L7.09656 11.2388C6.87807 11.1239 6.61705 11.1239 6.39855 11.2388L3.39038 12.8203C2.84016 13.1095 2.19709 12.6423 2.30217 12.0296L2.87668 8.67999C2.91841 8.43669 2.83775 8.18844 2.66098 8.01614L0.227318 5.64391C-0.21782 5.21 0.0278133 4.45403 0.642979 4.36464L4.00622 3.87593C4.2505 3.84043 4.46167 3.68701 4.57092 3.46565L6.07501 0.418036Z",fill:"#75787F"})}),R=({item:t})=>(0,e.jsxs)("div",{className:"rounded-box bg-container-primary text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px] flex h-[240px] grow flex-col justify-between p-[16px]",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:"laptop:block hidden"}),(0,e.jsx)(l.Text,{size:2,html:t.name,className:"laptop:hidden block"}),(0,e.jsxs)("div",{className:"mt-2 flex gap-1",children:[new Array(t.rating||5).fill(0).map((a,s)=>(0,e.jsx)(M,{},s)),new Array(5-(t.rating||5)).fill(0).map((a,s)=>(0,e.jsx)("span",{children:T()},s))]})]}),(0,e.jsxs)(l.Avatar,{size:"small",className:" laptop:size-[48px]  size-[40px]",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 A({data:t,className:a,...s}){const{title:i,subtitle:p,items:r=[],theme:h="light"}=t,f=N(r.length<x?[...r,...r.slice(x-r.length)]:r,y).slice(0,3).map(n=>[...n,...n]);return(0,e.jsxs)("section",{...s,className:(0,m.cn)("text-info-primary flex flex-col items-center justify-center py-3",a,{"aiui-dark":h==="dark"}),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:i,className:"laptop:text-center w-full text-left"}),(0,e.jsx)(l.Text,{size:2,html:p,className:"tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]"}),(0,e.jsx)("div",{className:(0,m.cn)("mask-fade-vertical laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px] mt-[24px] flex h-[480px] gap-4 overflow-hidden"),children:f.map((n,o)=>(0,e.jsx)("div",{className:(0,m.cn)("animate-marquee-scroll relative flex h-fit flex-1 flex-col gap-4",{"top-10":o===0||o===2,"hidden desktop:flex":o===1,"hidden tablet:flex":o===2}),children:n.map((v,g)=>(0,e.jsx)(R,{item:v},g))},o))})]})}var I=(0,d.withLayout)(A);
 //# sourceMappingURL=index.js.map

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

@@ -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\nconst unStarIcon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\">\n    <path\n      d=\"M6.07501 0.418036C6.35012 -0.139398 7.145 -0.139397 7.42011 0.418037L8.9242 3.46565C9.03344 3.68701 9.24462 3.84043 9.4889 3.87593L12.8521 4.36464C13.4673 4.45403 13.7129 5.21 13.2678 5.64391L10.8341 8.01614C10.6574 8.18844 10.5767 8.43669 10.6184 8.67999L11.1929 12.0296C11.298 12.6423 10.655 13.1095 10.1047 12.8203L7.09656 11.2388C6.87807 11.1239 6.61705 11.1239 6.39855 11.2388L3.39038 12.8203C2.84016 13.1095 2.19709 12.6423 2.30217 12.0296L2.87668 8.67999C2.91841 8.43669 2.83775 8.18844 2.66098 8.01614L0.227318 5.64391C-0.21782 5.21 0.0278133 4.45403 0.642979 4.36464L4.00622 3.87593C4.2505 3.84043 4.46167 3.68701 4.57092 3.46565L6.07501 0.418036Z\"\n      fill=\"#75787F\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"rounded-box bg-container-primary text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px] flex h-[240px] grow flex-col justify-between p-[16px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"laptop:block hidden\" />\n          <Text size={2} html={item.name} className=\"laptop:hidden block\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n            {new Array(5 - (item.rating || 5)).fill(0).map((_, index) => (\n              <span key={index}>{unStarIcon()}</span>\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" laptop:size-[48px]  size-[40px]\">\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('text-info-primary flex flex-col items-center justify-center py-3', className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center w-full text-left\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px] mt-[24px] flex h-[480px] gap-4 overflow-hidden'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex h-fit flex-1 flex-col gap-4', {\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": "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",
-  "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", "unStarIcon", "Card", "item", "MarqueeReview", "data", "className", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex"]
+  "sourcesContent": ["import React from 'react'\nimport { 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 extends React.HTMLAttributes<HTMLElement> {\n  /** \u8BC4\u8BBA\u6570\u636E */\n  data: MarqueeReviewData\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\nconst unStarIcon = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"13\" viewBox=\"0 0 14 13\" fill=\"none\">\n    <path\n      d=\"M6.07501 0.418036C6.35012 -0.139398 7.145 -0.139397 7.42011 0.418037L8.9242 3.46565C9.03344 3.68701 9.24462 3.84043 9.4889 3.87593L12.8521 4.36464C13.4673 4.45403 13.7129 5.21 13.2678 5.64391L10.8341 8.01614C10.6574 8.18844 10.5767 8.43669 10.6184 8.67999L11.1929 12.0296C11.298 12.6423 10.655 13.1095 10.1047 12.8203L7.09656 11.2388C6.87807 11.1239 6.61705 11.1239 6.39855 11.2388L3.39038 12.8203C2.84016 13.1095 2.19709 12.6423 2.30217 12.0296L2.87668 8.67999C2.91841 8.43669 2.83775 8.18844 2.66098 8.01614L0.227318 5.64391C-0.21782 5.21 0.0278133 4.45403 0.642979 4.36464L4.00622 3.87593C4.2505 3.84043 4.46167 3.68701 4.57092 3.46565L6.07501 0.418036Z\"\n      fill=\"#75787F\"\n    />\n  </svg>\n)\n\ninterface CardProps {\n  item: ReviewItem\n}\n\nconst Card = ({ item }: CardProps) => {\n  return (\n    <div className=\"rounded-box bg-container-primary text-info-primary min-l:p-[24px] laptop:h-[240px] desktop:h-[240px] lg-desktop:h-[240px] flex h-[240px] grow flex-col justify-between p-[16px]\">\n      <div className=\"flex justify-between\">\n        <div className=\"flex flex-col\">\n          <Text size={4} html={item.name} className=\"laptop:block hidden\" />\n          <Text size={2} html={item.name} className=\"laptop:hidden block\" />\n          <div className=\"mt-2 flex gap-1\">\n            {new Array(item.rating || 5).fill(0).map((_, index) => (\n              <StarIcon key={index} />\n            ))}\n            {new Array(5 - (item.rating || 5)).fill(0).map((_, index) => (\n              <span key={index}>{unStarIcon()}</span>\n            ))}\n          </div>\n        </div>\n        <Avatar size=\"small\" className=\" laptop:size-[48px]  size-[40px]\">\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, ...rest }: 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      {...rest}\n      className={cn('text-info-primary flex flex-col items-center justify-center py-3', className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      <Heading as=\"h1\" size={4} html={title} className=\"laptop:text-center w-full text-left\" />\n      <Text\n        size={2}\n        html={subtitle}\n        className=\"tablet:mt-[16px] tablet:text-[14px] laptop:text-center laptop:text-[14px] desktop:mt-[8px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] w-full text-left text-[14px]\"\n      />\n      <div\n        className={cn(\n          'mask-fade-vertical laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px] mt-[24px] flex h-[480px] gap-4 overflow-hidden'\n        )}\n      >\n        {chunkItems.map((items, index) => (\n          <div\n            key={index}\n            className={cn('animate-marquee-scroll relative flex h-fit flex-1 flex-col gap-4', {\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": "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",
+  "names": ["MarqueeReview_exports", "__export", "MarqueeReview_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "FIX_ITEMS_LENGTH", "COUNT", "_chunk", "array", "size", "_", "index", "StarIcon", "unStarIcon", "Card", "item", "MarqueeReview", "data", "className", "rest", "title", "subtitle", "items", "theme", "chunkItems", "innerIndex"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        ...rest\n      },\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={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div>\n                  <div\n                    ref={titleFadeInRef}\n                    className=\"media-player-base-title lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                </div>\n              )}\n              {btnText && (\n                <div className=\"flex items-center justify-center\">\n                  <Button\n                    variant=\"link\"\n                    className={cn(\n                      'media-player-base-button member-equity-button-secondary text-btn-primary-foreground z-20 translate-y-10'\n                    )}\n                    onClick={() => {\n                      setVisible(true)\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                  </Button>\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["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 } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      id,\n      onBtnClick,\n      data: {\n        title,\n        videoTitle,\n        btnText,\n        youtubeId,\n        video,\n        mobileVideo,\n        theme,\n        img,\n        shape,\n        titleAnimation = 'fade-in',\n        ...dataRest\n      },\n      ...rest\n    },\n    ref\n  ) => {\n    const { sticky } = dataRest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [videoHeightProgress, setVideoHeightProgress] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const heightTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      function gsapVideoHeightResize() {\n        heightTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'bottom bottom',\n          end: `bottom top`,\n          // markers: true,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            console.log('progress__', progress)\n            setVideoHeightProgress(progress)\n          },\n        })\n      }\n\n      if (inView) {\n        gsapResize()\n        gsapVideoHeightResize()\n      }\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n        heightTriggerRef.current && heightTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\n    })\n\n    const zIndexVideo = useMemo(() => {\n      if (inView && videoHeightProgress > 0 && videoHeightProgress < 0.9) return 3\n      if (inView) return 2\n      return 1\n    }, [videoHeightProgress, inView])\n\n    const aspect =\n      'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div\n          {...(!sticky ? rest : {})}\n          style={\n            sticky\n              ? {\n                  marginBottom: `-${btb}px`,\n                  marginTop: `-${titleHeight}px`,\n                  zIndex: zIndexVideo,\n                }\n              : {}\n          }\n          className={cn('relative', className)}\n        >\n          <div className=\"sticky top-0 \">\n            <div\n              id={id}\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div>\n                  <div\n                    ref={titleFadeInRef}\n                    className=\"media-player-base-title lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                </div>\n              )}\n              {btnText && (\n                <div className=\"flex items-center justify-center\">\n                  <Button\n                    variant=\"link\"\n                    className={cn(\n                      'media-player-base-button member-equity-button-secondary text-btn-primary-foreground z-20 translate-y-10'\n                    )}\n                    onClick={() => {\n                      setVisible(true)\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                  </Button>\n                </div>\n              )}\n              <div\n                className=\"media-cover left-0 top-0 h-screen w-screen overflow-hidden\"\n                style={{ height: `${102 - videoHeightProgress * 100}vh` }}\n              >\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full min-h-screen\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAgMM,IAAAI,EAAA,6BA/LNC,EAAsF,iBACtFC,GAAyB,kBACzBC,EAAmB,kCACnBC,GAA2B,kCAC3BC,EAAmB,yCACnBC,GAA2B,kCAC3BC,EAAqC,6CAGrCC,GAA0B,uCAE1BC,GAA4B,sCAC5BC,EAA4B,+CAC5BC,EAAqB,gBACrBC,GAA0B,+BAC1BC,EAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CACJ,MAAAC,EACA,WAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,YAAAC,GACA,MAAAC,EACA,IAAAC,EACA,MAAAC,EACA,eAAAC,EAAiB,UACjB,GAAGC,EACL,EACA,GAAGC,CACL,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIH,GACb,CAACI,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,EAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAAqBC,EAAsB,KAAI,YAAS,CAAC,EAC1D,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAyB,IAAI,EACrCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EACpDC,KAAmB,UAA6B,IAAI,EACpD,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,cAAU,KAE7C,uBAAoBrB,GAAK,IAAMc,EAAS,OAAyB,EAEjE,MAAMQ,EACJ,OAAOlC,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYR,CAAe,CAAC,EACzG2C,EACJ,OAAOlC,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYT,CAAe,CAAC,KAEzF,aAAU,IAAM,CACVyC,GACFT,EAAS,SAAS,KAAK,EACvBT,EAAa,EAAI,IAEjBS,EAAS,SAAS,MAAM,EACxBT,EAAa,EAAK,EAEtB,EAAG,CAACkB,CAAM,CAAC,EAEX,MAAMG,KAAwB,aAAS,IAAM,CAC3C,GAAIV,EAAS,QAAS,CACpB,MAAMW,EAAOX,EAAS,QAAQ,sBAAsB,EAC9CY,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CvB,GAAOwB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAIf,EAAS,QAAS,CACpB,MAAMR,EAAcQ,EAAS,QAAQ,aAC/BY,EAAe,OAAO,YAC5BnB,GAAeD,EAAcoB,CAAY,CAC3C,CACF,EAAG,GAAG,KAEN,aAAU,KACRF,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,KAEL,aAAU,IAAM,CACd,SAASM,GAAa,CACpB,GAAI,CAACf,EAAe,SAAWlB,IAAmB,UAAW,OAC7D,MAAMkC,EAAShB,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI,aAAUF,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMiB,EAAQf,EAAkB,QAAQ,MACxC,OAAK,IAAIe,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9Bd,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASJ,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQiB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD,OAAK,IAAI7B,EAAM,QAAS,CAAE,QAASqB,CAAS,CAAC,CAC/C,CACF,CAAC,CACH,CAEA,SAASS,GAAwB,CAC/BxB,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASL,EAAS,QAClB,MAAO,gBACP,IAAK,aAEL,MAAO,GACP,SAAWmB,GAAc,CACvB,MAAMC,EAAWD,EAAK,SACtB,QAAQ,IAAI,aAAcC,CAAQ,EAClCzB,GAAuByB,CAAQ,CACjC,CACF,CAAC,CACH,CAEA,OAAIb,IACFS,EAAW,EACXa,EAAsB,GAGjB,IAAM,CACX1B,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACtB,EAAgBwB,CAAM,CAAC,KAE3B,gBAAYL,EAAU,CACpB,cAAArC,GACA,cAAAD,GACA,eAAgB6C,CAClB,CAAC,EAED,MAAMqB,MAAc,WAAQ,IACtBvB,GAAUb,EAAsB,GAAKA,EAAsB,GAAY,EACvEa,EAAe,EACZ,EACN,CAACb,EAAqBa,CAAM,CAAC,EAE1BwB,EACJ,6NACF,SACE,oBACG,UAAA5C,MACC,OAAC,OACE,GAAGF,EACJ,IAAKe,EACL,aAAW,MACT,gBACA+B,EACA,CACE,YAAanD,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,mBAAC,OAAI,IAAKmC,GACP,UAACvB,MACA,QAAC,OAAI,UAAU,yGACZ,UAAAyB,GAAc,CAACpB,MACd,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQoB,CAAW,EAChD,EAEDC,GAAmBrB,MAClB,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQqB,CAAgB,EACrD,EAEDjC,MACC,OAAC,EAAAwD,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,4DAA4D,EAC1E,QAAS,IAAM,CACbnC,EAAW,EAAI,EAYfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,KAEF,QAAC,OACE,GAAKW,EAAgB,CAAC,EAARF,EACf,MACEE,EACI,CACE,aAAc,IAAIG,CAAG,KACrB,UAAW,IAAIE,EAAW,KAC1B,OAAQsC,EACV,EACA,CAAC,EAEP,aAAW,MAAG,WAAY3D,CAAS,EAEnC,oBAAC,OAAI,UAAU,gBACb,oBAAC,OACC,GAAIC,EACJ,aAAW,MAAG,2BAA4Be,EAAS,kBAAoB4C,EAAQ,CAC7E,YAAanD,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAayB,MAC/B,OAAC,OACC,mBAAC,OACC,IAAKP,EACL,UAAU,gNACV,wBAAyB,CAAE,OAAQO,CAAW,EAChD,EACF,EAEDhC,MACC,OAAC,OAAI,UAAU,mCACb,mBAAC,EAAAwD,QAAA,CACC,QAAQ,OACR,aAAW,MACT,yGACF,EACA,QAAS,IAAM,CACbnC,EAAW,EAAI,EACfxB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EACH,EACF,KAEF,QAAC,OACC,UAAU,6DACV,MAAO,CAAE,OAAQ,GAAG,IAAMkB,EAAsB,GAAG,IAAK,EAExD,oBAAC,EAAAuC,QAAA,CACC,SAAUnC,EACV,OAAQjB,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,6CACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAAuD,QAAA,CACC,SAAUnC,EACV,OAAQjB,GAAK,KAAO,GACpB,IAAKF,IAAa,KAAOD,GAAO,IAChC,UAAU,6CACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKqB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACCZ,MACC,OAAC,OACC,aAAW,MAAGA,GAAU,6BAA8B4C,CAAM,EAC5D,MAAO5C,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKY,EACP,GAEJ,EACCN,GAAWnB,MACV,OAAC,eAAW,QAASmB,EAAS,UAAWnB,EAAW,aAAc,IAAMoB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA3B,GAAgB,YAAc,kBAE9B,IAAOtB,MAAQ,eAAWsB,EAAe",
+  "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", "dataRest", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoHeightProgress", "setVideoHeightProgress", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "heightTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "gsapVideoHeightResize", "zIndexVideo", "aspect", "Button", "ScrollLoadVideo"]
 }

package/dist/cjs/biz-components/MediaPlayerBase/types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js';
-export interface MediaPlayerBaseProps extends ComponentCommonProps {
+export interface MediaPlayerBaseProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {
     data: {
         sticky?: boolean;
         shape?: Shape;

package/dist/cjs/biz-components/MediaPlayerBase/types.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var r=(o,e,m,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of p(e))!a.call(o,i)&&i!==m&&n(o,i,{get:()=>e[i],enumerable:!(t=s(e,i))||t.enumerable});return o};var d=o=>r(n({},"__esModule",{value:!0}),o);var l={};module.exports=d(l);
+"use strict";var n=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var r=(o,e,m,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of a(e))!p.call(o,t)&&t!==m&&n(o,t,{get:()=>e[t],enumerable:!(i=s(e,t))||i.enumerable});return o};var d=o=>r(n({},"__esModule",{value:!0}),o);var l={};module.exports=d(l);
 //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/MediaPlayerBase/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps {\n  data: {\n    sticky?: boolean\n    shape?: Shape\n    theme?: Theme\n    title?: string\n    videoTitle?: string\n    btnText?: string\n    img?: Img\n    isYouTube?: boolean\n    video?: Video\n    mobileVideo?: Video\n    youtubeId?: string\n    titleAnimation?: 'fade-in'\n  }\n  onBtnClick?: () => void\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\nexport interface MediaPlayerBaseProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    sticky?: boolean\n    shape?: Shape\n    theme?: Theme\n    title?: string\n    videoTitle?: string\n    btnText?: string\n    img?: Img\n    isYouTube?: boolean\n    video?: Video\n    mobileVideo?: Video\n    youtubeId?: string\n    titleAnimation?: 'fade-in'\n  }\n  onBtnClick?: () => void\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

package/dist/cjs/biz-components/MediaPlayerMulti/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";"use client";var R=Object.create;var p=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var q=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},h=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of U(t))!j.call(e,s)&&s!==i&&p(e,s,{get:()=>t[s],enumerable:!(a=S(t,s))||a.enumerable});return e};var v=(e,t,i)=>(i=e!=null?R(_(e)):{},h(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),Y=e=>h(p({},"__esModule",{value:!0}),e);var F={};q(F,{default:()=>A});module.exports=Y(F);var l=require("react/jsx-runtime"),o=require("react"),g=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),r=require("../../components/index.js"),y=v(require("../Title/index.js")),M=v(require("../SwiperBox/index.js")),k=require("../../components/container.js"),P=require("../VideoModal/index.js"),N=require("@payloadcms/richtext-lexical/html"),T=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const m="video",d="media_player_multi",Z=({data:e,configuration:t})=>{const i=(0,o.useRef)(null);return(0,T.useExposure)(i,{componentType:m,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:i,className:(0,g.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,L.trackUrlRef)(e?.href,`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},b=(0,o.forwardRef)(({data:{items:e=[],shape:t="square",title:i,containerProps:a},className:s="",key:I,onVideoPlayBtnClick:V},B)=>{const[f,c]=(0,o.useState)(!1),[C,$]=(0,o.useState)(""),[z,D]=(0,o.useState)(""),u=typeof i=="string"?i:i&&(0,N.convertLexicalToHTML)({data:i}),E=(0,o.useRef)(null),x=e.length===2;return(0,l.jsxs)("div",{className:s,ref:E,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(k.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:B,children:[i&&(0,l.jsx)(y.default,{className:"mediaplayermulti-title",data:{title:u||""}}),(0,l.jsx)(M.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+I,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(H,n)=>{c(!0),n?.isYouTube?D?.(n?.youtubeId||""):$?.(n?.video?.url||""),V?.(H)},title:u}},Slide:Z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(P.VideoModal,{visible:f,youTubeId:z,videoUrl:C,onCloseModal:()=>c(!1)})]})});b.displayName="MediaPlayerMulti";var A=(0,w.withLayout)(b);
+"use strict";"use client";var S=Object.create;var p=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var Y=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},h=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!q.call(e,s)&&s!==i&&p(e,s,{get:()=>t[s],enumerable:!(a=U(t,s))||a.enumerable});return e};var v=(e,t,i)=>(i=e!=null?S(j(e)):{},h(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),Z=e=>h(p({},"__esModule",{value:!0}),e);var G={};Y(G,{default:()=>F});module.exports=Z(G);var l=require("react/jsx-runtime"),o=require("react"),g=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),r=require("../../components/index.js"),y=v(require("../Title/index.js")),M=v(require("../SwiperBox/index.js")),k=require("../../components/container.js"),P=require("../VideoModal/index.js"),N=require("@payloadcms/richtext-lexical/html"),T=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const m="video",d="media_player_multi",A=({data:e,configuration:t})=>{const i=(0,o.useRef)(null);return(0,T.useExposure)(i,{componentType:m,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.description}),(0,l.jsxs)("div",{ref:i,className:(0,g.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,L.trackUrlRef)(e?.href,`${m}_${d}`),"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,l.jsx)(r.Text,{html:e.quote,weight:"bold",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm"})})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]})},b=(0,o.forwardRef)(({data:{items:e=[],shape:t="square",title:i,containerProps:a},className:s="",key:I,onVideoPlayBtnClick:V,...B},C)=>{const[f,c]=(0,o.useState)(!1),[$,z]=(0,o.useState)(""),[D,E]=(0,o.useState)(""),u=typeof i=="string"?i:i&&(0,N.convertLexicalToHTML)({data:i}),H=(0,o.useRef)(null),x=e.length===2;return(0,l.jsxs)("div",{...B,ref:H,className:s,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(k.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:s,ref:C,children:[i&&(0,l.jsx)(y.default,{className:"mediaplayermulti-title",data:{title:u||""}}),(0,l.jsx)(M.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+I,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(R,n)=>{c(!0),n?.isYouTube?E?.(n?.youtubeId||""):z?.(n?.video?.url||""),V?.(R)},title:u}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),f&&(0,l.jsx)(P.VideoModal,{visible:f,youTubeId:D,videoUrl:$,onCloseModal:()=>c(!1)})]})});b.displayName="MediaPlayerMulti";var F=(0,w.withLayout)(b);
 //# sourceMappingURL=index.js.map