pixelize-design-library 2.4.2 → 3.0.0

package/dist/esm/Components/PincodeChecker/PincodeChecker.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Check, CircleAlert, Info } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import { FIELD_RADIUS, FIELD_TRANSITION, fieldHoverBorder, fieldTextStyles } from "../Common/fieldStyles.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const DEFAULT_LABELS = {
+    heading: "Check delivery",
+    inputLabel: "Pincode",
+    placeholder: "Enter pincode",
+    check: "Check",
+    change: "Change",
+    hint: "Delivery date, COD and returns for your area",
+    invalid: "Enter a 6-digit pincode",
+    unserviceable: "We don't deliver here yet",
+    checking: "Checking delivery",
+    deliveryBy: "Delivery by",
+    codAvailable: "Cash on Delivery available",
+    codUnavailable: "Cash on Delivery not available",
+    deliverTo: "Deliver to",
+    unserviceableHint: "Try another pincode",
+};
+const PIN_LENGTH = 6;
+const FIELD_HEIGHT = "3rem";
+const ERROR_RING = "1.5px";
+const pulse = keyframes `0%, 100% { opacity: 1; } 50% { opacity: 0.5; }`;
+const digitsOnly = (raw) => raw.replace(/\D/g, "").slice(0, PIN_LENGTH);
+const isPin = (pin) => pin.length === PIN_LENGTH;
+const isThenable = (value) => typeof value === "object" && value !== null && typeof value.then === "function";
+const SkeletonBlock = ({ w, h }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { "aria-hidden": true, w: w, h: h, borderRadius: "md", bg: colors.background[200], animation: `${pulse} 1.2s ease-in-out infinite`, sx: reducedMotionSx() }));
+};
+/** Pincode field that answers with a delivery date, COD availability and a shipping note, held in place so the panel never jumps. */
+const PincodeChecker = ({ value, defaultValue = "", onValueChange, status: statusProp, result: resultProp, onCheck, autoCheck = true, checkOnMount = false, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const baseId = useId();
+    const inputId = `${baseId}-pin`;
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const [innerPin, setInnerPin] = useState(digitsOnly(defaultValue));
+    const [innerStatus, setInnerStatus] = useState("idle");
+    const [innerResult, setInnerResult] = useState();
+    const [editing, setEditing] = useState(false);
+    const [localInvalid, setLocalInvalid] = useState(false);
+    const inputRef = useRef(null);
+    const changeRef = useRef(null);
+    const latest = useRef(0);
+    const mounted = useRef(true);
+    const focusInput = useRef(false);
+    const focusChange = useRef(false);
+    const pin = value === undefined ? innerPin : digitsOnly(value);
+    const status = statusProp !== null && statusProp !== void 0 ? statusProp : innerStatus;
+    const result = resultProp !== null && resultProp !== void 0 ? resultProp : innerResult;
+    const invalid = localInvalid || status === "invalid";
+    const outcome = status === "serviceable" || status === "unserviceable"
+        ? status
+        : status === "idle" || status === "invalid"
+            ? null
+            : result
+                ? result.ok
+                    ? "serviceable"
+                    : "unserviceable"
+                : null;
+    const checking = status === "checking";
+    const showField = editing || status === "idle" || invalid;
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+        };
+    }, []);
+    useEffect(() => {
+        if (status === "serviceable" || status === "unserviceable")
+            setEditing(false);
+    }, [status]);
+    useEffect(() => {
+        var _a, _b;
+        if (showField && focusInput.current) {
+            focusInput.current = false;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (!showField && focusChange.current) {
+            focusChange.current = false;
+            (_b = changeRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [showField]);
+    const settle = useCallback((answer) => {
+        if (document.activeElement === inputRef.current)
+            focusChange.current = true;
+        setInnerResult(answer);
+        setInnerStatus(answer.ok ? "serviceable" : "unserviceable");
+        setEditing(false);
+    }, []);
+    const run = useCallback((code) => {
+        if (!isPin(code)) {
+            setLocalInvalid(true);
+            return;
+        }
+        setLocalInvalid(false);
+        setEditing(showField);
+        const ticket = ++latest.current;
+        const answer = onCheck === null || onCheck === void 0 ? void 0 : onCheck(code);
+        if (answer === undefined)
+            return;
+        if (!isThenable(answer)) {
+            settle(answer);
+            return;
+        }
+        setInnerStatus("checking");
+        answer.then((resolved) => {
+            if (mounted.current && ticket === latest.current)
+                settle(resolved);
+        }, () => {
+            if (mounted.current && ticket === latest.current)
+                settle({ ok: false });
+        });
+    }, [onCheck, settle, showField]);
+    useEffect(() => {
+        if (checkOnMount && isPin(pin))
+            run(pin);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const onChange = (event) => {
+        const next = digitsOnly(event.target.value);
+        if (value === undefined)
+            setInnerPin(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
+        setEditing(true);
+        setLocalInvalid(false);
+        if (autoCheck && isPin(next))
+            run(next);
+    };
+    const onSubmit = (event) => {
+        var _a;
+        event.preventDefault();
+        if (!isPin(pin))
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        run(pin);
+    };
+    const reopen = () => {
+        focusInput.current = true;
+        setEditing(true);
+    };
+    const fieldRing = invalid
+        ? `inset 0 0 0 ${ERROR_RING} ${colors.semanticText.error}`
+        : "none";
+    const field = (_jsxs(Box, { as: "form", noValidate: true, onSubmit: onSubmit, children: [_jsxs(Flex, { gap: 2, align: "stretch", children: [_jsx(Box, { as: "input", ref: inputRef, id: inputId, type: "text", inputMode: "numeric", autoComplete: "postal-code", maxLength: PIN_LENGTH, value: pin, placeholder: copy.placeholder, onChange: onChange, onBlur: () => {
+                            if (pin.length > 0 && !isPin(pin))
+                                setLocalInvalid(true);
+                        }, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? errorId : hintId, flex: 1, minW: 0, h: FIELD_HEIGHT, px: 4, fontSize: "md", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: "transparent", borderRadius: FIELD_RADIUS, boxShadow: fieldRing, transition: FIELD_TRANSITION, _placeholder: { color: placeholderInk(colors), opacity: 1 }, _hover: invalid ? undefined : { borderColor: fieldHoverBorder(colors) }, _focusVisible: {
+                            borderColor: invalid ? "transparent" : colors.primary[500],
+                            ...fieldFocusVisible(colors),
+                            boxShadow: invalid ? `${fieldRing}, ${fieldFocusVisible(colors).boxShadow}` : fieldFocusVisible(colors).boxShadow,
+                        }, sx: { ...fieldTextStyles(colors), ...NUMERIC_TEXT, letterSpacing: "0.08em", ...reducedMotionSx() } }), _jsx(Button, { type: "submit", size: "lg", label: copy.check })] }), invalid ? (_jsxs(Flex, { id: errorId, mt: 2, gap: 1.5, align: "center", fontSize: "sm", fontWeight: 500, color: colors.semanticText.error, children: [_jsx(CircleAlert, { size: 16, "aria-hidden": true, style: { flexShrink: 0 } }), _jsx(Text, { as: "span", children: (status === "invalid" && (result === null || result === void 0 ? void 0 : result.message)) || copy.invalid })] })) : (_jsx(Text, { id: hintId, mt: 2, fontSize: "xs", color: colors.textMuted, children: copy.hint }))] }));
+    const changeButton = (_jsx(Button, { ref: changeRef, variant: "link", size: "sm", h: "2.75rem", flexShrink: 0, onClick: reopen, label: copy.change }));
+    const savedLine = !showField && outcome === "serviceable" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: 3, children: [_jsxs(Text, { fontSize: "sm", color: colors.textMuted, sx: NUMERIC_TEXT, children: [copy.deliverTo, " ", _jsxs(Text, { as: "span", fontWeight: 600, color: colors.header[900], children: [pin, (result === null || result === void 0 ? void 0 : result.city) ? ` · ${result.city}` : ""] })] }), changeButton] })) : null;
+    const details = outcome === "serviceable" && result ? (_jsxs(Flex, { direction: "column", gap: 2, children: [result.deliveryBy && (_jsxs(Text, { fontSize: "lg", lineHeight: 1.3, sx: NUMERIC_TEXT, children: [_jsxs(Text, { as: "span", fontSize: "sm", color: colors.textMuted, children: [copy.deliveryBy, " "] }), _jsx(Text, { as: "span", fontWeight: 700, color: colors.header[900], children: result.deliveryBy })] })), result.cod !== undefined && (_jsxs(Flex, { align: "center", gap: 2, fontSize: "sm", fontWeight: 500, color: colors.header[900], children: [result.cod ? (_jsx(Box, { as: "span", color: colors.semanticText.success, display: "inline-flex", children: _jsx(Check, { size: 16, "aria-hidden": true }) })) : (_jsx(Box, { as: "span", color: colors.semanticText.warning, display: "inline-flex", children: _jsx(Info, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", children: result.cod ? copy.codAvailable : copy.codUnavailable })] })), result.shippingNote && (_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: result.shippingNote }))] })) : outcome === "unserviceable" ? (_jsxs(Flex, { align: "flex-start", justify: "space-between", gap: 3, children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: (result === null || result === void 0 ? void 0 : result.message) || copy.unserviceable }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, children: copy.unserviceableHint })] }), !showField && changeButton] })) : null;
+    const skeleton = checking && !outcome && (_jsxs(Flex, { direction: "column", gap: 3, "aria-hidden": true, children: [_jsx(SkeletonBlock, { w: "55%", h: "0.875rem" }), _jsx(SkeletonBlock, { w: "40%", h: "1.5rem" }), _jsx(SkeletonBlock, { w: "70%", h: "0.875rem" })] }));
+    return (_jsxs(Box, { "aria-busy": checking || undefined, bg: colors.background[100], borderRadius: "xl", p: 4, "data-testid": testId, children: [_jsx(Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], mb: 3, children: copy.heading }), showField && (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { as: "label", htmlFor: inputId, children: copy.inputLabel }), field] })), _jsxs(Flex, { direction: "column", gap: 3, mt: showField && (outcome || skeleton) ? 4 : 0, "aria-live": "polite", opacity: checking && outcome ? 0.6 : 1, transition: transitionFor(["opacity"]), sx: reducedMotionSx(), children: [checking && _jsx(VisuallyHidden, { children: copy.checking }), savedLine, details, skeleton] })] }));
+};
+export default PincodeChecker;

package/dist/esm/Components/PincodeChecker/PincodeCheckerProps.js

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

package/dist/esm/Components/PlanBadge/PlanBadge.js

@@ -1,13 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { resolvePlanBadge } from "../../Utils/planBadge.js";
 import PlanPill from "../PlanPill/PlanPill.js";
-/**
- * The top-bar plan badge: resolves an org's plan state into a `PlanPill`, or
- * renders nothing when there is nothing to say (or nobody who can act on it).
- *
- * Use this when the app has the plan state to hand; drop to `PlanPill` directly
- * for a badge whose copy is decided elsewhere.
- */
+// Top-bar plan badge — resolves an org's plan state into a PlanPill, or renders nothing.
 const PlanBadge = ({ input, maxLabelWidth, ariaLabel, onClick, }) => {
     const { visible, label, mobileLabel, subtitle, tone } = resolvePlanBadge(input);
     if (!visible)

package/dist/esm/Components/PlanPill/PlanPill.js

@@ -3,12 +3,17 @@ import { Box, Flex, Text } from "@chakra-ui/react";
 import { AlertCircle, Clock, Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { chipBorder, chipFill, statusGradient, } from "./planPillGradient.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BASE_TRANSFORM_BOX_SHADOW_TRANSITION = transitionFor(["transform", "box-shadow"], "base");
 const TONE_ICON = {
     normal: Sparkles,
     warning: Clock,
     danger: AlertCircle,
 };
+/** Gradient pill button with plan label, optional time-left chip and a tone-based icon; always renders a `<button>`. */
 const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient, maxLabelWidth = "150px", ariaLabel, onClick, }) => {
     const theme = useCustomTheme();
     const c = theme.colors;
@@ -21,17 +26,15 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const ink = resolved.ink;
     const Icon = icon === undefined ? TONE_ICON[tone] : icon;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: gradientCss(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: gradientCss(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: BASE_TRANSFORM_BOX_SHADOW_TRANSITION, _hover: {
             transform: "translateY(-1px)",
             boxShadow: `0 6px 18px ${resolved.from}59`,
-        }, _focusVisible: {
-            outline: "none",
-            boxShadow: `0 0 0 3px ${resolved.from}55`,
         }, sx: {
+            ...focusVisibleStyles(c),
             "@media (prefers-reduced-motion: reduce)": {
                 transition: "none",
                 _hover: { transform: "none" },
             },
-        }, children: [Icon ? _jsx(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, _jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? (_jsx(Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? (_jsx(Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: chipFill(resolved), border: "1px solid", borderColor: chipBorder(resolved), fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+        }, children: [Icon ? _jsx(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, _jsx(Text, { as: "span", fontSize: "xs-plus", fontWeight: "600", lineHeight: "18px", overflow: "hidden", textOverflow: "ellipsis", maxW: maxLabelWidth, display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile ? (_jsx(Text, { as: "span", fontSize: "xs-plus", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? (_jsx(Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: chipFill(resolved), border: "1px solid", borderColor: chipBorder(resolved), fontSize: "xs-minus", fontWeight: "700", lineHeight: "18px", sx: NUMERIC_TEXT, children: status })) : null] }));
 };
 export default PlanPill;

package/dist/esm/Components/PlanPill/planPillGradient.js

@@ -1,29 +1,15 @@
 import { resolveAvatarFill } from "../../Theme/tokens/builders/statusTone.js";
 import { relativeLuminance } from "../../Theme/tokens/builders/color.js";
-export const STATUS_INK = "#ffffff";
-/**
- * Opt-in accent for consumers who want a fixed badge colour instead of the brand `gradient`.
- * One hue, like every brand gradient — a second hue reads as a status change, not a style.
- */
+import { neutralTokens } from "../../Theme/tokens/brands/neutrals.js";
+import { inkSafeGradient } from "../../Theme/tokens/builders/gradientInk.js";
+export { inkSafeGradient };
+/** @deprecated Use `colors.white` from `useCustomTheme()` directly. */
+export const STATUS_INK = neutralTokens.white;
 export const ACCENT_GRADIENT = { from: "#8b3fc8", to: "#762d9d" };
-/**
- * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
- * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
- * same badge reads white-on-colour in one brand and black-on-pastel in the next.
- */
-export const inkSafeGradient = (gradient) => ({
-    from: resolveAvatarFill(gradient.from),
-    to: resolveAvatarFill(gradient.to),
-});
-/** Status tones are semantic scales, not designed as label backdrops. */
 export const statusGradient = (scale) => inkSafeGradient({ from: scale[400], to: scale[600] });
 const CHIP_INK_CONTRAST = 7;
 export const darkerStop = (g) => relativeLuminance(g.from) <= relativeLuminance(g.to) ? g.from : g.to;
-/**
- * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
- * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
- * one step down from the pill in every brand and both modes.
- */
+// NOTE: derived rung, not a translucent scrim — a guessed alpha muddied every mid-tone gradient.
 export const chipFill = (g) => resolveAvatarFill(darkerStop(g), CHIP_INK_CONTRAST);
 /** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */
 export const chipBorder = (g) => relativeLuminance(g.from) > relativeLuminance(g.to) ? g.from : g.to;

package/dist/esm/Components/PriceBlock/PriceBlock.js

@@ -0,0 +1,39 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { discountAmount, discountPercent, formatPrice } from "../../Utils/price.js";
+const SCALE = {
+    sm: { price: "0.9375rem", priceLine: 1.33, secondary: "0.75rem", secondaryLine: 1.33, note: "0.75rem" },
+    md: { price: "1.125rem", priceLine: 1.22, secondary: "0.8125rem", secondaryLine: 1.38, note: "0.75rem" },
+    lg: { price: "1.75rem", priceLine: 1.21, secondary: "0.9375rem", secondaryLine: 1.47, note: "0.8125rem" },
+};
+const ALIGN = {
+    start: { items: "flex-start", justify: "flex-start", text: "left" },
+    center: { items: "center", justify: "center", text: "center" },
+    end: { items: "flex-end", justify: "flex-end", text: "right" },
+};
+const DEFAULT_LABELS = {
+    price: "Price",
+    originalPrice: "Original price",
+    off: (percent) => `${percent}% off`,
+    save: (amount) => `You save ${amount}`,
+};
+const unitText = (unit, fmt) => typeof unit === "string" ? unit : `${formatPrice(unit.value, fmt)} / ${unit.per === 1 ? "" : `${unit.per} `}${unit.unit}`;
+/** Selling price, struck MRP, discount, savings, tax note and unit price in one tabular, screen-reader-friendly block. */
+const PriceBlock = ({ price, mrp, priceRange, size = "md", align = "start", showSavings = false, taxNote, unitPrice, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const fmt = { currency, locale };
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const scale = SCALE[size];
+    const a = ALIGN[align];
+    const isRange = !!priceRange && priceRange.min !== priceRange.max;
+    const selling = priceRange ? priceRange.min : price;
+    const priceText = isRange ? `${formatPrice(priceRange.min, fmt)} – ${formatPrice(priceRange.max, fmt)}` : selling === undefined ? null : formatPrice(selling, fmt);
+    const percent = !priceRange && selling !== undefined ? discountPercent(selling, mrp) : 0;
+    const saved = !priceRange && selling !== undefined ? discountAmount(selling, mrp) : 0;
+    const hasDiscount = percent > 0;
+    const muted = { fontSize: scale.note, lineHeight: 1.4, color: colors.textMuted, sx: NUMERIC_TEXT };
+    return (_jsxs(Flex, { direction: "column", align: a.items, gap: 0.5, textAlign: a.text, "data-testid": testId, children: [_jsxs(Flex, { align: "baseline", justify: a.justify, columnGap: 2, rowGap: 0, wrap: "wrap", children: [priceText !== null && (_jsxs(Text, { as: "span", fontSize: scale.price, lineHeight: scale.priceLine, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: NUMERIC_TEXT, children: [_jsxs(VisuallyHidden, { children: [copy.price, " "] }), priceText] })), hasDiscount && mrp !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "del", fontSize: scale.secondary, lineHeight: scale.secondaryLine, color: colors.textMuted, textDecoration: "line-through", sx: NUMERIC_TEXT, children: [_jsxs(VisuallyHidden, { children: [copy.originalPrice, " "] }), formatPrice(mrp, fmt)] }), _jsx(Text, { as: "span", fontSize: scale.secondary, lineHeight: scale.secondaryLine, fontWeight: 600, color: colors.semanticText.success, sx: NUMERIC_TEXT, children: copy.off(percent) })] }))] }), showSavings && hasDiscount && (_jsx(Text, { as: "span", fontSize: scale.note, lineHeight: 1.4, fontWeight: 600, color: colors.semanticText.success, sx: NUMERIC_TEXT, children: copy.save(formatPrice(saved, fmt)) })), taxNote && (_jsx(Text, { as: "span", ...muted, children: taxNote })), unitPrice != null && (_jsx(Text, { as: "span", ...muted, children: unitText(unitPrice, fmt) }))] }));
+};
+export default PriceBlock;

package/dist/esm/Components/PriceBlock/PriceBlockProps.js

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

package/dist/esm/Components/Primitives/Primitives.js

@@ -1,6 +1,3 @@
-export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Avatar, AvatarGroup, Badge, Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Tabs, TabList, Tab, TabPanels, TabPanel, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
-// Renamed: the library's own Table and Slider own these names.
-export { Table as TableRoot, Slider as RangeSlider } from "@chakra-ui/react";
-export { Input, Textarea, Progress, Radio, RadioGroup, Skeleton, ModalOverlay, ModalContent, ModalCloseButton, CardBody, } from "@chakra-ui/react";
-// Prefixed because the library ships its own component under each of these names.
-export { Card as ChakraCard, Select as ChakraSelect, Modal as ChakraModal, ModalBody as ChakraModalBody, ModalHeader as ChakraModalHeader, ModalFooter as ChakraModalFooter, } from "@chakra-ui/react";
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+// Renamed: the library's own Table owns this name.
+export { Table as TableRoot } from "@chakra-ui/react";

package/dist/esm/Components/ProductBadges/ProductBadges.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
+const scaleFor = (colors, tone) => {
+    switch (tone) {
+        case "accent":
+            return colors.primary;
+        case "neutral":
+            return colors.gray;
+        case "success":
+            return colors.semantic.success;
+        case "warning":
+            return colors.semantic.warning;
+        case "danger":
+            return colors.semantic.error;
+        case "info":
+            return colors.semantic.info;
+    }
+};
+const SIZE = {
+    sm: { h: "1.25rem", font: "0.6875rem", px: 1.5 },
+    md: { h: "1.5rem", font: "0.75rem", px: 2 },
+};
+const lookFor = (colors, tone, variant) => {
+    if (variant === "glass") {
+        const dot = tone === "inverse" || tone === "neutral" ? undefined : resolveFilledSurface(scaleFor(colors, tone), colors).fill;
+        return { bg: overlayScrim(colors), color: colors.white, dot };
+    }
+    if (tone === "inverse") {
+        return variant === "soft"
+            ? { bg: colors.background[100], color: colors.header[900] }
+            : { bg: colors.header[900], color: colors.background[50] };
+    }
+    const scale = scaleFor(colors, tone);
+    if (variant === "soft") {
+        const soft = resolveStatusTone(scale, isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light");
+        return { bg: soft.bg, color: soft.fg };
+    }
+    const filled = resolveFilledSurface(scale, colors);
+    return { bg: filled.fill, color: filled.color };
+};
+/** Stack of corner badges (sale, new, low stock…) built from `ProductBadge[]`; filled chips resolve ink per brand and mode. */
+const ProductBadges = ({ badges, max = 2, size = "sm", variant = "solid", orientation = "vertical", "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const shown = badges.slice(0, Math.max(0, max));
+    if (shown.length === 0)
+        return null;
+    const s = SIZE[size];
+    return (_jsx(Flex, { as: "ul", role: "list", listStyleType: "none", m: 0, p: 0, direction: orientation === "vertical" ? "column" : "row", align: "flex-start", wrap: orientation === "vertical" ? "nowrap" : "wrap", gap: 1.5, maxW: "100%", "data-testid": testId, children: shown.map((badge, i) => {
+            var _a, _b;
+            const look = lookFor(colors, (_a = badge.tone) !== null && _a !== void 0 ? _a : "neutral", variant);
+            return (_jsxs(Flex, { as: "li", "data-tone": (_b = badge.tone) !== null && _b !== void 0 ? _b : "neutral", "data-variant": variant, align: "center", gap: 1, h: s.h, px: s.px, maxW: "100%", borderRadius: "md", bg: look.bg, color: look.color, sx: variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : undefined, children: [look.dot && _jsx(Box, { as: "span", "aria-hidden": true, boxSize: "6px", flexShrink: 0, borderRadius: "full", bg: look.dot }), _jsx(Text, { as: "span", fontSize: s.font, fontWeight: 600, lineHeight: 1, letterSpacing: "0.01em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", sx: NUMERIC_TEXT, children: badge.label })] }, `${badge.label}-${i}`));
+        }) }));
+};
+export default ProductBadges;

package/dist/esm/Components/ProductBadges/ProductBadgesProps.js

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

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

@@ -1,62 +1,118 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Box, Image, Badge, VStack, HStack, Text, IconButton } from "@chakra-ui/react";
-import ProductTags from "./ProductTags.js";
-import ProductPrice from "./ProductPrice.js";
-import Button from "../Button/Button.js";
-import ProductLabel from "./ProductLabel.js";
+import { useId, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { Check } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { Minus, Plus } from "lucide-react";
-import ProductReview from "./ProductReview.js";
-const ProductCard = ({ id, label, productImage, rating, reviews, tags, options, button, batch, onAddToCart, onNotifyMe, onClick, onOptionChange, addToCart, goToCart, OnGoToCart, size = "sm", notifyMe, isQtyEditable = false, displayRating = true, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const [hover, setHover] = useState(false);
-    const theme = useCustomTheme();
-    const [selectedOption, setSelectedOption] = useState(options === null || options === void 0 ? void 0 : options[0]);
-    const [qty, setQty] = useState(1);
-    const handleOptionSelect = (option) => {
-        setSelectedOption(option);
-        onOptionChange === null || onOptionChange === void 0 ? void 0 : onOptionChange(option);
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import ProductBadges from "../ProductBadges/ProductBadges.js";
+import Rating from "../Rating/Rating.js";
+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 { 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";
+import ProductCardSkeleton from "./ProductCardSkeleton.js";
+import ProductCardSwatches from "./ProductCardSwatches.js";
+import QuickAddSheet from "./QuickAddSheet.js";
+const NO_AXES = [];
+const NO_VARIANTS = [];
+/** Chromeless product card: tonal media well, brand, title, rating, price and one action; the whole card is one link target. */
+const ProductCard = (props) => {
+    var _a, _b;
+    const { title, brand, media, alt, price, mrp, unitPrice, rating, ratingCount, badges, axes = NO_AXES, variants = NO_VARIANTS, mediaIdsByOption, swatchLimit = DEFAULT_SWATCH_LIMIT, stock, outOfStock, href, linkAs, linkProps, onPress, layout = "grid", density = "comfortable", aspectRatio = "4/5", action: actionOverride, quantity, onQuantityChange, onAdd, quickAddPresentation, quickAddDrawerProps, onRemove, onNotify, wishlisted, onWishlistChange, selected = false, isLoading = false, mediaOverlay, meta, actions, labels, currency, locale, "data-testid": testId, } = props;
+    const { colors } = useCustomTheme();
+    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);
+    const [pressed, setPressed] = useState(false);
+    const canHover = useMatchMedia(FINE_POINTER_QUERY, true);
+    if (isLoading)
+        return _jsx(ProductCardSkeleton, { layout: layout, density: density, aspectRatio: aspectRatio, "data-testid": testId });
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const m = DENSITY[density];
+    const horizontal = layout === "list";
+    const rail = layout === "rail";
+    const soldOut = isSoldOut(outOfStock, stock, variants);
+    const sole = soleVariantOf(axes, variants);
+    const action = deriveAction(actionOverride, soldOut, axes);
+    const left = soldOut ? undefined : lowStockCount(stock, sole);
+    const bagged = quantity !== null && quantity !== void 0 ? quantity : innerQuantity;
+    const maxQuantity = (() => {
+        const count = stock !== null && stock !== void 0 ? stock : sole === null || sole === void 0 ? void 0 : sole.stock;
+        return count !== undefined && count > 0 ? count : undefined;
+    })();
+    const swatchAxis = swatchAxisOf(axes);
+    const activeId = (_a = previewed !== null && previewed !== void 0 ? previewed : picked) !== null && _a !== void 0 ? _a : (_b = swatchAxis === null || swatchAxis === void 0 ? void 0 : swatchAxis.values[0]) === null || _b === void 0 ? void 0 : _b.id;
+    const frames = framesFor(media, mediaIdsByOption, swatchAxis === null || swatchAxis === void 0 ? void 0 : swatchAxis.id, activeId);
+    const priced = variantsFor(variants, swatchAxis === null || swatchAxis === void 0 ? void 0 : swatchAxis.id, picked !== null && picked !== void 0 ? picked : undefined);
+    const range = sole ? undefined : rangeOf(priced);
+    const soldOutValues = new Set(swatchAxis ? swatchAxis.values.filter((value) => valueSoldOut(variants, swatchAxis.id, value.id)).map((value) => value.id) : []);
+    const interactive = !!href || !!linkAs || !!onPress;
+    const LinkTag = href || linkAs ? (linkAs !== null && linkAs !== void 0 ? linkAs : "a") : "button";
+    const linkExtras = href || linkAs ? { href, ...linkProps } : { type: "button" };
+    const add = () => {
+        if (quantity === undefined)
+            setInnerQuantity(1);
+        onAdd === null || onAdd === void 0 ? void 0 : onAdd(sole === null || sole === void 0 ? void 0 : sole.id, 1);
     };
-    const handleIncrement = (e) => {
-        e.stopPropagation();
-        if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) && qty < selectedOption.stocks) {
-            setQty((prev) => prev + 1);
+    const press = () => {
+        if (action === "notify")
+            onNotify === null || onNotify === void 0 ? void 0 : onNotify();
+        else if (action === "options") {
+            setSheetMounted(true);
+            setSheetOpen(true);
         }
+        else
+            add();
     };
-    const handleDecrement = (e) => {
-        e.stopPropagation();
-        if (qty > 1) {
-            setQty((prev) => prev - 1);
-        }
+    const changeQuantity = (next) => {
+        if (quantity === undefined)
+            setInnerQuantity(next);
+        onQuantityChange === null || onQuantityChange === void 0 ? void 0 : onQuantityChange(next);
     };
-    const sizeStyles = {
-        xs: { cardWidth: "16.25rem", imgHeight: "11.25rem", padding: 3 },
-        sm: { cardWidth: "18rem", imgHeight: "13rem", padding: 4 },
-        md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
-        lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
+    const remove = () => {
+        changeQuantity(0);
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
     };
-    const { cardWidth, imgHeight, padding } = sizeStyles[size];
-    const imageList = (_a = productImage === null || productImage === void 0 ? void 0 : productImage.filter((img) => img.isImage !== false)) !== null && _a !== void 0 ? _a : [];
-    const isSizeType = (s) => s === "xs" || s === "sm" || s === "md" || s === "lg";
-    const safeSize = isSizeType(size) ? size : "md";
-    return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.background[50], boxShadow: "lg", children: [imageList.length > 0 && (_jsxs(Box, { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer", children: [_jsx(Image, { src: hover && ((_b = imageList === null || imageList === void 0 ? void 0 : imageList[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? imageList[1].imageUrl : (_c = imageList === null || imageList === void 0 ? void 0 : imageList[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }), batch && (_jsx(Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
-                            xs: "xs",
-                            sm: "sm",
-                            md: "md",
-                            lg: "lg",
-                        }[size], px: {
-                            xs: 1,
-                            sm: 2,
-                            md: 3,
-                            lg: 4,
-                        }[size], py: {
-                            xs: 0.5,
-                            sm: 1,
-                            md: 1.5,
-                            lg: 2,
-                        }[size], children: batch.label }))] })), _jsxs(VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full", children: [_jsx(Box, { onClick: onClick, cursor: "pointer", children: _jsx(ProductLabel, { label: label, size: size }) }), tags && _jsx(ProductTags, { tags: tags, size: size }), options && (_jsx(ProductPrice, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (displayRating && ((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)))
-                            ? _jsx(ProductReview, { rating: rating, reviewCount: reviews })
-                            : undefined })), _jsxs(VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto", children: [typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && (_jsx(Button, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true, children: "Out of Stock" })), addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && (_jsx(HStack, { w: "full", justify: "space-between", 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 >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })] }) })), (button === null || button === void 0 ? void 0 : button.onClick) && (_jsx(Button, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick, children: (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart" })), addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && (_jsx(Button, { width: "100%", size: safeSize, 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)), colorScheme: "red", children: "Add to Cart" })), addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && notifyMe && (_jsx(Button, { width: "100%", size: safeSize, onClick: () => (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)), colorScheme: "red", variant: "outline", children: "Notify Me" })), goToCart && (_jsx(Button, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red", children: "Go to Cart" }))] })] })] }));
+    const defaultControl = (_jsx(ProductCardAction, { kind: action, title: title, labels: copy, placement: horizontal ? "inline" : "media", inset: m.actionInset, hoverBar: density === "spacious" && !horizontal, quantity: action === "notify" ? 0 : bagged, maxQuantity: maxQuantity, onPress: press, onQuantityChange: changeQuantity, onRemove: remove }));
+    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 && 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);
+    return (_jsxs(Box, { as: "article", "aria-labelledby": titleId, "data-testid": testId, "data-layout": layout, "data-density": density, "data-soldout": soldOut || undefined, "data-selected": selected || undefined, "data-pressed": pressed || undefined, onPointerDown: (event) => setPressed(!event.target.closest("[data-control]")), onPointerUp: () => setPressed(false), onPointerLeave: () => setPressed(false), onPointerCancel: () => setPressed(false), position: "relative", display: "flex", flexDirection: horizontal ? "row" : "column", gap: horizontal ? 3 : 0, flexGrow: rail ? 0 : 1, flexShrink: rail ? 0 : 1, w: rail ? m.railWidth : "100%", minW: 0, cursor: interactive ? "pointer" : "default", transition: transitionFor(["transform"]), sx: {
+            ...(rail ? { scrollSnapAlign: "start" } : {}),
+            ...reducedMotionSx(),
+            ...(pressable ? { "&[data-pressed]": { transform: "scale(0.98)" } } : {}),
+            [FINE_POINTER]: {
+                "&:hover [data-hover-frame], &:focus-within [data-hover-frame]": { opacity: 1 },
+                "&:hover [data-bar], &:focus-within [data-bar]": { opacity: 1, transform: "none" },
+                ...(reduced ? {} : { "&:hover [data-primary]": { transform: "scale(1.03)" } }),
+            },
+        }, children: [_jsxs(ProductCardMedia, { primary: frames[0], hover: hoverFrame, title: title, alt: alt, aspectRatio: aspectRatio, dimmed: soldOut, selected: selected, fallbackText: copy.imageUnavailable, width: horizontal ? m.listMedia : undefined, children: [!soldOut && badges && badges.length > 0 ? (_jsx(Box, { position: "absolute", top: m.badgeInset, insetStart: m.badgeInset, zIndex: 2, maxW: "calc(100% - 3.5rem)", pointerEvents: "none", children: _jsx(ProductBadges, { badges: badges, max: 2, size: "sm", variant: "solid" }) })) : null, !horizontal ? (_jsx(Box, { "data-control": true, position: "absolute", top: m.wishlistInset, insetEnd: m.wishlistInset, zIndex: 2, children: wishlist })) : null, selected ? (_jsx(Box, { "aria-hidden": true, position: "absolute", bottom: m.actionInset, insetStart: m.actionInset, zIndex: 2, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.5rem", borderRadius: "full", bg: ink.fill, color: ink.ink, children: _jsx(Check, { size: 14, strokeWidth: 3 }) })) : null, mediaOverlay ? (_jsx(Box, { position: "absolute", inset: 0, zIndex: 2, pointerEvents: "none", sx: { "& > *": { pointerEvents: "auto" } }, children: mediaOverlay })) : null, !horizontal ? control : null] }), _jsxs(Flex, { direction: "column", flex: 1, minW: 0, gap: m.bodyGap, pt: horizontal ? 0 : m.bodyTop, children: [brand ? (_jsx(Text, { as: "span", fontSize: m.brand.size, lineHeight: `${m.brand.line}px`, fontWeight: 500, color: colors.textMuted, noOfLines: 1, children: brand })) : null, _jsx(Text, { as: "h3", id: titleId, m: 0, fontSize: m.title.size, lineHeight: `${m.title.line}px`, fontWeight: 500, color: colors.header[900], noOfLines: TITLE_LINES, minH: horizontal ? undefined : `${m.title.line * TITLE_LINES}px`, children: interactive ? (_jsx(Box, { as: LinkTag, ...linkExtras, "data-card-link": true, onClick: onPress, color: "inherit", textAlign: "start", textDecoration: "none", cursor: "pointer", sx: {
+                                font: "inherit",
+                                background: "none",
+                                border: 0,
+                                p: 0,
+                                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" && 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] }));
 };
 export default ProductCard;