pixelize-design-library 2.4.2 → 3.0.0

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

@@ -1,42 +1,220 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { Box, Flex, Text, HStack, IconButton, useBreakpointValue } from "@chakra-ui/react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { BellRing, Check, CircleAlert, Share2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import ProductImageSlider from "./ProductImageSlider.js";
-import ProductLabel from "../ProductCard/ProductLabel.js";
-import ProductTags from "../ProductCard/ProductTags.js";
-import ProductDtlPrice from "./ProductDtlPrice.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { formatPrice } from "../../Utils/price.js";
 import Button from "../Button/Button.js";
-import { ShoppingCartIcon, Minus, Plus } from "lucide-react";
-import ProductReview from "../ProductCard/ProductReview.js";
-import FormattedDescription from "../Common/FormattedDescription.js";
-const ProductDetails = ({ id, price, label, shortdesc, tags, images, batch, onAddToCart, onNotifyMe, onOptionChange, addToCart, goToCart, OnGoToCart, rating, reviews, notifyMe, isQtyEditable = false, displayRating = true, }) => {
-    var _a, _b, _c, _d, _e;
+import Skeletons from "../Skeletons/Skeletons.js";
+import MediaGallery from "../MediaGallery/MediaGallery.js";
+import { useContainerWidth } from "../Commerce/useContainerWidth.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";
+import StockStatus from "../StockStatus/StockStatus.js";
+import WishlistToggle from "../WishlistToggle/WishlistToggle.js";
+import VariantSelector from "../VariantSelector/VariantSelector.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import OffersList from "../OffersList/OffersList.js";
+import PincodeChecker from "../PincodeChecker/PincodeChecker.js";
+import TrustBadges from "../TrustBadges/TrustBadges.js";
+import StickyBuyBar from "../StickyBuyBar/StickyBuyBar.js";
+import DetailSections from "../DetailSections/DetailSections.js";
+import ReviewSummary from "../ReviewSummary/ReviewSummary.js";
+import ReviewList from "../ReviewList/ReviewList.js";
+import { findVariant, priceRange, selectionComplete, stockState } from "../Commerce/commerceVariants.js";
+import { DEFAULT_MAX_QUANTITY, activeMediaIds, clampQuantity, firstUnpickedAxis, packUnitPrice, quantityCeiling, resolveVariants, soldOutEverywhere, } from "./productDetailsModel.js";
+import { useInViewport } from "./useInViewport.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const DESKTOP_QUERY = "(min-width: 1024px)";
+const DESKTOP_MIN_WIDTH = 960;
+const DEFAULT_ADDED_MS = 1600;
+const DEFAULT_LABELS = {
+    addToBag: "Add to bag",
+    buyNow: "Buy now",
+    notifyMe: "Notify me",
+    goToBag: "Go to bag",
+    added: "Added",
+    addedAnnouncement: "Added to bag",
+    addFailed: "Couldn't add this to your bag. Try again.",
+    selectPrompt: (axisLabel) => `Select a ${axisLabel}`,
+    taxNote: "Inclusive of all taxes",
+    jumpToReviews: (ratingText) => `${ratingText}. Go to reviews`,
+    share: "Share",
+    wishlistSave: "Save for later",
+};
+const withGuide = (axes, guide) => {
+    var _a;
+    if (!guide)
+        return axes;
+    const axisId = (_a = guide.axisId) !== null && _a !== void 0 ? _a : "size";
+    return axes.map((axis) => { var _a; return axis.id === axisId && !axis.guide ? { ...axis, guide: { label: (_a = guide.label) !== null && _a !== void 0 ? _a : "Size guide", onClick: guide.onClick } } : axis; });
+};
+const scrollToNode = (node, reduced) => {
+    if (node && typeof node.scrollIntoView === "function") {
+        node.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "center" });
+    }
+};
+/** 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", 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 isMobile = useBreakpointValue({ base: true, md: false });
-    const [selectedOption, setSelectedOption] = React.useState(price === null || price === void 0 ? void 0 : price[0]);
-    const [qty, setQty] = React.useState(1);
-    React.useEffect(() => {
-        setQty(1);
-    }, [selectedOption]);
-    const handleIncrement = () => {
-        setQty((prev) => {
-            var _a;
-            const stock = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : Infinity;
-            if (prev >= stock)
-                return prev;
-            return prev + 1;
-        });
+    const reduced = usePrefersReducedMotion();
+    const uid = useId();
+    const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+    const fmt = useMemo(() => ({ currency, locale }), [currency, locale]);
+    const rootRef = useRef(null);
+    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 : {});
+    const selection = selectionProp !== null && selectionProp !== void 0 ? selectionProp : innerSelection;
+    const complete = selectionComplete(product.axes, selection);
+    const variant = findVariant(product.axes, variants, selection);
+    const unpicked = firstUnpickedAxis(product.axes, selection);
+    const selectPrompt = unpicked ? labels.selectPrompt(unpicked.label.toLowerCase()) : "";
+    const state = variant ? stockState(variant) : soldOutEverywhere(variants) ? "out-of-stock" : undefined;
+    const notifyMode = state === "out-of-stock";
+    const ceiling = quantityCeiling(variant, maxQuantity);
+    const [innerQuantity, setInnerQuantity] = useState(defaultQuantity);
+    const quantity = clampQuantity(quantityProp !== null && quantityProp !== void 0 ? quantityProp : innerQuantity, ceiling);
+    const [bag, setBag] = useState("idle");
+    const [addFailed, setAddFailed] = useState(false);
+    const [showSelectError, setShowSelectError] = useState(false);
+    const [promptTick, setPromptTick] = useState(0);
+    const [announcement, setAnnouncement] = useState("");
+    const timer = useRef();
+    const mounted = useRef(true);
+    const selectorRef = useRef(null);
+    const ctaRef = useRef(null);
+    const reviewsRef = useRef(null);
+    const ctaInView = useInViewport(ctaRef, !desktop && !isLoading);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            clearTimeout(timer.current);
+        };
+    }, []);
+    const variantId = variant === null || variant === void 0 ? void 0 : variant.id;
+    useEffect(() => {
+        clearTimeout(timer.current);
+        setBag("idle");
+        setAddFailed(false);
+    }, [variantId, quantity]);
+    useEffect(() => {
+        var _a, _b;
+        if (promptTick === 0)
+            return;
+        const group = (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="radiogroup"][aria-invalid="true"]');
+        scrollToNode(group !== null && group !== void 0 ? group : selectorRef.current, reduced);
+        (_b = group === null || group === void 0 ? void 0 : group.querySelector('[role="radio"][tabindex="0"]')) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+    }, [promptTick, reduced]);
+    const handleSelection = useCallback((next, matched) => {
+        if (selectionProp === undefined)
+            setInnerSelection(next);
+        if (selectionComplete(product.axes, next))
+            setShowSelectError(false);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(next, matched);
+    }, [selectionProp, product.axes, onSelectionChange]);
+    const handleQuantity = (next) => {
+        if (quantityProp === undefined)
+            setInnerQuantity(next);
+        onQuantityChange === null || onQuantityChange === void 0 ? void 0 : onQuantityChange(next);
+    };
+    const promptSelection = () => {
+        setShowSelectError(true);
+        setPromptTick((tick) => tick + 1);
+    };
+    const handleAdd = async () => {
+        if (!complete || !variant) {
+            promptSelection();
+            return;
+        }
+        if (bag === "in-bag") {
+            onGoToBag === null || onGoToBag === void 0 ? void 0 : onGoToBag();
+            return;
+        }
+        if (bag !== "idle")
+            return;
+        setAddFailed(false);
+        try {
+            const pending = onAddToBag === null || onAddToBag === void 0 ? void 0 : onAddToBag(variant.id, quantity);
+            if (pending && typeof pending.then === "function") {
+                setBag("adding");
+                await pending;
+            }
+        }
+        catch {
+            if (mounted.current) {
+                setBag("idle");
+                setAddFailed(true);
+            }
+            return;
+        }
+        if (!mounted.current)
+            return;
+        setBag("added");
+        setAnnouncement(labels.addedAnnouncement);
+        timer.current = setTimeout(() => {
+            setBag(onGoToBag ? "in-bag" : "idle");
+            setAnnouncement("");
+        }, addedDuration);
     };
-    const handleDecrement = () => {
-        setQty((prev) => (prev > 1 ? prev - 1 : 1));
+    const handleBuyNow = () => {
+        if (!complete || !variant) {
+            promptSelection();
+            return;
+        }
+        onBuyNow === null || onBuyNow === void 0 ? void 0 : onBuyNow(variant.id, quantity);
     };
-    return (_jsxs(Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5, children: [_jsx(Box, { position: "relative", color: colors.text[500], borderRadius: "md", flex: "1", minH: isMobile ? undefined : "31.25rem", children: _jsx(ProductImageSlider, { images: images, thumbHeight: isMobile ? 48 : 80, imageSize: isMobile ? 360 : 480, thumbnailsToShow: isMobile ? 4 : 6, batch: batch }) }), _jsxs(Box, { flex: "1", children: [label && _jsx(ProductLabel, { label: label, size: "sm" }), shortdesc && _jsx(Box, { my: 3, children: _jsx(FormattedDescription, { content: shortdesc }) }), ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && displayRating && (_jsx(ProductReview, { rating: rating, reviewCount: reviews, mb: 3 })), tags && _jsx(ProductTags, { tags: tags, size: "sm" }), price && (_jsx(ProductDtlPrice, { price: price, onSelect: (option) => {
-                            setSelectedOption(option);
-                            onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
-                        } })), typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : 0) <= 0 && (_jsx(Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" }, children: _jsx(Button, { colorScheme: "gray", size: "sm", 
-                            // width="50%"
-                            // onClick={button?.onClick}
-                            isDisabled: true, children: "Out of Stock" }) })), goToCart && (_jsx(Button, { size: "sm", colorScheme: "red", leftIcon: _jsx(ShoppingCartIcon, {}), sx: { ml: "1.1rem" }, onClick: OnGoToCart, children: "Go to cart" })), addToCart && (((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 1) > 0) && isQtyEditable && (_jsx(HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4, children: _jsxs(HStack, { children: [_jsx(IconButton, { icon: _jsx(Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }), _jsx(Text, { fontWeight: "bold", w: 8, textAlign: "center", children: qty }), _jsx(IconButton, { icon: _jsx(Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : Infinity), isRound: true, variant: "outline", colorScheme: "red" })] }) })), addToCart && (((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 1) > 0) && (_jsx(Button, { size: "sm", colorScheme: "red", leftIcon: _jsx(ShoppingCartIcon, {}), sx: { ml: "1.1rem" }, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)), children: "Add to cart" })), addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) <= 0) && notifyMe && (_jsx(Button, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)), children: "Notify Me" }))] })] }));
+    const handleNotify = () => onNotify === null || onNotify === void 0 ? void 0 : onNotify(variant === null || variant === void 0 ? void 0 : variant.id);
+    const jumpToReviews = () => scrollToNode(reviewsRef.current, reduced);
+    const range = !variant && !complete ? priceRange(variants) : null;
+    const price = (_a = variant === null || variant === void 0 ? void 0 : variant.price) !== null && _a !== void 0 ? _a : product.price;
+    const mrp = variant ? variant.mrp : product.mrp;
+    const showRange = range !== null && range.min !== range.max;
+    const activeIds = activeMediaIds(product, selection, variant);
+    const primaryLabel = bag === "added" ? labels.added : bag === "in-bag" ? labels.goToBag : notifyMode ? labels.notifyMe : labels.addToBag;
+    const barMode = notifyMode
+        ? "notify"
+        : !complete
+            ? "select-option"
+            : bag === "added"
+                ? "added"
+                : bag === "in-bag"
+                    ? "go-to-bag"
+                    : "add";
+    const showStepper = !notifyMode && ceiling > 0;
+    const showBuyNow = !!onBuyNow && !notifyMode && bag === "idle";
+    const ratingText = product.rating === undefined
+        ? ""
+        : `Rated ${product.rating.toFixed(1)} out of 5${product.ratingCount ? ` from ${product.ratingCount.toLocaleString(locale !== null && locale !== void 0 ? locale : "en-IN")} ratings` : ""}`;
+    const mrpForLegal = variant ? ((_b = variant.mrp) !== null && _b !== void 0 ? _b : variant.price) : ((_c = product.mrp) !== null && _c !== void 0 ? _c : product.price);
+    const hasLegal = !!(product.netQuantity || product.manufacturer || product.originCountry);
+    const reviewsHeadingId = `${uid}-reviews`;
+    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 ? 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: 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: tonalHover(colors, colors.background[50], 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,
+                                manufacturer: product.manufacturer,
+                                originCountry: product.originCountry,
+                                mrpNote: `${formatPrice(mrpForLegal, fmt)} · ${(_e = (_d = detailSectionsProps === null || detailSectionsProps === void 0 ? void 0 : detailSectionsProps.labels) === null || _d === void 0 ? void 0 : _d.mrpIncludesTaxes) !== null && _e !== void 0 ? _e : "Maximum retail price, inclusive of all taxes"}`,
+                            }
+                            : undefined, defaultOpenIds: desktop ? ["description", "highlights", "specs"] : undefined, ...detailSectionsProps }), showReviews ? (_jsx(Box, { ref: reviewsRef, children: _jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(ReviewSummary, { id: reviewsHeadingId, rating: (_f = product.rating) !== null && _f !== void 0 ? _f : 0, count: (_h = (_g = product.ratingCount) !== null && _g !== void 0 ? _g : reviews === null || reviews === void 0 ? void 0 : reviews.length) !== null && _h !== void 0 ? _h : 0, breakdown: ratingBreakdown, onWriteReview: onWriteReview, locale: locale }), reviews && (reviews.length > 0 || (reviewsProps === null || reviewsProps === void 0 ? void 0 : reviewsProps.isLoading)) ? (_jsx(ReviewList, { reviews: reviews, locale: locale, ...reviewsProps })) : null] }) })) : null, belowFold, relatedSlot] })) : null, !desktop && !isLoading ? (_jsx(StickyBuyBar, { price: price, mrp: mrp, mode: barMode, visible: !ctaInView, isLoading: bag === "adding", itemLabel: product.title, onAddToBag: handleAdd, onSelectOption: promptSelection, onNotify: handleNotify, onGoToBag: () => onGoToBag === null || onGoToBag === void 0 ? void 0 : onGoToBag(), onBuyNow: onBuyNow ? handleBuyNow : undefined, labels: { add: labels.addToBag, selectOption: selectPrompt || labels.addToBag, notify: labels.notifyMe, added: labels.added, goToBag: labels.goToBag, buyNow: labels.buyNow }, ...fmt })) : null] }));
 };
 export default ProductDetails;

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

@@ -0,0 +1,35 @@
+import { stockState } from "../Commerce/commerceVariants.js";
+import { unitPrice } from "../../Utils/price.js";
+export const DEFAULT_MAX_QUANTITY = 10;
+/** A product without variants sells as one variant at its own price. */
+export const resolveVariants = (product) => product.variants.length > 0
+    ? product.variants
+    : [{ id: "default", options: {}, price: product.price, mrp: product.mrp }];
+/** A variant's own frames win; otherwise the frames of each picked option, in axis order. */
+export const activeMediaIds = (product, selection, variant) => {
+    if ((variant === null || variant === void 0 ? void 0 : variant.mediaIds) && variant.mediaIds.length > 0)
+        return variant.mediaIds;
+    const byOption = product.mediaIdsByOption;
+    if (!byOption)
+        return undefined;
+    const ids = product.axes.flatMap((axis) => { var _a; return (_a = byOption[`${axis.id}:${selection[axis.id]}`]) !== null && _a !== void 0 ? _a : []; });
+    return ids.length > 0 ? [...new Set(ids)] : undefined;
+};
+export const packUnitPrice = (product, selection, price) => {
+    if (!product.unit)
+        return null;
+    const axis = product.axes.find((candidate) => candidate.type === "pack");
+    const picked = axis === null || axis === void 0 ? void 0 : axis.values.find((value) => value.id === selection[axis.id]);
+    if (!(picked === null || picked === void 0 ? void 0 : picked.quantity))
+        return null;
+    return unitPrice(price, picked.quantity, product.unit.unit, product.unit.per);
+};
+export const firstUnpickedAxis = (axes, selection) => axes.find((axis) => selection[axis.id] === undefined);
+export const soldOutEverywhere = (variants) => variants.length > 0 && variants.every((variant) => stockState(variant) === "out-of-stock");
+/** Real remaining stock caps the order; backorder and untracked stock fall back to the per-order ceiling. */
+export const quantityCeiling = (variant, maxQuantity) => {
+    if ((variant === null || variant === void 0 ? void 0 : variant.stock) === undefined || variant.backorder)
+        return maxQuantity;
+    return Math.max(0, Math.min(variant.stock, maxQuantity));
+};
+export const clampQuantity = (value, ceiling) => Math.max(1, Math.min(value, Math.max(1, ceiling)));

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

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+/** Whether the element is on screen; true until an observer reports otherwise, and always true where IntersectionObserver is missing. */
+export const useInViewport = (ref, enabled = true) => {
+    const [inView, setInView] = useState(true);
+    useEffect(() => {
+        const node = ref.current;
+        if (!enabled || !node || typeof IntersectionObserver === "undefined")
+            return undefined;
+        const observer = new IntersectionObserver(([entry]) => setInView(entry.isIntersecting));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [ref, enabled]);
+    return inView;
+};

package/dist/esm/Components/ProfileCard/ProfileCard.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { Card as ChakraCard, CardBody, CardFooter, CardHeader, Divider, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { warnDroppedSlotChildren } from "../Modal/warnDroppedSlotChildren.js";
+import { findSlot } from "../Common/findSlot.js";
 export const ProfileCardHeader = ({ children, }) => {
     return _jsx(_Fragment, { children: children });
 };
@@ -11,24 +12,27 @@ export const ProfileCardBody = ({ children, }) => {
 export const ProfileCardFooter = ({ children, }) => {
     return _jsx(_Fragment, { children: children });
 };
-export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+const SLOTS = [ProfileCardHeader, ProfileCardBody, ProfileCardFooter];
+const DROPPED_ADVICE = "Render it outside the card.";
+/** Card built from ProfileCardHeader, Body and Footer slots; other children are dropped. */
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "1px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
+    var _a;
     const { colors } = useCustomTheme();
     const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.boxborder[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
-    const isReactElement = (child) => {
-        return child !== null && typeof child === "object" && "type" in child;
-    };
-    const header = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardHeader);
-    const body = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardBody);
-    const footer = React.Children.toArray(children).find((child) => isReactElement(child) && child.type === ProfileCardFooter);
+    const header = findSlot(children, ProfileCardHeader);
+    const body = findSlot(children, ProfileCardBody);
+    const footer = findSlot(children, ProfileCardFooter);
+    warnDroppedSlotChildren("ProfileCard", children, SLOTS, DROPPED_ADVICE);
     const StylesWithBorder = borderLeftColor
         ? { ...CardStyle, borderLeft: accentBorder }
         : borderTopColor
             ? { ...CardStyle, borderTop: accentBorder }
             : { ...CardStyle };
-    return (_jsxs(ChakraCard, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && (_jsxs(_Fragment, { children: [_jsx(CardHeader, { sx: { ...CardHeaderStyle, fontWeight: "bold" }, py: 15, children: header }), _jsx(Divider, { style: {
+    return (_jsxs(ChakraCard, { maxW: maxW, align: align, variant: variant === "outlein" ? "outline" : variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && (_jsxs(_Fragment, { children: [_jsx(CardHeader, { sx: CardHeaderStyle, ...header.props, children: header }), _jsx(Divider, { opacity: 1, style: {
                             borderColor: resolvedDividerColor,
-                            borderWidth: dividersize,
+                            borderWidth: 0,
+                            borderBottomWidth: dividersize,
                             borderStyle: dividervariant,
-                        } })] })), _jsx(CardBody, { sx: CardBodyStyle, children: body }), footer && _jsx(CardFooter, { children: footer })] }));
+                        } })] })), _jsx(CardBody, { sx: CardBodyStyle, ...((_a = body === null || body === void 0 ? void 0 : body.props) !== null && _a !== void 0 ? _a : {}), children: body }), footer && _jsx(CardFooter, { ...footer.props, children: footer })] }));
 }

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -3,13 +3,28 @@ import { useRef, useState } from "react";
 import { Box, Image, IconButton, Input, Text, Tooltip, HStack, } from "@chakra-ui/react";
 import { Eye, FileText, SquarePen, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
+const RING_TRANSITION = transitionFor(["box-shadow"], "base");
+const FADE_TRANSITION = transitionFor(["opacity"], "base");
+const ACTION_TRANSITION = transitionFor(["transform", "background", "box-shadow"], "base");
+/** Avatar display with optional edit/view actions — does not crop, resize, or upload; PDF detection breaks on a freshly-picked file. */
 export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = useState(photoUrl);
+    const [syncedUrl, setSyncedUrl] = useState(photoUrl);
+    if (photoUrl !== syncedUrl) {
+        setSyncedUrl(photoUrl);
+        setPhoto(photoUrl);
+    }
     const fileInputRef = useRef(null);
     const theme = useCustomTheme();
     const c = theme.colors;
+    const editFill = resolveFilledSurface(c.primary, c);
     const handlePhotoChange = (event) => {
         var _a;
         if (!isEditable)
@@ -32,15 +47,18 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    // [800], not [300]: the edit IconButton's border is a control boundary — WCAG 1.4.11 needs
-    // >=3.0 against any named surface up to `muted` (lightest); [300] fails there, [800] clears
-    // all with margin.
+    const viewHoverBg = bandOn(c.gray[50], c.background[50]);
+    // NOTE: [800] not [300] — the edit IconButton's border is a control boundary, WCAG 1.4.11 needs >=3:1.
     const border = c.boxborder[500];
+    const hoverScrim = (opacity) => {
+        const { r, g, b } = hexToRgb(c.black);
+        return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    };
     // Shared modern frame for whichever media we render (photo / pdf / fallback).
     const mediaFrame = {
         boxSize: imageWidth,
         borderRadius: imageBorderRadius,
-        border: `0.063rem solid ${border}`,
+        border: `${BORDER_WIDTHS.hairline} solid ${border}`,
         boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.sm,
     };
     const renderMedia = () => {
@@ -51,23 +69,23 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
         return (_jsx(Box, { ...mediaFrame, display: "flex", alignItems: "center", justifyContent: "center", bg: c.primary.opacity[16], color: accentTextOnCanvas(c.primary, c.backgroundColor.main), children: fallbackText ? (_jsx(Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1", children: fallbackText })) : (_jsx(User, { size: "48%" })) }));
     };
     const hasActions = isEditable || isView;
-    return (_jsxs(Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
+    return (_jsxs(Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: RING_TRANSITION, sx: {
             "&:hover .ppv-overlay": { opacity: 1 },
             "&:hover .ppv-actions": { opacity: 1 },
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease", children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[500], color: onFilled(c.primary[500], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
-                                        bg: c.primary[600],
-                                        color: onFilled(c.primary[600], c.white, c.black),
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: FADE_TRANSITION, children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: editFill.fill, color: editFill.color, border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: ACTION_TRANSITION, _hover: {
+                                        bg: editFill.hoverFill,
+                                        color: editFill.hoverColor,
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
-                                        bg: c.primary[700],
-                                        color: onFilled(c.primary[700], c.white, c.black),
-                                    } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `0.063rem solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
-                                        bg: c.gray[50],
-                                        color: accentTextOnCanvas(c.primary, c.gray[50]),
+                                        bg: editFill.activeFill,
+                                        color: editFill.activeColor,
+                                    } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: ACTION_TRANSITION, _hover: {
+                                        bg: viewHoverBg,
+                                        color: accentTextOnCanvas(c.primary, viewHoverBg),
                                         transform: "scale(1.1)",
                                         boxShadow: (_e = theme.shadows) === null || _e === void 0 ? void 0 : _e.lg,
                                     }, _active: { bg: c.gray[100] } }) }))] }), isEditable && (_jsx(Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));

package/dist/esm/Components/ProgressBar/ProgressBar.js

@@ -1,6 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Progress } from "@chakra-ui/react";
-export default function ProgressBar({ size, isIndeterminate, color = "primary", hasStripe, height, value, isAnimated, max, min, variant, ...aria }) {
-    //  const theme = useCustomTheme();
-    return (_jsx(Progress, { ...aria, size: size, isIndeterminate: isIndeterminate, colorScheme: color, hasStripe: hasStripe, height: height, value: value, isAnimated: isAnimated, max: max, min: min, variant: variant }));
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { scaleNamed } from "../../Theme/tokens/builders/paletteScale.js";
+// whiteAlpha/blackAlpha keep Chakra's own fill; contrast math can't resolve alpha scales.
+const NAMED_SCALES = new Set([
+    "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
+    "primary", "secondary",
+]);
+const scaleFor = (colors, scheme) => NAMED_SCALES.has(scheme)
+    ? scaleNamed(colors, scheme)
+    : undefined;
+/** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
+export default function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const scheme = (_a = colorScheme !== null && colorScheme !== void 0 ? colorScheme : color) !== null && _a !== void 0 ? _a : "primary";
+    const scale = scaleFor(colors, scheme);
+    // Chakra pins the fill to rung [500]; light hues (green/orange/blue/cyan) measure as low as
+    // 1.67:1 against the `gray[100]` track — under 1.4.11's 3:1. Lift the fill, not the track.
+    const fill = scale ? liftToContrast(scale[500], colors.gray[100]) : undefined;
+    return (_jsx(Progress, { ...rest, variant: variant, isIndeterminate: isIndeterminate, colorScheme: scheme, sx: fill
+            ? {
+                "& > div:first-of-type": isIndeterminate
+                    ? {
+                        backgroundImage: `linear-gradient(to right, transparent 0%, ${fill} 50%, transparent 100%) !important`,
+                    }
+                    : { backgroundColor: `${fill} !important` },
+            }
+            : undefined }));
 }

package/dist/esm/Components/QuantityStepper/QuantityStepper.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Minus, Plus, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const MIN_HIT = "2.75rem";
+const LIMIT_OPACITY = 0.4;
+const clamp = (n, min, max) => Math.max(min, max === undefined ? n : Math.min(max, n));
+/** Pill stepper for quantities: soft or outline, trash at the floor on cart lines, limits announced via aria-disabled. */
+const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, step = 1, size = "md", variant = "soft", removable = false, onRemove, disabled = false, itemLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const spec = BUTTON_SIZES[size];
+    const [inner, setInner] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : min);
+    const current = value !== null && value !== void 0 ? value : inner;
+    const atMin = current <= min;
+    const atMax = max !== undefined && current >= max;
+    const trash = removable && atMin;
+    const subject = itemLabel ? ` of ${itemLabel}` : "";
+    const change = (direction) => {
+        const next = clamp(current + direction * step, min, max);
+        if (next === current)
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+    };
+    const surface = variant === "outline"
+        ? { bg: "transparent", boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${colors.boxborder[500]}` }
+        : { bg: colors.background[100], boxShadow: "none" };
+    const hoverFill = tonalHover(colors, variant === "outline" ? colors.background[50] : colors.background[100]);
+    const button = (kind) => {
+        const limited = kind === "dec" ? atMin && !trash : atMax;
+        const Icon = kind === "inc" ? Plus : trash ? Trash2 : Minus;
+        const label = kind === "inc" ? `Increase quantity${subject}` : trash ? `Remove${itemLabel ? ` ${itemLabel}` : ""}` : `Decrease quantity${subject}`;
+        return (_jsx(Box, { as: "button", type: "button", "aria-label": label, "aria-disabled": limited || undefined, disabled: disabled, "data-testid": testId ? `${testId}-${kind}` : undefined, onClick: () => {
+                if (limited)
+                    return;
+                if (kind === "dec" && trash)
+                    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                else
+                    change(kind === "inc" ? 1 : -1);
+            }, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxSize: spec.height, borderRadius: "full", color: colors.header[900], opacity: limited || disabled ? LIMIT_OPACITY : 1, cursor: limited || disabled ? "not-allowed" : "pointer", transition: transitionFor(["background-color", "transform", "opacity"]), _hover: limited || disabled ? undefined : { bg: hoverFill }, _active: limited || disabled ? undefined : { transform: "scale(0.96)" }, sx: {
+                ...focusVisibleStyles(colors),
+                ...reducedMotionSx({ "&:active": { transform: "none" } }),
+                "&::before": {
+                    content: '""',
+                    position: "absolute",
+                    inset: `max(0px, calc((${MIN_HIT} - ${spec.height}) / -2))`,
+                },
+            }, children: _jsx(Icon, { size: spec.iconSize, "aria-hidden": true }) }));
+    };
+    return (_jsxs(Flex, { role: "group", "aria-label": `Quantity${subject}`, display: "inline-flex", align: "center", h: spec.height, borderRadius: "full", ...surface, "data-testid": testId, children: [button("dec"), _jsx(Text, { as: "span", "aria-live": "polite", "aria-atomic": "true", minW: "1.75rem", textAlign: "center", fontSize: spec.fontSize, fontWeight: 600, color: colors.header[900], sx: NUMERIC_TEXT, children: current }), button("inc")] }));
+};
+export default QuantityStepper;

package/dist/esm/Components/QuantityStepper/QuantityStepperProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/QueryState/ErrorState.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { AlertTriangle, RotateCw } from "lucide-react";
+import EmptyState from "../EmptyState/EmptyState.js";
+import Button from "../Button/Button.js";
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+const ErrorState = ({ title = "Couldn't load this", description = "Something went wrong on our side. Nothing was lost — try again in a moment.", icon = AlertTriangle, onRetry, retryLabel = "Retry", isRetrying = false, action, size = "md", minH, }) => {
+    const actions = onRetry || action ? (_jsxs(_Fragment, { children: [onRetry && (_jsx(Button, { size: "sm", variant: "outline", colorScheme: "gray", label: retryLabel, leftIcon: _jsx(RotateCw, { size: 16 }), isLoading: isRetrying, loadingText: retryLabel, onClick: onRetry })), action] })) : undefined;
+    return (_jsx(Box, { role: "alert", w: "100%", children: _jsx(EmptyState, { colorScheme: "error", icon: icon, title: title, description: description, size: size, minH: minH, action: actions }) }));
+};
+export default ErrorState;