pixelize-design-library 2.4.2-beta.57 → 2.4.2-beta.58

package/CHANGELOG.md

@@ -32,6 +32,10 @@ next major.
   `discountAmount`, `unitPrice`. A **Storefront** page example in the playground wires them into a
   working shop app (home, listing, product, wishlist, bag, checkout, order tracking).
 - **`star` palette token.** Rating-star gold, derived (`buildStar`) and identical in every brand.
+- **`ProductDetails` — `size`.** `md` | `lg` height of add-to-bag, buy-now and quantity controls;
+  defaults to `md` on the split layout, `lg` on the phone page. The desktop wishlist follows it.
+- **`ProductMedia` — `srcSet` / `sizes`.** Forwarded to the `ProductCard` `<img>` so a grid tile
+  downloads a tile-sized rendition. `thumb` now has JSDoc.
 
 - **`Spinner` — `testId`.** Maps to `data-testid` on the rendered node, wins over a raw
   `data-testid` passthrough. Lets consumers select a loading spinner in tests.
@@ -121,6 +125,13 @@ next major.
 
 ### Fixed
 
+- **Commerce performance (consumer report on 2.4.2-beta.57).** `ProductCard` no longer loads the
+  hover image on devices that cannot hover; `QuickAddSheet` mounts on first open, not on first
+  paint; `formatPrice` caches its `Intl.NumberFormat`; every `matchMedia` consumer
+  (`usePrefersReducedMotion` and the layout hooks) shares one listener per query through a single
+  `useMatchMedia`, replacing two duplicate hooks. `ProductDetails` desktop wishlist no longer sits a
+  size step above the buy buttons.
+
 - **`SingleDatePicker` / `RangeDatePicker` / `TimeOnlyPicker` popovers clipped inside a scrolling or
   `overflow: hidden` modal.** They now portal to `document.body` (via Chakra's own `Portal`,
   matching `Select`), so the calendar is no longer cut off by an ancestor's clipping or scroll

package/DESIGN-GUIDE.md

@@ -61,7 +61,7 @@ stay light in dark mode.
 | --- | --- |
 | Page canvas | `colors.backgroundColor.base` |
 | Card / panel surface | `colors.background[50]` |
-| Your own overlay (popover, panel, `ModalContent bg=`) | `colors.surfaceRaised` — divider inside it `raisedRule(colors)` |
+| Your own overlay (popover, panel, `ModalContent bg=`) | `colors.surfaceRaised` — divider inside it `raisedRule(colors)`; `Popover*` and `Menu*` come from the package root (Primitives barrel) |
 | Subtle inset (toolbar strip, hovered row, code) | `colors.backgroundColor.secondary` |
 | Border / divider | `colors.boxborder[200]` |
 | Heading ink | `colors.header[900]` |

package/dist/Components/Commerce/commerceTypes.d.ts

@@ -2,7 +2,12 @@ export type ProductMedia = {
     id: string;
     src: string;
     alt?: string;
+    /** Small rendition (about 150px); used by the quick-add sheet, cart lines and gallery thumbnails. */
     thumb?: string;
+    /** Responsive candidates for `src`, e.g. "a-400.jpg 400w, a-800.jpg 800w"; the product card forwards it to its `<img>`. */
+    srcSet?: string;
+    /** Rendered width hint paired with `srcSet`, e.g. "(min-width: 768px) 25vw, 50vw". */
+    sizes?: string;
     type?: "image" | "video";
     poster?: string;
 };

package/dist/Components/MediaGallery/MediaGallery.js

@@ -19,7 +19,7 @@ const MediaLightbox_1 = __importDefault(require("./MediaLightbox"));
 const glass_1 = require("./glass");
 const motion_3 = require("./motion");
 const useContainerWidth_1 = require("../Commerce/useContainerWidth");
-const useMatchMedia_1 = require("./useMatchMedia");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const mediaGalleryModel_1 = require("./mediaGalleryModel");
 const MediaGalleryProps_1 = require("./MediaGalleryProps");
 const WIDE_QUERY = "(min-width: 768px)";

package/dist/Components/ProductCard/ProductCard.js

@@ -18,6 +18,7 @@ const StockStatus_1 = __importDefault(require("../StockStatus/StockStatus"));
 const WishlistToggle_1 = __importDefault(require("../WishlistToggle/WishlistToggle"));
 const optionInk_1 = require("../OptionChip/optionInk");
 const cardLabels_1 = require("./cardLabels");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const cardMetrics_1 = require("./cardMetrics");
 const productCardModel_1 = require("./productCardModel");
 const ProductCardAction_1 = __importDefault(require("./ProductCardAction"));
@@ -35,6 +36,7 @@ const ProductCard = (props) => {
     const reduced = (0, motion_2.usePrefersReducedMotion)();
     const titleId = (0, react_1.useId)();
     const [sheetOpen, setSheetOpen] = (0, react_1.useState)(false);
+    const [sheetMounted, setSheetMounted] = (0, react_1.useState)(false);
     const [picked, setPicked] = (0, react_1.useState)(null);
     const [previewed, setPreviewed] = (0, react_1.useState)(null);
     const [innerQuantity, setInnerQuantity] = (0, react_1.useState)(0);
@@ -71,8 +73,10 @@ const ProductCard = (props) => {
     const press = () => {
         if (action === "notify")
             onNotify === null || onNotify === void 0 ? void 0 : onNotify();
-        else if (action === "options")
+        else if (action === "options") {
+            setSheetMounted(true);
             setSheetOpen(true);
+        }
         else
             add();
     };
@@ -89,7 +93,8 @@ const ProductCard = (props) => {
     const slotted = horizontal ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "relative", zIndex: 2, children: actions })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "absolute", right: m.actionInset, bottom: m.actionInset, zIndex: 2, children: actions }));
     const control = actions ? slotted : defaultControl;
     const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { variant: horizontal ? "soft" : "glass", size: "md", label: copy.save(title), selected: wishlisted, onSelectedChange: onWishlistChange }));
-    const hoverFrame = previewed === null ? frames[1] : undefined;
+    const canHover = (0, useMatchMedia_1.useMatchMedia)(cardMetrics_1.FINE_POINTER_QUERY, true);
+    const hoverFrame = previewed === null && canHover ? frames[1] : undefined;
     const pressable = interactive && !reduced;
     const ink = (0, optionInk_1.optionInk)(colors).selected;
     const metaLine = meta !== null && meta !== void 0 ? meta : (left !== undefined ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "low-stock", count: left, size: "sm" }) : null);
@@ -110,7 +115,7 @@ const ProductCard = (props) => {
                                 outline: "none",
                                 "&::after": { content: '""', position: "absolute", inset: 0, zIndex: 1, borderRadius: cardMetrics_1.MEDIA_RADIUS },
                                 "&:focus-visible::after": (0, focusRing_styles_1.focusVisibleRing)(colors),
-                            }, children: title })) : (title) }), selected ? (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: copy.selected }) : null, rating !== undefined && rating > 0 ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: rating, count: ratingCount, size: "xs", compactCount: true })) : horizontal ? null : ((0, jsx_runtime_1.jsx)(react_2.Box, { minH: "1rem", "aria-hidden": true })), (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: m.price, price: price, mrp: soldOut ? undefined : mrp, priceRange: range, unitPrice: unitPrice, currency: currency, locale: locale }), soldOut ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.soldOut, size: "sm" }) : null, metaLine, swatchAxis && activeId ? ((0, jsx_runtime_1.jsx)(ProductCardSwatches_1.default, { axis: swatchAxis, limit: swatchLimit, dot: m.dot, activeId: activeId, soldOutIds: soldOutValues, labels: copy, onPreview: setPreviewed, onPick: setPicked })) : null, horizontal ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-control": true, position: "relative", zIndex: 2, mt: "auto", pt: 2, align: "center", justify: "space-between", gap: 1, children: [wishlist, control] })) : null] }), action === "options" ? ((0, jsx_runtime_1.jsx)(QuickAddSheet_1.default, { isOpen: sheetOpen, onClose: () => setSheetOpen(false), title: title, brand: brand, media: frames[0], axes: axes, variants: variants, defaultSelection: swatchAxis && picked ? { [swatchAxis.id]: picked } : undefined, currency: currency, locale: locale, presentation: quickAddPresentation, drawerContentProps: quickAddDrawerProps, onConfirm: (variant, count) => {
+                            }, children: title })) : (title) }), selected ? (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: copy.selected }) : null, rating !== undefined && rating > 0 ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: rating, count: ratingCount, size: "xs", compactCount: true })) : horizontal ? null : ((0, jsx_runtime_1.jsx)(react_2.Box, { minH: "1rem", "aria-hidden": true })), (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: m.price, price: price, mrp: soldOut ? undefined : mrp, priceRange: range, unitPrice: unitPrice, currency: currency, locale: locale }), soldOut ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: "out-of-stock", message: copy.soldOut, size: "sm" }) : null, metaLine, swatchAxis && activeId ? ((0, jsx_runtime_1.jsx)(ProductCardSwatches_1.default, { axis: swatchAxis, limit: swatchLimit, dot: m.dot, activeId: activeId, soldOutIds: soldOutValues, labels: copy, onPreview: setPreviewed, onPick: setPicked })) : null, horizontal ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-control": true, position: "relative", zIndex: 2, mt: "auto", pt: 2, align: "center", justify: "space-between", gap: 1, children: [wishlist, control] })) : null] }), action === "options" && sheetMounted ? ((0, jsx_runtime_1.jsx)(QuickAddSheet_1.default, { isOpen: sheetOpen, onClose: () => setSheetOpen(false), title: title, brand: brand, media: frames[0], axes: axes, variants: variants, defaultSelection: swatchAxis && picked ? { [swatchAxis.id]: picked } : undefined, currency: currency, locale: locale, presentation: quickAddPresentation, drawerContentProps: quickAddDrawerProps, onConfirm: (variant, count) => {
                     onAdd === null || onAdd === void 0 ? void 0 : onAdd(variant.id, count);
                     setSheetOpen(false);
                 } })) : null] }));

package/dist/Components/ProductCard/ProductCardMedia.js

@@ -9,7 +9,7 @@ const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const cardMetrics_1 = require("./cardMetrics");
 const DIMMED_OPACITY = 0.6;
-const Frame = ({ src, alt, fallbackText, quiet = false }) => {
+const Frame = ({ src, srcSet, sizes, alt, fallbackText, quiet = false }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const ref = (0, react_1.useRef)(null);
     const [loaded, setLoaded] = (0, react_1.useState)(false);
@@ -24,12 +24,12 @@ const Frame = ({ src, alt, fallbackText, quiet = false }) => {
             return null;
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { role: "img", "aria-label": alt, position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1.5, color: colors.textMuted, bg: colors.background[100], children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ImageOff, { size: 24, "aria-hidden": true }), fallbackText ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: 500, children: fallbackText })) : null] }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: ref, src: src, alt: alt, loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", display: "block", opacity: loaded ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)() }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", ref: ref, src: src, srcSet: srcSet, sizes: sizes, alt: alt, loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", display: "block", opacity: loaded ? 1 : 0, transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)() }));
 };
 /** Tonal media well: cover-fitted primary frame, optional hover frame, broken-image tile; overlays are children. */
 const ProductCardMedia = ({ primary, hover, title, alt, aspectRatio, dimmed, selected, fallbackText, width, children, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: cardMetrics_1.CSS_RATIO[aspectRatio] }, borderRadius: cardMetrics_1.MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: (0, motion_1.transitionFor)(["box-shadow"]), children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: (0, motion_1.transitionFor)(["transform", "opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: primary ? ((0, jsx_runtime_1.jsx)(Frame, { src: primary.src, alt: (_b = (_a = primary.alt) !== null && _a !== void 0 ? _a : alt) !== null && _b !== void 0 ? _b : title, fallbackText: fallbackText }, primary.src)) : ((0, jsx_runtime_1.jsx)(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Frame, { src: hover.src, alt: "", quiet: true }, hover.src) })) : null, children] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: cardMetrics_1.CSS_RATIO[aspectRatio] }, borderRadius: cardMetrics_1.MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: (0, motion_1.transitionFor)(["box-shadow"]), children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: (0, motion_1.transitionFor)(["transform", "opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: primary ? ((0, jsx_runtime_1.jsx)(Frame, { src: primary.src, srcSet: primary.srcSet, sizes: primary.sizes, alt: (_b = (_a = primary.alt) !== null && _a !== void 0 ? _a : alt) !== null && _b !== void 0 ? _b : title, fallbackText: fallbackText }, primary.src)) : ((0, jsx_runtime_1.jsx)(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: (0, motion_1.transitionFor)(["opacity"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(Frame, { src: hover.src, srcSet: hover.srcSet, sizes: hover.sizes, alt: "", quiet: true }, hover.src) })) : null, children] }));
 };
 exports.default = ProductCardMedia;

package/dist/Components/ProductCard/QuickAddSheet.js

@@ -49,7 +49,7 @@ const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantitySt
 const VariantSelector_1 = __importDefault(require("../VariantSelector/VariantSelector"));
 const commerceVariants_1 = require("../Commerce/commerceVariants");
 const productCardModel_1 = require("./productCardModel");
-const useMinWidth_1 = require("./useMinWidth");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const DEFAULT_LABELS = {
     heading: "Choose options",
     quantity: "Quantity",
@@ -62,7 +62,7 @@ const DESKTOP_QUERY = "(min-width: 48em)";
 const QuickAddSheet = ({ isOpen, onClose, title, brand, media, axes, variants, defaultSelection, onConfirm, presentation = "auto", drawerContentProps, labels, currency, locale, "data-testid": testId, }) => {
     var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const desktop = (0, useMinWidth_1.useMinWidth)(DESKTOP_QUERY);
+    const desktop = (0, useMatchMedia_1.useMatchMedia)(DESKTOP_QUERY);
     const copy = { ...DEFAULT_LABELS, ...labels };
     const [selection, setSelection] = (0, react_1.useState)(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
     const [quantity, setQuantity] = (0, react_1.useState)(1);

package/dist/Components/ProductCard/cardMetrics.d.ts

@@ -24,4 +24,5 @@ export declare const DENSITY: Record<ProductCardDensity, DensityMetrics>;
 export declare const CSS_RATIO: Record<ProductCardAspectRatio, string>;
 export declare const MEDIA_RADIUS = "1rem";
 export declare const TITLE_LINES = 2;
+export declare const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
 export declare const FINE_POINTER = "@media (hover: hover) and (pointer: fine)";

package/dist/Components/ProductCard/cardMetrics.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FINE_POINTER = exports.TITLE_LINES = exports.MEDIA_RADIUS = exports.CSS_RATIO = exports.DENSITY = void 0;
+exports.FINE_POINTER = exports.FINE_POINTER_QUERY = exports.TITLE_LINES = exports.MEDIA_RADIUS = exports.CSS_RATIO = exports.DENSITY = void 0;
 exports.DENSITY = {
     compact: {
         badgeInset: "0.5rem",
@@ -52,4 +52,5 @@ exports.CSS_RATIO = {
 };
 exports.MEDIA_RADIUS = "1rem";
 exports.TITLE_LINES = 2;
-exports.FINE_POINTER = "@media (hover: hover) and (pointer: fine)";
+exports.FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+exports.FINE_POINTER = `@media ${exports.FINE_POINTER_QUERY}`;

package/dist/Components/ProductDetails/ProductDetails.d.ts

@@ -1,4 +1,4 @@
 import type { ProductDetailsProps } from "./ProductDetailsProps";
 /** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
-declare const ProductDetails: ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity, onQuantityChange, maxQuantity, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading, labels: labelOverrides, currency, locale, "data-testid": testId, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
+declare const ProductDetails: ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity, onQuantityChange, maxQuantity, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout, size, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading, labels: labelOverrides, currency, locale, "data-testid": testId, }: ProductDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductDetails;

package/dist/Components/ProductDetails/ProductDetails.js

@@ -16,7 +16,7 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const MediaGallery_1 = __importDefault(require("../MediaGallery/MediaGallery"));
 const useContainerWidth_1 = require("../Commerce/useContainerWidth");
-const useMatchMedia_1 = require("../MediaGallery/useMatchMedia");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const ProductBadges_1 = __importDefault(require("../ProductBadges/ProductBadges"));
 const Rating_1 = __importDefault(require("../Rating/Rating"));
 const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
@@ -64,7 +64,7 @@ const scrollToNode = (node, reduced) => {
     }
 };
 /** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
-const ProductDetails = ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity = productDetailsModel_1.DEFAULT_MAX_QUANTITY, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration = DEFAULT_ADDED_MS, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout = "auto", mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading = false, labels: labelOverrides, currency, locale, "data-testid": testId, }) => {
+const ProductDetails = ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity = productDetailsModel_1.DEFAULT_MAX_QUANTITY, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration = DEFAULT_ADDED_MS, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout = "auto", size, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading = false, labels: labelOverrides, currency, locale, "data-testid": testId, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const reduced = (0, motion_2.usePrefersReducedMotion)();
@@ -75,6 +75,7 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const containerWidth = (0, useContainerWidth_1.useContainerWidth)(rootRef);
     const wide = (0, useMatchMedia_1.useMatchMedia)(DESKTOP_QUERY, false);
     const desktop = layout === "auto" ? (containerWidth === undefined ? wide : containerWidth >= DESKTOP_MIN_WIDTH) : layout === "desktop";
+    const controlSize = size !== null && size !== void 0 ? size : (desktop ? "md" : "lg");
     const variants = (0, react_1.useMemo)(() => (0, productDetailsModel_1.resolveVariants)(product), [product]);
     const axes = (0, react_1.useMemo)(() => withGuide(product.axes, sizeGuide), [product.axes, sizeGuide]);
     const [innerSelection, setInnerSelection] = (0, react_1.useState)(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
@@ -206,11 +207,11 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const showReviews = reviews !== undefined || product.ratingCount !== undefined;
     const sectionGap = desktop ? 18 : 10;
     const gutter = desktop ? 6 : 4;
-    const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { selected: wishlisted, defaultSelected: defaultWishlisted, onSelectedChange: onWishlistChange, size: desktop ? "lg" : "md", variant: desktop ? "soft" : "glass", label: labels.wishlistSave }));
+    const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { selected: wishlisted, defaultSelected: defaultWishlisted, onSelectedChange: onWishlistChange, size: desktop ? controlSize : "md", variant: desktop ? "soft" : "glass", label: labels.wishlistSave }));
     const badgeSlot = product.badges && product.badges.length > 0 ? (0, jsx_runtime_1.jsx)(ProductBadges_1.default, { badges: product.badges, max: 2, variant: "glass", size: "md" }) : undefined;
     const gallery = mediaSlot !== null && mediaSlot !== void 0 ? mediaSlot : ((0, jsx_runtime_1.jsx)(MediaGallery_1.default, { media: product.media, layout: desktop ? "thumbs-left" : "swipe", aspectRatio: "4/5", activeMediaIds: activeIds, sticky: desktop, stickyTop: 24, badges: badgeSlot, actions: desktop ? undefined : wishlist, isLoading: isLoading, "aria-label": product.title }));
-    const primaryButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { size: desktop ? "md" : "lg", width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) : notifyMode ? (0, jsx_runtime_1.jsx)(lucide_react_1.BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
-    const buyPanel = isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2.5rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : ((0, jsx_runtime_1.jsx)("span", {})), onShare ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 20, "aria-hidden": true }) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: (0, productDetailsModel_1.packUnitPrice)(product, selection, price), ...fmt }), state ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? (0, jsx_runtime_1.jsx)(OffersList_1.default, { offers: offers, ...offersProps }) : null, axes.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: selectorRef, children: (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, ref: ctaRef, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [showStepper ? ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: desktop ? "md" : "lg", value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? (0, jsx_runtime_1.jsx)(Button_1.default, { size: desktop ? "md" : "lg", width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? (0, jsx_runtime_1.jsx)(PincodeChecker_1.default, { ...pincode }) : null, trustItems && trustItems.length > 0 ? (0, jsx_runtime_1.jsx)(TrustBadges_1.default, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
+    const primaryButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) : notifyMode ? (0, jsx_runtime_1.jsx)(lucide_react_1.BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
+    const buyPanel = isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2.5rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : ((0, jsx_runtime_1.jsx)("span", {})), onShare ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 20, "aria-hidden": true }) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: (0, productDetailsModel_1.packUnitPrice)(product, selection, price), ...fmt }), state ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? (0, jsx_runtime_1.jsx)(OffersList_1.default, { offers: offers, ...offersProps }) : null, axes.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: selectorRef, children: (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, ref: ctaRef, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [showStepper ? ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? (0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? (0, jsx_runtime_1.jsx)(PincodeChecker_1.default, { ...pincode }) : null, trustItems && trustItems.length > 0 ? (0, jsx_runtime_1.jsx)(TrustBadges_1.default, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: rootRef, "data-testid": testId, "data-layout": desktop ? "desktop" : "mobile", w: "100%", maxW: "82rem", mx: "auto", px: desktop ? 6 : 0, children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }), breadcrumbs ? (0, jsx_runtime_1.jsx)(react_2.Box, { px: desktop ? 0 : gutter, py: 3, children: breadcrumbs }) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: desktop ? "row" : "column", align: desktop ? "flex-start" : "stretch", gap: desktop ? 12 : 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1.63 1 0" : undefined, minW: 0, w: desktop ? undefined : "100%", children: gallery }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1 1 0" : undefined, minW: 0, px: desktop ? 0 : gutter, children: buyPanel })] }), !isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: sectionGap, mt: sectionGap, px: desktop ? 0 : gutter, children: [(0, jsx_runtime_1.jsx)(DetailSections_1.default, { description: product.description, highlights: product.highlights, specs: product.specs, care: care, shipping: product.returnsNote, legal: hasLegal
                             ? {
                                 netQuantity: product.netQuantity,

package/dist/Components/ProductDetails/ProductDetailsProps.d.ts

@@ -126,6 +126,8 @@ export interface ProductDetailsProps extends PriceFormat {
     breadcrumbs?: ReactNode;
     /** `auto` splits into gallery and buy panel from 960px of the component's own width, not the window. */
     layout?: ProductDetailsLayout;
+    /** Height of the add-to-bag, buy-now and quantity controls; defaults to `md` (40px) on the split layout, `lg` (48px) on the phone page. */
+    size?: "md" | "lg";
     /** Replaces the gallery; its frames, badges and wishlist toggle go with it. */
     mediaSlot?: ReactNode;
     /** Extra content in the buy panel under the price, e.g. an EMI line. */

package/dist/Hooks/useMatchMedia.d.ts

@@ -0,0 +1,2 @@
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+export declare const useMatchMedia: (query: string, fallback?: boolean) => boolean;

package/dist/Hooks/useMatchMedia.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchMedia = void 0;
+const react_1 = require("react");
+const entries = new Map();
+const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const subscriberFor = (query) => (notify) => {
+    if (!supported())
+        return () => undefined;
+    let entry = entries.get(query);
+    if (!entry) {
+        const list = window.matchMedia(query);
+        const created = { list, listeners: new Set(), onChange: () => created.listeners.forEach((fn) => fn()) };
+        list.addEventListener("change", created.onChange);
+        entries.set(query, created);
+        entry = created;
+    }
+    entry.listeners.add(notify);
+    return () => {
+        const current = entries.get(query);
+        if (!current)
+            return;
+        current.listeners.delete(notify);
+        if (current.listeners.size === 0) {
+            current.list.removeEventListener("change", current.onChange);
+            entries.delete(query);
+        }
+    };
+};
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+const useMatchMedia = (query, fallback = false) => {
+    const subscribe = (0, react_1.useMemo)(() => subscriberFor(query), [query]);
+    const read = () => { var _a, _b; return (_b = (_a = entries.get(query)) === null || _a === void 0 ? void 0 : _a.list.matches) !== null && _b !== void 0 ? _b : (supported() ? window.matchMedia(query).matches : fallback); };
+    return (0, react_1.useSyncExternalStore)(subscribe, read, () => fallback);
+};
+exports.useMatchMedia = useMatchMedia;

package/dist/Theme/chakra/motion.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.REDUCED_MOTION_QUERY = void 0;
-const react_1 = require("react");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 exports.REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
-// NOTE: jsdom has no matchMedia; Chakra's hook throws there and breaks consumer test suites.
-const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-const readPreference = () => hasMatchMedia() && window.matchMedia(MEDIA).matches;
-const usePrefersReducedMotion = () => {
-    const [reduced, setReduced] = (0, react_1.useState)(readPreference);
-    (0, react_1.useEffect)(() => {
-        if (!hasMatchMedia())
-            return;
-        const query = window.matchMedia(MEDIA);
-        const onChange = () => setReduced(query.matches);
-        query.addEventListener("change", onChange);
-        return () => query.removeEventListener("change", onChange);
-    }, []);
-    return reduced;
-};
+const usePrefersReducedMotion = () => (0, useMatchMedia_1.useMatchMedia)(MEDIA, false);
 exports.usePrefersReducedMotion = usePrefersReducedMotion;
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 const reducedMotionSx = (overrides = {}) => ({

package/dist/Utils/price.js

@@ -7,15 +7,20 @@ exports.discountAmount = discountAmount;
 exports.unitPrice = unitPrice;
 exports.DEFAULT_CURRENCY = "INR";
 exports.DEFAULT_LOCALE = "en-IN";
+const formatters = new Map();
+const formatterFor = (locale, currency, minimum, maximum) => {
+    const key = `${locale}|${currency}|${minimum}|${maximum}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: minimum, maximumFractionDigits: maximum });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+};
 function formatPrice(value, options = {}) {
     const { currency = exports.DEFAULT_CURRENCY, locale = exports.DEFAULT_LOCALE, maximumFractionDigits } = options;
     const whole = Number.isInteger(value);
-    return new Intl.NumberFormat(locale, {
-        style: "currency",
-        currency,
-        minimumFractionDigits: whole ? 0 : 2,
-        maximumFractionDigits: maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2),
-    }).format(value);
+    return formatterFor(locale, currency, whole ? 0 : 2, maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2)).format(value);
 }
 function discountPercent(price, mrp) {
     if (mrp === undefined || mrp <= price || mrp <= 0)

package/dist/esm/Components/MediaGallery/MediaGallery.js

@@ -14,7 +14,7 @@ import MediaLightbox from "./MediaLightbox.js";
 import { GlassIconButton, GlassPill, glassStyles } from "./glass.js";
 import { CROSSFADE_MS, fadeIn } from "./motion.js";
 import { useContainerWidth } from "../Commerce/useContainerWidth.js";
-import { useMatchMedia } from "./useMatchMedia.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import { clampIndex, frameKind, frameSignature, indexForKey, keyBelongsToTarget, resolveFrames } from "./mediaGalleryModel.js";
 import { defaultMediaGalleryLabels } from "./MediaGalleryProps.js";
 const WIDE_QUERY = "(min-width: 768px)";

package/dist/esm/Components/ProductCard/ProductCard.js

@@ -13,7 +13,8 @@ import StockStatus from "../StockStatus/StockStatus.js";
 import WishlistToggle from "../WishlistToggle/WishlistToggle.js";
 import { optionInk } from "../OptionChip/optionInk.js";
 import { DEFAULT_LABELS } from "./cardLabels.js";
-import { DENSITY, FINE_POINTER, MEDIA_RADIUS, TITLE_LINES } from "./cardMetrics.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+import { DENSITY, FINE_POINTER, FINE_POINTER_QUERY, MEDIA_RADIUS, TITLE_LINES } from "./cardMetrics.js";
 import { DEFAULT_SWATCH_LIMIT, deriveAction, framesFor, lowStockCount, rangeOf, soleVariantOf, swatchAxisOf, valueSoldOut, variantsFor, isSoldOut, } from "./productCardModel.js";
 import ProductCardAction from "./ProductCardAction.js";
 import ProductCardMedia from "./ProductCardMedia.js";
@@ -30,6 +31,7 @@ const ProductCard = (props) => {
     const reduced = usePrefersReducedMotion();
     const titleId = useId();
     const [sheetOpen, setSheetOpen] = useState(false);
+    const [sheetMounted, setSheetMounted] = useState(false);
     const [picked, setPicked] = useState(null);
     const [previewed, setPreviewed] = useState(null);
     const [innerQuantity, setInnerQuantity] = useState(0);
@@ -66,8 +68,10 @@ const ProductCard = (props) => {
     const press = () => {
         if (action === "notify")
             onNotify === null || onNotify === void 0 ? void 0 : onNotify();
-        else if (action === "options")
+        else if (action === "options") {
+            setSheetMounted(true);
             setSheetOpen(true);
+        }
         else
             add();
     };
@@ -84,7 +88,8 @@ const ProductCard = (props) => {
     const slotted = horizontal ? (_jsx(Box, { "data-control": true, position: "relative", zIndex: 2, children: actions })) : (_jsx(Box, { "data-control": true, position: "absolute", right: m.actionInset, bottom: m.actionInset, zIndex: 2, children: actions }));
     const control = actions ? slotted : defaultControl;
     const wishlist = (_jsx(WishlistToggle, { variant: horizontal ? "soft" : "glass", size: "md", label: copy.save(title), selected: wishlisted, onSelectedChange: onWishlistChange }));
-    const hoverFrame = previewed === null ? frames[1] : undefined;
+    const canHover = useMatchMedia(FINE_POINTER_QUERY, true);
+    const hoverFrame = previewed === null && canHover ? frames[1] : undefined;
     const pressable = interactive && !reduced;
     const ink = optionInk(colors).selected;
     const metaLine = meta !== null && meta !== void 0 ? meta : (left !== undefined ? _jsx(StockStatus, { status: "low-stock", count: left, size: "sm" }) : null);
@@ -105,7 +110,7 @@ const ProductCard = (props) => {
                                 outline: "none",
                                 "&::after": { content: '""', position: "absolute", inset: 0, zIndex: 1, borderRadius: MEDIA_RADIUS },
                                 "&:focus-visible::after": focusVisibleRing(colors),
-                            }, children: title })) : (title) }), selected ? _jsx(VisuallyHidden, { children: copy.selected }) : null, rating !== undefined && rating > 0 ? (_jsx(Rating, { value: rating, count: ratingCount, size: "xs", compactCount: true })) : horizontal ? null : (_jsx(Box, { minH: "1rem", "aria-hidden": true })), _jsx(PriceBlock, { size: m.price, price: price, mrp: soldOut ? undefined : mrp, priceRange: range, unitPrice: unitPrice, currency: currency, locale: locale }), soldOut ? _jsx(StockStatus, { status: "out-of-stock", message: copy.soldOut, size: "sm" }) : null, metaLine, swatchAxis && activeId ? (_jsx(ProductCardSwatches, { axis: swatchAxis, limit: swatchLimit, dot: m.dot, activeId: activeId, soldOutIds: soldOutValues, labels: copy, onPreview: setPreviewed, onPick: setPicked })) : null, horizontal ? (_jsxs(Flex, { "data-control": true, position: "relative", zIndex: 2, mt: "auto", pt: 2, align: "center", justify: "space-between", gap: 1, children: [wishlist, control] })) : null] }), action === "options" ? (_jsx(QuickAddSheet, { isOpen: sheetOpen, onClose: () => setSheetOpen(false), title: title, brand: brand, media: frames[0], axes: axes, variants: variants, defaultSelection: swatchAxis && picked ? { [swatchAxis.id]: picked } : undefined, currency: currency, locale: locale, presentation: quickAddPresentation, drawerContentProps: quickAddDrawerProps, onConfirm: (variant, count) => {
+                            }, children: title })) : (title) }), selected ? _jsx(VisuallyHidden, { children: copy.selected }) : null, rating !== undefined && rating > 0 ? (_jsx(Rating, { value: rating, count: ratingCount, size: "xs", compactCount: true })) : horizontal ? null : (_jsx(Box, { minH: "1rem", "aria-hidden": true })), _jsx(PriceBlock, { size: m.price, price: price, mrp: soldOut ? undefined : mrp, priceRange: range, unitPrice: unitPrice, currency: currency, locale: locale }), soldOut ? _jsx(StockStatus, { status: "out-of-stock", message: copy.soldOut, size: "sm" }) : null, metaLine, swatchAxis && activeId ? (_jsx(ProductCardSwatches, { axis: swatchAxis, limit: swatchLimit, dot: m.dot, activeId: activeId, soldOutIds: soldOutValues, labels: copy, onPreview: setPreviewed, onPick: setPicked })) : null, horizontal ? (_jsxs(Flex, { "data-control": true, position: "relative", zIndex: 2, mt: "auto", pt: 2, align: "center", justify: "space-between", gap: 1, children: [wishlist, control] })) : null] }), action === "options" && sheetMounted ? (_jsx(QuickAddSheet, { isOpen: sheetOpen, onClose: () => setSheetOpen(false), title: title, brand: brand, media: frames[0], axes: axes, variants: variants, defaultSelection: swatchAxis && picked ? { [swatchAxis.id]: picked } : undefined, currency: currency, locale: locale, presentation: quickAddPresentation, drawerContentProps: quickAddDrawerProps, onConfirm: (variant, count) => {
                     onAdd === null || onAdd === void 0 ? void 0 : onAdd(variant.id, count);
                     setSheetOpen(false);
                 } })) : null] }));

package/dist/esm/Components/ProductCard/ProductCardMedia.js

@@ -7,7 +7,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { CSS_RATIO, MEDIA_RADIUS } from "./cardMetrics.js";
 const DIMMED_OPACITY = 0.6;
-const Frame = ({ src, alt, fallbackText, quiet = false }) => {
+const Frame = ({ src, srcSet, sizes, alt, fallbackText, quiet = false }) => {
     const { colors } = useCustomTheme();
     const ref = useRef(null);
     const [loaded, setLoaded] = useState(false);
@@ -22,12 +22,12 @@ const Frame = ({ src, alt, fallbackText, quiet = false }) => {
             return null;
         return (_jsxs(Box, { role: "img", "aria-label": alt, position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 1.5, color: colors.textMuted, bg: colors.background[100], children: [_jsx(ImageOff, { size: 24, "aria-hidden": true }), fallbackText ? (_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, children: fallbackText })) : null] }));
     }
-    return (_jsx(Box, { as: "img", ref: ref, src: src, alt: alt, loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", display: "block", opacity: loaded ? 1 : 0, transition: transitionFor(["opacity"]), sx: reducedMotionSx() }));
+    return (_jsx(Box, { as: "img", ref: ref, src: src, srcSet: srcSet, sizes: sizes, alt: alt, loading: "lazy", decoding: "async", draggable: false, onLoad: () => setLoaded(true), onError: () => setFailed(true), position: "absolute", inset: 0, w: "100%", h: "100%", objectFit: "cover", display: "block", opacity: loaded ? 1 : 0, transition: transitionFor(["opacity"]), sx: reducedMotionSx() }));
 };
 /** Tonal media well: cover-fitted primary frame, optional hover frame, broken-image tile; overlays are children. */
 const ProductCardMedia = ({ primary, hover, title, alt, aspectRatio, dimmed, selected, fallbackText, width, children, }) => {
     var _a, _b;
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: CSS_RATIO[aspectRatio] }, borderRadius: MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: transitionFor(["box-shadow"]), children: [_jsx(Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: transitionFor(["transform", "opacity"], "base"), sx: reducedMotionSx(), children: primary ? (_jsx(Frame, { src: primary.src, alt: (_b = (_a = primary.alt) !== null && _a !== void 0 ? _a : alt) !== null && _b !== void 0 ? _b : title, fallbackText: fallbackText }, primary.src)) : (_jsx(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? (_jsx(Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), children: _jsx(Frame, { src: hover.src, alt: "", quiet: true }, hover.src) })) : null, children] }));
+    return (_jsxs(Box, { "data-media": true, "data-ratio": aspectRatio, position: "relative", flexShrink: 0, w: width !== null && width !== void 0 ? width : "100%", sx: { aspectRatio: CSS_RATIO[aspectRatio] }, borderRadius: MEDIA_RADIUS, overflow: "hidden", bg: colors.background[100], boxShadow: selected ? `0 0 0 2px ${colors.header[900]}` : "none", transition: transitionFor(["box-shadow"]), children: [_jsx(Box, { "data-primary": true, position: "absolute", inset: 0, opacity: dimmed ? DIMMED_OPACITY : 1, transition: transitionFor(["transform", "opacity"], "base"), sx: reducedMotionSx(), children: primary ? (_jsx(Frame, { src: primary.src, srcSet: primary.srcSet, sizes: primary.sizes, alt: (_b = (_a = primary.alt) !== null && _a !== void 0 ? _a : alt) !== null && _b !== void 0 ? _b : title, fallbackText: fallbackText }, primary.src)) : (_jsx(Frame, { src: "", alt: alt !== null && alt !== void 0 ? alt : title, fallbackText: fallbackText }, "none")) }), hover ? (_jsx(Box, { "data-hover-frame": true, "aria-hidden": true, position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", transition: transitionFor(["opacity"], "base"), sx: reducedMotionSx(), children: _jsx(Frame, { src: hover.src, srcSet: hover.srcSet, sizes: hover.sizes, alt: "", quiet: true }, hover.src) })) : null, children] }));
 };
 export default ProductCardMedia;

package/dist/esm/Components/ProductCard/QuickAddSheet.js

@@ -11,7 +11,7 @@ import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
 import VariantSelector from "../VariantSelector/VariantSelector.js";
 import { findVariant } from "../Commerce/commerceVariants.js";
 import { rangeOf, firstMissingAxis } from "./productCardModel.js";
-import { useMinWidth } from "./useMinWidth.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 const DEFAULT_LABELS = {
     heading: "Choose options",
     quantity: "Quantity",
@@ -24,7 +24,7 @@ const DESKTOP_QUERY = "(min-width: 48em)";
 const QuickAddSheet = ({ isOpen, onClose, title, brand, media, axes, variants, defaultSelection, onConfirm, presentation = "auto", drawerContentProps, labels, currency, locale, "data-testid": testId, }) => {
     var _a, _b, _c;
     const { colors } = useCustomTheme();
-    const desktop = useMinWidth(DESKTOP_QUERY);
+    const desktop = useMatchMedia(DESKTOP_QUERY);
     const copy = { ...DEFAULT_LABELS, ...labels };
     const [selection, setSelection] = useState(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
     const [quantity, setQuantity] = useState(1);

package/dist/esm/Components/ProductCard/cardMetrics.js

@@ -49,4 +49,5 @@ export const CSS_RATIO = {
 };
 export const MEDIA_RADIUS = "1rem";
 export const TITLE_LINES = 2;
-export const FINE_POINTER = "@media (hover: hover) and (pointer: fine)";
+export const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
+export const FINE_POINTER = `@media ${FINE_POINTER_QUERY}`;

package/dist/esm/Components/ProductDetails/ProductDetails.js

@@ -11,7 +11,7 @@ import Button from "../Button/Button.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 import MediaGallery from "../MediaGallery/MediaGallery.js";
 import { useContainerWidth } from "../Commerce/useContainerWidth.js";
-import { useMatchMedia } from "../MediaGallery/useMatchMedia.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import ProductBadges from "../ProductBadges/ProductBadges.js";
 import Rating from "../Rating/Rating.js";
 import PriceBlock from "../PriceBlock/PriceBlock.js";
@@ -59,7 +59,7 @@ const scrollToNode = (node, reduced) => {
     }
 };
 /** Product page that wires one selection to price, stock, gallery frames and the primary action; every region has a slot. */
-const ProductDetails = ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity = DEFAULT_MAX_QUANTITY, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration = DEFAULT_ADDED_MS, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout = "auto", mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading = false, labels: labelOverrides, currency, locale, "data-testid": testId, }) => {
+const ProductDetails = ({ product, selection: selectionProp, defaultSelection, onSelectionChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity = DEFAULT_MAX_QUANTITY, onAddToBag, onBuyNow, onNotify, onGoToBag, addedDuration = DEFAULT_ADDED_MS, wishlisted, defaultWishlisted, onWishlistChange, onShare, offers, offersProps, trustItems, pincode, sizeGuide, onGuideClick, reviews, ratingBreakdown, reviewsProps, onWriteReview, detailSectionsProps, care, breadcrumbs, layout = "auto", size, mediaSlot, metaSlot, infoSlot, belowFold, relatedSlot, isLoading = false, labels: labelOverrides, currency, locale, "data-testid": testId, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { colors } = useCustomTheme();
     const reduced = usePrefersReducedMotion();
@@ -70,6 +70,7 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const containerWidth = useContainerWidth(rootRef);
     const wide = useMatchMedia(DESKTOP_QUERY, false);
     const desktop = layout === "auto" ? (containerWidth === undefined ? wide : containerWidth >= DESKTOP_MIN_WIDTH) : layout === "desktop";
+    const controlSize = size !== null && size !== void 0 ? size : (desktop ? "md" : "lg");
     const variants = useMemo(() => resolveVariants(product), [product]);
     const axes = useMemo(() => withGuide(product.axes, sizeGuide), [product.axes, sizeGuide]);
     const [innerSelection, setInnerSelection] = useState(defaultSelection !== null && defaultSelection !== void 0 ? defaultSelection : {});
@@ -201,11 +202,11 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const showReviews = reviews !== undefined || product.ratingCount !== undefined;
     const sectionGap = desktop ? 18 : 10;
     const gutter = desktop ? 6 : 4;
-    const wishlist = (_jsx(WishlistToggle, { selected: wishlisted, defaultSelected: defaultWishlisted, onSelectedChange: onWishlistChange, size: desktop ? "lg" : "md", variant: desktop ? "soft" : "glass", label: labels.wishlistSave }));
+    const wishlist = (_jsx(WishlistToggle, { selected: wishlisted, defaultSelected: defaultWishlisted, onSelectedChange: onWishlistChange, size: desktop ? controlSize : "md", variant: desktop ? "soft" : "glass", label: labels.wishlistSave }));
     const badgeSlot = product.badges && product.badges.length > 0 ? _jsx(ProductBadges, { badges: product.badges, max: 2, variant: "glass", size: "md" }) : undefined;
     const gallery = mediaSlot !== null && mediaSlot !== void 0 ? mediaSlot : (_jsx(MediaGallery, { media: product.media, layout: desktop ? "thumbs-left" : "swipe", aspectRatio: "4/5", activeMediaIds: activeIds, sticky: desktop, stickyTop: 24, badges: badgeSlot, actions: desktop ? undefined : wishlist, isLoading: isLoading, "aria-label": product.title }));
-    const primaryButton = (_jsx(Button, { size: desktop ? "md" : "lg", width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? _jsx(Check, { size: 18, "aria-hidden": true }) : notifyMode ? _jsx(BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
-    const buyPanel = isLoading ? (_jsxs(Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "30%" }), _jsx(Skeletons, { type: "skeleton", height: "2rem", width: "90%" }), _jsx(Skeletons, { type: "skeleton", height: "2.5rem", width: "45%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" })] })) : (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? (_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : (_jsx("span", {})), onShare ? (_jsx(Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: transitionFor(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Share2, { size: 20, "aria-hidden": true }) })) : null] }), _jsx(Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? (_jsx(Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...focusVisibleStyles(colors) }, children: _jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? (_jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(PriceBlock, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: packUnitPrice(product, selection, price), ...fmt }), state ? _jsx(StockStatus, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? _jsx(OffersList, { offers: offers, ...offersProps }) : null, axes.length > 0 ? (_jsx(Box, { ref: selectorRef, children: _jsx(VariantSelector, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, _jsxs(Flex, { direction: "column", gap: 3, ref: ctaRef, children: [_jsxs(Flex, { align: "center", gap: 3, children: [showStepper ? (_jsx(QuantityStepper, { size: desktop ? "md" : "lg", value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, _jsx(Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? _jsx(Button, { size: desktop ? "md" : "lg", width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? (_jsxs(Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [_jsx(CircleAlert, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? _jsx(PincodeChecker, { ...pincode }) : null, trustItems && trustItems.length > 0 ? _jsx(TrustBadges, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
+    const primaryButton = (_jsx(Button, { size: controlSize, width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? _jsx(Check, { size: 18, "aria-hidden": true }) : notifyMode ? _jsx(BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
+    const buyPanel = isLoading ? (_jsxs(Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "30%" }), _jsx(Skeletons, { type: "skeleton", height: "2rem", width: "90%" }), _jsx(Skeletons, { type: "skeleton", height: "2.5rem", width: "45%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" }), _jsx(Skeletons, { type: "skeleton", height: "3rem", width: "100%" })] })) : (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsxs(Flex, { direction: "column", gap: 2, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? (_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : (_jsx("span", {})), onShare ? (_jsx(Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: transitionFor(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Share2, { size: 20, "aria-hidden": true }) })) : null] }), _jsx(Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? (_jsx(Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...focusVisibleStyles(colors) }, children: _jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? (_jsx(Rating, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), _jsxs(Flex, { direction: "column", gap: 2, children: [_jsx(PriceBlock, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: packUnitPrice(product, selection, price), ...fmt }), state ? _jsx(StockStatus, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? _jsx(OffersList, { offers: offers, ...offersProps }) : null, axes.length > 0 ? (_jsx(Box, { ref: selectorRef, children: _jsx(VariantSelector, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, _jsxs(Flex, { direction: "column", gap: 3, ref: ctaRef, children: [_jsxs(Flex, { align: "center", gap: 3, children: [showStepper ? (_jsx(QuantityStepper, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, _jsx(Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? _jsx(Button, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? (_jsxs(Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [_jsx(CircleAlert, { size: 14, "aria-hidden": true }), _jsx(Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? _jsx(PincodeChecker, { ...pincode }) : null, trustItems && trustItems.length > 0 ? _jsx(TrustBadges, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
     return (_jsxs(Box, { ref: rootRef, "data-testid": testId, "data-layout": desktop ? "desktop" : "mobile", w: "100%", maxW: "82rem", mx: "auto", px: desktop ? 6 : 0, children: [_jsx(VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }), breadcrumbs ? _jsx(Box, { px: desktop ? 0 : gutter, py: 3, children: breadcrumbs }) : null, _jsxs(Flex, { direction: desktop ? "row" : "column", align: desktop ? "flex-start" : "stretch", gap: desktop ? 12 : 5, children: [_jsx(Box, { flex: desktop ? "1.63 1 0" : undefined, minW: 0, w: desktop ? undefined : "100%", children: gallery }), _jsx(Box, { flex: desktop ? "1 1 0" : undefined, minW: 0, px: desktop ? 0 : gutter, children: buyPanel })] }), !isLoading ? (_jsxs(Flex, { direction: "column", gap: sectionGap, mt: sectionGap, px: desktop ? 0 : gutter, children: [_jsx(DetailSections, { description: product.description, highlights: product.highlights, specs: product.specs, care: care, shipping: product.returnsNote, legal: hasLegal
                             ? {
                                 netQuantity: product.netQuantity,

package/dist/esm/Hooks/useMatchMedia.js

@@ -0,0 +1,32 @@
+import { useMemo, useSyncExternalStore } from "react";
+const entries = new Map();
+const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const subscriberFor = (query) => (notify) => {
+    if (!supported())
+        return () => undefined;
+    let entry = entries.get(query);
+    if (!entry) {
+        const list = window.matchMedia(query);
+        const created = { list, listeners: new Set(), onChange: () => created.listeners.forEach((fn) => fn()) };
+        list.addEventListener("change", created.onChange);
+        entries.set(query, created);
+        entry = created;
+    }
+    entry.listeners.add(notify);
+    return () => {
+        const current = entries.get(query);
+        if (!current)
+            return;
+        current.listeners.delete(notify);
+        if (current.listeners.size === 0) {
+            current.list.removeEventListener("change", current.onChange);
+            entries.delete(query);
+        }
+    };
+};
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+export const useMatchMedia = (query, fallback = false) => {
+    const subscribe = useMemo(() => subscriberFor(query), [query]);
+    const read = () => { var _a, _b; return (_b = (_a = entries.get(query)) === null || _a === void 0 ? void 0 : _a.list.matches) !== null && _b !== void 0 ? _b : (supported() ? window.matchMedia(query).matches : fallback); };
+    return useSyncExternalStore(subscribe, read, () => fallback);
+};

package/dist/esm/Theme/chakra/motion.js

@@ -1,21 +1,7 @@
-import { useEffect, useState } from "react";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 export const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
-// NOTE: jsdom has no matchMedia; Chakra's hook throws there and breaks consumer test suites.
-const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-const readPreference = () => hasMatchMedia() && window.matchMedia(MEDIA).matches;
-export const usePrefersReducedMotion = () => {
-    const [reduced, setReduced] = useState(readPreference);
-    useEffect(() => {
-        if (!hasMatchMedia())
-            return;
-        const query = window.matchMedia(MEDIA);
-        const onChange = () => setReduced(query.matches);
-        query.addEventListener("change", onChange);
-        return () => query.removeEventListener("change", onChange);
-    }, []);
-    return reduced;
-};
+export const usePrefersReducedMotion = () => useMatchMedia(MEDIA, false);
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 export const reducedMotionSx = (overrides = {}) => ({
     [REDUCED_MOTION_QUERY]: { transition: "none", animation: "none", ...overrides },

package/dist/esm/Utils/price.js

@@ -1,14 +1,19 @@
 export const DEFAULT_CURRENCY = "INR";
 export const DEFAULT_LOCALE = "en-IN";
+const formatters = new Map();
+const formatterFor = (locale, currency, minimum, maximum) => {
+    const key = `${locale}|${currency}|${minimum}|${maximum}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: minimum, maximumFractionDigits: maximum });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+};
 export function formatPrice(value, options = {}) {
     const { currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE, maximumFractionDigits } = options;
     const whole = Number.isInteger(value);
-    return new Intl.NumberFormat(locale, {
-        style: "currency",
-        currency,
-        minimumFractionDigits: whole ? 0 : 2,
-        maximumFractionDigits: maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2),
-    }).format(value);
+    return formatterFor(locale, currency, whole ? 0 : 2, maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2)).format(value);
 }
 export function discountPercent(price, mrp) {
     if (mrp === undefined || mrp <= price || mrp <= 0)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.57",
+  "version": "2.4.2-beta.58",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",

package/dist/Components/MediaGallery/useMatchMedia.d.ts

@@ -1,2 +0,0 @@
-/** `matches` for a media query, or `fallback` where matchMedia does not exist (SSR, jsdom). */
-export declare const useMatchMedia: (query: string, fallback: boolean) => boolean;

package/dist/Components/MediaGallery/useMatchMedia.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMatchMedia = void 0;
-const react_1 = require("react");
-const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-/** `matches` for a media query, or `fallback` where matchMedia does not exist (SSR, jsdom). */
-const useMatchMedia = (query, fallback) => {
-    const [matches, setMatches] = (0, react_1.useState)(() => (supported() ? window.matchMedia(query).matches : fallback));
-    (0, react_1.useEffect)(() => {
-        if (!supported())
-            return undefined;
-        const list = window.matchMedia(query);
-        const onChange = () => setMatches(list.matches);
-        onChange();
-        list.addEventListener("change", onChange);
-        return () => list.removeEventListener("change", onChange);
-    }, [query]);
-    return matches;
-};
-exports.useMatchMedia = useMatchMedia;

package/dist/Components/ProductCard/useMinWidth.d.ts

@@ -1,2 +0,0 @@
-/** `matches` for a media query; false where matchMedia does not exist (SSR, jsdom). */
-export declare const useMinWidth: (query: string) => boolean;

package/dist/Components/ProductCard/useMinWidth.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMinWidth = void 0;
-const react_1 = require("react");
-const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-/** `matches` for a media query; false where matchMedia does not exist (SSR, jsdom). */
-const useMinWidth = (query) => {
-    const [matches, setMatches] = (0, react_1.useState)(() => (supported() ? window.matchMedia(query).matches : false));
-    (0, react_1.useEffect)(() => {
-        if (!supported())
-            return undefined;
-        const list = window.matchMedia(query);
-        const onChange = () => setMatches(list.matches);
-        onChange();
-        list.addEventListener("change", onChange);
-        return () => list.removeEventListener("change", onChange);
-    }, [query]);
-    return matches;
-};
-exports.useMinWidth = useMinWidth;

package/dist/esm/Components/MediaGallery/useMatchMedia.js

@@ -1,16 +0,0 @@
-import { useEffect, useState } from "react";
-const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-/** `matches` for a media query, or `fallback` where matchMedia does not exist (SSR, jsdom). */
-export const useMatchMedia = (query, fallback) => {
-    const [matches, setMatches] = useState(() => (supported() ? window.matchMedia(query).matches : fallback));
-    useEffect(() => {
-        if (!supported())
-            return undefined;
-        const list = window.matchMedia(query);
-        const onChange = () => setMatches(list.matches);
-        onChange();
-        list.addEventListener("change", onChange);
-        return () => list.removeEventListener("change", onChange);
-    }, [query]);
-    return matches;
-};

package/dist/esm/Components/ProductCard/useMinWidth.js

@@ -1,16 +0,0 @@
-import { useEffect, useState } from "react";
-const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-/** `matches` for a media query; false where matchMedia does not exist (SSR, jsdom). */
-export const useMinWidth = (query) => {
-    const [matches, setMatches] = useState(() => (supported() ? window.matchMedia(query).matches : false));
-    useEffect(() => {
-        if (!supported())
-            return undefined;
-        const list = window.matchMedia(query);
-        const onChange = () => setMatches(list.matches);
-        onChange();
-        list.addEventListener("change", onChange);
-        return () => list.removeEventListener("change", onChange);
-    }, [query]);
-    return matches;
-};