@anker-in/headless-ui 1.1.17-alpha.1766488449220 → 1.1.17-alpha.1766575112329

package/dist/esm/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/esm/biz-components/AnchorNavigation/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import*as n from"react";import{cn as l}from"../../helpers/utils.js";import{Container as h}from"../../components/container.js";import g from"./useAnchorPosition.js";const f=n.forwardRef(({className:d,data:a,...b},m)=>{const u=g(a.sectionIds?.map(t=>t.id)||[]),i=n.useRef(null),s=n.useRef([]),p=n.useCallback(t=>{const e=s.current[t];if(e&&i.current){const o=i.current,c=e,v=c.offsetLeft-o.offsetWidth/2+c.offsetWidth/2;o.scrollTo({left:v,behavior:"smooth"})}},[]);return r("div",{ref:m,className:l("sticky top-0 z-10 w-full bg-white",d),...b,children:r(h,{children:r("div",{ref:i,className:"anchor-navigation-content desktop:gap-6 flex items-center gap-4 overflow-x-auto [&::-webkit-scrollbar]:hidden",children:a.sectionIds?.map((t,e)=>r("button",{ref:o=>{o&&(s.current[e]=o)},onClick:()=>{p(e),document.getElementById(t.id)?.scrollIntoView({behavior:"smooth"})},className:l("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]":u===t.id}),children:t.label},t.id))})})})});f.displayName="AnchorNavigation";var R=f;export{R as default};
+"use client";import{jsx as i}from"react/jsx-runtime";import*as o from"react";import{cn as l}from"../../helpers/utils.js";import{Container as k}from"../../components/container.js";import{cva as m}from"class-variance-authority";import I from"./useAnchorPosition.js";const N=m("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"}}),y=m("sticky top-0 z-10 w-full",{variants:{theme:{light:"bg-white",dark:"bg-[#1E2024]"}},defaultVariants:{theme:"light"}}),g=o.forwardRef(({className:h,data:s,...u},b)=>{const{alignment:v="start",theme:f="light"}=s,p=I(s.sectionIds?.map(t=>t.targetId)||[]),c=o.useRef(null),d=o.useRef([]),A=o.useCallback(t=>{const r=d.current[t];if(r&&c.current){const e=c.current,n=r,a=n.offsetLeft-e.offsetWidth/2+n.offsetWidth/2;e.scrollTo({left:a,behavior:"smooth"})}},[]);return i("div",{ref:b,className:l(y({theme:f}),h),...u,children:i(k,{children:i("div",{ref:c,className:l(N({alignment:v})),children:s.sectionIds?.map((t,r)=>{const e=p===t.targetId,n=f==="dark";return i("button",{ref:a=>{a&&(d.current[r]=a)},onClick:()=>{A(r),document.getElementById(t.targetId)?.scrollIntoView({behavior:"smooth"})},className:l("anchor-navigation-item desktop:py-4 shrink-0 border-b-4 border-b-transparent py-3 text-base font-bold",{"text-[#4A4C56]":!n&&!e,"border-b-brand text-[#080A0F]":!n&&e,"text-[#8A8D92]":n&&!e,"border-b-brand text-white":n&&e}),children:t.label},t.targetId)})})})})});g.displayName="AnchorNavigation";var D=g;export{D as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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": "aAwDc,cAAAA,MAAA,oBAtDd,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,aAAAC,MAAiB,gCAC1B,OAAOC,MAAuB,yBAsB9B,MAAMC,EAAmBJ,EAAM,WAC7B,CAAC,CAAE,UAAAK,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACtC,MAAMC,EAAWN,EAAkBG,EAAK,YAAY,IAAII,GAAQA,EAAK,EAAE,GAAK,CAAC,CAAC,EACxEC,EAAeX,EAAM,OAAuB,IAAI,EAChDY,EAAcZ,EAAM,OAA4B,CAAC,CAAC,EAElDa,EAAyBb,EAAM,YAAac,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,OACEnB,EAAC,OAAI,IAAKS,EAAK,UAAWP,EAAG,oCAAqCI,CAAS,EAAI,GAAGE,EAChF,SAAAR,EAACG,EAAA,CACC,SAAAH,EAAC,OACC,IAAKY,EACL,UAAU,gHAET,SAAAL,EAAK,YAAY,IAAI,CAACI,EAAMS,IAC3BpB,EAAC,UAEC,IAAKqB,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,UAAWT,EACT,uHACA,CACE,gCAAiCQ,IAAaC,EAAK,EACrD,CACF,EAEC,SAAAA,EAAK,OAjBDA,EAAK,EAkBZ,CACD,EACH,EACF,EACF,CAEJ,CACF,EAEAN,EAAiB,YAAc,mBAC/B,IAAOiB,EAAQjB",
-  "names": ["jsx", "React", "cn", "Container", "useAnchorPosition", "AnchorNavigation", "className", "data", "props", "ref", "activeId", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "el", "AnchorNavigation_default"]
+  "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": "aAmGgB,cAAAA,MAAA,oBAjGhB,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,OAAAC,MAA8B,2BACvC,OAAOC,MAAuB,yBAK9B,MAAMC,EAA2BF,EAC/B,gHACA,CACE,SAAU,CACR,UAAW,CACT,MAAO,gBACP,OAAQ,iBACR,IAAK,aACP,CACF,EACA,gBAAiB,CACf,UAAW,OACb,CACF,CACF,EAKMG,EAAoBH,EAAI,2BAA4B,CACxD,SAAU,CACR,MAAO,CACL,MAAO,WACP,KAAM,cACR,CACF,EACA,gBAAiB,CACf,MAAO,OACT,CACF,CAAC,EA4BKI,EAAmBP,EAAM,WAC7B,CAAC,CAAE,UAAAQ,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CACtC,KAAM,CAAE,UAAAC,EAAY,QAAS,MAAAC,EAAQ,OAAQ,EAAIJ,EAC3CK,EAAWV,EAAkBK,EAAK,YAAY,IAAIM,GAAQA,EAAK,QAAQ,GAAK,CAAC,CAAC,EAC9EC,EAAehB,EAAM,OAAuB,IAAI,EAChDiB,EAAcjB,EAAM,OAA4B,CAAC,CAAC,EAElDkB,EAAyBlB,EAAM,YAAamB,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,OACExB,EAAC,OAAI,IAAKY,EAAK,UAAWV,EAAGK,EAAkB,CAAE,MAAAO,CAAM,CAAC,EAAGL,CAAS,EAAI,GAAGE,EACzE,SAAAX,EAACG,EAAA,CACC,SAAAH,EAAC,OAAI,IAAKiB,EAAc,UAAWf,EAAGI,EAAyB,CAAE,UAAAO,CAAU,CAAC,CAAC,EAC1E,SAAAH,EAAK,YAAY,IAAI,CAACM,EAAMS,IAAU,CACrC,MAAMC,EAAWX,IAAaC,EAAK,SAC7BW,EAASb,IAAU,OAEzB,OACEd,EAAC,UAEC,IAAK4B,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,UAAWd,EACT,wGACA,CAEE,iBAAkB,CAACyB,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,EAEAR,EAAiB,YAAc,mBAC/B,IAAOqB,EAAQrB",
+  "names": ["jsx", "React", "cn", "Container", "cva", "useAnchorPosition", "anchorNavigationVariants", "containerVariants", "AnchorNavigation", "className", "data", "props", "ref", "alignment", "theme", "activeId", "item", "containerRef", "sectionRefs", "autoScrollToActiveItem", "activeIdIndex", "curRef", "container", "button", "scrollLeft", "index", "isActive", "isDark", "el", "AnchorNavigation_default"]
 }

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

@@ -91,6 +91,8 @@ export interface EventScheduleData {
      * }
      */
     backgroundImage?: string | ResponsiveBackgroundImage | StateBackgroundImage;
+    /** 是否显示时间轴，默认为 true */
+    showTimeline?: boolean;
 }
 export interface EventScheduleProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 业务数据 */

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as i,jsxs as o}from"react/jsx-runtime";import*as d from"react";import{cn as l}from"../../helpers/index.js";import{Text as v,Picture as w}from"../../components/index.js";import{Swiper as x,SwiperSlide as h}from"swiper/react";import u from"dayjs";const S=(e,t)=>{const n=u(),a=u(e).startOf("day"),s=u(t).endOf("day");return n.isAfter(a)&&n.isBefore(s)},B=e=>S(e.startDate,e.endDate),E=({active:e,className:t})=>o("div",{className:l("relative my-1 flex h-2 flex-1 items-center justify-center",t),children:[i("div",{className:l("h-2 w-full ",{"bg-[#F6CD4E] rounded-full":e,"bg-[#EAEAEC]":!e})}),i("div",{className:"absolute inset-0 flex items-center justify-center",children:i("div",{className:l("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),N=e=>typeof e=="object"&&("active"in e||"inactive"in e),m=e=>{if(!e)return;if(typeof e=="string")return e;const{mobile:t,laptop:n,desktop:a,lgDesktop:s}=e,r=[];return s&&r.push(s),a&&r.push(`${a} 1920`),n&&r.push(`${n} 1440`),t&&r.push(`${t} 1024`),r.length>0?r.join(", "):void 0},k=(e,t)=>{if(e){if(N(e)){const n=t?e.active:e.inactive;return m(n)}return m(e)}},b=({active:e,item:t,backgroundImage:n,className:a})=>{const s=d.useMemo(()=>k(n,e),[n,e]);return o("div",{className:l("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden",a),children:[i(w,{source:s,alt:"",className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"}),o("div",{className:"relative z-20 size-full p-4",children:[i("h2",{className:l("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]"),dangerouslySetInnerHTML:{__html:t.title}}),i("div",{className:"flex flex-col gap-0.5",children:t.items.map((r,c)=>o("div",{className:"flex items-center gap-2",children:[r.icon&&i("div",{className:"desktop:size-6 size-5 shrink-0",children:i("img",{src:r.icon,alt:"",className:"size-full"})}),i(v,{html:r.label,className:l("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},c))})]})]})},g=d.forwardRef(({classNames:e={},data:t,...n},a)=>{const s=d.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),r=d.useMemo(()=>{switch(s){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:s,spaceBetween:16},1440:{spaceBetween:16,slidesPerView:s}};case 4:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:3.2,spaceBetween:16},1440:{slidesPerView:s}};default:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:1},1024:{slidesPerView:s,spaceBetween:16},1440:{slidesPerView:s}}}},[s]);return i("div",{ref:a,className:l("desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4",e?.root),...n,children:i("div",{className:"flex w-full flex-col gap-4",children:i(x,{breakpoints:r,className:"w-full !overflow-visible",children:t.scheduleList.map((c,f)=>{const p=B(c);return o(h,{children:[i(E,{active:p}),i(b,{active:p,className:"mt-4",item:c,backgroundImage:t.backgroundImage})]},"SwiperSlideItem"+f)})})})})});g.displayName="EventSchedule";var y=g;export{y as default};
+"use client";import{jsx as i,jsxs as o}from"react/jsx-runtime";import*as d from"react";import{cn as l}from"../../helpers/index.js";import{Text as w,Picture as h}from"../../components/index.js";import{Swiper as x,SwiperSlide as S}from"swiper/react";import u from"dayjs";const B=(e,t)=>{const n=u(),a=u(e).startOf("day"),s=u(t).endOf("day");return n.isAfter(a)&&n.isBefore(s)},E=e=>B(e.startDate,e.endDate),N=({active:e,className:t})=>o("div",{className:l("relative my-1 flex h-2 flex-1 items-center justify-center",t),children:[i("div",{className:l("h-2 w-full ",{"bg-[#F6CD4E] rounded-full":e,"bg-[#EAEAEC]":!e})}),i("div",{className:"absolute inset-0 flex items-center justify-center",children:i("div",{className:l("size-4 rounded-full border-2 transition-colors",{"border-[#F6CD4E] bg-[#F6CD4E]":e,"border-[#EAEAEC] bg-[#EAEAEC]":!e})})})]}),k=e=>typeof e=="object"&&("active"in e||"inactive"in e),g=e=>{if(!e)return;if(typeof e=="string")return e;const{mobile:t,laptop:n,desktop:a,lgDesktop:s}=e,r=[];return s&&r.push(s),a&&r.push(`${a} 1920`),n&&r.push(`${n} 1440`),t&&r.push(`${t} 1024`),r.length>0?r.join(", "):void 0},b=(e,t)=>{if(e){if(k(e)){const n=t?e.active:e.inactive;return g(n)}return g(e)}},I=({active:e,item:t,backgroundImage:n,className:a})=>{const s=d.useMemo(()=>b(n,e),[n,e]);return o("div",{className:l("rounded-box laptop:h-[160px] relative flex h-[120px] min-w-0 flex-1 flex-col justify-between gap-2 overflow-hidden",a),children:[i(h,{source:s,alt:"",className:"absolute inset-0 z-10",imgClassName:"h-full object-cover"}),o("div",{className:"relative z-20 size-full p-4",children:[i("h2",{className:l("desktop:text-[24px] text-[20px] font-bold leading-[1.2] text-[#080A0F]"),dangerouslySetInnerHTML:{__html:t.title}}),i("div",{className:"flex flex-col gap-0.5",children:t.items.map((r,c)=>o("div",{className:"flex items-center gap-2",children:[r.icon&&i("div",{className:"desktop:size-6 size-5 shrink-0",children:i("img",{src:r.icon,alt:"",className:"size-full"})}),i(w,{html:r.label,className:l("desktop:text-[18px] flex-1 text-[14px] font-bold leading-[1.4] text-[#080A0F]")})]},c))})]})]})},f=d.forwardRef(({classNames:e={},data:t,...n},a)=>{const s=d.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),r=d.useMemo(()=>{switch(s){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:s,spaceBetween:16},1440:{spaceBetween:16,slidesPerView:s}};case 4:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:2.4},1024:{slidesPerView:3.2,spaceBetween:16},1440:{slidesPerView:s}};default:return{0:{slidesPerView:1.17,spaceBetween:12},768:{slidesPerView:1},1024:{slidesPerView:s,spaceBetween:16},1440:{slidesPerView:s}}}},[s]),c=t.showTimeline!==!1;return i("div",{ref:a,className:l("desktop:px-16 laptop:px-16 tablet:px-8 w-full overflow-hidden px-4",e?.root),...n,children:i("div",{className:"flex w-full flex-col gap-4",children:i(x,{breakpoints:r,className:"w-full !overflow-visible",children:t.scheduleList.map((p,v)=>{const m=E(p);return o(S,{children:[c&&i(N,{active:m}),i(I,{active:m,className:c?"mt-4":"",item:p,backgroundImage:t.backgroundImage})]},"SwiperSlideItem"+v)})})})})});f.displayName="EventSchedule";var D=f;export{D as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/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'\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}\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    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                  <TimelineNode active={isActive} />\n                  <EventScheduleCard\n                    active={isActive}\n                    className=\"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": "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",
-  "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Swiper", "SwiperSlide", "dayjs", "isInTimeRange", "startDate", "endDate", "now", "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", "EventSchedule_default"]
+  "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": "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",
+  "names": ["jsx", "jsxs", "React", "cn", "Text", "Picture", "Swiper", "SwiperSlide", "dayjs", "isInTimeRange", "startDate", "endDate", "now", "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", "EventSchedule_default"]
 }

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

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