@anker-in/headless-ui 1.1.17-alpha.1765958185654 → 1.1.17-alpha.1765962952174
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/cjs/components/board.js +1 -1
- package/dist/cjs/components/board.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/components/board.js +1 -1
- package/dist/esm/components/board.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/board.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { Container } from './container.js'\nimport Link from './link.js'\n\n/**\n * Board - \u54C1\u724C\u6807\u8BC6\u680F\n *\n * @description Anker Innovations\u54C1\u724C\u6807\u8BC6\u680F\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u663E\u793A\u516C\u53F8Logo\u548C\u54C1\u724C\u4FE1\u606F\n */\nconst Board = ({ href, data }: { href?: string; data?: any }) => {\n return (\n <Link href={href} asChild={!href}>\n <div className=\"relative z-[46] h-[30px]\">\n <Container childClassName=\"flex !bg-[#080A0F] items-center justify-between\" className=\"h-full\">\n <div className=\"flex h-full items-center gap-2\">\n {data?.leftIcon?.map?.((item: any, index: number) => (\n <Link key={index} href={item.link} asChild={!item.link} className=\"desktop:block hidden h-full\">\n <div\n className=\"desktop:block hidden h-fit transition-all duration-200 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:transition-all [&_svg_path]:duration-200 [&_svg_path]:[fill:#75787F] [&_svg_path]:hover:[fill:#FFFFFF]\"\n style={{ filter: 'none' }}\n dangerouslySetInnerHTML={{ __html: item.logo || '' }}\n />\n </Link>\n ))}\n </div>\n <div className=\"flex h-full items-center justify-end gap-2\">\n {data?.rightIcon?.map?.((item: any, index: number) => (\n <Link key={index} href={item.link} asChild={!item.link} className=\"flex h-full items-center\">\n <div\n className=\"h-fit [&_svg]:h-full [&_svg]:w-auto\"\n style={{ filter: 'none' }}\n dangerouslySetInnerHTML={{ __html: item.logo || '' }}\n />\n </Link>\n ))}\n </div>\n </Container>\n </div>\n </Link>\n )\n}\n\n// const AnkerInnovations = (props: React.SVGProps<SVGSVGElement>) => {\n// return (\n// <svg width=\"148\" height=\"10\" viewBox=\"0 0 148 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n// <path\n// d=\"M88.5391 1.66872C90.8392 1.6688 92.7041 3.53461 92.7041 5.83474C92.7039 8.13468 90.839 9.9997 88.5391 9.99977C86.239 9.99977 84.3733 8.13473 84.373 5.83474C84.373 3.53456 86.2389 1.66872 88.5391 1.66872ZM106.479 1.66872C107.484 1.66872 108.407 2.02531 109.127 2.61892L109.477 1.86208H110.645V9.79958H109.477L109.13 9.0486C108.409 9.64225 107.486 9.99977 106.479 9.99977C104.179 9.99954 102.314 8.13458 102.313 5.83474C102.313 3.53471 104.179 1.66896 106.479 1.66872ZM126.684 1.66872C128.984 1.66872 130.849 3.53456 130.849 5.83474C130.848 8.13473 128.984 9.99977 126.684 9.99977C124.384 9.99972 122.519 8.13469 122.519 5.83474C122.519 3.5346 124.383 1.66878 126.684 1.66872ZM144.748 1.66188C146.602 1.66198 147.794 2.66292 147.823 4.20778H146.278C146.249 3.44345 145.631 3.04577 144.719 3.04567C143.806 3.04567 143.247 3.429 143.247 4.0027C143.247 4.7082 144.07 4.85598 145.026 5.0027L145.025 5.00173C146.365 5.23788 147.998 5.48784 147.998 7.44509C147.998 8.98988 146.716 9.99001 144.775 9.99001C142.834 9.98986 141.568 8.93061 141.524 7.28298H143.128C143.172 8.12086 143.878 8.54763 144.835 8.54763C145.703 8.5475 146.38 8.17982 146.38 7.51833C146.38 6.76851 145.527 6.5909 144.556 6.42946C143.232 6.20932 141.673 5.90104 141.673 4.0613C141.673 2.6337 142.893 1.66188 144.748 1.66188ZM115.1 1.85427H117.434V3.24685H115.102V6.85524C115.102 7.79295 115.614 8.32097 116.582 8.32106H117.478V9.80251L116.275 9.8406C114.545 9.84058 113.474 8.76932 113.474 7.02419V3.24685H112.285V2.93532L114.577 0.000751495H115.1V1.85427ZM63.7627 9.79958H62.1367V-0.000225067H63.7627V9.79958ZM97.5566 7.32302L100.108 1.85427H101.884L98.1787 9.79958H96.9355L93.2305 1.85427H95.0059L97.5566 7.32302ZM120.852 9.79958H119.226V3.24587H120.852V9.79958ZM67.8779 2.61892C68.6117 2.02787 69.5403 1.67165 70.5557 1.67165H70.5566C72.1803 1.67165 73.498 2.98838 73.498 4.61208V9.7986H71.8711V4.96462C71.8711 4.00413 71.0923 3.22462 70.1318 3.22438C68.9018 3.22438 67.9045 4.221 67.9043 5.45095V9.7986H66.2725V1.67165H67.4404L67.8779 2.61892ZM77.3252 2.61892C78.059 2.02789 78.9876 1.67165 80.0029 1.67165H80.0039C81.6276 1.67165 82.9443 2.98838 82.9443 4.61208V9.7986H81.3184V4.96462C81.3184 4.00399 80.5388 3.22438 79.5781 3.22438C78.3483 3.2246 77.3518 4.22113 77.3516 5.45095V9.7986H75.7197V1.67165H76.8877L77.3252 2.61892ZM133.85 1.67165L134.287 2.61892C135.021 2.02792 135.95 1.67173 136.965 1.67165H136.967C138.59 1.67181 139.907 2.98848 139.907 4.61208V9.7986H138.28V4.96462C138.28 4.00403 137.502 3.22446 136.541 3.22438C135.311 3.22438 134.315 4.221 134.314 5.45095V9.7986H132.683V1.67165H133.85ZM88.5391 3.29567C87.1368 3.29567 86 4.43248 86 5.83474C86.0002 7.23681 87.1369 8.3738 88.5391 8.3738C89.9411 8.37372 91.0779 7.23676 91.0781 5.83474C91.0781 4.43253 89.9412 3.29575 88.5391 3.29567ZM106.479 3.29567C105.076 3.29591 103.94 4.43263 103.94 5.83474C103.941 7.23666 105.077 8.37356 106.479 8.3738C107.881 8.3738 109.017 7.23681 109.018 5.83474C109.018 4.43248 107.881 3.29567 106.479 3.29567ZM126.684 3.29567C125.281 3.29573 124.145 4.43252 124.145 5.83474C124.145 7.23677 125.282 8.37374 126.684 8.3738C128.086 8.3738 129.222 7.23681 129.223 5.83474C129.223 4.43248 128.086 3.29567 126.684 3.29567ZM120.852 1.84938H119.226V-0.000225067H120.852V1.84938Z\"\n// fill=\"white\"\n// />\n// <path\n// d=\"M11.124 10.0002H8.73438L5.63672 3.35569L2.53809 10.0002H0.148438L4.81152 0.000221252H6.46191L11.124 10.0002ZM20.3516 6.48264V0.000221252H22.5371V9.99924H20.3516L15.2871 3.51682V9.99924H13.1016V0.000221252H15.2871L20.3516 6.48264ZM27.209 9.99924H25.0234V0.000221252H27.209V9.99924ZM30.3037 4.99924L34.21 9.99924H31.4619L27.5586 4.99632L31.4619 0.000221252H34.21L30.3037 4.99924ZM44.6006 2.00413H38.1348V3.99827H43.2354V6.0012H38.1348V7.99534H44.6006V9.99924H35.9492V0.000221252H44.6006V2.00413ZM52.3105 0.000221252C54.2297 0.000274701 55.7852 1.55571 55.7852 3.47483C55.7851 5.0072 54.7924 6.30365 53.416 6.76585L55.9414 9.99729H53.1934L49.29 4.99534H52.2998C53.1392 4.99513 53.8203 4.31423 53.8203 3.47483C53.8203 2.63538 53.1392 1.95453 52.2998 1.95432H48.7715V9.99924H46.5859V0.000221252H52.3105Z\"\n// fill=\"white\"\n// />\n// </svg>\n// )\n// }\n\nexport default Board\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaQ,IAAAI,EAAA,6BAbRC,EAAkB,iBAClBC,EAA0B,0BAC1BC,EAAiB,wBAOjB,MAAMC,EAAQ,CAAC,CAAE,KAAAC,EAAM,KAAAC,CAAK,OAExB,OAAC,EAAAC,QAAA,CAAK,KAAMF,EAAM,QAAS,CAACA,EAC1B,mBAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { Container } from './container.js'\nimport Link from './link.js'\n\n/**\n * Board - \u54C1\u724C\u6807\u8BC6\u680F\n *\n * @description Anker Innovations\u54C1\u724C\u6807\u8BC6\u680F\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u663E\u793A\u516C\u53F8Logo\u548C\u54C1\u724C\u4FE1\u606F\n */\nconst Board = ({ href, data }: { href?: string; data?: any }) => {\n return (\n <Link href={href} asChild={!href}>\n <div className=\"relative z-[46] box-border h-[30px]\">\n <Container childClassName=\"flex !bg-[#080A0F] items-center justify-between\" className=\"h-full\">\n <div className=\"flex h-full items-center gap-2 py-2\">\n {data?.leftIcon?.map?.((item: any, index: number) => (\n <Link key={index} href={item.link} asChild={!item.link} className=\"desktop:block hidden h-full\">\n <div\n className=\"desktop:block hidden h-fit transition-all duration-200 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:transition-all [&_svg_path]:duration-200 [&_svg_path]:[fill:#75787F] [&_svg_path]:hover:[fill:#FFFFFF]\"\n style={{ filter: 'none' }}\n dangerouslySetInnerHTML={{ __html: item.logo || '' }}\n />\n </Link>\n ))}\n </div>\n <div className=\"flex h-full items-center justify-end gap-2 py-2\">\n {data?.rightIcon?.map?.((item: any, index: number) => (\n <Link key={index} href={item.link} asChild={!item.link} className=\"flex h-full items-center\">\n <div\n className=\"h-fit [&_svg]:h-full [&_svg]:w-auto\"\n style={{ filter: 'none' }}\n dangerouslySetInnerHTML={{ __html: item.logo || '' }}\n />\n </Link>\n ))}\n </div>\n </Container>\n </div>\n </Link>\n )\n}\n\n// const AnkerInnovations = (props: React.SVGProps<SVGSVGElement>) => {\n// return (\n// <svg width=\"148\" height=\"10\" viewBox=\"0 0 148 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n// <path\n// d=\"M88.5391 1.66872C90.8392 1.6688 92.7041 3.53461 92.7041 5.83474C92.7039 8.13468 90.839 9.9997 88.5391 9.99977C86.239 9.99977 84.3733 8.13473 84.373 5.83474C84.373 3.53456 86.2389 1.66872 88.5391 1.66872ZM106.479 1.66872C107.484 1.66872 108.407 2.02531 109.127 2.61892L109.477 1.86208H110.645V9.79958H109.477L109.13 9.0486C108.409 9.64225 107.486 9.99977 106.479 9.99977C104.179 9.99954 102.314 8.13458 102.313 5.83474C102.313 3.53471 104.179 1.66896 106.479 1.66872ZM126.684 1.66872C128.984 1.66872 130.849 3.53456 130.849 5.83474C130.848 8.13473 128.984 9.99977 126.684 9.99977C124.384 9.99972 122.519 8.13469 122.519 5.83474C122.519 3.5346 124.383 1.66878 126.684 1.66872ZM144.748 1.66188C146.602 1.66198 147.794 2.66292 147.823 4.20778H146.278C146.249 3.44345 145.631 3.04577 144.719 3.04567C143.806 3.04567 143.247 3.429 143.247 4.0027C143.247 4.7082 144.07 4.85598 145.026 5.0027L145.025 5.00173C146.365 5.23788 147.998 5.48784 147.998 7.44509C147.998 8.98988 146.716 9.99001 144.775 9.99001C142.834 9.98986 141.568 8.93061 141.524 7.28298H143.128C143.172 8.12086 143.878 8.54763 144.835 8.54763C145.703 8.5475 146.38 8.17982 146.38 7.51833C146.38 6.76851 145.527 6.5909 144.556 6.42946C143.232 6.20932 141.673 5.90104 141.673 4.0613C141.673 2.6337 142.893 1.66188 144.748 1.66188ZM115.1 1.85427H117.434V3.24685H115.102V6.85524C115.102 7.79295 115.614 8.32097 116.582 8.32106H117.478V9.80251L116.275 9.8406C114.545 9.84058 113.474 8.76932 113.474 7.02419V3.24685H112.285V2.93532L114.577 0.000751495H115.1V1.85427ZM63.7627 9.79958H62.1367V-0.000225067H63.7627V9.79958ZM97.5566 7.32302L100.108 1.85427H101.884L98.1787 9.79958H96.9355L93.2305 1.85427H95.0059L97.5566 7.32302ZM120.852 9.79958H119.226V3.24587H120.852V9.79958ZM67.8779 2.61892C68.6117 2.02787 69.5403 1.67165 70.5557 1.67165H70.5566C72.1803 1.67165 73.498 2.98838 73.498 4.61208V9.7986H71.8711V4.96462C71.8711 4.00413 71.0923 3.22462 70.1318 3.22438C68.9018 3.22438 67.9045 4.221 67.9043 5.45095V9.7986H66.2725V1.67165H67.4404L67.8779 2.61892ZM77.3252 2.61892C78.059 2.02789 78.9876 1.67165 80.0029 1.67165H80.0039C81.6276 1.67165 82.9443 2.98838 82.9443 4.61208V9.7986H81.3184V4.96462C81.3184 4.00399 80.5388 3.22438 79.5781 3.22438C78.3483 3.2246 77.3518 4.22113 77.3516 5.45095V9.7986H75.7197V1.67165H76.8877L77.3252 2.61892ZM133.85 1.67165L134.287 2.61892C135.021 2.02792 135.95 1.67173 136.965 1.67165H136.967C138.59 1.67181 139.907 2.98848 139.907 4.61208V9.7986H138.28V4.96462C138.28 4.00403 137.502 3.22446 136.541 3.22438C135.311 3.22438 134.315 4.221 134.314 5.45095V9.7986H132.683V1.67165H133.85ZM88.5391 3.29567C87.1368 3.29567 86 4.43248 86 5.83474C86.0002 7.23681 87.1369 8.3738 88.5391 8.3738C89.9411 8.37372 91.0779 7.23676 91.0781 5.83474C91.0781 4.43253 89.9412 3.29575 88.5391 3.29567ZM106.479 3.29567C105.076 3.29591 103.94 4.43263 103.94 5.83474C103.941 7.23666 105.077 8.37356 106.479 8.3738C107.881 8.3738 109.017 7.23681 109.018 5.83474C109.018 4.43248 107.881 3.29567 106.479 3.29567ZM126.684 3.29567C125.281 3.29573 124.145 4.43252 124.145 5.83474C124.145 7.23677 125.282 8.37374 126.684 8.3738C128.086 8.3738 129.222 7.23681 129.223 5.83474C129.223 4.43248 128.086 3.29567 126.684 3.29567ZM120.852 1.84938H119.226V-0.000225067H120.852V1.84938Z\"\n// fill=\"white\"\n// />\n// <path\n// d=\"M11.124 10.0002H8.73438L5.63672 3.35569L2.53809 10.0002H0.148438L4.81152 0.000221252H6.46191L11.124 10.0002ZM20.3516 6.48264V0.000221252H22.5371V9.99924H20.3516L15.2871 3.51682V9.99924H13.1016V0.000221252H15.2871L20.3516 6.48264ZM27.209 9.99924H25.0234V0.000221252H27.209V9.99924ZM30.3037 4.99924L34.21 9.99924H31.4619L27.5586 4.99632L31.4619 0.000221252H34.21L30.3037 4.99924ZM44.6006 2.00413H38.1348V3.99827H43.2354V6.0012H38.1348V7.99534H44.6006V9.99924H35.9492V0.000221252H44.6006V2.00413ZM52.3105 0.000221252C54.2297 0.000274701 55.7852 1.55571 55.7852 3.47483C55.7851 5.0072 54.7924 6.30365 53.416 6.76585L55.9414 9.99729H53.1934L49.29 4.99534H52.2998C53.1392 4.99513 53.8203 4.31423 53.8203 3.47483C53.8203 2.63538 53.1392 1.95453 52.2998 1.95432H48.7715V9.99924H46.5859V0.000221252H52.3105Z\"\n// fill=\"white\"\n// />\n// </svg>\n// )\n// }\n\nexport default Board\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAaQ,IAAAI,EAAA,6BAbRC,EAAkB,iBAClBC,EAA0B,0BAC1BC,EAAiB,wBAOjB,MAAMC,EAAQ,CAAC,CAAE,KAAAC,EAAM,KAAAC,CAAK,OAExB,OAAC,EAAAC,QAAA,CAAK,KAAMF,EAAM,QAAS,CAACA,EAC1B,mBAAC,OAAI,UAAU,sCACb,oBAAC,aAAU,eAAe,kDAAkD,UAAU,SACpF,oBAAC,OAAI,UAAU,sCACZ,SAAAC,GAAM,UAAU,MAAM,CAACE,EAAWC,OACjC,OAAC,EAAAF,QAAA,CAAiB,KAAMC,EAAK,KAAM,QAAS,CAACA,EAAK,KAAM,UAAU,8BAChE,mBAAC,OACC,UAAU,2MACV,MAAO,CAAE,OAAQ,MAAO,EACxB,wBAAyB,CAAE,OAAQA,EAAK,MAAQ,EAAG,EACrD,GALSC,CAMX,CACD,EACH,KACA,OAAC,OAAI,UAAU,kDACZ,SAAAH,GAAM,WAAW,MAAM,CAACE,EAAWC,OAClC,OAAC,EAAAF,QAAA,CAAiB,KAAMC,EAAK,KAAM,QAAS,CAACA,EAAK,KAAM,UAAU,2BAChE,mBAAC,OACC,UAAU,sCACV,MAAO,CAAE,OAAQ,MAAO,EACxB,wBAAyB,CAAE,OAAQA,EAAK,MAAQ,EAAG,EACrD,GALSC,CAMX,CACD,EACH,GACF,EACF,EACF,EAmBJ,IAAOX,EAAQM",
|
|
6
6
|
"names": ["board_exports", "__export", "board_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_container", "import_link", "Board", "href", "data", "Link", "item", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as U,jsx as e,jsxs as l}from"react/jsx-runtime";import Ce,{forwardRef as ee,useCallback as V,useEffect as H,useImperativeHandle as Se,useMemo as L,useRef as j,useState as B}from"react";import{Picture as X,Text as h,Button as R,Container as te,Link as O,Heading as ie,BrandStrip as De}from"../../components/index.js";import"../../shared/Styles.js";import{cn as k,atobID as Le}from"../../helpers/utils.js";import Me,{useNavContext as K}from"./NavProvider.js";import{HeaderNavigationMenu as A,HeaderNavigationBlockType as I,HeaderNavigationActionBlockType as T}from"./types.js";import{debounce as Pe}from"es-toolkit";import Ee from"jump.js";import{useGSAP as oe}from"@gsap/react";import{gsap as se}from"gsap";import{WithSidebar as ce,WithSupports as de,WithMulticol as ue,WithGroupCategory as pe}from"./withCategory.js";import{Menu as Be,Close as me,User as ze,RightArrow as He,LeftArrow as Te,DownArrow as ae,Polygon as $e}from"./icons/index.js";import Re from"../NavigationSearch/index.js";const Ae=ee((t,a)=>{const{data:{headerNavigation:n}={},menuData:i,buildProps:b,event:c,profile:f,theme:p="light",isTop:y=!1,searchResult:v,onSearch:r,isSearching:M,keywords:w,onPrimaryNavClick:d,onSeriesProductClick:x,onSidebarNavClick:m,headerId:g,cartCount:o}=t,[u,S]=B(!1),[D,P]=B(!1),C=j(null),$=j(null),G=()=>{const N=document?.querySelector("body")?.offsetWidth||0;P(N<=1440)};H(()=>(G(),window.addEventListener("resize",G),()=>{window.removeEventListener("resize",G)}),[]),Se(a,()=>$.current),H(()=>{$.current&&y&&Ee($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[y]),H(()=>{c&&(c.search=()=>S(!0))},[c]),oe(()=>{C?.current&&u&&se.fromTo(C.current,{height:0},{height:"auto",duration:.3})},[u]),H(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const W=L(()=>n?.headerBar?.actions?.find(N=>N?.blockType===T.Search)?.searchBar?.[0]||{},[n]);return e(Me,{buildProps:b,profile:f,isMobile:D,event:c,payloadData:n,onSidebarNavClick:m,onSeriesProductClick:x,cartCount:o,children:e("header",{id:g||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:$,children:l("div",{className:k("hover:bg-white hover:text-black",p==="light"?"text-black":"text-white",{}),children:[e(je,{data:n,className:"desktop:block hidden !bg-white",theme:p,onPrimaryNavClick:d}),e(Ie,{data:n,menuData:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:d}),u&&l("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${$?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:C,className:k("overflow-y-auto",{}),children:e(Re,{data:W,keywords:w,isSearching:M,searchResult:v,onSearch:N=>{r?.(N)},onClose:()=>{r?.(),S(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:N=>{(N.key==="Enter"||N.key===" "||N.key==="Escape")&&(N.preventDefault(),S(!1))}})]})]})})})}),je=ee((t,a)=>{const{data:n,onNavItemClick:i,className:b,theme:c,onPrimaryNavClick:f}=t,{event:p,profile:y}=K(),[v,r]=B(!1),M=L(()=>pe(n?.categories?.filter(s=>s?.pcShow)),[n]),[w,d]=B(null),[x,m]=B([]),g=j(null),[o,u]=B(!1),S=j(null),D=j(null),P=j(M.map(s=>Array(s?.length||0).fill(null)));H(()=>{M?.length&&m(M?.map((s,E)=>s?.map((z,F)=>({groupIndex:E,index:F,open:!1}))))},[M]);const C=L(()=>{let s=null;for(const E of x){for(const z of E)if(z.open){s=z;break}if(s)break}return s},[x]);H(()=>{document.documentElement.style.overflow=C?.open||o?"hidden":"auto"},[C?.open,o]);const $=(s,E,z)=>{if(u(!1),w?.components?.[0]?.blockType===I.Links)w?.components?.[0]?.url&&window.open(w?.components?.[0]?.url);else{const F=M?.flat()||[],J=F?.findIndex(_=>_?.id===M[E][z]?.id);s.stopPropagation(),i?.(),f?.(F[J],J),d(M[E][z]),m(_=>_.map(we=>we.map(Y=>Y.groupIndex===E&&Y.index===z?{...Y,open:!Y.open}:{...Y,open:!1})))}},G=(s,E,z)=>{s.key==="Enter"||s.key===" "?(s.preventDefault(),$(s,E,z)):s.key==="Escape"&&C?.groupIndex===E&&C?.index===z&&(s.preventDefault(),W())},W=()=>{m(s=>s.map(E=>E.map(z=>({...z,open:!1}))))},N=L(()=>{if(w)return w?.components?.[0]?.blockType},[w]),ne=ce(Fe,w),q=ue(_e,w),Ne=de(Oe,{categoriesItem:w,currentNavItemRef:P.current?.[C?.groupIndex||0]?.[C?.index||0]}),ke=L(()=>{switch(N){case I.Sidebar:return e(ne,{});case I.Supports:return e(Ne,{});case I.Multicol:return e(q,{});default:return null}},[N,w]),le=L(()=>n?.headerBar?.actions?.filter(s=>s?.pcShow),[n]),Q=L(()=>le?.find(s=>s?.blockType===T.Profile),[le]),re=V(()=>{u(s=>!s)},[]);return H(()=>{if(g?.current){const s=g.current;return s.addEventListener("click",re),()=>{s.removeEventListener("click",re)}}},[re]),oe(()=>{C?.open&&se.fromTo(D?.current,{height:0},{height:"auto"})},[C?.open]),l(te,{className:k("relative h-[96px]",b),children:[l("div",{ref:S,onClick:W,className:"flex h-full flex-col justify-end gap-4",children:[l("div",{className:"flex items-center justify-between",children:[e(he,{}),e(ye,{ref:g,actions:le,activeStatus:o})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:M?.map((s,E)=>e("div",{className:"flex gap-3",children:s?.map((z,F)=>{const J=C?.groupIndex===E&&C?.index===F;return e("div",{ref:_=>{P.current[E][F]=_},className:"group cursor-pointer",children:l("div",{className:"relative",children:[l("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:_=>$(_,E,F),onKeyDown:_=>G(_,E,F),"aria-expanded":J,"aria-haspopup":"true","aria-label":z.text,children:[e(h,{html:z.text,className:"text-sm font-bold leading-[1.4]"}),e(ae,{"aria-hidden":"true",className:k("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":J,"opacity-100":v&&J})})]}),e("div",{className:k("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":J},c==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},z.id)})},`groupCategory-${E}`))})]}),l("div",{role:"menu","aria-hidden":!(C?.open&&w),className:k("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(C?.open&&w)}),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:D,className:k("relative z-50",{"overflow-hidden":N!==I.Supports}),children:ke}),e("div",{className:"flex-1 bg-transparent",onClick:W,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:s=>{(s.key==="Enter"||s.key===" "||s.key==="Escape")&&(s.preventDefault(),W())}})]}),o&&l("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${g?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:y?.email?l(U,{children:[e(h,{html:y?.nick_name||Q?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:Q?.profiles?.map(s=>e(Z,{className:"py-2",label:s?.title,href:s?.url},s.id))})]}):l(U,{children:[e($e,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(h,{html:Q?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:Q?.benefits?.map(s=>l("div",{className:"flex items-center gap-[6px]",children:[e(X,{source:s.benefitIcon?.url,className:"size-4",alt:s.benefit,width:16,height:16}),e(h,{html:s.benefit,className:"text-sm font-bold leading-[1.4]"})]},s.id))}),l("div",{className:"mt-4 flex items-center gap-2",children:[e(R,{variant:"secondary",size:"lg",onClick:()=>p?.join?.(),children:e(h,{html:Q?.primaryButton||"Join Now",className:"font-bold"})}),e(R,{variant:"primary",size:"lg",onClick:()=>p?.login?.(),children:e(h,{html:Q?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>u(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:s=>{(s.key==="Enter"||s.key===" "||s.key==="Escape")&&(s.preventDefault(),u(!1))}})]})]})}),Fe=Ce.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:n,onSidebarNavClick:i}=K(),[b,c]=B([]),[f,p]=B(-1),y=j(null),v=V(()=>{const d=t?.subcategories;if(!d?.length)return;const x=d.findIndex(o=>!!o?.subSubCategories),m=d.findIndex(o=>!o?.subSubCategories),g=d.map((o,u)=>({index:u,open:x===u||m===u}));c(g)},[t]);H(()=>{v()},[v]);const r=L(()=>{const d=t?.subcategories?.[b?.find(m=>m.open)?.index||0],x=a?.find(m=>m?.label?.toLowerCase()===d?.label?.toLowerCase())||{};if(d?.collections){const m=n?.categories?.[d?.collections]||{};return{label:x?.label,isCollection:!0,banner:x?.banner,primary:x?.primary,series:[{products:m?.products}]}}else if(d?.subSubCategories){const m=d?.subSubCategories?.[f],g=a?.find(o=>o?.label?.toLowerCase()===m?.label?.toLowerCase())||{};if(m?.collections){const o=n?.categories?.[m?.collections]||{};return{label:g?.label,isCollection:!0,banner:g?.banner,primary:g?.primary,series:[{products:o?.products}]}}else return g}else return x},[t,b,f,a,n]),M=V((d,x)=>{if(x?.subSubCategories?.length>0?p(0):p(-1),x?.subSubCategories?.length>0)c(m=>m.map(g=>g.index===d?{...g,open:!0}:{...g,open:!1}));else{const g=t?.subcategories?.findIndex(o=>!!o?.subSubCategories);c(o=>o.map(u=>({...u,open:u.index===d||u.index===g})))}},[t]),w=(d,x)=>{c(m=>m.map(g=>g.index===d?{...g,open:!0}:{...g,open:!1})),p(x)};return l(te,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[l("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:y,children:[e("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((d,x)=>{const m=Array.isArray(d?.subSubCategories)&&d?.subSubCategories?.length>0,g=b?.find(o=>o.index===x)?.open;return l("div",{children:[l("button",{className:k("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!m&&g}),onClick:()=>{M(x,d),i?.(d,x)},"aria-expanded":m?g:void 0,"aria-haspopup":m?"true":void 0,children:[e(h,{html:d.label,className:"p-4 text-sm font-bold leading-[1.4]"}),m&&e(ae,{"aria-hidden":"true",className:k("size-4",{"rotate-180":g})})]}),g&&e("div",{className:"flex flex-col",role:"menu",children:d.subSubCategories?.map((o,u)=>e("button",{onClick:()=>{w(x,u),i?.(o,u)},className:k("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left",{"bg-[#F5F5F7]":f===u}),role:"menuitem","aria-label":o.label,children:e(h,{html:o.label,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F] hover:bg-[#F5F5F7]"})},`subSubItem-${x}-${u}`))})]},`subcategoryItem-${x}`)})}),t&&e("div",{className:"flex",children:l("div",{className:"flex flex-col gap-4",children:[t?.primary&&e(R,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&e(R,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:t?.secondary?.label})]})})]}),l("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(r).length>0&&l("div",{className:"mb-4 flex items-center justify-between",children:[l("div",{className:"flex items-center gap-2",children:[e(h,{html:r?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),r?.primary&&!r?.primary?.hide&&e(R,{as:"a",href:`${r?.primary?.url}?ref=${r?.label}_viewmore`,variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:r?.primary?.label})]}),e(O,{href:r?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:r?.guide?.label})]}),e("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:r?.series?.map((d,x)=>l("div",{children:[d.label&&e(h,{html:d.label,className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),l("div",{className:"grid grid-cols-3 gap-4",children:[!!r?.banner&&e(O,{asChild:!r?.banner?.href,href:r?.banner?.href,children:l("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[e(X,{source:r?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),l("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(ie,{size:2,html:r?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),e(h,{html:r?.banner?.desc||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),d.products?.map((m,g)=>e(be,{seriesLabel:r?.label,product:m,isCollection:r?.isCollection},`seriesProductItem-${g}`))]})]},`seriesItem-${x}`))})]})]})}),_e=({multicolMetadata:t})=>{const a=j(null);return e("div",{ref:a,children:e(te,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((n,i)=>e("div",{className:"w-1/4",children:e(fe,{item:n})},`multicolItem-${n?.label}-${i}`))})})})},Oe=({supportsMetadata:t,currentNavItemRef:a})=>{const n=j(null),[i,b]=B(null),[c,f]=B(0);H(()=>{if(n?.current){const y=n?.current?.getBoundingClientRect();f(y.height)}},[n]);const p=Pe(()=>{if(a){const y=a.getBoundingClientRect();b(y)}},500);return H(()=>(p(),window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)}),[p]),H(()=>{if(a){const y=a.getBoundingClientRect();b(y)}},[a]),e("div",{className:"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${i?.right}px)`,height:c},children:e("div",{ref:n,className:"p-4",children:t?.map(y=>e("div",{className:"py-2",children:e(O,{href:y.url,className:"text-sm font-bold leading-[1.4] no-underline",children:y.label})},y.id))})})},be=({product:t,isCollection:a,position:n,seriesLabel:i})=>{const{buildProps:b,onSeriesProductClick:c}=K();let f=a?t:b?.products?.find(r=>r.handle===t.handle);const p=f?.variants?.find(r=>r.sku===t.sku)||f?.variants?.[0],y=L(()=>`/products/${f?.handle}?variant=${Le(p?.id)}`,[f?.handle,p?.id]),v=L(()=>f?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,2),[f?.tags]);return p?.availableForSale?e(O,{href:y,onClick:r=>{r.preventDefault(),window.open(y,"_self"),c?.(f,n||0,i)},className:"no-underline hover:text-current",children:l("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[e("div",{className:"shrink-0",children:e(X,{source:`${p?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),l("div",{className:"relative",children:[e("div",{className:"flex gap-1",children:Array.isArray(v)&&v?.map(r=>e(h,{as:"p",html:r,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),e(h,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:f?.title||t?.name}),t?.desc&&e(h,{as:"p",html:t?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null},fe=({item:t,allPicture:a})=>l(U,{children:[t?.columns&&l(U,{children:[e(h,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"mt-2 flex flex-col",children:t.columns?.map(n=>l("div",{className:"flex items-center gap-1 py-2",children:[e(O,{href:`${n.url}?ref=navMenu`,asChild:!n.url,className:"text-sm font-bold leading-[1.4] no-underline",children:n.label}),n?.badge&&e(h,{as:"p",html:n?.badge||"badge",className:"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]"})]},n.label))})]}),t?.imageUrl&&e("div",{className:k("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden",{"tablet:max-w-none laptop:max-w-none":a}),children:l(O,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(X,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),l("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[e(h,{html:t.title,className:k("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&e(h,{html:t.subtitle,className:k("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&e(R,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:k("mr-auto !p-0 text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Ie=ee(({data:t,menuData:a,className:n,onPrimaryNavClick:i},b)=>{const c=L(()=>pe(t?.categories?.filter(N=>N?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:p,subSubCategory:y}=K(),[v,r]=B(!1),[M,w]=B(0),[d,x]=B(null),m=j(null);H(()=>{if(m?.current&&v){const N=m?.current?.getBoundingClientRect();w(window?.innerHeight-(N?.bottom||0))}},[v]),oe(()=>{se.fromTo(m.current,{height:0},{height:M,duration:.3})},[M]),H(()=>{document.documentElement.style.overflow=v?"hidden":"auto"},[v]);const g=L(()=>d?.components?.[0]?.blockType,[d]),o=de(Ue,{categoriesItem:d}),u=ce(Ke,d),S=ue(Ge,d),D=L(()=>{switch(g){case I.Sidebar:return e(u,{});case I.Supports:return e(o,{});case I.Multicol:return e(S,{});default:return null}},[g,d,o]),P=V(()=>{r(!1),w(0),p&&p(A.Primary)},[r,w,p]),C=L(()=>t?.headerBar?.actions?.filter(N=>N?.mobileShow&&N?.blockType!==T.Profile),[t]),$=L(()=>t?.headerBar?.actions?.find(N=>N?.mobileShow&&N?.blockType===T.Profile)||{},[t]),G=L(()=>{switch(f){case A.Primary:return e(Ve,{actions:C,menuOpen:v,onMenuOpenClose:()=>{r(!1),w(0)},onMenuOpenClick:()=>r(!0)});case A.Secondary:return e(xe,{title:d?.text,onMenuOpenClose:P,onMenuBackClick:()=>p?.(A.Primary)});case A.Third:return e(xe,{title:y?.label,onMenuOpenClose:P,onMenuBackClick:()=>p?.(A.Secondary)});default:return null}},[v,f,p,d,C,y,P]),W=V((N,ne)=>{const q=Array.isArray(c)?Array.isArray(c[N])?c[N][ne]:{}:{};x(q),q?.components?.[0]?.blockType===I.Links?q?.components?.[0]?.url&&window.open(q?.components?.[0]?.url):p?.(A.Secondary)},[c,p]);return l(te,{className:k("relative h-[52px]",n),children:[G,v&&l("nav",{ref:m,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:M},role:"navigation","aria-label":"Mobile navigation menu",children:[e("div",{className:"py-4",children:e(De,{data:a})}),f===A.Primary?e(We,{categories:c,onPrimaryMenuClick:W,onPrimaryNavClick:i,profileAction:$}):D]})]})}),We=({categories:t,onPrimaryMenuClick:a,profileAction:n,onPrimaryNavClick:i})=>l("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((b,c)=>l("div",{className:"",children:[e("div",{className:k("my-2 h-px w-full bg-[#E5E5E7]")}),b?.map((f,p)=>e(Z,{label:f.text,onClick:()=>{const v=(t?.flat()||[])?.findIndex(r=>r?.id===t[c][p]?.id);a(c,p),i?.(f,v)},icon:f.components?.[0]?.icon},f.id))]},`groupCategory-${c}`))}),e(Je,{profileAction:n})]}),Ke=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:n,setCurrentMenu:i,subSubCategory:b,setSubSubCategory:c,setCurrentSeriesMetadata:f,currentSeriesMetadata:p,buildProps:y,onSidebarNavClick:v}=K(),[r,M]=B([]),[w,d]=B([]);H(()=>{t?.subcategories?.length&&M(t?.subcategories?.map((o,u)=>({index:u,open:!1})))},[t]),H(()=>{b?.subSubCategories?.length&&d(b?.subSubCategories?.map((o,u)=>({index:u,open:u===0})))},[b]);const x=V((o,u)=>{i&&i(A.Third),c?.(o);const S=a?.find(D=>u!==void 0?o?.subSubCategories?.[u]?.label?.toLowerCase()===D.label?.toLowerCase():o?.label?.toLowerCase()===D.label?.toLowerCase())||{};if(o?.collections){const D=y?.categories?.[o?.collections]||{};f?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:D?.products}]})}else f?.(S)},[a,i,c,f,y?.categories]),m=L(()=>a?.find(o=>!!o?.guide)?.guide,[a]);return L(()=>{switch(n){case A.Secondary:return l("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[e("div",{children:t?.subcategories?.map((o,u)=>e("div",{children:e(Z,{label:o?.label,active:r.find(S=>S.index===u)?.open,onClick:()=>{x(o),v?.(o,u)}})},`${o.label}-${u}`))}),l("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&e(R,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&e(R,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case A.Third:return l("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[b?.subSubCategories?b?.subSubCategories?.map((o,u)=>{const S=a?.find(P=>P.label.toLowerCase()===o?.label?.toLowerCase())||{};let D={};if(o?.collections){const P=y?.categories?.[o?.collections]||{};D={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:P?.products}]}}else D=S;return l("div",{children:[Reflect.ownKeys(o).length>0&&e(ve,{matchSeriesMetadata:D,onSubSubCategoryItemClick:()=>{v?.(o,u),d(P=>P.map((C,$)=>({...C,open:$===u?!C.open:C.open})))},expanded:!!w?.find(P=>P.index===u)?.open}),w?.find(P=>P.index===u)?.open&&l(U,{children:[e(ge,{matchSeriesMetadata:D}),D?.primary&&e("div",{className:"my-4 text-center",children:e(R,{as:"a",href:D?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:D?.primary?.label})})]})]},`${o.label}-${u}`)}):l(U,{children:[Reflect.ownKeys(p).length>0&&e(ve,{matchSeriesMetadata:p}),e(ge,{matchSeriesMetadata:p}),p?.primary&&e("div",{className:"my-4 text-center ",children:e(R,{as:"a",href:`${p?.primary?.url}?ref=${p?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:p?.primary?.label})})]}),m&&e(O,{href:m?.url,children:e("div",{className:"mt-4",children:e(h,{html:m?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[n,t,a,r,w,b,p,y?.categories,m,x,v])},ve=({matchSeriesMetadata:t,onSubSubCategoryItemClick:a,expanded:n})=>{const i=l(U,{children:[t?.label&&e(h,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),a&&e(ae,{"aria-hidden":"true",className:k("size-5",{"rotate-180":n})})]});return a?e("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:a,"aria-expanded":n,children:i}):e("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:i})},ge=({matchSeriesMetadata:t})=>e("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!t?.series?.length&&t?.series?.map((a,n)=>l("div",{children:[a.label&&e(h,{html:a.label,className:"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]"}),l("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&e(O,{asChild:!t?.banner?.href,href:t?.banner?.href,children:l("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[e(X,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),l("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(ie,{size:2,html:t?.banner?.title||"Buy in Guide",className:k("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),e(h,{html:t?.banner?.desc||"20.000mAh",className:k("text-sm font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),a.products?.map((i,b)=>e(be,{position:b,product:i,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${n}-${b}`))]})]},`seriesItem-${n}`))}),Ue=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(Z,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ge=({multicolMetadata:t})=>{const a=L(()=>!t?.some(n=>!!n.columns),[t]);return e("div",{className:k("tablet:py-4 tablet:px-8 laptop:px-16 tablet:gap-6 flex flex-col gap-4 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":a}),children:t?.map((n,i)=>e("div",{children:e(fe,{item:n,allPicture:a})},`multicolItem-${n?.label}-${i}`))})},Je=({profileAction:t})=>{const[a,n]=B(!1),{profile:i,event:b}=K();return l("div",{className:k("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":a}),children:[l("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>n(!a),"aria-expanded":a,"aria-label":i?.nick_name||t?.welcome,children:[l("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(ze,{"aria-hidden":"true"})}),e(h,{html:i?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!i?.email&&e(ae,{"aria-hidden":"true",className:k("laptop:size-4 size-5",{"rotate-180":a})})]}),i?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:t?.profiles?.map(c=>e(Z,{label:c?.title,href:c?.url},c.id))}),a&&!i?.email&&l("div",{className:"mt-4",children:[e(h,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(c=>l("div",{className:"flex items-center gap-[6px]",children:[e(X,{source:c.benefitIcon?.url,className:"size-4",alt:c.benefit,width:16,height:16}),e(h,{html:c.benefit,className:"text-sm font-bold leading-[1.4]"})]},c.id))})]}),!i?.email&&l("div",{className:"mt-4 flex items-center gap-3",children:[e(R,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>b?.join?.(),children:e(h,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(R,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>b?.login?.(),children:e(h,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Ve=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:n,actions:i})=>l("div",{className:"flex h-full items-center justify-between gap-4",children:[e(he,{}),l("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(ye,{actions:i}),t?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>a(),"aria-label":"Close menu","aria-expanded":"true",children:e(me,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),he=()=>{const{payloadData:t,isMobile:a}=K();return e("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:a?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},ye=ee(({actions:t,activeStatus:a=!1},n)=>{const{event:i,cartCount:b}=K(),[c,f]=B(null),p=v=>{switch(v){case T.Search:return"Search";case T.Cart:return`Shopping cart${b>0?` (${b} items)`:""}`;case T.Profile:return"User profile";case T.Livestream:return"Livestream";default:return"Action"}},y=V((v,r)=>{switch(f(r),v?.blockType){case T.Search:i?.search?.();break;case T.Cart:i?.cart?.();break;case T.Profile:i?.profile?.();break;case T.Livestream:i?.livestream?.();break;default:return()=>{}}},[i]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((v,r)=>l("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:v.blockType===T.Profile?n:null,onClick:()=>y(v,r),"aria-label":p(v.blockType),"aria-pressed":a&&c===r,children:[e(h,{html:v.icon,className:k("size-5",{"text-brand-0":a&&c===r}),"aria-hidden":"true"}),v.blockType===T.Cart&&b>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(h,{html:b?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},v.id))})}),xe=({title:t,onMenuOpenClose:a,onMenuBackClick:n})=>l("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Back to previous menu",children:e(Te,{className:"size-5","aria-hidden":"true"})}),e(h,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>a(),"aria-label":"Close menu",children:e(me,{className:"size-5","aria-hidden":"true"})})]}),Z=({label:t,href:a,onClick:n,active:i,icon:b,className:c})=>{const f=l(U,{children:[l("div",{className:"flex items-center gap-4",children:[e(h,{html:t,className:k("text-sm font-bold leading-[1.4]",{underline:b})}),b&&e(h,{html:b,"aria-hidden":"true"})]}),e(He,{className:k("laptop:size-4 size-5",{"rotate-90":i}),"aria-hidden":"true"})]});return a?e(O,{href:a,className:k("flex cursor-pointer items-center justify-between py-4 no-underline",c),children:f}):e("button",{className:k("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",c),onClick:n,"aria-expanded":i,children:f})};var ct=Ae;export{ct as default};
|
|
1
|
+
"use client";import{Fragment as U,jsx as e,jsxs as l}from"react/jsx-runtime";import Ce,{forwardRef as ee,useCallback as V,useEffect as H,useImperativeHandle as Se,useMemo as L,useRef as j,useState as B}from"react";import{Picture as X,Text as h,Button as R,Container as te,Link as O,Heading as ie,BrandStrip as De}from"../../components/index.js";import"../../shared/Styles.js";import{cn as k,atobID as Le}from"../../helpers/utils.js";import Me,{useNavContext as K}from"./NavProvider.js";import{HeaderNavigationMenu as A,HeaderNavigationBlockType as I,HeaderNavigationActionBlockType as T}from"./types.js";import{debounce as Pe}from"es-toolkit";import Ee from"jump.js";import{useGSAP as oe}from"@gsap/react";import{gsap as se}from"gsap";import{WithSidebar as ce,WithSupports as de,WithMulticol as ue,WithGroupCategory as pe}from"./withCategory.js";import{Menu as Be,Close as me,User as ze,RightArrow as He,LeftArrow as Te,DownArrow as ae,Polygon as $e}from"./icons/index.js";import Re from"../NavigationSearch/index.js";const Ae=ee((t,a)=>{const{data:{headerNavigation:n}={},menuData:i,buildProps:b,event:c,profile:f,theme:p="light",isTop:y=!1,searchResult:v,onSearch:r,isSearching:M,keywords:w,onPrimaryNavClick:d,onSeriesProductClick:x,onSidebarNavClick:m,headerId:g,cartCount:o}=t,[u,S]=B(!1),[D,P]=B(!1),C=j(null),$=j(null),G=()=>{const N=document?.querySelector("body")?.offsetWidth||0;P(N<=1440)};H(()=>(G(),window.addEventListener("resize",G),()=>{window.removeEventListener("resize",G)}),[]),Se(a,()=>$.current),H(()=>{$.current&&y&&Ee($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[y]),H(()=>{c&&(c.search=()=>S(!0))},[c]),oe(()=>{C?.current&&u&&se.fromTo(C.current,{height:0},{height:"auto",duration:.3})},[u]),H(()=>{document.documentElement.style.overflow=u?"hidden":"auto"},[u]);const W=L(()=>n?.headerBar?.actions?.find(N=>N?.blockType===T.Search)?.searchBar?.[0]||{},[n]);return e(Me,{buildProps:b,profile:f,isMobile:D,event:c,payloadData:n,onSidebarNavClick:m,onSeriesProductClick:x,cartCount:o,children:e("header",{id:g||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:$,children:l("div",{className:k("hover:bg-white hover:text-black",p==="light"?"text-black":"text-white",{}),children:[e(je,{data:n,className:"desktop:block hidden !bg-white",theme:p,onPrimaryNavClick:d}),e(Ie,{data:n,menuData:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:d}),u&&l("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${$?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:C,className:k("overflow-y-auto",{}),children:e(Re,{data:W,keywords:w,isSearching:M,searchResult:v,onSearch:N=>{r?.(N)},onClose:()=>{r?.(),S(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:N=>{(N.key==="Enter"||N.key===" "||N.key==="Escape")&&(N.preventDefault(),S(!1))}})]})]})})})}),je=ee((t,a)=>{const{data:n,onNavItemClick:i,className:b,theme:c,onPrimaryNavClick:f}=t,{event:p,profile:y}=K(),[v,r]=B(!1),M=L(()=>pe(n?.categories?.filter(s=>s?.pcShow)),[n]),[w,d]=B(null),[x,m]=B([]),g=j(null),[o,u]=B(!1),S=j(null),D=j(null),P=j(M.map(s=>Array(s?.length||0).fill(null)));H(()=>{M?.length&&m(M?.map((s,E)=>s?.map((z,F)=>({groupIndex:E,index:F,open:!1}))))},[M]);const C=L(()=>{let s=null;for(const E of x){for(const z of E)if(z.open){s=z;break}if(s)break}return s},[x]);H(()=>{document.documentElement.style.overflow=C?.open||o?"hidden":"auto"},[C?.open,o]);const $=(s,E,z)=>{if(u(!1),w?.components?.[0]?.blockType===I.Links)w?.components?.[0]?.url&&window.open(w?.components?.[0]?.url);else{const F=M?.flat()||[],J=F?.findIndex(_=>_?.id===M[E][z]?.id);s.stopPropagation(),i?.(),f?.(F[J],J),d(M[E][z]),m(_=>_.map(we=>we.map(Y=>Y.groupIndex===E&&Y.index===z?{...Y,open:!Y.open}:{...Y,open:!1})))}},G=(s,E,z)=>{s.key==="Enter"||s.key===" "?(s.preventDefault(),$(s,E,z)):s.key==="Escape"&&C?.groupIndex===E&&C?.index===z&&(s.preventDefault(),W())},W=()=>{m(s=>s.map(E=>E.map(z=>({...z,open:!1}))))},N=L(()=>{if(w)return w?.components?.[0]?.blockType},[w]),ne=ce(Fe,w),q=ue(_e,w),Ne=de(Oe,{categoriesItem:w,currentNavItemRef:P.current?.[C?.groupIndex||0]?.[C?.index||0]}),ke=L(()=>{switch(N){case I.Sidebar:return e(ne,{});case I.Supports:return e(Ne,{});case I.Multicol:return e(q,{});default:return null}},[N,w]),le=L(()=>n?.headerBar?.actions?.filter(s=>s?.pcShow),[n]),Q=L(()=>le?.find(s=>s?.blockType===T.Profile),[le]),re=V(()=>{u(s=>!s)},[]);return H(()=>{if(g?.current){const s=g.current;return s.addEventListener("click",re),()=>{s.removeEventListener("click",re)}}},[re]),oe(()=>{C?.open&&se.fromTo(D?.current,{height:0},{height:"auto"})},[C?.open]),l(te,{className:k("relative h-[96px]",b),children:[l("div",{ref:S,onClick:W,className:"flex h-full flex-col justify-end gap-4",children:[l("div",{className:"flex items-center justify-between",children:[e(he,{}),e(ye,{ref:g,actions:le,activeStatus:o})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:M?.map((s,E)=>e("div",{className:"flex gap-3",children:s?.map((z,F)=>{const J=C?.groupIndex===E&&C?.index===F;return e("div",{ref:_=>{P.current[E][F]=_},className:"group cursor-pointer",children:l("div",{className:"relative",children:[l("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:_=>$(_,E,F),onKeyDown:_=>G(_,E,F),"aria-expanded":J,"aria-haspopup":"true","aria-label":z.text,children:[e(h,{html:z.text,className:"text-sm font-bold leading-[1.4]"}),e(ae,{"aria-hidden":"true",className:k("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":J,"opacity-100":v&&J})})]}),e("div",{className:k("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":J},c==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},z.id)})},`groupCategory-${E}`))})]}),l("div",{role:"menu","aria-hidden":!(C?.open&&w),className:k("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(C?.open&&w)}),onMouseEnter:()=>r(!0),onMouseLeave:()=>r(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:D,className:k("relative z-50",{"overflow-hidden":N!==I.Supports}),children:ke}),e("div",{className:"flex-1 bg-transparent",onClick:W,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:s=>{(s.key==="Enter"||s.key===" "||s.key==="Escape")&&(s.preventDefault(),W())}})]}),o&&l("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${g?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:y?.email?l(U,{children:[e(h,{html:y?.nick_name||Q?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:Q?.profiles?.map(s=>e(Z,{className:"py-2",label:s?.title,href:s?.url},s.id))})]}):l(U,{children:[e($e,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(h,{html:Q?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:Q?.benefits?.map(s=>l("div",{className:"flex items-center gap-[6px]",children:[e(X,{source:s.benefitIcon?.url,className:"size-4",alt:s.benefit,width:16,height:16}),e(h,{html:s.benefit,className:"text-sm font-bold leading-[1.4]"})]},s.id))}),l("div",{className:"mt-4 flex items-center gap-2",children:[e(R,{variant:"secondary",size:"lg",onClick:()=>p?.join?.(),children:e(h,{html:Q?.primaryButton||"Join Now",className:"font-bold"})}),e(R,{variant:"primary",size:"lg",onClick:()=>p?.login?.(),children:e(h,{html:Q?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>u(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:s=>{(s.key==="Enter"||s.key===" "||s.key==="Escape")&&(s.preventDefault(),u(!1))}})]})]})}),Fe=Ce.memo(({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{buildProps:n,onSidebarNavClick:i}=K(),[b,c]=B([]),[f,p]=B(-1),y=j(null),v=V(()=>{const d=t?.subcategories;if(!d?.length)return;const x=d.findIndex(o=>!!o?.subSubCategories),m=d.findIndex(o=>!o?.subSubCategories),g=d.map((o,u)=>({index:u,open:x===u||m===u}));c(g)},[t]);H(()=>{v()},[v]);const r=L(()=>{const d=t?.subcategories?.[b?.find(m=>m.open)?.index||0],x=a?.find(m=>m?.label?.toLowerCase()===d?.label?.toLowerCase())||{};if(d?.collections){const m=n?.categories?.[d?.collections]||{};return{label:x?.label,isCollection:!0,banner:x?.banner,primary:x?.primary,series:[{products:m?.products}]}}else if(d?.subSubCategories){const m=d?.subSubCategories?.[f],g=a?.find(o=>o?.label?.toLowerCase()===m?.label?.toLowerCase())||{};if(m?.collections){const o=n?.categories?.[m?.collections]||{};return{label:g?.label,isCollection:!0,banner:g?.banner,primary:g?.primary,series:[{products:o?.products}]}}else return g}else return x},[t,b,f,a,n]),M=V((d,x)=>{if(x?.subSubCategories?.length>0?p(0):p(-1),x?.subSubCategories?.length>0)c(m=>m.map(g=>g.index===d?{...g,open:!0}:{...g,open:!1}));else{const g=t?.subcategories?.findIndex(o=>!!o?.subSubCategories);c(o=>o.map(u=>({...u,open:u.index===d||u.index===g})))}},[t]),w=(d,x)=>{c(m=>m.map(g=>g.index===d?{...g,open:!0}:{...g,open:!1})),p(x)};return l(te,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[l("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:y,children:[e("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((d,x)=>{const m=Array.isArray(d?.subSubCategories)&&d?.subSubCategories?.length>0,g=b?.find(o=>o.index===x)?.open;return l("div",{children:[l("button",{className:k("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!m&&g}),onClick:()=>{M(x,d),i?.(d,x)},"aria-expanded":m?g:void 0,"aria-haspopup":m?"true":void 0,children:[e(h,{html:d.label,className:"p-4 text-sm font-bold leading-[1.4]"}),m&&e(ae,{"aria-hidden":"true",className:k("size-4",{"rotate-180":g})})]}),g&&e("div",{className:"flex flex-col",role:"menu",children:d.subSubCategories?.map((o,u)=>e("button",{onClick:()=>{w(x,u),i?.(o,u)},className:k("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left",{"bg-[#F5F5F7]":f===u}),role:"menuitem","aria-label":o.label,children:e(h,{html:o.label,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F] hover:bg-[#F5F5F7]"})},`subSubItem-${x}-${u}`))})]},`subcategoryItem-${x}`)})}),t&&e("div",{className:"flex",children:l("div",{className:"flex flex-col gap-4",children:[t?.primary&&e(R,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&e(R,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:t?.secondary?.label})]})})]}),l("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(r).length>0&&l("div",{className:"mb-4 flex items-center justify-between",children:[l("div",{className:"flex items-center gap-2",children:[e(h,{html:r?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),r?.primary&&!r?.primary?.hide&&e(R,{as:"a",href:`${r?.primary?.url}?ref=${r?.label}_viewmore`,variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:r?.primary?.label})]}),e(O,{href:r?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:r?.guide?.label})]}),e("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:r?.series?.map((d,x)=>l("div",{children:[d.label&&e(h,{html:d.label,className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),l("div",{className:"grid grid-cols-3 gap-4",children:[!!r?.banner&&e(O,{asChild:!r?.banner?.href,href:r?.banner?.href,children:l("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[e(X,{source:r?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),l("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(ie,{size:2,html:r?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),e(h,{html:r?.banner?.desc||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),d.products?.map((m,g)=>e(be,{seriesLabel:r?.label,product:m,isCollection:r?.isCollection},`seriesProductItem-${g}`))]})]},`seriesItem-${x}`))})]})]})}),_e=({multicolMetadata:t})=>{const a=j(null);return e("div",{ref:a,children:e(te,{childClassName:"bg-white",className:"h-full",children:e("div",{className:"flex gap-4 py-4",children:t?.map((n,i)=>e("div",{className:"w-1/4",children:e(fe,{item:n})},`multicolItem-${n?.label}-${i}`))})})})},Oe=({supportsMetadata:t,currentNavItemRef:a})=>{const n=j(null),[i,b]=B(null),[c,f]=B(0);H(()=>{if(n?.current){const y=n?.current?.getBoundingClientRect();f(y.height)}},[n]);const p=Pe(()=>{if(a){const y=a.getBoundingClientRect();b(y)}},500);return H(()=>(p(),window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)}),[p]),H(()=>{if(a){const y=a.getBoundingClientRect();b(y)}},[a]),e("div",{className:"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${i?.right}px)`,height:c},children:e("div",{ref:n,className:"p-4",children:t?.map(y=>e("div",{className:"py-2",children:e(O,{href:y.url,className:"text-sm font-bold leading-[1.4] no-underline",children:y.label})},y.id))})})},be=({product:t,isCollection:a,position:n,seriesLabel:i})=>{const{buildProps:b,onSeriesProductClick:c}=K();let f=a?t:b?.products?.find(r=>r.handle===t.handle);const p=f?.variants?.find(r=>r.sku===t.sku)||f?.variants?.[0],y=L(()=>`/products/${f?.handle}?variant=${Le(p?.id)}`,[f?.handle,p?.id]),v=L(()=>f?.tags?.filter?.(r=>r?.startsWith?.("CLtag"))?.map?.(r=>r?.replace?.("CLtag:",""))?.slice?.(0,2),[f?.tags]);return p?.availableForSale?e(O,{href:y,onClick:r=>{r.preventDefault(),window.open(y,"_self"),c?.(f,n||0,i)},className:"no-underline hover:text-current",children:l("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[e("div",{className:"shrink-0",children:e(X,{source:`${p?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),l("div",{className:"relative",children:[e("div",{className:"flex gap-1",children:Array.isArray(v)&&v?.map(r=>e(h,{as:"p",html:r,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),e(h,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:f?.title||t?.name}),t?.desc&&e(h,{as:"p",html:t?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null},fe=({item:t,allPicture:a})=>l(U,{children:[t?.columns&&l(U,{children:[e(h,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),e("div",{className:"mt-2 flex flex-col",children:t.columns?.map(n=>l("div",{className:"flex items-center gap-1 py-2",children:[e(O,{href:`${n.url}?ref=navMenu`,asChild:!n.url,className:"text-sm font-bold leading-[1.4] no-underline",children:n.label}),n?.badge&&e(h,{as:"p",html:n?.badge||"badge",className:"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]"})]},n.label))})]}),t?.imageUrl&&e("div",{className:k("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden",{"tablet:max-w-none laptop:max-w-none":a}),children:l(O,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[e(X,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),l("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[e(h,{html:t.title,className:k("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&e(h,{html:t.subtitle,className:k("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&e(R,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:k("mr-auto !p-0 text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Ie=ee(({data:t,menuData:a,className:n,onPrimaryNavClick:i},b)=>{const c=L(()=>pe(t?.categories?.filter(N=>N?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:p,subSubCategory:y}=K(),[v,r]=B(!1),[M,w]=B(0),[d,x]=B(null),m=j(null);H(()=>{if(m?.current&&v){const N=m?.current?.getBoundingClientRect();w(window?.innerHeight-(N?.bottom||0))}},[v]),oe(()=>{se.fromTo(m.current,{height:0},{height:M,duration:.3})},[M]),H(()=>{document.documentElement.style.overflow=v?"hidden":"auto"},[v]);const g=L(()=>d?.components?.[0]?.blockType,[d]),o=de(Ue,{categoriesItem:d}),u=ce(Ke,d),S=ue(Ge,d),D=L(()=>{switch(g){case I.Sidebar:return e(u,{});case I.Supports:return e(o,{});case I.Multicol:return e(S,{});default:return null}},[g,d,o]),P=V(()=>{r(!1),w(0),p&&p(A.Primary)},[r,w,p]),C=L(()=>t?.headerBar?.actions?.filter(N=>N?.mobileShow&&N?.blockType!==T.Profile),[t]),$=L(()=>t?.headerBar?.actions?.find(N=>N?.mobileShow&&N?.blockType===T.Profile)||{},[t]),G=L(()=>{switch(f){case A.Primary:return e(Ve,{actions:C,menuOpen:v,onMenuOpenClose:()=>{r(!1),w(0)},onMenuOpenClick:()=>r(!0)});case A.Secondary:return e(xe,{title:d?.text,onMenuOpenClose:P,onMenuBackClick:()=>p?.(A.Primary)});case A.Third:return e(xe,{title:y?.label,onMenuOpenClose:P,onMenuBackClick:()=>p?.(A.Secondary)});default:return null}},[v,f,p,d,C,y,P]),W=V((N,ne)=>{const q=Array.isArray(c)?Array.isArray(c[N])?c[N][ne]:{}:{};x(q),q?.components?.[0]?.blockType===I.Links?q?.components?.[0]?.url&&window.open(q?.components?.[0]?.url):p?.(A.Secondary)},[c,p]);return l(te,{className:k("relative h-[52px]",n),children:[G,v&&l("nav",{ref:m,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:M},role:"navigation","aria-label":"Mobile navigation menu",children:[f===A.Primary?e("div",{className:"py-4",children:e(De,{data:a})}):null,f===A.Primary?e(We,{categories:c,onPrimaryMenuClick:W,onPrimaryNavClick:i,profileAction:$}):D]})]})}),We=({categories:t,onPrimaryMenuClick:a,profileAction:n,onPrimaryNavClick:i})=>l("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((b,c)=>l("div",{className:"",children:[e("div",{className:k("my-2 h-px w-full bg-[#E5E5E7]")}),b?.map((f,p)=>e(Z,{label:f.text,onClick:()=>{const v=(t?.flat()||[])?.findIndex(r=>r?.id===t[c][p]?.id);a(c,p),i?.(f,v)},icon:f.components?.[0]?.icon},f.id))]},`groupCategory-${c}`))}),e(Je,{profileAction:n})]}),Ke=({sidebarCategoriesMetadata:t,seriesMetadata:a})=>{const{currentMenu:n,setCurrentMenu:i,subSubCategory:b,setSubSubCategory:c,setCurrentSeriesMetadata:f,currentSeriesMetadata:p,buildProps:y,onSidebarNavClick:v}=K(),[r,M]=B([]),[w,d]=B([]);H(()=>{t?.subcategories?.length&&M(t?.subcategories?.map((o,u)=>({index:u,open:!1})))},[t]),H(()=>{b?.subSubCategories?.length&&d(b?.subSubCategories?.map((o,u)=>({index:u,open:u===0})))},[b]);const x=V((o,u)=>{i&&i(A.Third),c?.(o);const S=a?.find(D=>u!==void 0?o?.subSubCategories?.[u]?.label?.toLowerCase()===D.label?.toLowerCase():o?.label?.toLowerCase()===D.label?.toLowerCase())||{};if(o?.collections){const D=y?.categories?.[o?.collections]||{};f?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:D?.products}]})}else f?.(S)},[a,i,c,f,y?.categories]),m=L(()=>a?.find(o=>!!o?.guide)?.guide,[a]);return L(()=>{switch(n){case A.Secondary:return l("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[e("div",{children:t?.subcategories?.map((o,u)=>e("div",{children:e(Z,{label:o?.label,active:r.find(S=>S.index===u)?.open,onClick:()=>{x(o),v?.(o,u)}})},`${o.label}-${u}`))}),l("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&e(R,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&e(R,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case A.Third:return l("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[b?.subSubCategories?b?.subSubCategories?.map((o,u)=>{const S=a?.find(P=>P.label.toLowerCase()===o?.label?.toLowerCase())||{};let D={};if(o?.collections){const P=y?.categories?.[o?.collections]||{};D={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:P?.products}]}}else D=S;return l("div",{children:[Reflect.ownKeys(o).length>0&&e(ve,{matchSeriesMetadata:D,onSubSubCategoryItemClick:()=>{v?.(o,u),d(P=>P.map((C,$)=>({...C,open:$===u?!C.open:C.open})))},expanded:!!w?.find(P=>P.index===u)?.open}),w?.find(P=>P.index===u)?.open&&l(U,{children:[e(ge,{matchSeriesMetadata:D}),D?.primary&&e("div",{className:"my-4 text-center",children:e(R,{as:"a",href:D?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:D?.primary?.label})})]})]},`${o.label}-${u}`)}):l(U,{children:[Reflect.ownKeys(p).length>0&&e(ve,{matchSeriesMetadata:p}),e(ge,{matchSeriesMetadata:p}),p?.primary&&e("div",{className:"my-4 text-center ",children:e(R,{as:"a",href:`${p?.primary?.url}?ref=${p?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:p?.primary?.label})})]}),m&&e(O,{href:m?.url,children:e("div",{className:"mt-4",children:e(h,{html:m?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[n,t,a,r,w,b,p,y?.categories,m,x,v])},ve=({matchSeriesMetadata:t,onSubSubCategoryItemClick:a,expanded:n})=>{const i=l(U,{children:[t?.label&&e(h,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),a&&e(ae,{"aria-hidden":"true",className:k("size-5",{"rotate-180":n})})]});return a?e("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:a,"aria-expanded":n,children:i}):e("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:i})},ge=({matchSeriesMetadata:t})=>e("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!t?.series?.length&&t?.series?.map((a,n)=>l("div",{children:[a.label&&e(h,{html:a.label,className:"mb-2 text-sm font-bold leading-[1.4] text-[#3D3D3F]"}),l("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&e(O,{asChild:!t?.banner?.href,href:t?.banner?.href,children:l("div",{className:"[&_img]:hover:duration-600 relative [&_img]:hover:scale-110 [&_img]:hover:transition-all",children:[e(X,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),l("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(ie,{size:2,html:t?.banner?.title||"Buy in Guide",className:k("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),e(h,{html:t?.banner?.desc||"20.000mAh",className:k("text-sm font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),a.products?.map((i,b)=>e(be,{position:b,product:i,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${n}-${b}`))]})]},`seriesItem-${n}`))}),Ue=({supportsMetadata:t})=>e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(a=>e(Z,{href:a.url,label:a.label,onClick:()=>{}},a.id))}),Ge=({multicolMetadata:t})=>{const a=L(()=>!t?.some(n=>!!n.columns),[t]);return e("div",{className:k("tablet:py-4 tablet:px-8 laptop:px-16 tablet:gap-6 flex flex-col gap-4 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":a}),children:t?.map((n,i)=>e("div",{children:e(fe,{item:n,allPicture:a})},`multicolItem-${n?.label}-${i}`))})},Je=({profileAction:t})=>{const[a,n]=B(!1),{profile:i,event:b}=K();return l("div",{className:k("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":a}),children:[l("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>n(!a),"aria-expanded":a,"aria-label":i?.nick_name||t?.welcome,children:[l("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(ze,{"aria-hidden":"true"})}),e(h,{html:i?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!i?.email&&e(ae,{"aria-hidden":"true",className:k("laptop:size-4 size-5",{"rotate-180":a})})]}),i?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:t?.profiles?.map(c=>e(Z,{label:c?.title,href:c?.url},c.id))}),a&&!i?.email&&l("div",{className:"mt-4",children:[e(h,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(c=>l("div",{className:"flex items-center gap-[6px]",children:[e(X,{source:c.benefitIcon?.url,className:"size-4",alt:c.benefit,width:16,height:16}),e(h,{html:c.benefit,className:"text-sm font-bold leading-[1.4]"})]},c.id))})]}),!i?.email&&l("div",{className:"mt-4 flex items-center gap-3",children:[e(R,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>b?.join?.(),children:e(h,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(R,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>b?.login?.(),children:e(h,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Ve=({menuOpen:t,onMenuOpenClose:a,onMenuOpenClick:n,actions:i})=>l("div",{className:"flex h-full items-center justify-between gap-4",children:[e(he,{}),l("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(ye,{actions:i}),t?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>a(),"aria-label":"Close menu","aria-expanded":"true",children:e(me,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),he=()=>{const{payloadData:t,isMobile:a}=K();return e("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:a?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},ye=ee(({actions:t,activeStatus:a=!1},n)=>{const{event:i,cartCount:b}=K(),[c,f]=B(null),p=v=>{switch(v){case T.Search:return"Search";case T.Cart:return`Shopping cart${b>0?` (${b} items)`:""}`;case T.Profile:return"User profile";case T.Livestream:return"Livestream";default:return"Action"}},y=V((v,r)=>{switch(f(r),v?.blockType){case T.Search:i?.search?.();break;case T.Cart:i?.cart?.();break;case T.Profile:i?.profile?.();break;case T.Livestream:i?.livestream?.();break;default:return()=>{}}},[i]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((v,r)=>l("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:v.blockType===T.Profile?n:null,onClick:()=>y(v,r),"aria-label":p(v.blockType),"aria-pressed":a&&c===r,children:[e(h,{html:v.icon,className:k("size-5",{"text-brand-0":a&&c===r}),"aria-hidden":"true"}),v.blockType===T.Cart&&b>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(h,{html:b?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},v.id))})}),xe=({title:t,onMenuOpenClose:a,onMenuBackClick:n})=>l("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Back to previous menu",children:e(Te,{className:"size-5","aria-hidden":"true"})}),e(h,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>a(),"aria-label":"Close menu",children:e(me,{className:"size-5","aria-hidden":"true"})})]}),Z=({label:t,href:a,onClick:n,active:i,icon:b,className:c})=>{const f=l(U,{children:[l("div",{className:"flex items-center gap-4",children:[e(h,{html:t,className:k("text-sm font-bold leading-[1.4]",{underline:b})}),b&&e(h,{html:b,"aria-hidden":"true"})]}),e(He,{className:k("laptop:size-4 size-5",{"rotate-90":i}),"aria-hidden":"true"})]});return a?e(O,{href:a,className:k("flex cursor-pointer items-center justify-between py-4 no-underline",c),children:f}):e("button",{className:k("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",c),onClick:n,"aria-expanded":i,children:f})};var ct=Ae;export{ct as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|