@anker-in/headless-ui 1.1.68 → 1.1.69

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicMore/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ntype GraphicMoreType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n  className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div\n        className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]')}\n      >\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item?.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item?.img?.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {item?.title && (\n                    <Text\n                      html={item?.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {item?.description && (\n                    <Text\n                      html={item?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold\"\n                    />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"tablet:hidden block text-[#080A0F]\">\n        <div className=\" flex flex-wrap gap-[12px]\">\n          {productsTab?.map((it, ind) => {\n            return (\n              <div\n                key={ind}\n                className={cn(\n                  'text-info-primary relative overflow-hidden',\n                  shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                  { 'aiui-dark': it?.theme === 'dark' },\n                  it?.fullWidth === 'true'\n                    ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n                    : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n                )}\n              >\n                <Picture source={it?.mobileImg?.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"footBottomMob desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {it?.title && (\n                    <Text\n                      html={it?.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {it?.description && (\n                    <Text\n                      html={it?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n                    />\n                  )}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
-  "mappings": "aA4BI,mBAAAA,EAmBY,OAAAC,EACA,QAAAC,MApBZ,oBA3BJ,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAkB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,OACET,EAAAF,EAAA,CACE,UAAAC,EAAC,OACC,UAAWE,EAAG,sBAAuB,sEAAsE,EAE3G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCS,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,EACvEb,EAAC,OAAI,UAAU,kFACZ,UAAAa,GAAM,OACLd,EAACO,EAAA,CACC,KAAMO,GAAM,MACZ,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAM,aACLd,EAACO,EAAA,CACC,KAAMO,GAAM,YACZ,UAAU,2EACZ,GAEJ,IA1BKC,CA2BP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACZ,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC9Ff,EAAC,OAAI,UAAU,qFACZ,UAAAe,GAAI,OACHhB,EAACO,EAAA,CACC,KAAMS,GAAI,MACV,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAI,aACHhB,EAACO,EAAA,CACC,KAAMS,GAAI,YACV,UAAU,yFACZ,GAEJ,IAzBKC,CA0BP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
-  "names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Grid", "GridItem", "Picture", "Text", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind", "GraphicMore_default"]
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ninterface GraphicMoreType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n}\n\nconst GraphicMore = ({ data, className, ...rest }: GraphicMoreType) => {\n  const { productsTab, shape } = data\n\n  return (\n    <div {...rest} className={cn(className)}>\n      <div\n        className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#080A0F]')}\n      >\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item?.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item?.img?.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {item?.title && (\n                    <Text\n                      html={item?.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {item?.description && (\n                    <Text\n                      html={item?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold\"\n                    />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className=\"tablet:hidden block text-[#080A0F]\">\n        <div className=\" flex flex-wrap gap-[12px]\">\n          {productsTab?.map((it, ind) => {\n            return (\n              <div\n                key={ind}\n                className={cn(\n                  'text-info-primary relative overflow-hidden',\n                  shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                  { 'aiui-dark': it?.theme === 'dark' },\n                  it?.fullWidth === 'true'\n                    ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n                    : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n                )}\n              >\n                <Picture source={it?.mobileImg?.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n                <div className=\"footBottomMob desktop:p-6 lg-desktop:p-8 absolute inset-0 z-10 overflow-hidden p-4\">\n                  {it?.title && (\n                    <Text\n                      html={it?.title}\n                      as=\"p\"\n                      className=\"desktop:text-[32px] line-clamp-2 text-2xl font-bold leading-[1.2]\"\n                    />\n                  )}\n                  {it?.description && (\n                    <Text\n                      html={it?.description}\n                      className=\"desktop:text-base lg-desktop:text-lg mt-1 line-clamp-2 text-sm font-bold leading-[1.4]\"\n                    />\n                  )}\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
+  "mappings": "aA6CgB,cAAAA,EACA,QAAAC,MADA,oBA5ChB,OAAS,MAAAC,MAAU,yBAEnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAiB9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIJ,EAE/B,OACER,EAAC,OAAK,GAAGU,EAAM,UAAWT,EAAGQ,CAAS,EACpC,UAAAV,EAAC,OACC,UAAWE,EAAG,sBAAuB,sEAAsE,EAE3G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCQ,CAAS,EACnE,SAAAE,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,EACvEb,EAAC,OAAI,UAAU,kFACZ,UAAAa,GAAM,OACLd,EAACO,EAAA,CACC,KAAMO,GAAM,MACZ,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAM,aACLd,EAACO,EAAA,CACC,KAAMO,GAAM,YACZ,UAAU,2EACZ,GAEJ,IA1BKC,CA2BP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACZ,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC9Ff,EAAC,OAAI,UAAU,qFACZ,UAAAe,GAAI,OACHhB,EAACO,EAAA,CACC,KAAMS,GAAI,MACV,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAI,aACHhB,EAACO,EAAA,CACC,KAAMS,GAAI,YACV,UAAU,yFACZ,GAEJ,IAzBKC,CA0BP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
+  "names": ["jsx", "jsxs", "cn", "withLayout", "Grid", "GridItem", "Picture", "Text", "GraphicMore", "data", "className", "rest", "productsTab", "shape", "item", "index", "it", "ind", "GraphicMore_default"]
 }

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.d.ts

@@ -1,6 +1,13 @@
 import React from 'react';
-import type { GraphicOverlayProps } from './types';
-declare const _default: React.ForwardRefExoticComponent<Omit<GraphicOverlayProps & React.RefAttributes<HTMLDivElement> & {
+import type { GraphicOverlayProps, Item } from './types';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & {
+    data: {
+        shape?: import("../../types/props").Shape;
+        items: ({
+            width?: "full" | "half" | "one-third";
+        } & Item)[];
+    };
+} & React.RefAttributes<HTMLDivElement> & {
     style?: string | React.CSSProperties;
     container?: import("../../shared/Styles.js").ContainerProps["container"];
 }, "ref"> & React.RefAttributes<any>>;

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as m}from"react/jsx-runtime";import C,{useState as k,useEffect as G,useRef as O}from"react";import{useMediaQuery as S}from"react-responsive";import{withLayout as z}from"../../shared/Styles.js";import M from"../../components/picture.js";import T from"../../components/button.js";import{Heading as P}from"../../components/heading.js";import{VideoModal as U}from"../VideoModal/index.js";import{cn as b}from"../../helpers/utils.js";import R from"../SwiperBox/index.js";import{isVideo as V}from"../../shared/mimeType.js";import{useExposure as E}from"../../hooks/useExposure.js";import{trackUrlRef as $}from"../../shared/trackUrlRef.js";const n="image",c="p1_banner",_=({data:i,configuration:o,jIndex:u})=>{const[r,v]=k(!1),h=S({query:"(max-width: 768px)"}),w=O(null),g=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};E(w,{componentType:n,componentName:c,position:u,componentTitle:i.title,componentDescription:i.description,navigation:o?.activeTab}),G(()=>{v(h)},[h]);const{theme:x="light",title:l,description:p,imageUrl:t,primaryButton:a,secondaryButton:s,imageMobileUrl:d,blockLink:y,video:f,youtubeId:N,isYouTube:L}=i,B="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return m("div",{className:b("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",g(),{"rounded-2xl":o?.shape==="rounded","aiui-dark":x==="dark","h-[400px]":r},"text-info-primary"),ref:w,children:[y&&e("a",{className:"absolute inset-0 z-10",href:$(y,`${n}_${c}`),"data-headless-type-name":`${n}#${c}`,"data-headless-title-desc-button":`${l}#${p}`,"data-headless-nav-postion":`${o?.activeTab}#${u}`,"aria-hidden":"true",tabIndex:-1}),m("div",{className:"absolute inset-0",children:[V(t?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:t?.url,type:"video/mp4"})}):e(M,{source:t?.url,alt:t?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),V(d?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:d?.url,type:"video/mp4"})}):e(M,{source:d?.url||t?.url,alt:d?.alt||t?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),m("div",{className:b("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[m("div",{className:"flex flex-col gap-1",children:[e(P,{size:3,as:"h3",className:"item-title",html:l}),e(P,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:p})]}),m("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&m(T,{"aria-label":l??p,className:b(B,"link-left"),variant:"secondary",as:"a",href:$(s.link,`${n}_${c}`),"data-headless-type-name":`${n}#${c}`,"data-headless-title-desc-button":`${l}#${p}#${s?.text}`,"data-headless-nav-postion":`${o?.activeTab}#${u}`,children:[s.text,e("span",{className:"sr-only",children:l??p})]}),a&&a.text&&e(T,{"aria-label":l??p,className:b(B,"link-right"),variant:"primary",as:"a",href:$(a.link,`${n}_${c}`),"data-headless-type-name":`${n}#${c}`,"data-headless-title-desc-button":`${l}#${p}#${a.text}`,"data-headless-nav-postion":`${o?.activeTab}#${u}`,children:a.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(f?.url||N)&&e("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(f?.url||N,L)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},I=C.forwardRef((i,o)=>{const{shape:u,items:r=[]}=i.data,[v,h]=k(!1),[w,g]=k(""),[x,l]=k(""),p=(a,s)=>{h(!0),s?l?.(a||""):g?.(a||"")},t=a=>{const s=r?.length,d=s>3,y=s>2,f=s>1;switch(!0){case a>=1440:case a>=1024:return d?3:s;case a>=768:return d||y?2.3:f?2:1;default:return f?1.2:1}};return m("section",{"data-ui-component-id":"GraphicOverlay",ref:o,className:b("graphicOverlayBlock text-info-primary ",i.className),children:[r&&r.length>0?e(R,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r||[],configuration:{shape:u,num:r.length,onVideoPlayBtnClick:p}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:t(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:t(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:t(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:t(1440)}}}):null,v&&e(U,{visible:v,youTubeId:x,videoUrl:w,onCloseModal:()=>h(!1)})]})});I.displayName="GraphicOverlayBlock";var X=z(I);export{X as default};
+import{jsx as e,jsxs as u}from"react/jsx-runtime";import C,{useState as x,useEffect as G,useRef as O}from"react";import{useMediaQuery as S}from"react-responsive";import{withLayout as z}from"../../shared/Styles.js";import T from"../../components/picture.js";import P from"../../components/button.js";import{Heading as V}from"../../components/heading.js";import{VideoModal as U}from"../VideoModal/index.js";import{cn as w}from"../../helpers/utils.js";import R from"../SwiperBox/index.js";import{isVideo as I}from"../../shared/mimeType.js";import{useExposure as E}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const c="image",m="p1_banner",_=({data:h,configuration:a,jIndex:f})=>{const[$,N]=x(!1),y=S({query:"(max-width: 768px)"}),r=O(null),k=()=>{switch(a?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};E(r,{componentType:c,componentName:m,position:f,componentTitle:h.title,componentDescription:h.description,navigation:a?.activeTab}),G(()=>{N(y)},[y]);const{theme:g="light",title:s,description:o,imageUrl:t,primaryButton:n,secondaryButton:d,imageMobileUrl:l,blockLink:p,video:i,youtubeId:b,isYouTube:B}=h,v="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return u("div",{className:w("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",k(),{"rounded-2xl":a?.shape==="rounded","aiui-dark":g==="dark","h-[400px]":$},"text-info-primary"),ref:r,children:[p&&e("a",{className:"absolute inset-0 z-10",href:M(p,`${c}_${m}`),"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${s}#${o}`,"data-headless-nav-postion":`${a?.activeTab}#${f}`,"aria-hidden":"true",tabIndex:-1}),u("div",{className:"absolute inset-0",children:[I(t?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:t?.url,type:"video/mp4"})}):e(T,{source:t?.url,alt:t?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),I(l?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:l?.url,type:"video/mp4"})}):e(T,{source:l?.url||t?.url,alt:l?.alt||t?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),u("div",{className:w("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":h?.width==="full"}),children:[u("div",{className:"flex flex-col gap-1",children:[e(V,{size:3,as:"h3",className:"item-title",html:s}),e(V,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:o})]}),u("div",{className:"lg-desktop:gap-3 flex gap-2",children:[d&&d.text&&u(P,{"aria-label":s??o,className:w(v,"link-left"),variant:"secondary",as:"a",href:M(d.link,`${c}_${m}`),"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${s}#${o}#${d?.text}`,"data-headless-nav-postion":`${a?.activeTab}#${f}`,children:[d.text,e("span",{className:"sr-only",children:s??o})]}),n&&n.text&&e(P,{"aria-label":s??o,className:w(v,"link-right"),variant:"primary",as:"a",href:M(n.link,`${c}_${m}`),"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${s}#${o}#${n.text}`,"data-headless-nav-postion":`${a?.activeTab}#${f}`,children:n.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(i?.url||b)&&e("button",{onClick:()=>{a?.onVideoPlayBtnClick?.(i?.url||b,B)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},L=C.forwardRef((h,a)=>{const{data:f,className:$,...N}=h,{shape:y,items:r=[]}=f,[k,g]=x(!1),[s,o]=x(""),[t,n]=x(""),d=(p,i)=>{g(!0),i?n?.(p||""):o?.(p||"")},l=p=>{const i=r?.length,b=i>3,B=i>2,v=i>1;switch(!0){case p>=1440:case p>=1024:return b?3:i;case p>=768:return b||B?2.3:v?2:1;default:return v?1.2:1}};return u("section",{"data-ui-component-id":"GraphicOverlay",ref:a,...N,className:w("graphicOverlayBlock text-info-primary ",$),children:[r&&r.length>0?e(R,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r||[],configuration:{shape:y,num:r.length,onVideoPlayBtnClick:d}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:l(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:l(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:l(1440)}}}):null,k&&e(U,{visible:k,youTubeId:t,videoUrl:s,onCloseModal:()=>g(!1)})]})});L.displayName="GraphicOverlayBlock";var X=z(L);export{X as default};
 //# sourceMappingURL=GraphicOverlay.js.map

package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { shape, items = [] } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      className={cn('graphicOverlayBlock text-info-primary ', props.className)}\n    >\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: {\n              shape: shape,\n              num: items.length,\n              onVideoPlayBtnClick: handleVideoPlayBtnClick,\n            },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "cn", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlay", "props", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay_default"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    switch (configuration?.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {blockLink && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        ></a>\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n  const { data, className, ...rest } = props\n  const { shape, items = [] } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n\n  const handleSwiperShow = (width: number) => {\n    const len = items?.length\n    const isShow = len > 3\n    const isMiddle = len > 2\n    const isMobile = len > 1\n\n    switch (true) {\n      case width >= 1440:\n      case width >= 1024:\n        return isShow ? 3 : len\n      case width >= 768:\n        if (isShow || isMiddle) {\n          return 2.3\n        }\n        return isMobile ? 2 : 1\n      default:\n        return isMobile ? 1.2 : 1\n    }\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"GraphicOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('graphicOverlayBlock text-info-primary ', className)}\n    >\n      {items && items.length > 0 ? (\n        <SwiperBox\n          className=\"!overflow-visible\"\n          id={'MultiLayoutGraphicBlock3'}\n          data={{\n            list: items || [],\n            configuration: {\n              shape: shape,\n              num: items.length,\n              onVideoPlayBtnClick: handleVideoPlayBtnClick,\n            },\n          }}\n          Slide={ItemBlock}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(374),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      ) : null}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
+  "mappings": "AAwFQ,cAAAA,EA4CE,QAAAC,MA5CF,oBAxFR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIrB,EAAkB,EAAK,EACjDsB,EAAanB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DoB,EAAMrB,EAAuB,IAAI,EAEjCsB,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAEAN,EAAYW,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAEDjB,EAAU,IAAM,CACdoB,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAIlB,EACEmB,EAAe,mFAErB,OACEtC,EAAC,OACC,UAAWW,EACT,kFACAe,EAAa,EACb,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEJ,UAAAS,GACCnC,EAAC,KACC,UAAU,wBACV,KAAMgB,EAAYmB,EAAW,GAAGlB,CAAa,IAAIC,CAAa,EAAE,EAChE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGW,CAAK,IAAIC,CAAW,GACxD,4BAA2B,GAAGT,GAAe,SAAS,IAAIC,CAAM,GAChE,cAAY,OACZ,SAAU,GACX,EAEHrB,EAAC,OAAI,UAAU,mBACZ,UAAAa,EAAQiB,GAAU,QAAQ,EACzB/B,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,SAAAA,EAAC,UAAO,IAAK+B,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA/B,EAACQ,EAAA,CACC,OAAQuB,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAEDjB,EAAQoB,GAAgB,QAAQ,EAC/BlC,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,SAAAA,EAAC,UAAO,IAAKkC,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEAlC,EAACQ,EAAA,CACC,OAAQ0B,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,EAEF9B,EAAC,OACC,UAAWW,EACT,wHACA,CACE,4DAA6DQ,GAAM,QAAU,MAC/E,CACF,EAEA,UAAAnB,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACU,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMmB,EAAO,EAC9D7B,EAACU,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMoB,EACR,GACF,EACA7B,EAAC,OAAI,UAAU,8BACZ,UAAAgC,GAAmBA,EAAgB,MAClChC,EAACQ,EAAA,CACC,aAAYoB,GAASC,EACrB,UAAWlB,EAAG2B,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,KAAMvB,EAAYiB,EAAgB,KAAM,GAAGhB,CAAa,IAAIC,CAAa,EAAE,EAC3E,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGW,CAAK,IAAIC,CAAW,IAAIG,GAAiB,IAAI,GACjF,4BAA2B,GAAGZ,GAAe,SAAS,IAAIC,CAAM,GAE/D,UAAAW,EAAgB,KACjBjC,EAAC,QAAK,UAAU,UAAW,SAAA6B,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9BhC,EAACS,EAAA,CACC,aAAYoB,GAASC,EACrB,UAAWlB,EAAG2B,EAAc,YAAY,EACxC,QAAQ,UACR,GAAG,IACH,KAAMvB,EAAYgB,EAAc,KAAM,GAAGf,CAAa,IAAIC,CAAa,EAAE,EACzE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGW,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,4BAA2B,GAAGX,GAAe,SAAS,IAAIC,CAAM,GAE/D,SAAAU,EAAc,KACjB,GAEJ,GACF,GACF,EACAhC,EAAC,OACC,SAAAA,EAAC,OAAI,UAAU,+EACX,UAAAoC,GAAO,KAAOC,IACdrC,EAAC,UACC,QAAS,IAAM,CACbqB,GAAe,sBAAsBe,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,+GAEV,SAAAtC,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,EACF,GACF,CAEJ,EAEMwC,EAAiBtC,EAAM,WAAgD,CAACuC,EAAOf,IAAQ,CAC3F,KAAM,CAAE,KAAAgB,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAIH,EAC/B,CAAE,MAAAI,EAAO,MAAAC,EAAQ,CAAC,CAAE,EAAIJ,EACxB,CAACK,EAASC,CAAU,EAAI7C,EAAkB,EAAK,EAC/C,CAAC8C,EAAUC,CAAW,EAAI/C,EAAiB,EAAE,EAC7C,CAACgD,EAAWC,CAAY,EAAIjD,EAAiB,EAAE,EAE/CkD,EAA0B,CAACC,EAAahB,IAAuB,CACnEU,EAAW,EAAI,EACXV,EACFc,IAAeE,GAAO,EAAE,EAExBJ,IAAcI,GAAO,EAAE,CAE3B,EAEMC,EAAoBC,GAAkB,CAC1C,MAAMC,EAAMX,GAAO,OACbY,EAASD,EAAM,EACfE,EAAWF,EAAM,EACjBlC,EAAWkC,EAAM,EAEvB,OAAQ,GAAM,CACZ,KAAKD,GAAS,KACd,KAAKA,GAAS,KACZ,OAAOE,EAAS,EAAID,EACtB,KAAKD,GAAS,IACZ,OAAIE,GAAUC,EACL,IAEFpC,EAAW,EAAI,EACxB,QACE,OAAOA,EAAW,IAAM,CAC5B,CACF,EAEA,OACEtB,EAAC,WACC,uBAAqB,iBACrB,IAAKyB,EACJ,GAAGkB,EACJ,UAAWhC,EAAG,yCAA0C+B,CAAS,EAEhE,UAAAG,GAASA,EAAM,OAAS,EACvB9C,EAACa,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMiC,GAAS,CAAC,EAChB,cAAe,CACb,MAAOD,EACP,IAAKC,EAAM,OACX,oBAAqBO,CACvB,CACF,EACA,MAAOlC,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeoC,EAAiB,GAAG,CACrC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,EACE,KACHR,GACC/C,EAACW,EAAA,CACC,QAASoC,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDR,EAAe,YAAc,sBAE7B,IAAOoB,EAAQrD,EAAWiC,CAAc",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "cn", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlay", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay_default"]
 }

package/dist/esm/biz-components/GraphicOverlay/types.d.ts

@@ -22,12 +22,11 @@ export type Item = {
     youtubeId?: string;
     isYouTube?: boolean;
 };
-export type GraphicOverlayProps = {
+export type GraphicOverlayProps = React.HTMLAttributes<HTMLElement> & {
     data: {
         shape?: Shape;
         items: ({
             width?: 'full' | 'half' | 'one-third';
         } & Item)[];
     };
-    className?: string;
 };

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

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