@anker-in/headless-ui 1.0.9-temp-box → 1.0.9-temp-10

package/dist/cjs/apps/playground/utils/classnames.d.ts

@@ -0,0 +1 @@
+export declare function classNames(...arr: unknown[]): string;

package/dist/cjs/biz-components/AccordionCards/useDebounce.d.ts

@@ -0,0 +1,6 @@
+type DebounceOptions = {
+    leading?: boolean;
+    trailing?: boolean;
+};
+export declare function useDebounce<T extends any[]>(func: (...args: T) => void, delay?: number, options?: DebounceOptions): (...args: T) => void;
+export {};

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

@@ -0,0 +1,20 @@
+import type { Img } from '../../types/props.js';
+export type CreativeModuleDataType = {
+    img: Img;
+    title: string;
+    description: string;
+    theme: 'light' | 'dark';
+    shape: 'rounded' | 'square';
+    span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+type CreativeModuleType = {
+    data: {
+        products: CreativeModuleDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<CreativeModuleType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+"use strict";"use client";var h=Object.create;var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(e,l)=>{for(var a in l)d(e,a,{get:l[a],enumerable:!0})},m=(e,l,a,i)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of x(l))!g.call(e,s)&&s!==a&&d(e,s,{get:()=>l[s],enumerable:!(i=v(l,s))||i.enumerable});return e};var N=(e,l,a)=>(a=e!=null?h(f(e)):{},m(l||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),k=e=>m(d({},"__esModule",{value:!0}),e);var M={};b(M,{default:()=>C});module.exports=k(M);var t=require("react/jsx-runtime"),r=require("../../helpers/utils.js"),c=N(require("../SwiperBox/index.js")),n=require("../../shared/Styles.js"),p=require("../../components/gird.js"),o=require("../../components/index.js");const w=({data:e})=>(0,t.jsx)("div",{className:(0,r.cn)("laptop:h-auto text-info-primary md-tablet:h-[360px] relative flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(o.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""}),(0,t.jsxs)("div",{className:"laptop:p-6 z-1 absolute bottom-0 box-border flex w-full flex-col p-4",children:[(0,t.jsx)(o.Text,{html:e?.title,className:"graphic-title lg-desktop:text-lg desktop:text-base truncate text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(o.Text,{html:e?.description,className:"graphic-title lg-desktop:text-lg desktop:text-base truncate text-sm font-bold leading-[1.2]"})]})]})}),y=e=>{const{data:l,className:a}=e,{products:i}=l;return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"laptop:block box-border hidden w-full overflow-hidden",children:(0,t.jsx)(p.Grid,{className:(0,r.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",a),children:i?.map((s,u)=>(0,t.jsxs)(p.GridItem,{span:s.span,className:(0,r.cn)("relative w-full overflow-hidden",s.shape==="rounded"?"rounded-2xl":"rounded-none","lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]"),children:[(0,t.jsx)(o.Picture,{source:s.img.url,className:"size-full",imgClassName:"h-full object-cover"}),(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(o.Text,{html:s.title,className:"text-white"}),(0,t.jsx)(o.Text,{html:s.description,className:"text-white"})]})]},u))})}),(0,t.jsx)("div",{className:"laptop:hidden block w-full overflow-hidden",children:(0,t.jsx)(c.default,{id:"CreativeModule",className:(0,r.cn)("!overflow-visible",a),data:{list:i||[]},Slide:w})})]})};var C=(0,n.withLayout)(y);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CreativeModule/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type CreativeModuleDataType = {\n  img: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  shape: 'rounded' | 'square'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype CreativeModuleType = {\n  data: {\n    products: CreativeModuleDataType[]\n  }\n  className?: string\n}\n\nconst Item = ({ data }: { data: CreativeModuleDataType }) => {\n  return (\n    <div\n      className={cn('laptop:h-auto text-info-primary md-tablet:h-[360px] relative flex-1 shrink-0 md:basis-[296px]', {\n        'aiui-dark': data.theme === 'dark',\n      })}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={data?.img?.url}\n          alt={data?.img?.alt || ''}\n        />\n        <div className=\"laptop:p-6 z-1 absolute bottom-0 box-border flex w-full flex-col p-4\">\n          <Text\n            html={data?.title}\n            className=\"graphic-title lg-desktop:text-lg desktop:text-base truncate text-sm font-bold leading-[1.2]\"\n          />\n          {data?.description && (\n            <Text\n              html={data?.description}\n              className=\"graphic-title lg-desktop:text-lg desktop:text-base truncate text-sm font-bold leading-[1.2]\"\n            />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CreativeModule = (props: CreativeModuleType) => {\n  const { data, className } = props\n  const { products } = data\n\n  return (\n    <>\n      <div className=\"laptop:block box-border hidden w-full overflow-hidden\">\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {products?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'relative w-full overflow-hidden',\n                  item.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]'\n                )}\n              >\n                <Picture source={item.img.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"absolute inset-0\">\n                  <Text html={item.title} className=\"text-white\" />\n                  <Text html={item.description} className=\"text-white\" />\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full overflow-hidden\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: products || [],\n          }}\n          Slide={Item}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(CreativeModule)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgCQ,IAAAI,EAAA,6BA/BRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,CAAK,OAEjB,OAAC,OACC,aAAW,MAAG,gGAAiG,CAC7G,YAAaA,EAAK,QAAU,MAC9B,CAAC,EAED,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,KACA,QAAC,OAAI,UAAU,uEACb,oBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,8FACZ,EACCA,GAAM,gBACL,OAAC,QACC,KAAMA,GAAM,YACZ,UAAU,8FACZ,GAEJ,GACF,EACF,EAIEC,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAF,EAAM,UAAAG,CAAU,EAAID,EACtB,CAAE,SAAAE,CAAS,EAAIJ,EAErB,SACE,oBACE,oBAAC,OAAI,UAAU,wDACb,mBAAC,QAAK,aAAW,MAAG,wCAAyCG,CAAS,EACnE,SAAAC,GAAU,IAAI,CAACC,EAAMC,OAElB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,kCACAA,EAAK,QAAU,UAAY,cAAgB,eAC3C,qEACF,EAEA,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,sBAAsB,KACxF,QAAC,OAAI,UAAU,mBACb,oBAAC,QAAK,KAAMA,EAAK,MAAO,UAAU,aAAa,KAC/C,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,aAAa,GACvD,IAZKC,CAaP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6CACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBJ,CAAS,EAC5C,KAAM,CACJ,KAAMC,GAAY,CAAC,CACrB,EACA,MAAOL,EACT,EACF,GACF,CAEJ,EAEA,IAAOR,KAAQ,cAAWU,CAAc",
+  "names": ["CreativeModule_exports", "__export", "CreativeModule_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "Item", "data", "CreativeModule", "props", "className", "products", "item", "index", "SwiperBox"]
+}

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var E=Object.create;var m=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var U=(e,s)=>{for(var l in s)m(e,l,{get:s[l],enumerable:!0})},v=(e,s,l,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of I(s))!D.call(e,p)&&p!==l&&m(e,p,{get:()=>s[p],enumerable:!(r=H(s,p))||r.enumerable});return e};var f=(e,s,l)=>(l=e!=null?E(L(e)):{},v(s||!e||!e.__esModule?m(l,"default",{value:e,enumerable:!0}):l,e)),R=e=>v(m({},"__esModule",{value:!0}),e);var j={};U(j,{default:()=>z});module.exports=R(j);var t=require("react/jsx-runtime"),o=f(require("react")),d=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=f(require("../SwiperBox/index.js")),h=require("../../components/index.js"),u=require("../../components/index.js"),N=f(require("../Title/index.js")),M=require("../VideoModal/index.js"),P=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js");const b="image",g="graphic",$=({data:e,configuration:s})=>(0,t.jsx)("div",{className:(0,d.cn)((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),"laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,d.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("a",{"aria-label":e?.title??e?.description,href:(0,w.trackUrlRef)(e?.href,`${b}_${g}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,t.jsx)(u.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsx)(u.Text,{style:{color:e?.textColor},html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),(0,t.jsxs)("div",{className:"flex items-end justify-between",children:[(0,t.jsx)("div",{className:"flex-1",children:e?.description&&(0,t.jsx)(h.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})}),(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:r=>{r.preventDefault(),r.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.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:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})]}),e.buttonText&&(0,t.jsx)(h.Button,{"aria-label":e?.title??e?.description,variant:"secondary",className:"desktop:mt-[24px] mt-[12px] self-start",as:"a",href:(0,w.trackUrlRef)(e?.href,`${b}_${g}`),children:e.buttonText})]})]})})}),k=o.default.forwardRef(({data:e,className:s,...l},r)=>{const p=(0,o.useRef)(null),[V,x]=(0,o.useState)(!1),[C,B]=(0,o.useState)(""),[G,S]=(0,o.useState)(""),c=a=>{const i=e?.items?.length>3,n=e?.items?.length>2;switch(a){case 1440:return i?4:e?.items?.length;case 1024:return i?3:e?.items?.length;case 768:return i||n?2.3:2;default:return 1.2}};return(0,o.useImperativeHandle)(r,()=>p.current),(0,P.useExposure)(p,{componentType:b,componentName:g,componentTitle:e?.title}),(0,o.useEffect)(()=>{const a=p.current?.querySelectorAll(".graphic-description");if(a&&a.length>0){let i=0;a.forEach(n=>{i=Math.max(i,n.offsetHeight)}),a.forEach(n=>{n.style.height=`${i}px`})}},[]),(0,t.jsxs)("div",{className:s,ref:p,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(N.default,{data:{title:e?.title}}),(0,t.jsx)(T.default,{id:"Graphic",className:(0,d.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(a,i)=>{x(!0),i?.isYouTube?S?.(i?.youtubeId||""):B?.(i?.video?.url||"")}}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c()},768:{spaceBetween:16,freeMode:!1,slidesPerView:c(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:c(1440)}}})]}),(0,t.jsx)(M.VideoModal,{visible:V,youTubeId:G,videoUrl:C,onCloseModal:()=>x(!1)})]})});k.displayName="Graphic";var z=(0,y.withLayout)(k);
+"use strict";"use client";var E=Object.create;var d=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var U=(e,s)=>{for(var l in s)d(e,l,{get:s[l],enumerable:!0})},x=(e,s,l,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let p of I(s))!D.call(e,p)&&p!==l&&d(e,p,{get:()=>s[p],enumerable:!(r=H(s,p))||r.enumerable});return e};var f=(e,s,l)=>(l=e!=null?E(L(e)):{},x(s||!e||!e.__esModule?d(l,"default",{value:e,enumerable:!0}):l,e)),R=e=>x(d({},"__esModule",{value:!0}),e);var A={};U(A,{default:()=>z});module.exports=R(A);var t=require("react/jsx-runtime"),o=f(require("react")),c=require("../../helpers/utils.js"),y=require("../../shared/Styles.js"),T=f(require("../SwiperBox/index.js")),h=require("../../components/index.js"),u=require("../../components/index.js"),N=f(require("../Title/index.js")),M=require("../VideoModal/index.js"),P=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js");const b="image",g="graphic",$=({data:e,configuration:s})=>(0,t.jsx)("div",{className:(0,c.cn)((()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),"laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,c.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("a",{"aria-label":e?.title??e?.description,href:(0,w.trackUrlRef)(e?.href,`${b}_${g}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,t.jsx)(u.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,c.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(u.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(h.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:r=>{r.preventDefault(),r.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.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:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})]}),e.buttonText&&(0,t.jsx)(h.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"desktop:mt-[24px] mt-[12px] self-start",href:(0,w.trackUrlRef)(e?.href,`${b}_${g}`),children:e.buttonText})]})]})})}),k=o.default.forwardRef(({data:e,className:s,...l},r)=>{const p=(0,o.useRef)(null),[V,v]=(0,o.useState)(!1),[C,B]=(0,o.useState)(""),[G,S]=(0,o.useState)(""),m=a=>{const i=e?.items?.length>3,n=e?.items?.length>2;switch(a){case 1440:return i?4:e?.items?.length;case 1024:return i?3:e?.items?.length;case 768:return i||n?2.3:2;default:return 1.2}};return(0,o.useImperativeHandle)(r,()=>p.current),(0,P.useExposure)(p,{componentType:b,componentName:g,componentTitle:e?.title}),(0,o.useEffect)(()=>{const a=p.current?.querySelectorAll(".graphic-description");if(a&&a.length>0){let i=0;a.forEach(n=>{i=Math.max(i,n.offsetHeight)}),a.forEach(n=>{n.style.height=`${i}px`})}},[]),(0,t.jsxs)("div",{className:s,ref:p,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(N.default,{data:{title:e?.title}}),(0,t.jsx)(T.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(a,i)=>{v(!0),i?.isYouTube?S?.(i?.youtubeId||""):B?.(i?.video?.url||"")}}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:m()},768:{spaceBetween:16,freeMode:!1,slidesPerView:m(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:m(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:m(1440)}}})]}),(0,t.jsx)(M.VideoModal,{visible:V,youTubeId:G,videoUrl:C,onCloseModal:()=>v(!1)})]})});k.displayName="Graphic";var z=(0,y.withLayout)(k);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  buttonText?: string\n  theme?: Theme\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          aria-label={data?.title ?? data?.description}\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <Text\n              style={{\n                color: data?.textColor,\n              }}\n              html={data?.title}\n              // eslint-disable-next-line tailwindcss/classnames-order\n              className=\"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n            />\n            <div className=\"flex items-end justify-between\">\n              <div className=\"flex-1\">\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {(data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\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            {data.buttonText && (\n              <Button\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"desktop:mt-[24px] mt-[12px] self-start\"\n                as=\"a\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                }\n              },\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal visible={visible} youTubeId={youTubeId} videoUrl={videoUrl} onCloseModal={() => setVisible(false)} />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  buttonText?: string\n  theme?: Theme\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        handleAspect(),\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <a\n          aria-label={data?.title ?? data?.description}\n          href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n          className=\"relative block size-full cursor-pointer overflow-hidden\"\n        >\n          <Picture\n            className=\"h-full\"\n            imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n            source={data?.imgUrl?.url}\n            alt={data?.imgUrl?.alt || ''}\n          />\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {(data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\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            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"desktop:mt-[24px] mt-[12px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                }\n              },\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal visible={visible} youTubeId={youTubeId} videoUrl={videoUrl} onCloseModal={() => setVisible(false)} />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
   "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "e", "Graphic", "React", "className", "props", "ref", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleSwiperShow", "width", "isShow", "isMobile", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useRef, 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": "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",
+  "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": "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",
   "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "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", "Button", "ScrollLoadVideo"]
 }

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

@@ -0,0 +1,3 @@
+export declare function YouTubePlayer({ youTubeId }: {
+    youTubeId: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-"use strict";var q=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,o)=>{for(var l in o)I(a,l,{get:o[l],enumerable:!0})},R=(a,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of O(o))!F.call(a,p)&&p!==l&&I(a,p,{get:()=>o[p],enumerable:!(n=A(o,p))||n.enumerable});return a};var B=(a,o,l)=>(l=a!=null?q(Z(a)):{},R(o||!a||!a.__esModule?I(l,"default",{value:a,enumerable:!0}):l,a)),K=a=>R(I({},"__esModule",{value:!0}),a);var X={};J(X,{default:()=>W});module.exports=K(X);var e=require("react/jsx-runtime"),i=B(require("react")),j=require("react-responsive"),E=require("../../shared/Styles.js"),_=B(require("../../components/picture.js")),$=B(require("../../components/button.js")),S=require("../../components/heading.js"),H=require("../VideoModal/index.js"),N=require("../../components/gird.js"),D=B(require("../Title/index.js")),m=require("../../helpers/utils.js"),L=B(require("../SwiperBox/index.js")),z=require("../../shared/mimeType.js"),h=require("../../components/tabs.js"),Q=require("../../hooks/useExposure.js"),C=require("../../shared/trackUrlRef.js"),Y=require("../../shared/track.js");const x="image",T="p1_banner",M=({data:a,configuration:o,jIndex:l,spanType:n})=>{const[p,b]=(0,i.useState)(!1),d=(0,j.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,i.useRef)(null),P=()=>{if(n)switch(n){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,Q.useExposure)(v,{componentType:x,componentName:T,position:l,componentTitle:a.title,componentDescription:a.description,navigation:o?.activeTab}),(0,i.useEffect)(()=>{b(d)},[d]);const{theme:G="light",title:k,description:g,imageUrl:r,primaryButton:f,secondaryButton:u,imageMobileUrl:c,blockLink:y,video:w,youtubeId:t,isYouTube:s}=a,V="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,m.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",P(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":G==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:v,children:[y&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,C.trackUrlRef)(y,`${x}_${T}`),"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,z.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:r?.url,alt:r?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${r?.width}/${r?.height}`}}),(0,z.isVideo)(c?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:c?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:c?.url||r?.url,alt:c?.alt||r?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,m.cn)("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-3",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":a?.width==="full"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(S.Heading,{size:3,as:"h3",className:"item-title",html:k}),(0,e.jsx)(S.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:g})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,e.jsxs)($.default,{"aria-label":k??g,className:V,variant:"secondary",as:"a",href:(0,C.trackUrlRef)(u.link,`${x}_${T}`),children:[u.text,(0,e.jsx)("span",{className:"sr-only",children:k??g})]}),f&&f.text&&(0,e.jsx)($.default,{"aria-label":k??g,className:V,variant:"primary",as:"a",href:(0,C.trackUrlRef)(f.link,`${x}_${T}`),children:f.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(w?.url||t)&&(0,e.jsx)("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(w?.url||t,s)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},U=i.default.forwardRef((a,o)=>{const{shape:l,sectionTitle:n,groupByTab:p=!1,items:b=[],carousel:d}=a.data,[v,P]=(0,i.useState)(!1),[G,k]=(0,i.useState)(""),[g,r]=(0,i.useState)(""),f=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},u=b.map(t=>t.tabName).filter(Boolean).filter((t,s,V)=>V.indexOf(t)===s),c=(t,s)=>{P(!0),s?r?.(t||""):k?.(t||"")},y=(t,s)=>{switch(t){case 1:return 1;case 2:return 2;default:return s?2.3:3}},w=u.map(t=>({tabName:t,items:b.filter(s=>s.tabName===t)})).reduce((t,s)=>(t[s.tabName]=s.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:(0,m.cn)("text-info-primary",a.className),children:[n&&(0,e.jsx)(D.default,{data:{title:n},className:"section-title"}),p?(0,e.jsxs)(h.Tabs,{shape:l,align:"left",defaultValue:(0,m.spaceToHyphen)(u[0]),children:[(0,e.jsx)(h.TabsList,{children:u.map((t,s)=>(0,e.jsx)(h.TabsTrigger,{value:(0,m.spaceToHyphen)(t),onClick:()=>{(0,Y.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:T,component_title:n,component_position:1,navigation:t,button_name:t}})},children:t},s))}),u.map((t,s)=>(0,e.jsx)(h.TabsContent,{value:(0,m.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:w?.[t]||[],configuration:{shape:l,isTab:p,activeTab:t,num:w?.[t]?.length||0,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0)}}}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:d?.items||[],configuration:{shape:l,isTab:p,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},s))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(N.Grid,{className:"w-full",children:[b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:t.width})},`${t?.title||""}${s}`)),b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f("full"),className:"laptop:hidden block",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:"full"})},`${t?.title||""}${s}`))]}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:d?.items||[],configuration:{shape:l,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),v&&(0,e.jsx)(H.VideoModal,{visible:v,youTubeId:g,videoUrl:G,onCloseModal:()=>P(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var W=(0,E.withLayout)(U);
+"use strict";var q=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,o)=>{for(var l in o)I(a,l,{get:o[l],enumerable:!0})},R=(a,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of O(o))!F.call(a,p)&&p!==l&&I(a,p,{get:()=>o[p],enumerable:!(n=A(o,p))||n.enumerable});return a};var B=(a,o,l)=>(l=a!=null?q(Z(a)):{},R(o||!a||!a.__esModule?I(l,"default",{value:a,enumerable:!0}):l,a)),K=a=>R(I({},"__esModule",{value:!0}),a);var X={};J(X,{default:()=>W});module.exports=K(X);var e=require("react/jsx-runtime"),i=B(require("react")),j=require("react-responsive"),E=require("../../shared/Styles.js"),_=B(require("../../components/picture.js")),$=B(require("../../components/button.js")),S=require("../../components/heading.js"),H=require("../VideoModal/index.js"),N=require("../../components/gird.js"),D=B(require("../Title/index.js")),m=require("../../helpers/utils.js"),L=B(require("../SwiperBox/index.js")),z=require("../../shared/mimeType.js"),h=require("../../components/tabs.js"),Q=require("../../hooks/useExposure.js"),C=require("../../shared/trackUrlRef.js"),Y=require("../../shared/track.js");const x="image",T="p1_banner",M=({data:a,configuration:o,jIndex:l,spanType:n})=>{const[p,b]=(0,i.useState)(!1),d=(0,j.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,i.useRef)(null),P=()=>{if(n)switch(n){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,Q.useExposure)(v,{componentType:x,componentName:T,position:l,componentTitle:a.title,componentDescription:a.description,navigation:o?.activeTab}),(0,i.useEffect)(()=>{b(d)},[d]);const{theme:G="light",title:k,description:g,imageUrl:r,primaryButton:f,secondaryButton:u,imageMobileUrl:c,blockLink:y,video:w,youtubeId:t,isYouTube:s}=a,V="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,m.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",P(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":G==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:v,children:[y&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,C.trackUrlRef)(y,`${x}_${T}`),"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,z.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:r?.url,alt:r?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${r?.width}/${r?.height}`}}),(0,z.isVideo)(c?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:c?.url,type:"video/mp4"})}):(0,e.jsx)(_.default,{source:c?.url||r?.url,alt:c?.alt||r?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,m.cn)("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":a?.width==="full"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(S.Heading,{size:3,as:"h3",className:"item-title",html:k}),(0,e.jsx)(S.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:g})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,e.jsxs)($.default,{"aria-label":k??g,className:V,variant:"secondary",as:"a",href:(0,C.trackUrlRef)(u.link,`${x}_${T}`),children:[u.text,(0,e.jsx)("span",{className:"sr-only",children:k??g})]}),f&&f.text&&(0,e.jsx)($.default,{"aria-label":k??g,className:V,variant:"primary",as:"a",href:(0,C.trackUrlRef)(f.link,`${x}_${T}`),children:f.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(w?.url||t)&&(0,e.jsx)("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(w?.url||t,s)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},U=i.default.forwardRef((a,o)=>{const{shape:l,sectionTitle:n,groupByTab:p=!1,items:b=[],carousel:d}=a.data,[v,P]=(0,i.useState)(!1),[G,k]=(0,i.useState)(""),[g,r]=(0,i.useState)(""),f=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},u=b.map(t=>t.tabName).filter(Boolean).filter((t,s,V)=>V.indexOf(t)===s),c=(t,s)=>{P(!0),s?r?.(t||""):k?.(t||"")},y=(t,s)=>{switch(t){case 1:return 1;case 2:return 2;default:return s?2.3:3}},w=u.map(t=>({tabName:t,items:b.filter(s=>s.tabName===t)})).reduce((t,s)=>(t[s.tabName]=s.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:(0,m.cn)("text-info-primary",a.className),children:[n&&(0,e.jsx)(D.default,{data:{title:n},className:"section-title"}),p?(0,e.jsxs)(h.Tabs,{shape:l,align:"left",defaultValue:(0,m.spaceToHyphen)(u[0]),children:[(0,e.jsx)(h.TabsList,{children:u.map((t,s)=>(0,e.jsx)(h.TabsTrigger,{value:(0,m.spaceToHyphen)(t),onClick:()=>{(0,Y.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:T,component_title:n,component_position:1,navigation:t,button_name:t}})},children:t},s))}),u.map((t,s)=>(0,e.jsx)(h.TabsContent,{value:(0,m.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:w?.[t]||[],configuration:{shape:l,isTab:p,activeTab:t,num:w?.[t]?.length||0,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:y(w?.[t]?.length||0)}}}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:d?.items||[],configuration:{shape:l,isTab:p,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},s))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(N.Grid,{className:"w-full",children:[b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:t.width})},`${t?.title||""}${s}`)),b.map((t,s)=>(0,e.jsx)(N.GridItem,{span:f("full"),className:"laptop:hidden block",children:(0,e.jsx)(M,{data:t,configuration:{shape:l,onVideoPlayBtnClick:c},jIndex:s,spanType:"full"})},`${t?.title||""}${s}`))]}),d&&d?.items.length>0?(0,e.jsx)(L.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:d?.items||[],configuration:{shape:l,onVideoPlayBtnClick:c}},Slide:M,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),v&&(0,e.jsx)(H.VideoModal,{visible:v,youTubeId:g,videoUrl:G,onCloseModal:()=>P(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var W=(0,E.withLayout)(U);
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-3',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div>\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\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    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: { shape: shape, isTab: groupByTab, onVideoPlayBtnClick: handleVideoPlayBtnClick },\n                    }}\n                    Slide={ItemBlock}\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: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick }}\n                    jIndex={index}\n                    spanType={item.width}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick },\n              }}\n              Slide={ItemBlock}\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: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[480px]': isMobile && !configuration?.isTab,\n          'h-[400px]': isMobile && configuration?.isTab,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div>\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\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    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\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: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: { shape: shape, isTab: groupByTab, onVideoPlayBtnClick: handleVideoPlayBtnClick },\n                    }}\n                    Slide={ItemBlock}\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: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick }}\n                    jIndex={index}\n                    spanType={item.width}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick },\n              }}\n              Slide={ItemBlock}\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: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
   "mappings": "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",
   "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
 }

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SectionHeadingProps } from './types.js';
+declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeading;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface SectionHeadingProps {
+    title: string;
+    className?: string;
+    children: React.ReactNode;
+}

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

@@ -0,0 +1,8 @@
+import type { ShelfProps } from './types.js';
+declare const _default: {
+    (props: Omit<ShelfProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps> & {
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;

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

@@ -0,0 +1 @@
+export { default } from './Shelf.js';

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

@@ -0,0 +1,6 @@
+export type ShelfProps = {
+    id: string;
+    title: string;
+    subtitle: string;
+    products: any[];
+};

package/dist/cjs/biz-components/ShelfDisplay/tab.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TabsProps {
+    tabs: any[];
+    onTabClick?: (value: any) => void;
+}
+declare const Tab: React.FC<TabsProps>;
+export default Tab;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var N=Object.create;var l=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var j=(t,r)=>{for(var e in r)l(t,e,{get:r[e],enumerable:!0})},T=(t,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of D(r))!$.call(t,o)&&o!==e&&l(t,o,{get:()=>r[o],enumerable:!(i=C(r,o))||i.enumerable});return t};var q=(t,r,e)=>(e=t!=null?N(U(t)):{},T(r||!t||!t.__esModule?l(e,"default",{value:t,enumerable:!0}):e,t)),A=t=>T(l({},"__esModule",{value:!0}),t);var F={};j(F,{default:()=>B});module.exports=A(F);var g=require("react/jsx-runtime"),n=q(require("react")),c=require("gsap"),u=require("gsap/dist/SplitText"),f=require("gsap/dist/ScrollTrigger"),b=require("../../helpers/utils.js"),R=require("../../components/index.js"),v=require("../../shared/Styles.js"),x=require("react-intersection-observer");const y=n.default.forwardRef(({data:t,className:r})=>{const{title:e,theme:i}=t,o=(0,n.useRef)(null),s=(0,n.useRef)(null),a=(0,n.useRef)(null),{ref:H,inView:d}=(0,x.useInView)();return(0,n.useEffect)(()=>{c.gsap.registerPlugin(u.SplitText,f.ScrollTrigger);function E(){if(!o.current)return;const M=o.current?.clientHeight||80;s.current=new u.SplitText(o.current,{type:"words",wordsClass:"word"});const m=s.current.words;c.gsap.set(m,{opacity:0}),a.current=f.ScrollTrigger.create({trigger:o.current,start:"bottom bottom-=4%",end:`bottom+=${M*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:S=>{const k=S.progress,h=m.length,L=1/h,w=.5;m.forEach((P,V)=>{const z=V/h*(1-w),I=L*(1+w);let p=(k-z)/I;p=Math.max(0,Math.min(p,1)),c.gsap.set(P,{opacity:p})})}})}return d&&E(),()=>{s.current&&s.current.revert(),a.current&&a.current.kill()}},[d]),e&&(0,g.jsx)("div",{ref:H,className:(0,b.cn)("mb-[24px] space-y-4",r,{"aiui-dark":i==="dark"}),children:(0,g.jsx)(R.Heading,{ref:o,as:"h2",size:4,html:e})})});y.displayName="Title";var B=(0,v.withLayout)(y);
+"use strict";"use client";var I=Object.create;var c=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var _=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},y=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of j(e))!F.call(t,n)&&n!==r&&c(t,n,{get:()=>e[n],enumerable:!(s=U(e,n))||s.enumerable});return t};var q=(t,e,r)=>(r=t!=null?I(C(t)):{},y(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),A=t=>y(c({},"__esModule",{value:!0}),t);var K={};_(K,{default:()=>J});module.exports=A(K);var i=require("react/jsx-runtime"),o=q(require("react")),m=require("gsap"),d=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),h=require("../../helpers/utils.js"),b=require("../../components/index.js"),v=require("../../shared/Styles.js"),R=require("../../shared/trackUrlRef.js"),H=require("react-intersection-observer");const B="link",G="title",k=o.default.forwardRef(({data:t,className:e})=>{const{title:r,theme:s,extension:n}=t,l=(0,o.useRef)(null),a=(0,o.useRef)(null),p=(0,o.useRef)(null),{ref:L,inView:w}=(0,H.useInView)();return(0,o.useEffect)(()=>{m.gsap.registerPlugin(d.SplitText,g.ScrollTrigger);function N(){if(!l.current)return;const E=l.current?.clientHeight||80;a.current=new d.SplitText(l.current,{type:"words",wordsClass:"word"});const u=a.current.words;m.gsap.set(u,{opacity:0}),p.current=g.ScrollTrigger.create({trigger:l.current,start:"bottom bottom-=4%",end:`bottom+=${E*1.5+60}px bottom-=4%`,scrub:!0,onUpdate:M=>{const S=M.progress,T=u.length,D=1/T,x=.5;u.forEach((P,V)=>{const $=V/T*(1-x),z=D*(1+x);let f=(S-$)/z;f=Math.max(0,Math.min(f,1)),m.gsap.set(P,{opacity:f})})}})}return w&&N(),()=>{a.current&&a.current.revert(),p.current&&p.current.kill()}},[w]),r&&(0,i.jsxs)("div",{className:"mb-6 flex items-end justify-between",children:[(0,i.jsx)("div",{ref:L,className:(0,h.cn)("space-y-4",e,{"aiui-dark":s==="dark"}),children:(0,i.jsx)(b.Heading,{ref:l,as:"h2",size:4,html:r})}),n?.textLink&&(0,i.jsx)("a",{className:(0,h.cn)({"aiui-dark":s==="dark"},"text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]"),href:(0,R.trackUrlRef)(n?.link,`${B}_${G}`),children:n?.textLink})]})});k.displayName="Title";var J=(0,v.withLayout)(k);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Title/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n  const { title, theme } = data\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.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: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\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        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    title && (\n      <div ref={inViewRef} className={cn('mb-[24px] space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n        <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEQ,IAAAI,EAAA,6BAhERC,EAAyC,oBACzCC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA0B,uCAE1B,MAAMC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,CAAM,EAAIH,EACnBI,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAEpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EAE7C,sBAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASC,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxC,OAAK,IAAIM,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,EAGTN,MACE,OAAC,OAAI,IAAKK,EAAW,aAAW,MAAG,sBAAuBN,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EACpG,mBAAC,WAAQ,IAAKC,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMF,EAAO,EACxD,CAGN,CAAC,EAEDJ,EAAM,YAAc,QAEpB,IAAOX,KAAQ,cAAWW,CAAK",
-  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_react_intersection_observer", "Title", "React", "data", "className", "title", "theme", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity"]
+  "sourcesContent": ["'use client'\nimport React, { useEffect, useRef } from 'react'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { Heading } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { TitleProps } from './types.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useInView } from 'react-intersection-observer'\n\nconst componentType = 'link'\nconst componentName = 'title'\n\nconst Title = React.forwardRef<HTMLDivElement, TitleProps>(({ data, className }) => {\n  const { title, theme, extension } = data\n  const titleRef = useRef<HTMLHeadingElement>(null)\n  const splitTextInstance = useRef<SplitText | null>(null)\n  const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n\n  const { ref: inViewRef, inView } = useInView()\n\n  useEffect(() => {\n    gsap.registerPlugin(SplitText, ScrollTrigger)\n    function gsapResize() {\n      if (!titleRef.current) return\n      const height = titleRef.current?.clientHeight || 80\n      splitTextInstance.current = new SplitText(titleRef.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: 'bottom bottom-=4%',\n        end: `bottom+=${height * 1.5 + 60}px bottom-=4%`,\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        },\n      })\n    }\n\n    if (inView) {\n      gsapResize()\n    }\n\n    return () => {\n      splitTextInstance.current && splitTextInstance.current.revert()\n      // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n      scrollTriggerRef.current && scrollTriggerRef.current.kill()\n    }\n  }, [inView])\n\n  return (\n    title && (\n      <div className=\"mb-6 flex items-end justify-between\">\n        <div ref={inViewRef} className={cn('space-y-4', className, { 'aiui-dark': theme === 'dark' })}>\n          <Heading ref={titleRef} as=\"h2\" size={4} html={title} />\n        </div>\n        {extension?.textLink && (\n          <a\n            className={cn(\n              { 'aiui-dark': theme === 'dark' },\n              'text-base font-[700] leading-[1.4] text-[#777] transition-all duration-[0.4s] hover:text-[#1D1D1F]'\n            )}\n            href={trackUrlRef(extension?.link, `${componentType}_${componentName}`)}\n          >\n            {extension?.textLink}\n          </a>\n        )}\n      </div>\n    )\n  )\n})\n\nTitle.displayName = 'Title'\n\nexport default withLayout(Title)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoEM,IAAAI,EAAA,6BAnENC,EAAyC,oBACzCC,EAAqB,gBACrBC,EAA0B,+BAC1BC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAAwB,qCACxBC,EAA2B,kCAE3BC,EAA4B,uCAC5BC,EAA0B,uCAE1B,MAAMC,EAAgB,OAChBC,EAAgB,QAEhBC,EAAQ,EAAAC,QAAM,WAAuC,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,IAAM,CAClF,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,CAAU,EAAIJ,EAC9BK,KAAW,UAA2B,IAAI,EAC1CC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EAEpD,CAAE,IAAKC,EAAW,OAAAC,CAAO,KAAI,aAAU,EAE7C,sBAAU,IAAM,CACd,OAAK,eAAe,YAAW,eAAa,EAC5C,SAASC,GAAa,CACpB,GAAI,CAACL,EAAS,QAAS,OACvB,MAAMM,EAASN,EAAS,SAAS,cAAgB,GACjDC,EAAkB,QAAU,IAAI,YAAUD,EAAS,QAAS,CAC1D,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMO,EAAQN,EAAkB,QAAQ,MACxC,OAAK,IAAIM,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9BL,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASF,EAAS,QAClB,MAAO,oBACP,IAAK,WAAWM,EAAS,IAAM,EAAE,gBACjC,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,EAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,EAAWC,IAAc,CACtC,MAAMC,EAASD,EAAIJ,GAAU,EAAIE,GAC3BI,EAAQL,GAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,GAASC,EACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,EAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,CACH,CACF,CAAC,CACH,CAEA,OAAIb,GACFC,EAAW,EAGN,IAAM,CACXJ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAACE,CAAM,CAAC,EAGTP,MACE,QAAC,OAAI,UAAU,sCACb,oBAAC,OAAI,IAAKM,EAAW,aAAW,MAAG,YAAaP,EAAW,CAAE,YAAaE,IAAU,MAAO,CAAC,EAC1F,mBAAC,WAAQ,IAAKE,EAAU,GAAG,KAAK,KAAM,EAAG,KAAMH,EAAO,EACxD,EACCE,GAAW,aACV,OAAC,KACC,aAAW,MACT,CAAE,YAAaD,IAAU,MAAO,EAChC,oGACF,EACA,QAAM,eAAYC,GAAW,KAAM,GAAGR,CAAa,IAAIC,CAAa,EAAE,EAErE,SAAAO,GAAW,SACd,GAEJ,CAGN,CAAC,EAEDN,EAAM,YAAc,QAEpB,IAAOd,KAAQ,cAAWc,CAAK",
+  "names": ["Title_exports", "__export", "Title_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_SplitText", "import_ScrollTrigger", "import_utils", "import_components", "import_Styles", "import_trackUrlRef", "import_react_intersection_observer", "componentType", "componentName", "Title", "React", "data", "className", "title", "theme", "extension", "titleRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity"]
 }