@anker-in/headless-ui 1.0.19-temp-101705 → 1.0.20-alpha.102201

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

@@ -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 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\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        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\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": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "React", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
 }

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

@@ -0,0 +1,2 @@
+"use strict";"use client";var n=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var h=(l,o)=>{for(var d in o)n(l,d,{get:o[d],enumerable:!0})},g=(l,o,d,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of x(o))!u.call(l,a)&&a!==d&&n(l,a,{get:()=>o[a],enumerable:!(s=f(o,a))||s.enumerable});return l};var v=l=>g(n({},"__esModule",{value:!0}),l);var k={};h(k,{default:()=>N});module.exports=v(k);var e=require("react/jsx-runtime"),i=require("../../helpers/utils.js"),w=require("../SwiperBox/index.js"),c=require("../../shared/Styles.js"),p=require("../../components/gird.js"),r=require("../../components/index.js");const b=l=>{const{data:o,className:d}=l,{productsTab:s,shape:a}=o;return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:(0,i.cn)("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:(0,e.jsx)(p.Grid,{className:(0,i.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",d),children:s?.map((t,m)=>(0,e.jsxs)(p.GridItem,{span:t.span,className:(0,i.cn)("text-info-primary relative w-full overflow-hidden",a==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":t.theme==="dark"}),children:[(0,e.jsx)(r.Picture,{source:t.img.url,className:"size-full",imgClassName:""}),(0,e.jsxs)("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[t.title&&(0,e.jsx)(r.Text,{html:t.title,as:"p",className:"line-clamp-2 desktop:text-[32px] laptop:text-2xl text-xl font-bold"}),t.description&&(0,e.jsx)(r.Text,{html:t.description,className:"line-clamp-2 desktop:text-lg text-sm font-bold"})]})]},m))})}),(0,e.jsx)("div",{className:"tablet:hidden block text-[#1D1D1F]",children:(0,e.jsx)("div",{className:" flex gap-[12px] flex-wrap",children:s?.map((t,m)=>(0,e.jsxs)("div",{className:(0,i.cn)("text-info-primary relative overflow-hidden",a==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":t.theme==="dark"},t?.fullWidth==="true"?"w-full flex-none":" w-[173px]"),children:[(0,e.jsx)(r.Picture,{source:t.mobileImg.url,className:"size-full",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[t.title&&(0,e.jsx)(r.Text,{html:t.title,as:"p",className:"text-xl font-bold leading-[1.2]"}),t.description&&(0,e.jsx)(r.Text,{html:t.description,className:"text-xl font-bold"})]})]},m))})})]})};var N=(0,c.withLayout)(b);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GraphicMore/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype GraphicMoreType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n  className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}>\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item.img.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n                  {item.title && (\n                    <Text\n                      html={item.title}\n                      as=\"p\"\n                      className=\"line-clamp-2 desktop:text-[32px] laptop:text-2xl text-xl font-bold\"\n                    />\n                  )}\n                  {item.description && (\n                    <Text html={item.description} className=\"line-clamp-2 desktop:text-lg text-sm font-bold\" />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className='tablet:hidden block text-[#1D1D1F]'>\n        <div className=\" flex gap-[12px] flex-wrap\">\n        {productsTab?.map((it, ind) => {\n          return (\n            <div\n              key={ind}\n              className={cn(\n                'text-info-primary relative overflow-hidden',\n                shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                { 'aiui-dark': it.theme === 'dark' },\n                it?.fullWidth === 'true' \n                  ? 'w-full flex-none'  // \u5360\u6EE1\u6574\u884C\n                  : ' w-[173px]' // \u666E\u901A\u5143\u7D20\n              )}\n            >\n              <Picture source={it.mobileImg.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n              <div className=\"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n                {it.title && <Text html={it.title} as=\"p\" className=\"text-xl font-bold leading-[1.2]\" />}\n                {it.description && <Text html={it.description} className=\"text-xl font-bold\" />}\n              </div>\n            </div>\n          )\n        })}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
+  "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA+BI,IAAAI,EAAA,6BA9BJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAoB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,SACE,oBACE,oBAAC,OAAI,aAAW,MAAG,sBAAuB,sEAAsE,EAC9G,mBAAC,QAAK,aAAW,MAAG,wCAAyCC,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,WAAQ,OAAQA,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,GAAG,KACrE,QAAC,OAAI,UAAU,oJACZ,UAAAA,EAAK,UACJ,OAAC,QACC,KAAMA,EAAK,MACX,GAAG,IACH,UAAU,qEACZ,EAEDA,EAAK,gBACJ,OAAC,QAAK,KAAMA,EAAK,YAAa,UAAU,iDAAiD,GAE7F,IAvBKC,CAwBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OAAI,UAAU,6BACd,SAAAH,GAAa,IAAI,CAACI,EAAIC,OAEnB,QAAC,OAEC,aAAW,MACT,6CACAJ,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,EAAG,QAAU,MAAO,EACnCA,GAAI,YAAc,OACd,mBACA,YACN,EAEA,oBAAC,WAAQ,OAAQA,EAAG,UAAU,IAAK,UAAU,YAAY,aAAa,sBAAsB,KAC5F,QAAC,OAAI,UAAU,2FACZ,UAAAA,EAAG,UAAS,OAAC,QAAK,KAAMA,EAAG,MAAO,GAAG,IAAI,UAAU,kCAAkC,EACrFA,EAAG,gBAAe,OAAC,QAAK,KAAMA,EAAG,YAAa,UAAU,oBAAoB,GAC/E,IAdKC,CAeP,CAEH,EACD,EACF,GACF,CAEJ,EAEA,IAAOjB,KAAQ,cAAWQ,CAAW",
+  "names": ["GraphicMore_exports", "__export", "GraphicMore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind"]
+}

package/dist/cjs/biz-components/HeaderNavigation/NavProvider.d.ts

@@ -4,7 +4,8 @@ import { HeaderNavigationMenu } from './types.js';
 import type { UserProfile } from './types.js';
 interface NavContextType {
     buildProps: {
-        products: Product[];
+        products?: Product[];
+        categories?: Record<string, any>;
     };
     event?: {
         search?: () => void;
@@ -19,10 +20,10 @@ interface NavContextType {
     payloadData: any;
     currentMenu?: HeaderNavigationMenu;
     setCurrentMenu?: (menu: HeaderNavigationMenu) => void;
-    thirdNavTitle?: string;
-    setThirdNavTitle?: (title: string) => void;
-    matchSeriesMetadata?: any;
-    setMatchSeriesMetadata?: (metadata: any) => void;
+    currentSeriesMetadata?: any;
+    setCurrentSeriesMetadata?: (metadata: any) => void;
+    subSubCategory?: any;
+    setSubSubCategory?: (category: any) => void;
 }
 export declare const NavContext: React.Context<NavContextType>;
 export declare const useNavContext: () => NavContextType;

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

@@ -1,2 +1,2 @@
-"use strict";var u=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var o in e)u(t,o,{get:e[o],enumerable:!0})},C=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of N(e))!E.call(t,n)&&n!==o&&u(t,n,{get:()=>e[n],enumerable:!(a=M(e,n))||a.enumerable});return t};var _=t=>C(u({},"__esModule",{value:!0}),t);var R={};y(R,{NavContext:()=>s,default:()=>A,useNavContext:()=>S});module.exports=_(R);var p=require("react/jsx-runtime"),r=require("react"),d=require("./types.js");const T={isMobile:!1,payloadData:{},buildProps:{products:[]},currentMenu:d.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{},thirdNavTitle:"",setThirdNavTitle:()=>{},matchSeriesMetadata:{},setMatchSeriesMetadata:()=>{}},s=(0,r.createContext)(T),S=()=>{if(!(0,r.useContext)(s))throw new Error("useNavContext must be used in <NavProvider>");return(0,r.useContext)(s)},m=(t,e)=>{switch(e.type){case"SET_CURRENT_MENU":return{...t,currentMenu:e.value};case"SET_THIRD_NAV_TITLE":return{...t,thirdNavTitle:e.value};case"SET_MATCH_SERIES_METADATA":return{...t,matchSeriesMetadata:e.value}}},h=({children:t,...e})=>{const[o,a]=(0,r.useReducer)(m,{...T,currentMenu:d.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{}}),n=(0,r.useCallback)(i=>a({type:"SET_CURRENT_MENU",value:i}),[a]),v=(0,r.useCallback)(i=>a({type:"SET_THIRD_NAV_TITLE",value:i}),[a]),c=(0,r.useCallback)(i=>a({type:"SET_MATCH_SERIES_METADATA",value:i}),[a]),l=(0,r.useMemo)(()=>({...o,setCurrentMenu:n,setThirdNavTitle:v,setMatchSeriesMetadata:c}),[n,v,c,o]);return(0,p.jsx)(s.Provider,{value:{...l,...e},children:t})};var A=h;
+"use strict";var s=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var M=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},l=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of E(e))!T.call(t,n)&&n!==o&&s(t,n,{get:()=>e[n],enumerable:!(a=S(e,n))||a.enumerable});return t};var N=t=>l(s({},"__esModule",{value:!0}),t);var m={};M(m,{NavContext:()=>i,default:()=>b,useNavContext:()=>_});module.exports=N(m);var y=require("react/jsx-runtime"),r=require("react"),c=require("./types.js");const p={isMobile:!1,payloadData:{},buildProps:{products:[],categories:{}},currentMenu:c.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{},currentSeriesMetadata:{},setCurrentSeriesMetadata:()=>{}},i=(0,r.createContext)(p),_=()=>{if(!(0,r.useContext)(i))throw new Error("useNavContext must be used in <NavProvider>");return(0,r.useContext)(i)},R=(t,e)=>{switch(e.type){case"SET_CURRENT_MENU":return{...t,currentMenu:e.value};case"SET_CURRENT_SERIES_METADATA":return{...t,currentSeriesMetadata:e.value};case"SET_SUB_SUB_CATEGORY":return{...t,subSubCategory:e.value}}},U=({children:t,...e})=>{const[o,a]=(0,r.useReducer)(R,{...p,currentMenu:c.HeaderNavigationMenu.Primary,setCurrentMenu:()=>{}}),n=(0,r.useCallback)(u=>a({type:"SET_CURRENT_MENU",value:u}),[a]),d=(0,r.useCallback)(u=>a({type:"SET_CURRENT_SERIES_METADATA",value:u}),[a]),v=(0,r.useCallback)(u=>a({type:"SET_SUB_SUB_CATEGORY",value:u}),[a]),C=(0,r.useMemo)(()=>({...o,setCurrentMenu:n,setCurrentSeriesMetadata:d,setSubSubCategory:v}),[n,d,v,o]);return(0,y.jsx)(i.Provider,{value:{...C,...e},children:t})};var b=U;
 //# sourceMappingURL=NavProvider.js.map

package/dist/cjs/biz-components/HeaderNavigation/NavProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/NavProvider.tsx"],
-  "sourcesContent": ["import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react'\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport type { UserProfile } from './types.js'\n\ninterface NavContextType {\n  buildProps: {\n    products: Product[] // \u4EA7\u54C1\u6570\u636E\n  }\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n    join?: () => void\n    login?: () => void\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  isMobile?: boolean\n  payloadData: any\n  currentMenu?: HeaderNavigationMenu // \u5F53\u524D\u83DC\u5355\n  setCurrentMenu?: (menu: HeaderNavigationMenu) => void // \u8BBE\u7F6E\u5F53\u524D\u83DC\u5355\n  thirdNavTitle?: string // \u7B2C\u4E09\u7EA7\u5BFC\u822A\u6807\u9898\n  setThirdNavTitle?: (title: string) => void // \u8BBE\u7F6E\u7B2C\u4E09\u7EA7\u5BFC\u822A\u6807\u9898\n  matchSeriesMetadata?: any // \u5339\u914D\u7684\u7CFB\u5217\u5143\u6570\u636E\n  setMatchSeriesMetadata?: (metadata: any) => void // \u8BBE\u7F6E\u5339\u914D\u7684\u7CFB\u5217\u5143\u6570\u636E\n}\n\nconst initialState: NavContextType = {\n  isMobile: false,\n  payloadData: {},\n  buildProps: {\n    products: [],\n  },\n  currentMenu: HeaderNavigationMenu.Primary,\n  setCurrentMenu: () => {},\n  thirdNavTitle: '',\n  setThirdNavTitle: () => {},\n  matchSeriesMetadata: {},\n  setMatchSeriesMetadata: () => {},\n}\n\ntype Action =\n  | {\n      type: 'SET_CURRENT_MENU'\n      value: HeaderNavigationMenu\n    }\n  | {\n      type: 'SET_THIRD_NAV_TITLE'\n      value: string\n    }\n  | {\n      type: 'SET_MATCH_SERIES_METADATA'\n      value: any\n    }\n\nexport const NavContext = createContext<NavContextType>(initialState)\n\nexport const useNavContext = () => {\n  const context = useContext(NavContext)\n  if (!context) {\n    throw new Error('useNavContext must be used in <NavProvider>')\n  }\n  return useContext(NavContext)\n}\n\nconst reducer = (state: NavContextType, action: Action) => {\n  switch (action.type) {\n    case 'SET_CURRENT_MENU': {\n      return {\n        ...state,\n        currentMenu: action.value,\n      }\n    }\n    case 'SET_THIRD_NAV_TITLE': {\n      return {\n        ...state,\n        thirdNavTitle: action.value,\n      }\n    }\n    case 'SET_MATCH_SERIES_METADATA': {\n      return {\n        ...state,\n        matchSeriesMetadata: action.value,\n      }\n    }\n  }\n}\n\nconst NavProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & NavContextType) => {\n  const [state, dispatch] = useReducer(reducer, {\n    ...initialState,\n    currentMenu: HeaderNavigationMenu.Primary,\n    setCurrentMenu: () => {},\n  })\n\n  const setCurrentMenu = useCallback(\n    (value: HeaderNavigationMenu) => {\n      return dispatch({ type: 'SET_CURRENT_MENU', value })\n    },\n    [dispatch]\n  )\n\n  const setThirdNavTitle = useCallback(\n    (value: string) => {\n      return dispatch({ type: 'SET_THIRD_NAV_TITLE', value })\n    },\n    [dispatch]\n  )\n\n  const setMatchSeriesMetadata = useCallback(\n    (value: any) => {\n      return dispatch({ type: 'SET_MATCH_SERIES_METADATA', value })\n    },\n    [dispatch]\n  )\n\n  const value = useMemo(\n    () => ({\n      ...state,\n      setCurrentMenu,\n      setThirdNavTitle,\n      setMatchSeriesMetadata,\n    }),\n    [setCurrentMenu, setThirdNavTitle, setMatchSeriesMetadata, state]\n  )\n\n  return <NavContext.Provider value={{ ...value, ...rest }}>{children}</NavContext.Provider>\n}\n\nexport default NavProvider\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,YAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAL,GAoIS,IAAAM,EAAA,6BApITC,EAAmF,iBAEnFC,EAAqC,sBA0BrC,MAAMC,EAA+B,CACnC,SAAU,GACV,YAAa,CAAC,EACd,WAAY,CACV,SAAU,CAAC,CACb,EACA,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,EACvB,cAAe,GACf,iBAAkB,IAAM,CAAC,EACzB,oBAAqB,CAAC,EACtB,uBAAwB,IAAM,CAAC,CACjC,EAgBaP,KAAa,iBAA8BO,CAAY,EAEvDL,EAAgB,IAAM,CAEjC,GAAI,IADY,cAAWF,CAAU,EAEnC,MAAM,IAAI,MAAM,6CAA6C,EAE/D,SAAO,cAAWA,CAAU,CAC9B,EAEMQ,EAAU,CAACC,EAAuBC,IAAmB,CACzD,OAAQA,EAAO,KAAM,CACnB,IAAK,mBACH,MAAO,CACL,GAAGD,EACH,YAAaC,EAAO,KACtB,EAEF,IAAK,sBACH,MAAO,CACL,GAAGD,EACH,cAAeC,EAAO,KACxB,EAEF,IAAK,4BACH,MAAO,CACL,GAAGD,EACH,oBAAqBC,EAAO,KAC9B,CAEJ,CACF,EAEMC,EAAc,CAAC,CACnB,SAAAC,EACA,GAAGC,CACL,IAEuB,CACrB,KAAM,CAACJ,EAAOK,CAAQ,KAAI,cAAWN,EAAS,CAC5C,GAAGD,EACH,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,CACzB,CAAC,EAEKQ,KAAiB,eACpBC,GACQF,EAAS,CAAE,KAAM,mBAAoB,MAAAE,CAAM,CAAC,EAErD,CAACF,CAAQ,CACX,EAEMG,KAAmB,eACtBD,GACQF,EAAS,CAAE,KAAM,sBAAuB,MAAAE,CAAM,CAAC,EAExD,CAACF,CAAQ,CACX,EAEMI,KAAyB,eAC5BF,GACQF,EAAS,CAAE,KAAM,4BAA6B,MAAAE,CAAM,CAAC,EAE9D,CAACF,CAAQ,CACX,EAEME,KAAQ,WACZ,KAAO,CACL,GAAGP,EACH,eAAAM,EACA,iBAAAE,EACA,uBAAAC,CACF,GACA,CAACH,EAAgBE,EAAkBC,EAAwBT,CAAK,CAClE,EAEA,SAAO,OAACT,EAAW,SAAX,CAAoB,MAAO,CAAE,GAAGgB,EAAO,GAAGH,CAAK,EAAI,SAAAD,EAAS,CACtE,EAEA,IAAOX,EAAQU",
-  "names": ["NavProvider_exports", "__export", "NavContext", "NavProvider_default", "useNavContext", "__toCommonJS", "import_jsx_runtime", "import_react", "import_types", "initialState", "reducer", "state", "action", "NavProvider", "children", "rest", "dispatch", "setCurrentMenu", "value", "setThirdNavTitle", "setMatchSeriesMetadata"]
+  "sourcesContent": ["import React, { createContext, useCallback, useContext, useMemo, useReducer } from 'react'\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\nimport { HeaderNavigationMenu } from './types.js'\nimport type { UserProfile } from './types.js'\n\ninterface NavContextType {\n  buildProps: {\n    products?: Product[] // \u4EA7\u54C1\u6570\u636E\n    categories?: Record<string, any> // \u5206\u7C7B\u6570\u636E\n  }\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n    join?: () => void\n    login?: () => void\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  isMobile?: boolean\n  payloadData: any\n  currentMenu?: HeaderNavigationMenu // \u5F53\u524D\u83DC\u5355\n  setCurrentMenu?: (menu: HeaderNavigationMenu) => void // \u8BBE\u7F6E\u5F53\u524D\u83DC\u5355\n  currentSeriesMetadata?: any // \u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n  setCurrentSeriesMetadata?: (metadata: any) => void // \u8BBE\u7F6E\u5F53\u524D\u7CFB\u5217\u5143\u6570\u636E\n  subSubCategory?: any // \u5B50\u5B50\u5206\u7C7B\n  setSubSubCategory?: (category: any) => void // \u8BBE\u7F6E\u5B50\u5B50\u5206\u7C7B\n}\n\nconst initialState: NavContextType = {\n  isMobile: false,\n  payloadData: {},\n  buildProps: {\n    products: [],\n    categories: {},\n  },\n  currentMenu: HeaderNavigationMenu.Primary,\n  setCurrentMenu: () => {},\n  currentSeriesMetadata: {},\n  setCurrentSeriesMetadata: () => {},\n}\n\ntype Action =\n  | {\n      type: 'SET_CURRENT_MENU'\n      value: HeaderNavigationMenu\n    }\n  | {\n      type: 'SET_CURRENT_SERIES_METADATA'\n      value: any\n    }\n  | {\n      type: 'SET_SUB_SUB_CATEGORY'\n      value: any\n    }\n\nexport const NavContext = createContext<NavContextType>(initialState)\n\nexport const useNavContext = () => {\n  const context = useContext(NavContext)\n  if (!context) {\n    throw new Error('useNavContext must be used in <NavProvider>')\n  }\n  return useContext(NavContext)\n}\n\nconst reducer = (state: NavContextType, action: Action) => {\n  switch (action.type) {\n    case 'SET_CURRENT_MENU': {\n      return {\n        ...state,\n        currentMenu: action.value,\n      }\n    }\n    case 'SET_CURRENT_SERIES_METADATA': {\n      return {\n        ...state,\n        currentSeriesMetadata: action.value,\n      }\n    }\n    case 'SET_SUB_SUB_CATEGORY': {\n      return {\n        ...state,\n        subSubCategory: action.value,\n      }\n    }\n  }\n}\n\nconst NavProvider = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactNode\n} & NavContextType) => {\n  const [state, dispatch] = useReducer(reducer, {\n    ...initialState,\n    currentMenu: HeaderNavigationMenu.Primary,\n    setCurrentMenu: () => {},\n  })\n\n  const setCurrentMenu = useCallback(\n    (value: HeaderNavigationMenu) => {\n      return dispatch({ type: 'SET_CURRENT_MENU', value })\n    },\n    [dispatch]\n  )\n\n  const setCurrentSeriesMetadata = useCallback(\n    (value: any) => {\n      return dispatch({ type: 'SET_CURRENT_SERIES_METADATA', value })\n    },\n    [dispatch]\n  )\n\n  const setSubSubCategory = useCallback((value: any) => {\n    return dispatch({ type: 'SET_SUB_SUB_CATEGORY', value })\n  }, [dispatch])\n\n  const value = useMemo(\n    () => ({\n      ...state,\n      setCurrentMenu,\n      setCurrentSeriesMetadata,\n      setSubSubCategory,\n    }),\n    [setCurrentMenu, setCurrentSeriesMetadata, setSubSubCategory, state]\n  )\n\n  return <NavContext.Provider value={{ ...value, ...rest }}>{children}</NavContext.Provider>\n}\n\nexport default NavProvider\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,EAAA,YAAAC,EAAA,kBAAAC,IAAA,eAAAC,EAAAL,GAiIS,IAAAM,EAAA,6BAjITC,EAAmF,iBAEnFC,EAAqC,sBA2BrC,MAAMC,EAA+B,CACnC,SAAU,GACV,YAAa,CAAC,EACd,WAAY,CACV,SAAU,CAAC,EACX,WAAY,CAAC,CACf,EACA,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,EACvB,sBAAuB,CAAC,EACxB,yBAA0B,IAAM,CAAC,CACnC,EAgBaP,KAAa,iBAA8BO,CAAY,EAEvDL,EAAgB,IAAM,CAEjC,GAAI,IADY,cAAWF,CAAU,EAEnC,MAAM,IAAI,MAAM,6CAA6C,EAE/D,SAAO,cAAWA,CAAU,CAC9B,EAEMQ,EAAU,CAACC,EAAuBC,IAAmB,CACzD,OAAQA,EAAO,KAAM,CACnB,IAAK,mBACH,MAAO,CACL,GAAGD,EACH,YAAaC,EAAO,KACtB,EAEF,IAAK,8BACH,MAAO,CACL,GAAGD,EACH,sBAAuBC,EAAO,KAChC,EAEF,IAAK,uBACH,MAAO,CACL,GAAGD,EACH,eAAgBC,EAAO,KACzB,CAEJ,CACF,EAEMC,EAAc,CAAC,CACnB,SAAAC,EACA,GAAGC,CACL,IAEuB,CACrB,KAAM,CAACJ,EAAOK,CAAQ,KAAI,cAAWN,EAAS,CAC5C,GAAGD,EACH,YAAa,uBAAqB,QAClC,eAAgB,IAAM,CAAC,CACzB,CAAC,EAEKQ,KAAiB,eACpBC,GACQF,EAAS,CAAE,KAAM,mBAAoB,MAAAE,CAAM,CAAC,EAErD,CAACF,CAAQ,CACX,EAEMG,KAA2B,eAC9BD,GACQF,EAAS,CAAE,KAAM,8BAA+B,MAAAE,CAAM,CAAC,EAEhE,CAACF,CAAQ,CACX,EAEMI,KAAoB,eAAaF,GAC9BF,EAAS,CAAE,KAAM,uBAAwB,MAAAE,CAAM,CAAC,EACtD,CAACF,CAAQ,CAAC,EAEPE,KAAQ,WACZ,KAAO,CACL,GAAGP,EACH,eAAAM,EACA,yBAAAE,EACA,kBAAAC,CACF,GACA,CAACH,EAAgBE,EAA0BC,EAAmBT,CAAK,CACrE,EAEA,SAAO,OAACT,EAAW,SAAX,CAAoB,MAAO,CAAE,GAAGgB,EAAO,GAAGH,CAAK,EAAI,SAAAD,EAAS,CACtE,EAEA,IAAOX,EAAQU",
+  "names": ["NavProvider_exports", "__export", "NavContext", "NavProvider_default", "useNavContext", "__toCommonJS", "import_jsx_runtime", "import_react", "import_types", "initialState", "reducer", "state", "action", "NavProvider", "children", "rest", "dispatch", "setCurrentMenu", "value", "setCurrentSeriesMetadata", "setSubSubCategory"]
 }

package/dist/cjs/biz-components/HeaderNavigation/icons/Polygon.js

@@ -0,0 +1,2 @@
+"use strict";var r=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var p=(o,t)=>{for(var l in t)r(o,l,{get:t[l],enumerable:!0})},s=(o,t,l,g)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of h(t))!i.call(o,e)&&e!==l&&r(o,e,{get:()=>t[e],enumerable:!(g=w(t,e))||g.enumerable});return o};var f=o=>s(r({},"__esModule",{value:!0}),o);var c={};p(c,{default:()=>a});module.exports=f(c);var n=require("react/jsx-runtime"),m=require("react");const v=o=>(0,n.jsx)("svg",{width:"16",height:"8",viewBox:"0 0 16 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:(0,n.jsx)("path",{d:"M8 0L16 8H0L8 0Z",fill:"currentColor"})});var a=v;
+//# sourceMappingURL=Polygon.js.map

package/dist/cjs/biz-components/HeaderNavigation/icons/Polygon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/HeaderNavigation/icons/Polygon.tsx"],
+  "sourcesContent": ["import React from 'react'\n\nconst Polygon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"16\" height=\"8\" viewBox=\"0 0 16 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path d=\"M8 0L16 8H0L8 0Z\" fill=\"currentColor\" />\n    </svg>\n  )\n}\n\nexport default Polygon"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAKM,IAAAI,EAAA,6BALNC,EAAkB,iBAElB,MAAMC,EAAWC,MAEb,OAAC,OAAI,MAAM,KAAK,OAAO,IAAI,QAAQ,WAAW,KAAK,OAAO,MAAM,6BAA8B,GAAGA,EAC/F,mBAAC,QAAK,EAAE,mBAAmB,KAAK,eAAe,EACjD,EAIJ,IAAOL,EAAQI",
+  "names": ["Polygon_exports", "__export", "Polygon_default", "__toCommonJS", "import_jsx_runtime", "import_react", "Polygon", "props"]
+}

package/dist/cjs/biz-components/HeaderNavigation/icons/index.d.ts

@@ -8,4 +8,5 @@ import User from './User.js';
 import RightArrow from './RightArrow.js';
 import LeftArrow from './LeftArrow.js';
 import DownArrow from './DownArrow.js';
-export { AnkerLogo, Menu, Search, Cart, Close, User, RightArrow, LeftArrow, DownArrow, LogoLine };
+import Polygon from './Polygon.js';
+export { AnkerLogo, Menu, Search, Cart, Close, User, RightArrow, LeftArrow, DownArrow, LogoLine, Polygon };

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

@@ -1,2 +1,2 @@
-"use strict";var k=Object.create;var f=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var M=(r,o)=>{for(var t in o)f(r,t,{get:o[t],enumerable:!0})},c=(r,o,t,C)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of u(o))!D.call(r,i)&&i!==t&&f(r,i,{get:()=>o[i],enumerable:!(C=l(o,i))||C.enumerable});return r};var m=(r,o,t)=>(t=r!=null?k(x(r)):{},c(o||!r||!r.__esModule?f(t,"default",{value:r,enumerable:!0}):t,r)),R=r=>c(f({},"__esModule",{value:!0}),r);var S={};M(S,{AnkerLogo:()=>p.default,Cart:()=>A.default,Close:()=>L.default,DownArrow:()=>s.default,LeftArrow:()=>h.default,LogoLine:()=>e.default,Menu:()=>n.default,RightArrow:()=>a.default,Search:()=>w.default,User:()=>g.default});module.exports=R(S);var p=m(require("./AnkerLogo.js")),e=m(require("./LogoLine.js")),n=m(require("./Menu.js")),w=m(require("./Search.js")),A=m(require("./Cart.js")),L=m(require("./Close.js")),g=m(require("./User.js")),a=m(require("./RightArrow.js")),h=m(require("./LeftArrow.js")),s=m(require("./DownArrow.js"));
+"use strict";var k=Object.create;var f=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var M=(o,r)=>{for(var t in r)f(o,t,{get:r[t],enumerable:!0})},c=(o,r,t,C)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of x(r))!D.call(o,i)&&i!==t&&f(o,i,{get:()=>r[i],enumerable:!(C=u(r,i))||C.enumerable});return o};var m=(o,r,t)=>(t=o!=null?k(y(o)):{},c(r||!o||!o.__esModule?f(t,"default",{value:o,enumerable:!0}):t,o)),P=o=>c(f({},"__esModule",{value:!0}),o);var R={};M(R,{AnkerLogo:()=>p.default,Cart:()=>w.default,Close:()=>A.default,DownArrow:()=>l.default,LeftArrow:()=>h.default,LogoLine:()=>e.default,Menu:()=>n.default,Polygon:()=>s.default,RightArrow:()=>a.default,Search:()=>g.default,User:()=>L.default});module.exports=P(R);var p=m(require("./AnkerLogo.js")),e=m(require("./LogoLine.js")),n=m(require("./Menu.js")),g=m(require("./Search.js")),w=m(require("./Cart.js")),A=m(require("./Close.js")),L=m(require("./User.js")),a=m(require("./RightArrow.js")),h=m(require("./LeftArrow.js")),l=m(require("./DownArrow.js")),s=m(require("./Polygon.js"));
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/biz-components/HeaderNavigation/icons/index.ts"],
-  "sourcesContent": ["import AnkerLogo from './AnkerLogo.js'\nimport LogoLine from './LogoLine.js'\nimport Menu from './Menu.js'\nimport Search from './Search.js'\nimport Cart from './Cart.js'\nimport Close from './Close.js'\nimport User from './User.js'\nimport RightArrow from './RightArrow.js'\nimport LeftArrow from './LeftArrow.js'\nimport DownArrow from './DownArrow.js'\n\nexport { AnkerLogo, Menu, Search, Cart, Close, User, RightArrow, LeftArrow, DownArrow, LogoLine }\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,QAAA,WAAAC,QAAA,YAAAC,QAAA,gBAAAC,QAAA,gBAAAC,QAAA,eAAAC,QAAA,WAAAC,QAAA,iBAAAC,QAAA,aAAAC,QAAA,WAAAC,UAAA,eAAAC,EAAAZ,GAAA,IAAAa,EAAsB,6BACtBC,EAAqB,4BACrBC,EAAiB,wBACjBC,EAAmB,0BACnBC,EAAiB,wBACjBC,EAAkB,yBAClBC,EAAiB,wBACjBC,EAAuB,8BACvBC,EAAsB,6BACtBC,EAAsB",
-  "names": ["icons_exports", "__export", "AnkerLogo", "Cart", "Close", "DownArrow", "LeftArrow", "LogoLine", "Menu", "RightArrow", "Search", "User", "__toCommonJS", "import_AnkerLogo", "import_LogoLine", "import_Menu", "import_Search", "import_Cart", "import_Close", "import_User", "import_RightArrow", "import_LeftArrow", "import_DownArrow"]
+  "sourcesContent": ["import AnkerLogo from './AnkerLogo.js'\nimport LogoLine from './LogoLine.js'\nimport Menu from './Menu.js'\nimport Search from './Search.js'\nimport Cart from './Cart.js'\nimport Close from './Close.js'\nimport User from './User.js'\nimport RightArrow from './RightArrow.js'\nimport LeftArrow from './LeftArrow.js'\nimport DownArrow from './DownArrow.js'\nimport Polygon from './Polygon.js'\n\nexport { AnkerLogo, Menu, Search, Cart, Close, User, RightArrow, LeftArrow, DownArrow, LogoLine, Polygon }\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,QAAA,WAAAC,QAAA,YAAAC,QAAA,gBAAAC,QAAA,gBAAAC,QAAA,eAAAC,QAAA,WAAAC,QAAA,cAAAC,QAAA,iBAAAC,QAAA,aAAAC,QAAA,WAAAC,UAAA,eAAAC,EAAAb,GAAA,IAAAc,EAAsB,6BACtBC,EAAqB,4BACrBC,EAAiB,wBACjBC,EAAmB,0BACnBC,EAAiB,wBACjBC,EAAkB,yBAClBC,EAAiB,wBACjBC,EAAuB,8BACvBC,EAAsB,6BACtBC,EAAsB,6BACtBC,EAAoB",
+  "names": ["icons_exports", "__export", "AnkerLogo", "Cart", "Close", "DownArrow", "LeftArrow", "LogoLine", "Menu", "Polygon", "RightArrow", "Search", "User", "__toCommonJS", "import_AnkerLogo", "import_LogoLine", "import_Menu", "import_Search", "import_Cart", "import_Close", "import_User", "import_RightArrow", "import_LeftArrow", "import_DownArrow", "import_Polygon"]
 }

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

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