npm - @anker-in/headless-ui - Versions diffs - 1.0.27 → 1.0.28 - Mend

@anker-in/headless-ui 1.0.27 → 1.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/dist/esm/biz-components/Evaluate/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: Img\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n  link?: string\n}\n\nexport interface EvaluateProps {\n  className?: string\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u4E3B\u9898\u8272*/\n    theme?: Theme\n    containerProps?: ContainerProps\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const handleRating = (num: number) => {\n    if (num) {\n      return Array.from(new Array(Number(num))) || []\n    }\n    return []\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n        <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n          <div className=\"flex-1\">\n            {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n            <div className=\"mt-1 flex items-center\">\n              {handleRating(data?.rating)?.map?.((_, index) => {\n                return (\n                  <div key={index} className=\"mr-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                      <path\n                        d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n                        fill=\"#F77234\"\n                      />\n                    </svg>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n          <div className=\"desktop:size-12 size-10 overflow-hidden\">\n            {data?.avatar?.url ? (\n              <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </Avatar>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex-1\">\n          <Text\n            className={cn(\n              'desktop:max-h-[151px] tablet:max-h-[140px]',\n              'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n            )}\n          >\n            {data?.description || ''}\n          </Text>\n        </div>\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          onClick={() => {\n            configuration?.event?.primaryButton(data, configuration?.index + 1)\n          }}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n          data-headless-nav-postion={`''#${configuration?.index + 1}`}\n        >\n          <div\n            className={cn(\n              'mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3',\n              configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n            )}\n          >\n            <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n              <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n            </div>\n            <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n              {data?.subTitle || ''}\n            </p>\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n  const { products, title, theme, ...ohter } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"evaluate-box relative z-10\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n            {title && <Title data={{ title: title }} />}\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'Evaluate' + key}\n              data={{ list: products, configuration: { ...ohter, title: title } }}\n              Slide={EvaluateItem}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          </div>\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nexport default withLayout(Evaluate)\n"],
-  "mappings": "aA+EU,OACiB,OAAAA,EADjB,QAAAC,MAAA,oBA9EV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BACpD,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,QAAAC,MAAY,2BAErB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAG5B,MAAMC,EAAgB,OAChBC,EAAgB,iBAiChBC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAMlB,EAAuB,IAAI,EACjCmB,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,OAAAT,EAAYO,EAAK,CACf,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,EAGCrB,EAAC,OACC,IAAKsB,EACL,UAAWhB,EACT,qGACAe,GAAe,QAAU,QAAU,cAAgB,eACnD,oGACA,qFACA,qBACF,EAEA,SAAApB,EAAC,OAAI,UAAU,4EACb,UAAAA,EAAC,OAAI,UAAWK,EAAG,iEAAiE,EAClF,UAAAL,EAAC,OAAI,UAAU,SACZ,UAAAmB,GAAM,MAAQpB,EAAC,MAAG,UAAU,mCAAoC,SAAAoB,GAAM,MAAM,EAAQ,KACrFpB,EAAC,OAAI,UAAU,yBACZ,SAAAuB,EAAaH,GAAM,MAAM,GAAG,MAAM,CAACK,EAAGC,IAEnC1B,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQ0B,CAOV,CAEH,EACH,GACF,EACA1B,EAAC,OAAI,UAAU,0CACZ,SAAAoB,GAAM,QAAQ,IACbnB,EAACS,EAAA,CAAO,UAAU,YAAY,aAAc,CAACU,GAAM,QAAQ,IACzD,UAAApB,EAACW,EAAA,CAAY,IAAKS,GAAM,QAAQ,IAAK,EACrCpB,EAACY,EAAA,CAAgB,SAAAQ,GAAM,MAAM,GAC/B,EACE,KACN,GACF,EACApB,EAAC,OAAI,UAAU,SACb,SAAAA,EAACc,EAAA,CACC,UAAWR,EACT,6CACA,gGACF,EAEC,SAAAc,GAAM,aAAe,GACxB,EACF,EACApB,EAAC,KACC,KAAMgB,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,QAAS,IAAM,CACbG,GAAe,OAAO,cAAcD,EAAMC,GAAe,MAAQ,CAAC,CACpE,EACA,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,aAAeA,GAAM,QAAQ,GACtF,4BAA2B,MAAMC,GAAe,MAAQ,CAAC,GAEzD,SAAApB,EAAC,OACC,UAAWK,EACT,yEACAe,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,UAAArB,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACO,EAAA,CAAQ,UAAU,sBAAsB,OAAQa,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EAC9F,EACApB,EAAC,KAAE,UAAU,qGACV,SAAAoB,GAAM,UAAY,GACrB,GACF,EACF,GACF,EACF,CAEJ,EAEMO,EAAWzB,EAAM,WAA0C,CAAC,CAAE,UAAA0B,EAAY,GAAI,KAAAR,EAAM,IAAAS,EAAK,GAAGC,CAAK,EAAGR,IAAQ,CAChH,KAAM,CAAE,SAAAS,EAAU,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAM,EAAId,EACvCe,EAAW/B,EAAuB,IAAI,EAC5C,OAAAD,EAAoBmB,EAAK,IAAMa,EAAS,OAAyB,EAG/DnC,EAAC,OAAI,UAAW4B,EAAW,IAAKO,EAC9B,SAAAnC,EAAC,OAAI,UAAU,6BACb,SAAAA,EAACa,EAAA,CAAW,GAAIO,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACrD,SAAAnB,EAAC,OAAI,IAAKqB,EAAK,UAAWhB,EAAG,SAAUsB,EAAW,CAAE,YAAaK,IAAU,MAAO,CAAC,EAChF,UAAAD,GAAShC,EAACK,EAAA,CAAM,KAAM,CAAE,MAAO2B,CAAM,EAAG,EACzChC,EAACQ,EAAA,CACC,UAAU,oBACV,GAAI,WAAaqB,EACjB,KAAM,CAAE,KAAME,EAAU,cAAe,CAAE,GAAGG,EAAO,MAAOF,CAAM,CAAE,EAClE,MAAOb,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,EACF,EACF,CAEJ,CAAC,EAED,IAAOiB,EAAQ3B,EAAWkB,CAAQ",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "withLayout", "Avatar", "AvatarImage", "AvatarFallback", "Container", "Text", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "ref", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "products", "title", "theme", "ohter", "innerRef", "Evaluate_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n  /** \u4EA7\u54C1\u56FE\u7247*/\n  img: Img\n  title: string\n  subTitle: string\n  description: string\n  avatar?: {\n    url: string\n  }\n  rating: number\n  link?: string\n}\n\nexport interface EvaluateProps {\n  className?: string\n  data: {\n    title?: string\n    products: EvaluateItem[]\n    /** \u5F62\u72B6 */\n    shape?: 'round' | 'square'\n    /** \u4E3B\u9898\u8272*/\n    theme?: Theme\n    containerProps?: ContainerProps\n  }\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: {\n    primaryButton?: (v: any, index: number) => void\n  }\n  key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const handleRating = (num: number) => {\n    const raw = Number(num)\n    const count = Number.isFinite(raw) ? Math.max(0, Math.floor(raw)) : 0\n    return Array.from({ length: count }) || []\n  }\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300',\n        configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n        'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n        'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n        'md-tablet:h-[360px]'\n      )}\n    >\n      <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n        <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n          <div className=\"flex-1\">\n            {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n            <div className=\"mt-1 flex items-center\">\n              {handleRating(data?.rating)?.map?.((_, index) => {\n                return (\n                  <div key={index} className=\"mr-1\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n                      <path\n                        d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n                        fill=\"#F77234\"\n                      />\n                    </svg>\n                  </div>\n                )\n              })}\n            </div>\n          </div>\n          <div className=\"desktop:size-12 size-10 overflow-hidden\">\n            {data?.avatar?.url ? (\n              <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n                <AvatarImage src={data?.avatar?.url} />\n                <AvatarFallback>{data?.title}</AvatarFallback>\n              </Avatar>\n            ) : null}\n          </div>\n        </div>\n        <div className=\"flex-1\">\n          <Text\n            className={cn(\n              'desktop:max-h-[151px] tablet:max-h-[140px]',\n              'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n            )}\n          >\n            {data?.description || ''}\n          </Text>\n        </div>\n        <a\n          href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n          onClick={() => {\n            configuration?.event?.primaryButton(data, configuration?.index + 1)\n          }}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n          data-headless-nav-postion={`''#${configuration?.index + 1}`}\n        >\n          <div\n            className={cn(\n              'mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3',\n              configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n            )}\n          >\n            <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n              <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n            </div>\n            <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n              {data?.subTitle || ''}\n            </p>\n          </div>\n        </a>\n      </div>\n    </div>\n  )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n  const { products, title, theme, ...ohter } = data\n  const innerRef = useRef<HTMLDivElement>(null)\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  return (\n    <div className={className} ref={innerRef}>\n      <div className=\"evaluate-box relative z-10\">\n        <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n          <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n            {title && <Title data={{ title: title }} />}\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'Evaluate' + key}\n              data={{ list: products, configuration: { ...ohter, title: title } }}\n              Slide={EvaluateItem}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          </div>\n        </Container>\n      </div>\n    </div>\n  )\n})\n\nexport default withLayout(Evaluate)\n"],
+  "mappings": "aA8EU,OACiB,OAAAA,EADjB,QAAAC,MAAA,oBA7EV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BACpD,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,QAAAC,MAAY,2BAErB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAG5B,MAAMC,EAAgB,OAChBC,EAAgB,iBAiChBC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAMlB,EAAuB,IAAI,EACjCmB,EAAgBC,GAAgB,CACpC,MAAMC,EAAM,OAAOD,CAAG,EAChBE,EAAQ,OAAO,SAASD,CAAG,EAAI,KAAK,IAAI,EAAG,KAAK,MAAMA,CAAG,CAAC,EAAI,EACpE,OAAO,MAAM,KAAK,CAAE,OAAQC,CAAM,CAAC,GAAK,CAAC,CAC3C,EAEA,OAAAX,EAAYO,EAAK,CACf,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,EAGCrB,EAAC,OACC,IAAKsB,EACL,UAAWhB,EACT,qGACAe,GAAe,QAAU,QAAU,cAAgB,eACnD,oGACA,qFACA,qBACF,EAEA,SAAApB,EAAC,OAAI,UAAU,4EACb,UAAAA,EAAC,OAAI,UAAWK,EAAG,iEAAiE,EAClF,UAAAL,EAAC,OAAI,UAAU,SACZ,UAAAmB,GAAM,MAAQpB,EAAC,MAAG,UAAU,mCAAoC,SAAAoB,GAAM,MAAM,EAAQ,KACrFpB,EAAC,OAAI,UAAU,yBACZ,SAAAuB,EAAaH,GAAM,MAAM,GAAG,MAAM,CAACO,EAAGC,IAEnC5B,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQ4B,CAOV,CAEH,EACH,GACF,EACA5B,EAAC,OAAI,UAAU,0CACZ,SAAAoB,GAAM,QAAQ,IACbnB,EAACS,EAAA,CAAO,UAAU,YAAY,aAAc,CAACU,GAAM,QAAQ,IACzD,UAAApB,EAACW,EAAA,CAAY,IAAKS,GAAM,QAAQ,IAAK,EACrCpB,EAACY,EAAA,CAAgB,SAAAQ,GAAM,MAAM,GAC/B,EACE,KACN,GACF,EACApB,EAAC,OAAI,UAAU,SACb,SAAAA,EAACc,EAAA,CACC,UAAWR,EACT,6CACA,gGACF,EAEC,SAAAc,GAAM,aAAe,GACxB,EACF,EACApB,EAAC,KACC,KAAMgB,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,QAAS,IAAM,CACbG,GAAe,OAAO,cAAcD,EAAMC,GAAe,MAAQ,CAAC,CACpE,EACA,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,aAAeA,GAAM,QAAQ,GACtF,4BAA2B,MAAMC,GAAe,MAAQ,CAAC,GAEzD,SAAApB,EAAC,OACC,UAAWK,EACT,yEACAe,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,UAAArB,EAAC,OAAI,UAAU,gEACb,SAAAA,EAACO,EAAA,CAAQ,UAAU,sBAAsB,OAAQa,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EAC9F,EACApB,EAAC,KAAE,UAAU,qGACV,SAAAoB,GAAM,UAAY,GACrB,GACF,EACF,GACF,EACF,CAEJ,EAEMS,EAAW3B,EAAM,WAA0C,CAAC,CAAE,UAAA4B,EAAY,GAAI,KAAAV,EAAM,IAAAW,EAAK,GAAGC,CAAK,EAAGV,IAAQ,CAChH,KAAM,CAAE,SAAAW,EAAU,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAM,EAAIhB,EACvCiB,EAAWjC,EAAuB,IAAI,EAC5C,OAAAD,EAAoBmB,EAAK,IAAMe,EAAS,OAAyB,EAG/DrC,EAAC,OAAI,UAAW8B,EAAW,IAAKO,EAC9B,SAAArC,EAAC,OAAI,UAAU,6BACb,SAAAA,EAACa,EAAA,CAAW,GAAIO,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACrD,SAAAnB,EAAC,OAAI,IAAKqB,EAAK,UAAWhB,EAAG,SAAUwB,EAAW,CAAE,YAAaK,IAAU,MAAO,CAAC,EAChF,UAAAD,GAASlC,EAACK,EAAA,CAAM,KAAM,CAAE,MAAO6B,CAAM,EAAG,EACzClC,EAACQ,EAAA,CACC,UAAU,oBACV,GAAI,WAAauB,EACjB,KAAM,CAAE,KAAME,EAAU,cAAe,CAAE,GAAGG,EAAO,MAAOF,CAAM,CAAE,EAClE,MAAOf,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,EACF,EACF,CAEJ,CAAC,EAED,IAAOmB,EAAQ7B,EAAWoB,CAAQ",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "withLayout", "Avatar", "AvatarImage", "AvatarFallback", "Container", "Text", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "ref", "handleRating", "num", "raw", "count", "_", "index", "Evaluate", "className", "key", "rest", "products", "title", "theme", "ohter", "innerRef", "Evaluate_default"]
 }

package/dist/esm/biz-components/Graphic/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useMediaQuery as G}from"react-responsive";import B,{useEffect as D,useImperativeHandle as E,useRef as w,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z,Picture as f,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as q}from"../VideoModal/index.js";import{TextModal as Y}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",_=({data:e,configuration:o})=>{const d=w(null),u=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return y(d,{componentType:n,componentName:p,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1}),t("div",{ref:d,className:m(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:a("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:k(e?.href||"",`${n}_${p}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),a("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[a("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[a("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:l=>{l.preventDefault(),l.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:l=>{l.preventDefault(),l.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:k(e?.href,`${n}_${p}`),"data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},T=B.forwardRef(({data:e,className:o},d)=>{const u=G({query:"(max-width: 768px)"}),l=w(null),[N,b]=r(!1),[g,M]=r(""),[I,V]=r(""),[C,P]=r(""),[$,x]=r(null),[S,v]=r(!1),h=i=>{const s=e?.items?.length>3,c=e?.items?.length>2;switch(i){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||c?2.3:2;default:return 1.2}};return E(d,()=>l.current),y(l,{componentType:n,componentName:p,componentTitle:e?.title}),D(()=>{const i=l.current?.querySelectorAll(".graphic-description");if(i&&i.length>0){let s=0;i.forEach(c=>{s=Math.max(s,c.offsetHeight)}),i.forEach(c=>{c.style.height=`${s}px`})}},[]),a("div",{className:m("graphicBlock",o),ref:l,children:[a("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(i,s)=>{b(!0),s?.isYouTube?V?.(s?.youtubeId||""):(M?.(s?.video?.url||""),P?.(s?.mobileVideo?.url||""))},onIconClick:i=>{v(!0),x(i)},title:e?.title}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(q,{visible:N,youTubeId:I,onCloseModal:()=>b(!1),videoUrl:u&&C||g}),t(Y,{textVisible:S,extension:$?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});T.displayName="Graphic";var se=H(T);export{se as default};
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useMediaQuery as G}from"react-responsive";import B,{useEffect as D,useImperativeHandle as E,useRef as w,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z,Picture as f,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as q}from"../VideoModal/index.js";import{TextModal as Y}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",_=({data:e,configuration:l})=>{const d=w(null),u=()=>{switch(l.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return y(d,{componentType:n,componentName:p,componentTitle:e?.title,componentDescription:e?.description,position:l?.index+1}),t("div",{ref:d,className:m(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":l?.itemShape==="round"}),children:a("div",{className:`relative block size-full overflow-hidden graphic-children ${e?.href?"cursor-pointer":""}`,children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:k(e?.href||"",`${n}_${p}`),className:"block size-full overflow-hidden","data-headless-nav-postion":`''#${l?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),a("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[a("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[a("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),l?.onVideoPlayBtnClick?.(l?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),l?.onIconClick?.(e,l)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:k(e?.href,`${n}_${p}`),"data-headless-nav-postion":`''#${l?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},T=B.forwardRef(({data:e,className:l},d)=>{const u=G({query:"(max-width: 768px)"}),o=w(null),[N,b]=r(!1),[g,M]=r(""),[I,V]=r(""),[C,$]=r(""),[P,x]=r(null),[S,v]=r(!1),h=i=>{const s=e?.items?.length>3,c=e?.items?.length>2;switch(i){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||c?2.3:2;default:return 1.2}};return E(d,()=>o.current),y(o,{componentType:n,componentName:p,componentTitle:e?.title}),D(()=>{const i=o.current?.querySelectorAll(".graphic-description");if(i&&i.length>0){let s=0;i.forEach(c=>{s=Math.max(s,c.offsetHeight)}),i.forEach(c=>{c.style.height=`${s}px`})}},[]),a("div",{className:m("graphicBlock",l),ref:o,children:[a("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(i,s)=>{b(!0),s?.isYouTube?V?.(s?.youtubeId||""):(M?.(s?.video?.url||""),$?.(s?.mobileVideo?.url||""))},onIconClick:i=>{v(!0),x(i)},title:e?.title}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(q,{visible:N,youTubeId:I,onCloseModal:()=>b(!1),videoUrl:u&&C||g}),t(Y,{textVisible:S,extension:P?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});T.displayName="Graphic";var se=H(T);export{se as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Graphic/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full cursor-pointer overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full cursor-pointer overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div\n          className={`relative block size-full overflow-hidden graphic-children ${data?.href ? 'cursor-pointer' : ''}`}\n        >\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as X,jsx as e,jsxs as n}from"react/jsx-runtime";import we,{forwardRef as ee,useCallback as K,useEffect as H,useImperativeHandle as Ce,useMemo as L,useRef as F,useState as M}from"react";import{Picture as Q,Text as y,Button as T,Container as te,Link as O,Heading as ce}from"../../components/index.js";import{withLayout as Se}from"../../shared/Styles.js";import{cn as N,atobID as De}from"../../helpers/utils.js";import Le,{useNavContext as I}from"./NavProvider.js";import{HeaderNavigationMenu as $,HeaderNavigationBlockType as W,HeaderNavigationActionBlockType as _}from"./types.js";import"react-responsive";import{debounce as Me}from"es-toolkit";import Pe from"jump.js";import{useGSAP as se}from"@gsap/react";import{gsap as ie}from"gsap";import{WithSidebar as de,WithSupports as ue,WithMulticol as me,WithGroupCategory as pe}from"./withCategory.js";import{Menu as ze,Close as be,User as Ee,RightArrow as He,LeftArrow as Be,DownArrow as ae,Polygon as Te}from"./icons/index.js";import $e from"../NavigationSearch/index.js";const Re=ee((t,a)=>{const{data:{headerNavigation:l}={},buildProps:c,event:r,profile:b,theme:d="light",isTop:u=!1,searchResult:i,onSearch:k,isSearching:s,keywords:w,onPrimaryNavClick:x,onSeriesProductClick:f,onSidebarNavClick:v,headerId:g,cartCount:m}=t,o=F(null),[p,C]=M(!1),[S,z]=M(!1),[D,U]=M(!1),[J,P]=M(!1),R=F(null),A=()=>{const G=document?.querySelector("body")?.offsetWidth||0;P(G<=1440)};H(()=>(A(),window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)}),[]),Ce(a,()=>R.current),H(()=>{R.current&&u&&Pe(R.current,{duration:0,offset:R.current?.getBoundingClientRect()?.bottom||0})},[u]),H(()=>{r&&(r.search=()=>C(!0))},[r]),se(()=>{o?.current&&p&&ie.fromTo(o.current,{height:0},{height:"auto",duration:.3})},[p]),H(()=>{document.documentElement.style.overflow=p?"hidden":"auto"},[p]);const ne=L(()=>l?.headerBar?.actions?.find(G=>G?.blockType===_.Search)?.searchBar?.[0]||{},[l]);return e(Le,{buildProps:c,profile:b,isMobile:J,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",d==="light"?"text-black":"text-white",{}),onClick:()=>U(!0),children:[e(Ae,{data:l,className:"hidden desktop:block !bg-white",theme:d,onNavItemClick:()=>U(!0),onPrimaryNavClick:x}),e(Oe,{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:ne,keywords:w,isSearching:s,searchResult:i,onSearch:G=>{k?.(G)},onClose:()=>{k?.(),C(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>C(!1)})]})]})})})}),Ae=ee((t,a)=>{const{data:l,onNavItemClick:c,className:r,theme:b,onPrimaryNavClick:d}=t,{event:u,profile:i}=I(),[k,s]=M(!1),w=L(()=>pe(l?.categories?.filter(h=>h?.pcShow)),[l]),[x,f]=M(null),[v,g]=M([]),m=F(null),[o,p]=M(!1),C=F(null),S=F(null),z=F(w.map(h=>Array(h?.length||0).fill(null)));H(()=>{w?.length&&g(w?.map((h,E)=>h?.map((B,j)=>({groupIndex:E,index:j,open:!1}))))},[w]);const D=L(()=>{let h=null;for(const E of v){for(const B of E)if(B.open){h=B;break}if(h)break}return h},[v]);H(()=>{document.documentElement.style.overflow=D?.open||o?"hidden":"auto"},[D?.open,o]);const U=(h,E,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()||[],q=j?.findIndex(re=>re?.id===w[E][B]?.id);h.stopPropagation(),c?.(),d?.(j[q],q),f(w[E][B]),g(re=>re.map(ke=>ke.map(Y=>Y.groupIndex===E&&Y.index===B?{...Y,open:!Y.open}:{...Y,open:!1})))}},J=()=>{g(h=>h.map(E=>E.map(B=>({...B,open:!1}))))},P=L(()=>{if(x)return x?.components?.[0]?.blockType},[x]),R=de(je,x),A=me(Fe,x),ne=ue(_e,{categoriesItem:x,currentNavItemRef:z.current?.[D?.groupIndex||0]?.[D?.index||0]}),G=L(()=>{switch(P){case W.Sidebar:return e(R,{});case W.Supports:return e(ne,{});case W.Multicol:return e(A,{});default:return null}},[P,x]),le=L(()=>l?.headerBar?.actions?.filter(h=>h?.pcShow),[l]),V=L(()=>le?.find(h=>h?.blockType===_.Profile),[le]),oe=K(()=>{p(h=>!h)},[]);return H(()=>{if(m?.current){const h=m.current;return h.addEventListener("click",oe),()=>{h.removeEventListener("click",oe)}}},[oe]),se(()=>{D?.open&&ie.fromTo(S?.current,{height:0},{height:"auto"})},[D?.open]),n(te,{className:N("relative h-[96px]",r),children:[n("div",{ref:C,onClick:J,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(ye,{}),e(xe,{ref:m,actions:le,activeStatus:o})]}),e("div",{className:"flex justify-between",children:w?.map((h,E)=>e("div",{className:"flex gap-3",children:h?.map((B,j)=>e("div",{ref:q=>{z.current[E][j]=q},className:"group cursor-pointer",children:n("div",{className:"relative",children:[n("div",{className:"flex items-center gap-1 pb-4",onClick:q=>U(q,E,j),children:[e(y,{html:B.text,className:"text-sm font-bold leading-[1.4]"}),e(ae,{className:N("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":D?.groupIndex===E&&D?.index===j,"opacity-100":k&&D?.groupIndex===E&&D?.index===j})})]}),e("div",{className:N("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":D?.groupIndex===E&&D?.index===j},b==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},B.id))},`groupCategory-${E}`))})]}),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:!(D?.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:G}),e("div",{className:"flex-1 bg-transparent",onClick:J})]}),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(X,{children:[e(y,{html:i?.nick_name||V?.welcome,className:"text-sm font-bold"}),e("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),e("div",{className:"mt-2",children:V?.profiles?.map(h=>e(Z,{className:"py-2",label:h?.title,href:h?.url},h.id))})]}):n(X,{children:[e(Te,{className:"absolute -top-2 text-white right-[46px] z-30"}),e(y,{html:V?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:V?.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:V?.primaryButton||"Join Now",className:"font-bold"})}),e(T,{variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:e(y,{html:V?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>p(!1)})]})]})}),je=we.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:l,onSidebarNavClick:c}=I(),[r,b]=M([]),[d,u]=M(-1),i=F(null),k=K(()=>{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=L(()=>{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?.[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]),w=K((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(te,{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((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),c?.(f,v)},children:[e(y,{html:f.label,className:"p-4 text-sm font-bold leading-[1.4]"}),g&&e(ae,{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),c?.(m,o)},className:N("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((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(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(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(ce,{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(fe,{seriesLabel:s?.label,product:g,isCollection:s?.isCollection},`seriesProductItem-${m}`))]})]},`seriesItem-${v}`))})]})]})}),Fe=({multicolMetadata:t})=>{const a=F(null);return e("div",{ref:a,children:e(te,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((l,c)=>e("div",{className:"w-1/4",children:e(ve,{item:l})},`multicolItem-${l?.label}-${c}`))})})})},_e=({supportsMetadata:t,currentNavItemRef:a})=>{const l=F(null),[c,r]=M(null),[b,d]=M(0);H(()=>{if(l?.current){const i=l?.current?.getBoundingClientRect();d(i.height)}},[l]);const u=Me(()=>{if(a){const i=a.getBoundingClientRect();r(i)}},500);return H(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]),H(()=>{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:b},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))})})},fe=({product:t,isCollection:a,position:l,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:b}=I();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=L(()=>`/products/${d?.handle}?variant=${De(u?.id)}`,[d?.handle,u?.id]),k=L(()=>d?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2),[d?.tags]);return u?.availableForSale?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(O,{href:i,onClick:s=>{s.preventDefault(),window.open(i),b?.(d,l||0,c)},className:"no-underline hover:text-current",children: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},ve=({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(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: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(O,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(Q,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),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"})]})]})})]}),Oe=ee(({data:t,className:a,onPrimaryNavClick:l},c)=>{const r=L(()=>pe(t?.categories?.filter(P=>P?.mobileShow)),[t]),{currentMenu:b,setCurrentMenu:d,subSubCategory:u}=I(),[i,k]=M(!1),[s,w]=M(0),[x,f]=M(null),v=F(null);H(()=>{if(v?.current&&i){const P=v?.current?.getBoundingClientRect();w(window?.innerHeight-(P?.bottom||0))}},[i]),se(()=>{ie.fromTo(v.current,{height:0},{height:s,duration:.3})},[s]),H(()=>{document.documentElement.style.overflow=i?"hidden":"auto"},[i]);const g=L(()=>x?.components?.[0]?.blockType,[x]),m=ue(Ue,{categoriesItem:x}),o=de(We,x),p=me(Ge,x),C=L(()=>{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=K(()=>{k(!1),w(0),d&&d($.Primary)},[k,w,d]),z=L(()=>t?.headerBar?.actions?.filter(P=>P?.mobileShow&&P?.blockType!==_.Profile),[t]),D=L(()=>t?.headerBar?.actions?.find(P=>P?.mobileShow&&P?.blockType===_.Profile)||{},[t]),U=L(()=>{switch(b){case $.Primary:return e(Je,{actions:z,menuOpen:i,onMenuOpenClose:()=>{k(!1),w(0)},onMenuOpenClick:()=>k(!0)});case $.Secondary:return e(Ne,{title:x?.text,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Primary)});case $.Third:return e(Ne,{title:u?.label,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Secondary)});default:return null}},[i,b,d,x,z,u,S]),J=K((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):d?.($.Secondary)},[r,d]);return n(te,{className:N("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:b===$.Primary?e(Ie,{categories:r,onPrimaryMenuClick:J,onPrimaryNavClick:l,profileAction:D}):C})]})}),Ie=({categories:t,onPrimaryMenuClick:a,profileAction:l,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=I();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,d)=>n("div",{className:"",children:[b?.map((u,i)=>e(Z,{label:u.text,onClick:()=>{const s=(t?.flat()||[])?.findIndex(w=>w?.id===t[d][i]?.id);a(d,i),c?.(u,s)},icon:u.components?.[0]?.icon},u.id)),e("div",{className:N("my-2 h-px w-full bg-[#E5E5E7]",{hidden:d===t.length-1})})]},`groupCategory-${d}`))}),e(Ke,{profileAction:l})]})},We=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:l,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:b,setCurrentSeriesMetadata:d,currentSeriesMetadata:u,buildProps:i,onSidebarNavClick:k}=I(),[s,w]=M([]),[x,f]=M([]);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=K((o,p)=>{c&&c($.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=i?.categories?.[o?.collections]||{};d?.({label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:S?.products}]})}else d?.(C)},[a,t,c,b,d]),g=L(()=>a?.find(o=>!!o?.guide)?.guide,[a,t]);return L(()=>{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(Z,{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(z=>z.label.toLowerCase()===o?.label?.toLowerCase())||{};let S={};if(o?.collections){const z=i?.categories?.[o?.collections]||{};S={label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:z?.products}]}}else S=C;return n("div",{children:[Reflect.ownKeys(o).length>0&&e(ge,{matchSeriesMetadata:S,onSubSubCategoryItemClick:()=>{k?.(o,p),f(z=>z.map((D,U)=>({...D,open:U===p?!D.open:D.open})))},expanded:!!x?.find(z=>z.index===p)?.open}),x?.find(z=>z.index===p)?.open&&n(X,{children:[e(he,{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(ge,{matchSeriesMetadata:u}),e(he,{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,b,r,d,u])},ge=({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(ae,{className:N("size-5",{"rotate-180":l})})]}),he=({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(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(ce,{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((c,r)=>e(fe,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${l}-${r}`))]})]},`seriesItem-${l}`))}),Ue=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(Z,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ge=({multicolMetadata:t})=>{const a=L(()=>!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,c)=>e("div",{children:e(ve,{item:l,allPicture:a})},`multicolItem-${l?.label}-${c}`))})},Ke=({profileAction:t})=>{const[a,l]=M(!1),{profile:c,event:r}=I();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(Ee,{})}),e(y,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(ae,{className:N("size-5 laptop:size-4",{"rotate-180":a})})]}),c?.email&&e("div",{className:"mt-4",children:t?.profiles?.map(b=>e(Z,{label:b?.title,href:b?.url},b.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(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))})]}),!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]"})})]})]})},Je=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:l,actions:c})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(ye,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(xe,{actions:c}),t?e(be,{className:"size-5",onClick:()=>a()}):e(ze,{className:"size-5",onClick:()=>l()})]})]}),ye=()=>{const{payloadData:t,isMobile:a}=I();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}})},xe=ee(({actions:t,activeStatus:a=!1},l)=>{const{event:c,cartCount:r}=I(),[b,d]=M(null),u=K((i,k)=>{switch(d(k),i?.blockType){case _.Search:c?.search?.();break;case _.Cart:c?.cart?.();break;case _.Profile:c?.profile?.();break;case _.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((i,k)=>n("div",{className:"relative",ref:i.blockType===_.Profile?l:null,onClick:()=>u(i,k),children:[e(y,{html:i.icon,className:N("cursor-pointer size-5",{"text-brand-0":a&&b===k})}),i.blockType===_.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))})}),Ne=({title:t,onMenuOpenClose:a,onMenuBackClick:l})=>n("div",{className:"flex h-full items-center gap-3",children:[e(Be,{className:"size-5",onClick:()=>l()}),e(y,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e(be,{className:"size-5",onClick:()=>a()})]}),Z=({label:t,href:a,onClick:l,active:c,icon:r,className:b})=>e("div",{className:N("flex cursor-pointer items-center justify-between py-4",b),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:N("text-sm font-bold leading-[1.4]",{underline:r})}),r&&e(y,{html:r})]}),e(He,{className:N("size-5 laptop:size-4",{"rotate-90":c})})]})});var ut=Se(Re);export{ut as default};
+"use client";import{Fragment as X,jsx as e,jsxs as n}from"react/jsx-runtime";import we,{forwardRef as ee,useCallback as K,useEffect as H,useImperativeHandle as Ce,useMemo as L,useRef as F,useState as M}from"react";import{Picture as Q,Text as y,Button as T,Container as te,Link as O,Heading as ce}from"../../components/index.js";import{withLayout as Se}from"../../shared/Styles.js";import{cn as N,atobID as De}from"../../helpers/utils.js";import Le,{useNavContext as I}from"./NavProvider.js";import{HeaderNavigationMenu as $,HeaderNavigationBlockType as W,HeaderNavigationActionBlockType as _}from"./types.js";import"react-responsive";import{debounce as Me}from"es-toolkit";import Pe from"jump.js";import{useGSAP as se}from"@gsap/react";import{gsap as ie}from"gsap";import{WithSidebar as de,WithSupports as ue,WithMulticol as me,WithGroupCategory as pe}from"./withCategory.js";import{Menu as ze,Close as be,User as Ee,RightArrow as He,LeftArrow as Be,DownArrow as ae,Polygon as Te}from"./icons/index.js";import $e from"../NavigationSearch/index.js";const Re=ee((t,a)=>{const{data:{headerNavigation:l}={},buildProps:c,event:r,profile:b,theme:d="light",isTop:u=!1,searchResult:i,onSearch:k,isSearching:s,keywords:w,onPrimaryNavClick:x,onSeriesProductClick:f,onSidebarNavClick:v,headerId:g,cartCount:m}=t,o=F(null),[p,C]=M(!1),[S,z]=M(!1),[D,U]=M(!1),[J,P]=M(!1),R=F(null),A=()=>{const G=document?.querySelector("body")?.offsetWidth||0;P(G<=1440)};H(()=>(A(),window.addEventListener("resize",A),()=>{window.removeEventListener("resize",A)}),[]),Ce(a,()=>R.current),H(()=>{R.current&&u&&Pe(R.current,{duration:0,offset:R.current?.getBoundingClientRect()?.bottom||0})},[u]),H(()=>{r&&(r.search=()=>C(!0))},[r]),se(()=>{o?.current&&p&&ie.fromTo(o.current,{height:0},{height:"auto",duration:.3})},[p]),H(()=>{document.documentElement.style.overflow=p?"hidden":"auto"},[p]);const ne=L(()=>l?.headerBar?.actions?.find(G=>G?.blockType===_.Search)?.searchBar?.[0]||{},[l]);return e(Le,{buildProps:c,profile:b,isMobile:J,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",d==="light"?"text-black":"text-white",{}),onClick:()=>U(!0),children:[e(Ae,{data:l,className:"hidden desktop:block !bg-white",theme:d,onNavItemClick:()=>U(!0),onPrimaryNavClick:x}),e(Oe,{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:ne,keywords:w,isSearching:s,searchResult:i,onSearch:G=>{k?.(G)},onClose:()=>{k?.(),C(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>C(!1)})]})]})})})}),Ae=ee((t,a)=>{const{data:l,onNavItemClick:c,className:r,theme:b,onPrimaryNavClick:d}=t,{event:u,profile:i}=I(),[k,s]=M(!1),w=L(()=>pe(l?.categories?.filter(h=>h?.pcShow)),[l]),[x,f]=M(null),[v,g]=M([]),m=F(null),[o,p]=M(!1),C=F(null),S=F(null),z=F(w.map(h=>Array(h?.length||0).fill(null)));H(()=>{w?.length&&g(w?.map((h,E)=>h?.map((B,j)=>({groupIndex:E,index:j,open:!1}))))},[w]);const D=L(()=>{let h=null;for(const E of v){for(const B of E)if(B.open){h=B;break}if(h)break}return h},[v]);H(()=>{document.documentElement.style.overflow=D?.open||o?"hidden":"auto"},[D?.open,o]);const U=(h,E,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()||[],q=j?.findIndex(re=>re?.id===w[E][B]?.id);h.stopPropagation(),c?.(),d?.(j[q],q),f(w[E][B]),g(re=>re.map(ke=>ke.map(Y=>Y.groupIndex===E&&Y.index===B?{...Y,open:!Y.open}:{...Y,open:!1})))}},J=()=>{g(h=>h.map(E=>E.map(B=>({...B,open:!1}))))},P=L(()=>{if(x)return x?.components?.[0]?.blockType},[x]),R=de(je,x),A=me(Fe,x),ne=ue(_e,{categoriesItem:x,currentNavItemRef:z.current?.[D?.groupIndex||0]?.[D?.index||0]}),G=L(()=>{switch(P){case W.Sidebar:return e(R,{});case W.Supports:return e(ne,{});case W.Multicol:return e(A,{});default:return null}},[P,x]),le=L(()=>l?.headerBar?.actions?.filter(h=>h?.pcShow),[l]),V=L(()=>le?.find(h=>h?.blockType===_.Profile),[le]),oe=K(()=>{p(h=>!h)},[]);return H(()=>{if(m?.current){const h=m.current;return h.addEventListener("click",oe),()=>{h.removeEventListener("click",oe)}}},[oe]),se(()=>{D?.open&&ie.fromTo(S?.current,{height:0},{height:"auto"})},[D?.open]),n(te,{className:N("relative h-[96px]",r),children:[n("div",{ref:C,onClick:J,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(ye,{}),e(xe,{ref:m,actions:le,activeStatus:o})]}),e("div",{className:"flex justify-between",children:w?.map((h,E)=>e("div",{className:"flex gap-3",children:h?.map((B,j)=>e("div",{ref:q=>{z.current[E][j]=q},className:"group cursor-pointer",children:n("div",{className:"relative",children:[n("div",{className:"flex items-center gap-1 pb-4",onClick:q=>U(q,E,j),children:[e(y,{html:B.text,className:"text-sm font-bold leading-[1.4]"}),e(ae,{className:N("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":D?.groupIndex===E&&D?.index===j,"opacity-100":k&&D?.groupIndex===E&&D?.index===j})})]}),e("div",{className:N("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":D?.groupIndex===E&&D?.index===j},b==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},B.id))},`groupCategory-${E}`))})]}),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:!(D?.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:G}),e("div",{className:"flex-1 bg-transparent",onClick:J})]}),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(X,{children:[e(y,{html:i?.nick_name||V?.welcome,className:"text-sm font-bold"}),e("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),e("div",{className:"mt-2",children:V?.profiles?.map(h=>e(Z,{className:"py-2",label:h?.title,href:h?.url},h.id))})]}):n(X,{children:[e(Te,{className:"absolute -top-2 text-white right-[46px] z-30"}),e(y,{html:V?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:V?.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:V?.primaryButton||"Join Now",className:"font-bold"})}),e(T,{variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:e(y,{html:V?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>p(!1)})]})]})}),je=we.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:l,onSidebarNavClick:c}=I(),[r,b]=M([]),[d,u]=M(-1),i=F(null),k=K(()=>{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=L(()=>{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?.[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]),w=K((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(te,{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((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),c?.(f,v)},children:[e(y,{html:f.label,className:"p-4 text-sm font-bold leading-[1.4]"}),g&&e(ae,{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),c?.(m,o)},className:N("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((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(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(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(ce,{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(fe,{seriesLabel:s?.label,product:g,isCollection:s?.isCollection},`seriesProductItem-${m}`))]})]},`seriesItem-${v}`))})]})]})}),Fe=({multicolMetadata:t})=>{const a=F(null);return e("div",{ref:a,children:e(te,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((l,c)=>e("div",{className:"w-1/4",children:e(ve,{item:l})},`multicolItem-${l?.label}-${c}`))})})})},_e=({supportsMetadata:t,currentNavItemRef:a})=>{const l=F(null),[c,r]=M(null),[b,d]=M(0);H(()=>{if(l?.current){const i=l?.current?.getBoundingClientRect();d(i.height)}},[l]);const u=Me(()=>{if(a){const i=a.getBoundingClientRect();r(i)}},500);return H(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]),H(()=>{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:b},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))})})},fe=({product:t,isCollection:a,position:l,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:b}=I();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=L(()=>`/products/${d?.handle}?variant=${De(u?.id)}`,[d?.handle,u?.id]),k=L(()=>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),b?.(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(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: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},ve=({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(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: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(O,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(Q,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),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"})]})]})})]}),Oe=ee(({data:t,className:a,onPrimaryNavClick:l},c)=>{const r=L(()=>pe(t?.categories?.filter(P=>P?.mobileShow)),[t]),{currentMenu:b,setCurrentMenu:d,subSubCategory:u}=I(),[i,k]=M(!1),[s,w]=M(0),[x,f]=M(null),v=F(null);H(()=>{if(v?.current&&i){const P=v?.current?.getBoundingClientRect();w(window?.innerHeight-(P?.bottom||0))}},[i]),se(()=>{ie.fromTo(v.current,{height:0},{height:s,duration:.3})},[s]),H(()=>{document.documentElement.style.overflow=i?"hidden":"auto"},[i]);const g=L(()=>x?.components?.[0]?.blockType,[x]),m=ue(Ue,{categoriesItem:x}),o=de(We,x),p=me(Ge,x),C=L(()=>{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=K(()=>{k(!1),w(0),d&&d($.Primary)},[k,w,d]),z=L(()=>t?.headerBar?.actions?.filter(P=>P?.mobileShow&&P?.blockType!==_.Profile),[t]),D=L(()=>t?.headerBar?.actions?.find(P=>P?.mobileShow&&P?.blockType===_.Profile)||{},[t]),U=L(()=>{switch(b){case $.Primary:return e(Je,{actions:z,menuOpen:i,onMenuOpenClose:()=>{k(!1),w(0)},onMenuOpenClick:()=>k(!0)});case $.Secondary:return e(Ne,{title:x?.text,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Primary)});case $.Third:return e(Ne,{title:u?.label,onMenuOpenClose:S,onMenuBackClick:()=>d?.($.Secondary)});default:return null}},[i,b,d,x,z,u,S]),J=K((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):d?.($.Secondary)},[r,d]);return n(te,{className:N("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:b===$.Primary?e(Ie,{categories:r,onPrimaryMenuClick:J,onPrimaryNavClick:l,profileAction:D}):C})]})}),Ie=({categories:t,onPrimaryMenuClick:a,profileAction:l,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=I();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,d)=>n("div",{className:"",children:[b?.map((u,i)=>e(Z,{label:u.text,onClick:()=>{const s=(t?.flat()||[])?.findIndex(w=>w?.id===t[d][i]?.id);a(d,i),c?.(u,s)},icon:u.components?.[0]?.icon},u.id)),e("div",{className:N("my-2 h-px w-full bg-[#E5E5E7]",{hidden:d===t.length-1})})]},`groupCategory-${d}`))}),e(Ke,{profileAction:l})]})},We=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:l,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:b,setCurrentSeriesMetadata:d,currentSeriesMetadata:u,buildProps:i,onSidebarNavClick:k}=I(),[s,w]=M([]),[x,f]=M([]);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=K((o,p)=>{c&&c($.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=i?.categories?.[o?.collections]||{};d?.({label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:S?.products}]})}else d?.(C)},[a,t,c,b,d]),g=L(()=>a?.find(o=>!!o?.guide)?.guide,[a,t]);return L(()=>{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(Z,{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(z=>z.label.toLowerCase()===o?.label?.toLowerCase())||{};let S={};if(o?.collections){const z=i?.categories?.[o?.collections]||{};S={label:C?.label,isCollection:!0,banner:C?.banner,primary:C?.primary,series:[{products:z?.products}]}}else S=C;return n("div",{children:[Reflect.ownKeys(o).length>0&&e(ge,{matchSeriesMetadata:S,onSubSubCategoryItemClick:()=>{k?.(o,p),f(z=>z.map((D,U)=>({...D,open:U===p?!D.open:D.open})))},expanded:!!x?.find(z=>z.index===p)?.open}),x?.find(z=>z.index===p)?.open&&n(X,{children:[e(he,{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(ge,{matchSeriesMetadata:u}),e(he,{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,b,r,d,u])},ge=({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(ae,{className:N("size-5",{"rotate-180":l})})]}),he=({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(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(ce,{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((c,r)=>e(fe,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${l}-${r}`))]})]},`seriesItem-${l}`))}),Ue=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(Z,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ge=({multicolMetadata:t})=>{const a=L(()=>!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,c)=>e("div",{children:e(ve,{item:l,allPicture:a})},`multicolItem-${l?.label}-${c}`))})},Ke=({profileAction:t})=>{const[a,l]=M(!1),{profile:c,event:r}=I();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(Ee,{})}),e(y,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(ae,{className:N("size-5 laptop:size-4",{"rotate-180":a})})]}),c?.email&&e("div",{className:"mt-4",children:t?.profiles?.map(b=>e(Z,{label:b?.title,href:b?.url},b.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(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))})]}),!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]"})})]})]})},Je=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:l,actions:c})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(ye,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(xe,{actions:c}),t?e(be,{className:"size-5",onClick:()=>a()}):e(ze,{className:"size-5",onClick:()=>l()})]})]}),ye=()=>{const{payloadData:t,isMobile:a}=I();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}})},xe=ee(({actions:t,activeStatus:a=!1},l)=>{const{event:c,cartCount:r}=I(),[b,d]=M(null),u=K((i,k)=>{switch(d(k),i?.blockType){case _.Search:c?.search?.();break;case _.Cart:c?.cart?.();break;case _.Profile:c?.profile?.();break;case _.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((i,k)=>n("div",{className:"relative",ref:i.blockType===_.Profile?l:null,onClick:()=>u(i,k),children:[e(y,{html:i.icon,className:N("cursor-pointer size-5",{"text-brand-0":a&&b===k})}),i.blockType===_.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))})}),Ne=({title:t,onMenuOpenClose:a,onMenuBackClick:l})=>n("div",{className:"flex h-full items-center gap-3",children:[e(Be,{className:"size-5",onClick:()=>l()}),e(y,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e(be,{className:"size-5",onClick:()=>a()})]}),Z=({label:t,href:a,onClick:l,active:c,icon:r,className:b})=>e("div",{className:N("flex cursor-pointer items-center justify-between py-4",b),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:N("text-sm font-bold leading-[1.4]",{underline:r})}),r&&e(y,{html:r})]}),e(He,{className:N("size-5 laptop:size-4",{"rotate-90":c})})]})});var ut=Se(Re);export{ut as default};
 //# sourceMappingURL=index.js.map