@anker-in/headless-ui 1.1.33 → 1.1.34-alpha.1768470531746

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MediaShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport {\n  Button,\n  Badge,\n  Card,\n  CardContent,\n  Picture,\n  Text,\n  Heading,\n  Tabs,\n  TabsList,\n  TabsTrigger,\n  TabsContent,\n  Progress,\n} from '../../components/index.js'\n\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation } from 'swiper/modules'\n\n// Import Swiper styles\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport type { ButtonFunctionType, CopyConfig } from './types.js'\n\nimport type { BadgeProps } from '../../components/badge.js'\n\n/**\n * \u8BED\u4E49\u5316\u7C7B\u540D\n */\ntype MediaShelfSemanticName =\n  | 'root'\n  | 'title'\n  | 'description'\n  | 'productCard'\n  | 'productCardImage'\n  | 'productTitle'\n  | 'productDescription'\n  | 'productPriceLabel'\n  | 'productPrice'\n  | 'buttonGroup'\n  | 'secondaryButton'\n  | 'primaryButton'\n  | 'stockBar'\n\nconst PrevIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\" lg-desktop:size-[56px] laptop:block hidden size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.536 43.464 0 28 0C12.536 0 0 12.536 0 28Z\"\n      fill=\"black\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M31 22L25 28L31 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\nconst NextIcon = ({ disabled }: { disabled: boolean }) => (\n  <svg\n    width=\"56\"\n    height=\"56\"\n    viewBox=\"0 0 56 56\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"lg-desktop:size-[56px] laptop:block hidden size-[40px]\"\n  >\n    <path\n      d=\"M0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28Z\"\n      fill=\"black\"\n      fillOpacity={disabled ? '0.2' : '0.6'}\n    />\n    <path d=\"M25 22L31 28L25 34\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n  </svg>\n)\n\n/**\n * Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00\n */\nexport type CodeChannelConfig = string\n\n/**\n * \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n */\nexport type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage'\n\n/**\n * \u5224\u65AD\u662F\u5426\u5E94\u8BE5\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n * @param stockDisplayMode \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F\n * @param stockThreshold \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09\n * @param variant \u53D8\u4F53\u6570\u636E\n * @returns \u662F\u5426\u663E\u793A\u5E93\u5B58\u4FE1\u606F\n */\nfunction shouldShowStock(\n  stockDisplayMode: StockDisplayMode | undefined,\n  stockThreshold: number | undefined,\n  quantityAvailable: number,\n  totalInventory: number\n): boolean {\n  // \u672A\u914D\u7F6E\u65F6\u9ED8\u8BA4\u663E\u793A\n  if (stockDisplayMode === undefined) {\n    return true\n  }\n\n  // \u6839\u636E\u5C55\u793A\u6A21\u5F0F\u5224\u65AD\n  switch (stockDisplayMode) {\n    case 'always':\n      // \u603B\u662F\u663E\u793A\n      return true\n\n    case 'never':\n      // \u6C38\u4E0D\u663E\u793A\n      return false\n\n    case 'below-quantity':\n      // \u5F53\u5E93\u5B58\u6570\u91CF\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n      if (stockThreshold === undefined) {\n        return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n      }\n\n      return quantityAvailable <= stockThreshold\n\n    case 'below-percentage':\n      // \u5F53\u5E93\u5B58\u767E\u5206\u6BD4\u4F4E\u4E8E\u9608\u503C\u65F6\u663E\u793A\n      if (stockThreshold === undefined) {\n        return true // \u6CA1\u6709\u8BBE\u7F6E\u9608\u503C\u65F6\u9ED8\u8BA4\u663E\u793A\n      }\n      return quantityAvailable / totalInventory <= stockThreshold\n\n    default:\n      // \u672A\u77E5\u6A21\u5F0F\u65F6\u9ED8\u8BA4\u663E\u793A\n      return true\n  }\n}\n\n/**\n * MediaShelf Context \u914D\u7F6E\u63A5\u53E3\n */\nexport interface MediaShelfContextConfig {\n  /** Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00 */\n  codeChannel?: CodeChannelConfig\n  /** \u662F\u5426\u5C55\u793A\u4F1A\u5458\u4EF7\u683C */\n  showMemberPrice?: boolean\n  /** \u662F\u5426\u5C55\u793A\u6298\u6263\u6807\u7B7E */\n  showDiscount?: boolean\n  /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n  showTags?: boolean\n  /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n  stockDisplayMode?: StockDisplayMode\n  /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n  stockThreshold?: number\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  showOriginalPrice?: boolean\n  /** \u7528\u6237\u72B6\u6001 */\n}\n\n/**\n * MediaShelf Context \u503C\u63A5\u53E3\n */\ninterface MediaShelfContextValue extends MediaShelfContextConfig {\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<MediaShelfSemanticName, string>>\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  secondaryButtonFun?: ButtonFunctionType\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  primaryButtonFun?: ButtonFunctionType\n  /** \u6587\u6848\u914D\u7F6E */\n  copy: CopyConfig\n}\n\n/**\n * MediaShelf Context\n */\nconst MediaShelfContext = React.createContext<MediaShelfContextValue | null>(null)\n\n/**\n * \u4F7F\u7528 MediaShelf Context \u7684 Hook\n */\nexport const useMediaShelfContext = () => {\n  const context = React.useContext(MediaShelfContext)\n  if (!context) {\n    throw new Error('useMediaShelfContext must be used within an MediaShelfProvider')\n  }\n  return context\n}\n\n/**\n * \u57FA\u7840\u4EA7\u54C1\u6570\u636E\u63A5\u53E3\uFF08\u6765\u81EA\u5916\u90E8\u6570\u636E\u6E90\uFF09\n */\nexport interface BaseProductData {\n  sku: string\n  name: string\n  image: string\n  value: string\n  handle: string\n  shopify_id: string\n  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_link?: string\n}\n\n/**\n * Shopify \u53D8\u4F53\u6570\u636E\u63A5\u53E3\n */\nexport interface VariantData {\n  /**\n   * \u4EA7\u54C1\u63CF\u8FF0\n   */\n  description?: string\n  /**\n   * \u53D8\u4F53id\n   */\n  variantId: string\n\n  /**\n   * \u4EA7\u54C1\u94FE\u63A5, \u70B9\u51FB\u56FE\u7247\u7684\u65F6\u5019\u8DF3\u8F6C\u5230\u8BE5\u94FE\u63A5\n   */\n  listingLink: string\n  /**\n   * \u539F\u4EF7\n   */\n  originalPrice: string\n  /**\n   * \u73B0\u4EF7\n   */\n  price: string\n  /**\n   * \u4EF7\u683C\u4E0A\u9762\u5C55\u793A\u7684\u6807\u7B7E\u6587\u672C\n   */\n  priceLabel?: string\n  /**\n   * \u603B\u5E93\u5B58\n   */\n  totalInventory: number\n  /**\n   * \u53EF\u7528\u5E93\u5B58\u6570\u91CF\n   */\n  quantityAvailable: number\n  /**\n   * \u662F\u5426\u53EF\u552E\n   */\n  availableForSale: boolean\n\n  /**\n   * tags \u5217\u8868(\u4F1A\u5458\u4EF7\uFF0C\u6298\u6263\uFF0Cnew, hot\u7B49\u6807\u7B7E\u4FE1\u606F)\n   */\n  tags: Array<{\n    label: string\n    variant: BadgeProps['variant']\n    promotionalType?: BadgeProps['promotionalType']\n  }>\n  /**\n   * \u901A\u7528\u6298\u6263\u6570\u636E\uFF0C\u5305\u62EC\u6298\u6263title, \u7C7B\u578B\u548C\u503C\n   */\n  coupon: any\n}\n\n/**\n * \u5B8C\u6574\u7684\u4EA7\u54C1\u5361\u7247\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductCardData extends BaseProductData, VariantData {}\n\n/**\n * \u4EA7\u54C1\u5206\u7EC4Tab\u6570\u636E\u63A5\u53E3\n */\nexport interface ProductTab {\n  /** Tab ID */\n  id: string\n  /** Tab \u6807\u9898 */\n  tab: string\n  /** \u8BE5\u5206\u7EC4\u4E0B\u7684\u4EA7\u54C1\u6570\u636E */\n  data: ProductCardData[]\n}\n\n/**\n * MediaShelf \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MediaShelfData {\n  theme?: 'light' | 'dark'\n  /** \u7EC4\u4EF6\u6807\u9898 */\n  title?: string\n  /** \u7EC4\u4EF6\u63CF\u8FF0 */\n  description?: string\n  /** \u5206\u7EC4\u4EA7\u54C1Tab\u5217\u8868 */\n  productsTab?: ProductTab[]\n  /** \u662F\u5426\u663E\u793A Tab\uFF08\u9ED8\u8BA4\uFF1Atrue\uFF09 */\n  isShowTab?: boolean\n  /** \u4E86\u89E3\u66F4\u591A\u6309\u94AE\u6587\u672C */\n  secondaryButtonText?: string\n  secondaryButtonFun: ButtonFunctionType\n  /** \u7ACB\u5373\u8D2D\u4E70\u6309\u94AE\u6587\u672C */\n  primaryButtonText?: string\n  primaryButtonFun: ButtonFunctionType\n  /** Code Channel \u914D\u7F6E - \u6298\u6263\u524D\u7F00 */\n  codeChannel?: CodeChannelConfig\n  /** \u662F\u5426\u5C55\u793A\u4F1A\u5458\u4EF7\u683C */\n  showMemberPrice?: boolean\n  /** \u662F\u5426\u5C55\u793A\u6298\u6263\u6807\u7B7E */\n  showDiscount?: boolean\n  /** \u662F\u5426\u5C55\u793A\u6807\u7B7E\u7CFB\u7EDF */\n  showTags?: boolean\n  /** \u5E93\u5B58\u5C55\u793A\u6A21\u5F0F */\n  stockDisplayMode?: StockDisplayMode\n  /** \u5E93\u5B58\u9608\u503C\uFF08\u5F53\u6A21\u5F0F\u4E3A below-quantity \u6216 below-percentage \u65F6\u4F7F\u7528\uFF09 */\n  stockThreshold?: number\n  /**\n   * \u5E93\u5B58\u6587\u672C\u6A21\u677F\uFF0C\u652F\u6301 {count} \u5360\u4F4D\u7B26\n   */\n  stockDisplayText?: string\n  /** \u662F\u5426\u5C55\u793A\u539F\u4EF7\uFF08\u5220\u9664\u7EBF\u4EF7\u683C\uFF09 */\n  showOriginalPrice?: boolean\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: CopyConfig\n  /**\n   * \u4EA7\u54C1\u5217\u8868\uFF08\u5F53\u4E0D\u4F7F\u7528 Tab \u5206\u7EC4\u65F6\u53EF\u76F4\u63A5\u4F20\u5165\u4EA7\u54C1\u5217\u8868\uFF09\n   */\n  productsCard: ProductCardData[]\n}\n\nexport interface MediaShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MediaShelfData\n  /** \u70B9\u51FB\u4E86\u89E3\u66F4\u591A\u56DE\u8C03 */\n  onLearnMore?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u7ACB\u5373\u8D2D\u4E70\u56DE\u8C03 */\n  onShopNow?: (product: ProductCardData) => void\n  /** \u70B9\u51FB\u52A0\u5165\u8D2D\u7269\u8F66\u56DE\u8C03 */\n  onAddToCart?: (product: ProductCardData) => void\n  /** \u8BED\u4E49\u5316\u7C7B\u540D */\n  classNames?: Partial<Record<MediaShelfSemanticName, string>>\n}\n\n/**\n * \u4EA7\u54C1\u5361\u7247\u7EC4\u4EF6\n */\nconst ProductCard = React.forwardRef<\n  HTMLDivElement,\n  {\n    product: ProductCardData\n    className?: string\n  }\n>(({ product, className }, ref) => {\n  let {\n    stockDisplayMode,\n    stockThreshold,\n    onLearnMore,\n    onShopNow,\n    onAddToCart,\n    classNames,\n    secondaryButtonText,\n    primaryButtonText,\n    secondaryButtonFun,\n    primaryButtonFun,\n    showOriginalPrice,\n    copy,\n  } = useMediaShelfContext()\n\n  const stockPercentage = React.useMemo(() => {\n    const result = ((product?.quantityAvailable ?? 0) / (product?.totalInventory ?? 1)) * 100\n    if (result === 0 && product.availableForSale) {\n      // \u53EF\u552E\u4F46\u5E93\u5B58\u4E3A0\u65F6\uFF0C\u968F\u673A\u663E\u793A1-5%\u7684\u5E93\u5B58\u8FDB\u5EA6\n      return Math.round(Math.random() * 5 + 1)\n    }\n    return result\n  }, [product?.availableForSale, product?.quantityAvailable, product?.totalInventory])\n\n  // \u6839\u636E\u6309\u94AE\u529F\u80FD\u7C7B\u578B\u8C03\u7528\u76F8\u5E94\u7684\u56DE\u8C03\u51FD\u6570\n  const handleButtonClick = (buttonFun?: ButtonFunctionType) => {\n    if (!buttonFun) return\n\n    switch (buttonFun) {\n      case 'buyNow':\n        onShopNow?.(product)\n        break\n      case 'addCart':\n        onAddToCart?.(product)\n        break\n      case 'learnMore':\n        onLearnMore?.(product)\n        break\n      default:\n        break\n    }\n  }\n\n  return (\n    <Card\n      ref={ref}\n      className={cn(\n        'desktop:min-h-[512px] lg-desktop:min-h-[534px] flex min-h-[458px] min-w-[296px] flex-col overflow-hidden',\n        product.custom_link ? 'cursor-pointer' : '',\n        className,\n        classNames?.productCard\n      )}\n    >\n      {/* \u56FE\u7247\u533A\u57DF */}\n      <div className=\"desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden\">\n        {/* \u80CC\u666F\u56FE\u7247 */}\n        <div className=\"absolute inset-0 \">\n          <a href={product.custom_link || product.listingLink}>\n            <Picture\n              source={product.custom_image || product.image}\n              alt={product.name}\n              className={cn('h-full', classNames?.productCardImage)}\n              imgClassName=\"h-full object-cover object-center\"\n            />\n          </a>\n        </div>\n\n        {/* \u6807\u7B7E\u533A\u57DF */}\n        <div className=\"lg-desktop:h-[28px] absolute left-4 top-4 h-[24px]\">\n          {product.tags?.map((tag, index) => (\n            <Badge\n              key={index}\n              size=\"sm\"\n              variant={(tag.variant as any) || 'outline'}\n              className={cn('mr-1')}\n              promotionalType={tag.promotionalType}\n            >\n              {tag.label}\n            </Badge>\n          ))}\n        </div>\n      </div>\n\n      {/* \u5185\u5BB9\u533A\u57DF */}\n      <CardContent className=\"desktop:p-6 flex h-[calc(100%-240px)] grow flex-col justify-between p-4\">\n        {/* \u4EA7\u54C1\u6807\u9898\u548C\u526F\u6807\u9898 */}\n        <div className=\"mb-6 flex-1\">\n          <Heading\n            as=\"h3\"\n            size={2}\n            className={cn('text-info-primary mb-1 line-clamp-2 font-semibold tracking-tight', classNames?.productTitle)}\n          >\n            {product.custom_name || product.name}\n          </Heading>\n          {(product.custom_description || product?.description) && (\n            <Text\n              size={2}\n              className={cn('text-info-primary line-clamp-1 font-semibold', classNames?.productDescription)}\n              html={product.custom_description || product.description}\n            />\n          )}\n        </div>\n\n        {/* \u5E93\u5B58\u4FE1\u606F */}\n        {shouldShowStock(\n          stockDisplayMode,\n          stockThreshold,\n          product?.quantityAvailable ?? 0,\n          product?.totalInventory ?? 0\n        ) && (\n          <div\n            data-total={product?.totalInventory ?? 0}\n            data-available={product?.quantityAvailable ?? 0}\n            className=\"space-y-2\"\n          >\n            <Progress\n              value={stockPercentage}\n              max={100}\n              min={0}\n              size=\"base\"\n              variant=\"default\"\n              aria-label=\"stock progress\"\n              classNames={{\n                progressBar: 'transition-all duration-300 ease-in-out',\n              }}\n            />\n            <Text size={3} className=\"text-info-tertiary text-[14px]\">\n              {copy?.stockDisplayText?.replace('{count}', String(product?.quantityAvailable))}\n            </Text>\n          </div>\n        )}\n\n        {/** \u4EF7\u683C\u6807\u7B7E */}\n        <>\n          {product?.priceLabel && product?.availableForSale && (\n            <Text size={4} className={cn('text-marketing-1 mt-2', classNames?.productPriceLabel)}>\n              {product.priceLabel}\n            </Text>\n          )}\n        </>\n        {/* \u4EF7\u683C\u533A\u57DF */}\n        <div className={cn('mb-6', classNames?.productPrice)}>\n          <div className=\"flex items-baseline gap-2\">\n            {product.availableForSale ? (\n              <>\n                <Heading size={2} className=\"text-info-primary\" as=\"h6\">\n                  {product.price}\n                </Heading>\n                {showOriginalPrice && product.originalPrice && (\n                  <Heading size={2} className=\"text-info-tertiary line-through\" as=\"h6\">\n                    {product.originalPrice}\n                  </Heading>\n                )}\n              </>\n            ) : (\n              <Heading size={2} className=\"text-info-tertiary\">\n                {copy?.outOfStockLabel ?? 'Sold Out'}\n              </Heading>\n            )}\n          </div>\n        </div>\n\n        {/* \u6309\u94AE\u533A\u57DF */}\n        <div className={cn('tablet:gap-3 mb-4 flex gap-2', classNames?.buttonGroup)}>\n          {secondaryButtonText && (\n            <Button\n              variant=\"secondary\"\n              size=\"base\"\n              className=\"\"\n              onClick={e => handleButtonClick(secondaryButtonFun)}\n              disabled={!product.availableForSale && secondaryButtonFun !== 'learnMore'}\n            >\n              {secondaryButtonText}\n            </Button>\n          )}\n          {primaryButtonText && (\n            <Button\n              variant=\"primary\"\n              size=\"base\"\n              className=\"\"\n              onClick={e => handleButtonClick(primaryButtonFun)}\n              disabled={!product.availableForSale && primaryButtonFun !== 'learnMore'}\n            >\n              {primaryButtonText}\n            </Button>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  )\n})\nProductCard.displayName = 'ProductCard'\n\n/**\n * \u4EA7\u54C1\u5217\u8868\u7EC4\u4EF6 - \u4F7F\u7528 Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40\n */\nconst ProductsList = React.forwardRef<\n  HTMLDivElement,\n  {\n    products: ProductCardData[]\n    className?: string\n  }\n>(({ products, className }, ref) => {\n  const { copy } = useMediaShelfContext()\n  // Swiper \u5BFC\u822A\u72B6\u6001\n  const [swiperState, setSwiperState] = React.useState({\n    isBeginning: true,\n    isEnd: false,\n  })\n\n  if (products?.length === 0) {\n    return null\n  }\n\n  return (\n    <div ref={ref} className={className}>\n      {/* Swiper \u6A2A\u5411\u6ED1\u52A8\u5E03\u5C40 */}\n      <div className=\"relative\">\n        <Swiper\n          modules={[Navigation]}\n          spaceBetween={16}\n          slidesPerView=\"auto\"\n          autoHeight={true}\n          navigation={{\n            nextEl: '.swiper-button-next-custom',\n            prevEl: '.swiper-button-prev-custom',\n          }}\n          onSwiper={swiper => {\n            setSwiperState({\n              isBeginning: swiper.isBeginning,\n              isEnd: swiper.isEnd,\n            })\n          }}\n          onSlideChange={swiper => {\n            setSwiperState({\n              isBeginning: swiper.isBeginning,\n              isEnd: swiper.isEnd,\n            })\n          }}\n          className=\"!overflow-visible\"\n          breakpoints={{\n            0: {\n              spaceBetween: 12,\n              slidesPerView: 1,\n            },\n            768: {\n              spaceBetween: 12,\n              slidesPerView: products.length <= 2 ? 2 : 2.3,\n            },\n            1024: {\n              spaceBetween: 16,\n              slidesPerView: Math.min(3, products.length),\n            },\n          }}\n        >\n          {products.map((product, index) => (\n            <SwiperSlide\n              key={product.shopify_id + '-' + product.sku || index}\n              className=\"tablet:h-[428px] desktop:!h-[464px]  lg-desktop:!h-[561px] tablet:!max-w-[50%] h-[428px] overflow-hidden\"\n            >\n              <ProductCard product={product} className=\"box-border w-full max-w-full\" />\n            </SwiperSlide>\n          ))}\n        </Swiper>\n\n        {/* \u81EA\u5B9A\u4E49\u5BFC\u822A\u6309\u94AE */}\n        <button\n          className={cn('swiper-button-prev-custom tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2', {\n            'tablet:hidden': products.length <= 2,\n          })}\n          aria-label={copy?.previousSlideLabel}\n          disabled={swiperState.isBeginning}\n        >\n          <PrevIcon disabled={swiperState.isBeginning} />\n        </button>\n        <button\n          className={cn(\n            'swiper-button-next-custom tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2',\n            {\n              'tablet:hidden': products.length <= 2,\n            }\n          )}\n          aria-label={copy?.nextSlideLabel}\n          disabled={swiperState.isEnd}\n        >\n          <NextIcon disabled={swiperState.isEnd} />\n        </button>\n      </div>\n    </div>\n  )\n})\n\nProductsList.displayName = 'ProductsList'\n\n/**\n * MediaShelf - \u5A92\u4F53\u8D27\u67B6\n *\n * @description \u80FD\u591F\u5B9E\u65F6\u663E\u793A\u5546\u54C1\u5E93\u5B58\u4FE1\u606F\u548C\u4F1A\u5458\u4EF7\u7684\u8D27\u67B6\uFF0C\u652F\u6301\u54CD\u5E94\u5F0F\u5E03\u5C40\u548C\u591A\u79CD\u914D\u7F6E\u9009\u9879\n */\nconst MediaShelf = React.forwardRef<HTMLDivElement, MediaShelfProps>(\n  ({ className, data, onLearnMore, onShopNow, onAddToCart, classNames, ...props }, ref) => {\n    // \u4ECE data \u4E2D\u89E3\u6784\u914D\u7F6E\u9879\uFF0C\u5E76\u8BBE\u7F6E\u9ED8\u8BA4\u503C\n    const {\n      theme = 'light',\n      codeChannel,\n      showMemberPrice = true,\n      showDiscount = true,\n      showTags = true,\n      stockDisplayMode,\n      stockThreshold,\n      showOriginalPrice = true,\n      secondaryButtonText,\n      primaryButtonText,\n      secondaryButtonFun,\n      primaryButtonFun,\n      isShowTab = true,\n      copy,\n    } = data\n\n    // \u6784\u5EFA copy \u914D\u7F6E\uFF0C\u4F7F\u7528\u4F20\u5165\u7684 copy \u914D\u7F6E\n    const finalCopy: CopyConfig = copy || {}\n\n    // \u6784\u5EFA Context \u503C\n    const contextValue: MediaShelfContextValue = {\n      codeChannel,\n      showMemberPrice,\n      showDiscount,\n      showTags,\n      stockDisplayMode,\n      stockThreshold,\n      showOriginalPrice,\n      onLearnMore,\n      onShopNow,\n      onAddToCart,\n      classNames,\n      secondaryButtonText,\n      secondaryButtonFun,\n      primaryButtonText,\n      primaryButtonFun,\n      copy: finalCopy,\n    }\n\n    // \u83B7\u53D6\u8981\u663E\u793A\u7684\u4EA7\u54C1\u6570\u636E\n    const hasTabData = data.productsTab && data.productsTab.length > 0\n    const shouldShowTab = isShowTab && hasTabData\n\n    return (\n      <MediaShelfContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn(\n            'w-full',\n            {\n              'aiui-dark': theme === 'dark',\n            },\n            className,\n            classNames?.root\n          )}\n          {...props}\n        >\n          {/* \u6807\u9898\u533A\u57DF */}\n          {data.title && (\n            <Heading as=\"h2\" html={data.title} size={4} className={cn('text-info-primary mb-4', classNames?.title)} />\n          )}\n          {data.description && (\n            <Text\n              size={3}\n              as=\"p\"\n              html={data.description}\n              className={cn('text-info-primary mb-6', classNames?.description)}\n            />\n          )}\n\n          {/* \u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n\n          <Tabs defaultValue={data.productsTab?.[0]?.id} className=\"w-full\">\n            {shouldShowTab && (\n              <TabsList className=\"mb-6\">\n                {data.productsTab?.map(tab => (\n                  <TabsTrigger key={'tab-' + tab.id} value={tab.id}>\n                    {tab.tab}\n                  </TabsTrigger>\n                ))}\n              </TabsList>\n            )}\n            {shouldShowTab ? (\n              data.productsTab?.map(tab => (\n                <TabsContent key={'tab-content-' + tab.id} value={tab.id}>\n                  <ProductsList products={tab.data} />\n                </TabsContent>\n              ))\n            ) : (\n              <ProductsList products={data.productsCard} />\n            )}\n          </Tabs>\n        </div>\n      </MediaShelfContext.Provider>\n    )\n  }\n)\n\nMediaShelf.displayName = 'MediaShelf'\nexport default MediaShelf\nexport { ProductCard }\n"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "React", "cn", "Button", "Badge", "Card", "CardContent", "Picture", "Text", "Heading", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Progress", "Swiper", "SwiperSlide", "Navigation", "PrevIcon", "disabled", "NextIcon", "shouldShowStock", "stockDisplayMode", "stockThreshold", "quantityAvailable", "totalInventory", "MediaShelfContext", "useMediaShelfContext", "context", "ProductCard", "product", "className", "ref", "onLearnMore", "onShopNow", "onAddToCart", "classNames", "secondaryButtonText", "primaryButtonText", "secondaryButtonFun", "primaryButtonFun", "showOriginalPrice", "copy", "stockPercentage", "result", "handleButtonClick", "buttonFun", "tag", "index", "e", "ProductsList", "products", "swiperState", "setSwiperState", "swiper", "MediaShelf", "data", "props", "theme", "codeChannel", "showMemberPrice", "showDiscount", "showTags", "isShowTab", "contextValue", "hasTabData", "shouldShowTab", "tab", "MediaShelf_default"]
+}

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

@@ -0,0 +1,22 @@
+/**
+ * 按钮功能类型
+ */
+export type ButtonFunctionType = 'buyNow' | 'addCart' | 'learnMore';
+/**
+ * MediaShelf 文案配置接口
+ * 注意：secondaryButtonText 和 shopNowText 作为高频属性保持在 data 的直接属性中
+ */
+export interface CopyConfig {
+    /** Plus会员价格标签文本 */
+    plusMemberPriceLabel?: string;
+    /** 会员价格标签文本 */
+    memberPriceLabel?: string;
+    /** 库存显示文案模板，支持 {count} 占位符 */
+    stockDisplayText?: string;
+    /** 上一页滑动按钮的无障碍标签（MediaShelf 专用） */
+    previousSlideLabel?: string;
+    /** 下一页滑动按钮的无障碍标签（MediaShelf 专用） */
+    nextSlideLabel?: string;
+    discountLabel?: string;
+    outOfStockLabel?: string;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,88 @@
+import * as React from 'react';
+export type MiniCartSemanticName = 'root' | 'content' | 'productImage' | 'productTag' | 'cartInfo' | 'cartTitle' | 'cartDescription' | 'priceSection' | 'totalPrice' | 'originalPrice' | 'saveAmount' | 'actionButton' | 'itemsGrid' | 'itemGridContainer' | 'gridItem' | 'gridItemOverlay' | 'expandButton' | 'congratsMessage';
+/**
+ * 文案配置
+ */
+export interface MiniCartCopy {
+    emptyCart: string;
+    description: string;
+    total: string;
+    itemsInCart: string;
+    totalWithCoupon: string;
+    clickToView: string;
+    buyNowText: string;
+}
+/**
+ * MiniCart 业务组件数据接口
+ */
+export interface MiniCartData {
+    /** 文案配置 */
+    copy?: MiniCartCopy;
+    theme?: 'light' | 'dark';
+    /** 地区代码，用于价格格式化 */
+    locale?: string;
+}
+type Cart = {
+    id: string;
+    checkoutUrl: string;
+    lineItems: Array<{
+        id: string;
+        quantity: number;
+        merchandise: {
+            id: string;
+            sku: string;
+            image: {
+                url: string;
+                altText: string | null;
+            };
+        };
+    }>;
+    cost: {
+        totalAmount: {
+            amount: string;
+            currencyCode: string;
+        };
+        subtotalAmount?: {
+            amount: string;
+            currencyCode: string;
+        };
+    };
+};
+export interface MiniCartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: MiniCartData;
+    /**
+     * 各部分的自定义样式类名
+     */
+    classNames?: Partial<Record<MiniCartSemanticName, string>>;
+    /**
+     * 产品信息（用于主要展示的产品）
+     */
+    cart: Cart;
+    /**
+     * 删除商品项的回调函数
+     * @param id 商品 ID
+     * @param cart 购物车数据
+     * @returns
+     */
+    onRemoveItem?: (id: string, cart: Cart) => void;
+    /**
+     * 点击结算按钮的回调函数
+     * @param cart
+     * @returns
+     */
+    onCheckout?: (cart: Cart) => void;
+    /**
+     * 点击click to view的回调函数
+     * @param cart
+     * @returns
+     */
+    onClickToView?: (cart: Cart) => void;
+}
+/**
+ * MiniCart - 迷你购物车
+ *
+ * @description 迷你购物车（Mini Cart）是一个常见的电商UI组件，通常在用户浏览商品时以底部悬浮的形式出现，允许用户快速查看、编辑购物车内容而不离开当前页面，同时可以承载满赠，满减等活动。
+ */
+declare const MiniCart: React.ForwardRefExoticComponent<MiniCartProps & React.RefAttributes<HTMLDivElement>>;
+export default MiniCart;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import*as v from"react";import{cn as e}from"../../helpers/index.js";import{formatPrice as C}from"../../helpers/priceFormatting.js";import{Button as Z}from"../../components/index.js";import{Text as c}from"../../components/index.js";import{Heading as w}from"../../components/index.js";const A=v.forwardRef(({className:B,classNames:o={},data:P,cart:a,onRemoveItem:y,onCheckout:H,onClickToView:j,...S},D)=>{const{copy:l,theme:k="dark",locale:u="us"}=P||{},E=l?.emptyCart||"Your Cart is Empty",N=l?.description||'Add one more to get <span style="color: var(--brand-color)">50% <span> off',V=l?.itemsInCart||"You have selected ${count} items",R=l?.total||"Total ${total}",J=l?.totalWithCoupon||"total: ${total} (${subtotal})",W=l?.clickToView||"Click to view cart",$=l?.buyNowText||"Buy Now",s=a?.lineItems||[],T=s.reduce((n,i)=>n+(i?.quantity||0),0),G=T===0,p=parseFloat(a?.cost?.subtotalAmount?.amount||"0")||0,d=parseFloat(a?.cost?.totalAmount?.amount||"0")||0,g=a?.cost?.totalAmount?.currencyCode||a?.cost?.subtotalAmount?.currencyCode||"USD",M=p>d?p-d:0,f=v.useRef(null),[x,q]=v.useState(!1),L=n=>{if(f.current){const i=f.current,b=100;i.scrollBy({left:n==="right"?b:-b,behavior:"smooth"})}},h=({className:n})=>t("svg",{className:n,width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M6 4L10 8L6 12",stroke:"currentColor",strokeWidth:"1.33",strokeLinecap:"round",strokeLinejoin:"round"})}),U=({className:n})=>t("svg",{className:n,width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5",stroke:"currentColor",strokeWidth:"1.25",strokeLinecap:"round",strokeLinejoin:"round"})}),F=n=>s.length?r("div",{className:e("bg-muted flex gap-1 rounded-lg p-1",o?.itemsGrid),children:[s.length>0&&t("button",{onClick:()=>L("left"),className:e("border-border laptop:flex hover:bg-muted-foreground/10 laptop:flex hidden size-12 shrink-0 items-center justify-center rounded-lg transition-colors",o?.expandButton),"aria-label":"Scroll left to see more items",children:t(h,{className:"size-4 rotate-180"})}),t("div",{ref:f,className:e("scrollbar-hide laptop:gap-1 laptop:max-w-[240px] flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",o?.itemGridContainer),children:s.filter(i=>i&&i.id).map(i=>{const I=(i.merchandise||{}).image||{},z=I.url,O=I.altText||"Product image";return r("div",{className:e("laptop:size-12 group relative size-16 shrink-0 rounded-lg bg-white",o?.gridItem),children:[z&&t("img",{src:z,alt:O,className:"size-full rounded-lg object-cover",onError:Y=>{Y.currentTarget.style.display="none"}}),t("span",{role:"button",onClick:()=>y?.(i.id,a),className:"laptop:hidden absolute right-[2px] top-[2px]","aria-label":"delete",children:r("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t("rect",{x:"1.33301",y:"1.33301",width:"13.3333",height:"13.3333",rx:"6.66667",fill:"white"}),t("path",{d:"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z",fill:"#767880"})]})}),i.quantity>1&&t("div",{className:"bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex  size-4 items-center justify-center rounded-full",children:t(c,{className:"text-sm",children:i.quantity})}),t("div",{className:e("laptop:flex absolute inset-0 hidden items-center justify-center rounded-lg bg-black/60 opacity-0 transition-opacity group-hover:opacity-100",o?.gridItemOverlay),children:t("button",{onClick:()=>y?.(i.id,a),className:"flex items-center justify-center rounded-full bg-white/20 p-1 transition-colors hover:bg-white/30","aria-label":"Remove item",children:t(U,{className:"laptop:size-3 size-4 text-white"})})})]},i.id)})}),s.length>0&&t("button",{onClick:()=>L("right"),className:e("border-border laptop:flex hover:bg-muted-foreground/10 laptop:flex hidden size-12 shrink-0 items-center justify-center rounded-lg transition-colors",o?.expandButton),"aria-label":"Scroll right to see more items",children:t(h,{className:"size-4"})})]}):null,m=!G&&s.length>0;return t("div",{ref:D,className:e("bg-background text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]","flex-col items-stretch gap-3","laptop:flex-row laptop:items-center laptop:justify-around",m?"laptop:items-start laptop:gap-4":"laptop:items-center laptop:gap-4","tablet:gap-6 laptop:gap-8",B,o?.root,{"aiui-dark":k==="dark"}),...S,children:r("div",{className:e("laptop:flex-row flex w-full flex-col gap-4","laptop:flex-1 laptop:items-start","tablet:gap-6 laptop:gap-8",o?.content),children:[r("div",{className:"laptop:flex-1 flex w-full flex-col",children:[t("div",{className:e("tablet:gap-2 flex flex-col gap-1",o?.cartInfo),children:m?r("div",{className:"flex w-full items-center gap-2",children:[t(w,{size:2,as:"h3",className:e("",o?.cartTitle),children:V.replace("${count}",(T||0).toString())}),r("button",{onClick:()=>{window.innerWidth<1025?q(!x):j?.(a)},className:e("flex items-center gap-1 text-base font-semibold",o?.expandButton),children:[t(w,{as:"h6",size:1,className:"laptop:block hidden text-base",children:W}),t(h,{className:e("size-4 transition-transform",x?"laptop:rotate-0 -rotate-90":"laptop:rotate-0 rotate-90")})]})]}):t(w,{as:"h3",className:e("tablet:text-2xl text-xl font-semibold",o?.cartTitle),children:E})}),t("div",{children:N&&t(c,{className:e("mini-cart-description",o?.cartDescription),html:N})})]}),m&&t("div",{className:e("laptop:block",x?"block":"hidden"),children:F(k)}),m&&t("hr",{className:"laptop:hidden border-lines w-full border-t"}),r("div",{className:e("tablet:gap-6 laptop:justify-end flex flex-row items-center justify-between gap-4",o?.priceSection),children:[r("div",{className:"flex flex-col items-end gap-1",children:[r("div",{className:"flex items-center gap-2",children:[t(c,{className:e("tablet:text-2xl whitespace-nowrap text-xl font-semibold",o?.totalPrice),children:R.replace("${total}",C({amount:d,currencyCode:g,locale:u})||"")}),(p||0)>(d||0)&&t(c,{className:e("tablet:text-2xl whitespace-nowrap text-xl font-semibold line-through",o?.originalPrice),children:C({amount:p,currencyCode:g,locale:u})||""})]}),(M||0)>0&&r(c,{className:e("w-full text-right text-xl font-semibold",o?.saveAmount),children:["Save ",C({amount:M,currencyCode:g,locale:u})||""]})]}),t(Z,{onClick:()=>H?.(a),className:e("whitespace-nowrap",o?.actionButton),children:$})]})]})})});A.displayName="MiniCart";var et=A;export{et as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/MiniCart/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { formatPrice } from '../../helpers/priceFormatting.js'\nimport { Button } from '../../components/index.js'\nimport { Text } from '../../components/index.js'\nimport { Heading } from '../../components/index.js'\nimport type { Theme } from '../../types/props.js'\n\nexport type MiniCartSemanticName =\n  | 'root'\n  | 'content'\n  | 'productImage'\n  | 'productTag'\n  | 'cartInfo'\n  | 'cartTitle'\n  | 'cartDescription'\n  | 'priceSection'\n  | 'totalPrice'\n  | 'originalPrice'\n  | 'saveAmount'\n  | 'actionButton'\n  | 'itemsGrid'\n  | 'itemGridContainer'\n  | 'gridItem'\n  | 'gridItemOverlay'\n  | 'expandButton'\n  | 'congratsMessage'\n\n/**\n * \u6587\u6848\u914D\u7F6E\n */\nexport interface MiniCartCopy {\n  emptyCart: string\n  description: string\n  total: string\n  itemsInCart: string\n  totalWithCoupon: string\n  clickToView: string\n  buyNowText: string\n}\n\n/**\n * MiniCart \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface MiniCartData {\n  /** \u6587\u6848\u914D\u7F6E */\n  copy?: MiniCartCopy\n  theme?: 'light' | 'dark'\n  /** \u5730\u533A\u4EE3\u7801\uFF0C\u7528\u4E8E\u4EF7\u683C\u683C\u5F0F\u5316 */\n  locale?: string\n}\n\ntype Cart = {\n  id: string\n  checkoutUrl: string\n  lineItems: Array<{\n    id: string\n    quantity: number\n    merchandise: {\n      id: string\n      sku: string\n      image: {\n        url: string\n        altText: string | null\n      }\n    }\n  }>\n  cost: {\n    totalAmount: {\n      amount: string\n      currencyCode: string\n    }\n    subtotalAmount?: {\n      amount: string\n      currencyCode: string\n    }\n  }\n}\n\nexport interface MiniCartProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: MiniCartData\n  /**\n   * \u5404\u90E8\u5206\u7684\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u540D\n   */\n  classNames?: Partial<Record<MiniCartSemanticName, string>>\n  /**\n   * \u4EA7\u54C1\u4FE1\u606F\uFF08\u7528\u4E8E\u4E3B\u8981\u5C55\u793A\u7684\u4EA7\u54C1\uFF09\n   */\n  cart: Cart\n  /**\n   * \u5220\u9664\u5546\u54C1\u9879\u7684\u56DE\u8C03\u51FD\u6570\n   * @param id \u5546\u54C1 ID\n   * @param cart \u8D2D\u7269\u8F66\u6570\u636E\n   * @returns\n   */\n  onRemoveItem?: (id: string, cart: Cart) => void\n  /**\n   * \u70B9\u51FB\u7ED3\u7B97\u6309\u94AE\u7684\u56DE\u8C03\u51FD\u6570\n   * @param cart\n   * @returns\n   */\n  onCheckout?: (cart: Cart) => void\n  /**\n   * \u70B9\u51FBclick to view\u7684\u56DE\u8C03\u51FD\u6570\n   * @param cart\n   * @returns\n   */\n  onClickToView?: (cart: Cart) => void\n}\n\n/**\n * MiniCart - \u8FF7\u4F60\u8D2D\u7269\u8F66\n *\n * @description \u8FF7\u4F60\u8D2D\u7269\u8F66\uFF08Mini Cart\uFF09\u662F\u4E00\u4E2A\u5E38\u89C1\u7684\u7535\u5546UI\u7EC4\u4EF6\uFF0C\u901A\u5E38\u5728\u7528\u6237\u6D4F\u89C8\u5546\u54C1\u65F6\u4EE5\u5E95\u90E8\u60AC\u6D6E\u7684\u5F62\u5F0F\u51FA\u73B0\uFF0C\u5141\u8BB8\u7528\u6237\u5FEB\u901F\u67E5\u770B\u3001\u7F16\u8F91\u8D2D\u7269\u8F66\u5185\u5BB9\u800C\u4E0D\u79BB\u5F00\u5F53\u524D\u9875\u9762\uFF0C\u540C\u65F6\u53EF\u4EE5\u627F\u8F7D\u6EE1\u8D60\uFF0C\u6EE1\u51CF\u7B49\u6D3B\u52A8\u3002\n */\nconst MiniCart = React.forwardRef<HTMLDivElement, MiniCartProps>(\n  ({ className, classNames = {}, data, cart, onRemoveItem, onCheckout, onClickToView, ...props }, ref) => {\n    const { copy, theme = 'dark', locale = 'us' } = data || {}\n\n    // \u6587\u6848\u914D\u7F6E\uFF0C\u5E26\u9ED8\u8BA4\u503C\n    const emptyCart = copy?.emptyCart || 'Your Cart is Empty'\n    const description =\n      copy?.description || 'Add one more to get <span style=\"color: var(--brand-color)\">50% <span> off'\n    const itemsInCart = copy?.itemsInCart || 'You have selected ${count} items'\n    const total = copy?.total || 'Total ${total}'\n    const totalWithCoupon = copy?.totalWithCoupon || 'total: ${total} (${subtotal})'\n    const clickToView = copy?.clickToView || 'Click to view cart'\n    const buyNowText = copy?.buyNowText || 'Buy Now'\n\n    // \u4ECECart\u5BF9\u8C61\u4E2D\u63D0\u53D6\u6570\u636E\uFF0C\u4F7F\u7528\u53EF\u9009\u94FE\u548C\u9ED8\u8BA4\u503C\n    const items = cart?.lineItems || []\n    const itemCount = items.reduce((total, item) => total + (item?.quantity || 0), 0)\n    const isEmpty = itemCount === 0\n\n    // \u8BA1\u7B97\u4EF7\u683C\u4FE1\u606F\uFF0C\u4F7F\u7528\u53EF\u9009\u94FE\n    const originalPrice = parseFloat(cart?.cost?.subtotalAmount?.amount || '0') || 0 // \u539F\u4EF7\n    const finalPrice = parseFloat(cart?.cost?.totalAmount?.amount || '0') || 0 // \u6700\u7EC8\u4EF7\u683C\n    const currency = cart?.cost?.totalAmount?.currencyCode || cart?.cost?.subtotalAmount?.currencyCode || 'USD'\n    const saveAmount = originalPrice > finalPrice ? originalPrice - finalPrice : 0\n\n    // \u6EDA\u52A8\u5BB9\u5668\u5F15\u7528\n    const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n\n    // \u79FB\u52A8\u7AEF\u4EA7\u54C1\u5C55\u5F00\u72B6\u6001\n    const [isProductsExpanded, setIsProductsExpanded] = React.useState(false)\n\n    // \u6C34\u5E73\u6EDA\u52A8\u51FD\u6570\n    const scrollHorizontally = (direction: 'left' | 'right') => {\n      if (scrollContainerRef.current) {\n        const container = scrollContainerRef.current\n        const scrollAmount = 100 // \u6BCF\u6B21\u6EDA\u52A8\u7684\u50CF\u7D20\u6570\uFF08\u8C03\u5C0F\u4E00\u4E9B\uFF09\n        container.scrollBy({ left: direction === 'right' ? scrollAmount : -scrollAmount, behavior: 'smooth' })\n      }\n    }\n\n    // \u7BAD\u5934\u56FE\u6807\u7EC4\u4EF6\n    const ArrowIcon = ({ className }: { className?: string }) => (\n      <svg\n        className={className}\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 4L10 8L6 12\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.33\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n\n    // \u5220\u9664\u56FE\u6807\u7EC4\u4EF6\n    const DeleteIcon = ({ className }: { className?: string }) => (\n      <svg\n        className={className}\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M2.5 5H17.5M8.33333 9.16667V14.1667M11.6667 9.16667V14.1667M3.33333 5L4.16667 16.6667C4.16667 17.1087 4.34226 17.5326 4.65482 17.8452C4.96738 18.1577 5.39131 18.3333 5.83333 18.3333H14.1667C14.6087 18.3333 15.0326 18.1577 15.3452 17.8452C15.6577 17.5326 15.8333 17.1087 15.8333 16.6667L16.6667 5M7.5 5V2.5C7.5 2.27899 7.5878 2.06702 7.74408 1.91074C7.90036 1.75446 8.11232 1.66667 8.33333 1.66667H11.6667C11.8877 1.66667 12.0996 1.75446 12.2559 1.91074C12.4122 2.06702 12.5 2.27899 12.5 2.5V5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.25\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    )\n\n    // Render items grid\n    const renderItemsGrid = (theme: Theme) => {\n      if (!items.length) return null\n\n      return (\n        <div className={cn('bg-muted flex gap-1 rounded-lg p-1', classNames?.itemsGrid)}>\n          {/* \u5DE6\u6EDA\u52A8\u6309\u94AE - \u684C\u9762\u7AEF\u663E\u793A */}\n          {items.length > 0 && (\n            <button\n              onClick={() => scrollHorizontally('left')}\n              className={cn(\n                'border-border laptop:flex hover:bg-muted-foreground/10 laptop:flex hidden size-12 shrink-0 items-center justify-center rounded-lg transition-colors',\n                classNames?.expandButton\n              )}\n              aria-label=\"Scroll left to see more items\"\n            >\n              <ArrowIcon className=\"size-4 rotate-180\" />\n            </button>\n          )}\n\n          <div\n            ref={scrollContainerRef}\n            className={cn(\n              'scrollbar-hide laptop:gap-1 laptop:max-w-[240px] flex w-full gap-1 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n              classNames?.itemGridContainer\n            )}\n          >\n            {items\n              .filter(line => line && line.id)\n              .map(line => {\n                const safeproduct = line.merchandise || {}\n                const safeImage = safeproduct.image || {}\n                const imageUrl = safeImage.url\n                const imageAlt = safeImage.altText || 'Product image'\n\n                return (\n                  <div\n                    key={line.id}\n                    className={cn(\n                      'laptop:size-12 group relative size-16 shrink-0 rounded-lg bg-white',\n                      classNames?.gridItem\n                    )}\n                  >\n                    {imageUrl && (\n                      <img\n                        src={imageUrl}\n                        alt={imageAlt}\n                        className=\"size-full rounded-lg object-cover\"\n                        onError={e => {\n                          e.currentTarget.style.display = 'none'\n                        }}\n                      />\n                    )}\n                    <span\n                      role=\"button\"\n                      onClick={() => onRemoveItem?.(line.id, cart)}\n                      className=\"laptop:hidden absolute right-[2px] top-[2px]\"\n                      aria-label=\"delete\"\n                    >\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <rect x=\"1.33301\" y=\"1.33301\" width=\"13.3333\" height=\"13.3333\" rx=\"6.66667\" fill=\"white\" />\n                        <path\n                          d=\"M5.37705 5.28896C5.57234 5.09402 5.88839 5.09442 6.08347 5.28965L8.08602 7.29358L10.0906 5.28896C10.2858 5.09402 10.6026 5.09395 10.7977 5.28896C10.9928 5.48418 10.9926 5.80078 10.7977 5.99607L8.79312 8.00069L10.7964 10.0053C10.9913 10.2007 10.9909 10.5179 10.7957 10.7131C10.6005 10.908 10.2844 10.9074 10.0893 10.7124L8.08602 8.7078L6.08347 10.7103C5.88821 10.9056 5.57155 10.9057 5.37636 10.7103C5.18148 10.515 5.18132 10.1984 5.37636 10.0032L7.37891 8.00069L5.37636 5.99676C5.18119 5.80143 5.18181 5.48423 5.37705 5.28896Z\"\n                          fill=\"#767880\"\n                        />\n                      </svg>\n                    </span>\n                    {line.quantity > 1 && (\n                      <div className=\"bg-brand-0 laptop:size-4 absolute bottom-0 right-0 flex  size-4 items-center justify-center rounded-full\">\n                        <Text className=\"text-sm\">{line.quantity}</Text>\n                      </div>\n                    )}\n\n                    <div\n                      className={cn(\n                        'laptop:flex absolute inset-0 hidden items-center justify-center rounded-lg bg-black/60 opacity-0 transition-opacity group-hover:opacity-100',\n                        classNames?.gridItemOverlay\n                      )}\n                    >\n                      <button\n                        onClick={() => onRemoveItem?.(line.id, cart)}\n                        className=\"flex items-center justify-center rounded-full bg-white/20 p-1 transition-colors hover:bg-white/30\"\n                        aria-label=\"Remove item\"\n                      >\n                        <DeleteIcon className=\"laptop:size-3 size-4 text-white\" />\n                      </button>\n                    </div>\n                  </div>\n                )\n              })}\n          </div>\n\n          {/* \u53F3\u6EDA\u52A8\u6309\u94AE - \u684C\u9762\u7AEF\u663E\u793A */}\n          {items.length > 0 && (\n            <button\n              onClick={() => scrollHorizontally('right')}\n              className={cn(\n                'border-border laptop:flex hover:bg-muted-foreground/10 laptop:flex hidden size-12 shrink-0 items-center justify-center rounded-lg transition-colors',\n                classNames?.expandButton\n              )}\n              aria-label=\"Scroll right to see more items\"\n            >\n              <ArrowIcon className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      )\n    }\n\n    // Check if cart has items\n    const hasItems = !isEmpty && items.length > 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'bg-background text-info-primary tablet:px-6 laptop:px-12 desktop:px-12 lg-desktop:px-[128px] laptop:py-[16px] flex w-full px-4 py-[12px]',\n          // \u79FB\u52A8\u7AEF\u5782\u76F4\u5E03\u5C40\uFF0C\u5927\u5C4F\u5E55\u6C34\u5E73\u5E03\u5C40\n          'flex-col items-stretch gap-3',\n          'laptop:flex-row laptop:items-center laptop:justify-around',\n          hasItems ? 'laptop:items-start laptop:gap-4' : 'laptop:items-center laptop:gap-4',\n          'tablet:gap-6 laptop:gap-8',\n          className,\n          classNames?.root,\n          {\n            'aiui-dark': theme === 'dark',\n          }\n        )}\n        {...props}\n      >\n        {/* \u79FB\u52A8\u7AEF\uFF1A\u5782\u76F4\u6392\u5217 | \u684C\u9762\u7AEF\uFF1A\u6C34\u5E73\u4E09\u5217\u5E03\u5C40 */}\n        <div\n          className={cn(\n            'laptop:flex-row flex w-full flex-col gap-4',\n            'laptop:flex-1 laptop:items-start',\n            'tablet:gap-6 laptop:gap-8',\n            classNames?.content\n          )}\n        >\n          {/* Center: Cart info and dynamic content */}\n          <div className=\"laptop:flex-1 flex w-full flex-col\">\n            {/* Cart title area */}\n            <div className={cn('tablet:gap-2 flex flex-col gap-1', classNames?.cartInfo)}>\n              {hasItems ? (\n                <div className=\"flex w-full items-center gap-2\">\n                  <Heading size={2} as=\"h3\" className={cn('', classNames?.cartTitle)}>\n                    {itemsInCart.replace('${count}', (itemCount || 0).toString())}\n                  </Heading>\n\n                  {/* Click to view link / Toggle products */}\n                  <button\n                    onClick={() => {\n                      // \u79FB\u52A8\u7AEF\uFF1A\u5207\u6362\u4EA7\u54C1\u5C55\u5F00\u72B6\u6001\uFF0C\u684C\u9762\u7AEF\uFF1A\u8C03\u7528\u539F\u56DE\u8C03\n                      const isMobile = window.innerWidth < 1025\n                      if (isMobile) {\n                        setIsProductsExpanded(!isProductsExpanded)\n                      } else {\n                        onClickToView?.(cart)\n                      }\n                    }}\n                    className={cn('flex items-center gap-1 text-base font-semibold', classNames?.expandButton)}\n                  >\n                    {/* \u684C\u9762\u7AEF\u663E\u793A\u6587\u5B57 + \u56FE\u6807\uFF0C\u79FB\u52A8\u7AEF\u53EA\u663E\u793A\u56FE\u6807 */}\n                    <Heading as=\"h6\" size={1} className=\"laptop:block hidden text-base\">\n                      {clickToView}\n                    </Heading>\n                    <ArrowIcon\n                      className={cn(\n                        'size-4 transition-transform',\n                        isProductsExpanded ? 'laptop:rotate-0 -rotate-90' : 'laptop:rotate-0 rotate-90'\n                      )}\n                    />\n                  </button>\n                </div>\n              ) : (\n                <Heading as=\"h3\" className={cn('tablet:text-2xl text-xl font-semibold', classNames?.cartTitle)}>\n                  {emptyCart}\n                </Heading>\n              )}\n            </div>\n            <div>\n              {description && (\n                <Text className={cn('mini-cart-description', classNames?.cartDescription)} html={description} />\n              )}\n            </div>\n          </div>\n\n          {/* Items grid (\u79FB\u52A8\u7AEF\uFF1A\u6839\u636E\u5C55\u5F00\u72B6\u6001\u663E\u793A\uFF0C\u684C\u9762\u7AEF\uFF1A\u59CB\u7EC8\u663E\u793A) */}\n          {hasItems && (\n            <div className={cn('laptop:block', isProductsExpanded ? 'block' : 'hidden')}>{renderItemsGrid(theme)}</div>\n          )}\n          {/* \u79FB\u52A8\u7AEF\uFF1A\u5206\u5272\u7EBF\uFF08\u53EA\u5728\u6709\u5546\u54C1\u65F6\u663E\u793A\uFF09 */}\n          {hasItems && <hr className=\"laptop:hidden border-lines w-full border-t\" />}\n\n          {/* Price and button area */}\n          <div\n            className={cn(\n              'tablet:gap-6 laptop:justify-end flex flex-row items-center justify-between gap-4',\n              classNames?.priceSection\n            )}\n          >\n            {/* Price info */}\n            <div className=\"flex flex-col items-end gap-1\">\n              {/* Main price row */}\n              <div className=\"flex items-center gap-2\">\n                <Text className={cn('tablet:text-2xl whitespace-nowrap text-xl font-semibold', classNames?.totalPrice)}>\n                  {total.replace('${total}', formatPrice({ amount: finalPrice, currencyCode: currency, locale }) || '')}\n                </Text>\n\n                {/* Original price (if discounted) */}\n                {(originalPrice || 0) > (finalPrice || 0) && (\n                  <Text\n                    className={cn(\n                      'tablet:text-2xl whitespace-nowrap text-xl font-semibold line-through',\n                      classNames?.originalPrice\n                    )}\n                  >\n                    {formatPrice({ amount: originalPrice, currencyCode: currency, locale }) || ''}\n                  </Text>\n                )}\n              </div>\n\n              {/* Save amount */}\n              {(saveAmount || 0) > 0 && (\n                <Text className={cn('w-full text-right text-xl font-semibold', classNames?.saveAmount)}>\n                  Save {formatPrice({ amount: saveAmount, currencyCode: currency, locale }) || ''}\n                </Text>\n              )}\n            </div>\n\n            {/* Action button */}\n            <Button onClick={() => onCheckout?.(cart)} className={cn('whitespace-nowrap', classNames?.actionButton)}>\n              {buyNowText}\n            </Button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nMiniCart.displayName = 'MiniCart'\nexport default MiniCart\n"],
+  "mappings": "aAwKQ,cAAAA,EAyFc,QAAAC,MAzFd,oBAtKR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,eAAAC,MAAmB,mCAC5B,OAAS,UAAAC,MAAc,4BACvB,OAAS,QAAAC,MAAY,4BACrB,OAAS,WAAAC,MAAe,4BA+GxB,MAAMC,EAAWN,EAAM,WACrB,CAAC,CAAE,UAAAO,EAAW,WAAAC,EAAa,CAAC,EAAG,KAAAC,EAAM,KAAAC,EAAM,aAAAC,EAAc,WAAAC,EAAY,cAAAC,EAAe,GAAGC,CAAM,EAAGC,IAAQ,CACtG,KAAM,CAAE,KAAAC,EAAM,MAAAC,EAAQ,OAAQ,OAAAC,EAAS,IAAK,EAAIT,GAAQ,CAAC,EAGnDU,EAAYH,GAAM,WAAa,qBAC/BI,EACJJ,GAAM,aAAe,6EACjBK,EAAcL,GAAM,aAAe,mCACnCM,EAAQN,GAAM,OAAS,iBACvBO,EAAkBP,GAAM,iBAAmB,gCAC3CQ,EAAcR,GAAM,aAAe,qBACnCS,EAAaT,GAAM,YAAc,UAGjCU,EAAQhB,GAAM,WAAa,CAAC,EAC5BiB,EAAYD,EAAM,OAAO,CAACJ,EAAOM,IAASN,GAASM,GAAM,UAAY,GAAI,CAAC,EAC1EC,EAAUF,IAAc,EAGxBG,EAAgB,WAAWpB,GAAM,MAAM,gBAAgB,QAAU,GAAG,GAAK,EACzEqB,EAAa,WAAWrB,GAAM,MAAM,aAAa,QAAU,GAAG,GAAK,EACnEsB,EAAWtB,GAAM,MAAM,aAAa,cAAgBA,GAAM,MAAM,gBAAgB,cAAgB,MAChGuB,EAAaH,EAAgBC,EAAaD,EAAgBC,EAAa,EAGvEG,EAAqBlC,EAAM,OAAuB,IAAI,EAGtD,CAACmC,EAAoBC,CAAqB,EAAIpC,EAAM,SAAS,EAAK,EAGlEqC,EAAsBC,GAAgC,CAC1D,GAAIJ,EAAmB,QAAS,CAC9B,MAAMK,EAAYL,EAAmB,QAC/BM,EAAe,IACrBD,EAAU,SAAS,CAAE,KAAMD,IAAc,QAAUE,EAAe,CAACA,EAAc,SAAU,QAAS,CAAC,CACvG,CACF,EAGMC,EAAY,CAAC,CAAE,UAAAlC,CAAU,IAC7BT,EAAC,OACC,UAAWS,EACX,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAT,EAAC,QACC,EAAE,iBACF,OAAO,eACP,YAAY,OACZ,cAAc,QACd,eAAe,QACjB,EACF,EAII4C,EAAa,CAAC,CAAE,UAAAnC,CAAU,IAC9BT,EAAC,OACC,UAAWS,EACX,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAT,EAAC,QACC,EAAE,+eACF,OAAO,eACP,YAAY,OACZ,cAAc,QACd,eAAe,QACjB,EACF,EAII6C,EAAmB1B,GAClBS,EAAM,OAGT3B,EAAC,OAAI,UAAWE,EAAG,qCAAsCO,GAAY,SAAS,EAE3E,UAAAkB,EAAM,OAAS,GACd5B,EAAC,UACC,QAAS,IAAMuC,EAAmB,MAAM,EACxC,UAAWpC,EACT,sJACAO,GAAY,YACd,EACA,aAAW,gCAEX,SAAAV,EAAC2C,EAAA,CAAU,UAAU,oBAAoB,EAC3C,EAGF3C,EAAC,OACC,IAAKoC,EACL,UAAWjC,EACT,oKACAO,GAAY,iBACd,EAEC,SAAAkB,EACE,OAAOkB,GAAQA,GAAQA,EAAK,EAAE,EAC9B,IAAIA,GAAQ,CAEX,MAAMC,GADcD,EAAK,aAAe,CAAC,GACX,OAAS,CAAC,EAClCE,EAAWD,EAAU,IACrBE,EAAWF,EAAU,SAAW,gBAEtC,OACE9C,EAAC,OAEC,UAAWE,EACT,qEACAO,GAAY,QACd,EAEC,UAAAsC,GACChD,EAAC,OACC,IAAKgD,EACL,IAAKC,EACL,UAAU,oCACV,QAASC,GAAK,CACZA,EAAE,cAAc,MAAM,QAAU,MAClC,EACF,EAEFlD,EAAC,QACC,KAAK,SACL,QAAS,IAAMa,IAAeiC,EAAK,GAAIlC,CAAI,EAC3C,UAAU,+CACV,aAAW,SAEX,SAAAX,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,UAAAD,EAAC,QAAK,EAAE,UAAU,EAAE,UAAU,MAAM,UAAU,OAAO,UAAU,GAAG,UAAU,KAAK,QAAQ,EACzFA,EAAC,QACC,EAAE,ihBACF,KAAK,UACP,GACF,EACF,EACC8C,EAAK,SAAW,GACf9C,EAAC,OAAI,UAAU,2GACb,SAAAA,EAACM,EAAA,CAAK,UAAU,UAAW,SAAAwC,EAAK,SAAS,EAC3C,EAGF9C,EAAC,OACC,UAAWG,EACT,8IACAO,GAAY,eACd,EAEA,SAAAV,EAAC,UACC,QAAS,IAAMa,IAAeiC,EAAK,GAAIlC,CAAI,EAC3C,UAAU,oGACV,aAAW,cAEX,SAAAZ,EAAC4C,EAAA,CAAW,UAAU,kCAAkC,EAC1D,EACF,IAjDKE,EAAK,EAkDZ,CAEJ,CAAC,EACL,EAGClB,EAAM,OAAS,GACd5B,EAAC,UACC,QAAS,IAAMuC,EAAmB,OAAO,EACzC,UAAWpC,EACT,sJACAO,GAAY,YACd,EACA,aAAW,iCAEX,SAAAV,EAAC2C,EAAA,CAAU,UAAU,SAAS,EAChC,GAEJ,EAvGwB,KA4GtBQ,EAAW,CAACpB,GAAWH,EAAM,OAAS,EAE5C,OACE5B,EAAC,OACC,IAAKiB,EACL,UAAWd,EACT,2IAEA,+BACA,4DACAgD,EAAW,kCAAoC,mCAC/C,4BACA1C,EACAC,GAAY,KACZ,CACE,YAAaS,IAAU,MACzB,CACF,EACC,GAAGH,EAGJ,SAAAf,EAAC,OACC,UAAWE,EACT,6CACA,mCACA,4BACAO,GAAY,OACd,EAGA,UAAAT,EAAC,OAAI,UAAU,qCAEb,UAAAD,EAAC,OAAI,UAAWG,EAAG,mCAAoCO,GAAY,QAAQ,EACxE,SAAAyC,EACClD,EAAC,OAAI,UAAU,iCACb,UAAAD,EAACO,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAWJ,EAAG,GAAIO,GAAY,SAAS,EAC9D,SAAAa,EAAY,QAAQ,YAAaM,GAAa,GAAG,SAAS,CAAC,EAC9D,EAGA5B,EAAC,UACC,QAAS,IAAM,CAEI,OAAO,WAAa,KAEnCqC,EAAsB,CAACD,CAAkB,EAEzCtB,IAAgBH,CAAI,CAExB,EACA,UAAWT,EAAG,kDAAmDO,GAAY,YAAY,EAGzF,UAAAV,EAACO,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAU,gCACjC,SAAAmB,EACH,EACA1B,EAAC2C,EAAA,CACC,UAAWxC,EACT,8BACAkC,EAAqB,6BAA+B,2BACtD,EACF,GACF,GACF,EAEArC,EAACO,EAAA,CAAQ,GAAG,KAAK,UAAWJ,EAAG,wCAAyCO,GAAY,SAAS,EAC1F,SAAAW,EACH,EAEJ,EACArB,EAAC,OACE,SAAAsB,GACCtB,EAACM,EAAA,CAAK,UAAWH,EAAG,wBAAyBO,GAAY,eAAe,EAAG,KAAMY,EAAa,EAElG,GACF,EAGC6B,GACCnD,EAAC,OAAI,UAAWG,EAAG,eAAgBkC,EAAqB,QAAU,QAAQ,EAAI,SAAAQ,EAAgB1B,CAAK,EAAE,EAGtGgC,GAAYnD,EAAC,MAAG,UAAU,6CAA6C,EAGxEC,EAAC,OACC,UAAWE,EACT,mFACAO,GAAY,YACd,EAGA,UAAAT,EAAC,OAAI,UAAU,gCAEb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAACM,EAAA,CAAK,UAAWH,EAAG,0DAA2DO,GAAY,UAAU,EAClG,SAAAc,EAAM,QAAQ,WAAYpB,EAAY,CAAE,OAAQ6B,EAAY,aAAcC,EAAU,OAAAd,CAAO,CAAC,GAAK,EAAE,EACtG,GAGEY,GAAiB,IAAMC,GAAc,IACrCjC,EAACM,EAAA,CACC,UAAWH,EACT,uEACAO,GAAY,aACd,EAEC,SAAAN,EAAY,CAAE,OAAQ4B,EAAe,aAAcE,EAAU,OAAAd,CAAO,CAAC,GAAK,GAC7E,GAEJ,GAGEe,GAAc,GAAK,GACnBlC,EAACK,EAAA,CAAK,UAAWH,EAAG,0CAA2CO,GAAY,UAAU,EAAG,kBAChFN,EAAY,CAAE,OAAQ+B,EAAY,aAAcD,EAAU,OAAAd,CAAO,CAAC,GAAK,IAC/E,GAEJ,EAGApB,EAACK,EAAA,CAAO,QAAS,IAAMS,IAAaF,CAAI,EAAG,UAAWT,EAAG,oBAAqBO,GAAY,YAAY,EACnG,SAAAiB,EACH,GACF,GACF,EACF,CAEJ,CACF,EAEAnB,EAAS,YAAc,WACvB,IAAO4C,GAAQ5C",
+  "names": ["jsx", "jsxs", "React", "cn", "formatPrice", "Button", "Text", "Heading", "MiniCart", "className", "classNames", "data", "cart", "onRemoveItem", "onCheckout", "onClickToView", "props", "ref", "copy", "theme", "locale", "emptyCart", "description", "itemsInCart", "total", "totalWithCoupon", "clickToView", "buyNowText", "items", "itemCount", "item", "isEmpty", "originalPrice", "finalPrice", "currency", "saveAmount", "scrollContainerRef", "isProductsExpanded", "setIsProductsExpanded", "scrollHorizontally", "direction", "container", "scrollAmount", "ArrowIcon", "DeleteIcon", "renderItemsGrid", "line", "safeImage", "imageUrl", "imageAlt", "e", "hasItems", "MiniCart_default"]
+}

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

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

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

@@ -46,8 +46,8 @@ export interface ProductCompareProps {
     /** 外层容器类名 */
     className?: string;
 }
-declare const _default: import("react").ForwardRefExoticComponent<Omit<ProductCompareProps, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<ProductCompareProps & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

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

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

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

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

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { Media } from '../../types/props.js';
+export interface PromotionalBarSemanticName {
+    root: 'root';
+    content: 'content';
+    title: 'title';
+    description: 'description';
+    button: 'button';
+}
+/**
+ * 响应式背景图片配置
+ */
+export interface ResponsiveBackgroundImage {
+    /** 移动端图片 (<768px) */
+    mobile?: Media;
+    /** 平板图片 (768-1440px) */
+    tablet?: Media;
+    /** 笔记本图片 (1025-1440px) */
+    laptop?: Media;
+    /** 桌面图片 (1441-1920px) */
+    desktop?: Media;
+    /** 超大桌面图片 (≥1921px) */
+    lgDesktop?: Media;
+}
+/**
+ * PromotionalBar 业务组件数据接口
+ */
+export interface PromotionalBarData {
+    /** 组件内容标题 */
+    contentTitle?: string;
+    /** 组件内容描述 */
+    contentDesc?: string;
+    /** 按钮文本 */
+    buttonText?: string;
+    /** 按钮链接 */
+    buttonLink?: string;
+    /** 背景图片 - 响应式图片对象 */
+    backgroundImage?: ResponsiveBackgroundImage;
+}
+export interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: PromotionalBarData;
+    classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<PromotionalBarProps & React.RefAttributes<HTMLDivElement> & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
+}, "ref"> & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as a,jsxs as x}from"react/jsx-runtime";import*as f from"react";import{cn as p}from"../../helpers/index.js";import{Heading as v,Button as k,Picture as B}from"../../components/index.js";import{withLayout as M}from"../../shared/Styles.js";const P=o=>{if(!o)return;const{mobile:e,tablet:u,laptop:c,desktop:d,lgDesktop:h}=o,t=[],s=b=>b?.url,i=s(h),n=s(d),r=s(c),l=s(u),m=s(e);return i?t.push(i):n?t.push(n):r?t.push(r):l?t.push(l):m&&t.push(m),n&&i&&t.push(`${n} 1920`),r&&(n||i)&&t.push(`${r} 1440`),l&&(r||n||i)&&t.push(`${l} 1024`),m&&(l||r||n||i)&&t.push(`${m} 768`),t.length>0?t.join(", "):void 0},g=f.forwardRef(({classNames:o,data:e},u)=>{const{backgroundImage:c}=e,d=f.useMemo(()=>P(c),[c]);return a("div",{ref:u,className:p("laptop:h-[192px] lg-desktop:h-[240px] h-[240px]",o?.root),children:x("div",{className:"promotional-bar-content rounded-card relative h-full overflow-hidden",children:[x("div",{className:p("laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4",o?.content),children:[e.contentTitle&&a(v,{className:p("line-clamp-2 text-[#F5F6F7]",o?.title),html:e.contentTitle,size:3}),e.contentDesc&&a("p",{className:p("laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]",o?.description),dangerouslySetInnerHTML:{__html:e.contentDesc}}),a("div",{className:"laptop:mt-4 mt-2",children:e.buttonText&&a(k,{as:"a",variant:"link",className:p("!p-0 text-[#F5F6F7]",o?.button),href:e.buttonLink,iconClassName:"size-4",children:e.buttonText})})]}),a(B,{source:d,className:"absolute inset-0 z-10 ",imgClassName:"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]"})]})})});g.displayName="PromotionalBar";var F=M(g);export{F as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/PromotionalBar/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../helpers/index.js'\nimport { Heading, Button, Picture } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport type { Media } from '../../types/props.js'\n\nexport interface PromotionalBarSemanticName {\n  root: 'root'\n  content: 'content'\n  title: 'title'\n  description: 'description'\n  button: 'button'\n}\n\n/**\n * \u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u914D\u7F6E\n */\nexport interface ResponsiveBackgroundImage {\n  /** \u79FB\u52A8\u7AEF\u56FE\u7247 (<768px) */\n  mobile?: Media\n  /** \u5E73\u677F\u56FE\u7247 (768-1440px) */\n  tablet?: Media\n  /** \u7B14\u8BB0\u672C\u56FE\u7247 (1025-1440px) */\n  laptop?: Media\n  /** \u684C\u9762\u56FE\u7247 (1441-1920px) */\n  desktop?: Media\n  /** \u8D85\u5927\u684C\u9762\u56FE\u7247 (\u22651921px) */\n  lgDesktop?: Media\n}\n\n/**\n * PromotionalBar \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface PromotionalBarData {\n  /** \u7EC4\u4EF6\u5185\u5BB9\u6807\u9898 */\n  contentTitle?: string\n  /** \u7EC4\u4EF6\u5185\u5BB9\u63CF\u8FF0 */\n  contentDesc?: string\n  /** \u6309\u94AE\u6587\u672C */\n  buttonText?: string\n  /** \u6309\u94AE\u94FE\u63A5 */\n  buttonLink?: string\n  /** \u80CC\u666F\u56FE\u7247 - \u54CD\u5E94\u5F0F\u56FE\u7247\u5BF9\u8C61 */\n  backgroundImage?: ResponsiveBackgroundImage\n}\n\nexport interface PromotionalBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: PromotionalBarData\n  classNames?: Partial<Record<keyof PromotionalBarSemanticName, string>>\n}\n\n/**\n * \u5C06\u54CD\u5E94\u5F0F\u80CC\u666F\u56FE\u7247\u5BF9\u8C61\u8F6C\u6362\u4E3A Picture \u7EC4\u4EF6\u6240\u9700\u7684\u5B57\u7B26\u4E32\u683C\u5F0F\n */\nconst convertResponsiveImageToString = (backgroundImage: ResponsiveBackgroundImage | undefined): string | undefined => {\n  if (!backgroundImage) return undefined\n\n  const { mobile, tablet, laptop, desktop, lgDesktop } = backgroundImage\n  const parts: string[] = []\n\n  // \u8F85\u52A9\u51FD\u6570\uFF1A\u4ECE Media \u5BF9\u8C61\u4E2D\u63D0\u53D6 URL\n  const getUrl = (media: Media | undefined): string | undefined => {\n    return media?.url\n  }\n\n  // \u9ED8\u8BA4\u56FE\u7247\uFF08\u6700\u5927\u5C3A\u5BF8\uFF09\u653E\u5728\u6700\u524D\u9762\uFF0C\u4E0D\u9700\u8981\u65AD\u70B9\n  const lgDesktopUrl = getUrl(lgDesktop)\n  const desktopUrl = getUrl(desktop)\n  const laptopUrl = getUrl(laptop)\n  const tabletUrl = getUrl(tablet)\n  const mobileUrl = getUrl(mobile)\n\n  if (lgDesktopUrl) parts.push(lgDesktopUrl)\n  else if (desktopUrl) parts.push(desktopUrl)\n  else if (laptopUrl) parts.push(laptopUrl)\n  else if (tabletUrl) parts.push(tabletUrl)\n  else if (mobileUrl) parts.push(mobileUrl)\n\n  // \u6309\u65AD\u70B9\u4ECE\u5927\u5230\u5C0F\u6DFB\u52A0\n  if (desktopUrl && lgDesktopUrl) parts.push(`${desktopUrl} 1920`)\n  if (laptopUrl && (desktopUrl || lgDesktopUrl)) parts.push(`${laptopUrl} 1440`)\n  if (tabletUrl && (laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${tabletUrl} 1024`)\n  if (mobileUrl && (tabletUrl || laptopUrl || desktopUrl || lgDesktopUrl)) parts.push(`${mobileUrl} 768`)\n\n  return parts.length > 0 ? parts.join(', ') : undefined\n}\n\n/**\n * PromotionalBar - \u63A8\u5E7F\u680F\n *\n * @description \u63A8\u5E7F\u680F\n */\nconst PromotionalBar = React.forwardRef<HTMLDivElement, PromotionalBarProps>(({ classNames, data }, ref) => {\n  const { backgroundImage } = data\n  const pictureSource = React.useMemo(() => {\n    return convertResponsiveImageToString(backgroundImage)\n  }, [backgroundImage])\n  return (\n    <div ref={ref} className={cn('laptop:h-[192px] lg-desktop:h-[240px] h-[240px]', classNames?.root)}>\n      {/* \u63A8\u5E7F\u680F\u5185\u5BB9\u533A\u57DF - \u6839\u636E\u5177\u4F53\u4E1A\u52A1\u9700\u6C42\u5B9A\u5236 */}\n      <div className=\"promotional-bar-content rounded-card relative h-full overflow-hidden\">\n        <div\n          className={cn(\n            'laptop:px-8 laptop:justify-center lg-desktop:max-w-[620px] laptop:max-w-[392px] desktop:max-w-[584px] laptop:py-0 tablet:px-8 laptop:pr-0 relative z-20 flex h-full flex-col p-4',\n            classNames?.content\n          )}\n        >\n          {data.contentTitle && (\n            <Heading\n              className={cn('line-clamp-2 text-[#F5F6F7]', classNames?.title)}\n              html={data.contentTitle}\n              size={3}\n            />\n          )}\n          {data.contentDesc && (\n            <p\n              className={cn(\n                'laptop:text-[16px] laptop:mt-2 lg-desktop:text-[18px] mt-1 line-clamp-2 text-[14px] font-bold leading-[1.4] text-[#F5F6F7]',\n                classNames?.description\n              )}\n              dangerouslySetInnerHTML={{ __html: data.contentDesc }}\n            />\n          )}\n          <div className=\"laptop:mt-4 mt-2\">\n            {data.buttonText && (\n              <Button\n                as=\"a\"\n                variant=\"link\"\n                className={cn('!p-0 text-[#F5F6F7]', classNames?.button)}\n                href={data.buttonLink}\n                iconClassName=\"size-4\"\n              >\n                {data.buttonText}\n              </Button>\n            )}\n          </div>\n        </div>\n        <Picture\n          source={pictureSource}\n          className=\"absolute inset-0 z-10 \"\n          imgClassName=\"h-full object-cover transition-transform duration-300 ease-in-out hover:scale-[1.05]\"\n        />\n      </div>\n    </div>\n  )\n})\n\nPromotionalBar.displayName = 'PromotionalBar'\nexport default withLayout(PromotionalBar)\n"],
+  "mappings": "aAwGQ,OAOI,OAAAA,EAPJ,QAAAC,MAAA,oBAtGR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,UAAAC,EAAQ,WAAAC,MAAe,4BACzC,OAAS,cAAAC,MAAkB,yBAoD3B,MAAMC,EAAkCC,GAA+E,CACrH,GAAI,CAACA,EAAiB,OAEtB,KAAM,CAAE,OAAAC,EAAQ,OAAAC,EAAQ,OAAAC,EAAQ,QAAAC,EAAS,UAAAC,CAAU,EAAIL,EACjDM,EAAkB,CAAC,EAGnBC,EAAUC,GACPA,GAAO,IAIVC,EAAeF,EAAOF,CAAS,EAC/BK,EAAaH,EAAOH,CAAO,EAC3BO,EAAYJ,EAAOJ,CAAM,EACzBS,EAAYL,EAAOL,CAAM,EACzBW,EAAYN,EAAON,CAAM,EAE/B,OAAIQ,EAAcH,EAAM,KAAKG,CAAY,EAChCC,EAAYJ,EAAM,KAAKI,CAAU,EACjCC,EAAWL,EAAM,KAAKK,CAAS,EAC/BC,EAAWN,EAAM,KAAKM,CAAS,EAC/BC,GAAWP,EAAM,KAAKO,CAAS,EAGpCH,GAAcD,GAAcH,EAAM,KAAK,GAAGI,CAAU,OAAO,EAC3DC,IAAcD,GAAcD,IAAeH,EAAM,KAAK,GAAGK,CAAS,OAAO,EACzEC,IAAcD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGM,CAAS,OAAO,EACtFC,IAAcD,GAAaD,GAAaD,GAAcD,IAAeH,EAAM,KAAK,GAAGO,CAAS,MAAM,EAE/FP,EAAM,OAAS,EAAIA,EAAM,KAAK,IAAI,EAAI,MAC/C,EAOMQ,EAAiBrB,EAAM,WAAgD,CAAC,CAAE,WAAAsB,EAAY,KAAAC,CAAK,EAAGC,IAAQ,CAC1G,KAAM,CAAE,gBAAAjB,CAAgB,EAAIgB,EACtBE,EAAgBzB,EAAM,QAAQ,IAC3BM,EAA+BC,CAAe,EACpD,CAACA,CAAe,CAAC,EACpB,OACET,EAAC,OAAI,IAAK0B,EAAK,UAAWvB,EAAG,kDAAmDqB,GAAY,IAAI,EAE9F,SAAAvB,EAAC,OAAI,UAAU,uEACb,UAAAA,EAAC,OACC,UAAWE,EACT,mLACAqB,GAAY,OACd,EAEC,UAAAC,EAAK,cACJzB,EAACI,EAAA,CACC,UAAWD,EAAG,8BAA+BqB,GAAY,KAAK,EAC9D,KAAMC,EAAK,aACX,KAAM,EACR,EAEDA,EAAK,aACJzB,EAAC,KACC,UAAWG,EACT,6HACAqB,GAAY,WACd,EACA,wBAAyB,CAAE,OAAQC,EAAK,WAAY,EACtD,EAEFzB,EAAC,OAAI,UAAU,mBACZ,SAAAyB,EAAK,YACJzB,EAACK,EAAA,CACC,GAAG,IACH,QAAQ,OACR,UAAWF,EAAG,sBAAuBqB,GAAY,MAAM,EACvD,KAAMC,EAAK,WACX,cAAc,SAEb,SAAAA,EAAK,WACR,EAEJ,GACF,EACAzB,EAACM,EAAA,CACC,OAAQqB,EACR,UAAU,yBACV,aAAa,uFACf,GACF,EACF,CAEJ,CAAC,EAEDJ,EAAe,YAAc,iBAC7B,IAAOK,EAAQrB,EAAWgB,CAAc",
+  "names": ["jsx", "jsxs", "React", "cn", "Heading", "Button", "Picture", "withLayout", "convertResponsiveImageToString", "backgroundImage", "mobile", "tablet", "laptop", "desktop", "lgDesktop", "parts", "getUrl", "media", "lgDesktopUrl", "desktopUrl", "laptopUrl", "tabletUrl", "mobileUrl", "PromotionalBar", "classNames", "data", "ref", "pictureSource", "PromotionalBar_default"]
+}

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import type { Media as MediaType, Theme } from '../../types/props.js';
+import type { ButtonProps } from '../../components/button.js';
+export type SecondaryBannerSemanticName = 'root' | 'title' | 'superTitle' | 'subtitle' | 'content' | 'buttonGroup' | 'primaryButton' | 'secondaryButton';
+/**
+ * SecondaryBanner 业务组件数据接口
+ */
+export interface SecondaryBannerData {
+    /** 主标题*/
+    title?: string;
+    /**
+     * 上标题/引导标题
+     * 通常用于分类、引导性文字
+     */
+    superTitle?: string;
+    /**
+     * 副标题/描述文字
+     * 通常用于补充说明、详细描述
+     */
+    subtitle?: string;
+    /**
+     * 尺寸:
+     *  sm: 小尺寸用于筛选页面
+     *  base: 基础尺寸用于
+     *  lg: 大尺寸用于专题页
+     *  xlg: 活动页（通栏）
+     */
+    size?: 'sm' | 'base' | 'lg' | 'xlg';
+    pcImage?: MediaType;
+    padImage?: MediaType;
+    mobileImage?: MediaType;
+    /** 结束时间（ISO 字符串） */
+    endDate?: string;
+    /** 结束时间时区（如: America/Los_Angeles） */
+    endDate_tz?: string;
+    /**
+     * 时间格式化配置（JSON 字符串）
+     * {"day":"日","hour":"时","minute":"分","second":"秒"}
+     */
+    dateFormat?: string;
+    /** 主按钮配置 */
+    primaryButton?: {
+        text: string;
+        link?: string;
+        onClick?: () => void;
+    } & Omit<ButtonProps, 'children'>;
+    /** 次级按钮配置 */
+    secondaryButton?: {
+        text: string;
+        link?: string;
+        onClick?: () => void;
+    } & Omit<ButtonProps, 'children'>;
+    iconArray?: Array<{
+        pcImage: MediaType;
+    }>;
+    theme?: Theme;
+}
+export interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {
+    /** 业务数据 */
+    data: SecondaryBannerData;
+    classNames?: Partial<Record<SecondaryBannerSemanticName, string>>;
+}
+/**
+ * SecondaryBanner - 次级横幅banner
+ *
+ * @description 是指用户进入二级页面后，无需滚动页面就能在第一屏（即"首屏"）看到的、通常横跨整个浏览器窗口宽度的核心视觉区域。
+ */
+declare const SecondaryBanner: React.ForwardRefExoticComponent<SecondaryBannerProps & React.RefAttributes<HTMLElement>>;
+export default SecondaryBanner;

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

@@ -0,0 +1,2 @@
+"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import*as y from"react";import{cva as D}from"class-variance-authority";import{cn as a}from"../../helpers/index.js";import{Text as x,Button as f,Heading as P,Picture as w}from"../../components/index.js";import j from"../HeroBanner/Countdown.js";import A from"../Media/index.js";const H=D("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),k=y.forwardRef(({className:B,classNames:n={},data:e,...v},I)=>{const{pcImage:T,padImage:h,mobileImage:z,endDate:m,endDate_tz:N,dateFormat:M,size:l="base",iconArray:p,theme:S="light",primaryButton:r,secondaryButton:o}=e,c=y.useId(),i=e.title?`${c}-title`:void 0,u=e.subtitle?`${c}-subtitle`:void 0,b=e.superTitle?`${c}-super-title`:void 0,C=[b,u].filter(Boolean).join(" ")||void 0;return s("section",{ref:I,role:"banner","aria-labelledby":i,"aria-describedby":C,className:a({"aiui-dark":S==="dark"},H({size:l}),B,n?.root),...v,children:[t(A,{pcImage:T,padImage:h,mobileImage:z,className:a("absolute inset-0 size-full object-cover",{"h-fit":l==="xlg"}),imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoPlay:!0}),s("div",{className:a("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center  px-[16px] text-left",n?.content),children:[s("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&t(x,{as:"p",size:2,id:b,className:a("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",n?.superTitle),html:e.superTitle}),e.title&&t(P,{as:"h1",size:["xlg","lg"].includes(l)?5:4,id:i,className:a("banner-title ",n?.title),html:e.title}),e.subtitle&&t(x,{as:"p",size:3,id:u,className:a("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",n?.subtitle),html:e.subtitle})]}),m&&t("div",{className:"banner-countdown mt-3",role:"timer","aria-label":"event countdown",children:t(j,{endDate:m,endDate_tz:N,dateFormat:M})}),s("div",{className:a("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",n?.buttonGroup),children:[o?.text&&t(f,{variant:"secondary",onClick:o.onClick,className:a("",n?.secondaryButton),"aria-describedby":i,...o.link?{as:"a",href:o.link}:{},children:o.text}),r?.text&&t(f,{onClick:r.onClick,className:a("",n?.primaryButton),"aria-describedby":i,...r.link?{as:"a",href:r.link}:{},children:r.text})]}),Array.isArray(p)&&p.length>0&&t("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:p.map((d,g)=>d.pcImage?t(w,{source:d.pcImage.url,alt:d.pcImage.alt||`icon ${g+1}`,role:"img",className:"h-auto max-w-none"},g):null)})]})]})});k.displayName="SecondaryBanner";var E=k;export{E as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture } from '../../components/index.js'\nimport Countdown from '../HeroBanner/Countdown.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\n\nexport type SecondaryBannerSemanticName =\n  | 'root'\n  | 'title'\n  | 'superTitle'\n  | 'subtitle'\n  | 'content'\n  | 'buttonGroup'\n  | 'primaryButton'\n  | 'secondaryButton'\n\nconst secondaryBannerVariants = cva(\n  // \u57FA\u7840\u6837\u5F0F\n  'text-info-primary relative w-full',\n  {\n    variants: {\n      size: {\n        sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n        base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n        lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n        xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n      },\n    },\n    defaultVariants: {\n      size: 'base',\n    },\n  }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n  /** \u4E3B\u6807\u9898*/\n  title?: string\n  /**\n   * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n   * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n   */\n  superTitle?: string\n  /**\n   * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n   * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n   */\n  subtitle?: string\n  /**\n   * \u5C3A\u5BF8:\n   *  sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n   *  base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n   *  lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n   *  xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n   */\n  size?: 'sm' | 'base' | 'lg' | 'xlg'\n  pcImage?: MediaType\n  padImage?: MediaType\n  mobileImage?: MediaType\n\n  /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n  endDate?: string\n  /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n  endDate_tz?: string\n  /**\n   * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n   * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n   */\n  dateFormat?: string\n\n  /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n  primaryButton?: {\n    text: string\n    link?: string\n    onClick?: () => void\n  } & Omit<ButtonProps, 'children'>\n  /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: {\n    text: string\n    link?: string\n    onClick?: () => void\n  } & Omit<ButtonProps, 'children'>\n\n  iconArray?: Array<{ pcImage: MediaType }>\n  theme?: Theme\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n  /** \u4E1A\u52A1\u6570\u636E */\n  data: SecondaryBannerData\n  classNames?: Partial<Record<SecondaryBannerSemanticName, string>>\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n  ({ className, classNames = {}, data, ...props }, ref) => {\n    const {\n      pcImage,\n      padImage,\n      mobileImage,\n      endDate,\n      endDate_tz,\n      dateFormat,\n      size = 'base',\n      iconArray: icons,\n      theme = 'light',\n      primaryButton,\n      secondaryButton,\n    } = data\n\n    // \u751F\u6210\u552F\u4E00ID\u7528\u4E8E\u53EF\u8BBF\u95EE\u6027\n    const bannerId = React.useId()\n    const titleId = data.title ? `${bannerId}-title` : undefined\n    const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n    const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n\n    // \u6784\u5EFAaria-describedby\n    const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n    return (\n      <section\n        ref={ref}\n        role=\"banner\"\n        aria-labelledby={titleId}\n        aria-describedby={describedBy}\n        className={cn(\n          {\n            'aiui-dark': theme === 'dark',\n          },\n          secondaryBannerVariants({ size: size }),\n          className,\n          classNames?.root\n        )}\n        {...props}\n      >\n        <Media\n          pcImage={pcImage}\n          padImage={padImage}\n          mobileImage={mobileImage}\n          className={cn('absolute inset-0 size-full object-cover', {\n            'h-fit': size === 'xlg',\n          })}\n          imgClassName=\"object-cover\"\n          videoClassName=\"object-cover\"\n          muted={true}\n          loop={true}\n          playsInline={true}\n          autoPlay={true}\n        />\n        <div\n          className={cn(\n            'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center  px-[16px] text-left',\n            classNames?.content\n          )}\n        >\n          <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n            {data.superTitle && (\n              <Text\n                as=\"p\"\n                size={2}\n                id={superTitleId}\n                className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n                html={data.superTitle}\n              />\n            )}\n\n            {data.title && (\n              <Heading\n                as=\"h1\"\n                size={['xlg', 'lg'].includes(size) ? 5 : 4}\n                id={titleId}\n                className={cn('banner-title ', classNames?.title)}\n                html={data.title}\n              />\n            )}\n\n            {data.subtitle && (\n              <Text\n                as=\"p\"\n                size={3}\n                id={subtitleId}\n                className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n                html={data.subtitle}\n              />\n            )}\n          </div>\n\n          {endDate && (\n            <div className=\"banner-countdown mt-3\" role=\"timer\" aria-label=\"event countdown\">\n              <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n            </div>\n          )}\n\n          <div\n            className={cn(\n              'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n              classNames?.buttonGroup\n            )}\n          >\n            {secondaryButton?.text && (\n              <Button\n                variant=\"secondary\"\n                onClick={secondaryButton.onClick}\n                className={cn('', classNames?.secondaryButton)}\n                aria-describedby={titleId}\n                {...(secondaryButton.link ? { as: 'a', href: secondaryButton.link } : {})}\n              >\n                {secondaryButton.text}\n              </Button>\n            )}\n            {primaryButton?.text && (\n              <Button\n                onClick={primaryButton.onClick}\n                className={cn('', classNames?.primaryButton)}\n                aria-describedby={titleId}\n                {...(primaryButton.link ? { as: 'a', href: primaryButton.link } : {})}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n\n          {Array.isArray(icons) && icons.length > 0 && (\n            <div\n              className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n              role=\"group\"\n              aria-label=\"brand icons\"\n            >\n              {icons.map((icon, index) =>\n                icon.pcImage ? (\n                  <Picture\n                    key={index}\n                    source={icon.pcImage.url}\n                    alt={icon.pcImage.alt || `icon ${index + 1}`}\n                    role=\"img\"\n                    className=\"h-auto max-w-none\"\n                  />\n                ) : null\n              )}\n            </div>\n          )}\n        </div>\n      </section>\n    )\n  }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default SecondaryBanner\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cva", "cn", "Text", "Button", "Heading", "Picture", "Countdown", "Media", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "props", "ref", "pcImage", "padImage", "mobileImage", "endDate", "endDate_tz", "dateFormat", "size", "icons", "theme", "primaryButton", "secondaryButton", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "icon", "index", "SecondaryBanner_default"]
+}

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

@@ -13,8 +13,8 @@ type SelectStoreType = {
     };
     className?: string;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Omit<SelectStoreType, keyof import("../../shared/Styles.js").StylesProps> & Partial<import("../../shared/Styles.js").StylesProps & import("../../shared/Styles.js").ContainerProps> & {
-    className?: string;
-    data?: Record<string, any>;
+declare const _default: import("react").ForwardRefExoticComponent<SelectStoreType & {
+    style?: string | React.CSSProperties;
+    container?: import("../../shared/Styles.js").ContainerProps["container"];
 } & import("react").RefAttributes<any>>;
 export default _default;

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

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

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

@@ -1,15 +1,4 @@
 import type { ContainerProps, CurrencyDisplayType } from '../../types/props.js';
-export declare const PRICE_SYMBOL: any;
-export declare const languageTerritory: (locale: string) => string;
-export declare function formatPrice({ amount, currencyCode, currencyDisplay, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
-    amount: number;
-    currencyCode: string;
-    currencyDisplay?: CurrencyDisplayType;
-    locale: string;
-    maximumFractionDigits?: number;
-    minimumFractionDigits?: number;
-    removeTrailingZeros?: boolean;
-}): string | null;
 export declare function formatVariantPrice({ amount, baseAmount, currencyCode, currencyDisplay, locale, maximumFractionDigits, minimumFractionDigits, removeTrailingZeros, }: {
     baseAmount: number;
     amount: number;