@anker-in/headless-ui 1.3.21 → 1.3.22-alpha.1781754422536

package/dist/esm/biz-components/AccessoriesShelf/components/AccessoryShelf/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import AccessoryProductCard from './ProductCard.js';
+import type { AccessoryProductData, AccessoryCardSemanticName, AccessoryCopyConfig } from './types.js';
+export type { AccessoryProductData, AccessoryCardSemanticName, AccessoryCopyConfig };
+export type { AccessoryProductCardProps } from './ProductCard.js';
+export interface AccessoryShelfProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 产品卡片区域 — 业务端自行组合布局容器 + AccessoryShelf.ProductCard
+     *
+     * @example 搭配 AccessoriesProductGrid
+     * ```tsx
+     * <AccessoryShelf data={{ title: 'Add-ons' }}>
+     *   <AccessoriesProductGrid maxVisible={8} showMoreText="Show more" showLessText="Show less">
+     *     {products.map(p => (
+     *       <AccessoryShelf.ProductCard
+     *         key={p.sku}
+     *         product={p}
+     *         addedQuantity={quantities[p.sku]}
+     *         isLoading={loadingSkus.has(p.sku)}
+     *         onAddToCart={handleAddToCart}
+     *       />
+     *     ))}
+     *   </AccessoriesProductGrid>
+     * </AccessoryShelf>
+     * ```
+     */
+    children: React.ReactNode;
+    /** 语义化类名覆盖（仅 root/title/description 有效） */
+    classNames?: Partial<Record<'root' | 'title' | 'description', string>>;
+}
+export interface AccessoryShelfComponent extends React.ForwardRefExoticComponent<AccessoryShelfProps & React.RefAttributes<HTMLDivElement>> {
+    /** 配件卡片子组件，业务端在 children 中直接使用 */
+    ProductCard: typeof AccessoryProductCard;
+}
+export { AccessoryProductCard };
+declare const _default: React.ForwardRefExoticComponent<Omit<AccessoryShelfProps & React.RefAttributes<HTMLDivElement>, "container" | keyof import("../../../../shared/Styles.js").StylesProps> & import("../../../../shared/Styles.js").StylesProps & import("../../../index.js").ContainerProps & React.RefAttributes<unknown>> & {
+    readonly $$typeof: symbol;
+    ProductCard: typeof AccessoryProductCard;
+};
+export default _default;

package/dist/esm/biz-components/AccessoriesShelf/components/AccessoryShelf/index.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as l}from"react/jsx-runtime";import*as e from"react";import{cn as f}from"../../../../helpers/index.js";import{withLayout as p}from"../../../../shared/Styles.js";import o from"./ProductCard.js";const t=e.forwardRef(({className:s,children:a,classNames:d,...i},n)=>{const r=e.useRef(null);return e.useImperativeHandle(n,()=>r.current),l("div",{ref:r,className:f("w-full",s,d?.root),...i,children:a})});t.displayName="AccessoryShelf";const c=t;c.ProductCard=o;var A=p(c);export{o as AccessoryProductCard,A as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccessoriesShelf/components/AccessoryShelf/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/biz-components/AccessoriesShelf/components/AccessoryShelf/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../../../helpers/index.js'\nimport { withLayout } from '../../../../shared/Styles.js'\nimport AccessoryProductCard from './ProductCard.js'\nimport type { AccessoryProductData, AccessoryCardSemanticName, AccessoryCopyConfig } from './types.js'\n\nexport type { AccessoryProductData, AccessoryCardSemanticName, AccessoryCopyConfig }\nexport type { AccessoryProductCardProps } from './ProductCard.js'\n\nexport interface AccessoryShelfProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * \u4EA7\u54C1\u5361\u7247\u533A\u57DF \u2014 \u4E1A\u52A1\u7AEF\u81EA\u884C\u7EC4\u5408\u5E03\u5C40\u5BB9\u5668 + AccessoryShelf.ProductCard\n   *\n   * @example \u642D\u914D AccessoriesProductGrid\n   * ```tsx\n   * <AccessoryShelf data={{ title: 'Add-ons' }}>\n   *   <AccessoriesProductGrid maxVisible={8} showMoreText=\"Show more\" showLessText=\"Show less\">\n   *     {products.map(p => (\n   *       <AccessoryShelf.ProductCard\n   *         key={p.sku}\n   *         product={p}\n   *         addedQuantity={quantities[p.sku]}\n   *         isLoading={loadingSkus.has(p.sku)}\n   *         onAddToCart={handleAddToCart}\n   *       />\n   *     ))}\n   *   </AccessoriesProductGrid>\n   * </AccessoryShelf>\n   * ```\n   */\n  children: React.ReactNode\n  /** \u8BED\u4E49\u5316\u7C7B\u540D\u8986\u76D6\uFF08\u4EC5 root/title/description \u6709\u6548\uFF09 */\n  classNames?: Partial<Record<'root' | 'title' | 'description', string>>\n}\n\nexport interface AccessoryShelfComponent extends React.ForwardRefExoticComponent<\n  AccessoryShelfProps & React.RefAttributes<HTMLDivElement>\n> {\n  /** \u914D\u4EF6\u5361\u7247\u5B50\u7EC4\u4EF6\uFF0C\u4E1A\u52A1\u7AEF\u5728 children \u4E2D\u76F4\u63A5\u4F7F\u7528 */\n  ProductCard: typeof AccessoryProductCard\n}\n\nconst AccessoryShelf = React.forwardRef<HTMLDivElement, AccessoryShelfProps>(\n  ({ className, children, classNames, ...props }, ref) => {\n    const boxRef = React.useRef<HTMLDivElement>(null)\n\n    React.useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n    return (\n      <div ref={boxRef} className={cn('w-full', className, classNames?.root)} {...props}>\n        {children}\n      </div>\n    )\n  }\n)\n\nAccessoryShelf.displayName = 'AccessoryShelf'\n\n// \u590D\u5408\u7EC4\u4EF6\uFF1AAccessoryShelf.ProductCard \u53EF\u76F4\u63A5\u4F7F\u7528\nconst AccessoryShelfWithProductCard = AccessoryShelf as AccessoryShelfComponent\nAccessoryShelfWithProductCard.ProductCard = AccessoryProductCard\n\nexport { AccessoryProductCard }\nexport default withLayout(AccessoryShelfWithProductCard)\n"],
+  "mappings": "aAmDM,cAAAA,MAAA,oBAjDN,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,+BACnB,OAAS,cAAAC,MAAkB,+BAC3B,OAAOC,MAA0B,mBAuCjC,MAAMC,EAAiBJ,EAAM,WAC3B,CAAC,CAAE,UAAAK,EAAW,SAAAC,EAAU,WAAAC,EAAY,GAAGC,CAAM,EAAGC,IAAQ,CACtD,MAAMC,EAASV,EAAM,OAAuB,IAAI,EAEhD,OAAAA,EAAM,oBAAoBS,EAAK,IAAMC,EAAO,OAAyB,EAGnEX,EAAC,OAAI,IAAKW,EAAQ,UAAWT,EAAG,SAAUI,EAAWE,GAAY,IAAI,EAAI,GAAGC,EACzE,SAAAF,EACH,CAEJ,CACF,EAEAF,EAAe,YAAc,iBAG7B,MAAMO,EAAgCP,EACtCO,EAA8B,YAAcR,EAG5C,IAAOS,EAAQV,EAAWS,CAA6B",
+  "names": ["jsx", "React", "cn", "withLayout", "AccessoryProductCard", "AccessoryShelf", "className", "children", "classNames", "props", "ref", "boxRef", "AccessoryShelfWithProductCard", "AccessoryShelf_default"]
+}

package/dist/esm/biz-components/AccessoriesShelf/components/AccessoryShelf/types.d.ts

@@ -0,0 +1,103 @@
+import type React from 'react';
+import type { BadgeProps } from '../../../../components/badge.js';
+/**
+ * 语义化类名
+ */
+export type AccessoryCardSemanticName = 'root' | 'image' | 'tags' | 'title' | 'description' | 'priceArea' | 'currentPrice' | 'originalPrice' | 'memberPriceNote' | 'buttonGroup' | 'addButton';
+/**
+ * 文案配置
+ */
+export interface AccessoryCopyConfig {
+    /** 售罄文案，默认 "Sold Out" */
+    outOfStockLabel?: string;
+    /** 加购按钮文案，默认 "Add" */
+    addLabel?: string;
+    /** 已加购按钮文案前缀，默认 "Added"，最终显示为 "Added (n)" */
+    addedLabel?: string;
+    /** 不可用按钮文案，默认 "Unavailable" */
+    unavailableLabel?: string;
+    /** 会员价标签文本，默认 "Member price" */
+    memberPriceLabel?: string;
+    /** Plus 会员价标签文本，默认 "Plus member price" */
+    plusMemberPriceLabel?: string;
+}
+/**
+ * 产品数据接口（UI 层，价格已格式化为字符串）
+ * 业务端负责从 API 获取并转换后传入
+ */
+export interface AccessoryProductData {
+    /** SKU 唯一标识 */
+    sku: string;
+    /** 产品名称 */
+    name: string;
+    /** 产品主图 URL */
+    image: string;
+    /** 自定义图片 URL（覆盖 image） */
+    custom_image?: string;
+    /** 产品 handle */
+    handle: string;
+    /** Shopify ID */
+    shopify_id?: string;
+    /** 产品链接 */
+    listingLink?: string;
+    /** 自定义名称（覆盖 name） */
+    custom_name?: string;
+    /** 自定义描述（覆盖 description） */
+    custom_description?: string;
+    /** 产品描述 */
+    description?: string;
+    /** 现价（已格式化，如 "$49.99"） */
+    price: string;
+    /** 原价（已格式化，有则显示删除线） */
+    originalPrice?: string;
+    /**
+     * 会员价提示（已格式化，如 "$42.49"）
+     * 显示在现价下方小字，配合 memberPriceType 决定标签颜色
+     */
+    memberPriceNote?: string;
+    /** 会员价类型，决定标签文案和颜色 */
+    memberPriceType?: 'member' | 'plus-member';
+    /** 是否可售 */
+    availableForSale: boolean;
+    /**
+     * 可用库存上限（用于限制加购数量）
+     * 业务端从库存 API 获取后传入，组件只用于判断是否达到上限
+     */
+    quantityAvailable?: number | null;
+    /** tags 列表 */
+    tags?: Array<{
+        label: string;
+        variant: BadgeProps['variant'];
+        promotionalType?: BadgeProps['promotionalType'];
+    } | React.ReactNode>;
+}
+/**
+ * AccessoryProductCard Props
+ * 所有业务状态（addedQuantity、isLoading 等）由业务端维护并传入
+ */
+export interface AccessoryProductCardProps {
+    /** 产品数据 */
+    product: AccessoryProductData;
+    /** 已加购数量（业务端维护） */
+    addedQuantity?: number;
+    /** 最大可加购数量（undefined 则不限制） */
+    maxQuantity?: number;
+    /** 加购 loading 状态（业务端维护） */
+    isLoading?: boolean;
+    /** 是否显示 tags */
+    showTags?: boolean;
+    /** 是否显示原价（删除线） */
+    showOriginalPrice?: boolean;
+    /** 是否显示会员价小字 */
+    showMemberPrice?: boolean;
+    /** 点击产品图/标题回调（不传则降级为 listingLink href） */
+    onProductClick?: (product: AccessoryProductData) => void;
+    /** 点击加购按钮回调 */
+    onAddToCart?: (product: AccessoryProductData) => void;
+    /** 样式类名 */
+    className?: string;
+    /** 语义化类名覆盖 */
+    classNames?: Partial<Record<AccessoryCardSemanticName, string>>;
+    /** 文案配置 */
+    copy?: AccessoryCopyConfig;
+}

package/dist/esm/biz-components/AccessoriesShelf/components/AccessoryShelf/types.js

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

package/dist/esm/biz-components/AccessoriesShelf/components/AccessoryShelf/types.js.map

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

package/dist/esm/biz-components/AccessoriesShelf/components/MainProductArea/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { AccessoryProductData } from '../AccessoryShelf/types.js';
+interface VariantInfo {
+    image?: {
+        url: string;
+        altText?: string | null;
+    } | null;
+    selectedOptions?: Array<{
+        name: string;
+        value: string;
+    }>;
+}
+export interface MainProductAreaProps {
+    productTitle: string;
+    variant: VariantInfo;
+    addedItems?: AccessoryProductData[];
+    quantity?: number;
+    checkedGiftNum?: number;
+    priceSlot?: React.ReactNode;
+    actionSlot?: React.ReactNode;
+    onItemQuantityChange?: (item: AccessoryProductData, qty: number) => void;
+    onItemRemove?: (item: AccessoryProductData) => void;
+    addedItemQuantities?: Record<string, number>;
+    className?: string;
+}
+declare const MainProductArea: React.ForwardRefExoticComponent<MainProductAreaProps & React.RefAttributes<HTMLDivElement>>;
+export default MainProductArea;

package/dist/esm/biz-components/AccessoriesShelf/components/MainProductArea/index.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as p from"react";import{cn as T}from"../../../../helpers/index.js";import S from"../../../../components/input-number.js";import{Dialog as j,DialogContent as O,DialogHeader as q,DialogTitle as H,DialogFooter as I}from"../../../../components/dialog.js";import y from"../../../../components/button.js";import{Text as f,Heading as N,Picture as M}from"../../../../components/index.js";const Q=({selectedOptions:i,quantity:o,checkedGiftNum:a})=>{const r=[...i??[],...o!=null?[{name:"Qty",value:String(o)}]:[],...a?[{name:"Gift",value:String(a)}]:[]].filter(s=>s.value);return r.length?e(f,{as:"p",className:"lg-desktop:text-[16px] text-info-tertiary text-[14px] font-bold leading-[1.4] tracking-[-0.28px]",children:r.map((s,c)=>t(p.Fragment,{children:[c>0&&e("span",{className:"mx-1",children:"\xB7"}),s.name,": ",s.value]},s.name))}):null},F=({item:i,quantity:o,onQuantityChange:a,onRemoveClick:r})=>{const s=c=>{c<1?r():a(c)};return t("div",{className:"flex items-center gap-3",children:[e("div",{className:"size-[80px] shrink-0 overflow-hidden rounded-md mix-blend-multiply",children:e("img",{src:i.image??"",alt:i.name,className:"size-full object-contain"})}),t("div",{className:"laptop:gap-2 flex w-full flex-col gap-2",children:[t("div",{className:"laptop:flex-row laptop:justify-between flex w-full min-w-0 flex-1 flex-col gap-1",children:[e(N,{size:2,className:"text-info-primary laptop:text-base line-clamp-2 text-[14px] font-bold leading-[1.2] tracking-[-0.28px]",children:i.name}),t("div",{className:"flex items-center gap-1",children:[e(f,{as:"span",className:"text-info-primary laptop:text-base text-[14px] font-bold leading-tight tracking-[-0.28px]",children:i.price}),e(f,{as:"span",className:"text-info-tertiary text-[14px] font-bold leading-tight tracking-[-0.28px] line-through",children:i.originalPrice})]})]}),t("div",{className:"flex shrink-0 flex-row justify-between",children:[e(S,{classNames:{root:"border-lines border-[1px] rounded-lg",inputWrapper:"mx-0 laptop:w-[40px] size-[28px] laptop:h-[32px]",input:"border-none",button:"border-none size-[28px] laptop:size-8"},value:o,min:0,onChange:s}),e("button",{onClick:r,className:"text-info-tertiary laptop:text-base text-[14px] font-bold leading-tight tracking-[-0.28px] underline",children:"Remove"})]})]})]})},b=p.forwardRef(({productTitle:i,variant:o,addedItems:a=[],quantity:r,checkedGiftNum:s,priceSlot:c,actionSlot:h,onItemQuantityChange:k,onItemRemove:w,addedItemQuantities:m,className:P},R)=>{const[D,g]=p.useState(()=>m??{}),[u,d]=p.useState(null);p.useEffect(()=>{m&&g(m)},[m]);const C=(n,l)=>{g(x=>({...x,[n.sku]:l})),k?.(n,l)},A=()=>{if(!u)return;const n=a.find(l=>l.sku===u);d(null),n&&w?.(n)},z=a.find(n=>n.sku===u),v=n=>n.map(l=>e(F,{item:l,quantity:D[l.sku]??1,onQuantityChange:x=>C(l,x),onRemoveClick:()=>d(l.sku)},l.sku));return t("div",{ref:R,className:T("rounded-card",P),children:[t("div",{className:"laptop:gap-16 laptop:items-center flex items-start gap-2",children:[e("div",{className:"laptop:size-[216px] size-[80px] shrink-0 overflow-hidden mix-blend-multiply",children:e(M,{source:o?.image?.url,alt:o?.image?.altText??i,className:"size-full",imgClassName:"object-cover h-full"})}),t("div",{className:"flex-1",children:[t("div",{className:"laptop:flex-row flex min-w-0 flex-col items-center justify-between gap-4",children:[t("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[e(N,{as:"h1",size:2,className:"text-info-primary tracking-[-0.8px]",html:i}),e(Q,{selectedOptions:o.selectedOptions,quantity:r,checkedGiftNum:s})]}),t("div",{className:"laptop:justify-end laptop:flex-row flex w-full flex-1 shrink-0 flex-col items-start gap-2",children:[c&&e("div",{className:"flex flex-col gap-1",children:c}),h]})]}),a.length>0&&t("div",{className:"laptop:block hidden",children:[e("div",{className:"bg-lines-1 my-6 h-px"}),e("div",{className:"flex flex-col gap-4",children:v(a)})]})]})]}),a.length>0&&t("div",{className:"laptop:hidden",children:[e("div",{className:"bg-lines-1 my-8 h-px"}),e("div",{className:"flex flex-col gap-4",children:v(a)})]}),e(j,{open:!!u,onOpenChange:n=>!n&&d(null),children:t(O,{className:"max-w-sm",children:[e(q,{children:e(H,{children:"Remove item?"})}),t(f,{as:"p",className:"text-info-tertiary text-[14px] leading-[1.4]",children:["Are you sure you want to remove ",e("span",{className:"text-info-primary",children:z?.name})," from your cart?"]}),t(I,{className:"gap-2",children:[e(y,{variant:"secondary",size:"base",onClick:()=>d(null),children:"Cancel"}),e(y,{variant:"primary",size:"base",onClick:A,children:"Remove"})]})]})})]})});b.displayName="MainProductArea";var W=b;export{W as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccessoriesShelf/components/MainProductArea/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/biz-components/AccessoriesShelf/components/MainProductArea/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../../../helpers/index.js'\nimport InputNumber, { type InputNumberProps } from '../../../../components/input-number.js'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../../../components/dialog.js'\nimport Button from '../../../../components/button.js'\nimport { Text, Heading, Picture } from '../../../../components/index.js'\nimport type { AccessoryProductData } from '../AccessoryShelf/types.js'\n\ninterface VariantInfo {\n  image?: { url: string; altText?: string | null } | null\n  selectedOptions?: Array<{ name: string; value: string }>\n}\n\nexport interface MainProductAreaProps {\n  productTitle: string\n  variant: VariantInfo\n  addedItems?: AccessoryProductData[]\n  quantity?: number\n  checkedGiftNum?: number\n  priceSlot?: React.ReactNode\n  actionSlot?: React.ReactNode\n  onItemQuantityChange?: (item: AccessoryProductData, qty: number) => void\n  onItemRemove?: (item: AccessoryProductData) => void\n  addedItemQuantities?: Record<string, number>\n  className?: string\n}\n\nconst ParamList = ({\n  selectedOptions,\n  quantity,\n  checkedGiftNum,\n}: {\n  selectedOptions?: VariantInfo['selectedOptions']\n  quantity?: number\n  checkedGiftNum?: number\n}) => {\n  const params = [\n    ...(selectedOptions ?? []),\n    ...(quantity != null ? [{ name: 'Qty', value: String(quantity) }] : []),\n    ...(checkedGiftNum ? [{ name: 'Gift', value: String(checkedGiftNum) }] : []),\n  ].filter(o => o.value)\n\n  if (!params.length) return null\n  return (\n    <Text\n      as=\"p\"\n      className=\"lg-desktop:text-[16px] text-info-tertiary text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\"\n    >\n      {params.map((o, i) => (\n        <React.Fragment key={o.name}>\n          {i > 0 && <span className=\"mx-1\">\u00B7</span>}\n          {o.name}: {o.value}\n        </React.Fragment>\n      ))}\n    </Text>\n  )\n}\n\nconst AddedItemRow = ({\n  item,\n  quantity,\n  onQuantityChange,\n  onRemoveClick,\n}: {\n  item: AccessoryProductData\n  quantity: number\n  onQuantityChange: (qty: number) => void\n  onRemoveClick: () => void\n}) => {\n  const handleQuantityChange = (qty: number) => {\n    if (qty < 1) {\n      onRemoveClick()\n    } else {\n      onQuantityChange(qty)\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <div className=\"size-[80px] shrink-0 overflow-hidden rounded-md mix-blend-multiply\">\n        <img src={item.image ?? ''} alt={item.name} className=\"size-full object-contain\" />\n      </div>\n      <div className=\"laptop:gap-2 flex w-full flex-col gap-2\">\n        <div className=\"laptop:flex-row laptop:justify-between flex w-full min-w-0 flex-1 flex-col gap-1\">\n          <Heading\n            size={2}\n            className=\"text-info-primary laptop:text-base line-clamp-2 text-[14px] font-bold leading-[1.2] tracking-[-0.28px]\"\n          >\n            {item.name}\n          </Heading>\n          <div className=\"flex items-center gap-1\">\n            <Text\n              as=\"span\"\n              className=\"text-info-primary laptop:text-base text-[14px] font-bold leading-tight tracking-[-0.28px]\"\n            >\n              {item.price}\n            </Text>\n            <Text\n              as=\"span\"\n              className=\"text-info-tertiary text-[14px] font-bold leading-tight tracking-[-0.28px] line-through\"\n            >\n              {item.originalPrice}\n            </Text>\n          </div>\n        </div>\n        <div className=\"flex shrink-0 flex-row justify-between\">\n          <InputNumber\n            classNames={{\n              root: 'border-lines border-[1px] rounded-lg',\n              inputWrapper: 'mx-0 laptop:w-[40px] size-[28px] laptop:h-[32px]',\n              input: 'border-none',\n              button: 'border-none size-[28px] laptop:size-8',\n            }}\n            value={quantity}\n            min={0}\n            onChange={handleQuantityChange as InputNumberProps['onChange']}\n          />\n          <button\n            onClick={onRemoveClick}\n            className=\"text-info-tertiary laptop:text-base text-[14px] font-bold leading-tight tracking-[-0.28px] underline\"\n          >\n            Remove\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MainProductArea = React.forwardRef<HTMLDivElement, MainProductAreaProps>(\n  (\n    {\n      productTitle,\n      variant,\n      addedItems = [],\n      quantity,\n      checkedGiftNum,\n      priceSlot,\n      actionSlot,\n      onItemQuantityChange,\n      onItemRemove,\n      addedItemQuantities,\n      className,\n    },\n    ref\n  ) => {\n    const [quantities, setQuantities] = React.useState<Record<string, number>>(() => addedItemQuantities ?? {})\n    const [pendingRemoveSku, setPendingRemoveSku] = React.useState<string | null>(null)\n\n    React.useEffect(() => {\n      if (addedItemQuantities) {\n        setQuantities(addedItemQuantities)\n      }\n    }, [addedItemQuantities])\n\n    const handleQuantityChange = (item: AccessoryProductData, qty: number) => {\n      setQuantities(prev => ({ ...prev, [item.sku]: qty }))\n      onItemQuantityChange?.(item, qty)\n    }\n\n    const handleRemoveConfirm = () => {\n      if (!pendingRemoveSku) return\n      const item = addedItems.find(i => i.sku === pendingRemoveSku)\n      setPendingRemoveSku(null)\n      if (item) onItemRemove?.(item)\n    }\n\n    const pendingRemoveItem = addedItems.find(i => i.sku === pendingRemoveSku)\n\n    const renderItems = (items: AccessoryProductData[]) =>\n      items.map(item => (\n        <AddedItemRow\n          key={item.sku}\n          item={item}\n          quantity={quantities[item.sku] ?? 1}\n          onQuantityChange={qty => handleQuantityChange(item, qty)}\n          onRemoveClick={() => setPendingRemoveSku(item.sku)}\n        />\n      ))\n\n    return (\n      <div ref={ref} className={cn('rounded-card', className)}>\n        <div className=\"laptop:gap-16 laptop:items-center flex items-start gap-2\">\n          <div className=\"laptop:size-[216px] size-[80px] shrink-0 overflow-hidden mix-blend-multiply\">\n            <Picture\n              source={variant?.image?.url}\n              alt={variant?.image?.altText ?? productTitle}\n              className=\"size-full\"\n              imgClassName=\"object-cover h-full\"\n            />\n          </div>\n\n          <div className=\"flex-1\">\n            <div className=\"laptop:flex-row flex min-w-0 flex-col items-center justify-between gap-4\">\n              <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                <Heading as=\"h1\" size={2} className=\"text-info-primary tracking-[-0.8px]\" html={productTitle} />\n                <ParamList\n                  selectedOptions={variant.selectedOptions}\n                  quantity={quantity}\n                  checkedGiftNum={checkedGiftNum}\n                />\n              </div>\n              <div className=\"laptop:justify-end laptop:flex-row flex w-full flex-1 shrink-0 flex-col items-start gap-2\">\n                {priceSlot && <div className=\"flex flex-col gap-1\">{priceSlot}</div>}\n                {actionSlot}\n              </div>\n            </div>\n\n            {addedItems.length > 0 && (\n              <div className=\"laptop:block hidden\">\n                <div className=\"bg-lines-1 my-6 h-px\" />\n                <div className=\"flex flex-col gap-4\">{renderItems(addedItems)}</div>\n              </div>\n            )}\n          </div>\n        </div>\n\n        {addedItems.length > 0 && (\n          <div className=\"laptop:hidden\">\n            <div className=\"bg-lines-1 my-8 h-px\" />\n            <div className=\"flex flex-col gap-4\">{renderItems(addedItems)}</div>\n          </div>\n        )}\n\n        <Dialog open={!!pendingRemoveSku} onOpenChange={open => !open && setPendingRemoveSku(null)}>\n          <DialogContent className=\"max-w-sm\">\n            <DialogHeader>\n              <DialogTitle>Remove item?</DialogTitle>\n            </DialogHeader>\n            <Text as=\"p\" className=\"text-info-tertiary text-[14px] leading-[1.4]\">\n              Are you sure you want to remove <span className=\"text-info-primary\">{pendingRemoveItem?.name}</span> from\n              your cart?\n            </Text>\n            <DialogFooter className=\"gap-2\">\n              <Button variant=\"secondary\" size=\"base\" onClick={() => setPendingRemoveSku(null)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" size=\"base\" onClick={handleRemoveConfirm}>\n                Remove\n              </Button>\n            </DialogFooter>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n)\n\nMainProductArea.displayName = 'MainProductArea'\n\nexport default MainProductArea\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "cn", "InputNumber", "Dialog", "DialogContent", "DialogHeader", "DialogTitle", "DialogFooter", "Button", "Text", "Heading", "Picture", "ParamList", "selectedOptions", "quantity", "checkedGiftNum", "params", "o", "i", "AddedItemRow", "item", "onQuantityChange", "onRemoveClick", "handleQuantityChange", "qty", "MainProductArea", "productTitle", "variant", "addedItems", "priceSlot", "actionSlot", "onItemQuantityChange", "onItemRemove", "addedItemQuantities", "className", "ref", "quantities", "setQuantities", "pendingRemoveSku", "setPendingRemoveSku", "prev", "handleRemoveConfirm", "pendingRemoveItem", "renderItems", "items", "open", "MainProductArea_default"]
+}

package/dist/esm/biz-components/AccessoriesShelf/components/ProductGrid/index.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface ProductGridProps {
+    children: React.ReactNode;
+    maxVisible?: number;
+    showMoreText?: string;
+    showLessText?: string;
+    animated?: boolean;
+    className?: string;
+}
+declare const ProductGrid: React.ForwardRefExoticComponent<ProductGridProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductGrid;

package/dist/esm/biz-components/AccessoriesShelf/components/ProductGrid/index.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as o,jsxs as x}from"react/jsx-runtime";import*as t from"react";import{cn as a}from"../../../../helpers/index.js";import h from"../../../../components/button.js";const d=t.forwardRef(({children:l,maxVisible:s=8,showMoreText:n="Show more",showLessText:c="Show less",animated:m=!0,className:p},u)=>{const[r,f]=t.useState(!1),e=t.Children.toArray(l),i=e.length>s,g=i&&!r?e.slice(0,s):e;return x("div",{ref:u,className:a("flex flex-col gap-6",p),children:[o("div",{className:a("tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 grid grid-cols-1 gap-4",m&&"transition-all duration-500 ease-in-out"),children:g}),i&&o("div",{className:"flex justify-center",children:o(h,{variant:"link",size:"base",onClick:()=>f(v=>!v),children:r?c:n})})]})});d.displayName="ProductGrid";var b=d;export{b as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccessoriesShelf/components/ProductGrid/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/biz-components/AccessoriesShelf/components/ProductGrid/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../../../helpers/index.js'\nimport Button from '../../../../components/button.js'\n\nexport interface ProductGridProps {\n  children: React.ReactNode\n  maxVisible?: number\n  showMoreText?: string\n  showLessText?: string\n  animated?: boolean\n  className?: string\n}\n\nconst ProductGrid = React.forwardRef<HTMLDivElement, ProductGridProps>(\n  (\n    { children, maxVisible = 8, showMoreText = 'Show more', showLessText = 'Show less', animated = true, className },\n    ref\n  ) => {\n    const [expanded, setExpanded] = React.useState(false)\n    const items = React.Children.toArray(children)\n    const hasMore = items.length > maxVisible\n    const visibleItems = hasMore && !expanded ? items.slice(0, maxVisible) : items\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-6', className)}>\n        <div\n          className={cn(\n            'tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 grid grid-cols-1 gap-4',\n            animated && 'transition-all duration-500 ease-in-out'\n          )}\n        >\n          {visibleItems}\n        </div>\n        {hasMore && (\n          <div className=\"flex justify-center\">\n            <Button variant=\"link\" size=\"base\" onClick={() => setExpanded(prev => !prev)}>\n              {expanded ? showLessText : showMoreText}\n            </Button>\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nProductGrid.displayName = 'ProductGrid'\n\nexport default ProductGrid\n"],
+  "mappings": "aA0BM,OACE,OAAAA,EADF,QAAAC,MAAA,oBAxBN,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,+BACnB,OAAOC,MAAY,mCAWnB,MAAMC,EAAcH,EAAM,WACxB,CACE,CAAE,SAAAI,EAAU,WAAAC,EAAa,EAAG,aAAAC,EAAe,YAAa,aAAAC,EAAe,YAAa,SAAAC,EAAW,GAAM,UAAAC,CAAU,EAC/GC,IACG,CACH,KAAM,CAACC,EAAUC,CAAW,EAAIZ,EAAM,SAAS,EAAK,EAC9Ca,EAAQb,EAAM,SAAS,QAAQI,CAAQ,EACvCU,EAAUD,EAAM,OAASR,EACzBU,EAAeD,GAAW,CAACH,EAAWE,EAAM,MAAM,EAAGR,CAAU,EAAIQ,EAEzE,OACEd,EAAC,OAAI,IAAKW,EAAK,UAAWT,EAAG,sBAAuBQ,CAAS,EAC3D,UAAAX,EAAC,OACC,UAAWG,EACT,mFACAO,GAAY,yCACd,EAEC,SAAAO,EACH,EACCD,GACChB,EAAC,OAAI,UAAU,sBACb,SAAAA,EAACI,EAAA,CAAO,QAAQ,OAAO,KAAK,OAAO,QAAS,IAAMU,EAAYI,GAAQ,CAACA,CAAI,EACxE,SAAAL,EAAWJ,EAAeD,EAC7B,EACF,GAEJ,CAEJ,CACF,EAEAH,EAAY,YAAc,cAE1B,IAAOc,EAAQd",
+  "names": ["jsx", "jsxs", "React", "cn", "Button", "ProductGrid", "children", "maxVisible", "showMoreText", "showLessText", "animated", "className", "ref", "expanded", "setExpanded", "items", "hasMore", "visibleItems", "prev", "ProductGrid_default"]
+}

package/dist/esm/biz-components/AccessoriesShelf/components/PromoBanner/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { UserType, BannerConfig, BannerAction } from '../../types.js';
+export interface PromoBannerProps {
+    userType: UserType;
+    configs: Partial<Record<UserType, BannerConfig | null>>;
+    onAction?: (action: BannerAction) => void;
+    className?: string;
+}
+declare const PromoBanner: React.ForwardRefExoticComponent<PromoBannerProps & React.RefAttributes<HTMLDivElement>>;
+export default PromoBanner;

package/dist/esm/biz-components/AccessoriesShelf/components/PromoBanner/index.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as a}from"react/jsx-runtime";import*as p from"react";import{cn as m}from"../../../../helpers/index.js";import{Text as u}from"../../../../components/index.js";const g={guest:"bg-[#E1F8FE]",member:"bg-[#E1F8FE]","plus-member":"bg-[#FFF1E1]"},i=p.forwardRef(({userType:r,configs:c,onAction:s,className:d},l)=>{const e=c[r];if(!e)return null;const t=()=>{e.action&&s?.(e.action)},n=!!e.action,f=e.backgroundColor?void 0:g[r];return a("div",{ref:l,role:n?"button":void 0,tabIndex:n?0:void 0,onClick:n?t:void 0,onKeyDown:n?o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),t())}:void 0,className:m("rounded-card flex items-center justify-center px-6 py-4","lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]",f,n&&"cursor-pointer",d),style:e.backgroundColor?{backgroundColor:e.backgroundColor}:void 0,children:a(u,{html:e.text,className:"flex items-center gap-1"})})});i.displayName="PromoBanner";var x=i;export{x as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccessoriesShelf/components/PromoBanner/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/biz-components/AccessoriesShelf/components/PromoBanner/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../../../helpers/index.js'\nimport type { UserType, BannerConfig, BannerAction } from '../../types.js'\nimport { Text } from '../../../../components/index.js'\n\nexport interface PromoBannerProps {\n  userType: UserType\n  configs: Partial<Record<UserType, BannerConfig | null>>\n  onAction?: (action: BannerAction) => void\n  className?: string\n}\n\nconst BANNER_BG: Record<UserType, string> = {\n  guest: 'bg-[#E1F8FE]',\n  member: 'bg-[#E1F8FE]',\n  'plus-member': 'bg-[#FFF1E1]',\n}\n\nconst PromoBanner = React.forwardRef<HTMLDivElement, PromoBannerProps>(\n  ({ userType, configs, onAction, className }, ref) => {\n    const config = configs[userType]\n    if (!config) return null\n\n    const handleClick = () => {\n      if (config.action) onAction?.(config.action)\n    }\n\n    const hasClickBehavior = !!config.action\n    const bgColor = config.backgroundColor ? undefined : BANNER_BG[userType]\n\n    return (\n      <div\n        ref={ref}\n        role={hasClickBehavior ? 'button' : undefined}\n        tabIndex={hasClickBehavior ? 0 : undefined}\n        onClick={hasClickBehavior ? handleClick : undefined}\n        onKeyDown={\n          hasClickBehavior\n            ? e => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                  handleClick()\n                }\n              }\n            : undefined\n        }\n        className={cn(\n          'rounded-card flex items-center justify-center px-6 py-4',\n          'lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4] tracking-[-0.28px]',\n          bgColor,\n          hasClickBehavior && 'cursor-pointer',\n          className\n        )}\n        style={config.backgroundColor ? { backgroundColor: config.backgroundColor } : undefined}\n      >\n        <Text html={config.text} className=\"flex items-center gap-1\" />\n      </div>\n    )\n  }\n)\n\nPromoBanner.displayName = 'PromoBanner'\n\nexport default PromoBanner\n"],
+  "mappings": "aAyDQ,cAAAA,MAAA,oBAvDR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,+BAEnB,OAAS,QAAAC,MAAY,kCASrB,MAAMC,EAAsC,CAC1C,MAAO,eACP,OAAQ,eACR,cAAe,cACjB,EAEMC,EAAcJ,EAAM,WACxB,CAAC,CAAE,SAAAK,EAAU,QAAAC,EAAS,SAAAC,EAAU,UAAAC,CAAU,EAAGC,IAAQ,CACnD,MAAMC,EAASJ,EAAQD,CAAQ,EAC/B,GAAI,CAACK,EAAQ,OAAO,KAEpB,MAAMC,EAAc,IAAM,CACpBD,EAAO,QAAQH,IAAWG,EAAO,MAAM,CAC7C,EAEME,EAAmB,CAAC,CAACF,EAAO,OAC5BG,EAAUH,EAAO,gBAAkB,OAAYP,EAAUE,CAAQ,EAEvE,OACEN,EAAC,OACC,IAAKU,EACL,KAAMG,EAAmB,SAAW,OACpC,SAAUA,EAAmB,EAAI,OACjC,QAASA,EAAmBD,EAAc,OAC1C,UACEC,EACIE,GAAK,EACCA,EAAE,MAAQ,SAAWA,EAAE,MAAQ,OACjCA,EAAE,eAAe,EACjBH,EAAY,EAEhB,EACA,OAEN,UAAWV,EACT,0DACA,gFACAY,EACAD,GAAoB,iBACpBJ,CACF,EACA,MAAOE,EAAO,gBAAkB,CAAE,gBAAiBA,EAAO,eAAgB,EAAI,OAE9E,SAAAX,EAACG,EAAA,CAAK,KAAMQ,EAAO,KAAM,UAAU,0BAA0B,EAC/D,CAEJ,CACF,EAEAN,EAAY,YAAc,cAE1B,IAAOW,EAAQX",
+  "names": ["jsx", "React", "cn", "Text", "BANNER_BG", "PromoBanner", "userType", "configs", "onAction", "className", "ref", "config", "handleClick", "hasClickBehavior", "bgColor", "e", "PromoBanner_default"]
+}

package/dist/esm/biz-components/AccessoriesShelf/components/SectionHeader/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface SectionHeaderProps {
+    title: string;
+    subtitle?: string;
+    selectionNote?: string;
+    className?: string;
+}
+declare const SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export default SectionHeader;

package/dist/esm/biz-components/AccessoriesShelf/components/SectionHeader/index.js

@@ -0,0 +1,2 @@
+"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as p from"react";import{cn as x}from"../../../../helpers/index.js";import{Text as i,Heading as m}from"../../../../components/index.js";const r=p.forwardRef(({title:s,subtitle:t,selectionNote:a,className:l},n)=>o("div",{ref:n,className:x("laptop:flex-row laptop:items-end flex flex-col justify-between gap-6",l),children:[o("div",{className:"flex min-w-0 flex-1 flex-col gap-2",children:[e(m,{html:s,size:4,className:"text-info-primary"}),t&&e(i,{as:"p",html:t,className:"lg-desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.4] tracking-[-0.28px]"})]}),a&&e(i,{as:"p",html:a,className:"lg-desktop:text-[16px] [&_span]:text-brand-0 text-info-primary shrink-0 whitespace-nowrap text-[14px] font-bold leading-[1.4] tracking-[-0.28px]"})]}));r.displayName="SectionHeader";var c=r;export{c as default};
+//# sourceMappingURL=index.js.map

package/dist/esm/biz-components/AccessoriesShelf/components/SectionHeader/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/biz-components/AccessoriesShelf/components/SectionHeader/index.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../../../helpers/index.js'\nimport { Text, Heading } from '../../../../components/index.js'\n\nexport interface SectionHeaderProps {\n  title: string\n  subtitle?: string\n  selectionNote?: string\n  className?: string\n}\n\nconst SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(\n  ({ title, subtitle, selectionNote, className }, ref) => {\n    return (\n      <div ref={ref} className={cn('laptop:flex-row laptop:items-end flex flex-col justify-between gap-6', className)}>\n        <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          <Heading html={title} size={4} className=\"text-info-primary\" />\n          {subtitle && (\n            <Text\n              as=\"p\"\n              html={subtitle}\n              className=\"lg-desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\"\n            />\n          )}\n        </div>\n        {selectionNote && (\n          <Text\n            as=\"p\"\n            html={selectionNote}\n            className=\"lg-desktop:text-[16px] [&_span]:text-brand-0 text-info-primary shrink-0 whitespace-nowrap text-[14px] font-bold leading-[1.4] tracking-[-0.28px]\"\n          />\n        )}\n      </div>\n    )\n  }\n)\n\nSectionHeader.displayName = 'SectionHeader'\n\nexport default SectionHeader\n"],
+  "mappings": "aAiBQ,OACE,OAAAA,EADF,QAAAC,MAAA,oBAfR,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,+BACnB,OAAS,QAAAC,EAAM,WAAAC,MAAe,kCAS9B,MAAMC,EAAgBJ,EAAM,WAC1B,CAAC,CAAE,MAAAK,EAAO,SAAAC,EAAU,cAAAC,EAAe,UAAAC,CAAU,EAAGC,IAE5CV,EAAC,OAAI,IAAKU,EAAK,UAAWR,EAAG,uEAAwEO,CAAS,EAC5G,UAAAT,EAAC,OAAI,UAAU,qCACb,UAAAD,EAACK,EAAA,CAAQ,KAAME,EAAO,KAAM,EAAG,UAAU,oBAAoB,EAC5DC,GACCR,EAACI,EAAA,CACC,GAAG,IACH,KAAMI,EACN,UAAU,kGACZ,GAEJ,EACCC,GACCT,EAACI,EAAA,CACC,GAAG,IACH,KAAMK,EACN,UAAU,mJACZ,GAEJ,CAGN,EAEAH,EAAc,YAAc,gBAE5B,IAAOM,EAAQN",
+  "names": ["jsx", "jsxs", "React", "cn", "Text", "Heading", "SectionHeader", "title", "subtitle", "selectionNote", "className", "ref", "SectionHeader_default"]
+}

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

@@ -0,0 +1,8 @@
+import MainProductArea from './components/MainProductArea/index.js';
+import PromoBanner from './components/PromoBanner/index.js';
+import SectionHeader from './components/SectionHeader/index.js';
+import AccessoriesProductGrid from './components/AccessoriesProductGrid/index.js';
+import type { UserType, AddedItem, BannerConfig, BannerAction, AccessoryCardProduct, AccessoryCardPrice, MoneyV2, Image } from './types.js';
+import type { NormalizedProduct, NormalizedProductVariant, NormalizedCart } from './product.js';
+export { AccessoriesProductGrid, SectionHeader, PromoBanner, MainProductArea };
+export type { UserType, AddedItem, BannerConfig, BannerAction, AccessoryCardProduct, AccessoryCardPrice, MoneyV2, Image, NormalizedProduct, NormalizedProductVariant, NormalizedCart, };

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

@@ -0,0 +1,2 @@
+import r from"./components/MainProductArea/index.js";import o from"./components/PromoBanner/index.js";import e from"./components/SectionHeader/index.js";import t from"./components/AccessoriesProductGrid/index.js";export{t as AccessoriesProductGrid,r as MainProductArea,o as PromoBanner,e as SectionHeader};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/biz-components/AccessoriesShelf/index.tsx"],
+  "sourcesContent": ["// 'use client'\n\nimport MainProductArea from './components/MainProductArea/index.js'\nimport PromoBanner from './components/PromoBanner/index.js'\nimport SectionHeader from './components/SectionHeader/index.js'\nimport AccessoriesProductGrid from './components/AccessoriesProductGrid/index.js'\nimport type {\n  UserType,\n  AddedItem,\n  BannerConfig,\n  BannerAction,\n  AccessoryCardProduct,\n  AccessoryCardPrice,\n  MoneyV2,\n  Image,\n} from './types.js'\nimport type { NormalizedProduct, NormalizedProductVariant, NormalizedCart } from './product.js'\n\n// export interface AccessoriesShelfProps {\n//   userType: UserType\n//   breadcrumb?: { skuName: string; listingHref?: string }\n//   mainProduct: NormalizedProduct\n//   mainVariant: NormalizedProductVariant\n//   addedItems?: AddedItem[]\n//   quantity?: number\n//   checkedGift?: NormalizedProductVariant[]\n//   priceSlot?: React.ReactNode\n//   actionSlot?: React.ReactNode\n//   onItemQuantityChange?: (id: string, qty: number) => void\n//   onItemRemove?: (id: string) => void\n//   sectionHeader: {\n//     title: string\n//     subtitle?: string\n//     selectionNote?: string\n//   }\n//   bannerConfigs?: Partial<Record<UserType, BannerConfig | null>>\n//   onBannerAction?: (action: BannerAction) => void\n//   accessoryCards: React.ReactNode\n//   maxVisible?: number\n//   showMoreText?: string\n//   showLessText?: string\n//   className?: string\n// }\n\n// const AccessoriesShelf = React.forwardRef<HTMLDivElement, AccessoriesShelfProps>(\n//   (\n//     {\n//       userType,\n//       breadcrumb,\n//       mainProduct,\n//       mainVariant,\n//       addedItems,\n//       quantity,\n//       checkedGift,\n//       priceSlot,\n//       actionSlot,\n//       onItemQuantityChange,\n//       onItemRemove,\n//       sectionHeader,\n//       bannerConfigs,\n//       onBannerAction,\n//       accessoryCards,\n//       maxVisible,\n//       showMoreText,\n//       showLessText,\n//       className,\n//     },\n//     ref\n//   ) => {\n//     return (\n//       <div ref={ref} className={cn('flex flex-col gap-6', className)}>\n//         {breadcrumb && (\n//           <Breadcrumb\n//             items={[\n//               ...(breadcrumb.listingHref\n//                 ? [{ label: breadcrumb.skuName, href: breadcrumb.listingHref }]\n//                 : [{ label: breadcrumb.skuName }]),\n//               { label: 'Add-ons' },\n//             ]}\n//           />\n//         )}\n\n//         <MainProductArea\n//           product={mainProduct}\n//           variant={mainVariant}\n//           addedItems={addedItems}\n//           quantity={quantity}\n//           checkedGift={checkedGift}\n//           priceSlot={priceSlot}\n//           actionSlot={actionSlot}\n//           onItemQuantityChange={onItemQuantityChange}\n//           onItemRemove={onItemRemove}\n//         />\n\n//         <hr className=\"border-lines-1\" />\n\n//         <div className=\"flex flex-col gap-4\">\n//           <SectionHeader\n//             title={sectionHeader.title}\n//             subtitle={sectionHeader.subtitle}\n//             selectionNote={sectionHeader.selectionNote}\n//           />\n\n//           {bannerConfigs && <PromoBanner userType={userType} configs={bannerConfigs} onAction={onBannerAction} />}\n\n//           <AccessoriesProductGrid maxVisible={maxVisible} showMoreText={showMoreText} showLessText={showLessText}>\n//             {accessoryCards}\n//           </AccessoriesProductGrid>\n//         </div>\n//       </div>\n//     )\n//   }\n// )\n\n// AccessoriesShelf.displayName = 'AccessoriesShelf'\n\nexport { AccessoriesProductGrid, SectionHeader, PromoBanner, MainProductArea }\nexport type {\n  UserType,\n  AddedItem,\n  BannerConfig,\n  BannerAction,\n  AccessoryCardProduct,\n  AccessoryCardPrice,\n  MoneyV2,\n  Image,\n  NormalizedProduct,\n  NormalizedProductVariant,\n  NormalizedCart,\n}\n"],
+  "mappings": "AAEA,OAAOA,MAAqB,wCAC5B,OAAOC,MAAiB,oCACxB,OAAOC,MAAmB,sCAC1B,OAAOC,MAA4B",
+  "names": ["MainProductArea", "PromoBanner", "SectionHeader", "AccessoriesProductGrid"]
+}