@anker-in/headless-ui 1.0.20-alpha.1761027154344 → 1.0.20-alpha.1761122497598

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

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