@anker-in/headless-ui 1.1.17-alpha.1766385794881 → 1.1.17-alpha.1766563773661

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

@@ -1,15 +1,26 @@
 import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * 导航项对齐方向样式变体
+ */
+declare const anchorNavigationVariants: (props?: ({
+    alignment?: "end" | "start" | "center" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * AnchorNavigation 业务组件数据接口
  */
 export interface AnchorNavigationData {
     /** 锚点列表 */
     sectionIds: {
-        id: string;
+        targetId: string;
         label: string;
     }[];
+    /** 导航项水平对齐方式 */
+    alignment?: 'start' | 'center' | 'end';
+    /** 主题模式 */
+    theme?: 'light' | 'dark';
 }
-export interface AnchorNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface AnchorNavigationProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {
     /** 业务数据 */
     data: AnchorNavigationData;
 }

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var R=Object.create;var l=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var o in e)l(t,o,{get:e[o],enumerable:!0})},p=(t,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of I(e))!T.call(t,r)&&r!==o&&l(t,r,{get:()=>e[r],enumerable:!(c=x(e,r))||c.enumerable});return t};var v=(t,e,o)=>(o=t!=null?R(L(t)):{},p(e||!t||!t.__esModule?l(o,"default",{value:t,enumerable:!0}):o,t)),y=t=>p(l({},"__esModule",{value:!0}),t);var D={};w(D,{default:()=>C});module.exports=y(D);var s=require("react/jsx-runtime"),f=v(require("react")),b=require("../../helpers/utils.js"),g=require("../../components/container.js"),A=v(require("./useAnchorPosition.js"));const h=f.forwardRef(({className:t,data:e,...o},c)=>{const r=(0,A.default)(e.sectionIds?.map(n=>n.id)||[]),d=f.useRef(null),m=f.useRef([]),N=f.useCallback(n=>{const i=m.current[n];if(i&&d.current){const a=d.current,u=i,k=u.offsetLeft-a.offsetWidth/2+u.offsetWidth/2;a.scrollTo({left:k,behavior:"smooth"})}},[]);return(0,s.jsx)("div",{ref:c,className:(0,b.cn)("sticky top-0 z-10 w-full bg-white",t),...o,children:(0,s.jsx)(g.Container,{children:(0,s.jsx)("div",{ref:d,className:"anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden",children:e.sectionIds?.map((n,i)=>(0,s.jsx)("button",{ref:a=>{a&&(m.current[i]=a)},onClick:()=>{N(i),document.getElementById(n.id)?.scrollIntoView({behavior:"smooth"})},className:(0,b.cn)("anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold text-[#4A4C56]",{"border-b-brand text-[#080A0F]":r===n.id}),children:n.label},n.id))})})})});h.displayName="AnchorNavigation";var C=h;
+"use strict";"use client";var R=Object.create;var d=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var T=(t,e)=>{for(var n in e)d(t,n,{get:e[n],enumerable:!0})},p=(t,e,n,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of w(e))!L.call(t,a)&&a!==n&&d(t,a,{get:()=>e[a],enumerable:!(l=V(e,a))||l.enumerable});return t};var A=(t,e,n)=>(n=t!=null?R(D(t)):{},p(e||!t||!t.__esModule?d(n,"default",{value:t,enumerable:!0}):n,t)),E=t=>p(d({},"__esModule",{value:!0}),t);var P={};T(P,{default:()=>M});module.exports=E(P);var c=require("react/jsx-runtime"),m=A(require("react")),g=require("../../helpers/utils.js"),I=require("../../components/container.js"),u=require("class-variance-authority"),N=A(require("./useAnchorPosition.js"));const C=(0,u.cva)("anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden",{variants:{alignment:{start:"justify-start",center:"justify-center",end:"justify-end"}},defaultVariants:{alignment:"start"}}),H=(0,u.cva)("sticky top-0 z-10 w-full",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),k=m.forwardRef(({className:t,data:e,...n},l)=>{const{alignment:a="start",theme:b="light"}=e,y=(0,N.default)(e.sectionIds?.map(r=>r.targetId)||[]),h=m.useRef(null),v=m.useRef([]),x=m.useCallback(r=>{const s=v.current[r];if(s&&h.current){const o=h.current,i=s,f=i.offsetLeft-o.offsetWidth/2+i.offsetWidth/2;o.scrollTo({left:f,behavior:"smooth"})}},[]);return(0,c.jsx)("div",{ref:l,className:(0,g.cn)(H({theme:b}),t),...n,children:(0,c.jsx)(I.Container,{children:(0,c.jsx)("div",{ref:h,className:(0,g.cn)(C({alignment:a})),children:e.sectionIds?.map((r,s)=>{const o=y===r.targetId,i=b==="dark";return(0,c.jsx)("button",{ref:f=>{f&&(v.current[s]=f)},onClick:()=>{x(s),document.getElementById(r.targetId)?.scrollIntoView({behavior:"smooth"})},className:(0,g.cn)("anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold",{"text-[#4A4C56]":!i&&!o,"border-b-brand text-[#080A0F]":!i&&o,"text-[#8A8D92]":i&&!o,"border-b-brand text-white":i&&o}),children:r.label},r.targetId)})})})})});k.displayName="AnchorNavigation";var M=k;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/AnchorNavigation/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Container } from '../../components/container.js'\nimport useAnchorPosition from './useAnchorPosition.js'\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n  /** \u951A\u70B9\u5217\u8868 */\n  sectionIds: {\n    id: string\n    label: string\n  }[]\n}\n\nexport interface AnchorNavigationProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: AnchorNavigationData\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n  ({ className, data, ...props }, ref) => {\n    const activeId = useAnchorPosition(data.sectionIds?.map(item => item.id) || [])\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n    const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n      const curRef = sectionRefs.current[activeIdIndex]\n\n      if (curRef && containerRef.current) {\n        const container = containerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    }, [])\n\n    return (\n      <div ref={ref} className={cn('sticky top-0 z-10 w-full bg-white', className)} {...props}>\n        <Container>\n          <div\n            ref={containerRef}\n            className=\"anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden\"\n          >\n            {data.sectionIds?.map((item, index) => (\n              <button\n                key={item.id}\n                ref={el => {\n                  if (el) {\n                    sectionRefs.current[index] = el\n                  }\n                }}\n                onClick={() => {\n                  autoScrollToActiveItem(index)\n                  document.getElementById(item.id)?.scrollIntoView({ behavior: 'smooth' })\n                }}\n                className={cn(\n                  'anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold text-[#4A4C56]',\n                  {\n                    'border-b-brand text-[#080A0F]': activeId === item.id,\n                  }\n                )}\n              >\n                {item.label}\n              </button>\n            ))}\n          </div>\n        </Container>\n      </div>\n    )\n  }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwDc,IAAAI,EAAA,6BAtDdC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA0B,yCAC1BC,EAA8B,qCAsB9B,MAAMC,EAAmBJ,EAAM,WAC7B,CAAC,CAAE,UAAAK,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACtC,MAAMC,KAAW,EAAAC,SAAkBJ,EAAK,YAAY,IAAIK,GAAQA,EAAK,EAAE,GAAK,CAAC,CAAC,EACxEC,EAAeZ,EAAM,OAAuB,IAAI,EAChDa,EAAcb,EAAM,OAA4B,CAAC,CAAC,EAElDc,EAAyBd,EAAM,YAAae,GAA0B,CAC1E,MAAMC,EAASH,EAAY,QAAQE,CAAa,EAEhD,GAAIC,GAAUJ,EAAa,QAAS,CAClC,MAAMK,EAAYL,EAAa,QACzBM,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OAAI,IAAKX,EAAK,aAAW,MAAG,oCAAqCH,CAAS,EAAI,GAAGE,EAChF,mBAAC,aACC,mBAAC,OACC,IAAKK,EACL,UAAU,gHAET,SAAAN,EAAK,YAAY,IAAI,CAACK,EAAMS,OAC3B,OAAC,UAEC,IAAKC,GAAM,CACLA,IACFR,EAAY,QAAQO,CAAK,EAAIC,EAEjC,EACA,QAAS,IAAM,CACbP,EAAuBM,CAAK,EAC5B,SAAS,eAAeT,EAAK,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,CACzE,EACA,aAAW,MACT,uHACA,CACE,gCAAiCF,IAAaE,EAAK,EACrD,CACF,EAEC,SAAAA,EAAK,OAjBDA,EAAK,EAkBZ,CACD,EACH,EACF,EACF,CAEJ,CACF,EAEAP,EAAiB,YAAc,mBAC/B,IAAOP,EAAQO",
-  "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_container", "import_useAnchorPosition", "AnchorNavigation", "className", "data", "props", "ref", "activeId", "useAnchorPosition", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { Container } from '../../components/container.js'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport useAnchorPosition from './useAnchorPosition.js'\n\n/**\n * \u5BFC\u822A\u9879\u5BF9\u9F50\u65B9\u5411\u6837\u5F0F\u53D8\u4F53\n */\nconst anchorNavigationVariants = cva(\n  'anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden',\n  {\n    variants: {\n      alignment: {\n        start: 'justify-start',\n        center: 'justify-center',\n        end: 'justify-end',\n      },\n    },\n    defaultVariants: {\n      alignment: 'start',\n    },\n  }\n)\n\n/**\n * \u5BB9\u5668\u4E3B\u9898\u6837\u5F0F\u53D8\u4F53\n */\nconst containerVariants = cva('sticky top-0 z-10 w-full', {\n  variants: {\n    theme: {\n      light: 'bg-white',\n      dark: 'bg-[#1E2024]',\n    },\n  },\n  defaultVariants: {\n    theme: 'light',\n  },\n})\n\n/**\n * AnchorNavigation \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface AnchorNavigationData {\n  /** \u951A\u70B9\u5217\u8868 */\n  sectionIds: {\n    targetId: string\n    label: string\n  }[]\n  /** \u5BFC\u822A\u9879\u6C34\u5E73\u5BF9\u9F50\u65B9\u5F0F */\n  alignment?: 'start' | 'center' | 'end'\n  /** \u4E3B\u9898\u6A21\u5F0F */\n  theme?: 'light' | 'dark'\n}\n\nexport interface AnchorNavigationProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof anchorNavigationVariants> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: AnchorNavigationData\n}\n\n/**\n * AnchorNavigation - \u951A\u70B9\u5BFC\u822A\n *\n * @description \u951A\u70B9\u5BFC\u822A\n */\nconst AnchorNavigation = React.forwardRef<HTMLDivElement, AnchorNavigationProps>(\n  ({ className, data, ...props }, ref) => {\n    const { alignment = 'start', theme = 'light' } = data\n    const activeId = useAnchorPosition(data.sectionIds?.map(item => item.targetId) || [])\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const sectionRefs = React.useRef<HTMLButtonElement[]>([])\n\n    const autoScrollToActiveItem = React.useCallback((activeIdIndex: number) => {\n      const curRef = sectionRefs.current[activeIdIndex]\n\n      if (curRef && containerRef.current) {\n        const container = containerRef.current\n        const button = curRef\n        const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n        container.scrollTo({\n          left: scrollLeft,\n          behavior: 'smooth',\n        })\n      }\n    }, [])\n\n    return (\n      <div ref={ref} className={cn(containerVariants({ theme }), className)} {...props}>\n        <Container>\n          <div ref={containerRef} className={cn(anchorNavigationVariants({ alignment }))}>\n            {data.sectionIds?.map((item, index) => {\n              const isActive = activeId === item.targetId\n              const isDark = theme === 'dark'\n\n              return (\n                <button\n                  key={item.targetId}\n                  ref={el => {\n                    if (el) {\n                      sectionRefs.current[index] = el\n                    }\n                  }}\n                  onClick={() => {\n                    autoScrollToActiveItem(index)\n                    document.getElementById(item.targetId)?.scrollIntoView({ behavior: 'smooth' })\n                  }}\n                  className={cn(\n                    'anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold',\n                    {\n                      // Light theme colors\n                      'text-[#4A4C56]': !isDark && !isActive,\n                      'border-b-brand text-[#080A0F]': !isDark && isActive,\n                      // Dark theme colors\n                      'text-[#8A8D92]': isDark && !isActive,\n                      'border-b-brand text-white': isDark && isActive,\n                    }\n                  )}\n                >\n                  {item.label}\n                </button>\n              )\n            })}\n          </div>\n        </Container>\n      </div>\n    )\n  }\n)\n\nAnchorNavigation.displayName = 'AnchorNavigation'\nexport default AnchorNavigation\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmGgB,IAAAI,EAAA,6BAjGhBC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA0B,yCAC1BC,EAAuC,oCACvCC,EAA8B,qCAK9B,MAAMC,KAA2B,OAC/B,gHACA,CACE,SAAU,CACR,UAAW,CACT,MAAO,gBACP,OAAQ,iBACR,IAAK,aACP,CACF,EACA,gBAAiB,CACf,UAAW,OACb,CACF,CACF,EAKMC,KAAoB,OAAI,2BAA4B,CACxD,SAAU,CACR,MAAO,CACL,MAAO,WACP,KAAM,cACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EA4BKC,EAAmBP,EAAM,WAC7B,CAAC,CAAE,UAAAQ,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACtC,KAAM,CAAE,UAAAC,EAAY,QAAS,MAAAC,EAAQ,OAAQ,EAAIJ,EAC3CK,KAAW,EAAAC,SAAkBN,EAAK,YAAY,IAAIO,GAAQA,EAAK,QAAQ,GAAK,CAAC,CAAC,EAC9EC,EAAejB,EAAM,OAAuB,IAAI,EAChDkB,EAAclB,EAAM,OAA4B,CAAC,CAAC,EAElDmB,EAAyBnB,EAAM,YAAaoB,GAA0B,CAC1E,MAAMC,EAASH,EAAY,QAAQE,CAAa,EAEhD,GAAIC,GAAUJ,EAAa,QAAS,CAClC,MAAMK,EAAYL,EAAa,QACzBM,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAEL,SACE,OAAC,OAAI,IAAKb,EAAK,aAAW,MAAGL,EAAkB,CAAE,MAAAO,CAAM,CAAC,EAAGL,CAAS,EAAI,GAAGE,EACzE,mBAAC,aACC,mBAAC,OAAI,IAAKO,EAAc,aAAW,MAAGZ,EAAyB,CAAE,UAAAO,CAAU,CAAC,CAAC,EAC1E,SAAAH,EAAK,YAAY,IAAI,CAACO,EAAMS,IAAU,CACrC,MAAMC,EAAWZ,IAAaE,EAAK,SAC7BW,EAASd,IAAU,OAEzB,SACE,OAAC,UAEC,IAAKe,GAAM,CACLA,IACFV,EAAY,QAAQO,CAAK,EAAIG,EAEjC,EACA,QAAS,IAAM,CACbT,EAAuBM,CAAK,EAC5B,SAAS,eAAeT,EAAK,QAAQ,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,CAC/E,EACA,aAAW,MACT,wGACA,CAEE,iBAAkB,CAACW,GAAU,CAACD,EAC9B,gCAAiC,CAACC,GAAUD,EAE5C,iBAAkBC,GAAU,CAACD,EAC7B,4BAA6BC,GAAUD,CACzC,CACF,EAEC,SAAAV,EAAK,OAtBDA,EAAK,QAuBZ,CAEJ,CAAC,EACH,EACF,EACF,CAEJ,CACF,EAEAT,EAAiB,YAAc,mBAC/B,IAAOV,EAAQU",
+  "names": ["AnchorNavigation_exports", "__export", "AnchorNavigation_default", "__toCommonJS", "import_jsx_runtime", "React", "import_utils", "import_container", "import_class_variance_authority", "import_useAnchorPosition", "anchorNavigationVariants", "containerVariants", "AnchorNavigation", "className", "data", "props", "ref", "alignment", "theme", "activeId", "useAnchorPosition", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "isActive", "isDark", "el"]
 }

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

@@ -1,16 +1,37 @@
 import * as React from 'react';
+export type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard';
+/**
+ * 响应式背景图片配置
+ */
+export interface ResponsiveBackgroundImage {
+    /** 移动端图片 (<1024px) */
+    mobile?: string;
+    /** 笔记本图片 (1025-1440px) */
+    laptop?: string;
+    /** 桌面图片 (1441-1920px) */
+    desktop?: string;
+    /** 超大桌面图片 (≥1921px) */
+    lgDesktop?: string;
+}
+/**
+ * 状态化背景图片配置
+ */
+export interface StateBackgroundImage {
+    /** 激活状态的背景图片 */
+    active: string | ResponsiveBackgroundImage;
+    /** 非激活状态的背景图片 */
+    inactive: string | ResponsiveBackgroundImage;
+}
 /**
  * 活动日程项数据接口
  */
 export interface EventScheduleItem {
     /** 标题 */
     title: string;
-    /** 日期 */
-    date: string;
-    /** 是否激活状态 */
-    active: boolean;
-    /** 背景图片 URL */
-    backgroundImage?: string;
+    /** 开始日期（ISO 8601 格式或任何 dayjs 支持的格式，如 '2024-12-01'） */
+    startDate: string;
+    /** 结束日期（ISO 8601 格式或任何 dayjs 支持的格式，如 '2024-12-31'） */
+    endDate: string;
     /** 详细信息列表 */
     items: {
         /** 图标 (SVG 字符串或 URL) */
@@ -25,10 +46,58 @@ export interface EventScheduleItem {
 export interface EventScheduleData {
     /** 日程列表 */
     scheduleList: EventScheduleItem[];
+    /**
+     * 背景图片配置，支持响应式图片和状态化图片
+     * 可以传入：
+     * 1. 字符串（单一图片URL）
+     * 2. ResponsiveBackgroundImage（多尺寸图片）
+     * 3. StateBackgroundImage（激活/非激活状态图片）
+     *
+     * @example
+     * // 单一图片
+     * backgroundImage: "https://example.com/image.jpg"
+     *
+     * @example
+     * // 响应式图片
+     * backgroundImage: {
+     *   mobile: "https://example.com/mobile.jpg",
+     *   laptop: "https://example.com/laptop.jpg",
+     *   desktop: "https://example.com/desktop.jpg",
+     *   lgDesktop: "https://example.com/lg-desktop.jpg"
+     * }
+     *
+     * @example
+     * // 状态化图片（单一URL）
+     * backgroundImage: {
+     *   active: "https://example.com/active.jpg",
+     *   inactive: "https://example.com/inactive.jpg"
+     * }
+     *
+     * @example
+     * // 状态化 + 响应式图片
+     * backgroundImage: {
+     *   active: {
+     *     mobile: "https://example.com/active-mobile.jpg",
+     *     laptop: "https://example.com/active-laptop.jpg",
+     *     desktop: "https://example.com/active-desktop.jpg",
+     *     lgDesktop: "https://example.com/active-lg-desktop.jpg"
+     *   },
+     *   inactive: {
+     *     mobile: "https://example.com/inactive-mobile.jpg",
+     *     laptop: "https://example.com/inactive-laptop.jpg",
+     *     desktop: "https://example.com/inactive-desktop.jpg",
+     *     lgDesktop: "https://example.com/inactive-lg-desktop.jpg"
+     *   }
+     * }
+     */
+    backgroundImage?: string | ResponsiveBackgroundImage | StateBackgroundImage;
+    /** 是否显示时间轴，默认为 true */
+    showTimeline?: boolean;
 }
 export interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 业务数据 */
     data: EventScheduleData;
+    classNames?: Partial<Record<EventScheduleSemanticName, string>>;
 }
 /**
  * EventSchedule - 活动日程组件

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

@@ -1,2 +1,2 @@
-"use strict";"use client";var v=Object.create;var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var E=(e,l)=>{for(var a in l)n(e,a,{get:l[a],enumerable:!0})},o=(e,l,a,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of u(l))!x.call(e,s)&&s!==a&&n(e,s,{get:()=>l[s],enumerable:!(r=p(l,s))||r.enumerable});return e};var h=(e,l,a)=>(a=e!=null?v(f(e)):{},o(l||!e||!e.__esModule?n(a,"default",{value:e,enumerable:!0}):a,e)),b=e=>o(n({},"__esModule",{value:!0}),e);var k={};E(k,{default:()=>S});module.exports=b(k);var t=require("react/jsx-runtime"),g=h(require("react")),i=require("../../helpers/index.js"),d=require("../../components/index.js"),c=require("swiper/react");const N=({active:e})=>(0,t.jsxs)("div",{className:"relative flex h-2 flex-1 items-center justify-center",children:[(0,t.jsx)("div",{className:(0,i.cn)("h-2 w-full",{"bg-[#F6CD4E]":e,"bg-[#EAEAEC]":!e})}),(0,t.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,t.jsx)("div",{className:(0,i.cn)("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),C=({scheduleList:e})=>(0,t.jsx)("div",{className:"relative flex h-4 w-full items-center",children:(0,t.jsx)("div",{className:"flex h-2 w-full items-center gap-4 bg-[#EAEAEC]",children:e.map(l=>(0,t.jsx)(N,{active:l.active},l.date))})}),w=({item:e})=>(0,t.jsxs)("div",{className:(0,i.cn)("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden bg-[#F4E8BC] p-4"),children:[e.backgroundImage&&(0,t.jsx)("div",{className:"pointer-events-none absolute inset-0 overflow-hidden",children:(0,t.jsx)(d.Picture,{source:e.backgroundImage,alt:"",className:"absolute right-0 top-[9.69%] h-[91.29%] w-auto max-w-none"})}),(0,t.jsx)("div",{className:"relative z-10",children:(0,t.jsx)("h2",{className:(0,i.cn)("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]"),children:e.title})}),(0,t.jsx)("div",{className:"relative z-10 flex flex-col gap-0.5",children:e.items.map((l,a)=>(0,t.jsxs)("div",{className:"flex items-center gap-2",children:[l.icon&&(0,t.jsx)("div",{className:"desktop:size-6 size-5 shrink-0",children:(0,t.jsx)(d.Picture,{source:l.icon,alt:"",className:"size-full"})}),(0,t.jsx)(d.Text,{html:l.label,className:(0,i.cn)("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},a))})]}),m=g.forwardRef(({className:e,data:l,...a},r)=>(0,t.jsx)("div",{ref:r,className:(0,i.cn)("desktop:px-16 laptop:px-16 tablet:px-8 w-full px-4",e),...a,children:(0,t.jsx)("div",{className:"flex w-full flex-col gap-4",children:(0,t.jsx)(c.Swiper,{spaceBetween:12,slidesPerView:1,className:"w-full",children:l.scheduleList.map(s=>(0,t.jsx)(c.SwiperSlide,{children:(0,t.jsx)(w,{item:s})},s.date))})})}));m.displayName="EventSchedule";var S=m;
+"use strict";"use client";var B=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var s in t)c(e,s,{get:t[s],enumerable:!0})},v=(e,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!b.call(e,n)&&n!==s&&c(e,n,{get:()=>t[n],enumerable:!(a=E(t,n))||a.enumerable});return e};var w=(e,t,s)=>(s=e!=null?B(k(e)):{},v(t||!e||!e.__esModule?c(s,"default",{value:e,enumerable:!0}):s,e)),P=e=>v(c({},"__esModule",{value:!0}),e);var L={};I(L,{default:()=>C});module.exports=P(L);var i=require("react/jsx-runtime"),d=w(require("react")),l=require("../../helpers/index.js"),p=require("../../components/index.js"),m=require("swiper/react"),u=w(require("dayjs"));const R=(e,t)=>{const s=(0,u.default)(),a=(0,u.default)(e).startOf("day"),n=(0,u.default)(t).endOf("day");return s.isAfter(a)&&s.isBefore(n)},V=e=>R(e.startDate,e.endDate),y=({active:e,className:t})=>(0,i.jsxs)("div",{className:(0,l.cn)("relative my-1 flex h-2 flex-1 items-center justify-center",t),children:[(0,i.jsx)("div",{className:(0,l.cn)("h-2 w-full ",{"bg-[#F6CD4E] rounded-full":e,"bg-[#EAEAEC]":!e})}),(0,i.jsx)("div",{className:"absolute inset-0 flex items-center justify-center",children:(0,i.jsx)("div",{className:(0,l.cn)("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),D=e=>typeof e=="object"&&("active"in e||"inactive"in e),h=e=>{if(!e)return;if(typeof e=="string")return e;const{mobile:t,laptop:s,desktop:a,lgDesktop:n}=e,r=[];return n&&r.push(n),a&&r.push(`${a} 1920`),s&&r.push(`${s} 1440`),t&&r.push(`${t} 1024`),r.length>0?r.join(", "):void 0},A=(e,t)=>{if(e){if(D(e)){const s=t?e.active:e.inactive;return h(s)}return h(e)}},T=({active:e,item:t,backgroundImage:s,className:a})=>{const n=d.useMemo(()=>A(s,e),[s,e]);return(0,i.jsxs)("div",{className:(0,l.cn)("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden",a),children:[(0,i.jsx)(p.Picture,{source:n,alt:"",className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"}),(0,i.jsxs)("div",{className:"relative z-20 size-full p-4",children:[(0,i.jsx)("h2",{className:(0,l.cn)("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]"),dangerouslySetInnerHTML:{__html:t.title}}),(0,i.jsx)("div",{className:"flex flex-col gap-0.5",children:t.items.map((r,o)=>(0,i.jsxs)("div",{className:"flex items-center gap-2",children:[r.icon&&(0,i.jsx)("div",{className:"desktop:size-6 size-5 shrink-0",children:(0,i.jsx)("img",{src:r.icon,alt:"",className:"size-full"})}),(0,i.jsx)(p.Text,{html:r.label,className:(0,l.cn)("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},o))})]})]})},x=d.forwardRef(({classNames:e={},data:t,...s},a)=>{const n=d.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),r=d.useMemo(()=>{switch(n){case 2:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2},1024:{spaceBetween:16},1440:{spaceBetween:16,slidesPerView:2}};case 3:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:n,spaceBetween:16},1440:{spaceBetween:16,slidesPerView:n}};case 4:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:3.2,spaceBetween:16},1440:{slidesPerView:n}};default:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:1},1024:{slidesPerView:n,spaceBetween:16},1440:{slidesPerView:n}}}},[n]),o=t.showTimeline!==!1;return(0,i.jsx)("div",{ref:a,className:(0,l.cn)("desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4",e?.root),...s,children:(0,i.jsx)("div",{className:"flex w-full flex-col gap-4",children:(0,i.jsx)(m.Swiper,{breakpoints:r,className:"w-full !overflow-visible",children:t.scheduleList.map((g,S)=>{const f=V(g);return(0,i.jsxs)(m.SwiperSlide,{children:[o&&(0,i.jsx)(y,{active:f}),(0,i.jsx)(T,{active:f,className:o?"mt-4":"",item:g,backgroundImage:t.backgroundImage})]},"SwiperSlideItem"+S)})})})})});x.displayName="EventSchedule";var C=x;
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/EventSchedule/index.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n  /** \u6807\u9898 */\n  title: string\n  /** \u65E5\u671F */\n  date: string\n  /** \u662F\u5426\u6FC0\u6D3B\u72B6\u6001 */\n  active: boolean\n  /** \u80CC\u666F\u56FE\u7247 URL */\n  backgroundImage?: string\n  /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n  items: {\n    /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n    icon: React.ReactNode\n    /** \u6587\u672C\u5185\u5BB9 */\n    label: string\n  }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n  /** \u65E5\u7A0B\u5217\u8868 */\n  scheduleList: EventScheduleItem[]\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: EventScheduleData\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active }: { active: boolean }) => {\n  return (\n    <div className=\"relative flex h-2 flex-1 items-center justify-center\">\n      {/* \u8FDB\u5EA6\u6761 */}\n      <div\n        className={cn('h-2 w-full', {\n          'bg-[#F6CD4E]': active,\n          'bg-[#EAEAEC]': !active,\n        })}\n      />\n      {/* \u65F6\u95F4\u8282\u70B9 */}\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <div\n          className={cn('size-4 rounded-full border-2 transition-colors', {\n            'border-[#F6CD4E] bg-[#F6CD4E]': active,\n            'border-[#EAEAEC] bg-[#EAEAEC]': !active,\n          })}\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u65F6\u95F4\u8F74\u7EC4\u4EF6\n */\nconst Timeline = ({ scheduleList }: { scheduleList: EventScheduleItem[] }) => {\n  return (\n    <div className=\"relative flex h-4 w-full items-center\">\n      <div className=\"flex h-2 w-full items-center gap-4 bg-[#EAEAEC]\">\n        {scheduleList.map(item => (\n          <TimelineNode key={item.date} active={item.active} />\n        ))}\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({ item }: { item: EventScheduleItem }) => {\n  return (\n    <div\n      className={cn(\n        'rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden bg-[#F4E8BC] p-4'\n      )}\n    >\n      {/* \u80CC\u666F\u88C5\u9970\u56FE */}\n      {item.backgroundImage && (\n        <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n          <Picture\n            source={item.backgroundImage}\n            alt=\"\"\n            className=\"absolute right-0 top-[9.69%] h-[91.29%] w-auto max-w-none\"\n          />\n        </div>\n      )}\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"relative z-10\">\n        <h2 className={cn('desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]')}>{item.title}</h2>\n      </div>\n\n      {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n      <div className=\"relative z-10 flex flex-col gap-0.5\">\n        {item.items.map((detail, index) => (\n          <div key={index} className=\"flex items-center gap-2\">\n            {/* \u56FE\u6807 */}\n            {detail.icon && (\n              <div className=\"desktop:size-6 size-5 shrink-0\">\n                <Picture source={detail.icon as string} alt=\"\" className=\"size-full\" />\n              </div>\n            )}\n            {/* \u6587\u672C */}\n            <Text\n              html={detail.label}\n              className={cn('desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]')}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(({ className, data, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn('desktop:px-16 laptop:px-16 tablet:px-8 w-full px-4', className)} {...props}>\n      <div className=\"flex w-full flex-col gap-4\">\n        {/* \u65F6\u95F4\u8F74 */}\n        {/* <Timeline scheduleList={data.scheduleList} /> */}\n        <Swiper spaceBetween={12} slidesPerView={1} className=\"w-full\">\n          {data.scheduleList.map(item => (\n            <SwiperSlide key={item.date}>\n              <EventScheduleCard item={item} />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </div>\n  )\n})\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8CI,IAAAI,EAAA,6BA5CJC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAAoC,wBAuCpC,MAAMC,EAAe,CAAC,CAAE,OAAAC,CAAO,OAE3B,QAAC,OAAI,UAAU,uDAEb,oBAAC,OACC,aAAW,MAAG,aAAc,CAC1B,eAAgBA,EAChB,eAAgB,CAACA,CACnB,CAAC,EACH,KAEA,OAAC,OAAI,UAAU,oDACb,mBAAC,OACC,aAAW,MAAG,iDAAkD,CAC9D,gCAAiCA,EACjC,gCAAiC,CAACA,CACpC,CAAC,EACH,EACF,GACF,EAOEC,EAAW,CAAC,CAAE,aAAAC,CAAa,OAE7B,OAAC,OAAI,UAAU,wCACb,mBAAC,OAAI,UAAU,kDACZ,SAAAA,EAAa,IAAIC,MAChB,OAACJ,EAAA,CAA6B,OAAQI,EAAK,QAAxBA,EAAK,IAA2B,CACpD,EACH,EACF,EAOEC,EAAoB,CAAC,CAAE,KAAAD,CAAK,OAE9B,QAAC,OACC,aAAW,MACT,qIACF,EAGC,UAAAA,EAAK,oBACJ,OAAC,OAAI,UAAU,uDACb,mBAAC,WACC,OAAQA,EAAK,gBACb,IAAI,GACJ,UAAU,4DACZ,EACF,KAIF,OAAC,OAAI,UAAU,gBACb,mBAAC,MAAG,aAAW,MAAG,wEAAwE,EAAI,SAAAA,EAAK,MAAM,EAC3G,KAGA,OAAC,OAAI,UAAU,sCACZ,SAAAA,EAAK,MAAM,IAAI,CAACE,EAAQC,OACvB,QAAC,OAAgB,UAAU,0BAExB,UAAAD,EAAO,SACN,OAAC,OAAI,UAAU,iCACb,mBAAC,WAAQ,OAAQA,EAAO,KAAgB,IAAI,GAAG,UAAU,YAAY,EACvE,KAGF,OAAC,QACC,KAAMA,EAAO,MACb,aAAW,MAAG,+EAA+E,EAC/F,IAXQC,CAYV,CACD,EACH,GACF,EASEC,EAAgBZ,EAAM,WAA+C,CAAC,CAAE,UAAAa,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,OAEvG,OAAC,OAAI,IAAKA,EAAK,aAAW,MAAG,qDAAsDH,CAAS,EAAI,GAAGE,EACjG,mBAAC,OAAI,UAAU,6BAGb,mBAAC,UAAO,aAAc,GAAI,cAAe,EAAG,UAAU,SACnD,SAAAD,EAAK,aAAa,IAAIN,MACrB,OAAC,eACC,mBAACC,EAAA,CAAkB,KAAMD,EAAM,GADfA,EAAK,IAEvB,CACD,EACH,EACF,EACF,CAEH,EAEDI,EAAc,YAAc,gBAC5B,IAAOf,EAAQe",
-  "names": ["EventSchedule_exports", "__export", "EventSchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_react", "TimelineNode", "active", "Timeline", "scheduleList", "item", "EventScheduleCard", "detail", "index", "EventSchedule", "className", "data", "props", "ref"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text, Picture } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport dayjs from 'dayjs'\n\nexport type EventScheduleSemanticName = 'root' | 'timeline' | 'eventScheduleCard'\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<1024px) */\n  mobile?: string\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: string\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: string\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: string\n}\n\n/**\n * \u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface StateBackgroundImage {\n  /** \u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n  active: string | ResponsiveBackgroundImage\n  /** \u975E\u6FC0\u6D3B\u72B6\u6001\u7684\u80CC\u666F\u56FE\u7247 */\n  inactive: string | ResponsiveBackgroundImage\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u9879\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleItem {\n  /** \u6807\u9898 */\n  title: string\n  /** \u5F00\u59CB\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-01'\uFF09 */\n  startDate: string\n  /** \u7ED3\u675F\u65E5\u671F\uFF08ISO 8601 \u683C\u5F0F\u6216\u4EFB\u4F55 dayjs \u652F\u6301\u7684\u683C\u5F0F\uFF0C\u5982 '2024-12-31'\uFF09 */\n  endDate: string\n  /** \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */\n  items: {\n    /** \u56FE\u6807 (SVG \u5B57\u7B26\u4E32\u6216 URL) */\n    icon: React.ReactNode\n    /** \u6587\u672C\u5185\u5BB9 */\n    label: string\n  }[]\n}\n\n/**\n * EventSchedule \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface EventScheduleData {\n  /** \u65E5\u7A0B\u5217\u8868 */\n  scheduleList: EventScheduleItem[]\n  /**\n   * \u80CC\u666F\u56FE\u7247\u914D\u7F6E\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u56FE\u7247\u548C\u72B6\u6001\u5316\u56FE\u7247\n   * \u53EF\u4EE5\u4F20\u5165\uFF1A\n   * 1. \u5B57\u7B26\u4E32\uFF08\u5355\u4E00\u56FE\u7247URL\uFF09\n   * 2. ResponsiveBackgroundImage\uFF08\u591A\u5C3A\u5BF8\u56FE\u7247\uFF09\n   * 3. StateBackgroundImage\uFF08\u6FC0\u6D3B/\u975E\u6FC0\u6D3B\u72B6\u6001\u56FE\u7247\uFF09\n   *\n   * @example\n   * // \u5355\u4E00\u56FE\u7247\n   * backgroundImage: \"https://example.com/image.jpg\"\n   *\n   * @example\n   * // \u54CD\u5E94\u5F0F\u56FE\u7247\n   * backgroundImage: {\n   *   mobile: \"https://example.com/mobile.jpg\",\n   *   laptop: \"https://example.com/laptop.jpg\",\n   *   desktop: \"https://example.com/desktop.jpg\",\n   *   lgDesktop: \"https://example.com/lg-desktop.jpg\"\n   * }\n   *\n   * @example\n   * // \u72B6\u6001\u5316\u56FE\u7247\uFF08\u5355\u4E00URL\uFF09\n   * backgroundImage: {\n   *   active: \"https://example.com/active.jpg\",\n   *   inactive: \"https://example.com/inactive.jpg\"\n   * }\n   *\n   * @example\n   * // \u72B6\u6001\u5316 + \u54CD\u5E94\u5F0F\u56FE\u7247\n   * backgroundImage: {\n   *   active: {\n   *     mobile: \"https://example.com/active-mobile.jpg\",\n   *     laptop: \"https://example.com/active-laptop.jpg\",\n   *     desktop: \"https://example.com/active-desktop.jpg\",\n   *     lgDesktop: \"https://example.com/active-lg-desktop.jpg\"\n   *   },\n   *   inactive: {\n   *     mobile: \"https://example.com/inactive-mobile.jpg\",\n   *     laptop: \"https://example.com/inactive-laptop.jpg\",\n   *     desktop: \"https://example.com/inactive-desktop.jpg\",\n   *     lgDesktop: \"https://example.com/inactive-lg-desktop.jpg\"\n   *   }\n   * }\n   */\n  backgroundImage?: string | ResponsiveBackgroundImage | StateBackgroundImage\n  /** \u662F\u5426\u663E\u793A\u65F6\u95F4\u8F74\uFF0C\u9ED8\u8BA4\u4E3A true */\n  showTimeline?: boolean\n}\n\nexport interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: EventScheduleData\n  classNames?: Partial<Record<EventScheduleSemanticName, string>>\n}\n\n/**\n * \u5224\u65AD\u5F53\u524D\u65F6\u95F4\u662F\u5426\u5728\u6307\u5B9A\u7684\u65F6\u95F4\u533A\u95F4\u5185\n * @param startDate \u5F00\u59CB\u65E5\u671F\n * @param endDate \u7ED3\u675F\u65E5\u671F\n * @returns \u662F\u5426\u5728\u533A\u95F4\u5185\n */\nconst isInTimeRange = (startDate: string, endDate: string): boolean => {\n  const now = dayjs()\n  const start = dayjs(startDate).startOf('day')\n  const end = dayjs(endDate).endOf('day')\n  return now.isAfter(start) && now.isBefore(end)\n}\n\n/**\n * \u83B7\u53D6\u6D3B\u52A8\u9879\u7684\u6FC0\u6D3B\u72B6\u6001\n * @param item \u6D3B\u52A8\u9879\n * @returns \u662F\u5426\u6FC0\u6D3B\n */\nconst getItemActiveStatus = (item: EventScheduleItem): boolean => {\n  // \u5426\u5219\u6839\u636E\u65F6\u95F4\u533A\u95F4\u81EA\u52A8\u5224\u65AD\n  return isInTimeRange(item.startDate, item.endDate)\n}\n\n/**\n * \u65F6\u95F4\u8F74\u8282\u70B9\u7EC4\u4EF6\n */\nconst TimelineNode = ({ active, className }: { active: boolean; className?: string }) => {\n  return (\n    <div className={cn('relative my-1 flex h-2 flex-1 items-center justify-center', className)}>\n      {/* \u8FDB\u5EA6\u6761 */}\n      <div\n        className={cn('h-2 w-full ', {\n          'bg-[#F6CD4E] rounded-full': active,\n          'bg-[#EAEAEC]': !active,\n        })}\n      />\n      {/* \u65F6\u95F4\u8282\u70B9 */}\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <div\n          className={cn('size-4 rounded-full border-2 transition-colors', {\n            'border-[#F6CD4E] bg-[#F6CD4E]': active,\n            'border-[#EAEAEC] bg-[#EAEAEC]': !active,\n          })}\n        />\n      </div>\n    </div>\n  )\n}\n\n/**\n * \u5224\u65AD\u662F\u5426\u4E3A\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param obj \u5F85\u68C0\u67E5\u7684\u5BF9\u8C61\n * @returns \u662F\u5426\u4E3AStateBackgroundImage\u7C7B\u578B\n */\nconst isStateBackgroundImage = (\n  obj: string | ResponsiveBackgroundImage | StateBackgroundImage\n): obj is StateBackgroundImage => {\n  return typeof obj === 'object' && ('active' in obj || 'inactive' in obj)\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3APicture\u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst convertResponsiveImageToString = (backgroundImage: string | ResponsiveBackgroundImage): string | undefined => {\n  if (!backgroundImage) return undefined\n  if (typeof backgroundImage === 'string') return backgroundImage\n\n  const { mobile, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  if (lgDesktop) parts.push(lgDesktop)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktop) parts.push(`${desktop} 1920`)\n  if (laptop) parts.push(`${laptop} 1440`)\n  if (mobile) parts.push(`${mobile} 1024`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * \u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u83B7\u53D6\u5BF9\u5E94\u7684\u80CC\u666F\u56FE\u7247\n * @param backgroundImage \u80CC\u666F\u56FE\u7247\u914D\u7F6E\n * @param isActive \u662F\u5426\u6FC0\u6D3B\u72B6\u6001\n * @returns Picture\u7EC4\u4EF6\u53EF\u7528\u7684source\u5B57\u7B26\u4E32\n */\nconst formatBackgroundImage = (\n  backgroundImage: string | ResponsiveBackgroundImage | StateBackgroundImage | undefined,\n  isActive: boolean\n): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  // \u5982\u679C\u662F\u72B6\u6001\u5316\u80CC\u666F\u56FE\u7247\uFF0C\u6839\u636E\u6FC0\u6D3B\u72B6\u6001\u9009\u62E9\u5BF9\u5E94\u7684\u56FE\u7247\n  if (isStateBackgroundImage(backgroundImage)) {\n    const stateImage = isActive ? backgroundImage.active : backgroundImage.inactive\n    return convertResponsiveImageToString(stateImage)\n  }\n\n  // \u5426\u5219\u76F4\u63A5\u8F6C\u6362\n  return convertResponsiveImageToString(backgroundImage)\n}\n\n/**\n * \u6D3B\u52A8\u65E5\u7A0B\u5361\u7247\u7EC4\u4EF6\n */\nconst EventScheduleCard = ({\n  active,\n  item,\n  backgroundImage,\n  className,\n}: {\n  active: boolean\n  item: EventScheduleItem\n  backgroundImage: string | ResponsiveBackgroundImage | StateBackgroundImage | undefined\n  className?: string\n}) => {\n  const pictureSource = React.useMemo(() => {\n    return formatBackgroundImage(backgroundImage, active)\n  }, [backgroundImage, active])\n\n  return (\n    <div\n      className={cn(\n        'rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden',\n        className\n      )}\n    >\n      <Picture source={pictureSource} alt=\"\" className=\"absolute inset-0 z-10\" imgClassName=\"h-full object-cover\" />\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <div className=\"relative z-20 size-full p-4\">\n        <h2\n          className={cn('desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]')}\n          dangerouslySetInnerHTML={{ __html: item.title }}\n        />\n        {/* \u8BE6\u7EC6\u4FE1\u606F\u5217\u8868 */}\n        <div className=\"flex flex-col gap-0.5\">\n          {item.items.map((detail, index) => (\n            <div key={index} className=\"flex items-center gap-2\">\n              {/* \u56FE\u6807 */}\n              {detail.icon && (\n                <div className=\"desktop:size-6 size-5 shrink-0\">\n                  <img src={detail.icon as string} alt=\"\" className=\"size-full\" />\n                </div>\n              )}\n              {/* \u6587\u672C */}\n              <Text\n                html={detail.label}\n                className={cn('desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]')}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/**\n * EventSchedule - \u6D3B\u52A8\u65E5\u7A0B\u7EC4\u4EF6\n *\n * @description \u663E\u793A\u6D3B\u52A8\u65E5\u7A0B\u65F6\u95F4\u8F74\u548C\u6D3B\u52A8\u5361\u7247\u5217\u8868\n */\nconst EventSchedule = React.forwardRef<HTMLDivElement, EventScheduleProps>(\n  ({ classNames = {}, data, ...props }, ref) => {\n    const itemsPerRow = React.useMemo(() => {\n      return data?.scheduleList?.length || 2\n    }, [data?.scheduleList])\n\n    // \u6839\u636E itemsPerRow \u914D\u7F6E\u54CD\u5E94\u5F0F\u65AD\u70B9\n    const swiperBreakpoints = React.useMemo(() => {\n      switch (itemsPerRow) {\n        case 2:\n          return {\n            0: {\n              slidesPerView: 1.17,\n              spaceBetween: 12,\n            },\n            768: {\n              slidesPerView: 2,\n            },\n            1024: {\n              spaceBetween: 16,\n            },\n            1440: {\n              spaceBetween: 16,\n              slidesPerView: 2,\n            },\n          }\n        case 3:\n          return {\n            0: {\n              slidesPerView: 1.17,\n              spaceBetween: 12,\n            },\n            768: {\n              slidesPerView: 2.4,\n            },\n            1024: {\n              slidesPerView: itemsPerRow,\n              spaceBetween: 16,\n            },\n            1440: {\n              spaceBetween: 16,\n              slidesPerView: itemsPerRow,\n            },\n          }\n        case 4:\n          return {\n            0: {\n              slidesPerView: 1.17,\n              spaceBetween: 12,\n            },\n            768: {\n              slidesPerView: 2.4,\n            },\n            1024: {\n              slidesPerView: 3.2,\n              spaceBetween: 16,\n            },\n            1440: {\n              slidesPerView: itemsPerRow,\n            },\n          }\n        default:\n          return {\n            0: {\n              slidesPerView: 1.17,\n              spaceBetween: 12,\n            },\n            768: {\n              slidesPerView: 1,\n            },\n            1024: {\n              slidesPerView: itemsPerRow,\n              spaceBetween: 16,\n            },\n            1440: {\n              slidesPerView: itemsPerRow,\n            },\n          }\n      }\n    }, [itemsPerRow])\n\n    const showTimeline = data.showTimeline !== false // \u9ED8\u8BA4\u4E3A true\n\n    return (\n      <div\n        ref={ref}\n        className={cn('desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4', classNames?.root)}\n        {...props}\n      >\n        <div className=\"flex w-full flex-col gap-4\">\n          <Swiper breakpoints={swiperBreakpoints} className=\"w-full !overflow-visible\">\n            {data.scheduleList.map((item, index) => {\n              const isActive = getItemActiveStatus(item)\n              return (\n                <SwiperSlide key={'SwiperSlideItem' + index}>\n                  {/* \u65F6\u95F4\u8F74 */}\n                  {showTimeline && <TimelineNode active={isActive} />}\n                  <EventScheduleCard\n                    active={isActive}\n                    className={showTimeline ? 'mt-4' : ''}\n                    item={item}\n                    backgroundImage={data.backgroundImage}\n                  />\n                </SwiperSlide>\n              )\n            })}\n          </Swiper>\n        </div>\n      </div>\n    )\n  }\n)\n\nEventSchedule.displayName = 'EventSchedule'\nexport default EventSchedule\n\n// \u5BFC\u51FA\u7C7B\u578B\u4F9B\u5916\u90E8\u4F7F\u7528\n// export type { ResponsiveBackgroundImage, StateBackgroundImage, EventScheduleItem, EventScheduleData, EventScheduleProps }\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8II,IAAAI,EAAA,6BA5IJC,EAAuB,oBACvBC,EAAmB,kCACnBC,EAA8B,qCAC9BC,EAAoC,wBACpCC,EAAkB,oBAkHlB,MAAMC,EAAgB,CAACC,EAAmBC,IAA6B,CACrE,MAAMC,KAAM,EAAAC,SAAM,EACZC,KAAQ,EAAAD,SAAMH,CAAS,EAAE,QAAQ,KAAK,EACtCK,KAAM,EAAAF,SAAMF,CAAO,EAAE,MAAM,KAAK,EACtC,OAAOC,EAAI,QAAQE,CAAK,GAAKF,EAAI,SAASG,CAAG,CAC/C,EAOMC,EAAuBC,GAEpBR,EAAcQ,EAAK,UAAWA,EAAK,OAAO,EAM7CC,EAAe,CAAC,CAAE,OAAAC,EAAQ,UAAAC,CAAU,OAEtC,QAAC,OAAI,aAAW,MAAG,4DAA6DA,CAAS,EAEvF,oBAAC,OACC,aAAW,MAAG,cAAe,CAC3B,4BAA6BD,EAC7B,eAAgB,CAACA,CACnB,CAAC,EACH,KAEA,OAAC,OAAI,UAAU,oDACb,mBAAC,OACC,aAAW,MAAG,iDAAkD,CAC9D,gCAAiCA,EACjC,gCAAiC,CAACA,CACpC,CAAC,EACH,EACF,GACF,EASEE,EACJC,GAEO,OAAOA,GAAQ,WAAa,WAAYA,GAAO,aAAcA,GAQhEC,EAAkCC,GAA4E,CAClH,GAAI,CAACA,EAAiB,OACtB,GAAI,OAAOA,GAAoB,SAAU,OAAOA,EAEhD,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIJ,EACzCK,EAAkB,CAAC,EAGzB,OAAID,GAAWC,EAAM,KAAKD,CAAS,EAG/BD,GAASE,EAAM,KAAK,GAAGF,CAAO,OAAO,EACrCD,GAAQG,EAAM,KAAK,GAAGH,CAAM,OAAO,EACnCD,GAAQI,EAAM,KAAK,GAAGJ,CAAM,OAAO,EAEhCI,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAQMC,EAAwB,CAC5BN,EACAO,IACuB,CACvB,GAAKP,EAGL,IAAIH,EAAuBG,CAAe,EAAG,CAC3C,MAAMQ,EAAaD,EAAWP,EAAgB,OAASA,EAAgB,SACvE,OAAOD,EAA+BS,CAAU,CAClD,CAGA,OAAOT,EAA+BC,CAAe,EACvD,EAKMS,EAAoB,CAAC,CACzB,OAAAd,EACA,KAAAF,EACA,gBAAAO,EACA,UAAAJ,CACF,IAKM,CACJ,MAAMc,EAAgB9B,EAAM,QAAQ,IAC3B0B,EAAsBN,EAAiBL,CAAM,EACnD,CAACK,EAAiBL,CAAM,CAAC,EAE5B,SACE,QAAC,OACC,aAAW,MACT,qHACAC,CACF,EAEA,oBAAC,WAAQ,OAAQc,EAAe,IAAI,GAAG,UAAU,wBAAwB,aAAa,sBAAsB,KAE5G,QAAC,OAAI,UAAU,8BACb,oBAAC,MACC,aAAW,MAAG,wEAAwE,EACtF,wBAAyB,CAAE,OAAQjB,EAAK,KAAM,EAChD,KAEA,OAAC,OAAI,UAAU,wBACZ,SAAAA,EAAK,MAAM,IAAI,CAACkB,EAAQC,OACvB,QAAC,OAAgB,UAAU,0BAExB,UAAAD,EAAO,SACN,OAAC,OAAI,UAAU,iCACb,mBAAC,OAAI,IAAKA,EAAO,KAAgB,IAAI,GAAG,UAAU,YAAY,EAChE,KAGF,OAAC,QACC,KAAMA,EAAO,MACb,aAAW,MAAG,+EAA+E,EAC/F,IAXQC,CAYV,CACD,EACH,GACF,GACF,CAEJ,EAOMC,EAAgBjC,EAAM,WAC1B,CAAC,CAAE,WAAAkC,EAAa,CAAC,EAAG,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CAC5C,MAAMC,EAActC,EAAM,QAAQ,IACzBmC,GAAM,cAAc,QAAU,EACpC,CAACA,GAAM,YAAY,CAAC,EAGjBI,EAAoBvC,EAAM,QAAQ,IAAM,CAC5C,OAAQsC,EAAa,CACnB,IAAK,GACH,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,EAChB,EACA,KAAM,CACJ,aAAc,GACd,cAAe,CACjB,CACF,EACF,IAAK,GACH,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,GACjB,EACA,KAAM,CACJ,cAAeA,EACf,aAAc,EAChB,EACA,KAAM,CACJ,aAAc,GACd,cAAeA,CACjB,CACF,EACF,IAAK,GACH,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,GACjB,EACA,KAAM,CACJ,cAAe,IACf,aAAc,EAChB,EACA,KAAM,CACJ,cAAeA,CACjB,CACF,EACF,QACE,MAAO,CACL,EAAG,CACD,cAAe,KACf,aAAc,EAChB,EACA,IAAK,CACH,cAAe,CACjB,EACA,KAAM,CACJ,cAAeA,EACf,aAAc,EAChB,EACA,KAAM,CACJ,cAAeA,CACjB,CACF,CACJ,CACF,EAAG,CAACA,CAAW,CAAC,EAEVE,EAAeL,EAAK,eAAiB,GAE3C,SACE,OAAC,OACC,IAAKE,EACL,aAAW,MAAG,qEAAsEH,GAAY,IAAI,EACnG,GAAGE,EAEJ,mBAAC,OAAI,UAAU,6BACb,mBAAC,UAAO,YAAaG,EAAmB,UAAU,2BAC/C,SAAAJ,EAAK,aAAa,IAAI,CAACtB,EAAMmB,IAAU,CACtC,MAAML,EAAWf,EAAoBC,CAAI,EACzC,SACE,QAAC,eAEE,UAAA2B,MAAgB,OAAC1B,EAAA,CAAa,OAAQa,EAAU,KACjD,OAACE,EAAA,CACC,OAAQF,EACR,UAAWa,EAAe,OAAS,GACnC,KAAM3B,EACN,gBAAiBsB,EAAK,gBACxB,IARgB,kBAAoBH,CAStC,CAEJ,CAAC,EACH,EACF,EACF,CAEJ,CACF,EAEAC,EAAc,YAAc,gBAC5B,IAAOpC,EAAQoC",
+  "names": ["EventSchedule_exports", "__export", "EventSchedule_default", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "import_components", "import_react", "import_dayjs", "isInTimeRange", "startDate", "endDate", "now", "dayjs", "start", "end", "getItemActiveStatus", "item", "TimelineNode", "active", "className", "isStateBackgroundImage", "obj", "convertResponsiveImageToString", "backgroundImage", "mobile", "laptop", "desktop", "lgDesktop", "parts", "formatBackgroundImage", "isActive", "stateImage", "EventScheduleCard", "pictureSource", "detail", "index", "EventSchedule", "classNames", "data", "props", "ref", "itemsPerRow", "swiperBreakpoints", "showTimeline"]
 }

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

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