@anker-in/headless-ui 1.2.2 → 1.2.3-alpha.1778583232121

package/dist/esm/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 '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": "aAuDU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBAtDV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAA8B,QACnE,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAG3B,OAAS,UAAAC,EAAQ,eAAAC,MAAmC,eACpD,MAAO,aACP,OAAS,YAAAC,MAAgB,iBACzB,OAAS,eAAAC,MAAmB,6BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAEhBC,EAAUb,EAAM,WAAoC,CAAC,CAAE,KAAAc,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACtF,MAAMC,EAAWf,EAAkB,IAAI,EACvC,OAAAD,EAAoBe,EAAK,IAAMC,EAAS,OAAoB,EAE5DP,EAAYO,EAAkD,CAC5D,cAAeN,EACf,cAAeC,CACjB,CAAC,EAGCd,EAACS,EAAA,CACC,UAAU,aACV,UAAWF,EACT,0GACAU,CACF,EACA,IAAKE,EACL,GAAI,UAAYH,GAAM,IACtB,QAAS,CAACL,CAAQ,EAClB,SAAU,CACR,MAAO,EACP,qBAAsB,GACtB,iBAAkBK,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,IACvBrB,EAACU,EAAA,CACC,SAAAV,EAACsB,EAAA,CAAY,KAAMF,EAAM,GADTA,GAAM,GAAK,cAAgBC,CAE7C,CACD,EACH,CAEJ,CAAC,EACDN,EAAQ,YAAc,UAEtB,MAAMO,EAAc,CAAC,CAAE,KAAAN,EAAM,cAAAO,CAAc,IAEvCtB,EAAAF,EAAA,CACG,UAAAiB,EAAK,OAAS,SACbhB,EAACwB,EAAA,CAAoB,MAAOR,GAAM,MAAO,eAAgBO,GAAe,eAAgB,EAEzFP,EAAK,OAAS,QAAUhB,EAACyB,EAAA,CAAmB,KAAMT,GAAM,KAAM,cAAeO,GAAe,cAAe,GAC9G,EAIJD,EAAY,YAAc,cAE1B,MAAME,EAAsB,CAAC,CAAE,MAAAE,EAAO,eAAAC,CAAe,IAEjD3B,EAAC,OAAI,UAAU,4CACb,SAAAA,EAACK,EAAA,CAAQ,OAAQqB,GAAO,IAAK,IAAKA,GAAO,KAAO,GAAI,aAAcnB,EAAG,eAAgBoB,CAAc,EAAG,EACxG,EAIJH,EAAoB,YAAc,sBAElC,MAAMC,EAAqBvB,EAAM,WAAoD,CAAC,CAAE,KAAA0B,EAAM,cAAAC,CAAc,EAAGX,IAE3GlB,EAACM,EAAA,CACC,GAAG,MACH,IAAKY,EACL,KAAMU,EACN,UAAWrB,EAAG,oFAAqFsB,CAAa,EAClH,CAEH,EAEDJ,EAAmB,YAAc,qBAEjC,IAAOK,EAAQtB,EAAWO,CAAO",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Picture", "Text", "cn", "withLayout", "Swiper", "SwiperSlide", "Autoplay", "useExposure", "componentType", "componentName", "Marquee", "data", "className", "ref", "innerRef", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle, useLayoutEffect, useState, 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 {\n  MarqueeProps,\n  MarqueeItemProps,\n  MarqueeImageContentProps,\n  MarqueeTextContentProps,\n  MarqueeIconAndTextContentProps,\n  MarqueePictureContentProps,\n} from './type.js'\n\nimport 'swiper/css'\n\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  ({ data: { items = [], speed = 3000, reverseDirection = false, key: dataKey } = {}, className }, ref) => {\n    const innerRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n      componentType,\n      componentName,\n    })\n\n    const duration = `${speed * 5}ms`\n    const gap = 'clamp(24px, 4vw, 64px)'\n\n    const [copies, setCopies] = useState(2)\n\n    useLayoutEffect(() => {\n      const track = trackRef.current\n      if (!track) return\n\n      const calcCopies = () => {\n        const trackWidth = track.offsetWidth\n        if (trackWidth === 0) return\n        const viewportWidth = window.innerWidth\n        const minCopies = Math.ceil(viewportWidth / trackWidth)\n        setCopies(Math.max(2, minCopies))\n      }\n\n      calcCopies()\n      innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n\n      const ro = new ResizeObserver(() => {\n        calcCopies()\n        innerRef.current?.style.setProperty('--track-width', `${track.offsetWidth}px`)\n      })\n      ro.observe(track)\n      return () => ro.disconnect()\n    }, [items])\n\n    return (\n      <div ref={innerRef} id={dataKey ? `Marquee-${dataKey}` : undefined} className={cn('w-full', className)}>\n        <div\n          className={cn(\n            'flex h-full w-max items-center',\n            reverseDirection ? 'animate-marquee-reverse' : 'animate-marquee'\n          )}\n          style={{ '--marquee-duration': duration } as React.CSSProperties}\n        >\n          {/* \u539F\u59CB\u8F68\u9053\uFF1A\u7528 ref \u6D4B\u91CF\u771F\u5B9E\u5BBD\u5EA6 */}\n          <div ref={trackRef} className=\"flex h-full shrink-0 items-center\" style={{ gap, paddingRight: gap }}>\n            {items.map((item, index) => (\n              <div key={(item?.id ?? '') + '-orig-' + index} className=\"shrink-0\">\n                <MarqueeItem data={item} />\n              </div>\n            ))}\n          </div>\n\n          {Array.from({ length: copies }).map((_, copyIndex) => (\n            <div\n              key={`copy-group-${copyIndex}`}\n              className=\"flex h-full shrink-0 items-center\"\n              style={{ gap, paddingRight: gap }}\n              aria-hidden=\"true\"\n            >\n              {items.map((item, index) => (\n                <div key={(item?.id ?? '') + '-copy-' + copyIndex + '-' + index} className=\"shrink-0\">\n                  <MarqueeItem data={item} />\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\n\nMarquee.displayName = 'Marquee'\n\n// \u2500\u2500\u2500 Sub-components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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      {data.type === 'iconAndText' && (\n        <MarqueeIconAndTextContent\n          icon={data?.iconImage}\n          text={data?.iconText}\n          iconClassName={configuration?.iconClassName}\n          textClassName={configuration?.textClassName}\n        />\n      )}\n      {data.type === 'picture' && (\n        <MarqueePictureContent pictureImage={data?.pictureImage} pictureClassName={configuration?.pictureClassName} />\n      )}\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-bold leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nconst MarqueeIconAndTextContent = ({ icon, text, iconClassName, textClassName }: MarqueeIconAndTextContentProps) => {\n  return (\n    <div className=\"laptop:h-[72px] laptop:gap-2 flex h-[48px] items-center gap-1\">\n      {icon && (\n        <img\n          src={icon?.url}\n          alt={icon?.alt || ''}\n          className={cn('desktop:size-6 size-5 shrink-0 object-contain', iconClassName)}\n        />\n      )}\n      {text && (\n        <Text\n          as=\"div\"\n          html={text}\n          className={cn(\n            'laptop:text-[16px] lg-desktop::text-[18px] flex h-full items-center text-[14px] ',\n            textClassName\n          )}\n        />\n      )}\n    </div>\n  )\n}\n\nMarqueeIconAndTextContent.displayName = 'MarqueeIconAndTextContent'\n\nconst MarqueePictureContent = ({ pictureImage, pictureClassName }: MarqueePictureContentProps) => {\n  return (\n    <div className=\"lg-desktop:size-[128px] desktop:size-[112px] laptop:size-[96px] tablet:size-[72px] size-[72px] shrink-0\">\n      <Picture\n        source={pictureImage?.url}\n        alt={pictureImage?.alt || ''}\n        className=\"w-full\"\n        imgClassName={cn('object-contain', pictureClassName)}\n      />\n    </div>\n  )\n}\n\nMarqueePictureContent.displayName = 'MarqueePictureContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useImperativeHandle", "useLayoutEffect", "useState", "Picture", "Text", "cn", "withLayout", "useExposure", "componentType", "componentName", "Marquee", "items", "speed", "reverseDirection", "dataKey", "className", "ref", "innerRef", "trackRef", "duration", "gap", "copies", "setCopies", "track", "calcCopies", "trackWidth", "viewportWidth", "minCopies", "ro", "item", "index", "MarqueeItem", "_", "copyIndex", "data", "configuration", "MarqueeImageContent", "MarqueeTextContent", "MarqueeIconAndTextContent", "MarqueePictureContent", "image", "imageClassName", "text", "textClassName", "icon", "iconClassName", "pictureImage", "pictureClassName", "Marquee_default"]
 }

package/dist/esm/biz-components/Marquee/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Marquee.js';
-export { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee.js';
+export { MarqueeItem, MarqueeImageContent, MarqueeTextContent, MarqueeIconAndTextContent, MarqueePictureContent, } from './Marquee.js';

package/dist/esm/biz-components/Marquee/index.js

@@ -1,2 +1,2 @@
-import{default as r}from"./Marquee.js";import{MarqueeItem as a,MarqueeImageContent as m,MarqueeTextContent as n}from"./Marquee.js";export{m as MarqueeImageContent,a as MarqueeItem,n as MarqueeTextContent,r as default};
+import{default as n}from"./Marquee.js";import{MarqueeItem as o,MarqueeImageContent as a,MarqueeTextContent as u,MarqueeIconAndTextContent as q,MarqueePictureContent as M}from"./Marquee.js";export{q as MarqueeIconAndTextContent,a as MarqueeImageContent,o as MarqueeItem,M as MarqueePictureContent,u as MarqueeTextContent,n as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Marquee/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Marquee/index.ts"],
-  "sourcesContent": ["export { default } from './Marquee.js'\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent } from './Marquee.js'\n"],
-  "mappings": "AAAA,OAAS,WAAAA,MAAe,eACxB,OAAS,eAAAC,EAAa,uBAAAC,EAAqB,sBAAAC,MAA0B",
-  "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent"]
+  "sourcesContent": ["export { default } from './Marquee.js'\nexport {\n  MarqueeItem,\n  MarqueeImageContent,\n  MarqueeTextContent,\n  MarqueeIconAndTextContent,\n  MarqueePictureContent,\n} from './Marquee.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe,eACxB,OACE,eAAAC,EACA,uBAAAC,EACA,sBAAAC,EACA,6BAAAC,EACA,yBAAAC,MACK",
+  "names": ["default", "MarqueeItem", "MarqueeImageContent", "MarqueeTextContent", "MarqueeIconAndTextContent", "MarqueePictureContent"]
 }

package/dist/esm/biz-components/Marquee/type.d.ts

@@ -2,9 +2,11 @@ import type { Img } from '../../types/props.js';
 interface MarqueeProps {
     data: {
         key?: string;
-        /** 是否反向 */
+        /** 是否反向滚动 */
         reverseDirection?: boolean;
-        /** 速度 */
+        /**
+         * 一轮动画时长（ms）。数值越小滚动越快，默认 8000（即 8s 完成一轮）
+         */
         speed?: number;
         /** 跑马灯内容 */
         items: any[];
@@ -13,13 +15,19 @@ interface MarqueeProps {
 }
 interface MarqueeItemProps {
     data: {
-        type: 'image' | 'text';
+        id?: string;
+        type: 'image' | 'text' | 'iconAndText' | 'picture';
         image?: Img;
         text?: string;
+        iconImage?: Img;
+        iconText?: string;
+        pictureImage?: Img;
     };
     configuration?: {
         imageClassName?: string;
         textClassName?: string;
+        iconClassName?: string;
+        pictureClassName?: string;
     };
 }
 interface MarqueeImageContentProps {
@@ -30,4 +38,14 @@ interface MarqueeTextContentProps {
     text?: string;
     textClassName?: string;
 }
-export type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps };
+interface MarqueeIconAndTextContentProps {
+    icon?: Img;
+    text?: string;
+    iconClassName?: string;
+    textClassName?: string;
+}
+interface MarqueePictureContentProps {
+    pictureImage?: Img;
+    pictureClassName?: string;
+}
+export type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps, MarqueeIconAndTextContentProps, MarqueePictureContentProps, };

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as a}from"react/jsx-runtime";import C from"react";import{useMediaQuery as s}from"react-responsive";import{Picture as D}from"../../components/index.js";import{cn as n}from"../../helpers/index.js";const u=C.forwardRef(({pcImage:t,desktopImage:e,laptopImage:i,padImage:o,mobileImage:r,className:c,videoClassName:p,imgClassName:y,muted:f=!0,loop:m=!0,playsInline:M=!0,autoPlay:v=!0,poster:T,videoRef:P,onVideoPlay:x,onVideoPause:b,onVideoEnded:w,...N},h)=>{const S=s({query:"(max-width: 767px)"}),R=s({query:"(min-width: 768px)"}),q=s({query:"(min-width: 1025px)"}),E=s({query:"(min-width: 1440px)"}),L=s({query:"(min-width: 1920px)"}),V=[t,e,i,o,r].some(z=>z?.mimeType==="video/mp4"),d=L?t:E?e:q?i:R?o:r,l=d||t||e||i||o||r,j=l?.mimeType==="video/mp4"?l.url:void 0,H=T||(l?.mimeType!=="video/mp4"?l?.url:void 0),$=[r?.url&&`${r.url} 768`,o?.url&&`${o.url} 1025`,i?.url&&`${i.url} 1440`,e?.url&&`${e.url} 1920`,t?.url].filter(Boolean).reverse().join(" , ");return a("div",{ref:h,className:n("media-wrapper",c),...N,children:V?a("video",{ref:P,src:j,poster:H,className:n("size-full object-cover",p),muted:f,loop:m,playsInline:M,autoPlay:v,"aria-label":d?.alt||"",onPlay:x,onPause:b,onEnded:w}):a(D,{className:"size-full",imgClassName:n("size-full object-cover",y),alt:t?.alt||e?.alt||i?.alt||o?.alt||r?.alt||"",source:$})})});u.displayName="Media";var G=u;export{G as default};
+"use client";import{jsx as a}from"react/jsx-runtime";import C from"react";import{useMediaQuery as s}from"react-responsive";import{Picture as D}from"../../components/index.js";import{cn as n}from"../../helpers/index.js";const u=C.forwardRef(({pcImage:t,desktopImage:e,laptopImage:i,padImage:o,mobileImage:r,className:c,videoClassName:p,imgClassName:y,muted:m=!0,loop:f=!0,playsInline:M=!0,autoPlay:v=!0,poster:x,videoRef:T,onVideoPlay:P,onVideoPause:w,onVideoEnded:h,...b},N)=>{const S=s({query:"(max-width: 767px)"}),R=s({query:"(min-width: 768px) and (max-width: 1024px)"}),q=s({query:"(min-width: 1025px) and (max-width: 1439px)"}),E=s({query:"(min-width: 1440px) and (max-width: 1919px)"}),L=s({query:"(min-width: 1920px)"}),V=[t,e,i,o,r].some(z=>z?.mimeType==="video/mp4"),d=L?t:E?e:q?i:R?o:r,l=d||t||e||i||o||r,j=l?.mimeType==="video/mp4"?l.url:void 0,H=x||(l?.mimeType!=="video/mp4"?l?.url:void 0),$=[r?.url&&`${r.url} 768`,o?.url&&`${o.url} 1025`,i?.url&&`${i.url} 1440`,e?.url&&`${e.url} 1920`,t?.url].filter(Boolean).reverse().join(" , ");return a("div",{ref:N,className:n("media-wrapper",c),...b,children:V?a("video",{ref:T,src:j,poster:H,className:n("size-full object-cover",p),muted:m,loop:f,playsInline:M,autoPlay:v,"aria-label":d?.alt||"",onPlay:P,onPause:w,onEnded:h}):a(D,{className:"size-full",imgClassName:n("size-full object-cover",y),alt:t?.alt||e?.alt||i?.alt||o?.alt||r?.alt||"",source:$})})});u.displayName="Media";var G=u;export{G as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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\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": "aA+GU,cAAAA,MAAA,oBA7GV,OAAOC,MAAW,QAClB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,MAAe,4BAExB,OAAS,MAAAC,MAAU,yBA2CnB,MAAMC,EAAQJ,EAAM,WAClB,CACE,CACE,QAAAK,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,EAAWvB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDwB,EAAQxB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACrDyB,EAAWzB,EAAc,CAAE,MAAO,qBAAsB,CAAC,EACzD0B,EAAY1B,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAC1D2B,EAAO3B,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAGrD4B,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,OACEN,EAAC,OAAI,IAAKwB,EAAK,UAAWpB,EAAG,gBAAiBO,CAAS,EAAI,GAAGY,EAC3D,SAAAO,EACC9B,EAAC,SACC,IAAKmB,EACL,IAAKe,EACL,OAAQC,EACR,UAAW/B,EAAG,yBAA0BQ,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYe,GAAc,KAAO,GACjC,OAAQZ,EACR,QAASC,EACT,QAASC,EACX,EAEAtB,EAACG,EAAA,CACC,UAAU,YACV,aAAcC,EAAG,yBAA0BS,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ0B,EACV,EAEJ,CAEJ,CACF,EAEA/B,EAAM,YAAc,QAEpB,IAAOgC,EAAQhC",
+  "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) and (max-width: 1024px)' })\n    const isLaptop = useMediaQuery({ query: '(min-width: 1025px) and (max-width: 1439px)' })\n    const isDesktop = useMediaQuery({ query: '(min-width: 1440px) and (max-width: 1919px)' })\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": "aA+GU,cAAAA,MAAA,oBA7GV,OAAOC,MAAW,QAClB,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,MAAe,4BAExB,OAAS,MAAAC,MAAU,yBA2CnB,MAAMC,EAAQJ,EAAM,WAClB,CACE,CACE,QAAAK,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,EAAWvB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDwB,EAAQxB,EAAc,CAAE,MAAO,4CAA6C,CAAC,EAC7EyB,EAAWzB,EAAc,CAAE,MAAO,6CAA8C,CAAC,EACjF0B,EAAY1B,EAAc,CAAE,MAAO,6CAA8C,CAAC,EAClF2B,EAAO3B,EAAc,CAAE,MAAO,qBAAsB,CAAC,EAGrD4B,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,OACEN,EAAC,OAAI,IAAKwB,EAAK,UAAWpB,EAAG,gBAAiBO,CAAS,EAAI,GAAGY,EAC3D,SAAAO,EACC9B,EAAC,SACC,IAAKmB,EACL,IAAKe,EACL,OAAQC,EACR,UAAW/B,EAAG,yBAA0BQ,CAAc,EACtD,MAAOE,EACP,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,aAAYe,GAAc,KAAO,GACjC,OAAQZ,EACR,QAASC,EACT,QAASC,EACX,EAEAtB,EAACG,EAAA,CACC,UAAU,YACV,aAAcC,EAAG,yBAA0BS,CAAY,EACvD,IAAKP,GAAS,KAAOC,GAAc,KAAOC,GAAa,KAAOC,GAAU,KAAOC,GAAa,KAAO,GACnG,OAAQ0B,EACV,EAEJ,CAEJ,CACF,EAEA/B,EAAM,YAAc,QAEpB,IAAOgC,EAAQhC",
   "names": ["jsx", "React", "useMediaQuery", "Picture", "cn", "Media", "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", "Media_default"]
 }

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

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

package/dist/esm/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 { 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\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "Heading", "Text", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "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", "p", "m", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useMemo, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { 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        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) 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    }, [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_box =\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    const aspect_no_stickybox =\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]'\n    return (\n      <>\n        {sticky && (\n          <div\n            {...rest}\n            ref={titleRef}\n            className={cn(\n              'pointer-events-none relative z-10',\n              aspect_box,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\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            </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_no_stickybox, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              <div className=\"media-cover relative left-0 top-0 h-screen w-screen overflow-hidden\">\n                {!sticky && (\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                      'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2'\n                    )}\n                  >\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                        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                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          {sticky && (\n            <div\n              className={cn(sticky && 'pointer-events-none relative box-content block', aspect_box)}\n              style={sticky ? { height: `${btb}px` } : {}}\n              ref={trackRef}\n            />\n          )}\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nMediaPlayerBase.displayName = 'MediaPlayerBase'\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useMemo", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "Heading", "Text", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "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", "p", "m", "aspect_box", "MediaPlayerBase_default"]
 }

package/dist/esm/biz-components/MediaPlayerMulti/index.js

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

package/dist/esm/biz-components/MediaPlayerMulti/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.description,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n              }}\n              className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              asChild={!data?.href}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Text\n                html={data.quote}\n                weight=\"bold\"\n                className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n              />\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    {\n      data: { items = [], shape = 'square', title, containerProps },\n      className = '',\n      key,\n      onVideoPlayBtnClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const { locale = 'us' } = useAiuiContext()\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length === 2\n\n    return (\n      <div {...rest} ref={wrapperRef} className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: {\n                    shape,\n                    locale,\n                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId(data?.youtubeId || '')\n                        setVideoUrl('')\n                      } else {\n                        setVideoUrl(data?.video?.url || '')\n                        setYouTubeId('')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\n                    title: title_html,\n                  },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        {visible && (\n          <VideoModal\n            visible={visible}\n            youTubeId={youTubeId}\n            videoUrl={videoUrl}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
-  "mappings": "aAuCM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAtCN,OAAS,YAAAC,EAAU,cAAAC,EAAY,UAAAC,MAAc,QAC7C,OAAS,MAAAC,EAAI,oBAAAC,MAAwB,yBACrC,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,MAAY,4BACpC,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,MAAMC,EAAMpB,EAAuB,IAAI,EAEvC,OAAAY,EAAYQ,EAAK,CACf,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,SAAUC,GAAe,MAAQ,EACjC,qBAAsBD,GAAM,WAC9B,CAAC,EAGCrB,EAAC,OACC,IAAKuB,EACL,UAAWnB,EACT,2CACA,yCACA,iEACAkB,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAtB,EAAC,OAAI,UAAU,uFACb,UAAAD,EAACQ,EAAA,CACC,OAAQc,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,gCACV,aAAa,gFACf,EACAtB,EAACQ,EAAA,CACC,OAAQc,EAAK,WAAW,KAAOA,EAAK,KAAK,IACzC,IAAKA,EAAK,WAAW,KAAOA,EAAK,KAAK,KAAO,GAC7C,UAAU,gCACV,aAAa,6BACf,EACAtB,EAAC,OAAI,UAAU,2DACX,UAAAsB,GAAM,OAAO,KAAOA,GAAM,YAC1BtB,EAAC,UACC,QAAS,IAAM,CACbuB,GAAe,sBAAsBA,GAAe,OAAS,EAAGD,CAAI,CACtE,EACA,UAAU,6HAEV,SAAAtB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,EAEAC,EAAC,OAAI,UAAU,oIACb,UAAAA,EAAC,OAAI,UAAU,gBACb,UAAAD,EAAC,MAAG,UAAU,2HACX,SAAAsB,EAAK,MACR,EACCA,EAAK,OACJtB,EAACS,EAAA,CACC,QAAS,CAACa,GAAM,KAChB,KAAMJ,EACJZ,EAAiBgB,GAAM,MAAQ,GAAIC,GAAe,QAAU,IAAI,EAChE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,WAAW,GAEpE,SAAAtB,EAACU,EAAA,CACC,KAAMY,EAAK,MACX,OAAO,OACP,UAAU,uEACZ,EACF,GAEJ,EAEAtB,EAAC,KAAE,UAAU,mLACV,SAAAsB,EAAK,YACR,GACF,GACF,CAEJ,EAEMG,EAAmBtB,EACvB,CACE,CACE,KAAM,CAAE,MAAAuB,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAC5D,UAAAC,EAAY,GACZ,IAAAC,EACA,oBAAAC,EACA,GAAGC,CACL,EACAT,IACG,CACH,KAAM,CAACU,EAASC,CAAU,EAAIjC,EAAkB,EAAK,EAC/C,CAACkC,EAAUC,CAAW,EAAInC,EAAiB,EAAE,EAC7C,CAACoC,EAAWC,CAAY,EAAIrC,EAAiB,EAAE,EAC/C,CAAE,OAAAsC,EAAS,IAAK,EAAIvB,EAAe,EACnCwB,EAAa,OAAOb,GAAU,SAAWA,EAAQA,GAASb,EAAqB,CAAE,KAAMa,CAAM,CAAC,EAC9Fc,EAAatC,EAAuB,IAAI,EAGxCuC,EAAcjB,EAAM,SAAW,EAErC,OACEzB,EAAC,OAAK,GAAGgC,EAAM,IAAKS,EAAY,UAAWZ,EACzC,UAAA9B,EAAC,OAAI,UAAU,uBACb,SAAAA,EAACa,EAAA,CAAW,GAAIgB,GAAkB,CAAC,EAAI,UAAU,kBAC/C,SAAA5B,EAAC,OAAI,UAAW6B,EAAW,IAAKN,EAC7B,UAAAI,GAAS5B,EAACW,EAAA,CAAM,UAAU,yBAAyB,KAAM,CAAE,MAAO8B,GAAc,EAAG,EAAG,EACvFzC,EAACY,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BmB,EAC/B,KAAM,CACJ,KAAML,EACN,cAAe,CACb,MAAAC,EACA,OAAAa,EACA,oBAAqB,CAACI,EAAWtB,IAA+B,CAC9Da,EAAW,EAAI,EACXb,GAAM,WACRiB,EAAajB,GAAM,WAAa,EAAE,EAClCe,EAAY,EAAE,IAEdA,EAAYf,GAAM,OAAO,KAAO,EAAE,EAClCiB,EAAa,EAAE,GAEjBP,IAAsBY,CAAC,CACzB,EACA,MAAOH,CACT,CACF,EACA,MAAOpB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAesB,EAAc,EAAI,GACnC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAc,EAAI,GACnC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,EACF,EACCT,GACClC,EAACc,EAAA,CACC,QAASoB,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CACF,EAEAV,EAAiB,YAAc,mBAC/B,IAAOoB,GAAQtC,EAAWkB,CAAgB",
-  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "getLocalizedPath", "withLayout", "Picture", "Link", "Text", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const { trackingData } = useAiuiContext()\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.description,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"tablet:block hidden size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <Picture\n          source={data.mobileImg?.url || data.img?.url}\n          alt={data.mobileImg?.alt || data.img?.alt || ''}\n          className=\"tablet:hidden block size-full\"\n          imgClassName=\"w-full h-full object-cover\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(data?.video?.url || data?.youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n              }}\n              className=\"laptop:size-14 bg-opacity/20 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              asChild={!data?.href}\n              href={trackUrlRef(\n                getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n                `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n              )}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Text\n                html={data.quote}\n                weight=\"bold\"\n                className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm\"\n              />\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    {\n      data: { items = [], shape = 'square', title, containerProps },\n      className = '',\n      key,\n      onVideoPlayBtnClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const { locale = 'us', trackingData } = useAiuiContext()\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length === 2\n\n    return (\n      <div {...rest} ref={wrapperRef} className={className}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{\n                  list: items,\n                  configuration: {\n                    shape,\n                    locale,\n                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId(data?.youtubeId || '')\n                        setVideoUrl('')\n                      } else {\n                        setVideoUrl(data?.video?.url || '')\n                        setYouTubeId('')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\n                    title: title_html,\n                  },\n                }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.2,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        {visible && (\n          <VideoModal\n            visible={visible}\n            youTubeId={youTubeId}\n            videoUrl={videoUrl}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nMediaPlayerMulti.displayName = 'MediaPlayerMulti'\nexport default withLayout(MediaPlayerMulti)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "getLocalizedPath", "withLayout", "Picture", "Link", "Text", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "ref", "trackingData", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "rest", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
 }

package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { MediaTextOverlayProps } from './types.js';
+import 'swiper/css';
+import 'swiper/css/navigation';
+declare const _default: React.ForwardRefExoticComponent<Omit<MediaTextOverlayProps & 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;
+export type { MediaTextOverlayProps };

package/dist/esm/biz-components/MediaTextOverlay/MediaTextOverlay.js

@@ -0,0 +1,2 @@
+"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import N,{useRef as B,useMemo as C,useState as M,useEffect as E,useCallback as T}from"react";import{withLayout as O}from"../../shared/Styles.js";import{cn as g}from"../../helpers/utils.js";import{useExposure as S}from"../../hooks/useExposure.js";import{useAiuiContext as L}from"../AiuiProvider/index.js";import V from"../Media/index.js";import"swiper/css";import"swiper/css/navigation";import{Heading as $}from"../../components/index.js";import{Swiper as R,SwiperSlide as j}from"swiper/react";import{Navigation as A}from"swiper/modules";const D=({disabled:l})=>p("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),H=({disabled:l})=>p("svg",{width:"40",height:"40",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"text-info-primary lg-desktop:size-[56px] size-[40px]",children:[e("path",{d:"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z",fill:"currentColor",fillOpacity:l?"0.2":"0.6"}),e("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),W="video",Z="media_text_overlay",_=()=>e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M8 5.14v13.72L19 12 8 5.14z",fill:"white"})}),F=()=>p("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("rect",{x:"6",y:"5",width:"4",height:"14",rx:"1",fill:"white"}),e("rect",{x:"14",y:"5",width:"4",height:"14",rx:"1",fill:"white"})]}),q=({data:l,configuration:r,jIndex:w,classNames:d={}})=>{const v=B(null),c=B(null),{content:s,media:o}=l,x=r?.theme||"light",b=r?.size||"lg",k=r?.onlyOne||!1,m=r?.isAutoPlay??!0,[f,n]=M(!1);S(v,{componentType:W,componentName:Z,position:w,componentTitle:s,navigation:r?.activeTab});const a=C(()=>[o.lgDesktop,o.desktop,o.laptop,o.pad,o.mobile].some(i=>i?.mimeType==="video/mp4"),[o]),P=T(()=>{const i=c.current;i&&(i.paused?(i.play(),n(!0)):(i.pause(),n(!1)))},[]);return E(()=>{const i=c.current;if(!i||!a||!m)return;const u=new IntersectionObserver(t=>{t.forEach(h=>{h.isIntersecting?i.play().catch(I=>{console.warn("Video autoplay failed:",I)}):i.pause()})},{threshold:.5});return u.observe(i),()=>{u.disconnect()}},[a,m]),p("div",{className:g("item-wrapper rounded-box group relative box-border w-full overflow-hidden",k?{lg:"h-[400px] laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]",sm:"h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]"}[b]:"desktop:h-[384px] lg-desktop:h-[480px] h-[360px]",{"aiui-dark":x==="dark"}),ref:v,children:[e("div",{className:"absolute inset-0",children:e(V,{pcImage:o.lgDesktop||o.desktop,desktopImage:o.desktop,laptopImage:o.laptop,padImage:o.pad,mobileImage:o.mobile,videoClassName:"absolute inset-0 size-full object-cover",imgClassName:"absolute inset-0 size-full object-cover",videoRef:c,muted:!0,loop:!0,playsInline:!0,autoPlay:m,onVideoPlay:()=>n(!0),onVideoPause:()=>n(!1),onVideoEnded:()=>n(!1)})}),a&&e("div",{className:"desktop:p-8 absolute bottom-0 right-0 z-30 p-6",children:e("button",{type:"button","aria-label":f?"Pause video":"Play video",onClick:P,className:g("flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80",d.playButton),children:f?e(F,{}):e(_,{})})}),e("div",{className:g("text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20",d.overlay),children:e("div",{className:g("flex items-end justify-between gap-4",d.content),children:e($,{size:2,html:s,className:"line-clamp-3"})})})]})},z=N.forwardRef((l,r)=>{const{data:w,className:d,classNames:v={},...c}=l,{items:s=[],theme:o="dark",size:x="sm",isShowPagination:b=!0,isAutoPlay:k=!0}=w,{locale:m="us"}=L(),f=B(null),[n,a]=M({isBeginning:!0,isEnd:!1}),P=C(()=>{const t=s?.length||0;return{0:{spaceBetween:12,slidesPerView:t>1?1.2:1},768:{spaceBetween:12,slidesPerView:t>2?2.3:t>1?2:1},1024:{spaceBetween:16,slidesPerView:Math.min(t,3)},1440:{spaceBetween:16,slidesPerView:Math.min(t,4)},1920:{spaceBetween:16,slidesPerView:Math.min(t,4)}}},[s?.length]),y=N.useId().replace(/:/g,""),i=`${y}-custom-swiper-button-next`,u=`${y}-custom-swiper-button-prev`;return e("section",{"data-ui-component-id":"MediaTextOverlay",ref:r,...c,className:g("mediaTextOverlayBlock text-info-primary",d,v.root),children:s&&s.length>0?p("div",{className:"group relative",children:[e(R,{className:"!overflow-visible",modules:[A],navigation:{nextEl:`.${i}`,prevEl:`.${u}`},onSwiper:t=>{f.current=t,a({isBeginning:t.isBeginning,isEnd:t.isEnd})},onReachEnd:()=>{a(t=>({...t,isEnd:!0}))},onReachBeginning:()=>{a(t=>({...t,isBeginning:!0}))},onFromEdge:()=>{a({isBeginning:!1,isEnd:!1})},breakpoints:P,children:s.map((t,h)=>e(j,{className:"!flex !h-[unset]",children:e(q,{data:t,configuration:{theme:o,size:x,num:s.length,locale:m,onlyOne:s.length===1,index:h,isAutoPlay:k},jIndex:h})},`${y}-SwiperSlide-${h}`))}),b&&s.length>1&&p(G,{children:[e("button",{className:`${u} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${n.isBeginning?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Previous slide",children:e(D,{disabled:n.isBeginning})}),e("button",{className:`${i} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${n.isEnd?"pointer-events-none opacity-0":"opacity-100 hover:opacity-80"}`,"aria-label":"Next slide",children:e(H,{disabled:n.isEnd})})]})]}):null})});z.displayName="MediaTextOverlay";var ne=O(z);export{ne as default};
+//# sourceMappingURL=MediaTextOverlay.js.map