npm - @anker-in/headless-ui - Versions diffs - 1.1.79 → 1.1.80 - Mend

@anker-in/headless-ui 1.1.79 → 1.1.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (161) hide show

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductGallery/index.tsx"],
-  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920}`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1919`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1439`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 1023`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 767`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"laptop:gap-2 laptop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductGalleryTab.displayName = 'ProductGalleryTab'\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const [textGroups, setTextGroups] = useState<string[]>([])\n  const measureRef = useRef<HTMLDivElement>(null)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n  useEffect(() => {\n    const calculateGroups = () => {\n      if (!props?.comment?.content || !measureRef.current) return\n\n      const measureEl = measureRef.current\n\n      // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n      measureEl.textContent = 'Test'\n      const singleLineHeight = measureEl.offsetHeight\n      const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n      // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n      const cleanText = props.comment.content\n        .replace(/<[^>]*>/g, ' ')\n        .replace(/\\s+/g, ' ')\n        .trim()\n      const words = cleanText.split(' ')\n      const groups: string[] = []\n      let currentGroup = ''\n\n      for (let i = 0; i < words.length; i++) {\n        const word = words[i]\n        const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n        // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n        measureEl.textContent = testText\n        const testHeight = measureEl.offsetHeight\n\n        if (testHeight > twoLinesMaxHeight) {\n          // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n          if (currentGroup) {\n            groups.push(currentGroup)\n            currentGroup = word\n          } else {\n            // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n            groups.push(word)\n            currentGroup = ''\n          }\n        } else {\n          // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n          currentGroup = testText\n        }\n      }\n\n      // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n      if (currentGroup) {\n        groups.push(currentGroup)\n      }\n\n      // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n      measureEl.textContent = ''\n      setTextGroups(groups)\n    }\n\n    // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n    const rafId = requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        calculateGroups()\n      })\n    })\n\n    // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n    const handleResize = () => {\n      calculateGroups()\n    }\n\n    window.addEventListener('resize', debounce(handleResize, 500))\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', debounce(handleResize, 500))\n    }\n  }, [props?.comment?.content])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative max-w-[528px]\">\n              {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n              <div\n                ref={measureRef}\n                className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n                style={{ visibility: 'hidden' }}\n              />\n              <Swiper\n                modules={[Autoplay]}\n                loop={textGroups.length > 1}\n                className=\"h-[44px]\"\n                direction=\"vertical\"\n                autoplay={{ delay: 5000, disableOnInteraction: false }}\n              >\n                {textGroups.length > 0 ? (\n                  textGroups.map((group, index) => (\n                    <SwiperSlide key={index + 'text-group'}>\n                      <Text\n                        html={group}\n                        as=\"div\"\n                        className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n                      />\n                    </SwiperSlide>\n                  ))\n                ) : (\n                  <SwiperSlide>\n                    <Text\n                      as=\"div\"\n                      html={props?.comment?.content}\n                      className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                    />\n                  </SwiperSlide>\n                )}\n              </Swiper>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nProductGalleryTabImage.displayName = 'ProductGalleryTabImage'\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { Text, Picture, Badge } from '../../../../../components/index.js'\nimport {\n  useCallback,\n  useMemo,\n  useState,\n  forwardRef,\n  useRef,\n  useEffect,\n  type Dispatch,\n  type SetStateAction,\n  useImperativeHandle,\n} from 'react'\nimport { Swiper, SwiperSlide, type SwiperRef } from 'swiper/react'\nimport { Navigation, Mousewheel, Thumbs, Pagination, Autoplay } from 'swiper/modules'\nimport { cn } from '../../../../../helpers/index.js'\nimport { GalleryTabType } from './types.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useVariantMedia } from '../../../hooks/use-variant-media.js'\nimport { SpecsModal } from './components/SpecsModal.js'\nimport CompareModal from './components/CompareModal.js'\nimport { formatPrice } from '../../../utils/index.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../shared/track.js'\nimport { ExposureDetector } from '../../../../../components/index.js'\n\nimport type { Swiper as SwiperType } from 'swiper'\nimport type { ImageMedia, VideoMedia } from '../../../hooks/use-variant-media.js'\nimport type { ProductGalleryProps, ProductGalleryTabItemProps, GalleryTabItemProps } from './types.js'\nimport { debounce } from 'es-toolkit'\n\nconst SwiperLeftButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect x=\"48\" y=\"48\" width=\"48\" height=\"48\" rx=\"24\" transform=\"rotate(-180 48 48)\" fill=\"white\" />\n      <path\n        d=\"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst SwiperRightButtonIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n      <rect width=\"48\" height=\"48\" rx=\"24\" transform=\"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)\" fill=\"white\" />\n      <path\n        d=\"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\nconst ProductGallery = () => {\n  const { copyWriting } = useAiuiContext()\n  const { product, variant, selectedOptions } = useBizProductContext()\n  const defaultMediaData = useVariantMedia({ product, variant })\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const productGalleryTabRef = useRef<ProductGalleryTabRef>(null)\n\n  const customMediaList = variant?.metafields?.component?.custom_media_list\n  let productList: ImageMedia[], sceneList: ImageMedia[], keyFeaturesList: ImageMedia[], videoList: VideoMedia[]\n\n  if (customMediaList && customMediaList?.available) {\n    productList = customMediaList?.product || []\n    sceneList = customMediaList?.scenarios || []\n    keyFeaturesList = customMediaList?.keyFeatures || []\n    videoList = customMediaList?.video || []\n  } else {\n    productList = defaultMediaData?.productList\n    sceneList = defaultMediaData?.sceneList\n    keyFeaturesList = defaultMediaData?.keyFeaturesList\n    videoList = defaultMediaData?.videoList\n  }\n\n  const allMedia = useMemo(() => [...productList, ...sceneList, ...videoList], [productList, sceneList, videoList])\n\n  const galleryMap: Record<string, ImageMedia[] | VideoMedia[]> = {\n    productList: productList,\n    sceneList: sceneList,\n    keyFeaturesList: keyFeaturesList,\n    videoList: videoList,\n  }\n\n  const galleryTabs = useMemo(() => {\n    const productTab: ProductGalleryProps =\n      product?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n    const variantProductGallery =\n      variant?.payload?.components?.find((item: any) => item.componentKey === 'ProductGallery')?.data || []\n\n    return productTab\n      ?.map((item: any) => {\n        // \u5982\u679C\u5B58\u5728 images \u6570\u7EC4\u4E14\u6709\u6709\u6548\u503C\uFF0C\u4F18\u5148\u4F7F\u7528 images \u521B\u5EFA\u54CD\u5E94\u5F0F\u56FE\u7247\u6570\u636E\n        const variantProductGalleryItem = variantProductGallery?.find(\n          (variantItem: any) => item?.galleries === variantItem?.galleries\n        )\n        let galleries = galleryMap[item?.galleries] || []\n\n        if (\n          variantProductGalleryItem?.images &&\n          Array.isArray(variantProductGalleryItem.images) &&\n          variantProductGalleryItem.images.length > 0\n        ) {\n          // \u5904\u7406 images \u6570\u7EC4\uFF0C\u4E3A\u6BCF\u5F20\u56FE\u7247\u751F\u6210\u54CD\u5E94\u5F0F source\n          const imageGalleries = variantProductGalleryItem.images\n            .map((imageItem: any) => {\n              // \u4ECE\u5355\u4E2A\u56FE\u7247\u5BF9\u8C61\u751F\u6210\u54CD\u5E94\u5F0F\u56FE\u7247\u7684 source \u5B57\u7B26\u4E32\n              const imageSourceParts: string[] = []\n              if (imageItem.image_1920 && imageItem.image_1920.trim()) {\n                imageSourceParts.push(`${imageItem.image_1920}`)\n              }\n              if (imageItem.image_1440 && imageItem.image_1440.trim()) {\n                imageSourceParts.push(`${imageItem.image_1440} 1919`)\n              }\n              if (imageItem.image_1024 && imageItem.image_1024.trim()) {\n                imageSourceParts.push(`${imageItem.image_1024} 1439`)\n              }\n              if (imageItem.image_768 && imageItem.image_768.trim()) {\n                imageSourceParts.push(`${imageItem.image_768} 1023`)\n              }\n              if (imageItem.image_390 && imageItem.image_390.trim()) {\n                imageSourceParts.push(`${imageItem.image_390} 767`)\n              }\n\n              // \u5982\u679C\u751F\u6210\u4E86\u6709\u6548\u7684\u54CD\u5E94\u5F0F source\uFF0C\u8FD4\u56DE\u56FE\u7247\u5BF9\u8C61\n              if (imageSourceParts.length > 0) {\n                const responsiveSource = imageSourceParts.join(', ')\n                return {\n                  image: {\n                    url: responsiveSource,\n                    altText: item.comment?.content || '',\n                  },\n                  // \u6807\u8BB0\u8FD9\u662F\u4ECE images \u751F\u6210\u7684\uFF0C\u7528\u4E8E\u540E\u7EED\u5904\u7406\n                  _fromImages: true,\n                  _responsiveSource: responsiveSource,\n                } as any\n              }\n              return null\n            })\n            .filter((gallery: any) => gallery !== null) // \u8FC7\u6EE4\u6389\u65E0\u6548\u7684\u56FE\u7247\n\n          // \u5982\u679C\u4ECE images \u6570\u7EC4\u751F\u6210\u4E86\u6709\u6548\u7684\u56FE\u7247\uFF0C\u4F7F\u7528\u5B83\u4EEC\uFF1B\u5426\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries\n          if (imageGalleries.length > 0) {\n            galleries = imageGalleries\n          }\n          // \u5982\u679C images \u5B58\u5728\u4F46\u90FD\u662F\u7A7A\u503C\uFF0C\u5219\u56DE\u9000\u5230\u539F\u6709\u7684 galleries \u903B\u8F91\n        }\n\n        return {\n          ...item,\n          galleries,\n        }\n      })\n      .filter((item: any) => item.galleries.length > 0)\n  }, [variant?.payload, galleryMap, product?.payload])\n\n  const [activeGalleryTab, setActiveGalleryTab] = useState<GalleryTabItemProps>(galleryTabs?.[0])\n  const [activeTabIndex, setActiveTabIndex] = useState(0)\n  const [targetSlideIndex, setTargetSlideIndex] = useState<number | null>(null)\n\n  // \u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\uFF09\n  const handleNextTab = useCallback(() => {\n    const nextIndex = (activeTabIndex + 1) % galleryTabs.length\n    setActiveTabIndex(nextIndex)\n    setActiveGalleryTab(galleryTabs[nextIndex])\n    setTargetSlideIndex(0) // \u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\uFF08\u8DF3\u8F6C\u5230\u6700\u540E\u4E00\u5F20\uFF09\n  const handlePrevTab = useCallback(() => {\n    const prevIndex = activeTabIndex === 0 ? galleryTabs.length - 1 : activeTabIndex - 1\n    setActiveTabIndex(prevIndex)\n    setActiveGalleryTab(galleryTabs[prevIndex])\n    // \u8DF3\u8F6C\u5230\u4E0A\u4E00\u4E2A tab \u7684\u6700\u540E\u4E00\u5F20\n    const prevTabGalleries = galleryTabs[prevIndex]?.galleries || []\n    setTargetSlideIndex(prevTabGalleries.length - 1)\n  }, [activeTabIndex, galleryTabs])\n\n  // \u5F53 activeTabIndex \u53D8\u5316\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u5BF9\u5E94\u7684 tab\n  useEffect(() => {\n    if (activeTabIndex !== null && activeTabIndex !== undefined) {\n      // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDD DOM \u5DF2\u66F4\u65B0\n      requestAnimationFrame(() => {\n        productGalleryTabRef.current?.scrollToTab(activeTabIndex)\n      })\n    }\n  }, [activeTabIndex])\n\n  useEffect(() => {\n    // \u5F53 variant \u53D8\u5316\u65F6\uFF0C\u5207\u6362\u5230\u7B2C\u4E00\u4E2A tab\n    setActiveGalleryTab(galleryTabs[0])\n    setActiveTabIndex(0)\n  }, [variant?.id])\n\n  // \u4E3A\u6BCF\u4E2A tab \u6E32\u67D3\u5BF9\u5E94\u7684\u7EC4\u4EF6\n  const renderGalleryForTab = (tab: any, index: number) => {\n    switch (tab?.galleryTabType) {\n      case GalleryTabType.GALLERY_IMAGE_MAIN:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_FEATURES:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_IMAGE_SCENE:\n        return (\n          <ProductGalleryTabImage\n            {...tab}\n            index={index}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      case GalleryTabType.GALLERY_VIDEO:\n        return (\n          <ProductGalleryTabVideo\n            {...tab}\n            onNextTab={handleNextTab}\n            onPrevTab={handlePrevTab}\n            targetSlideIndex={targetSlideIndex}\n            onSlideChange={() => setTargetSlideIndex(null)}\n          />\n        )\n      default:\n        return null\n    }\n  }\n\n  return (\n    <div id=\"ipc-product-gallery\">\n      <Root className=\"relative\" value={activeGalleryTab?.tabValue} defaultValue={galleryTabs?.[0]?.tabValue}>\n        <div className=\"tablet:h-[620px] laptop-md:rounded-2xl laptop-md:h-[560px] lg-desktop:h-[700px] laptop-md:relative h-[420px] overflow-hidden bg-[#EAEAEC] \">\n          {galleryTabs.map((item: any, index: number) => {\n            return (\n              <Content key={item.tabValue} className=\"h-full\" value={item.tabValue}>\n                {renderGalleryForTab(item, index)}\n              </Content>\n            )\n          })}\n        </div>\n        <ProductGalleryTab\n          ref={productGalleryTabRef}\n          galleryTabs={galleryTabs}\n          activeGalleryTab={activeGalleryTab}\n          setActiveGalleryTab={setActiveGalleryTab}\n          setActiveTabIndex={setActiveTabIndex}\n          setTargetSlideIndex={setTargetSlideIndex}\n        />\n      </Root>\n    </div>\n  )\n}\n\nexport interface ProductGalleryTabRef {\n  scrollToTab: (index: number) => void\n}\n\nconst ProductGalleryTab = forwardRef<\n  ProductGalleryTabRef,\n  {\n    galleryTabs: GalleryTabItemProps[]\n    activeGalleryTab: GalleryTabItemProps\n    setActiveGalleryTab: Dispatch<SetStateAction<GalleryTabItemProps>>\n    setActiveTabIndex: Dispatch<SetStateAction<number>>\n    setTargetSlideIndex: Dispatch<SetStateAction<number | null>>\n  }\n>((props, ref) => {\n  const { galleryTabs, activeGalleryTab, setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex } = props\n  const { product } = useBizProductContext()\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const triggerRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const scrollToEvent = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {\n    if (scrollContainerRef.current) {\n      const container = scrollContainerRef.current\n      const button = event.currentTarget\n      const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n      container.scrollTo({\n        left: scrollLeft,\n        behavior: 'smooth',\n      })\n    }\n  }, [])\n\n  const handleGalleryTabClick = useCallback(\n    (el: React.MouseEvent<HTMLButtonElement>, item: GalleryTabItemProps, index: number) => {\n      setActiveGalleryTab(item)\n      setActiveTabIndex(index)\n      setTargetSlideIndex(0) // \u624B\u52A8\u70B9\u51FB tab \u65F6\uFF0C\u8DF3\u8F6C\u5230\u7B2C\u4E00\u5F20\n      scrollToEvent(el)\n    },\n    [setActiveGalleryTab, setActiveTabIndex, setTargetSlideIndex, scrollToEvent]\n  )\n\n  // \u6EDA\u52A8\u5230\u6307\u5B9A\u7D22\u5F15\u7684 tab\n  const scrollToTab = useCallback(\n    (index: number) => {\n      if (scrollContainerRef.current && galleryTabs[index]) {\n        const container = scrollContainerRef.current\n        const tabItem = galleryTabs[index]\n        const button = triggerRefs.current.get(tabItem.tabValue)\n\n        if (button) {\n          const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n          container.scrollTo({\n            left: scrollLeft,\n            behavior: 'smooth',\n          })\n        }\n      }\n    },\n    [galleryTabs]\n  )\n\n  useImperativeHandle(ref, () => ({\n    scrollToTab,\n  }))\n\n  return (\n    <div className=\"laptop:inset-x-16 tablet:mt-3 laptop-md:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between\">\n      <List\n        ref={scrollContainerRef}\n        className=\"laptop:p-0 laptop-md:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1\"\n        style={{\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n        }}\n      >\n        <div className=\"whitespace-nowrap\">\n          {galleryTabs?.map((item, index) => {\n            return (\n              <Trigger\n                ref={el => {\n                  if (el) {\n                    triggerRefs.current.set(item.tabValue, el)\n                  } else {\n                    triggerRefs.current.delete(item.tabValue)\n                  }\n                }}\n                className={cn(\n                  'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight',\n                  item.tabValue === activeGalleryTab?.tabValue && 'bg-white'\n                )}\n                onClick={el => handleGalleryTabClick(el, item, index)}\n                key={item.tabValue + index}\n                value={item.tabValue}\n              >\n                {item.tabLabel}\n              </Trigger>\n            )\n          })}\n        </div>\n      </List>\n      <div className=\"desktop:gap-2 desktop:flex hidden\">\n        {product.metafields?.global?.specifications && (\n          <>\n            <SpecsModal /> | <CompareModal />\n          </>\n        )}\n      </div>\n    </div>\n  )\n})\n\nProductGalleryTab.displayName = 'ProductGalleryTab'\n\nconst ProductGalleryTabImage = forwardRef<SwiperRef, ProductGalleryTabItemProps>((props, ref) => {\n  const { locale = 'us', copyWriting } = useAiuiContext()\n  const { variant, totalSavings } = useBizProductContext()\n  const paginationRef = useRef<HTMLDivElement>(null)\n  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null)\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n  const [textGroups, setTextGroups] = useState<string[]>([])\n  const measureRef = useRef<HTMLDivElement>(null)\n\n  const imageClassName = useMemo(() => {\n    if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_MAIN) {\n      return 'size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_FEATURES) {\n      // return '420px'\n    } else if (props?.galleryTabType === GalleryTabType.GALLERY_IMAGE_SCENE) {\n      // return '560px'\n    }\n  }, [props?.galleryTabType])\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && !!props.targetSlideIndex) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  // \u5C06\u6587\u672C\u63092\u884C\u4E00\u7EC4\u8FDB\u884C\u5206\u7EC4\n  useEffect(() => {\n    const calculateGroups = () => {\n      if (!props?.comment?.content || !measureRef.current) return\n\n      const measureEl = measureRef.current\n\n      // \u5148\u6D4B\u91CF\u5355\u884C\u9AD8\u5EA6\n      measureEl.textContent = 'Test'\n      const singleLineHeight = measureEl.offsetHeight\n      const twoLinesMaxHeight = singleLineHeight * 2 + 2 // 2\u884C\u7684\u6700\u5927\u9AD8\u5EA6\uFF0C\u52A02px\u5BB9\u5DEE\n\n      // \u6E05\u7406HTML\u6807\u7B7E\u5E76\u5206\u5272\u5355\u8BCD\n      const cleanText = props.comment.content\n        .replace(/<[^>]*>/g, ' ')\n        .replace(/\\s+/g, ' ')\n        .trim()\n      const words = cleanText.split(' ')\n      const groups: string[] = []\n      let currentGroup = ''\n\n      for (let i = 0; i < words.length; i++) {\n        const word = words[i]\n        const testText = currentGroup ? `${currentGroup} ${word}` : word\n\n        // \u76F4\u63A5\u5728 measureRef \u5143\u7D20\u4E0A\u6D4B\u91CF\n        measureEl.textContent = testText\n        const testHeight = measureEl.offsetHeight\n\n        if (testHeight > twoLinesMaxHeight) {\n          // \u5F53\u524D\u5355\u8BCD\u4F1A\u5BFC\u81F4\u8D85\u8FC72\u884C\uFF0C\u4FDD\u5B58\u4E4B\u524D\u7684\u7EC4\n          if (currentGroup) {\n            groups.push(currentGroup)\n            currentGroup = word\n          } else {\n            // \u5355\u4E2A\u5355\u8BCD\u5C31\u8D85\u8FC72\u884C\uFF0C\u5F3A\u5236\u52A0\u5165\n            groups.push(word)\n            currentGroup = ''\n          }\n        } else {\n          // \u8FD8\u57282\u884C\u4EE5\u5185\uFF0C\u7EE7\u7EED\u7D2F\u52A0\n          currentGroup = testText\n        }\n      }\n\n      // \u6DFB\u52A0\u6700\u540E\u4E00\u7EC4\n      if (currentGroup) {\n        groups.push(currentGroup)\n      }\n\n      // \u6E05\u7A7A\u6D4B\u91CF\u5143\u7D20\n      measureEl.textContent = ''\n      setTextGroups(groups)\n    }\n\n    // \u4F7F\u7528 requestAnimationFrame \u786E\u4FDDDOM\u6E32\u67D3\u5B8C\u6210\u540E\u518D\u8BA1\u7B97\n    const rafId = requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        calculateGroups()\n      })\n    })\n\n    // \u76D1\u542C\u7A97\u53E3\u5927\u5C0F\u53D8\u5316\uFF0C\u91CD\u65B0\u8BA1\u7B97\u5206\u7EC4\n    const handleResize = () => {\n      calculateGroups()\n    }\n\n    window.addEventListener('resize', debounce(handleResize, 500))\n    return () => {\n      cancelAnimationFrame(rafId)\n      window.removeEventListener('resize', debounce(handleResize, 500))\n    }\n  }, [props?.comment?.content])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        ref={ref}\n        className=\"h-full\"\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        pagination={{\n          clickable: true,\n          el: paginationRef.current,\n        }}\n        thumbs={{ swiper: thumbsSwiper }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          // \u751F\u6210\u552F\u4E00\u7684\u66DD\u5149 key\uFF08tabId + index\uFF09\n          const exposureKey = `${props.tabValue}-${jIndex}`\n\n          // \u66DD\u5149\u68C0\u6D4B\u56DE\u8C03\n          const handleExposure = () => {\n            gaTrack({\n              event: 'ga4Event',\n              event_name: 'component_impression',\n              event_parameters: {\n                page_group: `Product Detail Page${variant.sku}`,\n                component_type: 'image',\n                component_name: props?.tabLabel || '',\n                position: jIndex + 1,\n                creative_id: '',\n                component_title: '',\n                component_description: '',\n                navigation: '',\n              },\n            })\n          }\n\n          // \u4F18\u5148\u4F7F\u7528\u4ECE images \u751F\u6210\u7684\u54CD\u5E94\u5F0F source\uFF0C\u5426\u5219\u4F7F\u7528\u539F\u6709\u7684 image.url\n          const pictureSource = (item as any)?._responsiveSource || item?.image?.url || ''\n\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <ExposureDetector\n                onExposure={handleExposure}\n                exposureKey={exposureKey}\n                threshold={0.5}\n                duration={2000}\n                className=\"h-full\"\n              >\n                <Picture\n                  source={pictureSource}\n                  alt={item?.image?.altText}\n                  className={cn('h-full', imageClassName)}\n                  imgClassName=\"object-cover h-full\"\n                />\n              </ExposureDetector>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      {variant.availableForSale && !!totalSavings && !props.index && (\n        <Badge\n          size=\"lg\"\n          className=\"bg-brand-0 laptop:left-16 laptop:top-5 laptop-md:left-6 laptop-md:top-6 absolute left-4 top-3 z-[2] text-white\"\n        >\n          {`${formatPrice({\n            amount: totalSavings,\n            currencyCode: variant?.price?.currencyCode,\n            locale: locale,\n          })} ${copyWriting?.off}`}\n        </Badge>\n      )}\n      <div\n        className={cn(\n          'tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 laptop-md:left-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n          `swiper-button`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      <div\n        className={cn(\n          'tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 laptop-md:right-6 z-10 hidden -translate-y-1/2 cursor-pointer',\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n          `swiper-button`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className={cn('tablet:size-10 lg-desktop:size-12')} />\n      </div>\n      {/* {props?.galleries?.map((item, jIndex) => {\n        return (\n          <Picture\n            key={props?.id + 'SwiperSlideItem' + jIndex}\n            source={item?.image?.url}\n            alt={item?.image?.altText}\n            className=\"h-full\"\n            imgClassName=\"object-cover h-full\"\n          />\n        )\n      })} */}\n      <div className=\"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 laptop-md:bottom-[20px] laptop-md:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between\">\n        <div className=\"tablet:block hidden\">\n          <Swiper\n            className=\"flex items-center justify-between\"\n            onSwiper={setThumbsSwiper}\n            spaceBetween={12}\n            slidesPerView={6}\n            freeMode={true}\n            watchSlidesProgress={true}\n            modules={[Navigation, Thumbs]}\n          >\n            {props?.galleries?.map((item, jIndex) => (\n              <SwiperSlide\n                key={props?.id + 'SwiperSlideThumbItem' + jIndex}\n                className=\"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded\"\n              >\n                <Picture\n                  source={item.image?.url}\n                  alt={item.image?.altText}\n                  className=\"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white\"\n                  imgClassName=\"object-cover h-full\"\n                />\n              </SwiperSlide>\n            ))}\n          </Swiper>\n        </div>\n        {!props?.index && (\n          <div className=\"flex items-center gap-2\">\n            <Picture\n              source={props?.comment?.avatar?.url}\n              className=\"laptop:size-10 size-8 shrink-0 rounded-full\"\n              imgClassName=\"object-cover \"\n            />\n            <div className=\"relative max-w-[528px]\">\n              {/* \u9690\u85CF\u7684\u6D4B\u91CF\u5143\u7D20 */}\n              <div\n                ref={measureRef}\n                className=\"lg-desktop:text-base pointer-events-none text-sm font-bold text-[#1D1D1F] opacity-0\"\n                style={{ visibility: 'hidden' }}\n              />\n              <Swiper\n                modules={[Autoplay]}\n                loop={textGroups.length > 1}\n                className=\"h-[44px]\"\n                direction=\"vertical\"\n                autoplay={{ delay: 5000, disableOnInteraction: false }}\n              >\n                {textGroups.length > 0 ? (\n                  textGroups.map((group, index) => (\n                    <SwiperSlide key={index + 'text-group'}>\n                      <Text\n                        html={group}\n                        as=\"div\"\n                        className=\"lg-desktop:text-base overflow-hidden text-sm font-bold text-[#1D1D1F]\"\n                      />\n                    </SwiperSlide>\n                  ))\n                ) : (\n                  <SwiperSlide>\n                    <Text\n                      as=\"div\"\n                      html={props?.comment?.content}\n                      className=\"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]\"\n                    />\n                  </SwiperSlide>\n                )}\n              </Swiper>\n            </div>\n          </div>\n        )}\n      </div>\n      <div\n        ref={paginationRef}\n        className=\"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#080A0F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100\"\n      />\n    </div>\n  )\n})\n\nProductGalleryTabImage.displayName = 'ProductGalleryTabImage'\n\nconst ProductGalleryTabVideo = (props: ProductGalleryTabItemProps) => {\n  const [swiper, setSwiper] = useState<SwiperType | null>(null)\n\n  // \u5904\u7406\u5DE6\u53F3\u6309\u94AE\u70B9\u51FB\uFF0C\u652F\u6301\u8DE8 tab \u5FAA\u73AF\n  const handlePrevClick = useCallback(() => {\n    if (swiper?.isBeginning) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u7B2C\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0A\u4E00\u4E2A tab\n      props.onPrevTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slidePrev()\n    }\n  }, [swiper, props])\n\n  const handleNextClick = useCallback(() => {\n    if (swiper?.isEnd) {\n      // \u5F53\u524D tab \u5DF2\u7ECF\u662F\u6700\u540E\u4E00\u5F20\uFF0C\u5207\u6362\u5230\u4E0B\u4E00\u4E2A tab\n      props.onNextTab?.()\n    } else {\n      // \u5426\u5219\u5728\u5F53\u524D tab \u5185\u5207\u6362\n      swiper?.slideNext()\n    }\n  }, [swiper, props])\n\n  // \u76D1\u542C targetSlideIndex\uFF0C\u5F53 tab \u5207\u6362\u65F6\u8DF3\u8F6C\u5230\u6307\u5B9A\u7684 slide\n  useEffect(() => {\n    if (swiper && props.targetSlideIndex !== null && props.targetSlideIndex !== undefined) {\n      swiper.slideTo(props.targetSlideIndex, 0) // 0 \u8868\u793A\u7ACB\u5373\u8DF3\u8F6C\uFF0C\u65E0\u52A8\u753B\n      props.onSlideChange?.() // \u6E05\u9664 targetSlideIndex\n    }\n  }, [swiper, props.targetSlideIndex, props])\n\n  return (\n    <div className=\"h-full [&_.swiper-button]:hover:opacity-100\">\n      <Swiper\n        className=\"h-full\"\n        onSwiper={setSwiper}\n        onTouchEnd={(swiper, event) => {\n          if (swiper.isBeginning && swiper.swipeDirection === 'prev') {\n            handlePrevClick()\n          } else if (swiper.isEnd && swiper.swipeDirection === 'next') {\n            handleNextClick()\n          }\n        }}\n        // navigation={{\n        //   nextEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-next`,\n        //   prevEl: `.ipc-product-gallery-${props?.id}-custom-swiper-button-prev`,\n        // }}\n        modules={[Mousewheel, Thumbs, Navigation, Pagination]}\n        mousewheel={{\n          forceToAxis: true,\n        }}\n        breakpoints={{\n          0: {\n            slidesPerView: 1,\n            freeMode: false,\n          },\n        }}\n      >\n        {props?.galleries?.map((item, jIndex) => {\n          return (\n            <SwiperSlide className=\"h-full\" key={props?.id + 'SwiperSlideItem' + jIndex}>\n              <video controls className=\"size-full object-cover\">\n                <track kind=\"captions\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/mp4\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/webm\" />\n                <source src={item?.sources?.[0]?.url} type=\"video/ogg\" />\n              </video>\n            </SwiperSlide>\n          )\n        })}\n      </Swiper>\n      <div\n        className={cn(\n          'swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-prev`\n        )}\n        onClick={handlePrevClick}\n      >\n        <SwiperLeftButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n      <div\n        className={cn(\n          'tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer'\n          // `ipc-product-gallery-${props?.id}-custom-swiper-button-next`\n        )}\n        onClick={handleNextClick}\n      >\n        <SwiperRightButtonIcon className=\"tablet:size-10 lg-desktop:size-12\" />\n      </div>\n    </div>\n  )\n}\n\nconst ProductGalleryTab3DView = (props: ProductGalleryTabItemProps) => {\n  return <div>3D View</div>\n}\n\nexport default withLayout(ProductGallery)\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "Text", "Picture", "Badge", "useCallback", "useMemo", "useState", "forwardRef", "useRef", "useEffect", "useImperativeHandle", "Swiper", "SwiperSlide", "Navigation", "Mousewheel", "Thumbs", "Pagination", "Autoplay", "cn", "GalleryTabType", "Content", "List", "Root", "Trigger", "useBizProductContext", "useVariantMedia", "SpecsModal", "CompareModal", "formatPrice", "withLayout", "gaTrack", "ExposureDetector", "debounce", "SwiperLeftButtonIcon", "props", "SwiperRightButtonIcon", "ProductGallery", "copyWriting", "product", "variant", "selectedOptions", "defaultMediaData", "swiper", "setSwiper", "productGalleryTabRef", "customMediaList", "productList", "sceneList", "keyFeaturesList", "videoList", "allMedia", "galleryMap", "galleryTabs", "productTab", "item", "variantProductGallery", "variantProductGalleryItem", "variantItem", "galleries", "imageGalleries", "imageItem", "imageSourceParts", "responsiveSource", "gallery", "activeGalleryTab", "setActiveGalleryTab", "activeTabIndex", "setActiveTabIndex", "targetSlideIndex", "setTargetSlideIndex", "handleNextTab", "nextIndex", "handlePrevTab", "prevIndex", "prevTabGalleries", "renderGalleryForTab", "tab", "index", "ProductGalleryTabImage", "ProductGalleryTabVideo", "ProductGalleryTab", "ref", "scrollContainerRef", "triggerRefs", "scrollToEvent", "event", "container", "button", "scrollLeft", "handleGalleryTabClick", "el", "scrollToTab", "tabItem", "locale", "totalSavings", "paginationRef", "thumbsSwiper", "setThumbsSwiper", "textGroups", "setTextGroups", "measureRef", "imageClassName", "handlePrevClick", "handleNextClick", "calculateGroups", "measureEl", "twoLinesMaxHeight", "words", "groups", "currentGroup", "i", "word", "testText", "rafId", "handleResize", "jIndex", "exposureKey", "handleExposure", "pictureSource", "group", "ProductGalleryTab3DView", "ProductGallery_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGridBox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Grid as c,GridItem as p}from"../../../../components/index.js";const e=({BoxLeftGallery:o,BoxRightDetail:d,BoxBottomSummary:l})=>a("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[a(c,{className:"laptop-md:gap-4 lg-desktop:gap-8 gap-8",children:[t(p,{className:"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:o}),t(p,{className:"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:d})]}),l]});var s=e;export{s as default};
+import{jsx as a,jsxs as t}from"react/jsx-runtime";import{Grid as c,GridItem as p}from"../../../../components/index.js";const e=({BoxLeftGallery:o,BoxRightDetail:l,BoxBottomSummary:d})=>t("div",{id:"ipc-product-card",className:"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]",children:[t(c,{className:"laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8",children:[a(p,{className:"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit",children:o}),a(p,{className:"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12",children:l})]}),d]});var s=e;export{s as default};
 //# sourceMappingURL=ProductGridBox.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductGridBox.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/biz-components/Listing/components/ProductCard/ProductGridBox.tsx"],
-  "sourcesContent": ["import { Grid, GridItem } from '../../../../components/index.js'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"laptop-md:gap-4 lg-desktop:gap-8 gap-8\">\n        <GridItem className=\"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
-  "mappings": "AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAbN,OAAS,QAAAC,EAAM,YAAAC,MAAgB,kCAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,IAMIN,EAAC,OAAI,GAAG,mBAAmB,UAAU,iEACnC,UAAAA,EAACC,EAAA,CAAK,UAAU,yCACd,UAAAF,EAACG,EAAA,CAAS,UAAU,kHACjB,SAAAE,EACH,EACAL,EAACG,EAAA,CAAS,UAAU,yDAA0D,SAAAG,EAAe,GAC/F,EACCC,GACH,EAIJ,IAAOC,EAAQJ",
+  "sourcesContent": ["import { Grid, GridItem } from '../../../../components/index.js'\n\nconst ProductGridBox = ({\n  BoxLeftGallery,\n  BoxRightDetail,\n  BoxBottomSummary,\n}: {\n  BoxLeftGallery: React.ReactNode\n  BoxRightDetail: React.ReactNode\n  BoxBottomSummary: React.ReactNode\n}) => {\n  return (\n    <div id=\"ipc-product-card\" className=\"laptop-md:pt-6 laptop-md:px-16 lg-desktop:px-[calc(50%-832px)]\">\n      <Grid className=\"laptop-md:gap-x-4 lg-desktop:gap-6 gap-8 laptop:gap-y-8 laptop-md:gap-y-8\">\n        <GridItem className=\"laptop:px-0 laptop-md:col-start-1 laptop-md:col-span-8 laptop-md:sticky laptop-md:top-[124px] col-span-12 h-fit\">\n          {BoxLeftGallery}\n        </GridItem>\n        <GridItem className=\"laptop-md:col-start-9 laptop-md:col-span-4 col-span-12\">{BoxRightDetail}</GridItem>\n      </Grid>\n      {BoxBottomSummary}\n    </div>\n  )\n}\n\nexport default ProductGridBox\n"],
+  "mappings": "AAaM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAbN,OAAS,QAAAC,EAAM,YAAAC,MAAgB,kCAE/B,MAAMC,EAAiB,CAAC,CACtB,eAAAC,EACA,eAAAC,EACA,iBAAAC,CACF,IAMIN,EAAC,OAAI,GAAG,mBAAmB,UAAU,iEACnC,UAAAA,EAACC,EAAA,CAAK,UAAU,4EACd,UAAAF,EAACG,EAAA,CAAS,UAAU,kHACjB,SAAAE,EACH,EACAL,EAACG,EAAA,CAAS,UAAU,yDAA0D,SAAAG,EAAe,GAC/F,EACCC,GACH,EAIJ,IAAOC,EAAQJ",
   "names": ["jsx", "jsxs", "Grid", "GridItem", "ProductGridBox", "BoxLeftGallery", "BoxRightDetail", "BoxBottomSummary", "ProductGridBox_default"]
 }

package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: any;
2	+ export default _default;

package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as o,jsxs as T}from"react/jsx-runtime";import{Button as L,Text as c}from"../../../../../components/index.js";import{useCallback as h,useEffect as z,useMemo as v,useState as g}from"react";import{cn as B}from"../../../../../helpers/index.js";import D from"../../PaidShipping/ShippingMethod.js";import{ShippingPolicyModal as E}from"../../PaidShipping/ShippingPolicyModal.js";import{isWeightAvailable as b}from"../../PaidShipping/utils.js";import"../../PaidShipping/LearnMore.js";import{useBizProductContext as I}from"../../../BizProductProvider.js";import{withLayout as O}from"../../../../../shared/Styles.js";const V=({metafields:i,productList:u,onShippingInfoChange:y,variant:m,className:P})=>{const{isLogin:_,openSignInPopup:k}=I(),[C,x]=g(!1),[M,N]=g(!1),[A,S]=g(null),f=v(()=>u.reduce((e,t)=>e+(t?.variant?.weight\|\|0),0),[u]),r=h((e,t,n)=>({id:`${e.__code}__${e.price}`,code:e.__code,mode:e.__mode,title:e.title,disabled:!b(t,e),price:e.price,subtitle:e.subtitle,tag:n!==0?i?.memberOnly:"",error:b(t,e)?"":i.overWeightError}),[i?.memberOnly,i.overWeightError]),l=v(()=>{const e=i?.list?.map((t,n)=>r(t,f,n));return e?.reduce((t,n)=>{const s=e.filter(p=>p.code==n.code);let a;return s.every(p=>p.disabled)?a=s[s.length-1]:a=s.find(p=>!p.disabled),t.find(p=>a.id===p.id)?t:[...t,a]},[])},[r,i?.list,f]),d=h(e=>{y({selected_delivery_code:e.code,selected_delivery_mode:e.mode})},[y]);z(()=>{if(i?.list?.length>0&&!M){const e=r(i?.list[0],0,0);S(e),d(e),N(!0)}},[r,i?.list,d,M]);const w=h(e=>{e.disabled\|\|(S(e),d(e))},[_,l,m.sku,d,k]);return T("div",{id:"ipc-product-paid-shipping",className:B(P),children:[T("div",{className:"flex flex-wrap justify-between space-x-2 md:space-x-1",children:[o(c,{className:"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]",html:i?.title}),o(L,{variant:"link",onClick:()=>{x(!0)},className:"lg-desktop:text-[16px] text-[14px] font-bold !p-0",children:i?.policy})]}),o("div",{className:"lg-desktop:mt-[16px] mt-[12px] flex-col flex gap-[12px] overflow-hidden",children:l.map((e,t)=>o(D,{index:t,item:e,active:A?.code===e.code,toggleShipping:()=>w(e),currencyCode:m.price.currencyCode,metafields:i,className:"w-full laptop:h-[100px] h-[80px]"},t))}),l.find(e=>e?.error)&&o(c,{className:"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]",html:l.find(e=>e.error)?.error,as:"p"}),i?.seeAvailableArea&&o(c,{as:"div",className:"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline",html:i?.seeAvailableArea}),i?.shippingPolicy&&o(E,{data:i?.shippingPolicy,onClose:()=>x(!1),open:C})]})};var U=O(V);export{U as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/biz-components/Listing/components/ProductCard/ProductPaidShipping/index.tsx"],
+  "sourcesContent": ["import { Button, Text } from '../../../../../components/index.js'\nimport type { Product, ProductVariant } from '../../../types/product.js'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { cn } from '../../../../../helpers/index.js'\n\nimport ShippingMethod from '../../PaidShipping/ShippingMethod.js'\nimport { ShippingPolicyModal } from '../../PaidShipping/ShippingPolicyModal.js'\nimport type { DeliveryCustom, shippingMetafields, ShippingMethodType } from '../../PaidShipping/type.js'\nimport { isWeightAvailable } from '../../PaidShipping/utils.js'\nimport LearnMore from '../../PaidShipping/LearnMore.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../shared/Styles.js'\n\nconst ProductPaidShipping = ({\n  metafields,\n  productList,\n  onShippingInfoChange,\n  variant,\n  className,\n}: {\n  metafields: any\n  productList: Array<Product & { variant: ProductVariant }>\n  variant: ProductVariant\n  onShippingInfoChange: (deliveryCustom: DeliveryCustom) => void\n  className?: string\n}) => {\n  const { isLogin, openSignInPopup } = useBizProductContext()\n  const [openShippingPolicyModal, setOpenShippingPolicyModal] = useState(false)\n  const [init, setInit] = useState(false)\n\n  const [selectedMethod, setSelectedMethod] = useState<ShippingMethodType | null>(null)\n\n  const weight = useMemo(() => {\n    return productList.reduce((acc, product) => acc + (product?.variant?.weight || 0), 0)\n  }, [productList])\n\n  const normalizedMethod = useCallback(\n    (method: shippingMetafields, weight: number, index: number) => {\n      return {\n        id: `${method.__code}__${method.price}`,\n        code: method.__code,\n        mode: method.__mode,\n        title: method.title,\n        disabled: !isWeightAvailable(weight, method),\n        price: method.price,\n        subtitle: method.subtitle,\n        tag: index !== 0 ? metafields?.memberOnly : '',\n        error: !isWeightAvailable(weight, method) ? metafields.overWeightError : '',\n      }\n    },\n    [metafields?.memberOnly, metafields.overWeightError]\n  )\n\n  const list = useMemo(() => {\n    const normalizedList: ShippingMethodType[] = metafields?.list?.map((method: shippingMetafields, index: number) =>\n      normalizedMethod(method, weight, index)\n    )\n\n    return normalizedList?.reduce((prev: ShippingMethodType[], method: ShippingMethodType) => {\n      // \u5982\u679C\u8D85\u91CD\uFF0C\u540C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\u7C7B\u578B\u4E0B\uFF0C\u5C55\u793A\u5176\u4E2D\u4E00\u4E2A\u4E14\u4E0D\u53EF\u9009\n      const sameTypeMethod = normalizedList.filter((m: ShippingMethodType) => m.code == method.code)\n      let availableMethod: ShippingMethodType\n      // \u6240\u6709\u7269\u6D41\u9009\u9879\u90FD\u4E0D\u53EF\u9009\n      if (sameTypeMethod.every((m: ShippingMethodType) => m.disabled)) {\n        availableMethod = sameTypeMethod[sameTypeMethod.length - 1]\n      } else {\n        // \u53EF\u9009\u7269\u6D41\u9009\u9879\n        availableMethod = sameTypeMethod.find((m: ShippingMethodType) => !m.disabled)!\n      }\n      // \u5F53\u524D\u7269\u6D41\u9009\u9879\u5DF2\u5B58\u5728\n      const hasSameMethod = prev.find((m: ShippingMethodType) => availableMethod.id === m.id)\n      if (!hasSameMethod) {\n        return [...prev, availableMethod]\n      } else {\n        return prev\n      }\n    }, [] as ShippingMethodType[])\n  }, [normalizedMethod, metafields?.list, weight])\n\n  const handleChangeShippingInfo = useCallback(\n    (selectedMethod: ShippingMethodType) => {\n      onShippingInfoChange({\n        selected_delivery_code: selectedMethod.code,\n        selected_delivery_mode: selectedMethod.mode,\n      })\n    },\n    [onShippingInfoChange]\n  )\n\n  useEffect(() => {\n    // \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u7269\u6D41\u9009\u9879\n    if (metafields?.list?.length > 0 && !init) {\n      const standardShippingMethod = normalizedMethod(metafields?.list[0], 0, 0)\n      setSelectedMethod(standardShippingMethod)\n      handleChangeShippingInfo(standardShippingMethod)\n      setInit(true)\n    }\n  }, [normalizedMethod, metafields?.list, handleChangeShippingInfo, init])\n\n  const toggleShipping = useCallback(\n    (method: ShippingMethodType) => {\n      if (method.disabled) {\n        return\n      }\n      setSelectedMethod(method)\n      handleChangeShippingInfo(method)\n      // gaTrack({\n      //   event: 'ga4Event',\n      //   event_name: 'lp_button',\n      //   member_active_status: isLogin ? 'active' : 'not active', //\u7528\u4E8E\u8F93\u5165code\u6FC0\u6D3B\u4F1A\u5458\u5F39'\u7A97\u7684\u6309\u94AE\uFF0C\u533A\u5206\u4F1A\u5458\u6FC0\u6D3B\u72B6\u6001\uFF0C\u4F20active\u6216not active\n      //   event_parameters: {\n      //     page_group: 'Product Detail Page' + variant.sku, //\u5982\u679C\u662F\u9996\u9875\uFF0C\u5219\u4F20\"Home Page\";\u5982\u679C\u662Flisting\u7684\u9996\u5C4F\u6309\u94AE\uFF0C\u4F20Product Detail Page+$SKU\n      //     position: 'masterbanner1', //\u4F4D\u7F6E\u6807\u8BB0\u3002\u9996\u9875\u9996\u5C4F\u8F6E\u64AD\u4F4D\u7F6E\u4F20masterbanner1\u3001masterbanner2\u3001masterbanner3\uFF0C\u7B2C\u4E8C\u5C4F\u4F202nd_banner\uFF0C\u7B2C\u4E09\u5C4F\u4F203rd_banner\uFF0C\u6216\u8005\u53D6\u8BE5\u6A21\u5757\u5C0F\u6807\u9898\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6A21\u5757\u4F4D\u7F6E\u7684\u6587\u6848\uFF0C\u5F39\u7A97\u4F20pop;\u5982\u679C\u662F\u8D2D\u7269\u8F66\u4FA7\u8FB9\u680F\uFF0C\u5219\u4F20\"Cart Pop Up\"\n      //     button_name: method.title, //\u53D6\u6309\u94AE\u6587\u6848\uFF0C\u6216\u80FD\u8BC6\u522B\u51FA\u662F\u54EA\u4E2A\u6309\u94AE\u7684\u6587\u6848,\u6BD4\u5982\u53F3\u4E0A\u89D2\u5173\u95ED\u4F20close,\u793E\u5A92\u5206\u4EAB\u56FE\u6807\u4F20\u5BF9\u5E94\u5E73\u53F0\u540D\u5B57\u5982Facebook,\u56FE\u7247\u5207\u6362\u5219\u4F20\u5BF9\u5E94\u5C55\u793A\u56FE\u7247\u7684\u540D\u5B57\n      //     info: '', //\u9ED8\u8BA4\u7A7A\u503C\uFF0C\u4E00\u822C\u4F20\u590D\u9009\u6846\u7684\u6587\u6848\u5185\u5BB9\uFF0C\u7279\u6B8A\u60C5\u51B5\u53EF\u6307\u5B9Ainfo\u503C\n      //   },\n      // })\n    },\n\n    [isLogin, list, variant.sku, handleChangeShippingInfo, openSignInPopup]\n  )\n\n  return (\n    <div id=\"ipc-product-paid-shipping\" className={cn(className)}>\n      <div className=\"flex flex-wrap justify-between space-x-2 md:space-x-1\">\n        <Text\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold leading-[1.2] text-[#1F2021]\"\n          html={metafields?.title}\n        ></Text>\n        <Button\n          variant=\"link\"\n          onClick={() => {\n            setOpenShippingPolicyModal(true)\n          }}\n          className=\"lg-desktop:text-[16px] text-[14px] font-bold !p-0\"\n        >\n          {metafields?.policy}\n        </Button>\n      </div>\n      <div className=\"lg-desktop:mt-[16px] mt-[12px] flex-col flex gap-[12px] overflow-hidden\">\n        {list.map((method: ShippingMethodType, index: number) => (\n          <ShippingMethod\n            key={index}\n            index={index}\n            item={method}\n            active={selectedMethod?.code === method.code}\n            toggleShipping={() => toggleShipping(method)}\n            currencyCode={variant.price.currencyCode}\n            metafields={metafields}\n            className=\"w-full laptop:h-[100px] h-[80px]\"\n          />\n        ))}\n        {/* learn more \u5361\u7247 */}\n        {/* <LearnMore\n          setOpenShippingPolicyModal={setOpenShippingPolicyModal}\n          metafields={metafields}\n          className=\"w-full\"\n        /> */}\n      </div>\n      {list.find((method: ShippingMethodType) => method?.error) && (\n        <Text\n          className=\"laptop-md:mt-[16px] mt-[12px] font-bold leading-[1.4] text-[#D41435]\"\n          html={list.find((method: ShippingMethodType) => method.error)?.error as string}\n          as=\"p\"\n        />\n      )}\n\n      {metafields?.seeAvailableArea && (\n        <Text\n          as=\"div\"\n          className=\"lg-desktop:mt-[16px] mt-3 font-bold leading-[1.4] text-[14px] lg-desktop:text-[16px] text-[#080A0F] [&_a]:underline\"\n          html={metafields?.seeAvailableArea}\n        />\n      )}\n      {metafields?.shippingPolicy && (\n        <ShippingPolicyModal\n          data={metafields?.shippingPolicy}\n          onClose={() => setOpenShippingPolicyModal(false)}\n          open={openShippingPolicyModal}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default withLayout(ProductPaidShipping)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "Button", "Text", "useCallback", "useEffect", "useMemo", "useState", "cn", "ShippingMethod", "ShippingPolicyModal", "isWeightAvailable", "useBizProductContext", "withLayout", "ProductPaidShipping", "metafields", "productList", "onShippingInfoChange", "variant", "className", "isLogin", "openSignInPopup", "openShippingPolicyModal", "setOpenShippingPolicyModal", "init", "setInit", "selectedMethod", "setSelectedMethod", "weight", "acc", "product", "normalizedMethod", "method", "index", "list", "normalizedList", "prev", "sameTypeMethod", "m", "availableMethod", "handleChangeShippingInfo", "standardShippingMethod", "toggleShipping", "ProductPaidShipping_default"]
+}

package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Text as o,Button as m,Container as C}from"../../../../../components/index.js";import{useAiuiContext as v}from"../../../../AiuiProvider/index.js";import{useBizProductContext as N}from"../../../BizProductProvider.js";import{useMemo as w}from"react";import{formatPrice as c}from"../../../utils/index.js";import{replaceTemplate as h}from"../../../utils/textFormat.js";const P=({totalSavingsSlot:s}={})=>{const{copyWriting:a,locale:l="us"}=v(),{variant:t,finalPrice:p,totalSavings:r,isLogin:n,comparePrice:x,onAddToCart:u,onBuyNow:b,savingDetail:d,addToCartLoading:g,buyNowLoading:f}=N(),y=w(()=>h(a?.totalSavings||"",{amount:c({amount:r,currencyCode:t.price.currencyCode,locale:l})}),[a?.totalSavings,r,t.price.currencyCode,l]);return i(C,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[t.availableForSale?i("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[i("div",{className:"flex items-center gap-1",children:[e(o,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:c({amount:Math.floor(p*100)/100,currencyCode:t.price.currencyCode,locale:l})}),(r>0||d?.member>0&&n)&&e(o,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:c({amount:x,currencyCode:t.price.currencyCode,locale:l})}),d?.member>0&&n&&e(o,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:a?.memberPrice||"Member Price"})]}),s||(r>0||d?.member>0&&n)&&e(o,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${y}`})]}):e(o,{className:"text-[20px] font-bold text-[#999999]",html:a?.soldOut??"Sold Out"}),i("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:[e(m,{variant:"secondary",disabled:!t.availableForSale,size:"lg",className:"tablet:w-auto w-1/2",onClick:()=>u?.(),loading:g,children:a?.addToCart??"Add to Cart"}),e(m,{variant:"primary",disabled:!t.availableForSale,size:"lg",loading:f,className:"tablet:w-auto w-1/2",onClick:()=>b?.(),children:a?.buyNow??"Buy Now"})]})]})};var E=P;export{E as default};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{Text as o,Button as c,Container as C}from"../../../../../components/index.js";import{useAiuiContext as v}from"../../../../AiuiProvider/index.js";import{useBizProductContext as N}from"../../../BizProductProvider.js";import{useMemo as w}from"react";import{formatPrice as s}from"../../../utils/index.js";import{replaceTemplate as h}from"../../../utils/textFormat.js";const P=({totalSavingsSlot:m}={})=>{const{copyWriting:a,locale:l="us"}=v(),{variant:t,finalPrice:p,totalSavings:r,isLogin:n,comparePrice:x,onAddToCart:u,onBuyNow:b,savingDetail:d,addToCartLoading:g,buyNowLoading:f}=N(),y=w(()=>h(a?.totalSavings||"",{amount:s({amount:r,currencyCode:t.price.currencyCode,locale:l})}),[a?.totalSavings,r,t.price.currencyCode,l]);return i(C,{childClassName:"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4",className:"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3",children:[t.availableForSale?i("div",{className:"laptop-md:items-end flex flex-col justify-between",children:[i("div",{className:"flex items-center gap-1",children:[e(o,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]",html:s({amount:Math.floor(p*100)/100,currencyCode:t.price.currencyCode,locale:l})}),(r>0||d?.member>0&&n)&&e(o,{className:"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through",html:s({amount:x,currencyCode:t.price.currencyCode,locale:l})}),d?.member>0&&n&&e(o,{className:"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white",html:a?.memberPrice||"Member Price"})]}),m||(r>0||d?.member>0&&n)&&e(o,{className:"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]",html:`${y}`})]}):e(o,{className:"text-[20px] font-bold text-[#999999]",html:a?.soldOut??"Sold Out"}),i("div",{className:"tablet:mt-0 mt-2 flex items-center gap-2",children:[e(c,{variant:"secondary",disabled:!t.availableForSale,size:"lg",className:"tablet:w-auto w-1/2",onClick:()=>u?.(),loading:g,children:a?.addToCart??"Add to Cart"}),e(c,{variant:"primary",disabled:!t.availableForSale,size:"lg",loading:f,className:"tablet:w-auto w-1/2",onClick:()=>b?.(),children:a?.buyNow??"Buy Now"})]})]})};var E=P;export{E as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/PurchaseBar/ProductActions/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ProductActions/index.tsx"],
-  "sourcesContent": ["import { Text, Button, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\n\nexport interface ProductActionsProps {\n  /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n  totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    addToCartLoading,\n    buyNowLoading,\n  } = useBizProductContext()\n\n  const totalSavingsText = useMemo(() => {\n    return replaceTemplate(copyWriting?.totalSavings || '', {\n      amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n    })\n  }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n  // const memberPriceSaveText = useMemo(() => {\n  //   return replaceTemplate(copyWriting?.memberSaving || '', {\n  //     amount: formatPrice({\n  //       amount: savingDetail?.member,\n  //       currencyCode: variant.price.currencyCode,\n  //       locale,\n  //     }),\n  //   })\n  // }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n  return (\n    <Container\n      childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 tablet:items-center tablet:gap-4\"\n      className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n    >\n      {variant.availableForSale ? (\n        <div className=\"laptop-md:items-end flex flex-col justify-between\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n              html={formatPrice({\n                amount: Math.floor(finalPrice * 100) / 100,\n                currencyCode: variant.price.currencyCode,\n                locale,\n              })}\n            />\n            {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n                html={formatPrice({\n                  amount: comparePrice,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n            {savingDetail?.member > 0 && isLogin && (\n              <Text\n                className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n                html={copyWriting?.memberPrice || 'Member Price'}\n              />\n            )}\n          </div>\n          {totalSavingsSlot ||\n            ((totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n                html={`${totalSavingsText}`}\n              />\n            ))}\n        </div>\n      ) : (\n        <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n      )}\n      <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onAddToCart?.()}\n          loading={addToCartLoading}\n        >\n          {copyWriting?.addToCart ?? 'Add to Cart'}\n        </Button>\n        <Button\n          variant=\"primary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          loading={buyNowLoading}\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </Container>\n  )\n}\n\nexport default ProductActions\n"],
-  "mappings": "AAkDU,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlDV,OAAS,QAAAC,EAAM,UAAAC,EAAQ,aAAAC,MAAiB,qCACxC,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,WAAAC,MAA+B,QACxC,OAAS,eAAAC,MAAmB,0BAC5B,OAAS,mBAAAC,MAAuB,+BAOhC,MAAMC,EAAiB,CAAC,CAAE,iBAAAC,CAAiB,EAAyB,CAAC,IAAM,CACzE,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIR,EAAe,EAChD,CACJ,QAAAS,EACA,WAAAC,EACA,aAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,EAAIjB,EAAqB,EAEnBkB,EAAmBjB,EAAQ,IACxBE,EAAgBG,GAAa,cAAgB,GAAI,CACtD,OAAQJ,EAAY,CAAE,OAAQQ,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAYhF,OACEZ,EAACG,EAAA,CACC,eAAe,8FACf,UAAU,+EAET,UAAAU,EAAQ,iBACPb,EAAC,OAAI,UAAU,oDACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,yFACV,KAAMM,EAAY,CAChB,OAAQ,KAAK,MAAMO,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMK,GAAc,OAAS,GAAKJ,IACjDjB,EAACE,EAAA,CACC,UAAU,qHACV,KAAMM,EAAY,CAChB,OAAQU,EACR,aAAcJ,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDQ,GAAc,OAAS,GAAKJ,GAC3BjB,EAACE,EAAA,CACC,UAAU,gEACV,KAAMU,GAAa,aAAe,eACpC,GAEJ,EACCD,IACGK,EAAe,GAAMK,GAAc,OAAS,GAAKJ,IACjDjB,EAACE,EAAA,CACC,UAAU,4HACV,KAAM,GAAGsB,CAAgB,GAC3B,GAEN,EAEAxB,EAACE,EAAA,CAAK,UAAU,uCAAuC,KAAMU,GAAa,SAAW,WAAY,EAEnGX,EAAC,OAAI,UAAU,2CACb,UAAAD,EAACG,EAAA,CACC,QAAQ,YACR,SAAU,CAACW,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMK,IAAc,EAC7B,QAASG,EAER,SAAAV,GAAa,WAAa,cAC7B,EACAZ,EAACG,EAAA,CACC,QAAQ,UACR,SAAU,CAACW,EAAQ,iBACnB,KAAK,KACL,QAASS,EACT,UAAU,sBACV,QAAS,IAAMH,IAAW,EAEzB,SAAAR,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOa,EAAQf",
+  "sourcesContent": ["import { Text, Button, Container } from '../../../../../components/index.js'\nimport { useAiuiContext } from '../../../../AiuiProvider/index.js'\nimport { useBizProductContext } from '../../../BizProductProvider.js'\nimport { useMemo, type ReactNode } from 'react'\nimport { formatPrice } from '../../../utils/index.js'\nimport { replaceTemplate } from '../../../utils/textFormat.js'\n\nexport interface ProductActionsProps {\n  /** \u81EA\u5B9A\u4E49\u603B\u8282\u7701\u7EC4\u4EF6\uFF0C\u4F20\u5165\u65F6\u4F1A\u66FF\u4EE3\u9ED8\u8BA4\u7684 totalSavings \u663E\u793A */\n  totalSavingsSlot?: ReactNode\n}\n\nconst ProductActions = ({ totalSavingsSlot }: ProductActionsProps = {}) => {\n  const { copyWriting, locale = 'us' } = useAiuiContext()\n  const {\n    variant,\n    finalPrice,\n    totalSavings,\n    isLogin,\n    comparePrice,\n    onAddToCart,\n    onBuyNow,\n    savingDetail,\n    addToCartLoading,\n    buyNowLoading,\n  } = useBizProductContext()\n\n  const totalSavingsText = useMemo(() => {\n    return replaceTemplate(copyWriting?.totalSavings || '', {\n      amount: formatPrice({ amount: totalSavings, currencyCode: variant.price.currencyCode, locale }),\n    })\n  }, [copyWriting?.totalSavings, totalSavings, variant.price.currencyCode, locale])\n\n  // const memberPriceSaveText = useMemo(() => {\n  //   return replaceTemplate(copyWriting?.memberSaving || '', {\n  //     amount: formatPrice({\n  //       amount: savingDetail?.member,\n  //       currencyCode: variant.price.currencyCode,\n  //       locale,\n  //     }),\n  //   })\n  // }, [copyWriting?.memberSaving, savingDetail?.member, variant.price.currencyCode, locale])\n\n  return (\n    <Container\n      childClassName=\"tablet:flex tablet:justify-end tablet:gap-8 laptop-md:px-0 desktop:px-0 tablet:items-center tablet:gap-4\"\n      className=\"laptop-md:border-none laptop-md:py-0 border-t border-[#E4E5E6] bg-white py-3\"\n    >\n      {variant.availableForSale ? (\n        <div className=\"laptop-md:items-end flex flex-col justify-between\">\n          <div className=\"flex items-center gap-1\">\n            <Text\n              className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2]\"\n              html={formatPrice({\n                amount: Math.floor(finalPrice * 100) / 100,\n                currencyCode: variant.price.currencyCode,\n                locale,\n              })}\n            />\n            {(totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"tablet:text-2xl laptop-md:text-xl lg-desktop:text-2xl text-xl font-bold !leading-[1.2] text-[#4A4C56] line-through\"\n                html={formatPrice({\n                  amount: comparePrice,\n                  currencyCode: variant.price.currencyCode,\n                  locale,\n                })}\n              />\n            )}\n            {savingDetail?.member > 0 && isLogin && (\n              <Text\n                className=\"bg-brand-0 rounded px-1 py-[2px] text-sm font-bold text-white\"\n                html={copyWriting?.memberPrice || 'Member Price'}\n              />\n            )}\n          </div>\n          {totalSavingsSlot ||\n            ((totalSavings > 0 || (savingDetail?.member > 0 && isLogin)) && (\n              <Text\n                className=\"text-brand-0 tablet:text-end laptop-md:text-xl lg-desktop:text-2xl whitespace-nowrap text-[18px] font-bold !leading-[1.2]\"\n                html={`${totalSavingsText}`}\n              />\n            ))}\n        </div>\n      ) : (\n        <Text className=\"text-[20px] font-bold text-[#999999]\" html={copyWriting?.soldOut ?? 'Sold Out'} />\n      )}\n      <div className=\"tablet:mt-0 mt-2 flex items-center gap-2\">\n        <Button\n          variant=\"secondary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onAddToCart?.()}\n          loading={addToCartLoading}\n        >\n          {copyWriting?.addToCart ?? 'Add to Cart'}\n        </Button>\n        <Button\n          variant=\"primary\"\n          disabled={!variant.availableForSale}\n          size=\"lg\"\n          loading={buyNowLoading}\n          className=\"tablet:w-auto w-1/2\"\n          onClick={() => onBuyNow?.()}\n        >\n          {copyWriting?.buyNow ?? 'Buy Now'}\n        </Button>\n      </div>\n    </Container>\n  )\n}\n\nexport default ProductActions\n"],
+  "mappings": "AAkDU,OACE,OAAAA,EADF,QAAAC,MAAA,oBAlDV,OAAS,QAAAC,EAAM,UAAAC,EAAQ,aAAAC,MAAiB,qCACxC,OAAS,kBAAAC,MAAsB,oCAC/B,OAAS,wBAAAC,MAA4B,iCACrC,OAAS,WAAAC,MAA+B,QACxC,OAAS,eAAAC,MAAmB,0BAC5B,OAAS,mBAAAC,MAAuB,+BAOhC,MAAMC,EAAiB,CAAC,CAAE,iBAAAC,CAAiB,EAAyB,CAAC,IAAM,CACzE,KAAM,CAAE,YAAAC,EAAa,OAAAC,EAAS,IAAK,EAAIR,EAAe,EAChD,CACJ,QAAAS,EACA,WAAAC,EACA,aAAAC,EACA,QAAAC,EACA,aAAAC,EACA,YAAAC,EACA,SAAAC,EACA,aAAAC,EACA,iBAAAC,EACA,cAAAC,CACF,EAAIjB,EAAqB,EAEnBkB,EAAmBjB,EAAQ,IACxBE,EAAgBG,GAAa,cAAgB,GAAI,CACtD,OAAQJ,EAAY,CAAE,OAAQQ,EAAc,aAAcF,EAAQ,MAAM,aAAc,OAAAD,CAAO,CAAC,CAChG,CAAC,EACA,CAACD,GAAa,aAAcI,EAAcF,EAAQ,MAAM,aAAcD,CAAM,CAAC,EAYhF,OACEZ,EAACG,EAAA,CACC,eAAe,2GACf,UAAU,+EAET,UAAAU,EAAQ,iBACPb,EAAC,OAAI,UAAU,oDACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACE,EAAA,CACC,UAAU,yFACV,KAAMM,EAAY,CAChB,OAAQ,KAAK,MAAMO,EAAa,GAAG,EAAI,IACvC,aAAcD,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,GACEG,EAAe,GAAMK,GAAc,OAAS,GAAKJ,IACjDjB,EAACE,EAAA,CACC,UAAU,qHACV,KAAMM,EAAY,CAChB,OAAQU,EACR,aAAcJ,EAAQ,MAAM,aAC5B,OAAAD,CACF,CAAC,EACH,EAEDQ,GAAc,OAAS,GAAKJ,GAC3BjB,EAACE,EAAA,CACC,UAAU,gEACV,KAAMU,GAAa,aAAe,eACpC,GAEJ,EACCD,IACGK,EAAe,GAAMK,GAAc,OAAS,GAAKJ,IACjDjB,EAACE,EAAA,CACC,UAAU,4HACV,KAAM,GAAGsB,CAAgB,GAC3B,GAEN,EAEAxB,EAACE,EAAA,CAAK,UAAU,uCAAuC,KAAMU,GAAa,SAAW,WAAY,EAEnGX,EAAC,OAAI,UAAU,2CACb,UAAAD,EAACG,EAAA,CACC,QAAQ,YACR,SAAU,CAACW,EAAQ,iBACnB,KAAK,KACL,UAAU,sBACV,QAAS,IAAMK,IAAc,EAC7B,QAASG,EAER,SAAAV,GAAa,WAAa,cAC7B,EACAZ,EAACG,EAAA,CACC,QAAQ,UACR,SAAU,CAACW,EAAQ,iBACnB,KAAK,KACL,QAASS,EACT,UAAU,sBACV,QAAS,IAAMH,IAAW,EAEzB,SAAAR,GAAa,QAAU,UAC1B,GACF,GACF,CAEJ,EAEA,IAAOa,EAAQf",
   "names": ["jsx", "jsxs", "Text", "Button", "Container", "useAiuiContext", "useBizProductContext", "useMemo", "formatPrice", "replaceTemplate", "ProductActions", "totalSavingsSlot", "copyWriting", "locale", "variant", "finalPrice", "totalSavings", "isLogin", "comparePrice", "onAddToCart", "onBuyNow", "savingDetail", "addToCartLoading", "buyNowLoading", "totalSavingsText", "ProductActions_default"]
 }

package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as n,jsxs as w}from"react/jsx-runtime";import{useState as k,useCallback as m,useRef as v,useEffect as h,useMemo as b}from"react";import{debounce as E}from"es-toolkit";import{cn as l}from"../../../../../helpers/index.js";import{useScrollSpy as H}from"./useScrollSpy.js";const L=({tabs:i,onSpyNavItemClick:u,className:g,renderRating:s})=>{const[S,y]=k(0),c=b(()=>s?[...i,{label:"Reviews",id:"ipc-review",href:""}]:i,[i,s]),x=b(()=>c.map(e=>e.id),[c]),r=E(()=>{const e=document.querySelector("#purchase-bar");e&&y(e.getBoundingClientRect().height)},500);h(()=>(r(),window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}),[r]);const o=H(x,S),a=v(null),d=v(new Map),N=m(e=>{u?.(e)},[u]);h(()=>{if(!o||!a.current)return;const e=d.current.get(o);if(!e)return;const t=a.current,p=e.getBoundingClientRect(),f=t.getBoundingClientRect(),B=p.left+p.width/2-f.left,C=f.width/2,T=B-C;t.scrollTo({left:t.scrollLeft+T,behavior:"smooth"})},[o]);const R=m((e,t)=>{t?d.current.set(e,t):d.current.delete(e)},[]);return n("div",{ref:a,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:l("overflow-x-auto",g),children:n("div",{className:"tablet:gap-8 flex gap-6",children:c?.map(e=>n("button",{ref:t=>R(e.id,t),children:e.id==="ipc-review"?w("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[s,n("div",{className:l("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":o===e.id})})]}):w("div",{className:l("laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":o===e.id}),onClick:()=>N(e),children:[e.label,n("div",{className:l("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":o===e.id})})]})},e.id))})})};var O=L;export{O as default};
+import{jsx as n,jsxs as b}from"react/jsx-runtime";import{useState as E,useCallback as m,useRef as v,useEffect as h,useMemo as w}from"react";import{debounce as k}from"es-toolkit";import{cn as i}from"../../../../../helpers/index.js";import{useScrollSpy as H}from"./useScrollSpy.js";const L=({tabs:l,onSpyNavItemClick:u,className:g,renderRating:s})=>{const[S,y]=E(0),c=w(()=>s?[...l,{label:"Reviews",id:"ipc-review",href:""}]:l,[l,s]),x=w(()=>c.map(e=>e.id),[c]),r=k(()=>{const e=document.querySelector("#purchase-bar");e&&y(e.getBoundingClientRect().height)},500);h(()=>(r(),window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r)}),[r]);const o=H(x,S),a=v(null),d=v(new Map),N=m(e=>{u?.(e)},[u]);h(()=>{if(!o||!a.current)return;const e=d.current.get(o);if(!e)return;const t=a.current,p=e.getBoundingClientRect(),f=t.getBoundingClientRect(),B=p.left+p.width/2-f.left,C=f.width/2,T=B-C;t.scrollTo({left:t.scrollLeft+T,behavior:"smooth"})},[o]);const R=m((e,t)=>{t?d.current.set(e,t):d.current.delete(e)},[]);return n("div",{ref:a,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:i("overflow-x-auto",g),children:n("div",{className:"tablet:gap-8 flex gap-6",children:c?.map(e=>n("button",{ref:t=>R(e.id,t),children:e.id==="ipc-review"?b("div",{className:"relative shrink-0 whitespace-nowrap py-[10px]",children:[s,n("div",{className:i("laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":o===e.id})})]}):b("div",{className:i("laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]",{"text-[#1d1d1f]":o===e.id}),onClick:()=>N(e),children:[e.label,n("div",{className:i("bg-brand-0 absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-300 ease-in-out",{"w-full":o===e.id})})]})},e.id))})})};var O=L;export{O as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.tsx"],
-  "sourcesContent": ["import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { debounce } from 'es-toolkit'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useScrollSpy } from './useScrollSpy.js'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n  // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n  const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n  const combinedTabs = useMemo(() => {\n    if (renderRating) {\n      return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n    }\n    return tabs\n  }, [tabs, renderRating])\n\n  const sectionIds = useMemo(() => {\n    return combinedTabs.map(tab => tab.id)\n  }, [combinedTabs])\n\n  const debouncedHandleResize = debounce(() => {\n    const purchaseBar = document.querySelector('#purchase-bar')\n    if (purchaseBar) {\n      setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n    }\n  }, 500)\n\n  useEffect(() => {\n    debouncedHandleResize()\n    window.addEventListener('resize', debouncedHandleResize)\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize)\n    }\n  }, [debouncedHandleResize])\n\n  const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const onTabClick = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      onSpyNavItemClick?.(tab)\n    },\n    [onSpyNavItemClick]\n  )\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n  useEffect(() => {\n    if (!activeId || !scrollContainerRef.current) return\n\n    const activeTabElement = tabRefs.current.get(activeId)\n    if (!activeTabElement) return\n\n    const container = scrollContainerRef.current\n    const tabRect = activeTabElement.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n    const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n    const containerCenter = containerRect.width / 2\n    const scrollOffset = tabCenter - containerCenter\n\n    container.scrollTo({\n      left: container.scrollLeft + scrollOffset,\n      behavior: 'smooth',\n    })\n  }, [activeId])\n\n  // \u8BBE\u7F6E tab ref\n  const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n    if (element) {\n      tabRefs.current.set(tabId, element)\n    } else {\n      tabRefs.current.delete(tabId)\n    }\n  }, [])\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n      className={cn('overflow-x-auto', className)}\n    >\n      <div className=\"tablet:gap-8 flex gap-6\">\n        {combinedTabs?.map(tab => (\n          <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n            {tab.id === 'ipc-review' ? (\n              <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n                {renderRating}\n                <div\n                  className={cn(\n                    'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            ) : (\n              <div\n                className={cn(\n                  'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n                  {\n                    'text-[#1d1d1f]': activeId === tab.id,\n                  }\n                )}\n                onClick={() => onTabClick(tab)}\n              >\n                {tab.label}\n                <div\n                  className={cn(\n                    'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            )}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollSpyNav\n"],
-  "mappings": "AAyFc,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBAzFd,OAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,EAAQ,aAAAC,EAAW,WAAAC,MAAe,QAClE,OAAS,YAAAC,MAAgB,aAEzB,OAAS,MAAAC,MAAU,kCACnB,OAAS,gBAAAC,MAAoB,oBAE7B,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,EAAId,EAAS,CAAC,EACtDe,EAAeX,EAAQ,IACvBQ,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,EAAaZ,EAAQ,IAClBW,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,EAAwBb,EAAS,IAAM,CAC3C,MAAMc,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,EAENhB,EAAU,KACRe,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,EAAWb,EAAaS,EAAYH,CAAiB,EAGrDQ,EAAqBnB,EAAuB,IAAI,EAChDoB,EAAUpB,EAAuC,IAAI,GAAK,EAE1DqB,EAAatB,EAChBgB,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,EAGAP,EAAU,IAAM,CACd,GAAI,CAACiB,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,EAAY9B,EAAY,CAAC+B,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,OACElC,EAAC,OACC,IAAKuB,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,UAAWf,EAAG,kBAAmBK,CAAS,EAE1C,SAAAb,EAAC,OAAI,UAAU,0BACZ,SAAAiB,GAAc,IAAIE,GACjBnB,EAAC,UAAoB,IAAKoC,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,aACVlB,EAAC,OAAI,UAAU,gDACZ,UAAAa,EACDd,EAAC,OACC,UAAWQ,EACT,iHACA,CACE,SAAUc,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,EAEAlB,EAAC,OACC,UAAWO,EACT,0GACA,CACE,iBAAkBc,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,MACLnB,EAAC,OACC,UAAWQ,EACT,iHACA,CACE,SAAUc,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,GAhCSA,EAAI,EAkCjB,CACD,EACH,EACF,CAEJ,EAEA,IAAOkB,EAAQ3B",
+  "sourcesContent": ["import { useState, useCallback, useRef, useEffect, useMemo } from 'react'\nimport { debounce } from 'es-toolkit'\nimport type { ScrollSpyNavItem, ScrollSpyNavProps } from './types.js'\nimport { cn } from '../../../../../helpers/index.js'\nimport { useScrollSpy } from './useScrollSpy.js'\n\nconst ScrollSpyNav = ({ tabs, onSpyNavItemClick, className, renderRating }: ScrollSpyNavProps) => {\n  // \u4F7F\u7528 useScrollSpy hook \u81EA\u52A8\u76D1\u542C\u6EDA\u52A8\n  const [purchaseBarHeight, setPurchaseBarHeight] = useState(0)\n  const combinedTabs = useMemo(() => {\n    if (renderRating) {\n      return [...tabs, { label: 'Reviews', id: 'ipc-review', href: '' }]\n    }\n    return tabs\n  }, [tabs, renderRating])\n\n  const sectionIds = useMemo(() => {\n    return combinedTabs.map(tab => tab.id)\n  }, [combinedTabs])\n\n  const debouncedHandleResize = debounce(() => {\n    const purchaseBar = document.querySelector('#purchase-bar')\n    if (purchaseBar) {\n      setPurchaseBarHeight(purchaseBar.getBoundingClientRect().height)\n    }\n  }, 500)\n\n  useEffect(() => {\n    debouncedHandleResize()\n    window.addEventListener('resize', debouncedHandleResize)\n    return () => {\n      window.removeEventListener('resize', debouncedHandleResize)\n    }\n  }, [debouncedHandleResize])\n\n  const activeId = useScrollSpy(sectionIds, purchaseBarHeight)\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u6A2A\u5411\u6EDA\u52A8\u5BB9\u5668\u548C tab \u6309\u94AE\u7684 refs\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n  const onTabClick = useCallback(\n    (tab: ScrollSpyNavItem) => {\n      onSpyNavItemClick?.(tab)\n    },\n    [onSpyNavItemClick]\n  )\n\n  // \u79FB\u52A8\u7AEF\uFF1A\u5F53 activeTab \u6539\u53D8\u65F6\uFF0C\u81EA\u52A8\u6EDA\u52A8\u5230\u4E2D\u5FC3\u4F4D\u7F6E\n  useEffect(() => {\n    if (!activeId || !scrollContainerRef.current) return\n\n    const activeTabElement = tabRefs.current.get(activeId)\n    if (!activeTabElement) return\n\n    const container = scrollContainerRef.current\n    const tabRect = activeTabElement.getBoundingClientRect()\n    const containerRect = container.getBoundingClientRect()\n\n    // \u8BA1\u7B97\u9700\u8981\u6EDA\u52A8\u7684\u8DDD\u79BB\uFF0C\u4F7F tab \u4F4D\u4E8E\u5BB9\u5668\u4E2D\u5FC3\n    const tabCenter = tabRect.left + tabRect.width / 2 - containerRect.left\n    const containerCenter = containerRect.width / 2\n    const scrollOffset = tabCenter - containerCenter\n\n    container.scrollTo({\n      left: container.scrollLeft + scrollOffset,\n      behavior: 'smooth',\n    })\n  }, [activeId])\n\n  // \u8BBE\u7F6E tab ref\n  const setTabRef = useCallback((tabId: string, element: HTMLButtonElement | null) => {\n    if (element) {\n      tabRefs.current.set(tabId, element)\n    } else {\n      tabRefs.current.delete(tabId)\n    }\n  }, [])\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}\n      className={cn('overflow-x-auto', className)}\n    >\n      <div className=\"tablet:gap-8 flex gap-6\">\n        {combinedTabs?.map(tab => (\n          <button key={tab.id} ref={el => setTabRef(tab.id, el)}>\n            {tab.id === 'ipc-review' ? (\n              <div className=\"relative shrink-0 whitespace-nowrap py-[10px]\">\n                {renderRating}\n                <div\n                  className={cn(\n                    'laptop-md:block bg-brand-0 absolute bottom-0 left-0 hidden h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            ) : (\n              <div\n                className={cn(\n                  'laptop-md:text-[#1d1d1f] relative shrink-0 whitespace-nowrap py-[10px] text-sm font-bold text-[#949494]',\n                  {\n                    'text-[#1d1d1f]': activeId === tab.id,\n                  }\n                )}\n                onClick={() => onTabClick(tab)}\n              >\n                {tab.label}\n                <div\n                  className={cn(\n                    'bg-brand-0 absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-300 ease-in-out',\n                    {\n                      'w-full': activeId === tab.id,\n                    }\n                  )}\n                />\n              </div>\n            )}\n          </button>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default ScrollSpyNav\n"],
+  "mappings": "AAyFc,OAEE,OAAAA,EAFF,QAAAC,MAAA,oBAzFd,OAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,EAAQ,aAAAC,EAAW,WAAAC,MAAe,QAClE,OAAS,YAAAC,MAAgB,aAEzB,OAAS,MAAAC,MAAU,kCACnB,OAAS,gBAAAC,MAAoB,oBAE7B,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,kBAAAC,EAAmB,UAAAC,EAAW,aAAAC,CAAa,IAAyB,CAEhG,KAAM,CAACC,EAAmBC,CAAoB,EAAId,EAAS,CAAC,EACtDe,EAAeX,EAAQ,IACvBQ,EACK,CAAC,GAAGH,EAAM,CAAE,MAAO,UAAW,GAAI,aAAc,KAAM,EAAG,CAAC,EAE5DA,EACN,CAACA,EAAMG,CAAY,CAAC,EAEjBI,EAAaZ,EAAQ,IAClBW,EAAa,IAAIE,GAAOA,EAAI,EAAE,EACpC,CAACF,CAAY,CAAC,EAEXG,EAAwBb,EAAS,IAAM,CAC3C,MAAMc,EAAc,SAAS,cAAc,eAAe,EACtDA,GACFL,EAAqBK,EAAY,sBAAsB,EAAE,MAAM,CAEnE,EAAG,GAAG,EAENhB,EAAU,KACRe,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAACA,CAAqB,CAAC,EAE1B,MAAME,EAAWb,EAAaS,EAAYH,CAAiB,EAGrDQ,EAAqBnB,EAAuB,IAAI,EAChDoB,EAAUpB,EAAuC,IAAI,GAAK,EAE1DqB,EAAatB,EAChBgB,GAA0B,CACzBP,IAAoBO,CAAG,CACzB,EACA,CAACP,CAAiB,CACpB,EAGAP,EAAU,IAAM,CACd,GAAI,CAACiB,GAAY,CAACC,EAAmB,QAAS,OAE9C,MAAMG,EAAmBF,EAAQ,QAAQ,IAAIF,CAAQ,EACrD,GAAI,CAACI,EAAkB,OAEvB,MAAMC,EAAYJ,EAAmB,QAC/BK,EAAUF,EAAiB,sBAAsB,EACjDG,EAAgBF,EAAU,sBAAsB,EAGhDG,EAAYF,EAAQ,KAAOA,EAAQ,MAAQ,EAAIC,EAAc,KAC7DE,EAAkBF,EAAc,MAAQ,EACxCG,EAAeF,EAAYC,EAEjCJ,EAAU,SAAS,CACjB,KAAMA,EAAU,WAAaK,EAC7B,SAAU,QACZ,CAAC,CACH,EAAG,CAACV,CAAQ,CAAC,EAGb,MAAMW,EAAY9B,EAAY,CAAC+B,EAAeC,IAAsC,CAC9EA,EACFX,EAAQ,QAAQ,IAAIU,EAAOC,CAAO,EAElCX,EAAQ,QAAQ,OAAOU,CAAK,CAEhC,EAAG,CAAC,CAAC,EAEL,OACElC,EAAC,OACC,IAAKuB,EACL,MAAO,CAAE,eAAgB,OAAQ,gBAAiB,MAAO,EACzD,UAAWf,EAAG,kBAAmBK,CAAS,EAE1C,SAAAb,EAAC,OAAI,UAAU,0BACZ,SAAAiB,GAAc,IAAIE,GACjBnB,EAAC,UAAoB,IAAKoC,GAAMH,EAAUd,EAAI,GAAIiB,CAAE,EACjD,SAAAjB,EAAI,KAAO,aACVlB,EAAC,OAAI,UAAU,gDACZ,UAAAa,EACDd,EAAC,OACC,UAAWQ,EACT,iHACA,CACE,SAAUc,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,EAEAlB,EAAC,OACC,UAAWO,EACT,0GACA,CACE,iBAAkBc,IAAaH,EAAI,EACrC,CACF,EACA,QAAS,IAAMM,EAAWN,CAAG,EAE5B,UAAAA,EAAI,MACLnB,EAAC,OACC,UAAWQ,EACT,0FACA,CACE,SAAUc,IAAaH,EAAI,EAC7B,CACF,EACF,GACF,GAhCSA,EAAI,EAkCjB,CACD,EACH,EACF,CAEJ,EAEA,IAAOkB,EAAQ3B",
   "names": ["jsx", "jsxs", "useState", "useCallback", "useRef", "useEffect", "useMemo", "debounce", "cn", "useScrollSpy", "ScrollSpyNav", "tabs", "onSpyNavItemClick", "className", "renderRating", "purchaseBarHeight", "setPurchaseBarHeight", "combinedTabs", "sectionIds", "tab", "debouncedHandleResize", "purchaseBar", "activeId", "scrollContainerRef", "tabRefs", "onTabClick", "activeTabElement", "container", "tabRect", "containerRect", "tabCenter", "containerCenter", "scrollOffset", "setTabRef", "tabId", "element", "el", "ScrollSpyNav_default"]
 }

package/dist/esm/biz-components/Listing/hooks/useFollowTooltip.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+interface TooltipState {
+    visible: boolean;
+    x: number;
+    y: number;
+    text: string;
+}
+export declare const useFollowTooltip: () => {
+    tooltip: TooltipState;
+    showTooltip: (e: React.MouseEvent, text: string) => void;
+    hideTooltip: () => void;
+    getTooltipProps: (text: string) => {
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
+    };
+};
+export declare const FollowTooltip: ({ visible, x, y, text, className, }: TooltipState & {
+    className?: string;
+}) => import("react").ReactPortal | null;
+export default useFollowTooltip;

package/dist/esm/biz-components/Listing/hooks/useFollowTooltip.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as c}from"react/jsx-runtime";import{useState as p,useCallback as r}from"react";import{createPortal as a}from"react-dom";const u=()=>{const[s,o]=p({visible:!1,x:0,y:0,text:""}),e=r((t,l)=>{l&&o({visible:!0,x:t.clientX,y:t.clientY,text:l})},[]),i=r(()=>{o(t=>({...t,visible:!1}))},[]);return{tooltip:s,showTooltip:e,hideTooltip:i,getTooltipProps:t=>({onMouseMove:l=>e(l,t),onMouseLeave:i})}},x=({visible:s,x:o,y:e,text:i,className:n})=>typeof window>"u"\|\|!s?null:a(c("div",{className:n\|\|"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm font-bold text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${o+16}px`,top:`${e+16}px`},children:i}),document.body);var f=u;export{x as FollowTooltip,f as default,u as useFollowTooltip};
2	+ //# sourceMappingURL=useFollowTooltip.js.map

package/dist/esm/biz-components/Listing/hooks/useFollowTooltip.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/biz-components/Listing/hooks/useFollowTooltip.tsx"],
+  "sourcesContent": ["import { useState, useCallback } from 'react'\nimport { createPortal } from 'react-dom'\n\ninterface TooltipState {\n  visible: boolean\n  x: number\n  y: number\n  text: string\n}\n\nexport const useFollowTooltip = () => {\n  const [tooltip, setTooltip] = useState<TooltipState>({\n    visible: false,\n    x: 0,\n    y: 0,\n    text: '',\n  })\n\n  const showTooltip = useCallback((e: React.MouseEvent, text: string) => {\n    if (text) {\n      setTooltip({\n        visible: true,\n        x: e.clientX,\n        y: e.clientY,\n        text,\n      })\n    }\n  }, [])\n\n  const hideTooltip = useCallback(() => {\n    setTooltip(prev => ({ ...prev, visible: false }))\n  }, [])\n\n  const getTooltipProps = (text: string) => ({\n    onMouseMove: (e: React.MouseEvent) => showTooltip(e, text),\n    onMouseLeave: hideTooltip,\n  })\n\n  return {\n    tooltip,\n    showTooltip,\n    hideTooltip,\n    getTooltipProps,\n  }\n}\n\nexport const FollowTooltip = ({\n  visible,\n  x,\n  y,\n  text,\n  className,\n}: TooltipState & { className?: string }) => {\n  if (typeof window === 'undefined' || !visible) return null\n\n  return createPortal(\n    <div\n      className={\n        className ||\n        'pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm font-bold text-white shadow-lg backdrop-blur-sm transition-opacity duration-200'\n      }\n      style={{\n        left: `${x + 16}px`,\n        top: `${y + 16}px`,\n      }}\n    >\n      {text}\n    </div>,\n    document.body\n  )\n}\n\nexport default useFollowTooltip\n"],
+  "mappings": "AAwDI,cAAAA,MAAA,oBAxDJ,OAAS,YAAAC,EAAU,eAAAC,MAAmB,QACtC,OAAS,gBAAAC,MAAoB,YAStB,MAAMC,EAAmB,IAAM,CACpC,KAAM,CAACC,EAASC,CAAU,EAAIL,EAAuB,CACnD,QAAS,GACT,EAAG,EACH,EAAG,EACH,KAAM,EACR,CAAC,EAEKM,EAAcL,EAAY,CAACM,EAAqBC,IAAiB,CACjEA,GACFH,EAAW,CACT,QAAS,GACT,EAAGE,EAAE,QACL,EAAGA,EAAE,QACL,KAAAC,CACF,CAAC,CAEL,EAAG,CAAC,CAAC,EAECC,EAAcR,EAAY,IAAM,CACpCI,EAAWK,IAAS,CAAE,GAAGA,EAAM,QAAS,EAAM,EAAE,CAClD,EAAG,CAAC,CAAC,EAOL,MAAO,CACL,QAAAN,EACA,YAAAE,EACA,YAAAG,EACA,gBATuBD,IAAkB,CACzC,YAAcD,GAAwBD,EAAYC,EAAGC,CAAI,EACzD,aAAcC,CAChB,EAOA,CACF,EAEaE,EAAgB,CAAC,CAC5B,QAAAC,EACA,EAAAC,EACA,EAAAC,EACA,KAAAN,EACA,UAAAO,CACF,IACM,OAAO,OAAW,KAAe,CAACH,EAAgB,KAE/CV,EACLH,EAAC,OACC,UACEgB,GACA,uKAEF,MAAO,CACL,KAAM,GAAGF,EAAI,EAAE,KACf,IAAK,GAAGC,EAAI,EAAE,IAChB,EAEC,SAAAN,EACH,EACA,SAAS,IACX,EAGF,IAAOQ,EAAQb",
+  "names": ["jsx", "useState", "useCallback", "createPortal", "useFollowTooltip", "tooltip", "setTooltip", "showTooltip", "e", "text", "hideTooltip", "prev", "FollowTooltip", "visible", "x", "y", "className", "useFollowTooltip_default"]
+}

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

@@ -1,2 +1,2 @@
-"use client";import{Fragment as x,jsx as t,jsxs as o}from"react/jsx-runtime";import"react";import{cn as m}from"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Picture as d,Text as l}from"../../components/index.js";const g=({data:p,className:a,...s})=>{const{list:r}=p;return t(x,{children:t("div",{...s,className:m("",a),children:t("div",{className:"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4",children:r.map((e,i)=>o("div",{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(d,{className:"object-cover",imgClassName:"w-full object-cover",source:`${e?.img?.url}, ${e?.padImg?.url} 1439, ${e?.miniImg?.url} 1023, ${e?.mobileImg?.url} 767`}),o("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-[#080A0F] [&_*_strong]:!font-bold"}),t(l,{html:e?.desc,className:"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F]"})]})]},i))})})})};var S=c(g);export{S as default};
+"use client";import{Fragment as n,jsx as t,jsxs as o}from"react/jsx-runtime";import"react";import{cn as m}from"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Picture as d,Text as l}from"../../components/index.js";const g=({data:p,className:s,...a})=>{const{list:r}=p;return t(n,{children:t("div",{...a,className:m("",s),children:t("div",{className:"laptop:grid-cols-3 tablet:grid-cols-2 grid grid-cols-1 gap-4",children:r.map((e,i)=>o("div",{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(d,{className:"object-cover",imgClassName:"w-full object-cover",source:`${e?.img?.url}, ${e?.padImg?.url} 1439, ${e?.miniImg?.url} 1023, ${e?.mobileImg?.url} 767`}),o("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-[#080A0F] [&_*_strong]:!font-bold"}),t(l,{html:e?.desc,className:"lg-desktop:text-[16px] line-clamp-1 text-[14px] leading-[1.4] text-[#080A0F] [&_*_strong]:!font-bold"})]})]},i))})})})};var S=c(g);export{S as default};
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\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\ninterface SelectStoreType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    list: SelectStoreDataType[]\n  }\n}\n\nconst SelectStore = ({ data, className, ...rest }: SelectStoreType) => {\n  const { list } = data\n  // const number = list?.[2]?.service?.length || 0\n  return (\n    <>\n      <div {...rest} className={cn('', 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 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-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-[#080A0F] [&_*_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-[#080A0F]\"\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-[#080A0F]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#080A0F]'/>\n                </div>\n                \n              </div>\n            </div>\n          ))}\n        </div> */}\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(SelectStore)\n"],
-  "mappings": "aAqCI,mBAAAA,EAQU,OAAAC,EAKA,QAAAC,MAbV,oBApCJ,MAAuB,QACvB,OAAS,MAAAC,MAAU,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA2B9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,KAAAC,CAAK,EAAIH,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAK,GAAGS,EAAM,UAAWP,EAAG,GAAIM,CAAS,EACxC,SAAAR,EAAC,OAAI,UAAU,+DACZ,SAAAU,EAAK,IAAI,CAACC,EAAMC,IACfX,EAAC,OAEC,UAAU,oLAEV,UAAAD,EAACI,EAAA,CACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACAV,EAAC,OAAI,UAAU,oEACb,UAAAD,EAACK,EAAA,CACC,KAAMM,GAAM,MACZ,UAAU,0FACZ,EACAX,EAACK,EAAA,CACC,KAAMM,GAAM,KACZ,UAAU,+EACZ,GACF,IAjBKC,CAkBP,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\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\ninterface SelectStoreType extends React.HTMLAttributes<HTMLDivElement> {\n  data: {\n    list: SelectStoreDataType[]\n  }\n}\n\nconst SelectStore = ({ data, className, ...rest }: SelectStoreType) => {\n  const { list } = data\n  // const number = list?.[2]?.service?.length || 0\n  return (\n    <>\n      <div {...rest} className={cn('', 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 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-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-[#080A0F] [&_*_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-[#080A0F] [&_*_strong]:!font-bold\"\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-[#080A0F]'/>\n                  <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#080A0F]'/>\n                </div>\n                \n              </div>\n            </div>\n          ))}\n        </div> */}\n      </div>\n    </>\n  )\n}\n\nexport default withLayout(SelectStore)\n"],
+  "mappings": "aAqCI,mBAAAA,EAQU,OAAAC,EAKA,QAAAC,MAbV,oBApCJ,MAAuB,QACvB,OAAS,MAAAC,MAAU,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BA2B9B,MAAMC,EAAc,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,GAAGC,CAAK,IAAuB,CACrE,KAAM,CAAE,KAAAC,CAAK,EAAIH,EAEjB,OACEP,EAAAD,EAAA,CACE,SAAAC,EAAC,OAAK,GAAGS,EAAM,UAAWP,EAAG,GAAIM,CAAS,EACxC,SAAAR,EAAC,OAAI,UAAU,+DACZ,SAAAU,EAAK,IAAI,CAACC,EAAMC,IACfX,EAAC,OAEC,UAAU,oLAEV,UAAAD,EAACI,EAAA,CACC,UAAU,eACV,aAAa,sBACb,OAAQ,GAAGO,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,EACAV,EAAC,OAAI,UAAU,oEACb,UAAAD,EAACK,EAAA,CACC,KAAMM,GAAM,MACZ,UAAU,0FACZ,EACAX,EAACK,EAAA,CACC,KAAMM,GAAM,KACZ,UAAU,uGACZ,GACF,IAjBKC,CAkBP,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOC,EAAQV,EAAWG,CAAW",
   "names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Picture", "Text", "SelectStore", "data", "className", "rest", "list", "item", "index", "SelectStore_default"]
 }

package/dist/esm/biz-components/Tabs/Tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as a,jsxs as s}from"react/jsx-runtime";import{withLayout as y}from"../../shared/Styles.js";import*as e from"../../components/tabs.js";import{cn as n}from"../../helpers/index.js";import b from"react";import h from"../ShelfDisplay/index.js";import k from"../AccordionCards/index.js";import N from"../Faq/index.js";import g from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import t from"../Title/index.js";import v from"../Graphic/index.js";import P from"../WhyChoose/index.js";import L from"../BrandEquity/index.js";import A from"../BrandCardLink/index.js";const o=b.forwardRef(({data:m,className:p},c)=>{const{theme:d,shape:T,align:u,tabs:r=[],sectionTitle:l}=m,f=i=>i?.blockType==="ipc-shelfdisplay"?a(h,{data:i}):i?.blockType==="ipc-multiLayoutGraphicBlock"?a(g,{data:i}):i?.blockType==="ipc-accordioncards"?a(k,{data:i}):i?.blockType==="ipc-faq"?a(N,{data:i}):i?.blockType==="ipc-graphic"?a(v,{data:i}):i?.blockType==="ipc-whychoose"?a(P,{data:i}):i?.blockType==="ipc-brand-equity"?a(L,{data:i}):i?.blockType==="ipc-brand-card-link"?a(A,{data:i}):null;return s("section",{ref:c,className:n(d==="dark"?"aiui-dark":"",p),children:[l&&a(t,{className:"section-title",data:{title:l}}),s(e.Tabs,{shape:T,align:u,defaultValue:r?.[0]?.id||r?.[0]?.tabName,children:[Array.isArray(r)&&r.length>1&&a(e.TabsList,{className:"tabs-list",children:r.map(i=>a(e.TabsTrigger,{value:i.id||i.tabName,className:"tabs-trigger",children:i.tabName},i.id||i.tabName))}),(Array.isArray(r)?r:[])?.map(i=>s(e.TabsContent,{value:i.id||i.tabName,className:`tabs-content ${r?.length>1?"mt-[24px]":""}`,children:[i.caption||i?.subtitle?a(t,{className:"tabs-title",data:{caption:i?.caption,subtitle:i?.subtitle}}):null,i.tabContent?.[0]?f(i.tabContent?.[0]):null]},i.id||i.tabName))]})]})});o.displayName="Tabs";var V=y(o);export{V as default};
+"use client";import{jsx as a,jsxs as s}from"react/jsx-runtime";import{withLayout as y}from"../../shared/Styles.js";import*as e from"../../components/tabs.js";import{cn as n,isLexicalEmpty as b}from"../../helpers/index.js";import h from"react";import k from"../ShelfDisplay/index.js";import N from"../AccordionCards/index.js";import g from"../Faq/index.js";import v from"../MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js";import t from"../Title/index.js";import L from"../Graphic/index.js";import P from"../WhyChoose/index.js";import A from"../BrandEquity/index.js";import q from"../BrandCardLink/index.js";const o=h.forwardRef(({data:m,className:p},c)=>{const{theme:d,shape:T,align:u,tabs:r=[],sectionTitle:l}=m,f=i=>i?.blockType==="ipc-shelfdisplay"?a(k,{data:i}):i?.blockType==="ipc-multiLayoutGraphicBlock"?a(v,{data:i}):i?.blockType==="ipc-accordioncards"?a(N,{data:i}):i?.blockType==="ipc-faq"?a(g,{data:i}):i?.blockType==="ipc-graphic"?a(L,{data:i}):i?.blockType==="ipc-whychoose"?a(P,{data:i}):i?.blockType==="ipc-brand-equity"?a(A,{data:i}):i?.blockType==="ipc-brand-card-link"?a(q,{data:i}):null;return s("section",{ref:c,className:n(d==="dark"?"aiui-dark":"",p),children:[l&&a(t,{className:"section-title",data:{title:l}}),s(e.Tabs,{shape:T,align:u,defaultValue:r?.[0]?.id||r?.[0]?.tabName,children:[Array.isArray(r)&&r.length>1&&a(e.TabsList,{className:"tabs-list",children:r.map(i=>a(e.TabsTrigger,{value:i.id||i.tabName,className:"tabs-trigger",children:i.tabName},i.id||i.tabName))}),(Array.isArray(r)?r:[])?.map(i=>s(e.TabsContent,{value:i.id||i.tabName,className:`tabs-content ${r?.length>1?"mt-[24px]":""}`,children:[i.caption||!b(i?.subtitle)?a(t,{className:"tabs-title",data:{caption:i?.caption,subtitle:i?.subtitle}}):null,i.tabContent?.[0]?f(i.tabContent?.[0]):null]},i.id||i.tabName))]})]})});o.displayName="Tabs";var W=y(o);export{W as default};
 //# sourceMappingURL=Tabs.js.map