@anker-in/headless-ui 1.0.9 → 1.0.10

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

@@ -17,7 +17,7 @@ interface GraphicAttractionBlockProps extends ComponentCommonProps {
         attractionItems?: AttractionItem[];
     };
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
     className?: string;
     data?: Record<string, any>;
 }, "ref"> & React.RefAttributes<any>>;

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

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import h from"react";import{withStyles as u}from"../../shared/Styles.js";import c from"../../components/picture.js";import{Heading as k}from"../../components/heading.js";import{Text as a}from"../../components/text.js";import v from"../Title/index.js";import{cn as o}from"../../helpers/utils.js";const b=h.forwardRef((s,m)=>{const{shape:r,imageUrlPc:l,imageUrlMob:n,sectionTitle:p,imageTitle:d,imageDescription:g,attractionItems:f}=s.data;return e("section",{ref:m,"data-ui-component-id":"GraphicAttractionBlock",className:o("text-info-primary relative",s.className),children:[p&&t(v,{data:{title:p}}),e("div",{className:o("tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden",{"rounded-box":r==="rounded"}),children:[t(c,{source:`${l?.url}, ${n?.url} 767`,className:"inset-0",imgClassName:"h-full object-cover",alt:l?.alt||""}),e("div",{className:"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4",children:[t(k,{as:"h3",className:"text-white",size:3,html:d}),t(a,{as:"p",className:"text-white",size:2,html:g})]})]}),t("div",{className:"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3",children:f?.map((i,x)=>e("div",{className:o("lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4",{"rounded-box":r==="rounded"}),children:[e("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t(a,{as:"p",className:"lg-desktop:text-[18px] tracking text-[14px] font-semibold",html:i.title}),t(c,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:i.icon?.url,alt:i.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t(a,{as:"p",className:"lg-desktop:text-[24px] tracking text-[20px] leading-tight",html:i.description})]},x))})]})});var I=u(b);export{I as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import h from"react";import{withLayout as u}from"../../shared/Styles.js";import c from"../../components/picture.js";import{Heading as k}from"../../components/heading.js";import{Text as a}from"../../components/text.js";import v from"../Title/index.js";import{cn as o}from"../../helpers/utils.js";const b=h.forwardRef((s,m)=>{const{shape:r,imageUrlPc:l,imageUrlMob:n,sectionTitle:p,imageTitle:d,imageDescription:g,attractionItems:f}=s.data;return e("section",{ref:m,"data-ui-component-id":"GraphicAttractionBlock",className:o("text-info-primary relative",s.className),children:[p&&t(v,{data:{title:p}}),e("div",{className:o("tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden",{"rounded-box":r==="rounded"}),children:[t(c,{source:`${l?.url}, ${n?.url} 767`,className:"inset-0",imgClassName:"h-full object-cover",alt:l?.alt||""}),e("div",{className:"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4",children:[t(k,{as:"h3",className:"text-white",size:3,html:d}),t(a,{as:"p",className:"text-white",size:2,html:g})]})]}),t("div",{className:"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3",children:f?.map((i,x)=>e("div",{className:o("lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4",{"rounded-box":r==="rounded"}),children:[e("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[t(a,{as:"p",className:"lg-desktop:text-[18px] tracking text-[14px] font-semibold",html:i.title}),t(c,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:i.icon?.url,alt:i.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),t(a,{as:"p",className:"lg-desktop:text-[24px] tracking text-[20px] leading-tight",html:i.description})]},x))})]})});var I=u(b);export{I as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicAttractionBlock/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  return (\n    <section\n      ref={ref}\n      data-ui-component-id=\"GraphicAttractionBlock\"\n      className={cn('text-info-primary relative', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n          alt={imageUrlPc?.alt || ''}\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n              <Picture\n                className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n                source={item.icon?.url}\n                alt={item.icon?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withStyles(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
+  "sourcesContent": ["import React from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  return (\n    <section\n      ref={ref}\n      data-ui-component-id=\"GraphicAttractionBlock\"\n      className={cn('text-info-primary relative', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n          alt={imageUrlPc?.alt || ''}\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n              <Picture\n                className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n                source={item.icon?.url}\n                alt={item.icon?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\nexport default withLayout(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
   "mappings": "AAqCuB,cAAAA,EAYf,QAAAC,MAZe,oBArCvB,OAAOC,MAAW,QAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAOC,MAAW,oBAElB,OAAS,MAAAC,MAAU,yBAqBnB,MAAMC,EAAyBP,EAAM,WAAwD,CAACQ,EAAOC,IAAQ,CAC3G,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,iBAAAC,EAAkB,gBAAAC,CAAgB,EAAIR,EAAM,KAE9G,OACET,EAAC,WACC,IAAKU,EACL,uBAAqB,yBACrB,UAAWH,EAAG,6BAA8BE,EAAM,SAAS,EAE1D,UAAAK,GAAgBf,EAACO,EAAA,CAAM,KAAM,CAAE,MAAOQ,CAAa,EAAG,EACvDd,EAAC,OACC,UAAWO,EAAG,4EAA6E,CACzF,cAAeI,IAAU,SAC3B,CAAC,EAED,UAAAZ,EAACI,EAAA,CACC,OAAQ,GAAGS,GAAY,GAAG,KAAKC,GAAa,GAAG,OAC/C,UAAU,UACV,aAAa,sBACb,IAAKD,GAAY,KAAO,GAC1B,EACAZ,EAAC,OAAI,UAAU,sEACb,UAAAD,EAACK,EAAA,CAAQ,GAAG,KAAK,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAY,EACnEhB,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,aAAa,KAAM,EAAG,KAAMW,EAAkB,GACvE,GACF,EACAjB,EAAC,OAAI,UAAU,+EACZ,SAAAkB,GAAiB,IAAI,CAACC,EAAMC,IAC3BnB,EAAC,OAEC,UAAWO,EACT,8FACA,CAAE,cAAeI,IAAU,SAAU,CACvC,EAEA,UAAAX,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACM,EAAA,CAAK,GAAG,IAAI,UAAU,4DAA4D,KAAMa,EAAK,MAAO,EACrGnB,EAACI,EAAA,CACC,UAAU,2DACV,OAAQe,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GACF,EACAnB,EAACM,EAAA,CACC,GAAG,IACH,UAAU,4DACV,KAAMa,EAAK,YACb,IAnBKC,CAoBP,CACD,EACH,GACF,CAEJ,CAAC,EACD,IAAOC,EAAQlB,EAAWM,CAAsB",
-  "names": ["jsx", "jsxs", "React", "withStyles", "Picture", "Heading", "Text", "Title", "cn", "GraphicAttractionBlock", "props", "ref", "shape", "imageUrlPc", "imageUrlMob", "sectionTitle", "imageTitle", "imageDescription", "attractionItems", "item", "index", "GraphicAttractionBlock_default"]
+  "names": ["jsx", "jsxs", "React", "withLayout", "Picture", "Heading", "Text", "Title", "cn", "GraphicAttractionBlock", "props", "ref", "shape", "imageUrlPc", "imageUrlMob", "sectionTitle", "imageTitle", "imageDescription", "attractionItems", "item", "index", "GraphicAttractionBlock_default"]
 }

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import C,{useImperativeHandle as q,useRef as S,useState as F}from"react";import{useGSAP as G}from"@gsap/react";import u from"gsap";import{ScrollTrigger as i}from"gsap/dist/ScrollTrigger";import{useMediaQuery as E}from"react-responsive";import Q from"../../helpers/ScrollLoadVideo.js";import{Button as k,Heading as U,Picture as Z,Text as J}from"../../components/index.js";import{cn as r}from"../../helpers/index.js";import{withStyles as K}from"../../shared/Styles.js";import{useExposure as O}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";import{sizeMap as W}from"../../components/button.js";import{VideoModal as X}from"../VideoModal/index.js";const d="image",g="hero_banner",Y=({size:x="base"})=>{const{width:b,height:f}=W[x];return e("svg",{width:b,height:f,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},D=C.forwardRef(({data:x,className:b},f)=>{const{title:h,subtitle:v,pcImage:B,padImage:_,mobileImage:H,pcVideo:z,padVideo:P,mobileVideo:c,isShowVideo:j,primaryButton:m,secondaryButton:t,theme:A="light",size:T="default",caption:y=[],blockLink:V}=x,I=E({query:"(max-width: 768px)"}),M=E({query:"(max-width: 1024px)"}),[$,L]=F(!1),l=S(null),o=S(null);return O(o,{componentType:d,componentName:g,componentTitle:h,componentDescription:v}),q(f,()=>o.current),G(()=>{u.registerPlugin(i);function w(){if(!l.current)return;const a=o.current?.clientHeight||100;window.innerHeight<=a?i.create({trigger:o.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:p=>{const n=p.progress*40-20;u.set(l.current,{yPercent:n})}}):(i.create({trigger:o.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:p=>{const n=p.progress*20-20;u.set(l.current,{yPercent:n})}}),i.create({trigger:o.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:p=>{const n=p.progress*20;u.set(l.current,{yPercent:n})}}))}return setTimeout(()=>{w()},1e3),()=>{i.getAll().forEach(a=>a.kill())}},[]),s("div",{ref:o,"data-ui-component-id":"HeroBanner",className:r(A==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":T==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":T==="sm"},b),children:[V&&e("a",{className:"absolute inset-0 z-10",href:N(V,`${d}_${g}`),tabIndex:-1,"aria-hidden":"true"}),e("div",{ref:l,className:r("absolute left-0 top-0 size-full"),children:j?e(Q,{poster:I?c?.url:M?P?.url||c?.url:z?.url,src:I?c?.url:M?P?.url||c?.url:z?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(Z,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:B?.alt||"",source:`${B?.url||""} , ${_?.url??(H?.url||"")} 1024, ${H?.url||""} 767`})}),s("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[s("div",{className:"laptop:text-left max-w-[686px]",children:[h&&e(U,{as:"h2",size:5,className:r("hero-banner-title"),html:h}),v&&e(U,{as:"h3",className:r("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:v})]}),s("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[t?.isShowPlayVideoButton&&t?.playVideoButtonText?s(k,{onClick:()=>L(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button",children:[t?.playVideoButtonText," ",e(Y,{size:"lg"})]}):t?.text?e("a",{href:N(t?.link,`${d}_${g}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:t?.text})}):null,m&&m.text&&e("a",{href:N(m.link,`${d}_${g}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:m.text})})]})]}),y.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:y.map((w,a)=>s(C.Fragment,{children:[e(J,{size:2,className:r("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:w.title}),a<y.length-1&&e("div",{className:r("bg-info-primary w-px")})]},a))}),$&&e(X,{visible:$,videoUrl:t?.videoUrl?.url,youTubeId:t?.youtubeId,onCloseModal:()=>L(!1)})]})});D.displayName="HeroBanner";var ge=K(D);export{ge as default};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import _,{useImperativeHandle as J,useRef as c,useState as K,useEffect as O}from"react";import g from"gsap";import{ScrollTrigger as f}from"gsap/dist/ScrollTrigger";import{useMediaQuery as j}from"react-responsive";import{useInView as W}from"react-intersection-observer";import X from"../../helpers/ScrollLoadVideo.js";import{Button as H,Heading as q,Picture as Y,Text as ee}from"../../components/index.js";import{cn as s}from"../../helpers/index.js";import{withLayout as te}from"../../shared/Styles.js";import{useExposure as re}from"../../hooks/useExposure.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{sizeMap as oe}from"../../components/button.js";import{VideoModal as ae}from"../VideoModal/index.js";const b="image",x="hero_banner",le=({size:h="base"})=>{const{width:v,height:y}=oe[h];return e("svg",{width:v,height:y,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},F=_.forwardRef(({data:h,className:v},y)=>{const{title:r,subtitle:l,pcImage:V,padImage:A,mobileImage:R,pcVideo:I,padVideo:P,mobileVideo:u,isShowVideo:Q,primaryButton:m,secondaryButton:t,theme:Z="light",size:M="default",caption:w=[],blockLink:L}=h,$=j({query:"(max-width: 768px)"}),S=j({query:"(max-width: 1024px)"}),[C,E]=K(!1),{ref:G,inView:U}=W(),k=c(null),N=c(null),T=c(null),n=c(null),o=c(null);return re(o,{componentType:b,componentName:x,componentTitle:r,componentDescription:l}),J(y,()=>o.current),O(()=>{g.registerPlugin(f);function B(){if(!n.current)return;const d=o.current?.clientHeight||100;window.innerHeight<=d?k.current=f.create({trigger:o.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:i=>{const p=i.progress*40-20;g.set(n.current,{yPercent:p})}}):(T.current=f.create({trigger:o.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:i=>{const p=i.progress*20-20;g.set(n.current,{yPercent:p})}}),N.current=f.create({trigger:o.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:i=>{const p=i.progress*20;g.set(n.current,{yPercent:p})}}))}return U&&B(),()=>{k.current&&k.current.kill(),T.current&&T.current.kill(),N.current&&N.current.kill()}},[U]),e("div",{ref:G,"data-ui-component-id":"HeroBanner",children:a("div",{ref:o,className:s(Z==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":M==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":M==="sm"},v),children:[L&&e("a",{className:"absolute inset-0 z-10",href:z(L,`${b}_${x}`),tabIndex:-1,"aria-hidden":"true","aria-label":r}),e("div",{ref:n,className:s("absolute left-0 top-0 size-full"),children:Q?e(X,{poster:$?u?.url:S?P?.url||u?.url:I?.url,src:$?u?.url:S?P?.url||u?.url:I?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(Y,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:V?.alt||"",source:`${V?.url||""} , ${A?.url??(R?.url||"")} 1024, ${R?.url||""} 767`})}),a("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[a("div",{className:"laptop:text-left max-w-[686px]",children:[r&&e(q,{as:"h2",size:5,className:s("hero-banner-title"),html:r}),l&&e(q,{as:"h3",className:s("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:l})]}),a("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[t?.isShowPlayVideoButton&&t?.playVideoButtonText?a(H,{onClick:()=>E(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button",children:[t?.playVideoButtonText," ",e(le,{size:"lg"})]}):t?.text?a(H,{"aria-label":r??l,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:z(t?.link,`${b}_${x}`),children:[t?.text,e("span",{className:"sr-only",children:r??l})]}):null,m&&m.text&&e(H,{"aria-label":r??l,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:z(m.link,`${b}_${x}`),children:m.text})]})]}),w.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:w.map((B,d)=>a(_.Fragment,{children:[e(ee,{size:2,className:s("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:B.title}),d<w.length-1&&e("div",{className:s("bg-info-primary w-px")})]},d))}),C&&e(ae,{visible:C,videoUrl:t?.videoUrl?.url,youTubeId:t?.youtubeId,onCloseModal:()=>E(!1)})]})})});F.displayName="HeroBanner";var ye=te(F);export{ye as default};
 //# sourceMappingURL=HeroBanner.js.map

package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    setTimeout(() => {\n      gsapResize()\n    }, 1000)\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        {\n          'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n          'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n        },\n        className\n      )}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n        ></a>\n      )}\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        {isShowVideo ? (\n          <ScrollLoadVideo\n            poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n            src={\n              isMobile\n                ? (mobileVideo?.url as string)\n                : isPad\n                  ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                  : (pcVideo?.url as string)\n            }\n            className=\"laptop:w-full h-full\"\n            videoClassName=\"h-full object-cover\"\n            muted\n            loop\n            playsInline\n          />\n        ) : (\n          <Picture\n            className=\"laptop:w-full h-full\"\n            imgClassName=\"h-full object-cover\"\n            loading=\"eager\"\n            fetchPriority=\"high\"\n            alt={pcImage?.alt || ''}\n            source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n          />\n        )}\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Heading\n              as=\"h3\"\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n          {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n            <Button\n              onClick={() => setVisible(true)}\n              size=\"lg\"\n              variant=\"secondary\"\n              className=\"hero-banner-play-video-button\"\n            >\n              {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n            </Button>\n          ) : secondaryButton?.text ? (\n            <a href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton?.text}\n              </Button>\n            </a>\n          ) : null}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={2}\n                className={cn(\n                  'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n\n      {/* \u89C6\u9891\u5F39\u7A97 */}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          videoUrl={secondaryButton?.videoUrl?.url}\n          youTubeId={secondaryButton?.youtubeId}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useGSAP", "gsap", "ScrollTrigger", "useMediaQuery", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "isMobile", "isPad", "visible", "setVisible", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n  const { width, height } = sizeMap[size]\n  return (\n    <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n        fill=\"currentcolor\"\n      />\n    </svg>\n  )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const {\n    title,\n    subtitle,\n    pcImage,\n    padImage,\n    mobileImage,\n    pcVideo,\n    padVideo,\n    mobileVideo,\n    isShowVideo,\n    primaryButton,\n    secondaryButton,\n    theme = 'light',\n    size = 'default',\n    caption = [],\n    blockLink,\n  } = data\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n  const [visible, setVisible] = useState<boolean>(false)\n  const { ref: inViewRef, inView } = useInView()\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n  const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n  const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    function gsapResize() {\n      if (!bgRef.current) return\n      const clientHeight = boxRef.current?.clientHeight || 100\n      const screenHeight = window.innerHeight\n\n      if (screenHeight <= clientHeight) {\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 40\n            const value = self.progress * base - base / 2\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      } else {\n        boxTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top bottom',\n          end: 'bottom bottom',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base - base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n        bgTriggerRef.current = ScrollTrigger.create({\n          trigger: boxRef.current,\n          start: 'top top',\n          end: 'bottom top',\n          scrub: true,\n          onUpdate: (self: any) => {\n            const base = 20\n            const value = self.progress * base\n            gsap.set(bgRef.current, { yPercent: value })\n          },\n        })\n      }\n    }\n    if (inView) gsapResize()\n    return () => {\n      // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      boxTriggerRef.current && boxTriggerRef.current.kill()\n      bgTriggerRef.current && bgTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n      <div\n        ref={boxRef}\n        className={cn(\n          theme === 'dark' ? 'aiui-dark' : '',\n          ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n          {\n            'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n            'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n          },\n          className\n        )}\n      >\n        {blockLink && (\n          <a\n            className=\"absolute inset-0 z-10\"\n            href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            aria-label={title}\n          ></a>\n        )}\n        <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n          {isShowVideo ? (\n            <ScrollLoadVideo\n              poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n              src={\n                isMobile\n                  ? (mobileVideo?.url as string)\n                  : isPad\n                    ? (padVideo?.url as string) || (mobileVideo?.url as string)\n                    : (pcVideo?.url as string)\n              }\n              className=\"laptop:w-full h-full\"\n              videoClassName=\"h-full object-cover\"\n              muted\n              loop\n              playsInline\n            />\n          ) : (\n            <Picture\n              className=\"laptop:w-full h-full\"\n              imgClassName=\"h-full object-cover\"\n              loading=\"eager\"\n              fetchPriority=\"high\"\n              alt={pcImage?.alt || ''}\n              source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n            />\n          )}\n        </div>\n\n        {/* \u5185\u5BB9\u533A\u57DF */}\n        <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n          <div className=\"laptop:text-left max-w-[686px]\">\n            {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n            {subtitle && (\n              <Heading\n                as=\"h3\"\n                className={cn(\n                  'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n                )}\n                html={subtitle}\n              />\n            )}\n          </div>\n          {/* \u6309\u94AE\u7EC4 */}\n          <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n            {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n              <Button\n                onClick={() => setVisible(true)}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-play-video-button\"\n              >\n                {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n              </Button>\n            ) : secondaryButton?.text ? (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"secondary\"\n                className=\"hero-banner-secondary-button\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n              >\n                {secondaryButton?.text}\n                <span className=\"sr-only\">{title ?? subtitle}</span>\n              </Button>\n            ) : null}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? subtitle}\n                size=\"lg\"\n                variant=\"primary\"\n                className=\"hero-banner-primary-button\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n        {caption.length > 0 && (\n          <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n            {caption.map((c, index) => (\n              <React.Fragment key={index}>\n                <Text\n                  size={2}\n                  className={cn(\n                    'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                  )}\n                  html={c.title}\n                />\n                {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n              </React.Fragment>\n            ))}\n          </div>\n        )}\n\n        {/* \u89C6\u9891\u5F39\u7A97 */}\n        {visible && (\n          <VideoModal\n            visible={visible}\n            videoUrl={secondaryButton?.videoUrl?.url}\n            youTubeId={secondaryButton?.youtubeId}\n            onCloseModal={() => setVisible(false)}\n          />\n        )}\n      </div>\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "c", "index", "HeroBanner_default"]
 }

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

@@ -10,7 +10,7 @@ declare const MarqueeImageContent: {
     displayName: string;
 };
 declare const MarqueeTextContent: React.ForwardRefExoticComponent<MarqueeTextContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MarqueeProps & React.RefAttributes<SwiperRef>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<MarqueeProps & React.RefAttributes<SwiperRef>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
     className?: string;
     data?: Record<string, any>;
 }, "ref"> & React.RefAttributes<any>>;

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

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

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 { withStyles } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<SwiperRef, MarqueeProps>(({ data, className }, ref) => {\n  const innerRef = useRef<SwiperRef>(null)\n  useImperativeHandle(ref, () => innerRef.current as SwiperRef)\n\n  useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n    componentType: componentType,\n    componentName: componentName,\n  })\n\n  return (\n    <Swiper\n      direction=\"horizontal\"\n      className={cn(\n        'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n        className\n      )}\n      ref={innerRef}\n      id={'Marquee' + data?.key}\n      modules={[Autoplay]}\n      autoplay={{\n        delay: 1,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n      }}\n      loop={true}\n      allowTouchMove={false}\n      centeredSlides\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: '24px',\n        },\n        1025: {\n          spaceBetween: '64px',\n        },\n      }}\n    >\n      {data?.items?.map((item, index) => (\n        <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n          <MarqueeItem data={item} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withStyles(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, type RefObject } from 'react'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MarqueeProps, MarqueeItemProps, MarqueeImageContentProps, MarqueeTextContentProps } from './type.js'\n\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'image'\nconst componentName = 'marquee'\n\nconst Marquee = React.forwardRef<SwiperRef, MarqueeProps>(({ data, className }, ref) => {\n  const innerRef = useRef<SwiperRef>(null)\n  useImperativeHandle(ref, () => innerRef.current as SwiperRef)\n\n  useExposure(innerRef as unknown as RefObject<HTMLDivElement>, {\n    componentType: componentType,\n    componentName: componentName,\n  })\n\n  return (\n    <Swiper\n      direction=\"horizontal\"\n      className={cn(\n        'laptop:h-[80px] h-[48px] w-full items-center [&_.swiper-slide]:!w-auto [&_.swiper-wrapper]:!ease-linear',\n        className\n      )}\n      ref={innerRef}\n      id={'Marquee' + data?.key}\n      modules={[Autoplay]}\n      autoplay={{\n        delay: 1,\n        disableOnInteraction: false,\n        reverseDirection: data?.reverseDirection,\n      }}\n      loop={true}\n      allowTouchMove={false}\n      centeredSlides\n      slidesPerView=\"auto\"\n      speed={data?.speed || 3000}\n      breakpoints={{\n        0: {\n          spaceBetween: '24px',\n        },\n        1025: {\n          spaceBetween: '64px',\n        },\n      }}\n    >\n      {data?.items?.map((item, index) => (\n        <SwiperSlide key={item?.id + 'SwiperSlide' + index}>\n          <MarqueeItem data={item} />\n        </SwiperSlide>\n      ))}\n    </Swiper>\n  )\n})\nMarquee.displayName = 'Marquee'\n\nconst MarqueeItem = ({ data, configuration }: MarqueeItemProps) => {\n  return (\n    <>\n      {data.type === 'image' && (\n        <MarqueeImageContent image={data?.image} imageClassName={configuration?.imageClassName} />\n      )}\n      {data.type === 'text' && <MarqueeTextContent text={data?.text} textClassName={configuration?.textClassName} />}\n    </>\n  )\n}\n\nMarqueeItem.displayName = 'MarqueeItem'\n\nconst MarqueeImageContent = ({ image, imageClassName }: MarqueeImageContentProps) => {\n  return (\n    <div className=\"laptop:w-[120px] h-full w-[72px] shrink-0\">\n      <Picture source={image?.url} alt={image?.alt || ''} imgClassName={cn('object-cover', imageClassName)} />\n    </div>\n  )\n}\n\nMarqueeImageContent.displayName = 'MarqueeImageContent'\n\nconst MarqueeTextContent = React.forwardRef<HTMLDivElement, MarqueeTextContentProps>(({ text, textClassName }, ref) => {\n  return (\n    <Text\n      as=\"div\"\n      ref={ref}\n      html={text}\n      className={cn('text-lines-2 flex size-full items-center justify-center font-medium leading-[1.2]', textClassName)}\n    />\n  )\n})\n\nMarqueeTextContent.displayName = 'MarqueeTextContent'\n\nexport default withLayout(Marquee)\nexport { MarqueeItem, MarqueeImageContent, MarqueeTextContent }\n"],
   "mappings": "aAsDU,OAUN,YAAAA,EAVM,OAAAC,EAUN,QAAAC,MAVM,oBArDV,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,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", "withStyles", "Swiper", "SwiperSlide", "Autoplay", "useExposure", "componentType", "componentName", "Marquee", "data", "className", "ref", "innerRef", "item", "index", "MarqueeItem", "configuration", "MarqueeImageContent", "MarqueeTextContent", "image", "imageClassName", "text", "textClassName", "Marquee_default"]
+  "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"]
 }

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as oe,jsx as e,jsxs as d}from"react/jsx-runtime";import{useState as a,useRef as i,useEffect as E,forwardRef as O,useImperativeHandle as A}from"react";import{debounce as G}from"lodash";import{cn as c}from"../../helpers/utils.js";import{withStyles as J}from"../../shared/Styles.js";import K from"../../components/button.js";import{VideoModal as Q}from"../VideoModal/index.js";import{convertLexicalToHTML as R}from"@payloadcms/richtext-lexical/html";import{useInView as U}from"react-intersection-observer";import{useExposure as W}from"../../hooks/useExposure.js";import X from"../../helpers/ScrollLoadVideo.js";const Z="media_player_base",ee="video",P=({defaultConverters:p})=>({...p,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),te=O(({className:p="",onBtnClick:s,data:{title:t,videoTitle:r,btnText:x,youtubeId:y,video:z,theme:B,img:_,shape:$,...I}},V)=>{const{sticky:n}=I,[b,h]=a(!1),[w,C]=a(0),[S,D]=a(0),[H,T]=a(!1),m=i(null),F=i(null),o=i(null),M=i(null),{ref:Y,inView:k}=U();A(V,()=>o.current);const L=typeof t=="string"?t:t&&R({data:t,converters:P}),u=typeof r=="string"?r:r&&R({data:r,converters:P});E(()=>{k?(m.current?.play(),h(!0)):(m.current?.pause(),h(!1))},[k]);const f=G(()=>{if(o.current){const g=o.current.getBoundingClientRect(),l=window.innerHeight,j=window.scrollY||window.pageYOffset,q=g.bottom+j,N=document.documentElement.scrollHeight-q;C(N>l?l:N)}if(o.current){const g=o.current.clientHeight,l=window.innerHeight;D(g+l)}},600);E(()=>(f(),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}),[]),W(M,{componentType:ee,componentName:Z,componentTitle:u});const v="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 d(oe,{children:[n&&e("div",{ref:o,className:c("relative z-10 ",v,p),children:e("div",{children:d("div",{ref:Y,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:[L&&!b&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:L}}),u&&b&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:u}}),x&&e(K,{variant:"link",className:c("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{T(!0),s&&s?.()},children:x})]})})}),d("div",{style:n?{marginBottom:`-${w}px`,marginTop:`-${S}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:c("relative overflow-hidden",n?"h-screen w-full":v,{"aiui-dark":B==="dark","rounded-box":$==="rounded"}),children:d("div",{ref:F,className:"media-cover left-0 top-0 h-screen w-screen",children:[e(X,{videoRef:m,poster:_?.url||"",src:z?.url,className:"size-full",videoClassName:"object-cover",muted:!1,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})})}),e("div",{className:c(n&&"relative box-content block",v),style:n?{height:`${w}px`}:{},ref:M})]}),H&&y&&e(Q,{visible:H,youTubeId:y,onCloseModal:()=>T(!1)})]})});var fe=J(te);export{fe as default};
+"use client";import{Fragment as ye,jsx as e,jsxs as c}from"react/jsx-runtime";import{useState as y,useRef as r,useEffect as R,forwardRef as se,useImperativeHandle as le}from"react";import{debounce as ae}from"lodash";import{cn as b}from"../../helpers/utils.js";import{withLayout as ie}from"../../shared/Styles.js";import ce from"../../components/button.js";import{VideoModal as de}from"../VideoModal/index.js";import{convertLexicalToHTML as O}from"@payloadcms/richtext-lexical/html";import{useInView as pe}from"react-intersection-observer";import{useExposure as ue}from"../../hooks/useExposure.js";import U from"../../helpers/ScrollLoadVideo.js";import{gsap as E}from"gsap";import{SplitText as me}from"gsap/dist/SplitText";import{ScrollTrigger as fe}from"gsap/dist/ScrollTrigger";const ge="media_player_base",ve="video",G=({defaultConverters:h})=>({...h,text:d=>{const{node:t}=d;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),xe=se(({className:h="",onBtnClick:d,data:{title:t,videoTitle:p,btnText:z,youtubeId:I,video:_,mobileVideo:J,theme:P,img:S,shape:$,titleAnimation:u,...K}},Q)=>{const{sticky:s}=K,[B,C]=y(!1),[V,W]=y(0),[X,Z]=y(0),[D,F]=y(!1),m=r(null),j=r(null),o=r(null),f=r(null),Y=r(null),g=r(null),w=r(null),{ref:A,inView:v}=pe();le(Q,()=>o.current);const x=typeof t=="string"?t:t&&O({data:t,converters:G}),H=typeof p=="string"?p:p&&O({data:p,converters:G});R(()=>{v?(m.current?.play(),C(!0)):(m.current?.pause(),C(!1))},[v]);const T=ae(()=>{if(o.current){const l=o.current.getBoundingClientRect(),n=window.innerHeight,a=window.scrollY||window.pageYOffset,M=l.bottom+a,i=document.documentElement.scrollHeight-M;W(i>n?n:i)}if(o.current){const l=o.current.clientHeight,n=window.innerHeight;Z(l+n)}},600);R(()=>(T(),window.addEventListener("resize",T),()=>{window.removeEventListener("resize",T)}),[]),R(()=>{function l(){if(!f.current||u!=="fade-in")return;const n=f.current?.clientHeight||80;g.current=new me(f.current,{type:"words",wordsClass:"word"});const a=g.current.words;E.set(a,{opacity:0}),w.current=fe.create({trigger:o.current,start:"top center-=10%",end:`top+=${n*1.5+80}px center-=10%`,scrub:!0,onUpdate:M=>{const L=M.progress,i=a.length,ee=1/i,q=.5;a.forEach((te,oe)=>{const re=oe/i*(1-q),ne=ee*(1+q);let N=(L-re)/ne;N=Math.max(0,Math.min(N,1)),E.set(te,{opacity:N})}),E.set(j.current,{opacity:L})}})}return v&&l(),()=>{g.current&&g.current.revert(),w.current&&w.current.kill()}},[u,v]),ue(Y,{componentType:ve,componentName:ge,componentTitle:H});const k="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 c(ye,{children:[s&&e("div",{ref:o,className:b("relative z-10",k,{"aiui-dark":P==="dark","rounded-box":$==="rounded"},h),children:e("div",{ref:A,children:!u&&c("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&&!B&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),H&&B&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),z&&e(ce,{variant:"link",className:b("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{F(!0),d&&d?.()},children:z})]})})}),c("div",{style:s?{marginBottom:`-${V}px`,marginTop:`-${X}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:c("div",{className:b("relative overflow-hidden",s?"h-screen w-full":k,{"aiui-dark":P==="dark","rounded-box":$==="rounded"}),children:[u==="fade-in"&&x&&e("div",{ref:f,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),c("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[e(U,{videoRef:m,poster:S?.url||"",src:_?.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(U,{videoRef:m,poster:S?.url||"",src:J?.url||_?.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:j,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),e("div",{className:b(s&&"relative box-content block",k),style:s?{height:`${V}px`}:{},ref:Y})]}),D&&I&&e(de,{visible:D,youTubeId:I,onCloseModal:()=>F(!1)})]})});var _e=ie(xe);export{_e 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, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    { className = '', onBtnClick, data: { title, videoTitle, btnText, youtubeId, video, theme, img, shape, ...rest } },\n    ref\n  ) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [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 trackRef = useRef<HTMLDivElement>(null)\n\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    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\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 ref={titleRef} className={cn('relative z-10 ', aspect, className)}>\n            <div>\n              <div\n                ref={inViewRef}\n                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              >\n                {title_html && !isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: title_html }}\n                  />\n                )}\n                {videoTitle_html && isPlaying && (\n                  <div\n                    className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                    dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                  />\n                )}\n                {btnText && (\n                  <Button\n                    variant=\"link\"\n                    className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                    onClick={() => {\n                      setVisible(true)\n                      // if (isPlaying) {\n                      //   if (videoRef.current) {\n                      //     videoRef.current.pause()\n                      //   }\n                      //   setIsPlaying(false)\n                      // } else {\n                      //   if (videoRef.current) {\n                      //     videoRef.current.play()\n                      //   }\n                      //   setIsPlaying(true)\n                      // }\n                      onBtnClick && onBtnClick?.()\n                    }}\n                  >\n                    {btnText}\n                    {/* <Right /> */}\n                  </Button>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n        <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\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              <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n                {/* <video\n                    ref={videoRef}\n                    className=\"size-full object-cover\"\n                    src={video?.url}\n                    muted\n                    loop\n                    playsInline\n                    webkit-playsinline\n                    x5-playsinline\n                  /> */}\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"size-full\"\n                  videoClassName=\"object-cover\"\n                  muted={false}\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  className=\"absolute left-0 top-0 z-10 size-full\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "theme", "img", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "trackRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n  ...defaultConverters,\n  text: args => {\n    const { node } = args\n    // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n    if (node.$ && node.$.color) {\n      return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n    }\n    return node.text\n  },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n  (\n    {\n      className = '',\n      onBtnClick,\n      data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n    },\n    ref\n  ) => {\n    const { sticky } = rest\n    const [isPlaying, setIsPlaying] = useState(false)\n    const [btb, setbtb] = useState(0)\n    const [titleHeight, setTitleHeight] = useState(0)\n    const [visible, setVisible] = useState<boolean>(false)\n\n    const videoRef = useRef<HTMLVideoElement>(null)\n    const bgRef = useRef<HTMLImageElement>(null)\n    const titleRef = useRef<HTMLDivElement>(null)\n    const titleFadeInRef = useRef<HTMLDivElement>(null)\n    const trackRef = useRef<HTMLDivElement>(null)\n    const splitTextInstance = useRef<SplitText | null>(null)\n    const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n    const { ref: inViewRef, inView } = useInView()\n\n    useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n    const title_html =\n      typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n    const videoTitle_html =\n      typeof videoTitle === 'string'\n        ? videoTitle\n        : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n    useEffect(() => {\n      if (inView) {\n        videoRef.current?.play()\n        setIsPlaying(true)\n      } else {\n        videoRef.current?.pause()\n        setIsPlaying(false)\n      }\n    }, [inView])\n\n    const debouncedHandleResize = debounce(() => {\n      if (titleRef.current) {\n        const rect = titleRef.current.getBoundingClientRect()\n        const screenHeight = window.innerHeight\n        const scrollTop = window.scrollY || window.pageYOffset\n        const elementBottomToPageTop = rect.bottom + scrollTop\n        const pageHeight = document.documentElement.scrollHeight\n        const distanceToPageBottom = pageHeight - elementBottomToPageTop\n        setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n      }\n      if (titleRef.current) {\n        const titleHeight = titleRef.current.clientHeight\n        const screenHeight = window.innerHeight\n        setTitleHeight(titleHeight + screenHeight)\n      }\n    }, 600)\n\n    useEffect(() => {\n      debouncedHandleResize()\n      window.addEventListener('resize', debouncedHandleResize)\n      return () => {\n        window.removeEventListener('resize', debouncedHandleResize)\n      }\n    }, [])\n\n    useEffect(() => {\n      function gsapResize() {\n        if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n        const height = titleFadeInRef.current?.clientHeight || 80\n        splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n          type: 'words',\n          wordsClass: 'word',\n        })\n        const words = splitTextInstance.current.words\n        gsap.set(words, { opacity: 0 })\n        scrollTriggerRef.current = ScrollTrigger.create({\n          trigger: titleRef.current,\n          start: 'top center-=10%',\n          end: `top+=${height * 1.5 + 80}px center-=10%`,\n          scrub: true,\n          onUpdate: (self: any) => {\n            const progress = self.progress\n            const total = words.length\n            const interval = 1 / total\n            const overlap = 0.5\n            words.forEach((word: any, i: number) => {\n              const start = (i / total) * (1 - overlap)\n              const width = interval * (1 + overlap)\n              let opacity = (progress - start) / width\n              opacity = Math.max(0, Math.min(opacity, 1))\n              gsap.set(word, { opacity })\n            })\n            gsap.set(bgRef.current, { opacity: progress })\n          },\n        })\n      }\n\n      if (inView) gsapResize()\n\n      return () => {\n        splitTextInstance.current && splitTextInstance.current.revert()\n        // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n        scrollTriggerRef.current && scrollTriggerRef.current.kill()\n      }\n    }, [titleAnimation, inView])\n\n    useExposure(trackRef, {\n      componentType,\n      componentName,\n      componentTitle: videoTitle_html,\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            ref={titleRef}\n            className={cn(\n              'relative z-10',\n              aspect,\n              {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              },\n              className\n            )}\n          >\n            <div ref={inViewRef}>\n              {!titleAnimation && (\n                <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n                  {title_html && !isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: title_html }}\n                    />\n                  )}\n                  {videoTitle_html && isPlaying && (\n                    <div\n                      className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                      dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n                    />\n                  )}\n                  {btnText && (\n                    <Button\n                      variant=\"link\"\n                      className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n                      onClick={() => {\n                        setVisible(true)\n                        // if (isPlaying) {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.pause()\n                        //   }\n                        //   setIsPlaying(false)\n                        // } else {\n                        //   if (videoRef.current) {\n                        //     videoRef.current.play()\n                        //   }\n                        //   setIsPlaying(true)\n                        // }\n                        onBtnClick && onBtnClick?.()\n                      }}\n                    >\n                      {btnText}\n                      {/* <Right /> */}\n                    </Button>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n        <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n          <div className=\"sticky top-0 \">\n            <div\n              className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n                'aiui-dark': theme === 'dark',\n                'rounded-box': shape === 'rounded',\n              })}\n            >\n              {titleAnimation === 'fade-in' && title_html && (\n                <div\n                  ref={titleFadeInRef}\n                  className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n                  dangerouslySetInnerHTML={{ __html: title_html }}\n                />\n              )}\n              <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={video?.url!}\n                  className=\"tablet:block hidden size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <ScrollLoadVideo\n                  videoRef={videoRef}\n                  poster={img?.url || ''}\n                  src={mobileVideo?.url || video?.url!}\n                  className=\"tablet:hidden block size-full\"\n                  videoClassName=\"object-cover\"\n                  muted\n                  loop\n                  playsInline\n                  autoplay\n                  webkit-playsinline\n                  x5-playsinline\n                />\n                <div\n                  ref={bgRef}\n                  className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n                  style={{\n                    background: 'rgba(0, 0, 0, 0.2)',\n                  }}\n                />\n              </div>\n            </div>\n          </div>\n          <div\n            className={cn(sticky && 'relative box-content block', aspect)}\n            style={sticky ? { height: `${btb}px` } : {}}\n            ref={trackRef}\n          />\n        </div>\n        {visible && youtubeId && (\n          <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n        )}\n      </>\n    )\n  }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
+  "mappings": "aAuJM,mBAAAA,GAkBc,OAAAC,EAFJ,QAAAC,MAhBV,oBAtJN,OAAS,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,GAAY,uBAAAC,OAA2B,QAC7E,OAAS,YAAAC,OAAgB,SACzB,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAOC,OAAY,6BACnB,OAAS,cAAAC,OAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAGrC,OAAS,aAAAC,OAAiB,8BAE1B,OAAS,eAAAC,OAAmB,6BAC5B,OAAOC,MAAqB,mCAC5B,OAAS,QAAAC,MAAY,OACrB,OAAS,aAAAC,OAAiB,sBAC1B,OAAS,iBAAAC,OAAqB,0BAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,GAAkBpB,GACtB,CACE,CACE,UAAAqB,EAAY,GACZ,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,YAAAC,EAAa,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,CAAK,CAChH,EACAC,IACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIF,EACb,CAACG,EAAWC,CAAY,EAAIxC,EAAS,EAAK,EAC1C,CAACyC,EAAKC,CAAM,EAAI1C,EAAS,CAAC,EAC1B,CAAC2C,EAAaC,CAAc,EAAI5C,EAAS,CAAC,EAC1C,CAAC6C,EAASC,CAAU,EAAI9C,EAAkB,EAAK,EAE/C+C,EAAW9C,EAAyB,IAAI,EACxC+C,EAAQ/C,EAAyB,IAAI,EACrCgD,EAAWhD,EAAuB,IAAI,EACtCiD,EAAiBjD,EAAuB,IAAI,EAC5CkD,EAAWlD,EAAuB,IAAI,EACtCmD,EAAoBnD,EAAyB,IAAI,EACjDoD,EAAmBpD,EAA6B,IAAI,EACpD,CAAE,IAAKqD,EAAW,OAAAC,CAAO,EAAI5C,GAAU,EAE7CP,GAAoBiC,EAAK,IAAMY,EAAS,OAAyB,EAEjE,MAAMO,EACJ,OAAO9B,GAAU,SAAWA,EAAQA,GAAShB,EAAqB,CAAE,KAAMgB,EAAO,WAAYP,CAAe,CAAC,EACzGsC,EACJ,OAAO9B,GAAe,SAClBA,EACAA,GAAcjB,EAAqB,CAAE,KAAMiB,EAAY,WAAYR,CAAe,CAAC,EAEzFjB,EAAU,IAAM,CACVqD,GACFR,EAAS,SAAS,KAAK,EACvBP,EAAa,EAAI,IAEjBO,EAAS,SAAS,MAAM,EACxBP,EAAa,EAAK,EAEtB,EAAG,CAACe,CAAM,CAAC,EAEX,MAAMG,EAAwBrD,GAAS,IAAM,CAC3C,GAAI4C,EAAS,QAAS,CACpB,MAAMU,EAAOV,EAAS,QAAQ,sBAAsB,EAC9CW,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CpB,EAAOqB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAId,EAAS,QAAS,CACpB,MAAMN,EAAcM,EAAS,QAAQ,aAC/BW,EAAe,OAAO,YAC5BhB,EAAeD,EAAciB,CAAY,CAC3C,CACF,EAAG,GAAG,EAEN1D,EAAU,KACRwD,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,EAELxD,EAAU,IAAM,CACd,SAAS8D,GAAa,CACpB,GAAI,CAACd,EAAe,SAAWf,IAAmB,UAAW,OAC7D,MAAM8B,EAASf,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAIrC,GAAUmC,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMgB,EAAQd,EAAkB,QAAQ,MACxCtC,EAAK,IAAIoD,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9Bb,EAAiB,QAAUrC,GAAc,OAAO,CAC9C,QAASiC,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQgB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C9D,EAAK,IAAI0D,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD9D,EAAK,IAAIkC,EAAM,QAAS,CAAE,QAASoB,CAAS,CAAC,CAC/C,CACF,CAAC,CACH,CAEA,OAAIb,GAAQS,EAAW,EAEhB,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAAClB,EAAgBoB,CAAM,CAAC,EAE3B3C,GAAYuC,EAAU,CACpB,cAAAjC,GACA,cAAAD,GACA,eAAgBwC,CAClB,CAAC,EAED,MAAMoB,EACJ,6NACF,OACE9E,EAAAF,GAAA,CACG,UAAAyC,GACCxC,EAAC,OACC,IAAKmD,EACL,UAAW3C,EACT,gBACAuE,EACA,CACE,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAV,CACF,EAEA,SAAA1B,EAAC,OAAI,IAAKwD,EACP,UAACnB,GACApC,EAAC,OAAI,UAAU,yGACZ,UAAAyD,GAAc,CAACjB,GACdzC,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQ0D,CAAW,EAChD,EAEDC,GAAmBlB,GAClBzC,EAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQ2D,CAAgB,EACrD,EAED7B,GACC9B,EAACU,GAAA,CACC,QAAQ,OACR,UAAWF,EAAG,4DAA4D,EAC1E,QAAS,IAAM,CACbwC,EAAW,EAAI,EAYfrB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,EAEF7B,EAAC,OAAI,MAAOuC,EAAS,CAAE,aAAc,IAAIG,CAAG,KAAM,UAAW,IAAIE,CAAW,IAAK,EAAI,CAAC,EAAG,UAAU,WACjG,UAAA7C,EAAC,OAAI,UAAU,gBACb,SAAAC,EAAC,OACC,UAAWO,EAAG,2BAA4BgC,EAAS,kBAAoBuC,EAAQ,CAC7E,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAaqB,GAC/B1D,EAAC,OACC,IAAKoD,EACL,UAAU,wLACV,wBAAyB,CAAE,OAAQM,CAAW,EAChD,EAEFzD,EAAC,OAAI,UAAU,6CACb,UAAAD,EAACe,EAAA,CACC,SAAUkC,EACV,OAAQd,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAhC,EAACe,EAAA,CACC,SAAUkC,EACV,OAAQd,GAAK,KAAO,GACpB,IAAKF,GAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,EACAhC,EAAC,OACC,IAAKkD,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,EACAlD,EAAC,OACC,UAAWQ,EAAGgC,GAAU,6BAA8BuC,CAAM,EAC5D,MAAOvC,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKU,EACP,GACF,EACCN,GAAWhB,GACV/B,EAACW,GAAA,CAAW,QAASoC,EAAS,UAAWhB,EAAW,aAAc,IAAMiB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA,IAAOgC,GAAQvE,GAAWgB,EAAe",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withLayout", "Button", "VideoModal", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "gsap", "SplitText", "ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "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", "aspect", "MediaPlayerBase_default"]
 }

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

@@ -10,7 +10,9 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
         img?: Img;
         isYouTube?: boolean;
         video?: Video;
+        mobileVideo?: Video;
         youtubeId?: string;
+        titleAnimation?: 'fade-in';
     };
     onBtnClick?: () => void;
 }

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

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

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as l,jsxs as t}from"react/jsx-runtime";import{useState as r,forwardRef as N,useRef as I}from"react";import{cn as T}from"../../helpers/utils.js";import{withStyles as L}from"../../shared/Styles.js";import{Picture as c,Link as V}from"../../components/index.js";import B from"../Title/index.js";import C from"../SwiperBox/index.js";import{Container as S}from"../../components/container.js";import{VideoModal as z}from"../VideoModal/index.js";import{convertLexicalToHTML as R}from"@payloadcms/richtext-lexical/html";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";const u="video",x="media_player_multi",j=({data:e,configuration:o})=>t("div",{className:T("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:[t("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(c,{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(c,{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-12 flex size-10 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"})})})})]}),t("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:[t("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(V,{href:_(e?.href,`${u}_${x}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),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})]})]}),q=N(({data:{items:e=[],shape:o="square",title:i,containerProps:v},className:a="",key:b,onVideoPlayBtnClick:g},h)=>{const[p,n]=r(!1),[w,y]=r(""),[k,M]=r(""),m=typeof i=="string"?i:i&&R({data:i}),d=I(null);U(d,{componentType:u,componentName:x,componentTitle:m});const f=e.length;return t("div",{className:a,ref:d,children:[l("div",{className:"mediaplayermulti-box",children:l(S,{...v||{},className:"overflow-hidden",children:t("div",{className:a,ref:h,children:[i&&l(B,{className:"mediaplayermulti-title",data:{title:m||""}}),l(C,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+b,data:{list:e,configuration:{shape:o,onVideoPlayBtnClick:(P,s)=>{n(!0),s?.isYouTube?M?.(s?.youtubeId||""):y?.(s?.video?.url||""),g?.(P)}}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),p&&l(z,{visible:p,youTubeId:k,videoUrl:w,onCloseModal:()=>n(!1)})]})});var O=L(q);export{O as default};
+"use client";import{jsx as l,jsxs as t}from"react/jsx-runtime";import{useState as r,forwardRef as N,useRef as I}from"react";import{cn as L}from"../../helpers/utils.js";import{withLayout as T}from"../../shared/Styles.js";import{Picture as c,Link as V}from"../../components/index.js";import B from"../Title/index.js";import C from"../SwiperBox/index.js";import{Container as z}from"../../components/container.js";import{VideoModal as R}from"../VideoModal/index.js";import{convertLexicalToHTML as S}from"@payloadcms/richtext-lexical/html";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";const u="video",x="media_player_multi",j=({data:e,configuration:o})=>t("div",{className:L("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:[t("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[l(c,{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(c,{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-12 flex size-10 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"})})})})]}),t("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:[t("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(V,{href:_(e?.href,`${u}_${x}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),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})]})]}),q=N(({data:{items:e=[],shape:o="square",title:i,containerProps:v},className:a="",key:b,onVideoPlayBtnClick:g},h)=>{const[p,n]=r(!1),[w,y]=r(""),[k,M]=r(""),m=typeof i=="string"?i:i&&S({data:i}),d=I(null);U(d,{componentType:u,componentName:x,componentTitle:m});const f=e.length;return t("div",{className:a,ref:d,children:[l("div",{className:"mediaplayermulti-box",children:l(z,{...v||{},className:"overflow-hidden",children:t("div",{className:a,ref:h,children:[i&&l(B,{className:"mediaplayermulti-title",data:{title:m||""}}),l(C,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+b,data:{list:e,configuration:{shape:o,onVideoPlayBtnClick:(P,s)=>{n(!0),s?.isYouTube?M?.(s?.youtubeId||""):y?.(s?.video?.url||""),g?.(P)}}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),p&&l(R,{visible:p,youTubeId:k,videoUrl:w,onCloseModal:()=>n(!1)})]})});var O=T(q);export{O 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 } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } 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 { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\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-12 flex size-10 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              href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n            >\n              {data.quote}\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    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\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                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId?.(data?.youtubeId || '')\n                      } else {\n                        setVideoUrl?.(data?.video?.url || '')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\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 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 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\nexport default withStyles(MediaPlayerMulti)\n"],
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Link } 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 { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\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-12 flex size-10 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              href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n            >\n              {data.quote}\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    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const [youTubeId, setYouTubeId] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\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                    onVideoPlayBtnClick: (_: number, data: MediaPlayerItemProps) => {\n                      setVisible(true)\n                      if (data?.isYouTube) {\n                        setYouTubeId?.(data?.youtubeId || '')\n                      } else {\n                        setVideoUrl?.(data?.video?.url || '')\n                      }\n                      onVideoPlayBtnClick?.(_)\n                    },\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 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 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\nexport default withLayout(MediaPlayerMulti)\n"],
   "mappings": "aA2BM,OACE,OAAAA,EADF,QAAAC,MAAA,oBA1BN,OAAS,YAAAC,EAAU,cAAAC,EAAY,UAAAC,MAAc,QAC7C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,wBAAAC,MAA4B,oCAErC,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,qBAEhBC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAE3CnB,EAAC,OACC,UAAWI,EACT,2CACA,yCACA,iEACAe,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,UAAAnB,EAAC,OAAI,UAAU,uFACb,UAAAD,EAACO,EAAA,CACC,OAAQY,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,gCACV,aAAa,gFACf,EACAnB,EAACO,EAAA,CACC,OAAQY,EAAK,WAAW,KAAOA,EAAK,KAAK,IACzC,IAAKA,EAAK,WAAW,KAAOA,EAAK,KAAK,KAAO,GAC7C,UAAU,gCACV,aAAa,6BACf,EACAnB,EAAC,OAAI,UAAU,2DACX,UAAAmB,GAAM,OAAO,KAAOA,GAAM,YAC1BnB,EAAC,UACC,QAAS,IAAM,CACboB,GAAe,sBAAsBA,GAAe,OAAS,EAAGD,CAAI,CACtE,EACA,UAAU,gHAEV,SAAAnB,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,SAAAmB,EAAK,MACR,EACCA,EAAK,OACJnB,EAACQ,EAAA,CACC,KAAMO,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,kHAET,SAAAE,EAAK,MACR,GAEJ,EAEAnB,EAAC,KAAE,UAAU,mLACV,SAAAmB,EAAK,YACR,GACF,GACF,EAIEE,EAAmBlB,EACvB,CACE,CAAE,KAAM,CAAE,MAAAmB,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,EAAO,eAAAC,CAAe,EAAG,UAAAC,EAAY,GAAI,IAAAC,EAAK,oBAAAC,CAAoB,EAC1GC,IACG,CACH,KAAM,CAACC,EAASC,CAAU,EAAI7B,EAAkB,EAAK,EAC/C,CAAC8B,EAAUC,CAAW,EAAI/B,EAAiB,EAAE,EAC7C,CAACgC,EAAWC,CAAY,EAAIjC,EAAiB,EAAE,EAC/CkC,EAAa,OAAOZ,GAAU,SAAWA,EAAQA,GAASX,EAAqB,CAAE,KAAMW,CAAM,CAAC,EAC9Fa,EAAajC,EAAuB,IAAI,EAE9CU,EAAYuB,EAAY,CACtB,cAAArB,EACA,cAAAC,EACA,eAAgBmB,CAClB,CAAC,EAGD,MAAME,EAAchB,EAAM,OAE1B,OACErB,EAAC,OAAI,UAAWyB,EAAW,IAAKW,EAC9B,UAAArC,EAAC,OAAI,UAAU,uBACb,SAAAA,EAACW,EAAA,CAAW,GAAIc,GAAkB,CAAC,EAAI,UAAU,kBAC/C,SAAAxB,EAAC,OAAI,UAAWyB,EAAW,IAAKG,EAC7B,UAAAL,GAASxB,EAACS,EAAA,CAAM,UAAU,yBAAyB,KAAM,CAAE,MAAO2B,GAAc,EAAG,EAAG,EACvFpC,EAACU,EAAA,CACC,UAAU,oBACV,GAAI,yBAA2BiB,EAC/B,KAAM,CACJ,KAAML,EACN,cAAe,CACb,MAAAC,EACA,oBAAqB,CAACgB,EAAWpB,IAA+B,CAC9DY,EAAW,EAAI,EACXZ,GAAM,UACRgB,IAAehB,GAAM,WAAa,EAAE,EAEpCc,IAAcd,GAAM,OAAO,KAAO,EAAE,EAEtCS,IAAsBW,CAAC,CACzB,CACF,CACF,EACA,MAAOrB,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,cAAeoB,IAAgB,EAAI,EAAI,GACzC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,IAAgB,EAAI,EAAI,GACzC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,EACF,EACCR,GACC9B,EAACY,EAAA,CACC,QAASkB,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CACF,EAEA,IAAOS,EAAQlC,EAAWe,CAAgB",
-  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
+  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withLayout", "Picture", "Link", "Title", "SwiperBox", "Container", "VideoModal", "convertLexicalToHTML", "useExposure", "trackUrlRef", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "title_html", "wrapperRef", "itemsLength", "_", "MediaPlayerMulti_default"]
 }

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

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

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

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