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

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var me=Object.create;var G=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var ge=(t,n)=>{for(var o in n)G(t,o,{get:n[o],enumerable:!0})},Z=(t,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of be(n))!ve.call(t,r)&&r!==o&&G(t,r,{get:()=>n[r],enumerable:!(c=pe(n,r))||c.enumerable});return t};var K=(t,n,o)=>(o=t!=null?me(fe(t)):{},Z(n||!t||!t.__esModule?G(o,"default",{value:t,enumerable:!0}):o,t)),he=t=>Z(G({},"__esModule",{value:!0}),t);var He={};ge(He,{default:()=>Ee});module.exports=he(He);var e=require("react/jsx-runtime"),a=K(require("react")),l=require("../../components/index.js"),se=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),B=K(require("./NavProvider.js")),x=require("./types.js"),$e=require("react-responsive"),ie=require("es-toolkit"),ce=K(require("jump.js")),J=require("@gsap/react"),V=require("gsap"),T=require("./withCategory.js"),P=require("./icons/index.js"),de=K(require("../NavigationSearch/index.js"));const ye=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:c,event:r,profile:f,theme:u="light",isTop:m=!1,searchResult:d,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),[D,z]=(0,a.useState)(!1),[L,j]=(0,a.useState)(!1),[_,M]=(0,a.useState)(!1),$=(0,a.useRef)(null),R=()=>{const F=document?.querySelector("body")?.offsetWidth||0;M(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,ce.default)($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[m]),(0,a.useEffect)(()=>{r&&(r.search=()=>S(!0))},[r]),(0,J.useGSAP)(()=>{s?.current&&b&&V.gsap.fromTo(s.current,{height:0},{height:"auto",duration:.3})},[b]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=b?"hidden":"auto"},[b]);const q=(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:bg-white hover:text-black",u==="light"?"text-black":"text-white",{}),onClick:()=>j(!0),children:[(0,e.jsx)(xe,{data:o,className:"desktop:block hidden !bg-white",theme:u,onNavItemClick:()=>j(!0),onPrimaryNavClick:N}),(0,e.jsx)(Ce,{data:o,className:"desktop:hidden block !bg-white",onPrimaryNavClick:N}),b&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",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)(de.default,{data:q,keywords:C,isSearching:i,searchResult:d,onSearch:F=>{w?.(F)},onClose:()=>{w?.(),S(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1)})]})]})})})}),xe=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:c,className:r,theme:f,onPrimaryNavClick:u}=t,{event:m,profile:d}=(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),D=(0,a.useRef)(null),z=(0,a.useRef)(C.map(y=>Array(y?.length||0).fill(null)));(0,a.useEffect)(()=>{C?.length&&h(C?.map((y,E)=>y?.map((H,A)=>({groupIndex:E,index:A,open:!1}))))},[C]);const L=(0,a.useMemo)(()=>{let y=null;for(const E of g){for(const H of E)if(H.open){y=H;break}if(y)break}return y},[g]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=L?.open||s?"hidden":"auto"},[L?.open,s]);const j=(y,E,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()||[],I=A?.findIndex(Y=>Y?.id===C[E][H]?.id);y.stopPropagation(),c?.(),u?.(A[I],I),v(C[E][H]),h(Y=>Y.map(ue=>ue.map(W=>W.groupIndex===E&&W.index===H?{...W,open:!W.open}:{...W,open:!1})))}},_=()=>{h(y=>y.map(E=>E.map(H=>({...H,open:!1}))))},M=(0,a.useMemo)(()=>{if(N)return N?.components?.[0]?.blockType},[N]),$=(0,T.WithSidebar)(Ne,N),R=(0,T.WithMulticol)(ke,N),q=(0,T.WithSupports)(we,{categoriesItem:N,currentNavItemRef:z.current?.[L?.groupIndex||0]?.[L?.index||0]}),F=(0,a.useMemo)(()=>{switch(M){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)($,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(q,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(R,{});default:return null}},[M,N]),Q=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(y=>y?.pcShow),[o]),O=(0,a.useMemo)(()=>Q?.find(y=>y?.blockType===x.HeaderNavigationActionBlockType.Profile),[Q]),X=(0,a.useCallback)(()=>{b(y=>!y)},[]);return(0,a.useEffect)(()=>{if(p?.current){const y=p.current;return y.addEventListener("click",X),()=>{y.removeEventListener("click",X)}}},[X]),(0,J.useGSAP)(()=>{L?.open&&V.gsap.fromTo(D?.current,{height:0},{height:"auto"})},[L?.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)(le,{}),(0,e.jsx)(oe,{ref:p,actions:Q,activeStatus:s})]}),(0,e.jsx)("div",{className:"flex justify-between",children:C?.map((y,E)=>(0,e.jsx)("div",{className:"flex gap-3",children:y?.map((H,A)=>(0,e.jsx)("div",{ref:I=>{z.current[E][A]=I},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:I=>j(I,E,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)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":L?.groupIndex===E&&L?.index===A,"opacity-100":w&&L?.groupIndex===E&&L?.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)]":L?.groupIndex===E&&L?.index===A},f==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},H.id))},`groupCategory-${E}`))})]}),(0,e.jsxs)("div",{className:(0,k.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(L?.open&&N)}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:D,className:(0,k.cn)("relative z-50",{"overflow-hidden":M!==x.HeaderNavigationBlockType.Supports}),children:F}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:_})]}),s&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",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||O?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px 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 right-[46px] z-30 text-white"}),(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)})]})]})}),Ne=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o,onSidebarNavClick:c}=(0,B.useNavContext)(),[r,f]=(0,a.useState)([]),[u,m]=(0,a.useState)(-1),d=(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?.[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]),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: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((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 px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F] hover:bg-[#F5F5F7]",{"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:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm",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:"lg-desktop:text-2xl text-xl 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:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:i?.primary?.label})]}),(0,e.jsx)(l.Link,{href:i?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:i?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",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:"mb-2 text-sm 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:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[(0,e.jsx)(l.Picture,{source:i?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(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 font-bold text-white"})]})]})}),v.products?.map((h,p)=>(0,e.jsx)(ee,{seriesLabel:i?.label,product:h,isCollection:i?.isCollection},`seriesProductItem-${p}`))]})]},`seriesItem-${g}`))})]})]})}),ke=({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)(te,{item:o})},`multicolItem-${o?.label}-${c}`))})})})},we=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[c,r]=(0,a.useState)(null),[f,u]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const d=o?.current?.getBoundingClientRect();u(d.height)}},[o]);const m=(0,ie.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 overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${c?.right}px)`,height:f},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))})})},ee=({product:t,isCollection:n,position:o,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:f}=(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]),w=(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),f?.(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(w)&&w?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap 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 mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null},te=({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:"flex items-center gap-1 py-2",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-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,k.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] 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)("mr-auto !p-0 text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Ce=(0,a.forwardRef)(({data:t,className:n,onPrimaryNavClick:o},c)=>{const r=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(M=>M?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:u,subSubCategory:m}=(0,B.useNavContext)(),[d,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&&d){const M=g?.current?.getBoundingClientRect();C(window?.innerHeight-(M?.bottom||0))}},[d]),(0,J.useGSAP)(()=>{V.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)(Le,{categoriesItem:N}),s=(0,T.WithSidebar)(De,N),b=(0,T.WithMulticol)(Me,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]),D=(0,a.useCallback)(()=>{w(!1),C(0),u&&u(x.HeaderNavigationMenu.Primary)},[w,C,u]),z=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(M=>M?.mobileShow&&M?.blockType!==x.HeaderNavigationActionBlockType.Profile),[t]),L=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(M=>M?.mobileShow&&M?.blockType===x.HeaderNavigationActionBlockType.Profile)||{},[t]),j=(0,a.useMemo)(()=>{switch(f){case x.HeaderNavigationMenu.Primary:return(0,e.jsx)(ze,{actions:z,menuOpen:d,onMenuOpenClose:()=>{w(!1),C(0)},onMenuOpenClick:()=>w(!0)});case x.HeaderNavigationMenu.Secondary:return(0,e.jsx)(re,{title:N?.text,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Primary)});case x.HeaderNavigationMenu.Third:return(0,e.jsx)(re,{title:m?.label,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Secondary)});default:return null}},[d,f,u,N,z,m,D]),_=(0,a.useCallback)((M,$)=>{const R=Array.isArray(r)?Array.isArray(r[M])?r[M][$]:{}:{};v(R),R?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links?R?.components?.[0]?.url&&window.open(R?.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 z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:i},children:f===x.HeaderNavigationMenu.Primary?(0,e.jsx)(Se,{categories:r,onPrimaryMenuClick:_,onPrimaryNavClick:o,profileAction:L}):S})]})}),Se=({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,u)=>(0,e.jsxs)("div",{className:"",children:[f?.map((m,d)=>(0,e.jsx)(U,{label:m.text,onClick:()=>{const i=(t?.flat()||[])?.findIndex(C=>C?.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)(Pe,{profileAction:o})]})},De=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:f,setCurrentSeriesMetadata:u,currentSeriesMetadata:m,buildProps:d,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(D=>b!==void 0?s?.subSubCategories?.[b]?.label?.toLowerCase()===D.label?.toLowerCase():s?.label?.toLowerCase()===D.label?.toLowerCase())||{};if(s?.collections){const D=d?.categories?.[s?.collections]||{};u?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:D?.products}]})}else u?.(S)},[n,t,c,f,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 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between 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(z=>z.label.toLowerCase()===s?.label?.toLowerCase())||{};let D={};if(s?.collections){const z=d?.categories?.[s?.collections]||{};D={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:z?.products}]}}else D=S;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(s).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:D,onSubSubCategoryItemClick:()=>{w?.(s,b),v(z=>z.map((L,j)=>({...L,open:j===b?!L.open:L.open})))},expanded:!!N?.find(z=>z.index===b)?.open}),N?.find(z=>z.index===b)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ne,{matchSeriesMetadata:D}),D?.primary&&(0,e.jsx)("div",{className:"my-4 text-center",children:(0,e.jsx)(l.Button,{as:"a",href:D?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:D?.primary?.label})})]})]},`${s.label}-${b}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(m).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:m}),(0,e.jsx)(ne,{matchSeriesMetadata:m}),m?.primary&&(0,e.jsx)("div",{className:"my-4 text-center ",children:(0,e.jsx)(l.Button,{as:"a",href:`${m?.primary?.url}?ref=${m?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",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,u,m])},ae=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 flex items-center justify-between py-4",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})})]}),ne=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"laptop:gap-3 flex flex-col gap-2",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:"mb-2 text-sm 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:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(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 font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((c,r)=>(0,e.jsx)(ee,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Le=({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))}),Me=({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 tablet:gap-6 flex flex-col gap-4 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)(te,{item:o,allPicture:n})},`multicolItem-${o?.label}-${c}`))})},Pe=({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)("laptop:size-4 size-5",{"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]"})})]})]})},ze=({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)(le,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(oe,{actions:c}),t?(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(P.Menu,{className:"size-5",onClick:()=>o()})]})]}),le=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"hover:text-brand-0 cursor-pointer [&>svg]:w-full",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},oe=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:c,cartCount:r}=(0,B.useNavContext)(),[f,u]=(0,a.useState)(null),m=(0,a.useCallback)((d,w)=>{switch(u(w),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,w)=>(0,e.jsxs)("div",{className:"relative",ref:d.blockType===x.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>m(d,w),children:[(0,e.jsx)(l.Text,{html:d.icon,className:(0,k.cn)("size-5 cursor-pointer",{"text-brand-0":n&&f===w})}),d.blockType===x.HeaderNavigationActionBlockType.Cart&&r>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]",children:(0,e.jsx)(l.Text,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},d.id))})}),re=({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)("laptop:size-4 size-5",{"rotate-90":c})})]})});var Ee=(0,se.withLayout)(ye);
+"use strict";"use client";var me=Object.create;var G=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var ge=(t,n)=>{for(var o in n)G(t,o,{get:n[o],enumerable:!0})},Z=(t,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of be(n))!ve.call(t,r)&&r!==o&&G(t,r,{get:()=>n[r],enumerable:!(c=pe(n,r))||c.enumerable});return t};var K=(t,n,o)=>(o=t!=null?me(fe(t)):{},Z(n||!t||!t.__esModule?G(o,"default",{value:t,enumerable:!0}):o,t)),he=t=>Z(G({},"__esModule",{value:!0}),t);var He={};ge(He,{default:()=>Ee});module.exports=he(He);var e=require("react/jsx-runtime"),a=K(require("react")),l=require("../../components/index.js"),se=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),B=K(require("./NavProvider.js")),x=require("./types.js"),$e=require("react-responsive"),ie=require("es-toolkit"),ce=K(require("jump.js")),J=require("@gsap/react"),V=require("gsap"),T=require("./withCategory.js"),P=require("./icons/index.js"),de=K(require("../NavigationSearch/index.js"));const ye=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:c,event:r,profile:f,theme:u="light",isTop:m=!1,searchResult:d,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),[L,z]=(0,a.useState)(!1),[M,j]=(0,a.useState)(!1),[_,D]=(0,a.useState)(!1),$=(0,a.useRef)(null),R=()=>{const F=document?.querySelector("body")?.offsetWidth||0;D(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,ce.default)($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[m]),(0,a.useEffect)(()=>{r&&(r.search=()=>S(!0))},[r]),(0,J.useGSAP)(()=>{s?.current&&b&&V.gsap.fromTo(s.current,{height:0},{height:"auto",duration:.3})},[b]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=b?"hidden":"auto"},[b]);const q=(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:bg-white hover:text-black",u==="light"?"text-black":"text-white",{}),onClick:()=>j(!0),children:[(0,e.jsx)(xe,{data:o,className:"desktop:block hidden !bg-white",theme:u,onNavItemClick:()=>j(!0),onPrimaryNavClick:N}),(0,e.jsx)(Ce,{data:o,className:"desktop:hidden block !bg-white",onPrimaryNavClick:N}),b&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",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)(de.default,{data:q,keywords:C,isSearching:i,searchResult:d,onSearch:F=>{w?.(F)},onClose:()=>{w?.(),S(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1)})]})]})})})}),xe=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:c,className:r,theme:f,onPrimaryNavClick:u}=t,{event:m,profile:d}=(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),L=(0,a.useRef)(null),z=(0,a.useRef)(C.map(y=>Array(y?.length||0).fill(null)));(0,a.useEffect)(()=>{C?.length&&h(C?.map((y,E)=>y?.map((H,A)=>({groupIndex:E,index:A,open:!1}))))},[C]);const M=(0,a.useMemo)(()=>{let y=null;for(const E of g){for(const H of E)if(H.open){y=H;break}if(y)break}return y},[g]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=M?.open||s?"hidden":"auto"},[M?.open,s]);const j=(y,E,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()||[],I=A?.findIndex(Y=>Y?.id===C[E][H]?.id);y.stopPropagation(),c?.(),u?.(A[I],I),v(C[E][H]),h(Y=>Y.map(ue=>ue.map(W=>W.groupIndex===E&&W.index===H?{...W,open:!W.open}:{...W,open:!1})))}},_=()=>{h(y=>y.map(E=>E.map(H=>({...H,open:!1}))))},D=(0,a.useMemo)(()=>{if(N)return N?.components?.[0]?.blockType},[N]),$=(0,T.WithSidebar)(Ne,N),R=(0,T.WithMulticol)(ke,N),q=(0,T.WithSupports)(we,{categoriesItem:N,currentNavItemRef:z.current?.[M?.groupIndex||0]?.[M?.index||0]}),F=(0,a.useMemo)(()=>{switch(D){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)($,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(q,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(R,{});default:return null}},[D,N]),Q=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(y=>y?.pcShow),[o]),O=(0,a.useMemo)(()=>Q?.find(y=>y?.blockType===x.HeaderNavigationActionBlockType.Profile),[Q]),X=(0,a.useCallback)(()=>{b(y=>!y)},[]);return(0,a.useEffect)(()=>{if(p?.current){const y=p.current;return y.addEventListener("click",X),()=>{y.removeEventListener("click",X)}}},[X]),(0,J.useGSAP)(()=>{M?.open&&V.gsap.fromTo(L?.current,{height:0},{height:"auto"})},[M?.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)(le,{}),(0,e.jsx)(oe,{ref:p,actions:Q,activeStatus:s})]}),(0,e.jsx)("div",{className:"flex justify-between",children:C?.map((y,E)=>(0,e.jsx)("div",{className:"flex gap-3",children:y?.map((H,A)=>(0,e.jsx)("div",{ref:I=>{z.current[E][A]=I},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:I=>j(I,E,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)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":M?.groupIndex===E&&M?.index===A,"opacity-100":w&&M?.groupIndex===E&&M?.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)]":M?.groupIndex===E&&M?.index===A},f==="dark"?"bg-white":"bg-[#080A0F]")})]})},H.id))},`groupCategory-${E}`))})]}),(0,e.jsxs)("div",{className:(0,k.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(M?.open&&N)}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:L,className:(0,k.cn)("relative z-50",{"overflow-hidden":D!==x.HeaderNavigationBlockType.Supports}),children:F}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:_})]}),s&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",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||O?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px 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 right-[46px] z-30 text-white"}),(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)})]})]})}),Ne=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o,onSidebarNavClick:c}=(0,B.useNavContext)(),[r,f]=(0,a.useState)([]),[u,m]=(0,a.useState)(-1),d=(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?.[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]),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: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((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 px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F] hover:bg-[#F5F5F7]",{"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:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm",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:"lg-desktop:text-2xl text-xl 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:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:i?.primary?.label})]}),(0,e.jsx)(l.Link,{href:i?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:i?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",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:"mb-2 text-sm 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:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[(0,e.jsx)(l.Picture,{source:i?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(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 font-bold text-white"})]})]})}),v.products?.map((h,p)=>(0,e.jsx)(ee,{seriesLabel:i?.label,product:h,isCollection:i?.isCollection},`seriesProductItem-${p}`))]})]},`seriesItem-${g}`))})]})]})}),ke=({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)(te,{item:o})},`multicolItem-${o?.label}-${c}`))})})})},we=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[c,r]=(0,a.useState)(null),[f,u]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const d=o?.current?.getBoundingClientRect();u(d.height)}},[o]);const m=(0,ie.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 overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${c?.right}px)`,height:f},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))})})},ee=({product:t,isCollection:n,position:o,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:f}=(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]),w=(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),f?.(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(w)&&w?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap 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 mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null},te=({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:"flex items-center gap-1 py-2",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-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,k.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] 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)("mr-auto !p-0 text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Ce=(0,a.forwardRef)(({data:t,className:n,onPrimaryNavClick:o},c)=>{const r=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(D=>D?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:u,subSubCategory:m}=(0,B.useNavContext)(),[d,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&&d){const D=g?.current?.getBoundingClientRect();C(window?.innerHeight-(D?.bottom||0))}},[d]),(0,J.useGSAP)(()=>{V.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)(Me,{categoriesItem:N}),s=(0,T.WithSidebar)(Le,N),b=(0,T.WithMulticol)(De,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]),L=(0,a.useCallback)(()=>{w(!1),C(0),u&&u(x.HeaderNavigationMenu.Primary)},[w,C,u]),z=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(D=>D?.mobileShow&&D?.blockType!==x.HeaderNavigationActionBlockType.Profile),[t]),M=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(D=>D?.mobileShow&&D?.blockType===x.HeaderNavigationActionBlockType.Profile)||{},[t]),j=(0,a.useMemo)(()=>{switch(f){case x.HeaderNavigationMenu.Primary:return(0,e.jsx)(ze,{actions:z,menuOpen:d,onMenuOpenClose:()=>{w(!1),C(0)},onMenuOpenClick:()=>w(!0)});case x.HeaderNavigationMenu.Secondary:return(0,e.jsx)(re,{title:N?.text,onMenuOpenClose:L,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Primary)});case x.HeaderNavigationMenu.Third:return(0,e.jsx)(re,{title:m?.label,onMenuOpenClose:L,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Secondary)});default:return null}},[d,f,u,N,z,m,L]),_=(0,a.useCallback)((D,$)=>{const R=Array.isArray(r)?Array.isArray(r[D])?r[D][$]:{}:{};v(R),R?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links?R?.components?.[0]?.url&&window.open(R?.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 z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:i},children:f===x.HeaderNavigationMenu.Primary?(0,e.jsx)(Se,{categories:r,onPrimaryMenuClick:_,onPrimaryNavClick:o,profileAction:M}):S})]})}),Se=({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,u)=>(0,e.jsxs)("div",{className:"",children:[f?.map((m,d)=>(0,e.jsx)(U,{label:m.text,onClick:()=>{const i=(t?.flat()||[])?.findIndex(C=>C?.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)(Pe,{profileAction:o})]})},Le=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:f,setCurrentSeriesMetadata:u,currentSeriesMetadata:m,buildProps:d,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(L=>b!==void 0?s?.subSubCategories?.[b]?.label?.toLowerCase()===L.label?.toLowerCase():s?.label?.toLowerCase()===L.label?.toLowerCase())||{};if(s?.collections){const L=d?.categories?.[s?.collections]||{};u?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:L?.products}]})}else u?.(S)},[n,t,c,f,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 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between 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(z=>z.label.toLowerCase()===s?.label?.toLowerCase())||{};let L={};if(s?.collections){const z=d?.categories?.[s?.collections]||{};L={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:z?.products}]}}else L=S;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(s).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:L,onSubSubCategoryItemClick:()=>{w?.(s,b),v(z=>z.map((M,j)=>({...M,open:j===b?!M.open:M.open})))},expanded:!!N?.find(z=>z.index===b)?.open}),N?.find(z=>z.index===b)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ne,{matchSeriesMetadata:L}),L?.primary&&(0,e.jsx)("div",{className:"my-4 text-center",children:(0,e.jsx)(l.Button,{as:"a",href:L?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:L?.primary?.label})})]})]},`${s.label}-${b}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(m).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:m}),(0,e.jsx)(ne,{matchSeriesMetadata:m}),m?.primary&&(0,e.jsx)("div",{className:"my-4 text-center ",children:(0,e.jsx)(l.Button,{as:"a",href:`${m?.primary?.url}?ref=${m?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",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,u,m])},ae=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 flex items-center justify-between py-4",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})})]}),ne=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"laptop:gap-3 flex flex-col gap-2",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:"mb-2 text-sm 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:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(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 font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((c,r)=>(0,e.jsx)(ee,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Me=({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))}),De=({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 tablet:gap-6 flex flex-col gap-4 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)(te,{item:o,allPicture:n})},`multicolItem-${o?.label}-${c}`))})},Pe=({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)("laptop:size-4 size-5",{"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]"})})]})]})},ze=({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)(le,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(oe,{actions:c}),t?(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(P.Menu,{className:"size-5",onClick:()=>o()})]})]}),le=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"hover:text-brand-0 cursor-pointer [&>svg]:w-full",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},oe=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:c,cartCount:r}=(0,B.useNavContext)(),[f,u]=(0,a.useState)(null),m=(0,a.useCallback)((d,w)=>{switch(u(w),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,w)=>(0,e.jsxs)("div",{className:"relative",ref:d.blockType===x.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>m(d,w),children:[(0,e.jsx)(l.Text,{html:d.icon,className:(0,k.cn)("size-5 cursor-pointer",{"text-brand-0":n&&f===w})}),d.blockType===x.HeaderNavigationActionBlockType.Cart&&r>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]",children:(0,e.jsx)(l.Text,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},d.id))})}),re=({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)("laptop:size-4 size-5",{"rotate-90":c})})]})});var Ee=(0,se.withLayout)(ye);
 //# sourceMappingURL=index.js.map