@anker-in/headless-ui 1.1.21 → 1.1.22
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/FooterNavigation/icons/Country.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/icons/Country.js.map +2 -2
- package/dist/cjs/biz-components/FooterNavigation/index.js +1 -1
- package/dist/cjs/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js +2 -2
- package/dist/cjs/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/cjs/biz-components/SearchPage/index.d.ts +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js +1 -1
- package/dist/cjs/biz-components/SearchPage/index.js.map +3 -3
- package/dist/cjs/biz-components/SearchPage/types.d.ts +3 -0
- package/dist/cjs/biz-components/SearchPage/types.js +1 -1
- package/dist/cjs/biz-components/SearchPage/types.js.map +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.d.ts +1 -2
- package/dist/cjs/biz-components/Specs/dropdown.js +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- package/dist/cjs/biz-components/Subscribe/index.js +2 -2
- package/dist/cjs/biz-components/Subscribe/index.js.map +3 -3
- package/dist/cjs/helpers/utils.d.ts +6 -0
- package/dist/cjs/helpers/utils.js +1 -1
- package/dist/cjs/helpers/utils.js.map +3 -3
- package/dist/esm/biz-components/FooterNavigation/icons/Country.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/icons/Country.js.map +2 -2
- package/dist/esm/biz-components/FooterNavigation/index.js +1 -1
- package/dist/esm/biz-components/FooterNavigation/index.js.map +3 -3
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js +2 -2
- package/dist/esm/biz-components/NavigationSearch/index.js.map +3 -3
- package/dist/esm/biz-components/SearchPage/index.d.ts +1 -1
- package/dist/esm/biz-components/SearchPage/index.js +1 -1
- package/dist/esm/biz-components/SearchPage/index.js.map +3 -3
- package/dist/esm/biz-components/SearchPage/types.d.ts +3 -0
- package/dist/esm/biz-components/SearchPage/types.js +1 -1
- package/dist/esm/biz-components/SearchPage/types.js.map +2 -2
- package/dist/esm/biz-components/Specs/dropdown.d.ts +1 -2
- package/dist/esm/biz-components/Specs/dropdown.js +2 -2
- package/dist/esm/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- package/dist/esm/biz-components/Subscribe/index.js +2 -2
- package/dist/esm/biz-components/Subscribe/index.js.map +3 -3
- package/dist/esm/helpers/utils.d.ts +6 -0
- package/dist/esm/helpers/utils.js +1 -1
- package/dist/esm/helpers/utils.js.map +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var Z=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var w=(C,t)=>{for(var M in t)Z(C,M,{get:t[M],enumerable:!0})},g=(C,t,M,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let H of n(t))!r.call(C,H)&&H!==M&&Z(C,H,{get:()=>t[H],enumerable:!(e=l(t,H))||e.enumerable});return C};var h=C=>g(Z({},"__esModule",{value:!0}),C);var s={};w(s,{default:()=>p});module.exports=h(s);var o=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var Z=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var w=(C,t)=>{for(var M in t)Z(C,M,{get:t[M],enumerable:!0})},g=(C,t,M,e)=>{if(t&&typeof t=="object"||typeof t=="function")for(let H of n(t))!r.call(C,H)&&H!==M&&Z(C,H,{get:()=>t[H],enumerable:!(e=l(t,H))||e.enumerable});return C};var h=C=>g(Z({},"__esModule",{value:!0}),C);var s={};w(s,{default:()=>p});module.exports=h(s);var o=require("react/jsx-runtime"),f=require("react");const i=C=>(0,o.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",...C,children:(0,o.jsx)("path",{d:"M10.375 1.61035C15.2144 1.61059 19.1387 5.52349 19.1387 10.3516C19.1384 15.1794 15.2143 19.0925 10.375 19.0928C5.53554 19.0928 1.61163 15.1795 1.61133 10.3516C1.61133 5.52335 5.53536 1.61035 10.375 1.61035ZM4.28516 14.2461C5.25853 15.7564 6.77954 16.8813 8.57031 17.3398C7.92132 16.3863 7.42978 15.3389 7.08887 14.2461H4.28516ZM13.6943 14.2461C13.3593 15.3537 12.8762 16.3989 12.2422 17.3232C14.0058 16.8547 15.5028 15.7387 16.4648 14.2461H13.6943ZM8.7002 14.2461C9.0916 15.3294 9.65349 16.341 10.3896 17.2178C11.1216 16.3858 11.6943 15.3706 12.0889 14.2461H8.7002ZM3.49805 8.10547C3.26597 8.81258 3.13867 9.56719 3.13867 10.3516C3.13873 11.1813 3.28148 11.9777 3.54004 12.7197H6.7168C6.55886 11.8555 6.48399 10.9789 6.49512 10.1113C6.50379 9.43833 6.56579 8.76649 6.67383 8.10547H3.49805ZM14.0547 8.10547C14.1973 8.92977 14.2645 9.76441 14.2539 10.5908C14.2447 11.3056 14.176 12.0192 14.0547 12.7197H17.21C17.4686 11.9777 17.6113 11.1813 17.6113 10.3516C17.6113 9.56719 17.4841 8.81258 17.252 8.10547H14.0547ZM8.22168 8.10547C8.09967 8.76406 8.03133 9.44324 8.02246 10.1309C8.01131 11.0002 8.09439 11.8717 8.27051 12.7197H12.5039C12.6408 12.0229 12.7172 11.3018 12.7266 10.5713C12.7372 9.74386 12.6609 8.91471 12.502 8.10547H8.22168ZM8.50586 3.37891C6.69467 3.8606 5.16368 5.02493 4.20605 6.5791H7.01562C7.35147 5.42575 7.84847 4.33749 8.50586 3.37891ZM12.1777 3.36035C12.8515 4.34993 13.3531 5.44151 13.6953 6.5791H16.5439C15.5746 5.00596 14.0179 3.83102 12.1777 3.36035ZM10.3584 3.4834C9.59964 4.34578 9.01075 5.40543 8.61523 6.5791H12.0898C11.6969 5.44924 11.1226 4.39335 10.3584 3.4834Z",fill:"#B5B7BB"})});var p=i;
|
|
2
2
|
//# sourceMappingURL=Country.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/biz-components/FooterNavigation/icons/Country.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\n\nconst Country = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"
|
|
5
|
-
"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,KAAK,QAAQ,YAAY,KAAK,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\n\nconst Country = (props: React.SVGProps<SVGSVGElement>) => {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" {...props}>\n <path\n d=\"M10.375 1.61035C15.2144 1.61059 19.1387 5.52349 19.1387 10.3516C19.1384 15.1794 15.2143 19.0925 10.375 19.0928C5.53554 19.0928 1.61163 15.1795 1.61133 10.3516C1.61133 5.52335 5.53536 1.61035 10.375 1.61035ZM4.28516 14.2461C5.25853 15.7564 6.77954 16.8813 8.57031 17.3398C7.92132 16.3863 7.42978 15.3389 7.08887 14.2461H4.28516ZM13.6943 14.2461C13.3593 15.3537 12.8762 16.3989 12.2422 17.3232C14.0058 16.8547 15.5028 15.7387 16.4648 14.2461H13.6943ZM8.7002 14.2461C9.0916 15.3294 9.65349 16.341 10.3896 17.2178C11.1216 16.3858 11.6943 15.3706 12.0889 14.2461H8.7002ZM3.49805 8.10547C3.26597 8.81258 3.13867 9.56719 3.13867 10.3516C3.13873 11.1813 3.28148 11.9777 3.54004 12.7197H6.7168C6.55886 11.8555 6.48399 10.9789 6.49512 10.1113C6.50379 9.43833 6.56579 8.76649 6.67383 8.10547H3.49805ZM14.0547 8.10547C14.1973 8.92977 14.2645 9.76441 14.2539 10.5908C14.2447 11.3056 14.176 12.0192 14.0547 12.7197H17.21C17.4686 11.9777 17.6113 11.1813 17.6113 10.3516C17.6113 9.56719 17.4841 8.81258 17.252 8.10547H14.0547ZM8.22168 8.10547C8.09967 8.76406 8.03133 9.44324 8.02246 10.1309C8.01131 11.0002 8.09439 11.8717 8.27051 12.7197H12.5039C12.6408 12.0229 12.7172 11.3018 12.7266 10.5713C12.7372 9.74386 12.6609 8.91471 12.502 8.10547H8.22168ZM8.50586 3.37891C6.69467 3.8606 5.16368 5.02493 4.20605 6.5791H7.01562C7.35147 5.42575 7.84847 4.33749 8.50586 3.37891ZM12.1777 3.36035C12.8515 4.34993 13.3531 5.44151 13.6953 6.5791H16.5439C15.5746 5.00596 14.0179 3.83102 12.1777 3.36035ZM10.3584 3.4834C9.59964 4.34578 9.01075 5.40543 8.61523 6.5791H12.0898C11.6969 5.44924 11.1226 4.39335 10.3584 3.4834Z\"\n fill=\"#B5B7BB\"\n />\n </svg>\n )\n}\n\nexport default Country\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAKM,IAAAI,EAAA,6BALNC,EAAkB,iBAElB,MAAMC,EAAWC,MAEb,OAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAQ,GAAGA,EACjG,mBAAC,QACC,EAAE,0jDACF,KAAK,UACP,EACF,EAIJ,IAAOL,EAAQI",
|
|
6
6
|
"names": ["Country_exports", "__export", "Country_default", "__toCommonJS", "import_jsx_runtime", "import_react", "Country", "props"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var B=Object.create;var h=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var D=(t,o)=>{for(var i in o)h(t,i,{get:o[i],enumerable:!0})},v=(t,o,i,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of C(o))!A.call(t,n)&&n!==i&&h(t,n,{get:()=>o[n],enumerable:!(l=M(o,n))||l.enumerable});return t};var L=(t,o,i)=>(i=t!=null?B(F(t)):{},v(o||!t||!t.__esModule?h(i,"default",{value:t,enumerable:!0}):i,t)),E=t=>v(h({},"__esModule",{value:!0}),t);var j={};D(j,{default:()=>O});module.exports=E(j);var e=require("react/jsx-runtime"),p=require("react"),s=require("../../components/index.js"),y=L(require("../Subscribe/index.js")),k=require("./types.js"),c=require("./icons/index.js"),u=require("react-responsive"),x=require("../../helpers/utils.js"),w=require("../../shared/Styles.js");const S=({data:{footer:t}={},currentCountry:o,event:i,subscribeLoading:l,classNames:n})=>{const[m,r]=(0,p.useState)(!1),d=(0,u.useMediaQuery)({query:"(max-width: 1439px)"});(0,p.useEffect)(()=>{r(d)},[d]);const f=(0,p.useMemo)(()=>t?.blocks?.find(a=>a?.blockType===k.FooterNavigationBlockType.Brand)?.country||{},[t]);return(0,e.jsxs)(s.Container,{className:(0,x.cn)(n?.root),childClassName:(0,x.cn)("laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8",n?.child),children:[(0,e.jsx)(s.Text,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.blocks?.map(a=>{if(a?.blockType===k.FooterNavigationBlockType.Signup)return(0,e.jsx)(T,{subscribeLoading:l,data:a,onSubmit:i?.signup},a.id);if(a?.blockType===k.FooterNavigationBlockType.Brand)return(0,e.jsx)(z,{data:a,isMobile:m,event:i,currentCountry:o},a?.id);if(a?.blockType===k.FooterNavigationBlockType.Main)return(0,e.jsx)($,{data:{...a,country:f},event:i,isMobile:m,currentCountry:o},a.id)})]})},T=({data:t,onSubmit:o,subscribeLoading:i})=>(0,e.jsxs)("div",{className:"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#080A0F] px-4 py-8",children:[(0,e.jsx)(y.default,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:o,loading:i}),(0,e.jsx)("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(s.Text,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(l=>(0,e.jsxs)("div",{className:"flex-start flex gap-2",children:[(0,e.jsx)(s.Picture,{source:l?.icon?.url,alt:l?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Text,{html:l?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})]},l?.id))})]}),(0,e.jsx)("div",{className:"desktop:block hidden w-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(s.Text,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(l=>(0,e.jsx)(s.Link,{href:`${l?.link}?ref=footer`,asChild:!l?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:l?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},l?.id))})]})]})]}),$=({data:t,event:o,isMobile:i,currentCountry:l})=>{const[n,m]=(0,p.useState)(!1),{services:r,mainNav:d,country:f}=t;return(0,e.jsxs)("div",{className:"flex flex-col gap-8",children:[(0,e.jsxs)("div",{className:(0,x.cn)({"desktop:gap-16 flex":r?.download?.title}),children:[(0,e.jsxs)("div",{className:(0,x.cn)("w-full",{"desktop:flex-[1260]":r?.download?.title}),children:[(0,e.jsx)(s.Text,{html:r?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:(0,x.cn)("laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2",{"desktop:max-w-[648px]":r?.download?.title}),children:r?.storeBenefits?.reasons?.map(a=>(0,e.jsxs)("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[(0,e.jsx)(s.Picture,{source:a?.icon?.url,alt:a?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Link,{href:`${a?.link}?ref=footer`,asChild:!a?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})})]},a?.id))})]}),(0,e.jsx)(N,{className:(0,x.cn)({"desktop:flex-[404] hidden desktop:block":r?.download?.title}),title:r?.download?.title,apps:r?.download?.apps})]}),(0,e.jsx)("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:grid grid-cols-4 gap-4",children:[(0,e.jsx)(b,{title:d?.products?.title,lists:d?.products?.products}),(0,e.jsx)(b,{title:d?.explore?.title,lists:d?.explore?.explores}),(0,e.jsx)(b,{title:d?.support?.title,lists:d?.support?.supports}),(0,e.jsxs)("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[(0,e.jsxs)("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[(0,e.jsx)(s.Text,{as:"p",html:d?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white"}),i&&(0,e.jsx)("button",{onClick:()=>m(!n),children:n?(0,e.jsx)(c.SubtractIcon,{width:20,height:20}):(0,e.jsx)(c.AddIcon,{width:20,height:20})})]}),(n&&i||!i)&&(0,e.jsx)("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",children:d?.contact?.contacts?.map(a=>(0,e.jsxs)("div",{className:"flex items-start gap-2",children:[(0,e.jsx)(s.Picture,{source:a?.icon?.url,alt:a?.icon?.alt,className:"size-5 shrink-0"}),(0,e.jsx)(s.Link,{href:a?.link,className:"no-underline",children:(0,e.jsx)(s.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})})]},a?.id))}),(0,e.jsx)(g,{country:l||f,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:i,onChangeCountry:o?.country}),(0,e.jsx)("div",{className:"desktop:hidden mt-8",children:(0,e.jsx)(N,{title:r?.download?.title,apps:r?.download?.apps})}),!!d?.socials?.length&&(0,e.jsx)("div",{className:"mt-8 flex items-center gap-2",children:d?.socials?.map(a=>(0,e.jsx)(s.Link,{href:`${a?.link}?ref=footer`,children:(0,e.jsx)(s.Picture,{source:a?.icon?.url,alt:a?.icon?.alt,className:"size-8 shrink-0"})},a?.id))}),(0,e.jsx)("div",{className:"mt-4 flex flex-wrap gap-2",children:d?.payment?.map(a=>(0,e.jsx)(s.Link,{href:a?.link,children:(0,e.jsx)(s.Picture,{source:a?.icon?.url,alt:a?.icon?.alt,className:"h-[28px] w-[44px] shrink-0"})},a?.id))})]})]})]})},z=({data:t,isMobile:o,event:i,currentCountry:l})=>(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[(0,e.jsxs)("div",{className:"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4",children:[(0,e.jsx)(s.Text,{html:t?.brand?.currentBrand,className:"text-[#B6B6BA]"}),(0,e.jsx)("div",{className:"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]"}),(0,e.jsx)("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4",children:t?.brand?.brands?.map(n=>(0,e.jsx)(s.Link,{href:`${n?.link}?ref=footer`,children:(0,e.jsx)(s.Text,{html:n?.icon,className:"text-[#B6B6BA] hover:text-white"})},n?.id))})]}),(0,e.jsx)(g,{country:l||t?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:o,onChangeCountry:i?.country})]}),(0,e.jsx)("div",{className:"h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[(0,e.jsx)(s.Text,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:[t?.policy?.policies?.map(n=>(0,e.jsx)(s.Link,{href:`${n?.link}?ref=footer`,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white",children:n?.label},n?.id)),t?.policy?.cookies&&(0,e.jsx)("button",{"data-cc":"show-preferencesModal",onClick:i?.cookiesSet,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white",children:t?.policy?.cookies})]})]})]}),b=({title:t,lists:o,className:i})=>{const[l,n]=(0,p.useState)(!1),[m,r]=(0,p.useState)(!1),d=(0,u.useMediaQuery)({query:"(max-width: 1439px)"});return(0,p.useEffect)(()=>{r(d)},[d]),(0,e.jsxs)("div",{className:(0,x.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",i),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>n(!l),children:[(0,e.jsx)(s.Text,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white"}),m&&(0,e.jsx)(e.Fragment,{children:l?(0,e.jsx)(c.SubtractIcon,{width:20,height:20}):(0,e.jsx)(c.AddIcon,{width:20,height:20})})]}),(l&&m||!m)&&(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:o?.map(f=>(0,e.jsx)(s.Link,{href:`${f?.link}?ref=footer`,className:"no-underline",children:(0,e.jsx)(s.Text,{html:f?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},f?.id))})]})},N=({title:t,apps:o,className:i})=>o?.length?(0,e.jsxs)("div",{className:i,children:[(0,e.jsx)(s.Text,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex items-center gap-4",children:o?.map(l=>(0,e.jsxs)("div",{className:"flex flex-col items-center gap-[6px]",children:[(0,e.jsx)(s.Link,{href:l?.link,children:(0,e.jsx)(s.Picture,{source:l?.icon?.url,alt:l?.icon?.alt,className:"size-10 shrink-0"})}),l?.label&&(0,e.jsx)(s.Text,{html:l?.label,className:"text-xs font-bold text-[#999999]"})]},l?.id))})]}):null,g=({country:t,isMobile:o,className:i,onChangeCountry:l})=>(0,e.jsx)("div",{className:(0,x.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",i),onClick:()=>l?.(),children:(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex cursor-pointer items-center gap-2",children:[(0,e.jsx)(c.CountryIcon,{width:20,height:20,className:"shrink-0"}),(0,e.jsx)(s.Text,{as:"p",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white"})]}),o&&(0,e.jsx)("button",{children:(0,e.jsx)(c.ArrowRightIcon,{width:20,height:20})})]})});var O=(0,w.withLayout)(S);
|
|
1
|
+
"use strict";var C=Object.create;var b=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var A=(t,l)=>{for(var i in l)b(t,i,{get:l[i],enumerable:!0})},y=(t,l,i,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of D(l))!L.call(t,n)&&n!==i&&b(t,n,{get:()=>l[n],enumerable:!(a=M(l,n))||a.enumerable});return t};var E=(t,l,i)=>(i=t!=null?C(F(t)):{},y(l||!t||!t.__esModule?b(i,"default",{value:t,enumerable:!0}):i,t)),S=t=>y(b({},"__esModule",{value:!0}),t);var j={};A(j,{default:()=>P});module.exports=S(j);var e=require("react/jsx-runtime"),f=require("react"),o=require("../../components/index.js"),w=E(require("../Subscribe/index.js")),g=require("./types.js"),x=require("./icons/index.js"),k=require("react-responsive"),p=require("../../helpers/utils.js"),B=require("../../shared/Styles.js");const $=({data:{footer:t}={},currentCountry:l,event:i,subscribeLoading:a,classNames:n})=>{const[m,c]=(0,f.useState)(!1),d=(0,k.useMediaQuery)({query:"(max-width: 1439px)"});(0,f.useEffect)(()=>{c(d)},[d]);const u=(0,f.useMemo)(()=>t?.blocks?.find(r=>r?.blockType===g.FooterNavigationBlockType.Brand)?.country||{},[t]);return(0,e.jsx)("footer",{className:(0,p.cn)(n?.root),children:(0,e.jsxs)(o.Container,{className:(0,p.cn)(n?.child),childClassName:(0,p.cn)("laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8"),children:[(0,e.jsx)(o.Text,{html:t?.story,className:"desktop:text-sm text-xs font-bold text-[#6D6D6F]"}),t?.blocks?.map(r=>{if(r?.blockType===g.FooterNavigationBlockType.Signup)return(0,e.jsx)(z,{subscribeLoading:a,data:r,onSubmit:i?.signup},r.id);if(r?.blockType===g.FooterNavigationBlockType.Brand)return(0,e.jsx)(O,{data:r,isMobile:m,event:i,currentCountry:l},r?.id);if(r?.blockType===g.FooterNavigationBlockType.Main)return(0,e.jsx)(T,{data:{...r,country:u},event:i,isMobile:m,currentCountry:l},r.id)})]})})},z=({data:t,onSubmit:l,subscribeLoading:i})=>(0,e.jsxs)("div",{className:"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8",children:[(0,e.jsx)(w.default,{subscribeMetadata:t?.signup,className:"desktop:flex-[744]",onSubmit:l,loading:i}),(0,e.jsx)("div",{className:"desktop:hidden h-px w-full bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(o.Text,{html:t?.enjoy?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.enjoy?.enjoys?.map(a=>(0,e.jsxs)("div",{className:"flex-start flex gap-2",children:[(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt||"",className:"size-5 shrink-0"}),(0,e.jsx)(o.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})]},a?.id))})]}),(0,e.jsx)("div",{className:"desktop:block hidden w-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)(o.Text,{html:t?.benefit?.title,className:"text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex flex-col gap-2",children:t?.benefit?.benefits?.map(a=>(0,e.jsx)(o.Link,{href:`${a?.link}?ref=footer`,asChild:!a?.link,className:"no-underline",children:(0,e.jsx)(o.Text,{html:a?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},a?.id))})]})]})]}),T=({data:t,event:l,isMobile:i,currentCountry:a})=>{const[n,m]=(0,f.useState)(!1),{services:c,mainNav:d,country:u}=t,r="contact-section";return(0,e.jsxs)("nav",{className:"flex flex-col gap-8","aria-label":"Main navigation",children:[(0,e.jsxs)("div",{className:(0,p.cn)({"desktop:gap-16 flex":c?.download?.title}),children:[(0,e.jsxs)("div",{className:(0,p.cn)("w-full",{"desktop:flex-[1260]":c?.download?.title}),children:[(0,e.jsx)(o.Text,{html:c?.storeBenefits?.title,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:(0,p.cn)("laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2",{"desktop:max-w-[648px]":c?.download?.title}),children:c?.storeBenefits?.reasons?.map(s=>(0,e.jsxs)("div",{className:"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2",children:[(0,e.jsx)("img",{src:s?.icon?.url,loading:"lazy",alt:s?.icon?.alt||"",className:"size-5 shrink-0"}),(0,e.jsx)(o.Link,{href:`${s?.link}?ref=footer`,asChild:!s?.link,className:"no-underline",children:(0,e.jsx)(o.Text,{html:s?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]"})})]},s?.id))})]}),(0,e.jsx)(v,{className:(0,p.cn)({"desktop:flex-[404] hidden desktop:block":c?.download?.title}),title:c?.download?.title,apps:c?.download?.apps})]}),(0,e.jsx)("div",{className:"desktop:block hidden h-px bg-[#3D3E3F]","aria-hidden":"true"}),(0,e.jsxs)("div",{className:"desktop:grid grid-cols-4 gap-4",children:[(0,e.jsx)(h,{title:d?.products?.title,lists:d?.products?.products}),(0,e.jsx)(h,{title:d?.explore?.title,lists:d?.explore?.explores}),(0,e.jsx)(h,{title:d?.support?.title,lists:d?.support?.supports}),(0,e.jsxs)("div",{className:"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4",children:[(0,e.jsxs)("div",{className:"desktop:pb-0 flex items-center justify-between pb-4",children:[(0,e.jsx)(o.Text,{as:"p",html:d?.contact?.title,className:"text-xl font-bold leading-[1.2] text-white",id:r}),i&&(0,e.jsx)("button",{onClick:()=>m(!n),"aria-expanded":n,"aria-controls":r,"aria-label":n?"Collapse contact section":"Expand contact section",children:n?(0,e.jsx)(x.SubtractIcon,{width:20,height:20}):(0,e.jsx)(x.AddIcon,{width:20,height:20})})]}),(n&&i||!i)&&(0,e.jsx)("div",{className:"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2",role:"region","aria-labelledby":r,children:d?.contact?.contacts?.map(s=>(0,e.jsxs)(o.Link,{href:s?.link,className:"group flex items-start gap-2 no-underline",children:[(0,e.jsx)("img",{src:s?.icon?.url,loading:"lazy",alt:s?.icon?.alt,className:"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),(0,e.jsx)(o.Text,{html:s?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white"})]},s?.id))}),(0,e.jsx)(N,{country:a||u,className:"desktop:hidden border-b border-[#3D3E3F]",isMobile:i,onChangeCountry:l?.country}),(0,e.jsx)("div",{className:"desktop:hidden mt-8",children:(0,e.jsx)(v,{title:c?.download?.title,apps:c?.download?.apps})}),!!d?.socials?.length&&(0,e.jsx)("div",{className:"mt-8 flex items-center gap-2",role:"list","aria-label":"Social media links",children:d?.socials?.map(s=>(0,e.jsx)(o.Link,{href:`${s?.link}?ref=footer`,className:"group",role:"listitem","aria-label":s?.icon?.alt||"Social media",children:(0,e.jsx)("img",{src:s?.icon?.url,loading:"lazy",alt:s?.icon?.alt,className:"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"})},s?.id))}),(0,e.jsx)("div",{className:"mt-4 flex flex-wrap gap-2",role:"list","aria-label":"Payment methods",children:d?.payment?.map(s=>(0,e.jsx)(o.Link,{href:s?.link,asChild:!s?.link,role:"listitem","aria-label":s?.icon?.alt||"Payment method",children:(0,e.jsx)("img",{src:s?.icon?.url,loading:"lazy",alt:s?.icon?.alt||"",className:"h-[28px] w-[44px] shrink-0"})},s?.id))})]})]})]})},O=({data:t,isMobile:l,event:i,currentCountry:a})=>(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,e.jsxs)("div",{className:"desktop:items-center desktop:flex desktop:gap-4",children:[(0,e.jsxs)("div",{className:"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4",children:[(0,e.jsx)(o.Link,{href:`${t?.brand?.link}?ref=footer`,asChild:!t?.brand?.link,children:(0,e.jsx)(o.Text,{html:t?.brand?.currentBrand,className:"cursor-pointer text-[#B6B6BA] hover:text-white"})}),(0,e.jsx)("div",{className:"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]"}),(0,e.jsx)("div",{className:"desktop:gap-6 flex flex-wrap items-center gap-4",children:t?.brand?.brands?.map(n=>(0,e.jsx)(o.Link,{href:`${n?.link}?ref=footer`,children:(0,e.jsx)(o.Text,{html:n?.icon,className:"text-[#B6B6BA] hover:text-white"})},n?.id))})]}),(0,e.jsx)(N,{country:a||t?.country,className:"desktop:flex-[316] desktop:block hidden",isMobile:l,onChangeCountry:i?.country})]}),(0,e.jsx)("div",{className:"h-px bg-[#3D3E3F]"}),(0,e.jsxs)("div",{className:"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1",children:[(0,e.jsx)(o.Text,{html:t?.copyright?.label,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"flex flex-wrap items-center gap-x-2 gap-y-1",children:[t?.policy?.policies?.map(n=>(0,e.jsx)(o.Link,{href:`${n?.link}?ref=footer`,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white",children:n?.label},n?.id)),t?.policy?.cookies&&(0,e.jsx)("button",{"data-cc":"show-preferencesModal",onClick:i?.cookiesSet,className:"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Cookie preferences: ${t?.policy?.cookies}`,children:t?.policy?.cookies})]})]})]}),h=({title:t,lists:l,className:i})=>{const[a,n]=(0,f.useState)(!1),[m,c]=(0,f.useState)(!1),d=(0,k.useMediaQuery)({query:"(max-width: 1439px)"});(0,f.useEffect)(()=>{c(d)},[d]);const u=`nav-section-${t?.replace(/\s+/g,"-").toLowerCase()}`;return(0,e.jsxs)("div",{className:(0,p.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",i),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(o.Text,{as:"p",html:t,className:"text-xl font-bold leading-[1.2] text-white",id:u}),m&&(0,e.jsx)("button",{onClick:()=>n(!a),"aria-expanded":a,"aria-controls":u,"aria-label":a?`Collapse ${t}`:`Expand ${t}`,className:"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black",children:a?(0,e.jsx)(x.SubtractIcon,{width:20,height:20}):(0,e.jsx)(x.AddIcon,{width:20,height:20})})]}),(a&&m||!m)&&(0,e.jsx)("nav",{className:"mt-4 flex flex-col gap-2",role:"region","aria-labelledby":u,children:l?.map(r=>(0,e.jsx)(o.Link,{href:`${r?.link}?ref=footer`,className:"no-underline",children:(0,e.jsx)(o.Text,{html:r?.label,className:"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white"})},r?.id))})]})},v=({title:t,apps:l,className:i})=>l?.length?(0,e.jsxs)("div",{className:i,children:[(0,e.jsx)(o.Text,{html:t,className:" text-xl font-bold leading-[1.2] text-white"}),(0,e.jsx)("div",{className:"mt-4 flex items-center gap-4",role:"list","aria-label":"Download apps",children:l?.map(a=>(0,e.jsxs)(o.Link,{href:a?.link,className:"group flex flex-col items-center gap-[6px]",role:"listitem","aria-label":a?.icon?.alt||a?.label||"Download app",children:[(0,e.jsx)("img",{src:a?.icon?.url,loading:"lazy",alt:a?.icon?.alt,className:"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100"}),a?.label&&(0,e.jsx)(o.Text,{html:a?.label,className:"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white"})]},a?.id))})]}):null,N=({country:t,isMobile:l,className:i,onChangeCountry:a})=>(0,e.jsx)("div",{className:(0,p.cn)("desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4",i),children:(0,e.jsxs)("button",{onClick:()=>a?.(),className:"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black","aria-label":`Change country/region, current: ${t?.countryName||t?.country}`,children:[(0,e.jsxs)("div",{className:"group flex items-center gap-2",children:[(0,e.jsx)(x.CountryIcon,{width:20,height:20,className:"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100","aria-hidden":"true"}),(0,e.jsx)(o.Text,{as:"span",html:t?.countryName||t?.country,className:"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200"})]}),l&&(0,e.jsx)(x.ArrowRightIcon,{width:20,height:20,"aria-hidden":"true"})]})});var P=(0,B.withLayout)($);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/FooterNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Picture, Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({\n data: { footer } = {},\n currentCountry,\n event,\n subscribeLoading,\n classNames,\n}: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return footer?.blocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)?.country || {}\n }, [footer])\n\n return (\n <Container\n className={cn(classNames?.root)}\n childClassName={cn('laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8', classNames?.child)}\n >\n <Text html={footer?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footer?.blocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return (\n <MarketingConversion\n key={block.id}\n subscribeLoading={subscribeLoading}\n data={block}\n onSubmit={event?.signup}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return (\n <FooterBrand\n key={block?.id}\n data={block}\n isMobile={isMobile}\n event={event}\n currentCountry={currentCountry}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n key={block.id}\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({\n data,\n onSubmit,\n subscribeLoading,\n}: {\n data: any\n onSubmit?: (_params: any) => void\n subscribeLoading?: boolean\n}) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#080A0F] px-4 py-8\">\n <Subscribe\n subscribeMetadata={data?.signup}\n className=\"desktop:flex-[744]\"\n onSubmit={onSubmit}\n loading={subscribeLoading}\n />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <Picture source={enjoyItem?.icon?.url} alt={enjoyItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"desktop:block hidden w-px bg-[#3D3E3F]\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={`${benefitItem?.link}?ref=footer`}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n return (\n <div className=\"flex flex-col gap-8\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <Picture source={reasonItem?.icon?.url} alt={reasonItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={`${reasonItem?.link}?ref=footer`} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text as=\"p\" html={mainNav?.contact?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <button onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\">\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <div key={contactItem?.id} className=\"flex items-start gap-2\">\n <Picture source={contactItem?.icon?.url} alt={contactItem?.icon?.alt} className=\"size-5 shrink-0\" />\n <Link href={contactItem?.link} className=\"no-underline\">\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n </div>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link href={`${socialItem?.link}?ref=footer`} key={socialItem?.id}>\n <Picture source={socialItem?.icon?.url} alt={socialItem?.icon?.alt} className=\"size-8 shrink-0\" />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link href={paymentItem?.link} key={paymentItem?.id}>\n <Picture\n source={paymentItem?.icon?.url}\n alt={paymentItem?.icon?.alt}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4\">\n <Text html={data?.brand?.currentBrand} className=\"text-[#B6B6BA]\" />\n <div className=\"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={`${brandItem?.link}?ref=footer`} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={`${policyItem?.link}?ref=footer`}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white\"\n >\n {policyItem?.label}\n </Link>\n ))}\n {data?.policy?.cookies && (\n <button\n data-cc=\"show-preferencesModal\"\n onClick={event?.cookiesSet}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white\"\n >\n {data?.policy?.cookies}\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\" onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}>\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n {isMobile && (\n <>{mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}</>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div className=\"mt-4 flex flex-col gap-2\">\n {lists?.map((item: any) => (\n <Link href={`${item?.link}?ref=footer`} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\">\n {apps?.map((appItem: any) => (\n <div key={appItem?.id} className=\"flex flex-col items-center gap-[6px]\">\n <Link href={appItem?.link}>\n <Picture source={appItem?.icon?.url} alt={appItem?.icon?.alt} className=\"size-10 shrink-0\" />\n </Link>\n {appItem?.label && <Text html={appItem?.label} className=\"text-xs font-bold text-[#999999]\" />}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div\n className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}\n onClick={() => onChangeCountry?.()}\n >\n <div className=\"flex items-center justify-between\">\n <div className=\"flex cursor-pointer items-center gap-2\">\n <CountryIcon width={20} height={20} className=\"shrink-0\" />\n <Text\n as=\"p\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] text-base font-bold leading-[1.4] text-white hover:text-white\"\n />\n </div>\n {isMobile && (\n <button>\n <ArrowRightIcon width={20} height={20} />\n </button>\n )}\n </div>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["FooterNavigation_exports", "__export", "FooterNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Subscribe", "import_types", "import_icons", "import_react_responsive", "import_utils", "import_Styles", "FooterNavigation", "footer", "currentCountry", "event", "subscribeLoading", "classNames", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "Subscribe", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "item", "apps", "appItem", "onChangeCountry"]
|
|
4
|
+
"sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\nimport { Text, Container, Link } from '../../components/index.js'\nimport Subscribe from '../Subscribe/index.js'\nimport type { FooterNavigationProps } from './types.js'\nimport { FooterNavigationBlockType } from './types.js'\nimport { AddIcon, SubtractIcon, ArrowRightIcon, CountryIcon } from './icons/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst FooterNavigation = ({\n data: { footer } = {},\n currentCountry,\n event,\n subscribeLoading,\n classNames,\n}: FooterNavigationProps) => {\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const country = useMemo(() => {\n return footer?.blocks?.find((block: any) => block?.blockType === FooterNavigationBlockType.Brand)?.country || {}\n }, [footer])\n\n return (\n <footer className={cn(classNames?.root)}>\n <Container\n className={cn(classNames?.child)}\n childClassName={cn('laptop:py-16 desktop:gap-16 flex flex-col gap-8 bg-black py-8')}\n >\n <Text html={footer?.story} className=\"desktop:text-sm text-xs font-bold text-[#6D6D6F]\" />\n {footer?.blocks?.map((block: any) => {\n if (block?.blockType === FooterNavigationBlockType.Signup) {\n return (\n <MarketingConversion\n key={block.id}\n subscribeLoading={subscribeLoading}\n data={block}\n onSubmit={event?.signup}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Brand) {\n return (\n <FooterBrand\n key={block?.id}\n data={block}\n isMobile={isMobile}\n event={event}\n currentCountry={currentCountry}\n />\n )\n }\n if (block?.blockType === FooterNavigationBlockType.Main) {\n return (\n <MainServices\n key={block.id}\n data={{ ...block, country }}\n event={event}\n isMobile={isMobile}\n currentCountry={currentCountry}\n />\n )\n }\n })}\n </Container>\n </footer>\n )\n}\n\n/**\n * MarketingConversion \u8425\u9500\u8F6C\u5316\u6A21\u5757\n * @param data\n * @param onSubmit signup\u63D0\u4EA4\u4E8B\u4EF6\n * @returns\n */\nconst MarketingConversion = ({\n data,\n onSubmit,\n subscribeLoading,\n}: {\n data: any\n onSubmit?: (_params: any) => void\n subscribeLoading?: boolean\n}) => {\n return (\n <div className=\"desktop:py-16 desktop:gap-16 laptop:px-8 desktop:flex-row rounded-btn flex flex-col gap-8 bg-[#1E2024] px-4 py-8\">\n <Subscribe\n subscribeMetadata={data?.signup}\n className=\"desktop:flex-[744]\"\n onSubmit={onSubmit}\n loading={subscribeLoading}\n />\n <div className=\"desktop:hidden h-px w-full bg-[#3D3E3F]\" />\n <div className=\"desktop:gap-6 laptop:flex-row desktop:flex-[792] flex flex-col gap-4\">\n <div className=\"flex-1\">\n <Text html={data?.enjoy?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.enjoy?.enjoys?.map((enjoyItem: any) => (\n <div key={enjoyItem?.id} className=\"flex-start flex gap-2\">\n <img\n src={enjoyItem?.icon?.url}\n loading=\"lazy\"\n alt={enjoyItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Text\n html={enjoyItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </div>\n ))}\n </div>\n </div>\n <div className=\"desktop:block hidden w-px bg-[#3D3E3F]\" />\n <div className=\"flex-1\">\n <Text html={data?.benefit?.title} className=\"text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex flex-col gap-2\">\n {data?.benefit?.benefits?.map((benefitItem: any) => (\n <Link\n href={`${benefitItem?.link}?ref=footer`}\n asChild={!benefitItem?.link}\n key={benefitItem?.id}\n className=\"no-underline\"\n >\n <Text\n html={benefitItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * MainServices \u4E3B\u5BFC\u822A\u4E0E\u670D\u52A1\u6A21\u5757\n * @param services \u670D\u52A1\n * @param mainNav \u4E3B\u5BFC\u822A\n * @param event \u4E8B\u4EF6\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @param currentCountry \u5F53\u524D\u56FD\u5BB6\n * @returns\n */\nconst MainServices = ({\n data,\n event,\n isMobile,\n currentCountry,\n}: {\n data: any\n event: any\n isMobile: boolean\n currentCountry: any\n}) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const { services, mainNav, country } = data\n const contactSectionId = 'contact-section'\n\n return (\n <nav className=\"flex flex-col gap-8\" aria-label=\"Main navigation\">\n <div\n className={cn({\n 'desktop:gap-16 flex': services?.download?.title,\n })}\n >\n <div\n className={cn('w-full', {\n 'desktop:flex-[1260]': services?.download?.title,\n })}\n >\n <Text html={services?.storeBenefits?.title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div\n className={cn('laptop:flex-row desktop:gap-4 laptop:flex-wrap mt-4 flex flex-col gap-2', {\n 'desktop:max-w-[648px]': services?.download?.title,\n })}\n >\n {services?.storeBenefits?.reasons?.map((reasonItem: any) => (\n <div key={reasonItem?.id} className=\"desktop:min-w-[288px] flex flex-1 shrink-0 items-center gap-2\">\n <img\n src={reasonItem?.icon?.url}\n loading=\"lazy\"\n alt={reasonItem?.icon?.alt || ''}\n className=\"size-5 shrink-0\"\n />\n <Link href={`${reasonItem?.link}?ref=footer`} asChild={!reasonItem?.link} className=\"no-underline\">\n <Text\n html={reasonItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA]\"\n />\n </Link>\n </div>\n ))}\n </div>\n </div>\n <DownloadApp\n className={cn({\n 'desktop:flex-[404] hidden desktop:block': services?.download?.title,\n })}\n title={services?.download?.title}\n apps={services?.download?.apps}\n />\n </div>\n <div className=\"desktop:block hidden h-px bg-[#3D3E3F]\" aria-hidden=\"true\" />\n <div className=\"desktop:grid grid-cols-4 gap-4\">\n <MainNavMenu title={mainNav?.products?.title} lists={mainNav?.products?.products} />\n <MainNavMenu title={mainNav?.explore?.title} lists={mainNav?.explore?.explores} />\n <MainNavMenu title={mainNav?.support?.title} lists={mainNav?.support?.supports} />\n <div className=\"desktop:py-0 desktop:border-none border-t border-[#3D3E3F] pt-4\">\n <div className=\"desktop:pb-0 flex items-center justify-between pb-4\">\n <Text\n as=\"p\"\n html={mainNav?.contact?.title}\n className=\"text-xl font-bold leading-[1.2] text-white\"\n id={contactSectionId}\n />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={contactSectionId}\n aria-label={mainNavMenuOpen ? 'Collapse contact section' : 'Expand contact section'}\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <div\n className=\"desktop:mt-4 desktop:mb-0 mb-4 flex flex-col gap-2\"\n role=\"region\"\n aria-labelledby={contactSectionId}\n >\n {mainNav?.contact?.contacts?.map((contactItem: any) => (\n <Link\n key={contactItem?.id}\n href={contactItem?.link}\n className=\"group flex items-start gap-2 no-underline\"\n >\n <img\n src={contactItem?.icon?.url}\n loading=\"lazy\"\n alt={contactItem?.icon?.alt}\n className=\"size-5 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n <Text\n html={contactItem?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] transition-colors duration-200 group-hover:text-white\"\n />\n </Link>\n ))}\n </div>\n )}\n <ChangeCountry\n country={currentCountry || country}\n className=\"desktop:hidden border-b border-[#3D3E3F]\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n <div className=\"desktop:hidden mt-8\">\n <DownloadApp title={services?.download?.title} apps={services?.download?.apps} />\n </div>\n {!!mainNav?.socials?.length && (\n <div className=\"mt-8 flex items-center gap-2\" role=\"list\" aria-label=\"Social media links\">\n {mainNav?.socials?.map((socialItem: any) => (\n <Link\n href={`${socialItem?.link}?ref=footer`}\n key={socialItem?.id}\n className=\"group\"\n role=\"listitem\"\n aria-label={socialItem?.icon?.alt || 'Social media'}\n >\n <img\n src={socialItem?.icon?.url}\n loading=\"lazy\"\n alt={socialItem?.icon?.alt}\n className=\"size-8 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n </Link>\n ))}\n </div>\n )}\n <div className=\"mt-4 flex flex-wrap gap-2\" role=\"list\" aria-label=\"Payment methods\">\n {mainNav?.payment?.map((paymentItem: any) => (\n <Link\n href={paymentItem?.link}\n asChild={!paymentItem?.link}\n key={paymentItem?.id}\n role=\"listitem\"\n aria-label={paymentItem?.icon?.alt || 'Payment method'}\n >\n <img\n src={paymentItem?.icon?.url}\n loading=\"lazy\"\n alt={paymentItem?.icon?.alt || ''}\n className=\"h-[28px] w-[44px] shrink-0\"\n />\n </Link>\n ))}\n </div>\n </div>\n </div>\n </nav>\n )\n}\n\nconst FooterBrand = ({\n data,\n isMobile,\n event,\n currentCountry,\n}: {\n data: any\n isMobile: boolean\n event: any\n currentCountry: any\n}) => {\n return (\n <div className=\"flex flex-col gap-4\">\n <div className=\"desktop:items-center desktop:flex desktop:gap-4\">\n <div className=\"laptop:flex-row laptop:items-center desktop:flex-[980] flex flex-col items-start gap-4\">\n <Link href={`${data?.brand?.link}?ref=footer`} asChild={!data?.brand?.link}>\n <Text html={data?.brand?.currentBrand} className=\"cursor-pointer text-[#B6B6BA] hover:text-white\" />\n </Link>\n <div className=\"laptop:block laptop:mb-[10px] hidden h-[20px] w-px bg-[#B6B6BA]\" />\n <div className=\"desktop:gap-6 flex flex-wrap items-center gap-4\">\n {data?.brand?.brands?.map((brandItem: any) => (\n <Link href={`${brandItem?.link}?ref=footer`} key={brandItem?.id}>\n <Text html={brandItem?.icon} className=\"text-[#B6B6BA] hover:text-white\" />\n </Link>\n ))}\n </div>\n </div>\n <ChangeCountry\n country={currentCountry || data?.country}\n className=\"desktop:flex-[316] desktop:block hidden\"\n isMobile={isMobile}\n onChangeCountry={event?.country}\n />\n </div>\n <div className=\"h-px bg-[#3D3E3F]\" />\n <div className=\"laptop:flex-row desktop:gap-4 desktop:items-center flex flex-col items-start gap-1\">\n <Text\n html={data?.copyright?.label}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1\">\n {data?.policy?.policies?.map((policyItem: any) => (\n <Link\n href={`${policyItem?.link}?ref=footer`}\n key={policyItem?.id}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white\"\n >\n {policyItem?.label}\n </Link>\n ))}\n {data?.policy?.cookies && (\n <button\n data-cc=\"show-preferencesModal\"\n onClick={event?.cookiesSet}\n className=\"desktop:text-base text-xs font-bold leading-[1.4] text-[#B6B6BA] no-underline hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Cookie preferences: ${data?.policy?.cookies}`}\n >\n {data?.policy?.cookies}\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MainNavMenu = ({ title, lists, className }: { title: string; lists: any[]; className?: string }) => {\n const [mainNavMenuOpen, setMainNavMenuOpen] = useState<boolean>(false)\n const [isMobile, setIsMobile] = useState(false)\n\n const mediaQuery = useMediaQuery({ query: '(max-width: 1439px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const sectionId = `nav-section-${title?.replace(/\\s+/g, '-').toLowerCase()}`\n\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <div className=\"flex items-center justify-between\">\n <Text as=\"p\" html={title} className=\"text-xl font-bold leading-[1.2] text-white\" id={sectionId} />\n {isMobile && (\n <button\n onClick={() => setMainNavMenuOpen(!mainNavMenuOpen)}\n aria-expanded={mainNavMenuOpen}\n aria-controls={sectionId}\n aria-label={mainNavMenuOpen ? `Collapse ${title}` : `Expand ${title}`}\n className=\"focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n >\n {mainNavMenuOpen ? <SubtractIcon width={20} height={20} /> : <AddIcon width={20} height={20} />}\n </button>\n )}\n </div>\n {((mainNavMenuOpen && isMobile) || !isMobile) && (\n <nav className=\"mt-4 flex flex-col gap-2\" role=\"region\" aria-labelledby={sectionId}>\n {lists?.map((item: any) => (\n <Link href={`${item?.link}?ref=footer`} key={item?.id} className=\"no-underline\">\n <Text\n html={item?.label}\n className=\"desktop:text-base text-sm font-bold leading-[1.2] text-[#B6B6BA] hover:text-white\"\n />\n </Link>\n ))}\n </nav>\n )}\n </div>\n )\n}\n\n/**\n * DownloadApp \u4E0B\u8F7D\u5E94\u7528\u6A21\u5757\n * @param title\n * @param apps\n * @param className\n * @returns\n */\nconst DownloadApp = ({ title, apps, className }: { title: string; apps: any[]; className?: string }) => {\n if (!apps?.length) return null\n return (\n <div className={className}>\n <Text html={title} className=\" text-xl font-bold leading-[1.2] text-white\" />\n <div className=\"mt-4 flex items-center gap-4\" role=\"list\" aria-label=\"Download apps\">\n {apps?.map((appItem: any) => (\n <Link\n key={appItem?.id}\n href={appItem?.link}\n className=\"group flex flex-col items-center gap-[6px]\"\n role=\"listitem\"\n aria-label={appItem?.icon?.alt || appItem?.label || 'Download app'}\n >\n <img\n src={appItem?.icon?.url}\n loading=\"lazy\"\n alt={appItem?.icon?.alt}\n className=\"size-10 shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n />\n {appItem?.label && (\n <Text\n html={appItem?.label}\n className=\"text-xs font-bold text-[#999999] transition-colors duration-200 group-hover:text-white\"\n />\n )}\n </Link>\n ))}\n </div>\n </div>\n )\n}\n\n/**\n * ChangeCountry \u5207\u6362\u56FD\u5BB6\u6A21\u5757\n * @param data \u6570\u636E\n * @param isMobile \u662F\u5426\u662F\u79FB\u52A8\u7AEF\n * @returns\n */\nconst ChangeCountry = ({\n country,\n isMobile,\n className,\n onChangeCountry,\n}: {\n country: any\n isMobile: boolean\n className?: string\n onChangeCountry?: () => void\n}) => {\n return (\n <div className={cn('desktop:py-0 desktop:border-none border-t border-[#3D3E3F] py-4', className)}>\n <button\n onClick={() => onChangeCountry?.()}\n className=\"flex w-full items-center justify-between focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black\"\n aria-label={`Change country/region, current: ${country?.countryName || country?.country}`}\n >\n <div className=\"group flex items-center gap-2\">\n <CountryIcon\n width={20}\n height={20}\n className=\"shrink-0 opacity-70 transition-opacity duration-200 group-hover:opacity-100\"\n aria-hidden=\"true\"\n />\n <Text\n as=\"span\"\n html={country?.countryName || country?.country}\n className=\"desktop:text-[#B6B6BA] desktop:group-hover:text-white text-base font-bold leading-[1.4] text-white transition-colors duration-200\"\n />\n </div>\n {isMobile && <ArrowRightIcon width={20} height={20} aria-hidden=\"true\" />}\n </button>\n </div>\n )\n}\n\nexport default withLayout(FooterNavigation)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["FooterNavigation_exports", "__export", "FooterNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Subscribe", "import_types", "import_icons", "import_react_responsive", "import_utils", "import_Styles", "FooterNavigation", "footer", "currentCountry", "event", "subscribeLoading", "classNames", "isMobile", "setIsMobile", "mediaQuery", "country", "block", "MarketingConversion", "FooterBrand", "MainServices", "data", "onSubmit", "Subscribe", "enjoyItem", "benefitItem", "mainNavMenuOpen", "setMainNavMenuOpen", "services", "mainNav", "contactSectionId", "reasonItem", "DownloadApp", "MainNavMenu", "contactItem", "ChangeCountry", "socialItem", "paymentItem", "brandItem", "policyItem", "title", "lists", "className", "sectionId", "item", "apps", "appItem", "onChangeCountry"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var ge=Object.create;var U=Object.defineProperty;var ye=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,Ne=Object.prototype.hasOwnProperty;var ke=(t,n)=>{for(var r in n)U(t,r,{get:n[r],enumerable:!0})},Z=(t,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let d of he(n))!Ne.call(t,d)&&d!==r&&U(t,d,{get:()=>n[d],enumerable:!(s=ye(n,d))||s.enumerable});return t};var G=(t,n,r)=>(r=t!=null?ge(xe(t)):{},Z(n||!t||!t.__esModule?U(r,"default",{value:t,enumerable:!0}):r,t)),we=t=>Z(U({},"__esModule",{value:!0}),t);var Be={};ke(Be,{default:()=>He});module.exports=we(Be);var e=require("react/jsx-runtime"),a=G(require("react")),l=require("../../components/index.js"),de=require("../../shared/Styles.js"),N=require("../../helpers/utils.js"),$=G(require("./NavProvider.js")),g=require("./types.js"),ue=require("es-toolkit"),pe=G(require("jump.js")),J=require("@gsap/react"),V=require("gsap"),T=require("./withCategory.js"),z=require("./icons/index.js"),me=G(require("../NavigationSearch/index.js"));const ee=(0,a.forwardRef)((t,n)=>{const{data:{header:r}={},buildProps:s,event:d,profile:m,theme:f="light",isTop:u=!1,searchResult:x,onSearch:y,isSearching:o,keywords:M,onPrimaryNavClick:C,onSeriesProductClick:p,onSidebarNavClick:k,headerId:v,cartCount:h,menuData:c}=t,[b,D]=(0,a.useState)(!1),[L,P]=(0,a.useState)(!1),S=(0,a.useRef)(null),B=(0,a.useRef)(null),F=()=>{const w=document?.querySelector("body")?.offsetWidth||0;P(w<=1440)};(0,a.useEffect)(()=>(F(),window.addEventListener("resize",F),()=>{window.removeEventListener("resize",F)}),[]),(0,a.useImperativeHandle)(n,()=>B.current),(0,a.useEffect)(()=>{B.current&&u&&(0,pe.default)(B.current,{duration:0,offset:B.current?.getBoundingClientRect()?.bottom||0})},[u]),(0,a.useEffect)(()=>{d&&(d.search=()=>D(!0))},[d]),(0,J.useGSAP)(()=>{S?.current&&b&&V.gsap.fromTo(S.current,{height:0},{height:"auto",duration:.3})},[b]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=b?"hidden":"auto"},[b]);const j=(0,a.useMemo)(()=>r?.bar?.actions?.find(w=>w?.blockType===g.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[r]);return(0,e.jsx)($.default,{buildProps:s,profile:m,isMobile:L,event:d,payloadData:r,onSidebarNavClick:k,onSeriesProductClick:p,cartCount:h,children:(0,e.jsx)("header",{id:v||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:B,children:(0,e.jsxs)("div",{className:(0,N.cn)("hover:bg-white hover:text-black",f==="light"?"text-black":"text-white",{}),children:[(0,e.jsx)(te,{data:r,className:"desktop:block hidden !bg-white",theme:f,onPrimaryNavClick:C}),(0,e.jsx)(re,{menuData:c,data:r,className:"desktop:hidden block !bg-white",onPrimaryNavClick:C}),b&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${B?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:S,className:(0,N.cn)("overflow-y-auto",{}),children:(0,e.jsx)(me.default,{data:j,keywords:M,isSearching:o,searchResult:x,onSearch:w=>{y?.(w)},onClose:()=>{y?.(),D(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>D(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:w=>{(w.key==="Enter"||w.key===" "||w.key==="Escape")&&(w.preventDefault(),D(!1))}})]})]})})})}),te=(0,a.forwardRef)((t,n)=>{const{data:r,onNavItemClick:s,className:d,theme:m,onPrimaryNavClick:f}=t,{event:u,profile:x}=(0,$.useNavContext)(),[y,o]=(0,a.useState)(!1),M=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(r?.categories?.filter(i=>i?.pcShow)),[r]),[C,p]=(0,a.useState)(null),[k,v]=(0,a.useState)([]),h=(0,a.useRef)(null),[c,b]=(0,a.useState)(!1),D=(0,a.useRef)(null),L=(0,a.useRef)(null),P=(0,a.useRef)(M.map(i=>Array(i?.length||0).fill(null)));(0,a.useEffect)(()=>{M?.length&&v(M?.map((i,E)=>i?.map((H,A)=>({groupIndex:E,index:A,open:!1}))))},[M]);const S=(0,a.useMemo)(()=>{let i=null;for(const E of k){for(const H of E)if(H.open){i=H;break}if(i)break}return i},[k]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=S?.open||c?"hidden":"auto"},[S?.open,c]);const B=(i,E,H)=>{if(b(!1),C?.components?.[0]?.blockType===g.HeaderNavigationBlockType.Links)C?.components?.[0]?.url&&window.open(C?.components?.[0]?.url);else{const A=M?.flat()||[],_=A?.findIndex(R=>R?.id===M[E][H]?.id);i.stopPropagation(),s?.(),f?.(A[_],_),p(M[E][H]),v(R=>R.map(ve=>ve.map(W=>W.groupIndex===E&&W.index===H?{...W,open:!W.open}:{...W,open:!1})))}},F=(i,E,H)=>{i.key==="Enter"||i.key===" "?(i.preventDefault(),B(i,E,H)):i.key==="Escape"&&S?.groupIndex===E&&S?.index===H&&(i.preventDefault(),j())},j=()=>{v(i=>i.map(E=>E.map(H=>({...H,open:!1}))))},w=(0,a.useMemo)(()=>{if(C)return C?.components?.[0]?.blockType},[C]),q=(0,T.WithSidebar)(ae,C),O=(0,T.WithMulticol)(Ce,C),be=(0,T.WithSupports)(Se,{categoriesItem:C,currentNavItemRef:P.current?.[S?.groupIndex||0]?.[S?.index||0]}),fe=(0,a.useMemo)(()=>{switch(w){case g.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(q,{});case g.HeaderNavigationBlockType.Supports:return(0,e.jsx)(be,{});case g.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(O,{});default:return null}},[w,C]),Q=(0,a.useMemo)(()=>r?.bar?.actions?.filter(i=>i?.pcShow),[r]),I=(0,a.useMemo)(()=>Q?.find(i=>i?.blockType===g.HeaderNavigationActionBlockType.Profile),[Q]),X=(0,a.useCallback)(()=>{b(i=>!i)},[]);return(0,a.useEffect)(()=>{if(h?.current){const i=h.current;return i.addEventListener("click",X),()=>{i.removeEventListener("click",X)}}},[X]),(0,J.useGSAP)(()=>{S?.open&&V.gsap.fromTo(L?.current,{height:0},{height:"auto"})},[S?.open]),(0,e.jsxs)(l.Container,{className:(0,N.cn)("relative h-[96px]",d),children:[(0,e.jsxs)("div",{ref:D,onClick:j,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)(se,{}),(0,e.jsx)(Y,{ref:h,actions:Q,activeStatus:c})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:M?.map((i,E)=>(0,e.jsx)("div",{className:"flex gap-3",children:i?.map((H,A)=>{const _=S?.groupIndex===E&&S?.index===A;return(0,e.jsx)("div",{ref:R=>{P.current[E][A]=R},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:R=>B(R,E,A),onKeyDown:R=>F(R,E,A),"aria-expanded":_,"aria-haspopup":"true","aria-label":H.text,children:[(0,e.jsx)(l.Text,{html:H.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":_,"opacity-100":y&&_})})]}),(0,e.jsx)("div",{className:(0,N.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":_},m==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},H.id)})},`groupCategory-${E}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(S?.open&&C),className:(0,N.cn)("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:!(S?.open&&C)}),onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{height:`calc(100dvh - ${D?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:L,className:(0,N.cn)("relative z-50",{"overflow-hidden":w!==g.HeaderNavigationBlockType.Supports}),children:fe}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:j,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:i=>{(i.key==="Enter"||i.key===" "||i.key==="Escape")&&(i.preventDefault(),j())}})]}),c&&(0,e.jsxs)("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:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${h?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:x?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:x?.nick_name||I?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:I?.profiles?.map(i=>(0,e.jsx)(K,{className:"py-2",label:i?.title,href:i?.url},i.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(z.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(l.Text,{html:I?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:I?.benefits?.map(i=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:i.benefitIcon?.url,className:"size-4",alt:i.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:i.benefit,className:"text-sm font-bold leading-[1.4]"})]},i.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>u?.join?.(),children:(0,e.jsx)(l.Text,{html:I?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:(0,e.jsx)(l.Text,{html:I?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>b(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:i=>{(i.key==="Enter"||i.key===" "||i.key==="Escape")&&(i.preventDefault(),b(!1))}})]})]})}),ae=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:r,onSidebarNavClick:s}=(0,$.useNavContext)(),[d,m]=(0,a.useState)([]),[f,u]=(0,a.useState)(-1),x=(0,a.useRef)(null),y=(0,a.useCallback)(()=>{const p=t?.subcategories;if(!p?.length)return;const k=p.findIndex(c=>!!c?.subSubCategories),v=p.findIndex(c=>!c?.subSubCategories),h=p.map((c,b)=>({index:b,open:k===b||v===b}));m(h)},[t]);(0,a.useEffect)(()=>{y()},[y]);const o=(0,a.useMemo)(()=>{const p=t?.subcategories?.[d?.find(v=>v.open)?.index||0],k=n?.find(v=>v?.label?.toLowerCase()===p?.label?.toLowerCase())||{};if(p?.collections){const v=r?.categories?.[p?.collections]||{};return{label:k?.label,isCollection:!0,banner:k?.banner,primary:k?.primary,series:[{products:v?.products}]}}else if(p?.subSubCategories){const v=p?.subSubCategories?.[f],h=n?.find(c=>c?.label?.toLowerCase()===v?.label?.toLowerCase())||{};if(v?.collections){const c=r?.categories?.[v?.collections]||{};return{label:h?.label,isCollection:!0,banner:h?.banner,primary:h?.primary,series:[{products:c?.products}]}}else return h}else return k},[t,d,f,n,r]),M=(0,a.useCallback)((p,k)=>{k?.subSubCategories?.length>0?u(0):u(-1),m(v=>v.map((h,c)=>({...h,open:c===p?!h.open:!1})))},[]),C=(p,k)=>{m(v=>v.map(h=>h.index===p?{...h,open:!0}:{...h,open:!1})),u(k)};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:x,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((p,k)=>{const v=Array.isArray(p?.subSubCategories)&&p?.subSubCategories?.length>0,h=d?.find(c=>c.index===k)?.open;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("button",{className:(0,N.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!v&&h}),onClick:()=>{M(k,p),s?.(p,k)},"aria-expanded":v?h:void 0,"aria-haspopup":v?"true":void 0,children:[(0,e.jsx)(l.Text,{html:p.label,className:"p-4 text-sm font-bold leading-[1.4]"}),v&&(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("size-4",{"rotate-180":h})})]}),h&&(0,e.jsx)("div",{className:"flex flex-col",role:"menu",children:p.subSubCategories?.map((c,b)=>(0,e.jsx)("button",{onClick:()=>{C(k,b),s?.(c,b)},className:(0,N.cn)("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":f===b}),role:"menuitem","aria-label":c.label,children:(0,e.jsx)(l.Text,{html:c.label,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"})},`subSubItem-${k}-${b}`))})]},`subcategoryItem-${k}`)})}),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}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{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})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(o).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:o?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),o?.primary&&!o?.primary?.hide&&(0,e.jsx)(l.Button,{as:"a",href:`${o?.primary?.url}?ref=${o?.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:o?.primary?.label})]}),(0,e.jsx)(l.Link,{href:o?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:o?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:o?.series?.map((p,k)=>(0,e.jsxs)("div",{children:[p.label&&(0,e.jsx)(l.Text,{html:p.label,className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!o?.banner&&(0,e.jsx)(l.Link,{asChild:!o?.banner?.href,href:o?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(l.Picture,{source:o?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:o?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:o?.banner?.desc||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),p.products?.map((v,h)=>(0,e.jsx)(ne,{seriesLabel:o?.label,product:v,isCollection:o?.isCollection},`seriesProductItem-${h}`))]})]},`seriesItem-${k}`))})]})]})}),Ce=({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((r,s)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(le,{item:r})},`multicolItem-${r?.label}-${s}`))})})})},Se=({supportsMetadata:t,currentNavItemRef:n})=>{const r=(0,a.useRef)(null),[s,d]=(0,a.useState)(null),[m,f]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(r?.current){const x=r?.current?.getBoundingClientRect();f(x.height)}},[r]);const u=(0,ue.debounce)(()=>{if(n){const x=n.getBoundingClientRect();d(x)}},500);return(0,a.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]),(0,a.useEffect)(()=>{if(n){const x=n.getBoundingClientRect();d(x)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${s?.right}px)`,height:m},children:(0,e.jsx)("div",{ref:r,className:"p-4",children:t?.map(x=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:x.url,className:"text-sm font-bold leading-[1.4] no-underline",children:x.label})},x.id))})})},ne=({product:t,isCollection:n,position:r,seriesLabel:s})=>{const{buildProps:d,onSeriesProductClick:m}=(0,$.useNavContext)();let f=n?t:d?.products?.find(o=>o.handle===t.handle);const u=f?.variants?.find(o=>o.sku===t.sku)||f?.variants?.[0],x=(0,a.useMemo)(()=>`/products/${f?.handle}?variant=${(0,N.atobID)(u?.id)}`,[f?.handle,u?.id]),y=(0,a.useMemo)(()=>f?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2),[f?.tags]);return u?.availableForSale?(0,e.jsx)(l.Link,{href:x,onClick:o=>{o.preventDefault(),window.open(x,"_self"),m?.(f,r||0,s)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(l.Picture,{source:`${u?.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(y)&&y?.map((o,M)=>(0,e.jsx)(l.Text,{as:"p",html:o,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]"},M))}),(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:f?.title||t?.name}),t?.desc&&(0,e.jsx)(l.Text,{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},le=({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(r=>(0,e.jsxs)("div",{className:"flex items-center gap-1 py-2",children:[(0,e.jsx)(l.Link,{href:`${r.url}?ref=navMenu`,asChild:!r.url,className:"text-sm font-bold leading-[1.4] no-underline",children:r.label}),r?.badge&&(0,e.jsx)(l.Text,{as:"p",html:r?.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]"})]},r.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,N.cn)("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":n}),children:(0,e.jsxs)(l.Link,{href:`${t.url}?ref=navMenu`,asChild:!t.url,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)("div",{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,N.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,N.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,N.cn)("mr-auto !p-0 text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),re=(0,a.forwardRef)(({data:t,menuData:n,className:r,onPrimaryNavClick:s},d)=>{const m=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(w=>w?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:u,subSubCategory:x}=(0,$.useNavContext)(),[y,o]=(0,a.useState)(!1),[M,C]=(0,a.useState)(0),[p,k]=(0,a.useState)(null),v=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(v?.current&&y){const w=v?.current?.getBoundingClientRect();C(window?.innerHeight-(w?.bottom||0))}},[y]),(0,J.useGSAP)(()=>{V.gsap.fromTo(v.current,{height:0},{height:M,duration:.3})},[M]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=y?"hidden":"auto"},[y]);const h=(0,a.useMemo)(()=>p?.components?.[0]?.blockType,[p]),c=(0,T.WithSupports)(Le,{categoriesItem:p}),b=(0,T.WithSidebar)(Me,p),D=(0,T.WithMulticol)(Pe,p),L=(0,a.useMemo)(()=>{switch(h){case g.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(b,{});case g.HeaderNavigationBlockType.Supports:return(0,e.jsx)(c,{});case g.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(D,{});default:return null}},[h,p,c]),P=(0,a.useCallback)(()=>{o(!1),C(0),u&&u(g.HeaderNavigationMenu.Primary)},[o,C,u]),S=(0,a.useMemo)(()=>t?.bar?.actions?.filter(w=>w?.mobileShow&&w?.blockType!==g.HeaderNavigationActionBlockType.Profile),[t]),B=(0,a.useMemo)(()=>t?.bar?.actions?.find(w=>w?.mobileShow&&w?.blockType===g.HeaderNavigationActionBlockType.Profile)||{},[t]),F=(0,a.useMemo)(()=>{switch(f){case g.HeaderNavigationMenu.Primary:return(0,e.jsx)(ze,{actions:S,menuOpen:y,onMenuOpenClose:()=>{o(!1),C(0)},onMenuOpenClick:()=>o(!0)});case g.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ce,{title:p?.text,onMenuOpenClose:P,onMenuBackClick:()=>u?.(g.HeaderNavigationMenu.Primary)});case g.HeaderNavigationMenu.Third:return(0,e.jsx)(ce,{title:x?.label,onMenuOpenClose:P,onMenuBackClick:()=>u?.(g.HeaderNavigationMenu.Secondary)});default:return null}},[y,f,u,p,S,x,P]),j=(0,a.useCallback)((w,q)=>{const O=Array.isArray(m)?Array.isArray(m[w])?m[w][q]:{}:{};k(O),O?.components?.[0]?.blockType===g.HeaderNavigationBlockType.Links?O?.components?.[0]?.url&&window.open(O?.components?.[0]?.url):u?.(g.HeaderNavigationMenu.Secondary)},[m,u]);return(0,e.jsxs)(l.Container,{className:(0,N.cn)("relative h-[52px]",r),children:[F,y&&(0,e.jsxs)("nav",{ref:v,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===g.HeaderNavigationMenu.Primary?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:n})}):null,f===g.HeaderNavigationMenu.Primary?(0,e.jsx)(De,{categories:m,onPrimaryMenuClick:j,onPrimaryNavClick:s,profileAction:B}):L]})]})}),De=({categories:t,onPrimaryMenuClick:n,profileAction:r,onPrimaryNavClick:s})=>(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((d,m)=>(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)("div",{className:(0,N.cn)("my-2 h-px w-full bg-[#E5E5E7]")}),d?.map((f,u)=>(0,e.jsx)(K,{label:f.text,onClick:()=>{const y=(t?.flat()||[])?.findIndex(o=>o?.id===t[m][u]?.id);n(m,u),s?.(f,y)},icon:f.components?.[0]?.icon},f.id))]},`groupCategory-${m}`))}),(0,e.jsx)(Ee,{profileAction:r})]}),Me=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:r,setCurrentMenu:s,subSubCategory:d,setSubSubCategory:m,setCurrentSeriesMetadata:f,currentSeriesMetadata:u,buildProps:x,onSidebarNavClick:y}=(0,$.useNavContext)(),[o,M]=(0,a.useState)([]),[C,p]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&M(t?.subcategories?.map((c,b)=>({index:b,open:!1})))},[t]),(0,a.useEffect)(()=>{d?.subSubCategories?.length&&p(d?.subSubCategories?.map((c,b)=>({index:b,open:b===0})))},[d]);const k=(0,a.useCallback)((c,b)=>{s&&s(g.HeaderNavigationMenu.Third),m?.(c);const D=n?.find(L=>b!==void 0?c?.subSubCategories?.[b]?.label?.toLowerCase()===L.label?.toLowerCase():c?.label?.toLowerCase()===L.label?.toLowerCase())||{};if(c?.collections){const L=x?.categories?.[c?.collections]||{};f?.({label:D?.label,isCollection:!0,banner:D?.banner,primary:D?.primary,series:[{products:L?.products}]})}else f?.(D)},[n,s,m,f,x?.categories]),v=(0,a.useMemo)(()=>n?.find(c=>!!c?.guide)?.guide,[n]);return(0,a.useMemo)(()=>{switch(r){case g.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((c,b)=>(0,e.jsx)("div",{children:(0,e.jsx)(K,{label:c?.label,active:o.find(D=>D.index===b)?.open,onClick:()=>{k(c),y?.(c,b)}})},`${c.label}-${b}`))}),(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}?ref=${t?.primary?.label}_shopall`,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 g.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[d?.subSubCategories?d?.subSubCategories?.map((c,b)=>{const D=n?.find(P=>P.label.toLowerCase()===c?.label?.toLowerCase())||{};let L={};if(c?.collections){const P=x?.categories?.[c?.collections]||{};L={label:D?.label,isCollection:!0,banner:D?.banner,primary:D?.primary,series:[{products:P?.products}]}}else L=D;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(c).length>0&&(0,e.jsx)(oe,{matchSeriesMetadata:L,onSubSubCategoryItemClick:()=>{y?.(c,b),p(P=>P.map((S,B)=>({...S,open:B===b?!S.open:S.open})))},expanded:!!C?.find(P=>P.index===b)?.open}),C?.find(P=>P.index===b)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ie,{matchSeriesMetadata:L}),L?.primary&&(0,e.jsx)("div",{className:"my-4 text-center",children:(0,e.jsx)(l.Button,{as:"a",href:L?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:L?.primary?.label})})]})]},`${c.label}-${b}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(u).length>0&&(0,e.jsx)(oe,{matchSeriesMetadata:u}),(0,e.jsx)(ie,{matchSeriesMetadata:u}),u?.primary&&(0,e.jsx)("div",{className:"my-4 text-center ",children:(0,e.jsx)(l.Button,{as:"a",href:`${u?.primary?.url}?ref=${u?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:u?.primary?.label})})]}),v&&(0,e.jsx)(l.Link,{href:v?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:v?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[r,t,n,o,C,d,u,x?.categories,v,k,y])},oe=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:r})=>{const s=(0,e.jsxs)(e.Fragment,{children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("size-5",{"rotate-180":r})})]});return n?(0,e.jsx)("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:n,"aria-expanded":r,children:s}):(0,e.jsx)("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:s})},ie=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!t?.series?.length&&t?.series?.map((n,r)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"mb-2 text-sm 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-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,N.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,N.cn)("text-sm font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((s,d)=>(0,e.jsx)(ne,{position:d,product:s,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${r}-${d}`))]})]},`seriesItem-${r}`))}),Le=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(K,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Pe=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(r=>!!r.columns),[t]);return(0,e.jsx)("div",{className:(0,N.cn)("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":n}),children:t?.map((r,s)=>(0,e.jsx)("div",{children:(0,e.jsx)(le,{item:r,allPicture:n})},`multicolItem-${r?.label}-${s}`))})},Ee=({profileAction:t})=>{const[n,r]=(0,a.useState)(!1),{profile:s,event:d}=(0,$.useNavContext)();return(0,e.jsxs)("div",{className:(0,N.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!n),"aria-expanded":n,"aria-label":s?.nick_name||t?.welcome,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)(z.User,{"aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:s?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("laptop:size-4 size-5",{"rotate-180":n})})]}),s?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:t?.profiles?.map(m=>(0,e.jsx)(K,{label:m?.title,href:m?.url},m.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(m=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:m.benefitIcon?.url,className:"size-4",alt:m.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:m.benefit,className:"text-sm font-bold leading-[1.4]"})]},m.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:()=>d?.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:()=>d?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},ze=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:r,actions:s})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(se,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(Y,{actions:s}),t?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(z.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(z.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),se=()=>{const{payloadData:t,isMobile:n}=(0,$.useNavContext)();return(0,e.jsx)("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:n?t?.bar?.mobileLogo:t?.bar?.desktopLogo}})},Y=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},r)=>{const{event:s,cartCount:d}=(0,$.useNavContext)(),[m,f]=(0,a.useState)(null),u=y=>{switch(y){case g.HeaderNavigationActionBlockType.Search:return"Search";case g.HeaderNavigationActionBlockType.Cart:return`Shopping cart${d>0?` (${d} items)`:""}`;case g.HeaderNavigationActionBlockType.Profile:return"User profile";case g.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},x=(0,a.useCallback)((y,o)=>{switch(f(o),y?.blockType){case g.HeaderNavigationActionBlockType.Search:s?.search?.();break;case g.HeaderNavigationActionBlockType.Cart:s?.cart?.();break;case g.HeaderNavigationActionBlockType.Profile:s?.profile?.();break;case g.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((y,o)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:y.blockType===g.HeaderNavigationActionBlockType.Profile?r:null,onClick:()=>x(y,o),"aria-label":u(y.blockType),"aria-pressed":n&&m===o,children:[(0,e.jsx)(l.Text,{html:y.icon,className:(0,N.cn)("size-5",{"text-brand-0":n&&m===o}),"aria-hidden":"true"}),y.blockType===g.HeaderNavigationActionBlockType.Cart&&d>0&&(0,e.jsx)("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:(0,e.jsx)(l.Text,{html:d?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},y.id))})}),ce=({title:t,onMenuOpenClose:n,onMenuBackClick:r})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:(0,e.jsx)(z.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Close menu",children:(0,e.jsx)(z.Close,{className:"size-5","aria-hidden":"true"})})]}),K=({label:t,href:n,onClick:r,active:s,icon:d,className:m})=>{const f=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,N.cn)("text-sm font-bold leading-[1.4]",{underline:d})}),d&&(0,e.jsx)(l.Text,{html:d,"aria-hidden":"true"})]}),(0,e.jsx)(z.RightArrow,{className:(0,N.cn)("laptop:size-4 size-5",{"rotate-90":s}),"aria-hidden":"true"})]});return n?(0,e.jsx)(l.Link,{href:n,className:(0,N.cn)("flex cursor-pointer items-center justify-between py-4 no-underline",m),children:f}):(0,e.jsx)("button",{className:(0,N.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",m),onClick:r,"aria-expanded":s,children:f})};re.displayName="MobileNavigation",Y.displayName="Actions",ee.displayName="HeaderNavigation",te.displayName="DesktopNavigation",ae.displayName="SidebarDropdown";var He=(0,de.withLayout)(ee);
|
|
1
|
+
"use strict";"use client";var ge=Object.create;var U=Object.defineProperty;var ye=Object.getOwnPropertyDescriptor;var he=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,Ne=Object.prototype.hasOwnProperty;var ke=(t,n)=>{for(var r in n)U(t,r,{get:n[r],enumerable:!0})},Z=(t,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let d of he(n))!Ne.call(t,d)&&d!==r&&U(t,d,{get:()=>n[d],enumerable:!(s=ye(n,d))||s.enumerable});return t};var G=(t,n,r)=>(r=t!=null?ge(xe(t)):{},Z(n||!t||!t.__esModule?U(r,"default",{value:t,enumerable:!0}):r,t)),we=t=>Z(U({},"__esModule",{value:!0}),t);var Be={};ke(Be,{default:()=>He});module.exports=we(Be);var e=require("react/jsx-runtime"),a=G(require("react")),l=require("../../components/index.js"),de=require("../../shared/Styles.js"),N=require("../../helpers/utils.js"),$=G(require("./NavProvider.js")),g=require("./types.js"),ue=require("es-toolkit"),pe=G(require("jump.js")),J=require("@gsap/react"),V=require("gsap"),T=require("./withCategory.js"),z=require("./icons/index.js"),me=G(require("../NavigationSearch/index.js"));const ee=(0,a.forwardRef)((t,n)=>{const{data:{header:r}={},buildProps:s,event:d,profile:m,theme:b="light",isTop:u=!1,searchResult:x,onSearch:y,isSearching:o,keywords:M,onPrimaryNavClick:C,onSeriesProductClick:p,onSidebarNavClick:k,headerId:v,cartCount:h,menuData:c}=t,[f,D]=(0,a.useState)(!1),[L,P]=(0,a.useState)(!1),S=(0,a.useRef)(null),B=(0,a.useRef)(null),F=()=>{const w=document?.querySelector("body")?.offsetWidth||0;P(w<=1440)};(0,a.useEffect)(()=>(F(),window.addEventListener("resize",F),()=>{window.removeEventListener("resize",F)}),[]),(0,a.useImperativeHandle)(n,()=>B.current),(0,a.useEffect)(()=>{B.current&&u&&(0,pe.default)(B.current,{duration:0,offset:B.current?.getBoundingClientRect()?.bottom||0})},[u]),(0,a.useEffect)(()=>{d&&(d.search=()=>D(!0))},[d]),(0,J.useGSAP)(()=>{S?.current&&f&&V.gsap.fromTo(S.current,{height:0},{height:"auto",duration:.3})},[f]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=f?"hidden":"auto"},[f]);const j=(0,a.useMemo)(()=>r?.bar?.actions?.find(w=>w?.blockType===g.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[r]);return(0,e.jsx)($.default,{buildProps:s,profile:m,isMobile:L,event:d,payloadData:r,onSidebarNavClick:k,onSeriesProductClick:p,cartCount:h,children:(0,e.jsx)("header",{id:v||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:B,children:(0,e.jsxs)("div",{className:(0,N.cn)("hover:bg-white hover:text-black",b==="light"?"text-black":"text-white",{}),children:[(0,e.jsx)(te,{data:r,className:"desktop:block hidden !bg-white",theme:b,onPrimaryNavClick:C}),(0,e.jsx)(re,{menuData:c,data:r,className:"desktop:hidden block !bg-white",onPrimaryNavClick:C}),f&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${B?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:S,className:(0,N.cn)("overflow-y-auto",{}),children:(0,e.jsx)(me.default,{data:j,keywords:M,isSearching:o,searchResult:x,onSearch:w=>{y?.(w)},onClose:()=>{y?.(),D(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>D(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:w=>{(w.key==="Enter"||w.key===" "||w.key==="Escape")&&(w.preventDefault(),D(!1))}})]})]})})})}),te=(0,a.forwardRef)((t,n)=>{const{data:r,onNavItemClick:s,className:d,theme:m,onPrimaryNavClick:b}=t,{event:u,profile:x}=(0,$.useNavContext)(),[y,o]=(0,a.useState)(!1),M=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(r?.categories?.filter(i=>i?.pcShow)),[r]),[C,p]=(0,a.useState)(null),[k,v]=(0,a.useState)([]),h=(0,a.useRef)(null),[c,f]=(0,a.useState)(!1),D=(0,a.useRef)(null),L=(0,a.useRef)(null),P=(0,a.useRef)(M.map(i=>Array(i?.length||0).fill(null)));(0,a.useEffect)(()=>{M?.length&&v(M?.map((i,E)=>i?.map((H,A)=>({groupIndex:E,index:A,open:!1}))))},[M]);const S=(0,a.useMemo)(()=>{let i=null;for(const E of k){for(const H of E)if(H.open){i=H;break}if(i)break}return i},[k]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=S?.open||c?"hidden":"auto"},[S?.open,c]);const B=(i,E,H)=>{if(f(!1),C?.components?.[0]?.blockType===g.HeaderNavigationBlockType.Links)C?.components?.[0]?.url&&window.open(C?.components?.[0]?.url);else{const A=M?.flat()||[],_=A?.findIndex(R=>R?.id===M[E][H]?.id);i.stopPropagation(),s?.(),b?.(A[_],_),p(M[E][H]),v(R=>R.map(ve=>ve.map(W=>W.groupIndex===E&&W.index===H?{...W,open:!W.open}:{...W,open:!1})))}},F=(i,E,H)=>{i.key==="Enter"||i.key===" "?(i.preventDefault(),B(i,E,H)):i.key==="Escape"&&S?.groupIndex===E&&S?.index===H&&(i.preventDefault(),j())},j=()=>{v(i=>i.map(E=>E.map(H=>({...H,open:!1}))))},w=(0,a.useMemo)(()=>{if(C)return C?.components?.[0]?.blockType},[C]),q=(0,T.WithSidebar)(ae,C),O=(0,T.WithMulticol)(Ce,C),be=(0,T.WithSupports)(Se,{categoriesItem:C,currentNavItemRef:P.current?.[S?.groupIndex||0]?.[S?.index||0]}),fe=(0,a.useMemo)(()=>{switch(w){case g.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(q,{});case g.HeaderNavigationBlockType.Supports:return(0,e.jsx)(be,{});case g.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(O,{});default:return null}},[w,C]),Q=(0,a.useMemo)(()=>r?.bar?.actions?.filter(i=>i?.pcShow),[r]),I=(0,a.useMemo)(()=>Q?.find(i=>i?.blockType===g.HeaderNavigationActionBlockType.Profile),[Q]),X=(0,a.useCallback)(()=>{f(i=>!i)},[]);return(0,a.useEffect)(()=>{if(h?.current){const i=h.current;return i.addEventListener("click",X),()=>{i.removeEventListener("click",X)}}},[X]),(0,J.useGSAP)(()=>{S?.open&&V.gsap.fromTo(L?.current,{height:0},{height:"auto"})},[S?.open]),(0,e.jsxs)(l.Container,{className:(0,N.cn)("relative h-[96px]",d),children:[(0,e.jsxs)("div",{ref:D,onClick:j,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)(se,{}),(0,e.jsx)(Y,{ref:h,actions:Q,activeStatus:c})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:M?.map((i,E)=>(0,e.jsx)("div",{className:"flex gap-3",children:i?.map((H,A)=>{const _=S?.groupIndex===E&&S?.index===A;return(0,e.jsx)("div",{ref:R=>{P.current[E][A]=R},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:R=>B(R,E,A),onKeyDown:R=>F(R,E,A),"aria-expanded":_,"aria-haspopup":"true","aria-label":H.text,children:[(0,e.jsx)(l.Text,{html:H.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":_,"opacity-100":y&&_})})]}),(0,e.jsx)("div",{className:(0,N.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":_},m==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},H.id)})},`groupCategory-${E}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(S?.open&&C),className:(0,N.cn)("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:!(S?.open&&C)}),onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{height:`calc(100dvh - ${D?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:L,className:(0,N.cn)("relative z-50",{"overflow-hidden":w!==g.HeaderNavigationBlockType.Supports}),children:fe}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:j,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:i=>{(i.key==="Enter"||i.key===" "||i.key==="Escape")&&(i.preventDefault(),j())}})]}),c&&(0,e.jsxs)("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:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${h?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:x?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:x?.nick_name||I?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:I?.profiles?.map(i=>(0,e.jsx)(K,{className:"py-2",label:i?.title,href:i?.url},i.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(z.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(l.Text,{html:I?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:I?.benefits?.map(i=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:i.benefitIcon?.url,className:"size-4",alt:i.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:i.benefit,className:"text-sm font-bold leading-[1.4]"})]},i.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>u?.join?.(),children:(0,e.jsx)(l.Text,{html:I?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>u?.login?.(),children:(0,e.jsx)(l.Text,{html:I?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>f(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:i=>{(i.key==="Enter"||i.key===" "||i.key==="Escape")&&(i.preventDefault(),f(!1))}})]})]})}),ae=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:r,onSidebarNavClick:s}=(0,$.useNavContext)(),[d,m]=(0,a.useState)([]),[b,u]=(0,a.useState)(-1),x=(0,a.useRef)(null),y=(0,a.useCallback)(()=>{const p=t?.subcategories;if(!p?.length)return;const k=p.findIndex(c=>!!c?.subSubCategories),v=p.findIndex(c=>!c?.subSubCategories),h=p.map((c,f)=>({index:f,open:k===f||v===f}));m(h)},[t]);(0,a.useEffect)(()=>{y()},[y]);const o=(0,a.useMemo)(()=>{const p=t?.subcategories?.[d?.find(v=>v.open)?.index||0],k=n?.find(v=>v?.label?.toLowerCase()===p?.label?.toLowerCase())||{};if(p?.collections){const v=r?.categories?.[p?.collections]||{};return{label:k?.label,isCollection:!0,banner:k?.banner,primary:k?.primary,series:[{products:v?.products}]}}else if(p?.subSubCategories){const v=p?.subSubCategories?.[b],h=n?.find(c=>c?.label?.toLowerCase()===v?.label?.toLowerCase())||{};if(v?.collections){const c=r?.categories?.[v?.collections]||{};return{label:h?.label,isCollection:!0,banner:h?.banner,primary:h?.primary,series:[{products:c?.products}]}}else return h}else return k},[t,d,b,n,r]),M=(0,a.useCallback)((p,k)=>{k?.subSubCategories?.length>0?u(0):u(-1),m(v=>v.map((h,c)=>({...h,open:c===p?!h.open:!1})))},[]),C=(p,k)=>{m(v=>v.map(h=>h.index===p?{...h,open:!0}:{...h,open:!1})),u(k)};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:x,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((p,k)=>{const v=Array.isArray(p?.subSubCategories)&&p?.subSubCategories?.length>0,h=d?.find(c=>c.index===k)?.open;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("button",{className:(0,N.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!v&&h}),onClick:()=>{M(k,p),s?.(p,k)},"aria-expanded":v?h:void 0,"aria-haspopup":v?"true":void 0,children:[(0,e.jsx)(l.Text,{html:p.label,className:"p-4 text-sm font-bold leading-[1.4]"}),v&&(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("size-4",{"rotate-180":h})})]}),h&&(0,e.jsx)("div",{className:"flex flex-col",role:"menu",children:p.subSubCategories?.map((c,f)=>(0,e.jsx)("button",{onClick:()=>{C(k,f),s?.(c,f)},className:(0,N.cn)("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":b===f}),role:"menuitem","aria-label":c.label,children:(0,e.jsx)(l.Text,{html:c.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${k}-${f}`))})]},`subcategoryItem-${k}`)})}),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}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{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})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(o).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:o?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),o?.primary&&!o?.primary?.hide&&(0,e.jsx)(l.Button,{as:"a",href:`${o?.primary?.url}?ref=${o?.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:o?.primary?.label})]}),(0,e.jsx)(l.Link,{href:o?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:o?.guide?.label})]}),(0,e.jsx)("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:o?.series?.map((p,k)=>(0,e.jsxs)("div",{children:[p.label&&(0,e.jsx)(l.Text,{html:p.label,className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!o?.banner&&(0,e.jsx)(l.Link,{asChild:!o?.banner?.href,href:o?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(l.Picture,{source:o?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:o?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:o?.banner?.desc||"20.000mAh",className:"text-sm font-bold text-white"})]})]})}),p.products?.map((v,h)=>(0,e.jsx)(ne,{seriesLabel:o?.label,product:v,isCollection:o?.isCollection},`seriesProductItem-${h}`))]})]},`seriesItem-${k}`))})]})]})}),Ce=({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((r,s)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(le,{item:r})},`multicolItem-${r?.label}-${s}`))})})})},Se=({supportsMetadata:t,currentNavItemRef:n})=>{const r=(0,a.useRef)(null),[s,d]=(0,a.useState)(null),[m,b]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(r?.current){const x=r?.current?.getBoundingClientRect();b(x.height)}},[r]);const u=(0,ue.debounce)(()=>{if(n){const x=n.getBoundingClientRect();d(x)}},500);return(0,a.useEffect)(()=>(u(),window.addEventListener("resize",u),()=>{window.removeEventListener("resize",u)}),[u]),(0,a.useEffect)(()=>{if(n){const x=n.getBoundingClientRect();d(x)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${s?.right}px)`,height:m},children:(0,e.jsx)("div",{ref:r,className:"p-4",children:t?.map(x=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:x.url,className:"text-sm font-bold leading-[1.4] no-underline",children:x.label})},x.id))})})},ne=({product:t,isCollection:n,position:r,seriesLabel:s})=>{const{buildProps:d,onSeriesProductClick:m}=(0,$.useNavContext)();let b=n?t:d?.products?.find(o=>o.handle===t.handle);const u=b?.variants?.find(o=>o.sku===t.sku)||b?.variants?.[0],x=(0,a.useMemo)(()=>`/products/${b?.handle}?variant=${(0,N.atobID)(u?.id)}`,[b?.handle,u?.id]),y=(0,a.useMemo)(()=>b?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2),[b?.tags]);return u?.availableForSale?(0,e.jsx)(l.Link,{href:x,onClick:o=>{o.preventDefault(),window.open(x,"_self"),m?.(b,r||0,s)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)("img",{src:`${u?.image?.url||t?.images?.[0]?.url}`,loading:"lazy",alt:b?.title||t?.name,width:90,height:90,className:"size-[96px] object-contain"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(y)&&y?.map((o,M)=>(0,e.jsx)(l.Text,{as:"p",html:o,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]"},M))}),(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:b?.title||t?.name}),t?.desc&&(0,e.jsx)(l.Text,{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},le=({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(r=>(0,e.jsxs)("div",{className:"flex items-center gap-1 py-2",children:[(0,e.jsx)(l.Link,{href:`${r.url}?ref=navMenu`,asChild:!r.url,className:"text-sm font-bold leading-[1.4] no-underline",children:r.label}),r?.badge&&(0,e.jsx)(l.Text,{as:"p",html:r?.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]"})]},r.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,N.cn)("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":n}),children:(0,e.jsxs)(l.Link,{href:`${t.url}?ref=navMenu`,asChild:!t.url,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)("div",{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,N.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,N.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,N.cn)("mr-auto !p-0 text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),re=(0,a.forwardRef)(({data:t,menuData:n,className:r,onPrimaryNavClick:s},d)=>{const m=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(w=>w?.mobileShow)),[t]),{currentMenu:b,setCurrentMenu:u,subSubCategory:x}=(0,$.useNavContext)(),[y,o]=(0,a.useState)(!1),[M,C]=(0,a.useState)(0),[p,k]=(0,a.useState)(null),v=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(v?.current&&y){const w=v?.current?.getBoundingClientRect();C(window?.innerHeight-(w?.bottom||0))}},[y]),(0,J.useGSAP)(()=>{V.gsap.fromTo(v.current,{height:0},{height:M,duration:.3})},[M]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=y?"hidden":"auto"},[y]);const h=(0,a.useMemo)(()=>p?.components?.[0]?.blockType,[p]),c=(0,T.WithSupports)(Le,{categoriesItem:p}),f=(0,T.WithSidebar)(Me,p),D=(0,T.WithMulticol)(Pe,p),L=(0,a.useMemo)(()=>{switch(h){case g.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(f,{});case g.HeaderNavigationBlockType.Supports:return(0,e.jsx)(c,{});case g.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(D,{});default:return null}},[h,p,c]),P=(0,a.useCallback)(()=>{o(!1),C(0),u&&u(g.HeaderNavigationMenu.Primary)},[o,C,u]),S=(0,a.useMemo)(()=>t?.bar?.actions?.filter(w=>w?.mobileShow&&w?.blockType!==g.HeaderNavigationActionBlockType.Profile),[t]),B=(0,a.useMemo)(()=>t?.bar?.actions?.find(w=>w?.mobileShow&&w?.blockType===g.HeaderNavigationActionBlockType.Profile)||{},[t]),F=(0,a.useMemo)(()=>{switch(b){case g.HeaderNavigationMenu.Primary:return(0,e.jsx)(ze,{actions:S,menuOpen:y,onMenuOpenClose:()=>{o(!1),C(0)},onMenuOpenClick:()=>o(!0)});case g.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ce,{title:p?.text,onMenuOpenClose:P,onMenuBackClick:()=>u?.(g.HeaderNavigationMenu.Primary)});case g.HeaderNavigationMenu.Third:return(0,e.jsx)(ce,{title:x?.label,onMenuOpenClose:P,onMenuBackClick:()=>u?.(g.HeaderNavigationMenu.Secondary)});default:return null}},[y,b,u,p,S,x,P]),j=(0,a.useCallback)((w,q)=>{const O=Array.isArray(m)?Array.isArray(m[w])?m[w][q]:{}:{};k(O),O?.components?.[0]?.blockType===g.HeaderNavigationBlockType.Links?O?.components?.[0]?.url&&window.open(O?.components?.[0]?.url):u?.(g.HeaderNavigationMenu.Secondary)},[m,u]);return(0,e.jsxs)(l.Container,{className:(0,N.cn)("relative h-[52px]",r),children:[F,y&&(0,e.jsxs)("nav",{ref:v,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:[b===g.HeaderNavigationMenu.Primary&&n?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:n})}):null,b===g.HeaderNavigationMenu.Primary?(0,e.jsx)(De,{categories:m,onPrimaryMenuClick:j,onPrimaryNavClick:s,profileAction:B}):L]})]})}),De=({categories:t,onPrimaryMenuClick:n,profileAction:r,onPrimaryNavClick:s})=>(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((d,m)=>(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)("div",{className:(0,N.cn)("my-2 h-px w-full bg-[#E5E5E7]")}),d?.map((b,u)=>(0,e.jsx)(K,{label:b.text,onClick:()=>{const y=(t?.flat()||[])?.findIndex(o=>o?.id===t[m][u]?.id);n(m,u),s?.(b,y)},icon:b.components?.[0]?.icon},b.id))]},`groupCategory-${m}`))}),(0,e.jsx)(Ee,{profileAction:r})]}),Me=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:r,setCurrentMenu:s,subSubCategory:d,setSubSubCategory:m,setCurrentSeriesMetadata:b,currentSeriesMetadata:u,buildProps:x,onSidebarNavClick:y}=(0,$.useNavContext)(),[o,M]=(0,a.useState)([]),[C,p]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&M(t?.subcategories?.map((c,f)=>({index:f,open:!1})))},[t]),(0,a.useEffect)(()=>{d?.subSubCategories?.length&&p(d?.subSubCategories?.map((c,f)=>({index:f,open:f===0})))},[d]);const k=(0,a.useCallback)((c,f)=>{s&&s(g.HeaderNavigationMenu.Third),m?.(c);const D=n?.find(L=>f!==void 0?c?.subSubCategories?.[f]?.label?.toLowerCase()===L.label?.toLowerCase():c?.label?.toLowerCase()===L.label?.toLowerCase())||{};if(c?.collections){const L=x?.categories?.[c?.collections]||{};b?.({label:D?.label,isCollection:!0,banner:D?.banner,primary:D?.primary,series:[{products:L?.products}]})}else b?.(D)},[n,s,m,b,x?.categories]),v=(0,a.useMemo)(()=>n?.find(c=>!!c?.guide)?.guide,[n]);return(0,a.useMemo)(()=>{switch(r){case g.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 tablet:justify-start tablet:gap-16 flex h-full flex-col justify-between p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((c,f)=>(0,e.jsx)("div",{children:(0,e.jsx)(K,{label:c?.label,active:o.find(D=>D.index===f)?.open,onClick:()=>{k(c),y?.(c,f)}})},`${c.label}-${f}`))}),(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}?ref=${t?.primary?.label}_shopall`,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 g.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[d?.subSubCategories?d?.subSubCategories?.map((c,f)=>{const D=n?.find(P=>P.label.toLowerCase()===c?.label?.toLowerCase())||{};let L={};if(c?.collections){const P=x?.categories?.[c?.collections]||{};L={label:D?.label,isCollection:!0,banner:D?.banner,primary:D?.primary,series:[{products:P?.products}]}}else L=D;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(c).length>0&&(0,e.jsx)(oe,{matchSeriesMetadata:L,onSubSubCategoryItemClick:()=>{y?.(c,f),p(P=>P.map((S,B)=>({...S,open:B===f?!S.open:S.open})))},expanded:!!C?.find(P=>P.index===f)?.open}),C?.find(P=>P.index===f)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ie,{matchSeriesMetadata:L}),L?.primary&&(0,e.jsx)("div",{className:"my-4 text-center",children:(0,e.jsx)(l.Button,{as:"a",href:L?.primary?.url,className:"text-base leading-[1.2] no-underline",variant:"secondary",size:"base",children:L?.primary?.label})})]})]},`${c.label}-${f}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(u).length>0&&(0,e.jsx)(oe,{matchSeriesMetadata:u}),(0,e.jsx)(ie,{matchSeriesMetadata:u}),u?.primary&&(0,e.jsx)("div",{className:"my-4 text-center ",children:(0,e.jsx)(l.Button,{as:"a",href:`${u?.primary?.url}?ref=${u?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base leading-[1.2] no-underline",children:u?.primary?.label})})]}),v&&(0,e.jsx)(l.Link,{href:v?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:v?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[r,t,n,o,C,d,u,x?.categories,v,k,y])},oe=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:r})=>{const s=(0,e.jsxs)(e.Fragment,{children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("size-5",{"rotate-180":r})})]});return n?(0,e.jsx)("button",{className:"tablet:pt-0 flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:n,"aria-expanded":r,children:s}):(0,e.jsx)("div",{className:"tablet:pt-0 flex items-center justify-between py-4",children:s})},ie=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"laptop:gap-3 flex flex-col gap-2",children:!!t?.series?.length&&t?.series?.map((n,r)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"mb-2 text-sm 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-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,N.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,N.cn)("text-sm font-bold text-white",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((s,d)=>(0,e.jsx)(ne,{position:d,product:s,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${r}-${d}`))]})]},`seriesItem-${r}`))}),Le=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(K,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Pe=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(r=>!!r.columns),[t]);return(0,e.jsx)("div",{className:(0,N.cn)("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":n}),children:t?.map((r,s)=>(0,e.jsx)("div",{children:(0,e.jsx)(le,{item:r,allPicture:n})},`multicolItem-${r?.label}-${s}`))})},Ee=({profileAction:t})=>{const[n,r]=(0,a.useState)(!1),{profile:s,event:d}=(0,$.useNavContext)();return(0,e.jsxs)("div",{className:(0,N.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>r(!n),"aria-expanded":n,"aria-label":s?.nick_name||t?.welcome,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)(z.User,{"aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:s?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!s?.email&&(0,e.jsx)(z.DownArrow,{"aria-hidden":"true",className:(0,N.cn)("laptop:size-4 size-5",{"rotate-180":n})})]}),s?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:t?.profiles?.map(m=>(0,e.jsx)(K,{label:m?.title,href:m?.url},m.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(m=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:m.benefitIcon?.url,className:"size-4",alt:m.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:m.benefit,className:"text-sm font-bold leading-[1.4]"})]},m.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:()=>d?.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:()=>d?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},ze=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:r,actions:s})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(se,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(Y,{actions:s}),t?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(z.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(z.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),se=()=>{const{payloadData:t,isMobile:n}=(0,$.useNavContext)();return(0,e.jsx)("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:n?t?.bar?.mobileLogo:t?.bar?.desktopLogo}})},Y=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},r)=>{const{event:s,cartCount:d}=(0,$.useNavContext)(),[m,b]=(0,a.useState)(null),u=y=>{switch(y){case g.HeaderNavigationActionBlockType.Search:return"Search";case g.HeaderNavigationActionBlockType.Cart:return`Shopping cart${d>0?` (${d} items)`:""}`;case g.HeaderNavigationActionBlockType.Profile:return"User profile";case g.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},x=(0,a.useCallback)((y,o)=>{switch(b(o),y?.blockType){case g.HeaderNavigationActionBlockType.Search:s?.search?.();break;case g.HeaderNavigationActionBlockType.Cart:s?.cart?.();break;case g.HeaderNavigationActionBlockType.Profile:s?.profile?.();break;case g.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((y,o)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:y.blockType===g.HeaderNavigationActionBlockType.Profile?r:null,onClick:()=>x(y,o),"aria-label":u(y.blockType),"aria-pressed":n&&m===o,children:[(0,e.jsx)(l.Text,{html:y.icon,className:(0,N.cn)("size-5",{"text-brand-0":n&&m===o}),"aria-hidden":"true"}),y.blockType===g.HeaderNavigationActionBlockType.Cart&&d>0&&(0,e.jsx)("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:(0,e.jsx)(l.Text,{html:d?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},y.id))})}),ce=({title:t,onMenuOpenClose:n,onMenuBackClick:r})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Back to previous menu",children:(0,e.jsx)(z.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>n(),"aria-label":"Close menu",children:(0,e.jsx)(z.Close,{className:"size-5","aria-hidden":"true"})})]}),K=({label:t,href:n,onClick:r,active:s,icon:d,className:m})=>{const b=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,N.cn)("text-sm font-bold leading-[1.4]",{underline:d})}),d&&(0,e.jsx)(l.Text,{html:d,"aria-hidden":"true"})]}),(0,e.jsx)(z.RightArrow,{className:(0,N.cn)("laptop:size-4 size-5",{"rotate-90":s}),"aria-hidden":"true"})]});return n?(0,e.jsx)(l.Link,{href:n,className:(0,N.cn)("flex cursor-pointer items-center justify-between py-4 no-underline",m),children:b}):(0,e.jsx)("button",{className:(0,N.cn)("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",m),onClick:r,"aria-expanded":s,children:b})};re.displayName="MobileNavigation",Y.displayName="Actions",ee.displayName="HeaderNavigation",te.displayName="DesktopNavigation",ae.displayName="SidebarDropdown";var He=(0,de.withLayout)(ee);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|