@anker-in/headless-ui 1.1.32 → 1.1.34-alpha.1768461697532

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

@@ -1,6 +1,6 @@
 import type { MediaPlayerBaseProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerBaseProps & 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<MediaPlayerBaseProps & 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/MediaPlayerMulti/index.d.ts

@@ -1,6 +1,6 @@
 import type { MediaPlayerMultiProps } from './types.js';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaPlayerMultiProps & 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<MediaPlayerMultiProps & 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/MediaPlayerSticky/index.d.ts

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

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

@@ -18,4 +18,5 @@ export interface MediaPlayerBaseProps extends ComponentCommonProps {
         youtubeMobileId?: string;
         components?: MediaPlayerComponent[];
     };
+    wrapperClassName?: string;
 }

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

@@ -1,7 +1,7 @@
 import type { MediaSceneSwitcherProps } from './types.js';
 import 'swiper/css';
-declare const _default: import("react").ForwardRefExoticComponent<Omit<Omit<MediaSceneSwitcherProps & 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<MediaSceneSwitcherProps & 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/MediaShelf/index.d.ts

@@ -0,0 +1,216 @@
+import * as React from 'react';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import type { ButtonFunctionType, CopyConfig } from './types.js';
+import type { BadgeProps } from '../../components/badge.js';
+/**
+ * 语义化类名
+ */
+type MediaShelfSemanticName = 'root' | 'title' | 'description' | 'productCard' | 'productCardImage' | 'productTitle' | 'productDescription' | 'productPriceLabel' | 'productPrice' | 'buttonGroup' | 'secondaryButton' | 'primaryButton' | 'stockBar';
+/**
+ * Code Channel 配置 - 折扣前缀
+ */
+export type CodeChannelConfig = string;
+/**
+ * 库存展示模式
+ */
+export type StockDisplayMode = 'always' | 'never' | 'below-quantity' | 'below-percentage';
+/**
+ * MediaShelf Context 配置接口
+ */
+export interface MediaShelfContextConfig {
+    /** Code Channel 配置 - 折扣前缀 */
+    codeChannel?: CodeChannelConfig;
+    /** 是否展示会员价格 */
+    showMemberPrice?: boolean;
+    /** 是否展示折扣标签 */
+    showDiscount?: boolean;
+    /** 是否展示标签系统 */
+    showTags?: boolean;
+    /** 库存展示模式 */
+    stockDisplayMode?: StockDisplayMode;
+    /** 库存阈值（当模式为 below-quantity 或 below-percentage 时使用） */
+    stockThreshold?: number;
+    /** 是否展示原价（删除线价格） */
+    showOriginalPrice?: boolean;
+}
+/**
+ * MediaShelf Context 值接口
+ */
+interface MediaShelfContextValue extends MediaShelfContextConfig {
+    /** 点击了解更多回调 */
+    onLearnMore?: (product: ProductCardData) => void;
+    /** 点击立即购买回调 */
+    onShopNow?: (product: ProductCardData) => void;
+    /** 点击加入购物车回调 */
+    onAddToCart?: (product: ProductCardData) => void;
+    /** 语义化类名 */
+    classNames?: Partial<Record<MediaShelfSemanticName, string>>;
+    /** 了解更多按钮文本 */
+    secondaryButtonText?: string;
+    secondaryButtonFun?: ButtonFunctionType;
+    /** 立即购买按钮文本 */
+    primaryButtonText?: string;
+    primaryButtonFun?: ButtonFunctionType;
+    /** 文案配置 */
+    copy: CopyConfig;
+}
+/**
+ * 使用 MediaShelf Context 的 Hook
+ */
+export declare const useMediaShelfContext: () => MediaShelfContextValue;
+/**
+ * 基础产品数据接口（来自外部数据源）
+ */
+export interface BaseProductData {
+    sku: string;
+    name: string;
+    image: string;
+    value: string;
+    handle: string;
+    shopify_id: string;
+    custom_name?: string;
+    custom_description?: string;
+    custom_image?: string;
+    custom_link?: string;
+}
+/**
+ * Shopify 变体数据接口
+ */
+export interface VariantData {
+    /**
+     * 产品描述
+     */
+    description?: string;
+    /**
+     * 变体id
+     */
+    variantId: string;
+    /**
+     * 产品链接, 点击图片的时候跳转到该链接
+     */
+    listingLink: string;
+    /**
+     * 原价
+     */
+    originalPrice: string;
+    /**
+     * 现价
+     */
+    price: string;
+    /**
+     * 价格上面展示的标签文本
+     */
+    priceLabel?: string;
+    /**
+     * 总库存
+     */
+    totalInventory: number;
+    /**
+     * 可用库存数量
+     */
+    quantityAvailable: number;
+    /**
+     * 是否可售
+     */
+    availableForSale: boolean;
+    /**
+     * tags 列表(会员价，折扣，new, hot等标签信息)
+     */
+    tags: Array<{
+        label: string;
+        variant: BadgeProps['variant'];
+        promotionalType?: BadgeProps['promotionalType'];
+    }>;
+    /**
+     * 通用折扣数据，包括折扣title, 类型和值
+     */
+    coupon: any;
+}
+/**
+ * 完整的产品卡片数据接口
+ */
+export interface ProductCardData extends BaseProductData, VariantData {
+}
+/**
+ * 产品分组Tab数据接口
+ */
+export interface ProductTab {
+    /** Tab ID */
+    id: string;
+    /** Tab 标题 */
+    tab: string;
+    /** 该分组下的产品数据 */
+    data: ProductCardData[];
+}
+/**
+ * MediaShelf 业务组件数据接口
+ */
+export interface MediaShelfData {
+    theme?: 'light' | 'dark';
+    /** 组件标题 */
+    title?: string;
+    /** 组件描述 */
+    description?: string;
+    /** 分组产品Tab列表 */
+    productsTab?: ProductTab[];
+    /** 是否显示 Tab（默认：true） */
+    isShowTab?: boolean;
+    /** 了解更多按钮文本 */
+    secondaryButtonText?: string;
+    secondaryButtonFun: ButtonFunctionType;
+    /** 立即购买按钮文本 */
+    primaryButtonText?: string;
+    primaryButtonFun: ButtonFunctionType;
+    /** Code Channel 配置 - 折扣前缀 */
+    codeChannel?: CodeChannelConfig;
+    /** 是否展示会员价格 */
+    showMemberPrice?: boolean;
+    /** 是否展示折扣标签 */
+    showDiscount?: boolean;
+    /** 是否展示标签系统 */
+    showTags?: boolean;
+    /** 库存展示模式 */
+    stockDisplayMode?: StockDisplayMode;
+    /** 库存阈值（当模式为 below-quantity 或 below-percentage 时使用） */
+    stockThreshold?: number;
+    /**
+     * 库存文本模板，支持 {count} 占位符
+     */
+    stockDisplayText?: string;
+    /** 是否展示原价（删除线价格） */
+    showOriginalPrice?: boolean;
+    /** 文案配置 */
+    copy?: CopyConfig;
+    /**
+     * 产品列表（当不使用 Tab 分组时可直接传入产品列表）
+     */
+    productsCard: ProductCardData[];
+}
+export interface MediaShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 业务数据 */
+    data: MediaShelfData;
+    /** 点击了解更多回调 */
+    onLearnMore?: (product: ProductCardData) => void;
+    /** 点击立即购买回调 */
+    onShopNow?: (product: ProductCardData) => void;
+    /** 点击加入购物车回调 */
+    onAddToCart?: (product: ProductCardData) => void;
+    /** 语义化类名 */
+    classNames?: Partial<Record<MediaShelfSemanticName, string>>;
+}
+/**
+ * 产品卡片组件
+ */
+declare const ProductCard: React.ForwardRefExoticComponent<{
+    product: ProductCardData;
+    className?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * MediaShelf - 媒体货架
+ *
+ * @description 能够实时显示商品库存信息和会员价的货架，支持响应式布局和多种配置选项
+ */
+declare const MediaShelf: React.ForwardRefExoticComponent<MediaShelfProps & React.RefAttributes<HTMLDivElement>>;
+export default MediaShelf;
+export { ProductCard };

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

@@ -0,0 +1,2 @@
+"use client";import{Fragment as z,jsx as t,jsxs as r}from"react/jsx-runtime";import*as m from"react";import{cn as o}from"../../helpers/index.js";import{Button as M,Badge as I,Card as O,CardContent as q,Picture as R,Text as w,Heading as g,Tabs as j,TabsList as G,TabsTrigger as W,TabsContent as Z,Progress as J}from"../../components/index.js";import{Swiper as K,SwiperSlide as Q}from"swiper/react";import{Navigation as U}from"swiper/modules";import"swiper/css";import"swiper/css/navigation";const X=({disabled:e})=>r("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:" lg-desktop:size-[56px] laptop:block hidden size-[40px]",children:[t("path",{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",fill:"black",fillOpacity:e?"0.2":"0.6"}),t("path",{d:"M31 22L25 28L31 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),Y=({disabled:e})=>r("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"lg-desktop:size-[56px] laptop:block hidden size-[40px]",children:[t("path",{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",fill:"black",fillOpacity:e?"0.2":"0.6"}),t("path",{d:"M25 22L31 28L25 34",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]});function $(e,a,d,c){if(e===void 0)return!0;switch(e){case"always":return!0;case"never":return!1;case"below-quantity":return a===void 0?!0:d<=a;case"below-percentage":return a===void 0?!0:d/c<=a;default:return!0}}const D=m.createContext(null),L=()=>{const e=m.useContext(D);if(!e)throw new Error("useMediaShelfContext must be used within an MediaShelfProvider");return e},N=m.forwardRef(({product:e,className:a},d)=>{let{stockDisplayMode:c,stockThreshold:u,onLearnMore:s,onShopNow:i,onAddToCart:b,classNames:l,secondaryButtonText:h,primaryButtonText:f,secondaryButtonFun:y,primaryButtonFun:v,showOriginalPrice:k,copy:x}=L();const T=m.useMemo(()=>{const n=(e?.quantityAvailable??0)/(e?.totalInventory??1)*100;return n===0&&e.availableForSale?Math.round(Math.random()*5+1):n},[e?.availableForSale,e?.quantityAvailable,e?.totalInventory]),C=n=>{if(n)switch(n){case"buyNow":i?.(e);break;case"addCart":b?.(e);break;case"learnMore":s?.(e);break;default:break}};return r(O,{ref:d,className:o("desktop:min-h-[512px] lg-desktop:min-h-[534px] flex min-h-[458px] min-w-[296px] flex-col overflow-hidden",e.custom_link?"cursor-pointer":"",a,l?.productCard),children:[r("div",{className:"desktop:h-[240px] relative h-[200px] shrink-0 overflow-hidden",children:[t("div",{className:"absolute inset-0 ",children:t("a",{href:e.custom_link||e.listingLink,children:t(R,{source:e.custom_image||e.image,alt:e.name,className:o("h-full",l?.productCardImage),imgClassName:"h-full object-cover object-center"})})}),t("div",{className:"lg-desktop:h-[28px] absolute left-4 top-4 h-[24px]",children:e.tags?.map((n,S)=>t(I,{size:"sm",variant:n.variant||"outline",className:o("mr-1"),promotionalType:n.promotionalType,children:n.label},S))})]}),r(q,{className:"desktop:p-6 flex h-[calc(100%-240px)] grow flex-col justify-between p-4",children:[r("div",{className:"mb-6 flex-1",children:[t(g,{as:"h3",size:2,className:o("text-info-primary mb-1 line-clamp-2 font-semibold tracking-tight",l?.productTitle),children:e.custom_name||e.name}),(e.custom_description||e?.description)&&t(w,{size:2,className:o("text-info-primary line-clamp-1 font-semibold",l?.productDescription),html:e.custom_description||e.description})]}),$(c,u,e?.quantityAvailable??0,e?.totalInventory??0)&&r("div",{"data-total":e?.totalInventory??0,"data-available":e?.quantityAvailable??0,className:"space-y-2",children:[t(J,{value:T,max:100,min:0,size:"base",variant:"default","aria-label":"stock progress",classNames:{progressBar:"transition-all duration-300 ease-in-out"}}),t(w,{size:3,className:"text-info-tertiary text-[14px]",children:x?.stockDisplayText?.replace("{count}",String(e?.quantityAvailable))})]}),t(z,{children:e?.priceLabel&&e?.availableForSale&&t(w,{size:4,className:o("text-marketing-1 mt-2",l?.productPriceLabel),children:e.priceLabel})}),t("div",{className:o("mb-6",l?.productPrice),children:t("div",{className:"flex items-baseline gap-2",children:e.availableForSale?r(z,{children:[t(g,{size:2,className:"text-info-primary",as:"h6",children:e.price}),k&&e.originalPrice&&t(g,{size:2,className:"text-info-tertiary line-through",as:"h6",children:e.originalPrice})]}):t(g,{size:2,className:"text-info-tertiary",children:x?.outOfStockLabel??"Sold Out"})})}),r("div",{className:o("tablet:gap-3 mb-4 flex gap-2",l?.buttonGroup),children:[h&&t(M,{variant:"secondary",size:"base",className:"",onClick:n=>C(y),disabled:!e.availableForSale&&y!=="learnMore",children:h}),f&&t(M,{variant:"primary",size:"base",className:"",onClick:n=>C(v),disabled:!e.availableForSale&&v!=="learnMore",children:f})]})]})]})});N.displayName="ProductCard";const P=m.forwardRef(({products:e,className:a},d)=>{const{copy:c}=L(),[u,s]=m.useState({isBeginning:!0,isEnd:!1});return e?.length===0?null:t("div",{ref:d,className:a,children:r("div",{className:"relative",children:[t(K,{modules:[U],spaceBetween:16,slidesPerView:"auto",autoHeight:!0,navigation:{nextEl:".swiper-button-next-custom",prevEl:".swiper-button-prev-custom"},onSwiper:i=>{s({isBeginning:i.isBeginning,isEnd:i.isEnd})},onSlideChange:i=>{s({isBeginning:i.isBeginning,isEnd:i.isEnd})},className:"!overflow-visible",breakpoints:{0:{spaceBetween:12,slidesPerView:1},768:{spaceBetween:12,slidesPerView:e.length<=2?2:2.3},1024:{spaceBetween:16,slidesPerView:Math.min(3,e.length)}},children:e.map((i,b)=>t(Q,{className:"tablet:h-[428px] desktop:!h-[464px]  lg-desktop:!h-[561px] tablet:!max-w-[50%] h-[428px] overflow-hidden",children:t(N,{product:i,className:"box-border w-full max-w-full"})},i.shopify_id+"-"+i.sku||b))}),t("button",{className:o("swiper-button-prev-custom tablet:block absolute left-4 top-1/2 z-10 hidden -translate-y-1/2",{"tablet:hidden":e.length<=2}),"aria-label":c?.previousSlideLabel,disabled:u.isBeginning,children:t(X,{disabled:u.isBeginning})}),t("button",{className:o("swiper-button-next-custom tablet:block absolute right-4 top-1/2 z-10 hidden -translate-y-1/2",{"tablet:hidden":e.length<=2}),"aria-label":c?.nextSlideLabel,disabled:u.isEnd,children:t(Y,{disabled:u.isEnd})})]})})});P.displayName="ProductsList";const F=m.forwardRef(({className:e,data:a,onLearnMore:d,onShopNow:c,onAddToCart:u,classNames:s,...i},b)=>{const{theme:l="light",codeChannel:h,showMemberPrice:f=!0,showDiscount:y=!0,showTags:v=!0,stockDisplayMode:k,stockThreshold:x,showOriginalPrice:T=!0,secondaryButtonText:C,primaryButtonText:n,secondaryButtonFun:S,primaryButtonFun:E,isShowTab:_=!0,copy:H}=a,V={codeChannel:h,showMemberPrice:f,showDiscount:y,showTags:v,stockDisplayMode:k,stockThreshold:x,showOriginalPrice:T,onLearnMore:d,onShopNow:c,onAddToCart:u,classNames:s,secondaryButtonText:C,secondaryButtonFun:S,primaryButtonText:n,primaryButtonFun:E,copy:H||{}},A=a.productsTab&&a.productsTab.length>0,B=_&&A;return t(D.Provider,{value:V,children:r("div",{ref:b,className:o("w-full",{"aiui-dark":l==="dark"},e,s?.root),...i,children:[a.title&&t(g,{as:"h2",html:a.title,size:4,className:o("text-info-primary mb-4",s?.title)}),a.description&&t(w,{size:3,as:"p",html:a.description,className:o("text-info-primary mb-6",s?.description)}),r(j,{defaultValue:a.productsTab?.[0]?.id,className:"w-full",children:[B&&t(G,{className:"mb-6",children:a.productsTab?.map(p=>t(W,{value:p.id,children:p.tab},"tab-"+p.id))}),B?a.productsTab?.map(p=>t(Z,{value:p.id,children:t(P,{products:p.data})},"tab-content-"+p.id)):t(P,{products:a.productsCard})]})]})})});F.displayName="MediaShelf";var se=F;export{N as ProductCard,se as default,L as useMediaShelfContext};
+//# sourceMappingURL=index.js.map

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 };