npm - @anker-in/headless-ui - Versions diffs - 1.3.19 → 1.3.20 - Mend

@anker-in/headless-ui 1.3.19 → 1.3.20

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 (52) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BuyOneGetOneShelf/ProductCard.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport ProductImage from './ProductImage.js'\nimport ProductInfo from './ProductInfo.js'\nimport GiftSelection from './GiftSelection.js'\nimport PriceAndActions from './PriceAndActions.js'\nimport type {\n  FreeGift,\n  FreeGiftWithSelection,\n  ProductCardData,\n  PureProductData,\n  ProductTag,\n  BuyOneGetOneShelfProductCardSemanticName,\n} from './types.js'\n\nexport interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4EA7\u54C1\u6570\u636E\uFF08\u4E0D\u5305\u542B\u8D60\u54C1\u4FE1\u606F\uFF09 */\n  productData: PureProductData\n  /** \u8D60\u54C1\u5217\u8868 */\n  gifts?: FreeGift[]\n  /** \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1 */\n  giftType?: 1 | 2\n  /** \u573A\u666F\u56FE\u7247 */\n  sceneImages: any\n  /** \u4EA7\u54C1\u6807\u7B7E */\n  tags?: ProductTag[]\n  /** \u5F53\u524D\u9009\u4E2D\u7684\u8D60\u54C1SKU\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n  selectedGiftSku?: string\n  /** \u5E03\u5C40\u6A21\u5F0F */\n  layout?: 'horizontal' | 'vertical'\n  classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n  /** @deprecated Use `onProductImageClick` instead. */\n  onProductClick?: (product: ProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** Learn More \u70B9\u51FB\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** Shop Now \u70B9\u51FB\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u70B9\u51FB\u56DE\u8C03 */\n  onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u56DE\u8C03 */\n  onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n  /** \u9009\u4E2D\u8D60\u54C1SKU\u53D8\u5316\u56DE\u8C03\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n  onSelectedGiftSkuChange?: (selectedSku: string | null) => void\n}\n\n/**\n * ProductCard - \u4E70\u8D60\u8D27\u67B6\u4EA7\u54C1\u5361\u7247\n *\n * @description \u7528\u4E8E\u4E70\u4E00\u8D60\u4E00\u6D3B\u52A8\u7684\u4EA7\u54C1\u5C55\u793A\u5361\u7247\uFF0C\u5DE6\u4FA7\u5C55\u793A\u4EA7\u54C1\u56FE\u7247\u548C\u6807\u7B7E\uFF0C\u53F3\u4FA7\u5C55\u793A\u4EA7\u54C1\u4FE1\u606F\u3001\u8D60\u54C1\u548C\u8D2D\u4E70\u6309\u94AE\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      productData,\n      gifts = [],\n      giftType = 1,\n      selectedGiftSku,\n      sceneImages,\n      tags,\n      layout = 'horizontal',\n      className,\n      onProductClick,\n      onProductImageClick,\n      onLearnMore,\n      onShopNow,\n      onGiftClick,\n      onGiftSelectionChange,\n      classNames,\n      ...props\n    },\n    ref\n  ) => {\n    const [learnMoreLoading, setLearnMoreLoading] = React.useState(false)\n    const [shopNowLoading, setShopNowLoading] = React.useState(false)\n\n    // \u5185\u90E8\u72B6\u6001\u7BA1\u7406\u8D60\u54C1\u7684\u9009\u62E9\u72B6\u6001 - \u4F7F\u7528\u9009\u4E2D\u7684ID\u6570\u7EC4\u800C\u4E0D\u662F\u4FEE\u6539gift\u5BF9\u8C61\n    const [selectedGiftIds, setSelectedGiftIds] = React.useState<string[]>(() => {\n      if (!gifts || gifts.length === 0) return []\n\n      if (giftType === 2) {\n        // gift_type 2 (\u5168\u9009\u6A21\u5F0F) - \u9009\u4E2D\u6240\u6709\u8D60\u54C1\n        return gifts.map((gift: FreeGift) => gift.id)\n      } else {\n        // gift_type 1 (\u5355\u9009\u6A21\u5F0F) - \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u8D60\u54C1\n        return [gifts[0].id]\n      }\n    })\n\n    // \u751F\u6210\u5E26\u6709\u9009\u62E9\u72B6\u6001\u7684\u8D60\u54C1\u5217\u8868\u7528\u4E8E\u6E32\u67D3\n    const giftsWithSelection = React.useMemo(() => {\n      if (!gifts) return []\n\n      return gifts.map((gift: FreeGift) => ({\n        ...gift,\n        selected: selectedGiftIds.includes(gift.id),\n      }))\n    }, [gifts, selectedGiftIds])\n\n    // \u5F53 gifts \u6216 giftType \u66F4\u65B0\u65F6\uFF0C\u540C\u6B65\u66F4\u65B0\u5185\u90E8\u72B6\u6001\n    React.useEffect(() => {\n      if (!gifts || gifts.length === 0) {\n        setSelectedGiftIds([])\n        return\n      }\n\n      if (giftType === 2) {\n        // gift_type 2 (\u5168\u9009\u6A21\u5F0F) - \u9009\u4E2D\u6240\u6709\u8D60\u54C1\n        setSelectedGiftIds(gifts.map((gift: FreeGift) => gift.id))\n      } else {\n        // gift_type 1 (\u5355\u9009\u6A21\u5F0F) - \u667A\u80FD\u72B6\u6001\u7BA1\u7406\n        setSelectedGiftIds(prevSelectedIds => {\n          // \u68C0\u67E5\u5F53\u524D\u9009\u4E2D\u7684\u793C\u54C1\u662F\u5426\u4ECD\u7136\u5B58\u5728\u4E8E\u65B0\u7684 gifts \u5217\u8868\u4E2D\n          const currentSelectedId = prevSelectedIds[0]\n          const isCurrentSelectionValid =\n            currentSelectedId && gifts.some((gift: FreeGift) => gift.id === currentSelectedId)\n\n          // \u5982\u679C\u5F53\u524D\u9009\u4E2D\u72B6\u6001\u4ECD\u7136\u6709\u6548\uFF0C\u4FDD\u6301\u4E0D\u53D8\uFF1B\u5426\u5219\u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\n          return isCurrentSelectionValid ? [currentSelectedId] : [gifts[0].id]\n        })\n      }\n    }, [gifts, giftType])\n\n    // \u6784\u9020\u5B8C\u6574\u7684\u4EA7\u54C1\u6570\u636E\u7528\u4E8E\u56DE\u8C03\n    const fullProductData: ProductCardData = React.useMemo(\n      () => ({\n        ...productData,\n        gifts,\n        gift_type: giftType,\n      }),\n      [productData, gifts, giftType]\n    )\n\n    const handleGiftClick = (gift: FreeGift) => {\n      // gift_type 2 (\u5168\u9009\u6A21\u5F0F) - \u4E0D\u5141\u8BB8\u53D6\u6D88\u9009\u62E9\uFF0C\u76F4\u63A5\u8FD4\u56DE\n      if (giftType === 2) {\n        // \u83B7\u53D6\u5F53\u524D\u6240\u6709\u9009\u4E2D\u7684gifts\u4F5C\u4E3A\u7B2C\u4E8C\u4E2A\u53C2\u6570\n        const currentSelectedGifts = giftsWithSelection.filter((g: FreeGiftWithSelection) => g.selected)\n        onGiftClick?.(gift, currentSelectedGifts)\n        return\n      }\n\n      // gift_type 1 (\u5355\u9009\u6A21\u5F0F)\n      setSelectedGiftIds(() => {\n        const newSelectedIds = [gift.id] // \u5355\u9009\uFF1A\u59CB\u7EC8\u9009\u4E2D\u5F53\u524D\u9879\uFF0C\u70B9\u51FB\u5DF2\u9009\u4E2D\u9879\u4FDD\u6301\u72B6\u6001\uFF0C\u70B9\u51FB\u672A\u9009\u4E2D\u9879\u5207\u6362\u5230\u8BE5\u9879\n\n        // \u8BA1\u7B97\u65B0\u7684\u9009\u4E2Dgifts\u4F5C\u4E3A\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4F20\u9012\u7ED9\u56DE\u8C03\n        const newSelectedGifts = gifts?.filter((g: FreeGift) => newSelectedIds.includes(g.id)) || []\n\n        // \u8C03\u7528\u56DE\u8C03\u51FD\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u53C2\u6570\u662F\u5F53\u524D\u9009\u4E2D\u7684gifts\n        onGiftClick?.(gift, newSelectedGifts)\n        onGiftSelectionChange?.(newSelectedGifts, fullProductData)\n\n        return newSelectedIds\n      })\n    }\n\n    const handleProductImageClick = () => {\n      const callback = onProductImageClick ?? onProductClick\n      callback?.(fullProductData)\n    }\n\n    const handleLearnMoreClick = async () => {\n      const selectedGifts = giftsWithSelection.filter(gift => gift.selected)\n      setLearnMoreLoading(true)\n      try {\n        await onLearnMore?.(fullProductData, selectedGifts)\n      } finally {\n        setLearnMoreLoading(false)\n      }\n    }\n\n    const handleShopNowClick = async () => {\n      const selectedGifts = giftsWithSelection.filter(gift => gift.selected)\n      setShopNowLoading(true)\n      try {\n        await onShopNow?.(fullProductData, selectedGifts)\n      } finally {\n        setShopNowLoading(false)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-container-primary rounded-box flex  items-stretch overflow-hidden',\n          // \u6839\u636E\u5E03\u5C40\u6A21\u5F0F\u8C03\u6574\u5BB9\u5668\n          layout === 'horizontal'\n            ? [\n                'laptop:flex-row lg-desktop:min-h-[560px] desktop:min-h-[448px] tablet:min-h-[526px] min-h-[610px] flex-col',\n                'laptop:col-span-2',\n              ]\n            : ['flex-col justify-between'],\n          (onProductImageClick ?? onProductClick) ? 'cursor-pointer' : '',\n          className\n        )}\n        {...props}\n      >\n        {/* \u4EA7\u54C1\u56FE\u7247\u533A\u57DF */}\n        <ProductImage\n          images={sceneImages}\n          name={productData.name}\n          layout={layout}\n          tags={productData.tags || tags}\n          onClick={handleProductImageClick}\n        />\n\n        {/* \u4EA7\u54C1\u4FE1\u606F\u533A\u57DF */}\n        <div\n          className={cn(\n            'bg-container-primary desktop:p-6 flex flex-col justify-between p-4',\n            // \u6839\u636E\u5E03\u5C40\u6A21\u5F0F\u8C03\u6574\u5706\u89D2\u548C\u5C3A\u5BF8\n            layout === 'horizontal'\n              ? [\n                  'rounded-r-box laptop:rounded-r-box tablet:rounded-b-box tablet:rounded-l-none',\n                  // \u4F7F\u7528 flex-basis \u8BBE\u7F6E\u5BBD\u5EA6\u6BD4\u4F8B\n                  'laptop:basis-[39.1%]', // 360px / 921px \u2248 39.1%\n                  'desktop:basis-[42.1%]', // 552px / 1312px \u2248 42.1%\n                  'lg-desktop:basis-[42.1%]', // 700px / 1664px \u2248 42.1%\n                  'shrink-0',\n                ]\n              : ['rounded-b-box', 'w-full', 'grow']\n          )}\n        >\n          <div className=\"flex flex-1 flex-col justify-between gap-6\">\n            {/* \u4EA7\u54C1\u6807\u9898\u548C\u63CF\u8FF0 */}\n            <ProductInfo\n              name={productData.name}\n              onClick={handleProductImageClick}\n              description={productData.description}\n              classNames={classNames}\n            />\n\n            {/* \u514D\u8D39\u8D60\u54C1\u533A\u57DF */}\n            <GiftSelection\n              freeGiftLabel={productData.freeGiftLabel}\n              freeGifts={giftsWithSelection}\n              onGiftClick={handleGiftClick}\n              giftType={giftType}\n              selectedGiftSku={selectedGiftSku}\n            />\n            <PriceAndActions\n              currentPrice={productData.currentPrice ?? ''}\n              originalPrice={productData.originalPrice}\n              priceLabel={productData.priceLabel}\n              learnMoreText={productData.learnMoreText}\n              shopNowText={productData.shopNowText}\n              onLearnMore={handleLearnMoreClick}\n              onShopNow={handleShopNowClick}\n              availableForSale={productData.availableForSale}\n              learnMoreLoading={learnMoreLoading}\n              shopNowLoading={shopNowLoading}\n              trackingTitle={productData.name}\n              trackingDescription={productData.description}\n              trackingSku={productData.sku}\n              classNames={classNames}\n            />\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCard.displayName = 'BuyOneGetOneShelf.ProductCard'\n\nexport default ProductCard\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "cn", "ProductImage", "ProductInfo", "GiftSelection", "PriceAndActions", "ProductCard", "productData", "gifts", "giftType", "selectedGiftSku", "sceneImages", "tags", "layout", "className", "onProductClick", "onProductImageClick", "onLearnMore", "onShopNow", "onGiftClick", "onGiftSelectionChange", "classNames", "props", "ref", "learnMoreLoading", "setLearnMoreLoading", "shopNowLoading", "setShopNowLoading", "selectedGiftIds", "setSelectedGiftIds", "gift", "giftsWithSelection", "prevSelectedIds", "currentSelectedId", "fullProductData", "handleGiftClick", "currentSelectedGifts", "g", "newSelectedIds", "newSelectedGifts", "handleProductImageClick", "handleLearnMoreClick", "selectedGifts", "handleShopNowClick", "ProductCard_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport ProductImage from './ProductImage.js'\nimport ProductInfo from './ProductInfo.js'\nimport GiftSelection from './GiftSelection.js'\nimport PriceAndActions from './PriceAndActions.js'\nimport type {\n  FreeGift,\n  FreeGiftWithSelection,\n  ProductCardData,\n  PureProductData,\n  ProductTag,\n  BuyOneGetOneShelfProductCardSemanticName,\n} from './types.js'\n\nexport interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4EA7\u54C1\u6570\u636E\uFF08\u4E0D\u5305\u542B\u8D60\u54C1\u4FE1\u606F\uFF09 */\n  productData: PureProductData\n  /** \u8D60\u54C1\u5217\u8868 */\n  gifts?: FreeGift[]\n  /** \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1 */\n  giftType?: 1 | 2\n  /** \u573A\u666F\u56FE\u7247 */\n  sceneImages: any\n  /** \u4EA7\u54C1\u6807\u7B7E */\n  tags?: ProductTag[]\n  /** \u5F53\u524D\u9009\u4E2D\u7684\u8D60\u54C1SKU\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n  selectedGiftSku?: string\n  /** \u5E03\u5C40\u6A21\u5F0F */\n  layout?: 'horizontal' | 'vertical'\n  classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n  soldOutText?: string\n  /** @deprecated Use `onProductImageClick` instead. */\n  onProductClick?: (product: ProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** Learn More \u70B9\u51FB\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** Shop Now \u70B9\u51FB\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u70B9\u51FB\u56DE\u8C03 */\n  onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u56DE\u8C03 */\n  onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n  /** \u9009\u4E2D\u8D60\u54C1SKU\u53D8\u5316\u56DE\u8C03\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n  onSelectedGiftSkuChange?: (selectedSku: string | null) => void\n}\n\n/**\n * ProductCard - \u4E70\u8D60\u8D27\u67B6\u4EA7\u54C1\u5361\u7247\n *\n * @description \u7528\u4E8E\u4E70\u4E00\u8D60\u4E00\u6D3B\u52A8\u7684\u4EA7\u54C1\u5C55\u793A\u5361\u7247\uFF0C\u5DE6\u4FA7\u5C55\u793A\u4EA7\u54C1\u56FE\u7247\u548C\u6807\u7B7E\uFF0C\u53F3\u4FA7\u5C55\u793A\u4EA7\u54C1\u4FE1\u606F\u3001\u8D60\u54C1\u548C\u8D2D\u4E70\u6309\u94AE\n */\nconst ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  (\n    {\n      productData,\n      gifts = [],\n      giftType = 1,\n      selectedGiftSku,\n      sceneImages,\n      tags,\n      layout = 'horizontal',\n      className,\n      onProductClick,\n      onProductImageClick,\n      onLearnMore,\n      onShopNow,\n      onGiftClick,\n      onGiftSelectionChange,\n      classNames,\n      soldOutText,\n      ...props\n    },\n    ref\n  ) => {\n    const [learnMoreLoading, setLearnMoreLoading] = React.useState(false)\n    const [shopNowLoading, setShopNowLoading] = React.useState(false)\n\n    // \u5185\u90E8\u72B6\u6001\u7BA1\u7406\u8D60\u54C1\u7684\u9009\u62E9\u72B6\u6001 - \u4F7F\u7528\u9009\u4E2D\u7684ID\u6570\u7EC4\u800C\u4E0D\u662F\u4FEE\u6539gift\u5BF9\u8C61\n    const [selectedGiftIds, setSelectedGiftIds] = React.useState<string[]>(() => {\n      if (!gifts || gifts.length === 0) return []\n\n      if (giftType === 2) {\n        // gift_type 2 (\u5168\u9009\u6A21\u5F0F) - \u9009\u4E2D\u6240\u6709\u8D60\u54C1\n        return gifts.map((gift: FreeGift) => gift.id)\n      } else {\n        // gift_type 1 (\u5355\u9009\u6A21\u5F0F) - \u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\u8D60\u54C1\n        return [gifts[0].id]\n      }\n    })\n\n    // \u751F\u6210\u5E26\u6709\u9009\u62E9\u72B6\u6001\u7684\u8D60\u54C1\u5217\u8868\u7528\u4E8E\u6E32\u67D3\n    const giftsWithSelection = React.useMemo(() => {\n      if (!gifts) return []\n\n      return gifts.map((gift: FreeGift) => ({\n        ...gift,\n        selected: selectedGiftIds.includes(gift.id),\n      }))\n    }, [gifts, selectedGiftIds])\n\n    // \u5F53 gifts \u6216 giftType \u66F4\u65B0\u65F6\uFF0C\u540C\u6B65\u66F4\u65B0\u5185\u90E8\u72B6\u6001\n    React.useEffect(() => {\n      if (!gifts || gifts.length === 0) {\n        setSelectedGiftIds([])\n        return\n      }\n\n      if (giftType === 2) {\n        // gift_type 2 (\u5168\u9009\u6A21\u5F0F) - \u9009\u4E2D\u6240\u6709\u8D60\u54C1\n        setSelectedGiftIds(gifts.map((gift: FreeGift) => gift.id))\n      } else {\n        // gift_type 1 (\u5355\u9009\u6A21\u5F0F) - \u667A\u80FD\u72B6\u6001\u7BA1\u7406\n        setSelectedGiftIds(prevSelectedIds => {\n          // \u68C0\u67E5\u5F53\u524D\u9009\u4E2D\u7684\u793C\u54C1\u662F\u5426\u4ECD\u7136\u5B58\u5728\u4E8E\u65B0\u7684 gifts \u5217\u8868\u4E2D\n          const currentSelectedId = prevSelectedIds[0]\n          const isCurrentSelectionValid =\n            currentSelectedId && gifts.some((gift: FreeGift) => gift.id === currentSelectedId)\n\n          // \u5982\u679C\u5F53\u524D\u9009\u4E2D\u72B6\u6001\u4ECD\u7136\u6709\u6548\uFF0C\u4FDD\u6301\u4E0D\u53D8\uFF1B\u5426\u5219\u9ED8\u8BA4\u9009\u4E2D\u7B2C\u4E00\u4E2A\n          return isCurrentSelectionValid ? [currentSelectedId] : [gifts[0].id]\n        })\n      }\n    }, [gifts, giftType])\n\n    // \u6784\u9020\u5B8C\u6574\u7684\u4EA7\u54C1\u6570\u636E\u7528\u4E8E\u56DE\u8C03\n    const fullProductData: ProductCardData = React.useMemo(\n      () => ({\n        ...productData,\n        gifts,\n        gift_type: giftType,\n      }),\n      [productData, gifts, giftType]\n    )\n\n    const handleGiftClick = (gift: FreeGift) => {\n      // gift_type 2 (\u5168\u9009\u6A21\u5F0F) - \u4E0D\u5141\u8BB8\u53D6\u6D88\u9009\u62E9\uFF0C\u76F4\u63A5\u8FD4\u56DE\n      if (giftType === 2) {\n        // \u83B7\u53D6\u5F53\u524D\u6240\u6709\u9009\u4E2D\u7684gifts\u4F5C\u4E3A\u7B2C\u4E8C\u4E2A\u53C2\u6570\n        const currentSelectedGifts = giftsWithSelection.filter((g: FreeGiftWithSelection) => g.selected)\n        onGiftClick?.(gift, currentSelectedGifts)\n        return\n      }\n\n      // gift_type 1 (\u5355\u9009\u6A21\u5F0F)\n      setSelectedGiftIds(() => {\n        const newSelectedIds = [gift.id] // \u5355\u9009\uFF1A\u59CB\u7EC8\u9009\u4E2D\u5F53\u524D\u9879\uFF0C\u70B9\u51FB\u5DF2\u9009\u4E2D\u9879\u4FDD\u6301\u72B6\u6001\uFF0C\u70B9\u51FB\u672A\u9009\u4E2D\u9879\u5207\u6362\u5230\u8BE5\u9879\n\n        // \u8BA1\u7B97\u65B0\u7684\u9009\u4E2Dgifts\u4F5C\u4E3A\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4F20\u9012\u7ED9\u56DE\u8C03\n        const newSelectedGifts = gifts?.filter((g: FreeGift) => newSelectedIds.includes(g.id)) || []\n\n        // \u8C03\u7528\u56DE\u8C03\u51FD\u6570\uFF0C\u7B2C\u4E8C\u4E2A\u53C2\u6570\u662F\u5F53\u524D\u9009\u4E2D\u7684gifts\n        onGiftClick?.(gift, newSelectedGifts)\n        onGiftSelectionChange?.(newSelectedGifts, fullProductData)\n\n        return newSelectedIds\n      })\n    }\n\n    const hasClickHandler = !!(onProductImageClick ?? onProductClick)\n    const productHref = `/products/${productData.handle}`\n\n    const handleProductImageClick = () => {\n      const callback = onProductImageClick ?? onProductClick\n      callback?.(fullProductData)\n    }\n\n    const handleLearnMoreClick = async () => {\n      const selectedGifts = giftsWithSelection.filter(gift => gift.selected)\n      setLearnMoreLoading(true)\n      try {\n        await onLearnMore?.(fullProductData, selectedGifts)\n      } finally {\n        setLearnMoreLoading(false)\n      }\n    }\n\n    const handleShopNowClick = async () => {\n      const selectedGifts = giftsWithSelection.filter(gift => gift.selected)\n      setShopNowLoading(true)\n      try {\n        await onShopNow?.(fullProductData, selectedGifts)\n      } finally {\n        setShopNowLoading(false)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-container-primary rounded-box flex  items-stretch overflow-hidden',\n          // \u6839\u636E\u5E03\u5C40\u6A21\u5F0F\u8C03\u6574\u5BB9\u5668\n          layout === 'horizontal'\n            ? [\n                'laptop:flex-row lg-desktop:min-h-[560px] desktop:min-h-[448px] tablet:min-h-[526px] min-h-[610px] flex-col',\n                'laptop:col-span-2',\n              ]\n            : ['flex-col justify-between'],\n          className\n        )}\n        {...props}\n      >\n        {/* \u4EA7\u54C1\u56FE\u7247\u533A\u57DF */}\n        <ProductImage\n          images={sceneImages}\n          name={productData.name}\n          layout={layout}\n          tags={productData.tags || tags}\n          onClick={hasClickHandler ? handleProductImageClick : undefined}\n          href={hasClickHandler ? undefined : productHref}\n        />\n\n        {/* \u4EA7\u54C1\u4FE1\u606F\u533A\u57DF */}\n        <div\n          className={cn(\n            'bg-container-primary desktop:p-6 flex flex-col justify-between p-4',\n            // \u6839\u636E\u5E03\u5C40\u6A21\u5F0F\u8C03\u6574\u5706\u89D2\u548C\u5C3A\u5BF8\n            layout === 'horizontal'\n              ? [\n                  'rounded-r-box laptop:rounded-r-box tablet:rounded-b-box tablet:rounded-l-none',\n                  // \u4F7F\u7528 flex-basis \u8BBE\u7F6E\u5BBD\u5EA6\u6BD4\u4F8B\n                  'laptop:basis-[39.1%]', // 360px / 921px \u2248 39.1%\n                  'desktop:basis-[42.1%]', // 552px / 1312px \u2248 42.1%\n                  'lg-desktop:basis-[42.1%]', // 700px / 1664px \u2248 42.1%\n                  'shrink-0',\n                ]\n              : ['rounded-b-box', 'w-full', 'grow']\n          )}\n        >\n          <div className=\"flex flex-1 flex-col justify-between gap-6\">\n            {/* \u4EA7\u54C1\u6807\u9898\u548C\u63CF\u8FF0 */}\n            <ProductInfo\n              name={productData.name}\n              onClick={hasClickHandler ? handleProductImageClick : undefined}\n              href={hasClickHandler ? undefined : productHref}\n              description={productData.description}\n              classNames={classNames}\n            />\n\n            {/* \u514D\u8D39\u8D60\u54C1\u533A\u57DF */}\n            <GiftSelection\n              freeGiftLabel={productData.freeGiftLabel}\n              freeGifts={giftsWithSelection}\n              onGiftClick={handleGiftClick}\n              giftType={giftType}\n              selectedGiftSku={selectedGiftSku}\n            />\n            <PriceAndActions\n              currentPrice={productData.currentPrice ?? ''}\n              originalPrice={productData.originalPrice}\n              priceLabel={productData.priceLabel}\n              learnMoreText={productData.learnMoreText}\n              shopNowText={productData.shopNowText}\n              soldOutText={soldOutText}\n              onLearnMore={handleLearnMoreClick}\n              onShopNow={handleShopNowClick}\n              availableForSale={productData.availableForSale}\n              learnMoreLoading={learnMoreLoading}\n              shopNowLoading={shopNowLoading}\n              trackingTitle={productData.name}\n              trackingDescription={productData.description}\n              trackingSku={productData.sku}\n              classNames={classNames}\n            />\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nProductCard.displayName = 'BuyOneGetOneShelf.ProductCard'\n\nexport default ProductCard\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cn", "ProductImage", "ProductInfo", "GiftSelection", "PriceAndActions", "ProductCard", "productData", "gifts", "giftType", "selectedGiftSku", "sceneImages", "tags", "layout", "className", "onProductClick", "onProductImageClick", "onLearnMore", "onShopNow", "onGiftClick", "onGiftSelectionChange", "classNames", "soldOutText", "props", "ref", "learnMoreLoading", "setLearnMoreLoading", "shopNowLoading", "setShopNowLoading", "selectedGiftIds", "setSelectedGiftIds", "gift", "giftsWithSelection", "prevSelectedIds", "currentSelectedId", "fullProductData", "handleGiftClick", "currentSelectedGifts", "g", "newSelectedIds", "newSelectedGifts", "hasClickHandler", "productHref", "handleProductImageClick", "handleLearnMoreClick", "selectedGifts", "handleShopNowClick", "ProductCard_default"]
 }

package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.d.ts CHANGED Viewed

@@ -11,6 +11,8 @@ export interface ProductImageProps extends React.HTMLAttributes<HTMLDivElement>
     layout?: 'horizontal' | 'vertical';
     /** 点击回调 */
     onClick?: () => void;
+    /** 产品链接（无 onClick 回调时自动使用 a 标签跳转） */
+    href?: string;
 }
 /**
  * ProductImage - 产品图片区域

package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as r,jsxs as z}from"react/jsx-runtime";import*as b from"react";import{cn as i}from"../../helpers/index.js";import h from"../../components/picture.js";import P from"../../components/badge.js";const l=b.forwardRef(({images:s,name:p,tags:o,layout:t="horizontal",className:m,onClick:a},n)=>{const{laptop:c,mobile:d,tablet:u,desktop:f,lgDesktop:v}=s;return z("div",{ref:n,className:i("relative grow overflow-hidden",t==="horizontal"?["min-h-[240px]","laptop:basis-[60.9%]","desktop:basis-[57.9%]","lg-desktop:basis-[57.9%]"]:["h-fit grow-0"],a?"cursor-pointer":"",m),onClick:a,children:[r(h,{source:`${d?.url}, ${u?.url} 768, ${c?.url} 1024, ${f?.url} 1440, ${v?.url} 1920`,alt:p,className:i({"laptop:absolute inset-0 size-full static":t==="horizontal","w-full h-auto":t==="vertical"}),imgClassName:"size-full object-cover"}),o&&o.length>0&&r("div",{className:"absolute left-4 top-4 flex gap-2",children:o.map((e,g)=>r(P,{variant:e.variant,size:"lg",promotionalType:e.variant==="promotional"?e.promotionalType:void 0,children:e.label},g))})]})});l.displayName="ProductImage";var w=l;export{w as default};
+"use client";import{Fragment as h,jsx as e,jsxs as z}from"react/jsx-runtime";import*as g from"react";import{cn as d}from"../../helpers/index.js";import v from"../../components/picture.js";import P from"../../components/badge.js";import{LocalizedLink as b}from"../../shared/LocalizedLink.js";const c=({images:a,name:r,tags:t,layout:o})=>{const{laptop:p,mobile:i,tablet:l,desktop:s,lgDesktop:n}=a;return z(h,{children:[e(v,{source:`${i?.url}, ${l?.url} 768, ${p?.url} 1024, ${s?.url} 1440, ${n?.url} 1920`,alt:r,className:d({"laptop:absolute inset-0 size-full static":o==="horizontal","w-full h-auto":o==="vertical"}),imgClassName:"size-full object-cover"}),t&&t.length>0&&e("div",{className:"absolute left-4 top-4 flex gap-2",children:t.map((m,f)=>e(P,{variant:m.variant,size:"lg",promotionalType:m.variant==="promotional"?m.promotionalType:void 0,children:m.label},f))})]})},u=g.forwardRef(({images:a,name:r,tags:t,layout:o="horizontal",className:p,onClick:i,href:l},s)=>{const n=d("relative grow overflow-hidden",o==="horizontal"?["min-h-[240px]","laptop:basis-[60.9%]","desktop:basis-[57.9%]","lg-desktop:basis-[57.9%]"]:["h-fit grow-0"],i||l?"cursor-pointer":"",p);return i?e("div",{ref:s,className:n,onClick:i,children:e(c,{images:a,name:r,tags:t,layout:o})}):l?e(b,{href:l,className:n,children:e("div",{ref:s,children:e(c,{images:a,name:r,tags:t,layout:o})})}):e("div",{ref:s,className:n,children:e(c,{images:a,name:r,tags:t,layout:o})})});u.displayName="ProductImage";var T=u;export{T as default};
 //# sourceMappingURL=ProductImage.js.map

package/dist/esm/biz-components/BuyOneGetOneShelf/ProductImage.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BuyOneGetOneShelf/ProductImage.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport type { ProductTag } from './types.js'\n\nexport interface ProductImageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\u96C6\u5408 */\n  images: any\n  /** \u4EA7\u54C1\u540D\u79F0\uFF0C\u7528\u4F5C alt \u6587\u672C */\n  name: string\n  /** \u4EA7\u54C1\u6807\u7B7E */\n  tags?: ProductTag[]\n  /** \u5E03\u5C40\u6A21\u5F0F */\n  layout?: 'horizontal' | 'vertical'\n  /** \u70B9\u51FB\u56DE\u8C03 */\n  onClick?: () => void\n}\n\n/**\n * ProductImage - \u4EA7\u54C1\u56FE\u7247\u533A\u57DF\n */\nconst ProductImage = React.forwardRef<HTMLDivElement, ProductImageProps>(\n  ({ images, name, tags, layout = 'horizontal', className, onClick }, ref) => {\n    const { laptop, mobile, tablet, desktop, lgDesktop } = images\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative grow overflow-hidden',\n          // \u6839\u636E\u5E03\u5C40\u6A21\u5F0F\u8C03\u6574\u5C3A\u5BF8\u548C\u5706\u89D2\n          layout === 'horizontal'\n            ? [\n                // \u6C34\u5E73\u5E03\u5C40\uFF1A\u4F7F\u7528 flex-basis \u8BBE\u7F6E\u5BBD\u5EA6\u6BD4\u4F8B\n                'min-h-[240px]',\n                'laptop:basis-[60.9%]', // 561px / 921px \u2248 60.9%\n                'desktop:basis-[57.9%]', // 760px / 1312px \u2248 57.9%\n                'lg-desktop:basis-[57.9%]', // 964px / 1664px \u2248 57.9%\n              ]\n            : [\n                // \u5782\u76F4\u5E03\u5C40\uFF1A\u4E0A\u9762\u56FE\u7247\uFF0C\u4E0B\u9762\u5185\u5BB9, \u4E0D\u9650\u5236\u9AD8\u5EA6\n                'h-fit grow-0',\n              ],\n          onClick ? 'cursor-pointer' : '',\n          className\n        )}\n        onClick={onClick}\n      >\n        <Picture\n          source={`${mobile?.url}, ${tablet?.url} 768, ${laptop?.url} 1024, ${desktop?.url} 1440, ${lgDesktop?.url} 1920`}\n          alt={name}\n          className={cn({\n            'laptop:absolute inset-0 size-full static': layout === 'horizontal',\n            'w-full h-auto': layout === 'vertical',\n          })}\n          imgClassName=\"size-full object-cover\"\n        />\n\n        {/* \u5DE6\u4E0A\u89D2\u6807\u7B7E */}\n        {tags && tags.length > 0 && (\n          <div className=\"absolute left-4 top-4 flex gap-2\">\n            {tags.map((tag, index) => (\n              <Badge\n                key={index}\n                variant={tag.variant}\n                size=\"lg\"\n                promotionalType={tag.variant === 'promotional' ? tag.promotionalType : undefined}\n              >\n                {tag.label}\n              </Badge>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nProductImage.displayName = 'ProductImage'\n\nexport default ProductImage\n"],
-  "mappings": "aA6BM,OAsBE,OAAAA,EAtBF,QAAAC,MAAA,oBA3BN,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAW,4BAmBlB,MAAMC,EAAeJ,EAAM,WACzB,CAAC,CAAE,OAAAK,EAAQ,KAAAC,EAAM,KAAAC,EAAM,OAAAC,EAAS,aAAc,UAAAC,EAAW,QAAAC,CAAQ,EAAGC,IAAQ,CAC1E,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIX,EAEvD,OACEN,EAAC,OACC,IAAKY,EACL,UAAWV,EACT,gCAEAO,IAAW,aACP,CAEE,gBACA,uBACA,wBACA,0BACF,EACA,CAEE,cACF,EACJE,EAAU,iBAAmB,GAC7BD,CACF,EACA,QAASC,EAET,UAAAZ,EAACI,EAAA,CACC,OAAQ,GAAGW,GAAQ,GAAG,KAAKC,GAAQ,GAAG,SAASF,GAAQ,GAAG,UAAUG,GAAS,GAAG,UAAUC,GAAW,GAAG,QACxG,IAAKV,EACL,UAAWL,EAAG,CACZ,2CAA4CO,IAAW,aACvD,gBAAiBA,IAAW,UAC9B,CAAC,EACD,aAAa,yBACf,EAGCD,GAAQA,EAAK,OAAS,GACrBT,EAAC,OAAI,UAAU,mCACZ,SAAAS,EAAK,IAAI,CAACU,EAAKC,IACdpB,EAACK,EAAA,CAEC,QAASc,EAAI,QACb,KAAK,KACL,gBAAiBA,EAAI,UAAY,cAAgBA,EAAI,gBAAkB,OAEtE,SAAAA,EAAI,OALAC,CAMP,CACD,EACH,GAEJ,CAEJ,CACF,EAEAd,EAAa,YAAc,eAE3B,IAAOe,EAAQf",
-  "names": ["jsx", "jsxs", "React", "cn", "Picture", "Badge", "ProductImage", "images", "name", "tags", "layout", "className", "onClick", "ref", "laptop", "mobile", "tablet", "desktop", "lgDesktop", "tag", "index", "ProductImage_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { LocalizedLink } from '../../shared/LocalizedLink.js'\nimport type { ProductTag } from './types.js'\n\nexport interface ProductImageProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u54CD\u5E94\u5F0F\u56FE\u7247\u96C6\u5408 */\n  images: any\n  /** \u4EA7\u54C1\u540D\u79F0\uFF0C\u7528\u4F5C alt \u6587\u672C */\n  name: string\n  /** \u4EA7\u54C1\u6807\u7B7E */\n  tags?: ProductTag[]\n  /** \u5E03\u5C40\u6A21\u5F0F */\n  layout?: 'horizontal' | 'vertical'\n  /** \u70B9\u51FB\u56DE\u8C03 */\n  onClick?: () => void\n  /** \u4EA7\u54C1\u94FE\u63A5\uFF08\u65E0 onClick \u56DE\u8C03\u65F6\u81EA\u52A8\u4F7F\u7528 a \u6807\u7B7E\u8DF3\u8F6C\uFF09 */\n  href?: string\n}\n\nconst ProductImageContent = ({\n  images,\n  name,\n  tags,\n  layout,\n}: Pick<ProductImageProps, 'images' | 'name' | 'tags' | 'layout'>) => {\n  const { laptop, mobile, tablet, desktop, lgDesktop } = images\n\n  return (\n    <>\n      <Picture\n        source={`${mobile?.url}, ${tablet?.url} 768, ${laptop?.url} 1024, ${desktop?.url} 1440, ${lgDesktop?.url} 1920`}\n        alt={name}\n        className={cn({\n          'laptop:absolute inset-0 size-full static': layout === 'horizontal',\n          'w-full h-auto': layout === 'vertical',\n        })}\n        imgClassName=\"size-full object-cover\"\n      />\n\n      {tags && tags.length > 0 && (\n        <div className=\"absolute left-4 top-4 flex gap-2\">\n          {tags.map((tag, index) => (\n            <Badge\n              key={index}\n              variant={tag.variant}\n              size=\"lg\"\n              promotionalType={tag.variant === 'promotional' ? tag.promotionalType : undefined}\n            >\n              {tag.label}\n            </Badge>\n          ))}\n        </div>\n      )}\n    </>\n  )\n}\n\n/**\n * ProductImage - \u4EA7\u54C1\u56FE\u7247\u533A\u57DF\n */\nconst ProductImage = React.forwardRef<HTMLDivElement, ProductImageProps>(\n  ({ images, name, tags, layout = 'horizontal', className, onClick, href }, ref) => {\n    const containerClass = cn(\n      'relative grow overflow-hidden',\n      layout === 'horizontal'\n        ? ['min-h-[240px]', 'laptop:basis-[60.9%]', 'desktop:basis-[57.9%]', 'lg-desktop:basis-[57.9%]']\n        : ['h-fit grow-0'],\n      onClick || href ? 'cursor-pointer' : '',\n      className\n    )\n\n    if (onClick) {\n      return (\n        <div ref={ref} className={containerClass} onClick={onClick}>\n          <ProductImageContent images={images} name={name} tags={tags} layout={layout} />\n        </div>\n      )\n    }\n\n    if (href) {\n      return (\n        <LocalizedLink href={href} className={containerClass}>\n          <div ref={ref}>\n            <ProductImageContent images={images} name={name} tags={tags} layout={layout} />\n          </div>\n        </LocalizedLink>\n      )\n    }\n\n    return (\n      <div ref={ref} className={containerClass}>\n        <ProductImageContent images={images} name={name} tags={tags} layout={layout} />\n      </div>\n    )\n  }\n)\n\nProductImage.displayName = 'ProductImage'\n\nexport default ProductImage\n"],
+  "mappings": "aAiCI,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBA/BJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAW,4BAClB,OAAS,iBAAAC,MAAqB,gCAkB9B,MAAMC,EAAsB,CAAC,CAC3B,OAAAC,EACA,KAAAC,EACA,KAAAC,EACA,OAAAC,CACF,IAAsE,CACpE,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIR,EAEvD,OACEP,EAAAF,EAAA,CACE,UAAAC,EAACI,EAAA,CACC,OAAQ,GAAGS,GAAQ,GAAG,KAAKC,GAAQ,GAAG,SAASF,GAAQ,GAAG,UAAUG,GAAS,GAAG,UAAUC,GAAW,GAAG,QACxG,IAAKP,EACL,UAAWN,EAAG,CACZ,2CAA4CQ,IAAW,aACvD,gBAAiBA,IAAW,UAC9B,CAAC,EACD,aAAa,yBACf,EAECD,GAAQA,EAAK,OAAS,GACrBV,EAAC,OAAI,UAAU,mCACZ,SAAAU,EAAK,IAAI,CAACO,EAAKC,IACdlB,EAACK,EAAA,CAEC,QAASY,EAAI,QACb,KAAK,KACL,gBAAiBA,EAAI,UAAY,cAAgBA,EAAI,gBAAkB,OAEtE,SAAAA,EAAI,OALAC,CAMP,CACD,EACH,GAEJ,CAEJ,EAKMC,EAAejB,EAAM,WACzB,CAAC,CAAE,OAAAM,EAAQ,KAAAC,EAAM,KAAAC,EAAM,OAAAC,EAAS,aAAc,UAAAS,EAAW,QAAAC,EAAS,KAAAC,CAAK,EAAGC,IAAQ,CAChF,MAAMC,EAAiBrB,EACrB,gCACAQ,IAAW,aACP,CAAC,gBAAiB,uBAAwB,wBAAyB,0BAA0B,EAC7F,CAAC,cAAc,EACnBU,GAAWC,EAAO,iBAAmB,GACrCF,CACF,EAEA,OAAIC,EAEArB,EAAC,OAAI,IAAKuB,EAAK,UAAWC,EAAgB,QAASH,EACjD,SAAArB,EAACO,EAAA,CAAoB,OAAQC,EAAQ,KAAMC,EAAM,KAAMC,EAAM,OAAQC,EAAQ,EAC/E,EAIAW,EAEAtB,EAACM,EAAA,CAAc,KAAMgB,EAAM,UAAWE,EACpC,SAAAxB,EAAC,OAAI,IAAKuB,EACR,SAAAvB,EAACO,EAAA,CAAoB,OAAQC,EAAQ,KAAMC,EAAM,KAAMC,EAAM,OAAQC,EAAQ,EAC/E,EACF,EAKFX,EAAC,OAAI,IAAKuB,EAAK,UAAWC,EACxB,SAAAxB,EAACO,EAAA,CAAoB,OAAQC,EAAQ,KAAMC,EAAM,KAAMC,EAAM,OAAQC,EAAQ,EAC/E,CAEJ,CACF,EAEAQ,EAAa,YAAc,eAE3B,IAAOM,EAAQN",
+  "names": ["Fragment", "jsx", "jsxs", "React", "cn", "Picture", "Badge", "LocalizedLink", "ProductImageContent", "images", "name", "tags", "layout", "laptop", "mobile", "tablet", "desktop", "lgDesktop", "tag", "index", "ProductImage", "className", "onClick", "href", "ref", "containerClass", "ProductImage_default"]
 }

package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.d.ts CHANGED Viewed

@@ -1,15 +1,12 @@
 import * as React from 'react';
 import type { BuyOneGetOneShelfProductCardSemanticName } from './types.js';
 export interface ProductInfoProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** 产品名称 */
     name: string;
-    /** 产品描述 */
     description?: string;
     classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>;
     onClick?: () => void;
+    /** 产品链接（无 onClick 回调时自动使用 a 标签跳转） */
+    href?: string;
 }
-/**
- * ProductInfo - 产品信息区域
- */
 declare const ProductInfo: React.ForwardRefExoticComponent<ProductInfoProps & React.RefAttributes<HTMLDivElement>>;
 export default ProductInfo;

package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as p}from"react/jsx-runtime";import*as m from"react";import{cn as e}from"../../helpers/index.js";import{Text as s}from"../../components/text.js";import{Heading as d}from"../../components/heading.js";const r=m.forwardRef(({name:i,description:a,onClick:n,className:c,classNames:t={}},l)=>p("div",{ref:l,className:e("text-info-primary flex w-full flex-col gap-1",c),children:[o(d,{as:"h4",size:2,html:i,className:e("line-clamp-1 ",t?.productCardTitle),onClick:()=>n?.()}),o(s,{size:2,html:a,className:e("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",t?.productCardDescription)})]}));r.displayName="ProductInfo";var P=r;export{P as default};
+"use client";import{jsx as t,jsxs as u}from"react/jsx-runtime";import*as s from"react";import{cn as e}from"../../helpers/index.js";import{Text as p}from"../../components/text.js";import{Heading as o}from"../../components/heading.js";import{LocalizedLink as f}from"../../shared/LocalizedLink.js";const c=s.forwardRef(({name:i,description:n,onClick:a,href:l,className:d,classNames:r={}},m)=>u("div",{ref:m,className:e("text-info-primary flex w-full flex-col gap-1",d),children:[a?t(o,{as:"h4",size:2,html:i,className:e("line-clamp-1 ",r?.productCardTitle),onClick:()=>a?.()}):l?t(f,{href:l,className:"block",children:t(o,{as:"h4",size:2,html:i,className:e("line-clamp-1 ",r?.productCardTitle)})}):t(o,{as:"h4",size:2,html:i,className:e("line-clamp-1 ",r?.productCardTitle)}),t(p,{size:2,html:n,className:e("desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1",r?.productCardDescription)})]}));c.displayName="ProductInfo";var C=c;export{C as default};
 //# sourceMappingURL=ProductInfo.js.map

package/dist/esm/biz-components/BuyOneGetOneShelf/ProductInfo.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BuyOneGetOneShelf/ProductInfo.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/heading.js'\nimport type { BuyOneGetOneShelfProductCardSemanticName } from './types.js'\n\nexport interface ProductInfoProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4EA7\u54C1\u540D\u79F0 */\n  name: string\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n  onClick?: () => void\n}\n\n/**\n * ProductInfo - \u4EA7\u54C1\u4FE1\u606F\u533A\u57DF\n */\nconst ProductInfo = React.forwardRef<HTMLDivElement, ProductInfoProps>(\n  ({ name, description, onClick, className, classNames = {} }, ref) => {\n    return (\n      <div ref={ref} className={cn('text-info-primary flex w-full flex-col gap-1', className)}>\n        <Heading\n          as=\"h4\"\n          size={2}\n          html={name}\n          className={cn('line-clamp-1 ', classNames?.productCardTitle)}\n          onClick={() => onClick?.()}\n        />\n        <Text\n          size={2}\n          html={description}\n          className={cn('desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1', classNames?.productCardDescription)}\n        />\n      </div>\n    )\n  }\n)\n\nProductInfo.displayName = 'ProductInfo'\n\nexport default ProductInfo\n"],
-  "mappings": "aAuBM,OACE,OAAAA,EADF,QAAAC,MAAA,oBArBN,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,QAAAC,MAAY,2BACrB,OAAS,WAAAC,MAAe,8BAexB,MAAMC,EAAcJ,EAAM,WACxB,CAAC,CAAE,KAAAK,EAAM,YAAAC,EAAa,QAAAC,EAAS,UAAAC,EAAW,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAEzDX,EAAC,OAAI,IAAKW,EAAK,UAAWT,EAAG,+CAAgDO,CAAS,EACpF,UAAAV,EAACK,EAAA,CACC,GAAG,KACH,KAAM,EACN,KAAME,EACN,UAAWJ,EAAG,gBAAiBQ,GAAY,gBAAgB,EAC3D,QAAS,IAAMF,IAAU,EAC3B,EACAT,EAACI,EAAA,CACC,KAAM,EACN,KAAMI,EACN,UAAWL,EAAG,0DAA2DQ,GAAY,sBAAsB,EAC7G,GACF,CAGN,EAEAL,EAAY,YAAc,cAE1B,IAAOO,EAAQP",
-  "names": ["jsx", "jsxs", "React", "cn", "Text", "Heading", "ProductInfo", "name", "description", "onClick", "className", "classNames", "ref", "ProductInfo_default"]
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Text } from '../../components/text.js'\nimport { Heading } from '../../components/heading.js'\nimport { LocalizedLink } from '../../shared/LocalizedLink.js'\nimport type { BuyOneGetOneShelfProductCardSemanticName } from './types.js'\n\nexport interface ProductInfoProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  description?: string\n  classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n  onClick?: () => void\n  /** \u4EA7\u54C1\u94FE\u63A5\uFF08\u65E0 onClick \u56DE\u8C03\u65F6\u81EA\u52A8\u4F7F\u7528 a \u6807\u7B7E\u8DF3\u8F6C\uFF09 */\n  href?: string\n}\n\nconst ProductInfo = React.forwardRef<HTMLDivElement, ProductInfoProps>(\n  ({ name, description, onClick, href, className, classNames = {} }, ref) => {\n    return (\n      <div ref={ref} className={cn('text-info-primary flex w-full flex-col gap-1', className)}>\n        {onClick ? (\n          <Heading\n            as=\"h4\"\n            size={2}\n            html={name}\n            className={cn('line-clamp-1 ', classNames?.productCardTitle)}\n            onClick={() => onClick?.()}\n          />\n        ) : href ? (\n          <LocalizedLink href={href} className=\"block\">\n            <Heading as=\"h4\" size={2} html={name} className={cn('line-clamp-1 ', classNames?.productCardTitle)} />\n          </LocalizedLink>\n        ) : (\n          <Heading as=\"h4\" size={2} html={name} className={cn('line-clamp-1 ', classNames?.productCardTitle)} />\n        )}\n        <Text\n          size={2}\n          html={description}\n          className={cn('desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1', classNames?.productCardDescription)}\n        />\n      </div>\n    )\n  }\n)\n\nProductInfo.displayName = 'ProductInfo'\n\nexport default ProductInfo\n"],
+  "mappings": "aAqBM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAnBN,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,QAAAC,MAAY,2BACrB,OAAS,WAAAC,MAAe,8BACxB,OAAS,iBAAAC,MAAqB,gCAY9B,MAAMC,EAAcL,EAAM,WACxB,CAAC,CAAE,KAAAM,EAAM,YAAAC,EAAa,QAAAC,EAAS,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAE/Db,EAAC,OAAI,IAAKa,EAAK,UAAWX,EAAG,+CAAgDS,CAAS,EACnF,UAAAF,EACCV,EAACK,EAAA,CACC,GAAG,KACH,KAAM,EACN,KAAMG,EACN,UAAWL,EAAG,gBAAiBU,GAAY,gBAAgB,EAC3D,QAAS,IAAMH,IAAU,EAC3B,EACEC,EACFX,EAACM,EAAA,CAAc,KAAMK,EAAM,UAAU,QACnC,SAAAX,EAACK,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMG,EAAM,UAAWL,EAAG,gBAAiBU,GAAY,gBAAgB,EAAG,EACtG,EAEAb,EAACK,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,KAAMG,EAAM,UAAWL,EAAG,gBAAiBU,GAAY,gBAAgB,EAAG,EAEtGb,EAACI,EAAA,CACC,KAAM,EACN,KAAMK,EACN,UAAWN,EAAG,0DAA2DU,GAAY,sBAAsB,EAC7G,GACF,CAGN,EAEAN,EAAY,YAAc,cAE1B,IAAOQ,EAAQR",
+  "names": ["jsx", "jsxs", "React", "cn", "Text", "Heading", "LocalizedLink", "ProductInfo", "name", "description", "onClick", "href", "className", "classNames", "ref", "ProductInfo_default"]
 }

package/dist/esm/biz-components/BuyOneGetOneShelf/types.d.ts CHANGED Viewed

@@ -139,6 +139,7 @@ export interface CopyConfig {
     freeGiftLabel: string;
     learnMoreText: string;
     freeGiftHeading: string;
+    soldOutText?: string;
 }
 /**
  * 买赠项目接口
@@ -199,6 +200,7 @@ export interface BuyOneGetOneShelfCardProps extends Omit<React.HTMLAttributes<HT
     gifts?: FreeGift[];
     /** 赠品类型 1-> 赠送其中一个赠品， 2 -> 赠送所有赠品 */
     giftType?: 1 | 2;
+    soldOutText?: string;
     /** 场景图片 */
     sceneImages?: ResponsiveImages;
     /** 布局模式（通常由父组件自动决定） */

package/dist/esm/biz-components/BuyOneGetOneShelf/types.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/BuyOneGetOneShelf/types.ts"],
-  "sourcesContent": ["import * as React from 'react'\nimport type { Theme } from '../../types/props'\n\n/**\n * \u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGift {\n  /** \u8D60\u54C1ID */\n  id: string\n  /** \u8D60\u54C1\u56FE\u7247URL */\n  image: string\n  /** \u8D60\u54C1\u540D\u79F0 */\n  name: string\n  /** \u539F\u4EF7 */\n  originalPrice: string\n  /** \u73B0\u4EF7\uFF08\u901A\u5E38\u4E3AFree\uFF09 */\n  currentPrice: string\n  /** \u6570\u91CF */\n  quantity: number\n  /** \u53D8\u4F53ID */\n  variantId: string\n  /** SKU */\n  sku: string\n  /** \u53E5\u67C4 */\n  handle: string\n  /** \u8D60\u54C1tag */\n  tag?: string\n}\n\n/**\n * \u5E26\u9009\u62E9\u72B6\u6001\u7684\u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGiftWithSelection extends FreeGift {\n  /** \u662F\u5426\u5DF2\u9009\u4E2D */\n  selected?: boolean\n}\n\n/**\n * \u4EA7\u54C1\u6807\u7B7E\u63A5\u53E3\n */\nexport interface ProductTag {\n  /** \u6807\u7B7E\u6587\u672C */\n  label: string\n  /** \u6807\u7B7E\u6837\u5F0F\u53D8\u4F53 */\n  variant: 'outline' | 'fill' | 'promotional'\n  /** \u4FC3\u9500\u7C7B\u578B\uFF08\u4EC5\u5F53 variant \u4E3A 'promotional' \u65F6\u6709\u6548\uFF09 */\n  promotionalType?: 'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'\n}\n\n// Root \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfRootSemanticName = 'root' | 'title' | 'description' | 'content' | 'viewMoreBtn'\n\n// ProductCard \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfProductCardSemanticName =\n  | 'productCard'\n  | 'productCardImage'\n  | 'productCardTitle'\n  | 'productCardDescription'\n  | 'productCardPriceLabel'\n  | 'productCardPrice'\n  | 'productCardOriginalPrice'\n  | 'productCardGiftsContainer'\n  | 'productCardBtnGroup'\n\n// \u5B8C\u6574\u7684\u8BED\u4E49\u7C7B\u540D\uFF08\u5411\u540E\u517C\u5BB9\uFF09\nexport type BuyOneGetOneShelfSemanticName = BuyOneGetOneShelfRootSemanticName | BuyOneGetOneShelfProductCardSemanticName\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u63A5\u53E3\n */\nexport interface ResponsiveImage {\n  id: number\n  baseUrl?: string\n  url: string\n  thumbnailURL?: string\n  filename?: string\n  mimeType?: string\n  width?: number\n  height?: number\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u96C6\u5408\u63A5\u53E3\n */\nexport interface ResponsiveImages {\n  laptop?: ResponsiveImage\n  mobile?: ResponsiveImage\n  tablet?: ResponsiveImage\n  desktop?: ResponsiveImage\n  lgDesktop?: ResponsiveImage\n}\n\n/**\n * \u4EA7\u54C1\u57FA\u7840\u6570\u636E\u63A5\u53E3\n */\nexport interface BaseProductData {\n  sku: string\n  name: string\n  image: string\n  value: string\n  handle: string\n  shopify_id: string\n}\n\nexport interface WithGiftData {\n  /**\n   * \u8D60\u54C1\n   */\n  gifts: FreeGift[]\n  /**\n   * \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1\n   */\n  gift_type: 1 | 2\n}\n\n/**\n * \u7EAF\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u4E0D\u5305\u542B\u8D60\u54C1\u4FE1\u606F\uFF09\n */\nexport interface PureProductData extends BaseProductData {\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice?: string\n  /** \u539F\u4EF7 */\n  originalPrice?: string\n  /** \u4EF7\u683C\u6807\u7B7E\u6587\u672C\uFF08\u5982 \"Plus Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  learnMoreText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  shopNowText?: string\n  /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n  freeGiftLabel?: string\n  /** \u4EA7\u54C1\u6807\u7B7E */\n  tags?: ProductTag[]\n  /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n  giftSelectionMode?: 'single' | 'multiple'\n  availableForSale: boolean\n}\n\nexport interface ProductData extends BaseProductData, WithGiftData {\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice?: string\n  /** \u539F\u4EF7 */\n  originalPrice?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  learnMoreText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  shopNowText?: string\n  /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n  freeGiftLabel?: string\n  /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n  giftSelectionMode?: 'single' | 'multiple'\n}\n\n// Alias for consistency with other components\nexport type ProductCardData = ProductData\n\n/**\n * \u6587\u6848\u914D\u7F6E\u63A5\u53E3\n */\nexport interface CopyConfig {\n  shopNowText: string\n  freeGiftLabel: string\n  learnMoreText: string\n  freeGiftHeading: string\n}\n\n/**\n * \u4E70\u8D60\u9879\u76EE\u63A5\u53E3\n */\nexport interface BogoItem {\n  id: string\n  data: ProductData[]\n  images: ResponsiveImages\n  shopNowFun: string\n  shopNowText: string\n  learnMoreText: string\n  layout?: 'horizontal' | 'vertical'\n}\n\n/**\n * BuyOneGetOneShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3 - \u65B0\u683C\u5F0F\n */\nexport interface BuyOneGetOneShelfData {\n  copy: CopyConfig\n  theme: string\n  title: string\n  subtitle: string\n  bogoItems: BogoItem[]\n  /** \u8D85\u8FC7\u6B64\u6570\u91CF\u7684\u5546\u54C1\u65F6\u663E\u793A\"View More/View Less\"\u6309\u94AE\uFF0C\u9ED8\u8BA4 4 */\n  viewMoreThreshold?: number\n  /** View More \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View More' */\n  viewMoreText?: string\n  /** View Less \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View Less' */\n  viewLessText?: string\n}\n\n// Root \u7EC4\u4EF6 Props\uFF08\u65B0\u7684\u7EC4\u5408\u5F0F\u8BBE\u8BA1\uFF09\nexport interface BuyOneGetOneShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  theme?: Theme\n  /** \u5B50\u7EC4\u4EF6 */\n  children: React.ReactNode\n  /** Root \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n  classNames?: Partial<Record<BuyOneGetOneShelfRootSemanticName, string>>\n  /** \u8D85\u8FC7\u6B64\u6570\u91CF\u7684\u5546\u54C1\u65F6\u663E\u793A\"View More/View Less\"\u6309\u94AE\uFF0C\u9ED8\u8BA4 4 */\n  viewMoreThreshold?: number\n  /** View More \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View More' */\n  viewMoreText?: string\n  /** View Less \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View Less' */\n  viewLessText?: string\n}\n\n// \u5361\u7247\u7EC4\u4EF6Props - \u57FA\u4E8EProductCardProps\u4F46\u7B80\u5316\nexport interface BuyOneGetOneShelfCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /** \u4EA7\u54C1\u6570\u636E */\n  productData: BaseProductData & {\n    description?: string\n    currentPrice?: string\n    originalPrice?: string\n    learnMoreText?: string\n    shopNowText?: string\n    freeGiftLabel?: string\n  }\n  /** \u8D60\u54C1\u5217\u8868 */\n  gifts?: FreeGift[]\n  /** \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1 */\n  giftType?: 1 | 2\n  /** \u573A\u666F\u56FE\u7247 */\n  sceneImages?: ResponsiveImages\n  /** \u5E03\u5C40\u6A21\u5F0F\uFF08\u901A\u5E38\u7531\u7236\u7EC4\u4EF6\u81EA\u52A8\u51B3\u5B9A\uFF09 */\n  layout?: 'horizontal' | 'vertical'\n  /** ProductCard \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n  classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n  /** @deprecated Use `onProductImageClick` instead. */\n  onProductClick?: (product: ProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** Learn More \u70B9\u51FB\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** Shop Now \u70B9\u51FB\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u70B9\u51FB\u56DE\u8C03 */\n  onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u56DE\u8C03 */\n  onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n  /** \u9009\u4E2D\u8D60\u54C1SKU\u53D8\u5316\u56DE\u8C03\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n  onSelectedGiftSkuChange?: (selectedSku: string | null) => void\n}\n\n// \u4FDD\u6301\u5411\u540E\u517C\u5BB9\u7684\u4F20\u7EDFProps\nexport interface BuyOneGetOneShelfLegacyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: BuyOneGetOneShelfData\n  /** @deprecated Use `onProductImageClick` instead. */\n  onProductClick?: (product: ProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** Learn More\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n  onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** Shop Now\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n  onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u8D60\u54C1\u70B9\u51FB\u4E8B\u4EF6 */\n  onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u4E8B\u4EF6 */\n  onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n  classNames?: Partial<Record<BuyOneGetOneShelfSemanticName, string>>\n}\n"],
+  "sourcesContent": ["import * as React from 'react'\nimport type { Theme } from '../../types/props'\n\n/**\n * \u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGift {\n  /** \u8D60\u54C1ID */\n  id: string\n  /** \u8D60\u54C1\u56FE\u7247URL */\n  image: string\n  /** \u8D60\u54C1\u540D\u79F0 */\n  name: string\n  /** \u539F\u4EF7 */\n  originalPrice: string\n  /** \u73B0\u4EF7\uFF08\u901A\u5E38\u4E3AFree\uFF09 */\n  currentPrice: string\n  /** \u6570\u91CF */\n  quantity: number\n  /** \u53D8\u4F53ID */\n  variantId: string\n  /** SKU */\n  sku: string\n  /** \u53E5\u67C4 */\n  handle: string\n  /** \u8D60\u54C1tag */\n  tag?: string\n}\n\n/**\n * \u5E26\u9009\u62E9\u72B6\u6001\u7684\u514D\u8D39\u8D60\u54C1\u63A5\u53E3\n */\nexport interface FreeGiftWithSelection extends FreeGift {\n  /** \u662F\u5426\u5DF2\u9009\u4E2D */\n  selected?: boolean\n}\n\n/**\n * \u4EA7\u54C1\u6807\u7B7E\u63A5\u53E3\n */\nexport interface ProductTag {\n  /** \u6807\u7B7E\u6587\u672C */\n  label: string\n  /** \u6807\u7B7E\u6837\u5F0F\u53D8\u4F53 */\n  variant: 'outline' | 'fill' | 'promotional'\n  /** \u4FC3\u9500\u7C7B\u578B\uFF08\u4EC5\u5F53 variant \u4E3A 'promotional' \u65F6\u6709\u6548\uFF09 */\n  promotionalType?: 'plus-member' | 'regular-member' | 'regular-discount' | 'time-limited-discount'\n}\n\n// Root \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfRootSemanticName = 'root' | 'title' | 'description' | 'content' | 'viewMoreBtn'\n\n// ProductCard \u7EC4\u4EF6\u76F8\u5173\u7684\u8BED\u4E49\u7C7B\u540D\nexport type BuyOneGetOneShelfProductCardSemanticName =\n  | 'productCard'\n  | 'productCardImage'\n  | 'productCardTitle'\n  | 'productCardDescription'\n  | 'productCardPriceLabel'\n  | 'productCardPrice'\n  | 'productCardOriginalPrice'\n  | 'productCardGiftsContainer'\n  | 'productCardBtnGroup'\n\n// \u5B8C\u6574\u7684\u8BED\u4E49\u7C7B\u540D\uFF08\u5411\u540E\u517C\u5BB9\uFF09\nexport type BuyOneGetOneShelfSemanticName = BuyOneGetOneShelfRootSemanticName | BuyOneGetOneShelfProductCardSemanticName\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u63A5\u53E3\n */\nexport interface ResponsiveImage {\n  id: number\n  baseUrl?: string\n  url: string\n  thumbnailURL?: string\n  filename?: string\n  mimeType?: string\n  width?: number\n  height?: number\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u56FE\u7247\u96C6\u5408\u63A5\u53E3\n */\nexport interface ResponsiveImages {\n  laptop?: ResponsiveImage\n  mobile?: ResponsiveImage\n  tablet?: ResponsiveImage\n  desktop?: ResponsiveImage\n  lgDesktop?: ResponsiveImage\n}\n\n/**\n * \u4EA7\u54C1\u57FA\u7840\u6570\u636E\u63A5\u53E3\n */\nexport interface BaseProductData {\n  sku: string\n  name: string\n  image: string\n  value: string\n  handle: string\n  shopify_id: string\n}\n\nexport interface WithGiftData {\n  /**\n   * \u8D60\u54C1\n   */\n  gifts: FreeGift[]\n  /**\n   * \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1\n   */\n  gift_type: 1 | 2\n}\n\n/**\n * \u7EAF\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u4E0D\u5305\u542B\u8D60\u54C1\u4FE1\u606F\uFF09\n */\nexport interface PureProductData extends BaseProductData {\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice?: string\n  /** \u539F\u4EF7 */\n  originalPrice?: string\n  /** \u4EF7\u683C\u6807\u7B7E\u6587\u672C\uFF08\u5982 \"Plus Member Price\"\uFF09 */\n  priceLabel?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  learnMoreText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  shopNowText?: string\n  /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n  freeGiftLabel?: string\n  /** \u4EA7\u54C1\u6807\u7B7E */\n  tags?: ProductTag[]\n  /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n  giftSelectionMode?: 'single' | 'multiple'\n  availableForSale: boolean\n}\n\nexport interface ProductData extends BaseProductData, WithGiftData {\n  /** \u4EA7\u54C1\u63CF\u8FF0 */\n  description?: string\n  /** \u5F53\u524D\u4EF7\u683C */\n  currentPrice?: string\n  /** \u539F\u4EF7 */\n  originalPrice?: string\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  learnMoreText?: string\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  shopNowText?: string\n  /** \u8D60\u54C1\u6807\u7B7E\u6587\u672C */\n  freeGiftLabel?: string\n  /** \u8D60\u54C1\u9009\u62E9\u6A21\u5F0F */\n  giftSelectionMode?: 'single' | 'multiple'\n}\n\n// Alias for consistency with other components\nexport type ProductCardData = ProductData\n\n/**\n * \u6587\u6848\u914D\u7F6E\u63A5\u53E3\n */\nexport interface CopyConfig {\n  shopNowText: string\n  freeGiftLabel: string\n  learnMoreText: string\n  freeGiftHeading: string\n  soldOutText?: string\n}\n\n/**\n * \u4E70\u8D60\u9879\u76EE\u63A5\u53E3\n */\nexport interface BogoItem {\n  id: string\n  data: ProductData[]\n  images: ResponsiveImages\n  shopNowFun: string\n  shopNowText: string\n  learnMoreText: string\n  layout?: 'horizontal' | 'vertical'\n}\n\n/**\n * BuyOneGetOneShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3 - \u65B0\u683C\u5F0F\n */\nexport interface BuyOneGetOneShelfData {\n  copy: CopyConfig\n  theme: string\n  title: string\n  subtitle: string\n  bogoItems: BogoItem[]\n  /** \u8D85\u8FC7\u6B64\u6570\u91CF\u7684\u5546\u54C1\u65F6\u663E\u793A\"View More/View Less\"\u6309\u94AE\uFF0C\u9ED8\u8BA4 4 */\n  viewMoreThreshold?: number\n  /** View More \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View More' */\n  viewMoreText?: string\n  /** View Less \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View Less' */\n  viewLessText?: string\n}\n\n// Root \u7EC4\u4EF6 Props\uFF08\u65B0\u7684\u7EC4\u5408\u5F0F\u8BBE\u8BA1\uFF09\nexport interface BuyOneGetOneShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u6807\u9898 */\n  title?: string\n  /** \u526F\u6807\u9898 */\n  subtitle?: string\n  theme?: Theme\n  /** \u5B50\u7EC4\u4EF6 */\n  children: React.ReactNode\n  /** Root \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n  classNames?: Partial<Record<BuyOneGetOneShelfRootSemanticName, string>>\n  /** \u8D85\u8FC7\u6B64\u6570\u91CF\u7684\u5546\u54C1\u65F6\u663E\u793A\"View More/View Less\"\u6309\u94AE\uFF0C\u9ED8\u8BA4 4 */\n  viewMoreThreshold?: number\n  /** View More \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View More' */\n  viewMoreText?: string\n  /** View Less \u6309\u94AE\u6587\u6848\uFF0C\u9ED8\u8BA4 'View Less' */\n  viewLessText?: string\n}\n\n// \u5361\u7247\u7EC4\u4EF6Props - \u57FA\u4E8EProductCardProps\u4F46\u7B80\u5316\nexport interface BuyOneGetOneShelfCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /** \u4EA7\u54C1\u6570\u636E */\n  productData: BaseProductData & {\n    description?: string\n    currentPrice?: string\n    originalPrice?: string\n    learnMoreText?: string\n    shopNowText?: string\n    freeGiftLabel?: string\n  }\n  /** \u8D60\u54C1\u5217\u8868 */\n  gifts?: FreeGift[]\n  /** \u8D60\u54C1\u7C7B\u578B 1-> \u8D60\u9001\u5176\u4E2D\u4E00\u4E2A\u8D60\u54C1\uFF0C 2 -> \u8D60\u9001\u6240\u6709\u8D60\u54C1 */\n  giftType?: 1 | 2\n  soldOutText?: string\n  /** \u573A\u666F\u56FE\u7247 */\n  sceneImages?: ResponsiveImages\n  /** \u5E03\u5C40\u6A21\u5F0F\uFF08\u901A\u5E38\u7531\u7236\u7EC4\u4EF6\u81EA\u52A8\u51B3\u5B9A\uFF09 */\n  layout?: 'horizontal' | 'vertical'\n  /** ProductCard \u7EC4\u4EF6\u7684\u81EA\u5B9A\u4E49\u7C7B\u540D */\n  classNames?: Partial<Record<BuyOneGetOneShelfProductCardSemanticName, string>>\n  /** @deprecated Use `onProductImageClick` instead. */\n  onProductClick?: (product: ProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** Learn More \u70B9\u51FB\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** Shop Now \u70B9\u51FB\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u70B9\u51FB\u56DE\u8C03 */\n  onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u56DE\u8C03 */\n  onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n  /** \u9009\u4E2D\u8D60\u54C1SKU\u53D8\u5316\u56DE\u8C03\uFF08\u53D7\u63A7\u7EC4\u4EF6\uFF09 */\n  onSelectedGiftSkuChange?: (selectedSku: string | null) => void\n}\n\n// \u4FDD\u6301\u5411\u540E\u517C\u5BB9\u7684\u4F20\u7EDFProps\nexport interface BuyOneGetOneShelfLegacyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: BuyOneGetOneShelfData\n  /** @deprecated Use `onProductImageClick` instead. */\n  onProductClick?: (product: ProductCardData) => void\n  /** \u4EA7\u54C1\u56FE\u7247\u70B9\u51FB\u56DE\u8C03 */\n  onProductImageClick?: (product: ProductCardData) => void\n  /** Learn More\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n  onLearnMore?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  /** Shop Now\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6 */\n  onShopNow?: (product: ProductCardData, selectedGifts: FreeGift[]) => void\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u8D60\u54C1\u70B9\u51FB\u4E8B\u4EF6 */\n  onGiftClick?: (gift: FreeGift, selectedGifts: FreeGift[]) => void\n  /** \u8D60\u54C1\u9009\u62E9\u53D8\u5316\u4E8B\u4EF6 */\n  onGiftSelectionChange?: (selectedGifts: FreeGift[], product: ProductCardData) => void\n  classNames?: Partial<Record<BuyOneGetOneShelfSemanticName, string>>\n}\n"],
   "mappings": "AAAA,MAAuB",
   "names": []
 }

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.d.ts CHANGED Viewed

@@ -6,7 +6,9 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
     data: {
         shape?: import("../../types/props").Shape;
         sectionTitle?: string;
+        mode?: "grid" | "carousel";
         groupByTab?: boolean;
+        carouselConfig?: import("./types").MultiLayoutCarouselConfig;
         items: ({
             width?: "full" | "half" | "one-third";
         } & Item)[];

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n    id,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n      </div>\n      <div\n        className={cn(\n          'pointer-events-none absolute inset-0 z-20 flex flex-col',\n          spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n        )}\n      >\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                data-track={`${id}-link-left`}\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                data-track={`${id}-link-right`}\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(video?.url || youtubeId) && (\n          <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(\n                  isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n                  isYouTube\n                )\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
-  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n  onSecondaryButtonClick,\n  onPrimaryButtonClick,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n  onSecondaryButtonClick?: (data: Item) => void\n  onPrimaryButtonClick?: (data: Item) => void\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 'half':\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 'one-third':\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    } else {\n      switch (configuration?.num) {\n        case 1:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n        case 2:\n          return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n        case 3:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n        default:\n          return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n      }\n    }\n  }\n\n  useExposure(ref, {\n    componentType: componentType,\n    componentName: componentName,\n    position: jIndex,\n    componentTitle: item.title,\n    componentDescription: item.description,\n    navigation: configuration?.activeTab,\n  })\n\n  useEffect(() => {\n    setIsMobile(mediaQuery)\n  }, [mediaQuery])\n\n  const {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n    id,\n  } = item\n  const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n  return (\n    <div\n      className={cn(\n        'item-wrapper cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(\n            getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n            `${componentType}_${componentName}`\n          )}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\n            className=\"tablet:block hidden h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n            style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n          />\n        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n      </div>\n      <div\n        className={cn(\n          'pointer-events-none absolute inset-0 z-20 flex flex-col',\n          spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n        )}\n      >\n        <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                data-track={`${id}-link-left`}\n                onClick={() => {\n                  onSecondaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                data-track={`${id}-link-right`}\n                as=\"a\"\n                onClick={() => {\n                  onPrimaryButtonClick?.(item)\n                }}\n                href={trackUrlRef(\n                  getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n                  `${componentType}_${componentName}`\n                )}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(video?.url || youtubeId) && (\n          <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(\n                  isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n                  isYouTube\n                )\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\n  const { locale = 'us' } = useAiuiContext()\n\n  const getSpan = (width: 'full' | 'half' | 'one-third') => {\n    switch (width) {\n      case 'full':\n        return 12\n      case 'half':\n        return 6\n      case 'one-third':\n        return 4\n    }\n  }\n\n  const tabNames = items\n    .map(item => item.tabName)\n    .filter(Boolean)\n    .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n  const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\n  }\n  const handleTabNumber = (num: Number, flag?: boolean) => {\n    switch (num) {\n      case 1:\n        return 1\n      case 2:\n        return 2\n      default:\n        return flag ? 2.3 : 3\n    }\n  }\n\n  const tabItemsMaps = tabNames\n    .map(tabName => ({\n      tabName,\n      items: items.filter(item => item.tabName === tabName),\n    }))\n    .reduce(\n      (acc, cur) => {\n        acc[cur.tabName] = cur.items\n        return acc\n      },\n      {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n    )\n\n  // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n  if (data.mode === 'carousel' && items.length > 0) {\n    return (\n      <MultiLayoutGraphicBlockCarouselImpl\n        data={data}\n        onPrimaryButtonClick={onPrimaryButtonClick}\n        onSecondaryButtonClick={onSecondaryButtonClick}\n        className={className}\n        ref={ref as React.Ref<HTMLElement>}\n        {...rest}\n      />\n    )\n  }\n\n  return (\n    <section\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      {...rest}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(tabName!)}\n                onClick={() => {\n                  gaTrack({\n                    event: 'ga4Event',\n                    event_name: 'component_click',\n                    event_parameters: {\n                      page_group: 'Home Page',\n                      component_type: componentType,\n                      component_name: componentName,\n                      component_title: sectionTitle,\n                      component_position: 1,\n                      navigation: tabName,\n                      button_name: tabName,\n                    },\n                  })\n                }}\n              >\n                {tabName}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {tabNames.map((tabName, index) => (\n            <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n              <>\n                <SwiperBox\n                  className=\"!overflow-visible\"\n                  id={'MultiLayoutGraphicBlock1'}\n                  data={{\n                    list: tabItemsMaps?.[tabName] || [],\n                    configuration: {\n                      shape: shape,\n                      isTab: groupByTab,\n                      activeTab: tabName,\n                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      onSecondaryButtonClick,\n                      onPrimaryButtonClick,\n                    },\n                  }}\n                  Slide={ItemBlock}\n                  breakpoints={{\n                    0: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1,\n                    },\n                    374: {\n                      spaceBetween: 12,\n                      freeMode: false,\n                      slidesPerView: 1.2,\n                    },\n                    768: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n                    },\n                    1024: {\n                      spaceBetween: 16,\n                      freeMode: false,\n                      slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n                    },\n                  }}\n                />\n                {carousel && carousel?.items.length > 0 ? (\n                  <SwiperBox\n                    className=\"!overflow-visible\"\n                    id={'MultiLayoutGraphicBlock2'}\n                    data={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        locale,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\n                        onSecondaryButtonClick,\n                        onPrimaryButtonClick,\n                      },\n                    }}\n                    Slide={ItemBlock}\n                    breakpoints={{\n                      0: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1,\n                      },\n                      374: {\n                        spaceBetween: 12,\n                        freeMode: false,\n                        slidesPerView: 1.2,\n                      },\n                      768: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 2.3,\n                      },\n                      1024: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 3.1,\n                      },\n                      1440: {\n                        spaceBetween: 16,\n                        freeMode: false,\n                        slidesPerView: 4,\n                      },\n                    }}\n                  />\n                ) : null}\n              </>\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <>\n          <Grid className=\"w-full\">\n            {items.map((item, index) => {\n              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{\n                      shape: shape,\n                      locale,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                      title: sectionTitle,\n                    }}\n                    jIndex={index}\n                    spanType={item.width}\n                    onSecondaryButtonClick={onSecondaryButtonClick}\n                    onPrimaryButtonClick={onPrimaryButtonClick}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{\n                    shape: shape,\n                    locale,\n                    onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                    title: sectionTitle,\n                  }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: {\n                  shape: shape,\n                  locale,\n                  onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                  title: sectionTitle,\n                  onSecondaryButtonClick,\n                  onPrimaryButtonClick,\n                },\n              }}\n              Slide={ItemBlock}\n              breakpoints={{\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1.2,\n                },\n                768: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 2.3,\n                },\n                1024: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 3.1,\n                },\n                1440: {\n                  spaceBetween: 16,\n                  freeMode: false,\n                  slidesPerView: 4,\n                },\n              }}\n            />\n          ) : null}\n        </>\n      )}\n      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n  container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "MultiLayoutGraphicBlockCarouselImpl", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { MultiLayoutGraphicBlockProps } from './types.js';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+interface MultiLayoutGraphicBlockCarouselProps extends React.HTMLAttributes<HTMLElement> {
+    data: MultiLayoutGraphicBlockProps['data'];
+    onSecondaryButtonClick?: () => void;
+    onPrimaryButtonClick?: () => void;
+}
+/**
+ * MultiLayoutGraphicBlockCarousel — full-width banner carousel for MultiLayoutGraphicBlock.
+ *
+ * Architecture:
+ *  - slidesPerView=1, loop=true, each Item occupies full-width slide
+ *  - Arrow buttons: tablet+ visible, hover/focus-within show (matches SecondaryBannerCarousel)
+ *  - Dots: banner-dot class, active=bg-info-primary w-8 h-2, inactive=bg-info-quaternary size-2
+ *  - Video pause/play on slide change
+ *  - No withLayout wrapper (carousel is inner implementation)
+ */
+declare const MultiLayoutGraphicBlockCarousel: React.ForwardRefExoticComponent<MultiLayoutGraphicBlockCarouselProps & React.RefAttributes<HTMLElement>>;
+export default MultiLayoutGraphicBlockCarousel;

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlockCarousel.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import w,{useRef as x,useCallback as F,useState as N,useEffect as C}from"react";import{Swiper as J,SwiperSlide as K}from"swiper/react";import{Navigation as L,Pagination as S,Autoplay as Q}from"swiper/modules";import{cn as v,getLocalizedPath as g}from"../../helpers/index.js";import X from"../Title/index.js";import{Button as B,Heading as Y,Picture as M}from"../../components/index.js";import{Text as Z}from"../../components/text.js";import{isVideo as z}from"../../shared/mimeType.js";import{useAiuiContext as ee}from"../AiuiProvider/index.js";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";const te=()=>a("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),oe=()=>a("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),t("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),T={sm:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]",base:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]",lg:"laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]"},E=w.forwardRef(({data:m,className:P,onSecondaryButtonClick:_,onPrimaryButtonClick:j,...I},U)=>{const n=m.items\|\|[],s=m.carouselConfig,A=(s?.showArrows??!0)&&n.length>1,b=s?.showDots??!0,l=s?.autoplaySeconds,R=s?.size??"base",r=x(null),[H,D]=N(0),[c,G]=N(null),p=x(n.map(()=>w.createRef()));C(()=>{const e=r.current;!e\|\|!c\|\|e.pagination&&(e.pagination.el=c,e.pagination.init(),e.pagination.render(),e.pagination.update())},[c]);const y=(n[H]?.theme??"light")==="dark";C(()=>{const e=()=>{const o=r.current;if(o)if(document.visibilityState==="hidden")o.autoplay?.stop();else{o.autoplay?.start();const u=o.realIndex??0;p.current.forEach((i,d)=>{i.current&&i.current.querySelectorAll("video").forEach(f=>{d!==u&&f.pause()})})}};return document.addEventListener("visibilitychange",e),()=>document.removeEventListener("visibilitychange",e)},[]);const q=l!=null&&l>0?[L,S,Q]:[L,S],O=l!=null&&l>0?{delay:Math.max(l*1e3,3e3),disableOnInteraction:!1}:!1,V=F(e=>{const o=e.realIndex;p.current.forEach((i,d)=>{d!==o&&i.current&&i.current.querySelectorAll("video").forEach(f=>{f.pause(),f.currentTime=0})});const u=p.current[o];u?.current&&u.current.querySelectorAll("video").forEach(i=>{i.paused&&i.play()?.catch(()=>{})}),D(o)},[]),{locale:h}=ee(),W=T[R]??T.base,{sectionTitle:k,shape:$}=m;return a("section",{ref:U,className:v("multilayout-graphic-block-carousel group relative w-full","laptop:overflow-hidden","laptop:block flex flex-col",W,{"aiui-dark":y},P),...I,children:[k&&t(X,{data:{title:k},className:"section-title"}),a("div",{className:"laptop:h-full laptop:pb-0 relative shrink-0 pb-5",children:[t(J,{className:"laptop:h-full h-[400px]",onSwiper:e=>r.current=e,onSlideChange:V,modules:q,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:O,pagination:b?{clickable:!0,el:c,renderBullet:(e,o)=>`<span class="${o} banner-dot"></span>`}:!1,children:n.map((e,o)=>t(K,{className:"h-full",children:a("div",{ref:p.current[o],className:v("item-wrapper text-info-primary relative size-full overflow-hidden",{"aiui-dark":e.theme==="dark","rounded-2xl":$==="rounded"}),children:[(e.blockLink\|\|e.secondaryButton?.link)&&t("a",{className:"absolute inset-0 z-10",href:g(e.blockLink\|\|e.secondaryButton?.link\|\|"",h\|\|"us"),"aria-hidden":"true",tabIndex:-1}),a("div",{className:"absolute inset-0",children:[z(e.imageUrl?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:e.imageUrl?.url,type:"video/mp4"})}):t(M,{source:e.imageUrl?.url,alt:e.imageUrl?.alt\|\|"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full object-cover"}),z(e.imageMobileUrl?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:e.imageMobileUrl?.url,type:"video/mp4"})}):t(M,{source:e.imageMobileUrl?.url\|\|e.imageUrl?.url,alt:e.imageMobileUrl?.alt\|\|e.imageUrl?.alt\|\|"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full object-cover"})]}),t("div",{className:"laptop:justify-center pointer-events-none absolute inset-0 z-20 flex flex-col justify-end",children:a("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[a("div",{className:"flex flex-col gap-1",children:[t(Y,{size:3,as:"h3",className:"item-title",html:e.title}),t(Z,{className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e.description})]}),a("div",{className:"lg-desktop:gap-3 flex gap-2",children:[e.secondaryButton?.text&&a(B,{"aria-label":e.title??e.description,className:"link-left",variant:"secondary",as:"a",href:g(e.secondaryButton.link\|\|"",h\|\|"us"),onClick:_,children:[e.secondaryButton.text,t("span",{className:"sr-only",children:e.title??e.description})]}),e.primaryButton?.text&&a(B,{"aria-label":e.title??e.description,className:"link-right",variant:"primary",as:"a",href:g(e.primaryButton.link\|\|"",h\|\|"us"),onClick:j,children:[e.primaryButton.text,t("span",{className:"sr-only",children:e.title??e.description})]})]})]})})]})},o))}),A&&a("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[t("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>r.current?.slidePrev(),"aria-label":"Previous slide",children:t(te,{})}),t("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>r.current?.slideNext(),"aria-label":"Next slide",children:t(oe,{})})]}),b&&t("div",{ref:G,className:v("multilayout-carousel-pagination swiper-pagination","[&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary","[&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8","[&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot]:size-2","[&_.banner-dot]:rounded-full [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out","[&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100","absolute !left-1/2 z-20 flex !w-auto !-translate-x-1/2 items-center justify-center gap-2","laptop:!bottom-4 lg-desktop:!bottom-6 !bottom-0",{"aiui-dark":y})})]})]})});E.displayName="MultiLayoutGraphicBlockCarousel";var ve=E;export{ve as default};
2	+ //# sourceMappingURL=MultiLayoutGraphicBlockCarousel.js.map