@anker-in/headless-ui 1.0.26-temp-111002 → 1.0.26-temp-111005

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var he=Object.create;var V=Object.defineProperty;var ye=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var Ne=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var we=(t,n)=>{for(var o in n)V(t,o,{get:n[o],enumerable:!0})},le=(t,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of xe(n))!ke.call(t,r)&&r!==o&&V(t,r,{get:()=>n[r],enumerable:!(c=ye(n,r))||c.enumerable});return t};var q=(t,n,o)=>(o=t!=null?he(Ne(t)):{},le(n||!t||!t.__esModule?V(o,"default",{value:t,enumerable:!0}):o,t)),Ce=t=>le(V({},"__esModule",{value:!0}),t);var je={};we(je,{default:()=>Ae});module.exports=Ce(je);var e=require("react/jsx-runtime"),a=q(require("react")),l=require("../../components/index.js"),me=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),B=q(require("./NavProvider.js")),x=require("./types.js"),_e=require("react-responsive"),pe=require("es-toolkit"),be=q(require("jump.js")),Q=require("@gsap/react"),X=require("gsap"),T=require("./withCategory.js"),P=require("./icons/index.js"),fe=q(require("../NavigationSearch/index.js"));const Se=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:c,event:r,profile:f,theme:d="light",isTop:m=!1,searchResult:u,onSearch:w,isSearching:i,keywords:C,onPrimaryNavClick:N,onSeriesProductClick:v,onSidebarNavClick:g,headerId:h,cartCount:p}=t,s=(0,a.useRef)(null),[b,S]=(0,a.useState)(!1),[M,E]=(0,a.useState)(!1),[D,j]=(0,a.useState)(!1),[_,L]=(0,a.useState)(!1),$=(0,a.useRef)(null),R=()=>{const F=document?.querySelector("body")?.offsetWidth||0;L(F<=1440)};(0,a.useEffect)(()=>(R(),window.addEventListener("resize",R),()=>{window.removeEventListener("resize",R)}),[]),(0,a.useImperativeHandle)(n,()=>$.current),(0,a.useEffect)(()=>{$.current&&m&&(0,be.default)($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[m]),(0,a.useEffect)(()=>{r&&(r.search=()=>S(!0))},[r]),(0,Q.useGSAP)(()=>{s?.current&&b&&X.gsap.fromTo(s.current,{height:0},{height:"auto",duration:.3})},[b]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=b?"hidden":"auto"},[b]);const Y=(0,a.useMemo)(()=>o?.headerBar?.actions?.find(F=>F?.blockType===x.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[o]);return(0,e.jsx)(B.default,{buildProps:c,profile:f,isMobile:_,event:r,payloadData:o,onSidebarNavClick:g,onSeriesProductClick:v,cartCount:p,children:(0,e.jsx)("header",{id:h||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:$,children:(0,e.jsxs)("div",{className:(0,k.cn)("hover:text-black hover:bg-white",d==="light"?"text-black":"text-white",{}),onClick:()=>j(!0),children:[(0,e.jsx)(Me,{data:o,className:"hidden desktop:block !bg-white",theme:d,onNavItemClick:()=>j(!0),onPrimaryNavClick:N}),(0,e.jsx)(ze,{data:o,className:"block desktop:hidden !bg-white",onPrimaryNavClick:N}),b&&(0,e.jsxs)("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${$?.current?.getBoundingClientRect()?.top}px)`},children:[(0,e.jsx)("div",{ref:s,className:(0,k.cn)("overflow-y-auto",{}),children:(0,e.jsx)(fe.default,{data:Y,keywords:C,isSearching:i,searchResult:u,onSearch:F=>{w?.(F)},onClose:()=>{w?.(),S(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1)})]})]})})})}),Me=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:c,className:r,theme:f,onPrimaryNavClick:d}=t,{event:m,profile:u}=(0,B.useNavContext)(),[w,i]=(0,a.useState)(!1),C=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(o?.categories?.filter(y=>y?.pcShow)),[o]),[N,v]=(0,a.useState)(null),[g,h]=(0,a.useState)([]),p=(0,a.useRef)(null),[s,b]=(0,a.useState)(!1),S=(0,a.useRef)(null),M=(0,a.useRef)(null),E=(0,a.useRef)(C.map(y=>Array(y?.length||0).fill(null)));(0,a.useEffect)(()=>{C?.length&&h(C?.map((y,z)=>y?.map((H,A)=>({groupIndex:z,index:A,open:!1}))))},[C]);const D=(0,a.useMemo)(()=>{let y=null;for(const z of g){for(const H of z)if(H.open){y=H;break}if(y)break}return y},[g]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=D?.open||s?"hidden":"auto"},[D?.open,s]);const j=(y,z,H)=>{if(b(!1),N?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links)N?.components?.[0]?.url&&window.open(N?.components?.[0]?.url);else{const A=C?.flat()||[],W=C[z]?.[H],ve=A?.findIndex(I=>I?.id===W?.id);y.stopPropagation(),c?.();const ge=!!g?.[z]?.[H]?.open;let ne=z,K=H;if(ge){const I=(C?.[z]||[]).length,G=Math.max(0,I-1);H===G?K=Math.max(0,G-1):K=Math.min(G,H+1)}const te=C?.[ne]?.[K],ae=(C?.flat()||[]).findIndex(I=>I?.id===te?.id);ae>=0?d?.(A[ae],ae):d?.(te,ve),v(te),h(I=>I.map(G=>G.map(J=>J.groupIndex===ne&&J.index===K?{...J,open:!0}:{...J,open:!1})))}},_=()=>{h(y=>y.map(z=>z.map(H=>({...H,open:!1}))))},L=(0,a.useMemo)(()=>{if(N)return N?.components?.[0]?.blockType},[N]),$=(0,T.WithSidebar)(De,N),R=(0,T.WithMulticol)(Le,N),Y=(0,T.WithSupports)(Pe,{categoriesItem:N,currentNavItemRef:E.current?.[D?.groupIndex||0]?.[D?.index||0]}),F=(0,a.useMemo)(()=>{switch(L){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)($,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(Y,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(R,{});default:return null}},[L,N]),Z=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(y=>y?.pcShow),[o]),O=(0,a.useMemo)(()=>Z?.find(y=>y?.blockType===x.HeaderNavigationActionBlockType.Profile),[Z]),ee=(0,a.useCallback)(()=>{b(y=>!y)},[]);return(0,a.useEffect)(()=>{if(p?.current){const y=p.current;return y.addEventListener("click",ee),()=>{y.removeEventListener("click",ee)}}},[ee]),(0,Q.useGSAP)(()=>{D?.open&&X.gsap.fromTo(M?.current,{height:0},{height:"auto"})},[D?.open]),(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[96px]",r),children:[(0,e.jsxs)("div",{ref:S,onClick:_,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)(ce,{}),(0,e.jsx)(de,{ref:p,actions:Z,activeStatus:s})]}),(0,e.jsx)("div",{className:"flex justify-between",children:C?.map((y,z)=>(0,e.jsx)("div",{className:"flex gap-3",children:y?.map((H,A)=>(0,e.jsx)("div",{ref:W=>{E.current[z][A]=W},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1 pb-4",onClick:W=>j(W,z,A),children:[(0,e.jsx)(l.Text,{html:H.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":D?.groupIndex===z&&D?.index===A,"opacity-100":w&&D?.groupIndex===z&&D?.index===A})})]}),(0,e.jsx)("div",{className:(0,k.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":D?.groupIndex===z&&D?.index===A},f==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},H.id))},`groupCategory-${z}`))})]}),(0,e.jsxs)("div",{className:(0,k.cn)("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(D?.open&&N)}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:M,className:(0,k.cn)("relative z-50",{"overflow-hidden":L!==x.HeaderNavigationBlockType.Supports}),children:F}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:_})]}),s&&(0,e.jsxs)("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${p?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:u?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:u?.nick_name||O?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),(0,e.jsx)("div",{className:"mt-2",children:O?.profiles?.map(y=>(0,e.jsx)(U,{className:"py-2",label:y?.title,href:y?.url},y.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P.Polygon,{className:"absolute -top-2 text-white right-[46px] z-30"}),(0,e.jsx)(l.Text,{html:O?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:O?.benefits?.map(y=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:y.benefitIcon?.url,className:"size-4",alt:y.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:y.benefit,className:"text-sm font-bold leading-[1.4]"})]},y.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>m?.join?.(),children:(0,e.jsx)(l.Text,{html:O?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>m?.login?.(),children:(0,e.jsx)(l.Text,{html:O?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>b(!1)})]})]})}),De=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o,onSidebarNavClick:c}=(0,B.useNavContext)(),[r,f]=(0,a.useState)([]),[d,m]=(0,a.useState)(-1),u=(0,a.useRef)(null),w=(0,a.useCallback)(()=>{const v=t?.subcategories;if(!v?.length)return;const g=v.findIndex(s=>!!s?.subSubCategories),h=v.findIndex(s=>!s?.subSubCategories),p=v.map((s,b)=>({index:b,open:g===b||h===b}));f(p)},[t]);(0,a.useEffect)(()=>{w()},[w]);const i=(0,a.useMemo)(()=>{const v=t?.subcategories?.[r?.find(h=>h.open)?.index||0],g=n?.find(h=>h?.label?.toLowerCase()===v?.label?.toLowerCase())||{};if(v?.collections){const h=o?.categories?.[v?.collections]||{};return{label:g?.label,isCollection:!0,banner:g?.banner,primary:g?.primary,series:[{products:h?.products}]}}else if(v?.subSubCategories){const h=v?.subSubCategories?.[d],p=n?.find(s=>s?.label?.toLowerCase()===h?.label?.toLowerCase())||{};if(h?.collections){const s=o?.categories?.[h?.collections]||{};return{label:p?.label,isCollection:!0,banner:p?.banner,primary:p?.primary,series:[{products:s?.products}]}}else return p}else return g},[t,r,d,n]),C=(0,a.useCallback)((v,g)=>{if(g?.subSubCategories?.length>0?m(0):m(-1),g?.subSubCategories?.length>0)f(h=>h.map(p=>p.index===v?{...p,open:!0}:{...p,open:!1}));else{const p=t?.subcategories?.findIndex(s=>!!s?.subSubCategories);f(s=>s.map(b=>({...b,open:b.index===v||b.index===p})))}},[t,w]),N=(v,g)=>{f(h=>h.map(p=>p.index===v?{...p,open:!0}:{...p,open:!1})),m(g)};return(0,e.jsxs)(l.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"},ref:u,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((v,g)=>{const h=Array.isArray(v?.subSubCategories)&&v?.subSubCategories?.length>0;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!h&&r?.find(p=>p.index===g)?.open}),onClick:()=>{C(g,v),c?.(v,g)},children:[(0,e.jsx)(l.Text,{html:v.label,className:"p-4 text-sm font-bold leading-[1.4]"}),h&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-4",{"rotate-180":r?.find(p=>p.index===g)?.open})})]}),r?.find(p=>p.index===g)?.open&&(0,e.jsx)("div",{className:"flex flex-col",children:v.subSubCategories?.map((p,s)=>(0,e.jsx)(l.Text,{html:p.label,onClick:()=>{N(g,s),c?.(p,s)},className:(0,k.cn)("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":d===s})},`subSubItem-${g}-${s}`))})]},`subcategoryItem-${g}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(i).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)(l.Text,{html:i?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),i?.primary&&!i?.primary?.hide&&(0,e.jsx)(l.Button,{as:"a",href:`${i?.primary?.url}?ref=${i?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:i?.primary?.label})]}),(0,e.jsx)(l.Link,{href:i?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:i?.guide?.label})]}),(0,e.jsx)("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:i?.series?.map((v,g)=>(0,e.jsxs)("div",{children:[v.label&&(0,e.jsx)(l.Text,{html:v.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!i?.banner&&(0,e.jsx)(l.Link,{asChild:!i?.banner?.href,href:i?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:i?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:i?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:i?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),v.products?.map((h,p)=>(0,e.jsx)(oe,{seriesLabel:i?.label,product:h,isCollection:i?.isCollection},`seriesProductItem-${p}`))]})]},`seriesItem-${g}`))})]})]})}),Le=({multicolMetadata:t})=>{const n=(0,a.useRef)(null);return(0,e.jsx)("div",{ref:n,children:(0,e.jsx)(l.Container,{childClassName:"bg-white",className:"h-full",children:(0,e.jsx)("div",{className:"flex gap-4 py-4",children:t?.map((o,c)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(re,{item:o})},`multicolItem-${o?.label}-${c}`))})})})},Pe=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[c,r]=(0,a.useState)(null),[f,d]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const u=o?.current?.getBoundingClientRect();d(u.height)}},[o]);const m=(0,pe.debounce)(()=>{if(n){const u=n.getBoundingClientRect();r(u)}},500);return(0,a.useEffect)(()=>(m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)}),[m]),(0,a.useEffect)(()=>{if(n){const u=n.getBoundingClientRect();r(u)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${c?.right}px)`,height:f},children:(0,e.jsx)("div",{ref:o,className:"p-4",children:t?.map(u=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:u.url,className:"text-sm font-bold leading-[1.4] no-underline",children:u.label})},u.id))})})},oe=({product:t,isCollection:n,position:o,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:f}=(0,B.useNavContext)();let d=n?t:r?.products?.find(i=>i.handle===t.handle);const m=d?.variants?.find(i=>i.sku===t.sku)||d?.variants?.[0],u=(0,a.useMemo)(()=>`/products/${d?.handle}?variant=${(0,k.atobID)(m?.id)}`,[d?.handle,m?.id]),w=(0,a.useMemo)(()=>d?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2),[d?.tags]);return m?.availableForSale?(0,e.jsx)(l.Link,{href:u,onClick:i=>{i.preventDefault(),window.open(u),f?.(d,o||0,c)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(l.Picture,{source:`${m?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(w)&&w?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),(0,e.jsx)(l.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:d?.title||t?.name}),t?.desc&&(0,e.jsx)(l.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null},re=({item:t,allPicture:n})=>(0,e.jsxs)(e.Fragment,{children:[t?.columns&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.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.jsxs)("div",{className:"py-2 flex items-center gap-1",children:[(0,e.jsx)(l.Link,{href:`${o.url}?ref=navMenu`,asChild:!o.url,className:"text-sm font-bold leading-[1.4] no-underline",children:o.label}),o?.badge&&(0,e.jsx)(l.Text,{as:"p",html:o?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,k.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":n}),children:(0,e.jsxs)(l.Link,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),(0,e.jsxs)("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[(0,e.jsx)(l.Text,{html:t.title,className:(0,k.cn)("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&(0,e.jsx)(l.Text,{html:t.subtitle,className:(0,k.cn)("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:(0,k.cn)("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),ze=(0,a.forwardRef)(({data:t,className:n,onPrimaryNavClick:o},c)=>{const r=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(L=>L?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:d,subSubCategory:m}=(0,B.useNavContext)(),[u,w]=(0,a.useState)(!1),[i,C]=(0,a.useState)(0),[N,v]=(0,a.useState)(null),g=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(g?.current&&u){const L=g?.current?.getBoundingClientRect();C(window?.innerHeight-(L?.bottom||0))}},[u]),(0,Q.useGSAP)(()=>{X.gsap.fromTo(g.current,{height:0},{height:i,duration:.3})},[i]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const h=(0,a.useMemo)(()=>N?.components?.[0]?.blockType,[N]),p=(0,T.WithSupports)(Be,{categoriesItem:N}),s=(0,T.WithSidebar)(He,N),b=(0,T.WithMulticol)(Te,N),S=(0,a.useMemo)(()=>{switch(h){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(s,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(p,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(b,{});default:return null}},[h,N,p]),M=(0,a.useCallback)(()=>{w(!1),C(0),d&&d(x.HeaderNavigationMenu.Primary)},[w,C,d]),E=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(L=>L?.mobileShow&&L?.blockType!==x.HeaderNavigationActionBlockType.Profile),[t]),D=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(L=>L?.mobileShow&&L?.blockType===x.HeaderNavigationActionBlockType.Profile)||{},[t]),j=(0,a.useMemo)(()=>{switch(f){case x.HeaderNavigationMenu.Primary:return(0,e.jsx)(Re,{actions:E,menuOpen:u,onMenuOpenClose:()=>{w(!1),C(0)},onMenuOpenClick:()=>w(!0)});case x.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ue,{title:N?.text,onMenuOpenClose:M,onMenuBackClick:()=>d?.(x.HeaderNavigationMenu.Primary)});case x.HeaderNavigationMenu.Third:return(0,e.jsx)(ue,{title:m?.label,onMenuOpenClose:M,onMenuBackClick:()=>d?.(x.HeaderNavigationMenu.Secondary)});default:return null}},[u,f,d,N,E,m,M]),_=(0,a.useCallback)((L,$)=>{const R=Array.isArray(r)?Array.isArray(r[L])?r[L][$]:{}:{};v(R),R?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links?R?.components?.[0]?.url&&window.open(R?.components?.[0]?.url):d?.(x.HeaderNavigationMenu.Secondary)},[r,d]);return(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[52px]",n),children:[j,u&&(0,e.jsx)("div",{ref:g,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:i},children:f===x.HeaderNavigationMenu.Primary?(0,e.jsx)(Ee,{categories:r,onPrimaryMenuClick:_,onPrimaryNavClick:o,profileAction:D}):S})]})}),Ee=({categories:t,onPrimaryMenuClick:n,profileAction:o,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=(0,B.useNavContext)();return(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((f,d)=>(0,e.jsxs)("div",{className:"",children:[f?.map((m,u)=>(0,e.jsx)(U,{label:m.text,onClick:()=>{const i=(t?.flat()||[])?.findIndex(C=>C?.id===t[d][u]?.id);n(d,u),c?.(m,i)},icon:m.components?.[0]?.icon},m.id)),(0,e.jsx)("div",{className:(0,k.cn)("my-2 h-px w-full bg-[#E5E5E7]",{hidden:d===t.length-1})})]},`groupCategory-${d}`))}),(0,e.jsx)($e,{profileAction:o})]})},He=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:f,setCurrentSeriesMetadata:d,currentSeriesMetadata:m,buildProps:u,onSidebarNavClick:w}=(0,B.useNavContext)(),[i,C]=(0,a.useState)([]),[N,v]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&C(t?.subcategories?.map((s,b)=>({index:b,open:!1})))},[t]),(0,a.useEffect)(()=>{r?.subSubCategories?.length&&v(r?.subSubCategories?.map((s,b)=>({index:b,open:b===0})))},[r]);const g=(0,a.useCallback)((s,b)=>{c&&c(x.HeaderNavigationMenu.Third),f?.(s);const S=n?.find(M=>b!==void 0?s?.subSubCategories?.[b]?.label?.toLowerCase()===M.label?.toLowerCase():s?.label?.toLowerCase()===M.label?.toLowerCase())||{};if(s?.collections){const M=u?.categories?.[s?.collections]||{};d?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:M?.products}]})}else d?.(S)},[n,t,c,f,d]),h=(0,a.useMemo)(()=>n?.find(s=>!!s?.guide)?.guide,[n,t]);return(0,a.useMemo)(()=>{switch(o){case x.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((s,b)=>(0,e.jsx)("div",{children:(0,e.jsx)(U,{label:s?.label,active:i.find(S=>S.index===b)?.open,onClick:()=>{g(s),w?.(s,b)}})},`${s.label}-${b}`))}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case x.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((s,b)=>{const S=n?.find(E=>E.label.toLowerCase()===s?.label?.toLowerCase())||{};let M={};if(s?.collections){const E=u?.categories?.[s?.collections]||{};M={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:E?.products}]}}else M=S;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(s).length>0&&(0,e.jsx)(se,{matchSeriesMetadata:M,onSubSubCategoryItemClick:()=>{w?.(s,b),v(E=>E.map((D,j)=>({...D,open:j===b?!D.open:D.open})))},expanded:!!N?.find(E=>E.index===b)?.open}),N?.find(E=>E.index===b)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ie,{matchSeriesMetadata:M}),M?.primary&&(0,e.jsx)("div",{className:"text-center my-4",children:(0,e.jsx)(l.Button,{as:"a",href:M?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:M?.primary?.label})})]})]},`${s.label}-${b}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(m).length>0&&(0,e.jsx)(se,{matchSeriesMetadata:m}),(0,e.jsx)(ie,{matchSeriesMetadata:m}),m?.primary&&(0,e.jsx)("div",{className:"text-center my-4 ",children:(0,e.jsx)(l.Button,{as:"a",href:`${m?.primary?.url}?ref=${m?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:m?.primary?.label})})]}),h&&(0,e.jsx)(l.Link,{href:h?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:h?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[o,t,c,n,i,N,f,r,d,m])},se=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:n,children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-5",{"rotate-180":o})})]}),ie=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((n,o)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(l.Link,{asChild:!t?.banner?.href,href:t?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,k.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,k.cn)("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((c,r)=>(0,e.jsx)(oe,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Be=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(U,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Te=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(o=>!!o.columns),[t]);return(0,e.jsx)("div",{className:(0,k.cn)("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":n}),children:t?.map((o,c)=>(0,e.jsx)("div",{children:(0,e.jsx)(re,{item:o,allPicture:n})},`multicolItem-${o?.label}-${c}`))})},$e=({profileAction:t})=>{const[n,o]=(0,a.useState)(!1),{profile:c,event:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:(0,k.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>o(!n),children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(P.User,{})}),(0,e.jsx)(l.Text,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-180":n})})]}),c?.email&&(0,e.jsx)("div",{className:"mt-4",children:t?.profiles?.map(f=>(0,e.jsx)(U,{label:f?.title,href:f?.url},f.id))}),n&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(f=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:f.benefitIcon?.url,className:"size-4",alt:f.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:f.benefit,className:"text-sm font-bold leading-[1.4]"})]},f.id))})]}),!c?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>r?.join?.(),children:(0,e.jsx)(l.Text,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>r?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Re=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:o,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(ce,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(de,{actions:c}),t?(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(P.Menu,{className:"size-5",onClick:()=>o()})]})]}),ce=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},de=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:c,cartCount:r}=(0,B.useNavContext)(),[f,d]=(0,a.useState)(null),m=(0,a.useCallback)((u,w)=>{switch(d(w),u?.blockType){case x.HeaderNavigationActionBlockType.Search:c?.search?.();break;case x.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case x.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case x.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((u,w)=>(0,e.jsxs)("div",{className:"relative",ref:u.blockType===x.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>m(u,w),children:[(0,e.jsx)(l.Text,{html:u.icon,className:(0,k.cn)("cursor-pointer size-5",{"text-brand-0":n&&f===w})}),u.blockType===x.HeaderNavigationActionBlockType.Cart&&r>0&&(0,e.jsx)("div",{className:"absolute min-h-5 z-[1] min-w-5 flex px-[2px] items-center justify-center right-[-12px] top-[calc(100%-16px)] bg-brand-0 rounded-full",children:(0,e.jsx)(l.Text,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},u.id))})}),ue=({title:t,onMenuOpenClose:n,onMenuBackClick:o})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)(P.LeftArrow,{className:"size-5",onClick:()=>o()}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()})]}),U=({label:t,href:n,onClick:o,active:c,icon:r,className:f})=>(0,e.jsx)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between py-4",f),onClick:o,children:(0,e.jsxs)(l.Link,{href:n,asChild:!n,className:"flex w-full items-center justify-between no-underline",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,k.cn)("text-sm font-bold leading-[1.4]",{underline:r})}),r&&(0,e.jsx)(l.Text,{html:r})]}),(0,e.jsx)(P.RightArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-90":c})})]})});var Ae=(0,me.withLayout)(Se);
+"use strict";"use client";var he=Object.create;var X=Object.defineProperty;var ye=Object.getOwnPropertyDescriptor;var xe=Object.getOwnPropertyNames;var Ne=Object.getPrototypeOf,ke=Object.prototype.hasOwnProperty;var we=(t,n)=>{for(var o in n)X(t,o,{get:n[o],enumerable:!0})},oe=(t,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of xe(n))!ke.call(t,r)&&r!==o&&X(t,r,{get:()=>n[r],enumerable:!(c=ye(n,r))||c.enumerable});return t};var Y=(t,n,o)=>(o=t!=null?he(Ne(t)):{},oe(n||!t||!t.__esModule?X(o,"default",{value:t,enumerable:!0}):o,t)),Ce=t=>oe(X({},"__esModule",{value:!0}),t);var Fe={};we(Fe,{default:()=>Re});module.exports=Ce(Fe);var e=require("react/jsx-runtime"),a=Y(require("react")),l=require("../../components/index.js"),pe=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),B=Y(require("./NavProvider.js")),x=require("./types.js"),_e=require("react-responsive"),be=require("es-toolkit"),fe=Y(require("jump.js")),Z=require("@gsap/react"),ee=require("gsap"),T=require("./withCategory.js"),E=require("./icons/index.js"),ve=Y(require("../NavigationSearch/index.js"));const Se=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:c,event:r,profile:v,theme:u="light",isTop:m=!1,searchResult:d,onSearch:C,isSearching:i,keywords:w,onPrimaryNavClick:N,onSeriesProductClick:b,onSidebarNavClick:g,headerId:h,cartCount:p}=t,s=(0,a.useRef)(null),[f,M]=(0,a.useState)(!1),[D,H]=(0,a.useState)(!1),[P,j]=(0,a.useState)(!1),[W,z]=(0,a.useState)(!1),$=(0,a.useRef)(null),A=()=>{const I=document?.querySelector("body")?.offsetWidth||0;z(I<=1440)};(0,a.useEffect)(()=>(A(),window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)}),[]),(0,a.useImperativeHandle)(n,()=>$.current),(0,a.useEffect)(()=>{$.current&&m&&(0,fe.default)($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[m]),(0,a.useEffect)(()=>{r&&(r.search=()=>M(!0))},[r]),(0,Z.useGSAP)(()=>{s?.current&&f&&ee.gsap.fromTo(s.current,{height:0},{height:"auto",duration:.3})},[f]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=f?"hidden":"auto"},[f]);const te=(0,a.useMemo)(()=>o?.headerBar?.actions?.find(I=>I?.blockType===x.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[o]);return(0,e.jsx)(B.default,{buildProps:c,profile:v,isMobile:W,event:r,payloadData:o,onSidebarNavClick:g,onSeriesProductClick:b,cartCount:p,children:(0,e.jsx)("header",{id:h||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:$,children:(0,e.jsxs)("div",{className:(0,k.cn)("hover:text-black hover:bg-white",u==="light"?"text-black":"text-white",{}),onClick:()=>j(!0),children:[(0,e.jsx)(Le,{data:o,className:"hidden desktop:block !bg-white",theme:u,onNavItemClick:()=>j(!0),onPrimaryNavClick:N}),(0,e.jsx)(ze,{data:o,className:"block desktop:hidden !bg-white",onPrimaryNavClick:N}),f&&(0,e.jsxs)("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${$?.current?.getBoundingClientRect()?.top}px)`},children:[(0,e.jsx)("div",{ref:s,className:(0,k.cn)("overflow-y-auto",{}),children:(0,e.jsx)(ve.default,{data:te,keywords:w,isSearching:i,searchResult:d,onSearch:I=>{C?.(I)},onClose:()=>{C?.(),M(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>M(!1)})]})]})})})}),Le=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:c,className:r,theme:v,onPrimaryNavClick:u}=t,{event:m,profile:d}=(0,B.useNavContext)(),[C,i]=(0,a.useState)(!1),w=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(o?.categories?.filter(y=>y?.pcShow)),[o]),[N,b]=(0,a.useState)(null),[g,h]=(0,a.useState)([]),p=(0,a.useRef)(null),[s,f]=(0,a.useState)(!1),M=(0,a.useRef)(null),D=(0,a.useRef)(null),H=(0,a.useRef)(w.map(y=>Array(y?.length||0).fill(null)));(0,a.useEffect)(()=>{if(w?.length){const y=w?.map((L,R)=>L?.map((_,le)=>({groupIndex:R,index:le,open:!1})));let S=-1;for(let L=0;L<w.length;L++)if(Array.isArray(w[L])&&w[L].length>0){S=L;break}S!==-1&&(y[S][0].open=!0,b(w[S][0])),h(y)}},[w]);const P=(0,a.useMemo)(()=>{let y=null;for(const S of g){for(const L of S)if(L.open){y=L;break}if(y)break}return y},[g]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=P?.open||s?"hidden":"auto"},[P?.open,s]);const j=(y,S,L)=>{if(f(!1),N?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links)N?.components?.[0]?.url&&window.open(N?.components?.[0]?.url);else{const R=w?.flat()||[],_=R?.findIndex(F=>F?.id===w[S][L]?.id);y.stopPropagation(),c?.(),u?.(R[_],_);const le=!!g?.[S]?.[L]?.open,J=[];if(w?.forEach((F,V)=>{F?.forEach((O,U)=>{J.push({groupIndex:V,index:U})})}),le){const F=J.findIndex(q=>q.groupIndex===S&&q.index===L),O=F===J.length-1?Math.max(F-1,0):F+1,U=J[O];b(w[U.groupIndex][U.index]),h(q=>q.map(ge=>ge.map(Q=>Q.groupIndex===U.groupIndex&&Q.index===U.index?{...Q,open:!0}:{...Q,open:!1})))}else b(w[S][L]),h(F=>F.map(V=>V.map(O=>O.groupIndex===S&&O.index===L?{...O,open:!0}:{...O,open:!1})))}},W=()=>{h(y=>y.map(S=>S.map(L=>({...L,open:!1}))))},z=(0,a.useMemo)(()=>{if(N)return N?.components?.[0]?.blockType},[N]),$=(0,T.WithSidebar)(Me,N),A=(0,T.WithMulticol)(De,N),te=(0,T.WithSupports)(Pe,{categoriesItem:N,currentNavItemRef:H.current?.[P?.groupIndex||0]?.[P?.index||0]}),I=(0,a.useMemo)(()=>{switch(z){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)($,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(te,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(A,{});default:return null}},[z,N]),ae=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(y=>y?.pcShow),[o]),G=(0,a.useMemo)(()=>ae?.find(y=>y?.blockType===x.HeaderNavigationActionBlockType.Profile),[ae]),ne=(0,a.useCallback)(()=>{f(y=>!y)},[]);return(0,a.useEffect)(()=>{if(p?.current){const y=p.current;return y.addEventListener("click",ne),()=>{y.removeEventListener("click",ne)}}},[ne]),(0,Z.useGSAP)(()=>{P?.open&&ee.gsap.fromTo(D?.current,{height:0},{height:"auto"})},[P?.open]),(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[96px]",r),children:[(0,e.jsxs)("div",{ref:M,onClick:W,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)(de,{}),(0,e.jsx)(ue,{ref:p,actions:ae,activeStatus:s})]}),(0,e.jsx)("div",{className:"flex justify-between",children:w?.map((y,S)=>(0,e.jsx)("div",{className:"flex gap-3",children:y?.map((L,R)=>(0,e.jsx)("div",{ref:_=>{H.current[S][R]=_},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1 pb-4",onClick:_=>j(_,S,R),children:[(0,e.jsx)(l.Text,{html:L.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(E.DownArrow,{className:(0,k.cn)("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":P?.groupIndex===S&&P?.index===R,"opacity-100":C&&P?.groupIndex===S&&P?.index===R})})]}),(0,e.jsx)("div",{className:(0,k.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":P?.groupIndex===S&&P?.index===R},v==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},L.id))},`groupCategory-${S}`))})]}),(0,e.jsxs)("div",{className:(0,k.cn)("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(P?.open&&N)}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),style:{height:`calc(100dvh - ${M?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:D,className:(0,k.cn)("relative z-50",{"overflow-hidden":z!==x.HeaderNavigationBlockType.Supports}),children:I}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:W})]}),s&&(0,e.jsxs)("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${p?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:d?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:d?.nick_name||G?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),(0,e.jsx)("div",{className:"mt-2",children:G?.profiles?.map(y=>(0,e.jsx)(K,{className:"py-2",label:y?.title,href:y?.url},y.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(E.Polygon,{className:"absolute -top-2 text-white right-[46px] z-30"}),(0,e.jsx)(l.Text,{html:G?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:G?.benefits?.map(y=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:y.benefitIcon?.url,className:"size-4",alt:y.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:y.benefit,className:"text-sm font-bold leading-[1.4]"})]},y.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>m?.join?.(),children:(0,e.jsx)(l.Text,{html:G?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>m?.login?.(),children:(0,e.jsx)(l.Text,{html:G?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>f(!1)})]})]})}),Me=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o,onSidebarNavClick:c}=(0,B.useNavContext)(),[r,v]=(0,a.useState)([]),[u,m]=(0,a.useState)(-1),d=(0,a.useRef)(null),C=(0,a.useCallback)(()=>{const b=t?.subcategories;if(!b?.length)return;const g=b.findIndex(s=>!!s?.subSubCategories),h=b.findIndex(s=>!s?.subSubCategories),p=b.map((s,f)=>({index:f,open:g===f||h===f}));v(p)},[t]);(0,a.useEffect)(()=>{C()},[C]);const i=(0,a.useMemo)(()=>{const b=t?.subcategories?.[r?.find(h=>h.open)?.index||0],g=n?.find(h=>h?.label?.toLowerCase()===b?.label?.toLowerCase())||{};if(b?.collections){const h=o?.categories?.[b?.collections]||{};return{label:g?.label,isCollection:!0,banner:g?.banner,primary:g?.primary,series:[{products:h?.products}]}}else if(b?.subSubCategories){const h=b?.subSubCategories?.[u],p=n?.find(s=>s?.label?.toLowerCase()===h?.label?.toLowerCase())||{};if(h?.collections){const s=o?.categories?.[h?.collections]||{};return{label:p?.label,isCollection:!0,banner:p?.banner,primary:p?.primary,series:[{products:s?.products}]}}else return p}else return g},[t,r,u,n]),w=(0,a.useCallback)((b,g)=>{if(g?.subSubCategories?.length>0?m(0):m(-1),g?.subSubCategories?.length>0)v(h=>h.map(p=>p.index===b?{...p,open:!0}:{...p,open:!1}));else{const p=t?.subcategories?.findIndex(s=>!!s?.subSubCategories);v(s=>s.map(f=>({...f,open:f.index===b||f.index===p})))}},[t,C]),N=(b,g)=>{v(h=>h.map(p=>p.index===b?{...p,open:!0}:{...p,open:!1})),m(g)};return(0,e.jsxs)(l.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"},ref:d,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((b,g)=>{const h=Array.isArray(b?.subSubCategories)&&b?.subSubCategories?.length>0;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!h&&r?.find(p=>p.index===g)?.open}),onClick:()=>{w(g,b),c?.(b,g)},children:[(0,e.jsx)(l.Text,{html:b.label,className:"p-4 text-sm font-bold leading-[1.4]"}),h&&(0,e.jsx)(E.DownArrow,{className:(0,k.cn)("size-4",{"rotate-180":r?.find(p=>p.index===g)?.open})})]}),r?.find(p=>p.index===g)?.open&&(0,e.jsx)("div",{className:"flex flex-col",children:b.subSubCategories?.map((p,s)=>(0,e.jsx)(l.Text,{html:p.label,onClick:()=>{N(g,s),c?.(p,s)},className:(0,k.cn)("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":u===s})},`subSubItem-${g}-${s}`))})]},`subcategoryItem-${g}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(i).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)(l.Text,{html:i?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),i?.primary&&!i?.primary?.hide&&(0,e.jsx)(l.Button,{as:"a",href:`${i?.primary?.url}?ref=${i?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:i?.primary?.label})]}),(0,e.jsx)(l.Link,{href:i?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:i?.guide?.label})]}),(0,e.jsx)("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:i?.series?.map((b,g)=>(0,e.jsxs)("div",{children:[b.label&&(0,e.jsx)(l.Text,{html:b.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!i?.banner&&(0,e.jsx)(l.Link,{asChild:!i?.banner?.href,href:i?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:i?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:i?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:i?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),b.products?.map((h,p)=>(0,e.jsx)(re,{seriesLabel:i?.label,product:h,isCollection:i?.isCollection},`seriesProductItem-${p}`))]})]},`seriesItem-${g}`))})]})]})}),De=({multicolMetadata:t})=>{const n=(0,a.useRef)(null);return(0,e.jsx)("div",{ref:n,children:(0,e.jsx)(l.Container,{childClassName:"bg-white",className:"h-full",children:(0,e.jsx)("div",{className:"flex gap-4 py-4",children:t?.map((o,c)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(se,{item:o})},`multicolItem-${o?.label}-${c}`))})})})},Pe=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[c,r]=(0,a.useState)(null),[v,u]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const d=o?.current?.getBoundingClientRect();u(d.height)}},[o]);const m=(0,be.debounce)(()=>{if(n){const d=n.getBoundingClientRect();r(d)}},500);return(0,a.useEffect)(()=>(m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)}),[m]),(0,a.useEffect)(()=>{if(n){const d=n.getBoundingClientRect();r(d)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${c?.right}px)`,height:v},children:(0,e.jsx)("div",{ref:o,className:"p-4",children:t?.map(d=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:d.url,className:"text-sm font-bold leading-[1.4] no-underline",children:d.label})},d.id))})})},re=({product:t,isCollection:n,position:o,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:v}=(0,B.useNavContext)();let u=n?t:r?.products?.find(i=>i.handle===t.handle);const m=u?.variants?.find(i=>i.sku===t.sku)||u?.variants?.[0],d=(0,a.useMemo)(()=>`/products/${u?.handle}?variant=${(0,k.atobID)(m?.id)}`,[u?.handle,m?.id]),C=(0,a.useMemo)(()=>u?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2),[u?.tags]);return m?.availableForSale?(0,e.jsx)(l.Link,{href:d,onClick:i=>{i.preventDefault(),window.open(d),v?.(u,o||0,c)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(l.Picture,{source:`${m?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(C)&&C?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),(0,e.jsx)(l.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:u?.title||t?.name}),t?.desc&&(0,e.jsx)(l.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null},se=({item:t,allPicture:n})=>(0,e.jsxs)(e.Fragment,{children:[t?.columns&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.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.jsxs)("div",{className:"py-2 flex items-center gap-1",children:[(0,e.jsx)(l.Link,{href:`${o.url}?ref=navMenu`,asChild:!o.url,className:"text-sm font-bold leading-[1.4] no-underline",children:o.label}),o?.badge&&(0,e.jsx)(l.Text,{as:"p",html:o?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,k.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":n}),children:(0,e.jsxs)(l.Link,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),(0,e.jsxs)("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[(0,e.jsx)(l.Text,{html:t.title,className:(0,k.cn)("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&(0,e.jsx)(l.Text,{html:t.subtitle,className:(0,k.cn)("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:(0,k.cn)("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),ze=(0,a.forwardRef)(({data:t,className:n,onPrimaryNavClick:o},c)=>{const r=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(z=>z?.mobileShow)),[t]),{currentMenu:v,setCurrentMenu:u,subSubCategory:m}=(0,B.useNavContext)(),[d,C]=(0,a.useState)(!1),[i,w]=(0,a.useState)(0),[N,b]=(0,a.useState)(null),g=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(g?.current&&d){const z=g?.current?.getBoundingClientRect();w(window?.innerHeight-(z?.bottom||0))}},[d]),(0,Z.useGSAP)(()=>{ee.gsap.fromTo(g.current,{height:0},{height:i,duration:.3})},[i]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=d?"hidden":"auto"},[d]);const h=(0,a.useMemo)(()=>N?.components?.[0]?.blockType,[N]),p=(0,T.WithSupports)(Be,{categoriesItem:N}),s=(0,T.WithSidebar)(He,N),f=(0,T.WithMulticol)(Te,N),M=(0,a.useMemo)(()=>{switch(h){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(s,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(p,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(f,{});default:return null}},[h,N,p]),D=(0,a.useCallback)(()=>{C(!1),w(0),u&&u(x.HeaderNavigationMenu.Primary)},[C,w,u]),H=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(z=>z?.mobileShow&&z?.blockType!==x.HeaderNavigationActionBlockType.Profile),[t]),P=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(z=>z?.mobileShow&&z?.blockType===x.HeaderNavigationActionBlockType.Profile)||{},[t]),j=(0,a.useMemo)(()=>{switch(v){case x.HeaderNavigationMenu.Primary:return(0,e.jsx)(Ae,{actions:H,menuOpen:d,onMenuOpenClose:()=>{C(!1),w(0)},onMenuOpenClick:()=>C(!0)});case x.HeaderNavigationMenu.Secondary:return(0,e.jsx)(me,{title:N?.text,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Primary)});case x.HeaderNavigationMenu.Third:return(0,e.jsx)(me,{title:m?.label,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Secondary)});default:return null}},[d,v,u,N,H,m,D]),W=(0,a.useCallback)((z,$)=>{const A=Array.isArray(r)?Array.isArray(r[z])?r[z][$]:{}:{};b(A),A?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links?A?.components?.[0]?.url&&window.open(A?.components?.[0]?.url):u?.(x.HeaderNavigationMenu.Secondary)},[r,u]);return(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[52px]",n),children:[j,d&&(0,e.jsx)("div",{ref:g,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:i},children:v===x.HeaderNavigationMenu.Primary?(0,e.jsx)(Ee,{categories:r,onPrimaryMenuClick:W,onPrimaryNavClick:o,profileAction:P}):M})]})}),Ee=({categories:t,onPrimaryMenuClick:n,profileAction:o,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=(0,B.useNavContext)();return(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((v,u)=>(0,e.jsxs)("div",{className:"",children:[v?.map((m,d)=>(0,e.jsx)(K,{label:m.text,onClick:()=>{const i=(t?.flat()||[])?.findIndex(w=>w?.id===t[u][d]?.id);n(u,d),c?.(m,i)},icon:m.components?.[0]?.icon},m.id)),(0,e.jsx)("div",{className:(0,k.cn)("my-2 h-px w-full bg-[#E5E5E7]",{hidden:u===t.length-1})})]},`groupCategory-${u}`))}),(0,e.jsx)($e,{profileAction:o})]})},He=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:v,setCurrentSeriesMetadata:u,currentSeriesMetadata:m,buildProps:d,onSidebarNavClick:C}=(0,B.useNavContext)(),[i,w]=(0,a.useState)([]),[N,b]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&w(t?.subcategories?.map((s,f)=>({index:f,open:!1})))},[t]),(0,a.useEffect)(()=>{r?.subSubCategories?.length&&b(r?.subSubCategories?.map((s,f)=>({index:f,open:f===0})))},[r]);const g=(0,a.useCallback)((s,f)=>{c&&c(x.HeaderNavigationMenu.Third),v?.(s);const M=n?.find(D=>f!==void 0?s?.subSubCategories?.[f]?.label?.toLowerCase()===D.label?.toLowerCase():s?.label?.toLowerCase()===D.label?.toLowerCase())||{};if(s?.collections){const D=d?.categories?.[s?.collections]||{};u?.({label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:D?.products}]})}else u?.(M)},[n,t,c,v,u]),h=(0,a.useMemo)(()=>n?.find(s=>!!s?.guide)?.guide,[n,t]);return(0,a.useMemo)(()=>{switch(o){case x.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((s,f)=>(0,e.jsx)("div",{children:(0,e.jsx)(K,{label:s?.label,active:i.find(M=>M.index===f)?.open,onClick:()=>{g(s),C?.(s,f)}})},`${s.label}-${f}`))}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case x.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((s,f)=>{const M=n?.find(H=>H.label.toLowerCase()===s?.label?.toLowerCase())||{};let D={};if(s?.collections){const H=d?.categories?.[s?.collections]||{};D={label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:H?.products}]}}else D=M;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(s).length>0&&(0,e.jsx)(ie,{matchSeriesMetadata:D,onSubSubCategoryItemClick:()=>{C?.(s,f),b(H=>H.map((P,j)=>({...P,open:j===f?!P.open:P.open})))},expanded:!!N?.find(H=>H.index===f)?.open}),N?.find(H=>H.index===f)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ce,{matchSeriesMetadata:D}),D?.primary&&(0,e.jsx)("div",{className:"text-center my-4",children:(0,e.jsx)(l.Button,{as:"a",href:D?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:D?.primary?.label})})]})]},`${s.label}-${f}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(m).length>0&&(0,e.jsx)(ie,{matchSeriesMetadata:m}),(0,e.jsx)(ce,{matchSeriesMetadata:m}),m?.primary&&(0,e.jsx)("div",{className:"text-center my-4 ",children:(0,e.jsx)(l.Button,{as:"a",href:`${m?.primary?.url}?ref=${m?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:m?.primary?.label})})]}),h&&(0,e.jsx)(l.Link,{href:h?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:h?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[o,t,c,n,i,N,v,r,u,m])},ie=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:n,children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(E.DownArrow,{className:(0,k.cn)("size-5",{"rotate-180":o})})]}),ce=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((n,o)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(l.Link,{asChild:!t?.banner?.href,href:t?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,k.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,k.cn)("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((c,r)=>(0,e.jsx)(re,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Be=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(K,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Te=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(o=>!!o.columns),[t]);return(0,e.jsx)("div",{className:(0,k.cn)("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":n}),children:t?.map((o,c)=>(0,e.jsx)("div",{children:(0,e.jsx)(se,{item:o,allPicture:n})},`multicolItem-${o?.label}-${c}`))})},$e=({profileAction:t})=>{const[n,o]=(0,a.useState)(!1),{profile:c,event:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:(0,k.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>o(!n),children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(E.User,{})}),(0,e.jsx)(l.Text,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(E.DownArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-180":n})})]}),c?.email&&(0,e.jsx)("div",{className:"mt-4",children:t?.profiles?.map(v=>(0,e.jsx)(K,{label:v?.title,href:v?.url},v.id))}),n&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(v=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:v.benefitIcon?.url,className:"size-4",alt:v.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:v.benefit,className:"text-sm font-bold leading-[1.4]"})]},v.id))})]}),!c?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>r?.join?.(),children:(0,e.jsx)(l.Text,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>r?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Ae=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:o,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(de,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(ue,{actions:c}),t?(0,e.jsx)(E.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(E.Menu,{className:"size-5",onClick:()=>o()})]})]}),de=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},ue=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:c,cartCount:r}=(0,B.useNavContext)(),[v,u]=(0,a.useState)(null),m=(0,a.useCallback)((d,C)=>{switch(u(C),d?.blockType){case x.HeaderNavigationActionBlockType.Search:c?.search?.();break;case x.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case x.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case x.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((d,C)=>(0,e.jsxs)("div",{className:"relative",ref:d.blockType===x.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>m(d,C),children:[(0,e.jsx)(l.Text,{html:d.icon,className:(0,k.cn)("cursor-pointer size-5",{"text-brand-0":n&&v===C})}),d.blockType===x.HeaderNavigationActionBlockType.Cart&&r>0&&(0,e.jsx)("div",{className:"absolute min-h-5 z-[1] min-w-5 flex px-[2px] items-center justify-center right-[-12px] top-[calc(100%-16px)] bg-brand-0 rounded-full",children:(0,e.jsx)(l.Text,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},d.id))})}),me=({title:t,onMenuOpenClose:n,onMenuBackClick:o})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)(E.LeftArrow,{className:"size-5",onClick:()=>o()}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)(E.Close,{className:"size-5",onClick:()=>n()})]}),K=({label:t,href:n,onClick:o,active:c,icon:r,className:v})=>(0,e.jsx)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between py-4",v),onClick:o,children:(0,e.jsxs)(l.Link,{href:n,asChild:!n,className:"flex w-full items-center justify-between no-underline",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,k.cn)("text-sm font-bold leading-[1.4]",{underline:r})}),r&&(0,e.jsx)(l.Text,{html:r})]}),(0,e.jsx)(E.RightArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-90":c})})]})});var Re=(0,pe.withLayout)(Se);
 //# sourceMappingURL=index.js.map