@anker-in/headless-ui 1.1.9-temp-120108 → 1.1.9-temp-120801

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var z=Object.create;var f=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var _=(e,s)=>{for(var o in s)f(e,o,{get:s[o],enumerable:!0})},k=(e,s,o,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of R(s))!Y.call(e,i)&&i!==o&&f(e,i,{get:()=>s[i],enumerable:!(c=j(s,i))||c.enumerable});return e};var b=(e,s,o)=>(o=e!=null?z(q(e)):{},k(s||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>k(f({},"__esModule",{value:!0}),e);var F={};_(F,{default:()=>Z});module.exports=A(F);var t=require("react/jsx-runtime"),M=require("react-responsive"),l=b(require("react")),h=require("../../helpers/utils.js"),I=require("../../shared/Styles.js"),V=b(require("../SwiperBox/index.js")),n=require("../../components/index.js"),C=b(require("../Title/index.js")),$=require("../VideoModal/index.js"),P=require("../TextModal/index.js"),g=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js");const a="image",m="graphic",Q=({data:e,configuration:s})=>{const o=(0,l.useRef)(null),c=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return(0,g.useExposure)(o,{componentType:a,componentName:m,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),(0,t.jsx)("div",{ref:o,className:(0,h.cn)(c(),"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,h.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsx)("a",{"aria-label":e?.title??e?.description,href:(0,x.trackUrlRef)(e?.href||"",`${a}_${m}`),className:"block size-full overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,t.jsx)(n.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.jsx)("div",{className:"block size-full overflow-hidden",children:(0,t.jsx)(n.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,h.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(n.Text,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(n.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"descTitle 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:i=>{i.preventDefault(),i.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 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:i=>{i.preventDefault(),i.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(n.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,x.trackUrlRef)(e?.href,`${a}_${m}`),"data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},N=l.default.forwardRef(({data:e,className:s},o)=>{const c=(0,M.useMediaQuery)({query:"(max-width: 768px)"}),i=(0,l.useRef)(null),[G,v]=(0,l.useState)(!1),[w,S]=(0,l.useState)(""),[B,D]=(0,l.useState)(""),[E,H]=(0,l.useState)(""),[L,y]=(0,l.useState)(null),[U,T]=(0,l.useState)(!1),u=p=>{const r=e?.items?.length>3,d=e?.items?.length>2;switch(p){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return e?.items?.length===1?1:r||d?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,l.useImperativeHandle)(o,()=>i.current),(0,g.useExposure)(i,{componentType:a,componentName:m,componentTitle:e?.title}),(0,l.useEffect)(()=>{const p=i.current?.querySelectorAll(".graphic-description");if(p&&p.length>0){let r=0;p.forEach(d=>{r=Math.max(r,d.offsetHeight)}),p.forEach(d=>{d.style.height=`${r}px`})}},[]),(0,t.jsxs)("div",{className:(0,h.cn)("graphicBlock",s),ref:i,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(C.default,{data:{title:e?.title}}),(0,t.jsx)(V.default,{id:"Graphic",className:(0,h.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(p,r)=>{v(!0),r?.isYouTube?D?.(r?.youtubeId||""):(S?.(r?.video?.url||""),H?.(r?.mobileVideo?.url||""))},onIconClick:p=>{T(!0),y(p)},title:e?.title}},Slide:Q,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u()},768:{spaceBetween:16,freeMode:!1,slidesPerView:u(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:u(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:u(1440)}}})]}),(0,t.jsx)($.VideoModal,{visible:G,youTubeId:B,onCloseModal:()=>v(!1),videoUrl:c&&E||w}),(0,t.jsx)(P.TextModal,{textVisible:U,extension:L?.extension,onCloseModal:()=>{T(!1),y(null)}})]})});N.displayName="Graphic";var Z=(0,I.withLayout)(N);
+"use strict";"use client";var z=Object.create;var f=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var _=(e,s)=>{for(var o in s)f(e,o,{get:s[o],enumerable:!0})},k=(e,s,o,c)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of R(s))!Y.call(e,l)&&l!==o&&f(e,l,{get:()=>s[l],enumerable:!(c=j(s,l))||c.enumerable});return e};var b=(e,s,o)=>(o=e!=null?z(q(e)):{},k(s||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>k(f({},"__esModule",{value:!0}),e);var F={};_(F,{default:()=>Z});module.exports=A(F);var t=require("react/jsx-runtime"),I=require("react-responsive"),i=b(require("react")),h=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),V=b(require("../SwiperBox/index.js")),n=require("../../components/index.js"),C=b(require("../Title/index.js")),$=require("../VideoModal/index.js"),P=require("../TextModal/index.js"),g=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js");const a="image",m="graphic",Q=({data:e,configuration:s})=>{const o=(0,i.useRef)(null),c=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return(0,g.useExposure)(o,{componentType:a,componentName:m,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),(0,t.jsx)("div",{ref:o,className:(0,h.cn)(c(),"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,h.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsx)("a",{"aria-label":e?.title??e?.description,href:(0,x.trackUrlRef)(e?.href||"",`${a}_${m}`),className:"block size-full overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,t.jsx)(n.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.jsx)("div",{className:"block size-full overflow-hidden",children:(0,t.jsx)(n.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,h.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(n.Text,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(n.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"descTitle 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:l=>{l.preventDefault(),l.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/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:l=>{l.preventDefault(),l.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(n.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,x.trackUrlRef)(e?.href,`${a}_${m}`),"data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},N=i.default.forwardRef(({data:e,className:s},o)=>{const c=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),l=(0,i.useRef)(null),[G,v]=(0,i.useState)(!1),[w,S]=(0,i.useState)(""),[B,D]=(0,i.useState)(""),[E,H]=(0,i.useState)(""),[L,T]=(0,i.useState)(null),[U,y]=(0,i.useState)(!1),u=p=>{const r=e?.items?.length>3,d=e?.items?.length>2;switch(p){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return e?.items?.length===1?1:r||d?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,i.useImperativeHandle)(o,()=>l.current),(0,g.useExposure)(l,{componentType:a,componentName:m,componentTitle:e?.title}),(0,i.useEffect)(()=>{const p=l.current?.querySelectorAll(".graphic-description");if(p&&p.length>0){let r=0;p.forEach(d=>{r=Math.max(r,d.offsetHeight)}),p.forEach(d=>{d.style.height=`${r}px`})}},[]),(0,t.jsxs)("div",{className:(0,h.cn)("graphicBlock",s),ref:l,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(C.default,{data:{title:e?.title}}),(0,t.jsx)(V.default,{id:"Graphic",className:(0,h.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(p,r)=>{v(!0),r?.isYouTube?D?.(r?.youtubeId||""):(S?.(r?.video?.url||""),H?.(r?.mobileVideo?.url||""))},onIconClick:p=>{y(!0),T(p)},title:e?.title}},Slide:Q,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u()},768:{spaceBetween:16,freeMode:!1,slidesPerView:u(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:u(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:u(1440)}}})]}),(0,t.jsx)($.VideoModal,{visible:G,youTubeId:B,onCloseModal:()=>v(!1),videoUrl:c&&E||w}),(0,t.jsx)(P.TextModal,{textVisible:U,extension:L?.extension,onCloseModal:()=>{y(!1),T(null)}})]})});N.displayName="Graphic";var Z=(0,M.withLayout)(N);
 //# 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, 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 ref = useRef<HTMLDivElement>(null)\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  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\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        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\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            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\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>\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=\"spanTitle 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=\"descTitle 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-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {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-8 items-center justify-center overflow-hidden 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=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\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        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\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              title: data?.title,\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, 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'\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 ref = useRef<HTMLDivElement>(null)\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  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\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        <div\n          className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\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            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\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>\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=\"spanTitle 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=\"descTitle 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-8 items-center justify-center rounded-full bg-white/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-8 items-center justify-center overflow-hidden rounded-full bg-white/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=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\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        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\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              title: data?.title,\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", "ref", "handleAspect", "e", "Graphic", "React", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(o,l)=>{for(var d in l)n(o,d,{get:l[d],enumerable:!0})},h=(o,l,d,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of f(l))!u.call(o,a)&&a!==d&&n(o,a,{get:()=>l[a],enumerable:!(s=x(l,a))||s.enumerable});return o};var v=o=>h(n({},"__esModule",{value:!0}),o);var k={};g(k,{default:()=>N});module.exports=v(k);var e=require("react/jsx-runtime"),i=require("../../helpers/utils.js"),w=require("../SwiperBox/index.js"),c=require("../../shared/Styles.js"),p=require("../../components/gird.js"),r=require("../../components/index.js");const b=o=>{const{data:l,className:d}=o,{productsTab:s,shape:a}=l;return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:(0,i.cn)("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:(0,e.jsx)(p.Grid,{className:(0,i.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",d),children:s?.map((t,m)=>(0,e.jsxs)(p.GridItem,{span:t.span,className:(0,i.cn)("text-info-primary relative w-full overflow-hidden",a==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":t?.theme==="dark"}),children:[(0,e.jsx)(r.Picture,{source:t?.img?.url,className:"size-full",imgClassName:""}),(0,e.jsxs)("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4",children:[t?.title&&(0,e.jsx)(r.Text,{html:t?.title,as:"p",className:"lg-desktop:text-[24px] line-clamp-2 text-[20px] font-bold leading-[1.2]"}),t?.description&&(0,e.jsx)(r.Text,{html:t?.description,className:"desktop:text-lg line-clamp-2 text-sm font-bold"})]})]},m))})}),(0,e.jsx)("div",{className:"tablet:hidden block text-[#1D1D1F]",children:(0,e.jsx)("div",{className:" flex flex-wrap gap-[12px]",children:s?.map((t,m)=>(0,e.jsxs)("div",{className:(0,i.cn)("text-info-primary relative overflow-hidden",a==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":t?.theme==="dark"},t?.fullWidth==="true"?"w-full flex-none":" w-[calc(50%-6px)]"),children:[(0,e.jsx)(r.Picture,{source:t?.mobileImg?.url,className:"size-full",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:"footBottomMob absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4",children:[t?.title&&(0,e.jsx)(r.Text,{html:t?.title,as:"p",className:"line-clamp-3 text-xl font-bold leading-[1.2]"}),t?.description&&(0,e.jsx)(r.Text,{html:t?.description,className:"line-clamp-2 text-xl font-bold"})]})]},m))})})]})};var N=(0,c.withLayout)(b);
+"use strict";"use client";var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(o,l)=>{for(var d in l)n(o,d,{get:l[d],enumerable:!0})},h=(o,l,d,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of f(l))!u.call(o,a)&&a!==d&&n(o,a,{get:()=>l[a],enumerable:!(s=x(l,a))||s.enumerable});return o};var v=o=>h(n({},"__esModule",{value:!0}),o);var k={};g(k,{default:()=>N});module.exports=v(k);var e=require("react/jsx-runtime"),i=require("../../helpers/utils.js"),c=require("../../shared/Styles.js"),p=require("../../components/grid.js"),r=require("../../components/index.js");const b=o=>{const{data:l,className:d}=o,{productsTab:s,shape:a}=l;return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:(0,i.cn)("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]"),children:(0,e.jsx)(p.Grid,{className:(0,i.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",d),children:s?.map((t,m)=>(0,e.jsxs)(p.GridItem,{span:t.span,className:(0,i.cn)("text-info-primary relative w-full overflow-hidden",a==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":t?.theme==="dark"}),children:[(0,e.jsx)(r.Picture,{source:t?.img?.url,className:"size-full",imgClassName:""}),(0,e.jsxs)("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4",children:[t?.title&&(0,e.jsx)(r.Text,{html:t?.title,as:"p",className:"lg-desktop:text-[24px] line-clamp-2 text-[20px] font-bold leading-[1.2]"}),t?.description&&(0,e.jsx)(r.Text,{html:t?.description,className:"desktop:text-lg line-clamp-2 text-sm font-bold"})]})]},m))})}),(0,e.jsx)("div",{className:"tablet:hidden block text-[#080A0F]",children:(0,e.jsx)("div",{className:" flex flex-wrap gap-[12px]",children:s?.map((t,m)=>(0,e.jsxs)("div",{className:(0,i.cn)("text-info-primary relative overflow-hidden",a==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":t?.theme==="dark"},t?.fullWidth==="true"?"w-full flex-none":" w-[calc(50%-6px)]"),children:[(0,e.jsx)(r.Picture,{source:t?.mobileImg?.url,className:"size-full",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:"footBottomMob absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4",children:[t?.title&&(0,e.jsx)(r.Text,{html:t?.title,as:"p",className:"line-clamp-3 text-xl font-bold leading-[1.2]"}),t?.description&&(0,e.jsx)(r.Text,{html:t?.description,className:"line-clamp-2 text-xl font-bold"})]})]},m))})})]})};var N=(0,c.withLayout)(b);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicMore/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'\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ntype GraphicMoreType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n  className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div\n        className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}\n      >\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 overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item?.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item?.img?.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n                  {item?.title && (\n                    <Text\n                      html={item?.title}\n                      as=\"p\"\n                      className=\"lg-desktop:text-[24px] line-clamp-2 text-[20px] font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {item?.description && (\n                    <Text html={item?.description} className=\"desktop:text-lg line-clamp-2 text-sm font-bold\" />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"tablet:hidden block text-[#1D1D1F]\">\n        <div className=\" flex flex-wrap gap-[12px]\">\n          {productsTab?.map((it, ind) => {\n            return (\n              <div\n                key={ind}\n                className={cn(\n                  'text-info-primary relative overflow-hidden',\n                  shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                  { 'aiui-dark': it?.theme === 'dark' },\n                  it?.fullWidth === 'true'\n                    ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n                    : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n                )}\n              >\n                <Picture source={it?.mobileImg?.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"footBottomMob absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n                  {it?.title && (\n                    <Text html={it?.title} as=\"p\" className=\"line-clamp-3 text-xl font-bold leading-[1.2]\" />\n                  )}\n                  {it?.description && <Text html={it?.description} className=\"line-clamp-2 text-xl font-bold\" />}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
-  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BI,IAAAI,EAAA,6BA5BJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,SACE,oBACE,oBAAC,OACC,aAAW,MAAG,sBAAuB,sEAAsE,EAE3G,mBAAC,QAAK,aAAW,MAAG,wCAAyCC,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,oBAAC,WAAQ,OAAQA,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,KACvE,QAAC,OAAI,UAAU,+IACZ,UAAAA,GAAM,UACL,OAAC,QACC,KAAMA,GAAM,MACZ,GAAG,IACH,UAAU,0EACZ,EAEDA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,iDAAiD,GAE9F,IAvBKC,CAwBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OAAI,UAAU,6BACZ,SAAAH,GAAa,IAAI,CAACI,EAAIC,OAEnB,QAAC,OAEC,aAAW,MACT,6CACAJ,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,oBAAC,WAAQ,OAAQA,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,KAC9F,QAAC,OAAI,UAAU,sFACZ,UAAAA,GAAI,UACH,OAAC,QAAK,KAAMA,GAAI,MAAO,GAAG,IAAI,UAAU,+CAA+C,EAExFA,GAAI,gBAAe,OAAC,QAAK,KAAMA,GAAI,YAAa,UAAU,iCAAiC,GAC9F,IAhBKC,CAiBP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOjB,KAAQ,cAAWQ,CAAW",
-  "names": ["GraphicMore_exports", "__export", "GraphicMore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind"]
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ntype GraphicMoreType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n  className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div\n        className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]')}\n      >\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 overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item?.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item?.img?.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n                  {item?.title && (\n                    <Text\n                      html={item?.title}\n                      as=\"p\"\n                      className=\"lg-desktop:text-[24px] line-clamp-2 text-[20px] font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {item?.description && (\n                    <Text html={item?.description} className=\"desktop:text-lg line-clamp-2 text-sm font-bold\" />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"tablet:hidden block text-[#080A0F]\">\n        <div className=\" flex flex-wrap gap-[12px]\">\n          {productsTab?.map((it, ind) => {\n            return (\n              <div\n                key={ind}\n                className={cn(\n                  'text-info-primary relative overflow-hidden',\n                  shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                  { 'aiui-dark': it?.theme === 'dark' },\n                  it?.fullWidth === 'true'\n                    ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n                    : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n                )}\n              >\n                <Picture source={it?.mobileImg?.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"footBottomMob absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n                  {it?.title && (\n                    <Text html={it?.title} as=\"p\" className=\"line-clamp-3 text-xl font-bold leading-[1.2]\" />\n                  )}\n                  {it?.description && <Text html={it?.description} className=\"line-clamp-2 text-xl font-bold\" />}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
+  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4BI,IAAAI,EAAA,6BA3BJC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,SACE,oBACE,oBAAC,OACC,aAAW,MAAG,sBAAuB,sEAAsE,EAE3G,mBAAC,QAAK,aAAW,MAAG,wCAAyCC,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,oBAAC,WAAQ,OAAQA,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,KACvE,QAAC,OAAI,UAAU,+IACZ,UAAAA,GAAM,UACL,OAAC,QACC,KAAMA,GAAM,MACZ,GAAG,IACH,UAAU,0EACZ,EAEDA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,iDAAiD,GAE9F,IAvBKC,CAwBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OAAI,UAAU,6BACZ,SAAAH,GAAa,IAAI,CAACI,EAAIC,OAEnB,QAAC,OAEC,aAAW,MACT,6CACAJ,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,oBAAC,WAAQ,OAAQA,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,KAC9F,QAAC,OAAI,UAAU,sFACZ,UAAAA,GAAI,UACH,OAAC,QAAK,KAAMA,GAAI,MAAO,GAAG,IAAI,UAAU,+CAA+C,EAExFA,GAAI,gBAAe,OAAC,QAAK,KAAMA,GAAI,YAAa,UAAU,iCAAiC,GAC9F,IAhBKC,CAiBP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOhB,KAAQ,cAAWO,CAAW",
+  "names": ["GraphicMore_exports", "__export", "GraphicMore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_Styles", "import_grid", "import_components", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind"]
 }

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

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

package/dist/cjs/biz-components/HeaderNavigation/NavProvider.d.ts

@@ -20,13 +20,13 @@ interface NavContextType {
     isMobile?: boolean;
     payloadData: any;
     currentMenu?: HeaderNavigationMenu;
-    setCurrentMenu?: (menu: HeaderNavigationMenu) => void;
+    setCurrentMenu?: (_menu: HeaderNavigationMenu) => void;
     currentSeriesMetadata?: any;
-    setCurrentSeriesMetadata?: (metadata: any) => void;
+    setCurrentSeriesMetadata?: (_metadata: any) => void;
     subSubCategory?: any;
-    setSubSubCategory?: (category: any) => void;
-    onSeriesProductClick?: (seriesProduct: any, position: number, seriesLabel?: string) => void;
-    onSidebarNavClick?: (series: any, index: number, subSubindex?: number) => void;
+    setSubSubCategory?: (_category: any) => void;
+    onSeriesProductClick?: (_seriesProduct: any, _position: number, _seriesLabel?: string) => void;
+    onSidebarNavClick?: (_series: any, _index: number, _subSubindex?: number) => void;
 }
 export declare const NavContext: React.Context<NavContextType>;
 export declare const useNavContext: () => NavContextType;

package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js

@@ -1,2 +1,2 @@
-"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var T=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},M=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of l(e))!E.call(t,o)&&o!==n&&s(t,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return t};var N=t=>M(s({},"__esModule",{value:!0}),t);var x={};T(x,{NavContext:()=>u,default:()=>m,useNavContext:()=>b});module.exports=N(x);var C=require("react/jsx-runtime"),r=require("react"),c=require("./types.js");const y={isMobile:!1,payloadData:{},buildProps:{products:[],categories:{}},currentMenu:c.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{},currentSeriesMetadata:{},setCurrentSeriesMetadata:()=>{},onSeriesProductClick:(t,e,n)=>{},onSidebarNavClick:t=>{},cartCount:0},u=(0,r.createContext)(y),b=()=>{if(!(0,r.useContext)(u))throw new Error("useNavContext must be used in <NavProvider>");return(0,r.useContext)(u)},_=(t,e)=>{switch(e.type){case"SET_CURRENT_MENU":return{...t,currentMenu:e.value};case"SET_CURRENT_SERIES_METADATA":return{...t,currentSeriesMetadata:e.value};case"SET_SUB_SUB_CATEGORY":return{...t,subSubCategory:e.value}}},R=({children:t,...e})=>{const[n,a]=(0,r.useReducer)(_,{...y,currentMenu:c.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{}}),o=(0,r.useCallback)(i=>a({type:"SET_CURRENT_MENU",value:i}),[a]),d=(0,r.useCallback)(i=>a({type:"SET_CURRENT_SERIES_METADATA",value:i}),[a]),v=(0,r.useCallback)(i=>a({type:"SET_SUB_SUB_CATEGORY",value:i}),[a]),S=(0,r.useMemo)(()=>({...n,setCurrentMenu:o,setCurrentSeriesMetadata:d,setSubSubCategory:v}),[o,d,v,n]);return(0,C.jsx)(u.Provider,{value:{...S,...e},children:t})};var m=R;
+"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var E=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},T=(t,e,n,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of _(e))!l.call(t,o)&&o!==n&&s(t,o,{get:()=>e[o],enumerable:!(a=p(e,o))||a.enumerable});return t};var M=t=>T(s({},"__esModule",{value:!0}),t);var x={};E(x,{NavContext:()=>u,default:()=>m,useNavContext:()=>N});module.exports=M(x);var C=require("react/jsx-runtime"),r=require("react"),c=require("./types.js");const y={isMobile:!1,payloadData:{},buildProps:{products:[],categories:{}},currentMenu:c.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{},currentSeriesMetadata:{},setCurrentSeriesMetadata:()=>{},onSeriesProductClick:(t,e,n)=>{},onSidebarNavClick:t=>{},cartCount:0},u=(0,r.createContext)(y),N=()=>{if(!(0,r.useContext)(u))throw new Error("useNavContext must be used in <NavProvider>");return(0,r.useContext)(u)},b=(t,e)=>{switch(e.type){case"SET_CURRENT_MENU":return{...t,currentMenu:e.value};case"SET_CURRENT_SERIES_METADATA":return{...t,currentSeriesMetadata:e.value};case"SET_SUB_SUB_CATEGORY":return{...t,subSubCategory:e.value}}},R=({children:t,...e})=>{const[n,a]=(0,r.useReducer)(b,{...y,currentMenu:c.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{}}),o=(0,r.useCallback)(i=>a({type:"SET_CURRENT_MENU",value:i}),[a]),d=(0,r.useCallback)(i=>a({type:"SET_CURRENT_SERIES_METADATA",value:i}),[a]),v=(0,r.useCallback)(i=>a({type:"SET_SUB_SUB_CATEGORY",value:i}),[a]),S=(0,r.useMemo)(()=>({...n,setCurrentMenu:o,setCurrentSeriesMetadata:d,setSubSubCategory:v}),[o,d,v,n]);return(0,C.jsx)(u.Provider,{value:{...S,...e},children:t})};var m=R;
 //# sourceMappingURL=NavProvider.js.map

package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/NavProvider.tsx"],
-  "sourcesContent": ["import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react'\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport type { UserProfile } from './types.js'\n\ninterface NavContextType {\n  buildProps: {\n    products?: Product[] // \u4EA7\u54C1\u6570\u636E\n    categories?: Record<string, any> // \u5206\u7C7B\u6570\u636E\n  }\n  cartCount: number\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n    join?: () => void\n    login?: () => void\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  isMobile?: boolean\n  payloadData: any\n  currentMenu?: HeaderNavigationMenu // \u5F53\u524D\u83DC\u5355\n  setCurrentMenu?: (menu: HeaderNavigationMenu) => void // \u8BBE\u7F6E\u5F53\u524D\u83DC\u5355\n  currentSeriesMetadata?: any // \u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n  setCurrentSeriesMetadata?: (metadata: any) => void // \u8BBE\u7F6E\u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n  subSubCategory?: any // \u5B50\u5B50\u5206\u7C7B\n  setSubSubCategory?: (category: any) => void // \u8BBE\u7F6E\u5B50\u5B50\u5206\u7C7B\n  onSeriesProductClick?: (seriesProduct: any, position: number, seriesLabel?: string) => void // \u8BBE\u7F6E\u7CFB\u5217\u4EA7\u54C1\u70B9\u51FB\n  onSidebarNavClick?: (series: any, index: number, subSubindex?: number) => void // \u8BBE\u7F6E\u4FA7\u8FB9\u680F\u5BFC\u822A\u70B9\u51FB\n}\n\nconst initialState: NavContextType = {\n  isMobile: false,\n  payloadData: {},\n  buildProps: {\n    products: [],\n    categories: {},\n  },\n  currentMenu: HeaderNavigationMenu.Primary,\n  setCurrentMenu: () => {},\n  currentSeriesMetadata: {},\n  setCurrentSeriesMetadata: () => {},\n  onSeriesProductClick: (seriesProduct: any, position: number, seriesLabel?: string) => {},\n  onSidebarNavClick: (series: any) => {},\n  cartCount: 0,\n}\n\ntype Action =\n  | {\n      type: 'SET_CURRENT_MENU'\n      value: HeaderNavigationMenu\n    }\n  | {\n      type: 'SET_CURRENT_SERIES_METADATA'\n      value: any\n    }\n  | {\n      type: 'SET_SUB_SUB_CATEGORY'\n      value: any\n    }\nexport const NavContext = createContext<NavContextType>(initialState)\n\nexport const useNavContext = () => {\n  const context = useContext(NavContext)\n  if (!context) {\n    throw new Error('useNavContext must be used in <NavProvider>')\n  }\n  return useContext(NavContext)\n}\n\nconst reducer = (state: NavContextType, action: Action) => {\n  switch (action.type) {\n    case 'SET_CURRENT_MENU': {\n      return {\n        ...state,\n        currentMenu: action.value,\n      }\n    }\n    case 'SET_CURRENT_SERIES_METADATA': {\n      return {\n        ...state,\n        currentSeriesMetadata: action.value,\n      }\n    }\n    case 'SET_SUB_SUB_CATEGORY': {\n      return {\n        ...state,\n        subSubCategory: action.value,\n      }\n    }\n  }\n}\n\nconst NavProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & NavContextType) => {\n  const [state, dispatch] = useReducer(reducer, {\n    ...initialState,\n    currentMenu: HeaderNavigationMenu.Primary,\n    setCurrentMenu: () => {},\n  })\n\n  const setCurrentMenu = useCallback(\n    (value: HeaderNavigationMenu) => {\n      return dispatch({ type: 'SET_CURRENT_MENU', value })\n    },\n    [dispatch]\n  )\n\n  const setCurrentSeriesMetadata = useCallback(\n    (value: any) => {\n      return dispatch({ type: 'SET_CURRENT_SERIES_METADATA', value })\n    },\n    [dispatch]\n  )\n\n  const setSubSubCategory = useCallback(\n    (value: any) => {\n      return dispatch({ type: 'SET_SUB_SUB_CATEGORY', value })\n    },\n    [dispatch]\n  )\n\n  const value = useMemo(\n    () => ({\n      ...state,\n      setCurrentMenu,\n      setCurrentSeriesMetadata,\n      setSubSubCategory,\n    }),\n    [setCurrentMenu, setCurrentSeriesMetadata, setSubSubCategory, state]\n  )\n\n  return <NavContext.Provider value={{ ...value, ...rest }}>{children}</NavContext.Provider>\n}\n\nexport default NavProvider\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,YAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAL,GAyIS,IAAAM,EAAA,6BAzITC,EAAmF,iBAEnFC,EAAqC,sBA8BrC,MAAMC,EAA+B,CACnC,SAAU,GACV,YAAa,CAAC,EACd,WAAY,CACV,SAAU,CAAC,EACX,WAAY,CAAC,CACf,EACA,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,EACvB,sBAAuB,CAAC,EACxB,yBAA0B,IAAM,CAAC,EACjC,qBAAsB,CAACC,EAAoBC,EAAkBC,IAAyB,CAAC,EACvF,kBAAoBC,GAAgB,CAAC,EACrC,UAAW,CACb,EAeaX,KAAa,iBAA8BO,CAAY,EAEvDL,EAAgB,IAAM,CAEjC,GAAI,IADY,cAAWF,CAAU,EAEnC,MAAM,IAAI,MAAM,6CAA6C,EAE/D,SAAO,cAAWA,CAAU,CAC9B,EAEMY,EAAU,CAACC,EAAuBC,IAAmB,CACzD,OAAQA,EAAO,KAAM,CACnB,IAAK,mBACH,MAAO,CACL,GAAGD,EACH,YAAaC,EAAO,KACtB,EAEF,IAAK,8BACH,MAAO,CACL,GAAGD,EACH,sBAAuBC,EAAO,KAChC,EAEF,IAAK,uBACH,MAAO,CACL,GAAGD,EACH,eAAgBC,EAAO,KACzB,CAEJ,CACF,EAEMC,EAAc,CAAC,CACnB,SAAAC,EACA,GAAGC,CACL,IAEuB,CACrB,KAAM,CAACJ,EAAOK,CAAQ,KAAI,cAAWN,EAAS,CAC5C,GAAGL,EACH,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,CACzB,CAAC,EAEKY,KAAiB,eACpBC,GACQF,EAAS,CAAE,KAAM,mBAAoB,MAAAE,CAAM,CAAC,EAErD,CAACF,CAAQ,CACX,EAEMG,KAA2B,eAC9BD,GACQF,EAAS,CAAE,KAAM,8BAA+B,MAAAE,CAAM,CAAC,EAEhE,CAACF,CAAQ,CACX,EAEMI,KAAoB,eACvBF,GACQF,EAAS,CAAE,KAAM,uBAAwB,MAAAE,CAAM,CAAC,EAEzD,CAACF,CAAQ,CACX,EAEME,KAAQ,WACZ,KAAO,CACL,GAAGP,EACH,eAAAM,EACA,yBAAAE,EACA,kBAAAC,CACF,GACA,CAACH,EAAgBE,EAA0BC,EAAmBT,CAAK,CACrE,EAEA,SAAO,OAACb,EAAW,SAAX,CAAoB,MAAO,CAAE,GAAGoB,EAAO,GAAGH,CAAK,EAAI,SAAAD,EAAS,CACtE,EAEA,IAAOf,EAAQc",
-  "names": ["NavProvider_exports", "__export", "NavContext", "NavProvider_default", "useNavContext", "__toCommonJS", "import_jsx_runtime", "import_react", "import_types", "initialState", "seriesProduct", "position", "seriesLabel", "series", "reducer", "state", "action", "NavProvider", "children", "rest", "dispatch", "setCurrentMenu", "value", "setCurrentSeriesMetadata", "setSubSubCategory"]
+  "sourcesContent": ["import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react'\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport type { UserProfile } from './types.js'\n\ninterface NavContextType {\n  buildProps: {\n    products?: Product[] // \u4EA7\u54C1\u6570\u636E\n    categories?: Record<string, any> // \u5206\u7C7B\u6570\u636E\n  }\n  cartCount: number\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n    join?: () => void\n    login?: () => void\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  isMobile?: boolean\n  payloadData: any\n  currentMenu?: HeaderNavigationMenu // \u5F53\u524D\u83DC\u5355\n  setCurrentMenu?: (_menu: HeaderNavigationMenu) => void // \u8BBE\u7F6E\u5F53\u524D\u83DC\u5355\n  currentSeriesMetadata?: any // \u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n  setCurrentSeriesMetadata?: (_metadata: any) => void // \u8BBE\u7F6E\u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n  subSubCategory?: any // \u5B50\u5B50\u5206\u7C7B\n  setSubSubCategory?: (_category: any) => void // \u8BBE\u7F6E\u5B50\u5B50\u5206\u7C7B\n  onSeriesProductClick?: (_seriesProduct: any, _position: number, _seriesLabel?: string) => void // \u8BBE\u7F6E\u7CFB\u5217\u4EA7\u54C1\u70B9\u51FB\n  onSidebarNavClick?: (_series: any, _index: number, _subSubindex?: number) => void // \u8BBE\u7F6E\u4FA7\u8FB9\u680F\u5BFC\u822A\u70B9\u51FB\n}\n\nconst initialState: NavContextType = {\n  isMobile: false,\n  payloadData: {},\n  buildProps: {\n    products: [],\n    categories: {},\n  },\n  currentMenu: HeaderNavigationMenu.Primary,\n  setCurrentMenu: () => {},\n  currentSeriesMetadata: {},\n  setCurrentSeriesMetadata: () => {},\n  onSeriesProductClick: (_seriesProduct: any, _position: number, _seriesLabel?: string) => {},\n  onSidebarNavClick: (_series: any) => {},\n  cartCount: 0,\n}\n\ntype Action =\n  | {\n      type: 'SET_CURRENT_MENU'\n      value: HeaderNavigationMenu\n    }\n  | {\n      type: 'SET_CURRENT_SERIES_METADATA'\n      value: any\n    }\n  | {\n      type: 'SET_SUB_SUB_CATEGORY'\n      value: any\n    }\nexport const NavContext = createContext<NavContextType>(initialState)\n\nexport const useNavContext = () => {\n  const context = useContext(NavContext)\n  if (!context) {\n    throw new Error('useNavContext must be used in <NavProvider>')\n  }\n  return useContext(NavContext)\n}\n\nconst reducer = (state: NavContextType, action: Action) => {\n  switch (action.type) {\n    case 'SET_CURRENT_MENU': {\n      return {\n        ...state,\n        currentMenu: action.value,\n      }\n    }\n    case 'SET_CURRENT_SERIES_METADATA': {\n      return {\n        ...state,\n        currentSeriesMetadata: action.value,\n      }\n    }\n    case 'SET_SUB_SUB_CATEGORY': {\n      return {\n        ...state,\n        subSubCategory: action.value,\n      }\n    }\n  }\n}\n\nconst NavProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & NavContextType) => {\n  const [state, dispatch] = useReducer(reducer, {\n    ...initialState,\n    currentMenu: HeaderNavigationMenu.Primary,\n    setCurrentMenu: () => {},\n  })\n\n  const setCurrentMenu = useCallback(\n    (value: HeaderNavigationMenu) => {\n      return dispatch({ type: 'SET_CURRENT_MENU', value })\n    },\n    [dispatch]\n  )\n\n  const setCurrentSeriesMetadata = useCallback(\n    (value: any) => {\n      return dispatch({ type: 'SET_CURRENT_SERIES_METADATA', value })\n    },\n    [dispatch]\n  )\n\n  const setSubSubCategory = useCallback(\n    (value: any) => {\n      return dispatch({ type: 'SET_SUB_SUB_CATEGORY', value })\n    },\n    [dispatch]\n  )\n\n  const value = useMemo(\n    () => ({\n      ...state,\n      setCurrentMenu,\n      setCurrentSeriesMetadata,\n      setSubSubCategory,\n    }),\n    [setCurrentMenu, setCurrentSeriesMetadata, setSubSubCategory, state]\n  )\n\n  return <NavContext.Provider value={{ ...value, ...rest }}>{children}</NavContext.Provider>\n}\n\nexport default NavProvider\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,YAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAL,GAyIS,IAAAM,EAAA,6BAzITC,EAAmF,iBAEnFC,EAAqC,sBA8BrC,MAAMC,EAA+B,CACnC,SAAU,GACV,YAAa,CAAC,EACd,WAAY,CACV,SAAU,CAAC,EACX,WAAY,CAAC,CACf,EACA,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,EACvB,sBAAuB,CAAC,EACxB,yBAA0B,IAAM,CAAC,EACjC,qBAAsB,CAACC,EAAqBC,EAAmBC,IAA0B,CAAC,EAC1F,kBAAoBC,GAAiB,CAAC,EACtC,UAAW,CACb,EAeaX,KAAa,iBAA8BO,CAAY,EAEvDL,EAAgB,IAAM,CAEjC,GAAI,IADY,cAAWF,CAAU,EAEnC,MAAM,IAAI,MAAM,6CAA6C,EAE/D,SAAO,cAAWA,CAAU,CAC9B,EAEMY,EAAU,CAACC,EAAuBC,IAAmB,CACzD,OAAQA,EAAO,KAAM,CACnB,IAAK,mBACH,MAAO,CACL,GAAGD,EACH,YAAaC,EAAO,KACtB,EAEF,IAAK,8BACH,MAAO,CACL,GAAGD,EACH,sBAAuBC,EAAO,KAChC,EAEF,IAAK,uBACH,MAAO,CACL,GAAGD,EACH,eAAgBC,EAAO,KACzB,CAEJ,CACF,EAEMC,EAAc,CAAC,CACnB,SAAAC,EACA,GAAGC,CACL,IAEuB,CACrB,KAAM,CAACJ,EAAOK,CAAQ,KAAI,cAAWN,EAAS,CAC5C,GAAGL,EACH,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,CACzB,CAAC,EAEKY,KAAiB,eACpBC,GACQF,EAAS,CAAE,KAAM,mBAAoB,MAAAE,CAAM,CAAC,EAErD,CAACF,CAAQ,CACX,EAEMG,KAA2B,eAC9BD,GACQF,EAAS,CAAE,KAAM,8BAA+B,MAAAE,CAAM,CAAC,EAEhE,CAACF,CAAQ,CACX,EAEMI,KAAoB,eACvBF,GACQF,EAAS,CAAE,KAAM,uBAAwB,MAAAE,CAAM,CAAC,EAEzD,CAACF,CAAQ,CACX,EAEME,KAAQ,WACZ,KAAO,CACL,GAAGP,EACH,eAAAM,EACA,yBAAAE,EACA,kBAAAC,CACF,GACA,CAACH,EAAgBE,EAA0BC,EAAmBT,CAAK,CACrE,EAEA,SAAO,OAACb,EAAW,SAAX,CAAoB,MAAO,CAAE,GAAGoB,EAAO,GAAGH,CAAK,EAAI,SAAAD,EAAS,CACtE,EAEA,IAAOf,EAAQc",
+  "names": ["NavProvider_exports", "__export", "NavContext", "NavProvider_default", "useNavContext", "__toCommonJS", "import_jsx_runtime", "import_react", "import_types", "initialState", "_seriesProduct", "_position", "_seriesLabel", "_series", "reducer", "state", "action", "NavProvider", "children", "rest", "dispatch", "setCurrentMenu", "value", "setCurrentSeriesMetadata", "setSubSubCategory"]
 }