@anker-in/headless-ui 1.1.17-alpha.1766054863247 → 1.1.18

package/dist/esm/biz-components/GiftBox/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Img } from '../../types/props.js';
 export type GiftBoxDataType = {
     img: Img;
@@ -12,7 +11,7 @@ type GiftBoxType = {
     className?: string;
 };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<GiftBoxType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/GiftBox/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{withLayout as m}from"../../shared/Styles.js";import{Picture as p,Text as r}from"../../components/index.js";import{useExposure as c}from"../../hooks/useExposure.js";import{useRef as n}from"react";const g="image",d="gift_box",f=({index:o,item:t})=>{const l=n(null);return c(l,{componentType:g,componentName:d,position:o+1,componentTitle:t.title}),a("div",{className:"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]",children:[a("div",{children:[t?.img?.url&&e(p,{className:"l-tablet:hidden aspect-[194/194]",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt||""}),t?.mobileImg?.url&&e(p,{className:"laptop:hidden aspect-[120/120]",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""})]}),e(r,{html:t?.title,className:"laptop:text-[18px] text-[14px] font-bold leading-[1.4]"})]},o)},u=o=>{const{data:t}=o,{list:l}=t;return e("div",{className:"w-full rounded-2xl bg-[#EAEAEC]",children:e("div",{className:"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3",children:l.map((s,i)=>e(f,{index:i,item:s},i))})})};var T=m(u);export{T as default};
+"use client";import{jsx as l,jsxs as a}from"react/jsx-runtime";import{withLayout as m}from"../../shared/Styles.js";import{Picture as e,Text as d}from"../../components/index.js";const r=s=>{const{data:o}=s,{list:i}=o;return l("div",{className:"w-full rounded-2xl bg-[#EAEAEC]",children:l("div",{className:"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3",children:i.map((t,p)=>a("div",{className:"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]",children:[a("div",{children:[t?.img?.url&&l(e,{className:"l-tablet:hidden aspect-[194/194]",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt||""}),t?.mobileImg?.url&&l(e,{className:"laptop:hidden aspect-[120/120]",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""})]}),l(d,{html:t?.title,className:"laptop:text-[18px] text-[14px] font-bold leading-[1.4]"})]},p))})})};var x=m(r);export{x as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/GiftBox/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GiftBox/index.tsx"],
-  "sourcesContent": ["'use client'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\nexport type GiftBoxDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n}\n\ntype GiftBoxType = {\n  data: {\n    list: GiftBoxDataType[]\n  }\n  className?: string\n}\n\nconst componentType = 'image'\nconst componentName = 'gift_box'\n\nconst Item = ({ index, item }: { index: number; item: GiftBoxDataType }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: index + 1,\n    componentTitle: item.title,\n  })\n  return (\n    <div key={index} className=\"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]\">\n      <div>\n        {item?.img?.url && (\n          <Picture\n            className=\"l-tablet:hidden aspect-[194/194]\"\n            imgClassName=\"\"\n            source={item?.img?.url}\n            alt={item?.img?.alt || ''}\n          />\n        )}\n        {item?.mobileImg?.url && (\n          <Picture\n            className=\"laptop:hidden aspect-[120/120]\"\n            imgClassName=\"\"\n            source={item?.mobileImg?.url}\n            alt={item?.mobileImg?.alt || ''}\n          />\n        )}\n      </div>\n      <Text html={item?.title} className=\"laptop:text-[18px] text-[14px] font-bold leading-[1.4]\" />\n    </div>\n  )\n}\n\nconst GiftBox = (props: GiftBoxType) => {\n  const { data } = props\n  const { list } = data\n\n  return (\n    <div className=\"w-full rounded-2xl bg-[#EAEAEC]\">\n      <div className=\"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3\">\n        {list.map((item, index) => (\n          <Item key={index} index={index} item={item} />\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GiftBox)\n"],
-  "mappings": "aAkCM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAhCN,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,UAAAC,MAAc,QAevB,MAAMC,EAAgB,QAChBC,EAAgB,WAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAAgD,CAC1E,MAAMC,EAAMN,EAAuB,IAAI,EAEvC,OAAAD,EAAYO,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,KACvB,CAAC,EAECV,EAAC,OAAgB,UAAU,qEACzB,UAAAA,EAAC,OACE,UAAAU,GAAM,KAAK,KACVX,EAACG,EAAA,CACC,UAAU,mCACV,aAAa,GACb,OAAQQ,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,KAChBX,EAACG,EAAA,CACC,UAAU,iCACV,aAAa,GACb,OAAQQ,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,EACAX,EAACI,EAAA,CAAK,KAAMO,GAAM,MAAO,UAAU,yDAAyD,IAnBpFD,CAoBV,CAEJ,EAEMG,EAAWC,GAAuB,CACtC,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,KAAAE,CAAK,EAAID,EAEjB,OACEf,EAAC,OAAI,UAAU,kCACb,SAAAA,EAAC,OAAI,UAAU,uHACZ,SAAAgB,EAAK,IAAI,CAACL,EAAMD,IACfV,EAACS,EAAA,CAAiB,MAAOC,EAAO,KAAMC,GAA3BD,CAAiC,CAC7C,EACH,EACF,CAEJ,EAEA,IAAOO,EAAQf,EAAWW,CAAO",
-  "names": ["jsx", "jsxs", "withLayout", "Picture", "Text", "useExposure", "useRef", "componentType", "componentName", "Item", "index", "item", "ref", "GiftBox", "props", "data", "list", "GiftBox_default"]
+  "sourcesContent": ["'use client'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type GiftBoxDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n}\n\ntype GiftBoxType = {\n  data: {\n    list: GiftBoxDataType[]\n  }\n  className?: string\n}\n\nconst GiftBox = (props: GiftBoxType) => {\n  const { data } = props\n  const { list } = data\n\n  return (\n    <div className=\"w-full rounded-2xl bg-[#EAEAEC]\">\n      <div className=\"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3\">\n        {list.map((item, index) => (\n          <div key={index} className=\"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]\">\n            <div>\n              {item?.img?.url && (\n                <Picture\n                  className=\"l-tablet:hidden aspect-[194/194]\"\n                  imgClassName=\"\"\n                  source={item?.img?.url}\n                  alt={item?.img?.alt || ''}\n                />\n              )}\n              {item?.mobileImg?.url && (\n                <Picture\n                  className=\"laptop:hidden aspect-[120/120]\"\n                  imgClassName=\"\"\n                  source={item?.mobileImg?.url}\n                  alt={item?.mobileImg?.alt || ''}\n                />\n              )}\n            </div>\n            <Text html={item?.title} className=\"laptop:text-[18px] text-[14px] font-bold leading-[1.4]\" />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GiftBox)\n"],
+  "mappings": "aA2BY,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAzBZ,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAe9B,MAAMC,EAAWC,GAAuB,CACtC,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,KAAAE,CAAK,EAAID,EAEjB,OACEP,EAAC,OAAI,UAAU,kCACb,SAAAA,EAAC,OAAI,UAAU,uHACZ,SAAAQ,EAAK,IAAI,CAACC,EAAMC,IACfT,EAAC,OAAgB,UAAU,qEACzB,UAAAA,EAAC,OACE,UAAAQ,GAAM,KAAK,KACVT,EAACG,EAAA,CACC,UAAU,mCACV,aAAa,GACb,OAAQM,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,KAChBT,EAACG,EAAA,CACC,UAAU,iCACV,aAAa,GACb,OAAQM,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,EACAT,EAACI,EAAA,CAAK,KAAMK,GAAM,MAAO,UAAU,yDAAyD,IAnBpFC,CAoBV,CACD,EACH,EACF,CAEJ,EAEA,IAAOC,EAAQT,EAAWG,CAAO",
+  "names": ["jsx", "jsxs", "withLayout", "Picture", "Text", "GiftBox", "props", "data", "list", "item", "index", "GiftBox_default"]
 }

package/dist/esm/biz-components/Graphic/index.d.ts

@@ -32,7 +32,7 @@ export interface GraphicProps extends ComponentCommonProps {
     };
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/GraphicAttractionBlock/index.d.ts

@@ -18,8 +18,8 @@ interface GraphicAttractionBlockProps extends ComponentCommonProps {
     };
 }
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<GraphicAttractionBlockProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;
 export type { GraphicAttractionBlockProps };

package/dist/esm/biz-components/GraphicMore/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Img } from '../../types/props.js';
 export type GraphicMoreDataType = {
     img: Img;
@@ -17,7 +16,7 @@ type GraphicMoreType = {
     className?: string;
 };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<GraphicMoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 } & import("react").RefAttributes<any>>;
 export default _default;

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.d.ts

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

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

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

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

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