@anker-in/headless-ui 1.1.9-temp.120303 → 1.1.9-tmp-01

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductCompare/index.tsx"],
-  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n  const [loaded, setLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setLoaded(true), {\n      rootMargin: `${offset}px`,\n    })\n    ref.current && observer.observe(ref.current)\n    return () => observer.disconnect()\n  }, [offset])\n\n  return (\n    <div ref={ref} className=\"size-full\">\n      {loaded && children}\n    </div>\n  )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; className?: string }) {\n  if (!media?.url) return null\n\n  const isVideo = media.mimeType?.startsWith('video/')\n\n  if (isVideo) {\n    return (\n      <video\n        src={media.url}\n        playsInline\n        autoPlay\n        muted\n        loop\n        poster={poster?.url || ''}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        webkit-playsinline=\"true\"\n        x5-video-player-type=\"h5\"\n        x5-video-player-fullscreen=\"false\"\n        x5-playsinline=\"true\"\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n\n  return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\n}\n\nexport interface ProductItemData {\n  /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n  text?: string\n  /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  media?: Media\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  mobMedia?: Media\n  /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  poster?: Media\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: Media\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps {\n  /** \u7EC4\u4EF6\u6570\u636E */\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title?: string\n    /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n    titleType?: TitleType\n    /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n    titleIcon?: Media\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n    subtitleImage?: Media\n    /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n    textAlign?: TextAlign\n    /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n    products?: ProductItemData[]\n    /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    twoImageRatio?: TwoImageRatio\n    /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    threeImageRatio?: ThreeImageRatio\n    /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n    theme?: Theme\n  }\n  /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n  className?: string\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n  if (totalProducts === 2) {\n    if (twoImageRatio === '1:1') {\n      return 'laptop:flex-[1]'\n    }\n    // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n    return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n  }\n\n  if (totalProducts === 3) {\n    // 1:1:1 \u6BD4\u4F8B\n    return 'laptop:flex-[1]'\n  }\n\n  return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n  const {\n    title,\n    titleType = 'primary',\n    titleIcon,\n    subtitle,\n    subtitleImage,\n    textAlign = 'left',\n    products = [],\n    twoImageRatio = '2:3',\n    threeImageRatio = '1:1:1',\n    theme = 'light',\n  } = props.data\n\n  // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n  const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n  // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n  const getTitleSize = () => {\n    if (titleType === 'secondary') return 3\n    return 4\n  }\n\n  // \u6E32\u67D3\u6807\u9898\n  const renderTitle = () => {\n    if (!title) return null\n\n    // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n    if (titleType === 'selling-point' && titleIcon) {\n      return (\n        <div\n          className={cn(\n            'product-compare-title-wrapper flex items-center gap-[8px]',\n            alignClasses === 'text-center' ? 'justify-center' : ''\n          )}\n        >\n          <img\n            src={titleIcon.url}\n            alt={titleIcon.alt || ''}\n            className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n          />\n          <Heading\n            as=\"h2\"\n            size={getTitleSize()}\n            html={title}\n            className=\"product-compare-title\"\n            style={{ color: '#00BEFA' }}\n          />\n        </div>\n      )\n    }\n\n    // \u666E\u901A\u6807\u9898\n    return <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n  }\n\n  return (\n    <section\n      className={cn('product-compare text-info-primary', props.className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      {renderTitle()}\n\n      {/* \u526F\u6807\u9898 */}\n      {subtitle && (\n        <Text\n          as=\"p\"\n          size={2}\n          html={subtitle}\n          className={cn(\n            'product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div\n          className={cn(\n            'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n            alignClasses === 'text-center' ? 'flex justify-center' : ''\n          )}\n        >\n          <img\n            src={subtitleImage.url}\n            alt={subtitleImage.alt || ''}\n            className=\"max-w-full\"\n            width={subtitleImage.width}\n            height={subtitleImage.height}\n          />\n        </div>\n      )}\n\n      {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n      <div className=\"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\n        {products.map((product, index) => {\n          const isLastProduct = index === products.length - 1\n          const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n          // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n          const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n          return (\n            <div\n              key={index}\n              className={cn('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\n                'order-2 tablet:order-1': index === 0 && products.length === 2,\n                'order-1 tablet:order-2': index === 1 && products.length === 2,\n              })}\n            >\n              {/* \u4EA7\u54C1\u6807\u7B7E */}\n              {product.text && (\n                <div\n                  className={cn(\n                    'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white',\n                    labelBgClass\n                  )}\n                >\n                  <Heading as=\"h6\" className=\"font-bold\" size={1}>\n                    {product.text}\n                  </Heading>\n                </div>\n              )}\n\n              {/* \u4EA7\u54C1\u5A92\u4F53 */}\n              <LazyMedia offset={1500}>\n                <MediaElement\n                  media={product.media}\n                  poster={product.poster}\n                  className=\"product-compare-media laptop:block hidden size-full object-cover\"\n                />\n                <MediaElement\n                  media={product.mobMedia}\n                  poster={product.mobPoster}\n                  className=\"product-compare-media-mobile laptop:hidden block w-full\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useRef, useState } from 'react'\nimport { Heading, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Media, Theme } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nfunction LazyMedia({ children, offset = 800 }: { children: React.ReactNode; offset?: number }) {\n  const [loaded, setLoaded] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(([entry]) => entry.isIntersecting && setLoaded(true), {\n      rootMargin: `${offset}px`,\n    })\n    ref.current && observer.observe(ref.current)\n    return () => observer.disconnect()\n  }, [offset])\n\n  return (\n    <div ref={ref} className=\"size-full\">\n      {loaded && children}\n    </div>\n  )\n}\n\nfunction MediaElement({ media, poster, className }: { media?: Media; poster?: Media; className?: string }) {\n  if (!media?.url) return null\n\n  const isVideo = media.mimeType?.startsWith('video/')\n\n  if (isVideo) {\n    return (\n      <video\n        src={media.url}\n        playsInline\n        autoPlay\n        muted\n        loop\n        poster={poster?.url || ''}\n        preload=\"metadata\"\n        disablePictureInPicture\n        disableRemotePlayback\n        webkit-playsinline=\"true\"\n        x5-video-player-type=\"h5\"\n        x5-video-player-fullscreen=\"false\"\n        x5-playsinline=\"true\"\n        className={className}\n        width={media.width}\n        height={media.height}\n      />\n    )\n  }\n\n  return <img src={media.url} alt={media.alt || ''} className={className} width={media.width} height={media.height} />\n}\n\nexport interface ProductItemData {\n  /** \u4EA7\u54C1\u6807\u7B7E\u6587\u672C */\n  text?: string\n  /** \u684C\u9762\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  media?: Media\n  /** \u79FB\u52A8\u7AEF\u5A92\u4F53\uFF08\u89C6\u9891\u6216\u56FE\u7247\uFF09 */\n  mobMedia?: Media\n  /** \u684C\u9762\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  poster?: Media\n  /** \u79FB\u52A8\u7AEF\u5C01\u9762\u56FE\uFF08\u4EC5\u7528\u4E8E\u89C6\u9891\uFF09 */\n  mobPoster?: Media\n}\n\n/** \u6807\u9898\u7C7B\u578B */\nexport type TitleType = 'selling-point' | 'primary' | 'secondary'\n\n/** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F */\nexport type TextAlign = 'left' | 'center'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF082\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type TwoImageRatio = '2:3' | '1:1'\n\n/** \u56FE\u7247\u5BBD\u5EA6\u6BD4\u4F8B\uFF083\u5F20\u56FE\u7247\u65F6\uFF09 */\nexport type ThreeImageRatio = '1:1:1'\n\nexport interface ProductCompareProps {\n  /** \u7EC4\u4EF6\u6570\u636E */\n  data: {\n    /** \u4E3B\u6807\u9898 */\n    title?: string\n    /** \u6807\u9898\u7C7B\u578B\uFF1Aselling-point\uFF08\u5356\u70B9\uFF09\u3001primary\uFF08\u4E00\u7EA7\u6807\u9898\uFF09\u3001secondary\uFF08\u4E8C\u7EA7\u6807\u9898\uFF09 */\n    titleType?: TitleType\n    /** \u6807\u9898\u56FE\u6807\uFF08\u4EC5\u5F53 titleType \u4E3A selling-point \u65F6\u6709\u6548\uFF09 */\n    titleIcon?: Media\n    /** \u526F\u6807\u9898 */\n    subtitle?: string\n    /** \u526F\u6807\u9898\u4E0B\u65B9\u7684\u56FE\u7247 */\n    subtitleImage?: Media\n    /** \u6587\u672C\u5BF9\u9F50\u65B9\u5F0F\uFF1Aleft\uFF08\u5DE6\u5BF9\u9F50\uFF09\u3001center\uFF08\u5C45\u4E2D\uFF09 */\n    textAlign?: TextAlign\n    /** \u4EA7\u54C1\u5217\u8868\uFF08\u652F\u63012-3\u4E2A\u4EA7\u54C1\uFF09 */\n    products?: ProductItemData[]\n    /** 2\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    twoImageRatio?: TwoImageRatio\n    /** 3\u5F20\u56FE\u7247\u65F6\u7684\u5BBD\u5EA6\u6BD4\u4F8B */\n    threeImageRatio?: ThreeImageRatio\n    /** \u4E3B\u9898\uFF1Alight \u6216 dark */\n    theme?: Theme\n  }\n  /** \u5916\u5C42\u5BB9\u5668\u7C7B\u540D */\n  className?: string\n}\n\n/**\n * \u6839\u636E\u4EA7\u54C1\u6570\u91CF\u548C\u6BD4\u4F8B\u83B7\u53D6\u5E03\u5C40\u7C7B\u540D\n */\nfunction getProductLayoutClasses(index: number, totalProducts: number, twoImageRatio?: TwoImageRatio): string {\n  if (totalProducts === 2) {\n    if (twoImageRatio === '1:1') {\n      return 'laptop:flex-[1]'\n    }\n    // \u9ED8\u8BA4 2:3 \u6BD4\u4F8B\n    return index === 0 ? 'laptop:flex-[2]' : 'laptop:flex-[3]'\n  }\n\n  if (totalProducts === 3) {\n    // 1:1:1 \u6BD4\u4F8B\n    return 'laptop:flex-[1]'\n  }\n\n  return 'laptop:flex-[1]'\n}\n\nfunction ProductCompare(props: ProductCompareProps) {\n  const {\n    title,\n    titleType = 'primary',\n    titleIcon,\n    subtitle,\n    subtitleImage,\n    textAlign = 'left',\n    products = [],\n    twoImageRatio = '2:3',\n    threeImageRatio = '1:1:1',\n    theme = 'light',\n  } = props.data\n\n  // \u6587\u672C\u5BF9\u9F50\u7C7B\u540D\n  const alignClasses = textAlign === 'center' ? 'text-center' : 'text-left laptop:text-left'\n\n  // \u6839\u636E\u6807\u9898\u7C7B\u578B\u786E\u5B9A Heading size \u548C\u6837\u5F0F\n  const getTitleSize = () => {\n    if (titleType === 'secondary') return 3\n    return 4\n  }\n\n  // \u6E32\u67D3\u6807\u9898\n  const renderTitle = () => {\n    if (!title) return null\n\n    // \u5356\u70B9\u6807\u9898\uFF08\u5305\u542B\u56FE\u6807\uFF09\n    if (titleType === 'selling-point' && titleIcon) {\n      return (\n        <div\n          className={cn(\n            'product-compare-title-wrapper flex items-center gap-[8px]',\n            alignClasses === 'text-center' ? 'justify-center' : ''\n          )}\n        >\n          <img\n            src={titleIcon.url}\n            alt={titleIcon.alt || ''}\n            className=\"product-compare-title-icon laptop:size-[32px] size-[24px]\"\n          />\n          <Heading\n            as=\"h2\"\n            size={getTitleSize()}\n            html={title}\n            className=\"product-compare-title\"\n            style={{ color: '#00BEFA' }}\n          />\n        </div>\n      )\n    }\n\n    // \u666E\u901A\u6807\u9898\n    return <Heading as=\"h2\" size={getTitleSize()} html={title} className={cn('product-compare-title', alignClasses)} />\n  }\n\n  return (\n    <section\n      className={cn('product-compare text-info-primary', props.className, {\n        'aiui-dark': theme === 'dark',\n      })}\n    >\n      {/* \u6807\u9898\u533A\u57DF */}\n      {renderTitle()}\n\n      {/* \u526F\u6807\u9898 */}\n      {subtitle && (\n        <Text\n          as=\"p\"\n          size={2}\n          html={subtitle}\n          className={cn(\n            'product-compare-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]',\n            alignClasses\n          )}\n        />\n      )}\n\n      {/* \u526F\u6807\u9898\u4E0B\u65B9\u56FE\u7247 */}\n      {subtitleImage && (\n        <div\n          className={cn(\n            'product-compare-subtitle-image laptop:mt-[24px] mt-[16px]',\n            alignClasses === 'text-center' ? 'flex justify-center' : ''\n          )}\n        >\n          <img\n            src={subtitleImage.url}\n            alt={subtitleImage.alt || ''}\n            className=\"max-w-full\"\n            width={subtitleImage.width}\n            height={subtitleImage.height}\n          />\n        </div>\n      )}\n\n      {/* \u4EA7\u54C1\u5BF9\u6BD4\u5361\u7247\u5BB9\u5668 */}\n      <div className=\"product-compare-container tablet:flex-row tablet:flex-nowrap laptop:mt-[32px] mt-[24px] flex w-full flex-col items-stretch gap-[16px]\">\n        {products.map((product, index) => {\n          const isLastProduct = index === products.length - 1\n          const layoutClasses = getProductLayoutClasses(index, products.length, twoImageRatio)\n\n          // \u6807\u7B7E\u6837\u5F0F\uFF1A\u6700\u540E\u4E00\u4E2A\u4EA7\u54C1\u7528 bg-brand-0\uFF0C\u5176\u4ED6\u7528 rgba(0,0,0,0.2)\n          const labelBgClass = isLastProduct ? 'bg-brand-0' : 'bg-[rgba(0,0,0,0.2)]'\n\n          return (\n            <div\n              key={index}\n              className={cn('product-compare-item rounded-box relative shrink overflow-hidden', layoutClasses, {\n                'order-2 tablet:order-1': index === 0 && products.length === 2,\n                'order-1 tablet:order-2': index === 1 && products.length === 2,\n              })}\n            >\n              {/* \u4EA7\u54C1\u6807\u7B7E */}\n              {product.text && (\n                <div\n                  className={cn(\n                    'product-compare-label rounded-btn laptop:left-[28px] laptop:top-[28px] laptop:px-[28px] laptop:pb-[14px] laptop:pt-[15px] desktop:left-[32px] desktop:top-[32px] absolute left-[16px] top-[16px] z-10 px-[20px] pb-[10px] pt-[11px] font-bold text-white',\n                    labelBgClass\n                  )}\n                >\n                  <Heading as=\"h6\" className=\"font-bold\" size={1}>\n                    {product.text}\n                  </Heading>\n                </div>\n              )}\n\n              {/* \u4EA7\u54C1\u5A92\u4F53 */}\n              <LazyMedia offset={1500}>\n                <MediaElement\n                  media={product.media}\n                  poster={product.poster}\n                  className=\"product-compare-media laptop:block hidden size-full object-cover\"\n                />\n                <MediaElement\n                  media={product.mobMedia?.id ? product.mobMedia : product.media}\n                  poster={product.mobPoster?.id ? product.mobPoster : product.poster}\n                  className=\"product-compare-media-mobile laptop:hidden block w-full\"\n                />\n              </LazyMedia>\n            </div>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n\nexport default withLayout(ProductCompare)\n"],
+  "mappings": "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",
   "names": ["jsx", "jsxs", "useEffect", "useRef", "useState", "Heading", "Text", "cn", "withLayout", "LazyMedia", "children", "offset", "loaded", "setLoaded", "ref", "observer", "entry", "MediaElement", "media", "poster", "className", "getProductLayoutClasses", "index", "totalProducts", "twoImageRatio", "ProductCompare", "props", "title", "titleType", "titleIcon", "subtitle", "subtitleImage", "textAlign", "products", "threeImageRatio", "theme", "alignClasses", "getTitleSize", "renderTitle", "product", "isLastProduct", "layoutClasses", "labelBgClass", "ProductCompare_default"]
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ProductHeroProps } from './types.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ProductHeroProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import type { ProductNavProps } from './types.js';
 declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<ProductNavProps & import("react").RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 }, "ref"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as N,useEffect as y,forwardRef as E,useImperativeHandle as P,useRef as T}from"react";import{cn as i}from"../../helpers/utils.js";import{withLayout as L}from"../../shared/Styles.js";import{Button as x,Text as d}from"../../components/index.js";import{useExposure as C}from"../../hooks/useExposure.js";import*as c from"@radix-ui/react-popover";const D="navigation",H="product_nav",M=s=>e("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...s,children:e("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),v=E(({className:s="",data:m,id:u},f)=>{const{tabLinks:p=[],anchorList:h=[],textLink:a,buyBtn:r,theme:k="light"}=m||{},[g,w]=N(""),l=T(null);P(f,()=>l.current),C(l,{componentType:D,componentName:H}),y(()=>{const t=()=>{w(window.location.hash)};return t(),window.addEventListener("hashchange",t),()=>{window.removeEventListener("hashchange",t)}},[]);const b=t=>{t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})};return o("div",{id:u,ref:l,className:i("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":k==="dark"},s),children:[o("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[o("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[o("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[p.map((t,n)=>o("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[e("a",{href:t.link,className:i("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":n!==0,"hidden desktop:block":n===1}),children:e("span",{children:t.label})}),n!==p.length-1&&e("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},t.link||n)),p.length>1&&o(c.Root,{children:[e(c.Trigger,{asChild:!0,children:e("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-[4px] inline-block","aria-label":"More products",children:e(M,{className:"text-[#1D1D1F]"})})}),e(c.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:p.slice(1).map(t=>e("a",{href:t.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:e("span",{children:t.label})},t.link))})]})]}),o("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[a?.link&&e("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:e(d,{size:2,className:"text-nowrap",children:a.text})}),r?.link&&e(x,{as:"a",href:r.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:r.text})]})]}),e("div",{className:"product-nav-anchors hide-scrollbar laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px]",children:h.map(t=>o("a",{href:`#${t.id}`,className:"product-nav-anchor-link",onClick:n=>{b(n)},children:[e(d,{size:2,className:"product-nav-anchor-text text-nowrap",children:t.label}),e("div",{className:i("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"bg-brand-color":g===`#${t.id}`})})]},t.id))})]}),o("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[a?.link&&e("a",{href:a.link,target:a.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:e(d,{size:2,className:"text-nowrap",children:a.text})}),r?.link&&e(x,{as:"a",href:r.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:r.text})]})]})});v.displayName="ProductNav";var V=L(v);export{V as default};
+"use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useState as T,useEffect as u,forwardRef as L,useImperativeHandle as P,useRef as C}from"react";import{cn as c}from"../../helpers/utils.js";import{withLayout as S}from"../../shared/Styles.js";import{Button as v,Text as x}from"../../components/index.js";import{useExposure as H}from"../../hooks/useExposure.js";import*as m from"@radix-ui/react-popover";const M="navigation",D="product_nav",R=l=>t("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l,children:t("path",{d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor",strokeWidth:"1.66667",strokeLinecap:"round",strokeLinejoin:"round"})}),h=L(({className:l="",data:f,id:k},g)=>{const{tabLinks:p=[],anchorList:w=[],textLink:n,buyBtn:s,theme:b="light"}=f||{},[y,N]=T(""),i=C(null);P(g,()=>i.current),H(i,{componentType:M,componentName:D}),u(()=>{const e=()=>{N(window.location.hash)};return e(),window.addEventListener("hashchange",e),()=>{window.removeEventListener("hashchange",e)}},[]),u(()=>{const e=document.querySelectorAll(".header"),o=[];return e.forEach(d=>{const r=d;o.push({element:r,originalPosition:r.style.position||getComputedStyle(r).position}),r.style.position="relative"}),()=>{o.forEach(({element:d,originalPosition:r})=>{d.style.position=r==="static"?"":r})}},[]);const E=e=>{e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})};return a("div",{id:k,ref:i,className:c("product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0",{"aiui-dark":b==="dark"},l),children:[a("div",{className:"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start",children:[a("div",{className:"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]",children:[a("div",{className:"product-nav-tabs flex flex-row items-center gap-[8px]",children:[p.map((e,o)=>a("div",{className:"product-nav-tab-item flex items-center gap-[8px]",children:[t("a",{href:e.link,className:c("product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]",{"text-[#6D6D6F]":o!==0,"hidden desktop:block":o===1}),children:t("span",{children:e.label})}),o!==p.length-1&&t("div",{className:"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]"})]},e.link||o)),p.length>1&&a(m.Root,{children:[t(m.Trigger,{asChild:!0,children:t("button",{className:"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block","aria-label":"More products",children:t(R,{className:"text-[#1D1D1F]"})})}),t(m.Content,{className:"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]",style:{boxShadow:"0px 4px 8px 0px rgba(0,0,0,0.12)"},side:"bottom",align:"end",alignOffset:10,sideOffset:10,children:p.slice(1).map(e=>t("a",{href:e.link,className:"product-nav-dropdown-link hover:text-brand-color text-nowrap",children:t("span",{children:e.label})},e.link))})]})]}),a("div",{className:"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]",children:[n?.link&&t("a",{href:n.link,target:n.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer",children:t(x,{size:2,className:"text-nowrap",children:n.text})}),s?.link&&t(v,{as:"a",href:s.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:s.text})]})]}),t("div",{className:"product-nav-anchors hide-scrollbar laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px]",children:w.map(e=>a("a",{href:`#${e.id}`,className:"product-nav-anchor-link",onClick:o=>{E(o)},children:[t(x,{size:2,className:"product-nav-anchor-text text-nowrap",children:e.label}),t("div",{className:c("product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent",{"bg-brand-color":y===`#${e.id}`})})]},e.id))})]}),a("div",{className:"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]",children:[n?.link&&t("a",{href:n.link,target:n.target||"_self",className:"product-nav-text-link hover:text-brand-color cursor-pointer text-black",children:t(x,{size:2,className:"text-nowrap",children:n.text})}),s?.link&&t(v,{as:"a",href:s.link,size:"sm",className:"product-nav-buy-button text-nowrap",children:s.text})]})]})});h.displayName="ProductNav";var I=S(h);export{I as default};
 //# sourceMappingURL=ProductNav.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ProductNav/ProductNav.tsx"],
-  "sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path\n        d=\"M5 7.5L10 12.5L15 7.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.66667\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(({ className = '', data, id }, ref) => {\n  const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n  const [hash, setHash] = useState('')\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n  })\n\n  // \u76D1\u542Chash\u53D8\u5316\n  useEffect(() => {\n    const handleHashChange = () => {\n      setHash(window.location.hash)\n    }\n    handleHashChange()\n    window.addEventListener('hashchange', handleHashChange)\n    return () => {\n      window.removeEventListener('hashchange', handleHashChange)\n    }\n  }, [])\n\n  // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n  const handleAnchorClick = (e: React.MouseEvent) => {\n    const target = e.target as HTMLElement\n    target.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    })\n  }\n\n  return (\n    <div\n      id={id}\n      ref={innerRef}\n      className={cn(\n        'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n        {/* Tab Links Section */}\n        <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n          <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n            {tabLinks.map((tabLink, index) => {\n              return (\n                <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n                  <a\n                    href={tabLink.link}\n                    className={cn(\n                      'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n                      {\n                        'text-[#6D6D6F]': index !== 0,\n                        'hidden desktop:block': index === 1,\n                      }\n                    )}\n                    // onClick={() => onShowSpecs?.(false)}\n                  >\n                    <span>{tabLink.label}</span>\n                  </a>\n                  {index !== tabLinks.length - 1 && (\n                    <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n                  )}\n                </div>\n              )\n            })}\n\n            {/* Mobile Dropdown */}\n            {tabLinks.length > 1 && (\n              <Popover.Root>\n                <Popover.Trigger asChild>\n                  <button\n                    className=\"product-nav-dropdown-trigger desktop:hidden -ml-[4px] inline-block\"\n                    aria-label=\"More products\"\n                  >\n                    <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n                  </button>\n                </Popover.Trigger>\n                <Popover.Content\n                  className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n                  style={{\n                    boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n                  }}\n                  side=\"bottom\"\n                  align=\"end\"\n                  alignOffset={10}\n                  sideOffset={10}\n                >\n                  {tabLinks.slice(1).map(tabLink => (\n                    <a\n                      key={tabLink.link}\n                      href={tabLink.link}\n                      className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n                    >\n                      <span>{tabLink.label}</span>\n                    </a>\n                  ))}\n                </Popover.Content>\n              </Popover.Root>\n            )}\n          </div>\n\n          {/* Mobile Actions */}\n          <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n            {/* {specs?.text && (\n                <Text\n                  size={2}\n                  onClick={handleSpecsClick}\n                  className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n                >\n                  {specs.text}\n                </Text>\n              )} */}\n            {textLink?.link && (\n              <a\n                href={textLink.link}\n                target={textLink.target || '_self'}\n                className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n              >\n                <Text size={2} className=\"text-nowrap\">\n                  {textLink.text}\n                </Text>\n              </a>\n            )}\n            {buyBtn?.link && (\n              <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n                {buyBtn.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* Anchor Navigation */}\n        <div className=\"product-nav-anchors hide-scrollbar laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px]\">\n          {anchorList.map(anchor => (\n            <a\n              key={anchor.id}\n              href={`#${anchor.id}`}\n              className=\"product-nav-anchor-link\"\n              onClick={e => {\n                handleAnchorClick(e)\n              }}\n            >\n              <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n                {anchor.label}\n              </Text>\n              <div\n                className={cn(\n                  'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n                  {\n                    'bg-brand-color': hash === `#${anchor.id}`,\n                  }\n                )}\n              />\n            </a>\n          ))}\n        </div>\n      </div>\n\n      {/* Desktop Actions */}\n      <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n        {/* {specs?.text && (\n            <Text\n              size={2}\n              onClick={handleSpecsClick}\n              className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n            >\n              {specs.text}\n            </Text>\n          )} */}\n        {textLink?.link && (\n          <a\n            href={textLink.link}\n            target={textLink.target || '_self'}\n            className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n          >\n            <Text size={2} className=\"text-nowrap\">\n              {textLink.text}\n            </Text>\n          </a>\n        )}\n        {buyBtn?.link && (\n          <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n            {buyBtn.text}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "hash", "setHash", "innerRef", "handleHashChange", "handleAnchorClick", "e", "tabLink", "index", "anchor", "ProductNav_default"]
+  "sourcesContent": ["'use client'\nimport { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Button, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductNavProps } from './types.js'\nimport * as Popover from '@radix-ui/react-popover'\n\nconst componentType = 'navigation'\nconst componentName = 'product_nav'\n\nconst ChevronDownIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <path\n        d=\"M5 7.5L10 12.5L15 7.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.66667\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nconst ProductNav = forwardRef<HTMLDivElement, ProductNavProps>(({ className = '', data, id }, ref) => {\n  const { tabLinks = [], anchorList = [], textLink, buyBtn, theme = 'light' } = data || {}\n  const [hash, setHash] = useState('')\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n  useExposure(innerRef, {\n    componentType,\n    componentName,\n  })\n\n  // \u76D1\u542Chash\u53D8\u5316\n  useEffect(() => {\n    const handleHashChange = () => {\n      setHash(window.location.hash)\n    }\n    handleHashChange()\n    window.addEventListener('hashchange', handleHashChange)\n    return () => {\n      window.removeEventListener('hashchange', handleHashChange)\n    }\n  }, [])\n\n  // \u8BBE\u7F6E\u9875\u9762\u4E2Dheader\u5143\u7D20\u7684position\u4E3Arelative\n  useEffect(() => {\n    const headerElements = document.querySelectorAll('.header')\n    const originalStyles: { element: HTMLElement; originalPosition: string }[] = []\n\n    headerElements.forEach(element => {\n      const htmlElement = element as HTMLElement\n      // \u4FDD\u5B58\u539F\u59CB\u6837\u5F0F\n      originalStyles.push({\n        element: htmlElement,\n        originalPosition: htmlElement.style.position || getComputedStyle(htmlElement).position,\n      })\n      // \u8BBE\u7F6E\u4E3Arelative\n      htmlElement.style.position = 'relative'\n    })\n\n    // \u6E05\u7406\u51FD\u6570\uFF1A\u6062\u590D\u539F\u59CB\u6837\u5F0F\n    return () => {\n      originalStyles.forEach(({ element, originalPosition }) => {\n        element.style.position = originalPosition === 'static' ? '' : originalPosition\n      })\n    }\n  }, [])\n\n  // \u5904\u7406\u951A\u70B9\u70B9\u51FB\u6EDA\u52A8\n  const handleAnchorClick = (e: React.MouseEvent) => {\n    const target = e.target as HTMLElement\n    target.scrollIntoView({\n      behavior: 'smooth',\n      block: 'nearest',\n      inline: 'center',\n    })\n  }\n\n  return (\n    <div\n      id={id}\n      ref={innerRef}\n      className={cn(\n        'product-nav text-info-primary bg-container-primary tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] !sticky top-0 !z-[51] flex w-full justify-between overflow-hidden px-4 py-0',\n        {\n          'aiui-dark': theme === 'dark',\n        },\n        className\n      )}\n    >\n      <div className=\"product-nav-main desktop:flex-row desktop:gap-[48px] flex w-full flex-col justify-start\">\n        {/* Tab Links Section */}\n        <div className=\"product-nav-header laptop:w-full desktop:w-fit desktop:gap-[24px] desktop:py-0 flex w-full flex-row items-center justify-between gap-[16px] pt-[14px]\">\n          <div className=\"product-nav-tabs flex flex-row items-center gap-[8px]\">\n            {tabLinks.map((tabLink, index) => {\n              return (\n                <div key={tabLink.link || index} className=\"product-nav-tab-item flex items-center gap-[8px]\">\n                  <a\n                    href={tabLink.link}\n                    className={cn(\n                      'product-nav-tab-link hover:text-brand-color text-nowrap text-[14px] font-bold tracking-[-0.04em]',\n                      {\n                        'text-[#6D6D6F]': index !== 0,\n                        'hidden desktop:block': index === 1,\n                      }\n                    )}\n                    // onClick={() => onShowSpecs?.(false)}\n                  >\n                    <span>{tabLink.label}</span>\n                  </a>\n                  {index !== tabLinks.length - 1 && (\n                    <div className=\"product-nav-tab-divider desktop:inline-block hidden h-[14px] w-px bg-[#E4E5E6]\" />\n                  )}\n                </div>\n              )\n            })}\n\n            {/* Mobile Dropdown */}\n            {tabLinks.length > 1 && (\n              <Popover.Root>\n                <Popover.Trigger asChild>\n                  <button\n                    className=\"product-nav-dropdown-trigger desktop:hidden -ml-1 inline-block\"\n                    aria-label=\"More products\"\n                  >\n                    <ChevronDownIcon className=\"text-[#1D1D1F]\" />\n                  </button>\n                </Popover.Trigger>\n                <Popover.Content\n                  className=\"product-nav-dropdown-content rounded-[6px] border border-[#E4E5E6] bg-white p-[6px] px-[8px] py-[4px]\"\n                  style={{\n                    boxShadow: '0px 4px 8px 0px rgba(0,0,0,0.12)',\n                  }}\n                  side=\"bottom\"\n                  align=\"end\"\n                  alignOffset={10}\n                  sideOffset={10}\n                >\n                  {tabLinks.slice(1).map(tabLink => (\n                    <a\n                      key={tabLink.link}\n                      href={tabLink.link}\n                      className=\"product-nav-dropdown-link hover:text-brand-color text-nowrap\"\n                    >\n                      <span>{tabLink.label}</span>\n                    </a>\n                  ))}\n                </Popover.Content>\n              </Popover.Root>\n            )}\n          </div>\n\n          {/* Mobile Actions */}\n          <div className=\"product-nav-mobile-actions desktop:hidden desktop:gap-[24px] flex items-center gap-[16px]\">\n            {/* {specs?.text && (\n                <Text\n                  size={2}\n                  onClick={handleSpecsClick}\n                  className=\"product-nav-specs-button cursor-pointer hover:text-brand-color\"\n                >\n                  {specs.text}\n                </Text>\n              )} */}\n            {textLink?.link && (\n              <a\n                href={textLink.link}\n                target={textLink.target || '_self'}\n                className=\"product-nav-text-link hover:text-brand-color cursor-pointer\"\n              >\n                <Text size={2} className=\"text-nowrap\">\n                  {textLink.text}\n                </Text>\n              </a>\n            )}\n            {buyBtn?.link && (\n              <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n                {buyBtn.text}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* Anchor Navigation */}\n        <div className=\"product-nav-anchors hide-scrollbar laptop:w-fit desktop:gap-[24px] desktop:py-[8px] flex w-full items-center gap-[16px] overflow-x-scroll py-[12px]\">\n          {anchorList.map(anchor => (\n            <a\n              key={anchor.id}\n              href={`#${anchor.id}`}\n              className=\"product-nav-anchor-link\"\n              onClick={e => {\n                handleAnchorClick(e)\n              }}\n            >\n              <Text size={2} className=\"product-nav-anchor-text text-nowrap\">\n                {anchor.label}\n              </Text>\n              <div\n                className={cn(\n                  'product-nav-anchor-indicator laptop:top-[12px] desktop:top-[10px] relative top-[12px] h-[4px] w-full bg-transparent',\n                  {\n                    'bg-brand-color': hash === `#${anchor.id}`,\n                  }\n                )}\n              />\n            </a>\n          ))}\n        </div>\n      </div>\n\n      {/* Desktop Actions */}\n      <div className=\"product-nav-desktop-actions desktop:flex desktop:gap-[24px] desktop:py-[8px] hidden items-center gap-[16px]\">\n        {/* {specs?.text && (\n            <Text\n              size={2}\n              onClick={handleSpecsClick}\n              className=\"product-nav-specs-button cursor-pointer text-black hover:text-brand-color\"\n            >\n              {specs.text}\n            </Text>\n          )} */}\n        {textLink?.link && (\n          <a\n            href={textLink.link}\n            target={textLink.target || '_self'}\n            className=\"product-nav-text-link hover:text-brand-color cursor-pointer text-black\"\n          >\n            <Text size={2} className=\"text-nowrap\">\n              {textLink.text}\n            </Text>\n          </a>\n        )}\n        {buyBtn?.link && (\n          <Button as=\"a\" href={buyBtn.link} size=\"sm\" className=\"product-nav-buy-button text-nowrap\">\n            {buyBtn.text}\n          </Button>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductNav.displayName = 'ProductNav'\n\nexport default withLayout(ProductNav)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "useEffect", "forwardRef", "useImperativeHandle", "useRef", "cn", "withLayout", "Button", "Text", "useExposure", "Popover", "componentType", "componentName", "ChevronDownIcon", "props", "ProductNav", "className", "data", "id", "ref", "tabLinks", "anchorList", "textLink", "buyBtn", "theme", "hash", "setHash", "innerRef", "handleHashChange", "headerElements", "originalStyles", "element", "htmlElement", "originalPosition", "handleAnchorClick", "tabLink", "index", "anchor", "e", "ProductNav_default"]
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Img } from '../../types/props.js';
 export type SelectStoreDataType = {
     title: string;
@@ -15,7 +14,7 @@ type SelectStoreType = {
     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 | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 } & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as b,jsx as t,jsxs as r}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Picture as i,Text as s}from"../../components/index.js";import{useExposure as n}from"../../hooks/useExposure.js";import{useRef as d}from"react";const g="image",x="select_store",f=({index:o,item:e})=>{const p=d(null);return n(p,{componentType:g,componentName:x,position:o+1,componentTitle:e.title,componentDescription:e.desc}),r("div",{ref:p,className:"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper rounded-box relative flex aspect-[358/240] flex-col overflow-hidden bg-[#EAEAEC]",children:[t(i,{className:"object-cover",imgClassName:"w-full object-cover",source:`${e?.img?.url}, ${e?.padImg?.url} 1439, ${e?.miniImg?.url} 1023, ${e?.mobileImg?.url} 767`}),r("div",{className:"laptop:px-6 laptop:pb-6 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4",children:[t(s,{html:e?.title,className:"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#1d1d1f] [&_*_strong]:!font-bold"}),t(s,{html:e?.desc,className:"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#1d1d1f]"})]})]})},u=o=>{const{data:e,className:p}=o,{list:a}=e;return t(b,{children:t("div",{className:"",children:t("div",{className:"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4",children:a.map((m,l)=>t(f,{index:l,item:m},l))})})})};var D=c(u);export{D as default};
+"use client";import{Fragment as d,jsx as t,jsxs as p}from"react/jsx-runtime";import"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Picture as i,Text as l}from"../../components/index.js";const m=o=>{const{data:s,className:g}=o,{list:a}=s;return t(d,{children:t("div",{className:"",children:t("div",{className:"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4",children:a.map((e,r)=>p("div",{className:"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper relative flex aspect-[358/240] flex-col overflow-hidden rounded-2xl bg-[#EAEAEC]",children:[t(i,{className:"object-cover",imgClassName:"w-full object-cover",source:`${e?.img?.url}, ${e?.padImg?.url} 1439, ${e?.miniImg?.url} 1023, ${e?.mobileImg?.url} 767`}),p("div",{className:"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4",children:[t(l,{html:e?.title,className:"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#1d1d1f] [&_*_strong]:!font-bold"}),t(l,{html:e?.desc,className:"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#1d1d1f]"})]})]},r))})})})};var I=c(m);export{I as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +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'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\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 componentType = 'image'\nconst componentName = 'select_store'\n\nconst Item = ({ index, item }: { index: number; item: SelectStoreDataType }) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: index + 1,\n    componentTitle: item.title,\n    componentDescription: item.desc,\n  })\n\n  return (\n    <div\n      ref={ref}\n      className=\"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper rounded-box relative flex aspect-[358/240] flex-col overflow-hidden bg-[#EAEAEC]\"\n    >\n      <Picture\n        className=\"object-cover\"\n        imgClassName=\"w-full object-cover\"\n        source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n      />\n      <div className=\"laptop:px-6 laptop:pb-6 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4\">\n        <Text\n          html={item?.title}\n          className=\"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#1d1d1f] [&_*_strong]:!font-bold\"\n        />\n        <Text\n          html={item?.desc}\n          className=\"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#1d1d1f]\"\n        />\n      </div>\n    </div>\n  )\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=\"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4\">\n          {list.map((item, index) => (\n            <Item key={index} index={index} item={item} />\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": "aAsDM,OAwBF,YAAAA,EAxBE,OAAAC,EAKA,QAAAC,MALA,oBArDN,MAAmB,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,UAAAC,MAAc,QA4BvB,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAAoD,CAC9E,MAAMC,EAAMN,EAAuB,IAAI,EAEvC,OAAAD,EAAYO,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,MACrB,qBAAsBA,EAAK,IAC7B,CAAC,EAGCV,EAAC,OACC,IAAKW,EACL,UAAU,oLAEV,UAAAZ,EAACG,EAAA,CACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGQ,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACAV,EAAC,OAAI,UAAU,oEACb,UAAAD,EAACI,EAAA,CACC,KAAMO,GAAM,MACZ,UAAU,0FACZ,EACAX,EAACI,EAAA,CACC,KAAMO,GAAM,KACZ,UAAU,+EACZ,GACF,GACF,CAEJ,EAEME,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,OACEf,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAI,UAAU,GACb,SAAAA,EAAC,OAAI,UAAU,+DACZ,SAAAiB,EAAK,IAAI,CAACN,EAAMD,IACfV,EAACS,EAAA,CAAiB,MAAOC,EAAO,KAAMC,GAA3BD,CAAiC,CAC7C,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOQ,EAAQhB,EAAWW,CAAW",
-  "names": ["Fragment", "jsx", "jsxs", "withLayout", "Picture", "Text", "useExposure", "useRef", "componentType", "componentName", "Item", "index", "item", "ref", "SelectStore", "props", "data", "className", "list", "SelectStore_default"]
+  "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=\"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4\">\n          {list.map((item, index) => (\n            <div\n              key={index}\n              className=\"lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] select-store-wrapper relative flex aspect-[358/240] flex-col overflow-hidden rounded-2xl bg-[#EAEAEC]\"\n            >\n              <Picture\n                className=\"object-cover\"\n                imgClassName=\"w-full object-cover\"\n                source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n              />\n              <div className=\"laptop:px-6 laptop:pb-4 lg-desktop:px-8 lg-desktop:pb-8 px-4 pb-4\">\n                <Text\n                  html={item?.title}\n                  className=\"lg-desktop:text-[24px] text-[20px] leading-[1.2] text-[#1d1d1f] [&_*_strong]:!font-bold\"\n                />\n                <Text\n                  html={item?.desc}\n                  className=\"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#1d1d1f]\"\n                />\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,EAQU,OAAAC,EAKA,QAAAC,MAbV,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,+DACZ,SAAAS,EAAK,IAAI,CAACC,EAAMC,IACfV,EAAC,OAEC,UAAU,oLAEV,UAAAD,EAACG,EAAA,CACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACAT,EAAC,OAAI,UAAU,oEACb,UAAAD,EAACI,EAAA,CACC,KAAMM,GAAM,MACZ,UAAU,0FACZ,EACAV,EAACI,EAAA,CACC,KAAMM,GAAM,KACZ,UAAU,+EACZ,GACF,IAjBKC,CAkBP,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.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ShelfDisplayProps } from './shelfDisplay.js';
 declare const _default: React.ForwardRefExoticComponent<Omit<Omit<ShelfDisplayProps & React.RefAttributes<HTMLDivElement>, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string | undefined;
-    data?: Record<string, any> | undefined;
+    className?: string;
+    data?: Record<string, any>;
 }, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,2 +1,2 @@
-"use client";import{jsx as r,jsxs as de}from"react/jsx-runtime";import U,{useState as P,useEffect as x,useRef as p,useImperativeHandle as X}from"react";import{cn as Y}from"../../helpers/utils.js";import ee from"./tabSwitch.js";import te from"../Title/index.js";import se from"../SwiperBox/index.js";import{withLayout as ne}from"../../shared/Styles.js";import{gaTrack as C}from"../../shared/track.js";import{useMediaQuery as ae}from"react-responsive";import{useRollout as ie}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as re,ShelfDisplayHorizontalItem as oe}from"./shelfDisplayItem.js";const le="image",me="product_shelf",ce=o=>o==null?"default":String(o).replace(/[^a-zA-Z0-9_-]/g,"")||"default",fe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,pe=U.forwardRef(({key:o,data:l,event:H,buildData:B,breakpoints:E,className:V="",recommendedData:a,target:L="_self",metafields:N,isDisplayGudgments:b=!1,isDisplayBackImage:z=!1},A)=>{const{productsTab:m=[],productsCard:$=[],title:y,isShowTab:d=!0,tabShape:q="square",isShowTag:O=!1,isShowOriginalPrice:K=!0,isShowRecommendedCard:Q=!1,...W}=l,[S,v]=P(""),[n,u]=P([]),k=p(!1),h=p(!1),T=p(null),Z=p(fe()),j=ae({query:"(max-width: 768px)"}),[F,I]=ie({threshold:0}),c=n?.length<=1&&b,i=!j&&n?.length<=2&&b,w=e=>{switch(e){case 1440:return i?n?.length:4;case 1024:return i?n?.length:3;default:return i?n?.length:2.3}},R=()=>{C({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:a?.map((e,_)=>{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:_+1}})}})},g=(e,_)=>{if(_){const f=a?.map?.(s=>({...s,isShowRecommended:!0}));u(f?.length?f||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(t=>{const M=B?.products?.find(J=>J?.handle===t?.handle);if(M)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,...M}})?.filter(t=>t);u(s?.length?s||[]:[])}else u([])};X(A,()=>T.current),x(()=>{I&&a?.length&&!k.current&&(k.current=!0,R())},[I,a]),x(()=>{if(!h.current){if(!h.current&&a?.length&&(h.current=!0),d){v(m?.[0]?.tab||""),g(m?.[0]?.data||[],m?.[0]?.isShowRecommendedTab);return}g($,Q)}},[a]);const G=ce(S),D=`${Z.current}-${G}`;return de("div",{ref:T,className:Y("shelf-display-wrap w-full",V,{"aiui-dark":l?.theme==="dark"}),children:[y&&r(te,{data:{title:y}}),d&&r("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:r(ee,{value:S,tabs:m,tabShape:q,onTabClick:e=>{if(v(e?.tab),g(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){C({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:le,component_name:me,component_title:l?.title,component_position:1,navigation:e?.tab}});return}R()}})}),r("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:r(se,{data:{list:n,configuration:{...W,event:H,isShowTag:O,isShowOriginalPrice:K,target:L,metafields:N,itemLength:n?.length,isDisplayBackImage:z}},id:D,className:`${d?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:i?"flex-1":"",Slide:i?oe:re,breakpoints:E||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c?1:1.2},768:{spaceBetween:c?0:16,freeMode:!1,slidesPerView:w()},1024:{spaceBetween:c?0:16,freeMode:!1,slidesPerView:w(1024)},1440:{spaceBetween:c?0:16,freeMode:!1,slidesPerView:w(1440)}}},D)})]})});var Te=ne(pe);export{Te 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":""} shelf-display-swiper-box !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 { 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 sanitizeCssSelector = (value?: string | number) => {\n  if (value === undefined || value === null) return 'default'\n  const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n  return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\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    const instanceIdRef = useRef<string>(createInstanceId())\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    const safeTabKey = sanitizeCssSelector(tabId)\n    const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\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            key={swiperInstanceId}\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={swiperInstanceId}\n            className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !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", "sanitizeCssSelector", "value", "createInstanceId", "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", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "safeTabKey", "swiperInstanceId", "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' : ''} shelf-display-swiper-box !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"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.d.ts

@@ -1,7 +1,3 @@
-export declare const getProductImage: (data: any) => {
-    imageUrl: any;
-    altText: any;
-};
 export declare const ShelfDisplayWrapItem: ({ data, configuration }: {
     data: any;
     configuration?: any;

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

@@ -1,10 +1,10 @@
-import{Fragment as X,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as Y}from"../AiuiProvider/index.js";import{formatVariantPrice as Z}from"./shelfDisplay.js";import J from"../../components/picture.js";import K from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as ee}from"../../components/text.js";import F from"../../components/button.js";import{gaTrack as te}from"../../shared/track.js";import{trackUrlRef as se}from"../../shared/trackUrlRef.js";import{Heading as le}from"../../components/heading.js";import{getCouponFromVariant as oe}from"./handleCoupon.js";import{useExposure as ae}from"../../hooks/useExposure.js";import{useRef as ie,useEffect as ne,useMemo as T,useState as Q}from"react";const A="image",G="product_shelf",re=999999999e-2,pe=e=>{const t=e?.sku,u=e?.variants,x=u?.find(b=>b?.sku===t),_=x?.image?.url||u?.[0]?.image?.url||"",g=x?.image?.altText||u?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:_,altText:g}},Te=({data:e,configuration:t})=>{const{isDisplayBackImage:u=!1,itemShape:x,metafields:_,isTopTag:g=!1,isShowTag:b,isShowOriginalPrice:f}=t||{},{locale:h="us",copyWriting:O,inApp:S,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}=Y(),{discounts:U,discountsCopy:D}=_||{},z=ie(null),[H,i]=Q([]),[L,M]=Q(""),R=(l,c,p)=>t?.event?.primaryButton?.(l,c+1,p),P=(l,c,p)=>t?.event?.secondaryButton?.(l,c+1,p),a=T(()=>{const l=e?.variants||[];if(l.length)return e?.sku&&l.find(c=>c?.sku===e?.sku)||l[0]},[e?.sku,e?.variants]),W=!a?.availableForSale&&a?.price?.amount===re,$=T(()=>oe({variant:a,inApp:S,udcGroupIds:N,udcWhiteGroupIds:B,targetCode:C,channel:I}),[a,S,N,B,C,I]),j=!!(f&&$),E=e?.price?.currencyCode||"USD",y=T(()=>Z({locale:h,amount:j?$?.variant_price4wscode:a?.price,baseAmount:j?a?.price:0,currencyCode:E}),[E,h,j,$?.variant_price4wscode,a]),{price:V,basePrice:q,discount:r}=y,{imageUrl:w,altText:k}=pe(e),v=e?.custom_name||e?.title,o=e?.custom_description||e?.description;ne(()=>{let l=[];if(r){const p=`${r}${U?.off||D?.off||""}`;M(p),l.push(p)}const c=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,r?1:2);i(l.concat(c))},[e?.tags,r,U?.off,D?.off]),ae(z,{componentType:A,componentName:G,componentTitle:v,componentDescription:o,position:t?.index+1});const n=()=>m(X,{children:[b&&H?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((l,c)=>s(K,{className:"shelf-items-tag",children:l},c))}):null,v?s(le,{as:"h3",title:v||"",size:2,className:"shelf-display-product-title line-clamp-2",html:v||""}):null,o?s(ee,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:o||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:W?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):m(X,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&V||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&q||""})]})}),m("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>P(e,t?.index,t),className:`
+import{Fragment as W,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as A}from"../AiuiProvider/index.js";import{formatVariantPrice as R}from"./shelfDisplay.js";import E from"../../components/picture.js";import F from"../../components/badge.js";import{cn as u}from"../../helpers/utils.js";import{Text as M}from"../../components/text.js";import B from"../../components/button.js";import{gaTrack as V}from"../../shared/track.js";import{trackUrlRef as q}from"../../shared/trackUrlRef.js";import{Heading as G}from"../../components/heading.js";import{useExposure as J}from"../../hooks/useExposure.js";import{useRef as K,useEffect as Q,useState as U}from"react";const D="image",C="product_shelf",X=999999999e-2,me=({data:e,configuration:t})=>{const{isDisplayBackImage:$=!1,itemShape:g,metafields:I,isTopTag:P=!1,isShowTag:j,isShowOriginalPrice:x}=t||{},{locale:v="us",copyWriting:k}=A(),{discounts:O,discountsCopy:w}=I||{},S=K(null),[N,i]=U([]),[_,z]=U(""),T=(l,r,p)=>t?.event?.primaryButton?.(l,r+1,p),y=(l,r,p)=>t?.event?.secondaryButton?.(l,r+1,p),n=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},H=!n?.availableForSale&&n?.price?.amount===X,m=n?.coupons?.[0],{price:L,basePrice:f,discount:d}=R({locale:v,amount:x&&m?m.variant_price4wscode:n.price,baseAmount:x&&m?n.price:0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const l=e?.sku,r=e?.variants;return r?.find(Y=>Y?.sku===l)?.image?.url||r?.[0]?.image?.url||""},h=e?.custom_name||e?.title,a=e?.custom_description||e?.description;Q(()=>{let l=[];if(d){const p=`${d}${O?.off||w?.off||""}`;z(p),l.push(p)}const r=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);i(l.concat(r))},[e?.tags,d]),J(S,{componentType:D,componentName:C,componentTitle:h,componentDescription:a,position:t?.index+1});const o=()=>c(W,{children:[j&&N?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:N?.map?.((l,r)=>s(F,{className:"shelf-items-tag",children:l},r))}):null,h?s(G,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title line-clamp-2",html:h||""}):null,a?s(M,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:a||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:H?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k?.soldOutText}):c(W,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&L||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&f||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>y(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{variant:"primary",onClick:()=>R(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>T(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:d("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",x==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:u?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(J,{source:w,alt:k,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:n()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&g&&s(K,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),s("div",{className:d("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":v,target:t?.target,href:se(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{te({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(J,{source:w,alt:k,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),n()]})},e?.id||e?.handle)},_e=({data:e,configuration:t})=>{const{itemShape:u,itemLength:x,metafields:_}=t||{},{discounts:g,discountsCopy:b}=_||{},{locale:f="us",copyWriting:h,inApp:O,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}=Y(),[I,U]=Q([]),D=ie(null),z=(o,n,l)=>t?.event?.primaryButton?.(o,n+1,l),H=(o,n,l)=>t?.event?.secondaryButton?.(o,n+1,l),i=T(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(n=>n?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),L=!i?.availableForSale&&i?.price?.amount===re,M=t?.isShowTag,R=t?.isShowOriginalPrice,P=T(()=>oe({variant:i,inApp:O,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}),[i,O,S,N,B,C]),a=!!(R&&P),W=e?.price?.currencyCode||"USD",$=T(()=>Z({locale:f,amount:a?P?.variant_price4wscode:i?.price,baseAmount:a?i?.price:0,currencyCode:W}),[W,f,a,P?.variant_price4wscode,i]),{price:j,basePrice:E,discount:y}=$,{imageUrl:V,altText:q}=pe(e),r=e?.custom_name||e?.title,w=e?.custom_description||e?.description;ae(D,{componentType:A,componentName:G,componentTitle:r,componentDescription:w,position:t?.index+1});const k=()=>x>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},v=()=>x>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return ne(()=>{let o=[];if(y){const l=`${y}${g?.off||b?.off||""}`;o.push(l)}const n=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,y?1:2);U(o.concat(n))},[e?.tags,y,g?.off,b?.off]),s("div",{ref:D,className:d(k().wrap,u==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:m("div",{className:d(v(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:d(k().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":r,target:t?.target,href:se(`${f==="us"||!f?"":`/${f}`}/products/${e?.handle}`,`${A}_${G}`),onClick:()=>{te({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(J,{source:V,alt:q,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:d("flex flex-col items-start justify-center",k().boxItem),children:[M&&I?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:I?.map?.((o,n)=>s(K,{className:"shelf-items-tag",children:o},n))}):null,r?s(le,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:r||""}):null,w?s(ee,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:w||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:L?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):m(X,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&j||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&E||""})]})}),m("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(F,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
+            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:S,className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",g==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:$?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:o()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[_&&P&&s(F,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:_||""}),s("div",{className:u("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":h,target:t?.target,href:q(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(E,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),o()]})},e?.id||e?.handle)},de=({data:e,configuration:t})=>{const{itemShape:$,itemLength:g,metafields:I}=t||{},{discounts:P,discountsCopy:j}=I||{},{locale:x="us",copyWriting:v}=A(),[k,O]=U([]),w=K(null),S=(a,o,l)=>t?.event?.primaryButton?.(a,o+1,l),N=(a,o,l)=>t?.event?.secondaryButton?.(a,o+1,l),i=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0]||{},_=!i?.availableForSale&&i?.price?.amount===X,z=t?.isShowTag,T=t?.isShowOriginalPrice,y=i?.coupons?.[0],{price:n,basePrice:H,discount:m}=R({locale:x,amount:T&&y?y.variant_price4wscode:i.price,baseAmount:T&&y?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),L=()=>{const a=e?.sku,o=e?.variants;return o?.find(r=>r?.sku===a)?.image?.url||o?.[0]?.image?.url||""},f=e?.custom_name||e?.title,d=e?.custom_description||e?.description;J(w,{componentType:D,componentName:C,componentTitle:f,componentDescription:d,position:t?.index+1});const b=()=>g>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},h=()=>g>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return Q(()=>{let a=[];if(m){const l=`${m}${P?.off||j?.off||""}`;a.push(l)}const o=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,m?1:2);O(a.concat(o))},[e?.tags,m]),s("div",{ref:w,className:u(b().wrap,$==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:c("div",{className:u(h(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:u(b().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":f,target:t?.target,href:q(`${x==="us"||!x?"":`/${x}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{V({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(E,{source:L(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:u("flex flex-col items-start justify-center",b().boxItem),children:[z&&k?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:k?.map?.((a,o)=>s(F,{className:"shelf-items-tag",children:a},o))}):null,f?s(G,{as:"h3",title:f||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:f||""}):null,d?s(M,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:d||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:_?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:v?.soldOutText}):c(W,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&n||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&H||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>N(e,t?.index,t),className:`
                 ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(F,{variant:"primary",onClick:()=>z(e,t?.index,t),className:`
+              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>S(e,t?.index,t),className:`
               ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{_e as ShelfDisplayHorizontalItem,Te as ShelfDisplayWrapItem,pe as getProductImage};
+            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{de as ShelfDisplayHorizontalItem,me as ShelfDisplayWrapItem};
 //# sourceMappingURL=shelfDisplayItem.js.map