@anker-in/headless-ui 0.0.32 → 0.0.34

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          loading=\"eager\"\n          fetchPriority=\"high\"\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={2}\n                className={cn(\n                  'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n  const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n  const bgRef = useRef<HTMLImageElement>(null)\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  useGSAP(() => {\n    gsap.registerPlugin(ScrollTrigger)\n    if (!bgRef.current) return\n    const clientHeight = boxRef.current?.clientHeight || 100\n    const screenHeight = window.innerHeight\n\n    if (screenHeight <= clientHeight) {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 40\n          const value = self.progress * base - base / 2\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    } else {\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top bottom',\n        end: 'bottom bottom',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base - base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n      ScrollTrigger.create({\n        trigger: boxRef.current,\n        start: 'top top',\n        end: 'bottom top',\n        scrub: true,\n        onUpdate: (self: any) => {\n          const base = 20\n          const value = self.progress * base\n          gsap.set(bgRef.current, { yPercent: value })\n        },\n      })\n    }\n    return () => {\n      ScrollTrigger.getAll().forEach((t: any) => t.kill())\n    }\n  }, [])\n\n  return (\n    <div\n      ref={boxRef}\n      data-ui-component-id=\"HeroBanner\"\n      className={cn(\n        theme === 'dark' ? 'aiui-dark' : '',\n        'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n        className\n      )}\n    >\n      <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n        <Picture\n          className=\"laptop:w-full h-full\"\n          imgClassName=\"h-full object-cover\"\n          loading=\"eager\"\n          fetchPriority=\"high\"\n          alt={pcImage?.alt || ''}\n          source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n        />\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n        <div className=\"laptop:text-left max-w-[686px]\">\n          {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n          {subtitle && (\n            <Text\n              as=\"p\"\n              size={3}\n              className={cn(\n                'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-[16px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n              )}\n              html={subtitle}\n            />\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n          {secondaryButton && secondaryButton.text && (\n            <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n                {secondaryButton.text}\n              </Button>\n            </a>\n          )}\n          {primaryButton && primaryButton.text && (\n            <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n              <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n                {primaryButton.text}\n              </Button>\n            </a>\n          )}\n        </div>\n      </div>\n\n      {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n      {caption.length > 0 && (\n        <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n          {caption.map((c, index) => (\n            <React.Fragment key={index}>\n              <Text\n                size={2}\n                className={cn(\n                  'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n                )}\n                html={c.title}\n              />\n              {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n            </React.Fragment>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
+  "mappings": "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",
   "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "c", "index"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var T=Object.create;var r=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var S=(e,l)=>{for(var o in l)r(e,o,{get:l[o],enumerable:!0})},u=(e,l,o,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of z(l))!j.call(e,i)&&i!==o&&r(e,i,{get:()=>l[i],enumerable:!(s=_(l,i))||s.enumerable});return e};var h=(e,l,o)=>(o=e!=null?T(D(e)):{},u(l||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>u(r({},"__esModule",{value:!0}),e);var Z={};S(Z,{default:()=>U});module.exports=H(Z);var t=require("react/jsx-runtime"),a=require("react"),v=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),g=require("../../components/index.js"),p=require("../../components/dialog.js"),b=h(require("../Title/index.js")),y=h(require("../SwiperBox/index.js")),k=require("../../components/container.js"),M=require("@payloadcms/richtext-lexical/html"),N=require("../../hooks/useExposure.js");const q="video",E="media_player_multi",I=({data:e,configuration:l})=>(0,t.jsxs)("div",{className:(0,v.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[(0,t.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,t.jsx)(g.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,t.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e?.video?.url&&(0,t.jsx)("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(e?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},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"})})})})]}),(0,t.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,t.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),R=(0,a.forwardRef)(({data:{items:e=[],shape:l="square",title:o,containerProps:s},className:i="",key:P,onVideoPlayBtnClick:C},B)=>{const[m,n]=(0,a.useState)(!1),[V,d]=(0,a.useState)(""),c=typeof o=="string"?o:o&&(0,M.convertLexicalToHTML)({data:o}),f=(0,a.useRef)(null);(0,N.useExposure)(f,{componentType:q,componentName:E,componentTitle:c});const x=e.length;return(0,t.jsxs)("div",{className:i,ref:f,children:[(0,t.jsx)("div",{className:"mediaplayermulti-box",children:(0,t.jsx)(k.Container,{...s||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{className:i,ref:B,children:[o&&(0,t.jsx)(b.default,{className:"mediaplayermulti-title",data:{title:c||""}}),(0,t.jsx)(y.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+P,data:{list:e,configuration:{shape:l,onVideoPlayBtnClick:C,setVisible:n,setVideoUrl:d}},Slide:I,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:x===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:x===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,t.jsx)(p.Dialog,{open:m,onOpenChange:L=>{n(L),d("")},children:(0,t.jsxs)(p.DialogContent,{className:"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[m?(0,t.jsx)("video",{className:"size-full object-cover",src:V,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,t.jsx)("div",{onClick:()=>{n(!1),d("")},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,t.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=(0,w.withStyles)(R);
+"use strict";"use client";var T=Object.create;var r=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var S=(e,l)=>{for(var o in l)r(e,o,{get:l[o],enumerable:!0})},h=(e,l,o,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of z(l))!j.call(e,i)&&i!==o&&r(e,i,{get:()=>l[i],enumerable:!(s=_(l,i))||s.enumerable});return e};var v=(e,l,o)=>(o=e!=null?T(D(e)):{},h(l||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>h(r({},"__esModule",{value:!0}),e);var Z={};S(Z,{default:()=>U});module.exports=H(Z);var t=require("react/jsx-runtime"),a=require("react"),w=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),n=require("../../components/index.js"),p=require("../../components/dialog.js"),b=v(require("../Title/index.js")),k=v(require("../SwiperBox/index.js")),y=require("../../components/container.js"),M=require("@payloadcms/richtext-lexical/html"),N=require("../../hooks/useExposure.js");const q="video",E="media_player_multi",I=({data:e,configuration:l})=>(0,t.jsxs)("div",{className:(0,w.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[(0,t.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,t.jsx)(n.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,t.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e?.video?.url&&(0,t.jsx)("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(e?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},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"})})})})]}),(0,t.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,t.jsx)(n.Link,{href:e?.href,className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,t.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),R=(0,a.forwardRef)(({data:{items:e=[],shape:l="square",title:o,containerProps:s},className:i="",key:P,onVideoPlayBtnClick:C},B)=>{const[c,d]=(0,a.useState)(!1),[L,m]=(0,a.useState)(""),f=typeof o=="string"?o:o&&(0,M.convertLexicalToHTML)({data:o}),x=(0,a.useRef)(null);(0,N.useExposure)(x,{componentType:q,componentName:E,componentTitle:f});const u=e.length;return(0,t.jsxs)("div",{className:i,ref:x,children:[(0,t.jsx)("div",{className:"mediaplayermulti-box",children:(0,t.jsx)(y.Container,{...s||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{className:i,ref:B,children:[o&&(0,t.jsx)(b.default,{className:"mediaplayermulti-title",data:{title:f||""}}),(0,t.jsx)(k.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+P,data:{list:e,configuration:{shape:l,onVideoPlayBtnClick:C,setVisible:d,setVideoUrl:m}},Slide:I,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:u===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:u===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,t.jsx)(p.Dialog,{open:c,onOpenChange:V=>{d(V),m("")},children:(0,t.jsxs)(p.DialogContent,{className:"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[c?(0,t.jsx)("video",{className:"size-full object-cover",src:L,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,t.jsx)("div",{onClick:()=>{d(!1),m("")},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,t.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=(0,g.withStyles)(R);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data?.video?.url && (\n            <button\n              onClick={() => {\n                configuration?.setVisible?.(true)\n                configuration?.setVideoUrl?.(data?.video?.url)\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <p className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n              {data.quote}\n            </p>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.1,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        <Dialog\n          open={visible}\n          onOpenChange={(flag: boolean) => {\n            setVisible(flag)\n            setVideoUrl('')\n          }}\n        >\n          <DialogContent className=\"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n            {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n            <div\n              onClick={() => {\n                setVisible(false)\n                setVideoUrl('')\n              }}\n              className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                data-slot=\"icon\"\n                className=\"HomeCharger_closeWrap__Z7aBo\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n              </svg>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'laptop:max-w-full w-full overflow-hidden',\n        'laptop:flex-row flex shrink-0 flex-col',\n        'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n        configuration.shape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n        <Picture\n          source={data.img?.url}\n          alt={data.img?.alt || ''}\n          className=\"size-full\"\n          imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n        />\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {data?.video?.url && (\n            <button\n              onClick={() => {\n                configuration?.setVisible?.(true)\n                configuration?.setVideoUrl?.(data?.video?.url)\n                configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n        <div className=\"flex flex-col\">\n          <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n            {data.title}\n          </h3>\n          {data.quote && (\n            <Link\n              href={data?.href}\n              className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n            >\n              {data.quote}\n            </Link>\n          )}\n        </div>\n\n        <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n          {data.description}\n        </p>\n      </div>\n    </div>\n  )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n  (\n    { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n    ref\n  ) => {\n    const [visible, setVisible] = useState<boolean>(false)\n    const [videoUrl, setVideoUrl] = useState<string>('')\n    const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n    const wrapperRef = useRef<HTMLDivElement>(null)\n\n    useExposure(wrapperRef, {\n      componentType,\n      componentName,\n      componentTitle: title_html,\n    })\n\n    // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n    const itemsLength = items.length\n\n    return (\n      <div className={className} ref={wrapperRef}>\n        <div className=\"mediaplayermulti-box\">\n          <Container {...(containerProps || {})} className=\"overflow-hidden\">\n            <div className={className} ref={ref}>\n              {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n              <SwiperBox\n                className=\"!overflow-visible\"\n                id={'MediaPlayerMultiSwiper' + key}\n                data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n                Slide={MediaPlayerItem}\n                breakpoints={{\n                  0: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1,\n                  },\n                  374: {\n                    spaceBetween: 12,\n                    freeMode: false,\n                    slidesPerView: 1.1,\n                  },\n                  768: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 2.3,\n                  },\n                  1024: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: itemsLength === 2 ? 2 : 1.5,\n                  },\n                  1440: {\n                    spaceBetween: 16,\n                    freeMode: false,\n                    slidesPerView: 2,\n                  },\n                }}\n              />\n            </div>\n          </Container>\n        </div>\n        <Dialog\n          open={visible}\n          onOpenChange={(flag: boolean) => {\n            setVisible(flag)\n            setVideoUrl('')\n          }}\n        >\n          <DialogContent className=\"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n            {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n            <div\n              onClick={() => {\n                setVisible(false)\n                setVideoUrl('')\n              }}\n              className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke-width=\"1.5\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n                data-slot=\"icon\"\n                className=\"HomeCharger_closeWrap__Z7aBo\"\n              >\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n              </svg>\n            </div>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
+  "mappings": "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",
   "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_dialog", "import_Title", "import_SwiperBox", "import_container", "import_html", "import_useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "itemsLength", "Title", "SwiperBox", "flag"]
 }

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

@@ -6,6 +6,7 @@ export interface MediaPlayerItemProps {
     img: Img;
     video?: Video;
     quote?: string;
+    href?: string;
 }
 export interface MediaPlayerMultiProps extends ComponentCommonProps {
     data: {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
-  "sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n  title: string\n  name: string\n  description: string\n  img: Img\n  video?: Video\n  quote?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n  data: {\n    title?: string\n    shape?: 'round' | 'square'\n    items: MediaPlayerItemProps[]\n    containerProps?: ContainerProps\n  }\n  onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
+  "sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n  title: string\n  name: string\n  description: string\n  img: Img\n  video?: Video\n  quote?: string\n  href?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n  data: {\n    title?: string\n    shape?: 'round' | 'square'\n    items: MediaPlayerItemProps[]\n    containerProps?: ContainerProps\n  }\n  onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";var j=Object.create;var v=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Q=(s,o)=>{for(var l in o)v(s,l,{get:o[l],enumerable:!0})},V=(s,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of z(o))!U.call(s,i)&&i!==l&&v(s,i,{get:()=>o[i],enumerable:!(p=H(o,i))||p.enumerable});return s};var h=(s,o,l)=>(l=s!=null?j(D(s)):{},V(o||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),q=s=>V(v({},"__esModule",{value:!0}),s);var F={};Q(F,{default:()=>O});module.exports=q(F);var t=require("react/jsx-runtime"),n=h(require("react")),G=require("react-responsive"),I=require("../../shared/Styles.js"),M=h(require("../../components/picture.js")),T=h(require("../../components/button.js")),L=require("../../components/heading.js"),_=require("../../components/text.js"),k=require("../../components/gird.js"),$=h(require("../Title/index.js")),S=require("../../helpers/utils.js"),B=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),R=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js");const x="image",y="p1_banner",w=({data:s,configuration:o,jIndex:l})=>{const[p,i]=(0,n.useState)(!1),d=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,n.useRef)(null),g=()=>{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]";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,R.useExposure)(r,{componentType:x,componentName:y,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,n.useEffect)(()=>{i(d)},[d]);const{theme:m="light",title:b,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:E}=s,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,S.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?g():"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]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:r,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(M.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(M.default,{source:E?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(L.Heading,{size:3,className:"item-title",html:b}),(0,t.jsx)(_.Text,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] text-[14px]",html:f})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(u.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(a.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"primary",children:a.text})})]})]})]})})},A=n.default.forwardRef((s,o)=>{const{shape:l,sectionTitle:p,groupByTab:i=!1,items:d=[],carousel:r}=s.data,g=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),b=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&(0,t.jsx)($.default,{data:{title:p},className:"section-title"}),i?(0,t.jsxs)(c.Tabs,{shape:l,align:"left",defaultValue:m[0],children:[(0,t.jsx)(c.TabsList,{children:m.map((e,a)=>(0,t.jsx)(c.TabsTrigger,{value:e,onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:y,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(c.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:l,isTab:i,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:l,isTab:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(k.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var O=(0,I.withStyles)(A);
+"use strict";var H=Object.create;var x=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var q=(s,o)=>{for(var l in o)x(s,l,{get:o[l],enumerable:!0})},I=(s,o,l,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of D(o))!Q.call(s,p)&&p!==l&&x(s,p,{get:()=>o[p],enumerable:!(i=z(o,p))||i.enumerable});return s};var w=(s,o,l)=>(l=s!=null?H(U(s)):{},I(o||!s||!s.__esModule?x(l,"default",{value:s,enumerable:!0}):l,s)),A=s=>I(x({},"__esModule",{value:!0}),s);var J={};q(J,{default:()=>F});module.exports=A(J);var t=require("react/jsx-runtime"),c=w(require("react")),L=require("react-responsive"),_=require("../../shared/Styles.js"),T=w(require("../../components/picture.js")),N=w(require("../../components/button.js")),$=require("../../components/heading.js"),S=require("../../components/text.js"),g=require("../../components/gird.js"),R=w(require("../Title/index.js")),C=require("../../helpers/utils.js"),M=w(require("../SwiperBox/index.js")),n=require("../../components/tabs.js"),E=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js"),j=require("../../shared/track.js");const y="image",B="p1_banner",k=({data:s,configuration:o,jIndex:l,spanType:i})=>{const[p,d]=(0,c.useState)(!1),r=(0,L.useMediaQuery)({query:"(max-width: 768px)"}),h=(0,c.useRef)(null),m=()=>{if(i)switch(i){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]";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]";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,E.useExposure)(h,{componentType:y,componentName:B,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,c.useEffect)(()=>{d(r)},[r]);const{theme:b="light",title:f,description:e,imageUrl:a,primaryButton:u,secondaryButton:v,imageMobileUrl:V}=s,G="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,C.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":b==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:h,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(T.default,{source:a?.url,alt:a?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${a?.width}/${a?.height}`}}),(0,t.jsx)(T.default,{source:V?.url||a?.url,alt:V?.alt||a?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)($.Heading,{size:3,className:"item-title",html:f}),(0,t.jsx)(S.Text,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[v&&v.text&&(0,t.jsx)("a",{href:(0,P.trackUrlRef)(v.link,`${y}_${B}`),children:(0,t.jsx)(N.default,{className:G,variant:"secondary",children:v.text})}),u&&u.text&&(0,t.jsx)("a",{href:(0,P.trackUrlRef)(u.link,`${y}_${B}`),children:(0,t.jsx)(N.default,{className:G,variant:"primary",children:u.text})})]})]})]})})},O=c.default.forwardRef((s,o)=>{const{shape:l,sectionTitle:i,groupByTab:p=!1,items:d=[],carousel:r}=s.data,h=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),b=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[i&&(0,t.jsx)(R.default,{data:{title:i},className:"section-title"}),p?(0,t.jsxs)(n.Tabs,{shape:l,align:"left",defaultValue:m[0],children:[(0,t.jsx)(n.TabsList,{children:m.map((e,a)=>(0,t.jsx)(n.TabsTrigger,{value:e,onClick:()=>{(0,j.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:y,component_name:B,component_title:i,component_position:1,navigation:e,button_name:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(n.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:l,isTab:p,activeTab:e,num:f?.[e]?.length||0}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:l,isTab:p}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(g.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(g.GridItem,{span:h(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(k,{data:e,configuration:{shape:l},jIndex:a,spanType:e.width})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(g.GridItem,{span:h("full"),className:"laptop:hidden block",children:(0,t.jsx)(k,{data:e,configuration:{shape:l},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:l}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var F=(0,_.withStyles)(O);
 //# 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 { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.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 = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n  const [isMobile, setIsMobile] = useState(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\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-[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      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  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 { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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        configuration?.isTab\n          ? handleAspect()\n          : '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        {\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      <div className=\"absolute inset-0\">\n        <Picture\n          source={imageUrl?.url}\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        <Picture\n          source={imageMobileUrl?.url || imageUrl?.url}\n          className=\"tablet:hidden block h-full overflow-hidden\"\n          imgClassName=\"h-full transition-all duration-300 object-cover\"\n        />\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n          <div>\n            <Heading size={3} className=\"item-title\" html={title} />\n            <Text\n              size={2}\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"secondary\">\n                  {secondaryButton.text}\n                </Button>\n              </a>\n            )}\n            {primaryButton && primaryButton.text && (\n              <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"primary\">\n                  {primaryButton.text}\n                </Button>\n              </a>\n            )}\n          </div>\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\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 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 data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={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={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                    },\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.1,\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={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\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.1,\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              <GridItem\n                key={`${item?.title || ''}${index}`}\n                span={getSpan(item.width ?? 'full')}\n                className=\"laptop:block hidden\"\n              >\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            // <Carousel className=\"laptop:mt-4 mt-3\">\n            //   <CarouselContent className=\"flex\">\n            //     {carousel.items.map((item, index) => (\n            //       <CarouselItem\n            //         key={`${item?.title || ''}${index}`}\n            //         className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n            //       >\n            //         <ItemBlock item={item} shape={shape} />\n            //       </CarouselItem>\n            //     ))}\n            //   </CarouselContent>\n            // </Carousel>\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{ list: carousel?.items || [], configuration: { shape: shape } }}\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.1,\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    </section>\n  )\n})\n\nexport default withStyles(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_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.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        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        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 { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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      <div className=\"absolute inset-0\">\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        <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        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n          <div>\n            <Heading size={3} className=\"item-title\" html={title} />\n            <Text\n              size={2}\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              <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"secondary\">\n                  {secondaryButton.text}\n                </Button>\n              </a>\n            )}\n            {primaryButton && primaryButton.text && (\n              <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n                <Button className={lgButtonSize} variant=\"primary\">\n                  {primaryButton.text}\n                </Button>\n              </a>\n            )}\n          </div>\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\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 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 data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={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={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                    },\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.1,\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={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\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.1,\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 data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            // <Carousel className=\"laptop:mt-4 mt-3\">\n            //   <CarouselContent className=\"flex\">\n            //     {carousel.items.map((item, index) => (\n            //       <CarouselItem\n            //         key={`${item?.title || ''}${index}`}\n            //         className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n            //       >\n            //         <ItemBlock item={item} shape={shape} />\n            //       </CarouselItem>\n            //     ))}\n            //   </CarouselContent>\n            // </Carousel>\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{ list: carousel?.items || [], configuration: { shape: shape } }}\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.1,\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    </section>\n  )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0FQ,IAAAI,EAAA,6BA1FRC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAA+B,oCAC/BC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAsB,oCACtBC,EAAyD,oCACzDC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAAwB,iCAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,CACF,IAKM,CACJ,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAkB,EAAK,EACjDC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,GAAIL,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,KAEA,eAAYM,EAAK,CACf,cAAeV,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdI,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CAAE,MAAAG,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,EAAiB,eAAAC,CAAe,EAAIf,EACpGgB,EAAe,mFAErB,SACE,OAAC,OACC,aAAW,MACT,kFACAR,EAAa,EACb,CACE,cAAeP,GAAe,QAAU,UACxC,YAAaQ,IAAU,OACvB,YAAaL,GAAY,CAACH,GAAe,MACzC,YAAaG,GAAYH,GAAe,KAC1C,EACA,mBACF,EACA,IAAKM,EAEL,oBAAC,OAAI,UAAU,mBACb,oBAAC,EAAAU,QAAA,CACC,OAAQL,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KACA,OAAC,EAAAK,QAAA,CACC,OAAQF,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,KACA,QAAC,OAAI,UAAU,6GACb,qBAAC,OACC,oBAAC,WAAQ,KAAM,EAAG,UAAU,aAAa,KAAMF,EAAO,KACtD,OAAC,QACC,KAAM,EACN,UAAU,uFACV,KAAMC,EACR,GACF,KACA,QAAC,OAAI,UAAU,8BACZ,UAAAG,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGjB,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,EAAAoB,QAAA,CAAO,UAAWF,EAAc,QAAQ,YACtC,SAAAF,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,QAAM,eAAYA,EAAc,KAAM,GAAGhB,CAAa,IAAIC,CAAa,EAAE,EAC1E,mBAAC,EAAAoB,QAAA,CAAO,UAAWF,EAAc,QAAQ,UACtC,SAAAH,EAAc,KACjB,EACF,GAEJ,GACF,GACF,EACF,CAEJ,EAEMM,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOd,IAAQ,CAC7G,KAAM,CAAE,MAAAe,EAAO,aAAAC,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIL,EAAM,KAE1EM,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWJ,EACd,IAAIzB,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAM8B,EAAOC,IAAQA,EAAI,QAAQ/B,CAAI,IAAM8B,CAAK,EAErDE,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeN,EAClB,IAAIO,IAAY,CACf,QAAAA,EACA,MAAOX,EAAM,OAAOzB,GAAQA,EAAK,UAAYoC,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAEF,SACE,QAAC,WAAQ,uBAAqB,0BAA0B,IAAK9B,EAAK,UAAU,oBACzE,UAAAgB,MAAgB,OAAC,EAAAgB,QAAA,CAAM,KAAM,CAAE,MAAOhB,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,KACC,QAAC,QAAK,MAAOF,EAAO,MAAM,OAAO,aAAcO,EAAS,CAAC,EACvD,oBAAC,YACE,SAAAA,EAAS,IAAI,CAACO,EAASN,OACtB,OAAC,eAEC,MAAOM,EACP,QAAS,IAAM,IACb,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBvC,EAChB,eAAgBC,EAChB,gBAAiByB,EACjB,mBAAoB,EACpB,WAAYa,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIN,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACO,EAASN,OACtB,OAAC,eAAwB,MAAOM,EAAU,UAAU,qCAClD,gCACE,oBAAC,EAAAI,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAML,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOd,EACP,MAAOE,EACP,UAAWY,EACX,IAAKD,IAAeC,CAAO,GAAG,QAAU,CAC1C,CACF,EACA,MAAOrC,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeiC,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACCV,GAAYA,GAAU,MAAM,OAAS,KACpC,OAAC,EAAAc,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CAAE,KAAMd,GAAU,OAAS,CAAC,EAAG,cAAe,CAAE,MAAOJ,EAAO,MAAOE,CAAW,CAAE,EACxF,MAAOzB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAzEgB+B,CA0ElB,CACD,GACH,KAEA,oBACE,qBAAC,QAAK,UAAU,SACb,UAAAL,EAAM,IAAI,CAACzB,EAAM8B,OAEd,OAAC,YAEC,KAAMH,EAAQ3B,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,mBAACD,EAAA,CAAU,KAAMC,EAAM,cAAe,CAAE,MAAOsB,CAAM,EAAG,OAAQQ,EAAO,SAAU9B,EAAK,MAAO,GAJxF,GAAGA,GAAM,OAAS,EAAE,GAAG8B,CAAK,EAKnC,CAEH,EACAL,EAAM,IAAI,CAACzB,EAAM8B,OAChB,OAAC,YAA8C,KAAMH,EAAQ,MAAM,EAAG,UAAU,sBAC9E,mBAAC5B,EAAA,CAAU,KAAMC,EAAM,cAAe,CAAE,MAAOsB,CAAM,EAAG,OAAQQ,EAAO,SAAU,OAAQ,GAD5E,GAAG9B,GAAM,OAAS,EAAE,GAAG8B,CAAK,EAE3C,CACD,GACH,EACCJ,GAAYA,GAAU,MAAM,OAAS,KAapC,OAAC,EAAAc,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CAAE,KAAMd,GAAU,OAAS,CAAC,EAAG,cAAe,CAAE,MAAOJ,CAAM,CAAE,EACrE,MAAOvB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAEJ,CAEJ,CAAC,EAED,IAAOpB,KAAQ,cAAWwC,CAAuB",
+  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "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", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
 }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ContainerProps } from '../../types/props.js';
 export interface ShelfDisplayItem {
     id?: string;
     /** 产品图片*/
@@ -26,6 +27,7 @@ export interface ShelfDisplayProps {
     data: {
         title?: string;
         isShowTab?: boolean;
+        isShowTag?: boolean;
         direction?: 'horizontal' | 'vertical';
         align?: 'left' | 'center' | 'right';
         productsTab?: any;
@@ -41,6 +43,7 @@ export interface ShelfDisplayProps {
         /** 副按钮配置 */
         secondaryButton?: string;
         theme?: 'light' | 'dark';
+        containerProps?: ContainerProps;
     };
     buildData?: {
         categories: any[];

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

@@ -1,6 +1,6 @@
-"use strict";"use client";var Q=Object.create;var x=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var n in i)x(e,n,{get:i[n],enumerable:!0})},N=(e,i,n,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of G(i))!K.call(e,s)&&s!==n&&x(e,s,{get:()=>i[s],enumerable:!(m=W(i,s))||m.enumerable});return e};var p=(e,i,n)=>(n=e!=null?Q(J(e)):{},N(i||!e||!e.__esModule?x(n,"default",{value:e,enumerable:!0}):n,e)),Y=e=>N(x({},"__esModule",{value:!0}),e);var re={};X(re,{default:()=>ie});module.exports=Y(re);var t=require("react/jsx-runtime"),a=p(require("react")),d=require("../../helpers/utils.js"),I=p(require("../../components/picture.js")),C=p(require("./tabSwitch.js")),w=p(require("../../components/button.js")),_=p(require("../Title/index.js")),M=p(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),z=p(require("../../components/badge.js")),A=require("../../components/heading.js"),L=require("../../components/text.js");const D="image",P="product_shelf",Z=999999999e-2,ee=({data:e,configuration:i})=>{const{locale:n="us",copyWriting:m}=(0,$.useAiuiContext)(),s=(r,o)=>i?.event?.primaryButton?.(r,o+1),y=(r,o)=>i?.event?.secondaryButton?.(r,o+1),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===Z,{price:h,basePrice:b}=(0,H.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const r=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",i?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>(0,t.jsx)(z.default,{children:r},o))}),(0,t.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,t.jsx)(L.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:b||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(w.default,{variant:"primary",onClick:()=>s(e,i?.index),className:`
-            ${i.direction==="vertical"?"w-full":""}
-          `,children:i?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>y(e,i?.index),className:`
-            ${i.direction==="vertical"?"w-full":""}
-          `,children:i?.secondaryButton||""})]})]},e?.id||e?.handle)},te=a.default.forwardRef(({data:e,buildData:i,className:n="",key:m,event:s},y)=>{const[l,u]=(0,a.useState)(""),[h,b]=(0,a.useState)([]),g=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,a.useRef)(null);(0,a.useImperativeHandle)(y,()=>r.current),(0,q.useExposure)(r,{componentType:D,componentName:P,componentTitle:e?.title,navigation:l});const{productsTab:o=[],productsCard:S=[],title:f,align:ne="left",isShowTab:T=!0,tabShape:O="square",...U}=e,k=c=>{const j=c?.map(v=>{const B=i?.products?.find(F=>F?.handle===v?.handle);if(B)return{sku:v.sku,...B}})?.filter(v=>v);b(j)};return(0,a.useEffect)(()=>{if(T){u(o?.[0]?.tab||""),k(o?.[0]?.data||[]);return}k(S)},[]),(0,t.jsxs)("div",{ref:r,className:(0,d.cn)("w-full",n,{"aiui-dark":e?.theme==="dark"}),children:[f&&(0,t.jsx)(_.default,{data:{title:f}}),T&&(0,t.jsx)("div",{className:`${g?"w-full overflow-hidden":""}`,children:(0,t.jsx)(C.default,{value:l,tabs:o,tabShape:O,onTabClick:c=>{u(c?.tab),k(c?.data||[]),(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:D,component_name:P,component_title:e?.title,component_position:1,navigation:c?.tab}})}})}),(0,t.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,t.jsx)(M.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${m}${l}`,data:{list:h,configuration:{...U,event:s}},Slide:ee,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var ie=(0,E.withStyles)(te);
+"use strict";"use client";var G=Object.create;var y=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var r in t)y(e,r,{get:t[r],enumerable:!0})},D=(e,t,r,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of K(t))!Y.call(e,n)&&n!==r&&y(e,n,{get:()=>t[n],enumerable:!(p=J(t,n))||p.enumerable});return e};var l=(e,t,r)=>(r=e!=null?G(X(e)):{},D(t||!e||!e.__esModule?y(r,"default",{value:e,enumerable:!0}):r,e)),ee=e=>D(y({},"__esModule",{value:!0}),e);var se={};Z(se,{default:()=>re});module.exports=ee(se);var i=require("react/jsx-runtime"),a=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),T=l(require("../../components/button.js")),M=l(require("../Title/index.js")),E=l(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),q=require("./shelfDisplay.js"),ne=require("../../components/container.js"),B=require("react-responsive"),L=require("../../hooks/useExposure.js"),V=require("../../shared/track.js"),R=require("../AiuiProvider/index.js"),$=l(require("../../components/badge.js")),A=require("../../components/heading.js"),O=require("../../components/text.js");const P="image",C="product_shelf",te=999999999e-2,ie=({data:e,configuration:t})=>{const{locale:r="us",copyWriting:p}=(0,R.useAiuiContext)(),n=(0,B.useMediaQuery)({query:"(max-width: 768px)"}),b=(o,s)=>t?.event?.primaryButton?.(o,s+1),d=(o,s)=>t?.event?.secondaryButton?.(o,s+1),c=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===te,w=t?.isShowTag,{price:k,basePrice:m}=(0,q.formatVariantPrice)({locale:r,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const o=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===o)?.image?.url||s?.[0]?.image?.url||""};return(0,i.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":n}),children:(0,i.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,i.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,i.jsx)(I.default,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,i.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:w?e?.tags?.filter(o=>o.startsWith("CLtag"))?.map(o=>o.replace("CLtag:",""))?.slice(0,2)?.map?.((o,s)=>(0,i.jsx)($.default,{children:o},s)):(0,i.jsx)("div",{className:"lg-desktop:h-[28px] h-[24px] w-full"})}),(0,i.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}),(0,i.jsx)(O.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}),(0,i.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,i.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,i.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:m||""})]})}),(0,i.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,i.jsx)(T.default,{variant:"secondary",onClick:()=>d(e,t?.index),className:`
+                ${t.direction==="vertical"?"w-full":""}
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,i.jsx)(T.default,{variant:"primary",onClick:()=>b(e,t?.index),className:`
+              ${t.direction==="vertical"?"w-full":""}
+            `,children:t?.primaryButton||""}):null]})]})},e?.id||e?.handle)},oe=a.default.forwardRef(({data:e,buildData:t,className:r="",key:p,event:n},b)=>{const[d,c]=(0,a.useState)(""),[g,w]=(0,a.useState)([]),k=(0,B.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,a.useRef)(null);(0,a.useImperativeHandle)(b,()=>m.current),(0,L.useExposure)(m,{componentType:P,componentName:C,componentTitle:e?.title,navigation:d});const{productsTab:u=[],productsCard:o=[],title:s,align:z="left",isShowTab:v=!0,tabShape:U="square",isShowTag:j=!1,...W}=e,S=f=>{const F=f?.map(x=>{const N=t?.products?.find(Q=>Q?.handle===x?.handle);if(N)return{sku:x.sku,...N}})?.filter(x=>x);w(F)};return(0,a.useEffect)(()=>{if(v){c(u?.[0]?.tab||""),S(u?.[0]?.data||[]);return}S(o)},[]),(0,i.jsxs)("div",{ref:m,className:(0,h.cn)("w-full",r,{"aiui-dark":e?.theme==="dark"}),children:[s&&(0,i.jsx)(M.default,{data:{title:s}}),v&&(0,i.jsx)("div",{className:`${k?"w-full overflow-hidden":""}`,children:(0,i.jsx)(_.default,{value:d,tabs:u,tabShape:U,onTabClick:f=>{c(f?.tab),S(f?.data||[]),(0,V.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:P,component_name:C,component_title:e?.title,component_position:1,navigation:f?.tab}})}})}),(0,i.jsx)("div",{className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,i.jsx)(E.default,{className:"mt-6 !overflow-visible",id:`ShelfDisplay${p}${d}`,data:{list:g,configuration:{...W,event:n,isShowTag:j}},Slide:ie,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})})]})});var re=(0,H.withStyles)(oe);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number) => void\n  secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: variant?.price?.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n      )}\n    >\n      <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n        <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n      </div>\n      <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n        {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n          return <Badge key={index}>{item}</Badge>\n        })}\n      </div>\n      <Heading\n        title={data?.title || ''}\n        size={2}\n        className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n      >\n        {data?.title || ''}\n      </Heading>\n      <Text\n        size={2}\n        className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n      >\n        {data?.description || ''}\n      </Text>\n      <div className=\"mb-2 mt-[20px] flex items-center\">\n        {isSoldOut ? (\n          <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n        ) : (\n          <>\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n            <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n          </>\n        )}\n      </div>\n      {/* \u6309\u94AE\u7EC4 */}\n      <div\n        className={cn(\n          'lg-desktop:gap-3 flex items-center gap-2',\n          configuration.direction === 'vertical' ? 'flex-col' : ''\n        )}\n      >\n        <Button\n          variant=\"primary\"\n          onClick={() => onPrimaryButton(data, configuration?.index)}\n          className={`\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.primaryButton || ''}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={() => onSecondaryButton(data, configuration?.index)}\n          className={`\n            ${configuration.direction === 'vertical' ? 'w-full' : ''}\n          `}\n        >\n          {configuration?.secondaryButton || ''}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      align = 'left',\n      isShowTab = true,\n      tabShape = 'square',\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\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: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n          <SwiperBox\n            className=\"mt-6 !overflow-visible\"\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{ list: currentItems, configuration: { ...other, event: event } }}\n            Slide={ShelfDisplayItem}\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.1,\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n  id?: string\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img?: {\n    url: string\n  }\n  handle?: string\n  sku?: string\n  /** \u6298\u6263\u540E\u4EF7\u683C*/\n  price?: string\n  title?: string\n  /** \u6298\u6263\u524D\u4EF7\u683C*/\n  basePrice?: string\n  subTitle?: string\n  /** \u6807\u7B7E*/\n  tagItems?: string[]\n  tab?: string\n  data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number) => void\n  secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n  data: {\n    title?: string\n    isShowTab?: boolean\n    isShowTag?: boolean\n    direction?: 'horizontal' | 'vertical'\n    align?: 'left' | 'center' | 'right'\n    productsTab?: any\n    productsCard?: any\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n    tabShape?: 'rounded' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    /** \u526F\u6309\u94AE\u914D\u7F6E */\n    secondaryButton?: string\n    theme?: 'light' | 'dark'\n    containerProps?: ContainerProps\n  }\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.primaryButton?.(params, index + 1)\n\n  const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n    configuration?.event?.secondaryButton?.(params, index + 1)\n\n  const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n  const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n  const isShowTag = configuration?.isShowTag\n\n  const { price, basePrice } = formatVariantPrice({\n    locale: locale,\n    amount: variant?.price?.amount || 0,\n    baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n    currencyCode: data?.price?.currencyCode || 'USD',\n  })\n\n  const handleUrl = () => {\n    const sku = data?.sku\n    const skuArray = data?.variants\n    const findSku = skuArray?.find((item: any) => item?.sku === sku)\n    return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n  }\n\n  return (\n    <div\n      key={data?.id || data?.handle}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        {\n          'h-[360px]': isMobile,\n        }\n      )}\n    >\n      <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n        <div\n          className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}\n        >\n          <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n        </div>\n        <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n          {isShowTag ? (\n            data?.tags\n              ?.filter((item: any) => item.startsWith('CLtag'))\n              ?.map((item: any) => item.replace('CLtag:', ''))\n              ?.slice(0, 2)\n              ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)\n          ) : (\n            <div className=\"lg-desktop:h-[28px] h-[24px] w-full\"></div>\n          )}\n        </div>\n        <Heading\n          title={data?.title || ''}\n          size={2}\n          className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n        >\n          {data?.title || ''}\n        </Heading>\n        <Text\n          size={2}\n          className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n        >\n          {data?.description || ''}\n        </Text>\n        <div className=\"mb-2 mt-[20px] flex items-center\">\n          {isSoldOut ? (\n            <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n          ) : (\n            <>\n              <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n              <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n            </>\n          )}\n        </div>\n        {/* \u6309\u94AE\u7EC4 */}\n        <div\n          className={cn(\n            'lg-desktop:gap-3 flex items-center gap-2',\n            configuration.direction === 'vertical' ? 'flex-col' : ''\n          )}\n        >\n          {configuration?.secondaryButton ? (\n            <Button\n              variant=\"secondary\"\n              onClick={() => onSecondaryButton(data, configuration?.index)}\n              className={`\n                ${configuration.direction === 'vertical' ? 'w-full' : ''}\n              `}\n            >\n              {configuration?.secondaryButton || ''}\n            </Button>\n          ) : null}\n          {configuration?.primaryButton ? (\n            <Button\n              variant=\"primary\"\n              onClick={() => onPrimaryButton(data, configuration?.index)}\n              className={`\n              ${configuration.direction === 'vertical' ? 'w-full' : ''}\n            `}\n            >\n              {configuration?.primaryButton || ''}\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  ({ data, buildData, className = '', key, event }, ref) => {\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType: componentType,\n      componentName: componentName,\n      componentTitle: data?.title,\n      navigation: tabId,\n    })\n\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      align = 'left',\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      ...other\n    } = data\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n      const newCurrentData = currentData\n        ?.map(item => {\n          const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n          if (findData) {\n            return {\n              sku: item.sku,\n              ...findData,\n            }\n          }\n        })\n        ?.filter(item => item)\n      setCurrentItems(newCurrentData)\n    }\n\n    useEffect(() => {\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [])\n        return\n      }\n      handleCurrentTab(productsCard)\n    }, [])\n\n    return (\n      <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [])\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: data?.title,\n                    component_position: 1,\n                    navigation: v?.tab,\n                  },\n                })\n              }}\n            />\n          </div>\n        )}\n        <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n          <SwiperBox\n            className=\"mt-6 !overflow-visible\"\n            id={`ShelfDisplay${key}${tabId}`}\n            data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n            Slide={ShelfDisplayItem}\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.1,\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,\n              },\n              1440: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 4,\n              },\n            }}\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var J=Object.create;var v=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var n in e)v(t,n,{get:e[n],enumerable:!0})},G=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of O(e))!V.call(t,o)&&o!==n&&v(t,o,{get:()=>e[o],enumerable:!(s=K(e,o))||s.enumerable});return t};var X=(t,e,n)=>(n=t!=null?J(Q(t)):{},G(e||!t||!t.__esModule?v(n,"default",{value:t,enumerable:!0}):n,t)),Z=t=>G(v({},"__esModule",{value:!0}),t);var rt={};W(rt,{componentName:()=>C,componentType:()=>A,default:()=>et});module.exports=Z(rt);var l=require("react/jsx-runtime"),r=X(require("react")),D=require("@gsap/react"),f=require("gsap"),N=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),y=require("../../components/index.js"),P=require("../../shared/Styles.js"),z=require("../../hooks/useExposure.js");const A="copy",C="brand_slogan";function tt(t=[],e=3){const n=[];for(let s=0;s<t.length;s+=e)n.push(t.slice(s,s+e));return n}const L=r.default.forwardRef(({data:t,className:e=""},n)=>{const{title:s,features:o=[],featureChunkSize:k=3}=t,[w,I]=r.default.useState(0),[j,b]=r.default.useState(!0),T=(0,r.useRef)(null),d=tt(o,k),E=d.length,u=o.length>k,F=u?[...d,d[0]]:d,S=40;(0,r.useImperativeHandle)(n,()=>T.current),(0,z.useExposure)(T,{componentType:A,componentName:C,componentTitle:s}),r.default.useEffect(()=>{if(!u)return;const a=setInterval(()=>{I(i=>i+1),b(!0)},3e3);return()=>clearInterval(a)},[E,u]),r.default.useEffect(()=>{if(u)if(w===E){const a=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(a)}else b(!0)},[w,E,u]);const m=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null);return(0,D.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,N.SplitText),!m.current)return;x.current=new N.SplitText(m.current,{type:"words",wordsClass:"word"});const a=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:p=>{const h=p.progress,R=i.length,U=1/R,$=.5;i.forEach((Y,_)=>{const q=_/R*(1-$),B=U*(1+$);let H=(h-q)/B;H=Math.max(0,Math.min(H,1)),f.gsap.set(Y,{opacity:H})})}}),o&&o.length>0&&g.ScrollTrigger.create({trigger:M.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:p=>{f.gsap.set(M.current,{opacity:p.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),(0,l.jsxs)("div",{ref:T,className:(0,c.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,l.jsx)(y.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,c.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:s}),o&&o.length>0&&(0,l.jsx)("div",{className:(0,c.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${S}px]`),children:(0,l.jsx)("div",{className:(0,c.cn)(["flex flex-col",j?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${w*S}px)`},children:F.map((a,i)=>(0,l.jsx)("div",{className:(0,c.cn)("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${S}px]`),children:a.map((p,h)=>(0,l.jsxs)(r.default.Fragment,{children:[h>0&&(0,l.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,l.jsx)(y.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:p.title})]},h))},i))})})]})});L.displayName="Slogan";var et=(0,P.withStyles)(L);
+"use strict";"use client";var J=Object.create;var v=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(t,e)=>{for(var n in e)v(t,n,{get:e[n],enumerable:!0})},G=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of O(e))!V.call(t,o)&&o!==n&&v(t,o,{get:()=>e[o],enumerable:!(s=K(e,o))||s.enumerable});return t};var X=(t,e,n)=>(n=t!=null?J(Q(t)):{},G(e||!t||!t.__esModule?v(n,"default",{value:t,enumerable:!0}):n,t)),Z=t=>G(v({},"__esModule",{value:!0}),t);var rt={};W(rt,{componentName:()=>A,componentType:()=>z,default:()=>et});module.exports=Z(rt);var l=require("react/jsx-runtime"),r=X(require("react")),D=require("@gsap/react"),f=require("gsap"),N=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),y=require("../../components/index.js"),P=require("../../shared/Styles.js"),j=require("../../hooks/useExposure.js");const z="copy",A="brand_slogan";function tt(t=[],e=3){const n=[];for(let s=0;s<t.length;s+=e)n.push(t.slice(s,s+e));return n}const L=r.default.forwardRef(({data:t,className:e=""},n)=>{const{title:s,features:o=[],featureChunkSize:k=3}=t,[w,I]=r.default.useState(0),[C,b]=r.default.useState(!0),T=(0,r.useRef)(null),d=tt(o,k),E=d.length,u=o.length>k,F=u?[...d,d[0]]:d,S=40;(0,r.useImperativeHandle)(n,()=>T.current),(0,j.useExposure)(T,{componentType:z,componentName:A,componentTitle:s}),r.default.useEffect(()=>{if(!u)return;const a=setInterval(()=>{I(i=>i+1),b(!0)},3e3);return()=>clearInterval(a)},[E,u]),r.default.useEffect(()=>{if(u)if(w===E){const a=setTimeout(()=>{b(!1),I(0)},500);return()=>clearTimeout(a)}else b(!0)},[w,E,u]);const m=(0,r.useRef)(null),M=(0,r.useRef)(null),x=(0,r.useRef)(null);return(0,D.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,N.SplitText),!m.current)return;x.current=new N.SplitText(m.current,{type:"words",wordsClass:"word"});const a=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=4%",end:`bottom+=${a*1.5}px bottom-=4%`,scrub:!0,onUpdate:p=>{const h=p.progress,R=i.length,U=1/R,$=.5;i.forEach((Y,_)=>{const q=_/R*(1-$),B=U*(1+$);let H=(h-q)/B;H=Math.max(0,Math.min(H,1)),f.gsap.set(Y,{opacity:H})})}}),o&&o.length>0&&g.ScrollTrigger.create({trigger:M.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:p=>{f.gsap.set(M.current,{opacity:p.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),(0,l.jsxs)("div",{ref:T,className:(0,c.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,l.jsx)(y.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,c.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),html:s}),o&&o.length>0&&(0,l.jsx)("div",{className:(0,c.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${S}px]`),children:(0,l.jsx)("div",{className:(0,c.cn)(["flex flex-col",C?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${w*S}px)`},children:F.map((a,i)=>(0,l.jsx)("div",{className:(0,c.cn)("laptop:justify-end flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${S}px]`),children:a.map((p,h)=>(0,l.jsxs)(r.default.Fragment,{children:[h>0&&(0,l.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,l.jsx)(y.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:p.title})]},h))},i))})})]})});L.displayName="Slogan";var et=(0,P.withStyles)(L);
 //# sourceMappingURL=index.js.map