@kenpan/zds-r8f3v1 0.1.0

package/dist/components/product/ProductCard/ProductCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.js","sources":["../../../../src/components/product/ProductCard/ProductCard.tsx"],"sourcesContent":["/**\n * ProductCard component\n *\n * A comprehensive product card component that displays product information\n * with multiple view types, sizes, and availability states.\n * Based on Figma specifications for \"Product card\".\n *\n * Features:\n * - Two view types: tile-view (vertical), list-view (horizontal)\n * - Two product types: Default, Kit (with badge)\n * - Four sizes: lg, md, sm, mini\n * - Three availability states: Available, Call to order, Unauthorized product\n * - Integrates all product sub-components\n */\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport { useTheme } from '@mui/material/styles'\nimport type { Theme, SxProps } from '@mui/material/styles'\nimport { Button } from '../../Button'\nimport { Checkbox } from '../../forms/Checkbox'\nimport { BaseProductImage, type BaseProductImageType } from './BaseProductImage'\nimport { ProductName } from '../ProductName'\nimport { ProductCardPriceDetails } from './ProductCardPriceDetails'\nimport {\n  ProductCardStock,\n  type ProductCardStockStatus,\n} from './ProductCardStock'\nimport { ProductCardActions } from './ProductCardActions'\nimport { BadgePillColor, type BadgeColor } from '../../badge/BadgePillColor'\nimport { type BadgeProps } from '../../badge/Badge'\nimport { Icon } from '../../Icon'\nimport { Tooltip, type TooltipProps } from '../../Tooltip'\nimport { ProductLabels, type ProductLabel } from './ProductLabels'\nimport type { NavItem } from '../../../config/navigation'\nimport type { InputNumberProps } from '../../forms/InputNumber'\n\nexport type ProductCardViewType = 'tile-view' | 'list-view'\nexport type ProductCardProductType = 'Default' | 'Kit'\nexport type ProductCardSize = 'sm' | 'md' | 'lg' | 'mini'\nexport type ProductCardAvailability =\n  | 'Available'\n  | 'Call to order'\n  | 'Unauthorized product'\n\nexport interface HelpIconTooltipProps {\n  tooltipLabel: string\n  tooltipDescription: string\n}\n\n// ProductLabel is now imported from ProductLabels component\n\nexport interface ProductImgProps {\n  productImg: string\n  imgAltTxt?: string\n  navItem?: NavItem\n  'data-attr-example'?: string\n}\n\n/**\n * Data attributes for testing and analytics\n */\nexport interface ProductCardDataAttributes {\n  addToCart?: Record<string, string>\n  addToFavorite?: Record<string, string>\n  price?: Record<string, string>\n  productDescriptionLink?: Record<string, string>\n  quantitySelector?: Record<string, string>\n  replacementAvailableLink?: Record<string, string>\n  sku?: Record<string, string>\n  vpn?: Record<string, string>\n}\n\nexport interface ProductCardProps {\n  /**\n   * View type\n   * @default 'tile-view'\n   */\n  type?: ProductCardViewType\n\n  /**\n   * Product type\n   * @default 'Default'\n   */\n  productType?: ProductCardProductType\n\n  /**\n   * Card size\n   * @default 'lg'\n   */\n  size?: ProductCardSize\n\n  /**\n   * Availability status\n   * @default 'Available'\n   */\n  availability?: ProductCardAvailability\n\n  // Product data\n  /**\n   * Product description (Title of the card)\n   */\n  productDescription: string\n\n  /**\n   * Font weight for product description\n   * @default 'bold'\n   */\n  productDescriptionFontWeight?: 'bold' | 'regular'\n\n  /**\n   * Tooltip props for product description\n   */\n  productDescriptionTooltipProps?: Partial<TooltipProps>\n\n  /**\n   * Inline badge for product description\n   */\n  badge?: BadgeProps\n\n  /**\n   * Max lines for product description\n   * @default 3\n   */\n  maxLines?: number\n\n  /**\n   * Props for compare checkbox alert\n   */\n  compareAlertProps?: any\n\n  /**\n   * Whether compare alert is open\n   */\n  compareAlertOpen?: boolean\n\n  /**\n   * Callback for compare alert close\n   */\n  compareAlertOnClose?: () => void\n\n  /**\n   * Show PNA loaders (Skeleton state)\n   */\n  showPNALoaders?: boolean\n\n  /**\n   * Sponsored badge props\n   */\n  imgBadgeProps?: BadgeProps\n\n  /**\n   * Custom warehouse stock component\n   */\n  warehouseStockComponent?: React.ReactNode\n\n  /**\n   * Volume discount experience content\n   */\n  volumeDiscountExperienceContent?: React.ReactNode\n\n  /**\n   * Product labels (6 maximum)\n   */\n  productLabels?: ProductLabel[]\n\n  /**\n   * Product images\n   */\n  productImgs?: ProductImgProps | ProductImgProps[]\n\n  /**\n   * Product image fallback source\n   */\n  productImgFallback?: string\n\n  /**\n   * Additional kit items count\n   */\n  kitAdditionalCount?: number\n\n  /**\n   * VPN (Vendor Part Number)\n   */\n  vpn?: string\n\n  /**\n   * SKU\n   */\n  sku?: string\n\n  /**\n   * Language\n   */\n  lang?: string\n\n  // Price data\n  /**\n   * Current price\n   */\n  price?: React.ReactNode\n\n  /**\n   * Adds a label to the right of the price\n   */\n  priceLabel?: React.ReactNode\n\n  /**\n   * Original price (shown with strikethrough)\n   */\n  discountPrice?: React.ReactNode\n\n  /**\n   * Each label content next to price\n   */\n  eachLabelContent?: React.ReactNode\n\n  /**\n   * Discount text\n   */\n  discountContent?: string\n\n  /**\n   * MSRP text\n   */\n  msrpContent?: React.ReactNode\n\n  /**\n   * Price badges (Zenith standard: discountBadges)\n   */\n  priceBadges?: BadgeProps[]\n\n  /**\n   * Badges to display special pricing information (Zenith standard)\n   */\n  discountBadges?: React.ReactNode | BadgeProps[]\n\n  /**\n   * Margin content (e.g., vendor margin)\n   */\n  vendorMarginContent?: React.ReactNode\n  resellerMarginContent?: React.ReactNode\n\n  /**\n   * Dual currency display\n   */\n  dualCurrency?: string\n\n  /**\n   * Tooltip props for dual currency help icon\n   */\n  dualCurrencyHelpTooltipProps?: HelpIconTooltipProps\n\n  /**\n   * Extra fees content\n   */\n  extrafeesContent?: React.ReactNode\n\n  /**\n   * Tooltip props for extra fees help icon\n   */\n  extraFeesHelpTooltipProps?: HelpIconTooltipProps\n\n  /**\n   * Volume discount information\n   */\n  volumeDiscount?: React.ReactNode\n\n  /**\n   * End customer deals\n   */\n  endCustomerDealsContent?: React.ReactNode\n\n  /**\n   * Summary of total discounts applied\n   */\n  discountAppliedContent?: React.ReactNode\n\n  // Stock data\n  /**\n   * Stock status\n   */\n  stockStatus?: ProductCardStockStatus\n\n  /**\n   * In stock content\n   */\n  inStockContent?: React.ReactNode\n\n  /**\n   * Out of stock content\n   */\n  outOfStockContent?: React.ReactNode\n\n  /**\n   * Additional link content for stock\n   */\n  inOutStockAdditionalLinkContent?: React.ReactNode\n\n  /**\n   * Props for additional link for stock\n   */\n  inOutStockAdditionalLinkProps?: any\n\n  /**\n   * Icon for stock status\n   */\n  inOutStockIcon?: string | false\n\n  /**\n   * Link content for replacement products\n   */\n  replacementAvailableContent?: React.ReactNode\n\n  /**\n   * Icon for replacement available\n   */\n  replacementAvailableIcon?: string | false\n\n  /**\n   * Props for replacement available link\n   */\n  replacementAvailableLinkProps?: NavItem\n\n  /**\n   * Whether replacement link is at the bottom\n   */\n  isReplacementAvailableLinkBottom?: boolean\n\n  // Kit details\n\n  /**\n   * Kit badge props (Zenith standard)\n   */\n  kitBadge?: BadgeProps\n\n  /**\n   * Kit link content (Zenith standard)\n   */\n  kitLinkContent?: React.ReactNode\n\n  /**\n   * Icon for kit link\n   */\n  kitLinkIcon?: string | false\n\n  /**\n   * Props for kit link\n   */\n  kitLinkLinkProps?: NavItem\n\n  // Flags/badges\n  /**\n   * Flag badges\n   */\n  flagBadges?: BadgeProps[]\n\n  // Actions\n  /**\n   * Show add to quote button\n   */\n  showAddToQuote?: boolean\n\n  /**\n   * Quantity value\n   */\n  qty?: number | string\n\n  /**\n   * On quantity change\n   */\n  onQuantityChange?: (quantity: number) => void\n\n  /**\n   * On add to cart\n   */\n  onAddToCart?: () => void\n\n  /**\n   * On add to quote\n   */\n  onAddToQuote?: () => void\n\n  /**\n   * Custom add to cart button node (Zenith standard)\n   */\n  addToCartBtn?: React.ReactNode\n\n  /**\n   * Custom add to quote button node\n   */\n  addToQuoteBtn?: React.ReactNode\n\n  /**\n   * Manually control actions direction\n   */\n  actionsDirection?: 'column' | 'row'\n\n  /**\n   * Breakpoint for actions direction column\n   */\n  actionsDirectionColumnBreakPoint?: number | true\n\n  // Favorite/Compare\n  /**\n   * Whether product is favorited\n   */\n  isFavorite?: boolean\n\n  /**\n   * Props for favorite button\n   */\n  addToFavoriteProps?: any\n\n  /**\n   * Tooltip props for favorite button\n   */\n  addToFavoriteTooltipProps?: Partial<TooltipProps>\n\n  /**\n   * Whether to show compare checkbox (only on lg size)\n   */\n  showCompareCheckbox?: boolean\n\n  /**\n   * Props for compare checkbox\n   */\n  compareCheckboxProps?: any\n\n  /**\n   * Whether product is selected for comparison\n   */\n  isCompared?: boolean\n\n  /**\n   * On compare toggle\n   */\n  onCompareToggle?: (checked: boolean) => void\n\n  /**\n   * Hides the containing border\n   */\n  hideBorder?: boolean\n\n  /**\n   * Sets the card to fill the entire contents of the container\n   */\n  fullHeight?: boolean\n\n  /**\n   * Mobile breakpoint\n   */\n  mobileBreakpoint?: number | true\n\n  /**\n   * Container ref for mobile breakpoint\n   */\n  mobileBreakpointContainerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * On product name click\n   */\n  onProductClick?: () => void\n\n  /**\n   * On stock \"More\" link click\n   */\n  onStockMoreClick?: () => void\n\n  /**\n   * On entire card click\n   */\n  onClick?: () => void\n\n  /**\n   * Link props for product description\n   */\n  productDescriptionLinkProps?: NavItem & {\n    nonRoutingOnClick?: (navItem: NavItem) => void\n  }\n\n  /**\n   * Custom sx styles for image container\n   */\n  productImgContainerSx?: SxProps<Theme>\n\n  /**\n   * Image height for list view\n   */\n  productImgListViewHeight?: string | number\n\n  /**\n   * Min width for image column in list view\n   * @default 160\n   */\n  productImgListViewMinWidth?: string | number\n\n  /**\n   * Custom sx styles\n   */\n  sx?: SxProps<Theme>\n\n  /**\n   * Data attributes for testing and analytics\n   */\n  dataAttributes?: ProductCardDataAttributes\n\n  /**\n   * Additional props for the quantity selector (InputNumber)\n   */\n  quantitySelectorProps?: Partial<InputNumberProps>\n\n  /**\n   * Custom content for \"Call to order\" / not available state\n   */\n  notAvailableContent?: React.ReactNode\n\n  /**\n   * Custom text for \"Price not available\" message\n   * @default 'Price not available'\n   */\n  priceNotAvailableContent?: React.ReactNode\n\n  /**\n   * Props for the compare alert Popper component\n   */\n  comparePopperProps?: any\n\n  /**\n   * Whether to show add to cart button as icon only (no text)\n   * @default false\n   */\n  addToCartIconOnly?: boolean\n}\n\n/**\n * Size configuration\n */\ninterface SizeConfig {\n  cardWidth: number\n  contentWidth: number\n  imageSize: 'sm' | 'md' | 'lg'\n  showCompare: boolean\n}\n\nconst getSizeConfig = (\n  size: ProductCardSize,\n  viewType: ProductCardViewType,\n): SizeConfig => {\n  if (viewType === 'list-view') {\n    return {\n      cardWidth: 980,\n      contentWidth: 468,\n      imageSize: 'lg',\n      showCompare: size === 'lg',\n    }\n  }\n\n  switch (size) {\n    case 'lg':\n      return {\n        cardWidth: 316,\n        contentWidth: 268,\n        imageSize: 'lg',\n        showCompare: true,\n      }\n    case 'md':\n      return {\n        cardWidth: 210,\n        contentWidth: 162,\n        imageSize: 'md',\n        showCompare: false,\n      }\n    case 'sm':\n      return {\n        cardWidth: 168,\n        contentWidth: 120,\n        imageSize: 'sm',\n        showCompare: false,\n      }\n    case 'mini':\n      return {\n        cardWidth: 183,\n        contentWidth: 135,\n        imageSize: 'sm',\n        showCompare: false,\n      }\n    default:\n      return getSizeConfig('lg', viewType)\n  }\n}\n\n/**\n * Get design token colors from theme\n */\nconst getDesignTokenColors = (theme: Theme) => {\n  return {\n    surface: theme.palette.common?.white ?? '#FFFFFF',\n    outlineVariant: theme.palette.gray?.[200] ?? '#D4DCE7',\n    onSurface: theme.palette.gray?.[700] ?? '#364152',\n    onSurfaceVariant: theme.palette.gray?.[500] ?? '#697586',\n    primary: theme.palette.primary?.main ?? '#1570EF',\n    warning: theme.palette.warning?.main ?? '#F79009',\n  }\n}\n\nexport const ProductCard = React.forwardRef<HTMLDivElement, ProductCardProps>(\n  function ProductCard(props, ref) {\n    const {\n      type = 'tile-view',\n      productType = 'Default',\n      size = 'lg',\n      availability = 'Available',\n      productDescription,\n      productDescriptionFontWeight,\n      productDescriptionTooltipProps,\n      productDescriptionLinkProps,\n      badge,\n      maxLines,\n      productLabels = [],\n      productImgs,\n      kitAdditionalCount = 2,\n      vpn,\n      sku,\n      lang,\n      price,\n      priceLabel,\n      discountPrice,\n      eachLabelContent,\n      discountContent,\n      msrpContent,\n      discountBadges,\n      vendorMarginContent,\n      resellerMarginContent,\n      dualCurrency,\n      dualCurrencyHelpTooltipProps,\n      extrafeesContent,\n      extraFeesHelpTooltipProps,\n      volumeDiscount,\n      endCustomerDealsContent,\n      discountAppliedContent,\n      stockStatus = 'In stock',\n      inStockContent,\n      outOfStockContent,\n      inOutStockAdditionalLinkContent,\n      inOutStockAdditionalLinkProps,\n      inOutStockIcon,\n      replacementAvailableContent,\n      isReplacementAvailableLinkBottom = false,\n      kitBadge,\n      kitLinkContent,\n      flagBadges = [],\n      showAddToQuote = false,\n      qty,\n      onQuantityChange,\n      onAddToCart,\n      onAddToQuote,\n      addToCartBtn,\n      addToQuoteBtn,\n      actionsDirection,\n      actionsDirectionColumnBreakPoint,\n      isFavorite = false,\n      addToFavoriteProps,\n      addToFavoriteTooltipProps,\n      showCompareCheckbox = true,\n      compareCheckboxProps,\n      isCompared = false,\n      onCompareToggle,\n      compareAlertOpen,\n      compareAlertProps,\n      compareAlertOnClose,\n      showPNALoaders = false,\n      imgBadgeProps,\n      warehouseStockComponent,\n      volumeDiscountExperienceContent,\n      productImgContainerSx,\n      productImgListViewHeight,\n      productImgListViewMinWidth = 160,\n      hideBorder = false,\n      fullHeight = false,\n      mobileBreakpoint,\n      mobileBreakpointContainerRef,\n      onProductClick,\n      onClick,\n      onStockMoreClick,\n      sx,\n      dataAttributes,\n      quantitySelectorProps,\n      notAvailableContent,\n      priceNotAvailableContent,\n      comparePopperProps: _comparePopperProps, // Reserved for future use\n      addToCartIconOnly = false,\n    } = props\n\n    const theme = useTheme()\n    const colors = getDesignTokenColors(theme)\n\n    // Handle responsive view type switching (Zenith standard: List view switches to Tile view on mobile)\n    const [currentType, setCurrentType] =\n      React.useState<ProductCardViewType>(type)\n\n    React.useEffect(() => {\n      if (type === 'list-view') {\n        const checkMobile = () => {\n          const width = mobileBreakpointContainerRef?.current\n            ? mobileBreakpointContainerRef.current.offsetWidth\n            : window.innerWidth\n\n          const breakpoint =\n            typeof mobileBreakpoint === 'number'\n              ? mobileBreakpoint\n              : theme.breakpoints.values.md || 900\n\n          if (mobileBreakpoint === true || width < breakpoint) {\n            setCurrentType('tile-view')\n          } else {\n            setCurrentType('list-view')\n          }\n        }\n\n        checkMobile()\n        window.addEventListener('resize', checkMobile)\n        return () => window.removeEventListener('resize', checkMobile)\n      } else {\n        setCurrentType(type)\n      }\n    }, [\n      type,\n      mobileBreakpoint,\n      mobileBreakpointContainerRef,\n      theme.breakpoints.values.md,\n    ])\n\n    const [currentActionsDirection, setCurrentActionsDirection] =\n      React.useState<'row' | 'column' | undefined>(actionsDirection)\n\n    const sizeConfig = getSizeConfig(size, currentType)\n\n    React.useEffect(() => {\n      const checkActionsBreakpoint = () => {\n        const width = mobileBreakpointContainerRef?.current\n          ? mobileBreakpointContainerRef.current.offsetWidth\n          : window.innerWidth\n\n        const breakpoint =\n          typeof actionsDirectionColumnBreakPoint === 'number'\n            ? actionsDirectionColumnBreakPoint\n            : theme.breakpoints.values.md || 900\n\n        if (actionsDirectionColumnBreakPoint === true || width < breakpoint) {\n          setCurrentActionsDirection('column')\n        } else {\n          setCurrentActionsDirection(actionsDirection)\n        }\n      }\n\n      if (actionsDirectionColumnBreakPoint !== undefined) {\n        checkActionsBreakpoint()\n        window.addEventListener('resize', checkActionsBreakpoint)\n        return () =>\n          window.removeEventListener('resize', checkActionsBreakpoint)\n      } else {\n        setCurrentActionsDirection(actionsDirection)\n      }\n    }, [\n      actionsDirection,\n      actionsDirectionColumnBreakPoint,\n      mobileBreakpointContainerRef,\n      theme.breakpoints.values.md,\n    ])\n\n    // Handle productImgs array or string\n    const isKit = productType === 'Kit' || Array.isArray(productImgs)\n    const isUnauthorized = availability === 'Unauthorized product'\n    const isCallToOrder = availability === 'Call to order'\n    const isAvailable = availability === 'Available'\n\n    // Determine image source\n    const getProductImg = (img: string | ProductImgProps) =>\n      typeof img === 'string' ? img : img.productImg\n    const displayImageSrc = productImgs\n      ? Array.isArray(productImgs)\n        ? getProductImg(productImgs[0])\n        : getProductImg(productImgs)\n      : undefined\n    const displayKitImages = Array.isArray(productImgs)\n      ? productImgs.map((img) => getProductImg(img))\n      : undefined\n\n    // Determine image type based on product type\n    const getImageType = (): BaseProductImageType => {\n      if (isKit) return 'Kit'\n      if (\n        !displayImageSrc &&\n        (!displayKitImages || displayKitImages.length === 0)\n      )\n        return 'No image'\n      return 'Default'\n    }\n\n    // Standard labels (limited to 6 as per Zenith spec)\n    const allLabels: ProductLabel[] = [...(productLabels || [])]\n\n    // Add auto-generated labels (VPN, SKU, Language) if not already present\n    if (\n      vpn &&\n      allLabels.length < 6 &&\n      !allLabels.some((l) => l.label === 'VPN')\n    )\n      allLabels.push({ key: 'vpn', label: 'VPN', value: vpn })\n    if (\n      sku &&\n      allLabels.length < 6 &&\n      !allLabels.some((l) => l.label === 'SKU')\n    )\n      allLabels.push({ key: 'sku', label: 'SKU', value: sku })\n    if (\n      lang &&\n      allLabels.length < 6 &&\n      !allLabels.some((l) => l.label === 'Language')\n    )\n      allLabels.push({\n        key: 'language',\n        label: 'Language',\n        value: lang,\n      })\n    const finalLabels = allLabels.slice(0, 6)\n\n    // Render labels using ProductLabels component\n    const renderLabels = () => {\n      if (finalLabels.length === 0) return null\n\n      // Add data attributes to labels if provided\n      const labelsWithDataAttrs = finalLabels.map((label) => {\n        let dataAttrs: Record<string, string> | undefined\n        if (label.key === 'sku' && dataAttributes?.sku) {\n          dataAttrs = dataAttributes.sku\n        } else if (label.key === 'vpn' && dataAttributes?.vpn) {\n          dataAttrs = dataAttributes.vpn\n        }\n\n        return dataAttrs ? { ...label, dataAttributes: dataAttrs } : label\n      })\n\n      return <ProductLabels productLabels={labelsWithDataAttrs} />\n    }\n\n    // Render the tile view content\n    const renderTileContent = () => (\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'space-between',\n          alignItems: 'flex-start',\n          width: '100%',\n          gap: '24px',\n          height: fullHeight ? '100%' : 'auto',\n          minHeight: fullHeight ? '100%' : 'auto',\n        }}\n      >\n        {/* Top info wrapper */}\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            gap: '12px',\n            width: '100%',\n          }}\n        >\n          {/* Favorite + Compare row - not shown for mini size */}\n          {size !== 'mini' && (\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                alignItems: 'center',\n                justifyContent: sizeConfig.showCompare\n                  ? 'space-between'\n                  : 'flex-start',\n                width: '100%',\n              }}\n            >\n              <Box sx={{ display: 'flex', alignItems: 'center' }}>\n                {addToFavoriteTooltipProps ? (\n                  <Tooltip {...addToFavoriteTooltipProps}>\n                    <Button\n                      variant=\"tertiary-gray\"\n                      size=\"small\"\n                      iconMode=\"only\"\n                      startIcon={\n                        <Icon\n                          name=\"Heart\"\n                          size={20}\n                          color={isFavorite ? colors.primary : undefined}\n                        />\n                      }\n                      onClick={addToFavoriteProps?.onClick}\n                      ariaLabel=\"Add to favorites\"\n                      {...addToFavoriteProps}\n                      {...(dataAttributes?.addToFavorite && {\n                        ...Object.fromEntries(\n                          Object.entries(dataAttributes.addToFavorite).map(\n                            ([key, value]) => [\n                              key.startsWith('data-') ? key : `data-${key}`,\n                              value,\n                            ],\n                          ),\n                        ),\n                      })}\n                    />\n                  </Tooltip>\n                ) : (\n                  <Button\n                    variant=\"tertiary-gray\"\n                    size=\"small\"\n                    iconMode=\"only\"\n                    startIcon={\n                      <Icon\n                        name=\"Heart\"\n                        size={20}\n                        color={isFavorite ? colors.primary : undefined}\n                      />\n                    }\n                    onClick={addToFavoriteProps?.onClick}\n                    ariaLabel=\"Add to favorites\"\n                    {...addToFavoriteProps}\n                    {...(dataAttributes?.addToFavorite && {\n                      ...Object.fromEntries(\n                        Object.entries(dataAttributes.addToFavorite).map(\n                          ([key, value]) => [\n                            key.startsWith('data-') ? key : `data-${key}`,\n                            value,\n                          ],\n                        ),\n                      ),\n                    })}\n                  />\n                )}\n              </Box>\n              {sizeConfig.showCompare && showCompareCheckbox && (\n                <Checkbox\n                  size=\"sm\"\n                  checked={isCompared}\n                  onChange={(e) => onCompareToggle?.(e.target.checked)}\n                  label=\"Compare\"\n                  {...compareCheckboxProps}\n                />\n              )}\n            </Box>\n          )}\n\n          {/* Product image */}\n          <Box\n            onClick={onProductClick}\n            sx={{\n              width: '100%',\n              display: 'flex',\n              justifyContent: 'center',\n              cursor: onProductClick ? 'pointer' : 'default',\n            }}\n          >\n            <BaseProductImage\n              type={getImageType()}\n              size={sizeConfig.imageSize}\n              imageSrc={displayImageSrc}\n              kitImages={displayKitImages}\n              additionalCount={kitAdditionalCount}\n              imgBadgeProps={imgBadgeProps}\n              alt={\n                Array.isArray(productImgs)\n                  ? (productImgs[0] as ProductImgProps)?.imgAltTxt\n                  : (productImgs as ProductImgProps)?.imgAltTxt\n              }\n              sx={props.productImgContainerSx}\n            />\n          </Box>\n\n          {/* Product details + price */}\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              justifyContent: 'flex-start',\n              alignItems: 'flex-start',\n              gap: '8px',\n              width: '100%',\n            }}\n          >\n            {/* Product details */}\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'column',\n                justifyContent: 'flex-start',\n                alignItems: 'flex-start',\n                gap: '4px',\n                width: '100%',\n              }}\n            >\n              <ProductName\n                productDescription={productDescription}\n                type={isKit ? 'Kit' : 'Default'}\n                badge={badge}\n                kitBadge={kitBadge}\n                fontWeight={productDescriptionFontWeight}\n                maxLines={\n                  maxLines || (size === 'sm' ? 2 : size === 'mini' ? 4 : 3)\n                }\n                productDescriptionTooltipProps={productDescriptionTooltipProps}\n                onClick={onProductClick || onClick}\n                sx={{ textAlign: 'left !important' }}\n                width=\"100%\"\n                dataAttributes={dataAttributes?.productDescriptionLink}\n                productDescriptionLinkProps={productDescriptionLinkProps}\n              />\n\n              {/* Labels */}\n              {renderLabels()}\n            </Box>\n\n            {/* Replacement Available (Top position) */}\n            {!isReplacementAvailableLinkBottom &&\n              replacementAvailableContent && (\n                <Box sx={{ width: '100%' }}>{replacementAvailableContent}</Box>\n              )}\n\n            {/* Price details - only show if not unauthorized */}\n            {!isUnauthorized && price && (\n              <ProductCardPriceDetails\n                size={size}\n                price={price}\n                priceLabel={priceLabel}\n                discountPrice={discountPrice}\n                eachLabelContent={eachLabelContent}\n                discountContent={discountContent}\n                msrpContent={msrpContent}\n                vendorMarginContent={vendorMarginContent}\n                resellerMarginContent={resellerMarginContent}\n                dualCurrency={dualCurrency}\n                dualCurrencyHelpTooltipProps={dualCurrencyHelpTooltipProps}\n                extrafeesContent={extrafeesContent}\n                extraFeesHelpTooltipProps={extraFeesHelpTooltipProps}\n                volumeDiscount={volumeDiscount}\n                endCustomerDealsContent={endCustomerDealsContent}\n                discountAppliedContent={discountAppliedContent}\n                badges={Array.isArray(discountBadges) ? discountBadges : []}\n                width=\"100%\"\n              />\n            )}\n\n            {/* Unauthorized product message */}\n            {isUnauthorized && (\n              <Typography\n                variant=\"text-xl-semibold\"\n                sx={{ color: colors.onSurface, textAlign: 'center' }}\n              >\n                {priceNotAvailableContent || 'Price not available'}\n              </Typography>\n            )}\n\n            {/* Replacement Available (Bottom position) */}\n            {isReplacementAvailableLinkBottom &&\n              replacementAvailableContent && (\n                <Box sx={{ width: '100%' }}>{replacementAvailableContent}</Box>\n              )}\n          </Box>\n\n          {/* Stock status - not shown for mini size */}\n          {isAvailable && size !== 'mini' && (\n            <Box sx={{ width: '100%' }}>\n              {warehouseStockComponent ? (\n                warehouseStockComponent\n              ) : (\n                <ProductCardStock\n                  stock={stockStatus}\n                  inStockContent={inStockContent}\n                  outOfStockContent={outOfStockContent}\n                  inOutStockAdditionalLinkContent={\n                    inOutStockAdditionalLinkContent\n                  }\n                  inOutStockAdditionalLinkProps={inOutStockAdditionalLinkProps}\n                  inStockIcon={inOutStockIcon === false ? null : undefined}\n                  outOfStockIcon={inOutStockIcon === false ? null : undefined}\n                  onMoreClick={onStockMoreClick}\n                />\n              )}\n            </Box>\n          )}\n\n          {/* Kit details */}\n          {isKit && kitLinkContent && (\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: '4px',\n                width: '100%',\n              }}\n            >\n              {typeof kitLinkContent === 'string' ? (\n                <>\n                  <Icon\n                    name=\"Package\"\n                    size={16}\n                    color={colors.onSurfaceVariant}\n                  />\n                  <Typography\n                    variant=\"text-xs-regular\"\n                    sx={{ color: colors.onSurfaceVariant }}\n                  >\n                    {kitLinkContent}\n                  </Typography>\n                </>\n              ) : (\n                kitLinkContent\n              )}\n            </Box>\n          )}\n\n          {/* Flag badges */}\n          {flagBadges.length > 0 && (\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                flexWrap: 'wrap',\n                gap: '8px',\n                rowGap: '4px',\n                width: '100%',\n              }}\n            >\n              {flagBadges.map((badge, index) => (\n                <BadgePillColor\n                  key={index}\n                  label={badge.label as string}\n                  color={(badge.color as BadgeColor) || 'gray'}\n                  size=\"sm\"\n                />\n              ))}\n            </Box>\n          )}\n        </Box>\n\n        {/* Actions - only show if available or call to order, not shown for mini size */}\n        {(isAvailable || isCallToOrder) && size !== 'mini' && (\n          <Box sx={{ width: '100%' }}>\n            {notAvailableContent && isCallToOrder ? (\n              notAvailableContent\n            ) : (\n              <ProductCardActions\n                type={showAddToQuote ? 'With add to quote' : 'Default'}\n                qty={qty}\n                addToCartBtn={addToCartBtn}\n                addToQuoteBtn={addToQuoteBtn}\n                volumeDiscountExperienceContent={\n                  volumeDiscountExperienceContent\n                }\n                onQuantityChange={onQuantityChange}\n                onAddToCart={onAddToCart}\n                onAddToQuote={onAddToQuote}\n                showQuantityInput={isAvailable}\n                width=\"100%\"\n                inputSize={size === 'lg' ? 'sm' : 'xs'}\n                buttonSize={size === 'lg' ? 'md' : 'sm'}\n                direction={currentActionsDirection}\n                quantitySelectorProps={quantitySelectorProps}\n                dataAttributes={dataAttributes}\n                addToCartIconOnly={addToCartIconOnly}\n              />\n            )}\n          </Box>\n        )}\n      </Box>\n    )\n\n    // Render the list view content\n    const renderListContent = () => (\n        <Box\n          sx={{\n            display: 'flex',\n            flexDirection: 'row',\n            gap: '32px',\n            width: '100%',\n          }}\n        >\n          {/* Left side: Image + Details */}\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              gap: '32px',\n              flex: 1,\n            }}\n          >\n            {/* Product image */}\n            <Box\n              onClick={onProductClick}\n              sx={{\n                height: productImgListViewHeight,\n                minWidth: productImgListViewMinWidth,\n                cursor: onProductClick ? 'pointer' : 'default',\n                ...productImgContainerSx,\n              }}\n            >\n              <BaseProductImage\n                type={getImageType()}\n                size=\"lg\"\n                imageSrc={displayImageSrc}\n                kitImages={displayKitImages}\n                additionalCount={kitAdditionalCount}\n                imgBadgeProps={imgBadgeProps}\n                alt={\n                  Array.isArray(productImgs)\n                    ? (productImgs[0] as ProductImgProps)?.imgAltTxt\n                    : (productImgs as ProductImgProps)?.imgAltTxt\n                }\n              />\n            </Box>\n\n            {/* Product details */}\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'column',\n                gap: '8px',\n                flex: 1,\n              }}\n            >\n              <ProductName\n                productDescription={productDescription}\n                type={isKit ? 'Kit' : 'Default'}\n                badge={badge}\n                kitBadge={kitBadge}\n                onClick={onProductClick || onClick}\n                width=\"100%\"\n                maxLines={maxLines || 2}\n                productDescriptionTooltipProps={productDescriptionTooltipProps}\n                dataAttributes={dataAttributes?.productDescriptionLink}\n                productDescriptionLinkProps={productDescriptionLinkProps}\n              />\n\n              {/* Labels */}\n              {renderLabels()}\n\n              {/* Replacement Available (Top position) */}\n              {!isReplacementAvailableLinkBottom &&\n                replacementAvailableContent && (\n                  <Box sx={{ width: '100%' }}>\n                    {replacementAvailableContent}\n                  </Box>\n                )}\n\n              {/* Stock status - not shown for mini size */}\n              {isAvailable && size !== 'mini' && (\n                <Box sx={{ width: '100%' }}>\n                  {warehouseStockComponent ? (\n                    warehouseStockComponent\n                  ) : (\n                    <ProductCardStock\n                      stock={stockStatus}\n                      inStockContent={inStockContent}\n                      outOfStockContent={outOfStockContent}\n                      inOutStockAdditionalLinkContent={\n                        inOutStockAdditionalLinkContent\n                      }\n                      inOutStockAdditionalLinkProps={\n                        inOutStockAdditionalLinkProps\n                      }\n                      inStockIcon={inOutStockIcon === false ? null : undefined}\n                      outOfStockIcon={\n                        inOutStockIcon === false ? null : undefined\n                      }\n                      onMoreClick={onStockMoreClick}\n                    />\n                  )}\n                </Box>\n              )}\n\n              {/* Replacement Available (Bottom position) */}\n              {isReplacementAvailableLinkBottom &&\n                replacementAvailableContent && (\n                  <Box sx={{ width: '100%' }}>\n                    {replacementAvailableContent}\n                  </Box>\n                )}\n\n              {/* Kit details */}\n              {isKit && kitLinkContent && (\n                <Box\n                  sx={{\n                    display: 'flex',\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    gap: '4px',\n                  }}\n                >\n                  {typeof kitLinkContent === 'string' ? (\n                    <>\n                      <Icon\n                        name=\"Package\"\n                        size={16}\n                        color={colors.onSurfaceVariant}\n                      />\n                      <Typography\n                        variant=\"text-xs-regular\"\n                        sx={{ color: colors.onSurfaceVariant }}\n                      >\n                        {kitLinkContent}\n                      </Typography>\n                    </>\n                  ) : (\n                    kitLinkContent\n                  )}\n                </Box>\n              )}\n\n              {/* Flag badges */}\n              {flagBadges.length > 0 && (\n                <Box\n                  sx={{\n                    display: 'flex',\n                    flexDirection: 'row',\n                    flexWrap: 'wrap',\n                    gap: '8px',\n                    rowGap: '4px',\n                  }}\n                >\n                  {flagBadges.map((badge, index) => (\n                    <BadgePillColor\n                      key={index}\n                      label={badge.label as string}\n                      color={(badge.color as BadgeColor) || 'gray'}\n                      size=\"sm\"\n                    />\n                  ))}\n                </Box>\n              )}\n            </Box>\n          </Box>\n\n          {/* Right side: Price + CTAs */}\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              justifyContent: isAvailable ? 'space-between' : 'flex-start',\n              gap: '8px',\n              width: 280,\n            }}\n          >\n            {/* Top row: Favorite + Compare (not shown for mini size) */}\n            {size !== 'mini' && (\n              <Box\n                sx={{\n                  display: 'flex',\n                  flexDirection: 'row',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  // if it's tile view, width is 100%, otherwise, width is 280px\n                  width: '100%'\n                }}\n              >\n                {addToFavoriteTooltipProps ? (\n                  <Tooltip {...addToFavoriteTooltipProps}>\n                    <Button\n                      variant=\"tertiary-gray\"\n                      size=\"small\"\n                      iconMode=\"only\"\n                      startIcon={\n                        <Icon\n                          name=\"Heart\"\n                          size={20}\n                          color={isFavorite ? colors.primary : undefined}\n                        />\n                      }\n                      onClick={addToFavoriteProps?.onClick}\n                      ariaLabel=\"Add to favorites\"\n                      {...addToFavoriteProps}\n                      {...(dataAttributes?.addToFavorite && {\n                        ...Object.fromEntries(\n                          Object.entries(dataAttributes.addToFavorite).map(\n                            ([key, value]) => [\n                              key.startsWith('data-') ? key : `data-${key}`,\n                              value,\n                            ],\n                          ),\n                        ),\n                      })}\n                    />\n                  </Tooltip>\n                ) : (\n                  <Button\n                    variant=\"tertiary-gray\"\n                    size=\"small\"\n                    iconMode=\"only\"\n                    startIcon={\n                      <Icon\n                        name=\"Heart\"\n                        size={20}\n                        color={isFavorite ? colors.primary : undefined}\n                      />\n                    }\n                    onClick={addToFavoriteProps?.onClick}\n                    ariaLabel=\"Add to favorites\"\n                    {...addToFavoriteProps}\n                    {...(dataAttributes?.addToFavorite && {\n                      ...Object.fromEntries(\n                        Object.entries(dataAttributes.addToFavorite).map(\n                          ([key, value]) => [\n                            key.startsWith('data-') ? key : `data-${key}`,\n                            value,\n                          ],\n                        ),\n                      ),\n                    })}\n                  />\n                )}\n                {showCompareCheckbox && (\n                  <Checkbox\n                    size=\"sm\"\n                    checked={isCompared}\n                    onChange={(e) => onCompareToggle?.(e.target.checked)}\n                    label=\"Compare\"\n                    {...compareCheckboxProps}\n                  />\n                )}\n              </Box>\n            )}\n            {/* Price details */}\n            {!isUnauthorized && price && (\n              <ProductCardPriceDetails\n                size={size}\n                price={price}\n                priceLabel={priceLabel}\n                discountPrice={discountPrice}\n                eachLabelContent={eachLabelContent}\n                discountContent={discountContent}\n                msrpContent={msrpContent}\n                vendorMarginContent={vendorMarginContent}\n                resellerMarginContent={resellerMarginContent}\n                dualCurrency={dualCurrency}\n                dualCurrencyHelpTooltipProps={dualCurrencyHelpTooltipProps}\n                extrafeesContent={extrafeesContent}\n                extraFeesHelpTooltipProps={extraFeesHelpTooltipProps}\n                volumeDiscount={volumeDiscount}\n                endCustomerDealsContent={endCustomerDealsContent}\n                discountAppliedContent={discountAppliedContent}\n                badges={Array.isArray(discountBadges) ? discountBadges : []}\n                width=\"100%\"\n              />\n            )}\n\n            {/* Unauthorized product message */}\n            {isUnauthorized && (\n              <Typography\n                variant=\"text-xl-semibold\"\n                sx={{ color: colors.onSurface }}\n              >\n                {priceNotAvailableContent || 'Price not available'}\n              </Typography>\n            )}\n\n            {/* Actions - not shown for mini size */}\n            {(isAvailable || isCallToOrder) && size !== 'mini' && (\n              <>\n                {notAvailableContent && isCallToOrder ? (\n                  notAvailableContent\n                ) : (\n                  <ProductCardActions\n                    type={showAddToQuote ? 'With add to quote' : 'Default'}\n                    qty={qty}\n                    addToCartBtn={addToCartBtn}\n                    addToQuoteBtn={addToQuoteBtn}\n                    volumeDiscountExperienceContent={\n                      volumeDiscountExperienceContent\n                    }\n                    onQuantityChange={onQuantityChange}\n                    onAddToCart={onAddToCart}\n                    onAddToQuote={onAddToQuote}\n                    showQuantityInput={isAvailable}\n                    width=\"100%\"\n                    inputSize=\"sm\"\n                    buttonSize=\"md\"\n                    direction={actionsDirection}\n                    quantitySelectorProps={quantitySelectorProps}\n                    dataAttributes={dataAttributes}\n                    addToCartIconOnly={addToCartIconOnly}\n                  />\n                )}\n              </>\n            )}\n          </Box>\n        </Box>\n\n    )\n\n    if (showPNALoaders) {\n      return (\n        <Box\n          ref={ref}\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            padding: '24px',\n            width: sizeConfig.cardWidth,\n            minHeight: fullHeight ? '100%' : 'auto',\n            backgroundColor: colors.surface,\n            border: hideBorder ? 'none' : `1px solid ${colors.outlineVariant}`,\n            borderRadius: '12px',\n            boxSizing: 'border-box',\n            gap: '12px',\n            ...sx,\n          }}\n        >\n          {/* Skeleton placeholders */}\n          <Box\n            sx={{\n              width: '100%',\n              height: 200,\n              backgroundColor: colors.outlineVariant,\n              borderRadius: '8px',\n            }}\n          />\n          <Box\n            sx={{\n              width: '80%',\n              height: 20,\n              backgroundColor: colors.outlineVariant,\n              borderRadius: '4px',\n            }}\n          />\n          <Box\n            sx={{\n              width: '40%',\n              height: 16,\n              backgroundColor: colors.outlineVariant,\n              borderRadius: '4px',\n            }}\n          />\n          <Box\n            sx={{\n              width: '60%',\n              height: 24,\n              backgroundColor: colors.outlineVariant,\n              borderRadius: '4px',\n              mt: 1,\n            }}\n          />\n          <Box\n            sx={{\n              width: '100%',\n              height: 40,\n              backgroundColor: colors.outlineVariant,\n              borderRadius: '8px',\n              mt: 'auto',\n            }}\n          />\n        </Box>\n      )\n    }\n\n    return (\n      <Box\n        ref={ref}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          padding: '24px',\n          width: sizeConfig.cardWidth,\n          height: fullHeight ? '100%' : 'auto',\n          minHeight: fullHeight ? '100%' : 'auto',\n          backgroundColor: colors.surface,\n          border: hideBorder ? 'none' : `1px solid ${colors.outlineVariant}`,\n          borderRadius: '12px',\n          boxSizing: 'border-box',\n          position: 'relative',\n          ...sx,\n        }}\n      >\n        {compareAlertOpen && (\n          <Box\n            sx={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              right: 0,\n              zIndex: 10,\n              p: 1,\n              bgcolor: colors.warning,\n              color: 'white',\n              borderRadius: '12px 12px 0 0',\n              display: 'flex',\n              justifyContent: 'space-between',\n              alignItems: 'center',\n            }}\n          >\n            <Typography variant=\"text-xs-medium\">\n              {compareAlertProps?.header || 'Comparison limit reached'}\n            </Typography>\n            <Button\n              variant=\"tertiary-gray\"\n              size=\"xs\"\n              onClick={compareAlertOnClose}\n              sx={{ color: 'white' }}\n            >\n              ×\n            </Button>\n          </Box>\n        )}\n        {currentType === 'tile-view'\n          ? renderTileContent()\n          : renderListContent()}\n      </Box>\n    )\n  },\n)\n\nexport default ProductCard\n"],"names":["ProductCard","badge"],"mappings":"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"}

package/dist/components/product/ProductCard/ProductCardActions.d.ts

@@ -0,0 +1,144 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import { InputNumberProps } from '../../forms/InputNumber';
+/**
+ * ProductCardActions component
+ *
+ * A product card actions component that combines InputNumber with action buttons.
+ * Based on Figma specifications for ".BASE Product card actions".
+ *
+ * Features:
+ * - Two types: Default (input + add to cart), With add to quote (input + add to cart + add to quote)
+ * - Uses InputNumber for quantity selection
+ * - Configurable button labels and callbacks
+ * - Responsive wrapping layout
+ */
+import * as React from 'react';
+export type ProductCardActionsType = 'Default' | 'With add to quote';
+export interface ProductCardActionsProps {
+    /**
+     * Component type variant
+     * @default 'Default'
+     */
+    type?: ProductCardActionsType;
+    /**
+     * Current quantity value
+     */
+    qty?: number | string;
+    /**
+     * Current quantity value (Legacy)
+     */
+    quantity?: number;
+    /**
+     * Custom add to cart button node (Zenith standard)
+     */
+    addToCartBtn?: React.ReactNode;
+    /**
+     * Custom add to quote button node
+     */
+    addToQuoteBtn?: React.ReactNode;
+    /**
+     * Default quantity value (uncontrolled)
+     * @default 1
+     */
+    defaultQuantity?: number;
+    /**
+     * Minimum quantity
+     * @default 1
+     */
+    minQuantity?: number;
+    /**
+     * Maximum quantity
+     */
+    maxQuantity?: number;
+    /**
+     * Quantity step
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Callback when quantity changes
+     */
+    onQuantityChange?: (quantity: number) => void;
+    /**
+     * Add to cart button label
+     * @default 'Add to cart'
+     */
+    addToCartLabel?: string;
+    /**
+     * Callback when add to cart is clicked
+     */
+    onAddToCart?: () => void;
+    /**
+     * Add to quote button label
+     * @default 'Add to quote'
+     */
+    addToQuoteLabel?: string;
+    /**
+     * Callback when add to quote is clicked
+     */
+    onAddToQuote?: () => void;
+    /**
+     * Whether the add to cart button is loading
+     */
+    addToCartLoading?: boolean;
+    /**
+     * Whether the add to quote button is loading
+     */
+    addToQuoteLoading?: boolean;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show the input number component
+     * @default true
+     */
+    showQuantityInput?: boolean;
+    /**
+     * Volume discount experience content (Zenith standard)
+     */
+    volumeDiscountExperienceContent?: React.ReactNode;
+    /**
+     * Size of the InputNumber component
+     * @default 'sm'
+     */
+    inputSize?: 'xs' | 'sm' | 'md';
+    /**
+     * Size of the buttons
+     * @default 'md'
+     */
+    buttonSize?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * Custom width
+     * @default 268
+     */
+    width?: number | string;
+    /**
+     * Direction of the actions
+     */
+    direction?: 'column' | 'row';
+    /**
+     * Custom sx styles
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * Additional props for the quantity selector (InputNumber)
+     */
+    quantitySelectorProps?: Partial<InputNumberProps>;
+    /**
+     * Data attributes for testing and analytics
+     */
+    dataAttributes?: {
+        quantitySelector?: Record<string, string>;
+        addToCart?: Record<string, string>;
+        addToQuote?: Record<string, string>;
+    };
+    /**
+     * Whether to show add to cart button as icon only (no text)
+     * @default false
+     */
+    addToCartIconOnly?: boolean;
+}
+export declare const ProductCardActions: React.ForwardRefExoticComponent<ProductCardActionsProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductCardActions;
+//# sourceMappingURL=ProductCardActions.d.ts.map

package/dist/components/product/ProductCard/ProductCardActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardActions.d.ts","sourceRoot":"","sources":["../../../../src/components/product/ProductCard/ProductCardActions.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAG1D,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE5E,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,mBAAmB,CAAA;AAEpE,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAE7B;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE9B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE/B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAE7C;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAE1B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAE3B;;OAEG;IACH,+BAA+B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEjD;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAE9B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAEtC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IAE5B;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEjD;;OAEG;IACH,cAAc,CAAC,EAAE;QACf,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QACzC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;QAClC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KACpC,CAAA;IAED;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,eAAO,MAAM,kBAAkB,gGA+M7B,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/product/ProductCard/ProductCardActions.js

@@ -0,0 +1,184 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../../Button.js";
+import { Icon } from "../../Icon.js";
+import { InputNumber } from "../../forms/InputNumber.js";
+import Box from "../../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+const ProductCardActions = React.forwardRef(function ProductCardActions2(props, ref) {
+  const {
+    type = "Default",
+    qty,
+    quantity,
+    addToCartBtn,
+    addToQuoteBtn,
+    defaultQuantity = 1,
+    minQuantity = 1,
+    maxQuantity,
+    step = 1,
+    onQuantityChange,
+    addToCartLabel = "Add to cart",
+    onAddToCart,
+    addToQuoteLabel = "Add to quote",
+    onAddToQuote,
+    addToCartLoading = false,
+    addToQuoteLoading = false,
+    disabled = false,
+    showQuantityInput = true,
+    inputSize = "sm",
+    buttonSize = "md",
+    volumeDiscountExperienceContent,
+    width = 268,
+    direction,
+    sx,
+    quantitySelectorProps,
+    dataAttributes,
+    addToCartIconOnly = false
+  } = props;
+  const showAddToQuote = type === "With add to quote";
+  const displayQty = qty !== void 0 ? qty : quantity;
+  const renderAddToCartBtn = () => {
+    if (addToCartBtn) return addToCartBtn;
+    const cartDataAttrs = dataAttributes?.addToCart ? Object.fromEntries(
+      Object.entries(dataAttributes.addToCart).map(([key, value]) => [
+        key.startsWith("data-") ? key : `data-${key}`,
+        value
+      ])
+    ) : {};
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        size: buttonSize === "md" ? "medium" : buttonSize === "sm" ? "small" : buttonSize === "lg" ? "large" : buttonSize,
+        iconMode: addToCartIconOnly ? "only" : "default",
+        startIcon: /* @__PURE__ */ jsx(Icon, { name: "ShoppingCart02", size: 20 }),
+        onClick: onAddToCart,
+        disabled,
+        loading: addToCartIconOnly ? addToCartLoading : void 0,
+        loadingIconOnly: addToCartIconOnly ? addToCartLoading : void 0,
+        ariaLabel: addToCartIconOnly ? addToCartLabel : void 0,
+        sx: {
+          flex: showAddToQuote ? 1 : "none",
+          minWidth: addToCartIconOnly && direction === "row" ? "120px" : showAddToQuote ? "auto" : "100%",
+          width: addToCartIconOnly && direction === "row" ? "120px" : "auto"
+        },
+        ...cartDataAttrs,
+        children: addToCartIconOnly ? null : addToCartLabel
+      }
+    );
+  };
+  const renderAddToQuoteBtn = () => {
+    if (addToQuoteBtn) return addToQuoteBtn;
+    const quoteDataAttrs = dataAttributes?.addToQuote ? Object.fromEntries(
+      Object.entries(dataAttributes.addToQuote).map(([key, value]) => [
+        key.startsWith("data-") ? key : `data-${key}`,
+        value
+      ])
+    ) : {};
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary-gray",
+        size: buttonSize === "md" ? "medium" : buttonSize === "sm" ? "small" : buttonSize === "lg" ? "large" : buttonSize,
+        startIcon: /* @__PURE__ */ jsx(Icon, { name: "QuotePlus", size: 20 }),
+        onClick: onAddToQuote,
+        disabled,
+        loading: addToQuoteLoading,
+        sx: { flex: 1 },
+        ...quoteDataAttrs,
+        children: addToQuoteLabel
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref,
+      sx: {
+        display: "flex",
+        flexDirection: direction || "column",
+        alignItems: direction === "row" ? "center" : "center",
+        justifyContent: direction === "row" ? "space-between" : "center",
+        gap: "12px",
+        width: typeof width === "number" ? `${width}px` : width,
+        ...sx
+      },
+      children: [
+        showQuantityInput && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              width: direction === "row" ? "auto" : "100%",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+              flex: direction === "row" ? 1 : "none",
+              minWidth: 0
+              // Allow flex item to shrink below its content size
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                InputNumber,
+                {
+                  size: inputSize,
+                  value: typeof displayQty === "number" ? displayQty : void 0,
+                  defaultValue: defaultQuantity,
+                  min: minQuantity,
+                  max: maxQuantity,
+                  step,
+                  onChange: onQuantityChange,
+                  state: disabled ? "Disabled" : "Filled",
+                  sx: { width: direction === "row" ? "100%" : "100%" },
+                  ...quantitySelectorProps,
+                  ...dataAttributes?.quantitySelector && {
+                    ...Object.fromEntries(
+                      Object.entries(dataAttributes.quantitySelector).map(
+                        ([key, value]) => [
+                          key.startsWith("data-") ? key : `data-${key}`,
+                          value
+                        ]
+                      )
+                    )
+                  }
+                }
+              ),
+              volumeDiscountExperienceContent && /* @__PURE__ */ jsx(Box, { sx: { mt: 0.5 }, children: typeof volumeDiscountExperienceContent === "string" ? /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "text-xs-medium",
+                  sx: { color: "success.main" },
+                  children: volumeDiscountExperienceContent
+                }
+              ) : volumeDiscountExperienceContent })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: direction === "row" ? "flex-end" : "center",
+              alignItems: "center",
+              gap: "12px",
+              width: direction === "row" ? "auto" : "100%",
+              flexWrap: "wrap",
+              flex: direction === "row" ? "0 0 auto" : "none",
+              flexShrink: 0
+              // Prevent button container from shrinking
+            },
+            children: [
+              renderAddToCartBtn(),
+              showAddToQuote && renderAddToQuoteBtn()
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ProductCardActions
+};
+//# sourceMappingURL=ProductCardActions.js.map

package/dist/components/product/ProductCard/ProductCardActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCardActions.js","sources":["../../../../src/components/product/ProductCard/ProductCardActions.tsx"],"sourcesContent":["/**\n * ProductCardActions component\n *\n * A product card actions component that combines InputNumber with action buttons.\n * Based on Figma specifications for \".BASE Product card actions\".\n *\n * Features:\n * - Two types: Default (input + add to cart), With add to quote (input + add to cart + add to quote)\n * - Uses InputNumber for quantity selection\n * - Configurable button labels and callbacks\n * - Responsive wrapping layout\n */\nimport * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport type { Theme, SxProps } from '@mui/material/styles'\nimport { Button } from '../../Button'\nimport { Icon } from '../../Icon'\nimport { InputNumber, type InputNumberProps } from '../../forms/InputNumber'\n\nexport type ProductCardActionsType = 'Default' | 'With add to quote'\n\nexport interface ProductCardActionsProps {\n  /**\n   * Component type variant\n   * @default 'Default'\n   */\n  type?: ProductCardActionsType\n\n  /**\n   * Current quantity value\n   */\n  qty?: number | string\n\n  /**\n   * Current quantity value (Legacy)\n   */\n  quantity?: number\n\n  /**\n   * Custom add to cart button node (Zenith standard)\n   */\n  addToCartBtn?: React.ReactNode\n\n  /**\n   * Custom add to quote button node\n   */\n  addToQuoteBtn?: React.ReactNode\n\n  /**\n   * Default quantity value (uncontrolled)\n   * @default 1\n   */\n  defaultQuantity?: number\n\n  /**\n   * Minimum quantity\n   * @default 1\n   */\n  minQuantity?: number\n\n  /**\n   * Maximum quantity\n   */\n  maxQuantity?: number\n\n  /**\n   * Quantity step\n   * @default 1\n   */\n  step?: number\n\n  /**\n   * Callback when quantity changes\n   */\n  onQuantityChange?: (quantity: number) => void\n\n  /**\n   * Add to cart button label\n   * @default 'Add to cart'\n   */\n  addToCartLabel?: string\n\n  /**\n   * Callback when add to cart is clicked\n   */\n  onAddToCart?: () => void\n\n  /**\n   * Add to quote button label\n   * @default 'Add to quote'\n   */\n  addToQuoteLabel?: string\n\n  /**\n   * Callback when add to quote is clicked\n   */\n  onAddToQuote?: () => void\n\n  /**\n   * Whether the add to cart button is loading\n   */\n  addToCartLoading?: boolean\n\n  /**\n   * Whether the add to quote button is loading\n   */\n  addToQuoteLoading?: boolean\n\n  /**\n   * Whether the component is disabled\n   */\n  disabled?: boolean\n\n  /**\n   * Whether to show the input number component\n   * @default true\n   */\n  showQuantityInput?: boolean\n\n  /**\n   * Volume discount experience content (Zenith standard)\n   */\n  volumeDiscountExperienceContent?: React.ReactNode\n\n  /**\n   * Size of the InputNumber component\n   * @default 'sm'\n   */\n  inputSize?: 'xs' | 'sm' | 'md'\n\n  /**\n   * Size of the buttons\n   * @default 'md'\n   */\n  buttonSize?: 'xs' | 'sm' | 'md' | 'lg'\n\n  /**\n   * Custom width\n   * @default 268\n   */\n  width?: number | string\n\n  /**\n   * Direction of the actions\n   */\n  direction?: 'column' | 'row'\n\n  /**\n   * Custom sx styles\n   */\n  sx?: SxProps<Theme>\n\n  /**\n   * Additional props for the quantity selector (InputNumber)\n   */\n  quantitySelectorProps?: Partial<InputNumberProps>\n\n  /**\n   * Data attributes for testing and analytics\n   */\n  dataAttributes?: {\n    quantitySelector?: Record<string, string>\n    addToCart?: Record<string, string>\n    addToQuote?: Record<string, string>\n  }\n\n  /**\n   * Whether to show add to cart button as icon only (no text)\n   * @default false\n   */\n  addToCartIconOnly?: boolean\n}\n\nexport const ProductCardActions = React.forwardRef<\n  HTMLDivElement,\n  ProductCardActionsProps\n>(function ProductCardActions(props, ref) {\n  const {\n    type = 'Default',\n    qty,\n    quantity,\n    addToCartBtn,\n    addToQuoteBtn,\n    defaultQuantity = 1,\n    minQuantity = 1,\n    maxQuantity,\n    step = 1,\n    onQuantityChange,\n    addToCartLabel = 'Add to cart',\n    onAddToCart,\n    addToQuoteLabel = 'Add to quote',\n    onAddToQuote,\n    addToCartLoading = false,\n    addToQuoteLoading = false,\n    disabled = false,\n    showQuantityInput = true,\n    inputSize = 'sm',\n    buttonSize = 'md',\n    volumeDiscountExperienceContent,\n    width = 268,\n    direction,\n    sx,\n    quantitySelectorProps,\n    dataAttributes,\n    addToCartIconOnly = false,\n  } = props\n\n  const showAddToQuote = type === 'With add to quote'\n  const displayQty = qty !== undefined ? qty : quantity\n\n  const renderAddToCartBtn = () => {\n    if (addToCartBtn) return addToCartBtn\n\n    const cartDataAttrs = dataAttributes?.addToCart\n      ? Object.fromEntries(\n          Object.entries(dataAttributes.addToCart).map(([key, value]) => [\n            key.startsWith('data-') ? key : `data-${key}`,\n            value,\n          ]),\n        )\n      : {}\n\n    return (\n      <Button\n        variant=\"primary\"\n        size={\n          buttonSize === 'md'\n            ? 'medium'\n            : buttonSize === 'sm'\n              ? 'small'\n              : buttonSize === 'lg'\n                ? 'large'\n                : buttonSize\n        }\n        iconMode={addToCartIconOnly ? 'only' : 'default'}\n        startIcon={<Icon name=\"ShoppingCart02\" size={20} />}\n        onClick={onAddToCart}\n        disabled={disabled}\n        loading={addToCartIconOnly ? addToCartLoading : undefined}\n        loadingIconOnly={addToCartIconOnly ? addToCartLoading : undefined}\n        ariaLabel={addToCartIconOnly ? addToCartLabel : undefined}\n        sx={{\n          flex: showAddToQuote ? 1 : 'none',\n          minWidth:\n            addToCartIconOnly && direction === 'row'\n              ? '120px'\n              : showAddToQuote\n                ? 'auto'\n                : '100%',\n          width: addToCartIconOnly && direction === 'row' ? '120px' : 'auto',\n        }}\n        {...cartDataAttrs}\n      >\n        {addToCartIconOnly ? null : addToCartLabel}\n      </Button>\n    )\n  }\n\n  const renderAddToQuoteBtn = () => {\n    if (addToQuoteBtn) return addToQuoteBtn\n\n    const quoteDataAttrs = dataAttributes?.addToQuote\n      ? Object.fromEntries(\n          Object.entries(dataAttributes.addToQuote).map(([key, value]) => [\n            key.startsWith('data-') ? key : `data-${key}`,\n            value,\n          ]),\n        )\n      : {}\n\n    return (\n      <Button\n        variant=\"secondary-gray\"\n        size={\n          buttonSize === 'md'\n            ? 'medium'\n            : buttonSize === 'sm'\n              ? 'small'\n              : buttonSize === 'lg'\n                ? 'large'\n                : buttonSize\n        }\n        startIcon={<Icon name=\"QuotePlus\" size={20} />}\n        onClick={onAddToQuote}\n        disabled={disabled}\n        loading={addToQuoteLoading}\n        sx={{ flex: 1 }}\n        {...quoteDataAttrs}\n      >\n        {addToQuoteLabel}\n      </Button>\n    )\n  }\n\n  return (\n    <Box\n      ref={ref}\n      sx={{\n        display: 'flex',\n        flexDirection: direction || 'column',\n        alignItems: direction === 'row' ? 'center' : 'center',\n        justifyContent: direction === 'row' ? 'space-between' : 'center',\n        gap: '12px',\n        width: typeof width === 'number' ? `${width}px` : width,\n        ...sx,\n      }}\n    >\n      {/* Input number component */}\n      {showQuantityInput && (\n        <Box\n          sx={{\n            width: direction === 'row' ? 'auto' : '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            gap: '4px',\n            flex: direction === 'row' ? 1 : 'none',\n            minWidth: 0, // Allow flex item to shrink below its content size\n          }}\n        >\n          <InputNumber\n            size={inputSize}\n            value={typeof displayQty === 'number' ? displayQty : undefined}\n            defaultValue={defaultQuantity}\n            min={minQuantity}\n            max={maxQuantity}\n            step={step}\n            onChange={onQuantityChange}\n            state={disabled ? 'Disabled' : 'Filled'}\n            sx={{ width: direction === 'row' ? '100%' : '100%' }}\n            {...quantitySelectorProps}\n            {...(dataAttributes?.quantitySelector && {\n              ...Object.fromEntries(\n                Object.entries(dataAttributes.quantitySelector).map(\n                  ([key, value]) => [\n                    key.startsWith('data-') ? key : `data-${key}`,\n                    value,\n                  ],\n                ),\n              ),\n            })}\n          />\n          {volumeDiscountExperienceContent && (\n            <Box sx={{ mt: 0.5 }}>\n              {typeof volumeDiscountExperienceContent === 'string' ? (\n                <Typography\n                  variant={'text-xs-medium' as any}\n                  sx={{ color: 'success.main' }}\n                >\n                  {volumeDiscountExperienceContent}\n                </Typography>\n              ) : (\n                volumeDiscountExperienceContent\n              )}\n            </Box>\n          )}\n        </Box>\n      )}\n\n      {/* Buttons container */}\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          justifyContent: direction === 'row' ? 'flex-end' : 'center',\n          alignItems: 'center',\n          gap: '12px',\n          width: direction === 'row' ? 'auto' : '100%',\n          flexWrap: 'wrap',\n          flex: direction === 'row' ? '0 0 auto' : 'none',\n          flexShrink: 0, // Prevent button container from shrinking\n        }}\n      >\n        {/* Add to cart button */}\n        {renderAddToCartBtn()}\n\n        {/* Add to quote button (only for 'With add to quote' type) */}\n        {showAddToQuote && renderAddToQuoteBtn()}\n      </Box>\n    </Box>\n  )\n})\n\nexport default ProductCardActions\n"],"names":["ProductCardActions"],"mappings":"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"}

package/dist/components/product/ProductCard/ProductCardPriceDetails.d.ts

@@ -0,0 +1,129 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import { BadgeProps } from '../../badge/Badge';
+/**
+ * ProductCardPriceDetails component
+ *
+ * A product card price details component that displays pricing information.
+ * Based on Figma specifications for ".BASE Product card price details".
+ *
+ * Features:
+ * - Two discount states: With discount (shows original price strikethrough), Without discount
+ * - Displays badges for promotions/discounts
+ * - Current price with optional original price
+ * - Discount amount and percentage display
+ * - MSRP information
+ * - Extra fees section with help icon
+ */
+import * as React from 'react';
+export interface ProductCardPriceDetailsProps {
+    /**
+     * Product card size (affects price typography variant)
+     */
+    size?: 'sm' | 'md' | 'lg' | 'mini';
+    /**
+     * Whether to show discount pricing
+     * @default false
+     */
+    hasDiscount?: boolean;
+    /**
+     * Current/sale price
+     */
+    price?: React.ReactNode;
+    /**
+     * Current/sale price (Legacy)
+     */
+    currentPrice?: string;
+    /**
+     * Adds a label to the right of the price
+     */
+    priceLabel?: React.ReactNode;
+    /**
+     * Original price (shown with strikethrough)
+     */
+    discountPrice?: React.ReactNode;
+    /**
+     * Original price (Legacy)
+     */
+    originalPrice?: string;
+    /**
+     * Each label content next to price
+     */
+    eachLabelContent?: React.ReactNode;
+    /**
+     * Discount text/content under price
+     */
+    discountContent?: string;
+    /**
+     * Discount text (Legacy)
+     */
+    discountText?: string;
+    /**
+     * MSRP text/content
+     */
+    msrpContent?: React.ReactNode;
+    /**
+     * MSRP text (Legacy)
+     */
+    msrpText?: string;
+    /**
+     * Margin content (e.g., vendor margin)
+     */
+    vendorMarginContent?: React.ReactNode;
+    resellerMarginContent?: React.ReactNode;
+    /**
+     * Dual currency display
+     */
+    dualCurrency?: string;
+    /**
+     * Extra fees content
+     */
+    extrafeesContent?: React.ReactNode;
+    /**
+     * Volume discount information
+     */
+    volumeDiscount?: React.ReactNode;
+    /**
+     * End customer deals
+     */
+    endCustomerDealsContent?: React.ReactNode;
+    /**
+     * Summary of total discounts applied
+     */
+    discountAppliedContent?: React.ReactNode;
+    /**
+     * Extra fees text (Legacy)
+     */
+    extraFeesText?: string;
+    /**
+     * Help icon tooltip title for extra fees
+     */
+    extraFeesHelpTitle?: string;
+    /**
+     * Help icon tooltip supporting text for extra fees
+     */
+    extraFeesHelpSupportingText?: string;
+    /**
+     * Tooltip props for extra fees help icon (Zenith standard)
+     */
+    extraFeesHelpTooltipProps?: any;
+    /**
+     * Tooltip props for dual currency help icon (Zenith standard)
+     */
+    dualCurrencyHelpTooltipProps?: any;
+    /**
+     * Badges to display (Zenith standard: discountBadges)
+     */
+    badges?: BadgeProps[];
+    /**
+     * Custom width
+     * @default 268
+     */
+    width?: number | string;
+    /**
+     * Custom sx styles
+     */
+    sx?: SxProps<Theme>;
+}
+export declare const ProductCardPriceDetails: React.ForwardRefExoticComponent<ProductCardPriceDetailsProps & React.RefAttributes<HTMLDivElement>>;
+export default ProductCardPriceDetails;
+//# sourceMappingURL=ProductCardPriceDetails.d.ts.map