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

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var xe=Object.create;var X=Object.defineProperty;var Ne=Object.getOwnPropertyDescriptor;var ke=Object.getOwnPropertyNames;var we=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var Se=(t,n)=>{for(var o in n)X(t,o,{get:n[o],enumerable:!0})},le=(t,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of ke(n))!Ce.call(t,r)&&r!==o&&X(t,r,{get:()=>n[r],enumerable:!(c=Ne(n,r))||c.enumerable});return t};var Y=(t,n,o)=>(o=t!=null?xe(we(t)):{},le(n||!t||!t.__esModule?X(o,"default",{value:t,enumerable:!0}):o,t)),Me=t=>le(X({},"__esModule",{value:!0}),t);var Ie={};Se(Ie,{default:()=>Fe});module.exports=Me(Ie);var e=require("react/jsx-runtime"),a=Y(require("react")),l=require("../../components/index.js"),me=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),$=Y(require("./NavProvider.js")),x=require("./types.js"),We=require("react-responsive"),pe=require("es-toolkit"),be=Y(require("jump.js")),Z=require("@gsap/react"),ee=require("gsap"),A=require("./withCategory.js"),B=require("./icons/index.js"),fe=Y(require("../NavigationSearch/index.js"));const De=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:c,event:r,profile:v,theme:d="light",isTop:m=!1,searchResult:u,onSearch:C,isSearching:i,keywords:w,onPrimaryNavClick:N,onSeriesProductClick:b,onSidebarNavClick:y,headerId:g,cartCount:p}=t,s=(0,a.useRef)(null),[f,M]=(0,a.useState)(!1),[D,E]=(0,a.useState)(!1),[S,_]=(0,a.useState)(!1),[G,P]=(0,a.useState)(!1),R=(0,a.useRef)(null),j=()=>{const W=document?.querySelector("body")?.offsetWidth||0;P(W<=1440)};(0,a.useEffect)(()=>(j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}),[]),(0,a.useImperativeHandle)(n,()=>R.current),(0,a.useEffect)(()=>{R.current&&m&&(0,be.default)(R.current,{duration:0,offset:R.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(W=>W?.blockType===x.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[o]);return(0,e.jsx)($.default,{buildProps:c,profile:v,isMobile:G,event:r,payloadData:o,onSidebarNavClick:y,onSeriesProductClick:b,cartCount:p,children:(0,e.jsx)("header",{id:g||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:R,children:(0,e.jsxs)("div",{className:(0,k.cn)("hover:text-black hover:bg-white",d==="light"?"text-black":"text-white",{}),onClick:()=>_(!0),children:[(0,e.jsx)(Le,{data:o,className:"hidden desktop:block !bg-white",theme:d,onNavItemClick:()=>_(!0),onPrimaryNavClick:N}),(0,e.jsx)(Ee,{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 - ${R?.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:te,keywords:w,isSearching:i,searchResult:u,onSearch:W=>{C?.(W)},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:d}=t,{event:m,profile:u}=(0,$.useNavContext)(),[C,i]=(0,a.useState)(!1),w=(0,a.useMemo)(()=>(0,A.WithGroupCategory)(o?.categories?.filter(h=>h?.pcShow)),[o]),[N,b]=(0,a.useState)(null),[y,g]=(0,a.useState)([]),p=(0,a.useRef)(null),[s,f]=(0,a.useState)(!1),M=(0,a.useRef)(null),D=(0,a.useRef)(null),E=(0,a.useRef)(w.map(h=>Array(h?.length||0).fill(null)));(0,a.useEffect)(()=>{if(w?.length){const h=w.findIndex(z=>Array.isArray(z)&&z.length>0),L=0;g(w?.map((z,H)=>z?.map((K,O)=>({groupIndex:H,index:O,open:H===h&&O===L})))),h!==-1&&b(w[h][L])}},[w]);const S=(0,a.useMemo)(()=>{let h=null;for(const L of y){for(const z of L)if(z.open){h=z;break}if(h)break}return h},[y]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=S?.open||s?"hidden":"auto"},[S?.open,s]);const _=(h,L,z)=>{if(f(!1),N?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links)N?.components?.[0]?.url&&window.open(N?.components?.[0]?.url);else{const H=w?.flat()||[],K=w[L]?.[z]?.id,O=H?.findIndex(I=>I?.id===K),ve=S?.groupIndex===L&&S?.index===z&&S?.open;h.stopPropagation(),c?.();const ge=I=>{let F=0;for(let T=0;T<w.length;T++){const q=w[T]||[];for(let J=0;J<q.length;J++){if(F===I)return{gi:T,idx:J};F++}}return{gi:L,idx:z}};if(ve&&H.length>0){const I=H.length-1;let F=O;O===I?F=Math.max(0,I-1):F=Math.min(I,O+1);const{gi:T,idx:q}=ge(F),J=w[T]?.[q];d?.(H[F],F),b(J),g(he=>he.map(ye=>ye.map(Q=>Q.groupIndex===T&&Q.index===q?{...Q,open:!0}:{...Q,open:!1})))}else d?.(H[O],O),b(w[L][z]),g(I=>I.map(F=>F.map(T=>T.groupIndex===L&&T.index===z?{...T,open:!0}:{...T,open:!1})))}},G=()=>{g(h=>h.map(L=>L.map(z=>({...z,open:!1}))))},P=(0,a.useMemo)(()=>{if(N)return N?.components?.[0]?.blockType},[N]),R=(0,A.WithSidebar)(Pe,N),j=(0,A.WithMulticol)(ze,N),te=(0,A.WithSupports)(Be,{categoriesItem:N,currentNavItemRef:E.current?.[S?.groupIndex||0]?.[S?.index||0]}),W=(0,a.useMemo)(()=>{switch(P){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(R,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(te,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(j,{});default:return null}},[P,N]),ae=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(h=>h?.pcShow),[o]),U=(0,a.useMemo)(()=>ae?.find(h=>h?.blockType===x.HeaderNavigationActionBlockType.Profile),[ae]),ne=(0,a.useCallback)(()=>{f(h=>!h)},[]);return(0,a.useEffect)(()=>{if(p?.current){const h=p.current;return h.addEventListener("click",ne),()=>{h.removeEventListener("click",ne)}}},[ne]),(0,Z.useGSAP)(()=>{S?.open&&ee.gsap.fromTo(D?.current,{height:0},{height:"auto"})},[S?.open]),(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[96px]",r),children:[(0,e.jsxs)("div",{ref:M,onClick:G,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:ae,activeStatus:s})]}),(0,e.jsx)("div",{className:"flex justify-between",children:w?.map((h,L)=>(0,e.jsx)("div",{className:"flex gap-3",children:h?.map((z,H)=>(0,e.jsx)("div",{ref:K=>{E.current[L][H]=K},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:K=>_(K,L,H),children:[(0,e.jsx)(l.Text,{html:z.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(B.DownArrow,{className:(0,k.cn)("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":S?.groupIndex===L&&S?.index===H,"opacity-100":C&&S?.groupIndex===L&&S?.index===H})})]}),(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)]":S?.groupIndex===L&&S?.index===H},v==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},z.id))},`groupCategory-${L}`))})]}),(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:!(S?.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":P!==x.HeaderNavigationBlockType.Supports}),children:W}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:G})]}),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||U?.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:U?.profiles?.map(h=>(0,e.jsx)(V,{className:"py-2",label:h?.title,href:h?.url},h.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(B.Polygon,{className:"absolute -top-2 text-white right-[46px] z-30"}),(0,e.jsx)(l.Text,{html:U?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:U?.benefits?.map(h=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:h.benefitIcon?.url,className:"size-4",alt:h.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:h.benefit,className:"text-sm font-bold leading-[1.4]"})]},h.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:U?.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:U?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>f(!1)})]})]})}),Pe=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o,onSidebarNavClick:c}=(0,$.useNavContext)(),[r,v]=(0,a.useState)([]),[d,m]=(0,a.useState)(-1),u=(0,a.useRef)(null),C=(0,a.useCallback)(()=>{const b=t?.subcategories;if(!b?.length)return;const y=b.findIndex(s=>!!s?.subSubCategories),g=b.findIndex(s=>!s?.subSubCategories),p=b.map((s,f)=>({index:f,open:y===f||g===f}));v(p)},[t]);(0,a.useEffect)(()=>{C()},[C]);const i=(0,a.useMemo)(()=>{const b=t?.subcategories?.[r?.find(g=>g.open)?.index||0],y=n?.find(g=>g?.label?.toLowerCase()===b?.label?.toLowerCase())||{};if(b?.collections){const g=o?.categories?.[b?.collections]||{};return{label:y?.label,isCollection:!0,banner:y?.banner,primary:y?.primary,series:[{products:g?.products}]}}else if(b?.subSubCategories){const g=b?.subSubCategories?.[d],p=n?.find(s=>s?.label?.toLowerCase()===g?.label?.toLowerCase())||{};if(g?.collections){const s=o?.categories?.[g?.collections]||{};return{label:p?.label,isCollection:!0,banner:p?.banner,primary:p?.primary,series:[{products:s?.products}]}}else return p}else return y},[t,r,d,n]),w=(0,a.useCallback)((b,y)=>{if(y?.subSubCategories?.length>0?m(0):m(-1),y?.subSubCategories?.length>0)v(g=>g.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,y)=>{v(g=>g.map(p=>p.index===b?{...p,open:!0}:{...p,open:!1})),m(y)};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((b,y)=>{const g=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]":!g&&r?.find(p=>p.index===y)?.open}),onClick:()=>{w(y,b),c?.(b,y)},children:[(0,e.jsx)(l.Text,{html:b.label,className:"p-4 text-sm font-bold leading-[1.4]"}),g&&(0,e.jsx)(B.DownArrow,{className:(0,k.cn)("size-4",{"rotate-180":r?.find(p=>p.index===y)?.open})})]}),r?.find(p=>p.index===y)?.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(y,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-${y}-${s}`))})]},`subcategoryItem-${y}`)})}),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,y)=>(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((g,p)=>(0,e.jsx)(oe,{seriesLabel:i?.label,product:g,isCollection:i?.isCollection},`seriesProductItem-${p}`))]})]},`seriesItem-${y}`))})]})]})}),ze=({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}`))})})})},Be=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[c,r]=(0,a.useState)(null),[v,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:v},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:v}=(0,$.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]),C=(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),v?.(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(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: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"})]})]})})]}),Ee=(0,a.forwardRef)(({data:t,className:n,onPrimaryNavClick:o},c)=>{const r=(0,a.useMemo)(()=>(0,A.WithGroupCategory)(t?.categories?.filter(P=>P?.mobileShow)),[t]),{currentMenu:v,setCurrentMenu:d,subSubCategory:m}=(0,$.useNavContext)(),[u,C]=(0,a.useState)(!1),[i,w]=(0,a.useState)(0),[N,b]=(0,a.useState)(null),y=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(y?.current&&u){const P=y?.current?.getBoundingClientRect();w(window?.innerHeight-(P?.bottom||0))}},[u]),(0,Z.useGSAP)(()=>{ee.gsap.fromTo(y.current,{height:0},{height:i,duration:.3})},[i]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const g=(0,a.useMemo)(()=>N?.components?.[0]?.blockType,[N]),p=(0,A.WithSupports)($e,{categoriesItem:N}),s=(0,A.WithSidebar)(Te,N),f=(0,A.WithMulticol)(Ae,N),M=(0,a.useMemo)(()=>{switch(g){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}},[g,N,p]),D=(0,a.useCallback)(()=>{C(!1),w(0),d&&d(x.HeaderNavigationMenu.Primary)},[C,w,d]),E=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(P=>P?.mobileShow&&P?.blockType!==x.HeaderNavigationActionBlockType.Profile),[t]),S=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(P=>P?.mobileShow&&P?.blockType===x.HeaderNavigationActionBlockType.Profile)||{},[t]),_=(0,a.useMemo)(()=>{switch(v){case x.HeaderNavigationMenu.Primary:return(0,e.jsx)(je,{actions:E,menuOpen:u,onMenuOpenClose:()=>{C(!1),w(0)},onMenuOpenClick:()=>C(!0)});case x.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ue,{title:N?.text,onMenuOpenClose:D,onMenuBackClick:()=>d?.(x.HeaderNavigationMenu.Primary)});case x.HeaderNavigationMenu.Third:return(0,e.jsx)(ue,{title:m?.label,onMenuOpenClose:D,onMenuBackClick:()=>d?.(x.HeaderNavigationMenu.Secondary)});default:return null}},[u,v,d,N,E,m,D]),G=(0,a.useCallback)((P,R)=>{const j=Array.isArray(r)?Array.isArray(r[P])?r[P][R]:{}:{};b(j),j?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links?j?.components?.[0]?.url&&window.open(j?.components?.[0]?.url):d?.(x.HeaderNavigationMenu.Secondary)},[r,d]);return(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[52px]",n),children:[_,u&&(0,e.jsx)("div",{ref:y,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)(He,{categories:r,onPrimaryMenuClick:G,onPrimaryNavClick:o,profileAction:S}):M})]})}),He=({categories:t,onPrimaryMenuClick:n,profileAction:o,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=(0,$.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,d)=>(0,e.jsxs)("div",{className:"",children:[v?.map((m,u)=>(0,e.jsx)(V,{label:m.text,onClick:()=>{const i=(t?.flat()||[])?.findIndex(w=>w?.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)(Re,{profileAction:o})]})},Te=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:v,setCurrentSeriesMetadata:d,currentSeriesMetadata:m,buildProps:u,onSidebarNavClick:C}=(0,$.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 y=(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=u?.categories?.[s?.collections]||{};d?.({label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:D?.products}]})}else d?.(M)},[n,t,c,v,d]),g=(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)(V,{label:s?.label,active:i.find(M=>M.index===f)?.open,onClick:()=>{y(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(E=>E.label.toLowerCase()===s?.label?.toLowerCase())||{};let D={};if(s?.collections){const E=u?.categories?.[s?.collections]||{};D={label:M?.label,isCollection:!0,banner:M?.banner,primary:M?.primary,series:[{products:E?.products}]}}else D=M;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(s).length>0&&(0,e.jsx)(se,{matchSeriesMetadata:D,onSubSubCategoryItemClick:()=>{C?.(s,f),b(E=>E.map((S,_)=>({...S,open:_===f?!S.open:S.open})))},expanded:!!N?.find(E=>E.index===f)?.open}),N?.find(E=>E.index===f)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ie,{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)(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})})]}),g&&(0,e.jsx)(l.Link,{href:g?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:g?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[o,t,c,n,i,N,v,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)(B.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}`))}),$e=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(V,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Ae=({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}`))})},Re=({profileAction:t})=>{const[n,o]=(0,a.useState)(!1),{profile:c,event:r}=(0,$.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)(B.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)(B.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)(V,{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]"})})]})]})},je=({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)(B.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(B.Menu,{className:"size-5",onClick:()=>o()})]})]}),ce=()=>{const{payloadData:t,isMobile:n}=(0,$.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,$.useNavContext)(),[v,d]=(0,a.useState)(null),m=(0,a.useCallback)((u,C)=>{switch(d(C),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,C)=>(0,e.jsxs)("div",{className:"relative",ref:u.blockType===x.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>m(u,C),children:[(0,e.jsx)(l.Text,{html:u.icon,className:(0,k.cn)("cursor-pointer size-5",{"text-brand-0":n&&v===C})}),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)(B.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)(B.Close,{className:"size-5",onClick:()=>n()})]}),V=({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)(B.RightArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-90":c})})]})});var Fe=(0,me.withLayout)(De);
+"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);
 //# sourceMappingURL=index.js.map