npm - @anker-in/headless-ui - Versions diffs - 1.1.58 → 1.1.59 - Mend

@anker-in/headless-ui 1.1.58 → 1.1.59

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

Files changed (79) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/MulticolDropdown.tsx"],
-  "sourcesContent": ["import React, { useRef } from 'react'\nimport { Container, Text, Link, Picture, Button } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const MulticolDropdown = ({ multicolMetadata }: { multicolMetadata: any }) => {\n  const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={multicolDropdownRef}>\n      <Container childClassName=\"bg-white\" className=\"h-full\">\n        <div className=\"flex gap-4 py-4\">\n          {multicolMetadata?.map((item: any, index: number) => (\n            <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n              <MulticolItem item={item} />\n            </div>\n          ))}\n        </div>\n      </Container>\n    </div>\n  )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nexport const MulticolItem = ({ item, allPicture }: { item: any; allPicture?: boolean }) => {\n  return (\n    <>\n      {item?.columns && (\n        <>\n          <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n          <div className=\"mt-2 flex flex-col\">\n            {item.columns?.map((columnItem: any) => (\n              <div key={columnItem.label} className=\"flex items-center gap-1 py-2\">\n                <Link\n                  href={`${columnItem.url}?ref=navMenu`}\n                  asChild={!columnItem.url}\n                  className=\"text-sm font-bold leading-[1.4] no-underline\"\n                >\n                  {columnItem.label}\n                </Link>\n                {columnItem?.badge && (\n                  <Text\n                    as=\"p\"\n                    html={columnItem?.badge || 'badge'}\n                    className=\"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]\"\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {item?.imageUrl && (\n        <div\n          className={cn(\n            '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',\n            {\n              ['tablet:max-w-none laptop:max-w-none']: allPicture,\n            }\n          )}\n        >\n          <Link href={`${item.url}?ref=navMenu`} asChild={!item.url}>\n            <Picture\n              source={item.imageUrl}\n              width={404}\n              height={280}\n              className=\"size-full\"\n              imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n            />\n            <div className=\"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline\">\n              <Text\n                html={item.title}\n                className={cn('lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white', {\n                  'text-black': item?.theme === 'dark',\n                })}\n              />\n              {item.subtitle && (\n                <Text\n                  html={item.subtitle}\n                  className={cn('text-sm font-bold leading-[1.4] text-white', {\n                    'text-black': item?.theme === 'dark',\n                  })}\n                />\n              )}\n              {item?.primary?.label && (\n                <Button\n                  as=\"a\"\n                  href={item?.primary?.url}\n                  variant=\"link\"\n                  size=\"lg\"\n                  className={cn('mr-auto !p-0 text-sm font-bold leading-[1.4] text-white', {\n                    'text-black': item?.theme === 'dark',\n                  })}\n                >\n                  {item?.primary?.label || 'more'}\n                </Button>\n              )}\n            </div>\n          </Link>\n        </div>\n      )}\n    </>\n  )\n}\n"],
-  "mappings": "AAiBc,OAiBN,YAAAA,EAjBM,OAAAC,EAqBA,QAAAC,MArBA,oBAjBd,OAAgB,UAAAC,MAAc,QAC9B,OAAS,aAAAC,EAAW,QAAAC,EAAM,QAAAC,EAAM,WAAAC,EAAS,UAAAC,MAAc,4BACvD,OAAS,MAAAC,MAAU,yBAMZ,MAAMC,EAAmB,CAAC,CAAE,iBAAAC,CAAiB,IAAiC,CACnF,MAAMC,EAAsBT,EAAuB,IAAI,EAEvD,OACEF,EAAC,OAAI,IAAKW,EACR,SAAAX,EAACG,EAAA,CAAU,eAAe,WAAW,UAAU,SAC7C,SAAAH,EAAC,OAAI,UAAU,kBACZ,SAAAU,GAAkB,IAAI,CAACE,EAAWC,IACjCb,EAAC,OAAiD,UAAU,QAC1D,SAAAA,EAACc,EAAA,CAAa,KAAMF,EAAM,GADlB,gBAAgBA,GAAM,KAAK,IAAIC,CAAK,EAE9C,CACD,EACH,EACF,EACF,CAEJ,EAMaC,EAAe,CAAC,CAAE,KAAAF,EAAM,WAAAG,CAAW,IAE5Cd,EAAAF,EAAA,CACG,UAAAa,GAAM,SACLX,EAAAF,EAAA,CACE,UAAAC,EAACI,EAAA,CAAK,KAAMQ,EAAK,MAAO,GAAG,MAAM,UAAU,sDAAsD,EACjGZ,EAAC,OAAI,UAAU,qBACZ,SAAAY,EAAK,SAAS,IAAKI,GAClBf,EAAC,OAA2B,UAAU,+BACpC,UAAAD,EAACK,EAAA,CACC,KAAM,GAAGW,EAAW,GAAG,eACvB,QAAS,CAACA,EAAW,IACrB,UAAU,+CAET,SAAAA,EAAW,MACd,EACCA,GAAY,OACXhB,EAACI,EAAA,CACC,GAAG,IACH,KAAMY,GAAY,OAAS,QAC3B,UAAU,6HACZ,IAbMA,EAAW,KAerB,CACD,EACH,GACF,EAEDJ,GAAM,UACLZ,EAAC,OACC,UAAWQ,EACT,oKACA,CACG,sCAAwCO,CAC3C,CACF,EAEA,SAAAd,EAACI,EAAA,CAAK,KAAM,GAAGO,EAAK,GAAG,eAAgB,QAAS,CAACA,EAAK,IACpD,UAAAZ,EAACM,EAAA,CACC,OAAQM,EAAK,SACb,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,EACAX,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACI,EAAA,CACC,KAAMQ,EAAK,MACX,UAAWJ,EAAG,iEAAkE,CAC9E,aAAcI,GAAM,QAAU,MAChC,CAAC,EACH,EACCA,EAAK,UACJZ,EAACI,EAAA,CACC,KAAMQ,EAAK,SACX,UAAWJ,EAAG,6CAA8C,CAC1D,aAAcI,GAAM,QAAU,MAChC,CAAC,EACH,EAEDA,GAAM,SAAS,OACdZ,EAACO,EAAA,CACC,GAAG,IACH,KAAMK,GAAM,SAAS,IACrB,QAAQ,OACR,KAAK,KACL,UAAWJ,EAAG,0DAA2D,CACvE,aAAcI,GAAM,QAAU,MAChC,CAAC,EAEA,SAAAA,GAAM,SAAS,OAAS,OAC3B,GAEJ,GACF,EACF,GAEJ",
-  "names": ["Fragment", "jsx", "jsxs", "useRef", "Container", "Text", "Link", "Picture", "Button", "cn", "MulticolDropdown", "multicolMetadata", "multicolDropdownRef", "item", "index", "MulticolItem", "allPicture", "columnItem"]
+  "sourcesContent": ["import React, { useRef } from 'react'\nimport { Container, Text, Link, Picture, Button } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u591A\u5217\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const MulticolDropdown = ({ multicolMetadata }: { multicolMetadata: any }) => {\n  const multicolDropdownRef = useRef<HTMLDivElement>(null)\n\n  return (\n    <div ref={multicolDropdownRef}>\n      <Container childClassName=\"bg-white\" className=\"h-full\">\n        <div className=\"flex gap-4 py-4\">\n          {multicolMetadata?.map((item: any, index: number) => (\n            <div key={`multicolItem-${item?.label}-${index}`} className=\"w-1/4\">\n              <MulticolItem item={item} />\n            </div>\n          ))}\n        </div>\n      </Container>\n    </div>\n  )\n}\n\n/**\n * \u591A\u5217\u4E0B\u62C9\u9879\n * @param item \u591A\u5217\u4E0B\u62C9\u9879\n */\nexport const MulticolItem = ({ item, allPicture }: { item: any; allPicture?: boolean }) => {\n  const { locale = 'us' } = useAiuiContext()\n  return (\n    <>\n      {item?.columns && (\n        <>\n          <Text html={item.label} as=\"div\" className=\"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\" />\n          <div className=\"mt-2 flex flex-col\">\n            {item.columns?.map((columnItem: any) => (\n              <div key={columnItem.label} className=\"flex items-center gap-1 py-2\">\n                <Link\n                  href={`${getLocalizedPath(columnItem.url, locale)}?ref=navMenu`}\n                  asChild={!columnItem.url}\n                  className=\"text-sm font-bold leading-[1.4] no-underline\"\n                >\n                  {columnItem.label}\n                </Link>\n                {columnItem?.badge && (\n                  <Text\n                    as=\"p\"\n                    html={columnItem?.badge || 'badge'}\n                    className=\"text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px] text-sm font-bold !leading-[22px]\"\n                  />\n                )}\n              </div>\n            ))}\n          </div>\n        </>\n      )}\n      {item?.imageUrl && (\n        <div\n          className={cn(\n            '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',\n            {\n              ['tablet:max-w-none laptop:max-w-none']: allPicture,\n            }\n          )}\n        >\n          <Link href={`${getLocalizedPath(item.url, locale)}?ref=navMenu`} asChild={!item.url}>\n            <Picture\n              source={item.imageUrl}\n              width={404}\n              height={280}\n              className=\"size-full\"\n              imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n            />\n            <div className=\"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline\">\n              <Text\n                html={item.title}\n                className={cn('lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white', {\n                  'text-black': item?.theme === 'dark',\n                })}\n              />\n              {item.subtitle && (\n                <Text\n                  html={item.subtitle}\n                  className={cn('text-sm font-bold leading-[1.4] text-white', {\n                    'text-black': item?.theme === 'dark',\n                  })}\n                />\n              )}\n              {item?.primary?.label && (\n                <Button\n                  as=\"a\"\n                  href={getLocalizedPath(item?.primary?.url, locale)}\n                  variant=\"link\"\n                  size=\"lg\"\n                  className={cn('mr-auto !p-0 text-sm font-bold leading-[1.4] text-white', {\n                    'text-black': item?.theme === 'dark',\n                  })}\n                >\n                  {item?.primary?.label || 'more'}\n                </Button>\n              )}\n            </div>\n          </Link>\n        </div>\n      )}\n    </>\n  )\n}\n"],
+  "mappings": "AAkBc,OAkBN,YAAAA,EAlBM,OAAAC,EAsBA,QAAAC,MAtBA,oBAlBd,OAAgB,UAAAC,MAAc,QAC9B,OAAS,aAAAC,EAAW,QAAAC,EAAM,QAAAC,EAAM,WAAAC,EAAS,UAAAC,MAAc,4BACvD,OAAS,MAAAC,EAAI,oBAAAC,MAAwB,yBACrC,OAAS,kBAAAC,MAAsB,2BAMxB,MAAMC,EAAmB,CAAC,CAAE,iBAAAC,CAAiB,IAAiC,CACnF,MAAMC,EAAsBX,EAAuB,IAAI,EAEvD,OACEF,EAAC,OAAI,IAAKa,EACR,SAAAb,EAACG,EAAA,CAAU,eAAe,WAAW,UAAU,SAC7C,SAAAH,EAAC,OAAI,UAAU,kBACZ,SAAAY,GAAkB,IAAI,CAACE,EAAWC,IACjCf,EAAC,OAAiD,UAAU,QAC1D,SAAAA,EAACgB,EAAA,CAAa,KAAMF,EAAM,GADlB,gBAAgBA,GAAM,KAAK,IAAIC,CAAK,EAE9C,CACD,EACH,EACF,EACF,CAEJ,EAMaC,EAAe,CAAC,CAAE,KAAAF,EAAM,WAAAG,CAAW,IAA2C,CACzF,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIR,EAAe,EACzC,OACET,EAAAF,EAAA,CACG,UAAAe,GAAM,SACLb,EAAAF,EAAA,CACE,UAAAC,EAACI,EAAA,CAAK,KAAMU,EAAK,MAAO,GAAG,MAAM,UAAU,sDAAsD,EACjGd,EAAC,OAAI,UAAU,qBACZ,SAAAc,EAAK,SAAS,IAAKK,GAClBlB,EAAC,OAA2B,UAAU,+BACpC,UAAAD,EAACK,EAAA,CACC,KAAM,GAAGI,EAAiBU,EAAW,IAAKD,CAAM,CAAC,eACjD,QAAS,CAACC,EAAW,IACrB,UAAU,+CAET,SAAAA,EAAW,MACd,EACCA,GAAY,OACXnB,EAACI,EAAA,CACC,GAAG,IACH,KAAMe,GAAY,OAAS,QAC3B,UAAU,6HACZ,IAbMA,EAAW,KAerB,CACD,EACH,GACF,EAEDL,GAAM,UACLd,EAAC,OACC,UAAWQ,EACT,oKACA,CACG,sCAAwCS,CAC3C,CACF,EAEA,SAAAhB,EAACI,EAAA,CAAK,KAAM,GAAGI,EAAiBK,EAAK,IAAKI,CAAM,CAAC,eAAgB,QAAS,CAACJ,EAAK,IAC9E,UAAAd,EAACM,EAAA,CACC,OAAQQ,EAAK,SACb,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,EACAb,EAAC,OAAI,UAAU,uEACb,UAAAD,EAACI,EAAA,CACC,KAAMU,EAAK,MACX,UAAWN,EAAG,iEAAkE,CAC9E,aAAcM,GAAM,QAAU,MAChC,CAAC,EACH,EACCA,EAAK,UACJd,EAACI,EAAA,CACC,KAAMU,EAAK,SACX,UAAWN,EAAG,6CAA8C,CAC1D,aAAcM,GAAM,QAAU,MAChC,CAAC,EACH,EAEDA,GAAM,SAAS,OACdd,EAACO,EAAA,CACC,GAAG,IACH,KAAME,EAAiBK,GAAM,SAAS,IAAKI,CAAM,EACjD,QAAQ,OACR,KAAK,KACL,UAAWV,EAAG,0DAA2D,CACvE,aAAcM,GAAM,QAAU,MAChC,CAAC,EAEA,SAAAA,GAAM,SAAS,OAAS,OAC3B,GAEJ,GACF,EACF,GAEJ,CAEJ",
+  "names": ["Fragment", "jsx", "jsxs", "useRef", "Container", "Text", "Link", "Picture", "Button", "cn", "getLocalizedPath", "useAiuiContext", "MulticolDropdown", "multicolMetadata", "multicolDropdownRef", "item", "index", "MulticolItem", "allPicture", "locale", "columnItem"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as m,jsx as e,jsxs as o}from"react/jsx-runtime";import{Picture as d,Text as l,Link as r}from"../../components/index.js";import{cn as i}from"../../helpers/utils.js";const x=({resource:t})=>e("div",{className:"laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-none desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden",children:e(r,{href:t?.href,className:"no-underline hover:text-current",children:o("div",{className:"relative h-full overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(d,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),o("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(l,{as:"p",html:t?.title,className:i("text-xl font-bold leading-[1.2]",{"text-white":t?.theme!=="dark","text-black":t?.theme==="dark"})}),t?.desc&&e(l,{html:t?.desc,className:i("text-sm font-bold leading-[1.4]",{"text-white":t?.theme!=="dark","text-black":t?.theme==="dark"})})]})]})})}),v=({matchResourcesMetadata:t,onSubSubCategoryItemClick:a,expanded:s})=>{const n=o(m,{children:[t?.label&&e(l,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),a&&e("svg",{className:i("size-5",{"rotate-180":s}),viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M6 9L12 15L18 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]});return a?e("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:a,"aria-expanded":s,children:n}):e("div",{className:"flex items-center justify-between py-4",children:n})},p=({matchResourcesMetadata:t})=>e("div",{className:"tablet:grid tablet:grid-cols-2 flex grid-cols-1 flex-col gap-4",children:!!t?.resources?.length&&t?.resources?.map((a,s)=>e(r,{href:a?.href,className:"no-underline hover:text-current",children:e("div",{className:"laptop:h-[280px] tablet:max-w-none relative h-[240px] max-w-[358px]",children:o("div",{className:"relative h-full overflow-hidden",children:[e(d,{source:a.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),o("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(l,{html:a?.title,as:"p",className:i("text-xl font-bold leading-[1.2]",{"text-white":a?.theme!=="dark","text-black":a?.theme==="dark"})}),a?.desc&&e(l,{html:a?.desc,className:i("text-sm font-bold leading-[1.4]",{"text-white":a?.theme!=="dark","text-black":a?.theme==="dark"})})]})]})})},`resourceItem-${s}`))});export{x as ResourceItem,p as ResourceSubSubCategoryContentComp,v as ResourceSubSubCategoryItemComp};
+import{Fragment as c,jsx as e,jsxs as s}from"react/jsx-runtime";import{Picture as d,Text as o,Link as r}from"../../components/index.js";import{cn as i,getLocalizedPath as m}from"../../helpers/utils.js";import{useAiuiContext as h}from"../AiuiProvider/index.js";const b=({resource:t})=>{const{locale:l="us"}=h();return e("div",{className:"laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-none desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden",children:e(r,{href:m(t?.href,l),className:"no-underline hover:text-current",children:s("div",{className:"relative h-full overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[e(d,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(o,{as:"p",html:t?.title,className:i("text-xl font-bold leading-[1.2]",{"text-white":t?.theme!=="dark","text-black":t?.theme==="dark"})}),t?.desc&&e(o,{html:t?.desc,className:i("text-sm font-bold leading-[1.4]",{"text-white":t?.theme!=="dark","text-black":t?.theme==="dark"})})]})]})})})},f=({matchResourcesMetadata:t,onSubSubCategoryItemClick:l,expanded:a})=>{const n=s(c,{children:[t?.label&&e(o,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),l&&e("svg",{className:i("size-5",{"rotate-180":a}),viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:e("path",{d:"M6 9L12 15L18 9",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]});return l?e("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left",onClick:l,"aria-expanded":a,children:n}):e("div",{className:"flex items-center justify-between py-4",children:n})},u=({matchResourcesMetadata:t})=>{const{locale:l="us"}=h();return e("div",{className:"tablet:grid tablet:grid-cols-2 flex grid-cols-1 flex-col gap-4",children:!!t?.resources?.length&&t?.resources?.map((a,n)=>e(r,{href:m(a?.href,l),className:"no-underline hover:text-current",children:e("div",{className:"laptop:h-[280px] tablet:max-w-none relative h-[240px] max-w-[358px]",children:s("div",{className:"relative h-full overflow-hidden",children:[e(d,{source:a.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[e(o,{html:a?.title,as:"p",className:i("text-xl font-bold leading-[1.2]",{"text-white":a?.theme!=="dark","text-black":a?.theme==="dark"})}),a?.desc&&e(o,{html:a?.desc,className:i("text-sm font-bold leading-[1.4]",{"text-white":a?.theme!=="dark","text-black":a?.theme==="dark"})})]})]})})},`resourceItem-${n}`))})};export{b as ResourceItem,u as ResourceSubSubCategoryContentComp,f as ResourceSubSubCategoryItemComp};
 //# sourceMappingURL=ResourceItem.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/ResourceItem.tsx"],
-  "sourcesContent": ["import { Picture, Text, Link } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\n\n/**\n * \u8D44\u6E90\u4F4D\u9879\u7EC4\u4EF6 - \u684C\u9762\u7AEF\n */\nexport const ResourceItem = ({ resource }: { resource: any }) => {\n  return (\n    <div className=\"laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-none desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden\">\n      <Link href={resource?.href} className=\"no-underline hover:text-current\">\n        <div className=\"relative h-full overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n          <Picture\n            source={resource.imageUrl}\n            width={404}\n            height={280}\n            className=\"size-full\"\n            imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n          />\n          <div className=\"absolute inset-x-0 bottom-0 p-4\">\n            <Text\n              as=\"p\"\n              html={resource?.title}\n              className={cn('text-xl font-bold leading-[1.2]', {\n                'text-white': resource?.theme !== 'dark',\n                'text-black': resource?.theme === 'dark',\n              })}\n            />\n            {resource?.desc && (\n              <Text\n                html={resource?.desc}\n                className={cn('text-sm font-bold leading-[1.4]', {\n                  'text-white': resource?.theme !== 'dark',\n                  'text-black': resource?.theme === 'dark',\n                })}\n              />\n            )}\n          </div>\n        </div>\n      </Link>\n    </div>\n  )\n}\n\n/**\n * \u8D44\u6E90\u4F4D\u5B50\u5206\u7C7B\u6807\u9898\u7EC4\u4EF6 - \u79FB\u52A8\u7AEF\n */\nexport const ResourceSubSubCategoryItemComp = ({\n  matchResourcesMetadata,\n  onSubSubCategoryItemClick,\n  expanded,\n}: {\n  matchResourcesMetadata: any\n  onSubSubCategoryItemClick?: () => void\n  expanded?: boolean\n}) => {\n  const content = (\n    <>\n      {matchResourcesMetadata?.label && (\n        <Text html={matchResourcesMetadata?.label} className=\"text-sm font-bold leading-[1.4]\" />\n      )}\n      {onSubSubCategoryItemClick && (\n        <svg\n          className={cn('size-5', {\n            ['rotate-180']: expanded,\n          })}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M6 9L12 15L18 9\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </>\n  )\n\n  return onSubSubCategoryItemClick ? (\n    <button\n      className=\"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n      onClick={onSubSubCategoryItemClick}\n      aria-expanded={expanded}\n    >\n      {content}\n    </button>\n  ) : (\n    <div className=\"flex items-center justify-between py-4\">{content}</div>\n  )\n}\n\n/**\n * \u8D44\u6E90\u4F4D\u5B50\u5206\u7C7B\u5185\u5BB9\u7EC4\u4EF6 - \u79FB\u52A8\u7AEF\n */\nexport const ResourceSubSubCategoryContentComp = ({ matchResourcesMetadata }: { matchResourcesMetadata: any }) => {\n  return (\n    <div className=\"tablet:grid tablet:grid-cols-2 flex grid-cols-1 flex-col gap-4\">\n      {!!matchResourcesMetadata?.resources?.length &&\n        matchResourcesMetadata?.resources?.map((resourceItem: any, rIndex: number) => (\n          <Link key={`resourceItem-${rIndex}`} href={resourceItem?.href} className=\"no-underline hover:text-current\">\n            <div className=\"laptop:h-[280px] tablet:max-w-none relative h-[240px] max-w-[358px]\">\n              <div className=\"relative h-full overflow-hidden\">\n                <Picture\n                  source={resourceItem.imageUrl}\n                  width={404}\n                  height={280}\n                  className=\"size-full\"\n                  imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n                />\n                <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                  <Text\n                    html={resourceItem?.title}\n                    as=\"p\"\n                    className={cn('text-xl font-bold leading-[1.2]', {\n                      'text-white': resourceItem?.theme !== 'dark',\n                      'text-black': resourceItem?.theme === 'dark',\n                    })}\n                  />\n                  {resourceItem?.desc && (\n                    <Text\n                      html={resourceItem?.desc}\n                      className={cn('text-sm font-bold leading-[1.4]', {\n                        'text-white': resourceItem?.theme !== 'dark',\n                        'text-black': resourceItem?.theme === 'dark',\n                      })}\n                    />\n                  )}\n                </div>\n              </div>\n            </div>\n          </Link>\n        ))}\n    </div>\n  )\n}\n"],
-  "mappings": "AAWU,OA6CN,YAAAA,EA7CM,OAAAC,EAOA,QAAAC,MAPA,oBAXV,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,MAAY,4BACpC,OAAS,MAAAC,MAAU,yBAKZ,MAAMC,EAAe,CAAC,CAAE,SAAAC,CAAS,IAEpCP,EAAC,OAAI,UAAU,4IACb,SAAAA,EAACI,EAAA,CAAK,KAAMG,GAAU,KAAM,UAAU,kCACpC,SAAAN,EAAC,OAAI,UAAU,kHACb,UAAAD,EAACE,EAAA,CACC,OAAQK,EAAS,SACjB,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,EACAN,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACG,EAAA,CACC,GAAG,IACH,KAAMI,GAAU,MAChB,UAAWF,EAAG,kCAAmC,CAC/C,aAAcE,GAAU,QAAU,OAClC,aAAcA,GAAU,QAAU,MACpC,CAAC,EACH,EACCA,GAAU,MACTP,EAACG,EAAA,CACC,KAAMI,GAAU,KAChB,UAAWF,EAAG,kCAAmC,CAC/C,aAAcE,GAAU,QAAU,OAClC,aAAcA,GAAU,QAAU,MACpC,CAAC,EACH,GAEJ,GACF,EACF,EACF,EAOSC,EAAiC,CAAC,CAC7C,uBAAAC,EACA,0BAAAC,EACA,SAAAC,CACF,IAIM,CACJ,MAAMC,EACJX,EAAAF,EAAA,CACG,UAAAU,GAAwB,OACvBT,EAACG,EAAA,CAAK,KAAMM,GAAwB,MAAO,UAAU,kCAAkC,EAExFC,GACCV,EAAC,OACC,UAAWK,EAAG,SAAU,CACrB,aAAeM,CAClB,CAAC,EACD,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,cAAY,OAEZ,SAAAX,EAAC,QACC,EAAE,kBACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACjB,EACF,GAEJ,EAGF,OAAOU,EACLV,EAAC,UACC,UAAU,iGACV,QAASU,EACT,gBAAeC,EAEd,SAAAC,EACH,EAEAZ,EAAC,OAAI,UAAU,yCAA0C,SAAAY,EAAQ,CAErE,EAKaC,EAAoC,CAAC,CAAE,uBAAAJ,CAAuB,IAEvET,EAAC,OAAI,UAAU,iEACZ,UAAC,CAACS,GAAwB,WAAW,QACpCA,GAAwB,WAAW,IAAI,CAACK,EAAmBC,IACzDf,EAACI,EAAA,CAAoC,KAAMU,GAAc,KAAM,UAAU,kCACvE,SAAAd,EAAC,OAAI,UAAU,sEACb,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACE,EAAA,CACC,OAAQY,EAAa,SACrB,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,EACAb,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACG,EAAA,CACC,KAAMW,GAAc,MACpB,GAAG,IACH,UAAWT,EAAG,kCAAmC,CAC/C,aAAcS,GAAc,QAAU,OACtC,aAAcA,GAAc,QAAU,MACxC,CAAC,EACH,EACCA,GAAc,MACbd,EAACG,EAAA,CACC,KAAMW,GAAc,KACpB,UAAWT,EAAG,kCAAmC,CAC/C,aAAcS,GAAc,QAAU,OACtC,aAAcA,GAAc,QAAU,MACxC,CAAC,EACH,GAEJ,GACF,EACF,GA9BS,gBAAgBC,CAAM,EA+BjC,CACD,EACL",
-  "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Link", "cn", "ResourceItem", "resource", "ResourceSubSubCategoryItemComp", "matchResourcesMetadata", "onSubSubCategoryItemClick", "expanded", "content", "ResourceSubSubCategoryContentComp", "resourceItem", "rIndex"]
+  "sourcesContent": ["import { Picture, Text, Link } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8D44\u6E90\u4F4D\u9879\u7EC4\u4EF6 - \u684C\u9762\u7AEF\n */\nexport const ResourceItem = ({ resource }: { resource: any }) => {\n  const { locale = 'us' } = useAiuiContext()\n  return (\n    <div className=\"laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] tablet:max-w-none desktop:w-full relative h-[240px] max-w-[358px] overflow-hidden\">\n      <Link href={getLocalizedPath(resource?.href, locale)} className=\"no-underline hover:text-current\">\n        <div className=\"relative h-full overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n          <Picture\n            source={resource.imageUrl}\n            width={404}\n            height={280}\n            className=\"size-full\"\n            imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n          />\n          <div className=\"absolute inset-x-0 bottom-0 p-4\">\n            <Text\n              as=\"p\"\n              html={resource?.title}\n              className={cn('text-xl font-bold leading-[1.2]', {\n                'text-white': resource?.theme !== 'dark',\n                'text-black': resource?.theme === 'dark',\n              })}\n            />\n            {resource?.desc && (\n              <Text\n                html={resource?.desc}\n                className={cn('text-sm font-bold leading-[1.4]', {\n                  'text-white': resource?.theme !== 'dark',\n                  'text-black': resource?.theme === 'dark',\n                })}\n              />\n            )}\n          </div>\n        </div>\n      </Link>\n    </div>\n  )\n}\n\n/**\n * \u8D44\u6E90\u4F4D\u5B50\u5206\u7C7B\u6807\u9898\u7EC4\u4EF6 - \u79FB\u52A8\u7AEF\n */\nexport const ResourceSubSubCategoryItemComp = ({\n  matchResourcesMetadata,\n  onSubSubCategoryItemClick,\n  expanded,\n}: {\n  matchResourcesMetadata: any\n  onSubSubCategoryItemClick?: () => void\n  expanded?: boolean\n}) => {\n  const content = (\n    <>\n      {matchResourcesMetadata?.label && (\n        <Text html={matchResourcesMetadata?.label} className=\"text-sm font-bold leading-[1.4]\" />\n      )}\n      {onSubSubCategoryItemClick && (\n        <svg\n          className={cn('size-5', {\n            ['rotate-180']: expanded,\n          })}\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M6 9L12 15L18 9\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </>\n  )\n\n  return onSubSubCategoryItemClick ? (\n    <button\n      className=\"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent py-4 text-left\"\n      onClick={onSubSubCategoryItemClick}\n      aria-expanded={expanded}\n    >\n      {content}\n    </button>\n  ) : (\n    <div className=\"flex items-center justify-between py-4\">{content}</div>\n  )\n}\n\n/**\n * \u8D44\u6E90\u4F4D\u5B50\u5206\u7C7B\u5185\u5BB9\u7EC4\u4EF6 - \u79FB\u52A8\u7AEF\n */\nexport const ResourceSubSubCategoryContentComp = ({ matchResourcesMetadata }: { matchResourcesMetadata: any }) => {\n  const { locale = 'us' } = useAiuiContext()\n  return (\n    <div className=\"tablet:grid tablet:grid-cols-2 flex grid-cols-1 flex-col gap-4\">\n      {!!matchResourcesMetadata?.resources?.length &&\n        matchResourcesMetadata?.resources?.map((resourceItem: any, rIndex: number) => (\n          <Link\n            key={`resourceItem-${rIndex}`}\n            href={getLocalizedPath(resourceItem?.href, locale)}\n            className=\"no-underline hover:text-current\"\n          >\n            <div className=\"laptop:h-[280px] tablet:max-w-none relative h-[240px] max-w-[358px]\">\n              <div className=\"relative h-full overflow-hidden\">\n                <Picture\n                  source={resourceItem.imageUrl}\n                  width={404}\n                  height={280}\n                  className=\"size-full\"\n                  imgClassName=\"object-cover h-full hover:scale-105 transition-all duration-300\"\n                />\n                <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                  <Text\n                    html={resourceItem?.title}\n                    as=\"p\"\n                    className={cn('text-xl font-bold leading-[1.2]', {\n                      'text-white': resourceItem?.theme !== 'dark',\n                      'text-black': resourceItem?.theme === 'dark',\n                    })}\n                  />\n                  {resourceItem?.desc && (\n                    <Text\n                      html={resourceItem?.desc}\n                      className={cn('text-sm font-bold leading-[1.4]', {\n                        'text-white': resourceItem?.theme !== 'dark',\n                        'text-black': resourceItem?.theme === 'dark',\n                      })}\n                    />\n                  )}\n                </div>\n              </div>\n            </div>\n          </Link>\n        ))}\n    </div>\n  )\n}\n"],
+  "mappings": "AAaU,OA6CN,YAAAA,EA7CM,OAAAC,EAOA,QAAAC,MAPA,oBAbV,OAAS,WAAAC,EAAS,QAAAC,EAAM,QAAAC,MAAY,4BACpC,OAAS,MAAAC,EAAI,oBAAAC,MAAwB,yBACrC,OAAS,kBAAAC,MAAsB,2BAKxB,MAAMC,EAAe,CAAC,CAAE,SAAAC,CAAS,IAAyB,CAC/D,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIH,EAAe,EACzC,OACEP,EAAC,OAAI,UAAU,4IACb,SAAAA,EAACI,EAAA,CAAK,KAAME,EAAiBG,GAAU,KAAMC,CAAM,EAAG,UAAU,kCAC9D,SAAAT,EAAC,OAAI,UAAU,kHACb,UAAAD,EAACE,EAAA,CACC,OAAQO,EAAS,SACjB,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,EACAR,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACG,EAAA,CACC,GAAG,IACH,KAAMM,GAAU,MAChB,UAAWJ,EAAG,kCAAmC,CAC/C,aAAcI,GAAU,QAAU,OAClC,aAAcA,GAAU,QAAU,MACpC,CAAC,EACH,EACCA,GAAU,MACTT,EAACG,EAAA,CACC,KAAMM,GAAU,KAChB,UAAWJ,EAAG,kCAAmC,CAC/C,aAAcI,GAAU,QAAU,OAClC,aAAcA,GAAU,QAAU,MACpC,CAAC,EACH,GAEJ,GACF,EACF,EACF,CAEJ,EAKaE,EAAiC,CAAC,CAC7C,uBAAAC,EACA,0BAAAC,EACA,SAAAC,CACF,IAIM,CACJ,MAAMC,EACJd,EAAAF,EAAA,CACG,UAAAa,GAAwB,OACvBZ,EAACG,EAAA,CAAK,KAAMS,GAAwB,MAAO,UAAU,kCAAkC,EAExFC,GACCb,EAAC,OACC,UAAWK,EAAG,SAAU,CACrB,aAAeS,CAClB,CAAC,EACD,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,cAAY,OAEZ,SAAAd,EAAC,QACC,EAAE,kBACF,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACjB,EACF,GAEJ,EAGF,OAAOa,EACLb,EAAC,UACC,UAAU,iGACV,QAASa,EACT,gBAAeC,EAEd,SAAAC,EACH,EAEAf,EAAC,OAAI,UAAU,yCAA0C,SAAAe,EAAQ,CAErE,EAKaC,EAAoC,CAAC,CAAE,uBAAAJ,CAAuB,IAAuC,CAChH,KAAM,CAAE,OAAAF,EAAS,IAAK,EAAIH,EAAe,EACzC,OACEP,EAAC,OAAI,UAAU,iEACZ,UAAC,CAACY,GAAwB,WAAW,QACpCA,GAAwB,WAAW,IAAI,CAACK,EAAmBC,IACzDlB,EAACI,EAAA,CAEC,KAAME,EAAiBW,GAAc,KAAMP,CAAM,EACjD,UAAU,kCAEV,SAAAV,EAAC,OAAI,UAAU,sEACb,SAAAC,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACE,EAAA,CACC,OAAQe,EAAa,SACrB,MAAO,IACP,OAAQ,IACR,UAAU,YACV,aAAa,kEACf,EACAhB,EAAC,OAAI,UAAU,kCACb,UAAAD,EAACG,EAAA,CACC,KAAMc,GAAc,MACpB,GAAG,IACH,UAAWZ,EAAG,kCAAmC,CAC/C,aAAcY,GAAc,QAAU,OACtC,aAAcA,GAAc,QAAU,MACxC,CAAC,EACH,EACCA,GAAc,MACbjB,EAACG,EAAA,CACC,KAAMc,GAAc,KACpB,UAAWZ,EAAG,kCAAmC,CAC/C,aAAcY,GAAc,QAAU,OACtC,aAAcA,GAAc,QAAU,MACxC,CAAC,EACH,GAEJ,GACF,EACF,GAjCK,gBAAgBC,CAAM,EAkC7B,CACD,EACL,CAEJ",
+  "names": ["Fragment", "jsx", "jsxs", "Picture", "Text", "Link", "cn", "getLocalizedPath", "useAiuiContext", "ResourceItem", "resource", "locale", "ResourceSubSubCategoryItemComp", "matchResourcesMetadata", "onSubSubCategoryItemClick", "expanded", "content", "ResourceSubSubCategoryContentComp", "resourceItem", "rIndex"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as i}from"react/jsx-runtime";import C,{useCallback as x,useEffect as R,useMemo as A,useRef as F,useState as v}from"react";import{Button as S,Container as $,Text as h}from"../../components/index.js";import{cn as m}from"../../helpers/utils.js";import{DownArrow as D}from"./icons/index.js";import{useNavContext as E}from"./NavProvider.js";import{ResourceItem as L}from"./ResourceItem.js";const O=C.memo(({resourceCategoriesMetadata:s,resourcesMetadata:u})=>{const{onSidebarNavClick:f}=E(),[c,b]=v([]),[p,d]=v(-1),w=F(null),y=x(()=>{const e=s?.subcategories;if(!e?.length)return;const o=e.findIndex(t=>!!t?.subSubCategories),n=e.findIndex(t=>!t?.subSubCategories),a=e.map((t,l)=>({index:l,open:o===l||n===l}));b(a)},[s]);R(()=>{y()},[y]);const g=A(()=>{const e=s?.subcategories?.[c?.find(n=>n.open)?.index||0],o=u?.find(n=>n?.label?.toLowerCase()===e?.label?.toLowerCase())||{};if(e?.subSubCategories){const n=e?.subSubCategories?.[p];return u?.find(t=>t?.label?.toLowerCase()===n?.label?.toLowerCase())||{}}else return o},[s,c,p,u]),N=x((e,o)=>{o?.subSubCategories?.length>0?d(0):d(-1),b(n=>n.map((a,t)=>({...a,open:t===e?!a.open:!1})))},[]),k=(e,o)=>{b(n=>n.map(a=>a.index===e?{...a,open:!0}:{...a,open:!1})),d(o)};return i($,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:w,children:[r("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:s?.subcategories?.map((e,o)=>{const n=Array.isArray(e?.subSubCategories)&&e?.subSubCategories?.length>0,a=c?.find(t=>t.index===o)?.open;return i("div",{children:[i("button",{className:m("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!n&&a}),onClick:()=>{N(o,e),f?.(e,o)},"aria-expanded":n?a:void 0,"aria-haspopup":n?"true":void 0,children:[r(h,{html:e.label,className:"p-4 text-sm font-bold leading-[1.4]"}),n&&r(D,{"aria-hidden":"true",className:m("size-4",{"rotate-180":a})})]}),a&&r("div",{className:"flex flex-col",role:"menu",children:e.subSubCategories?.map((t,l)=>r("button",{onClick:()=>{k(o,l),f?.(t,l)},className:m("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":p===l}),role:"menuitem","aria-label":t.label,children:r(h,{html:t.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${o}-${l}`))})]},`subcategoryItem-${o}`)})}),s&&r("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[s?.primary&&r(S,{as:"a",href:`${s?.primary?.url}?ref=${s?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:s?.primary?.label}),s?.secondary&&r(S,{as:"a",href:s?.secondary?.url,variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:s?.secondary?.label})]})})]}),r("div",{className:"desktop:h-[509px] flex-1 overflow-y-auto py-4",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:r("div",{className:"grid grid-cols-3 gap-4 ",children:Array.isArray(g?.resources)?g.resources.map((e,o)=>r(L,{resource:e},`resourceItem-${o}`)):null})})]})});O.displayName="ResourceSidebarDropdown";export{O as ResourceSidebarDropdown};
+import{jsx as r,jsxs as i}from"react/jsx-runtime";import R,{useCallback as v,useEffect as F,useMemo as L,useRef as $,useState as S}from"react";import{Button as h,Container as D,Text as w}from"../../components/index.js";import{cn as m,getLocalizedPath as N}from"../../helpers/utils.js";import{DownArrow as E}from"./icons/index.js";import{useNavContext as z}from"./NavProvider.js";import{ResourceItem as O}from"./ResourceItem.js";import{useAiuiContext as B}from"../AiuiProvider/index.js";const I=R.memo(({resourceCategoriesMetadata:s,resourcesMetadata:u})=>{const{onSidebarNavClick:f}=z(),[c,b]=S([]),[p,d]=S(-1),C=$(null),{locale:y="us"}=B(),g=v(()=>{const e=s?.subcategories;if(!e?.length)return;const o=e.findIndex(n=>!!n?.subSubCategories),t=e.findIndex(n=>!n?.subSubCategories),a=e.map((n,l)=>({index:l,open:o===l||t===l}));b(a)},[s]);F(()=>{g()},[g]);const x=L(()=>{const e=s?.subcategories?.[c?.find(t=>t.open)?.index||0],o=u?.find(t=>t?.label?.toLowerCase()===e?.label?.toLowerCase())||{};if(e?.subSubCategories){const t=e?.subSubCategories?.[p];return u?.find(n=>n?.label?.toLowerCase()===t?.label?.toLowerCase())||{}}else return o},[s,c,p,u]),k=v((e,o)=>{o?.subSubCategories?.length>0?d(0):d(-1),b(t=>t.map((a,n)=>({...a,open:n===e?!a.open:!1})))},[]),A=(e,o)=>{b(t=>t.map(a=>a.index===e?{...a,open:!0}:{...a,open:!1})),d(o)};return i(D,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:C,children:[r("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:s?.subcategories?.map((e,o)=>{const t=Array.isArray(e?.subSubCategories)&&e?.subSubCategories?.length>0,a=c?.find(n=>n.index===o)?.open;return i("div",{children:[i("button",{className:m("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!t&&a}),onClick:()=>{k(o,e),f?.(e,o)},"aria-expanded":t?a:void 0,"aria-haspopup":t?"true":void 0,children:[r(w,{html:e.label,className:"p-4 text-sm font-bold leading-[1.4]"}),t&&r(E,{"aria-hidden":"true",className:m("size-4",{"rotate-180":a})})]}),a&&r("div",{className:"flex flex-col",role:"menu",children:e.subSubCategories?.map((n,l)=>r("button",{onClick:()=>{A(o,l),f?.(n,l)},className:m("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":p===l}),role:"menuitem","aria-label":n.label,children:r(w,{html:n.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${o}-${l}`))})]},`subcategoryItem-${o}`)})}),s&&r("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[s?.primary&&r(h,{as:"a",href:`${N(s?.primary?.url,y)}?ref=${s?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:s?.primary?.label}),s?.secondary&&r(h,{as:"a",href:N(s?.secondary?.url,y),variant:"link",size:"lg",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:s?.secondary?.label})]})})]}),r("div",{className:"desktop:h-[509px] flex-1 overflow-y-auto py-4",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:r("div",{className:"grid grid-cols-3 gap-4 ",children:Array.isArray(x?.resources)?x.resources.map((e,o)=>r(O,{resource:e},`resourceItem-${o}`)):null})})]})});I.displayName="ResourceSidebarDropdown";export{I as ResourceSidebarDropdown};
 //# sourceMappingURL=ResourceSidebarDropdown.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/ResourceSidebarDropdown.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport { ResourceItem } from './ResourceItem.js'\n\n/**\n * \u8D44\u6E90\u4F4D\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const ResourceSidebarDropdown = React.memo(\n  ({ resourceCategoriesMetadata, resourcesMetadata }: { resourceCategoriesMetadata: any; resourcesMetadata: any }) => {\n    const { onSidebarNavClick } = useNavContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const resourceDropdownRef = useRef<HTMLDivElement>(null)\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = resourceCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [resourceCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eresources\u7684label\u5339\u914D\n    const matchResourcesMetadata = useMemo(() => {\n      const subCategory =\n        resourceCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentResourcesMetadata =\n        resourcesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n\n      if (subCategory?.subSubCategories) {\n        const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n        const currentActiveResourcesMetadata =\n          resourcesMetadata?.find(\n            (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n          ) || {}\n        return currentActiveResourcesMetadata\n      } else {\n        return currentResourcesMetadata\n      }\n    }, [resourceCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, resourcesMetadata])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={resourceDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {resourceCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {resourceCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {resourceCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${resourceCategoriesMetadata?.primary?.url}?ref=${resourceCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {resourceCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {resourceCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={resourceCategoriesMetadata?.secondary?.url}\n                    variant=\"link\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {resourceCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div\n          className=\"desktop:h-[509px] flex-1 overflow-y-auto py-4\"\n          style={{\n            scrollbarWidth: 'none',\n            msOverflowStyle: 'none',\n          }}\n        >\n          <div className=\"grid grid-cols-3 gap-4 \">\n            {Array.isArray(matchResourcesMetadata?.resources)\n              ? matchResourcesMetadata.resources.map((resourceItem: any, resourceIndex: number) => (\n                  <ResourceItem key={`resourceItem-${resourceIndex}`} resource={resourceItem} />\n                ))\n              : null}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nResourceSidebarDropdown.displayName = 'ResourceSidebarDropdown'\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useCallback", "useEffect", "useMemo", "useRef", "useState", "Button", "Container", "Text", "cn", "DownArrow", "useNavContext", "ResourceItem", "ResourceSidebarDropdown", "resourceCategoriesMetadata", "resourcesMetadata", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "resourceDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchResourcesMetadata", "subCategory", "currentResourcesMetadata", "activeSubSubcategory", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "resourceItem", "resourceIndex"]
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text } from '../../components/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport { ResourceItem } from './ResourceItem.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u8D44\u6E90\u4F4D\u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const ResourceSidebarDropdown = React.memo(\n  ({ resourceCategoriesMetadata, resourcesMetadata }: { resourceCategoriesMetadata: any; resourcesMetadata: any }) => {\n    const { onSidebarNavClick } = useNavContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const resourceDropdownRef = useRef<HTMLDivElement>(null)\n    const { locale = 'us' } = useAiuiContext()\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = resourceCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [resourceCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eresources\u7684label\u5339\u914D\n    const matchResourcesMetadata = useMemo(() => {\n      const subCategory =\n        resourceCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentResourcesMetadata =\n        resourcesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n\n      if (subCategory?.subSubCategories) {\n        const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n        const currentActiveResourcesMetadata =\n          resourcesMetadata?.find(\n            (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n          ) || {}\n        return currentActiveResourcesMetadata\n      } else {\n        return currentResourcesMetadata\n      }\n    }, [resourceCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, resourcesMetadata])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={resourceDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {resourceCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {resourceCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {resourceCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${getLocalizedPath(resourceCategoriesMetadata?.primary?.url, locale)}?ref=${resourceCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {resourceCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {resourceCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={getLocalizedPath(resourceCategoriesMetadata?.secondary?.url, locale)}\n                    variant=\"link\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {resourceCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div\n          className=\"desktop:h-[509px] flex-1 overflow-y-auto py-4\"\n          style={{\n            scrollbarWidth: 'none',\n            msOverflowStyle: 'none',\n          }}\n        >\n          <div className=\"grid grid-cols-3 gap-4 \">\n            {Array.isArray(matchResourcesMetadata?.resources)\n              ? matchResourcesMetadata.resources.map((resourceItem: any, resourceIndex: number) => (\n                  <ResourceItem key={`resourceItem-${resourceIndex}`} resource={resourceItem} />\n                ))\n              : null}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nResourceSidebarDropdown.displayName = 'ResourceSidebarDropdown'\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useCallback", "useEffect", "useMemo", "useRef", "useState", "Button", "Container", "Text", "cn", "getLocalizedPath", "DownArrow", "useNavContext", "ResourceItem", "useAiuiContext", "ResourceSidebarDropdown", "resourceCategoriesMetadata", "resourcesMetadata", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "resourceDropdownRef", "locale", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchResourcesMetadata", "subCategory", "currentResourcesMetadata", "activeSubSubcategory", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "resourceItem", "resourceIndex"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as a,jsxs as i}from"react/jsx-runtime";import L,{useCallback as C,useEffect as _,useMemo as k,useRef as P,useState as F}from"react";import{Button as S,Container as A,Text as p,Link as w,Heading as z,Picture as j}from"../../components/index.js";import{cn as y,atobID as B}from"../../helpers/utils.js";import{DownArrow as E}from"./icons/index.js";import{useNavContext as $}from"./NavProvider.js";const O=L.memo(({sidebarCategoriesMetadata:l,seriesMetadata:u})=>{const{buildProps:b,onSidebarNavClick:h}=$(),[f,g]=F([]),[c,m]=F(-1),v=P(null),x=C(()=>{const t=l?.subcategories;if(!t?.length)return;const s=t.findIndex(o=>!!o?.subSubCategories),n=t.findIndex(o=>!o?.subSubCategories),r=t.map((o,d)=>({index:d,open:s===d||n===d}));g(r)},[l]);_(()=>{x()},[x]);const e=k(()=>{const t=l?.subcategories?.[f?.find(n=>n.open)?.index||0],s=u?.find(n=>n?.label?.toLowerCase()===t?.label?.toLowerCase())||{};if(t?.collections){const n=b?.categories?.[t?.collections]||{};return{label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,series:[{products:n?.products}]}}else if(t?.subSubCategories){const n=t?.subSubCategories?.[c],r=u?.find(o=>o?.label?.toLowerCase()===n?.label?.toLowerCase())||{};if(n?.collections){const o=b?.categories?.[n?.collections]||{};return{label:r?.label,isCollection:!0,banner:r?.banner,primary:r?.primary,series:[{products:o?.products}]}}else return r}else return s},[l,f,c,u,b]),N=C((t,s)=>{s?.subSubCategories?.length>0?m(0):m(-1),g(n=>n.map((r,o)=>({...r,open:o===t?!r.open:!1})))},[]),D=(t,s)=>{g(n=>n.map(r=>r.index===t?{...r,open:!0}:{...r,open:!1})),m(s)};return i(A,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:v,children:[a("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:l?.subcategories?.map((t,s)=>{const n=Array.isArray(t?.subSubCategories)&&t?.subSubCategories?.length>0,r=f?.find(o=>o.index===s)?.open;return i("div",{children:[i("button",{className:y("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!n&&r}),onClick:()=>{N(s,t),h?.(t,s)},"aria-expanded":n?r:void 0,"aria-haspopup":n?"true":void 0,children:[a(p,{html:t.label,className:"p-4 text-sm font-bold leading-[1.4]"}),n&&a(E,{"aria-hidden":"true",className:y("size-4",{"rotate-180":r})})]}),r&&a("div",{className:"flex flex-col",role:"menu",children:t.subSubCategories?.map((o,d)=>a("button",{onClick:()=>{D(s,d),h?.(o,d)},className:y("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":c===d}),role:"menuitem","aria-label":o.label,children:a(p,{html:o.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${s}-${d}`))})]},`${t?.label||""}subcategoryItem-${s}`)})}),l&&a("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[l?.primary&&a(S,{as:"a",href:`${l?.primary?.url}?ref=${l?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:l?.primary?.label}),l?.secondary&&a(S,{as:"a",href:l?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:l?.secondary?.label})]})})]}),i("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(e).length>0&&i("div",{className:"mb-4 flex items-center justify-between",children:[i("div",{className:"flex items-center gap-2",children:[a(p,{html:e?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),e?.primary&&!e?.primary?.hide&&a(S,{as:"a",href:`${e?.primary?.url}?ref=${e?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:e?.primary?.label})]}),l?.guide?.label&&a(w,{href:l?.guide?.url,className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:l?.guide?.label})]}),a("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e?.series?.map((t,s)=>i("div",{children:[t.label&&a(p,{html:t.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"grid grid-cols-3 gap-4",children:[!!e?.banner&&a(w,{asChild:!e?.banner?.href,href:e?.banner?.href,children:i("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[a(j,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),i("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[a(z,{size:2,html:e?.banner?.title||"Buy in Guide",className:y("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),a(p,{html:e?.banner?.desc||"20.000mAh",className:y("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),t.products?.map((n,r)=>a(R,{seriesLabel:e?.label,product:n,isCollection:e?.isCollection},`seriesProductItem-${t?.label||""}-${s}-${r}`))]})]},`seriesItem-${t?.label||""}-${s}`))})]})]})});O.displayName="SidebarDropdown";const R=({product:l,isCollection:u,position:b,seriesLabel:h})=>{const{buildProps:f,onSeriesProductClick:g}=$();let c=u?l:f?.products?.find(e=>e.handle===l.handle);const m=c?.variants?.find(e=>e.sku===l.sku)||c?.variants?.[0],v=k(()=>`/products/${c?.handle}?variant=${B(m?.id)}`,[c?.handle,m?.id]),x=k(()=>c?.tags?.filter?.(e=>e?.startsWith?.("CLtag"))?.map?.(e=>e?.replace?.("CLtag:",""))?.slice?.(0,2),[c?.tags]);return m?.availableForSale?a(w,{href:v,onClick:e=>{e.preventDefault(),window.open(v,"_self"),g?.(c,b||0,h)},className:"no-underline hover:text-current",children:i("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[a("div",{className:"shrink-0",children:a("img",{src:`${m?.image?.url||l?.images?.[0]?.url}&width=200`,loading:"lazy",alt:c?.title||l?.name,width:90,height:90,className:"size-[96px] object-contain"})}),i("div",{className:"relative",children:[a("div",{className:"flex gap-1",children:Array.isArray(x)&&x?.map((e,N)=>a(p,{as:"p",html:e,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},N))}),a(p,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l?.custom_name||m?.metafields?.infos?.page_short_title||c?.title}),l?.desc&&a(p,{as:"p",html:l?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};export{R as SeriesProductItem,O as SidebarDropdown};
+import{jsx as a,jsxs as i}from"react/jsx-runtime";import A,{useCallback as $,useEffect as z,useMemo as w,useRef as j,useState as L}from"react";import{Button as C,Container as B,Text as u,Link as F,Heading as E,Picture as O}from"../../components/index.js";import{cn as h,atobID as R,getLocalizedPath as v}from"../../helpers/utils.js";import{DownArrow as W}from"./icons/index.js";import{useNavContext as D}from"./NavProvider.js";import{useAiuiContext as P}from"../AiuiProvider/index.js";const H=A.memo(({sidebarCategoriesMetadata:l,seriesMetadata:b})=>{const{buildProps:f,onSidebarNavClick:N}=D(),{locale:p="us"}=P(),[g,x]=L([]),[c,m]=L(-1),k=j(null),y=$(()=>{const t=l?.subcategories;if(!t?.length)return;const s=t.findIndex(r=>!!r?.subSubCategories),n=t.findIndex(r=>!r?.subSubCategories),o=t.map((r,d)=>({index:d,open:s===d||n===d}));x(o)},[l]);z(()=>{y()},[y]);const e=w(()=>{const t=l?.subcategories?.[g?.find(n=>n.open)?.index||0],s=b?.find(n=>n?.label?.toLowerCase()===t?.label?.toLowerCase())||{};if(t?.collections){const n=f?.categories?.[t?.collections]||{};return{label:s?.label,isCollection:!0,banner:s?.banner,primary:s?.primary,series:[{products:n?.products}]}}else if(t?.subSubCategories){const n=t?.subSubCategories?.[c],o=b?.find(r=>r?.label?.toLowerCase()===n?.label?.toLowerCase())||{};if(n?.collections){const r=f?.categories?.[n?.collections]||{};return{label:o?.label,isCollection:!0,banner:o?.banner,primary:o?.primary,series:[{products:r?.products}]}}else return o}else return s},[l,g,c,b,f]),S=$((t,s)=>{s?.subSubCategories?.length>0?m(0):m(-1),x(n=>n.map((o,r)=>({...o,open:r===t?!o.open:!1})))},[]),_=(t,s)=>{x(n=>n.map(o=>o.index===t?{...o,open:!0}:{...o,open:!1})),m(s)};return i(B,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[i("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:k,children:[a("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:l?.subcategories?.map((t,s)=>{const n=Array.isArray(t?.subSubCategories)&&t?.subSubCategories?.length>0,o=g?.find(r=>r.index===s)?.open;return i("div",{children:[i("button",{className:h("flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left",{"bg-[#F5F5F7]":!n&&o}),onClick:()=>{S(s,t),N?.(t,s)},"aria-expanded":n?o:void 0,"aria-haspopup":n?"true":void 0,children:[a(u,{html:t.label,className:"p-4 text-sm font-bold leading-[1.4]"}),n&&a(W,{"aria-hidden":"true",className:h("size-4",{"rotate-180":o})})]}),o&&a("div",{className:"flex flex-col",role:"menu",children:t.subSubCategories?.map((r,d)=>a("button",{onClick:()=>{_(s,d),N?.(r,d)},className:h("w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]",{"bg-[#F5F5F7]":c===d}),role:"menuitem","aria-label":r.label,children:a(u,{html:r.label,className:"text-sm font-bold leading-[1.4] text-[#4A4C56]"})},`subSubItem-${s}-${d}`))})]},`${t?.label||""}subcategoryItem-${s}`)})}),l&&a("div",{className:"flex",children:i("div",{className:"flex flex-col gap-4",children:[l?.primary&&a(C,{as:"a",href:`${v(l?.primary?.url,p)}?ref=${l?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"lg-desktop:text-base text-sm",children:l?.primary?.label}),l?.secondary&&a(C,{as:"a",href:l?.secondary?.url,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm",children:l?.secondary?.label})]})})]}),i("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(e).length>0&&i("div",{className:"mb-4 flex items-center justify-between",children:[i("div",{className:"flex items-center gap-2",children:[a(u,{html:e?.label,className:"lg-desktop:text-2xl text-xl font-bold leading-[1.4]"}),e?.primary&&!e?.primary?.hide&&a(C,{as:"a",href:`${v(e?.primary?.url,p)}?ref=${e?.label}_viewmore`,variant:"link",size:"lg",iconClassName:"size-4",className:"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline",children:e?.primary?.label})]}),l?.guide?.label&&a(F,{href:v(l?.guide?.url,p),className:"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]",children:l?.guide?.label})]}),a("div",{className:"flex h-[426px] flex-col gap-4 overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:e?.series?.map((t,s)=>i("div",{children:[t.label&&a(u,{html:t.label,as:"p",className:"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i("div",{className:"grid grid-cols-3 gap-4",children:[!!e?.banner&&a(F,{asChild:!e?.banner?.href,href:v(e?.banner?.href,p),children:i("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[a(O,{source:e?.banner?.imageUrl,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),i("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[a(E,{size:2,html:e?.banner?.title||"Buy in Guide",className:h("font-bold text-white",{"text-black":e?.banner?.theme==="dark"})}),a(u,{html:e?.banner?.desc||"20.000mAh",className:h("text-sm font-bold text-white",{"text-black":e?.banner?.theme==="dark"})})]})]})}),t.products?.map((n,o)=>a(T,{seriesLabel:e?.label,product:n,isCollection:e?.isCollection},`seriesProductItem-${t?.label||""}-${s}-${o}`))]})]},`seriesItem-${t?.label||""}-${s}`))})]})]})});H.displayName="SidebarDropdown";const T=({product:l,isCollection:b,position:f,seriesLabel:N})=>{const{locale:p="us"}=P(),{buildProps:g,onSeriesProductClick:x}=D();let c=b?l:g?.products?.find(e=>e.handle===l.handle);const m=c?.variants?.find(e=>e.sku===l.sku)||c?.variants?.[0],k=w(()=>`${v(`/products/${c?.handle}`,p)}?variant=${R(m?.id)}`,[c?.handle,m?.id,p]),y=w(()=>c?.tags?.filter?.(e=>e?.startsWith?.("CLtag"))?.map?.(e=>e?.replace?.("CLtag:",""))?.slice?.(0,2),[c?.tags]);return m?.availableForSale?a(F,{href:k,onClick:e=>{e.preventDefault(),window.open(k,"_self"),x?.(c,f||0,N)},className:"no-underline hover:text-current",children:i("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",children:[a("div",{className:"shrink-0",children:a("img",{src:`${m?.image?.url||l?.images?.[0]?.url}&width=200`,loading:"lazy",alt:c?.title||l?.name,width:90,height:90,className:"size-[96px] object-contain"})}),i("div",{className:"relative",children:[a("div",{className:"flex gap-1",children:Array.isArray(y)&&y?.map((e,S)=>a(u,{as:"p",html:e,className:"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]"},S))}),a(u,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:l?.custom_name||m?.metafields?.infos?.page_short_title||c?.title}),l?.desc&&a(u,{as:"p",html:l?.desc,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null};export{T as SeriesProductItem,H as SidebarDropdown};
 //# sourceMappingURL=SidebarDropdown.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/SidebarDropdown.tsx"],
-  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n  ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n    const { buildProps, onSidebarNavClick } = useNavContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = sidebarCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [sidebarCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n    const matchSeriesMetadata = useMemo(() => {\n      const subCategory =\n        sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentSeriesMetadata =\n        seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n      if (subCategory?.collections) {\n        const category = buildProps?.categories?.[subCategory?.collections] || {}\n        return {\n          label: currentSeriesMetadata?.label,\n          isCollection: true,\n          banner: currentSeriesMetadata?.banner,\n          primary: currentSeriesMetadata?.primary,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        }\n      } else {\n        if (subCategory?.subSubCategories) {\n          const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n          const currentActiveSeriesMetadata =\n            seriesMetadata?.find(\n              (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n            ) || {}\n          if (activeSubSubcategory?.collections) {\n            const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n            return {\n              label: currentActiveSeriesMetadata?.label,\n              isCollection: true,\n              banner: currentActiveSeriesMetadata?.banner,\n              primary: currentActiveSeriesMetadata?.primary,\n              series: [\n                {\n                  products: category?.products,\n                },\n              ],\n            }\n          } else {\n            return currentActiveSeriesMetadata\n          }\n        } else {\n          return currentSeriesMetadata\n        }\n      }\n    }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={sidebarDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`${subItem?.label || ''}subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {sidebarCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {sidebarCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${sidebarCategoriesMetadata?.primary?.url}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {sidebarCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={sidebarCategoriesMetadata?.secondary?.url}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div className=\"flex-1 py-4\">\n          {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Text\n                  html={matchSeriesMetadata?.label}\n                  className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n                />\n                {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n                  <Button\n                    as=\"a\"\n                    href={`${matchSeriesMetadata?.primary?.url}?ref=${matchSeriesMetadata?.label}_viewmore`}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n                  >\n                    {matchSeriesMetadata?.primary?.label}\n                  </Button>\n                )}\n              </div>\n              {sidebarCategoriesMetadata?.guide?.label && (\n                <Link\n                  href={sidebarCategoriesMetadata?.guide?.url}\n                  className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n                >\n                  {sidebarCategoriesMetadata?.guide?.label}\n                </Link>\n              )}\n            </div>\n          )}\n          <div\n            className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n              <div key={`seriesItem-${seriesItem?.label || ''}-${seriesIndex}`}>\n                {seriesItem.label && (\n                  <Text\n                    html={seriesItem.label}\n                    as=\"p\"\n                    className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                  />\n                )}\n                <div className=\"grid grid-cols-3 gap-4\">\n                  {!!matchSeriesMetadata?.banner && (\n                    <Link asChild={!matchSeriesMetadata?.banner?.href} href={matchSeriesMetadata?.banner?.href}>\n                      <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={matchSeriesMetadata?.banner?.imageUrl}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {seriesItem.products?.map((product: any, index: number) => (\n                    <SeriesProductItem\n                      seriesLabel={matchSeriesMetadata?.label}\n                      key={`seriesProductItem-${seriesItem?.label || ''}-${seriesIndex}-${index}`}\n                      product={product}\n                      isCollection={matchSeriesMetadata?.isCollection}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n  product,\n  isCollection,\n  position,\n  seriesLabel,\n}: {\n  product: any\n  isCollection?: boolean\n  position?: number\n  seriesLabel?: string\n}) => {\n  const { buildProps, onSeriesProductClick } = useNavContext()\n  let productData = isCollection\n    ? product\n    : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n  const variant =\n    productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n  const listingLink = useMemo(() => {\n    return `/products/${productData?.handle}?variant=${atobID(variant?.id as string)}`\n  }, [productData?.handle, variant?.id])\n\n  const tags = useMemo(() => {\n    return productData?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [productData?.tags])\n\n  if (!variant?.availableForSale) return null\n\n  return (\n    <Link\n      href={listingLink}\n      onClick={e => {\n        e.preventDefault()\n        window.open(listingLink, '_self')\n        onSeriesProductClick?.(productData, position || 0, seriesLabel)\n      }}\n      className=\"no-underline hover:text-current\"\n    >\n      <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n        <div className=\"shrink-0\">\n          <img\n            src={`${variant?.image?.url || product?.images?.[0]?.url}&width=200`}\n            loading=\"lazy\"\n            alt={productData?.title || product?.name}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\"flex gap-1\">\n            {Array.isArray(tags) &&\n              tags?.map((tag: string, index: number) => (\n                <Text\n                  key={index}\n                  as=\"p\"\n                  html={tag}\n                  className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n                />\n              ))}\n          </div>\n          <Text\n            className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n            html={product?.custom_name || variant?.metafields?.infos?.page_short_title || productData?.title}\n          />\n          {product?.desc && (\n            <Text\n              as=\"p\"\n              html={product?.desc}\n              className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </Link>\n  )\n}\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useCallback", "useEffect", "useMemo", "useRef", "useState", "Button", "Container", "Text", "Link", "Heading", "Picture", "cn", "atobID", "DownArrow", "useNavContext", "SidebarDropdown", "sidebarCategoriesMetadata", "seriesMetadata", "buildProps", "onSidebarNavClick", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "seriesItem", "seriesIndex", "product", "SeriesProductItem", "isCollection", "position", "seriesLabel", "onSeriesProductClick", "productData", "variant", "listingLink", "tags", "tag"]
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Button, Container, Text, Link, Heading, Picture } from '../../components/index.js'\nimport { cn, atobID, getLocalizedPath } from '../../helpers/utils.js'\nimport { DownArrow } from './icons/index.js'\nimport { useNavContext } from './NavProvider.js'\nimport type { Product, ProductVariant } from '../../cpn-components/CpnProductCard/types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\n/**\n * \u4FA7\u8FB9\u680F\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n */\nexport const SidebarDropdown = React.memo(\n  ({ sidebarCategoriesMetadata, seriesMetadata }: { sidebarCategoriesMetadata: any; seriesMetadata: any }) => {\n    const { buildProps, onSidebarNavClick } = useNavContext()\n    const { locale = 'us' } = useAiuiContext()\n    const [expandedSubcategory, setExpandedSubcategory] = useState<{ index: number; open: boolean }[]>([])\n    const [activeSubSubcategoryIndex, setActiveSubSubcategoryIndex] = useState(-1)\n    const sidebarDropdownRef = useRef<HTMLDivElement>(null)\n\n    const initExpandedSubcategory = useCallback(() => {\n      const subcategories = sidebarCategoriesMetadata?.subcategories\n      if (!subcategories?.length) return\n\n      const withSubSubCategoriesIndex = subcategories.findIndex((item: any) => !!item?.subSubCategories)\n      const withoutSubSubCategoriesIndex = subcategories.findIndex((item: any) => !item?.subSubCategories)\n\n      // \u521B\u5EFA\u5C55\u5F00\u72B6\u6001\u6570\u7EC4\n      const expandedStates = subcategories.map((_: any, index: number) => ({\n        index,\n        open: withSubSubCategoriesIndex === index || withoutSubSubCategoriesIndex === index,\n      }))\n\n      setExpandedSubcategory(expandedStates)\n    }, [sidebarCategoriesMetadata])\n\n    useEffect(() => {\n      initExpandedSubcategory()\n    }, [initExpandedSubcategory])\n\n    // \u901A\u8FC7categoriesMetadata\u7684subSubCategories\u7684label\u4E0Eseries\u7684label\u5339\u914D\n    const matchSeriesMetadata = useMemo(() => {\n      const subCategory =\n        sidebarCategoriesMetadata?.subcategories?.[expandedSubcategory?.find(item => item.open)?.index || 0]\n      const currentSeriesMetadata =\n        seriesMetadata?.find((item: any) => item?.label?.toLowerCase() === subCategory?.label?.toLowerCase()) || {}\n      if (subCategory?.collections) {\n        const category = buildProps?.categories?.[subCategory?.collections] || {}\n        return {\n          label: currentSeriesMetadata?.label,\n          isCollection: true,\n          banner: currentSeriesMetadata?.banner,\n          primary: currentSeriesMetadata?.primary,\n          series: [\n            {\n              products: category?.products,\n            },\n          ],\n        }\n      } else {\n        if (subCategory?.subSubCategories) {\n          const activeSubSubcategory = subCategory?.subSubCategories?.[activeSubSubcategoryIndex]\n          const currentActiveSeriesMetadata =\n            seriesMetadata?.find(\n              (item: any) => item?.label?.toLowerCase() === activeSubSubcategory?.label?.toLowerCase()\n            ) || {}\n          if (activeSubSubcategory?.collections) {\n            const category = buildProps?.categories?.[activeSubSubcategory?.collections] || {}\n            return {\n              label: currentActiveSeriesMetadata?.label,\n              isCollection: true,\n              banner: currentActiveSeriesMetadata?.banner,\n              primary: currentActiveSeriesMetadata?.primary,\n              series: [\n                {\n                  products: category?.products,\n                },\n              ],\n            }\n          } else {\n            return currentActiveSeriesMetadata\n          }\n        } else {\n          return currentSeriesMetadata\n        }\n      }\n    }, [sidebarCategoriesMetadata, expandedSubcategory, activeSubSubcategoryIndex, seriesMetadata, buildProps])\n\n    const handleSubcategoryOpen = useCallback((index: number, subcategoryItem: any) => {\n      subcategoryItem?.subSubCategories?.length > 0 ? setActiveSubSubcategoryIndex(0) : setActiveSubSubcategoryIndex(-1)\n\n      setExpandedSubcategory(prev => prev.map((item, i) => ({ ...item, open: i === index ? !item.open : false })))\n    }, [])\n\n    const handleSubSubcategoryOpen = (index: number, subSubindex: number) => {\n      setExpandedSubcategory(prev =>\n        prev.map(item => (item.index === index ? { ...item, open: true } : { ...item, open: false }))\n      )\n      setActiveSubSubcategoryIndex(subSubindex)\n    }\n\n    return (\n      <Container childClassName=\"lg-desktop:gap-12 flex bg-white gap-8\">\n        <div\n          className=\"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4\"\n          style={{\n            userSelect: 'none',\n          }}\n          ref={sidebarDropdownRef}\n        >\n          <div\n            className=\"desktop:h-[416px] flex flex-col overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {sidebarCategoriesMetadata?.subcategories?.map((subItem: any, index: number) => {\n              const hasSubSubCategory =\n                Array.isArray(subItem?.subSubCategories) && subItem?.subSubCategories?.length > 0\n              const isExpanded = expandedSubcategory?.find(item => item.index === index)?.open\n              return (\n                <div key={`${subItem?.label || ''}subcategoryItem-${index}`}>\n                  <button\n                    className={cn(\n                      'flex w-full cursor-pointer items-center justify-between border-0 bg-transparent text-left',\n                      {\n                        'bg-[#F5F5F7]': !hasSubSubCategory && isExpanded,\n                      }\n                    )}\n                    onClick={() => {\n                      handleSubcategoryOpen(index, subItem)\n                      onSidebarNavClick?.(subItem, index)\n                    }}\n                    aria-expanded={hasSubSubCategory ? isExpanded : undefined}\n                    aria-haspopup={hasSubSubCategory ? 'true' : undefined}\n                  >\n                    <Text html={subItem.label} className=\"p-4 text-sm font-bold leading-[1.4]\" />\n                    {hasSubSubCategory && (\n                      <DownArrow\n                        aria-hidden=\"true\"\n                        className={cn('size-4', {\n                          ['rotate-180']: isExpanded,\n                        })}\n                      />\n                    )}\n                  </button>\n                  {isExpanded && (\n                    <div className=\"flex flex-col\" role=\"menu\">\n                      {subItem.subSubCategories?.map((subSubItem: any, subSubindex: number) => (\n                        <button\n                          onClick={() => {\n                            handleSubSubcategoryOpen(index, subSubindex)\n                            onSidebarNavClick?.(subSubItem, subSubindex)\n                          }}\n                          key={`subSubItem-${index}-${subSubindex}`}\n                          className={cn(\n                            'w-full cursor-pointer border-0 bg-transparent px-6 py-4 text-left hover:bg-[#F5F5F7]',\n                            {\n                              'bg-[#F5F5F7]': activeSubSubcategoryIndex === subSubindex,\n                            }\n                          )}\n                          role=\"menuitem\"\n                          aria-label={subSubItem.label}\n                        >\n                          <Text html={subSubItem.label} className=\"text-sm font-bold leading-[1.4] text-[#4A4C56]\" />\n                        </button>\n                      ))}\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {sidebarCategoriesMetadata && (\n            <div className=\"flex\">\n              <div className=\"flex flex-col gap-4\">\n                {sidebarCategoriesMetadata?.primary && (\n                  <Button\n                    as=\"a\"\n                    href={`${getLocalizedPath(sidebarCategoriesMetadata?.primary?.url, locale)}?ref=${sidebarCategoriesMetadata?.primary?.label}_shopall`}\n                    variant=\"primary\"\n                    size=\"lg\"\n                    className=\"lg-desktop:text-base text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.primary?.label}\n                  </Button>\n                )}\n                {sidebarCategoriesMetadata?.secondary && (\n                  <Button\n                    as=\"a\"\n                    href={sidebarCategoriesMetadata?.secondary?.url}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm\"\n                  >\n                    {sidebarCategoriesMetadata?.secondary?.label}\n                  </Button>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n        <div className=\"flex-1 py-4\">\n          {Reflect.ownKeys(matchSeriesMetadata).length > 0 && (\n            <div className=\"mb-4 flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <Text\n                  html={matchSeriesMetadata?.label}\n                  className=\"lg-desktop:text-2xl text-xl font-bold leading-[1.4]\"\n                />\n                {matchSeriesMetadata?.primary && !matchSeriesMetadata?.primary?.hide && (\n                  <Button\n                    as=\"a\"\n                    href={`${getLocalizedPath(matchSeriesMetadata?.primary?.url, locale)}?ref=${matchSeriesMetadata?.label}_viewmore`}\n                    variant=\"link\"\n                    size=\"lg\"\n                    iconClassName=\"size-4\"\n                    className=\"lg-desktop:text-base justify-start !p-0 text-sm font-bold leading-[1.2] no-underline\"\n                  >\n                    {matchSeriesMetadata?.primary?.label}\n                  </Button>\n                )}\n              </div>\n              {sidebarCategoriesMetadata?.guide?.label && (\n                <Link\n                  href={getLocalizedPath(sidebarCategoriesMetadata?.guide?.url, locale)}\n                  className=\"lg-desktop:text-base text-sm leading-[1.2] text-[#6D6D6F]\"\n                >\n                  {sidebarCategoriesMetadata?.guide?.label}\n                </Link>\n              )}\n            </div>\n          )}\n          <div\n            className=\"flex h-[426px] flex-col gap-4 overflow-y-auto\"\n            style={{\n              scrollbarWidth: 'none',\n              msOverflowStyle: 'none',\n            }}\n          >\n            {matchSeriesMetadata?.series?.map((seriesItem: any, seriesIndex: number) => (\n              <div key={`seriesItem-${seriesItem?.label || ''}-${seriesIndex}`}>\n                {seriesItem.label && (\n                  <Text\n                    html={seriesItem.label}\n                    as=\"p\"\n                    className=\"mb-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]\"\n                  />\n                )}\n                <div className=\"grid grid-cols-3 gap-4\">\n                  {!!matchSeriesMetadata?.banner && (\n                    <Link\n                      asChild={!matchSeriesMetadata?.banner?.href}\n                      href={getLocalizedPath(matchSeriesMetadata?.banner?.href, locale)}\n                    >\n                      <div className=\"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500\">\n                        <Picture\n                          source={matchSeriesMetadata?.banner?.imageUrl}\n                          className=\"laptop:h-[120px] h-[114px]\"\n                          imgClassName=\"object-cover h-full\"\n                        />\n                        <div className=\"absolute inset-x-0 bottom-0 p-4\">\n                          <Heading\n                            size={2}\n                            html={matchSeriesMetadata?.banner?.title || 'Buy in Guide'}\n                            className={cn('font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                          <Text\n                            html={matchSeriesMetadata?.banner?.desc || '20.000mAh'}\n                            className={cn('text-sm font-bold text-white', {\n                              'text-black': matchSeriesMetadata?.banner?.theme === 'dark',\n                            })}\n                          />\n                        </div>\n                      </div>\n                    </Link>\n                  )}\n                  {seriesItem.products?.map((product: any, index: number) => (\n                    <SeriesProductItem\n                      seriesLabel={matchSeriesMetadata?.label}\n                      key={`seriesProductItem-${seriesItem?.label || ''}-${seriesIndex}-${index}`}\n                      product={product}\n                      isCollection={matchSeriesMetadata?.isCollection}\n                    />\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </Container>\n    )\n  }\n)\n\nSidebarDropdown.displayName = 'SidebarDropdown'\n\n/**\n * \u7CFB\u5217\u4EA7\u54C1\u9879\u7EC4\u4EF6\n */\nexport const SeriesProductItem = ({\n  product,\n  isCollection,\n  position,\n  seriesLabel,\n}: {\n  product: any\n  isCollection?: boolean\n  position?: number\n  seriesLabel?: string\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const { buildProps, onSeriesProductClick } = useNavContext()\n  let productData = isCollection\n    ? product\n    : buildProps?.products?.find((item: Product) => item.handle === product.handle)\n  const variant =\n    productData?.variants?.find((item: ProductVariant) => item.sku === product.sku) || productData?.variants?.[0]\n\n  const listingLink = useMemo(() => {\n    return `${getLocalizedPath(`/products/${productData?.handle}`, locale)}?variant=${atobID(variant?.id as string)}`\n  }, [productData?.handle, variant?.id, locale])\n\n  const tags = useMemo(() => {\n    return productData?.tags\n      ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n      ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n      ?.slice?.(0, 2)\n  }, [productData?.tags])\n\n  if (!variant?.availableForSale) return null\n\n  return (\n    <Link\n      href={listingLink}\n      onClick={e => {\n        e.preventDefault()\n        window.open(listingLink, '_self')\n        onSeriesProductClick?.(productData, position || 0, seriesLabel)\n      }}\n      className=\"no-underline hover:text-current\"\n    >\n      <div className=\"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500\">\n        <div className=\"shrink-0\">\n          <img\n            src={`${variant?.image?.url || product?.images?.[0]?.url}&width=200`}\n            loading=\"lazy\"\n            alt={productData?.title || product?.name}\n            width={90}\n            height={90}\n            className=\"size-[96px] object-contain\"\n          />\n        </div>\n        <div className=\"relative\">\n          <div className=\"flex gap-1\">\n            {Array.isArray(tags) &&\n              tags?.map((tag: string, index: number) => (\n                <Text\n                  key={index}\n                  as=\"p\"\n                  html={tag}\n                  className=\"text-brand-0 mb-1 inline-block h-[24px] whitespace-nowrap rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-xs font-bold !leading-[22px]\"\n                />\n              ))}\n          </div>\n          <Text\n            className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n            html={product?.custom_name || variant?.metafields?.infos?.page_short_title || productData?.title}\n          />\n          {product?.desc && (\n            <Text\n              as=\"p\"\n              html={product?.desc}\n              className=\"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n            />\n          )}\n        </div>\n      </div>\n    </Link>\n  )\n}\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useCallback", "useEffect", "useMemo", "useRef", "useState", "Button", "Container", "Text", "Link", "Heading", "Picture", "cn", "atobID", "getLocalizedPath", "DownArrow", "useNavContext", "useAiuiContext", "SidebarDropdown", "sidebarCategoriesMetadata", "seriesMetadata", "buildProps", "onSidebarNavClick", "locale", "expandedSubcategory", "setExpandedSubcategory", "activeSubSubcategoryIndex", "setActiveSubSubcategoryIndex", "sidebarDropdownRef", "initExpandedSubcategory", "subcategories", "withSubSubCategoriesIndex", "item", "withoutSubSubCategoriesIndex", "expandedStates", "_", "index", "matchSeriesMetadata", "subCategory", "currentSeriesMetadata", "category", "activeSubSubcategory", "currentActiveSeriesMetadata", "handleSubcategoryOpen", "subcategoryItem", "prev", "i", "handleSubSubcategoryOpen", "subSubindex", "subItem", "hasSubSubCategory", "isExpanded", "subSubItem", "seriesItem", "seriesIndex", "product", "SeriesProductItem", "isCollection", "position", "seriesLabel", "onSeriesProductClick", "productData", "variant", "listingLink", "tags", "tag"]
 }

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

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{useEffect as s,useRef as u,useState as l}from"react";import{Link as g}from"../../components/index.js";import{debounce as f}from"es-toolkit";const D=({supportsMetadata:d,currentNavItemRef:t})=>{const n=u(null),[a,r]=l(null),[c,p]=l(0);s(()=>{if(n?.current){const e=n?.current?.getBoundingClientRect();p(e.height)}},[n]);const o=f(()=>{if(t){const e=t.getBoundingClientRect();r(e)}},500);return s(()=>(o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}),[o]),s(()=>{if(t){const e=t.getBoundingClientRect();r(e)}},[t]),i("div",{className:"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${a?.right}px)`,height:c},children:i("div",{ref:n,className:"p-4",children:d?.map(e=>i("div",{className:"py-2",children:i(g,{href:e.url,className:"text-sm font-bold leading-[1.4] no-underline",children:e.label})},e.id))})})};export{D as SupportsDropdown};
+import{jsx as i}from"react/jsx-runtime";import{useEffect as s,useRef as g,useState as l}from"react";import{Link as m}from"../../components/index.js";import{debounce as f}from"es-toolkit";import{useAiuiContext as h}from"../AiuiProvider/index.js";import{getLocalizedPath as v}from"../../helpers/utils.js";const E=({supportsMetadata:d,currentNavItemRef:t})=>{const{locale:a="us"}=h(),n=g(null),[c,r]=l(null),[u,p]=l(0);s(()=>{if(n?.current){const e=n?.current?.getBoundingClientRect();p(e.height)}},[n]);const o=f(()=>{if(t){const e=t.getBoundingClientRect();r(e)}},500);return s(()=>(o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}),[o]),s(()=>{if(t){const e=t.getBoundingClientRect();r(e)}},[t]),i("div",{className:"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500",style:{right:`calc(100% - ${c?.right}px)`,height:u},children:i("div",{ref:n,className:"p-4",children:d?.map(e=>i("div",{className:"py-2",children:i(m,{href:v(e.url,a),className:"text-sm font-bold leading-[1.4] no-underline",children:e.label})},e.id))})})};export{E as SupportsDropdown};
 //# sourceMappingURL=SupportsDropdown.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/SupportsDropdown.tsx"],
-  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { Link } from '../../components/index.js'\nimport { debounce } from 'es-toolkit'\n\n/**\n * supports\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n * @param currentNavItemRef \u5F53\u524D\u5BFC\u822A\u9879\n */\nexport const SupportsDropdown = ({\n  supportsMetadata,\n  currentNavItemRef,\n}: {\n  supportsMetadata: any\n  currentNavItemRef: HTMLDivElement\n}) => {\n  const supportsDropdownRef = useRef<HTMLDivElement>(null)\n  const [navItemReact, setNavItemReact] = useState<DOMRect | null>(null)\n  const [supportsDropdownHeight, setSupportsDropdownHeight] = useState(0)\n\n  useEffect(() => {\n    if (supportsDropdownRef?.current) {\n      const rect = supportsDropdownRef?.current?.getBoundingClientRect()\n      setSupportsDropdownHeight(rect.height)\n    }\n  }, [supportsDropdownRef])\n\n  const debouncedHandleResize = debounce(() => {\n    if (currentNavItemRef) {\n      const rect = currentNavItemRef.getBoundingClientRect()\n      setNavItemReact(rect)\n    }\n  }, 500)\n\n  useEffect(() => {\n    debouncedHandleResize()\n    window.addEventListener('resize', debouncedHandleResize)\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize)\n    }\n  }, [debouncedHandleResize])\n\n  useEffect(() => {\n    if (currentNavItemRef) {\n      const rect = currentNavItemRef.getBoundingClientRect()\n      setNavItemReact(rect)\n    }\n  }, [currentNavItemRef])\n\n  return (\n    <div\n      className=\"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500\"\n      style={{ right: `calc(100% - ${navItemReact?.right}px)`, height: supportsDropdownHeight }}\n    >\n      <div ref={supportsDropdownRef} className=\"p-4\">\n        {supportsMetadata?.map((supportItem: any) => (\n          <div key={supportItem.id} className=\"py-2\">\n            <Link href={supportItem.url} className=\"text-sm font-bold leading-[1.4] no-underline\">\n              {supportItem.label}\n            </Link>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "AAyDY,cAAAA,MAAA,oBAzDZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,QAAAC,MAAY,4BACrB,OAAS,YAAAC,MAAgB,aAOlB,MAAMC,EAAmB,CAAC,CAC/B,iBAAAC,EACA,kBAAAC,CACF,IAGM,CACJ,MAAMC,EAAsBP,EAAuB,IAAI,EACjD,CAACQ,EAAcC,CAAe,EAAIR,EAAyB,IAAI,EAC/D,CAACS,EAAwBC,CAAyB,EAAIV,EAAS,CAAC,EAEtEF,EAAU,IAAM,CACd,GAAIQ,GAAqB,QAAS,CAChC,MAAMK,EAAOL,GAAqB,SAAS,sBAAsB,EACjEI,EAA0BC,EAAK,MAAM,CACvC,CACF,EAAG,CAACL,CAAmB,CAAC,EAExB,MAAMM,EAAwBV,EAAS,IAAM,CAC3C,GAAIG,EAAmB,CACrB,MAAMM,EAAON,EAAkB,sBAAsB,EACrDG,EAAgBG,CAAI,CACtB,CACF,EAAG,GAAG,EAEN,OAAAb,EAAU,KACRc,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1Bd,EAAU,IAAM,CACd,GAAIO,EAAmB,CACrB,MAAMM,EAAON,EAAkB,sBAAsB,EACrDG,EAAgBG,CAAI,CACtB,CACF,EAAG,CAACN,CAAiB,CAAC,EAGpBR,EAAC,OACC,UAAU,6EACV,MAAO,CAAE,MAAO,eAAeU,GAAc,KAAK,MAAO,OAAQE,CAAuB,EAExF,SAAAZ,EAAC,OAAI,IAAKS,EAAqB,UAAU,MACtC,SAAAF,GAAkB,IAAKS,GACtBhB,EAAC,OAAyB,UAAU,OAClC,SAAAA,EAACI,EAAA,CAAK,KAAMY,EAAY,IAAK,UAAU,+CACpC,SAAAA,EAAY,MACf,GAHQA,EAAY,EAItB,CACD,EACH,EACF,CAEJ",
-  "names": ["jsx", "useEffect", "useRef", "useState", "Link", "debounce", "SupportsDropdown", "supportsMetadata", "currentNavItemRef", "supportsDropdownRef", "navItemReact", "setNavItemReact", "supportsDropdownHeight", "setSupportsDropdownHeight", "rect", "debouncedHandleResize", "supportItem"]
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { Link } from '../../components/index.js'\nimport { debounce } from 'es-toolkit'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\n\n/**\n * supports\u4E0B\u62C9\n * @param categoriesItem \u5206\u7C7B\u9879\n * @param currentNavItemRef \u5F53\u524D\u5BFC\u822A\u9879\n */\nexport const SupportsDropdown = ({\n  supportsMetadata,\n  currentNavItemRef,\n}: {\n  supportsMetadata: any\n  currentNavItemRef: HTMLDivElement\n}) => {\n  const { locale = 'us' } = useAiuiContext()\n  const supportsDropdownRef = useRef<HTMLDivElement>(null)\n  const [navItemReact, setNavItemReact] = useState<DOMRect | null>(null)\n  const [supportsDropdownHeight, setSupportsDropdownHeight] = useState(0)\n\n  useEffect(() => {\n    if (supportsDropdownRef?.current) {\n      const rect = supportsDropdownRef?.current?.getBoundingClientRect()\n      setSupportsDropdownHeight(rect.height)\n    }\n  }, [supportsDropdownRef])\n\n  const debouncedHandleResize = debounce(() => {\n    if (currentNavItemRef) {\n      const rect = currentNavItemRef.getBoundingClientRect()\n      setNavItemReact(rect)\n    }\n  }, 500)\n\n  useEffect(() => {\n    debouncedHandleResize()\n    window.addEventListener('resize', debouncedHandleResize)\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize)\n    }\n  }, [debouncedHandleResize])\n\n  useEffect(() => {\n    if (currentNavItemRef) {\n      const rect = currentNavItemRef.getBoundingClientRect()\n      setNavItemReact(rect)\n    }\n  }, [currentNavItemRef])\n\n  return (\n    <div\n      className=\"absolute top-0 h-full overflow-hidden bg-white transition-all duration-500\"\n      style={{ right: `calc(100% - ${navItemReact?.right}px)`, height: supportsDropdownHeight }}\n    >\n      <div ref={supportsDropdownRef} className=\"p-4\">\n        {supportsMetadata?.map((supportItem: any) => (\n          <div key={supportItem.id} className=\"py-2\">\n            <Link\n              href={getLocalizedPath(supportItem.url, locale)}\n              className=\"text-sm font-bold leading-[1.4] no-underline\"\n            >\n              {supportItem.label}\n            </Link>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": "AA4DY,cAAAA,MAAA,oBA5DZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,QAAAC,MAAY,4BACrB,OAAS,YAAAC,MAAgB,aACzB,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,oBAAAC,MAAwB,yBAO1B,MAAMC,EAAmB,CAAC,CAC/B,iBAAAC,EACA,kBAAAC,CACF,IAGM,CACJ,KAAM,CAAE,OAAAC,EAAS,IAAK,EAAIL,EAAe,EACnCM,EAAsBV,EAAuB,IAAI,EACjD,CAACW,EAAcC,CAAe,EAAIX,EAAyB,IAAI,EAC/D,CAACY,EAAwBC,CAAyB,EAAIb,EAAS,CAAC,EAEtEF,EAAU,IAAM,CACd,GAAIW,GAAqB,QAAS,CAChC,MAAMK,EAAOL,GAAqB,SAAS,sBAAsB,EACjEI,EAA0BC,EAAK,MAAM,CACvC,CACF,EAAG,CAACL,CAAmB,CAAC,EAExB,MAAMM,EAAwBb,EAAS,IAAM,CAC3C,GAAIK,EAAmB,CACrB,MAAMO,EAAOP,EAAkB,sBAAsB,EACrDI,EAAgBG,CAAI,CACtB,CACF,EAAG,GAAG,EAEN,OAAAhB,EAAU,KACRiB,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1BjB,EAAU,IAAM,CACd,GAAIS,EAAmB,CACrB,MAAMO,EAAOP,EAAkB,sBAAsB,EACrDI,EAAgBG,CAAI,CACtB,CACF,EAAG,CAACP,CAAiB,CAAC,EAGpBV,EAAC,OACC,UAAU,6EACV,MAAO,CAAE,MAAO,eAAea,GAAc,KAAK,MAAO,OAAQE,CAAuB,EAExF,SAAAf,EAAC,OAAI,IAAKY,EAAqB,UAAU,MACtC,SAAAH,GAAkB,IAAKU,GACtBnB,EAAC,OAAyB,UAAU,OAClC,SAAAA,EAACI,EAAA,CACC,KAAMG,EAAiBY,EAAY,IAAKR,CAAM,EAC9C,UAAU,+CAET,SAAAQ,EAAY,MACf,GANQA,EAAY,EAOtB,CACD,EACH,EACF,CAEJ",
+  "names": ["jsx", "useEffect", "useRef", "useState", "Link", "debounce", "useAiuiContext", "getLocalizedPath", "SupportsDropdown", "supportsMetadata", "currentNavItemRef", "locale", "supportsDropdownRef", "navItemReact", "setNavItemReact", "supportsDropdownHeight", "setSupportsDropdownHeight", "rect", "debouncedHandleResize", "supportItem"]
 }

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as Ne,jsx as e,jsxs as n}from"react/jsx-runtime";import{forwardRef as Q,useCallback as V,useEffect as I,useImperativeHandle as we,useMemo as w,useRef as W,useState as E}from"react";import{Picture as ie,Text as N,Button as X,Container as le,BrandStrip as Me}from"../../components/index.js";import{withLayout as Se}from"../../shared/Styles.js";import{cn as P}from"../../helpers/utils.js";import Pe,{useNavContext as q}from"./NavProvider.js";import{HeaderNavigationMenu as z,HeaderNavigationBlockType as D,HeaderNavigationActionBlockType as k}from"./types.js";import De from"jump.js";import{useGSAP as ae}from"@gsap/react";import{gsap as ne}from"gsap";import{WithSidebar as se,WithSupports as ce,WithMulticol as ue,WithGroupCategory as me,WithResource as de}from"./withCategory.js";import{Menu as Ee,Close as pe,User as Te,LeftArrow as He,DownArrow as fe,Polygon as Le}from"./icons/index.js";import Be from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as Re}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as Ie}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as ze}from"./SidebarDropdown.js";import{MulticolDropdown as Ae}from"./MulticolDropdown.js";import{SupportsDropdown as Oe}from"./SupportsDropdown.js";import{MobileSidebarMenu as je}from"./MobileSidebarMenu.js";import{MobileSupportMenu as We}from"./MobileSupportMenu.js";import{MobileMulticolMenu as _e}from"./MobileMulticolMenu.js";import{MenuItem as oe}from"./MobileMenuComponents.js";const be=Q((a,l)=>{const{data:{header:s}={},buildProps:c,event:f,profile:o,theme:v="light",isTop:m=!1,searchResult:T,onSearch:r,isSearching:b,keywords:h,onPrimaryNavClick:d,onSeriesProductClick:C,onSidebarNavClick:_,headerId:H,cartCount:L,menuData:B}=a,[M,R]=E(!1),[$,K]=E(!1),i=W(null),S=W(null),j=()=>{const g=document?.querySelector("body")?.offsetWidth||0;K(g<=1440)};I(()=>(j(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}),[]),we(l,()=>S.current),I(()=>{S.current&&m&&De(S.current,{duration:0,offset:S.current?.getBoundingClientRect()?.bottom||0})},[m]),I(()=>{f&&(f.search=()=>R(!0))},[f]),ae(()=>{i?.current&&M&&ne.fromTo(i.current,{height:0},{height:"auto",duration:.3})},[M]),I(()=>{document.documentElement.style.overflow=M?"hidden":"auto"},[M]);const A=w(()=>s?.bar?.actions?.find(g=>g?.blockType===k.Search)?.searchBar?.[0]||{},[s]);return e(Pe,{buildProps:c,profile:o,isMobile:$,event:f,payloadData:s,onSidebarNavClick:_,onSeriesProductClick:C,cartCount:L,children:e("header",{id:H||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:S,children:n("div",{className:P("hover:bg-white hover:text-black",v==="light"?"text-black":"text-white",{}),children:[e(ve,{data:s,className:"desktop:block hidden !bg-white",theme:v,onPrimaryNavClick:d}),e(ge,{menuData:B,data:s,className:"desktop:hidden block !bg-white",onPrimaryNavClick:d}),M&&n("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:i,className:P("overflow-y-auto",{}),children:e(Be,{data:A,keywords:h,isSearching:b,searchResult:T,onSearch:g=>{r?.(g)},onClose:()=>{r?.(),R(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>R(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:g=>{(g.key==="Enter"||g.key===" "||g.key==="Escape")&&(g.preventDefault(),R(!1))}})]})]})})})}),ve=Q((a,l)=>{const{data:s,onNavItemClick:c,className:f,theme:o,onPrimaryNavClick:v}=a,{event:m,profile:T}=q(),[r,b]=E(!1),h=w(()=>me(s?.categories?.filter(t=>t?.pcShow)),[s]),[d,C]=E(null),[_,H]=E([]),L=W(null),[B,M]=E(!1),R=W(null),$=W(null),K=W(h.map(t=>Array(t?.length||0).fill(null)));I(()=>{h?.length&&H(h?.map((t,u)=>t?.map((p,x)=>({groupIndex:u,index:x,open:!1}))))},[h]);const i=w(()=>{let t=null;for(const u of _){for(const p of u)if(p.open){t=p;break}if(t)break}return t},[_]);I(()=>{document.documentElement.style.overflow=i?.open||B?"hidden":"auto"},[i?.open,B]);const S=(t,u,p)=>{M(!1);const x=h[u][p];if(x?.components?.[0]?.blockType===D.Links)x?.components?.[0]?.url&&window.open(x?.components?.[0]?.url);else{const G=h?.flat()||[],O=G?.findIndex(te=>te?.id===h[u][p]?.id);t.stopPropagation(),c?.(),v?.(G[O],O),C(x),H(te=>te.map(xe=>xe.map(J=>J.groupIndex===u&&J.index===p?{...J,open:!J.open}:{...J,open:!1})))}},j=(t,u,p)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),S(t,u,p)):t.key==="Escape"&&i?.groupIndex===u&&i?.index===p&&(t.preventDefault(),A())},A=()=>{H(t=>t.map(u=>u.map(p=>({...p,open:!1}))))},g=w(()=>{if(d)return d?.components?.[0]?.blockType},[d]),y=se(ze,d),Y=de(Re,d),F=ue(Ae,d),ke=ce(Oe,{categoriesItem:d,currentNavItemRef:K.current?.[i?.groupIndex||0]?.[i?.index||0]}),Ce=w(()=>{switch(g){case D.Sidebar:return e(y,{});case D.Resource:return e(Y,{});case D.Supports:return e(ke,{});case D.Multicol:return e(F,{});default:return null}},[g,d]),Z=w(()=>s?.bar?.actions?.filter(t=>t?.pcShow),[s]),U=w(()=>Z?.find(t=>t?.blockType===k.Profile),[Z]),ee=V(()=>{M(t=>!t)},[]);return I(()=>{if(L?.current){const t=L.current;return t.addEventListener("click",ee),()=>{t.removeEventListener("click",ee)}}},[ee]),ae(()=>{i?.open&&ne.fromTo($?.current,{height:0},{height:"auto"})},[i?.open]),n(le,{className:P("relative h-[96px]",f),children:[n("div",{ref:R,onClick:A,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(he,{}),e(re,{ref:L,actions:Z,activeStatus:B})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:h?.map((t,u)=>e("div",{className:"flex gap-3",children:t?.map((p,x)=>{const G=i?.groupIndex===u&&i?.index===x;return e("div",{ref:O=>{K.current[u][x]=O},className:"group",children:n("div",{className:"relative",children:[n("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:O=>S(O,u,x),onKeyDown:O=>j(O,u,x),"aria-expanded":G,"aria-haspopup":"true","aria-label":p.text,children:[e(N,{html:p.text,className:"text-sm font-bold leading-[1.4]"}),e(fe,{className:P("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":i?.groupIndex===u&&i?.index===x,"opacity-100":r&&i?.groupIndex===u&&i?.index===x,invisible:!p?.components?.length||p?.components?.[0]?.blockType===D.Links})})]}),e("div",{className:P("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":G},o==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},p.id)})},`groupCategory-${u}`))})]}),n("div",{role:"menu","aria-hidden":!(i?.open&&d),className:P("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:!(i?.open&&d)}),onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),style:{height:`calc(100dvh - ${R?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:$,className:P("relative z-50",{"overflow-hidden":g!==D.Supports}),children:Ce}),e("div",{className:"flex-1 bg-transparent",onClick:A,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),A())}})]}),B&&n("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${L?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:T?.email?n(Ne,{children:[e(N,{html:T?.nick_name||U?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:U?.profiles?.map(t=>e(oe,{className:"py-2",label:t?.title,href:t?.url},t.id))})]}):n(Ne,{children:[e(Le,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(N,{html:U?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:U?.benefits?.map(t=>n("div",{className:"flex items-center gap-[6px]",children:[e(ie,{source:t.benefitIcon?.url,className:"size-4",alt:t.benefit,width:16,height:16}),e(N,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),n("div",{className:"mt-4 flex items-center gap-2",children:[e(X,{variant:"secondary",size:"lg",onClick:()=>m?.join?.(),children:e(N,{html:U?.primaryButton||"Join Now",className:"font-bold"})}),e(X,{variant:"primary",size:"lg",onClick:()=>m?.login?.(),children:e(N,{html:U?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>M(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),M(!1))}})]})]})}),ge=Q(({data:a,menuData:l,className:s,onPrimaryNavClick:c},f)=>{const o=w(()=>me(a?.categories?.filter(y=>y?.mobileShow)),[a]),{currentMenu:v,setCurrentMenu:m,subSubCategory:T}=q(),[r,b]=E(!1),[h,d]=E(0),[C,_]=E(null),H=W(null);I(()=>{if(H?.current&&r){const y=H?.current?.getBoundingClientRect();d(window?.innerHeight-(y?.bottom||0))}},[r]),ae(()=>{ne.fromTo(H.current,{height:0},{height:h,duration:.3})},[h]),I(()=>{document.documentElement.style.overflow=r?"hidden":"auto"},[r]);const L=w(()=>C?.components?.[0]?.blockType,[C]),B=ce(We,{categoriesItem:C}),M=se(je,C),R=de(Ie,C),$=ue(_e,C),K=w(()=>{switch(L){case D.Sidebar:return e(M,{});case D.Resource:return e(R,{});case D.Supports:return e(B,{});case D.Multicol:return e($,{});default:return null}},[L,C,B]),i=V(()=>{b(!1),d(0),m&&m(z.Primary)},[b,d,m]),S=w(()=>a?.bar?.actions?.filter(y=>y?.mobileShow&&y?.blockType!==k.Profile),[a]),j=w(()=>a?.bar?.actions?.find(y=>y?.mobileShow&&y?.blockType===k.Profile)||{},[a]),A=w(()=>{switch(v){case z.Primary:return e(Fe,{actions:S,menuOpen:r,onMenuOpenClose:()=>{b(!1),d(0)},onMenuOpenClick:()=>b(!0)});case z.Secondary:return e(ye,{title:C?.text,onMenuOpenClose:i,onMenuBackClick:()=>m?.(z.Primary)});case z.Third:return e(ye,{title:T?.label,onMenuOpenClose:i,onMenuBackClick:()=>m?.(z.Secondary)});default:return null}},[r,v,m,C,S,T,i]),g=V((y,Y)=>{const F=Array.isArray(o)?Array.isArray(o[y])?o[y][Y]:{}:{};_(F),F?.components?.[0]?.blockType===D.Links?F?.components?.[0]?.url&&window.open(F?.components?.[0]?.url):m?.(z.Secondary)},[o,m]);return n(le,{className:P("relative h-[52px]",s),children:[A,r&&n("nav",{ref:H,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:h},role:"navigation","aria-label":"Mobile navigation menu",children:[v===z.Primary&&l?e("div",{className:"pt-4",children:e(Me,{data:l})}):null,v===z.Primary?e($e,{categories:o,onPrimaryMenuClick:g,onPrimaryNavClick:c,profileAction:j}):K]})]})}),$e=({categories:a,onPrimaryMenuClick:l,profileAction:s,onPrimaryNavClick:c})=>n("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((f,o)=>n("div",{className:"",children:[e("div",{className:P("my-2 h-px w-full bg-[#E5E5E7]")}),f?.map((v,m)=>e(oe,{label:v.text,onClick:()=>{const r=(a?.flat()||[])?.findIndex(b=>b?.id===a[o][m]?.id);l(o,m),c?.(v,r)},icon:v.components?.[0]?.icon},v.id))]},`groupCategory-${o}`))}),e(Ke,{profileAction:s})]}),Ke=({profileAction:a})=>{const[l,s]=E(!1),{profile:c,event:f}=q();return n("div",{className:P("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":l}),children:[n("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>s(!l),"aria-expanded":l,"aria-label":c?.nick_name||a?.welcome,children:[n("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Te,{"aria-hidden":"true"})}),e(N,{html:c?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(fe,{"aria-hidden":"true",className:P("laptop:size-4 size-5",{"rotate-180":l})})]}),c?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(o=>e(oe,{label:o?.title,href:o?.url},o.id))}),l&&!c?.email&&n("div",{className:"mt-4",children:[e(N,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(o=>n("div",{className:"flex items-center gap-[6px]",children:[e(ie,{source:o.benefitIcon?.url,className:"size-4",alt:o.benefit,width:16,height:16}),e(N,{html:o.benefit,className:"text-sm font-bold leading-[1.4]"})]},o.id))})]}),!c?.email&&n("div",{className:"mt-4 flex items-center gap-3",children:[e(X,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>f?.join?.(),children:e(N,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(X,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>f?.login?.(),children:e(N,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Fe=({menuOpen:a,onMenuOpenClose:l,onMenuOpenClick:s,actions:c})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(he,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(re,{actions:c}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu","aria-expanded":"true",children:e(pe,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Ee,{className:"size-5","aria-hidden":"true"})})]})]}),he=()=>{const{payloadData:a,isMobile:l}=q();return e("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:l?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},re=Q(({actions:a,activeStatus:l=!1},s)=>{const{event:c,cartCount:f}=q(),[o,v]=E(null),m=r=>{switch(r){case k.Search:return"Search";case k.Cart:return`Shopping cart${f>0?` (${f} items)`:""}`;case k.Profile:return"User profile";case k.Livestream:return"Livestream";default:return"Action"}},T=V((r,b)=>{switch(v(b),r?.blockType){case k.Search:c?.search?.();break;case k.Cart:c?.cart?.();break;case k.Profile:c?.profile?.();break;case k.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((r,b)=>n("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:r.blockType===k.Profile?s:null,onClick:()=>T(r,b),"aria-label":m(r.blockType),"aria-pressed":l&&o===b,children:[e(N,{html:r.icon,className:P("size-5",{"text-brand-0":l&&o===b}),"aria-hidden":"true"}),r.blockType===k.Cart&&f>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(N,{html:f?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},r.id))})}),ye=({title:a,onMenuOpenClose:l,onMenuBackClick:s})=>n("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Back to previous menu",children:e(He,{className:"size-5","aria-hidden":"true"})}),e(N,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu",children:e(pe,{className:"size-5","aria-hidden":"true"})})]});ge.displayName="MobileNavigation",re.displayName="Actions",be.displayName="HeaderNavigation",ve.displayName="DesktopNavigation";var pt=Se(be);export{pt as default};
+"use client";import{Fragment as xe,jsx as e,jsxs as n}from"react/jsx-runtime";import{forwardRef as Q,useCallback as V,useEffect as K,useImperativeHandle as De,useMemo as x,useRef as O,useState as P}from"react";import{Picture as le,Text as N,Button as X,Container as se,BrandStrip as Ee}from"../../components/index.js";import{withLayout as Te}from"../../shared/Styles.js";import{cn as w,getLocalizedPath as ce}from"../../helpers/utils.js";import He,{useNavContext as q}from"./NavProvider.js";import{HeaderNavigationMenu as B,HeaderNavigationBlockType as M,HeaderNavigationActionBlockType as k}from"./types.js";import Le from"jump.js";import{useGSAP as ae}from"@gsap/react";import{gsap as ne}from"gsap";import{WithSidebar as ue,WithSupports as me,WithMulticol as de,WithGroupCategory as pe,WithResource as fe}from"./withCategory.js";import{Menu as Be,Close as be,User as Re,LeftArrow as ze,DownArrow as ve,Polygon as Ie}from"./icons/index.js";import Ae from"../NavigationSearch/index.js";import{ResourceSidebarDropdown as Oe}from"./ResourceSidebarDropdown.js";import{MobileResourceSidebarMenu as je}from"./MobileResourceSidebarMenu.js";import{SidebarDropdown as We}from"./SidebarDropdown.js";import{useScrollLock as oe}from"./useScrollLock.js";import{MulticolDropdown as _e}from"./MulticolDropdown.js";import{SupportsDropdown as $e}from"./SupportsDropdown.js";import{MobileSidebarMenu as Ke}from"./MobileSidebarMenu.js";import{MobileSupportMenu as Fe}from"./MobileSupportMenu.js";import{MobileMulticolMenu as Ue}from"./MobileMulticolMenu.js";import{MenuItem as re}from"./MobileMenuComponents.js";import{useAiuiContext as ge}from"../AiuiProvider/index.js";const he=Q((a,l)=>{const{data:{header:s}={},buildProps:c,event:b,profile:p,theme:o="light",isTop:d=!1,searchResult:D,onSearch:i,isSearching:v,keywords:A,onPrimaryNavClick:h,onSeriesProductClick:u,onSidebarNavClick:F,headerId:H,cartCount:R,menuData:L}=a,[E,S]=P(!1),[j,W]=P(!1),T=O(null),r=O(null),z=()=>{const g=document?.querySelector("body")?.offsetWidth||0;W(g<=1440)};K(()=>(z(),window.addEventListener("resize",z),()=>{window.removeEventListener("resize",z)}),[]),De(l,()=>r.current),K(()=>{r.current&&d&&Le(r.current,{duration:0,offset:r.current?.getBoundingClientRect()?.bottom||0})},[d]),K(()=>{b&&(b.search=()=>S(!0))},[b]),ae(()=>{T?.current&&E&&ne.fromTo(T.current,{height:0},{height:"auto",duration:.3})},[E]),oe(E);const U=x(()=>s?.bar?.actions?.find(g=>g?.blockType===k.Search)?.searchBar?.[0]||{},[s]);return e(He,{buildProps:c,profile:p,isMobile:j,event:b,payloadData:s,onSidebarNavClick:F,onSeriesProductClick:u,cartCount:R,children:e("header",{id:H||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:r,children:n("div",{className:w("hover:bg-white hover:text-black",o==="light"?"text-black":"text-white",{}),children:[e(ye,{data:s,className:"desktop:block hidden !bg-white",theme:o,onPrimaryNavClick:h}),e(Ne,{menuData:L,data:s,className:"desktop:hidden block !bg-white",onPrimaryNavClick:h}),E&&n("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${r?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[e("div",{ref:T,className:w("overflow-y-auto",{}),children:e(Ae,{data:U,keywords:A,isSearching:v,searchResult:D,onSearch:g=>{i?.(g)},onClose:()=>{i?.(),S(!1)}})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:g=>{(g.key==="Enter"||g.key===" "||g.key==="Escape")&&(g.preventDefault(),S(!1))}})]})]})})})}),ye=Q((a,l)=>{const{data:s,onNavItemClick:c,className:b,theme:p,onPrimaryNavClick:o}=a,{event:d,profile:D}=q(),[i,v]=P(!1),{locale:A="us"}=ge(),h=x(()=>pe(s?.categories?.filter(t=>t?.pcShow)),[s]),[u,F]=P(null),[H,R]=P([]),L=O(null),[E,S]=P(!1),j=O(null),W=O(null),T=O(h.map(t=>Array(t?.length||0).fill(null)));K(()=>{h?.length&&R(h?.map((t,m)=>t?.map((f,C)=>({groupIndex:m,index:C,open:!1}))))},[h]);const r=x(()=>{let t=null;for(const m of H){for(const f of m)if(f.open){t=f;break}if(t)break}return t},[H]);oe(!!r?.open||E);const z=(t,m,f)=>{S(!1);const C=h[m][f];if(C?.components?.[0]?.blockType===M.Links)C?.components?.[0]?.url&&window.open(C?.components?.[0]?.url);else{const G=h?.flat()||[],I=G?.findIndex(te=>te?.id===h[m][f]?.id);t.stopPropagation(),c?.(),o?.(G[I],I),F(C),R(te=>te.map(Pe=>Pe.map(J=>J.groupIndex===m&&J.index===f?{...J,open:!J.open}:{...J,open:!1})))}},U=(t,m,f)=>{t.key==="Enter"||t.key===" "?(t.preventDefault(),z(t,m,f)):t.key==="Escape"&&r?.groupIndex===m&&r?.index===f&&(t.preventDefault(),g())},g=()=>{R(t=>t.map(m=>m.map(f=>({...f,open:!1}))))},y=x(()=>{if(u)return u?.components?.[0]?.blockType},[u]),Y=ue(We,u),_=fe(Oe,u),we=de(_e,u),Me=me($e,{categoriesItem:u,currentNavItemRef:T.current?.[r?.groupIndex||0]?.[r?.index||0]}),Se=x(()=>{switch(y){case M.Sidebar:return e(Y,{});case M.Resource:return e(_,{});case M.Supports:return e(Me,{});case M.Multicol:return e(we,{});default:return null}},[y,u]),Z=x(()=>s?.bar?.actions?.filter(t=>t?.pcShow),[s]),$=x(()=>Z?.find(t=>t?.blockType===k.Profile),[Z]),ee=V(()=>{S(t=>!t)},[]);return K(()=>{if(L?.current){const t=L.current;return t.addEventListener("click",ee),()=>{t.removeEventListener("click",ee)}}},[ee]),ae(()=>{r?.open&&ne.fromTo(W?.current,{height:0},{height:"auto"})},[r?.open]),n(se,{className:w("relative h-[96px]",b),children:[n("div",{ref:j,onClick:g,className:"flex h-full flex-col justify-end gap-4",children:[n("div",{className:"flex items-center justify-between",children:[e(ke,{}),e(ie,{ref:L,actions:Z,activeStatus:E})]}),e("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:h?.map((t,m)=>e("div",{className:"flex gap-3",children:t?.map((f,C)=>{const G=r?.groupIndex===m&&r?.index===C;return e("div",{ref:I=>{T.current[m][C]=I},className:"group",children:n("div",{className:"relative",children:[n("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:I=>z(I,m,C),onKeyDown:I=>U(I,m,C),"aria-expanded":G,"aria-haspopup":"true","aria-label":f.text,children:[e(N,{html:f.text,className:"text-sm font-bold leading-[1.4]"}),e(ve,{className:w("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":r?.groupIndex===m&&r?.index===C,"opacity-100":i&&r?.groupIndex===m&&r?.index===C,invisible:!f?.components?.length||f?.components?.[0]?.blockType===M.Links})})]}),e("div",{className:w("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":G},p==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},f.id)})},`groupCategory-${m}`))})]}),n("div",{role:"menu","aria-hidden":!(r?.open&&u),className:w("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:!(r?.open&&u)}),onMouseEnter:()=>v(!0),onMouseLeave:()=>v(!1),style:{height:`calc(100dvh - ${j?.current?.getBoundingClientRect()?.bottom}px)`},children:[e("div",{ref:W,className:w("relative z-50",{"overflow-hidden":y!==M.Supports}),children:Se}),e("div",{className:"flex-1 bg-transparent",onClick:g,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),g())}})]}),E&&n("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[e("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${L?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:D?.email?n(xe,{children:[e(N,{html:D?.nick_name||$?.welcome,className:"text-sm font-bold"}),e("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),e("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:$?.profiles?.map(t=>e(re,{className:"py-2",label:t?.title,href:ce(t?.url,A)},t.id))})]}):n(xe,{children:[e(Ie,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),e(N,{html:$?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:$?.benefits?.map(t=>n("div",{className:"flex items-center gap-[6px]",children:[e(le,{source:t.benefitIcon?.url,className:"size-4",alt:t.benefit,width:16,height:16}),e(N,{html:t.benefit,className:"text-sm font-bold leading-[1.4]"})]},t.id))}),n("div",{className:"mt-4 flex items-center gap-2",children:[e(X,{variant:"secondary",size:"lg",onClick:()=>d?.join?.(),children:e(N,{html:$?.primaryButton||"Join Now",className:"font-bold"})}),e(X,{variant:"primary",size:"lg",onClick:()=>d?.login?.(),children:e(N,{html:$?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),e("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:t=>{(t.key==="Enter"||t.key===" "||t.key==="Escape")&&(t.preventDefault(),S(!1))}})]})]})}),Ne=Q(({data:a,menuData:l,className:s,onPrimaryNavClick:c},b)=>{const p=x(()=>pe(a?.categories?.filter(y=>y?.mobileShow)),[a]),{currentMenu:o,setCurrentMenu:d,subSubCategory:D}=q(),[i,v]=P(!1),[A,h]=P(0),[u,F]=P(null),H=O(null);K(()=>{if(H?.current&&i){const y=H?.current?.getBoundingClientRect();h(window?.innerHeight-(y?.bottom||0))}},[i]),ae(()=>{ne.fromTo(H.current,{height:0},{height:A,duration:.3})},[A]),oe(i);const R=x(()=>u?.components?.[0]?.blockType,[u]),L=me(Fe,{categoriesItem:u}),E=ue(Ke,u),S=fe(je,u),j=de(Ue,u),W=x(()=>{switch(R){case M.Sidebar:return e(E,{});case M.Resource:return e(S,{});case M.Supports:return e(L,{});case M.Multicol:return e(j,{});default:return null}},[R,u,L]),T=V(()=>{v(!1),h(0),d&&d(B.Primary)},[v,h,d]),r=x(()=>a?.bar?.actions?.filter(y=>y?.mobileShow&&y?.blockType!==k.Profile),[a]),z=x(()=>a?.bar?.actions?.find(y=>y?.mobileShow&&y?.blockType===k.Profile)||{},[a]),U=x(()=>{switch(o){case B.Primary:return e(qe,{actions:r,menuOpen:i,onMenuOpenClose:()=>{v(!1),h(0)},onMenuOpenClick:()=>v(!0)});case B.Secondary:return e(Ce,{title:u?.text,onMenuOpenClose:T,onMenuBackClick:()=>d?.(B.Primary)});case B.Third:return e(Ce,{title:D?.label,onMenuOpenClose:T,onMenuBackClick:()=>d?.(B.Secondary)});default:return null}},[i,o,d,u,r,D,T]),g=V((y,Y)=>{const _=Array.isArray(p)?Array.isArray(p[y])?p[y][Y]:{}:{};F(_),_?.components?.[0]?.blockType===M.Links?_?.components?.[0]?.url&&window.open(_?.components?.[0]?.url):d?.(B.Secondary)},[p,d]);return n(se,{className:w("relative h-[52px]",s),children:[U,i&&n("nav",{ref:H,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:A},role:"navigation","aria-label":"Mobile navigation menu",children:[o===B.Primary&&l?e("div",{className:"pt-4",children:e(Ee,{data:l})}):null,o===B.Primary?e(Ge,{categories:p,onPrimaryMenuClick:g,onPrimaryNavClick:c,profileAction:z}):W]})]})}),Ge=({categories:a,onPrimaryMenuClick:l,profileAction:s,onPrimaryNavClick:c})=>n("div",{className:"flex h-full flex-col justify-between",children:[e("div",{className:"tablet:px-8 laptop:px-16 p-4",children:a?.map((b,p)=>n("div",{className:"",children:[e("div",{className:w("my-2 h-px w-full bg-[#E5E5E7]")}),b?.map((o,d)=>e(re,{label:o.text,onClick:()=>{const i=(a?.flat()||[])?.findIndex(v=>v?.id===a[p][d]?.id);l(p,d),c?.(o,i)},icon:o.components?.[0]?.icon},o.id))]},`groupCategory-${p}`))}),e(Je,{profileAction:s})]}),Je=({profileAction:a})=>{const[l,s]=P(!1),{profile:c,event:b}=q(),{locale:p="us"}=ge();return n("div",{className:w("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":l}),children:[n("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>s(!l),"aria-expanded":l,"aria-label":c?.nick_name||a?.welcome,children:[n("div",{className:"flex items-center gap-[14px]",children:[e("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:e(Re,{"aria-hidden":"true"})}),e(N,{html:c?.nick_name||a?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&e(ve,{"aria-hidden":"true",className:w("laptop:size-4 size-5",{"rotate-180":l})})]}),c?.email&&e("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:a?.profiles?.map(o=>e(re,{label:o?.title,href:ce(o?.url,p)},o.id))}),l&&!c?.email&&n("div",{className:"mt-4",children:[e(N,{html:a?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),e("div",{className:"mt-2 flex flex-col gap-1",children:a?.benefits?.map(o=>n("div",{className:"flex items-center gap-[6px]",children:[e(le,{source:o.benefitIcon?.url,className:"size-4",alt:o.benefit,width:16,height:16}),e(N,{html:o.benefit,className:"text-sm font-bold leading-[1.4]"})]},o.id))})]}),!c?.email&&n("div",{className:"mt-4 flex items-center gap-3",children:[e(X,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>b?.join?.(),children:e(N,{html:a?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),e(X,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>b?.login?.(),children:e(N,{html:a?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},qe=({menuOpen:a,onMenuOpenClose:l,onMenuOpenClick:s,actions:c})=>n("div",{className:"flex h-full items-center justify-between gap-4",children:[e(ke,{}),n("div",{className:"desktop:gap-6 flex items-center gap-4",children:[e(ie,{actions:c}),a?e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu","aria-expanded":"true",children:e(be,{className:"size-5","aria-hidden":"true"})}):e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:e(Be,{className:"size-5","aria-hidden":"true"})})]})]}),ke=()=>{const{payloadData:a,isMobile:l}=q();return e("a",{href:"/",className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:l?a?.bar?.mobileLogo:a?.bar?.desktopLogo}})},ie=Q(({actions:a,activeStatus:l=!1},s)=>{const{event:c,cartCount:b}=q(),[p,o]=P(null),d=i=>{switch(i){case k.Search:return"Search";case k.Cart:return`Shopping cart${b>0?` (${b} items)`:""}`;case k.Profile:return"User profile";case k.Livestream:return"Livestream";default:return"Action"}},D=V((i,v)=>{switch(o(v),i?.blockType){case k.Search:c?.search?.();break;case k.Cart:c?.cart?.();break;case k.Profile:c?.profile?.();break;case k.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return e("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(a)&&a?.map((i,v)=>n("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:i.blockType===k.Profile?s:null,onClick:()=>D(i,v),"aria-label":d(i.blockType),"aria-pressed":l&&p===v,children:[e(N,{html:i.icon,className:w("size-5",{"text-brand-0":l&&p===v}),"aria-hidden":"true"}),i.blockType===k.Cart&&b>0&&e("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:e(N,{html:b?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},i.id))})}),Ce=({title:a,onMenuOpenClose:l,onMenuBackClick:s})=>n("div",{className:"flex h-full items-center gap-3",children:[e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>s(),"aria-label":"Back to previous menu",children:e(ze,{className:"size-5","aria-hidden":"true"})}),e(N,{html:a,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),e("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>l(),"aria-label":"Close menu",children:e(be,{className:"size-5","aria-hidden":"true"})})]});Ne.displayName="MobileNavigation",ie.displayName="Actions",he.displayName="HeaderNavigation",ye.displayName="DesktopNavigation";var yt=Te(he);export{yt as default};
 //# sourceMappingURL=index.js.map