@anker-in/headless-ui 1.2.2 → 1.2.3-alpha.1778583232121

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

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

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

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

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

@@ -1,4 +1,4 @@
-"use strict";var k=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var M=(t,a)=>{for(var p in a)k(t,p,{get:a[p],enumerable:!0})},V=(t,a,p,r)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of K(a))!j.call(t,l)&&l!==p&&k(t,l,{get:()=>a[l],enumerable:!(r=H(a,l))||r.enumerable});return t};var R=t=>V(k({},"__esModule",{value:!0}),t);var Q={};M(Q,{canSearch:()=>S,default:()=>O});module.exports=R(Q);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),v=require("../HeaderNavigation/icons/index.js"),i=require("react"),D=require("../AiuiProvider/index.js"),m=require("../../helpers/utils.js"),F=require("../../shared/Styles.js"),u=require("./types.js"),I=require("es-toolkit"),c=require("../../helpers/utils.js");const S=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),L=(0,i.forwardRef)(({data:t,onSearch:a,onClose:p,searchResult:r,isSearching:l,keywords:g,className:$,...E},P)=>{const{locale:n="us",copyWriting:U}=(0,D.useAiuiContext)(),[d,T]=(0,i.useState)(""),[y,N]=(0,i.useState)(!1),f=(0,i.useRef)(null);(0,i.useEffect)(()=>{f.current&&f.current.focus({preventScroll:!0})},[]);const B=(0,I.debounce)(o=>{a(o)},300),A=(0,i.useCallback)(o=>{o.key==="Enter"&&!y&&window.open((0,m.getLocalizedPath)(`${t?.moreLink}?q=${d.toLowerCase()}`,n),"_self")},[y,d,n,t?.moreLink]),_=(0,i.useMemo)(()=>Array.isArray(g)&&g?.length?g.map(o=>o.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(o=>o.popularWord):[],[g,t?.popularWords]),z=(0,i.useCallback)(o=>{switch(o.__typename||o.type){case"Product":return(0,m.getLocalizedPath)(`/products${o.path}?q=${d.toLowerCase()}`,n);case"Article":return(0,m.getLocalizedPath)(`/blogs/${o.blog.handle}/${o.handle.replace("storefront-","")}?q=${d.toLowerCase()}`,n);default:break}},[d,n]),w=(0,i.useMemo)(()=>{if(d){if(r?.totalCount)return u.SearchStatus.Predict;if(!l)return u.SearchStatus.Empty}else return u.SearchStatus.Default},[r?.totalCount,d,l]);return(0,e.jsxs)(s.Container,{childClassName:"!bg-white",...E,className:(0,c.cn)("relative",$),ref:P,children:[(0,e.jsx)("style",{children:`
+"use strict";var x=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var j=(t,i)=>{for(var p in i)x(t,p,{get:i[p],enumerable:!0})},M=(t,i,p,l)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of H(i))!K.call(t,n)&&n!==p&&x(t,n,{get:()=>i[n],enumerable:!(l=G(i,n))||l.enumerable});return t};var V=t=>M(x({},"__esModule",{value:!0}),t);var O={};j(O,{canSearch:()=>I,default:()=>J});module.exports=V(O);var e=require("react/jsx-runtime"),s=require("../../components/index.js"),h=require("../HeaderNavigation/icons/index.js"),r=require("react"),C=require("../AiuiProvider/index.js"),a=require("../../helpers/utils.js"),D=require("../../shared/Styles.js"),g=require("./types.js"),F=require("es-toolkit");const I=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),w=(0,r.forwardRef)(({data:t,onSearch:i,onClose:p,searchResult:l,isSearching:n,keywords:m,className:S,...$},E)=>{const{locale:c="us",copyWriting:Q}=(0,C.useAiuiContext)(),[d,P]=(0,r.useState)(""),[k,y]=(0,r.useState)(!1),v=(0,r.useRef)(null);(0,r.useEffect)(()=>{v.current&&v.current.focus({preventScroll:!0})},[]);const T=(0,F.debounce)(o=>{i(o)},300),B=(0,r.useCallback)(o=>{o.key==="Enter"&&!k&&window.open((0,a.getLocalizedPath)(`${t?.moreLink}?q=${d.toLowerCase()}`,c),"_self")},[k,d,c,t?.moreLink]),A=(0,r.useMemo)(()=>Array.isArray(m)&&m?.length?m.map(o=>o.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(o=>o.popularWord):[],[m,t?.popularWords]),_=(0,r.useCallback)(o=>{switch(o.__typename||o.type){case"Product":return(0,a.getLocalizedPath)(`/products${o.path}?q=${d.toLowerCase()}`,c);case"Article":return(0,a.getLocalizedPath)(`/blogs/${o.blog.handle}/${o.handle.replace("storefront-","")}?q=${d.toLowerCase()}`,c);default:break}},[d,c]),N=(0,r.useMemo)(()=>{if(d){if(l?.totalCount)return g.SearchStatus.Predict;if(!n)return g.SearchStatus.Empty}else return g.SearchStatus.Default},[l?.totalCount,d,n]);return(0,e.jsxs)(s.Container,{childClassName:"!bg-white",...$,className:(0,a.cn)("relative",S),ref:E,children:[(0,e.jsx)("style",{children:`
             .navigation-search-component input:-webkit-autofill,
             .navigation-search-component input:-webkit-autofill:hover,
             .navigation-search-component input:-webkit-autofill:focus {
@@ -7,5 +7,5 @@
               transition: background-color 9999s ease-in-out 0s !important;
               caret-color: #000;
             }
-          `}),(0,e.jsxs)("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[(0,e.jsx)("input",{ref:f,value:d,onCompositionStart:()=>N(!0),onCompositionEnd:()=>N(!1),onKeyDown:A,onChange:o=>{T(o.target.value),o.target.value&&B(o.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),(0,e.jsxs)("div",{className:"flex items-center gap-3",children:[(0,e.jsx)(v.Search,{className:"size-5 cursor-pointer",onClick:()=>a(d)}),(0,e.jsx)("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),(0,e.jsx)(v.Close,{className:"size-5 cursor-pointer",onClick:p})]})]}),(0,e.jsx)("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:w===u.SearchStatus.Predict?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(s.Text,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),r?.items?.length>6&&(0,e.jsx)(s.Button,{as:"a",iconClassName:"size-4",href:(0,m.getLocalizedPath)(`${t?.moreLink}?q=${d.toLowerCase()}`,n),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:r?.items?.filter(o=>S(o)).slice(0,6)?.map(o=>(0,e.jsx)(s.Link,{className:"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:z(o),children:(0,e.jsx)(s.Text,{html:(0,c.highlightSearchWord)(o.title,d),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},o.id))})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:(0,m.getLocalizedPath)(t?.advertisingLink,n),children:(0,e.jsxs)("div",{className:"rounded-sidebar-shelf relative",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:(0,c.cn)("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:(0,c.cn)("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),r?.items?.filter(o=>o.type.toLowerCase()==="product").slice(0,t?.advertisingBgImg?.url?7:8)?.map(o=>{const h=o?.variants?.[0],b=`${h?.image?.url||o?.images?.[0]?.url}`,x=o?.title||o?.name,W=o?.description,q=o?.badge||"",G=(0,m.getLocalizedPath)(`/products/${o?.handle}?variant=${(0,c.atobID)(h?.id)}`,n);return(0,e.jsx)(C,{productImage:b,productName:x,productDesc:W,productBadge:q,listingLink:G},o.id)})]})]},"predict-advertising-card")]}):(0,e.jsxs)(e.Fragment,{children:[w===u.SearchStatus.Empty&&(0,e.jsx)(s.Text,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"mt-2",children:[(0,e.jsx)(J,{data:t,keywords:_,locale:n}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&(0,e.jsx)(s.Grid,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(o=>(0,e.jsx)(s.GridItem,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:(0,e.jsx)("a",{href:(0,m.getLocalizedPath)(`${t?.moreLink}?q=${o?.popularPage.toLowerCase()}`,n),className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:o?.popularPage})},o?.id))})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:(0,m.getLocalizedPath)(t?.advertisingLink,n),children:(0,e.jsxs)("div",{className:"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:(0,c.cn)("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:(0,c.cn)("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),t?.hotProducts?.slice(0,t?.advertisingBgImg?.url?7:8)?.map(o=>{const h=o?.custom_description,b=o?.badge||"",x=(0,m.getLocalizedPath)(`/products/${o?.handle}?variant=${(0,c.atobID)(o?.shopify_id)}`,n);return(0,e.jsx)(C,{productImage:o?.image,productName:o?.name,productDesc:h,productBadge:b,listingLink:x},o.shopify_id||o.id)})]})]},"empty-advertising-card")]})})]})});L.displayName="NavigationSearch";const C=({productImage:t,productName:a,productDesc:p,productBadge:r,className:l,listingLink:g})=>(0,e.jsx)(s.Link,{href:g,className:"block no-underline hover:text-current",children:(0,e.jsxs)("div",{className:(0,c.cn)("rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",l),children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)("img",{src:t,loading:"lazy",alt:a,width:90,height:90,className:"size-[96px] object-contain"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:" h-[24px] ",children:r&&(0,e.jsx)(s.Text,{as:"p",html:r,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"})}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:a}),p&&(0,e.jsx)(s.Text,{as:"p",html:p,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),J=({data:t,keywords:a,locale:p})=>(0,e.jsx)("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:a?.map((r,l)=>(0,e.jsx)("a",{href:(0,m.getLocalizedPath)(`${t?.moreLink}?q=${r?.toLowerCase()}`,p),className:"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:r},l))});var O=(0,F.withLayout)(L);
+          `}),(0,e.jsxs)("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[(0,e.jsx)("input",{ref:v,value:d,onCompositionStart:()=>y(!0),onCompositionEnd:()=>y(!1),onKeyDown:B,onChange:o=>{P(o.target.value),o.target.value&&T(o.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),(0,e.jsxs)("div",{className:"flex items-center gap-3",children:[(0,e.jsx)(h.Search,{className:"size-5 cursor-pointer",onClick:()=>i(d)}),(0,e.jsx)("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),(0,e.jsx)(h.Close,{className:"size-5 cursor-pointer",onClick:p})]})]}),(0,e.jsx)("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:N===g.SearchStatus.Predict?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(s.Text,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),l?.items?.length>6&&(0,e.jsx)(s.Button,{as:"a",iconClassName:"size-4",href:(0,a.getLocalizedPath)(`${t?.moreLink}?q=${d.toLowerCase()}`,c),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:l?.items?.filter(o=>I(o)).slice(0,6)?.map(o=>(0,e.jsx)(s.Link,{className:"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:_(o),children:(0,e.jsx)(s.Text,{html:(0,a.highlightSearchWord)(o.title,d),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},o.id))})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:(0,a.getLocalizedPath)(t?.advertisingLink,c),children:(0,e.jsxs)("div",{className:"rounded-sidebar-shelf relative",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:(0,a.cn)("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:(0,a.cn)("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),l?.items?.filter(o=>o.type.toLowerCase()==="product").slice(0,t?.advertisingBgImg?.url?7:8)?.map(o=>{const u=o?.variants?.[0],f=`${u?.image?.url||o?.images?.[0]?.url}`,b=o?.title||o?.name,z=o?.description,W=o?.badge||"",q=(0,a.getLocalizedPath)(`/products/${o?.handle}?variant=${(0,a.atobID)(u?.id)}`,c);return(0,e.jsx)(L,{productImage:f,productName:b,productDesc:z,productBadge:W,listingLink:q},o.id)})]})]},"predict-advertising-card")]}):(0,e.jsxs)(e.Fragment,{children:[N===g.SearchStatus.Empty&&(0,e.jsx)(s.Text,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"mt-2",children:[(0,e.jsx)(R,{data:t,keywords:A,locale:c}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&(0,e.jsx)(s.Grid,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(o=>(0,e.jsx)(s.GridItem,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:(0,e.jsx)("a",{href:(0,a.getLocalizedPath)(`${t?.moreLink}?q=${o?.popularPage.toLowerCase()}`,c),className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:o?.popularPage})},o?.id))})]})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&(0,e.jsx)(s.Link,{asChild:!t?.advertisingLink,href:(0,a.getLocalizedPath)(t?.advertisingLink,c),children:(0,e.jsxs)("div",{className:"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(s.Picture,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(s.Heading,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:(0,a.cn)("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),(0,e.jsx)(s.Text,{html:t?.advertisingSubtitle||"20.000mAh",className:(0,a.cn)("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),t?.hotProducts?.slice(0,t?.advertisingBgImg?.url?7:8)?.map(o=>{const u=o?.custom_description,f=o?.badge||"",b=(0,a.getLocalizedPath)(`/products/${o?.handle}?variant=${(0,a.atobID)(o?.shopify_id)}`,c);return(0,e.jsx)(L,{productImage:o?.image,productName:o?.name,productDesc:u,productBadge:f,listingLink:b},o.shopify_id||o.id)})]})]},"empty-advertising-card")]})})]})});w.displayName="NavigationSearch";const L=({productImage:t,productName:i,productDesc:p,productBadge:l,className:n,listingLink:m})=>(0,e.jsx)(s.Link,{href:m,className:"block no-underline hover:text-current",children:(0,e.jsxs)("div",{className:(0,a.cn)("rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",n),children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)("img",{src:t,loading:"lazy",alt:i,width:90,height:90,className:"size-[96px] object-contain"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:" h-[24px] ",children:l&&(0,e.jsx)(s.Text,{as:"p",html:l,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"})}),(0,e.jsxs)("div",{children:[(0,e.jsx)(s.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:i}),p&&(0,e.jsx)(s.Text,{as:"p",html:p,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),R=({data:t,keywords:i,locale:p})=>(0,e.jsx)("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:i?.map((l,n)=>(0,e.jsx)("a",{href:(0,a.getLocalizedPath)(`${t?.moreLink}?q=${l?.toLowerCase()}`,p),className:"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:l},n))});var J=(0,D.withLayout)(w);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
-  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords, className, ...rest }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus({ preventScroll: true })\n      }\n    }, [])\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n        }\n      },\n      [isComposing, searchValue, locale, data?.moreLink]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        const type = item.__typename || item.type\n        switch (type) {\n          case 'Product':\n            return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n          case 'Article':\n            return getLocalizedPath(\n              `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n              locale\n            )\n          default:\n            break\n        }\n      },\n      [searchValue, locale]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue, isSearching])\n\n    return (\n      <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n        <style>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black\">\n          <input\n            ref={inputRef}\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none\"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n        <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-1\">\n                  <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      iconClassName=\"size-4\"\n                      href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\n                      className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"mt-2 flex flex-col\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div key=\"predict-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = getLocalizedPath(\n                        `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n                        locale\n                      )\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n                        >\n                          <a\n                            href={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\n                            className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div key=\"empty-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = getLocalizedPath(\n                      `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n                      locale\n                    )\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.shopify_id || item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <Link href={listingLink} className=\"block no-underline hover:text-current\">\n      <div\n        className={cn(\n          'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n          className\n        )}\n      >\n        <div className=\"shrink-0\">\n          <img\n            src={productImage}\n            loading=\"lazy\"\n            alt={productName}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\" h-[24px] \">\n            {productBadge && (\n              <Text\n                as=\"p\"\n                html={productBadge}\n                className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n              />\n            )}\n          </div>\n          <div>\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n            {productDesc && (\n              <Text\n                as=\"p\"\n                html={productDesc}\n                className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n              />\n            )}\n          </div>\n        </div>\n      </div>\n    </Link>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n          key={index}\n          className=\"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default withLayout(NavigationSearch)\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/no-unknown-property */\nimport { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { atobID, cn, getLocalizedPath, highlightSearchWord } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\n\nexport const canSearch = (target: any) => {\n  return !(\n    target.metafields?.global?.HideSearch ||\n    target.metafields?.seo?.hidden ||\n    target.metafields?.seo?.setting?.noindex\n  )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n  ({ data, onSearch, onClose, searchResult, isSearching, keywords, className, ...rest }, ref) => {\n    const { locale = 'us', copyWriting } = useAiuiContext()\n\n    const [searchValue, setSearchValue] = useState('')\n    const [isComposing, setIsComposing] = useState(false)\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    // \u81EA\u52A8\u805A\u7126\u5230\u8F93\u5165\u6846\uFF08\u963B\u6B62\u6EDA\u52A8\u884C\u4E3A\uFF09\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.focus({ preventScroll: true })\n      }\n    }, [])\n\n    const debouncedFunction = debounce((value: string) => {\n      onSearch(value)\n    }, 300)\n\n    const handleKeyDown = useCallback(\n      (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && !isComposing) {\n          window.open(getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale), '_self')\n        }\n      },\n      [isComposing, searchValue, locale, data?.moreLink]\n    )\n\n    const searchKeywords = useMemo(() => {\n      if (Array.isArray(keywords) && keywords?.length) {\n        return keywords.map((keyword: any) => keyword.search_term)\n      }\n      if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n        return data?.popularWords.map((word: any) => word.popularWord)\n      }\n      return []\n    }, [keywords, data?.popularWords])\n\n    const getLink = useCallback(\n      (item: any) => {\n        const type = item.__typename || item.type\n        switch (type) {\n          case 'Product':\n            return getLocalizedPath(`/products${item.path}?q=${searchValue.toLowerCase()}`, locale)\n          case 'Article':\n            return getLocalizedPath(\n              `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`,\n              locale\n            )\n          default:\n            break\n        }\n      },\n      [searchValue, locale]\n    )\n\n    const searchStatus = useMemo(() => {\n      if (!searchValue) {\n        // \u6CA1\u6709\u641C\u7D22\u503C\n        return SearchStatus.Default\n      } else if (searchResult?.totalCount) {\n        // \u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Predict\n      } else if (!isSearching) {\n        // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n        return SearchStatus.Empty\n      }\n    }, [searchResult?.totalCount, searchValue, isSearching])\n\n    return (\n      <Container childClassName=\"!bg-white\" {...rest} className={cn('relative', className)} ref={ref}>\n        <style>\n          {`\n            .navigation-search-component input:-webkit-autofill,\n            .navigation-search-component input:-webkit-autofill:hover,\n            .navigation-search-component input:-webkit-autofill:focus {\n              -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n              -webkit-text-fill-color: #000 !important;\n              transition: background-color 9999s ease-in-out 0s !important;\n              caret-color: #000;\n            }\n          `}\n        </style>\n        <div className=\"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black\">\n          <input\n            ref={inputRef}\n            value={searchValue}\n            onCompositionStart={() => setIsComposing(true)}\n            onCompositionEnd={() => setIsComposing(false)}\n            onKeyDown={handleKeyDown}\n            onChange={e => {\n              setSearchValue(e.target.value)\n              if (e.target.value) {\n                debouncedFunction(e.target.value)\n              }\n            }}\n            type=\"text\"\n            className=\"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none\"\n            placeholder={data?.placeholder}\n          />\n          <div className=\"flex items-center gap-3\">\n            <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n            <div className=\"h-[20px] w-px bg-[#E4E5E6]\" />\n            <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n          </div>\n        </div>\n        <div className=\"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black\">\n          {searchStatus === SearchStatus.Predict ? (\n            <>\n              <div>\n                <div className=\"flex items-center gap-1\">\n                  <Text html={data?.suggestText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                  {searchResult?.items?.length > 6 && (\n                    <Button\n                      as=\"a\"\n                      iconClassName=\"size-4\"\n                      href={getLocalizedPath(`${data?.moreLink}?q=${searchValue.toLowerCase()}`, locale)}\n                      className=\"!p-0 !text-sm font-bold leading-[1.2]\"\n                      variant=\"link\"\n                    >\n                      {data?.moreText}\n                    </Button>\n                  )}\n                </div>\n                <div className=\"mt-2 flex flex-col\">\n                  {searchResult?.items\n                    ?.filter((item: any) => canSearch(item))\n                    .slice(0, 6)\n                    ?.map((item: any) => (\n                      <Link\n                        className=\"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current\"\n                        href={getLink(item)}\n                        key={item.id}\n                      >\n                        <Text\n                          html={highlightSearchWord(item.title, searchValue)}\n                          className=\"cursor-pointer text-sm font-bold leading-[1.4]\"\n                        />\n                      </Link>\n                    ))}\n                </div>\n              </div>\n              <div key=\"predict-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {searchResult?.items\n                    ?.filter((item: any) => item.type.toLowerCase() === 'product')\n                    .slice(0, data?.advertisingBgImg?.url ? 7 : 8)\n                    ?.map((item: any) => {\n                      const variant = item?.variants?.[0]\n                      const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n                      const productName = item?.title || item?.name\n                      const productDesc = item?.description\n                      const productBadge = item?.badge || ''\n                      const listingLink = getLocalizedPath(\n                        `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`,\n                        locale\n                      )\n                      return (\n                        <SearchProduct\n                          productImage={productImage}\n                          productName={productName}\n                          productDesc={productDesc}\n                          productBadge={productBadge}\n                          listingLink={listingLink}\n                          key={item.id}\n                        />\n                      )\n                    })}\n                </div>\n              </div>\n            </>\n          ) : (\n            <>\n              {searchStatus === SearchStatus.Empty && (\n                <Text\n                  html={data?.noResultText}\n                  as=\"p\"\n                  className=\"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                />\n              )}\n              <div>\n                <Text html={data?.popularText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2\">\n                  <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n                  {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n                    <Grid className=\"laptop:gap-4 laptop:mt-4 mt-3 gap-3\">\n                      {data?.popularPages?.map((item: any) => (\n                        <GridItem\n                          key={item?.id}\n                          className=\"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]\"\n                        >\n                          <a\n                            href={getLocalizedPath(`${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`, locale)}\n                            className=\"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]\"\n                          >\n                            {item?.popularPage}\n                          </a>\n                        </GridItem>\n                      ))}\n                    </Grid>\n                  )}\n                </div>\n              </div>\n              <div key=\"empty-advertising-card\">\n                <Text html={data?.hotProductsText} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2\">\n                  {data?.advertisingBgImg?.url && (\n                    <Link asChild={!data?.advertisingLink} href={getLocalizedPath(data?.advertisingLink, locale)}>\n                      <div className=\"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={data?.advertisingBgImg?.url}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={data?.advertisingTitle || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={data?.advertisingSubtitle || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': data?.advertisingTheme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {data?.hotProducts?.slice(0, data?.advertisingBgImg?.url ? 7 : 8)?.map((item: any) => {\n                    const productDesc = item?.custom_description\n                    const productBadge = item?.badge || ''\n                    const listingLink = getLocalizedPath(\n                      `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`,\n                      locale\n                    )\n                    return (\n                      <SearchProduct\n                        productImage={item?.image}\n                        productName={item?.name}\n                        productDesc={productDesc}\n                        productBadge={productBadge}\n                        listingLink={listingLink}\n                        key={item.shopify_id || item.id}\n                      />\n                    )\n                  })}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n      </Container>\n    )\n  }\n)\n\nNavigationSearch.displayName = 'NavigationSearch'\n\nconst SearchProduct = ({\n  productImage,\n  productName,\n  productDesc,\n  productBadge,\n  className,\n  listingLink,\n}: {\n  productImage: string\n  productName: string\n  productDesc: string\n  productBadge: string\n  className?: string\n  listingLink: string\n}) => {\n  return (\n    <Link href={listingLink} className=\"block no-underline hover:text-current\">\n      <div\n        className={cn(\n          'rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500',\n          className\n        )}\n      >\n        <div className=\"shrink-0\">\n          <img\n            src={productImage}\n            loading=\"lazy\"\n            alt={productName}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\" h-[24px] \">\n            {productBadge && (\n              <Text\n                as=\"p\"\n                html={productBadge}\n                className=\"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]\"\n              />\n            )}\n          </div>\n          <div>\n            <Text\n              className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n              html={productName}\n            />\n            {productDesc && (\n              <Text\n                as=\"p\"\n                html={productDesc}\n                className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n              />\n            )}\n          </div>\n        </div>\n      </div>\n    </Link>\n  )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n  return (\n    <div className=\"laptop:gap-4 flex flex-wrap gap-3\">\n      {keywords?.map((keyword: any, index) => (\n        <a\n          href={getLocalizedPath(`${data?.moreLink}?q=${keyword?.toLowerCase()}`, locale)}\n          key={index}\n          className=\"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]\"\n        >\n          {keyword}\n        </a>\n      ))}\n    </div>\n  )\n}\n\nexport default withLayout(NavigationSearch)\n"],
+  "mappings": "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",
   "names": ["NavigationSearch_exports", "__export", "canSearch", "NavigationSearch_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_AiuiProvider", "import_utils", "import_Styles", "import_types", "import_es_toolkit", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "className", "rest", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "inputRef", "debouncedFunction", "value", "handleKeyDown", "e", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "SearchIcon", "CloseIcon", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "index"]
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var k=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},u=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of H(e))!P.call(t,s)&&s!==r&&c(t,s,{get:()=>e[s],enumerable:!(l=g(e,s))||l.enumerable});return t};var y=(t,e,r)=>(r=t!=null?k(v(t)):{},u(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),T=t=>u(c({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=T(R);var o=require("react/jsx-runtime"),p=y(require("react")),a=require("../../components/index.js"),d=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",n=p.default.forwardRef(({data:t,className:e},r)=>{const{title:l,subtitle:s,ctaText:m,poster:b,mobPoster:x,ctaLink:_,theme:N="light"}=t,i=(0,p.useRef)(null);return(0,f.useExposure)(i,{componentType:L,componentName:D,componentTitle:l,componentDescription:s}),(0,p.useImperativeHandle)(r,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,d.cn)("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":N==="dark"},e),children:[(0,o.jsxs)("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(a.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(a.Heading,{as:"h4",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),(0,o.jsx)(a.Text,{as:"p",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),m&&(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(a.Button,{className:"product-hero__cta-button w-fit",children:m})})]}),(0,o.jsx)(a.Picture,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${b?.url}, ${x?.url} 768`,imgClassName:"h-full object-cover"})]})});n.displayName="ProductHero";var E=(0,h.withLayout)(n);
+"use strict";"use client";var T=Object.create;var c=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var z=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},u=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of D(e))!$.call(t,a)&&a!==r&&c(t,a,{get:()=>e[a],enumerable:!(l=L(e,a))||l.enumerable});return t};var E=(t,e,r)=>(r=t!=null?T(R(t)):{},u(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),M=t=>u(c({},"__esModule",{value:!0}),t);var B={};z(B,{default:()=>j});module.exports=M(B);var o=require("react/jsx-runtime"),p=E(require("react")),s=require("../../components/index.js"),i=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),b=require("../../hooks/useExposure.js"),_=require("../../shared/trackUrlRef.js"),k=require("../AiuiProvider/index.js");const d="image",f="product_hero",h=p.default.forwardRef(({data:t,className:e},r)=>{const{title:l,subtitle:a,ctaText:n,poster:g,mobPoster:H,ctaLink:N,theme:P="light"}=t,{locale:v="us",trackingData:w}=(0,k.useAiuiContext)(),y=w?.contextHandle||"",m=(0,p.useRef)(null);return(0,b.useExposure)(m,{componentType:d,componentName:f,componentTitle:l,componentDescription:a}),(0,p.useImperativeHandle)(r,()=>m.current),(0,o.jsxs)("section",{ref:m,"data-ui-component-id":"ProductHero",className:(0,i.cn)("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":P==="dark"},e),children:[(0,o.jsxs)("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(s.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(s.Heading,{as:"h4",size:2,html:a,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),(0,o.jsx)(s.Text,{as:"p",size:2,html:a,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),n&&(0,o.jsx)("a",{href:(0,_.trackUrlRef)((0,i.getLocalizedPath)(N,v),`${y}_${d}_${f}`),className:"product-hero__cta-link",children:(0,o.jsx)(s.Button,{className:"product-hero__cta-button w-fit",children:n})})]}),(0,o.jsx)(s.Picture,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${g?.url}, ${H?.url} 768`,imgClassName:"h-full object-cover"})]})});h.displayName="ProductHero";var j=(0,x.withLayout)(h);
 //# sourceMappingURL=ProductHero.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a href={ctaLink} className=\"product-hero__cta-link\">\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n        imgClassName=\"h-full object-cover\"\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCQ,IAAAI,EAAA,6BArCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMQ,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaD,IAAU,MACzB,EACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,EACCC,MACC,OAAC,KAAE,KAAMG,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
-  "names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "boxRef"]
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n  const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n  const { locale = 'us', trackingData } = useAiuiContext()\n  const contextHandle = trackingData?.contextHandle || ''\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"ProductHero\"\n      className={cn(\n        'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n        <div className=\"product-hero__text\">\n          <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n          <Heading\n            as={'h4'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n          />\n          <Text\n            as={'p'}\n            size={2}\n            html={subtitle}\n            className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n          />\n        </div>\n        {ctaText && (\n          <a\n            href={trackUrlRef(getLocalizedPath(ctaLink, locale), `${contextHandle}_${componentType}_${componentName}`)}\n            className=\"product-hero__cta-link\"\n          >\n            <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n          </a>\n        )}\n      </div>\n      <Picture\n        className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n        source={`${poster?.url}, ${mobPoster?.url} 768`}\n        imgClassName=\"h-full object-cover\"\n      />\n    </section>\n  )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyCQ,IAAAI,EAAA,6BAxCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAqC,kCACrCC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA+B,oCAG/B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAC5E,CAAE,OAAAU,EAAS,KAAM,aAAAC,CAAa,KAAI,kBAAe,EACjDC,EAAgBD,GAAc,eAAiB,GAC/CE,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAjB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMW,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaJ,IAAU,MACzB,EACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,EACCC,MACC,OAAC,KACC,QAAM,kBAAY,oBAAiBG,EAASE,CAAM,EAAG,GAAGE,CAAa,IAAIhB,CAAa,IAAIC,CAAa,EAAE,EACzG,UAAU,yBAEV,mBAAC,UAAO,UAAU,iCAAkC,SAAAQ,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOZ,KAAQ,cAAWY,CAAW",
+  "names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "locale", "trackingData", "contextHandle", "boxRef"]
 }

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

@@ -4,6 +4,12 @@
  * 基于媒体展示（图片/视频）的抽奖组件，点击 CTA 按钮触发抽奖。
  * 共享类型来自 LotteryShared/types.ts。
  *
+ * ## CMS 契约优先
+ *
+ * 本文件以 CMS block schema (`/src/blocks/ProductLottery/config.ts`) 作为
+ * 首要文档契约，字段名与 CMS 对齐。旧版字段保留但标注 `@deprecated`，
+ * 以维持向后兼容。CMS 端字段优先级高于同义旧版字段。
+ *
  * @module ProductLotteryTypes
  * @date 2026-04-07
  */
@@ -178,10 +184,46 @@ export interface ProductLotteryHandle {
     /** 关闭所有弹窗 */
     hideAllModals: () => void;
 }
+/**
+ * 错误弹窗配置（ErrorConfig）
+ *
+ * 对齐 CMS `error` group 字段结构。新代码使用此类型；
+ * `errorModalConfig`（`ErrorModalConfig`）已废弃，保留仅供过渡期使用。
+ *
+ * CMS 字段映射:
+ * - `title`                 → 错误标题
+ * - `defaultMessage`        → 默认错误消息（对应渲染层的 `message`）
+ * - `confirmButton`         → 确认按钮文案（对应渲染层的 `confirmText`）
+ * - `exchangeFailedTitle`   → 兑换失败标题
+ * - `exchangeFailedMessage` → 兑换失败消息
+ */
+export interface ErrorConfig {
+    title?: string;
+    defaultMessage?: string;
+    confirmButton?: string;
+    exchangeFailedTitle?: string;
+    exchangeFailedMessage?: string;
+}
+/**
+ * 未中奖弹窗配置（TryAgainConfig）
+ *
+ * 对齐 CMS `tryAgain` group 字段结构。
+ *
+ * CMS 字段映射:
+ * - `title`       → 弹窗标题
+ * - `message`     → 内容文案
+ * - `confirmText` → 确认按钮文案
+ */
+export interface TryAgainConfig {
+    title?: string;
+    message?: string;
+    confirmText?: string;
+}
 /**
  * MediaDrawArea 子组件 Props
  *
  * 媒体抽奖区域，展示图片/视频并叠加 CTA 按钮。
+ * videoAutoPlay / videoMuted / videoLoop 为组件级运行时控制，CMS 不配置。
  */
 export interface MediaDrawAreaProps {
     /** 主题模式 */
@@ -224,12 +266,18 @@ export interface MediaDrawAreaProps {
  * 基于媒体展示的产品抽奖组件。左侧为可点击的媒体区域（图片/视频），
  * 右侧为获取机会区域，底部为奖品池。
  *
+ * ## 字段命名策略（CMS-primary）
+ *
+ * 本接口以 CMS block schema 字段名为主名称。旧版命名以 `@deprecated` 标记，
+ * 保留仅供过渡期使用。当 CMS 字段与旧版字段同时存在时，CMS 字段优先。
+ *
  * @example
  * ```tsx
  * <ProductLottery
  *   prizes={prizes}
- *   media={{ type: 'image', src: '/banner.jpg', alt: 'Lottery' }}
+ *   media={{ type: 'image', image: { url: '/banner.jpg', alt: 'Lottery', thumbnailURL: '' } }}
  *   ctaButton={{ text: 'Draw Now' }}
+ *   loginPrompt="Please sign in to join the draw"
  *   onDrawStart={async () => {
  *     const result = await fetch('/api/lottery')
  *     const data = await result.json()
@@ -340,7 +388,10 @@ export interface ProductLotteryProps {
      * 中奖弹窗配置（CMS: `winningInfos` group — 主名称）
      *
      * CMS 中 `winningInfos` 是中奖弹窗配置 group，字段：
-     * `title`、`confirmButton`、`confirmUrl`、`learnMoreUrl`、`learnMoreText`。
+     * `title`、`confirmButton`（对应渲染层 confirmText）、`confirmUrl`、
+     * `learnMoreUrl`、`learnMoreText`。
+     *
+     * @note CMS 字段 `confirmButton` 对应组件渲染层的 `confirmText`。
      */
     winningInfos?: WinnerModalConfig;
     /**
@@ -375,7 +426,13 @@ export interface ProductLotteryProps {
      * @param error 错误信息
      */
     onDrawError?: (error: Error) => void;
-    /** 中奖弹窗配置 */
+    /**
+     * 中奖弹窗详细渲染配置（含 prizeTitle / prizeImage / couponCode 等）
+     *
+     * @note `winningInfos` is the CMS-primary equivalent for basic config, and `winnerModalConfig` is for extended UI config that overlays on top.
+     * 与 `winningInfos` 共同配置中奖弹窗。当两者同时存在时，此字段中的
+     * 同名属性优先级更高（逐字段合并，此字段覆盖 `winningInfos`）。
+     */
     winnerModalConfig?: WinnerModalConfig;
     /** 规则弹窗配置 */
     rulesModalConfig?: RulesModalConfig;
@@ -396,13 +453,13 @@ export interface ProductLotteryProps {
      * 字段：`title`、`message`、`confirmText`。
      */
     tryAgain?: TryAgainConfig;
+    /** 分享弹窗配置 */
+    shareModalConfig?: ShareModalConfig;
     /**
      * 错误弹窗配置（旧版）
      * @deprecated Use `error` instead (CMS field name)
      */
     errorModalConfig?: ErrorModalConfig;
-    /** 分享弹窗配置 */
-    shareModalConfig?: ShareModalConfig;
     /**
      * 未登录时的提示文案（CMS: `loginPrompt`）
      * @default "Please log in to participate in the lottery"

package/dist/cjs/biz-components/ProductLottery/types.js

@@ -1,2 +1,2 @@
-"use strict";var t=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var d=(i,e)=>{for(var n in e)t(i,n,{get:e[n],enumerable:!0})},l=(i,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of s(e))!g.call(i,o)&&o!==n&&t(i,o,{get:()=>e[o],enumerable:!(r=a(e,o))||r.enumerable});return i};var c=i=>l(t({},"__esModule",{value:!0}),i);var C={};d(C,{DEFAULT_CHANCE_TITLE:()=>p,DEFAULT_CTA_BUTTON:()=>f});module.exports=c(C);const f={text:"",style:"primary"},p="Want more chances to win?";
+"use strict";var t=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var d=(i,e)=>{for(var o in e)t(i,o,{get:e[o],enumerable:!0})},l=(i,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of s(e))!g.call(i,n)&&n!==o&&t(i,n,{get:()=>e[n],enumerable:!(r=a(e,n))||r.enumerable});return i};var c=i=>l(t({},"__esModule",{value:!0}),i);var C={};d(C,{DEFAULT_CHANCE_TITLE:()=>p,DEFAULT_CTA_BUTTON:()=>f});module.exports=c(C);const f={text:"",style:"primary"},p="Want more chances to win?";
 //# sourceMappingURL=types.js.map