@anker-in/headless-ui 1.1.68 → 1.1.69

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicAttractionBlock/index.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { ComponentCommonProps, Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends ComponentCommonProps {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLDivElement, GraphicAttractionBlockProps>((props, ref) => {\n  const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = props.data\n\n  return (\n    <section\n      ref={ref}\n      data-ui-component-id=\"GraphicAttractionBlock\"\n      className={cn('text-info-primary relative', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} />}\n      <div\n        className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n          'rounded-box': shape === 'rounded',\n        })}\n      >\n        <Picture\n          source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n          className=\"inset-0\"\n          imgClassName=\"h-full object-cover\"\n          alt={imageUrlPc?.alt || ''}\n        />\n        <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n          <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n          <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n        </div>\n      </div>\n      <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n        {attractionItems?.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n              { 'rounded-box': shape === 'rounded' }\n            )}\n          >\n            <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n              <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n              <Picture\n                className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n                source={item.icon?.url}\n                alt={item.icon?.alt}\n                imgClassName=\"w-full h-full object-cover\"\n              />\n            </div>\n            <Text\n              as=\"p\"\n              className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n              html={item.description}\n            />\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n})\n\nGraphicAttractionBlock.displayName = 'GraphicAttractionBlock'\nexport default withLayout(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCuB,IAAAI,EAAA,6BArCvBC,EAAkB,oBAClBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAkB,gCAElBC,EAAmB,kCAqBnB,MAAMC,EAAyB,EAAAC,QAAM,WAAwD,CAACC,EAAOC,IAAQ,CAC3G,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,iBAAAC,EAAkB,gBAAAC,CAAgB,EAAIR,EAAM,KAE9G,SACE,QAAC,WACC,IAAKC,EACL,uBAAqB,yBACrB,aAAW,MAAG,6BAA8BD,EAAM,SAAS,EAE1D,UAAAK,MAAgB,OAAC,EAAAI,QAAA,CAAM,KAAM,CAAE,MAAOJ,CAAa,EAAG,KACvD,QAAC,OACC,aAAW,MAAG,4EAA6E,CACzF,cAAeH,IAAU,SAC3B,CAAC,EAED,oBAAC,EAAAQ,QAAA,CACC,OAAQ,GAAGP,GAAY,GAAG,KAAKC,GAAa,GAAG,OAC/C,UAAU,UACV,aAAa,sBACb,IAAKD,GAAY,KAAO,GAC1B,KACA,QAAC,OAAI,UAAU,sEACb,oBAAC,WAAQ,GAAG,KAAK,UAAU,aAAa,KAAM,EAAG,KAAMG,EAAY,KACnE,OAAC,QAAK,GAAG,IAAI,UAAU,aAAa,KAAM,EAAG,KAAMC,EAAkB,GACvE,GACF,KACA,OAAC,OAAI,UAAU,+EACZ,SAAAC,GAAiB,IAAI,CAACG,EAAMC,OAC3B,QAAC,OAEC,aAAW,MACT,8FACA,CAAE,cAAeV,IAAU,SAAU,CACvC,EAEA,qBAAC,OAAI,UAAU,uEACb,oBAAC,QAAK,GAAG,IAAI,UAAU,4DAA4D,KAAMS,EAAK,MAAO,KACrG,OAAC,EAAAD,QAAA,CACC,UAAU,2DACV,OAAQC,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GACF,KACA,OAAC,QACC,GAAG,IACH,UAAU,4DACV,KAAMA,EAAK,YACb,IAnBKC,CAoBP,CACD,EACH,GACF,CAEJ,CAAC,EAEDd,EAAuB,YAAc,yBACrC,IAAOV,KAAQ,cAAWU,CAAsB",
-  "names": ["GraphicAttractionBlock_exports", "__export", "GraphicAttractionBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_heading", "import_text", "import_Title", "import_utils", "GraphicAttractionBlock", "React", "props", "ref", "shape", "imageUrlPc", "imageUrlMob", "sectionTitle", "imageTitle", "imageDescription", "attractionItems", "Title", "Picture", "item", "index"]
+  "sourcesContent": ["import React from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport type { Media, Img } from '../../types/props'\n\nexport interface AttractionItem {\n  icon?: Img\n  title: string\n  description: string\n}\n\ninterface GraphicAttractionBlockProps extends React.HTMLAttributes<HTMLElement> {\n  data: {\n    shape?: Shape\n    sectionTitle?: string\n    imageUrlPc?: Media\n    imageUrlMob?: Media\n    imageTitle?: string\n    imageDescription?: string\n    attractionItems?: AttractionItem[]\n  }\n}\n\nconst GraphicAttractionBlock = React.forwardRef<HTMLElement, GraphicAttractionBlockProps>(\n  ({ data, className, ...rest }, ref) => {\n    const { shape, imageUrlPc, imageUrlMob, sectionTitle, imageTitle, imageDescription, attractionItems } = data\n\n    return (\n      <section\n        ref={ref}\n        data-ui-component-id=\"GraphicAttractionBlock\"\n        {...rest}\n        className={cn('text-info-primary relative', className)}\n      >\n        {sectionTitle && <Title data={{ title: sectionTitle }} />}\n        <div\n          className={cn('tablet:aspect-[1664/560] relative aspect-[358/480] w-full overflow-hidden', {\n            'rounded-box': shape === 'rounded',\n          })}\n        >\n          <Picture\n            source={`${imageUrlPc?.url}, ${imageUrlMob?.url} 767`}\n            className=\"inset-0\"\n            imgClassName=\"h-full object-cover\"\n            alt={imageUrlPc?.alt || ''}\n          />\n          <div className=\"lg-desktop:p-8 absolute inset-0 z-[1] flex flex-col justify-end p-4\">\n            <Heading as=\"h3\" className=\"text-white\" size={3} html={imageTitle} />\n            <Text as=\"p\" className=\"text-white\" size={2} html={imageDescription} />\n          </div>\n        </div>\n        <div className=\"tablet:gap-4 tablet:grid-cols-4 tablet:mt-[10px] mt-4 grid grid-cols-2 gap-3\">\n          {attractionItems?.map((item, index) => (\n            <div\n              key={index}\n              className={cn(\n                'lg-desktop:p-8 desktop:p-6 desktop:gap-16 flex flex-col justify-between gap-12 bg-white p-4',\n                { 'rounded-box': shape === 'rounded' }\n              )}\n            >\n              <div className=\"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3\">\n                <Text as=\"p\" className=\"lg-desktop:text-[18px] tracking text-[14px] font-semibold\" html={item.title} />\n                <Picture\n                  className=\"lg-desktop:size-[36px] size-[30px] shrink-0 object-cover\"\n                  source={item.icon?.url}\n                  alt={item.icon?.alt}\n                  imgClassName=\"w-full h-full object-cover\"\n                />\n              </div>\n              <Text\n                as=\"p\"\n                className=\"lg-desktop:text-[24px] tracking text-[20px] leading-tight\"\n                html={item.description}\n              />\n            </div>\n          ))}\n        </div>\n      </section>\n    )\n  }\n)\n\nGraphicAttractionBlock.displayName = 'GraphicAttractionBlock'\nexport default withLayout(GraphicAttractionBlock)\nexport type { GraphicAttractionBlockProps }\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuCyB,IAAAI,EAAA,6BAvCzBC,EAAkB,oBAClBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAkB,gCAElBC,EAAmB,kCAqBnB,MAAMC,EAAyB,EAAAC,QAAM,WACnC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACrC,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,iBAAAC,EAAkB,gBAAAC,CAAgB,EAAIV,EAExG,SACE,QAAC,WACC,IAAKG,EACL,uBAAqB,yBACpB,GAAGD,EACJ,aAAW,MAAG,6BAA8BD,CAAS,EAEpD,UAAAM,MAAgB,OAAC,EAAAI,QAAA,CAAM,KAAM,CAAE,MAAOJ,CAAa,EAAG,KACvD,QAAC,OACC,aAAW,MAAG,4EAA6E,CACzF,cAAeH,IAAU,SAC3B,CAAC,EAED,oBAAC,EAAAQ,QAAA,CACC,OAAQ,GAAGP,GAAY,GAAG,KAAKC,GAAa,GAAG,OAC/C,UAAU,UACV,aAAa,sBACb,IAAKD,GAAY,KAAO,GAC1B,KACA,QAAC,OAAI,UAAU,sEACb,oBAAC,WAAQ,GAAG,KAAK,UAAU,aAAa,KAAM,EAAG,KAAMG,EAAY,KACnE,OAAC,QAAK,GAAG,IAAI,UAAU,aAAa,KAAM,EAAG,KAAMC,EAAkB,GACvE,GACF,KACA,OAAC,OAAI,UAAU,+EACZ,SAAAC,GAAiB,IAAI,CAACG,EAAMC,OAC3B,QAAC,OAEC,aAAW,MACT,8FACA,CAAE,cAAeV,IAAU,SAAU,CACvC,EAEA,qBAAC,OAAI,UAAU,uEACb,oBAAC,QAAK,GAAG,IAAI,UAAU,4DAA4D,KAAMS,EAAK,MAAO,KACrG,OAAC,EAAAD,QAAA,CACC,UAAU,2DACV,OAAQC,EAAK,MAAM,IACnB,IAAKA,EAAK,MAAM,IAChB,aAAa,6BACf,GACF,KACA,OAAC,QACC,GAAG,IACH,UAAU,4DACV,KAAMA,EAAK,YACb,IAnBKC,CAoBP,CACD,EACH,GACF,CAEJ,CACF,EAEAhB,EAAuB,YAAc,yBACrC,IAAOV,KAAQ,cAAWU,CAAsB",
+  "names": ["GraphicAttractionBlock_exports", "__export", "GraphicAttractionBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Styles", "import_picture", "import_heading", "import_text", "import_Title", "import_utils", "GraphicAttractionBlock", "React", "data", "className", "rest", "ref", "shape", "imageUrlPc", "imageUrlMob", "sectionTitle", "imageTitle", "imageDescription", "attractionItems", "Title", "Picture", "item", "index"]
 }

package/dist/cjs/biz-components/GraphicMore/index.d.ts

@@ -8,13 +8,12 @@ export type GraphicMoreDataType = {
     fullWidth: 'true' | 'false';
     span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 };
-type GraphicMoreType = {
+interface GraphicMoreType extends React.HTMLAttributes<HTMLDivElement> {
     data: {
         shape?: 'rounded' | 'square';
         productsTab: GraphicMoreDataType[];
     };
-    className?: string;
-};
+}
 declare const _default: import("react").ForwardRefExoticComponent<GraphicMoreType & {
     style?: string | React.CSSProperties;
     container?: import("../../shared/Styles.js").ContainerProps["container"];

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

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

package/dist/cjs/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": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4BI,IAAAI,EAAA,6BA3BJC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,SACE,oBACE,oBAAC,OACC,aAAW,MAAG,sBAAuB,sEAAsE,EAE3G,mBAAC,QAAK,aAAW,MAAG,wCAAyCC,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,oBAAC,WAAQ,OAAQA,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,KACvE,QAAC,OAAI,UAAU,kFACZ,UAAAA,GAAM,UACL,OAAC,QACC,KAAMA,GAAM,MACZ,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAM,gBACL,OAAC,QACC,KAAMA,GAAM,YACZ,UAAU,2EACZ,GAEJ,IA1BKC,CA2BP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OAAI,UAAU,6BACZ,SAAAH,GAAa,IAAI,CAACI,EAAIC,OAEnB,QAAC,OAEC,aAAW,MACT,6CACAJ,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,oBAAC,WAAQ,OAAQA,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,KAC9F,QAAC,OAAI,UAAU,qFACZ,UAAAA,GAAI,UACH,OAAC,QACC,KAAMA,GAAI,MACV,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAI,gBACH,OAAC,QACC,KAAMA,GAAI,YACV,UAAU,yFACZ,GAEJ,IAzBKC,CA0BP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOhB,KAAQ,cAAWO,CAAW",
-  "names": ["GraphicMore_exports", "__export", "GraphicMore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_Styles", "import_grid", "import_components", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind"]
+  "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": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6CgB,IAAAI,EAAA,6BA5ChBC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAiB9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,YAAAC,EAAa,MAAAC,CAAM,EAAIJ,EAE/B,SACE,QAAC,OAAK,GAAGE,EAAM,aAAW,MAAGD,CAAS,EACpC,oBAAC,OACC,aAAW,MAAG,sBAAuB,sEAAsE,EAE3G,mBAAC,QAAK,aAAW,MAAG,wCAAyCA,CAAS,EACnE,SAAAE,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,oBAAC,WAAQ,OAAQA,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,KACvE,QAAC,OAAI,UAAU,kFACZ,UAAAA,GAAM,UACL,OAAC,QACC,KAAMA,GAAM,MACZ,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAM,gBACL,OAAC,QACC,KAAMA,GAAM,YACZ,UAAU,2EACZ,GAEJ,IA1BKC,CA2BP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OAAI,UAAU,6BACZ,SAAAH,GAAa,IAAI,CAACI,EAAIC,OAEnB,QAAC,OAEC,aAAW,MACT,6CACAJ,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,oBAAC,WAAQ,OAAQA,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,KAC9F,QAAC,OAAI,UAAU,qFACZ,UAAAA,GAAI,UACH,OAAC,QACC,KAAMA,GAAI,MACV,GAAG,IACH,UAAU,oEACZ,EAEDA,GAAI,gBACH,OAAC,QACC,KAAMA,GAAI,YACV,UAAU,yFACZ,GAEJ,IAzBKC,CA0BP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOhB,KAAQ,cAAWO,CAAW",
+  "names": ["GraphicMore_exports", "__export", "GraphicMore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_Styles", "import_grid", "import_components", "GraphicMore", "data", "className", "rest", "productsTab", "shape", "item", "index", "it", "ind"]
 }

package/dist/cjs/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/cjs/biz-components/GraphicOverlay/GraphicOverlay.js

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

package/dist/cjs/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": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
+  "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": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwFQ,IAAAI,EAAA,6BAxFRC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAA2B,kCAC3BC,EAAmB,kCACnBC,EAAsB,oCACtBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAkB,EAAK,EACjDC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,KAEA,eAAYK,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdG,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,SACE,QAAC,OACC,aAAW,MACT,kFACAZ,EAAa,EACb,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEJ,UAAAS,MACC,OAAC,KACC,UAAU,wBACV,QAAM,eAAYA,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,KAEH,QAAC,OAAI,UAAU,mBACZ,wBAAQS,GAAU,QAAQ,KACzB,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,mBAAC,UAAO,IAAKA,GAAU,IAAK,KAAK,YAAY,EAC/C,KAEA,OAAC,EAAAS,QAAA,CACC,OAAQT,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KAED,WAAQG,GAAgB,QAAQ,KAC/B,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,mBAAC,UAAO,IAAKA,GAAgB,IAAK,KAAK,YAAY,EACrD,KAEA,OAAC,EAAAM,QAAA,CACC,OAAQN,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,KAEF,QAAC,OACC,aAAW,MACT,wHACA,CACE,4DAA6DX,GAAM,QAAU,MAC/E,CACF,EAEA,qBAAC,OAAI,UAAU,sBACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMS,EAAO,KAC9D,OAAC,WACC,GAAG,KACH,UAAU,uFACV,KAAMC,EACR,GACF,KACA,QAAC,OAAI,UAAU,8BACZ,UAAAG,GAAmBA,EAAgB,SAClC,QAAC,EAAAQ,QAAA,CACC,aAAYZ,GAASC,EACrB,aAAW,MAAGS,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,QAAM,eAAYN,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,QACjB,OAAC,QAAK,UAAU,UAAW,SAAAJ,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,SAC9B,OAAC,EAAAS,QAAA,CACC,aAAYZ,GAASC,EACrB,aAAW,MAAGS,EAAc,YAAY,EACxC,QAAQ,UACR,GAAG,IACH,QAAM,eAAYP,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,KACA,OAAC,OACC,mBAAC,OAAI,UAAU,+EACX,UAAAI,GAAO,KAAOC,OACd,OAAC,UACC,QAAS,IAAM,CACbhB,GAAe,sBAAsBe,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,+GAEV,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,EACF,GACF,CAEJ,EAEMI,EAAiB,EAAAC,QAAM,WAAgD,CAACC,EAAOlB,IAAQ,CAC3F,KAAM,CAAE,KAAAmB,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAIH,EAC/B,CAAE,MAAAI,EAAO,MAAAC,EAAQ,CAAC,CAAE,EAAIJ,EACxB,CAACK,EAASC,CAAU,KAAI,YAAkB,EAAK,EAC/C,CAACC,EAAUC,CAAW,KAAI,YAAiB,EAAE,EAC7C,CAACC,EAAWC,CAAY,KAAI,YAAiB,EAAE,EAE/CC,EAA0B,CAACC,EAAanB,IAAuB,CACnEa,EAAW,EAAI,EACXb,EACFiB,IAAeE,GAAO,EAAE,EAExBJ,IAAcI,GAAO,EAAE,CAE3B,EAEMC,EAAoBC,GAAkB,CAC1C,MAAMC,EAAMX,GAAO,OACbY,EAASD,EAAM,EACfE,EAAWF,EAAM,EACjBrC,EAAWqC,EAAM,EAEvB,OAAQ,GAAM,CACZ,KAAKD,GAAS,KACd,KAAKA,GAAS,KACZ,OAAOE,EAAS,EAAID,EACtB,KAAKD,GAAS,IACZ,OAAIE,GAAUC,EACL,IAEFvC,EAAW,EAAI,EACxB,QACE,OAAOA,EAAW,IAAM,CAC5B,CACF,EAEA,SACE,QAAC,WACC,uBAAqB,iBACrB,IAAKG,EACJ,GAAGqB,EACJ,aAAW,MAAG,yCAA0CD,CAAS,EAEhE,UAAAG,GAASA,EAAM,OAAS,KACvB,OAAC,EAAAc,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMd,GAAS,CAAC,EAChB,cAAe,CACb,MAAOD,EACP,IAAKC,EAAM,OACX,oBAAqBO,CACvB,CACF,EACA,MAAOrC,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeuC,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,MACC,OAAC,cACC,QAASA,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDT,EAAe,YAAc,sBAE7B,IAAOxC,KAAQ,cAAWwC,CAAc",
+  "names": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
 }

package/dist/cjs/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/cjs/biz-components/GraphicOverlay/types.js

@@ -1,2 +1,2 @@
-"use strict";var a=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var p=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of o(t))!l.call(e,i)&&i!==n&&a(e,i,{get:()=>t[i],enumerable:!(r=s(t,i))||r.enumerable});return e};var g=e=>p(a({},"__esModule",{value:!0}),e);var h={};module.exports=g(h);
+"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var p=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of s(t))!l.call(e,i)&&i!==a&&n(e,i,{get:()=>t[i],enumerable:!(r=o(t,i))||r.enumerable});return e};var h=e=>p(n({},"__esModule",{value:!0}),e);var m={};module.exports=h(m);
 //# sourceMappingURL=types.js.map

package/dist/cjs/biz-components/GraphicOverlay/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/GraphicOverlay/types.tsx"],
-  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  width?: 'full' | 'half' | 'one-third'\n  blockLink?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n  video?: {\n    url: string\n  }\n  youtubeId?: string\n  isYouTube?: boolean\n}\n\nexport type GraphicOverlayProps = {\n  data: {\n    shape?: Shape\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n  }\n  className?: string\n}\n"],
+  "sourcesContent": ["import type { Media, Shape, Theme } from '../../types/props'\n\nexport type Item = {\n  theme?: Theme\n  title: string\n  description: string\n  imageUrl: Media\n  imageMobileUrl?: Media\n  tabName?: string\n  width?: 'full' | 'half' | 'one-third'\n  blockLink?: string\n  primaryButton: {\n    text: string\n    link: string\n  }\n  secondaryButton: {\n    text: string\n    link: string\n  }\n  video?: {\n    url: string\n  }\n  youtubeId?: string\n  isYouTube?: boolean\n}\n\nexport type GraphicOverlayProps = React.HTMLAttributes<HTMLElement> & {\n  data: {\n    shape?: Shape\n    items: ({\n      width?: 'full' | 'half' | 'one-third'\n    } & Item)[]\n  }\n}\n"],
   "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
   "names": ["types_exports", "__toCommonJS"]
 }

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

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