@anker-in/headless-ui 1.0.26-temp-111002 → 1.0.26-temp-111005

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/biz-components/CollectionsFilters/FilterCardWrap.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FilterCardWrapProps = {
     isSale?: boolean;
     result?: any;
@@ -7,6 +8,7 @@ type FilterCardWrapProps = {
     closeFilter: boolean;
     page: number;
     metafields: any;
+    noResultNode?: React.ReactNode;
     refreshStarRating?: () => void;
     onPrimaryChange?: (item: any, sku: string) => void;
     onSecondaryChange?: (item: any, sku: string) => void;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type CollectionsFiltersProps = {
     metafields: any;
     result: any;
@@ -7,6 +8,7 @@ type CollectionsFiltersProps = {
     isLoading?: boolean;
     refreshStarRating?: () => void;
     loadMore?: React.ReactNode;
+    noResultNode?: React.ReactNode;
     data?: any;
     onNextPage?: (v: string) => void;
     onPrevPage?: (v: string) => void;
@@ -16,7 +18,7 @@ type CollectionsFiltersProps = {
     onSecondaryChange?: (item: any, sku: string) => void;
 };
 declare const _default: import("react").ForwardRefExoticComponent<Omit<CollectionsFiltersProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+    className?: string | undefined;
+    data?: Record<string, any> | undefined;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

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

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

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

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

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

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

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

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

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

package/dist/esm/biz-components/FeatureCards/FeatureCards.js

@@ -1,2 +1,2 @@
-"use client";import{Fragment as z,jsx as t,jsxs as a}from"react/jsx-runtime";import f,{useImperativeHandle as N,useRef as w}from"react";import{Heading as l,Picture as m,Text as d}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as b}from"../../hooks/useExposure.js";import{trackUrlRef as C}from"../../shared/trackUrlRef.js";import{Swiper as F,SwiperSlide as T}from"swiper/react";const o="image",c="feature_cards",_=f.forwardRef(({data:h,className:g},v)=>{const{title:s,subtitle:r,items:x=[]}=h,p=w(null);b(p,{componentType:o,componentName:c,componentTitle:s,componentDescription:r}),N(v,()=>p.current);const k=e=>{const u=a(z,{children:[t(m,{source:e.image.url,alt:e.image.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:e.subtitle})]})]}),n=i("feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?t("a",{href:C(e.link,`${o}_${c}`),className:n,"data-headless-type-name":`${o}#${c}`,"data-headless-title-desc-button":`${s}#${e.title}#${e.subtitle}`,children:u}):t("div",{className:n,children:u})};return a("section",{ref:p,"data-ui-component-id":"FeatureCards",className:i("feature-cards flex w-full flex-col justify-center",g),children:[a("div",{className:"feature-cards__header",children:[t(l,{size:4,as:"h1",className:"feature-cards__title text-left laptop:text-center",children:s}),r&&t(d,{size:2,as:"p",className:"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:r})]}),t("div",{className:"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:x.map(e=>t(f.Fragment,{children:k(e)},e.title))}),t("div",{className:"feature-cards__swiper-container mt-[24px] w-full laptop:hidden",children:t(F,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:x.map(e=>t(T,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:a("div",{className:i("feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[t(m,{source:e.image.url,alt:e.image.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});_.displayName="FeatureCards";var L=y(_);export{L as default};
+"use client";import{Fragment as z,jsx as t,jsxs as a}from"react/jsx-runtime";import f,{useImperativeHandle as N,useRef as w}from"react";import{Heading as l,Picture as m,Text as d}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";import{withLayout as y}from"../../shared/Styles.js";import{useExposure as b}from"../../hooks/useExposure.js";import{trackUrlRef as C}from"../../shared/trackUrlRef.js";import{Swiper as F,SwiperSlide as T}from"swiper/react";const o="image",c="feature_cards",_=f.forwardRef(({data:h,className:g},v)=>{const{title:s,subtitle:r,items:x=[]}=h,p=w(null);b(p,{componentType:o,componentName:c,componentTitle:s,componentDescription:r}),N(v,()=>p.current);const k=e=>{const u=a(z,{children:[t(m,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]",children:e.subtitle})]})]}),n=i("feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"});return e.link?t("a",{href:C(e.link,`${o}_${c}`),className:n,"data-headless-type-name":`${o}#${c}`,"data-headless-title-desc-button":`${s}#${e.title}#${e.subtitle}`,children:u}):t("div",{className:n,children:u})};return a("section",{ref:p,"data-ui-component-id":"FeatureCards",className:i("feature-cards flex w-full flex-col justify-center",g),children:[a("div",{className:"feature-cards__header",children:[t(l,{size:4,as:"h1",className:"feature-cards__title text-left laptop:text-center",children:s}),r&&t(d,{size:2,as:"p",className:"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]",children:r})]}),t("div",{className:"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]",children:x.map(e=>t(f.Fragment,{children:k(e)},e.title))}),t("div",{className:"feature-cards__swiper-container mt-[24px] w-full laptop:hidden",children:t(F,{spaceBetween:12,slidesPerView:"auto",grabCursor:!0,className:"feature-cards__swiper relative w-full !overflow-visible",children:x.map(e=>t(T,{className:"feature-cards__swiper-slide relative !h-[360px] !w-[296px]",children:a("div",{className:i("feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]",{"aiui-dark":e.theme==="dark","aiui-light":e.theme==="light"}),children:[t(m,{source:e.image?.url,alt:e.image?.alt||e.title,className:"feature-cards__card-image absolute inset-0 !h-full",imgClassName:"!h-full object-cover"}),a("div",{className:"feature-cards__card-content z-10",children:[t(l,{size:3,as:"h2",className:"feature-cards__card-title",children:e.title}),t(d,{size:4,as:"p",className:"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]",children:e.subtitle})]})]},e.title)},e.title))})})]})});_.displayName="FeatureCards";var L=y(_);export{L as default};
 //# sourceMappingURL=FeatureCards.js.map

package/dist/esm/biz-components/FeatureCards/FeatureCards.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureCards/FeatureCards.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n  const { title, subtitle, items = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const renderCard = (item: FeatureCardItem) => {\n    const cardContent = (\n      <>\n        <Picture\n          source={item.image.url}\n          alt={item.image.alt || item.title}\n          className=\"feature-cards__card-image absolute inset-0 !h-full\"\n          imgClassName=\"!h-full object-cover\"\n        />\n        <div className=\"feature-cards__card-content z-10\">\n          <Heading size={3} as=\"h2\" className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n            {item.title}\n          </Heading>\n          <Text\n            size={4}\n            as=\"p\"\n            className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n          >\n            {item.subtitle}\n          </Text>\n        </div>\n      </>\n    )\n\n    const cardClasses = cn(\n      'feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]',\n      {\n        'aiui-dark': item.theme === 'dark',\n        'aiui-light': item.theme === 'light',\n      }\n    )\n\n    if (item.link) {\n      return (\n        <a\n          href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n          className={cardClasses}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n        >\n          {cardContent}\n        </a>\n      )\n    }\n\n    return <div className={cardClasses}>{cardContent}</div>\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureCards\"\n      className={cn('feature-cards flex w-full flex-col justify-center', className)}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      <div className=\"feature-cards__header\">\n        <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n          {title}\n        </Heading>\n        {subtitle && (\n          <Text\n            size={2}\n            as=\"p\"\n            className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n          >\n            {subtitle}\n          </Text>\n        )}\n      </div>\n\n      {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n      <div className=\"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n        {items.map(item => (\n          <React.Fragment key={item.title}>{renderCard(item)}</React.Fragment>\n        ))}\n      </div>\n\n      {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n      <div className=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n        <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n          {items.map(item => (\n            <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n              <div\n                key={item.title}\n                className={cn(\n                  'feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                    'aiui-light': item.theme === 'light',\n                  }\n                )}\n              >\n                <Picture\n                  source={item.image.url}\n                  alt={item.image.alt || item.title}\n                  className=\"feature-cards__card-image absolute inset-0 !h-full\"\n                  imgClassName=\"!h-full object-cover\"\n                />\n                <div className=\"feature-cards__card-content z-10\">\n                  <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n                    {item.title}\n                  </Heading>\n                  <Text\n                    size={4}\n                    as=\"p\"\n                    className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n                  >\n                    {item.subtitle}\n                  </Text>\n                </div>\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
-  "mappings": "aA6BM,mBAAAA,EACE,OAAAC,EAMA,QAAAC,MAPF,oBA5BN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAed,EAAM,WAA8C,CAAC,CAAE,KAAAe,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,CAAE,EAAIL,EAElCM,EAASnB,EAAuB,IAAI,EAE1CM,EAAYa,EAAQ,CAClB,cAAAT,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDlB,EAAoBgB,EAAK,IAAMI,EAAO,OAAyB,EAE/D,MAAMC,EAAcC,GAA0B,CAC5C,MAAMC,EACJzB,EAAAF,EAAA,CACE,UAAAC,EAACM,EAAA,CACC,OAAQmB,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,KAAOA,EAAK,MAC5B,UAAU,qDACV,aAAa,uBACf,EACAxB,EAAC,OAAI,UAAU,mCACb,UAAAD,EAACK,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,0FACjC,SAAAoB,EAAK,MACR,EACAzB,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,UAAU,iHAET,SAAAkB,EAAK,SACR,GACF,GACF,EAGIE,EAAcnB,EAClB,8UACA,CACE,YAAaiB,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,OAAIA,EAAK,KAELzB,EAAC,KACC,KAAMW,EAAYc,EAAK,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAChE,UAAWY,EACX,0BAAyB,GAAGb,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGK,CAAK,IAAIK,EAAK,KAAK,IAAIA,EAAK,QAAQ,GAEvE,SAAAC,EACH,EAIG1B,EAAC,OAAI,UAAW2B,EAAc,SAAAD,EAAY,CACnD,EAEA,OACEzB,EAAC,WACC,IAAKsB,EACL,uBAAqB,eACrB,UAAWf,EAAG,oDAAqDU,CAAS,EAG5E,UAAAjB,EAAC,OAAI,UAAU,wBACb,UAAAD,EAACK,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,oDACjC,SAAAe,EACH,EACCC,GACCrB,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,UAAU,uHAET,SAAAc,EACH,GAEJ,EAGArB,EAAC,OAAI,UAAU,6HACZ,SAAAsB,EAAM,IAAIG,GACTzB,EAACE,EAAM,SAAN,CAAiC,SAAAsB,EAAWC,CAAI,GAA5BA,EAAK,KAAyB,CACpD,EACH,EAGAzB,EAAC,OAAI,UAAU,iEACb,SAAAA,EAACY,EAAA,CAAO,aAAc,GAAI,cAAc,OAAO,WAAU,GAAC,UAAU,0DACjE,SAAAU,EAAM,IAAIG,GACTzB,EAACa,EAAA,CAA6B,UAAU,6DACtC,SAAAZ,EAAC,OAEC,UAAWO,EACT,iRACA,CACE,YAAaiB,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,UAAAzB,EAACM,EAAA,CACC,OAAQmB,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,KAAOA,EAAK,MAC5B,UAAU,qDACV,aAAa,uBACf,EACAxB,EAAC,OAAI,UAAU,mCACb,UAAAD,EAACK,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,4BACjC,SAAAoB,EAAK,MACR,EACAzB,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,UAAU,kIAET,SAAAkB,EAAK,SACR,GACF,IA1BKA,EAAK,KA2BZ,GA7BgBA,EAAK,KA8BvB,CACD,EACH,EACF,GACF,CAEJ,CAAC,EAEDT,EAAa,YAAc,eAE3B,IAAOY,EAAQnB,EAAWO,CAAY",
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { FeatureCardsProps, FeatureCardItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\n\nconst componentType = 'image'\nconst componentName = 'feature_cards'\n\nconst FeatureCards = React.forwardRef<HTMLDivElement, FeatureCardsProps>(({ data, className }, ref) => {\n  const { title, subtitle, items = [] } = data\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: title,\n    componentDescription: subtitle,\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  const renderCard = (item: FeatureCardItem) => {\n    const cardContent = (\n      <>\n        <Picture\n          source={item.image?.url}\n          alt={item.image?.alt || item.title}\n          className=\"feature-cards__card-image absolute inset-0 !h-full\"\n          imgClassName=\"!h-full object-cover\"\n        />\n        <div className=\"feature-cards__card-content z-10\">\n          <Heading size={3} as=\"h2\" className=\"feature-cards__card-title laptop:text-[20px] desktop:text-[32px] lg-desktop:text-[32px]\">\n            {item.title}\n          </Heading>\n          <Text\n            size={4}\n            as=\"p\"\n            className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] text-[14px] laptop:h-[44px] lg-desktop:text-[18px]\"\n          >\n            {item.subtitle}\n          </Text>\n        </div>\n      </>\n    )\n\n    const cardClasses = cn(\n      'feature-cards__card relative flex h-[360px] max-h-[560px] flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary tablet:h-[336px] laptop:h-[336px] laptop:px-[16px] laptop:py-[16px] desktop:h-[448px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px] lg-desktop:h-[560px]',\n      {\n        'aiui-dark': item.theme === 'dark',\n        'aiui-light': item.theme === 'light',\n      }\n    )\n\n    if (item.link) {\n      return (\n        <a\n          href={trackUrlRef(item.link, `${componentType}_${componentName}`)}\n          className={cardClasses}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${item.title}#${item.subtitle}`}\n        >\n          {cardContent}\n        </a>\n      )\n    }\n\n    return <div className={cardClasses}>{cardContent}</div>\n  }\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureCards\"\n      className={cn('feature-cards flex w-full flex-col justify-center', className)}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      <div className=\"feature-cards__header\">\n        <Heading size={4} as=\"h1\" className=\"feature-cards__title text-left laptop:text-center\">\n          {title}\n        </Heading>\n        {subtitle && (\n          <Text\n            size={2}\n            as=\"p\"\n            className=\"feature-cards__subtitle mt-[4px] text-left text-[14px] laptop:text-center desktop:text-[16px] lg-desktop:text-[18px]\"\n          >\n            {subtitle}\n          </Text>\n        )}\n      </div>\n\n      {/* \u684C\u9762\u7AEF\u7F51\u683C\u5E03\u5C40 */}\n      <div className=\"feature-cards__grid mt-[24px] hidden w-full gap-[16px] laptop:mt-[32px] laptop:flex desktop:mt-[40px] lg-desktop:mt-[24px]\">\n        {items.map(item => (\n          <React.Fragment key={item.title}>{renderCard(item)}</React.Fragment>\n        ))}\n      </div>\n\n      {/* \u79FB\u52A8\u7AEF Swiper \u5E03\u5C40 */}\n      <div className=\"feature-cards__swiper-container mt-[24px] w-full laptop:hidden\">\n        <Swiper spaceBetween={12} slidesPerView=\"auto\" grabCursor className=\"feature-cards__swiper relative w-full !overflow-visible\">\n          {items.map(item => (\n            <SwiperSlide key={item.title} className=\"feature-cards__swiper-slide relative !h-[360px] !w-[296px]\">\n              <div\n                key={item.title}\n                className={cn(\n                  'feature-cards__card feature-cards__card--mobile absolute inset-0 flex flex-1 flex-col justify-end gap-[16px] overflow-hidden rounded-[12px] px-[16px] py-[12px] text-info-primary laptop:px-[16px] laptop:py-[16px] desktop:rounded-[16px] desktop:px-[32px] desktop:py-[24px]',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                    'aiui-light': item.theme === 'light',\n                  }\n                )}\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.alt || item.title}\n                  className=\"feature-cards__card-image absolute inset-0 !h-full\"\n                  imgClassName=\"!h-full object-cover\"\n                />\n                <div className=\"feature-cards__card-content z-10\">\n                  <Heading size={3} as=\"h2\" className=\"feature-cards__card-title\">\n                    {item.title}\n                  </Heading>\n                  <Text\n                    size={4}\n                    as=\"p\"\n                    className=\"feature-cards__card-subtitle mt-[4px] line-clamp-2 h-[40px] overflow-visible text-[14px] laptop:h-[50px] lg-desktop:text-[18px]\"\n                  >\n                    {item.subtitle}\n                  </Text>\n                </div>\n              </div>\n            </SwiperSlide>\n          ))}\n        </Swiper>\n      </div>\n    </section>\n  )\n})\n\nFeatureCards.displayName = 'FeatureCards'\n\nexport default withLayout(FeatureCards)\n"],
+  "mappings": "aA6BM,mBAAAA,EACE,OAAAC,EAMA,QAAAC,MAPF,oBA5BN,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,OAAS,UAAAC,EAAQ,eAAAC,MAAmB,eAEpC,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAed,EAAM,WAA8C,CAAC,CAAE,KAAAe,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACrG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,MAAAC,EAAQ,CAAC,CAAE,EAAIL,EAElCM,EAASnB,EAAuB,IAAI,EAE1CM,EAAYa,EAAQ,CAClB,cAAAT,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDlB,EAAoBgB,EAAK,IAAMI,EAAO,OAAyB,EAE/D,MAAMC,EAAcC,GAA0B,CAC5C,MAAMC,EACJzB,EAAAF,EAAA,CACE,UAAAC,EAACM,EAAA,CACC,OAAQmB,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,KAAOA,EAAK,MAC7B,UAAU,qDACV,aAAa,uBACf,EACAxB,EAAC,OAAI,UAAU,mCACb,UAAAD,EAACK,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,0FACjC,SAAAoB,EAAK,MACR,EACAzB,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,UAAU,iHAET,SAAAkB,EAAK,SACR,GACF,GACF,EAGIE,EAAcnB,EAClB,8UACA,CACE,YAAaiB,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,OAAIA,EAAK,KAELzB,EAAC,KACC,KAAMW,EAAYc,EAAK,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAChE,UAAWY,EACX,0BAAyB,GAAGb,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGK,CAAK,IAAIK,EAAK,KAAK,IAAIA,EAAK,QAAQ,GAEvE,SAAAC,EACH,EAIG1B,EAAC,OAAI,UAAW2B,EAAc,SAAAD,EAAY,CACnD,EAEA,OACEzB,EAAC,WACC,IAAKsB,EACL,uBAAqB,eACrB,UAAWf,EAAG,oDAAqDU,CAAS,EAG5E,UAAAjB,EAAC,OAAI,UAAU,wBACb,UAAAD,EAACK,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,oDACjC,SAAAe,EACH,EACCC,GACCrB,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,UAAU,uHAET,SAAAc,EACH,GAEJ,EAGArB,EAAC,OAAI,UAAU,6HACZ,SAAAsB,EAAM,IAAIG,GACTzB,EAACE,EAAM,SAAN,CAAiC,SAAAsB,EAAWC,CAAI,GAA5BA,EAAK,KAAyB,CACpD,EACH,EAGAzB,EAAC,OAAI,UAAU,iEACb,SAAAA,EAACY,EAAA,CAAO,aAAc,GAAI,cAAc,OAAO,WAAU,GAAC,UAAU,0DACjE,SAAAU,EAAM,IAAIG,GACTzB,EAACa,EAAA,CAA6B,UAAU,6DACtC,SAAAZ,EAAC,OAEC,UAAWO,EACT,iRACA,CACE,YAAaiB,EAAK,QAAU,OAC5B,aAAcA,EAAK,QAAU,OAC/B,CACF,EAEA,UAAAzB,EAACM,EAAA,CACC,OAAQmB,EAAK,OAAO,IACpB,IAAKA,EAAK,OAAO,KAAOA,EAAK,MAC7B,UAAU,qDACV,aAAa,uBACf,EACAxB,EAAC,OAAI,UAAU,mCACb,UAAAD,EAACK,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,4BACjC,SAAAoB,EAAK,MACR,EACAzB,EAACO,EAAA,CACC,KAAM,EACN,GAAG,IACH,UAAU,kIAET,SAAAkB,EAAK,SACR,GACF,IA1BKA,EAAK,KA2BZ,GA7BgBA,EAAK,KA8BvB,CACD,EACH,EACF,GACF,CAEJ,CAAC,EAEDT,EAAa,YAAc,eAE3B,IAAOY,EAAQnB,EAAWO,CAAY",
   "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Heading", "Picture", "Text", "cn", "withLayout", "useExposure", "trackUrlRef", "Swiper", "SwiperSlide", "componentType", "componentName", "FeatureCards", "data", "className", "ref", "title", "subtitle", "items", "boxRef", "renderCard", "item", "cardContent", "cardClasses", "FeatureCards_default"]
 }

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

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

package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import f,{useRef as h,useImperativeHandle as n}from"react";import{Picture as s,Text as l,Heading as c}from"../../components/index.js";import{cn as _}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as v}from"../../hooks/useExposure.js";const g="image",N="feature_showcase",r=f.forwardRef(({data:i,className:x},m)=>{const{datalist:d=[],datalists:u=[]}=i||{},p=h(null);return v(p,{componentType:g,componentName:N,componentTitle:"Feature Showcase"}),n(m,()=>p.current),a("section",{ref:p,"data-ui-component-id":"FeatureShowcase",className:_("feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",x),children:[e("div",{className:"feature-showcase__list flex gap-[16px]",children:d?.map((t,o)=>e("div",{className:"feature-showcase__item",children:a("div",{className:"feature-showcase__card relative",children:[e(s,{source:`${t.imageMob.url}`,className:"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden"}),e(s,{source:`${t.image.url} 1024`,className:"feature-showcase__image feature-showcase__image--desktop l:hidden"}),a("div",{className:"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(c,{as:"h2",size:3,html:t?.title,className:"feature-showcase__title mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))}),e("div",{className:"feature-showcase__list flex gap-[16px]",children:u?.map((t,o)=>e("div",{className:"feature-showcase__item",children:a("div",{className:"feature-showcase__card relative",children:[e(s,{source:`${t.imageMob.url}`,className:"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden"}),e(s,{source:`${t.image.url} 1024`,className:"feature-showcase__image feature-showcase__image--desktop l:hidden"}),a("div",{className:"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(c,{as:"h2",size:3,html:t?.title,className:"feature-showcase__title mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))})]})});r.displayName="FeatureShowcase";var T=w(r);export{T as default};
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import f,{useRef as h,useImperativeHandle as n}from"react";import{Picture as s,Text as l,Heading as c}from"../../components/index.js";import{cn as _}from"../../helpers/utils.js";import{withLayout as w}from"../../shared/Styles.js";import{useExposure as v}from"../../hooks/useExposure.js";const g="image",N="feature_showcase",r=f.forwardRef(({data:i,className:x},m)=>{const{datalist:d=[],datalists:u=[]}=i||{},p=h(null);return v(p,{componentType:g,componentName:N,componentTitle:"Feature Showcase"}),n(m,()=>p.current),a("section",{ref:p,"data-ui-component-id":"FeatureShowcase",className:_("feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col",x),children:[e("div",{className:"feature-showcase__list flex gap-[16px]",children:d?.map((t,o)=>e("div",{className:"feature-showcase__item",children:a("div",{className:"feature-showcase__card relative",children:[e(s,{source:`${t.imageMob?.url}`,className:"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden"}),e(s,{source:`${t.image?.url} 1024`,className:"feature-showcase__image feature-showcase__image--desktop l:hidden"}),a("div",{className:"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(c,{as:"h2",size:3,html:t?.title,className:"feature-showcase__title mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))}),e("div",{className:"feature-showcase__list flex gap-[16px]",children:u?.map((t,o)=>e("div",{className:"feature-showcase__item",children:a("div",{className:"feature-showcase__card relative",children:[e(s,{source:`${t.imageMob?.url}`,className:"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden"}),e(s,{source:`${t.image?.url} 1024`,className:"feature-showcase__image feature-showcase__image--desktop l:hidden"}),a("div",{className:"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]",children:[e(c,{as:"h2",size:3,html:t?.title,className:"feature-showcase__title mt-[16px] md:text-[20px]"}),e(l,{as:"p",html:t.desc,size:4,className:"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]"})]})]})},o))})]})});r.displayName="FeatureShowcase";var T=w(r);export{T as default};
 //# sourceMappingURL=FeatureShowcase.js.map

package/dist/esm/biz-components/FeatureShowcase/FeatureShowcase.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/FeatureShowcase/FeatureShowcase.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(({ data, className }, ref) => {\n  const { datalist = [], datalists = [] } = data || {}\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: 'Feature Showcase',\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureShowcase\"\n      className={cn(\n        'feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col',\n        className\n      )}\n    >\n      <div className=\"feature-showcase__list flex gap-[16px]\">\n        {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                <Heading as={'h2'} size={3} html={item?.title} className=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className=\"feature-showcase__list flex gap-[16px]\">\n        {datalists?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                <Heading as={'h2'} size={3} html={item?.title} className=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\n\nFeatureShowcase.displayName = 'FeatureShowcase'\n\nexport default withLayout(FeatureShowcase)\n"],
-  "mappings": "aAqCc,cAAAA,EAEA,QAAAC,MAFA,oBApCd,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAAiD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,qHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,yCACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,SAAS,GAAG,GAAI,UAAU,iGAAiG,EACpJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,MAAM,GAAG,QAAS,UAAU,oEAAoE,EACzHnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,EACArB,EAAC,OAAI,UAAU,yCACZ,SAAAkB,GAAW,IAAI,CAACE,EAA2BC,IAC1CrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,SAAS,GAAG,GAAI,UAAU,iGAAiG,EACpJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,MAAM,GAAG,QAAS,UAAU,oEAAoE,EACzHnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,GACF,CAEJ,CAAC,EAEDR,EAAgB,YAAc,kBAE9B,IAAOS,EAAQb,EAAWI,CAAe",
+  "sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Picture, Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { FeatureShowcaseProps, FeatureShowcaseItem } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'feature_showcase'\n\nconst FeatureShowcase = React.forwardRef<HTMLDivElement, FeatureShowcaseProps>(({ data, className }, ref) => {\n  const { datalist = [], datalists = [] } = data || {}\n\n  const boxRef = useRef<HTMLDivElement>(null)\n\n  useExposure(boxRef, {\n    componentType,\n    componentName,\n    componentTitle: 'Feature Showcase',\n  })\n\n  useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n  return (\n    <section\n      ref={boxRef}\n      data-ui-component-id=\"FeatureShowcase\"\n      className={cn(\n        'feature-showcase flex gap-[16px] scrollbar-hidden l:flex-row l:overflow-hidden l:overflow-x-scroll laptop:flex-col',\n        className\n      )}\n    >\n      <div className=\"feature-showcase__list flex gap-[16px]\">\n        {datalist?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob?.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image?.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                <Heading as={'h2'} size={3} html={item?.title} className=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className=\"feature-showcase__list flex gap-[16px]\">\n        {datalists?.map((item: FeatureShowcaseItem, index: number) => (\n          <div key={index} className=\"feature-showcase__item\">\n            <div className=\"feature-showcase__card relative\">\n              <Picture source={`${item.imageMob?.url}`} className=\"feature-showcase__image feature-showcase__image--mobile w-[296px] rounded-[12px] laptop:hidden\" />\n              <Picture source={`${item.image?.url} 1024`} className=\"feature-showcase__image feature-showcase__image--desktop l:hidden\" />\n              <div className=\"feature-showcase__content absolute bottom-0 left-0 px-[16px] py-[12px] text-[#fff] laptop:px-[16px] laptop:py-[20px] desktop:px-[32px] desktop:py-[24px] lg-desktop:px-[32px] lg-desktop:py-[32px]\">\n                <Heading as={'h2'} size={3} html={item?.title} className=\"feature-showcase__title mt-[16px] md:text-[20px]\" />\n\n                <Text\n                  as={'p'}\n                  html={item.desc}\n                  size={4}\n                  className=\"feature-showcase__description mt-[4px] line-clamp-2 h-[40px] text-[14px] tablet:text-[14px] laptop:text-[14px] desktop:h-fit desktop:text-[16px] lg-desktop:text-[18px]\"\n                />\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\n\nFeatureShowcase.displayName = 'FeatureShowcase'\n\nexport default withLayout(FeatureShowcase)\n"],
+  "mappings": "aAqCc,cAAAA,EAEA,QAAAC,MAFA,oBApCd,OAAOC,GAAS,UAAAC,EAAQ,uBAAAC,MAA2B,QACnD,OAAS,WAAAC,EAAS,QAAAC,EAAM,WAAAC,MAAe,4BACvC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,mBAEhBC,EAAkBX,EAAM,WAAiD,CAAC,CAAE,KAAAY,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CAC3G,KAAM,CAAE,SAAAC,EAAW,CAAC,EAAG,UAAAC,EAAY,CAAC,CAAE,EAAIJ,GAAQ,CAAC,EAE7CK,EAAShB,EAAuB,IAAI,EAE1C,OAAAO,EAAYS,EAAQ,CAClB,cAAAR,EACA,cAAAC,EACA,eAAgB,kBAClB,CAAC,EAEDR,EAAoBY,EAAK,IAAMG,EAAO,OAAyB,EAG7DlB,EAAC,WACC,IAAKkB,EACL,uBAAqB,kBACrB,UAAWX,EACT,qHACAO,CACF,EAEA,UAAAf,EAAC,OAAI,UAAU,yCACZ,SAAAiB,GAAU,IAAI,CAACG,EAA2BC,IACzCrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,UAAU,GAAG,GAAI,UAAU,iGAAiG,EACrJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,OAAO,GAAG,QAAS,UAAU,oEAAoE,EAC1HnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,EACArB,EAAC,OAAI,UAAU,yCACZ,SAAAkB,GAAW,IAAI,CAACE,EAA2BC,IAC1CrB,EAAC,OAAgB,UAAU,yBACzB,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,UAAU,GAAG,GAAI,UAAU,iGAAiG,EACrJpB,EAACK,EAAA,CAAQ,OAAQ,GAAGe,EAAK,OAAO,GAAG,QAAS,UAAU,oEAAoE,EAC1HnB,EAAC,OAAI,UAAU,qMACb,UAAAD,EAACO,EAAA,CAAQ,GAAI,KAAM,KAAM,EAAG,KAAMa,GAAM,MAAO,UAAU,mDAAmD,EAE5GpB,EAACM,EAAA,CACC,GAAI,IACJ,KAAMc,EAAK,KACX,KAAM,EACN,UAAU,0KACZ,GACF,GACF,GAdQC,CAeV,CACD,EACH,GACF,CAEJ,CAAC,EAEDR,EAAgB,YAAc,kBAE9B,IAAOS,EAAQb,EAAWI,CAAe",
   "names": ["jsx", "jsxs", "React", "useRef", "useImperativeHandle", "Picture", "Text", "Heading", "cn", "withLayout", "useExposure", "componentType", "componentName", "FeatureShowcase", "data", "className", "ref", "datalist", "datalists", "boxRef", "item", "index", "FeatureShowcase_default"]
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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