@anker-in/headless-ui 1.0.10 → 1.0.11

package/dist/cjs/biz-components/HeaderNavigation/icons/index.d.ts

@@ -0,0 +1,11 @@
+import AnkerLogo from './AnkerLogo.js';
+import LogoLine from './LogoLine.js';
+import Menu from './Menu.js';
+import Search from './Search.js';
+import Cart from './Cart.js';
+import Close from './Close.js';
+import User from './User.js';
+import RightArrow from './RightArrow.js';
+import LeftArrow from './LeftArrow.js';
+import DownArrow from './DownArrow.js';
+export { AnkerLogo, Menu, Search, Cart, Close, User, RightArrow, LeftArrow, DownArrow, LogoLine };

package/dist/cjs/biz-components/HeaderNavigation/icons/index.js

@@ -0,0 +1,2 @@
+"use strict";var k=Object.create;var f=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var M=(r,o)=>{for(var t in o)f(r,t,{get:o[t],enumerable:!0})},c=(r,o,t,C)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of u(o))!D.call(r,i)&&i!==t&&f(r,i,{get:()=>o[i],enumerable:!(C=l(o,i))||C.enumerable});return r};var m=(r,o,t)=>(t=r!=null?k(x(r)):{},c(o||!r||!r.__esModule?f(t,"default",{value:r,enumerable:!0}):t,r)),R=r=>c(f({},"__esModule",{value:!0}),r);var S={};M(S,{AnkerLogo:()=>p.default,Cart:()=>A.default,Close:()=>L.default,DownArrow:()=>s.default,LeftArrow:()=>h.default,LogoLine:()=>e.default,Menu:()=>n.default,RightArrow:()=>a.default,Search:()=>w.default,User:()=>g.default});module.exports=R(S);var p=m(require("./AnkerLogo.js")),e=m(require("./LogoLine.js")),n=m(require("./Menu.js")),w=m(require("./Search.js")),A=m(require("./Cart.js")),L=m(require("./Close.js")),g=m(require("./User.js")),a=m(require("./RightArrow.js")),h=m(require("./LeftArrow.js")),s=m(require("./DownArrow.js"));
+//# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/HeaderNavigation/icons/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/HeaderNavigation/icons/index.ts"],
+  "sourcesContent": ["import AnkerLogo from './AnkerLogo.js'\nimport LogoLine from './LogoLine.js'\nimport Menu from './Menu.js'\nimport Search from './Search.js'\nimport Cart from './Cart.js'\nimport Close from './Close.js'\nimport User from './User.js'\nimport RightArrow from './RightArrow.js'\nimport LeftArrow from './LeftArrow.js'\nimport DownArrow from './DownArrow.js'\n\nexport { AnkerLogo, Menu, Search, Cart, Close, User, RightArrow, LeftArrow, DownArrow, LogoLine }\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,QAAA,WAAAC,QAAA,YAAAC,QAAA,gBAAAC,QAAA,gBAAAC,QAAA,eAAAC,QAAA,WAAAC,QAAA,iBAAAC,QAAA,aAAAC,QAAA,WAAAC,UAAA,eAAAC,EAAAZ,GAAA,IAAAa,EAAsB,6BACtBC,EAAqB,4BACrBC,EAAiB,wBACjBC,EAAmB,0BACnBC,EAAiB,wBACjBC,EAAkB,yBAClBC,EAAiB,wBACjBC,EAAuB,8BACvBC,EAAsB,6BACtBC,EAAsB",
+  "names": ["icons_exports", "__export", "AnkerLogo", "Cart", "Close", "DownArrow", "LeftArrow", "LogoLine", "Menu", "RightArrow", "Search", "User", "__toCommonJS", "import_AnkerLogo", "import_LogoLine", "import_Menu", "import_Search", "import_Cart", "import_Close", "import_User", "import_RightArrow", "import_LeftArrow", "import_DownArrow"]
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { HeaderNavigationProps } from './types.js';
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<HeaderNavigationProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+"use strict";var X=Object.create;var F=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var le=(t,o)=>{for(var l in o)F(t,l,{get:o[l],enumerable:!0})},W=(t,o,l,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of ee(o))!ae.call(t,s)&&s!==l&&F(t,s,{get:()=>o[s],enumerable:!(r=Z(o,s))||r.enumerable});return t};var ne=(t,o,l)=>(l=t!=null?X(te(t)):{},W(o||!t||!t.__esModule?F(l,"default",{value:t,enumerable:!0}):l,t)),oe=t=>W(F({},"__esModule",{value:!0}),t);var ye={};le(ye,{default:()=>xe});module.exports=oe(ye);var e=require("react/jsx-runtime"),a=require("react"),n=require("../../components/index.js"),q=require("../../shared/Styles.js"),M=require("../../helpers/utils.js"),S=ne(require("./NavProvider.js")),f=require("./types.js"),Y=require("react-responsive"),_=require("es-toolkit"),I=require("@gsap/react"),j=require("gsap"),C=require("./withCategory.js"),x=require("./icons/index.js");const se=(0,a.forwardRef)((t,o)=>{const{data:{headerNavigation:l}={},buildProps:r,event:s,profile:i,theme:p="light"}=t,[b,k]=(0,a.useState)(!1),[y,c]=(0,a.useState)(!1),[d,m]=(0,a.useState)(!1),v=(0,a.useRef)(null),g=(0,Y.useMediaQuery)({query:"(max-width: 1440px)"});return(0,a.useEffect)(()=>{k(g)},[g]),(0,a.useImperativeHandle)(o,()=>v.current),(0,a.useEffect)(()=>{let T=0,E=0;const B=(0,_.throttle)(w=>{const H=E-w;H>0?(T+=H,T>=300&&(c(!1),T=0)):c(w>300),m(w>24),E=w},200),P=()=>{let w=0;document?.documentElement&&document?.documentElement?.scrollTop?w=document?.documentElement.scrollTop:document?.body&&(w=document?.body.scrollTop),B(w)};return window.addEventListener("scroll",P),()=>window.removeEventListener("scroll",P)},[]),(0,e.jsx)(S.default,{buildProps:r,profile:i,isMobile:b,event:s,payloadData:l,children:(0,e.jsx)("header",{"data-ui-component-id":"HeaderNavigation",className:"sticky top-0 z-50",ref:v,children:(0,e.jsxs)("div",{className:(0,M.cn)("border-b border-b-gray-200",p==="light"?"text-black":"text-white",{"translate-y-[-100%] transition-transform duration-500 ease-in-out":y,"!bg-white transition-all duration-500 ease-in-out":d},{"hover:!text-black":p==="dark","!text-black":d}),children:[!b&&(0,e.jsx)(ie,{data:l}),b&&(0,e.jsx)(me,{data:l})]})})})}),ie=(0,a.forwardRef)((t,o)=>{const{data:l}=t,{event:r}=(0,S.useNavContext)(),s=(0,a.useMemo)(()=>(0,C.WithGroupCategory)(l?.categories),[l]),[i,p]=(0,a.useState)(null),[b,k]=(0,a.useState)([]),y=(0,a.useRef)(null),[c,d]=(0,a.useState)(!1),m=(0,a.useRef)(null),v=(0,a.useRef)(s.map(u=>Array(u?.length||0).fill(null)));(0,a.useEffect)(()=>{s?.length&&k(s?.map((u,N)=>u?.map((D,L)=>({groupIndex:N,index:L,open:!1}))))},[s]);const g=(0,a.useMemo)(()=>{let u=null;for(const N of b){for(const D of N)if(D.open){u=D;break}if(u)break}return u},[b]);(0,a.useEffect)(()=>{},[g]);const T=(u,N,D)=>{u.stopPropagation(),p(s[N][D]),k(L=>L.map(z=>z.map(A=>A.groupIndex===N&&A.index===D?{...A,open:!A.open}:{...A,open:!1})))},E=()=>{k(u=>u.map(N=>N.map(D=>({...D,open:!1}))))},B=(0,a.useMemo)(()=>{if(i)return i?.components?.[0]?.blockType},[i]),P=(0,C.WithSidebar)(re,i),w=(0,C.WithSupports)(de,{categoriesItem:i,currentNavItemRef:v.current?.[g?.groupIndex||0]?.[g?.index||0]}),H=(0,C.WithMulticol)(ce,i),U=(0,a.useMemo)(()=>{switch(B){case f.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(P,{});case f.HeaderNavigationBlockType.Supports:return(0,e.jsx)(w,{});case f.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(H,{});default:return null}},[B,H,P,w]),$=(0,a.useMemo)(()=>l?.headerBar?.actions?.filter(u=>u?.pcShow),[l]),h=(0,a.useMemo)(()=>$?.find(u=>u?.blockType===f.HeaderNavigationActionBlockType.Profile),[$]),R=(0,a.useCallback)(()=>{d(u=>!u)},[]);return(0,a.useEffect)(()=>{if(y?.current){const u=y.current;return u.addEventListener("click",R),()=>{u.removeEventListener("click",R)}}},[R]),(0,e.jsxs)(n.Container,{childClassName:"bg-white",className:"relative h-[96px]",children:[(0,e.jsxs)("div",{ref:m,onClick:E,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(K,{}),(0,e.jsx)(Q,{ref:y,actions:$})]}),(0,e.jsx)("div",{className:"flex justify-between",children:s?.map((u,N)=>(0,e.jsx)("div",{className:"flex gap-6",children:u?.map((D,L)=>(0,e.jsx)("div",{ref:z=>{v.current[N][L]=z},className:"hover:text-brand-0 cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1 pb-4",onClick:z=>T(z,N,L),children:[(0,e.jsx)(n.Text,{html:D.text,className:(0,M.cn)(" text-sm font-bold leading-[1.4]",{"text-brand-0":g?.groupIndex===N&&g?.index===L})}),(0,e.jsx)(x.DownArrow,{className:(0,M.cn)({"text-brand-0":g?.groupIndex===N&&g?.index===L})})]}),(0,e.jsx)("div",{className:(0,M.cn)("absolute bottom-0 left-0 h-[2px] w-0 bg-[#1D1D1F] transition-all duration-500",{"w-full":g?.groupIndex===N&&g?.index===L})})]})},D.id))},`groupCategory-${N}`))})]}),g?.open&&i&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70",style:{height:`calc(100vh - ${m?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{className:"relative z-50",children:U}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:E})]}),c&&(0,e.jsxs)("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70",style:{height:`calc(100vh - ${y?.current?.getBoundingClientRect()?.bottom}px)`,top:`calc(12px + ${y?.current?.getBoundingClientRect()?.top}px)`},children:[(0,e.jsxs)("div",{className:"absolute max-w-[272px] bg-white p-4",style:{right:`calc(100% - ${y?.current?.getBoundingClientRect()?.right}px)`},children:[(0,e.jsx)(n.Text,{html:h?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-3 flex flex-col gap-1",children:h?.benefits?.map(u=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(n.Picture,{source:u.benefitIcon?.url,className:"size-4",alt:u.benefit,width:16,height:16}),(0,e.jsx)(n.Text,{html:u.benefit,className:"text-sm font-bold leading-[1.4]"})]},u.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(n.Button,{variant:"secondary",size:"sm",onClick:()=>r?.join?.(),children:(0,e.jsx)(n.Text,{html:h?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(n.Button,{variant:"primary",size:"sm",onClick:()=>r?.login?.(),children:(0,e.jsx)(n.Text,{html:h?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>d(!1)})]})]})}),re=({sidebarCategoriesMetadata:t,seriesMetadata:o})=>{const[l,r]=(0,a.useState)([]),[s,i]=(0,a.useState)(0),p=(0,a.useRef)(null);(0,I.useGSAP)(()=>{j.gsap.fromTo(p?.current,{height:0},{height:548})},[]),(0,a.useEffect)(()=>{t?.subcategories?.length&&r(t?.subcategories?.map((c,d)=>({index:d,open:!1})))},[t]);const b=(0,a.useMemo)(()=>o?.find(c=>t?.subcategories?.[l?.find(d=>d.open)?.index||0]?.subSubCategories?.[s]?.label===c.label)||{},[t,l,s,o]),k=c=>{r(d=>d.map(m=>m.index===c?{...m,open:!m.open}:{...m,open:!1}))},y=c=>{i(c)};return(0,e.jsxs)(n.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},children:[(0,e.jsx)("div",{className:"desktop:max-h-[416px] flex flex-col overflow-y-auto",children:t?.subcategories?.map((c,d)=>(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:"flex cursor-pointer items-center justify-between",onClick:()=>k(d),children:[(0,e.jsx)(n.Text,{html:c.label,className:"p-4 text-sm font-bold leading-[1.4]"}),(0,e.jsx)(x.DownArrow,{className:(0,M.cn)({"rotate-180":l.find(m=>m.index===d)?.open})})]}),l.find(m=>m.index===d)?.open&&(0,e.jsx)("div",{className:"flex flex-col",children:c.subSubCategories?.map((m,v)=>(0,e.jsx)(n.Text,{html:m.label,onMouseEnter:()=>y(v),className:(0,M.cn)("cursor-pointer px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F] hover:bg-[#F5F5F7]")},`subSubItem-${d}-${v}`))})]},`subcategoryItem-${d}`))}),(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsx)(n.Button,{variant:"primary",size:"lg",className:"text-base",children:(0,e.jsx)("a",{href:t?.primary?.url,children:t?.primary?.label})}),(0,e.jsx)(n.Button,{variant:"link",size:"lg",className:"justify-start py-0 text-base",children:(0,e.jsx)("a",{href:t?.secondary?.url,children:t?.secondary?.label})})]})})]}),(0,e.jsxs)("div",{className:"flex-1",children:[Reflect.ownKeys(b).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(n.Text,{html:b?.label,className:"text-2xl font-bold leading-[1.4]"}),(0,e.jsx)(n.Button,{variant:"link",size:"lg",className:"justify-start p-0 text-base",children:(0,e.jsx)(n.Link,{href:b?.primary?.url,className:"text-base font-bold leading-[1.2] no-underline",children:b?.primary?.label})})]}),(0,e.jsx)(n.Link,{href:b?.guide?.url,className:"text-base leading-[1.2] text-[#6D6D6F]",children:b?.guide?.label})]}),(0,e.jsx)("div",{className:"flex flex-col gap-4 overflow-y-auto",ref:p,children:b?.series?.map((c,d)=>(0,e.jsxs)("div",{children:[(0,e.jsx)(n.Text,{html:c.label,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"mt-2 grid grid-cols-3 gap-4",children:c.products?.map((m,v)=>(0,e.jsx)(G,{product:m},`seriesProductItem-${v}`))})]},`seriesItem-${d}`))})]})]})},ce=({multicolMetadata:t})=>{const o=(0,a.useRef)(null);return(0,I.useGSAP)(()=>{j.gsap.fromTo(o?.current,{height:0},{height:"auto"})},[]),(0,e.jsx)("div",{ref:o,children:(0,e.jsx)(n.Container,{childClassName:"bg-white",className:"h-full",children:(0,e.jsx)("div",{className:"flex gap-4 py-4",children:t?.map((l,r)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(J,{item:l})},`multicolItem-${l?.label}-${r}`))})})})},de=({supportsMetadata:t,currentNavItemRef:o})=>{const l=(0,a.useRef)(null),[r,s]=(0,a.useState)(null);(0,I.useGSAP)(()=>{j.gsap.fromTo(l?.current,{height:0},{height:"auto"})},[]);const i=(0,_.debounce)(()=>{if(o){const p=o.getBoundingClientRect();s(p)}},500);return(0,a.useEffect)(()=>(i(),window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[i]),(0,a.useEffect)(()=>{if(o){const p=o.getBoundingClientRect();s(p)}},[o]),(0,e.jsx)("div",{className:"absolute top-0 h-full bg-white p-4",ref:l,style:{right:`calc(100% - ${r?.right}px)`},children:(0,e.jsx)("div",{children:t?.map(p=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(n.Link,{href:p.url,className:"text-sm font-bold leading-[1.4] no-underline",children:p.label})},p.id))})})},G=({product:t})=>{const{buildProps:o}=(0,S.useNavContext)(),l=o?.products?.find(i=>i.handle===t.handle),r=l?.variants?.find(i=>i.sku===t.sku),s=(0,a.useMemo)(()=>`/products/${l?.handle}?variant=${(0,M.atobID)(r?.id)}`,[l?.handle,r?.id]);return(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105",children:[(0,e.jsx)("div",{className:"shrink-0 basis-[96px]",children:(0,e.jsx)(n.Picture,{source:`${r?.image?.url||t?.images?.[0]?.url}}`,width:96,height:96})}),(0,e.jsxs)("div",{className:"relative",children:[t?.badge&&(0,e.jsx)(n.Text,{as:"p",html:t?.badge,className:"text-brand-0 mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]"}),(0,e.jsx)(n.Link,{href:s,className:"no-underline",children:(0,e.jsx)(n.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l?.title||t?.name})}),t?.desc&&(0,e.jsx)(n.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})},J=({item:t})=>(0,e.jsxs)(e.Fragment,{children:[t?.columns&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(n.Text,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:t.columns?.map(o=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(n.Link,{href:o.url,className:"text-sm font-bold leading-[1.4] no-underline",children:o.label})},o.label))})]}),t?.imageUrl&&(0,e.jsxs)("div",{className:"laptop:h-[280px] laptop:w-[404px] desktop:w-full desktop:h-auto relative h-[240px] w-[358px]",children:[(0,e.jsx)(n.Picture,{source:t.imageUrl,width:404,height:280}),(0,e.jsxs)(n.Link,{href:t.url,className:"absolute inset-0 z-10 flex flex-col justify-end p-4 no-underline",children:[(0,e.jsx)(n.Text,{html:t.title,className:"desktop:text-2xl text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)(n.Text,{html:t.subtitle,className:"text-sm font-bold leading-[1.4] text-white"})]})]})]}),me=(0,a.forwardRef)(({data:t},o)=>{const l=(0,a.useMemo)(()=>(0,C.WithGroupCategory)(t?.categories),[t]),{currentMenu:r,setCurrentMenu:s,thirdNavTitle:i}=(0,S.useNavContext)(),[p,b]=(0,a.useState)(!1),[k,y]=(0,a.useState)(0),[c,d]=(0,a.useState)(null),m=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(m?.current&&p){const h=m?.current?.getBoundingClientRect();y(window?.innerHeight-(h?.bottom||0))}},[p]),(0,I.useGSAP)(()=>{j.gsap.fromTo(m.current,{height:0},{height:k,duration:.5})},[k]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=p?"hidden":"auto"},[p]);const v=(0,a.useMemo)(()=>c?.components?.[0]?.blockType,[c]),g=(0,C.WithSidebar)(pe,c),T=(0,C.WithSupports)(fe,{categoriesItem:c}),E=(0,C.WithMulticol)(be,c),B=(0,a.useMemo)(()=>{switch(v){case f.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(g,{});case f.HeaderNavigationBlockType.Supports:return(0,e.jsx)(T,{});case f.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(E,{});default:return null}},[v,g,T,E]),P=(0,a.useCallback)(()=>{b(!1),y(0),s&&s(f.HeaderNavigationMenu.Primary)},[b,y,s]),w=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(h=>h?.mobileShow&&h?.blockType!==f.HeaderNavigationActionBlockType.Profile),[t]),H=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(h=>h?.mobileShow&&h?.blockType===f.HeaderNavigationActionBlockType.Profile)||{},[t]),U=(0,a.useMemo)(()=>{switch(r){case f.HeaderNavigationMenu.Primary:return(0,e.jsx)(ge,{actions:w,menuOpen:p,onMenuOpenClose:()=>{b(!1),y(0)},onMenuOpenClick:()=>b(!0)});case f.HeaderNavigationMenu.Secondary:return(0,e.jsx)(V,{title:c?.text,onMenuOpenClose:P,onMenuBackClick:()=>s?.(f.HeaderNavigationMenu.Primary)});case f.HeaderNavigationMenu.Third:return(0,e.jsx)(V,{title:i,onMenuOpenClose:P,onMenuBackClick:()=>s?.(f.HeaderNavigationMenu.Secondary)});default:return null}},[p,r,s,c,w,i,P]),$=(0,a.useCallback)((h,R)=>{const u=Array.isArray(l)?Array.isArray(l[h])?l[h][R]:{}:{};d(u),s?.(f.HeaderNavigationMenu.Secondary)},[l,s]);return(0,e.jsxs)(n.Container,{childClassName:"bg-white",className:"relative h-[52px]",children:[U,p&&(0,e.jsx)("div",{ref:m,className:"absolute left-0 top-[calc(100%+1px)] z-[999] w-full overflow-y-auto bg-white",style:{height:k},children:r===f.HeaderNavigationMenu.Primary?(0,e.jsx)(ue,{categories:l,onPrimaryMenuClick:$,profileAction:H}):B})]})}),ue=({categories:t,onPrimaryMenuClick:o,profileAction:l})=>(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((r,s)=>(0,e.jsxs)("div",{className:"",children:[r?.map((i,p)=>(0,e.jsx)(O,{label:i.text,onClick:()=>o(s,p)},i.id)),(0,e.jsx)("div",{className:(0,M.cn)("my-2 h-px w-full bg-[#E5E5E7]",{hidden:s===t.length-1})})]},`groupCategory-${s}`))}),(0,e.jsx)(ve,{profileAction:l})]}),pe=({sidebarCategoriesMetadata:t,seriesMetadata:o})=>{const{currentMenu:l,setCurrentMenu:r,setThirdNavTitle:s,matchSeriesMetadata:i,setMatchSeriesMetadata:p}=(0,S.useNavContext)(),[b,k]=(0,a.useState)([]);return(0,a.useEffect)(()=>{t?.subcategories?.length&&k(t?.subcategories?.map((c,d)=>({index:d,open:!1})))},[t]),(0,a.useMemo)(()=>{switch(l){case f.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between p-4",children:[(0,e.jsxs)("div",{children:[t?.subcategories?.map((c,d)=>(0,e.jsxs)("div",{children:[(0,e.jsx)(O,{label:c?.label,active:b.find(m=>m.index===d)?.open,onClick:()=>{k(m=>m.map(v=>v.index===d?{...v,open:!v.open}:{...v,open:!1}))}}),b.find(m=>m.index===d)?.open&&c.subSubCategories?.map((m,v)=>(0,e.jsx)("div",{className:"px-2 py-4",onClick:()=>{r&&r(f.HeaderNavigationMenu.Third),p?.(o?.find(g=>t?.subcategories?.[d]?.subSubCategories?.[v]?.label===g.label)||{}),s&&s(m.label)},children:(0,e.jsx)(n.Text,{html:m.label,className:"text-sm font-bold leading-[1.4]"})},`${d}-${v}`))]},`${c.label}-${d}`)),(0,e.jsx)(n.Link,{href:i?.guide?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(n.Text,{html:i?.guide?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[(0,e.jsx)(n.Button,{variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:(0,e.jsx)("a",{href:t?.primary?.url,children:t?.primary?.label})}),(0,e.jsx)(n.Button,{variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:(0,e.jsx)("a",{href:t?.secondary?.url,children:t?.secondary?.label})})]})]});case f.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 desktop:px-0 p-4",children:[Reflect.ownKeys(i).length>0&&(0,e.jsxs)("div",{className:"tablet:pt-0 flex items-center gap-3 py-4",children:[(0,e.jsx)(n.Text,{html:i?.label,className:"text-xl font-bold leading-[1.4]"}),(0,e.jsx)(n.Button,{variant:"link",size:"lg",className:"p-0",children:(0,e.jsx)(n.Link,{href:i?.primary?.url,className:"text-base leading-[1.2]",children:i?.primary?.label})})]}),(0,e.jsx)("div",{className:"flex flex-col gap-6",children:i?.series?.map((c,d)=>(0,e.jsxs)("div",{children:[(0,e.jsx)(n.Text,{html:c.label,className:"text-sm font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsx)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 mt-2 flex flex-col gap-2",children:c.products?.map((m,v)=>(0,e.jsx)(G,{product:m},`seriesProductItem-${d}-${v}`))})]},`seriesItem-${d}`))})]});default:return null}},[l,i,t,s,r,p,o,b])},fe=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(o=>(0,e.jsx)(O,{href:o.url,label:o.label,onClick:()=>{}},o.id))}),be=({multicolMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 tablet:p-4 laptop:px-16 flex flex-col gap-4 px-4",children:t?.map((o,l)=>(0,e.jsx)("div",{children:(0,e.jsx)(J,{item:o})},`multicolItem-${o?.label}-${l}`))}),ve=({profileAction:t})=>{const[o,l]=(0,a.useState)(!1),{profile:r,event:s}=(0,S.useNavContext)();return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>l(!o),children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] items-center justify-center rounded-full bg-white",children:(0,e.jsx)(x.User,{})}),(0,e.jsx)(n.Text,{html:r?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),(0,e.jsx)(x.RightArrow,{className:(0,M.cn)({"rotate-90":o})})]}),r?.email&&(0,e.jsx)("div",{className:"mt-4",children:t?.profiles?.map(i=>(0,e.jsx)(O,{label:i?.title,href:i?.url},i.id))}),o&&!r?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(n.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-3 flex flex-col gap-1",children:t?.benefits?.map(i=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(n.Picture,{source:i.benefitIcon?.url,className:"size-4",alt:i.benefit,width:16,height:16}),(0,e.jsx)(n.Text,{html:i.benefit,className:"text-sm font-bold leading-[1.4]"})]},i.id))})]}),(0,e.jsxs)("div",{className:"tablet:mt-4 mt-6 flex items-center gap-3",children:[(0,e.jsx)(n.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"sm",onClick:()=>s?.join?.(),children:(0,e.jsx)(n.Text,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(n.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"sm",onClick:()=>s?.login?.(),children:(0,e.jsx)(n.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},ge=({menuOpen:t,onMenuOpenClose:o,onMenuOpenClick:l,actions:r})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(K,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(Q,{actions:r}),t?(0,e.jsx)(x.Close,{onClick:()=>o()}):(0,e.jsx)(x.Menu,{onClick:()=>l()})]})]}),K=()=>{const{payloadData:t}=(0,S.useNavContext)();return(0,e.jsxs)("div",{className:"desktop:gap-2 flex items-center gap-[6px]",children:[(0,e.jsx)("div",{dangerouslySetInnerHTML:{__html:t?.headerBar?.logo}}),(0,e.jsx)(x.LogoLine,{}),(0,e.jsx)(n.Text,{html:t?.headerBar?.slogan,className:"tablet:text-sm text-xs font-bold leading-[1.4]"})]})},Q=(0,a.forwardRef)(({actions:t},o)=>{const{event:l}=(0,S.useNavContext)(),r=(0,a.useCallback)(s=>{switch(s?.blockType){case f.HeaderNavigationActionBlockType.Search:l?.search?.();break;case f.HeaderNavigationActionBlockType.Cart:l?.cart?.();break;case f.HeaderNavigationActionBlockType.Profile:l?.profile?.();break;case f.HeaderNavigationActionBlockType.Livestream:l?.livestream?.();break;default:return()=>{}}},[l]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map(s=>(0,e.jsx)("div",{ref:s.blockType===f.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>r(s),children:(0,e.jsx)(n.Text,{html:s.icon,className:"hover:text-brand-0 cursor-pointer"})},s.id))})}),V=({title:t,onMenuOpenClose:o,onMenuBackClick:l})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)(x.LeftArrow,{onClick:()=>l()}),(0,e.jsx)(n.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)(x.Close,{onClick:()=>o()})]}),O=({label:t,href:o,onClick:l,active:r})=>(0,e.jsx)("div",{className:"flex cursor-pointer items-center justify-between py-4",onClick:l,children:(0,e.jsxs)(n.Link,{href:o,asChild:!o,className:"flex w-full items-center justify-between no-underline",children:[(0,e.jsx)(n.Text,{html:t,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(x.RightArrow,{className:(0,M.cn)({"rotate-90":r})})]})});var xe=(0,q.withLayout)(se);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/HeaderNavigation/index.tsx"],
+  "sourcesContent": ["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\n\nimport { Picture, Text, Button, Container, Link } from '../../components/index.js'\n\nimport { withLayout } from '../../shared/Styles.js'\n\nimport { cn, atobID } from '../../helpers/utils.js'\n\nimport type {\n  MobilePrimaryNavigationData,\n  MobileSecondaryNavigationData,\n  MobileNavigationProps,\n  DesktopNavigationProps,\n  HeaderNavigationProps,\n} from './types.js'\nimport NavProvider, { useNavContext } from './NavProvider.js'\n\nimport { HeaderNavigationMenu, HeaderNavigationBlockType, HeaderNavigationActionBlockType } from './types.js'\n\nimport { useMediaQuery } from 'react-responsive'\nimport { debounce, throttle } from 'es-toolkit'\n\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\nimport { WithSidebar, WithSupports, WithMulticol, WithGroupCategory } from './withCategory.js'\n\nimport { Menu, Close, User, RightArrow, LeftArrow, DownArrow, LogoLine } from './icons/index.js'\n\nconst HeaderNavigation = forwardRef<HTMLDivElement, HeaderNavigationProps>((props, ref) => {\n  const { data: { headerNavigation } = {}, buildProps, event, profile, theme = 'light' } = props\n\n  const [isMobile, setIsMobile] = useState(false)\n  const [headerHidden, setHeaderHidden] = useState(false)\n  const [changeHeaderBackground, setChangeHeaderBackground] = useState(false)\n\n  const headerRef = useRef<HTMLDivElement>(null)\n\n  const mediaQuery = useMediaQuery({ query: '(max-width: 1440px)' })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  useImperativeHandle(ref, () => headerRef.current as HTMLDivElement)\n\n  useEffect(() => {\n    let upwardDistance = 0\n    let lastScrollY = 0\n    const showDownNav = throttle(latest => {\n      const delta = lastScrollY - latest\n      if (delta > 0) {\n        upwardDistance += delta\n        if (upwardDistance >= 300) {\n          setHeaderHidden(false)\n          upwardDistance = 0\n        }\n      } else {\n        setHeaderHidden(latest > 300)\n      }\n      setChangeHeaderBackground(latest > 24)\n      lastScrollY = latest\n    }, 200)\n\n    const scrollAnimate = () => {\n      let scrollTop = 0\n      if (document?.documentElement && document?.documentElement?.scrollTop) {\n        scrollTop = document?.documentElement.scrollTop\n      } else if (document?.body) {\n        scrollTop = document?.body.scrollTop\n      }\n      showDownNav(scrollTop)\n    }\n\n    window.addEventListener('scroll', scrollAnimate)\n\n    return () => window.removeEventListener('scroll', scrollAnimate)\n  }, [])\n\n  return (\n    <NavProvider\n      buildProps={buildProps}\n      profile={profile}\n      isMobile={isMobile}\n      event={event}\n      payloadData={headerNavigation}\n    >\n      <header data-ui-component-id=\"HeaderNavigation\" className=\"sticky top-0 z-50\" ref={headerRef}>\n        <div\n          className={cn(\n            'border-b border-b-gray-200',\n            theme === 'light' ? 'text-black' : 'text-white',\n            {\n              ['translate-y-[-100%] transition-transform duration-500 ease-in-out']: headerHidden,\n              ['!bg-white transition-all duration-500 ease-in-out']: changeHeaderBackground,\n            },\n            {\n              ['hover:!text-black']: theme === 'dark',\n              ['!text-black']: changeHeaderBackground,\n            }\n          )}\n        >\n          {!isMobile && <DesktopNavigation data={headerNavigation} />}\n          {isMobile && <MobileNavigation data={headerNavigation} />}\n        </div>\n      </header>\n    </NavProvider>\n  )\n})\n\nconst DesktopNavigation = forwardRef<HTMLDivElement, DesktopNavigationProps>((props, ref) => {\n  const { data } = props\n  const { event } = useNavContext()\n\n  const groupCategories = useMemo(() => {\n    return WithGroupCategory(data?.categories) as any[][]\n  }, [data])\n\n  const [categoriesItem, setCategoriesItem] = useState<any>(null)\n  const [navStatusArray, setNavStatusArray] = useState<{ index: number; groupIndex: number; open: boolean }[][]>([])\n  const profileRef = useRef<HTMLDivElement>(null)\n  const [userProfileOpen, setUserProfileOpen] = useState(false)\n  const headerRef = useRef<HTMLDivElement>(null)\n  const navItemRefs = useRef<HTMLDivElement[][]>(\n    groupCategories.map((categories: any) => Array(categories?.length || 0).fill(null))\n  )\n\n  useEffect(() => {\n    if (groupCategories?.length) {\n      setNavStatusArray(\n        groupCategories?.map((groupItem: any, groupIndex: number) => {\n          return groupItem?.map((_: any, index: number) => ({ groupIndex, index, open: false }))\n        })\n      )\n    }\n  }, [groupCategories])\n\n  const currentNavItem = useMemo(() => {\n    let currentNavItem: { index: number; groupIndex: number; open: boolean } | null = null\n    for (const groupItem of navStatusArray) {\n      for (const item of groupItem) {\n        if (item.open) {\n          currentNavItem = item\n          break\n        }\n      }\n      if (currentNavItem) {\n        break\n      }\n    }\n    return currentNavItem\n  }, [navStatusArray])\n\n  useEffect(() => {\n    // document.documentElement.style.overflow = currentNavItem?.open ? 'hidden' : 'auto'\n  }, [currentNavItem])\n\n  const handleNavItemClick = (e: any, groupIndex: number, index: number) => {\n    e.stopPropagation()\n    setCategoriesItem(groupCategories[groupIndex][index])\n    setNavStatusArray(prev =>\n      prev.map(groupItem =>\n        groupItem.map(item =>\n          item.groupIndex === groupIndex && item.index === index\n            ? { ...item, open: !item.open }\n            : { ...item, open: false }\n        )\n      )\n    )\n  }\n\n  const handleNavMenuClose = () => {\n    setNavStatusArray(prev => prev.map(groupItem => groupItem.map(item => ({ ...item, open: false }))))\n  }\n\n  const currentBlockTypeCategories = useMemo(() => {\n    if (categoriesItem) return categoriesItem?.components?.[0]?.blockType\n  }, [categoriesItem])\n\n  const SidebarDropdownComp = WithSidebar(SidebarDropdown, categoriesItem)\n  const SupportsDropdownComp = WithSupports(SupportsDropdown, {\n    categoriesItem,\n    currentNavItemRef: navItemRefs.current?.[currentNavItem?.groupIndex || 0]?.[currentNavItem?.index || 0],\n  })\n  const MulticolDropdownComp = WithMulticol(MulticolDropdown, categoriesItem)\n\n  const DropdownComp = useMemo(() => {\n    switch (currentBlockTypeCategories) {\n      case HeaderNavigationBlockType.Sidebar:\n        return <SidebarDropdownComp />\n      case HeaderNavigationBlockType.Supports:\n        return <SupportsDropdownComp />\n      case HeaderNavigationBlockType.Multicol:\n        return <MulticolDropdownComp />\n      default:\n        return null\n    }\n  }, [currentBlockTypeCategories, MulticolDropdownComp, SidebarDropdownComp, SupportsDropdownComp])\n\n  const actions = useMemo(() => {\n    return data?.headerBar?.actions?.filter((item: any) => item?.pcShow)\n  }, [data])\n\n  const profileAction = useMemo(() => {\n    return actions?.find((item: any) => item?.blockType === HeaderNavigationActionBlockType.Profile)\n  }, [actions])\n\n  const handleProfileClick = useCallback(() => {\n    setUserProfileOpen(prev => !prev)\n  }, [])\n\n  useEffect(() => {\n    if (profileRef?.current) {\n      const profileRefElement = profileRef.current as HTMLDivElement\n      profileRefElement.addEventListener('click', handleProfileClick)\n\n      return () => {\n        profileRefElement.removeEventListener('click', handleProfileClick)\n      }\n    }\n  }, [handleProfileClick])\n\n  return (\n    <Container childClassName=\"bg-white\" className=\"relative h-[96px]\">\n      <div ref={headerRef} onClick={handleNavMenuClose} className=\"flex h-full flex-col justify-end gap-4\">\n        <div className=\"flex items-center justify-between\">\n          <Logo />\n          <Actions ref={profileRef} actions={actions} />\n        </div>\n        <div className=\"flex justify-between\">\n          {groupCategories?.map((groupItem: any, groupIndex: number) => {\n            return (\n              <div key={`groupCategory-${groupIndex}`} className=\"flex gap-6\">\n                {groupItem?.map((item: any, index: number) => {\n                  return (\n                    <div\n                      key={item.id}\n                      ref={(el: HTMLDivElement) => {\n                        navItemRefs.current[groupIndex][index] = el\n                      }}\n                      className=\"hover:text-brand-0 cursor-pointer\"\n                    >\n                      <div className=\"relative\">\n                        <div\n                          className=\"flex items-center gap-1 pb-4\"\n                          onClick={e => handleNavItemClick(e, groupIndex, index)}\n                          // onMouseEnter={() => handleMouseEnter(groupIndex, index)}\n                        >\n                          <Text\n                            html={item.text}\n                            className={cn(' text-sm font-bold leading-[1.4]', {\n                              'text-brand-0':\n                                currentNavItem?.groupIndex === groupIndex && currentNavItem?.index === index,\n                            })}\n                          />\n                          <DownArrow\n                            className={cn({\n                              ['text-brand-0']:\n                                currentNavItem?.groupIndex === groupIndex && currentNavItem?.index === index,\n                            })}\n                          />\n                        </div>\n                        <div\n                          className={cn(\n                            'absolute bottom-0 left-0 h-[2px] w-0 bg-[#1D1D1F] transition-all duration-500',\n                            {\n                              'w-full': currentNavItem?.groupIndex === groupIndex && currentNavItem?.index === index,\n                            }\n                          )}\n                        />\n                      </div>\n                    </div>\n                  )\n                })}\n              </div>\n            )\n          })}\n        </div>\n      </div>\n      {currentNavItem?.open && categoriesItem && (\n        <div\n          className=\"absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70\"\n          style={{ height: `calc(100vh - ${headerRef?.current?.getBoundingClientRect()?.bottom}px)` }}\n        >\n          <div className=\"relative z-50\">{DropdownComp}</div>\n          <div className=\"flex-1 bg-transparent\" onClick={handleNavMenuClose} />\n        </div>\n      )}\n      {userProfileOpen && (\n        <div\n          className=\"absolute left-0 z-[999] flex w-full bg-black/70\"\n          style={{\n            height: `calc(100vh - ${profileRef?.current?.getBoundingClientRect()?.bottom}px)`,\n            top: `calc(12px + ${profileRef?.current?.getBoundingClientRect()?.top}px)`,\n          }}\n        >\n          <div\n            // onMouseLeave={handleProfileMouseLeave}\n            // onMouseEnter={handleProfileMouseEnter}\n            className=\"absolute max-w-[272px] bg-white p-4\"\n            style={{ right: `calc(100% - ${profileRef?.current?.getBoundingClientRect()?.right}px)` }}\n          >\n            <Text html={profileAction?.benefits_title} className=\"text-sm font-bold leading-[1.4]\" />\n            <div className=\"mt-3 flex flex-col gap-1\">\n              {profileAction?.benefits?.map((item: any) => (\n                <div key={item.id} className=\"flex items-center gap-[6px]\">\n                  <Picture\n                    source={item.benefitIcon?.url}\n                    className=\"size-4\"\n                    alt={item.benefit}\n                    width={16}\n                    height={16}\n                  />\n                  <Text html={item.benefit} className=\"text-sm font-bold leading-[1.4]\" />\n                </div>\n              ))}\n            </div>\n            <div className=\"mt-4 flex items-center gap-2\">\n              <Button variant=\"secondary\" size=\"sm\" onClick={() => event?.join?.()}>\n                <Text html={profileAction?.primaryButton || 'Join Now'} className=\"text-sm font-bold leading-[1.4]\" />\n              </Button>\n              <Button variant=\"primary\" size=\"sm\" onClick={() => event?.login?.()}>\n                <Text html={profileAction?.secondaryButton || 'Log In'} className=\"text-sm font-bold leading-[1.4]\" />\n              </Button>\n            </div>\n          </div>\n          <div className=\"flex-1 bg-transparent\" onClick={() => setUserProfileOpen(false)} />\n        </div>\n      )}\n    </Container>\n  )\n})\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nconst SidebarDropdown = ({\n  sidebarCategoriesMetadata,\n  seriesMetadata,\n}: {\n  sidebarCategoriesMetadata: any\n  seriesMetadata: any\n}) => {\n  const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n  const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(0)\n  const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n  useGSAP(() => {\n    gsap.fromTo(\n      sidebarDropdownRef?.current,\n      {\n        height: 0,\n      },\n      {\n        height: 548,\n      }\n    )\n  }, [])\n\n  useEffect(() => {\n    if (sidebarCategoriesMetadata?.subcategories?.length) {\n      setExpandedSubcategory(\n        sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({ index, open: false }))\n      )\n    }\n  }, [sidebarCategoriesMetadata])\n\n  // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n  const matchSeriesMetadata = useMemo(() => {\n    return (\n      seriesMetadata?.find(\n        (item: any) =>\n          sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n            ?.subSubCategories?.[activeSubSubcategoryIndex]?.label === item.label\n      ) || {}\n    )\n  }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata])\n\n  const handleSubcategoryOpen = (index: number) => {\n    setExpandedSubcategory(prev =>\n      prev.map(item => (item.index === index ? { ...item, open: !item.open } : { ...item, open: false }))\n    )\n  }\n\n  const handleSubSubcategoryOpen = (index: number) => {\n    setActiveSubSubcategoryIndex(index)\n  }\n\n  return (\n    <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n      <div\n        className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n        style={{\n          userSelect: 'none',\n        }}\n      >\n        <div className=\"desktop:max-h-[416px] flex flex-col overflow-y-auto\">\n          {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => (\n            <div key={`subcategoryItem-${index}`}>\n              <div\n                className=\"flex cursor-pointer items-center justify-between\"\n                onClick={() => handleSubcategoryOpen(index)}\n              >\n                <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                <DownArrow\n                  className={cn({ ['rotate-180']: expandedSubcategory.find(item => item.index === index)?.open })}\n                />\n              </div>\n              {expandedSubcategory.find(item => item.index === index)?.open && (\n                <div className=\"flex flex-col\">\n                  {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                    <Text\n                      html={subSubItem.label}\n                      onMouseEnter={() => handleSubSubcategoryOpen(subSubindex)}\n                      key={`subSubItem-${index}-${subSubindex}`}\n                      className={cn(\n                        'cursor-pointer px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F] hover:bg-[#F5F5F7]'\n                      )}\n                    />\n                  ))}\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n        <div className=\"flex\">\n          <div className=\"flex flex-col gap-4\">\n            <Button variant=\"primary\" size=\"lg\" className=\"text-base\">\n              <a href={sidebarCategoriesMetadata?.primary?.url}>{sidebarCategoriesMetadata?.primary?.label}</a>\n            </Button>\n            <Button variant=\"link\" size=\"lg\" className=\"justify-start py-0 text-base\">\n              <a href={sidebarCategoriesMetadata?.secondary?.url}>{sidebarCategoriesMetadata?.secondary?.label}</a>\n            </Button>\n          </div>\n        </div>\n      </div>\n      {\n        <div className=\"flex-1\">\n          {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Text html={matchSeriesMetadata?.label} className=\"text-2xl font-bold leading-[1.4]\" />\n                <Button variant=\"link\" size=\"lg\" className=\"justify-start p-0 text-base\">\n                  <Link\n                    href={matchSeriesMetadata?.primary?.url}\n                    className=\"text-base font-bold leading-[1.2] no-underline\"\n                  >\n                    {matchSeriesMetadata?.primary?.label}\n                  </Link>\n                </Button>\n              </div>\n              <Link href={matchSeriesMetadata?.guide?.url} className=\"text-base leading-[1.2] text-[#6D6D6F]\">\n                {matchSeriesMetadata?.guide?.label}\n              </Link>\n            </div>\n          )}\n          <div className=\"flex flex-col gap-4 overflow-y-auto\" ref={sidebarDropdownRef}>\n            {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n              <div key={`seriesItem-${seriesIndex}`}>\n                <Text html={seriesItem.label} className=\"text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n                <div className=\"mt-2 grid grid-cols-3 gap-4\">\n                  {seriesItem.products?.map((product: any, index: number) => (\n                    <SeriesProductItem key={`seriesProductItem-${index}`} product={product} />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      }\n    </Container>\n  )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nconst MulticolDropdown = ({ multicolMetadata }: { multicolMetadata: any }) => {\n  const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n  useGSAP(() => {\n    gsap.fromTo(\n      multicolDropdownRef?.current,\n      {\n        height: 0,\n      },\n      {\n        height: 'auto',\n      }\n    )\n  }, [])\n\n  return (\n    <div ref={multicolDropdownRef}>\n      <Container childClassName=\"bg-white\" className=\"h-full\">\n        <div className=\"flex gap-4 py-4\">\n          {multicolMetadata?.map((item: any, index: number) => (\n            <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n              <MulticolItem item={item} />\n            </div>\n          ))}\n        </div>\n      </Container>\n    </div>\n  )\n}\n\n/**\n * supports\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n * @param currentNavItemRef \u5F53\u524D\u5BFC\u822A\u9879\n */\nconst SupportsDropdown = ({\n  supportsMetadata,\n  currentNavItemRef,\n}: {\n  supportsMetadata: any\n  currentNavItemRef: HTMLDivElement\n}) => {\n  const supportsDropdownRef = useRef<HTMLDivElement>(null)\n  const [navItemReact, setNavItemReact] = useState<DOMRect | null>(null)\n\n  useGSAP(() => {\n    gsap.fromTo(\n      supportsDropdownRef?.current,\n      {\n        height: 0,\n      },\n      {\n        height: 'auto',\n      }\n    )\n  }, [])\n\n  const debouncedHandleResize = debounce(() => {\n    if (currentNavItemRef) {\n      const rect = currentNavItemRef.getBoundingClientRect()\n      setNavItemReact(rect)\n    }\n  }, 500)\n\n  useEffect(() => {\n    debouncedHandleResize()\n    window.addEventListener('resize', debouncedHandleResize)\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize)\n    }\n  }, [debouncedHandleResize])\n\n  useEffect(() => {\n    if (currentNavItemRef) {\n      const rect = currentNavItemRef.getBoundingClientRect()\n      setNavItemReact(rect)\n    }\n  }, [currentNavItemRef])\n\n  return (\n    <div\n      className=\"absolute top-0 h-full bg-white p-4\"\n      ref={supportsDropdownRef}\n      style={{ right: `calc(100% - ${navItemReact?.right}px)` }}\n    >\n      <div>\n        {supportsMetadata?.map((supportItem: any) => (\n          <div key={supportItem.id} className=\"py-2\">\n            <Link href={supportItem.url} className=\"text-sm font-bold leading-[1.4] no-underline\">\n              {supportItem.label}\n            </Link>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nconst SeriesProductItem = ({ product }: { product: any }) => {\n  const { buildProps } = useNavContext()\n  const productData = buildProps?.products?.find((item: Product) => item.handle === product.handle)\n  const variant = productData?.variants?.find((item: ProductVariant) => item.sku === product.sku)\n\n  const listingLink = useMemo(() => {\n    return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [productData?.handle, variant?.id])\n\n  return (\n    <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105\">\n      <div className=\"shrink-0 basis-[96px]\">\n        <Picture source={`${variant?.image?.url || product?.images?.[0]?.url}}`} width={96} height={96} />\n      </div>\n      <div className=\"relative\">\n        {product?.badge && (\n          <Text\n            as=\"p\"\n            html={product?.badge}\n            className=\"text-brand-0 mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[24px]\"\n          />\n        )}\n        <Link href={listingLink} className=\"no-underline\">\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={productData?.title || product?.name}\n          />\n        </Link>\n        {product?.desc && (\n          <Text\n            as=\"p\"\n            html={product?.desc}\n            className=\"lg-desktop:text-sm mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nconst MulticolItem = ({ item }: { item: any }) => {\n  return (\n    <>\n      {item?.columns && (\n        <>\n          <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n          <div className=\"mt-2 flex flex-col\">\n            {item.columns?.map((columnItem: any) => (\n              <div key={columnItem.label} className=\"py-2\">\n                <Link href={columnItem.url} className=\"text-sm font-bold leading-[1.4] no-underline\">\n                  {columnItem.label}\n                </Link>\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {item?.imageUrl && (\n        <div className=\"laptop:h-[280px] laptop:w-[404px] desktop:w-full desktop:h-auto relative h-[240px] w-[358px]\">\n          <Picture source={item.imageUrl} width={404} height={280} />\n          <Link href={item.url} className=\"absolute inset-0 z-10 flex flex-col justify-end p-4 no-underline\">\n            <Text html={item.title} className=\"desktop:text-2xl text-xl font-bold leading-[1.2] text-white\" />\n            <Text html={item.subtitle} className=\"text-sm font-bold leading-[1.4] text-white\" />\n          </Link>\n        </div>\n      )}\n    </>\n  )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u5BFC\u822A\n * @param menuHeight \u83DC\u5355\u9AD8\u5EA6\n * @param data \u5BFC\u822A\u6570\u636E\n */\nconst MobileNavigation = forwardRef<HTMLDivElement, MobileNavigationProps>(({ data }, ref) => {\n  const groupCategories = useMemo(() => {\n    return WithGroupCategory(data?.categories)\n  }, [data])\n\n  const { currentMenu, setCurrentMenu, thirdNavTitle } = useNavContext()\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)\n  const [menuInnerHeight, setMenuInnerHeight] = useState(0)\n  const [categoriesItem, setCategoriesItem] = useState<any>(null)\n\n  const mobileMenuRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (mobileMenuRef?.current && mobileMenuOpen) {\n      const rect = mobileMenuRef?.current?.getBoundingClientRect()\n      setMenuInnerHeight(window?.innerHeight - (rect?.bottom || 0))\n    }\n  }, [mobileMenuOpen])\n\n  useGSAP(() => {\n    gsap.fromTo(\n      mobileMenuRef.current,\n      {\n        height: 0,\n      },\n      {\n        height: menuInnerHeight,\n        duration: 0.5,\n      }\n    )\n  }, [menuInnerHeight])\n\n  useEffect(() => {\n    document.documentElement.style.overflow = mobileMenuOpen ? 'hidden' : 'auto'\n  }, [mobileMenuOpen])\n\n  const currentBlockTypeCategories = useMemo(() => {\n    return categoriesItem?.components?.[0]?.blockType\n  }, [categoriesItem])\n\n  const MobileSidebarMenuComp = WithSidebar(MobileSidebarMenu, categoriesItem)\n  const MobileSupportMenuComp = WithSupports(MobileSupportMenu, {\n    categoriesItem,\n  })\n  const MobileMulticolMenuComp = WithMulticol(MobileMulticolMenu, categoriesItem)\n\n  const MobileCategoriesMenuComp = useMemo(() => {\n    switch (currentBlockTypeCategories) {\n      case HeaderNavigationBlockType.Sidebar:\n        return <MobileSidebarMenuComp />\n      case HeaderNavigationBlockType.Supports:\n        return <MobileSupportMenuComp />\n      case HeaderNavigationBlockType.Multicol:\n        return <MobileMulticolMenuComp />\n      default:\n        return null\n    }\n  }, [currentBlockTypeCategories, MobileSidebarMenuComp, MobileSupportMenuComp, MobileMulticolMenuComp])\n\n  const handleSecondaryMenuClose = useCallback(() => {\n    setMobileMenuOpen(false)\n    setMenuInnerHeight(0)\n    setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Primary)\n  }, [setMobileMenuOpen, setMenuInnerHeight, setCurrentMenu])\n\n  const menuActions = useMemo(() => {\n    return data?.headerBar?.actions?.filter(\n      (item: any) => item?.mobileShow && item?.blockType !== HeaderNavigationActionBlockType.Profile // \u79FB\u52A8\u7AEF\u4E0D\u663E\u793Aprofile\u6309\u94AE\n    )\n  }, [data])\n\n  const profileAction = useMemo(() => {\n    return (\n      data?.headerBar?.actions?.find(\n        (item: any) => item?.mobileShow && item?.blockType === HeaderNavigationActionBlockType.Profile\n      ) || {}\n    )\n  }, [data])\n\n  const MobileCategoriesHeaderComp = useMemo(() => {\n    switch (currentMenu) {\n      case HeaderNavigationMenu.Primary:\n        return (\n          <PrimaryHeader\n            actions={menuActions}\n            menuOpen={mobileMenuOpen}\n            onMenuOpenClose={() => {\n              setMobileMenuOpen(false)\n              setMenuInnerHeight(0)\n            }}\n            onMenuOpenClick={() => setMobileMenuOpen(true)}\n          />\n        )\n      case HeaderNavigationMenu.Secondary:\n        return (\n          <SecondaryHeader\n            title={categoriesItem?.text}\n            onMenuOpenClose={handleSecondaryMenuClose}\n            onMenuBackClick={() => setCurrentMenu?.(HeaderNavigationMenu.Primary)}\n          />\n        )\n      case HeaderNavigationMenu.Third:\n        return (\n          <SecondaryHeader\n            title={thirdNavTitle}\n            onMenuOpenClose={handleSecondaryMenuClose}\n            onMenuBackClick={() => setCurrentMenu?.(HeaderNavigationMenu.Secondary)}\n          />\n        )\n      default:\n        return null\n    }\n  }, [\n    mobileMenuOpen,\n    currentMenu,\n    setCurrentMenu,\n    categoriesItem,\n    menuActions,\n    thirdNavTitle,\n    handleSecondaryMenuClose,\n  ])\n\n  const handlePrimaryMenuClick = useCallback(\n    (groupIndex: number, index: number) => {\n      const categoriesItem = Array.isArray(groupCategories)\n        ? Array.isArray(groupCategories[groupIndex])\n          ? groupCategories[groupIndex][index]\n          : {}\n        : {}\n      setCategoriesItem(categoriesItem)\n      setCurrentMenu?.(HeaderNavigationMenu.Secondary)\n    },\n    [groupCategories, setCurrentMenu]\n  )\n\n  return (\n    <Container childClassName=\"bg-white\" className=\"relative h-[52px]\">\n      {/* \u79FB\u52A8\u7AEF\u5206\u7C7B\u83DC\u5355 */}\n      {MobileCategoriesHeaderComp}\n      {mobileMenuOpen && (\n        <div\n          ref={mobileMenuRef}\n          className=\"absolute left-0 top-[calc(100%+1px)] z-[999] w-full overflow-y-auto bg-white\"\n          style={{ height: menuInnerHeight }}\n        >\n          {currentMenu === HeaderNavigationMenu.Primary ? (\n            <MobilePrimaryMenu\n              categories={groupCategories}\n              onPrimaryMenuClick={handlePrimaryMenuClick}\n              profileAction={profileAction}\n            />\n          ) : (\n            MobileCategoriesMenuComp\n          )}\n        </div>\n      )}\n    </Container>\n  )\n})\n\n/**\n * \u79FB\u52A8\u7AEF\u4E00\u7EA7\u83DC\u5355\n * @param categories \u5206\u7C7B\n * @param onPrimaryMenuClick \u4E00\u7EA7\u83DC\u5355\u70B9\u51FB\n */\nconst MobilePrimaryMenu = ({\n  categories,\n  onPrimaryMenuClick,\n  profileAction,\n}: {\n  categories: any\n  onPrimaryMenuClick: (groupIndex: number, index: number) => void\n  profileAction: any\n}) => {\n  return (\n    <div className=\"flex h-full flex-col justify-between\">\n      <div className=\"tablet:px-8 laptop:px-16 p-4\">\n        {categories?.map((groupItem: any, groupIndex: number) => (\n          <div key={`groupCategory-${groupIndex}`} className=\"\">\n            {groupItem?.map((item: any, index: number) => (\n              <MenuItem key={item.id} label={item.text} onClick={() => onPrimaryMenuClick(groupIndex, index)} />\n            ))}\n            <div\n              className={cn('my-2 h-px w-full bg-[#E5E5E7]', { ['hidden']: groupIndex === categories.length - 1 })}\n            />\n          </div>\n        ))}\n      </div>\n      <ProfileComp profileAction={profileAction} />\n    </div>\n  )\n}\n\n/**\n * \u79FB\u52A8\u7AEF\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param sidebarCategoriesMetadata \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n * @param seriesMetadata \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n */\nconst MobileSidebarMenu = ({\n  sidebarCategoriesMetadata,\n  seriesMetadata,\n}: {\n  sidebarCategoriesMetadata: any\n  seriesMetadata: any\n}) => {\n  const { currentMenu, setCurrentMenu, setThirdNavTitle, matchSeriesMetadata, setMatchSeriesMetadata } = useNavContext()\n  const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n\n  useEffect(() => {\n    if (sidebarCategoriesMetadata?.subcategories?.length) {\n      setExpandedSubcategory(\n        sidebarCategoriesMetadata?.subcategories?.map((_: any, index: number) => ({ index, open: false }))\n      )\n    }\n  }, [sidebarCategoriesMetadata])\n\n  const MobileSidebarMenuComp = useMemo(() => {\n    switch (currentMenu) {\n      case HeaderNavigationMenu.Secondary:\n        return (\n          // \u4E8C\u7EA7\u83DC\u5355\n          <div className=\"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between p-4\">\n            <div>\n              {sidebarCategoriesMetadata?.subcategories?.map((item: any, index: number) => (\n                <div key={`${item.label}-${index}`}>\n                  <MenuItem\n                    label={item?.label}\n                    active={expandedSubcategory.find(item => item.index === index)?.open}\n                    onClick={() => {\n                      setExpandedSubcategory(prev =>\n                        prev.map(item =>\n                          item.index === index ? { ...item, open: !item.open } : { ...item, open: false }\n                        )\n                      )\n                    }}\n                  />\n                  {expandedSubcategory.find(item => item.index === index)?.open &&\n                    item.subSubCategories?.map((subItem: any, subIndex: number) => (\n                      <div\n                        key={`${index}-${subIndex}`}\n                        className=\"px-2 py-4\"\n                        onClick={() => {\n                          setCurrentMenu && setCurrentMenu(HeaderNavigationMenu.Third)\n                          // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n                          setMatchSeriesMetadata?.(\n                            seriesMetadata?.find(\n                              (item: any) =>\n                                sidebarCategoriesMetadata?.subcategories?.[index]?.subSubCategories?.[subIndex]\n                                  ?.label === item.label\n                            ) || {}\n                          )\n                          setThirdNavTitle && setThirdNavTitle(subItem.label)\n                        }}\n                      >\n                        <Text html={subItem.label} className=\"text-sm font-bold leading-[1.4]\" />\n                      </div>\n                    ))}\n                </div>\n              ))}\n              <Link href={matchSeriesMetadata?.guide?.url}>\n                <div className=\"mt-4\">\n                  <Text\n                    html={matchSeriesMetadata?.guide?.label}\n                    className=\"text-sm font-bold leading-[1.2] text-[#6D6D6F]\"\n                  />\n                </div>\n              </Link>\n            </div>\n            <div className=\"tablet:items-start flex flex-col items-center gap-4\">\n              <Button variant=\"primary\" size=\"lg\" className=\"tablet:w-auto w-full text-base\">\n                <a href={sidebarCategoriesMetadata?.primary?.url}>{sidebarCategoriesMetadata?.primary?.label}</a>\n              </Button>\n              <Button variant=\"link\" size=\"lg\" className=\"tablet:w-auto tablet:px-0 w-full py-0 text-base\">\n                <a href={sidebarCategoriesMetadata?.secondary?.url}>{sidebarCategoriesMetadata?.secondary?.label}</a>\n              </Button>\n            </div>\n          </div>\n        )\n      case HeaderNavigationMenu.Third:\n        return (\n          // \u4E09\u7EA7\u83DC\u5355\n          <div className=\"tablet:px-8 laptop:px-16 desktop:px-0 p-4\">\n            {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n              <div className=\"tablet:pt-0 flex items-center gap-3 py-4\">\n                <Text html={matchSeriesMetadata?.label} className=\"text-xl font-bold leading-[1.4]\" />\n                <Button variant=\"link\" size=\"lg\" className=\"p-0\">\n                  <Link href={matchSeriesMetadata?.primary?.url} className=\"text-base leading-[1.2]\">\n                    {matchSeriesMetadata?.primary?.label}\n                  </Link>\n                </Button>\n              </div>\n            )}\n            <div className=\"flex flex-col gap-6\">\n              {matchSeriesMetadata?.series?.map((seriesItem: any, pIndex: number) => (\n                <div key={`seriesItem-${pIndex}`}>\n                  <Text html={seriesItem.label} className=\"text-sm font-bold leading-[1.4] text-[#3D3D3F]\" />\n                  <div className=\"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 mt-2 flex flex-col gap-2\">\n                    {seriesItem.products?.map((product: any, index: number) => (\n                      <SeriesProductItem key={`seriesProductItem-${pIndex}-${index}`} product={product} />\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        )\n      default:\n        return null\n    }\n  }, [\n    currentMenu,\n    matchSeriesMetadata,\n    sidebarCategoriesMetadata,\n    setThirdNavTitle,\n    setCurrentMenu,\n    setMatchSeriesMetadata,\n    seriesMetadata,\n    expandedSubcategory,\n  ])\n\n  return MobileSidebarMenuComp\n}\n\n/**\n * \u79FB\u52A8\u7AEFsupport\u83DC\u5355\n * @param supportsMetadata support\u83DC\u5355\u5143\u6570\u636E\n */\nconst MobileSupportMenu = ({ supportsMetadata }: { supportsMetadata: any }) => {\n  return (\n    <div className=\"tablet:px-8 laptop:px-16 p-4\">\n      {supportsMetadata?.map((supportItem: any) => (\n        <MenuItem key={supportItem.id} href={supportItem.url} label={supportItem.label} onClick={() => {}} />\n      ))}\n    </div>\n  )\n}\n\n/**\n * \u79FB\u52A8\u7AEFmulticol\u83DC\u5355\n * @param multicolMetadata multicol\u83DC\u5355\u5143\u6570\u636E\n */\nconst MobileMulticolMenu = ({ multicolMetadata }: { multicolMetadata: any }) => {\n  return (\n    <div className=\"tablet:px-8 tablet:p-4 laptop:px-16 flex flex-col gap-4 px-4\">\n      {multicolMetadata?.map((item: any, index: number) => (\n        <div key={`multicolItem-${item?.label}-${index}`}>\n          <MulticolItem item={item} />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nconst ProfileComp = ({ profileAction }: { profileAction: any }) => {\n  const [profileOpen, setProfileOpen] = useState(false)\n  const { profile, event } = useNavContext()\n  return (\n    <div className=\"tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6\">\n      <div className=\"flex items-center justify-between\" onClick={() => setProfileOpen(!profileOpen)}>\n        <div className=\"flex items-center gap-[14px]\">\n          <div className=\"flex size-[40px] items-center justify-center rounded-full bg-white\">\n            <User />\n          </div>\n          <Text html={profile?.nick_name || profileAction?.welcome} className=\"text-base font-bold leading-[1.4]\" />\n        </div>\n        <RightArrow className={cn({ 'rotate-90': profileOpen })} />\n      </div>\n      {profile?.email && (\n        <div className=\"mt-4\">\n          {profileAction?.profiles?.map((item: any) => <MenuItem key={item.id} label={item?.title} href={item?.url} />)}\n        </div>\n      )}\n      {profileOpen && !profile?.email && (\n        <div className=\"mt-4\">\n          <Text html={profileAction?.benefits_title} className=\"text-sm font-bold leading-[1.4]\" />\n          <div className=\"mt-3 flex flex-col gap-1\">\n            {profileAction?.benefits?.map((item: any) => (\n              <div key={item.id} className=\"flex items-center gap-[6px]\">\n                <Picture source={item.benefitIcon?.url} className=\"size-4\" alt={item.benefit} width={16} height={16} />\n                <Text html={item.benefit} className=\"text-sm font-bold leading-[1.4]\" />\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n      <div className=\"tablet:mt-4 mt-6 flex items-center gap-3\">\n        <Button className=\"tablet:flex-none flex-1\" variant=\"secondary\" size=\"sm\" onClick={() => event?.join?.()}>\n          <Text html={profileAction?.primaryButton || 'Join Now'} className=\"text-sm font-bold leading-[1.4]\" />\n        </Button>\n        <Button className=\"tablet:flex-none flex-1\" variant=\"primary\" size=\"sm\" onClick={() => event?.login?.()}>\n          <Text html={profileAction?.secondaryButton || 'Log In'} className=\"text-sm font-bold leading-[1.4]\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst PrimaryHeader = ({ menuOpen, onMenuOpenClose, onMenuOpenClick, actions }: MobilePrimaryNavigationData) => {\n  return (\n    <div className=\"flex h-full items-center justify-between gap-4\">\n      <Logo />\n      <div className=\"desktop:gap-6 flex items-center gap-4\">\n        <Actions actions={actions} />\n        {menuOpen ? <Close onClick={() => onMenuOpenClose()} /> : <Menu onClick={() => onMenuOpenClick()} />}\n      </div>\n    </div>\n  )\n}\n\nconst Logo = () => {\n  const { payloadData } = useNavContext()\n  return (\n    <div className=\"desktop:gap-2 flex items-center gap-[6px]\">\n      <div dangerouslySetInnerHTML={{ __html: payloadData?.headerBar?.logo }} />\n      <LogoLine />\n      <Text html={payloadData?.headerBar?.slogan} className=\"tablet:text-sm text-xs font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\nconst Actions = forwardRef<HTMLDivElement, { actions: any }>(({ actions }, ref) => {\n  const { event } = useNavContext()\n\n  const handleActionClick = useCallback(\n    (action: any) => {\n      switch (action?.blockType) {\n        case HeaderNavigationActionBlockType.Search:\n          event?.search?.()\n          break\n        case HeaderNavigationActionBlockType.Cart:\n          event?.cart?.()\n          break\n        case HeaderNavigationActionBlockType.Profile:\n          event?.profile?.()\n          break\n        case HeaderNavigationActionBlockType.Livestream:\n          event?.livestream?.()\n          break\n        default:\n          return () => {}\n      }\n    },\n    [event]\n  )\n\n  return (\n    <div className=\"desktop:gap-6 flex items-center gap-4\">\n      {Array.isArray(actions) &&\n        actions?.map((action: any) => (\n          <div\n            key={action.id}\n            ref={action.blockType === HeaderNavigationActionBlockType.Profile ? ref : null}\n            onClick={() => handleActionClick(action)}\n          >\n            <Text html={action.icon} className=\"hover:text-brand-0 cursor-pointer\" />\n          </div>\n        ))}\n    </div>\n  )\n})\n\nconst SecondaryHeader = ({ title, onMenuOpenClose, onMenuBackClick }: MobileSecondaryNavigationData) => {\n  return (\n    <div className=\"flex h-full items-center gap-3\">\n      <LeftArrow onClick={() => onMenuBackClick()} />\n      <Text html={title} className=\"flex-1 text-center text-base font-bold leading-[1.4]\" />\n      <Close onClick={() => onMenuOpenClose()} />\n    </div>\n  )\n}\n\nconst MenuItem = ({\n  label,\n  href,\n  onClick,\n  active,\n}: {\n  label: string\n  href?: string\n  onClick?: () => void\n  active?: boolean\n}) => {\n  return (\n    <div className=\"flex cursor-pointer items-center justify-between py-4\" onClick={onClick}>\n      <Link href={href} asChild={!href} className=\"flex w-full items-center justify-between no-underline\">\n        <Text html={label} className=\"text-sm font-bold leading-[1.4]\" />\n        <RightArrow className={cn({ 'rotate-90': active })} />\n      </Link>\n    </div>\n  )\n}\n\nexport default withLayout(HeaderNavigation)\n"],
+  "mappings": "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",
+  "names": ["HeaderNavigation_exports", "__export", "HeaderNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_utils", "import_NavProvider", "import_types", "import_react_responsive", "import_es_toolkit", "import_gsap", "import_withCategory", "import_icons", "HeaderNavigation", "props", "ref", "headerNavigation", "buildProps", "event", "profile", "theme", "isMobile", "setIsMobile", "headerHidden", "setHeaderHidden", "changeHeaderBackground", "setChangeHeaderBackground", "headerRef", "mediaQuery", "upwardDistance", "lastScrollY", "showDownNav", "latest", "delta", "scrollAnimate", "scrollTop", "NavProvider", "DesktopNavigation", "MobileNavigation", "data", "groupCategories", "categoriesItem", "setCategoriesItem", "navStatusArray", "setNavStatusArray", "profileRef", "userProfileOpen", "setUserProfileOpen", "navItemRefs", "categories", "groupItem", "groupIndex", "_", "index", "currentNavItem", "item", "handleNavItemClick", "e", "prev", "handleNavMenuClose", "currentBlockTypeCategories", "SidebarDropdownComp", "SidebarDropdown", "SupportsDropdownComp", "SupportsDropdown", "MulticolDropdownComp", "MulticolDropdown", "DropdownComp", "actions", "profileAction", "handleProfileClick", "profileRefElement", "Logo", "Actions", "el", "sidebarCategoriesMetadata", "seriesMetadata", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "matchSeriesMetadata", "handleSubcategoryOpen", "handleSubSubcategoryOpen", "subItem", "subSubItem", "subSubindex", "seriesItem", "seriesIndex", "product", "SeriesProductItem", "multicolMetadata", "multicolDropdownRef", "MulticolItem", "supportsMetadata", "currentNavItemRef", "supportsDropdownRef", "navItemReact", "setNavItemReact", "debouncedHandleResize", "rect", "supportItem", "productData", "variant", "listingLink", "columnItem", "currentMenu", "setCurrentMenu", "thirdNavTitle", "mobileMenuOpen", "setMobileMenuOpen", "menuInnerHeight", "setMenuInnerHeight", "mobileMenuRef", "MobileSidebarMenuComp", "MobileSidebarMenu", "MobileSupportMenuComp", "MobileSupportMenu", "MobileMulticolMenuComp", "MobileMulticolMenu", "MobileCategoriesMenuComp", "handleSecondaryMenuClose", "menuActions", "MobileCategoriesHeaderComp", "PrimaryHeader", "SecondaryHeader", "handlePrimaryMenuClick", "MobilePrimaryMenu", "onPrimaryMenuClick", "MenuItem", "ProfileComp", "setThirdNavTitle", "setMatchSeriesMetadata", "subIndex", "pIndex", "profileOpen", "setProfileOpen", "menuOpen", "onMenuOpenClose", "onMenuOpenClick", "payloadData", "handleActionClick", "action", "title", "onMenuBackClick", "label", "href", "onClick", "active"]
+}

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

@@ -0,0 +1,77 @@
+import type { Product } from '../../cpn-components/CpnProductCard/types.js';
+export interface HeaderNavigationProps {
+    data: any;
+    event?: {
+        search?: () => void;
+        cart?: () => void;
+        profile?: () => void;
+        livestream?: () => void;
+    };
+    buildProps: {
+        products: Product[];
+    };
+    profile?: UserProfile;
+    theme?: string;
+}
+export interface MobilePrimaryNavigationData {
+    actions: any;
+    menuOpen?: boolean;
+    onMenuOpenClick: () => void;
+    onMenuOpenClose: () => void;
+}
+export interface MobileSecondaryNavigationData {
+    title?: string;
+    onMenuOpenClose: () => void;
+    onMenuBackClick: () => void;
+}
+export declare enum HeaderNavigationMenu {
+    Primary = "primary",
+    Secondary = "secondary",
+    Third = "third"
+}
+export declare enum HeaderNavigationBlockType {
+    Sidebar = "ipc-navigation-sidebar",
+    Supports = "ipc-navigation-supports",
+    Multicol = "ipc-navigation-multicol"
+}
+export declare enum HeaderNavigationActionBlockType {
+    Search = "ipc-navigation-action-search",
+    Cart = "ipc-navigation-action-cart",
+    Profile = "ipc-navigation-action-profile",
+    Livestream = "ipc-navigation-action-livestream"
+}
+export interface MobileNavigationProps {
+    data: any;
+}
+export interface DesktopNavigationProps {
+    data: any;
+}
+type Country = {
+    id?: number;
+    name?: string;
+    code?: string;
+};
+export type UserProfile = {
+    user_id: string;
+    email: string;
+    nick_name?: string;
+    full_name?: string;
+    first_name?: string;
+    last_name?: string;
+    dob?: string;
+    gender?: string;
+    phone_number?: string;
+    phone_account?: string;
+    country?: Country;
+    is_subscribe?: boolean;
+    avatar?: string;
+    can_change_password?: boolean;
+    invitation_code?: string;
+    phone_carrier?: string;
+    dob_programmed?: boolean;
+    activated?: boolean;
+    registed_at?: number;
+    activated_at?: number;
+    token?: string;
+};
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";var e=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var u=(i,t)=>{for(var o in t)e(i,o,{get:t[o],enumerable:!0})},g=(i,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of m(t))!d.call(i,n)&&n!==o&&e(i,n,{get:()=>t[n],enumerable:!(r=c(t,n))||r.enumerable});return i};var l=i=>g(e({},"__esModule",{value:!0}),i);var b={};u(b,{HeaderNavigationActionBlockType:()=>p,HeaderNavigationBlockType:()=>s,HeaderNavigationMenu:()=>a});module.exports=l(b);var f=require("react"),a=(r=>(r.Primary="primary",r.Secondary="secondary",r.Third="third",r))(a||{}),s=(r=>(r.Sidebar="ipc-navigation-sidebar",r.Supports="ipc-navigation-supports",r.Multicol="ipc-navigation-multicol",r))(s||{}),p=(n=>(n.Search="ipc-navigation-action-search",n.Cart="ipc-navigation-action-cart",n.Profile="ipc-navigation-action-profile",n.Livestream="ipc-navigation-action-livestream",n))(p||{});
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/HeaderNavigation/types.ts"],
+  "sourcesContent": ["import React from 'react'\n\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\n\nexport interface HeaderNavigationProps {\n  data: any\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n  }\n  buildProps: {\n    products: Product[]\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  theme?: string\n}\n\nexport interface MobilePrimaryNavigationData {\n  actions: any\n  menuOpen?: boolean\n  onMenuOpenClick: () => void\n  onMenuOpenClose: () => void\n}\n\nexport interface MobileSecondaryNavigationData {\n  title?: string\n  onMenuOpenClose: () => void\n  onMenuBackClick: () => void\n}\n\nexport enum HeaderNavigationMenu {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Third = 'third',\n}\n\nexport enum HeaderNavigationBlockType {\n  Sidebar = 'ipc-navigation-sidebar',\n  Supports = 'ipc-navigation-supports',\n  Multicol = 'ipc-navigation-multicol',\n}\n\nexport enum HeaderNavigationActionBlockType {\n  Search = 'ipc-navigation-action-search',\n  Cart = 'ipc-navigation-action-cart',\n  Profile = 'ipc-navigation-action-profile',\n  Livestream = 'ipc-navigation-action-livestream',\n}\n\nexport interface MobileNavigationProps {\n  data: any\n}\n\nexport interface DesktopNavigationProps {\n  data: any\n}\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,qCAAAE,EAAA,8BAAAC,EAAA,yBAAAC,IAAA,eAAAC,EAAAL,GAAA,IAAAM,EAAkB,iBAgCNF,OACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,MAAQ,QAHEA,OAAA,IAMAD,OACVA,EAAA,QAAU,yBACVA,EAAA,SAAW,0BACXA,EAAA,SAAW,0BAHDA,OAAA,IAMAD,OACVA,EAAA,OAAS,+BACTA,EAAA,KAAO,6BACPA,EAAA,QAAU,gCACVA,EAAA,WAAa,mCAJHA,OAAA",
+  "names": ["types_exports", "__export", "HeaderNavigationActionBlockType", "HeaderNavigationBlockType", "HeaderNavigationMenu", "__toCommonJS", "import_react"]
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
+export declare function WithSupports<P extends object>(WrappedComponent: React.ComponentType<any>, { categoriesItem, currentNavItemRef, onMouseLeave, }: {
+    categoriesItem: any;
+    currentNavItemRef?: any;
+    onMouseLeave?: () => void;
+}): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
+export declare function WithMulticol<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
+export declare function WithGroupCategory(categories: any): unknown[];

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

@@ -0,0 +1,2 @@
+"use strict";var p=Object.create;var i=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var w=(e,a)=>{for(var t in a)i(e,t,{get:a[t],enumerable:!0})},l=(e,a,t,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of M(a))!m.call(e,r)&&r!==t&&i(e,r,{get:()=>a[r],enumerable:!(n=y(a,r))||n.enumerable});return e};var h=(e,a,t)=>(t=e!=null?p(f(e)):{},l(a||!e||!e.__esModule?i(t,"default",{value:e,enumerable:!0}):t,e)),P=e=>l(i({},"__esModule",{value:!0}),e);var g={};w(g,{WithGroupCategory:()=>S,WithMulticol:()=>R,WithSidebar:()=>b,WithSupports:()=>N});module.exports=P(g);var d=require("react/jsx-runtime"),s=h(require("react"));function b(e,a){const t=(0,s.useMemo)(()=>{let o=null;try{o=JSON.parse(a?.components?.[0]?.sidebar?.categoriesMetadata||"{}")}catch(u){console.log("categoriesMetadata Parse error",u)}return o},[a]),n=(0,s.useMemo)(()=>{let o=null;try{o=JSON.parse(a?.components?.[0]?.sidebar?.seriesMetadata||"[]")}catch(u){console.log("seriesMetadata Parse error",u)}return o},[a]),r=s.default.forwardRef((o,u)=>(0,d.jsx)(e,{...o,ref:u,seriesMetadata:n,sidebarCategoriesMetadata:t}));return r.displayName=e.displayName||e.name||"WithSidebarDropdown",r}function N(e,{categoriesItem:a,currentNavItemRef:t,onMouseLeave:n}){const r=(0,s.useMemo)(()=>a?.components?.[0]?.supports,[a]),o=s.default.forwardRef((u,c)=>(0,d.jsx)(e,{...u,supportsMetadata:r,currentNavItemRef:t,onMouseLeave:n,ref:c}));return o.displayName=e.displayName||e.name||"WithSupportsDropdown",o}function R(e,a){const t=(0,s.useMemo)(()=>{try{return JSON.parse(a?.components?.[0]?.multicol?.multicolMetadata||"{}")}catch(r){console.log("multicolMetadata Parse error",r)}return null},[a]),n=s.default.forwardRef((r,o)=>(0,d.jsx)(e,{...r,ref:o,multicolMetadata:t}));return n.displayName=e.displayName||e.name||"WithMulticolDropdown",n}function S(e){return e?Object.values(e?.reduce((a,t)=>(a[t.group]||(a[t.group]=[]),a[t.group].push(t),a),{})):[[]]}
+//# sourceMappingURL=withCategory.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/HeaderNavigation/withCategory.tsx"],
+  "sourcesContent": ["import React, { useMemo } from 'react'\n\nexport function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  // \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n  const sidebarCategoriesMetadata = useMemo(() => {\n    let categoriesMetadata = null\n    try {\n      categoriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.categoriesMetadata || '{}')\n    } catch (error) {\n      console.log('categoriesMetadata Parse error', error)\n    }\n    return categoriesMetadata\n  }, [categoriesItem])\n\n  // \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n  const seriesMetadata = useMemo(() => {\n    let seriesMetadata = null\n    try {\n      seriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.seriesMetadata || '[]')\n    } catch (error) {\n      console.log('seriesMetadata Parse error', error)\n    }\n    return seriesMetadata\n  }, [categoriesItem])\n\n  const withSidebarDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        ref={ref}\n        seriesMetadata={seriesMetadata}\n        sidebarCategoriesMetadata={sidebarCategoriesMetadata}\n      />\n    )\n  })\n\n  withSidebarDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSidebarDropdown'\n  return withSidebarDropdown\n}\n\nexport function WithSupports<P extends object>(\n  WrappedComponent: React.ComponentType<any>,\n  {\n    categoriesItem,\n    currentNavItemRef,\n    onMouseLeave,\n  }: { categoriesItem: any; currentNavItemRef?: any; onMouseLeave?: () => void }\n) {\n  const supportsMetadata = useMemo(() => {\n    return categoriesItem?.components?.[0]?.supports\n  }, [categoriesItem])\n\n  const supportsDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        supportsMetadata={supportsMetadata}\n        currentNavItemRef={currentNavItemRef}\n        onMouseLeave={onMouseLeave}\n        ref={ref}\n      />\n    )\n  })\n\n  supportsDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSupportsDropdown'\n  return supportsDropdown\n}\n\nexport function WithMulticol<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  const multicolMetadata = useMemo(() => {\n    try {\n      return JSON.parse(categoriesItem?.components?.[0]?.multicol?.multicolMetadata || '{}')\n    } catch (error) {\n      console.log('multicolMetadata Parse error', error)\n    }\n    return null\n  }, [categoriesItem])\n  const multicolDropdown = React.forwardRef<any, P>((props, ref) => {\n    return <WrappedComponent {...(props as unknown as P)} ref={ref} multicolMetadata={multicolMetadata} />\n  })\n\n  multicolDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithMulticolDropdown'\n  return multicolDropdown\n}\n\nexport function WithGroupCategory(categories: any) {\n  if (!categories) return [[]]\n  return Object.values(\n    categories?.reduce((acc: any, item: any) => {\n      if (!acc[item.group]) {\n        acc[item.group] = []\n      }\n      acc[item.group].push(item)\n      return acc\n    }, {})\n  )\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,iBAAAC,EAAA,gBAAAC,EAAA,iBAAAC,IAAA,eAAAC,EAAAN,GA2BM,IAAAO,EAAA,6BA3BNC,EAA+B,oBAExB,SAASJ,EAA8BK,EAA4CC,EAAqB,CAE7G,MAAMC,KAA4B,WAAQ,IAAM,CAC9C,IAAIC,EAAqB,KACzB,GAAI,CACFA,EAAqB,KAAK,MAAMF,GAAgB,aAAa,CAAC,GAAG,SAAS,oBAAsB,IAAI,CACtG,OAASG,EAAO,CACd,QAAQ,IAAI,iCAAkCA,CAAK,CACrD,CACA,OAAOD,CACT,EAAG,CAACF,CAAc,CAAC,EAGbI,KAAiB,WAAQ,IAAM,CACnC,IAAIA,EAAiB,KACrB,GAAI,CACFA,EAAiB,KAAK,MAAMJ,GAAgB,aAAa,CAAC,GAAG,SAAS,gBAAkB,IAAI,CAC9F,OAASG,EAAO,CACd,QAAQ,IAAI,6BAA8BA,CAAK,CACjD,CACA,OAAOC,CACT,EAAG,CAACJ,CAAc,CAAC,EAEbK,EAAsB,EAAAC,QAAM,WAAmB,CAACC,EAAOC,OAEzD,OAACT,EAAA,CACE,GAAIQ,EACL,IAAKC,EACL,eAAgBJ,EAChB,0BAA2BH,EAC7B,CAEH,EAED,OAAAI,EAAoB,YAAcN,EAAiB,aAAeA,EAAiB,MAAQ,sBACpFM,CACT,CAEO,SAASV,EACdI,EACA,CACE,eAAAC,EACA,kBAAAS,EACA,aAAAC,CACF,EACA,CACA,MAAMC,KAAmB,WAAQ,IACxBX,GAAgB,aAAa,CAAC,GAAG,SACvC,CAACA,CAAc,CAAC,EAEbY,EAAmB,EAAAN,QAAM,WAAmB,CAACC,EAAOC,OAEtD,OAACT,EAAA,CACE,GAAIQ,EACL,iBAAkBI,EAClB,kBAAmBF,EACnB,aAAcC,EACd,IAAKF,EACP,CAEH,EAED,OAAAI,EAAiB,YAAcb,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFa,CACT,CAEO,SAASnB,EAA+BM,EAA4CC,EAAqB,CAC9G,MAAMa,KAAmB,WAAQ,IAAM,CACrC,GAAI,CACF,OAAO,KAAK,MAAMb,GAAgB,aAAa,CAAC,GAAG,UAAU,kBAAoB,IAAI,CACvF,OAASG,EAAO,CACd,QAAQ,IAAI,+BAAgCA,CAAK,CACnD,CACA,OAAO,IACT,EAAG,CAACH,CAAc,CAAC,EACbc,EAAmB,EAAAR,QAAM,WAAmB,CAACC,EAAOC,OACjD,OAACT,EAAA,CAAkB,GAAIQ,EAAwB,IAAKC,EAAK,iBAAkBK,EAAkB,CACrG,EAED,OAAAC,EAAiB,YAAcf,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFe,CACT,CAEO,SAAStB,EAAkBuB,EAAiB,CACjD,OAAKA,EACE,OAAO,OACZA,GAAY,OAAO,CAACC,EAAUC,KACvBD,EAAIC,EAAK,KAAK,IACjBD,EAAIC,EAAK,KAAK,EAAI,CAAC,GAErBD,EAAIC,EAAK,KAAK,EAAE,KAAKA,CAAI,EAClBD,GACN,CAAC,CAAC,CACP,EATwB,CAAC,CAAC,CAAC,CAU7B",
+  "names": ["withCategory_exports", "__export", "WithGroupCategory", "WithMulticol", "WithSidebar", "WithSupports", "__toCommonJS", "import_jsx_runtime", "import_react", "WrappedComponent", "categoriesItem", "sidebarCategoriesMetadata", "categoriesMetadata", "error", "seriesMetadata", "withSidebarDropdown", "React", "props", "ref", "currentNavItemRef", "onMouseLeave", "supportsMetadata", "supportsDropdown", "multicolMetadata", "multicolDropdown", "categories", "acc", "item"]
+}

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

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

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

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

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

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