@anker-in/headless-ui 1.0.26-alpha.1762243303200 → 1.0.26-alpha.1762257871632

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
-  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full cursor-pointer overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full cursor-pointer overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n  imgUrl: Img\n  title: string\n  description?: string\n  textColor?: string\n  href?: string\n  video?: Video\n  mobileVideo?: Video\n  youtubeId?: string\n  isYouTube?: boolean\n  isShowIcon?: boolean\n  buttonText?: string\n  icon?: Img\n  theme?: Theme\n  extension?: {\n    text: string\n    textDesc: string\n    textTitle: string\n    textPcImg: Img\n    textMobileImg: Img\n  }\n  // textPcImg?: Img\n  // textMobileImg?: Img\n  // text?: string\n  // textDesc?: string\n  // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n  className?: string\n  data: {\n    title?: string\n    items?: GraphicType[]\n    itemShape?: 'round' | 'square'\n    itemTheme?: Theme\n  }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const handleAspect = () => {\n    switch (configuration.num) {\n      case 1:\n        return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n      case 2:\n        return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n      case 3:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n      default:\n        return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n    }\n  }\n\n useExposure(ref, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n    componentDescription: data?.description,\n    position: configuration?.index + 1,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        handleAspect(),\n        'graphicItem',\n        'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n        {\n          'aiui-dark': data.theme === 'dark',\n        }\n      )}\n    >\n      <div\n        className={cn('absolute inset-0', {\n          ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n        })}\n      >\n        <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n          {data?.href ? (\n            <a\n              aria-label={data?.title ?? data?.description}\n              href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n              className=\"block size-full cursor-pointer overflow-hidden\"\n              data-headless-nav-postion={`''#${configuration?.index + 1}`}\n              data-headless-type-name={`${componentType}#${componentName}`}\n              data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n            >\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </a>\n          ) : (\n            <div className=\"block size-full cursor-pointer overflow-hidden\">\n              <Picture\n                className=\"h-full\"\n                imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n                source={data?.imgUrl?.url}\n                alt={data?.imgUrl?.alt || ''}\n              />\n            </div>\n          )}\n          <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n            <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n              <div className=\"flex-1 overflow-hidden\">\n                <Text\n                  html={data?.title}\n                  style={{ color: data?.textColor }}\n                  // eslint-disable-next-line tailwindcss/classnames-order\n                  className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n                />\n                {data?.description && (\n                  <Heading\n                    html={data?.description}\n                    style={{\n                      color: data?.textColor,\n                    }}\n                    as=\"h3\"\n                    className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n                  />\n                )}\n              </div>\n              {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n                <button\n                  aria-label=\"Play Video\"\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n                  }}\n                  className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n                >\n                  <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n                  </svg>\n                </button>\n              )}\n              {data?.isShowIcon && data?.icon?.url && (\n                <button\n                  onClick={(e: any) => {\n                    e.preventDefault()\n                    e.stopPropagation()\n                    configuration?.onIconClick?.(data, configuration)\n                  }}\n                  className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n                >\n                  <Picture\n                    className=\"h-full\"\n                    imgClassName=\"h-full object-cover\"\n                    source={data?.icon?.url}\n                    alt={data?.icon?.alt || ''}\n                  />\n                </button>\n              )}\n            </div>\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                aria-label={data?.title ?? data?.description}\n                variant=\"secondary\"\n                className=\"bgButton mt-[8px] self-start\"\n                href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n                data-headless-nav-postion={`''#${configuration?.index + 1}`}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n  const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n  const innerRef = useRef<HTMLDivElement>(null)\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n  const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n  const [textVisible, setTextVisible] = useState<boolean>(false)\n\n  const handleSwiperShow = (width?: number) => {\n    const isShow = (data?.items as GraphicType[])?.length > 3\n    const isMobile = (data?.items as GraphicType[])?.length > 2\n    switch (width) {\n      case 1440:\n        return isShow ? 4 : data?.items?.length\n      case 1024:\n        return isShow ? 3 : data?.items?.length\n      case 768:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return isShow ? 2.3 : isMobile ? 2.3 : 2\n      default:\n        if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n        return 1.2\n    }\n  }\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n    componentTitle: data?.title,\n  })\n\n  useEffect(() => {\n    const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n    if (descriptions && descriptions.length > 0) {\n      let maxHeight = 0\n      descriptions.forEach((el: HTMLDivElement) => {\n        maxHeight = Math.max(maxHeight, el.offsetHeight)\n      })\n      descriptions.forEach((el: HTMLDivElement) => {\n        el.style.height = `${maxHeight}px`\n      })\n    }\n  }, [])\n\n  return (\n    <div className={cn('graphicBlock', className)} ref={innerRef}>\n      <div className=\"graphic-box\">\n        {data?.title && <Title data={{ title: data?.title }} />}\n        <SwiperBox\n          id=\"Graphic\"\n          className={cn('!overflow-visible')}\n          data={{\n            list: data?.items || [],\n            configuration: {\n              itemShape: data.itemShape,\n              num: data?.items?.length || 0,\n              onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n                setVisible(true)\n                if (data?.isYouTube) {\n                  setYouTubeId?.(data?.youtubeId || '')\n                } else {\n                  setVideoUrl?.(data?.video?.url || '')\n                  setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n                }\n              },\n              onIconClick: (data: GraphicType) => {\n                setTextVisible(true)\n                setCurrentItem(data)\n              },\n              title: data?.title,\n            },\n          }}\n          Slide={Item}\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: 1,\n            },\n            374: {\n              spaceBetween: 12,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(),\n            },\n            768: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(768),\n            },\n            1024: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1024),\n            },\n            1440: {\n              spaceBetween: 16,\n              freeMode: false,\n              slidesPerView: handleSwiperShow(1440),\n            },\n          }}\n        />\n      </div>\n      <VideoModal\n        visible={visible}\n        youTubeId={youTubeId}\n        onCloseModal={() => setVisible(false)}\n        videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n      />\n      <TextModal\n        textVisible={textVisible}\n        extension={currentItem?.extension}\n        onCloseModal={() => {\n          setTextVisible(false)\n          setCurrentItem(null)\n        }}\n      />\n    </div>\n  )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
+  "mappings": "aAyGc,cAAAA,EAmBA,QAAAC,MAnBA,oBAxGd,OAAS,iBAAAC,MAAqB,mBAC9B,OAAOC,GAAS,aAAAC,EAAW,uBAAAC,EAAqB,UAAAC,EAAQ,YAAAC,MAAgB,QACxE,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAe,wBACtB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAOC,MAAW,oBAClB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,aAAAC,MAAiB,wBAE1B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAG5B,MAAMC,EAAgB,QAChBC,EAAgB,UAuChBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,EAAMnB,EAAuB,IAAI,EACjCoB,EAAe,IAAM,CACzB,OAAQF,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAED,OAAAN,EAAYO,EAAK,CACd,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,EAGCxB,EAAC,OACC,IAAKyB,EACL,UAAWjB,EACTkB,EAAa,EACb,cACA,uFACA,CACE,YAAaH,EAAK,QAAU,MAC9B,CACF,EAEA,SAAAvB,EAAC,OACC,UAAWQ,EAAG,mBAAoB,CAC/B,gDAAkDgB,GAAe,YAAc,OAClF,CAAC,EAED,SAAAvB,EAAC,OAAI,UAAU,0DACZ,UAAAsB,GAAM,KACLvB,EAAC,KACC,aAAYuB,GAAM,OAASA,GAAM,YACjC,KAAMJ,EAAYI,GAAM,MAAQ,GAAI,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACvE,UAAU,iDACV,4BAA2B,MAAMG,GAAe,MAAQ,CAAC,GACzD,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,WAAW,GAEpE,SAAAvB,EAACa,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACtB,IAAKA,GAAM,QAAQ,KAAO,GAC5B,EACF,EAEAvB,EAAC,OAAI,UAAU,iDACb,SAAAA,EAACa,EAAA,CACC,UAAU,SACV,aAAa,yEACb,OAAQU,GAAM,QAAQ,IACtB,IAAKA,GAAM,QAAQ,KAAO,GAC5B,EACF,EAEFtB,EAAC,OAAI,UAAU,yEACb,UAAAA,EAAC,OAAI,UAAWO,EAAG,iCAAkC,gBAAgB,EACnE,UAAAP,EAAC,OAAI,UAAU,yBACb,UAAAD,EAACc,EAAA,CACC,KAAMS,GAAM,MACZ,MAAO,CAAE,MAAOA,GAAM,SAAU,EAEhC,UAAU,kGACZ,EACCA,GAAM,aACLvB,EAACY,EAAA,CACC,KAAMW,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,wJACZ,GAEJ,EACC,CAACA,GAAM,aAAeA,GAAM,OAAO,KAAOA,GAAM,YAC/CvB,EAAC,UACC,aAAW,aACX,QAAU2B,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBH,GAAe,sBAAsBA,GAAe,OAAS,EAAGD,CAAI,CACtE,EACA,UAAU,+GAEV,SAAAvB,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEDuB,GAAM,YAAcA,GAAM,MAAM,KAC/BvB,EAAC,UACC,QAAU2B,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBH,GAAe,cAAcD,EAAMC,CAAa,CAClD,EACA,UAAU,8HAEV,SAAAxB,EAACa,EAAA,CACC,UAAU,SACV,aAAa,sBACb,OAAQU,GAAM,MAAM,IACpB,IAAKA,GAAM,MAAM,KAAO,GAC1B,EACF,GAEJ,EACCA,EAAK,YACJvB,EAACW,EAAA,CACC,GAAG,IACH,aAAYY,GAAM,OAASA,GAAM,YACjC,QAAQ,YACR,UAAU,+BACV,KAAMJ,EAAYI,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,4BAA2B,MAAMG,GAAe,MAAQ,CAAC,GACzD,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,WAAW,IAAIA,GAAM,UAAU,GAEvF,SAAAA,EAAK,WACR,GAEJ,GACF,EACF,EACF,CAEJ,EAEMK,EAAUzB,EAAM,WAAyC,CAAC,CAAE,KAAAoB,EAAM,UAAAM,CAAU,EAAGJ,IAAQ,CAC3F,MAAMK,EAAW5B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD6B,EAAWzB,EAAuB,IAAI,EACtC,CAAC0B,EAASC,CAAU,EAAI1B,EAAkB,EAAK,EAC/C,CAAC2B,EAAUC,CAAW,EAAI5B,EAAiB,EAAE,EAC7C,CAAC6B,EAAWC,CAAY,EAAI9B,EAAiB,EAAE,EAC/C,CAAC+B,EAAgBC,CAAiB,EAAIhC,EAAiB,EAAE,EACzD,CAACiC,EAAaC,CAAc,EAAIlC,EAA6B,IAAI,EACjE,CAACmC,EAAaC,CAAc,EAAIpC,EAAkB,EAAK,EAEvDqC,EAAoBC,GAAmB,CAC3C,MAAMC,EAAUvB,GAAM,OAAyB,OAAS,EAClDO,EAAYP,GAAM,OAAyB,OAAS,EAC1D,OAAQsB,EAAO,CACb,IAAK,MACH,OAAOC,EAAS,EAAIvB,GAAM,OAAO,OACnC,IAAK,MACH,OAAOuB,EAAS,EAAIvB,GAAM,OAAO,OACnC,IAAK,KACH,OAAKA,GAAM,OAAyB,SAAW,EAAU,EAClDuB,GAAehB,EAAN,IAAuB,EACzC,QACE,OAAKP,GAAM,OAAyB,SAAW,EAAU,EAClD,GACX,CACF,EAEA,OAAAlB,EAAoBoB,EAAK,IAAMM,EAAS,OAAyB,EAEjEb,EAAYa,EAAU,CACpB,cAAAX,EACA,cAAAC,EACA,eAAgBE,GAAM,KACxB,CAAC,EAEDnB,EAAU,IAAM,CACd,MAAM2C,EAAehB,EAAS,SAAS,iBAAiC,sBAAsB,EAC9F,GAAIgB,GAAgBA,EAAa,OAAS,EAAG,CAC3C,IAAIC,EAAY,EAChBD,EAAa,QAASE,GAAuB,CAC3CD,EAAY,KAAK,IAAIA,EAAWC,EAAG,YAAY,CACjD,CAAC,EACDF,EAAa,QAASE,GAAuB,CAC3CA,EAAG,MAAM,OAAS,GAAGD,CAAS,IAChC,CAAC,CACH,CACF,EAAG,CAAC,CAAC,EAGH/C,EAAC,OAAI,UAAWO,EAAG,eAAgBqB,CAAS,EAAG,IAAKE,EAClD,UAAA9B,EAAC,OAAI,UAAU,cACZ,UAAAsB,GAAM,OAASvB,EAACe,EAAA,CAAM,KAAM,CAAE,MAAOQ,GAAM,KAAM,EAAG,EACrDvB,EAACU,EAAA,CACC,GAAG,UACH,UAAWF,EAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMe,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,EAC5B,oBAAqB,CAAC2B,EAAW3B,IAAsB,CACrDU,EAAW,EAAI,EACXV,GAAM,UACRc,IAAed,GAAM,WAAa,EAAE,GAEpCY,IAAcZ,GAAM,OAAO,KAAO,EAAE,EACpCgB,IAAoBhB,GAAM,aAAa,KAAO,EAAE,EAEpD,EACA,YAAcA,GAAsB,CAClCoB,EAAe,EAAI,EACnBF,EAAelB,CAAI,CACrB,EACA,MAAOA,GAAM,KACf,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAesB,EAAiB,CAClC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,GACF,EACA5C,EAACgB,EAAA,CACC,QAASgB,EACT,UAAWI,EACX,aAAc,IAAMH,EAAW,EAAK,EACpC,SAAUH,GAAWQ,GAAkBJ,EACzC,EACAlC,EAACiB,EAAA,CACC,YAAayB,EACb,UAAWF,GAAa,UACxB,aAAc,IAAM,CAClBG,EAAe,EAAK,EACpBF,EAAe,IAAI,CACrB,EACF,GACF,CAEJ,CAAC,EAEDb,EAAQ,YAAc,UAEtB,IAAOuB,GAAQ1C,EAAWmB,CAAO",
   "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
 }

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

@@ -0,0 +1,22 @@
+import type { Img } from '../../types/props.js';
+export type GraphicMoreDataType = {
+    img: Img;
+    mobileImg: Img;
+    title: string;
+    description: string;
+    theme: 'light' | 'dark';
+    fullWidth: 'true' | 'false';
+    span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+};
+type GraphicMoreType = {
+    data: {
+        shape?: 'rounded' | 'square';
+        productsTab: GraphicMoreDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<GraphicMoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+"use client";import{Fragment as g,jsx as t,jsxs as l}from"react/jsx-runtime";import{cn as o}from"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as n}from"../../shared/Styles.js";import{Grid as f,GridItem as u}from"../../components/gird.js";import{Picture as s,Text as a}from"../../components/index.js";const x=p=>{const{data:m,className:c}=p,{productsTab:d,shape:i}=m;return l(g,{children:[t("div",{className:o("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:t(f,{className:o("tablet:gap-4 grid grid-cols-12 gap-3 ",c),children:d?.map((e,r)=>l(u,{span:e.span,className:o("text-info-primary relative w-full overflow-hidden",i==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":e.theme==="dark"}),children:[t(s,{source:e.img.url,className:"size-full",imgClassName:""}),l("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"line-clamp-2 lg-desktop:text-[24px] text-[20px] leading-[1.2] font-bold"}),e.description&&t(a,{html:e.description,className:"line-clamp-2 desktop:text-lg text-sm font-bold"})]})]},r))})}),t("div",{className:"tablet:hidden block text-[#1D1D1F]",children:t("div",{className:" flex gap-[12px] flex-wrap",children:d?.map((e,r)=>l("div",{className:o("text-info-primary relative overflow-hidden",i==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":e.theme==="dark"},e?.fullWidth==="true"?"w-full flex-none":" w-[calc(50%-6px)]"),children:[t(s,{source:e.mobileImg.url,className:"size-full",imgClassName:"h-full object-cover"}),l("div",{className:"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"text-xl font-bold leading-[1.2] line-clamp-3"}),e.description&&t(a,{html:e.description,className:"text-xl font-bold line-clamp-2"})]})]},r))})})]})};var w=n(x);export{w as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/GraphicMore/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type GraphicMoreDataType = {\n  img: Img\n  mobileImg: Img\n  title: string\n  description: string\n  theme: 'light' | 'dark'\n  fullWidth: 'true' | 'false'\n  span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype GraphicMoreType = {\n  data: {\n    shape?: 'rounded' | 'square'\n    productsTab: GraphicMoreDataType[]\n  }\n  className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n  const { data, className } = props\n  const { productsTab, shape } = data\n\n  return (\n    <>\n      <div className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}>\n        <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n          {productsTab?.map((item, index) => {\n            return (\n              <GridItem\n                key={index}\n                span={item.span}\n                className={cn(\n                  'text-info-primary relative w-full overflow-hidden',\n                  shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n                  '',\n                  {\n                    'aiui-dark': item.theme === 'dark',\n                  }\n                )}\n              >\n                <Picture source={item.img.url} className=\"size-full\" imgClassName=\"\" />\n                <div className=\"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n                  {item.title && (\n                    <Text\n                      html={item.title}\n                      as=\"p\"\n                      className=\"line-clamp-2 lg-desktop:text-[24px] text-[20px] leading-[1.2] font-bold\"\n                    />\n                  )}\n                  {item.description && (\n                    <Text html={item.description} className=\"line-clamp-2 desktop:text-lg text-sm font-bold\" />\n                  )}\n                </div>\n              </GridItem>\n            )\n          })}\n        </Grid>\n      </div>\n      <div className='tablet:hidden block text-[#1D1D1F]'>\n        <div className=\" flex gap-[12px] flex-wrap\">\n        {productsTab?.map((it, ind) => {\n          return (\n            <div\n              key={ind}\n              className={cn(\n                'text-info-primary relative overflow-hidden',\n                shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n                { 'aiui-dark': it.theme === 'dark' },\n                it?.fullWidth === 'true' \n                  ? 'w-full flex-none'  // \u5360\u6EE1\u6574\u884C\n                  : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n              )}\n            >\n              <Picture source={it.mobileImg.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n              <div className=\"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n                {it.title && <Text html={it.title} as=\"p\" className=\"text-xl font-bold leading-[1.2] line-clamp-3\" />}\n                {it.description && <Text html={it.description} className=\"text-xl font-bold line-clamp-2\" />}\n              </div>\n            </div>\n          )\n        })}\n        </div>\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(GraphicMore)\n"],
+  "mappings": "aA+BI,mBAAAA,EAiBY,OAAAC,EACA,QAAAC,MAlBZ,oBA9BJ,OAAS,MAAAC,MAAU,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAoB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,OACET,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAWE,EAAG,sBAAuB,sEAAsE,EAC9G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCS,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,GAAG,EACrEb,EAAC,OAAI,UAAU,oJACZ,UAAAa,EAAK,OACJd,EAACO,EAAA,CACC,KAAMO,EAAK,MACX,GAAG,IACH,UAAU,0EACZ,EAEDA,EAAK,aACJd,EAACO,EAAA,CAAK,KAAMO,EAAK,YAAa,UAAU,iDAAiD,GAE7F,IAvBKC,CAwBP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACd,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,EAAG,QAAU,MAAO,EACnCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,EAAG,UAAU,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC5Ff,EAAC,OAAI,UAAU,2FACZ,UAAAe,EAAG,OAAShB,EAACO,EAAA,CAAK,KAAMS,EAAG,MAAO,GAAG,IAAI,UAAU,+CAA+C,EAClGA,EAAG,aAAehB,EAACO,EAAA,CAAK,KAAMS,EAAG,YAAa,UAAU,iCAAiC,GAC5F,IAdKC,CAeP,CAEH,EACD,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
+  "names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Grid", "GridItem", "Picture", "Text", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind", "GraphicMore_default"]
+}

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

@@ -1,2 +1,2 @@
-import{Fragment as U,jsx as t,jsxs as i}from"react/jsx-runtime";import E,{useState as T,useEffect as H,useRef as j}from"react";import{useMediaQuery as D}from"react-responsive";import{withLayout as Q}from"../../shared/Styles.js";import G from"../../components/picture.js";import C from"../../components/button.js";import{Heading as _}from"../../components/heading.js";import{VideoModal as Y}from"../VideoModal/index.js";import{Grid as q,GridItem as z}from"../../components/gird.js";import A from"../Title/index.js";import{cn as y,spaceToHyphen as P}from"../../helpers/utils.js";import V from"../SwiperBox/index.js";import{isVideo as S}from"../../shared/mimeType.js";import{Tabs as O,TabsList as Z,TabsTrigger as F,TabsContent as J}from"../../components/tabs.js";import{useExposure as K}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{gaTrack as W}from"../../shared/track.js";const m="image",h="p1_banner",B=({data:f,configuration:c,jIndex:l,spanType:o,title:x})=>{const[k,u]=T(!1),g=D({query:"(max-width: 768px)"}),v=j(null),M=()=>{if(o)switch(o){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(c?.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]"}};K(v,{componentType:m,componentName:h,position:l,componentTitle:f.title,componentDescription:f.description,navigation:c?.activeTab}),H(()=>{u(g)},[g]);const{theme:$="light",title:n,description:d,imageUrl:p,primaryButton:r,secondaryButton:s,imageMobileUrl:w,blockLink:b,video:e,youtubeId:a,isYouTube:N}=f,I="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return i("div",{className:y("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",M(),{"rounded-2xl":c?.shape==="rounded","aiui-dark":$==="dark","h-[400px]":k},"text-info-primary"),ref:v,children:[(b||s.link)&&t("a",{className:"absolute inset-0 z-10",href:L(b||s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,"aria-hidden":"true",tabIndex:-1}),i("div",{className:"absolute inset-0",children:[S(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden overflow-hidden w-full h-full object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(G,{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}`}}),S(w?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block overflow-hidden w-full h-full object-cover",children:t("source",{src:w?.url,type:"video/mp4"})}):t(G,{source:w?.url||p?.url,alt:w?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),i("div",{className:y("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":f?.width==="full"}),children:[i("div",{className:"flex flex-col gap-1",children:[t(_,{size:3,as:"h3",className:"item-title",html:n}),t(_,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:d})]}),i("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&i(C,{"aria-label":n??d,className:y(I,"link-left"),variant:"secondary",as:"a",href:L(s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${s.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:[s.text,t("span",{className:"sr-only",children:n??d})]}),r&&r.text&&t(C,{"aria-label":n??d,className:y(I,"link-right"),variant:"primary",as:"a",href:L(r.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${r.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:r.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{c?.onVideoPlayBtnClick?.(e?.url||a,N)},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"})})})})})]})},R=E.forwardRef((f,c)=>{const{shape:l,sectionTitle:o,groupByTab:x=!1,items:k=[],carousel:u}=f.data,[g,v]=T(!1),[M,$]=T(""),[n,d]=T(""),p=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},r=k.map(e=>e.tabName).filter(Boolean).filter((e,a,N)=>N.indexOf(e)===a),s=(e,a)=>{v(!0),a?d?.(e||""):$?.(e||"")},w=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},b=r.map(e=>({tabName:e,items:k.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return i("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:c,className:y("multiLayoutGraphicBlock","text-info-primary",f.className),children:[o&&t(A,{data:{title:o},className:"section-title"}),x?i(O,{shape:l,align:"left",defaultValue:P(r[0]),children:[t(Z,{children:r.map((e,a)=>t(F,{value:P(e),onClick:()=>{W({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))}),r.map((e,a)=>t(J,{value:P(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:i(U,{children:[t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:b?.[e]||[],configuration:{shape:l,isTab:x,activeTab:e,title:o,num:b?.[e]?.length||0,onVideoPlayBtnClick:s}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0)}}}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:l,isTab:x,onVideoPlayBtnClick:s,title:o}},Slide:B,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))]}):i(U,{children:[i(q,{className:"w-full",children:[k.map((e,a)=>t(z,{span:p(e.width??"full"),className:"laptop:block hidden",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:e.width})},`${e?.title||""}${a}`)),k.map((e,a)=>t(z,{span:p("full"),className:"laptop:hidden block",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:l,onVideoPlayBtnClick:s,title:o}},Slide:B,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]}),g&&t(Y,{visible:g,youTubeId:n,videoUrl:M,onCloseModal:()=>v(!1)})]})});R.displayName="MultiLayoutGraphicBlock";var fe=Q(R);export{fe as default};
+import{Fragment as U,jsx as t,jsxs as i}from"react/jsx-runtime";import E,{useState as T,useEffect as H,useRef as j}from"react";import{useMediaQuery as D}from"react-responsive";import{withLayout as Q}from"../../shared/Styles.js";import G from"../../components/picture.js";import C from"../../components/button.js";import{Heading as _}from"../../components/heading.js";import{VideoModal as Y}from"../VideoModal/index.js";import{Grid as q,GridItem as z}from"../../components/gird.js";import A from"../Title/index.js";import{cn as y,spaceToHyphen as P}from"../../helpers/utils.js";import V from"../SwiperBox/index.js";import{isVideo as S}from"../../shared/mimeType.js";import{Tabs as O,TabsList as Z,TabsTrigger as F,TabsContent as J}from"../../components/tabs.js";import{useExposure as K}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{gaTrack as W}from"../../shared/track.js";const m="image",h="p1_banner",B=({data:f,configuration:c,jIndex:l,spanType:o,title:x})=>{const[k,u]=T(!1),g=D({query:"(max-width: 768px)"}),v=j(null),M=()=>{if(o)switch(o){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(c?.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]"}};K(v,{componentType:m,componentName:h,position:l,componentTitle:f.title,componentDescription:f.description,navigation:c?.activeTab}),H(()=>{u(g)},[g]);const{theme:$="light",title:n,description:d,imageUrl:p,primaryButton:r,secondaryButton:s,imageMobileUrl:w,blockLink:b,video:e,youtubeId:a,isYouTube:N}=f,I="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return i("div",{className:y("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",M(),{"rounded-2xl":c?.shape==="rounded","aiui-dark":$==="dark","h-[400px]":k},"text-info-primary"),ref:v,children:[(b||s.link)&&t("a",{className:"absolute inset-0 z-10",href:L(b||s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,"aria-hidden":"true",tabIndex:-1}),i("div",{className:"absolute inset-0",children:[S(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden overflow-hidden w-full h-full object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(G,{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}`}}),S(w?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block overflow-hidden w-full h-full object-cover",children:t("source",{src:w?.url,type:"video/mp4"})}):t(G,{source:w?.url||p?.url,alt:w?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),i("div",{className:y("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":f?.width==="full"}),children:[i("div",{className:"flex flex-col gap-1",children:[t(_,{size:3,as:"h3",className:"item-title",html:n}),t(_,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:d})]}),i("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&i(C,{"aria-label":n??d,className:y(I,"link-left"),variant:"secondary",as:"a",href:L(s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${s.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:[s.text,t("span",{className:"sr-only",children:n??d})]}),r&&r.text&&t(C,{"aria-label":n??d,className:y(I,"link-right"),variant:"primary",as:"a",href:L(r.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${r.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:r.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{c?.onVideoPlayBtnClick?.(e?.url||a,N)},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"})})})})})]})},R=E.forwardRef((f,c)=>{const{shape:l,sectionTitle:o,groupByTab:x=!1,items:k=[],carousel:u}=f.data,[g,v]=T(!1),[M,$]=T(""),[n,d]=T(""),p=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},r=k.map(e=>e.tabName).filter(Boolean).filter((e,a,N)=>N.indexOf(e)===a),s=(e,a)=>{v(!0),a?d?.(e||""):$?.(e||"")},w=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},b=r.map(e=>({tabName:e,items:k.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return i("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:c,className:y("multiLayoutGraphicBlock","text-info-primary",f.className),children:[o&&t(A,{data:{title:o},className:"section-title"}),x?i(O,{shape:l,align:"left",defaultValue:P(r[0]),children:[t(Z,{children:r.map((e,a)=>t(F,{value:P(e),onClick:()=>{W({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))}),r.map((e,a)=>t(J,{value:P(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:i(U,{children:[t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:b?.[e]||[],configuration:{shape:l,isTab:x,activeTab:e,title:o,num:b?.[e]?.length||0,onVideoPlayBtnClick:s}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0)}}}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:l,isTab:x,onVideoPlayBtnClick:s,title:o}},Slide:B,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))]}):i(U,{children:[i(q,{className:"w-full",children:[k.map((e,a)=>t(z,{span:p(e.width??"full"),className:"laptop:block hidden",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:e.width})},`${e?.title||""}${a}`)),k.map((e,a)=>t(z,{span:p("full"),className:"laptop:hidden block",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:l,onVideoPlayBtnClick:s,title:o}},Slide:B,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]}),g&&t(Y,{visible:g,youTubeId:n,videoUrl:M,onCloseModal:()=>v(!1)})]})});R.displayName="MultiLayoutGraphicBlock";var fe=Q(R);export{fe 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/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } 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 { 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}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    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  } = 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(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden overflow-hidden w-full h-full 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 overflow-hidden w-full h-full 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          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\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      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.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                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 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                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\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={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\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={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\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: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle },\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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",
+  "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/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } 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 { 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}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    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  } = 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(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden overflow-hidden w-full h-full 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 overflow-hidden w-full h-full 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          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\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      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.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                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 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                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\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={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\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={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\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: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle },\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", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

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

@@ -0,0 +1,7 @@
+declare function Paginator({ items, // 仅用来计算总数；若数据很大，建议传长度 itemsLength
+itemsLength, // 优先使用 itemsLength（如果你不想把整个数组传进来）
+pageSize, currentPage: controlledPage, // 受控 current
+onPageChange, // 当受控时由父组件接管
+initialPage, // 非受控时的初始页
+className, }: any): import("react/jsx-runtime").JSX.Element;
+export default Paginator;

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

@@ -0,0 +1,7 @@
+import{jsx as d,jsxs as w}from"react/jsx-runtime";import{useMemo as M,useState as g,useCallback as k}from"react";import"../../shared/Styles.js";function N(r,s){const t=[];for(let a=r;a<=s;a++)t.push(a);return t}function $(r,s){if(r<=8)return N(1,r);const t=new Set;t.add(1),t.add(2),t.add(r-1),t.add(r),t.add(s-1),t.add(s),t.add(s+1);const a=[...t].filter(e=>e>=1&&e<=r).sort((e,l)=>e-l),i=[];for(let e=0;e<a.length;e++){const l=a[e];i.push(l);const p=a[e+1];p&&p-l>1&&i.push("...")}return i}function v({items:r=[],itemsLength:s,pageSize:t=10,currentPage:a,onPageChange:i,initialPage:e=1,className:l=""}){const p=typeof s=="number"?s:r.length,o=Math.max(1,Math.ceil(p/Math.max(1,t))),[y,x]=g(()=>Math.min(Math.max(1,e||1),o)),n=typeof a=="number"?a:y,m=k(u=>{if(u===n)return;const b=Math.min(Math.max(1,u),o);typeof i=="function"&&i?.(b),typeof a!="number"&&x(b)},[n,o,i,a]),h=M(()=>$(o,n),[o,n]);return w("nav",{className:`flex gap-2 justify-center items-center paginator-wrapper ${l}`,"aria-label":"\u5206\u9875\u5BFC\u822A",children:[d("style",{children:`
+          .pg-btn[aria-disabled='true'] {
+            opacity: 0.45;
+            cursor: not-allowed;
+          }
+        `}),d("button",{"aria-label":"\u4E0A\u4E00\u9875","aria-disabled":n===1,disabled:n===1,className:"mr-1 text-xl cursor-pointer",onClick:()=>m(n-1),children:"\u2039"}),h.map((u,b)=>{if(u==="...")return d("span",{className:"pg-ellipsis","aria-hidden":!0,children:"\u2026"},`e-${b}`);const c=u,f=c===n;return d("button",{"aria-label":`\u7B2C ${c} \u9875`,onClick:()=>m(c),"aria-current":f?"page":void 0,className:`box-border text-sm font-bold py-2 px-3.5 border-transparent ${f?"bg-[#000] text-[#FFF]":""}`,children:c},c)}),d("button",{"aria-label":"\u4E0B\u4E00\u9875","aria-disabled":n===o,disabled:n===o,className:"ml-1 text-xl cursor-pointer",onClick:()=>m(n+1),children:"\u203A"})]})}var A=v;export{A as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/Paginator/index.tsx"],
+  "sourcesContent": ["import { useMemo, useState, useCallback } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction range(start: number, end: number) {\n  const out = []\n  for (let i = start; i <= end; i++) out.push(i)\n  return out\n}\n/**\n * \u751F\u6210\u8981\u663E\u793A\u7684\u9875\u7801\u6570\u7EC4\uFF0C\u8FD4\u56DE\u7684\u6570\u7EC4\u4E2D\u5305\u542B\u6570\u5B57\u9875\u7801\u548C\u5B57\u7B26\u4E32 '...' \u8868\u793A\u7701\u7565\u53F7\n * \u7B97\u6CD5\u7279\u70B9\uFF1A\u4E0D\u521B\u5EFA\u957F\u6570\u7EC4\uFF08\u4E0D\u4F1A\u5BF9 pageCount \u505A map\uFF09\u2014\u2014\u53EA\u5C06\u9700\u8981\u663E\u793A\u7684\u9875\u7801\u52A0\u5165\u96C6\u5408\u5E76\u6392\u5E8F\n */\nfunction getDisplayPages(pageCount: any, currentPage: any) {\n  // pageCount \u5F88\u5C0F\u65F6\uFF0C\u76F4\u63A5\u8FD4\u56DE\u5168\u90E8\u9875\u7801\n  if (pageCount <= 8) return range(1, pageCount)\n\n  const pagesSet = new Set()\n  // \u524D\u4E24\u9875\u4E0E\u540E\u4E24\u9875\n  pagesSet.add(1)\n  pagesSet.add(2)\n  pagesSet.add(pageCount - 1)\n  pagesSet.add(pageCount)\n  // \u5F53\u524D\u9875\u4EE5\u53CA\u5DE6\u53F3\u5404\u4E00\u9875\n  pagesSet.add(currentPage - 1)\n  pagesSet.add(currentPage)\n  pagesSet.add(currentPage + 1)\n\n  // \u8FC7\u6EE4\u8D8A\u754C\u5E76\u8F6C\u4E3A\u6392\u5E8F\u6570\u7EC4\n  const pages = [...(pagesSet as any)].filter(p => p >= 1 && p <= pageCount).sort((a, b) => a - b)\n  // \u6700\u7EC8\u6570\u7EC4\uFF0C\u9047\u5230\u76F8\u90BB\u95F4\u9699 > 1 \u65F6\u63D2\u5165\u7701\u7565\u53F7\n  const result = []\n  for (let i = 0; i < pages.length; i++) {\n    const p = pages[i]\n    result.push(p)\n    const next = pages[i + 1]\n    if (next && next - p > 1) {\n      result.push('...')\n    }\n  }\n  return result\n}\n\n// Paginator \u7EC4\u4EF6\nfunction Paginator({\n  items = [], // \u4EC5\u7528\u6765\u8BA1\u7B97\u603B\u6570\uFF1B\u82E5\u6570\u636E\u5F88\u5927\uFF0C\u5EFA\u8BAE\u4F20\u957F\u5EA6 itemsLength\n  itemsLength, // \u4F18\u5148\u4F7F\u7528 itemsLength\uFF08\u5982\u679C\u4F60\u4E0D\u60F3\u628A\u6574\u4E2A\u6570\u7EC4\u4F20\u8FDB\u6765\uFF09\n  pageSize = 10,\n  currentPage: controlledPage, // \u53D7\u63A7 current\n  onPageChange, // \u5F53\u53D7\u63A7\u65F6\u7531\u7236\u7EC4\u4EF6\u63A5\u7BA1\n  initialPage = 1, // \u975E\u53D7\u63A7\u65F6\u7684\u521D\u59CB\u9875\n  className = '',\n}: any) {\n  const totalItems = typeof itemsLength === 'number' ? itemsLength : items.length\n  const pageCount = Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize)))\n\n  const [internalPage, setInternalPage] = useState(() => {\n    const start = initialPage || 1\n    return Math.min(Math.max(1, start), pageCount)\n  })\n\n  const current = typeof controlledPage === 'number' ? controlledPage : internalPage\n\n  const changePage = useCallback(\n      (newPage: number) => {\n      if (newPage === current) return\n      const clamped = Math.min(Math.max(1, newPage), pageCount)\n      if (typeof onPageChange === 'function') {\n        onPageChange?.(clamped)\n      }\n      if (typeof controlledPage !== 'number') {\n        setInternalPage(clamped)\n      }\n    },\n    [current, pageCount, onPageChange, controlledPage]\n  )\n\n  const displayPages = useMemo(() => getDisplayPages(pageCount, current), [pageCount, current])\n\n  return (\n    <nav className={`flex gap-2 justify-center items-center paginator-wrapper ${className}`} aria-label=\"\u5206\u9875\u5BFC\u822A\">\n      <style>\n        {`\n          .pg-btn[aria-disabled='true'] {\n            opacity: 0.45;\n            cursor: not-allowed;\n          }\n        `}\n      </style>\n      {/* \u8DF3\u5230\u9996\u9875 */}\n      {/* <button\n        className=\"pg-btn\"\n        onClick={() => changePage(1)}\n        aria-label=\"\u8DF3\u5230\u7B2C\u4E00\u9875\"\n        aria-disabled={current === 1}\n        disabled={current === 1}>\n        \u00AB\n      </button> */}\n      {/* \u4E0A\u4E00\u9875 */}\n      <button\n        aria-label=\"\u4E0A\u4E00\u9875\"\n        aria-disabled={current === 1}\n        disabled={current === 1}\n        className=\"mr-1 text-xl cursor-pointer\"\n        onClick={() => changePage(current - 1)}\n      >\n        \u2039\n      </button>\n      {displayPages.map((p, idx) => {\n        if (p === '...') {\n          return (\n            <span key={`e-${idx}`} className=\"pg-ellipsis\" aria-hidden>\n              \u2026\n            </span>\n          )\n        }\n        const pageNum = p\n        const isActive = pageNum === current\n        return (\n          <button\n            key={pageNum}\n            aria-label={`\u7B2C ${pageNum} \u9875`}\n            onClick={() => changePage(pageNum)}\n            aria-current={isActive ? 'page' : undefined}\n            className={`box-border text-sm font-bold py-2 px-3.5 border-transparent ${isActive ? 'bg-[#000] text-[#FFF]' : ''}`}\n          >\n            {pageNum}\n          </button>\n        )\n      })}\n      {/* \u4E0B\u4E00\u9875 */}\n      <button\n        aria-label=\"\u4E0B\u4E00\u9875\"\n        aria-disabled={current === pageCount}\n        disabled={current === pageCount}\n        className=\"ml-1 text-xl cursor-pointer\"\n        onClick={() => changePage(current + 1)}\n      >\n        \u203A\n      </button>\n      {/* \u8DF3\u5230\u672B\u9875 */}\n      {/* <button\n        className=\"pg-btn\"\n        onClick={() => changePage(pageCount)}\n        aria-label=\"\u8DF3\u5230\u6700\u540E\u4E00\u9875\"\n        aria-disabled={current === pageCount}\n        disabled={current === pageCount}>\n        \u00BB\n      </button> */}\n\n      {/* \u603B\u6570\u5C55\u793A\uFF08\u53EF\u9009\uFF09 */}\n      {/* <div style={{ marginLeft: 8, color: \"rgba(0,0,0,0.55)\" }}>\n        \u7B2C {current} / {pageCount} \u9875 \u2022 {totalItems} \u9879\n      </div> */}\n    </nav>\n  )\n}\n\nexport default Paginator"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useMemo", "useState", "useCallback", "range", "start", "end", "out", "i", "getDisplayPages", "pageCount", "currentPage", "pagesSet", "pages", "p", "a", "b", "result", "next", "Paginator", "items", "itemsLength", "pageSize", "controlledPage", "onPageChange", "initialPage", "className", "totalItems", "internalPage", "setInternalPage", "current", "changePage", "newPage", "clamped", "displayPages", "idx", "pageNum", "isActive", "Paginator_default"]
+}

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

@@ -0,0 +1,20 @@
+import type { Img } from '../../types/props.js';
+export type SelectStoreDataType = {
+    title: string;
+    desc: string;
+    img: Img;
+    mobileImg: Img;
+    padImg: Img;
+    miniImg: Img;
+};
+type SelectStoreType = {
+    data: {
+        list: SelectStoreDataType[];
+    };
+    className?: string;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectStoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
+    className?: string;
+    data?: Record<string, any>;
+} & import("react").RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+"use client";import{Fragment as c,jsx as e,jsxs as p}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as d}from"../../shared/Styles.js";import{Picture as i,Text as l}from"../../components/index.js";const r=o=>{const{data:s,className:g}=o,{list:a}=s;return e(c,{children:e("div",{className:"",children:e("div",{className:"grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4",children:a.map((t,m)=>p("div",{className:" relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden",children:[e(i,{className:"w-full",imgClassName:"",source:`${t?.img?.url}, ${t?.padImg?.url} 1439, ${t?.miniImg?.url} 1023, ${t?.mobileImg?.url} 767`}),p("div",{className:"absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:px-[24px] lg-desktop:px-[32px] px-[16px]",children:["                  ",e(l,{html:t?.title,className:"text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]"}),e(l,{html:t?.desc,className:"text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]"})]})]},m))})})})};var v=d(r);export{v as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
+  "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n  title: string\n  desc: string\n  img: Img\n  mobileImg: Img\n  padImg: Img\n  miniImg: Img\n  // pay: {\n  //   img: Img\n  // }[]\n  // delivery: {\n  //   img: Img\n  // }[]\n  // service: {\n  //   title: string\n  //   img: Img\n  // }[]\n}\n\ntype SelectStoreType = {\n  data: {\n    list: SelectStoreDataType[]\n  }\n  className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n  const { data, className } = props\n  const { list } = data\n  // const number = list?.[2]?.service?.length || 0\n  return (\n    <>\n      <div className=''>\n        <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n          {list.map((item, index) => (\n            <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n                    <Picture\n                      className=\"w-full\"\n                      imgClassName=\"\"\n                      source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n                    />\n                <div className='absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:px-[24px] lg-desktop:px-[32px] px-[16px]'>                  <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n                </div>\n            </div>\n          ))}\n        </div>\n        {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n          {list.map((item, index) => (\n            <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n              <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n                <div className=\"flex flex-col justify-center flex-1\">\n                \n                {item?.pay && (\n                  <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n                  {item?.pay?.map((pay, ind)=>{\n                    return (\n                      <div key={ind} className='laptop:w-[60px] w-[48px]'>\n                        <Picture\n                            className=\" w-full\"\n                            imgClassName=\"\"\n                            source={pay?.img?.url}\n                            alt={pay?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n                )}\n                \n                {\n                 item?.delivery && (\n                  <div className='flex gap-[24px] items-center justify-center'>\n                    {item?.delivery?.map((delivery, ind)=>{\n                    return (\n                      <div key={ind} className=''>\n                        <Picture\n                            className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n                            imgClassName=\"\"\n                            source={delivery?.img?.url}\n                            alt={delivery?.img?.alt || ''}\n                        />\n                      </div>\n                    )\n                  })}\n                  </div>\n                 ) \n                }\n                \n                {\n                  item?.service && (\n                    <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n                      {item?.service?.map((service, ind)=>{\n                        // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n                        const isFifth = ind === 4;\n                        return (\n                          <div key={ind} className={`\n                            flex flex-col items-center desktop:h-full  w-[157px] justify-start desktop:w-[81px]\n                            ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n                          `}>\n                            <div className='w-[70px] desktop:w-[54px]'>\n                              <Picture\n                              className=\"\"\n                              imgClassName=\"w-full h-auto\"\n                              source={service?.img?.url}\n                              alt={service?.img?.alt || ''}\n                            />\n                            </div>\n                            <div className='text-center'>\n                            <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n                            </div>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  )\n                }\n                </div>\n                <div className='mt-auto'>\n                  <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n                </div>\n                \n              </div>\n            </div>\n          ))}\n        </div> */}\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(SelectStore)\n"],
+  "mappings": "aAsCI,mBAAAA,EAKgB,OAAAC,EAKJ,QAAAC,MAVZ,oBArCJ,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,gEACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAAgB,UAAU,qIACnB,UAAAD,EAACG,EAAA,CACC,UAAU,SACV,aAAa,GACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACJT,EAAC,OAAI,UAAU,8HAA8H,+BAAkBD,EAACI,EAAA,CAAK,KAAMM,GAAM,MAAO,UAAU,0FAAyF,EACzRV,EAACI,EAAA,CAAK,KAAMM,GAAM,KAAM,UAAU,+EAA8E,GAClH,IARMC,CASV,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
+  "names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "SelectStore", "props", "data", "className", "list", "item", "index", "SelectStore_default"]
+}

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as c,jsxs as oe}from"react/jsx-runtime";import G,{useState as T,useEffect as I,useRef as h,useImperativeHandle as J}from"react";import{cn as K}from"../../helpers/utils.js";import U from"./tabSwitch.js";import X from"../Title/index.js";import Y from"../SwiperBox/index.js";import{withLayout as Z}from"../../shared/Styles.js";import{gaTrack as B}from"../../shared/track.js";import{useMediaQuery as ee}from"react-responsive";import{ShelfDisplayWrapItem as te,ShelfDisplayHorizontalItem as ne}from"./shelfDisplayItem.js";const se="image",re="product_shelf";function ie(m){const i=h(null),[a,w]=T(!1);return I(()=>{if(a)return;const f=i.current;if(!f||typeof IntersectionObserver>"u")return;const o=new IntersectionObserver(([t])=>{t.isIntersecting&&(w(!0),o.disconnect())},m);return o.observe(f),()=>o.disconnect()},[a,m]),[i,a]}const ae=G.forwardRef(({key:m,data:i,event:a,buildData:w,breakpoints:f,className:o="",recommendedData:t,target:C="_self",isDisplayGudgments:k=!1,isDisplayBackImage:L=!1},N)=>{const{productsTab:p=[],productsCard:O=[],title:D,isShowTab:g=!0,tabShape:A="square",isShowTag:$=!1,isShowOriginalPrice:q=!0,isShowRecommendedCard:z=!1,...Q}=i,[R,M]=T(""),[r,v]=T([]),P=h(!1),b=h(!1),V=h(null),W=ee({query:"(max-width: 768px)"}),[j,x]=ie({threshold:0}),u=r?.length<=1&&k,l=!W&&r?.length<=2&&k,_=e=>{switch(e){case 1440:return l?r?.length:4;case 1024:return l?r?.length:3;default:return l?r?.length:2.3}},E=()=>{B({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:t?.map((e,S)=>{const n=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:S+1}})}})},y=(e,S)=>{if(S){const d=t?.map?.(n=>({...n,isShowRecommended:!0}));v(d?.length?d||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(s=>{const H=w?.products?.find(F=>F?.handle===s?.handle);if(H)return{sku:s.sku,isShowRecommended:!1,custom_name:s.custom_name,custom_description:s.custom_description,...H}})?.filter(s=>s);v(n?.length?n||[]:[])}else v([])};return J(N,()=>V.current),I(()=>{x&&t?.length&&!P.current&&(P.current=!0,E())},[x,t]),I(()=>{if(!b.current){if(!b.current&&t?.length&&(b.current=!0),g){M(p?.[0]?.tab||""),y(p?.[0]?.data||[],p?.[0]?.isShowRecommendedTab);return}y(O,z)}},[t]),oe("div",{ref:V,className:K("shelf-display-wrap w-full",o,{"aiui-dark":i?.theme==="dark"}),children:[D&&c(X,{data:{title:D}}),g&&c("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:c(U,{value:R,tabs:p,tabShape:A,onTabClick:e=>{if(M(e?.tab),y(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){B({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:se,component_name:re,component_title:i?.title,component_position:1,navigation:e?.tab}});return}E()}})}),c("div",{ref:j,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:c(Y,{data:{list:r,configuration:{...Q,event:a,isShowTag:$,isShowOriginalPrice:q,target:C,itemLength:r?.length,isDisplayBackImage:L}},id:`ShelfDisplay${m}${R}`,className:`${g?"mt-6":""} !overflow-visible`,itemClassName:l?"flex-1":"",Slide:l?ne:te,breakpoints:f||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u?1:1.2},768:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_()},1024:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1024)},1440:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1440)}}})})]})});var ge=Z(ae);export{ge as default};
+"use client";import{jsx as r,jsxs as le}from"react/jsx-runtime";import J,{useState as I,useEffect as M,useRef as g,useImperativeHandle as K}from"react";import{cn as U}from"../../helpers/utils.js";import X from"./tabSwitch.js";import Y from"../Title/index.js";import Z from"../SwiperBox/index.js";import{withLayout as ee}from"../../shared/Styles.js";import{gaTrack as P}from"../../shared/track.js";import{useMediaQuery as te}from"react-responsive";import{useRollout as se}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as ae,ShelfDisplayHorizontalItem as ne}from"./shelfDisplayItem.js";const ie="image",re="product_shelf",oe=J.forwardRef(({key:x,data:c,event:H,buildData:B,breakpoints:C,className:E="",recommendedData:n,target:V="_self",metafields:L,isDisplayGudgments:_=!1,isDisplayBackImage:N=!1},A)=>{const{productsTab:o=[],productsCard:$=[],title:v,isShowTab:p=!0,tabShape:q="square",isShowTag:O=!1,isShowOriginalPrice:z=!0,isShowRecommendedCard:Q=!1,...W}=c,[b,S]=I(""),[a,f]=I([]),y=g(!1),u=g(!1),T=g(null),j=te({query:"(max-width: 768px)"}),[F,k]=se({threshold:0}),l=a?.length<=1&&_,i=!j&&a?.length<=2&&_,d=e=>{switch(e){case 1440:return i?a?.length:4;case 1024:return i?a?.length:3;default:return i?a?.length:2.3}},D=()=>{P({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:n?.map((e,w)=>{const s=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:w+1}})}})},h=(e,w)=>{if(w){const m=n?.map?.(s=>({...s,isShowRecommended:!0}));f(m?.length?m||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(t=>{const R=B?.products?.find(G=>G?.handle===t?.handle);if(R)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...R}})?.filter(t=>t);f(s?.length?s||[]:[])}else f([])};return K(A,()=>T.current),M(()=>{k&&n?.length&&!y.current&&(y.current=!0,D())},[k,n]),M(()=>{if(!u.current){if(!u.current&&n?.length&&(u.current=!0),p){S(o?.[0]?.tab||""),h(o?.[0]?.data||[],o?.[0]?.isShowRecommendedTab);return}h($,Q)}},[n]),le("div",{ref:T,className:U("shelf-display-wrap w-full",E,{"aiui-dark":c?.theme==="dark"}),children:[v&&r(Y,{data:{title:v}}),p&&r("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:r(X,{value:b,tabs:o,tabShape:q,onTabClick:e=>{if(S(e?.tab),h(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){P({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ie,component_name:re,component_title:c?.title,component_position:1,navigation:e?.tab}});return}D()}})}),r("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:r(Z,{data:{list:a,configuration:{...W,event:H,isShowTag:O,isShowOriginalPrice:z,target:V,metafields:L,itemLength:a?.length,isDisplayBackImage:N}},id:`ShelfDisplay${x}${b}`,className:`${p?"mt-6":""} !overflow-visible`,itemClassName:i?"flex-1":"",Slide:i?ne:ae,breakpoints:C||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l?1:1.2},768:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d()},1024:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1440)}}})})]})});var ve=ee(oe);export{ve as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nfunction useOnceInView<T extends Element>(options: any) {\n  const ref = useRef<T>(null)\n  const [inView, setInView] = useState(false)\n\n  useEffect(() => {\n    if (inView) return // \u5DF2\u8FDB\u5165\u8FC7\uFF0C\u5219\u4E0D\u518D\u89C2\u5BDF\n    const el = ref.current\n    if (!el || typeof IntersectionObserver === 'undefined') return\n\n    const observer = new IntersectionObserver(([entry]) => {\n      if (entry.isIntersecting) {\n        setInView(true)\n        observer.disconnect() // \u505C\u6B62\u89C2\u5BDF\n      }\n    }, options)\n\n    observer.observe(el)\n    return () => observer.disconnect()\n  }, [inView, options])\n\n  return [ref, inView]\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useOnceInView<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "useOnceInView", "options", "ref", "inView", "setInView", "el", "observer", "entry", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "isDisplayGudgments", "isDisplayBackImage", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "isMobile", "viewRef", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "ShelfDisplay_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\n          const newCurrentData = currentData\n            ?.map?.(item => {\n              const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n              if (findData) {\n                return {\n                  sku: item.sku,\n                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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: data?.title,\n                      component_position: 1,\n                      navigation: v?.tab,\n                    },\n                  })\n                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "ShelfDisplay_default"]
 }