@anker-in/headless-ui 1.1.17 → 1.1.18

package/dist/cjs/biz-components/AccordionCards/index.d.ts

@@ -26,6 +26,23 @@ export type AccordionCardsType = {
         primaryButton?: string;
         theme?: 'light' | 'dark';
     };
+    /**
+     * 自动播放配置
+     */
+    autoplay?: {
+        /**
+         * 是否开启自动播放
+         */
+        enabled: boolean;
+        /**
+         * 是否循环播放
+         */
+        loop?: boolean;
+        /**
+         * 自动播放间隔时间，单位毫秒
+         */
+        interval?: number;
+    };
     /** 按钮事件*/
     event?: {
         primaryButton?: (_v: any, _index: number) => void;

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var C=Object.create;var g=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var z=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},R=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of S(t))!j.call(e,s)&&s!==o&&g(e,s,{get:()=>t[s],enumerable:!(p=D(t,s))||p.enumerable});return e};var f=(e,t,o)=>(o=e!=null?C(A(e)):{},R(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),P=e=>R(g({},"__esModule",{value:!0}),e);var O={};z(O,{default:()=>q});module.exports=P(O);var i=require("react/jsx-runtime"),M=f(require("../Title/index.js")),l=require("../../helpers/utils.js"),$=f(require("../../components/picture.js")),N=f(require("../../components/button.js")),B=f(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),n=f(require("react")),I=require("../../hooks/useExposure.js"),v=require("../../shared/trackUrlRef.js"),H=f(require("../../shared/throttle.js")),_=require("../../components/heading.js");const a="image",m="scene_banner",V=({item:e,idx:t,itemShape:o,hoverIndex:p,getRef:s,handleSwiperItemClick:h,isAnimation:b,contentWidth:c,primaryButton:u,event:w,data:T,accordionRef:y})=>{const x=p===t,k=x?8:1;return(0,I.useExposure)({current:y.current[t]},{componentType:a,componentName:m,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{style:{flex:`${k} 1 0%`,transition:"all 0.6s"},ref:r=>{r&&s(t,r)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",o==="round"?"rounded-2xl":""),onMouseEnter:()=>h(t),onMouseLeave:()=>{b.current=!1},onClick:()=>{h(t)},children:[(0,i.jsx)("a",{href:(0,v.trackUrlRef)(e?.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,i.jsx)($.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),(0,i.jsxs)("div",{style:{width:c},className:(0,l.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",x&&c?"opacity-100":"opacity-0"),children:[(0,i.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,i.jsx)(_.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),(0,i.jsx)(_.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),(0,i.jsxs)(N.default,{className:(0,l.cn)("mb-1.5 font-bold"),as:"a",href:(0,v.trackUrlRef)(e?.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${u}`,onClick:()=>w?.primaryButton?.(T,t),children:[u,(0,i.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},W=({data:e,configuration:t})=>{const o=(0,n.useRef)(null);return(0,I.useExposure)(o,{componentType:a,componentName:m,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{ref:o,className:(0,l.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[(0,i.jsx)("a",{href:(0,v.trackUrlRef)(e?.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-postion":`''#${t?.index+1}`,children:(0,i.jsx)($.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),(0,i.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,i.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,i.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),(0,i.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),(0,i.jsx)(N.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,l.cn)("text-info-primary text-sm font-bold"),href:(0,v.trackUrlRef)(e.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-nav-postion":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},L=n.default.forwardRef(({data:e,className:t="",event:o},p)=>{const[s,h]=(0,n.useState)(0),b=(0,n.useRef)(0),c=(0,n.useRef)([]),u=(0,n.useRef)(!1),[w,T]=(0,n.useState)(0),y=(0,n.useRef)(null);(0,n.useImperativeHandle)(p,()=>y.current);const x=(r,d)=>{d&&(c.current[r]=d)};(0,n.useEffect)(()=>{const r=()=>{c.current[b.current]&&T(c.current[b.current].offsetWidth)};r();const d=(0,H.default)(r,300);return window.addEventListener("resize",d),()=>window.removeEventListener("resize",d)},[]);const k=(0,n.useCallback)(r=>{s===r||u.current||(u.current=!0,h(r),b.current=r)},[e?.products,s]);return(0,i.jsxs)(i.Fragment,{children:[e?.title&&(0,i.jsx)(M.default,{data:{title:e?.title}}),(0,i.jsx)("div",{ref:y,className:(0,l.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",t),children:e?.products?.map((r,d)=>(0,i.jsx)(V,{item:r,idx:d,itemShape:e?.itemShape,hoverIndex:s,getRef:x,handleSwiperItemClick:k,isAnimation:u,contentWidth:w,primaryButton:e?.primaryButton,event:o,data:e,accordionRef:c},d))})}),(0,i.jsx)("div",{className:(0,l.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)(B.default,{className:(0,l.cn)("h-[400px] !overflow-visible",t),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:o,title:e?.title}},Slide:W,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});L.displayName="AccordionCards";var q=(0,E.withLayout)(L);
+"use strict";"use client";var D=Object.create;var T=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var i in t)T(e,i,{get:t[i],enumerable:!0})},E=(e,t,i,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of A(t))!P.call(e,m)&&m!==i&&T(e,m,{get:()=>t[m],enumerable:!(p=j(t,m))||p.enumerable});return e};var v=(e,t,i)=>(i=e!=null?D(z(e)):{},E(t||!e||!e.__esModule?T(i,"default",{value:e,enumerable:!0}):i,e)),W=e=>E(T({},"__esModule",{value:!0}),e);var U={};V(U,{default:()=>J});module.exports=W(U);var n=require("react/jsx-runtime"),M=v(require("../Title/index.js")),l=require("../../helpers/utils.js"),N=v(require("../../components/picture.js")),_=v(require("../../components/button.js")),H=v(require("../SwiperBox/index.js")),C=require("../../shared/Styles.js"),r=v(require("react")),R=require("../../hooks/useExposure.js"),g=require("../../shared/trackUrlRef.js"),S=v(require("../../shared/throttle.js")),B=require("../../components/heading.js");const a="image",d="scene_banner",q=({item:e,idx:t,itemShape:i,hoverIndex:p,getRef:m,handleSwiperItemClick:u,contentWidth:h,primaryButton:c,event:f,data:w,accordionRef:k})=>{const y=p===t,$=y?8:1;return(0,R.useExposure)({current:k.current[t]},{componentType:a,componentName:d,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{style:{flex:`${$} 1 0%`,transition:"all 0.6s"},ref:x=>{x&&m(t,x)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",i==="round"?"rounded-2xl":""),onMouseEnter:()=>u(t),onClick:()=>{u(t)},children:[(0,n.jsx)("a",{href:(0,g.trackUrlRef)(e?.imgLink,`${a}_${d}`),"data-headless-type-name":`${a}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,n.jsx)(N.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}),(0,n.jsxs)("div",{style:{width:h},className:(0,l.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",y&&h?"opacity-100":"opacity-0"),children:[(0,n.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,n.jsx)(B.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),(0,n.jsx)(B.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),c&&(0,n.jsxs)(_.default,{className:(0,l.cn)("mb-1.5 font-bold"),as:"a",href:(0,g.trackUrlRef)(e?.link,`${a}_${d}`),"data-headless-type-name":`${a}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${c}`,onClick:()=>f?.primaryButton?.(w,t),children:[c,(0,n.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},O=({data:e,configuration:t})=>{const i=(0,r.useRef)(null);return(0,R.useExposure)(i,{componentType:a,componentName:d,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,n.jsxs)("div",{ref:i,className:(0,l.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[(0,n.jsx)("a",{href:(0,g.trackUrlRef)(e?.imgLink,`${a}_${d}`),"data-headless-type-name":`${a}#${d}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-postion":`''#${t?.index+1}`,children:(0,n.jsx)(N.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}),(0,n.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,n.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,n.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),(0,n.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),t?.primaryButton&&(0,n.jsx)(_.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,l.cn)("text-info-primary text-sm font-bold"),href:(0,g.trackUrlRef)(e.link,`${a}_${d}`),"data-headless-type-name":`${a}#${d}`,"data-headless-nav-postion":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},L=r.default.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:i="",event:p},m)=>{const[u,h]=(0,r.useState)(0),c=(0,r.useRef)(0),f=(0,r.useRef)([]),[w,k]=(0,r.useState)(0),y=(0,r.useRef)(null);(0,r.useImperativeHandle)(m,()=>y.current);const $=(o,s)=>{s&&(f.current[o]=s)};(0,r.useEffect)(()=>{const o=()=>{f.current[c.current]&&k(f.current[c.current].offsetWidth)};o();const s=(0,S.default)(o,300);return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[]);const x=(0,r.useCallback)(o=>{u!==o&&(h(o),c.current=o)},[e?.products,u]);return(0,r.useEffect)(()=>{let o;return t?.enabled&&(o=setInterval(()=>{h(s=>{const I=s??0;let b;if(t.loop!==!1)b=(I+1)%e?.products?.length;else if(b=I+1,b>=e?.products?.length)return b=e?.products?.length-1,o&&clearInterval(o),I;return c.current=b,b})},t?.interval)),()=>{o&&clearInterval(o)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,x]),(0,n.jsxs)(n.Fragment,{children:[e?.title&&(0,n.jsx)(M.default,{data:{title:e?.title}}),(0,n.jsx)("div",{ref:y,className:(0,l.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",i),children:e?.products?.map((o,s)=>(0,n.jsx)(q,{item:o,idx:s,itemShape:e?.itemShape,hoverIndex:u,getRef:$,handleSwiperItemClick:x,contentWidth:w,primaryButton:e?.primaryButton,event:p,data:e,accordionRef:f},s))})}),(0,n.jsx)("div",{className:(0,l.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,n.jsx)(H.default,{className:(0,l.cn)("h-[400px] !overflow-visible",i),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:p,title:e?.title}},Slide:O,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});L.displayName="AccordionCards";var J=(0,C.withLayout)(L);
 //# sourceMappingURL=index.js.map

package/dist/cjs/biz-components/AccordionCards/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
-  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: Img\n  mobileImg?: Img\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n  imgLink?: string\n}\n\nexport type AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n}\n\nconst AccordionCardsPcItem = ({\n  item,\n  idx,\n  itemShape,\n  hoverIndex,\n  getRef,\n  handleSwiperItemClick,\n  isAnimation,\n  contentWidth,\n  primaryButton,\n  event,\n  data,\n  accordionRef,\n}: {\n  item: ItemType\n  idx: number\n  itemShape: 'round' | 'square' | undefined\n  hoverIndex: number | null\n  getRef: (_idx: number, _el: HTMLDivElement) => void\n  handleSwiperItemClick: (_idx: number) => void\n  isAnimation: any\n  contentWidth: number\n  primaryButton: string | undefined\n  event: any\n  data: AccordionCardsType['data']\n  accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n  const isExpanded = hoverIndex === idx\n  const flexValue = isExpanded ? 8 : 1\n\n  useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n    componentType,\n    componentName,\n    componentTitle: item?.title,\n    position: idx + 1,\n    componentDescription: item?.subTitle,\n  })\n\n  return (\n    <div\n      key={idx}\n      style={{\n        flex: `${flexValue} 1 0%`,\n        transition: 'all 0.6s',\n      }}\n      ref={(el: HTMLDivElement | null) => {\n        if (el) getRef(idx, el)\n      }}\n      className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n      onMouseEnter={() => handleSwiperItemClick(idx)}\n      onMouseLeave={() => {\n        isAnimation.current = false\n      }}\n      onClick={() => {\n        handleSwiperItemClick(idx)\n      }}\n    >\n      <a\n        href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n      >\n        <Picture\n          source={item?.img?.url}\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          alt={item?.img?.alt || ''}\n        />\n      </a>\n      <div\n        style={{\n          width: contentWidth,\n        }}\n        className={cn(\n          'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n          isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n        )}\n      >\n        <div className=\"mr-16 flex-1 overflow-hidden\">\n          <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n            {item?.title}\n          </Heading>\n          <Heading\n            as=\"h4\"\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n          >\n            {item?.subTitle}\n          </Heading>\n        </div>\n        <Button\n          className={cn('mb-1.5 font-bold')}\n          as=\"a\"\n          href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n          onClick={() => event?.primaryButton?.(data, idx)}\n        >\n          {primaryButton}\n          <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.subTitle,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <a\n        href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n        data-headless-nav-postion={`''#${configuration?.index + 1}`}\n      >\n        <Picture\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          source={data?.mobileImg?.url || ''}\n          alt={data?.mobileImg?.alt || ''}\n        />\n      </a>\n      <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n        <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n          <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n          <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n        </div>\n\n        <Button\n          as=\"a\"\n          variant=\"secondary\"\n          aria-label={data?.title ?? data?.subTitle}\n          className={cn('text-info-primary text-sm font-bold')}\n          href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-nav-postion={`''#${configuration?.index + 1}`}\n          data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n        >\n          {configuration?.primaryButton}\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n  const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n  const hoverIndexRef = useRef<number>(0)\n  const accordionRef = useRef<HTMLDivElement[]>([])\n  const isAnimation = useRef<boolean>(false)\n  const [contentWidth, setContentWidth] = useState<number>(0)\n\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  const getRef = (index: number, el: HTMLDivElement) => {\n    if (el) {\n      accordionRef.current[index] = el\n    }\n  }\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (accordionRef.current[hoverIndexRef.current]) {\n        setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n      }\n    }\n    handleResize()\n    const throttleResize = throttle(handleResize, 300)\n    window.addEventListener('resize', throttleResize)\n    return () => window.removeEventListener('resize', throttleResize)\n  }, [])\n\n  const handleSwiperItemClick = useCallback(\n    (idx: number) => {\n      if (hoverIndex === idx || isAnimation.current) return\n      isAnimation.current = true\n      // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n      setHoverIndex(idx)\n      hoverIndexRef.current = idx\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [data?.products, hoverIndex]\n  )\n\n  return (\n    <>\n      {data?.title && <Title data={{ title: data?.title }} />}\n      <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n        <div\n          className={cn(\n            'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n            className\n          )}\n        >\n          {data?.products?.map((item, idx) => (\n            <AccordionCardsPcItem\n              key={idx}\n              item={item}\n              idx={idx}\n              itemShape={data?.itemShape}\n              hoverIndex={hoverIndex}\n              getRef={getRef}\n              handleSwiperItemClick={handleSwiperItemClick}\n              isAnimation={isAnimation}\n              contentWidth={contentWidth}\n              primaryButton={data?.primaryButton}\n              event={event}\n              data={data}\n              accordionRef={accordionRef}\n            />\n          ))}\n        </div>\n      </div>\n      <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n        <SwiperBox\n          className={cn('h-[400px] !overflow-visible', className)}\n          id={'AccordionCards' + data?.key}\n          data={{\n            list: data?.products,\n            configuration: {\n              shape: data?.shape,\n              itemShape: data?.itemShape,\n              primaryButton: data?.primaryButton,\n              event: event,\n              title: data?.title,\n            },\n          }}\n          Slide={MobileItem}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1.2,\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: 2.3,\n            },\n          }}\n        />\n      </div>\n    </>\n  )\n})\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
-  "mappings": "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",
-  "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "isAnimation", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "className", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "Title", "SwiperBox"]
+  "sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n  /** \u6807\u9898\u6587\u672C */\n  title: string\n  /** \u56FE\u7247*/\n  img: Img\n  mobileImg?: Img\n  /** \u5185\u5BB9\u8282\u70B9 */\n  subTitle: string\n  link?: string\n  imgLink?: string\n}\n\nexport type AccordionCardsType = {\n  className?: string\n  data: {\n    key?: string\n    title?: string\n    products: Array<ItemType>\n    /** \u6309\u94AE\u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u5361\u7247\u5F62\u72B6 */\n    itemShape?: 'round' | 'square'\n    /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n    primaryButton?: string\n    theme?: 'light' | 'dark'\n  }\n  /**\n   * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n   */\n  autoplay?: {\n    /**\n     * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n     */\n    enabled: boolean\n    /**\n     * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n     */\n    loop?: boolean\n    /**\n     * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n     */\n    interval?: number\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (_v: any, _index: number) => void\n  }\n}\n\nconst AccordionCardsPcItem = ({\n  item,\n  idx,\n  itemShape,\n  hoverIndex,\n  getRef,\n  handleSwiperItemClick,\n  contentWidth,\n  primaryButton,\n  event,\n  data,\n  accordionRef,\n}: {\n  item: ItemType\n  idx: number\n  itemShape: 'round' | 'square' | undefined\n  hoverIndex: number | null\n  getRef: (_idx: number, _el: HTMLDivElement) => void\n  handleSwiperItemClick: (_idx: number) => void\n  contentWidth: number\n  primaryButton: string | undefined\n  event: any\n  data: AccordionCardsType['data']\n  accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n  const isExpanded = hoverIndex === idx\n  const flexValue = isExpanded ? 8 : 1\n\n  useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n    componentType,\n    componentName,\n    componentTitle: item?.title,\n    position: idx + 1,\n    componentDescription: item?.subTitle,\n  })\n\n  return (\n    <div\n      key={idx}\n      style={{\n        flex: `${flexValue} 1 0%`,\n        transition: 'all 0.6s',\n      }}\n      ref={(el: HTMLDivElement | null) => {\n        if (el) getRef(idx, el)\n      }}\n      className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n      onMouseEnter={() => handleSwiperItemClick(idx)}\n      onClick={() => {\n        handleSwiperItemClick(idx)\n      }}\n    >\n      <a\n        href={trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n      >\n        <Picture\n          source={item?.img?.url}\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          alt={item?.img?.alt || ''}\n        />\n      </a>\n      <div\n        style={{\n          width: contentWidth,\n        }}\n        className={cn(\n          'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n          isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n        )}\n      >\n        <div className=\"mr-16 flex-1 overflow-hidden\">\n          <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n            {item?.title}\n          </Heading>\n          <Heading\n            as=\"h4\"\n            className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n          >\n            {item?.subTitle}\n          </Heading>\n        </div>\n        {primaryButton && (\n          <Button\n            className={cn('mb-1.5 font-bold')}\n            as=\"a\"\n            href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n            onClick={() => event?.primaryButton?.(data, idx)}\n          >\n            {primaryButton}\n            <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    position: configuration?.index + 1,\n    componentDescription: data?.subTitle,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n        configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n      )}\n    >\n      <a\n        href={trackUrlRef(data?.imgLink, `${componentType}_${componentName}`)}\n        data-headless-type-name={`${componentType}#${componentName}`}\n        data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n        data-headless-nav-postion={`''#${configuration?.index + 1}`}\n      >\n        <Picture\n          className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          source={data?.mobileImg?.url || ''}\n          alt={data?.mobileImg?.alt || ''}\n        />\n      </a>\n      <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n        <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n          <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n          <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n        </div>\n\n        {configuration?.primaryButton && (\n          <Button\n            as=\"a\"\n            variant=\"secondary\"\n            aria-label={data?.title ?? data?.subTitle}\n            className={cn('text-info-primary text-sm font-bold')}\n            href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n            data-headless-type-name={`${componentType}#${componentName}`}\n            data-headless-nav-postion={`''#${configuration?.index + 1}`}\n            data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n          >\n            {configuration?.primaryButton}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n  ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event }, ref) => {\n    const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n    const hoverIndexRef = useRef<number>(0)\n    const accordionRef = useRef<HTMLDivElement[]>([])\n    const [contentWidth, setContentWidth] = useState<number>(0)\n\n    const innerRef = useRef<HTMLDivElement>(null)\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    const getRef = (index: number, el: HTMLDivElement) => {\n      if (el) {\n        accordionRef.current[index] = el\n      }\n    }\n\n    useEffect(() => {\n      const handleResize = () => {\n        if (accordionRef.current[hoverIndexRef.current]) {\n          setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n        }\n      }\n      handleResize()\n      const throttleResize = throttle(handleResize, 300)\n      window.addEventListener('resize', throttleResize)\n      return () => window.removeEventListener('resize', throttleResize)\n    }, [])\n\n    const handleSwiperItemClick = useCallback(\n      (idx: number) => {\n        if (hoverIndex === idx) return\n        // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n        setHoverIndex(idx)\n        hoverIndexRef.current = idx\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [data?.products, hoverIndex]\n    )\n\n    useEffect(() => {\n      let autoPlayTimer: NodeJS.Timeout\n      if (autoplay?.enabled) {\n        autoPlayTimer = setInterval(() => {\n          setHoverIndex(prev => {\n            const currentIndex = prev ?? 0\n            let nextIndex: number\n\n            if (autoplay.loop !== false) {\n              // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n              nextIndex = (currentIndex + 1) % data?.products?.length\n            } else {\n              // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n              nextIndex = currentIndex + 1\n              if (nextIndex >= data?.products?.length) {\n                nextIndex = data?.products?.length - 1\n                // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n                if (autoPlayTimer) {\n                  clearInterval(autoPlayTimer)\n                }\n                return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n              }\n            }\n\n            hoverIndexRef.current = nextIndex\n            return nextIndex\n          })\n        }, autoplay?.interval)\n      }\n      return () => {\n        if (autoPlayTimer) {\n          clearInterval(autoPlayTimer)\n        }\n      }\n    }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n    return (\n      <>\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n          <div\n            className={cn(\n              'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n              className\n            )}\n          >\n            {data?.products?.map((item, idx) => (\n              <AccordionCardsPcItem\n                key={idx}\n                item={item}\n                idx={idx}\n                itemShape={data?.itemShape}\n                hoverIndex={hoverIndex}\n                getRef={getRef}\n                handleSwiperItemClick={handleSwiperItemClick}\n                contentWidth={contentWidth}\n                primaryButton={data?.primaryButton}\n                event={event}\n                data={data}\n                accordionRef={accordionRef}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n          <SwiperBox\n            className={cn('h-[400px] !overflow-visible', className)}\n            id={'AccordionCards' + data?.key}\n            data={{\n              list: data?.products,\n              configuration: {\n                shape: data?.shape,\n                itemShape: data?.itemShape,\n                primaryButton: data?.primaryButton,\n                event: event,\n                title: data?.title,\n              },\n            }}\n            Slide={MobileItem}\n            breakpoints={{\n              0: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1,\n              },\n              374: {\n                spaceBetween: 12,\n                freeMode: false,\n                slidesPerView: 1.2,\n              },\n              768: {\n                spaceBetween: 16,\n                freeMode: false,\n                slidesPerView: 2.3,\n              },\n            }}\n          />\n        </div>\n      </>\n    )\n  }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
+  "mappings": "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",
+  "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "autoplay", "className", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "Title", "SwiperBox"]
 }

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

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