@anker-in/headless-ui 1.0.11 → 1.0.13-alpha.1755830287773

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var D=Object.create;var m=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of j(t))!T.call(e,s)&&s!==o&&m(e,s,{get:()=>t[s],enumerable:!(a=I(t,s))||a.enumerable});return e};var h=(e,t,o)=>(o=e!=null?D(P(e)):{},b(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>b(m({},"__esModule",{value:!0}),e);var C={};L(C,{default:()=>Q});module.exports=A(C);var r=require("react/jsx-runtime"),i=require("react"),l=require("../../helpers/utils.js"),f=h(require("../../components/picture.js")),w=require("../../shared/Styles.js"),N=require("react-responsive"),E=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),q=h(require("../Title/index.js"));const H="copy",z="store_benefits",R=(e,t)=>{const o=[];for(let a=0;a<e.length;a+=t)o.push(e.slice(a,a+t));return o},F=(0,i.forwardRef)(({data:{items:e=[],itemShape:t,title:o},className:a},s)=>{const[x,S]=(0,i.useState)(!1),y=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,i.useRef)(null),u=(0,i.useRef)(null);(0,i.useImperativeHandle)(s,()=>u.current),(0,E.useExposure)(u,{componentType:H,componentName:z}),(0,i.useEffect)(()=>{S(y)},[y]);const M=x?R(e,3):e;return(0,r.jsxs)("div",{ref:u,className:(0,l.cn)("brand-equity-wrapper w-full",a),children:[o&&(0,r.jsx)(q.default,{data:{title:o}}),x?(0,r.jsxs)(c.Swiper,{className:(0,l.cn)(a),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:v.current},breakpoints:{0:{spaceBetween:12}},children:[M?.map((n,d)=>(0,r.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((B,g)=>(0,r.jsx)(k,{data:B,itemShape:t,index:g},g))},"SwiperSlide"+d)),(0,r.jsx)("div",{ref:v,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,d)=>(0,r.jsx)(k,{data:n,itemShape:t,index:d},d))})]})}),k=({data:e,itemShape:t,index:o})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(o)},t==="round"?"rounded-box":"rounded-none"),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex -space-x-2",children:e?.avatarList?.map((a,s)=>(0,r.jsx)("div",{className:(0,l.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,r.jsx)(f.default,{source:a.avatar.url,alt:a.avatar?.alt,className:"size-full object-cover"})},s))}):(0,r.jsx)(f.default,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var Q=(0,w.withLayout)(F);
+"use strict";"use client";var D=Object.create;var m=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},b=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of j(t))!T.call(e,s)&&s!==o&&m(e,s,{get:()=>t[s],enumerable:!(a=I(t,s))||a.enumerable});return e};var h=(e,t,o)=>(o=e!=null?D(P(e)):{},b(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>b(m({},"__esModule",{value:!0}),e);var C={};L(C,{default:()=>Q});module.exports=A(C);var r=require("react/jsx-runtime"),i=require("react"),l=require("../../helpers/utils.js"),f=h(require("../../components/picture.js")),w=require("../../shared/Styles.js"),N=require("react-responsive"),E=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),q=h(require("../Title/index.js"));const H="copy",z="store_benefits",R=(e,t)=>{const o=[];for(let a=0;a<e.length;a+=t)o.push(e.slice(a,a+t));return o},F=(0,i.forwardRef)(({data:{items:e=[],itemShape:t,title:o},className:a},s)=>{const[x,S]=(0,i.useState)(!1),y=(0,N.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,i.useRef)(null),u=(0,i.useRef)(null);(0,i.useImperativeHandle)(s,()=>u.current),(0,E.useExposure)(u,{componentType:H,componentName:z}),(0,i.useEffect)(()=>{S(y)},[y]);const M=x?R(e,3):e;return(0,r.jsxs)("div",{ref:u,className:(0,l.cn)("brand-equity-wrapper w-full",a),children:[o&&(0,r.jsx)(q.default,{data:{title:o}}),x?(0,r.jsxs)(c.Swiper,{className:(0,l.cn)(a),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:v.current},breakpoints:{0:{spaceBetween:12}},children:[M?.map((n,d)=>(0,r.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((B,g)=>(0,r.jsx)(k,{data:B,itemShape:t,index:g},g))},"SwiperSlide"+d)),(0,r.jsx)("div",{ref:v,className:"mt-3 flex justify-center"})]}):(0,r.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,d)=>(0,r.jsx)(k,{data:n,itemShape:t,index:d},d))})]})}),k=({data:e,itemShape:t,index:o})=>(0,r.jsxs)("div",{className:(0,l.cn)("brand-equity-item","box-border flex w-full flex-col bg-white p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(o)},t==="round"?"rounded-box":"rounded-none"),children:[(0,r.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,r.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:e.title}),e.type==="avatar"?(0,r.jsx)("div",{className:"flex -space-x-2",children:e?.avatarList?.map((a,s)=>(0,r.jsx)("div",{className:(0,l.cn)("size-[30px] overflow-hidden rounded-full border-2 border-white","relative inline-block","lg-desktop:size-[36px]"),children:(0,r.jsx)(f.default,{source:a.avatar?.url,alt:a.avatar?.alt,className:"size-full object-cover"})},s))}):(0,r.jsx)(f.default,{className:"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})]}),(0,r.jsx)("p",{className:"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]",children:e.description})]});var Q=(0,w.withLayout)(F);
 //# sourceMappingURL=BrandEquity.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BrandEquity/BrandEquity.tsx"],
-  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n  ({ data: { items = [], itemShape, title }, className }, ref) => {\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const paginationRef = useRef<HTMLDivElement>(null)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n        {title && <Title data={{ title: title }} />}\n        {isMobile ? (\n          <Swiper\n            className={cn(className)}\n            modules={[FreeMode, Mousewheel, Pagination]}\n            freeMode={true}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            pagination={{\n              clickable: true,\n              el: paginationRef.current,\n            }}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n              },\n            }}\n          >\n            {itemsArray?.map((item, jIndex) => (\n              <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n                {Array.isArray(item) &&\n                  item?.map((item, index) => (\n                    <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n            {items.map((item, index) => (\n              <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandEquityItem = ({\n  data,\n  itemShape,\n  index,\n}: {\n  data: BrandEquityItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'box-border flex w-full flex-col bg-white p-4',\n        'desktop:p-6 justify-between',\n        'laptop:col-span-3 lg-desktop:p-8',\n        'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                  'relative inline-block',\n                  'lg-desktop:size-[36px]'\n                )}\n              >\n                <Picture source={item.avatar.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withLayout(BrandEquity)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'\n\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { BrandEquityProps, BrandEquityItemProps } from './types.js'\n\nimport type { Img } from '../../types/props.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Pagination, FreeMode, Mousewheel } from 'swiper/modules'\nimport Title from '../Title/index.js'\n\nconst componentType = 'copy'\nconst componentName = 'store_benefits'\n\nconst chunkArray = (arr: BrandEquityItemProps[], size: number) => {\n  const chunks = []\n  for (let i = 0; i < arr.length; i += size) {\n    chunks.push(arr.slice(i, i + size))\n  }\n  return chunks\n}\n\nconst BrandEquity = forwardRef<HTMLDivElement, BrandEquityProps>(\n  ({ data: { items = [], itemShape, title }, className }, ref) => {\n    const [isMobile, setIsMobile] = useState(false)\n    const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n    const paginationRef = useRef<HTMLDivElement>(null)\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n    })\n\n    useEffect(() => {\n      setIsMobile(mediaQuery)\n    }, [mediaQuery])\n\n    const itemsArray = isMobile ? chunkArray(items, 3) : items\n    return (\n      <div ref={innerRef} className={cn('brand-equity-wrapper w-full', className)}>\n        {title && <Title data={{ title: title }} />}\n        {isMobile ? (\n          <Swiper\n            className={cn(className)}\n            modules={[FreeMode, Mousewheel, Pagination]}\n            freeMode={true}\n            mousewheel={{\n              forceToAxis: true,\n            }}\n            pagination={{\n              clickable: true,\n              el: paginationRef.current,\n            }}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n              },\n            }}\n          >\n            {itemsArray?.map((item, jIndex) => (\n              <SwiperSlide key={'SwiperSlide' + jIndex} className=\"!flex flex-col gap-3\">\n                {Array.isArray(item) &&\n                  item?.map((item, index) => (\n                    <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n                  ))}\n              </SwiperSlide>\n            ))}\n            <div ref={paginationRef} className=\"mt-3 flex justify-center\"></div>\n          </Swiper>\n        ) : (\n          <div className={cn('grid grid-cols-1 gap-3', 'tablet:grid-cols-2', 'laptop:gap-4 laptop:grid-cols-10')}>\n            {items.map((item, index) => (\n              <BrandEquityItem key={index} data={item} itemShape={itemShape} index={index} />\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nconst BrandEquityItem = ({\n  data,\n  itemShape,\n  index,\n}: {\n  data: BrandEquityItemProps\n  itemShape?: 'round' | 'square'\n  index: number\n}) => {\n  return (\n    <div\n      className={cn(\n        'brand-equity-item',\n        'box-border flex w-full flex-col bg-white p-4',\n        'desktop:p-6 justify-between',\n        'laptop:col-span-3 lg-desktop:p-8',\n        'laptop:h-[192px] lg-desktop:h-[240px] h-[160px]',\n        {\n          ['laptop:col-span-4']: [0, 5, 6, 11].includes(index),\n        },\n        itemShape === 'round' ? 'rounded-box' : 'rounded-none'\n      )}\n    >\n      <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n        <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n          {data.title}\n        </h3>\n        {data.type === 'avatar' ? (\n          <div className=\"flex -space-x-2\">\n            {data?.avatarList?.map((item: { avatar: Img }, index: number) => (\n              <div\n                key={index}\n                className={cn(\n                  'size-[30px] overflow-hidden rounded-full border-2 border-white',\n                  'relative inline-block',\n                  'lg-desktop:size-[36px]'\n                )}\n              >\n                <Picture source={item.avatar?.url} alt={item.avatar?.alt} className=\"size-full object-cover\" />\n              </div>\n            ))}\n          </div>\n        ) : (\n          <Picture\n            className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n            source={data.icon?.url}\n            alt={data.icon?.alt}\n            imgClassName=\"w-full h-full object-cover\"\n          />\n        )}\n      </div>\n      <p className=\"lg-desktop:text-[24px] line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em] text-[#1D1D1F]\">\n        {data.description}\n      </p>\n    </div>\n  )\n}\n\nexport default withLayout(BrandEquity)\n"],
+  "mappings": "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",
   "names": ["BrandEquity_exports", "__export", "BrandEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_Styles", "import_react_responsive", "import_useExposure", "import_modules", "import_Title", "componentType", "componentName", "chunkArray", "arr", "size", "chunks", "i", "BrandEquity", "items", "itemShape", "title", "className", "ref", "isMobile", "setIsMobile", "mediaQuery", "paginationRef", "innerRef", "itemsArray", "Title", "item", "jIndex", "index", "BrandEquityItem", "data", "Picture"]
 }

package/dist/cjs/biz-components/CollectionsFilters/AnimatedUL.d.ts

@@ -0,0 +1,9 @@
+type AnimatedULProps = React.HTMLAttributes<HTMLUListElement> & {
+    isOpen: boolean;
+};
+/**
+ * AnimatedUL - 用于替换 <motion.ul>
+ * 保持 overflow hidden，height 由 gsap 动态控制
+ */
+export default function AnimatedUL({ isOpen, children, className, ...rest }: AnimatedULProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/biz-components/CollectionsFilters/AnimatedUL.js

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(e,t)=>{for(var i in t)s(e,i,{get:t[i],enumerable:!0})},d=(e,t,i,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of c(t))!m.call(e,p)&&p!==i&&s(e,p,{get:()=>t[p],enumerable:!(a=g(t,p))||a.enumerable});return e};var L=(e,t,i)=>(i=e!=null?f(T(e)):{},d(t||!e||!e.__esModule?s(i,"default",{value:e,enumerable:!0}):i,e)),H=e=>d(s({},"__esModule",{value:!0}),e);var w={};y(w,{default:()=>u});module.exports=H(w);var h=require("react/jsx-runtime"),r=require("react"),n=L(require("gsap"));function u({isOpen:e,children:t,className:i,...a}){const p=(0,r.useRef)(null);return(0,r.useLayoutEffect)(()=>{const o=p.current;if(o){if(n.default.killTweensOf(o),e){n.default.set(o,{height:"auto",paddingTop:"16px",opacity:1});const l=o.offsetHeight;n.default.set(o,{height:0,paddingTop:"0px",opacity:0}),n.default.to(o,{height:l,paddingTop:"16px",opacity:1,duration:.35,ease:"power2.out",onComplete:()=>{n.default.set(o,{height:"auto"})}})}else{const l=o.offsetHeight;n.default.set(o,{height:l,paddingTop:o.style.paddingTop||"16px",opacity:1}),n.default.to(o,{height:0,paddingTop:"0px",opacity:0,duration:.28,ease:"power2.in",onComplete:()=>{n.default.set(o,{height:0})}})}return()=>{p.current&&n.default.killTweensOf(p.current)}}},[e]),(0,h.jsx)("ul",{ref:p,className:i,style:{height:0,overflow:"hidden",paddingTop:0},...a,children:t})}
+//# sourceMappingURL=AnimatedUL.js.map

package/dist/cjs/biz-components/CollectionsFilters/AnimatedUL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CollectionsFilters/AnimatedUL.tsx"],
+  "sourcesContent": ["// \u9876\u90E8 imports\nimport { useLayoutEffect, useRef } from 'react'\nimport gsap from 'gsap'\n\ntype AnimatedULProps = React.HTMLAttributes<HTMLUListElement> & {\n  isOpen: boolean\n}\n\n/**\n * AnimatedUL - \u7528\u4E8E\u66FF\u6362 <motion.ul>\n * \u4FDD\u6301 overflow hidden\uFF0Cheight \u7531 gsap \u52A8\u6001\u63A7\u5236\n */\nexport default function AnimatedUL({ isOpen, children, className, ...rest }: AnimatedULProps) {\n  const ref = useRef<HTMLUListElement | null>(null)\n\n  useLayoutEffect(() => {\n    const el = ref.current\n    if (!el) return\n    // \u5148\u505C\u6B62\u5DF2\u6709 tween\uFF0C\u907F\u514D\u51B2\u7A81\n    gsap.killTweensOf(el)\n\n    if (isOpen) {\n      // \u5C55\u5F00\u6D41\u7A0B\uFF1A\u5148\u8BBE\u7F6E\u4E3A auto \u4EE5\u6D4B\u91CF\u5B8C\u6574\u9AD8\u5EA6\uFF0C\u518D\u56DE\u5230 0 \u5F00\u59CB\u52A8\u753B\n      gsap.set(el, { height: 'auto', paddingTop: '16px', opacity: 1 })\n      const fullHeight = el.offsetHeight // \u83B7\u53D6\u5C55\u5F00\u540E\u603B\u9AD8\u5EA6\n      // \u4ECE\u6536\u8D77\u72B6\u6001\u5F00\u59CB\u52A8\u753B\n      gsap.set(el, { height: 0, paddingTop: '0px', opacity: 0 })\n      gsap.to(el, {\n        height: fullHeight,\n        paddingTop: '16px',\n        opacity: 1,\n        duration: 0.35,\n        ease: 'power2.out',\n        onComplete: () => {\n          // \u52A8\u753B\u7ED3\u675F\u540E\u628A height \u8BBE\u4E3A auto \u4FDD\u6301\u81EA\u9002\u5E94\n          gsap.set(el, { height: 'auto' })\n        },\n      })\n    } else {\n      // \u6536\u8D77\u6D41\u7A0B\uFF1A\u5148\u628A\u5F53\u524D\u9AD8\u5EA6\u56FA\u5B9A\uFF0C\u518D\u52A8\u753B\u5230 0\n      const curHeight = el.offsetHeight\n      gsap.set(el, { height: curHeight, paddingTop: el.style.paddingTop || '16px', opacity: 1 })\n      gsap.to(el, {\n        height: 0,\n        paddingTop: '0px',\n        opacity: 0,\n        duration: 0.28,\n        ease: 'power2.in',\n        onComplete: () => {\n          // \u5B8C\u5168\u6536\u8D77\u540E\u4FDD\u6301 height \u4E3A 0\uFF08\u6216\u53EF\u79FB\u9664\u5185\u8054\u6837\u5F0F\uFF09\n          gsap.set(el, { height: 0 })\n        },\n      })\n    }\n\n    return () => {\n      // \u6E05\u7406\n      if (ref.current) gsap.killTweensOf(ref.current)\n    }\n  }, [isOpen])\n\n  // \u521D\u59CB\u6837\u5F0F\uFF1A\u6536\u8D77\u72B6\u6001\uFF08\u548C motion.ul \u7684 hidden \u72B6\u6001\u7B49\u4EF7\uFF09\n  return (\n    <ul ref={ref} className={className} style={{ height: 0, overflow: 'hidden', paddingTop: 0 }} {...rest}>\n      {children}\n    </ul>\n  )\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+DI,IAAAI,EAAA,6BA9DJC,EAAwC,iBACxCC,EAAiB,mBAUF,SAARJ,EAA4B,CAAE,OAAAK,EAAQ,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAK,EAAoB,CAC5F,MAAMC,KAAM,UAAgC,IAAI,EAEhD,4BAAgB,IAAM,CACpB,MAAMC,EAAKD,EAAI,QACf,GAAKC,EAIL,IAFA,EAAAC,QAAK,aAAaD,CAAE,EAEhBL,EAAQ,CAEV,EAAAM,QAAK,IAAID,EAAI,CAAE,OAAQ,OAAQ,WAAY,OAAQ,QAAS,CAAE,CAAC,EAC/D,MAAME,EAAaF,EAAG,aAEtB,EAAAC,QAAK,IAAID,EAAI,CAAE,OAAQ,EAAG,WAAY,MAAO,QAAS,CAAE,CAAC,EACzD,EAAAC,QAAK,GAAGD,EAAI,CACV,OAAQE,EACR,WAAY,OACZ,QAAS,EACT,SAAU,IACV,KAAM,aACN,WAAY,IAAM,CAEhB,EAAAD,QAAK,IAAID,EAAI,CAAE,OAAQ,MAAO,CAAC,CACjC,CACF,CAAC,CACH,KAAO,CAEL,MAAMG,EAAYH,EAAG,aACrB,EAAAC,QAAK,IAAID,EAAI,CAAE,OAAQG,EAAW,WAAYH,EAAG,MAAM,YAAc,OAAQ,QAAS,CAAE,CAAC,EACzF,EAAAC,QAAK,GAAGD,EAAI,CACV,OAAQ,EACR,WAAY,MACZ,QAAS,EACT,SAAU,IACV,KAAM,YACN,WAAY,IAAM,CAEhB,EAAAC,QAAK,IAAID,EAAI,CAAE,OAAQ,CAAE,CAAC,CAC5B,CACF,CAAC,CACH,CAEA,MAAO,IAAM,CAEPD,EAAI,SAAS,EAAAE,QAAK,aAAaF,EAAI,OAAO,CAChD,EACF,EAAG,CAACJ,CAAM,CAAC,KAIT,OAAC,MAAG,IAAKI,EAAK,UAAWF,EAAW,MAAO,CAAE,OAAQ,EAAG,SAAU,SAAU,WAAY,CAAE,EAAI,GAAGC,EAC9F,SAAAF,EACH,CAEJ",
+  "names": ["AnimatedUL_exports", "__export", "AnimatedUL", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "isOpen", "children", "className", "rest", "ref", "el", "gsap", "fullHeight", "curHeight"]
+}

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

@@ -0,0 +1 @@
+export default function CollectionsFilters(props: any): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+"use strict";var K=Object.create;var w=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(o,s)=>{for(var l in s)w(o,l,{get:s[l],enumerable:!0})},P=(o,s,l,f)=>{if(s&&typeof s=="object"||typeof s=="function")for(let c of Q(s))!G.call(o,c)&&c!==l&&w(o,c,{get:()=>s[c],enumerable:!(f=q(s,c))||f.enumerable});return o};var g=(o,s,l)=>(l=o!=null?K(D(o)):{},P(s||!o||!o.__esModule?w(l,"default",{value:o,enumerable:!0}):l,o)),R=o=>P(w({},"__esModule",{value:!0}),o);var V={};J(V,{default:()=>A});module.exports=R(V);var e=require("react/jsx-runtime"),m=require("react"),d=require("../../helpers/utils.js"),z=g(require("../../components/picture.js")),B=require("es-toolkit"),y=g(require("../../components/button")),k=g(require("./AnimatedUL")),j=require("react-responsive");function A(o){const{filters:s,filtered:l={},setFiltered:f,noShowList:c=[],sortKeyIndx:W,setSortKeyIndx:M,metafields:E={},width:I}=o,{shop_filters_pair:b}=E,[N,$]=(0,m.useState)(!1),[F,h]=(0,m.useState)(!1),[C,O]=(0,m.useState)(0),[x,_]=(0,m.useState)([]),H=(0,j.useMediaQuery)({query:"(max-width: 768px)"}),v=(0,m.useMemo)(()=>s?.map(t=>({...t,options:t.options.map((n,i)=>({...n,checked:l?.[t.value]?.indexOf?.(n.value)>-1}))}))||[{label:"Price",value:"price",options:[{value:"798|1223.99",label:"$798.00 - $1,223.99",checked:!1},{value:"1224|1648.99",label:"$1,224.00 - $1,648.99",checked:!1},{value:"1649|2073.99",label:"$1,649.00 - $2,073.99",checked:!1},{value:"2074|2499.99",label:"$2,074.00 - $2,499.99",checked:!1}],mainPair:!1},{label:"Offers",value:"offers",mainPair:!1,options:[{label:"On Sale",value:"onsale",checked:!1}]},{label:"Availability",options:[{count:5,label:"In stock",value:"filter.v.availability.1",checked:!1}],value:"filter.v.availability",mainPair:!1}],[l,s]),L=(t,n,i)=>{const a=t.target;if(i)delete l?.[a.name];else{const p=n?[]:l?.[a.name]||[];if(a.checked)p.push(a.value);else{if(n)return;(0,B.remove)(p,U=>U===a.value)}l[a.name]=p,p.length<=0&&delete l[a.name]}let r=0;for(var u in l)Array.isArray(l[u])&&(r+=l[u].length);O(r),f({...l})},T=()=>{f({}),O(0)},S=t=>{let n=x.concat();n.map(i=>i.label===t?i.show=!i.show:i),_(n)};return(0,m.useEffect)(()=>{if(x?.length===0){let t=[];const n=document?.getElementsByClassName("pt-5 transition-all duration-400 ease-in-out");for(let i=0;i<n.length;i++){let a={};a.label=n[i]?.getAttribute("data-label"),a.show=H?!1:i<6,a.height=document?.getElementsByClassName("pt-5 transition-all duration-400 ease-in-out")?.[i]?.clientHeight,t.push(a)}_(t)}},[v]),(0,e.jsxs)("div",{className:(0,d.cn)("md-tablet:flex md-tablet:items-center md-tablet:w-full md-tablet:m-0 bg-[#FFFFFF] md-tablet:py-4",`${I||"w-[25%]"}`),children:[(0,e.jsxs)("div",{className:"relative text-base color-[#777] font-medium hidden md-tablet:w-1/2 md-tablet:px-5 md-tablet:text-lg md-tablet:font-semibold md-tablet:block md-tablet:flex md-tablet:items-center md-tablet:justify-center md-tablet:text-center",children:[(0,e.jsxs)("div",{className:"md-tablet:text-lg md-tablet:color-[#333]",onClick:()=>$(!N),children:[(0,e.jsx)("span",{dangerouslySetInnerHTML:{__html:b?.filter_txt?.sort}}),(0,e.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",children:(0,e.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})})]}),(0,e.jsx)("ul",{className:(0,d.cn)("md-tablet:left-2.5 md-tablet:right-auto md-tablet:top-[120%] md-tablet:text-left absolute top-[110%] right-0 w-full bg-[#FFFFFF] z-10 py-2 px-0 rounded-lg transition-all duration-400 ease-in-out",N?"visibility opacity-100":"invisible opacity-0"),children:b?.filter_txt?.sortList?.map((t,n)=>(0,e.jsx)("li",{children:(0,e.jsx)("button",{name:t?.txt,className:"md-tablet:text-left",dangerouslySetInnerHTML:{__html:t?.txt},onClick:()=>{$(!1),M(n)}})},t?.txt+n))})]}),(0,e.jsxs)("div",{className:"w-full",children:[(0,e.jsxs)("div",{className:(0,d.cn)("relative flex items-center md-tablet:justify-center md-tablet:p-0 text-base font-bold pb-6 cursor-pointer"),onClick:()=>h(!0),children:[(0,e.jsx)(z.default,{className:"inline-block size-[20px]",source:"https://cdn.shopify.com/s/files/1/0508/1815/4652/files/icon_table-of-contents.svg?v=1694054638"}),(0,e.jsx)("span",{className:"font-bold inline-block pl-2 leading-none",children:b?.filter_txt?.filter}),C>0&&(0,e.jsx)("span",{className:"absolute bottom-[50%] left-[100%] hidden bg-[#ccc] text-[#fff] md-tablet:block rounded-[10px]",children:C})]}),(0,e.jsx)("div",{className:(0,d.cn)("transition-all duration-400 ease-in-out md-tablet:fixed md-tablet:bottom-0 md-tablet:left-0 md-tablet:right-0 md-tablet:top-0 md-tablet:z-[99]",F?"md-tablet:pointer-events-auto md-tablet:opacity-100":"md-tablet:pointer-events-none md-tablet:opacity-0"),children:(0,e.jsxs)("div",{className:(0,d.cn)("transition-all duration-400 ease-in-out md-tablet:absolute md-tablet:bottom-0 md-tablet:h-[90vh] md-tablet:w-full md-tablet:bg-[#fff]",F?"md-tablet:translate-y-0":"md-tablet:translate-y-[100%]"),children:[(0,e.jsxs)("div",{className:(0,d.cn)("!hidden md-tablet:!flex md-tablet:justify-between md-tablet:p-6 md-tablet:overflow-hidden"),children:[(0,e.jsx)("p",{className:"flex-1 truncate",children:b?.filter_txt?.filter}),(0,e.jsx)("div",{onClick:()=>h(!1),className:"size-6 cursor-pointer fill-[#333]",children:(0,e.jsx)("svg",{viewBox:"0 0 1024 1024",version:"1.1",xmlns:"http://www.w3.org/2000/svg","p-id":"6948",width:"24",height:"24",children:(0,e.jsx)("path",{d:"M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z","p-id":"6949"})})})]}),v&&v.length>0&&(0,e.jsxs)("div",{className:"md-tablet:p-6 md-tablet:h-[calc(100% - 155px)] md-tablet:overflow-auto",children:[v.map((t,n)=>{if(!t?.mainPair)return;const i=x.find(a=>a.label==t.label);return(0,e.jsxs)("div",{className:(0,d.cn)("flex-1 overflow-hidden pb-12 text-left duration-300 ease-in-out","hidden md-tablet:block"),children:[(0,e.jsxs)("div",{className:"relative flex items-center md-tablet:justify-center md-tablet:p-0 text-base font-bold pb-6 cursor-pointer",onClick:()=>S(t.label),children:[(0,e.jsx)("button",{className:"w-full whitespace-nowrap py-2 text-left font-medium",children:(0,e.jsx)("span",{className:"font-bold pr-2",children:t.label})}),(0,e.jsx)("div",{className:`inline-block size-4 duration-300 ease-in-out ${i?.show&&"rotate-180"}`,children:(0,e.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",children:(0,e.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})})})]}),(0,e.jsx)("div",{className:"transition-all duration-400 ease-in-out overflow-hidden",children:(0,e.jsx)(k.default,{className:"pt-5 transition-all duration-400 ease-in-out","data-label":t.label,isOpen:!!i?.show,children:t?.options?.map((a,r)=>(0,e.jsx)("li",{className:(0,d.cn)("h-[18px] w-full mb-4 box-border"),children:(0,e.jsxs)("label",{className:"flex items-center overflow-hidden",htmlFor:`${t.value}-${r}`,children:[(0,e.jsx)("input",{type:"radio",name:t.value,value:a.value,id:`${t.value}-${r}`,onChange:u=>L(u,!0),checked:a.checked,className:"size-[18px] cursor-pointer"}),(0,e.jsx)("p",{className:(0,d.cn)("pt-0.5 pl-3 inline-block cursor-pointer font-medium leading-none"),children:a.label})]})},a.value))})})]},`${t.label}${n}`)}),v.map((t,n)=>{if(c?.indexOf?.(t?.value)>-1||t?.mainPair)return null;const a=x?.find?.(r=>r.label==t.label);return(0,e.jsxs)("div",{className:(0,d.cn)("flex-1 overflow-hidden text-left duration-300 ease-in-out"),children:[(0,e.jsxs)("div",{onClick:()=>S(t.label),className:"relative flex items-center md-tablet:justify-center text-base font-bold cursor-pointer leading-none",children:[(0,e.jsx)("button",{className:"w-full whitespace-nowrap text-left font-medium",children:(0,e.jsx)("span",{className:"pr-2 font-bold",children:t.label})}),(0,e.jsx)("div",{className:`inline-block size-4 duration-300 ease-in-out ${a?.show&&"rotate-180"}`,children:(0,e.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",children:(0,e.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"m19.5 8.25-7.5 7.5-7.5-7.5"})})})]}),(0,e.jsx)("div",{className:"transition-all duration-400 ease-in-out overflow-hidden",children:(0,e.jsx)(k.default,{className:"pt-5 transition-all duration-400 ease-in-out","data-label":t.label,isOpen:!!a?.show,children:t.options.map((r,u)=>(0,e.jsx)("li",{className:(0,d.cn)("h-[18px] w-full mb-4 box-border",{disabled:r?.count<=0}),children:(0,e.jsxs)("label",{className:"flex items-center overflow-hidden",htmlFor:`${t.value}-${u}`,children:[(0,e.jsx)("input",{type:"checkbox",name:t.value,value:r.value,id:`${t.value}-${u}`,disabled:r?.count<=0,onChange:p=>L(p,!1),checked:r.checked,className:"size-[18px] cursor-pointer"}),(0,e.jsx)("p",{className:(0,d.cn)("pt-0.5 pl-3 inline-block cursor-pointer font-medium leading-none"),children:r.label})]})},r.value))})})]},`${t.label}${n}`)})]}),(0,e.jsxs)("div",{className:(0,d.cn)("flex items-center justify-between py-[18px] px-6","!hidden md-tablet:!flex"),children:[(0,e.jsx)(y.default,{className:"w-[48%]",onClick:t=>{h(!1),T()},children:b?.filter_txt?.clear}),(0,e.jsx)(y.default,{className:"w-[48%] bg-[#fff] text-[#00befa] border border-[#00befa]",onClick:t=>{h(!1)},children:b?.filter_txt?.apply})]})]})})]})]})}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/CollectionsFilters/index.tsx"],
+  "sourcesContent": ["import { useState, useMemo, useEffect, type ChangeEvent } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport { remove } from 'es-toolkit'\nimport Button from '../../components/button'\nimport AnimatedUL from './AnimatedUL'\nimport { useMediaQuery } from 'react-responsive'\n\nexport default function CollectionsFilters(props: any) {\n  const {\n    filters,\n    filtered = {},\n    setFiltered,\n    noShowList = [],\n    sortKeyIndx,\n    setSortKeyIndx,\n    metafields = {},\n    width,\n  } = props\n  const { shop_filters_pair } = metafields\n  const [openSort, setOpenSort] = useState<boolean>(false)\n  const [showFilterPair, setShowFilterPair] = useState<boolean>(false)\n  const [totalfiltered, setTotalfiltered] = useState<number>(0)\n  // \u5C55\u5F00\u7B5B\u9009\u9879\n  const [openOptions, setOpenOpt] = useState<any[]>([])\n\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const filtersPair = useMemo(() => {\n    return (\n      filters?.map((filter: any) => {\n        return {\n          ...filter,\n          options: filter.options.map((opt: any, i: number) => {\n            return {\n              ...opt,\n              checked: filtered?.[filter.value]?.indexOf?.(opt.value) > -1,\n            }\n          }),\n        }\n      }) || [\n        {\n          label: 'Price',\n          value: 'price',\n          options: [\n            {\n              value: '798|1223.99',\n              label: '$798.00 - $1,223.99',\n              checked: false,\n            },\n            {\n              value: '1224|1648.99',\n              label: '$1,224.00 - $1,648.99',\n              checked: false,\n            },\n            {\n              value: '1649|2073.99',\n              label: '$1,649.00 - $2,073.99',\n              checked: false,\n            },\n            {\n              value: '2074|2499.99',\n              label: '$2,074.00 - $2,499.99',\n              checked: false,\n            },\n          ],\n          mainPair: false,\n        },\n        {\n          label: 'Offers',\n          value: 'offers',\n          mainPair: false,\n          options: [\n            {\n              label: 'On Sale',\n              value: 'onsale',\n              checked: false,\n            },\n          ],\n        },\n        {\n          label: 'Availability',\n          options: [\n            {\n              count: 5,\n              label: 'In stock',\n              value: 'filter.v.availability.1',\n              checked: false,\n            },\n          ],\n          value: 'filter.v.availability',\n          mainPair: false,\n        },\n      ]\n    )\n  }, [filtered, filters])\n\n  const filterChange = (event: ChangeEvent<HTMLInputElement>, radio: boolean, showAll?: undefined) => {\n    const target = event.target\n\n    if (showAll) {\n      delete filtered?.[target.name]\n    } else {\n      const current = radio ? [] : filtered?.[target.name] || []\n      if (target.checked) {\n        current.push(target.value)\n      } else {\n        if (radio) return\n        remove(current, (v: string) => v === target.value)\n      }\n      filtered[target.name] = current\n      current.length <= 0 && delete filtered[target.name]\n    }\n\n    let total = 0\n    for (var key in filtered) {\n      if (Array.isArray(filtered[key])) {\n        total += filtered[key].length\n      }\n    }\n    setTotalfiltered(total)\n    setFiltered({ ...filtered })\n  }\n\n  const clearFiltered = () => {\n    setFiltered({})\n    setTotalfiltered(0)\n  }\n\n  const handleFilterOpt = (label: string) => {\n    let res = openOptions.concat()\n    res.map((item: any) => {\n      if (item.label === label) return (item.show = !item.show)\n      return item\n    })\n    setOpenOpt(res)\n  }\n\n  useEffect(() => {\n    if (openOptions?.length === 0) {\n      let res = []\n      const domList = document?.getElementsByClassName('pt-5 transition-all duration-400 ease-in-out')\n      for (let index = 0; index < domList.length; index++) {\n        let data = {} as any\n        data.label = domList[index]?.getAttribute('data-label')\n        data.show = isMobile ? false : index < 6 ? true : false\n        data.height = document?.getElementsByClassName('pt-5 transition-all duration-400 ease-in-out')?.[\n          index\n        ]?.clientHeight\n        res.push(data)\n      }\n      setOpenOpt(res)\n    }\n  }, [filtersPair])\n\n  return (\n    <div\n      className={cn(\n        'md-tablet:flex md-tablet:items-center md-tablet:w-full md-tablet:m-0 bg-[#FFFFFF] md-tablet:py-4',\n        `${width || 'w-[25%]'}`\n      )}\n    >\n      <div\n        className={\n          'relative text-base color-[#777] font-medium hidden md-tablet:w-1/2 md-tablet:px-5 md-tablet:text-lg md-tablet:font-semibold md-tablet:block md-tablet:flex md-tablet:items-center md-tablet:justify-center md-tablet:text-center'\n        }\n      >\n        <div className={'md-tablet:text-lg md-tablet:color-[#333]'} onClick={() => setOpenSort(!openSort)}>\n          <span\n            dangerouslySetInnerHTML={{\n              __html: shop_filters_pair?.filter_txt?.sort,\n            }}\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          >\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"></path>\n          </svg>\n        </div>\n        <ul\n          className={cn(\n            'md-tablet:left-2.5 md-tablet:right-auto md-tablet:top-[120%] md-tablet:text-left absolute top-[110%] right-0 w-full bg-[#FFFFFF] z-10 py-2 px-0 rounded-lg transition-all duration-400 ease-in-out',\n            openSort ? 'visibility opacity-100' : 'invisible opacity-0'\n          )}\n        >\n          {shop_filters_pair?.filter_txt?.sortList?.map((l: any, k: number) => (\n            <li key={l?.txt + k}>\n              <button\n                name={l?.txt}\n                className={'md-tablet:text-left'}\n                dangerouslySetInnerHTML={{ __html: l?.txt }}\n                onClick={() => {\n                  setOpenSort(false)\n                  setSortKeyIndx(k)\n                }}\n              />\n            </li>\n          ))}\n        </ul>\n      </div>\n\n      <div className=\"w-full\">\n        {/* FilterHeader */}\n        <div\n          className={cn(\n            'relative flex items-center md-tablet:justify-center md-tablet:p-0 text-base font-bold pb-6 cursor-pointer'\n          )}\n          onClick={() => setShowFilterPair(true)}\n        >\n          <Picture\n            className=\"inline-block size-[20px]\"\n            source=\"https://cdn.shopify.com/s/files/1/0508/1815/4652/files/icon_table-of-contents.svg?v=1694054638\"\n          />\n          <span className=\"font-bold inline-block pl-2 leading-none\">{shop_filters_pair?.filter_txt?.filter}</span>\n          {totalfiltered > 0 && (\n            <span\n              className={\n                'absolute bottom-[50%] left-[100%] hidden bg-[#ccc] text-[#fff] md-tablet:block rounded-[10px]'\n              }\n            >\n              {totalfiltered}\n            </span>\n          )}\n        </div>\n\n        {/* FilterList */}\n        <div\n          className={cn(\n            'transition-all duration-400 ease-in-out md-tablet:fixed md-tablet:bottom-0 md-tablet:left-0 md-tablet:right-0 md-tablet:top-0 md-tablet:z-[99]',\n            showFilterPair\n              ? 'md-tablet:pointer-events-auto md-tablet:opacity-100'\n              : 'md-tablet:pointer-events-none md-tablet:opacity-0'\n          )}\n        >\n          <div\n            className={cn(\n              'transition-all duration-400 ease-in-out md-tablet:absolute md-tablet:bottom-0 md-tablet:h-[90vh] md-tablet:w-full md-tablet:bg-[#fff]',\n              showFilterPair ? 'md-tablet:translate-y-0' : 'md-tablet:translate-y-[100%]'\n            )}\n          >\n            {/* FilterListHeader only-in-mob  */}\n            <div\n              className={cn(\n                '!hidden md-tablet:!flex md-tablet:justify-between md-tablet:p-6 md-tablet:overflow-hidden'\n              )}\n            >\n              <p className=\"flex-1 truncate\">{shop_filters_pair?.filter_txt?.filter}</p>\n              <div onClick={() => setShowFilterPair(false)} className=\"size-6 cursor-pointer fill-[#333]\">\n                <svg\n                  viewBox=\"0 0 1024 1024\"\n                  version=\"1.1\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  p-id=\"6948\"\n                  width=\"24\"\n                  height=\"24\"\n                >\n                  <path\n                    d=\"M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z\"\n                    p-id=\"6949\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            {/* FilterListCon */}\n            {filtersPair && filtersPair.length > 0 && (\n              <div className={'md-tablet:p-6 md-tablet:h-[calc(100% - 155px)] md-tablet:overflow-auto'}>\n                {/* mainPair mob */}\n                {filtersPair.map((filter: any, i: number) => {\n                  if (!filter?.mainPair) return\n                  const openOption = openOptions.find((item: any) => item.label == filter.label) as any\n                  return (\n                    <div\n                      key={`${filter.label}${i}`}\n                      className={cn(\n                        'flex-1 overflow-hidden pb-12 text-left duration-300 ease-in-out',\n                        'hidden md-tablet:block'\n                      )}\n                    >\n                      <div\n                        className={\n                          'relative flex items-center md-tablet:justify-center md-tablet:p-0 text-base font-bold pb-6 cursor-pointer'\n                        }\n                        onClick={() => handleFilterOpt(filter.label)}\n                      >\n                        <button className=\"w-full whitespace-nowrap py-2 text-left font-medium\">\n                          <span className=\"font-bold pr-2\">{filter.label}</span>\n                        </button>\n                        <div\n                          className={`inline-block size-4 duration-300 ease-in-out ${openOption?.show && 'rotate-180'}`}\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                          >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"></path>\n                          </svg>\n                        </div>\n                      </div>\n                      <div className={'transition-all duration-400 ease-in-out overflow-hidden'}>\n                        <AnimatedUL\n                          className={'pt-5 transition-all duration-400 ease-in-out'}\n                          data-label={filter.label}\n                          isOpen={!!openOption?.show}\n                        >\n                          {filter?.options?.map((opt: any, p: number) => {\n                            return (\n                              <li key={opt.value} className={cn('h-[18px] w-full mb-4 box-border')}>\n                                <label className=\"flex items-center overflow-hidden\" htmlFor={`${filter.value}-${p}`}>\n                                  <input\n                                    type=\"radio\"\n                                    name={filter.value}\n                                    value={opt.value}\n                                    id={`${filter.value}-${p}`}\n                                    onChange={e => filterChange(e, true)}\n                                    checked={opt.checked}\n                                    className=\"size-[18px] cursor-pointer\"\n                                  />\n                                  <p className={cn('pt-0.5 pl-3 inline-block cursor-pointer font-medium leading-none')}>\n                                    {opt.label}\n                                  </p>\n                                </label>\n                              </li>\n                            )\n                          })}\n                        </AnimatedUL>\n                      </div>\n                    </div>\n                  )\n                })}\n\n                {filtersPair.map((filter: any, i: number) => {\n                  const isNoShow = noShowList?.indexOf?.(filter?.value) > -1\n                  if (isNoShow || filter?.mainPair) return null\n                  const openOption = openOptions?.find?.((item: any) => item.label == filter.label) as any\n                  return (\n                    <div\n                      key={`${filter.label}${i}`}\n                      className={cn('flex-1 overflow-hidden text-left duration-300 ease-in-out')}\n                    >\n                      <div\n                        onClick={() => handleFilterOpt(filter.label)}\n                        className={\n                          'relative flex items-center md-tablet:justify-center text-base font-bold cursor-pointer leading-none'\n                        }\n                      >\n                        <button className=\"w-full whitespace-nowrap text-left font-medium\">\n                          <span className=\"pr-2 font-bold\">{filter.label}</span>\n                        </button>\n                        <div\n                          className={`inline-block size-4 duration-300 ease-in-out ${openOption?.show && 'rotate-180'}`}\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                          >\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" />\n                          </svg>\n                        </div>\n                      </div>\n                      <div className={'transition-all duration-400 ease-in-out overflow-hidden'}>\n                        <AnimatedUL\n                          className={'pt-5 transition-all duration-400 ease-in-out'}\n                          data-label={filter.label}\n                          isOpen={!!openOption?.show}\n                        >\n                          {filter.options.map((opt: any, p: number) => {\n                            return (\n                              <li\n                                key={opt.value}\n                                className={cn('h-[18px] w-full mb-4 box-border', {\n                                  ['disabled']: opt?.count <= 0,\n                                })}\n                              >\n                                <label className=\"flex items-center overflow-hidden\" htmlFor={`${filter.value}-${p}`}>\n                                  <input\n                                    type=\"checkbox\"\n                                    name={filter.value}\n                                    value={opt.value}\n                                    id={`${filter.value}-${p}`}\n                                    disabled={opt?.count <= 0}\n                                    onChange={e => filterChange(e, false)}\n                                    checked={opt.checked}\n                                    className=\"size-[18px] cursor-pointer\"\n                                  />\n                                  <p className={cn('pt-0.5 pl-3 inline-block cursor-pointer font-medium leading-none')}>\n                                    {opt.label}\n                                  </p>\n                                </label>\n                              </li>\n                            )\n                          })}\n                        </AnimatedUL>\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            )}\n\n            {/* FilterListBottom only-in-mob */}\n            <div className={cn('flex items-center justify-between py-[18px] px-6', '!hidden md-tablet:!flex')}>\n              <Button\n                className=\"w-[48%]\"\n                onClick={e => {\n                  setShowFilterPair(false)\n                  clearFiltered()\n                }}\n              >\n                {shop_filters_pair?.filter_txt?.clear}\n              </Button>\n              <Button\n                className=\"w-[48%] bg-[#fff] text-[#00befa] border border-[#00befa]\"\n                onClick={e => {\n                  setShowFilterPair(false)\n                }}\n              >\n                {shop_filters_pair?.filter_txt?.apply}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["CollectionsFilters_exports", "__export", "CollectionsFilters", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_es_toolkit", "import_button", "import_AnimatedUL", "import_react_responsive", "props", "filters", "filtered", "setFiltered", "noShowList", "sortKeyIndx", "setSortKeyIndx", "metafields", "width", "shop_filters_pair", "openSort", "setOpenSort", "showFilterPair", "setShowFilterPair", "totalfiltered", "setTotalfiltered", "openOptions", "setOpenOpt", "isMobile", "filtersPair", "filter", "opt", "filterChange", "event", "radio", "showAll", "target", "current", "v", "total", "key", "clearFiltered", "handleFilterOpt", "label", "res", "item", "domList", "index", "data", "l", "k", "Picture", "i", "openOption", "AnimatedUL", "p", "e", "Button"]
+}

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/CreativeModule/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type CreativeModuleDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype CreativeModuleType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: CreativeModuleDataType[]\n  }\n  className?: string\n}\n\nconst Item = ({ data, configuration }: { data: CreativeModuleDataType; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'text-info-primary aspect-h-[360] aspect-w-[296] relative flex-1 shrink-0 overflow-hidden md:basis-[296px]',\n        configuration?.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={data?.mobileImg?.url || data?.img?.url}\n          alt={data?.mobileImg?.alt || data?.img?.alt || ''}\n        />\n        <div className=\"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col\">\n          <Text html={data?.title} className=\"graphic-title truncate text-xl font-bold leading-[1.2]\" />\n          {data?.description && (\n            <Text html={data?.description} className=\"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CreativeModule = (props: CreativeModuleType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div className=\"laptop:block box-border hidden w-full overflow-hidden\">\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full cursor-pointer overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture\n                  source={item.img.url}\n                  className=\"size-full\"\n                  imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                />\n                <div className=\"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4\">\n                  {item.title && (\n                    <Text html={item.title} as=\"p\" className=\"desktop:text-[32px] laptop:text-2xl text-xl font-bold\" />\n                  )}\n                  {item.description && <Text html={item.description} className=\"desktop:text-lg text-sm font-bold\" />}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: productsTab || [],\n            configuration: {\n              shape,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.2,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(CreativeModule)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCQ,IAAAI,EAAA,6BApCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MACT,4GACAA,GAAe,QAAU,UAAY,cAAgB,eACrD,CACE,YAAaD,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,+DACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,yDAAyD,EAC3FA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEE,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAH,EAAM,UAAAI,CAAU,EAAID,EACtB,CAAE,YAAAE,EAAa,MAAAC,CAAM,EAAIN,EAE/B,SACE,oBACE,oBAAC,OAAI,UAAU,wDACb,mBAAC,QAAK,aAAW,MAAG,wCAAyCI,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,mEACAD,IAAU,UAAY,cAAgB,eACtC,sEACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WACC,OAAQA,EAAK,IAAI,IACjB,UAAU,YACV,aAAa,yEACf,KACA,QAAC,OAAI,UAAU,iGACZ,UAAAA,EAAK,UACJ,OAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,gBAAe,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,oCAAoC,GACnG,IArBKC,CAsBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6BACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBL,CAAS,EAC5C,KAAM,CACJ,KAAMC,GAAe,CAAC,EACtB,cAAe,CACb,MAAAC,CACF,CACF,EACA,MAAOP,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,CACjB,CACF,EACF,EACF,GACF,CAEJ,EAEA,IAAOR,KAAQ,cAAWW,CAAc",
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type CreativeModuleDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype CreativeModuleType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: CreativeModuleDataType[]\n  }\n  className?: string\n}\n\nconst Item = ({ data, configuration }: { data: CreativeModuleDataType; configuration?: any }) => {\n  return (\n    <div\n      className={cn(\n        'creativeModuleItem',\n        'text-info-primary aspect-h-[360] aspect-w-[296] relative flex-1 shrink-0 overflow-hidden md:basis-[296px]',\n        configuration?.shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div className=\"absolute inset-0\">\n        <Picture\n          className=\"h-full\"\n          imgClassName=\"h-full object-cover\"\n          source={data?.mobileImg?.url || data?.img?.url}\n          alt={data?.mobileImg?.alt || data?.img?.alt || ''}\n        />\n        <div className=\"z-1 absolute bottom-4 left-4 box-border flex w-full flex-col\">\n          <Text html={data?.title} className=\"graphic-title truncate text-xl font-bold leading-[1.2]\" />\n          {data?.description && (\n            <Text html={data?.description} className=\"graphic-title line-clamp-2 text-sm font-bold leading-[1.2]\" />\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst CreativeModule = (props: CreativeModuleType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div className={cn('creativeModuleBlock', 'laptop:block box-border hidden w-full overflow-hidden')}>\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full cursor-pointer overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  'lg-desktop:max-h-[480px] desktop:max-h-[384px] laptop:max-h-[288px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture\n                  source={item.img.url}\n                  className=\"size-full\"\n                  imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                />\n                <div className=\"lg-desktop:bottom-8 lg-desktop:left-8 desktop:bottom-6 desktop:left-6 absolute bottom-4 left-4 flex flex-col gap-[6px]\">\n                  {item.title && (\n                    <Text html={item.title} as=\"p\" className=\"desktop:text-[32px] laptop:text-2xl text-xl font-bold\" />\n                  )}\n                  {item.description && <Text html={item.description} className=\"desktop:text-lg text-sm font-bold\" />}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"laptop:hidden block w-full\">\n        <SwiperBox\n          id=\"CreativeModule\"\n          className={cn('!overflow-visible', className)}\n          data={{\n            list: productsTab || [],\n            configuration: {\n              shape,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.2,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(CreativeModule)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCQ,IAAAI,EAAA,6BArCRC,EAAmB,kCACnBC,EAAsB,oCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAmB9B,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MACT,qBACA,4GACAA,GAAe,QAAU,UAAY,cAAgB,eACrD,CACE,YAAaD,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,OAAI,UAAU,mBACb,oBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQA,GAAM,WAAW,KAAOA,GAAM,KAAK,IAC3C,IAAKA,GAAM,WAAW,KAAOA,GAAM,KAAK,KAAO,GACjD,KACA,QAAC,OAAI,UAAU,+DACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,yDAAyD,EAC3FA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,6DAA6D,GAE1G,GACF,EACF,EAIEE,EAAkBC,GAA8B,CACpD,KAAM,CAAE,KAAAH,EAAM,UAAAI,CAAU,EAAID,EACtB,CAAE,YAAAE,EAAa,MAAAC,CAAM,EAAIN,EAE/B,SACE,oBACE,oBAAC,OAAI,aAAW,MAAG,sBAAuB,uDAAuD,EAC/F,mBAAC,QAAK,aAAW,MAAG,wCAAyCI,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,mEACAD,IAAU,UAAY,cAAgB,eACtC,sEACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WACC,OAAQA,EAAK,IAAI,IACjB,UAAU,YACV,aAAa,yEACf,KACA,QAAC,OAAI,UAAU,yHACZ,UAAAA,EAAK,UACJ,OAAC,QAAK,KAAMA,EAAK,MAAO,GAAG,IAAI,UAAU,wDAAwD,EAElGA,EAAK,gBAAe,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,oCAAoC,GACnG,IArBKC,CAsBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,6BACb,mBAAC,EAAAC,QAAA,CACC,GAAG,iBACH,aAAW,MAAG,oBAAqBL,CAAS,EAC5C,KAAM,CACJ,KAAMC,GAAe,CAAC,EACtB,cAAe,CACb,MAAAC,CACF,CACF,EACA,MAAOP,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,CACjB,CACF,EACF,EACF,GACF,CAEJ,EAEA,IAAOR,KAAQ,cAAWW,CAAc",
   "names": ["CreativeModule_exports", "__export", "CreativeModule_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "Item", "data", "configuration", "CreativeModule", "props", "className", "productsTab", "shape", "item", "index", "SwiperBox"]
 }

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.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    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] 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 {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div>\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { shape, items = [] } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section data-ui-component-id=\"GraphicOverlay\" ref={ref} className={cn('text-info-primary', props.className)}>\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: { shape: shape, num: items.length, onVideoPlayBtnClick: handleVideoPlayBtnClick },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.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    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] 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 {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={lgButtonSize}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { shape, items = [] } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      className={cn('graphicOverlayBlock text-info-primary ', props.className)}\n    >\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: { shape: shape, num: items.length, onVideoPlayBtnClick: handleVideoPlayBtnClick },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
+  "mappings": "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",
   "names": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
 }