@anker-in/headless-ui 1.2.2 → 1.2.3-alpha.1778583232121

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaTextOverlay/MediaTextOverlay.tsx"],
+  "sourcesContent": ["'use client'\n\nimport React, { useRef, useMemo, useState, useEffect, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { cn } from '../../helpers/utils.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Media from '../Media/index.js'\nimport type { MediaTextOverlayProps, MediaTextOverlayItem } from './types.js'\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport { Heading } from '../../components/index.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"text-info-primary lg-desktop:size-[56px] size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n      fill=\"currentColor\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst componentType = 'video'\nconst componentName = 'media_text_overlay'\n\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Icons\n// \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst PlayIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M8 5.14v13.72L19 12 8 5.14z\" fill=\"white\" />\n  </svg>\n)\n\nconst PauseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"white\" />\n  </svg>\n)\n\ninterface ItemBlockProps {\n  data: MediaTextOverlayItem\n  configuration?: any\n  jIndex?: number\n  classNames?: any\n}\n\nconst ItemBlock = ({ data: item, configuration, jIndex, classNames = {} }: ItemBlockProps) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const videoRef = useRef<HTMLVideoElement>(null)\n\n  const { content, media } = item\n  const theme = configuration?.theme || 'light'\n  const size = configuration?.size || 'lg'\n  const onlyOne = configuration?.onlyOne || false\n  const isAutoPlay = configuration?.isAutoPlay ?? true\n\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  useExposure(ref, {\n    componentType,\n    componentName,\n    position: jIndex,\n    componentTitle: content,\n    navigation: configuration?.activeTab,\n  })\n\n  const hasVideo = useMemo(\n    () =>\n      [media.lgDesktop, media.desktop, media.laptop, media.pad, media.mobile].some(m => m?.mimeType === 'video/mp4'),\n    [media]\n  )\n\n  const handlePlayButtonClick = useCallback(() => {\n    const video = videoRef.current\n    if (video) {\n      if (video.paused) {\n        video.play()\n        setIsPlaying(true)\n      } else {\n        video.pause()\n        setIsPlaying(false)\n      }\n    }\n  }, [])\n\n  useEffect(() => {\n    const video = videoRef.current\n    if (!video || !hasVideo || !isAutoPlay) return\n\n    const observer = new IntersectionObserver(\n      entries => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            video.play().catch(error => {\n              console.warn('Video autoplay failed:', error)\n            })\n          } else {\n            video.pause()\n          }\n        })\n      },\n      { threshold: 0.5 }\n    )\n\n    observer.observe(video)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasVideo, isAutoPlay])\n\n  const sizeClasses = {\n    lg: 'h-[400px] laptop:h-[384px] desktop:h-[512px] lg-desktop:h-[640px]',\n    sm: 'h-[240px] laptop:h-[288px] desktop:h-[384px] lg-desktop:h-[480px]',\n  }\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper rounded-box group relative box-border w-full overflow-hidden',\n        onlyOne ? sizeClasses[size as keyof typeof sizeClasses] : 'desktop:h-[384px] lg-desktop:h-[480px] h-[360px]',\n        {\n          'aiui-dark': theme === 'dark',\n        }\n      )}\n      ref={ref}\n    >\n      <div className=\"absolute inset-0\">\n        <Media\n          pcImage={media.lgDesktop || media.desktop}\n          desktopImage={media.desktop}\n          laptopImage={media.laptop}\n          padImage={media.pad}\n          mobileImage={media.mobile}\n          videoClassName=\"absolute inset-0 size-full object-cover\"\n          imgClassName=\"absolute inset-0 size-full object-cover\"\n          videoRef={videoRef}\n          muted={true}\n          loop={true}\n          playsInline={true}\n          autoPlay={isAutoPlay}\n          onVideoPlay={() => setIsPlaying(true)}\n          onVideoPause={() => setIsPlaying(false)}\n          onVideoEnded={() => setIsPlaying(false)}\n        />\n      </div>\n\n      {hasVideo && (\n        <div className=\"desktop:p-8 absolute bottom-0 right-0 z-30 p-6\">\n          <button\n            type=\"button\"\n            aria-label={isPlaying ? 'Pause video' : 'Play video'}\n            onClick={handlePlayButtonClick}\n            className={cn(\n              'flex size-14 shrink-0 items-center justify-center rounded-full bg-white/20 transition-opacity hover:opacity-80',\n              classNames.playButton\n            )}\n          >\n            {isPlaying ? <PauseIcon /> : <PlayIcon />}\n          </button>\n        </div>\n      )}\n\n      <div\n        className={cn(\n          'text-info-primary laptop:px-6 laptop:pb-6 laptop:pr-24 desktop:px-8 desktop:pb-8 desktop:pr-28 absolute inset-x-0 bottom-0 z-20 flex flex-col gap-4 px-4 pb-4 pr-20',\n          classNames.overlay\n        )}\n      >\n        <div className={cn('flex items-end justify-between gap-4', classNames.content)}>\n          <Heading size={2} html={content} className=\"line-clamp-3\" />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MediaTextOverlay = React.forwardRef<HTMLDivElement, MediaTextOverlayProps>((props, ref) => {\n  const { data, className, classNames = {}, ...rest } = props\n  const { items = [], theme = 'dark', size = 'sm', isShowPagination = true, isAutoPlay = true } = data\n  const { locale = 'us' } = useAiuiContext()\n  const swiperRef = useRef<any>(null)\n  const [swiperState, setSwiperState] = useState({\n    isBeginning: true,\n    isEnd: false,\n  })\n\n  const breakpoints = useMemo(() => {\n    const len = items?.length || 0\n    return {\n      0: {\n        spaceBetween: 12,\n        slidesPerView: len > 1 ? 1.2 : 1,\n      },\n      768: {\n        spaceBetween: 12,\n        slidesPerView: len > 2 ? 2.3 : len > 1 ? 2 : 1,\n      },\n      1024: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 3),\n      },\n      1440: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n      1920: {\n        spaceBetween: 16,\n        slidesPerView: Math.min(len, 4),\n      },\n    }\n  }, [items?.length])\n\n  // \u751F\u6210\u552F\u4E00 ID\uFF0C\u79FB\u9664\u7279\u6B8A\u5B57\u7B26\u4EE5\u786E\u4FDD\u53EF\u7528\u4E8E CSS \u9009\u62E9\u5668\n  const id = React.useId().replace(/:/g, '')\n  const nextButtonClass = `${id}-custom-swiper-button-next`\n  const prevButtonClass = `${id}-custom-swiper-button-prev`\n\n  return (\n    <section\n      data-ui-component-id=\"MediaTextOverlay\"\n      ref={ref}\n      {...rest}\n      className={cn('mediaTextOverlayBlock text-info-primary', className, classNames.root)}\n    >\n      {items && items.length > 0 ? (\n        <div className=\"group relative\">\n          <Swiper\n            className=\"!overflow-visible\"\n            modules={[Navigation]}\n            navigation={{\n              nextEl: `.${nextButtonClass}`,\n              prevEl: `.${prevButtonClass}`,\n            }}\n            onSwiper={swiper => {\n              swiperRef.current = swiper\n              setSwiperState({\n                isBeginning: swiper.isBeginning,\n                isEnd: swiper.isEnd,\n              })\n            }}\n            onReachEnd={() => {\n              setSwiperState(prev => ({ ...prev, isEnd: true }))\n            }}\n            onReachBeginning={() => {\n              setSwiperState(prev => ({ ...prev, isBeginning: true }))\n            }}\n            onFromEdge={() => {\n              setSwiperState({ isBeginning: false, isEnd: false })\n            }}\n            breakpoints={breakpoints}\n          >\n            {items.map((item, jIndex) => (\n              <SwiperSlide key={`${id}-SwiperSlide-${jIndex}`} className=\"!flex !h-[unset]\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    theme,\n                    size,\n                    num: items.length,\n                    locale,\n                    onlyOne: items.length === 1,\n                    index: jIndex,\n                    isAutoPlay,\n                  }}\n                  jIndex={jIndex}\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n\n          {isShowPagination && items.length > 1 && (\n            <>\n              <button\n                className={`${prevButtonClass} absolute left-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isBeginning ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Previous slide\"\n              >\n                <PrevIcon disabled={swiperState.isBeginning} />\n              </button>\n              <button\n                className={`${nextButtonClass} absolute right-4 top-1/2 z-10 -translate-y-1/2 transition-opacity ${swiperState.isEnd ? 'pointer-events-none opacity-0' : 'opacity-100 hover:opacity-80'}`}\n                aria-label=\"Next slide\"\n              >\n                <NextIcon disabled={swiperState.isEnd} />\n              </button>\n            </>\n          )}\n        </div>\n      ) : null}\n    </section>\n  )\n})\n\nMediaTextOverlay.displayName = 'MediaTextOverlay'\n\nexport default withLayout(MediaTextOverlay)\nexport type { MediaTextOverlayProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useMemo", "useState", "useEffect", "useCallback", "withLayout", "cn", "useExposure", "useAiuiContext", "Media", "Heading", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "componentType", "componentName", "PlayIcon", "PauseIcon", "ItemBlock", "item", "configuration", "jIndex", "classNames", "ref", "videoRef", "content", "media", "theme", "size", "onlyOne", "isAutoPlay", "isPlaying", "setIsPlaying", "hasVideo", "m", "handlePlayButtonClick", "video", "observer", "entries", "entry", "error", "MediaTextOverlay", "props", "data", "className", "rest", "items", "isShowPagination", "locale", "swiperRef", "swiperState", "setSwiperState", "breakpoints", "len", "id", "nextButtonClass", "prevButtonClass", "swiper", "prev", "MediaTextOverlay_default"]
+}

package/dist/esm/biz-components/MediaTextOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MediaTextOverlay.js';
+export type { MediaTextOverlayProps, MediaTextOverlayData, MediaTextOverlayItem, MediaTextOverlaySemanticName, ResponsiveMedia, } from './types.js';

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

@@ -0,0 +1,2 @@
+import{default as t}from"./MediaTextOverlay.js";export{t as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaTextOverlay/index.tsx"],
+  "sourcesContent": ["export { default } from './MediaTextOverlay.js'\nexport type {\n  MediaTextOverlayProps,\n  MediaTextOverlayData,\n  MediaTextOverlayItem,\n  MediaTextOverlaySemanticName,\n  ResponsiveMedia,\n} from './types.js'\n"],
+  "mappings": "AAAA,OAAS,WAAAA,MAAe",
+  "names": ["default"]
+}

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

@@ -0,0 +1,24 @@
+import type { Media, Theme } from '../../types/props.js';
+export type MediaTextOverlaySemanticName = 'root' | 'mediaContainer' | 'media' | 'overlay' | 'content' | 'playButton';
+export interface ResponsiveMedia {
+    lgDesktop?: Media;
+    desktop?: Media;
+    laptop?: Media;
+    pad?: Media;
+    mobile?: Media;
+}
+export interface MediaTextOverlayItem {
+    content: string;
+    media: ResponsiveMedia;
+}
+export interface MediaTextOverlayData {
+    items: MediaTextOverlayItem[];
+    theme?: Theme;
+    size?: 'lg' | 'sm';
+    isShowPagination?: boolean;
+    isAutoPlay?: boolean;
+}
+export interface MediaTextOverlayProps extends React.HTMLAttributes<HTMLElement> {
+    data: MediaTextOverlayData;
+    classNames?: Partial<Record<MediaTextOverlaySemanticName, string>>;
+}

package/dist/esm/biz-components/MediaTextOverlay/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/esm/biz-components/MediaTextOverlay/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

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

@@ -1,5 +1,5 @@
-"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import z,{useImperativeHandle as H,useRef as P}from"react";import{useMediaQuery as T}from"react-responsive";import{Button as x,Heading as j,Picture as y,Text as C}from"../../components/index.js";import{withLayout as R}from"../../shared/Styles.js";import{cn as d,getLocalizedPath as _}from"../../helpers/utils.js";import{isVideo as b}from"../../shared/mimeType.js";import{useExposure as I}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{useAiuiContext as D}from"../AiuiProvider/index.js";const r="image",m="member_area",f=z.forwardRef(({data:g,className:k="",...v},h)=>{const{title:t,description:o,backgroundImage:s,mobileBackgroundImage:p,primaryButton:i,secondaryButton:a,theme:N,shape:B,primaryButtonHandler:c,secondaryButtonHandler:$}=g,q=T({query:"(max-width: 768px)"}),n=P(null),{locale:M="us"}=D();H(h,()=>n.current),I(n,{componentType:r,componentName:m,componentTitle:t,componentDescription:o});const E=()=>{console.log("primaryButtonHandler",c),c?.()},w=()=>{$?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",...v,className:d("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",k,{"aiui-dark":N==="dark","rounded-box":B==="rounded","h-[480px]":q}),ref:n,children:[b(s?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:s?.url,type:"video/mp4"})}):e(y,{source:s?.url,alt:s?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),b(p?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:p?.url,type:"video/mp4"})}):e(y,{source:p?.url,alt:p?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
+"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import z,{useImperativeHandle as P,useRef as T}from"react";import{useMediaQuery as _}from"react-responsive";import{Button as x,Heading as j,Picture as y,Text as C}from"../../components/index.js";import{withLayout as R}from"../../shared/Styles.js";import{cn as c,getLocalizedPath as D}from"../../helpers/utils.js";import{isVideo as b}from"../../shared/mimeType.js";import{useExposure as I}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{useAiuiContext as S}from"../AiuiProvider/index.js";const r="image",n="member_area",f=z.forwardRef(({data:g,className:k="",...v},h)=>{const{title:t,description:o,backgroundImage:s,mobileBackgroundImage:p,primaryButton:i,secondaryButton:a,theme:N,shape:$,primaryButtonHandler:d,secondaryButtonHandler:B}=g,q=_({query:"(max-width: 768px)"}),m=T(null),{locale:M="us",trackingData:E}=S();P(h,()=>m.current),I(m,{componentType:r,componentName:n,componentTitle:t,componentDescription:o});const w=()=>{console.log("primaryButtonHandler",d),d?.()},H=()=>{B?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("section",{"data-ui-component-id":"MemberEquity",...v,className:c("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",k,{"aiui-dark":N==="dark","rounded-box":$==="rounded","h-[480px]":q}),ref:m,children:[b(s?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:s?.url,type:"video/mp4"})}):e(y,{source:s?.url,alt:s?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),b(p?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:p?.url,type:"video/mp4"})}):e(y,{source:p?.url,alt:p?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:l("div",{className:`
               tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 
               laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
-            `,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(j,{as:"h2",size:3,className:"member-equity-title ",html:t}),e(C,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:o})]}),l("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&l(x,{"aria-label":t??o,variant:"secondary",onClick:w,className:d("member-equity-button-secondary ",u),as:"a",href:L(_(a.link||"",M),`${r}_${m}`),"data-headless-type-name":`${r}#${m}`,"data-headless-title-desc-button":`${t}#${o}#${a.text}`,children:[a.text,e("span",{className:"sr-only",children:t??o})]}),i&&i.text&&e(x,{variant:"primary",onClick:E,className:d("member-equity-button-primary ",u),"data-headless-type-name":`${r}#${m}`,"data-headless-title-desc-button":`${t}#${o}#${i.text}`,children:i.text})]})]})})]})});f.displayName="MemberEquity";var O=R(f);export{O as default};
+            `,children:[l("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(j,{as:"h2",size:3,className:"member-equity-title ",html:t}),e(C,{size:2,className:"member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]",html:o})]}),l("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a&&a.text&&l(x,{"aria-label":t??o,variant:"secondary",onClick:H,className:c("member-equity-button-secondary ",u),as:"a",href:L(D(a.link||"",M),`${E?.contextHandle||""}_${r}_${n}`),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${a.text}`,children:[a.text,e("span",{className:"sr-only",children:t??o})]}),i&&i.text&&e(x,{variant:"primary",onClick:w,className:c("member-equity-button-primary ",u),"data-headless-type-name":`${r}#${n}`,"data-headless-title-desc-button":`${t}#${o}#${i.text}`,children:i.text})]})]})})]})});f.displayName="MemberEquity";var W=R(f);export{W as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '', ...rest }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n    const { locale = 'us' } = useAiuiContext()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        {...rest}\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(\n                    getLocalizedPath(secondaryButton.link || '', locale),\n                    `${componentType}_${componentName}`\n                  )}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "getLocalizedPath", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "MemberEquity", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
+  "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n  ({ data, className = '', ...rest }, ref) => {\n    const {\n      title,\n      description,\n      backgroundImage,\n      mobileBackgroundImage,\n      primaryButton,\n      secondaryButton,\n      theme,\n      shape,\n      primaryButtonHandler,\n      secondaryButtonHandler,\n    } = data\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const innerRef = useRef<HTMLDivElement>(null)\n    const { locale = 'us', trackingData } = useAiuiContext()\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useExposure(innerRef, {\n      componentType,\n      componentName,\n      componentTitle: title,\n      componentDescription: description,\n    })\n\n    const handleButtonPrimaryClick = () => {\n      // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      console.log('primaryButtonHandler', primaryButtonHandler)\n      primaryButtonHandler?.()\n    }\n\n    const handleButtonSecondaryClick = () => {\n      // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n      secondaryButtonHandler?.()\n    }\n\n    const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n    return (\n      <section\n        data-ui-component-id=\"MemberEquity\"\n        {...rest}\n        className={cn(\n          'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n          'text-info-primary relative overflow-hidden',\n          className,\n          {\n            'aiui-dark': theme === 'dark',\n            'rounded-box': shape === 'rounded',\n            'h-[480px]': isMobile,\n          }\n        )}\n        ref={innerRef}\n      >\n        {isVideo(backgroundImage?.mimeType) ? (\n          <video\n            autoPlay\n            muted\n            playsInline\n            loop\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n          >\n            <source src={backgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={backgroundImage?.url}\n            alt={backgroundImage?.alt}\n            className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        {isVideo(mobileBackgroundImage?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n            <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={mobileBackgroundImage?.url}\n            alt={mobileBackgroundImage?.alt}\n            className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n          />\n        )}\n        <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n          <div\n            className={`\n              tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n              laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n            `}\n          >\n            <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n              <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n              <Text\n                size={2}\n                className={`member-equity-description lg-desktop:text-[18px] desktop:text-[16px] text-[14px]`}\n                html={description}\n              />\n            </div>\n            {/* \u6309\u94AE\u7EC4 */}\n            <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n              {secondaryButton && secondaryButton.text && (\n                <Button\n                  aria-label={title ?? description}\n                  variant=\"secondary\"\n                  onClick={handleButtonSecondaryClick}\n                  className={cn('member-equity-button-secondary ', lgButtonSize)}\n                  as=\"a\"\n                  href={trackUrlRef(\n                    getLocalizedPath(secondaryButton.link || '', locale),\n                    `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n                  )}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                >\n                  {secondaryButton.text}\n                  <span className=\"sr-only\">{title ?? description}</span>\n                </Button>\n              )}\n              {primaryButton && primaryButton.text && (\n                <Button\n                  variant=\"primary\"\n                  onClick={handleButtonPrimaryClick}\n                  className={cn('member-equity-button-primary ', lgButtonSize)}\n                  data-headless-type-name={`${componentType}#${componentName}`}\n                  data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                >\n                  {primaryButton.text}\n                </Button>\n              )}\n            </div>\n          </div>\n        </div>\n      </section>\n    )\n  }\n)\n\nMemberEquity.displayName = 'MemberEquity'\n\nexport default withLayout(MemberEquity)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withLayout", "cn", "getLocalizedPath", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "MemberEquity", "data", "className", "rest", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "locale", "trackingData", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
 }

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

@@ -1,2 +1,2 @@
-import{Fragment as A,jsx as t,jsxs as l}from"react/jsx-runtime";import Y,{useState as L,useEffect as q,useRef as O}from"react";import{useMediaQuery as Z}from"react-responsive";import{withLayout as F}from"../../shared/Styles.js";import j from"../../components/picture.js";import R from"../../components/button.js";import{Heading as U}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as E}from"../../components/grid.js";import W from"../Title/index.js";import{cn as P,spaceToHyphen as G,getLocalizedPath as _}from"../../helpers/utils.js";import S from"../SwiperBox/index.js";import{isVideo as H}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{useAiuiContext as le}from"../AiuiProvider/index.js";import{gaTrack as oe}from"../../shared/track.js";const h="image",f="p1_banner",N=({data:k,configuration:s,jIndex:v,spanType:T,title:$,onSecondaryButtonClick:B,onPrimaryButtonClick:I})=>{const[d,o]=L(!1),x=Z({query:"(max-width: 768px)"}),w=O(null),u=()=>{if(T)switch(T){case"full":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"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] 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"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(s?.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-[704] tablet:aspect-h-[480] 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-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(w,{componentType:h,componentName:f,position:v,componentTitle:k.title,componentDescription:k.description,navigation:s?.activeTab}),q(()=>{o(x)},[x]);const{theme:V="light",title:i,description:r,imageUrl:p,primaryButton:b,secondaryButton:n,imageMobileUrl:c,blockLink:M,video:g,youtubeId:m,isYouTube:C,id:y}=k,e="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("div",{className:P("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",u(),{"rounded-2xl":s?.shape==="rounded","aiui-dark":V==="dark","h-[400px]":d},"text-info-primary"),ref:w,children:[(M||n.link)&&t("a",{className:"absolute inset-0 z-10",href:z(_(M||n.link||"",s?.locale||"us"),`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${i}#${r}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[H(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(j,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),H(c?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:c?.url,type:"video/mp4"})}):t(j,{source:c?.url||p?.url,alt:c?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),l("div",{className:P("absolute inset-0 z-20 flex flex-col",T==="full"?"laptop:justify-center justify-end":"justify-end"),children:[l("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4",children:[l("div",{className:"flex flex-col gap-1",children:[t(U,{size:3,as:"h3",className:"item-title",html:i}),t(U,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:r})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&l(R,{"aria-label":i??r,className:P(e,"link-left"),variant:"secondary",as:"a","data-track":`${y}-link-left`,onClick:()=>{B?.(k)},href:z(_(n.link||"",s?.locale||"us"),`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${i}#${r}#${n.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:[n.text,t("span",{className:"sr-only",children:i??r})]}),b&&b.text&&t(R,{"aria-label":i??r,className:P(e,"link-right"),variant:"primary","data-track":`${y}-link-right`,as:"a",onClick:()=>{I?.(k)},href:z(_(b.link||"",s?.locale||"us"),`${h}_${f}`),"data-headless-type-name":`${h}#${f}`,"data-headless-title-desc-button":`${i}#${r}#${b.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:b.text})]})]}),(g?.url||m)&&t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t("button",{onClick:()=>{s?.onVideoPlayBtnClick?.(g?.url||m,C)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},D=Y.forwardRef((k,s)=>{const{data:v,className:T,onSecondaryButtonClick:$,onPrimaryButtonClick:B,...I}=k,{shape:d,sectionTitle:o,groupByTab:x=!1,items:w=[],carousel:u}=v,[V,i]=L(!1),[r,p]=L(""),[b,n]=L(""),{locale:c="us"}=le(),M=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},g=w.map(e=>e.tabName).filter(Boolean).filter((e,a,Q)=>Q.indexOf(e)===a),m=(e,a)=>{i(!0),a?n?.(e||""):p?.(e||"")},C=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},y=g.map(e=>({tabName:e,items:w.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,...I,className:P("multiLayoutGraphicBlock","text-info-primary",T),children:[o&&t(W,{data:{title:o},className:"section-title"}),x?l(X,{shape:d,align:"left",defaultValue:G(g[0]),children:[t(ee,{children:g.map((e,a)=>t(te,{value:G(e),onClick:()=>{oe({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:f,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),g.map((e,a)=>t(ae,{value:G(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(A,{children:[t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:y?.[e]||[],configuration:{shape:d,isTab:x,activeTab:e,title:o,num:y?.[e]?.length||0,locale:c,onVideoPlayBtnClick:m,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:N,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:C(y?.[e]?.length||0)}}}),u&&u?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:d,isTab:x,locale:c,onVideoPlayBtnClick:m,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:N,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(A,{children:[l(K,{className:"w-full",children:[w.map((e,a)=>t(E,{span:M(e.width??"full"),className:"laptop:block hidden",children:t(N,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:m,title:o},jIndex:a,spanType:e.width,onSecondaryButtonClick:$,onPrimaryButtonClick:B})},`${e?.title||""}${a}`)),w.map((e,a)=>t(E,{span:M("full"),className:"laptop:hidden block",children:t(N,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:m,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:d,locale:c,onVideoPlayBtnClick:m,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:N,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),V&&t(J,{visible:V,youTubeId:b,videoUrl:r,onCloseModal:()=>i(!1)})]})});D.displayName="MultiLayoutGraphicBlock";var xe=F(D);export{xe as default};
+import{Fragment as Y,jsx as t,jsxs as l}from"react/jsx-runtime";import O,{useState as L,useEffect as Z,useRef as F}from"react";import{useMediaQuery as J}from"react-responsive";import{withLayout as K}from"../../shared/Styles.js";import H from"../../components/picture.js";import R from"../../components/button.js";import{Heading as U}from"../../components/heading.js";import{VideoModal as W}from"../VideoModal/index.js";import{Grid as X,GridItem as D}from"../../components/grid.js";import ee from"../Title/index.js";import{cn as N,spaceToHyphen as _,getLocalizedPath as S}from"../../helpers/utils.js";import z from"../SwiperBox/index.js";import{isVideo as E}from"../../shared/mimeType.js";import{Tabs as te,TabsList as ae,TabsTrigger as se,TabsContent as le}from"../../components/tabs.js";import{useExposure as oe}from"../../hooks/useExposure.js";import{trackUrlRef as j}from"../../shared/trackUrlRef.js";import{useAiuiContext as A}from"../AiuiProvider/index.js";import{gaTrack as ie}from"../../shared/track.js";const m="image",h="p1_banner",V=({data:f,configuration:s,jIndex:v,spanType:T,title:$,onSecondaryButtonClick:B,onPrimaryButtonClick:I})=>{const[d,o]=L(!1),x=J({query:"(max-width: 768px)"}),k=F(null),u=()=>{if(T)switch(T){case"full":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"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] 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"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(s?.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-[704] tablet:aspect-h-[480] 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-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};oe(k,{componentType:m,componentName:h,position:v,componentTitle:f.title,componentDescription:f.description,navigation:s?.activeTab}),Z(()=>{o(x)},[x]);const{theme:C="light",title:i,description:r,imageUrl:p,primaryButton:w,secondaryButton:n,imageMobileUrl:c,blockLink:G,video:M,youtubeId:b,isYouTube:g,id:P}=f,y="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]",{trackingData:e}=A();return l("div",{className:N("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",u(),{"rounded-2xl":s?.shape==="rounded","aiui-dark":C==="dark","h-[400px]":d},"text-info-primary"),ref:k,children:[(G||n.link)&&t("a",{className:"absolute inset-0 z-10",href:j(S(G||n.link||"",s?.locale||"us"),`${e?.contextHandle||""}_${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${i}#${r}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[E(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(H,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),E(c?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:c?.url,type:"video/mp4"})}):t(H,{source:c?.url||p?.url,alt:c?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),l("div",{className:N("absolute inset-0 z-20 flex flex-col",T==="full"?"laptop:justify-center justify-end":"justify-end"),children:[l("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4",children:[l("div",{className:"flex flex-col gap-1",children:[t(U,{size:3,as:"h3",className:"item-title",html:i}),t(U,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:r})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&l(R,{"aria-label":i??r,className:N(y,"link-left"),variant:"secondary",as:"a","data-track":`${P}-link-left`,onClick:()=>{B?.(f)},href:j(S(n.link||"",s?.locale||"us"),`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${i}#${r}#${n.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:[n.text,t("span",{className:"sr-only",children:i??r})]}),w&&w.text&&t(R,{"aria-label":i??r,className:N(y,"link-right"),variant:"primary","data-track":`${P}-link-right`,as:"a",onClick:()=>{I?.(f)},href:j(S(w.link||"",s?.locale||"us"),`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${i}#${r}#${w.text}`,"data-headless-nav-position":`${s?.activeTab}#${v}`,children:w.text})]})]}),(M?.url||b)&&t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t("button",{onClick:()=>{s?.onVideoPlayBtnClick?.(M?.url||b,g)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},Q=O.forwardRef((f,s)=>{const{data:v,className:T,onSecondaryButtonClick:$,onPrimaryButtonClick:B,...I}=f,{shape:d,sectionTitle:o,groupByTab:x=!1,items:k=[],carousel:u}=v,[C,i]=L(!1),[r,p]=L(""),[w,n]=L(""),{locale:c="us",trackingData:G}=A(),M=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},b=k.map(e=>e.tabName).filter(Boolean).filter((e,a,q)=>q.indexOf(e)===a),g=(e,a)=>{i(!0),a?n?.(e||""):p?.(e||"")},P=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},y=b.map(e=>({tabName:e,items:k.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:s,...I,className:N("multiLayoutGraphicBlock","text-info-primary",T),children:[o&&t(ee,{data:{title:o},className:"section-title"}),x?l(te,{shape:d,align:"left",defaultValue:_(b[0]),children:[t(ae,{children:b.map((e,a)=>t(se,{value:_(e),onClick:()=>{ie({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:h,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),b.map((e,a)=>t(le,{value:_(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(Y,{children:[t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:y?.[e]||[],configuration:{shape:d,isTab:x,activeTab:e,title:o,num:y?.[e]?.length||0,locale:c,onVideoPlayBtnClick:g,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:P(y?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:P(y?.[e]?.length||0)}}}),u&&u?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:d,isTab:x,locale:c,onVideoPlayBtnClick:g,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(Y,{children:[l(X,{className:"w-full",children:[k.map((e,a)=>t(D,{span:M(e.width??"full"),className:"laptop:block hidden",children:t(V,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:g,title:o},jIndex:a,spanType:e.width,onSecondaryButtonClick:$,onPrimaryButtonClick:B})},`${e?.title||""}${a}`)),k.map((e,a)=>t(D,{span:M("full"),className:"laptop:hidden block",children:t(V,{data:e,configuration:{shape:d,locale:c,onVideoPlayBtnClick:g,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(z,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:d,locale:c,onVideoPlayBtnClick:g,title:o,onSecondaryButtonClick:$,onPrimaryButtonClick:B}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),C&&t(W,{visible:C,youTubeId:w,videoUrl:r,onCloseModal:()=>i(!1)})]})});Q.displayName="MultiLayoutGraphicBlock";var Te=K(Q);export{Te as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, 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 { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\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    if (spanType) {\n      switch (spanType) {\n        case 'full':\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 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] 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 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\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-[704] tablet:aspect-h-[480] 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-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\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    id,\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 cursor-pointer',\n        '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 || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\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 size-full overflow-hidden object-cover\">\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      <div\n        className={cn(\n          'absolute inset-0 z-20 flex flex-col',\n          spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n        )}\n      >\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4\">\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                data-track={`${id}-link-left`}\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-position={`${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                data-track={`${id}-link-right`}\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(video?.url || youtubeId) && (\n          <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\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          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as 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  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\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: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\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: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\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: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, 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 { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\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    if (spanType) {\n      switch (spanType) {\n        case 'full':\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 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] 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 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\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-[704] tablet:aspect-h-[480] 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-[427] 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-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\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    id,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n  const { trackingData } = useAiuiContext()\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        '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 || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${trackingData?.contextHandle || ''}_${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\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 size-full overflow-hidden object-cover\">\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      <div\n        className={cn(\n          'absolute inset-0 z-20 flex flex-col',\n          spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n        )}\n      >\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 flex w-fit flex-col gap-6 p-4\">\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                data-track={`${id}-link-left`}\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-position={`${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                data-track={`${id}-link-right`}\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(video?.url || youtubeId) && (\n          <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\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          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us', trackingData } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as 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  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\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: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\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: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\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: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "trackingData", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

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

@@ -1,4 +1,4 @@
-import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture as w,Text as l,Button as j,Container as M,Link as v,Heading as L,Grid as V,GridItem as R}from"../../components/index.js";import{Search as J,Close as O}from"../HeaderNavigation/icons/index.js";import{forwardRef as Q,useCallback as C,useMemo as D,useState as F,useEffect as U,useRef as X}from"react";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{getLocalizedPath as n}from"../../helpers/utils.js";import{withLayout as Z}from"../../shared/Styles.js";import{SearchStatus as h}from"./types.js";import{debounce as ee}from"es-toolkit";import{cn as g,atobID as I,highlightSearchWord as te}from"../../helpers/utils.js";const oe=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),S=Q(({data:t,onSearch:c,onClose:p,searchResult:i,isSearching:d,keywords:m,className:P,...T},B)=>{const{locale:a="us",copyWriting:ae}=Y(),[r,A]=F(""),[k,y]=F(!1),f=X(null);U(()=>{f.current&&f.current.focus({preventScroll:!0})},[]);const _=ee(e=>{c(e)},300),z=C(e=>{e.key==="Enter"&&!k&&window.open(n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),"_self")},[k,r,a,t?.moreLink]),W=D(()=>Array.isArray(m)&&m?.length?m.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[m,t?.popularWords]),q=C(e=>{switch(e.__typename||e.type){case"Product":return n(`/products${e.path}?q=${r.toLowerCase()}`,a);case"Article":return n(`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${r.toLowerCase()}`,a);default:break}},[r,a]),N=D(()=>{if(r){if(i?.totalCount)return h.Predict;if(!d)return h.Empty}else return h.Default},[i?.totalCount,r,d]);return s(M,{childClassName:"!bg-white",...T,className:g("relative",P),ref:B,children:[o("style",{children:`
+import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture as w,Text as l,Button as j,Container as M,Link as v,Heading as L,Grid as V,GridItem as R}from"../../components/index.js";import{Search as J,Close as O}from"../HeaderNavigation/icons/index.js";import{forwardRef as Q,useCallback as C,useMemo as D,useState as F,useEffect as U,useRef as X}from"react";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{atobID as I,cn as g,getLocalizedPath as n,highlightSearchWord as Z}from"../../helpers/utils.js";import{withLayout as ee}from"../../shared/Styles.js";import{SearchStatus as h}from"./types.js";import{debounce as te}from"es-toolkit";const oe=t=>!(t.metafields?.global?.HideSearch||t.metafields?.seo?.hidden||t.metafields?.seo?.setting?.noindex),S=Q(({data:t,onSearch:c,onClose:p,searchResult:i,isSearching:d,keywords:m,className:P,...T},B)=>{const{locale:a="us",copyWriting:ae}=Y(),[r,A]=F(""),[k,y]=F(!1),f=X(null);U(()=>{f.current&&f.current.focus({preventScroll:!0})},[]);const _=te(e=>{c(e)},300),z=C(e=>{e.key==="Enter"&&!k&&window.open(n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),"_self")},[k,r,a,t?.moreLink]),W=D(()=>Array.isArray(m)&&m?.length?m.map(e=>e.search_term):Array.isArray(t?.popularWords)&&t?.popularWords?.length?t?.popularWords.map(e=>e.popularWord):[],[m,t?.popularWords]),q=C(e=>{switch(e.__typename||e.type){case"Product":return n(`/products${e.path}?q=${r.toLowerCase()}`,a);case"Article":return n(`/blogs/${e.blog.handle}/${e.handle.replace("storefront-","")}?q=${r.toLowerCase()}`,a);default:break}},[r,a]),N=D(()=>{if(r){if(i?.totalCount)return h.Predict;if(!d)return h.Empty}else return h.Default},[i?.totalCount,r,d]);return s(M,{childClassName:"!bg-white",...T,className:g("relative",P),ref:B,children:[o("style",{children:`
             .navigation-search-component input:-webkit-autofill,
             .navigation-search-component input:-webkit-autofill:hover,
             .navigation-search-component input:-webkit-autofill:focus {
@@ -7,5 +7,5 @@ import{Fragment as E,jsx as o,jsxs as s}from"react/jsx-runtime";import{Picture a
               transition: background-color 9999s ease-in-out 0s !important;
               caret-color: #000;
             }
-          `}),s("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[o("input",{ref:f,value:r,onCompositionStart:()=>y(!0),onCompositionEnd:()=>y(!1),onKeyDown:z,onChange:e=>{A(e.target.value),e.target.value&&_(e.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[o(J,{className:"size-5 cursor-pointer",onClick:()=>c(r)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(O,{className:"size-5 cursor-pointer",onClick:p})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:N===h.Predict?s(E,{children:[s("div",{children:[s("div",{className:"flex items-center gap-1",children:[o(l,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&o(j,{as:"a",iconClassName:"size-4",href:n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(e=>oe(e)).slice(0,6)?.map(e=>o(v,{className:"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:q(e),children:o(l,{html:te(e.title,r),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),i?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.variants?.[0],b=`${u?.image?.url||e?.images?.[0]?.url}`,x=e?.title||e?.name,G=e?.description,H=e?.badge||"",K=n(`/products/${e?.handle}?variant=${I(u?.id)}`,a);return o($,{productImage:b,productName:x,productDesc:G,productBadge:H,listingLink:K},e.id)})]})]},"predict-advertising-card")]}):s(E,{children:[N===h.Empty&&o(l,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{children:[o(l,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"mt-2",children:[o(se,{data:t,keywords:W,locale:a}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&o(V,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>o(R,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:o("a",{href:n(`${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,a),className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),t?.hotProducts?.slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.custom_description,b=e?.badge||"",x=n(`/products/${e?.handle}?variant=${I(e?.shopify_id)}`,a);return o($,{productImage:e?.image,productName:e?.name,productDesc:u,productBadge:b,listingLink:x},e.shopify_id||e.id)})]})]},"empty-advertising-card")]})})]})});S.displayName="NavigationSearch";const $=({productImage:t,productName:c,productDesc:p,productBadge:i,className:d,listingLink:m})=>o(v,{href:m,className:"block no-underline hover:text-current",children:s("div",{className:g("rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",d),children:[o("div",{className:"shrink-0",children:o("img",{src:t,loading:"lazy",alt:c,width:90,height:90,className:"size-[96px] object-contain"})}),s("div",{className:"relative",children:[o("div",{className:" h-[24px] ",children:i&&o(l,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"})}),s("div",{children:[o(l,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c}),p&&o(l,{as:"p",html:p,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),se=({data:t,keywords:c,locale:p})=>o("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:c?.map((i,d)=>o("a",{href:n(`${t?.moreLink}?q=${i?.toLowerCase()}`,p),className:"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:i},d))});var ue=Z(S);export{oe as canSearch,ue as default};
+          `}),s("div",{className:"navigation-search-component laptop:h-[52px] desktop:h-[60px] desktop:pt-6 flex items-center justify-between gap-4 border-b border-b-gray-200 py-4 text-black",children:[o("input",{ref:f,value:r,onCompositionStart:()=>y(!0),onCompositionEnd:()=>y(!1),onKeyDown:z,onChange:e=>{A(e.target.value),e.target.value&&_(e.target.value)},type:"text",className:"flex-1 bg-white text-sm font-bold leading-[1.4] outline-none placeholder:text-[#4A4C56] focus-visible:!outline-none",placeholder:t?.placeholder}),s("div",{className:"flex items-center gap-3",children:[o(J,{className:"size-5 cursor-pointer",onClick:()=>c(r)}),o("div",{className:"h-[20px] w-px bg-[#E4E5E6]"}),o(O,{className:"size-5 cursor-pointer",onClick:p})]})]}),o("div",{className:"desktop:gap-12 desktop:py-6 flex flex-col gap-6 py-4 text-black",children:N===h.Predict?s(E,{children:[s("div",{children:[s("div",{className:"flex items-center gap-1",children:[o(l,{html:t?.suggestText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),i?.items?.length>6&&o(j,{as:"a",iconClassName:"size-4",href:n(`${t?.moreLink}?q=${r.toLowerCase()}`,a),className:"!p-0 !text-sm font-bold leading-[1.2]",variant:"link",children:t?.moreText})]}),o("div",{className:"mt-2 flex flex-col",children:i?.items?.filter(e=>oe(e)).slice(0,6)?.map(e=>o(v,{className:"rounded-sidebar-shelf w-full p-4 no-underline hover:bg-[#F5F5F7] hover:text-current",href:q(e),children:o(l,{html:Z(e.title,r),className:"cursor-pointer text-sm font-bold leading-[1.4]"})},e.id))})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),i?.items?.filter(e=>e.type.toLowerCase()==="product").slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.variants?.[0],b=`${u?.image?.url||e?.images?.[0]?.url}`,x=e?.title||e?.name,G=e?.description,H=e?.badge||"",K=n(`/products/${e?.handle}?variant=${I(u?.id)}`,a);return o($,{productImage:b,productName:x,productDesc:G,productBadge:H,listingLink:K},e.id)})]})]},"predict-advertising-card")]}):s(E,{children:[N===h.Empty&&o(l,{html:t?.noResultText,as:"p",className:"border-b border-[#E4E5E6] pb-6 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{children:[o(l,{html:t?.popularText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"mt-2",children:[o(se,{data:t,keywords:W,locale:a}),Array.isArray(t?.popularPages)&&!!t?.popularPages?.length&&o(V,{className:"laptop:gap-4 laptop:mt-4 mt-3 gap-3",children:t?.popularPages?.map(e=>o(R,{className:"tablet:col-span-6 laptop:p-3 desktop:p-4 laptop:col-span-3 col-span-12 p-2 hover:bg-[#F5F5F7]",children:o("a",{href:n(`${t?.moreLink}?q=${e?.popularPage.toLowerCase()}`,a),className:"line-clamp-1 cursor-pointer text-sm font-bold leading-[1.4]",children:e?.popularPage})},e?.id))})]})]}),s("div",{children:[o(l,{html:t?.hotProductsText,className:"text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),s("div",{className:"tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4 mt-2 grid grid-cols-1 gap-2",children:[t?.advertisingBgImg?.url&&o(v,{asChild:!t?.advertisingLink,href:n(t?.advertisingLink,a),children:s("div",{className:"rounded-sidebar-shelf relative overflow-hidden [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-500",children:[o(w,{source:t?.advertisingBgImg?.url,className:"laptop:h-[120px] h-[114px]",imgClassName:"object-cover h-full"}),s("div",{className:"absolute inset-x-0 bottom-0 p-4",children:[o(L,{size:2,html:t?.advertisingTitle||"Buy in Guide",className:g("font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})}),o(l,{html:t?.advertisingSubtitle||"20.000mAh",className:g("text-sm font-bold text-white",{"text-black":t?.advertisingTheme==="dark"})})]})]})}),t?.hotProducts?.slice(0,t?.advertisingBgImg?.url?7:8)?.map(e=>{const u=e?.custom_description,b=e?.badge||"",x=n(`/products/${e?.handle}?variant=${I(e?.shopify_id)}`,a);return o($,{productImage:e?.image,productName:e?.name,productDesc:u,productBadge:b,listingLink:x},e.shopify_id||e.id)})]})]},"empty-advertising-card")]})})]})});S.displayName="NavigationSearch";const $=({productImage:t,productName:c,productDesc:p,productBadge:i,className:d,listingLink:m})=>o(v,{href:m,className:"block no-underline hover:text-current",children:s("div",{className:g("rounded-sidebar-shelf flex shrink-0 gap-4 overflow-hidden bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110 [&_img]:hover:duration-500",d),children:[o("div",{className:"shrink-0",children:o("img",{src:t,loading:"lazy",alt:c,width:90,height:90,className:"size-[96px] object-contain"})}),s("div",{className:"relative",children:[o("div",{className:" h-[24px] ",children:i&&o(l,{as:"p",html:i,className:"text-brand-0 mb-1 inline-block h-full rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"})}),s("div",{children:[o(l,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:c}),p&&o(l,{as:"p",html:p,className:"lg-desktop:text-sm mt-1 line-clamp-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})]})}),se=({data:t,keywords:c,locale:p})=>o("div",{className:"laptop:gap-4 flex flex-wrap gap-3",children:c?.map((i,d)=>o("a",{href:n(`${t?.moreLink}?q=${i?.toLowerCase()}`,p),className:"rounded-sidebar-shelf laptop:p-3 desktop:p-4 cursor-pointer p-2 text-sm font-bold leading-[1.4] hover:bg-[#F5F5F7]",children:i},d))});var ge=ee(S);export{oe as canSearch,ge as default};
 //# sourceMappingURL=index.js.map