@anker-in/headless-ui 1.1.87 → 1.1.89

package/dist/cjs/biz-components/Marquee/Marquee.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var N=Object.create;var i=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},w=(e,t,a,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of S(t))!g.call(e,o)&&o!==a&&i(e,o,{get:()=>t[o],enumerable:!(p=C(t,o))||p.enumerable});return e};var I=(e,t,a)=>(a=e!=null?N(R(e)):{},w(t||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e)),P=e=>w(i({},"__esModule",{value:!0}),e);var k={};v(k,{MarqueeImageContent:()=>l,MarqueeItem:()=>m,MarqueeTextContent:()=>u,default:()=>b});module.exports=P(k);var r=require("react/jsx-runtime"),s=I(require("react")),c=require("../../components/index.js"),n=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),f=require("swiper/react"),M=require("swiper/modules"),y=require("../../hooks/useExposure.js");const T="image",h="marquee",d=s.default.forwardRef(({data:e,className:t},a)=>{const p=(0,s.useRef)(null);return(0,s.useImperativeHandle)(a,()=>p.current),(0,y.useExposure)(p,{componentType:T,componentName:h}),(0,r.jsx)(f.Swiper,{direction:"horizontal",className:(0,n.cn)("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",t),ref:p,id:"Marquee"+e?.key,modules:[M.Autoplay],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((o,q)=>(0,r.jsx)(f.SwiperSlide,{children:(0,r.jsx)(m,{data:o})},o?.id+"SwiperSlide"+q))})});d.displayName="Marquee";const m=({data:e,configuration:t})=>(0,r.jsxs)(r.Fragment,{children:[e.type==="image"&&(0,r.jsx)(l,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&(0,r.jsx)(u,{text:e?.text,textClassName:t?.textClassName})]});m.displayName="MarqueeItem";const l=({image:e,imageClassName:t})=>(0,r.jsx)("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:(0,r.jsx)(c.Picture,{source:e?.url,alt:e?.alt||"",imgClassName:(0,n.cn)("object-cover",t)})});l.displayName="MarqueeImageContent";const u=s.default.forwardRef(({text:e,textClassName:t},a)=>(0,r.jsx)(c.Text,{as:"div",ref:a,html:e,className:(0,n.cn)("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",t)}));u.displayName="MarqueeTextContent";var b=(0,x.withLayout)(d);
+"use strict";"use client";var N=Object.create;var i=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},w=(e,t,a,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of S(t))!g.call(e,o)&&o!==a&&i(e,o,{get:()=>t[o],enumerable:!(p=C(t,o))||p.enumerable});return e};var I=(e,t,a)=>(a=e!=null?N(R(e)):{},w(t||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e)),P=e=>w(i({},"__esModule",{value:!0}),e);var k={};v(k,{MarqueeImageContent:()=>l,MarqueeItem:()=>m,MarqueeTextContent:()=>u,default:()=>b});module.exports=P(k);var r=require("react/jsx-runtime"),s=I(require("react")),c=require("../../components/index.js"),n=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),f=require("swiper/react"),D=require("swiper/css"),M=require("swiper/modules"),y=require("../../hooks/useExposure.js");const T="image",h="marquee",d=s.default.forwardRef(({data:e,className:t},a)=>{const p=(0,s.useRef)(null);return(0,s.useImperativeHandle)(a,()=>p.current),(0,y.useExposure)(p,{componentType:T,componentName:h}),(0,r.jsx)(f.Swiper,{direction:"horizontal",className:(0,n.cn)("laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear",t),ref:p,id:"Marquee"+e?.key,modules:[M.Autoplay],autoplay:{delay:1,disableOnInteraction:!1,reverseDirection:e?.reverseDirection},loop:!0,allowTouchMove:!1,centeredSlides:!0,slidesPerView:"auto",speed:e?.speed||3e3,breakpoints:{0:{spaceBetween:"24px"},1025:{spaceBetween:"64px"}},children:e?.items?.map((o,q)=>(0,r.jsx)(f.SwiperSlide,{children:(0,r.jsx)(m,{data:o})},o?.id+"SwiperSlide"+q))})});d.displayName="Marquee";const m=({data:e,configuration:t})=>(0,r.jsxs)(r.Fragment,{children:[e.type==="image"&&(0,r.jsx)(l,{image:e?.image,imageClassName:t?.imageClassName}),e.type==="text"&&(0,r.jsx)(u,{text:e?.text,textClassName:t?.textClassName})]});m.displayName="MarqueeItem";const l=({image:e,imageClassName:t})=>(0,r.jsx)("div",{className:"laptop:w-[120px] h-full w-[72px] shrink-0",children:(0,r.jsx)(c.Picture,{source:e?.url,alt:e?.alt||"",imgClassName:(0,n.cn)("object-cover",t)})});l.displayName="MarqueeImageContent";const u=s.default.forwardRef(({text:e,textClassName:t},a)=>(0,r.jsx)(c.Text,{as:"div",ref:a,html:e,className:(0,n.cn)("text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]",t)}));u.displayName="MarqueeTextContent";var b=(0,x.withLayout)(d);
 //# sourceMappingURL=Marquee.js.map

package/dist/cjs/biz-components/Marquee/Marquee.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/Marquee.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<SwiperRef, MarqueeProps>(({ data, className }, ref) => {\n  const innerRef = useRef<SwiperRef>(null)\n  useImperativeHandle(ref, () => innerRef.current as SwiperRef)\n\n  useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n    componentType: componentType,\n    componentName: componentName,\n  })\n\n  return (\n    <Swiper\n      direction=\"horizontal\"\n      className={cn(\n        'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n        className\n      )}\n      ref={innerRef}\n      id={'Marquee' + data?.key}\n      modules={[Autoplay]}\n      autoplay={{\n        delay: 1,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n      }}\n      loop={true}\n      allowTouchMove={false}\n      centeredSlides\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: '24px',\n        },\n        1025: {\n          spaceBetween: '64px',\n        },\n      }}\n    >\n      {data?.items?.map((item, index) => (\n        <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n          <MarqueeItem data={item} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAsDU,IAAAO,EAAA,6BArDVC,EAAmE,oBACnEC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAG3BH,EAAoD,wBACpDI,EAAyB,0BACzBC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAU,EAAAC,QAAM,WAAoC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,KAAW,UAAkB,IAAI,EACvC,gCAAoBD,EAAK,IAAMC,EAAS,OAAoB,KAE5D,eAAYA,EAAkD,CAC5D,cAAeP,EACf,cAAeC,CACjB,CAAC,KAGC,OAAC,UACC,UAAU,aACV,aAAW,MACT,0GACAI,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAAC,UAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBA,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACI,EAAMC,OACvB,OAAC,eACC,mBAACpB,EAAA,CAAY,KAAMmB,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDP,EAAQ,YAAc,UAEtB,MAAMb,EAAc,CAAC,CAAE,KAAAe,EAAM,cAAAM,CAAc,OAEvC,oBACG,UAAAN,EAAK,OAAS,YACb,OAAChB,EAAA,CAAoB,MAAOgB,GAAM,MAAO,eAAgBM,GAAe,eAAgB,EAEzFN,EAAK,OAAS,WAAU,OAACd,EAAA,CAAmB,KAAMc,GAAM,KAAM,cAAeM,GAAe,cAAe,GAC9G,EAIJrB,EAAY,YAAc,cAE1B,MAAMD,EAAsB,CAAC,CAAE,MAAAuB,EAAO,eAAAC,CAAe,OAEjD,OAAC,OAAI,UAAU,4CACb,mBAAC,WAAQ,OAAQD,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,gBAAc,MAAG,eAAgBC,CAAc,EAAG,EACxG,EAIJxB,EAAoB,YAAc,sBAElC,MAAME,EAAqB,EAAAa,QAAM,WAAoD,CAAC,CAAE,KAAAU,EAAM,cAAAC,CAAc,EAAGR,OAE3G,OAAC,QACC,GAAG,MACH,IAAKA,EACL,KAAMO,EACN,aAAW,MAAG,oFAAqFC,CAAa,EAClH,CAEH,EAEDxB,EAAmB,YAAc,qBAEjC,IAAOC,KAAQ,cAAWW,CAAO",
-  "names": ["Marquee_exports", "__export", "MarqueeImageContent", "MarqueeItem", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_modules", "import_useExposure", "componentType", "componentName", "Marquee", "React", "data", "className", "ref", "innerRef", "item", "index", "configuration", "image", "imageClassName", "text", "textClassName"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport 'swiper/css'\nimport { Autoplay } from 'swiper/modules'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<SwiperRef, MarqueeProps>(({ data, className }, ref) => {\n  const innerRef = useRef<SwiperRef>(null)\n  useImperativeHandle(ref, () => innerRef.current as SwiperRef)\n\n  useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n    componentType: componentType,\n    componentName: componentName,\n  })\n\n  return (\n    <Swiper\n      direction=\"horizontal\"\n      className={cn(\n        'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n        className\n      )}\n      ref={innerRef}\n      id={'Marquee' + data?.key}\n      modules={[Autoplay]}\n      autoplay={{\n        delay: 1,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n      }}\n      loop={true}\n      allowTouchMove={false}\n      centeredSlides\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: '24px',\n        },\n        1025: {\n          spaceBetween: '64px',\n        },\n      }}\n    >\n      {data?.items?.map((item, index) => (\n        <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n          <MarqueeItem data={item} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,EAAA,gBAAAC,EAAA,uBAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAN,GAuDU,IAAAO,EAAA,6BAtDVC,EAAmE,oBACnEC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAG3BH,EAAoD,wBACpDI,EAAO,sBACPC,EAAyB,0BACzBC,EAA4B,sCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAU,EAAAC,QAAM,WAAoC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,KAAW,UAAkB,IAAI,EACvC,gCAAoBD,EAAK,IAAMC,EAAS,OAAoB,KAE5D,eAAYA,EAAkD,CAC5D,cAAeP,EACf,cAAeC,CACjB,CAAC,KAGC,OAAC,UACC,UAAU,aACV,aAAW,MACT,0GACAI,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAAC,UAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBA,GAAM,gBAC1B,EACA,KAAM,GACN,eAAgB,GAChB,eAAc,GACd,cAAc,OACd,MAAOA,GAAM,OAAS,IACtB,YAAa,CACX,EAAG,CACD,aAAc,MAChB,EACA,KAAM,CACJ,aAAc,MAChB,CACF,EAEC,SAAAA,GAAM,OAAO,IAAI,CAACI,EAAMC,OACvB,OAAC,eACC,mBAACrB,EAAA,CAAY,KAAMoB,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDP,EAAQ,YAAc,UAEtB,MAAMd,EAAc,CAAC,CAAE,KAAAgB,EAAM,cAAAM,CAAc,OAEvC,oBACG,UAAAN,EAAK,OAAS,YACb,OAACjB,EAAA,CAAoB,MAAOiB,GAAM,MAAO,eAAgBM,GAAe,eAAgB,EAEzFN,EAAK,OAAS,WAAU,OAACf,EAAA,CAAmB,KAAMe,GAAM,KAAM,cAAeM,GAAe,cAAe,GAC9G,EAIJtB,EAAY,YAAc,cAE1B,MAAMD,EAAsB,CAAC,CAAE,MAAAwB,EAAO,eAAAC,CAAe,OAEjD,OAAC,OAAI,UAAU,4CACb,mBAAC,WAAQ,OAAQD,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,gBAAc,MAAG,eAAgBC,CAAc,EAAG,EACxG,EAIJzB,EAAoB,YAAc,sBAElC,MAAME,EAAqB,EAAAc,QAAM,WAAoD,CAAC,CAAE,KAAAU,EAAM,cAAAC,CAAc,EAAGR,OAE3G,OAAC,QACC,GAAG,MACH,IAAKA,EACL,KAAMO,EACN,aAAW,MAAG,oFAAqFC,CAAa,EAClH,CAEH,EAEDzB,EAAmB,YAAc,qBAEjC,IAAOC,KAAQ,cAAWY,CAAO",
+  "names": ["Marquee_exports", "__export", "MarqueeImageContent", "MarqueeItem", "MarqueeTextContent", "Marquee_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_css", "import_modules", "import_useExposure", "componentType", "componentName", "Marquee", "React", "data", "className", "ref", "innerRef", "item", "index", "configuration", "image", "imageClassName", "text", "textClassName"]
 }

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

@@ -33,5 +33,5 @@ export interface MarqueeReviewProps extends React.HTMLAttributes<HTMLElement> {
     /** 评论数据 */
     data: MarqueeReviewData;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<MarqueeReviewProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {};
+declare const _default: React.ForwardRefExoticComponent<Omit<MarqueeReviewProps, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {};
 export default _default;

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

@@ -1,11 +1,15 @@
 import React from 'react';
 import type { Media as MediaType } from '../../types/props.js';
 export interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** PC端媒体 */
+    /** PC端媒体（≥1920px） */
     pcImage?: MediaType;
-    /** 平板端媒体 */
+    /** 大桌面媒体（≥1440px） */
+    desktopImage?: MediaType;
+    /** 小桌面媒体（≥1025px） */
+    laptopImage?: MediaType;
+    /** 平板端媒体（≥768px） */
     padImage?: MediaType;
-    /** 移动端媒体 */
+    /** 移动端媒体（<768px） */
     mobileImage?: MediaType;
     /** 视频类名 */
     videoClassName?: string;
@@ -21,6 +25,14 @@ export interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {
     autoPlay?: boolean;
     /** 视频预览图 */
     poster?: string;
+    /** 视频 ref（用于外部控制播放/暂停） */
+    videoRef?: React.RefObject<HTMLVideoElement>;
+    /** 视频播放回调 */
+    onVideoPlay?: () => void;
+    /** 视频暂停回调 */
+    onVideoPause?: () => void;
+    /** 视频结束回调 */
+    onVideoEnded?: () => void;
 }
 /**
  * Media - 智能媒体组件

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var L=Object.create;var s=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var D=(e,i)=>{for(var o in i)s(e,o,{get:i[o],enumerable:!0})},n=(e,i,o,a)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of $(i))!q.call(e,r)&&r!==o&&s(e,r,{get:()=>i[r],enumerable:!(a=R(i,r))||a.enumerable});return e};var E=(e,i,o)=>(o=e!=null?L(j(e)):{},n(i||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>n(s({},"__esModule",{value:!0}),e);var S={};D(S,{default:()=>Q});module.exports=A(S);var d=require("react/jsx-runtime"),m=E(require("react")),p=require("react-responsive"),c=require("../../components/index.js"),l=require("../../helpers/index.js");const u=m.default.forwardRef(({pcImage:e,padImage:i,mobileImage:o,className:a,videoClassName:r,imgClassName:y,muted:f=!0,loop:M=!0,playsInline:v=!0,autoPlay:T=!0,poster:N,...P},b)=>{const x=(0,p.useMediaQuery)({query:"(max-width: 768px)"}),w=(0,p.useMediaQuery)({query:"(max-width: 1024px)"}),h=[e,i,o].some(H=>H?.mimeType==="video/mp4"),t=x?o:w?i||o:e,z=t?.mimeType==="video/mp4"?t.url:void 0,C=N||(t?.mimeType!=="video/mp4"?t?.url:void 0);return(0,d.jsx)("div",{ref:b,className:(0,l.cn)("media-wrapper",a),...P,children:h?(0,d.jsx)("video",{src:z,poster:C,className:(0,l.cn)("size-full object-cover",r),muted:f,loop:M,playsInline:v,autoPlay:T,"aria-label":t?.alt||""}):(0,d.jsx)(c.Picture,{className:"size-full",imgClassName:(0,l.cn)("size-full object-cover",y),alt:e?.alt||"",source:`${e?.url||""} , ${i?.url??(o?.url||"")} 1024, ${o?.url||""} 767`})})});u.displayName="Media";var Q=u;
+"use strict";"use client";var B=Object.create;var n=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(e,i)=>{for(var o in i)n(e,o,{get:i[o],enumerable:!0})},c=(e,i,o,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of Q(i))!G.call(e,r)&&r!==o&&n(e,r,{get:()=>i[r],enumerable:!(t=O(i,r))||t.enumerable});return e};var K=(e,i,o)=>(o=e!=null?B(F(e)):{},c(i||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),U=e=>c(n({},"__esModule",{value:!0}),e);var X={};J(X,{default:()=>W});module.exports=U(X);var d=require("react/jsx-runtime"),y=K(require("react")),s=require("react-responsive"),f=require("../../components/index.js"),a=require("../../helpers/index.js");const p=y.default.forwardRef(({pcImage:e,desktopImage:i,laptopImage:o,padImage:t,mobileImage:r,className:m,videoClassName:M,imgClassName:v,muted:T=!0,loop:P=!0,playsInline:x=!0,autoPlay:b=!0,poster:w,videoRef:N,onVideoPlay:h,onVideoPause:R,onVideoEnded:q,...E},L)=>{const Y=(0,s.useMediaQuery)({query:"(max-width: 767px)"}),V=(0,s.useMediaQuery)({query:"(min-width: 768px)"}),j=(0,s.useMediaQuery)({query:"(min-width: 1025px)"}),H=(0,s.useMediaQuery)({query:"(min-width: 1440px)"}),$=(0,s.useMediaQuery)({query:"(min-width: 1920px)"}),z=[e,i,o,t,r].some(A=>A?.mimeType==="video/mp4"),u=$?e:H?i:j?o:V?t:r,l=u||e||i||o||t||r,C=l?.mimeType==="video/mp4"?l.url:void 0,D=w||(l?.mimeType!=="video/mp4"?l?.url:void 0),S=[r?.url&&`${r.url} 768`,t?.url&&`${t.url} 1025`,o?.url&&`${o.url} 1440`,i?.url&&`${i.url} 1920`,e?.url].filter(Boolean).reverse().join(" , ");return(0,d.jsx)("div",{ref:L,className:(0,a.cn)("media-wrapper",m),...E,children:z?(0,d.jsx)("video",{ref:N,src:C,poster:D,className:(0,a.cn)("size-full object-cover",M),muted:T,loop:P,playsInline:x,autoPlay:b,"aria-label":u?.alt||"",onPlay:h,onPause:R,onEnded:q}):(0,d.jsx)(f.Picture,{className:"size-full",imgClassName:(0,a.cn)("size-full object-cover",v),alt:e?.alt||i?.alt||o?.alt||t?.alt||r?.alt||"",source:S})})});p.displayName="Media";var W=p;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Media/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** PC\u7AEF\u5A92\u4F53 */\n  pcImage?: MediaType\n  /** \u5E73\u677F\u7AEF\u5A92\u4F53 */\n  padImage?: MediaType\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53 */\n  mobileImage?: MediaType\n  /** \u89C6\u9891\u7C7B\u540D */\n  videoClassName?: string\n  /** \u56FE\u7247\u7C7B\u540D */\n  imgClassName?: string\n  /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  muted?: boolean\n  /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  loop?: boolean\n  /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  playsInline?: boolean\n  /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  autoPlay?: boolean\n  /** \u89C6\u9891\u9884\u89C8\u56FE */\n  poster?: string\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n  (\n    {\n      pcImage,\n      padImage,\n      mobileImage,\n      className,\n      videoClassName,\n      imgClassName,\n      muted = true,\n      loop = true,\n      playsInline = true,\n      autoPlay = true,\n      poster,\n      ...props\n    },\n    ref\n  ) => {\n    // \u54CD\u5E94\u5F0F\u67E5\u8BE2\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n    // \u68C0\u67E5\u662F\u5426\u6709\u4EFB\u4F55\u5A92\u4F53\u662F\u89C6\u9891\u7C7B\u578B\n    const hasVideo = [pcImage, padImage, mobileImage].some(media => media?.mimeType === 'video/mp4')\n\n    // \u83B7\u53D6\u5F53\u524D\u8BBE\u5907\u5BF9\u5E94\u7684\u5A92\u4F53\n    const currentMedia = isMobile ? mobileImage : isPad ? padImage || mobileImage : pcImage\n\n    // \u83B7\u53D6\u89C6\u9891\u6E90\u548C\u6D77\u62A5\u56FE\u7247\n    const videoSrc = currentMedia?.mimeType === 'video/mp4' ? currentMedia.url : undefined\n    const imagePoster = poster || (currentMedia?.mimeType !== 'video/mp4' ? currentMedia?.url : undefined)\n\n    return (\n      <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n        {hasVideo ? (\n          <video\n            src={videoSrc}\n            poster={imagePoster}\n            className={cn('size-full object-cover', videoClassName)}\n            muted={muted}\n            loop={loop}\n            playsInline={playsInline}\n            autoPlay={autoPlay}\n            aria-label={currentMedia?.alt || ''}\n          />\n        ) : (\n          <Picture\n            className=\"size-full\"\n            imgClassName={cn('size-full object-cover', imgClassName)}\n            alt={pcImage?.alt || ''}\n            source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMedia.displayName = 'Media'\n\nexport default Media\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwEU,IAAAI,EAAA,6BAtEVC,EAAkB,oBAClBC,EAA8B,4BAC9BC,EAAwB,qCAExBC,EAAmB,kCA+BnB,MAAMC,EAAQ,EAAAC,QAAM,WAClB,CACE,CACE,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,OAAAC,EACA,GAAGC,CACL,EACAC,IACG,CAEH,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAQ,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EAGtDC,EAAW,CAACf,EAASC,EAAUC,CAAW,EAAE,KAAKc,GAASA,GAAO,WAAa,WAAW,EAGzFC,EAAeJ,EAAWX,EAAcY,EAAQb,GAAYC,EAAcF,EAG1EkB,EAAWD,GAAc,WAAa,YAAcA,EAAa,IAAM,OACvEE,EAAcT,IAAWO,GAAc,WAAa,YAAcA,GAAc,IAAM,QAE5F,SACE,OAAC,OAAI,IAAKL,EAAK,aAAW,MAAG,gBAAiBT,CAAS,EAAI,GAAGQ,EAC3D,SAAAI,KACC,OAAC,SACC,IAAKG,EACL,OAAQC,EACR,aAAW,MAAG,yBAA0Bf,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYQ,GAAc,KAAO,GACnC,KAEA,OAAC,WACC,UAAU,YACV,gBAAc,MAAG,yBAA0BZ,CAAY,EACvD,IAAKL,GAAS,KAAO,GACrB,OAAQ,GAAGA,GAAS,KAAO,EAAE,MAAMC,GAAU,MAAQC,GAAa,KAAO,GAAG,UAAUA,GAAa,KAAO,EAAE,OAC9G,EAEJ,CAEJ,CACF,EAEAJ,EAAM,YAAc,QAEpB,IAAOP,EAAQO",
-  "names": ["Media_exports", "__export", "Media_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_helpers", "Media", "React", "pcImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "props", "ref", "isMobile", "isPad", "hasVideo", "media", "currentMedia", "videoSrc", "imagePoster"]
+  "sourcesContent": ["'use client'\n\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Picture } from '../../components/index.js'\nimport type { Media as MediaType } from '../../types/props.js'\nimport { cn } from '../../helpers/index.js'\n\nexport interface MediaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** PC\u7AEF\u5A92\u4F53\uFF08\u22651920px\uFF09 */\n  pcImage?: MediaType\n  /** \u5927\u684C\u9762\u5A92\u4F53\uFF08\u22651440px\uFF09 */\n  desktopImage?: MediaType\n  /** \u5C0F\u684C\u9762\u5A92\u4F53\uFF08\u22651025px\uFF09 */\n  laptopImage?: MediaType\n  /** \u5E73\u677F\u7AEF\u5A92\u4F53\uFF08\u2265768px\uFF09 */\n  padImage?: MediaType\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08<768px\uFF09 */\n  mobileImage?: MediaType\n  /** \u89C6\u9891\u7C7B\u540D */\n  videoClassName?: string\n  /** \u56FE\u7247\u7C7B\u540D */\n  imgClassName?: string\n  /** \u662F\u5426\u9759\u97F3\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  muted?: boolean\n  /** \u662F\u5426\u5FAA\u73AF\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  loop?: boolean\n  /** \u662F\u5426\u5185\u8054\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  playsInline?: boolean\n  /** \u662F\u5426\u81EA\u52A8\u64AD\u653E\uFF08\u4EC5\u89C6\u9891\uFF09 */\n  autoPlay?: boolean\n  /** \u89C6\u9891\u9884\u89C8\u56FE */\n  poster?: string\n  /** \u89C6\u9891 ref\uFF08\u7528\u4E8E\u5916\u90E8\u63A7\u5236\u64AD\u653E/\u6682\u505C\uFF09 */\n  videoRef?: React.RefObject<HTMLVideoElement>\n  /** \u89C6\u9891\u64AD\u653E\u56DE\u8C03 */\n  onVideoPlay?: () => void\n  /** \u89C6\u9891\u6682\u505C\u56DE\u8C03 */\n  onVideoPause?: () => void\n  /** \u89C6\u9891\u7ED3\u675F\u56DE\u8C03 */\n  onVideoEnded?: () => void\n}\n\n/**\n * Media - \u667A\u80FD\u5A92\u4F53\u7EC4\u4EF6\n *\n * @description \u6839\u636E\u5A92\u4F53\u7C7B\u578B\u81EA\u52A8\u9009\u62E9\u4F7F\u7528 video \u6807\u7B7E\u6216 Picture \u7EC4\u4EF6\n * \u652F\u6301\u54CD\u5E94\u5F0F\u5A92\u4F53\u6E90\uFF0C\u5982\u679C\u4EFB\u610F\u5A92\u4F53\u7C7B\u578B\u662F\u89C6\u9891\uFF0C\u5219\u4F7F\u7528 video \u6807\u7B7E\u6E32\u67D3\n */\nconst Media = React.forwardRef<HTMLDivElement, MediaProps>(\n  (\n    {\n      pcImage,\n      desktopImage,\n      laptopImage,\n      padImage,\n      mobileImage,\n      className,\n      videoClassName,\n      imgClassName,\n      muted = true,\n      loop = true,\n      playsInline = true,\n      autoPlay = true,\n      poster,\n      videoRef,\n      onVideoPlay,\n      onVideoPause,\n      onVideoEnded,\n      ...props\n    },\n    ref\n  ) => {\n    const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n    const isPad = useMediaQuery({ query: '(min-width: 768px)' })\n    const isLaptop = useMediaQuery({ query: '(min-width: 1025px)' })\n    const isDesktop = useMediaQuery({ query: '(min-width: 1440px)' })\n    const isPc = useMediaQuery({ query: '(min-width: 1920px)' })\n\n    const allImages = [pcImage, desktopImage, laptopImage, padImage, mobileImage]\n    const hasVideo = allImages.some(media => media?.mimeType === 'video/mp4')\n\n    const currentMedia = isPc\n      ? pcImage\n      : isDesktop\n        ? desktopImage\n        : isLaptop\n          ? laptopImage\n          : isPad\n            ? padImage\n            : mobileImage\n\n    const fallbackMedia = currentMedia || pcImage || desktopImage || laptopImage || padImage || mobileImage\n\n    const videoSrc = fallbackMedia?.mimeType === 'video/mp4' ? fallbackMedia.url : undefined\n    const imagePoster = poster || (fallbackMedia?.mimeType !== 'video/mp4' ? fallbackMedia?.url : undefined)\n\n    const pictureSource = [\n      mobileImage?.url && `${mobileImage.url} 768`,\n      padImage?.url && `${padImage.url} 1025`,\n      laptopImage?.url && `${laptopImage.url} 1440`,\n      desktopImage?.url && `${desktopImage.url} 1920`,\n      pcImage?.url,\n    ]\n      .filter(Boolean)\n      .reverse()\n      .join(' , ')\n\n    return (\n      <div ref={ref} className={cn('media-wrapper', className)} {...props}>\n        {hasVideo ? (\n          <video\n            ref={videoRef}\n            src={videoSrc}\n            poster={imagePoster}\n            className={cn('size-full object-cover', videoClassName)}\n            muted={muted}\n            loop={loop}\n            playsInline={playsInline}\n            autoPlay={autoPlay}\n            aria-label={currentMedia?.alt || ''}\n            onPlay={onVideoPlay}\n            onPause={onVideoPause}\n            onEnded={onVideoEnded}\n          />\n        ) : (\n          <Picture\n            className=\"size-full\"\n            imgClassName={cn('size-full object-cover', imgClassName)}\n            alt={pcImage?.alt || desktopImage?.alt || laptopImage?.alt || padImage?.alt || mobileImage?.alt || ''}\n            source={pictureSource}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMedia.displayName = 'Media'\n\nexport default Media\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+GU,IAAAI,EAAA,6BA7GVC,EAAkB,oBAClBC,EAA8B,4BAC9BC,EAAwB,qCAExBC,EAAmB,kCA2CnB,MAAMC,EAAQ,EAAAC,QAAM,WAClB,CACE,CACE,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,YAAAC,EACA,UAAAC,EACA,eAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,GACR,KAAAC,EAAO,GACP,YAAAC,EAAc,GACd,SAAAC,EAAW,GACX,OAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAQ,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACrDC,KAAW,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EACzDC,KAAY,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EAC1DC,KAAO,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EAGrDC,EADY,CAACxB,EAASC,EAAcC,EAAaC,EAAUC,CAAW,EACjD,KAAKqB,GAASA,GAAO,WAAa,WAAW,EAElEC,EAAeH,EACjBvB,EACAsB,EACErB,EACAoB,EACEnB,EACAkB,EACEjB,EACAC,EAEJuB,EAAgBD,GAAgB1B,GAAWC,GAAgBC,GAAeC,GAAYC,EAEtFwB,EAAWD,GAAe,WAAa,YAAcA,EAAc,IAAM,OACzEE,EAAcjB,IAAWe,GAAe,WAAa,YAAcA,GAAe,IAAM,QAExFG,EAAgB,CACpB1B,GAAa,KAAO,GAAGA,EAAY,GAAG,OACtCD,GAAU,KAAO,GAAGA,EAAS,GAAG,QAChCD,GAAa,KAAO,GAAGA,EAAY,GAAG,QACtCD,GAAc,KAAO,GAAGA,EAAa,GAAG,QACxCD,GAAS,GACX,EACG,OAAO,OAAO,EACd,QAAQ,EACR,KAAK,KAAK,EAEb,SACE,OAAC,OAAI,IAAKkB,EAAK,aAAW,MAAG,gBAAiBb,CAAS,EAAI,GAAGY,EAC3D,SAAAO,KACC,OAAC,SACC,IAAKX,EACL,IAAKe,EACL,OAAQC,EACR,aAAW,MAAG,yBAA0BvB,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYe,GAAc,KAAO,GACjC,OAAQZ,EACR,QAASC,EACT,QAASC,EACX,KAEA,OAAC,WACC,UAAU,YACV,gBAAc,MAAG,yBAA0BT,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ0B,EACV,EAEJ,CAEJ,CACF,EAEAhC,EAAM,YAAc,QAEpB,IAAOP,EAAQO",
+  "names": ["Media_exports", "__export", "Media_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_helpers", "Media", "React", "pcImage", "desktopImage", "laptopImage", "padImage", "mobileImage", "className", "videoClassName", "imgClassName", "muted", "loop", "playsInline", "autoPlay", "poster", "videoRef", "onVideoPlay", "onVideoPause", "onVideoEnded", "props", "ref", "isMobile", "isPad", "isLaptop", "isDesktop", "isPc", "hasVideo", "media", "currentMedia", "fallbackMedia", "videoSrc", "imagePoster", "pictureSource"]
 }

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import 'swiper/css/pagination';
 import type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName } from './types.js';
-declare const _default: React.ForwardRefExoticComponent<Omit<MediaEndorsementProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<MediaEndorsementProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

@@ -1,4 +1,4 @@
-"use strict";"use client";var V=Object.create;var u=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(t,e)=>{for(var o in e)u(t,o,{get:e[o],enumerable:!0})},x=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of A(e))!_.call(t,s)&&s!==o&&u(t,s,{get:()=>e[s],enumerable:!(n=z(e,s))||n.enumerable});return t};var q=(t,e,o)=>(o=t!=null?V(H(t)):{},x(e||!t||!t.__esModule?u(o,"default",{value:t,enumerable:!0}):o,t)),Q=t=>x(u({},"__esModule",{value:!0}),t);var $={};j($,{default:()=>O});module.exports=Q($);var r=require("react/jsx-runtime"),v=q(require("react")),y=require("class-variance-authority"),l=require("swiper/react"),m=require("swiper/modules"),E=require("react-responsive"),K=require("swiper/css/pagination"),d=require("../../helpers/index.js"),p=require("../../index.js"),S=require("../../shared/Styles.js");const M=3;function F(t,e){const o=[];for(let n=0;n<t.length;n+=e)o.push(t.slice(n,n+e));return o}const G=(0,y.cva)("rounded-box lg-desktop:h-[240px] desktop:px-6 bg-container-secondary-0 flex h-[200px] flex-col justify-start gap-[26px] p-4",{variants:{theme:{light:"",dark:""},rounded:{true:"rounded-card",false:""}},defaultVariants:{theme:"light",rounded:!1}}),k=v.forwardRef(({className:t,classNames:e={},data:o,onItemClick:n,...s},N)=>{const{title:f,subtitle:b,items:g,theme:w="light",rounded:I=!1,layout:T="grid"}=o,D=(0,E.useMediaQuery)({query:"(max-width: 767px)"}),P=v.useCallback((a,i)=>c=>{n?.(a,i,c)},[n]),h=(a,i)=>(0,r.jsxs)("div",{className:(0,d.cn)("media-endorsement-card text-info-primary",G({theme:w,rounded:I}),e.card),onClick:P(a,i),"aria-label":a.mediaName?`${a.mediaName} endorsement`:void 0,children:[(0,r.jsx)("div",{className:(0,d.cn)("media-endorsement-card-icon rounded-full","lg-desktop::h-14 flex h-12 w-auto  items-center overflow-hidden",e.cardIcon),children:(0,r.jsx)("img",{src:a.icon.url,alt:a.icon.alt||a.mediaName||"Media logo",className:"lg-desktop::h-12 h-[42px] w-auto object-contain",loading:"lazy"})}),(0,r.jsx)(p.Heading,{size:2,as:"h6",className:(0,d.cn)("media-endorsement-card-quote line-clamp-4",e.cardQuote),children:a.text})]},i),C=()=>{const a=F(g,M);return(0,r.jsx)(l.Swiper,{className:(0,d.cn)("media-endorsement-mobile-swiper","w-full !overflow-visible pb-8",e.carousel),modules:[m.Pagination],slidesPerView:1,spaceBetween:12,pagination:{clickable:!0,bulletClass:"media-endorsement-bullet",bulletActiveClass:"media-endorsement-bullet-active"},children:a.map((i,c)=>(0,r.jsx)(l.SwiperSlide,{className:"!h-auto",children:(0,r.jsx)("div",{className:"flex flex-col gap-3",children:i.map((B,L)=>{const R=c*M+L;return h(B,R)})})},c))})};return(0,r.jsxs)("div",{ref:N,className:(0,d.cn)("media-endorsement-root text-info-primary","w-full",t,e.root,{"aiui-dark":w==="dark"}),...s,children:[(0,r.jsx)("style",{children:`
+"use strict";"use client";var L=Object.create;var E=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var q=(t,e)=>{for(var a in e)E(t,a,{get:e[a],enumerable:!0})},v=(t,e,a,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of V(e))!z.call(t,s)&&s!==a&&E(t,s,{get:()=>e[s],enumerable:!(d=B(e,s))||d.enumerable});return t};var Q=(t,e,a)=>(a=t!=null?L(j(t)):{},v(e||!t||!t.__esModule?E(a,"default",{value:t,enumerable:!0}):a,t)),F=t=>v(E({},"__esModule",{value:!0}),t);var U={};q(U,{default:()=>K});module.exports=F(U);var o=require("react/jsx-runtime"),g=Q(require("react")),y=require("class-variance-authority"),l=require("swiper/react"),m=require("swiper/modules"),N=require("react-responsive"),X=require("swiper/css/pagination"),n=require("../../helpers/index.js"),p=require("../../index.js"),T=require("../../shared/Styles.js"),S=require("../../hooks/useExposure.js");const G="image",Y="Media Endorsement",x=3;function $(t,e){const a=[];for(let d=0;d<t.length;d+=e)a.push(t.slice(d,d+e));return a}const J=(0,y.cva)("rounded-box lg-desktop:h-[240px] desktop:px-6 flex h-[200px] flex-col justify-start gap-[26px] bg-[#EAEAEC] p-4",{variants:{theme:{light:"",dark:""},rounded:{true:"rounded-card",false:""}},defaultVariants:{theme:"light",rounded:!1}}),k=g.forwardRef(({className:t,classNames:e={},data:a,onItemClick:d,...s},D)=>{const{title:c,subtitle:u,items:b,theme:w="light",rounded:I=!1,layout:P="grid"}=a,C=(0,N.useMediaQuery)({query:"(max-width: 767px)"}),M=g.useRef(null);g.useImperativeHandle(D,()=>M.current),(0,S.useExposure)(M,{componentType:G,componentName:Y,componentTitle:c,componentDescription:u});const _=g.useCallback((r,i)=>f=>{d?.(r,i,f)},[d]),h=(r,i)=>(0,o.jsxs)("div",{className:(0,n.cn)("media-endorsement-card text-info-primary",J({theme:w,rounded:I}),e.card),onClick:_(r,i),"aria-label":r.mediaName?`${r.mediaName} endorsement`:void 0,children:[(0,o.jsx)("div",{className:(0,n.cn)("media-endorsement-card-icon","lg-desktop:h-16 flex h-12 items-center justify-start overflow-hidden",e.cardIcon),children:(0,o.jsx)("img",{src:r.icon.url,alt:r.icon.alt||r.mediaName||"Media logo",className:"lg-desktop:h-16 h-12 w-auto object-contain",loading:"lazy"})}),(0,o.jsx)(p.Heading,{size:2,as:"h6",className:(0,n.cn)("media-endorsement-card-quote line-clamp-4",e.cardQuote),children:r.text})]},i),A=()=>{const r=$(b,x);return(0,o.jsx)(l.Swiper,{className:(0,n.cn)("media-endorsement-mobile-swiper","w-full !overflow-visible pb-8",e.carousel),modules:[m.Pagination],slidesPerView:1,spaceBetween:12,pagination:{clickable:!0,bulletClass:"media-endorsement-bullet",bulletActiveClass:"media-endorsement-bullet-active"},children:r.map((i,f)=>(0,o.jsx)(l.SwiperSlide,{className:"!h-auto",children:(0,o.jsx)("div",{className:"flex flex-col gap-3",children:i.map((R,O)=>{const H=f*x+O;return h(R,H)})})},f))})};return(0,o.jsxs)("div",{ref:M,className:(0,n.cn)("media-endorsement-root text-info-primary","w-full",t,e.root,{"aiui-dark":w==="dark"}),...s,children:[(0,o.jsx)("style",{children:`
           .media-endorsement-bullet {
             display: inline-block;
             width: 8px;
@@ -19,5 +19,5 @@
             right: 0;
             text-align: center;
           }
-        `}),(f||b)&&(0,r.jsxs)("div",{className:(0,d.cn)("media-endorsement-header mb-6",e.header),children:[f&&(0,r.jsx)(p.Heading,{as:"h2",size:4,html:f,className:(0,d.cn)("media-endorsement-title",e.title)}),b&&(0,r.jsx)(p.Text,{as:"p",size:3,className:(0,d.cn)("",e?.subtitle),html:b})]}),T==="carousel"?(0,r.jsx)(l.Swiper,{className:(0,d.cn)("media-endorsement-carousel","w-full !overflow-visible",e.carousel),modules:[m.FreeMode,m.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},slidesPerView:"auto",spaceBetween:12,breakpoints:{768:{spaceBetween:16}},children:g.map((a,i)=>(0,r.jsx)(l.SwiperSlide,{className:"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]",children:h(a,i)},i))}):D?C():(0,r.jsx)("div",{className:(0,d.cn)("media-endorsement-grid","laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3",e.grid),children:g.map((a,i)=>h(a,i))})]})});k.displayName="MediaEndorsement";var O=(0,S.withLayout)(k);
+        `}),(c||u)&&(0,o.jsxs)("div",{className:(0,n.cn)("media-endorsement-header mb-6",e.header),children:[c&&(0,o.jsx)(p.Heading,{as:"h2",size:4,html:c,className:(0,n.cn)("media-endorsement-title",e.title)}),u&&(0,o.jsx)(p.Text,{as:"p",size:3,className:(0,n.cn)("",e?.subtitle),html:u})]}),P==="carousel"?(0,o.jsx)(l.Swiper,{className:(0,n.cn)("media-endorsement-carousel","w-full !overflow-visible",e.carousel),modules:[m.FreeMode,m.Mousewheel],freeMode:!0,mousewheel:{forceToAxis:!0},slidesPerView:"auto",spaceBetween:12,breakpoints:{768:{spaceBetween:16}},children:b.map((r,i)=>(0,o.jsx)(l.SwiperSlide,{className:"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]",children:h(r,i)},i))}):C?A():(0,o.jsx)("div",{className:(0,n.cn)("media-endorsement-grid","laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3",e.grid),children:b.map((r,i)=>h(r,i))})]})});k.displayName="MediaEndorsement";var K=(0,T.withLayout)(k);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaEndorsement/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Pagination } from 'swiper/modules'\nimport { useMediaQuery } from 'react-responsive'\nimport 'swiper/css/pagination'\nimport { cn } from '../../helpers/index.js'\nimport type {\n  MediaEndorsementProps,\n  MediaEndorsementData,\n  MediaEndorsementItem,\n  MediaEndorsementSemanticName,\n} from './types.js'\nimport { Heading, Text } from '../../index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst MOBILE_ITEMS_PER_SLIDE = 3\n\n// Helper to chunk array into groups\nfunction chunkArray<T>(array: T[], size: number): T[][] {\n  const result: T[][] = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\n/**\n * \u5361\u7247\u5BB9\u5668\u53D8\u4F53\n */\nconst cardVariants = cva(\n  'rounded-box lg-desktop:h-[240px] desktop:px-6 bg-container-secondary-0 flex h-[200px] flex-col justify-start gap-[26px] p-4',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: '',\n      },\n      rounded: {\n        true: 'rounded-card',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      rounded: false,\n    },\n  }\n)\n\n/**\n * MediaEndorsement - \u5A92\u4F53\u80CC\u4E66\n *\n * @description \u5A92\u4F53\u80CC\u4E66\u7EC4\u4EF6\u7684\u4F5C\u7528\u662F\u901A\u8FC7\u5C55\u793A\u7B2C\u4E09\u65B9\u5A92\u4F53\u7684\u8BC4\u4EF7\u6216\u62A5\u9053\uFF0C\u63D0\u5347\u54C1\u724C\u6216\u4EA7\u54C1\u7684\u53EF\u4FE1\u5EA6\u548C\u5F71\u54CD\u529B\n */\nconst MediaEndorsement = React.forwardRef<HTMLDivElement, MediaEndorsementProps>(\n  ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n    const { title, subtitle, items, theme = 'light', rounded = false, layout = 'grid' } = data\n    const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n\n    const handleCardClick = React.useCallback(\n      (item: MediaEndorsementItem, index: number) => (event: React.MouseEvent) => {\n        onItemClick?.(item, index, event)\n      },\n      [onItemClick]\n    )\n\n    const renderCard = (item: MediaEndorsementItem, index: number) => (\n      <div\n        key={index}\n        className={cn('media-endorsement-card text-info-primary', cardVariants({ theme, rounded }), classNames.card)}\n        onClick={handleCardClick(item, index)}\n        aria-label={item.mediaName ? `${item.mediaName} endorsement` : undefined}\n      >\n        {/* \u5A92\u4F53 Logo */}\n        <div\n          className={cn(\n            'media-endorsement-card-icon rounded-full',\n            'lg-desktop::h-14 flex h-12 w-auto  items-center overflow-hidden',\n            classNames.cardIcon\n          )}\n        >\n          <img\n            src={item.icon.url}\n            alt={item.icon.alt || item.mediaName || 'Media logo'}\n            className=\"lg-desktop::h-12 h-[42px] w-auto object-contain\"\n            loading=\"lazy\"\n          />\n        </div>\n\n        {/* \u5F15\u7528\u6587\u6848 */}\n        <Heading size={2} as={'h6'} className={cn('media-endorsement-card-quote line-clamp-4', classNames.cardQuote)}>\n          {item.text}\n        </Heading>\n      </div>\n    )\n\n    // Mobile swiper for grid layout\n    const renderMobileGridSwiper = () => {\n      const chunkedItems = chunkArray(items, MOBILE_ITEMS_PER_SLIDE)\n      return (\n        <Swiper\n          className={cn('media-endorsement-mobile-swiper', 'w-full !overflow-visible pb-8', classNames.carousel)}\n          modules={[Pagination]}\n          slidesPerView={1}\n          spaceBetween={12}\n          pagination={{\n            clickable: true,\n            bulletClass: 'media-endorsement-bullet',\n            bulletActiveClass: 'media-endorsement-bullet-active',\n          }}\n        >\n          {chunkedItems.map((group, slideIndex) => (\n            <SwiperSlide key={slideIndex} className=\"!h-auto\">\n              <div className=\"flex flex-col gap-3\">\n                {group.map((item, itemIndex) => {\n                  const globalIndex = slideIndex * MOBILE_ITEMS_PER_SLIDE + itemIndex\n                  return renderCard(item, globalIndex)\n                })}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('media-endorsement-root text-info-primary', 'w-full', className, classNames.root, {\n          'aiui-dark': theme === 'dark',\n        })}\n        {...props}\n      >\n        <style>{`\n          .media-endorsement-bullet {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background: #D9D9D9;\n            margin: 0 4px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n          }\n          .media-endorsement-bullet-active {\n            background: var(--info-primary-color);\n          }\n          .media-endorsement-mobile-swiper .swiper-pagination {\n            position: absolute;\n            bottom: -28px;\n            left: 0;\n            right: 0;\n            text-align: center;\n          }\n        `}</style>\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('media-endorsement-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('media-endorsement-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {layout === 'carousel' ? (\n          <Swiper\n            className={cn('media-endorsement-carousel', 'w-full !overflow-visible', classNames.carousel)}\n            modules={[FreeMode, Mousewheel]}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]\">\n                {renderCard(item, index)}\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        ) : isMobile ? (\n          renderMobileGridSwiper()\n        ) : (\n          <div\n            className={cn(\n              'media-endorsement-grid',\n              'laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3',\n              classNames.grid\n            )}\n          >\n            {items.map((item, index) => renderCard(item, index))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaEndorsement.displayName = 'MediaEndorsement'\n\nexport default withLayout(MediaEndorsement)\nexport type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName }\n"],
-  "mappings": "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",
-  "names": ["MediaEndorsement_exports", "__export", "MediaEndorsement_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_react", "import_modules", "import_react_responsive", "import_pagination", "import_helpers", "import__", "import_Styles", "MOBILE_ITEMS_PER_SLIDE", "chunkArray", "array", "size", "result", "i", "cardVariants", "MediaEndorsement", "className", "classNames", "data", "onItemClick", "props", "ref", "title", "subtitle", "items", "theme", "rounded", "layout", "isMobile", "handleCardClick", "item", "index", "event", "renderCard", "renderMobileGridSwiper", "chunkedItems", "group", "slideIndex", "itemIndex", "globalIndex"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { FreeMode, Mousewheel, Pagination } from 'swiper/modules'\nimport { useMediaQuery } from 'react-responsive'\nimport 'swiper/css/pagination'\nimport { cn } from '../../helpers/index.js'\nimport type {\n  MediaEndorsementProps,\n  MediaEndorsementData,\n  MediaEndorsementItem,\n  MediaEndorsementSemanticName,\n} from './types.js'\nimport { Heading, Text } from '../../index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst MEDIA_ENDORSEMENT_COMPONENT_TYPE = 'image'\nconst MEDIA_ENDORSEMENT_COMPONENT_NAME = 'Media Endorsement'\n\nconst MOBILE_ITEMS_PER_SLIDE = 3\n\n// Helper to chunk array into groups\nfunction chunkArray<T>(array: T[], size: number): T[][] {\n  const result: T[][] = []\n  for (let i = 0; i < array.length; i += size) {\n    result.push(array.slice(i, i + size))\n  }\n  return result\n}\n\n/**\n * \u5361\u7247\u5BB9\u5668\u53D8\u4F53\n */\nconst cardVariants = cva(\n  'rounded-box lg-desktop:h-[240px] desktop:px-6 flex h-[200px] flex-col justify-start gap-[26px] bg-[#EAEAEC] p-4',\n  {\n    variants: {\n      theme: {\n        light: '',\n        dark: '',\n      },\n      rounded: {\n        true: 'rounded-card',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      theme: 'light',\n      rounded: false,\n    },\n  }\n)\n\n/**\n * MediaEndorsement - \u5A92\u4F53\u80CC\u4E66\n *\n * @description \u5A92\u4F53\u80CC\u4E66\u7EC4\u4EF6\u7684\u4F5C\u7528\u662F\u901A\u8FC7\u5C55\u793A\u7B2C\u4E09\u65B9\u5A92\u4F53\u7684\u8BC4\u4EF7\u6216\u62A5\u9053\uFF0C\u63D0\u5347\u54C1\u724C\u6216\u4EA7\u54C1\u7684\u53EF\u4FE1\u5EA6\u548C\u5F71\u54CD\u529B\n */\nconst MediaEndorsement = React.forwardRef<HTMLDivElement, MediaEndorsementProps>(\n  ({ className, classNames = {}, data, onItemClick, ...props }, ref) => {\n    const { title, subtitle, items, theme = 'light', rounded = false, layout = 'grid' } = data\n    const isMobile = useMediaQuery({ query: '(max-width: 767px)' })\n\n    const innerRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType: MEDIA_ENDORSEMENT_COMPONENT_TYPE,\n      componentName: MEDIA_ENDORSEMENT_COMPONENT_NAME,\n      componentTitle: title,\n      componentDescription: subtitle,\n    })\n    const handleCardClick = React.useCallback(\n      (item: MediaEndorsementItem, index: number) => (event: React.MouseEvent) => {\n        onItemClick?.(item, index, event)\n      },\n      [onItemClick]\n    )\n\n    const renderCard = (item: MediaEndorsementItem, index: number) => (\n      <div\n        key={index}\n        className={cn('media-endorsement-card text-info-primary', cardVariants({ theme, rounded }), classNames.card)}\n        onClick={handleCardClick(item, index)}\n        aria-label={item.mediaName ? `${item.mediaName} endorsement` : undefined}\n      >\n        {/* \u5A92\u4F53 Logo */}\n        <div\n          className={cn(\n            'media-endorsement-card-icon',\n            'lg-desktop:h-16 flex h-12 items-center justify-start overflow-hidden',\n            classNames.cardIcon\n          )}\n        >\n          <img\n            src={item.icon.url}\n            alt={item.icon.alt || item.mediaName || 'Media logo'}\n            className=\"lg-desktop:h-16 h-12 w-auto object-contain\"\n            loading=\"lazy\"\n          />\n        </div>\n\n        {/* \u5F15\u7528\u6587\u6848 */}\n        <Heading size={2} as={'h6'} className={cn('media-endorsement-card-quote line-clamp-4', classNames.cardQuote)}>\n          {item.text}\n        </Heading>\n      </div>\n    )\n\n    // Mobile swiper for grid layout\n    const renderMobileGridSwiper = () => {\n      const chunkedItems = chunkArray(items, MOBILE_ITEMS_PER_SLIDE)\n      return (\n        <Swiper\n          className={cn('media-endorsement-mobile-swiper', 'w-full !overflow-visible pb-8', classNames.carousel)}\n          modules={[Pagination]}\n          slidesPerView={1}\n          spaceBetween={12}\n          pagination={{\n            clickable: true,\n            bulletClass: 'media-endorsement-bullet',\n            bulletActiveClass: 'media-endorsement-bullet-active',\n          }}\n        >\n          {chunkedItems.map((group, slideIndex) => (\n            <SwiperSlide key={slideIndex} className=\"!h-auto\">\n              <div className=\"flex flex-col gap-3\">\n                {group.map((item, itemIndex) => {\n                  const globalIndex = slideIndex * MOBILE_ITEMS_PER_SLIDE + itemIndex\n                  return renderCard(item, globalIndex)\n                })}\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      )\n    }\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('media-endorsement-root text-info-primary', 'w-full', className, classNames.root, {\n          'aiui-dark': theme === 'dark',\n        })}\n        {...props}\n      >\n        <style>{`\n          .media-endorsement-bullet {\n            display: inline-block;\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background: #D9D9D9;\n            margin: 0 4px;\n            cursor: pointer;\n            transition: background-color 0.3s ease;\n          }\n          .media-endorsement-bullet-active {\n            background: var(--info-primary-color);\n          }\n          .media-endorsement-mobile-swiper .swiper-pagination {\n            position: absolute;\n            bottom: -28px;\n            left: 0;\n            right: 0;\n            text-align: center;\n          }\n        `}</style>\n        {/* \u6807\u9898\u533A\u57DF */}\n        {(title || subtitle) && (\n          <div className={cn('media-endorsement-header mb-6', classNames.header)}>\n            {title && (\n              <Heading as=\"h2\" size={4} html={title} className={cn('media-endorsement-title', classNames.title)} />\n            )}\n            {subtitle && <Text as=\"p\" size={3} className={cn('', classNames?.subtitle)} html={subtitle} />}\n          </div>\n        )}\n        {layout === 'carousel' ? (\n          <Swiper\n            className={cn('media-endorsement-carousel', 'w-full !overflow-visible', classNames.carousel)}\n            modules={[FreeMode, Mousewheel]}\n            freeMode={true}\n            mousewheel={{ forceToAxis: true }}\n            slidesPerView=\"auto\"\n            spaceBetween={12}\n            breakpoints={{\n              768: { spaceBetween: 16 },\n            }}\n          >\n            {items.map((item, index) => (\n              <SwiperSlide key={index} className=\"tablet:!w-[320px] laptop:!w-[360px] desktop:!w-[404px] !w-[280px]\">\n                {renderCard(item, index)}\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        ) : isMobile ? (\n          renderMobileGridSwiper()\n        ) : (\n          <div\n            className={cn(\n              'media-endorsement-grid',\n              'laptop:grid-cols-2 laptop:gap-4 desktop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-3',\n              classNames.grid\n            )}\n          >\n            {items.map((item, index) => renderCard(item, index))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nMediaEndorsement.displayName = 'MediaEndorsement'\n\nexport default withLayout(MediaEndorsement)\nexport type { MediaEndorsementProps, MediaEndorsementData, MediaEndorsementItem, MediaEndorsementSemanticName }\n"],
+  "mappings": "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",
+  "names": ["MediaEndorsement_exports", "__export", "MediaEndorsement_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_react", "import_modules", "import_react_responsive", "import_pagination", "import_helpers", "import__", "import_Styles", "import_useExposure", "MEDIA_ENDORSEMENT_COMPONENT_TYPE", "MEDIA_ENDORSEMENT_COMPONENT_NAME", "MOBILE_ITEMS_PER_SLIDE", "chunkArray", "array", "size", "result", "i", "cardVariants", "MediaEndorsement", "className", "classNames", "data", "onItemClick", "props", "ref", "title", "subtitle", "items", "theme", "rounded", "layout", "isMobile", "innerRef", "handleCardClick", "item", "index", "event", "renderCard", "renderMobileGridSwiper", "chunkedItems", "group", "slideIndex", "itemIndex", "globalIndex"]
 }

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

@@ -1,5 +1,5 @@
 import type { MediaPlayerBaseProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerBaseProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

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

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

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

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

@@ -1,4 +1,17 @@
 import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js';
+/** Fixed shape for a single stat/metric entry in the text-layout variant. */
+export interface MediaPlayerBaseMetric {
+    value: string;
+    label: string;
+}
+/**
+ * A single paragraph item. Accepts a plain string OR the Payload CMS array item shape
+ * (`{ text: string; id?: string | null }`) to avoid a consumer-side normalization step.
+ */
+export type MediaPlayerBaseParagraph = string | {
+    text: string;
+    id?: string | null;
+};
 export interface MediaPlayerBaseProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {
     data: {
         sticky?: boolean;
@@ -13,6 +26,19 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps, React.HTMLAt
         mobileVideo?: Video;
         youtubeId?: string;
         titleAnimation?: 'fade-in' | null;
+        /**
+         * Variant selector.
+         * - Omit or set to `'default'` to preserve all existing behaviour.
+         * - Set to `'text-layout'` to activate the fixed 3-section text layout.
+         */
+        variant?: 'default' | 'text-layout';
+        /** Static headline rendered only in the `text-layout` variant. Never animated. */
+        headline?: string;
+        /** Paragraph blocks rendered only in the `text-layout` variant. */
+        /** Paragraph blocks rendered only in the `text-layout` variant. */
+        paragraphs?: MediaPlayerBaseParagraph[];
+        /** Metric items rendered only in the `text-layout` variant. Fixed shape: value + label only. */
+        metrics?: MediaPlayerBaseMetric[];
     };
     onBtnClick?: () => void;
 }

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

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

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

@@ -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, 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' | null\n  }\n  onBtnClick?: () => void\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps, Shape, Theme, Video, Img } from '../../types/props.js'\n\n/** Fixed shape for a single stat/metric entry in the text-layout variant. */\nexport interface MediaPlayerBaseMetric {\n  value: string\n  label: string\n}\n\n/**\n * A single paragraph item. Accepts a plain string OR the Payload CMS array item shape\n * (`{ text: string; id?: string | null }`) to avoid a consumer-side normalization step.\n */\nexport type MediaPlayerBaseParagraph = string | { text: string; id?: string | null }\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' | null\n    /**\n     * Variant selector.\n     * - Omit or set to `'default'` to preserve all existing behaviour.\n     * - Set to `'text-layout'` to activate the fixed 3-section text layout.\n     */\n    variant?: 'default' | 'text-layout'\n    /** Static headline rendered only in the `text-layout` variant. Never animated. */\n    headline?: string\n    /** Paragraph blocks rendered only in the `text-layout` variant. */\n    /** Paragraph blocks rendered only in the `text-layout` variant. */\n    paragraphs?: MediaPlayerBaseParagraph[]\n    /** Metric items rendered only in the `text-layout` variant. Fixed shape: value + label only. */\n    metrics?: MediaPlayerBaseMetric[]\n  }\n  onBtnClick?: () => void\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,5 +1,5 @@
 import type { MediaPlayerMultiProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaPlayerMultiProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { MediaPlayerBaseProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<MediaPlayerBaseProps & React.RefAttributes<{
     mediaPlayerStickyRef: HTMLDivElement;
-}>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & React.RefAttributes<unknown>> & {
+}>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & React.RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;

package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.d.ts

@@ -1,6 +1,6 @@
 import type { MediaSceneSwitcherProps } from './types.js';
 import 'swiper/css';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps & import("react").RefAttributes<unknown>> & {
+declare const _default: import("react").ForwardRefExoticComponent<Omit<MediaSceneSwitcherProps & import("react").RefAttributes<HTMLDivElement>, "container" | keyof import("../../shared/Styles.js").StylesProps> & import("../../shared/Styles.js").StylesProps & import("../WheelLottery/index.js").ContainerProps & import("react").RefAttributes<unknown>> & {
     readonly $$typeof: symbol;
 };
 export default _default;