pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -4,10 +4,12 @@ import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton,
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.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 { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import Tag from "../Tag/Tag.js";
@@ -71,7 +73,8 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const primary50 = colors.primary[50];
     const primary100 = colors.primary[100];
     const primarySolid = resolveFilledSurface(colors.primary, colors);
-    const onPrimary50 = accentTextOnCanvas(colors.primary, colors.primary[50]);
+    const primaryTile = bandOn(primary50, surface);
+    const onPrimaryTile = accentTextOnCanvas(colors.primary, primaryTile);
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
@@ -125,7 +128,12 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: transitionFor(["color", "gap"]), sx: reducedMotionSx(), role: "button", tabIndex: 0, _focusVisible: focusVisibleRing(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (e) => {
+                                        if (e.key !== "Enter" && e.key !== " ")
+                                            return;
+                                        e.preventDefault();
+                                        onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId);
+                                    }, children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);

package/dist/esm/Components/PageHeader/PageHeader.js

@@ -7,10 +7,10 @@ const TITLE_STYLES = {
     xl: { fontSize: { base: "2xl", md: "3xl" }, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2 },
 };
 /** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
-const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize = "md", actionsLayout = "auto", "data-testid": testId, }) => {
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize = "md", actionsLayout = "auto", "data-testid": testId, ...rest }) => {
     const { colors } = useCustomTheme();
     const wraps = actionsLayout === "auto";
     const stacked = actionsLayout === "stacked";
-    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), _jsxs(Flex, { justify: "space-between", align: stacked ? "flex-start" : { base: "flex-start", md: "center" }, direction: stacked ? "column" : { base: "column", md: "row" }, wrap: wraps ? "wrap" : "nowrap", gap: 3, children: [_jsxs(Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && _jsx(Box, { flexShrink: 0, children: leading }), _jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && (_jsx(Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && (_jsx(Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && _jsx(Box, { children: tabs })] }));
+    return (_jsxs(Flex, { ...rest, direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), _jsxs(Flex, { justify: "space-between", align: stacked ? "flex-start" : { base: "flex-start", md: "center" }, direction: stacked ? "column" : { base: "column", md: "row" }, wrap: wraps ? "wrap" : "nowrap", gap: 3, children: [_jsxs(Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && _jsx(Box, { flexShrink: 0, children: leading }), _jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && (_jsx(Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && (_jsx(Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && _jsx(Box, { children: tabs })] }));
 };
 export default PageHeader;

package/dist/esm/Components/Pagination/Pagination.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useLayoutEffect, useMemo, useRef } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Button from "../Button/Button.js";
+import Select from "../Select/Select.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { clampPage, pageCountFor, pageWindow } from "./pageWindow.js";
+import { defaultPaginationLabels } from "./PaginationProps.js";
+export const PICKER_SIZE = { xs: "xs", sm: "xs", md: "md", lg: "lg" };
+const PICKER_WIDTH = { xs: "3.75rem", sm: "3.75rem", md: "4.5rem", lg: "5.25rem" };
+const Pagination = (props) => {
+    const { page, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, siblingCount = 1, size = "sm", isDisabled = false, labels, "aria-label": ariaLabel = "Pagination", "data-testid": testId, } = props;
+    const { colors } = useCustomTheme();
+    const gapInk = useMemo(() => accentTextOnCanvas(colors.gray, colors.backgroundColor.main), [colors]);
+    const copy = { ...defaultPaginationLabels, ...labels };
+    const pageCount = props.totalItems === undefined ? Math.max(1, props.pageCount) : pageCountFor(props.totalItems, props.pageSize);
+    const current = clampPage(page, pageCount);
+    const items = useMemo(() => pageWindow(current, pageCount, siblingCount), [current, pageCount, siblingCount]);
+    const { height, fontSize, iconSize } = BUTTON_SIZES[size];
+    const previousRef = useRef(null);
+    const nextRef = useRef(null);
+    const currentRef = useRef(null);
+    useLayoutEffect(() => {
+        var _a;
+        const stranded = [previousRef.current, nextRef.current].some((step) => step !== null && step.disabled && step === document.activeElement);
+        if (stranded)
+            (_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [current]);
+    const sizeOptions = useMemo(() => pageSizeOptions && pageSize !== undefined
+        ? [...new Set([...pageSizeOptions, pageSize])].sort((a, b) => a - b).map((n) => ({ id: n, label: n }))
+        : [], [pageSizeOptions, pageSize]);
+    const go = (target) => {
+        if (target !== current)
+            onPageChange(target);
+    };
+    return (_jsxs(Flex, { as: "nav", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", children: [_jsxs(Flex, { as: "ul", listStyleType: "none", m: 0, p: 0, align: "center", gap: 1, children: [_jsx(Box, { as: "li", children: _jsx(Button, { ref: previousRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.previous, leftIcon: _jsx(ChevronLeft, { size: iconSize }), isDisabled: isDisabled || current <= 1, onClick: () => go(current - 1) }) }), items.map((item) => typeof item === "number" ? (_jsx(Box, { as: "li", children: _jsx(Button, { ref: item === current ? currentRef : undefined, size: size, variant: item === current ? "solid" : "ghost", colorScheme: item === current ? "primary" : "gray", "aria-label": copy.page(item), "aria-current": item === current ? "page" : undefined, isDisabled: isDisabled, onClick: () => go(item), sx: NUMERIC_TEXT, children: item }) }, item)) : (_jsx(Box, { as: "li", "aria-hidden": true, children: _jsx(Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: height, h: height, fontSize: fontSize, color: gapInk, children: "\u2026" }) }, item))), _jsx(Box, { as: "li", children: _jsx(Button, { ref: nextRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.next, leftIcon: _jsx(ChevronRight, { size: iconSize }), isDisabled: isDisabled || current >= pageCount, onClick: () => go(current + 1) }) })] }), onPageSizeChange && sizeOptions.length > 0 && (_jsx(Select, { native: false, isSearchable: false, "aria-label": copy.pageSize, size: PICKER_SIZE[size], width: PICKER_WIDTH[size], isDisabled: isDisabled, value: pageSize, options: sizeOptions, onChange: (option) => option && onPageSizeChange(Number(option.id)) }))] }));
+};
+export default memo(Pagination);

package/dist/esm/Components/Pagination/PaginationProps.js

@@ -0,0 +1,6 @@
+export const defaultPaginationLabels = {
+    previous: "Previous page",
+    next: "Next page",
+    page: (page) => `Page ${page}`,
+    pageSize: "Rows per page",
+};

package/dist/esm/Components/Pagination/pageWindow.js

@@ -0,0 +1,16 @@
+const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+export const pageCountFor = (totalItems, pageSize) => pageSize > 0 ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1;
+export const clampPage = (page, pageCount) => Math.min(Math.max(1, page), Math.max(1, pageCount));
+export const pageWindow = (page, pageCount, siblingCount = 1) => {
+    const count = Math.max(1, pageCount);
+    const siblings = Math.max(0, siblingCount);
+    const current = clampPage(page, count);
+    const edgeRun = 2 * siblings + 3;
+    if (count <= edgeRun + 2)
+        return range(1, count);
+    if (current - siblings <= 3)
+        return [...range(1, edgeRun), "end-ellipsis", count];
+    if (current + siblings >= count - 2)
+        return [1, "start-ellipsis", ...range(count - edgeRun + 1, count)];
+    return [1, "start-ellipsis", ...range(current - siblings, current + siblings), "end-ellipsis", count];
+};

package/dist/esm/Components/PaymentOption/PaymentOption.js

@@ -14,6 +14,6 @@ const PaymentOption = ({ value, title, subtitle, icon, offer, selected, onSelect
     const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, selected, disabled, onSelect });
     const selectable = inGroup || !!onSelect;
     const expanded = isSelected && !!children;
-    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? titleId : undefined, "aria-describedby": props.role && subtitle ? subtitleId : undefined, "aria-controls": expanded && props.role === "radio" ? regionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "1rem", cursor: interactive ? "pointer" : "default", outline: "none", children: [selectable && _jsx(RadioIndicator, { selected: isSelected }), icon && (_jsx(Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "0.75rem", bg: colors.background[50], color: colors.header[900], children: icon })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && (_jsx(Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && _jsx(Tag, { label: offer, size: "xs", tone: "success" })] }), expanded && (_jsx(Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
+    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? titleId : undefined, "aria-describedby": props.role && subtitle ? subtitleId : undefined, "aria-controls": expanded && props.role === "radio" ? regionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", children: [selectable && _jsx(RadioIndicator, { selected: isSelected }), icon && (_jsx(Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "xl", bg: colors.background[50], color: colors.header[900], children: icon })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && (_jsx(Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && _jsx(Tag, { label: offer, size: "xs", tone: "success" })] }), expanded && (_jsx(Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
 };
 export default PaymentOption;

package/dist/esm/Components/PersonChip/PersonChip.js

@@ -7,10 +7,10 @@ import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import Avatar from "../Avatar/Avatar.js";
 const NAME_SIZE = {
-    sm: "0.8125rem", md: "0.875rem", lg: "1rem", xl: "1.125rem",
+    sm: "xs-plus", md: "sm", lg: "md", xl: "lg",
 };
 const SECONDARY_SIZE = {
-    sm: "0.75rem", md: "0.75rem", lg: "0.8125rem", xl: "0.875rem",
+    sm: "xs", md: "xs", lg: "xs-plus", xl: "sm",
 };
 const REMOVE_ICON_SIZE = {
     sm: 12, md: 14, lg: 14, xl: 16,

package/dist/esm/Components/PinInput/PinInput.js

@@ -5,13 +5,25 @@ import { TextLabel } from "../Common/FormLabel.js";
 import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { pinInputCellSize } from "./pinInputCellSize.js";
 import { fieldFocusVisible } from "../../Theme/chakra/focusRing.styles.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
 /** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
-export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = DEFAULT_CONTROL_SIZE, }) {
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = DEFAULT_CONTROL_SIZE, error, errorMessage, helperText, isDisabled, }) {
     var _a;
     const theme = useCustomTheme();
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const invalidCell = error
+        ? {
+            _invalid: {
+                borderColor: theme.colors.semanticText.error,
+                boxShadow: "none",
+                _focus: { borderColor: theme.colors.semanticText.error, ...fieldFocusVisible(theme.colors) },
+            },
+        }
+        : {};
     const fieldName = (_a = label !== null && label !== void 0 ? label : id) !== null && _a !== void 0 ? _a : "One-time code";
     // Square cells at the same heights every other field uses — Chakra's own PinInput size
     // scale doesn't line up with the library's, so cells are sized directly.
     const cell = pinInputCellSize(size);
-    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { role: "group", "aria-label": fieldName, children: _jsx(PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) } }, index))) }) })] }));
+    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { role: "group", "aria-label": fieldName, children: _jsx(PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, isInvalid: error, isDisabled: isDisabled, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, "aria-describedby": ids.describedBy, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) }, ...invalidCell }, index))) }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

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

@@ -9,6 +9,7 @@ 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",
@@ -29,7 +30,6 @@ const DEFAULT_LABELS = {
 const PIN_LENGTH = 6;
 const FIELD_HEIGHT = "3rem";
 const ERROR_RING = "1.5px";
-const tabular = { fontVariantNumeric: "tabular-nums" };
 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;
@@ -160,10 +160,10 @@ const PincodeChecker = ({ value, defaultValue = "", onValueChange, status: statu
                             borderColor: invalid ? "transparent" : colors.primary[500],
                             ...fieldFocusVisible(colors),
                             boxShadow: invalid ? `${fieldRing}, ${fieldFocusVisible(colors).boxShadow}` : fieldFocusVisible(colors).boxShadow,
-                        }, sx: { ...fieldTextStyles(colors), ...tabular, 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 }))] }));
+                        }, 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: tabular, 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: tabular, 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 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] })] }));
 };

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

@@ -4,6 +4,7 @@ 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";
 const TONE_ICON = {
     normal: Sparkles,
@@ -31,6 +32,6 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
                 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: "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: "xs-minus", fontWeight: "700", lineHeight: "18px", sx: NUMERIC_TEXT, children: status })) : null] }));
 };
 export default PlanPill;

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

@@ -1,6 +1,7 @@
 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" },
@@ -19,7 +20,6 @@ const DEFAULT_LABELS = {
     save: (amount) => `You save ${amount}`,
 };
 const unitText = (unit, fmt) => typeof unit === "string" ? unit : `${formatPrice(unit.value, fmt)} / ${unit.per === 1 ? "" : `${unit.per} `}${unit.unit}`;
-const tabular = { fontVariantNumeric: "tabular-nums" };
 /** 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();
@@ -33,7 +33,7 @@ const PriceBlock = ({ price, mrp, priceRange, size = "md", align = "start", show
     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: tabular };
-    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: tabular, 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: tabular, 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: tabular, children: copy.off(percent) })] }))] }), showSavings && hasDiscount && (_jsx(Text, { as: "span", fontSize: scale.note, lineHeight: 1.4, fontWeight: 600, color: colors.semanticText.success, sx: tabular, 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) }))] }));
+    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/Primitives/Primitives.js

@@ -1,3 +1,3 @@
-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, IconButton, 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";
+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

@@ -1,6 +1,7 @@
 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";
@@ -53,7 +54,7 @@ const ProductBadges = ({ badges, max = 2, size = "sm", variant = "solid", orient
     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: { fontVariantNumeric: "tabular-nums" }, children: badge.label })] }, `${badge.label}-${i}`));
+            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/ProductCard/ProductCard.js

@@ -36,6 +36,7 @@ const ProductCard = (props) => {
     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 };
@@ -88,7 +89,6 @@ const ProductCard = (props) => {
     const slotted = horizontal ? (_jsx(Box, { "data-control": true, position: "relative", zIndex: 2, children: actions })) : (_jsx(Box, { "data-control": true, position: "absolute", right: m.actionInset, bottom: m.actionInset, zIndex: 2, children: actions }));
     const control = actions ? slotted : defaultControl;
     const wishlist = (_jsx(WishlistToggle, { variant: horizontal ? "soft" : "glass", size: "md", label: copy.save(title), selected: wishlisted, onSelectedChange: onWishlistChange }));
-    const canHover = useMatchMedia(FINE_POINTER_QUERY, true);
     const hoverFrame = previewed === null && canHover ? frames[1] : undefined;
     const pressable = interactive && !reduced;
     const ink = optionInk(colors).selected;

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

@@ -3,7 +3,7 @@ import { Box, Text } from "@chakra-ui/react";
 import { keyframes } from "@emotion/react";
 import { Bell, Plus } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { MOTION_EASE, MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
 import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
@@ -24,7 +24,7 @@ const ProductCardAction = ({ kind, title, labels, placement, inset, hoverBar, qu
         ? { position: "absolute", right: inset, bottom: inset, zIndex: 2 }
         : { position: "relative", zIndex: 2 };
     if (quantity > 0) {
-        return (_jsx(Box, { "data-control": true, "data-stepper": true, ...place, display: "inline-flex", borderRadius: "full", bg: onMedia ? colors.surfaceRaised : colors.transparent, boxShadow: onMedia ? "sm" : "none", animation: reduced ? undefined : `${morphIn} 200ms ${MOTION_EASE}`, children: _jsx(QuantityStepper, { size: "sm", value: quantity, min: 1, max: maxQuantity, removable: true, itemLabel: title, onValueChange: onQuantityChange, onRemove: onRemove }) }));
+        return (_jsx(Box, { "data-control": true, "data-stepper": true, ...place, display: "inline-flex", borderRadius: "full", bg: onMedia ? colors.surfaceRaised : colors.transparent, boxShadow: onMedia ? "sm" : "none", animation: reduced ? undefined : `${morphIn} ${MOTION_MS.enter}ms ${MOTION_EASE}`, children: _jsx(QuantityStepper, { size: "sm", value: quantity, min: 1, max: maxQuantity, removable: true, itemLabel: title, onValueChange: onQuantityChange, onRemove: onRemove }) }));
     }
     const isNotify = kind === "notify";
     const name = isNotify ? labels.notifyMeFor(title) : kind === "options" ? labels.chooseOptions(title) : labels.addToBag(title);
@@ -55,6 +55,6 @@ const ProductCardAction = ({ kind, title, labels, placement, inset, hoverBar, qu
                     },
                 }
                 : {}),
-        }, children: [isNotify ? _jsx(Bell, { size: 16, "aria-hidden": true }) : _jsx(Plus, { size: 18, strokeWidth: 2.25, "aria-hidden": true }), _jsx(Text, { as: "span", "data-label": true, fontSize: "0.8125rem", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", children: isNotify ? labels.notifyMe : barText })] }));
+        }, children: [isNotify ? _jsx(Bell, { size: 16, "aria-hidden": true }) : _jsx(Plus, { size: 18, strokeWidth: 2.25, "aria-hidden": true }), _jsx(Text, { as: "span", "data-label": true, fontSize: "xs-plus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", children: isNotify ? labels.notifyMe : barText })] }));
 };
 export default ProductCardAction;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef } from "react";
 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 { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
@@ -30,6 +31,6 @@ const ProductCardSwatches = ({ axis, limit, dot, activeId, soldOutIds, labels, o
                     return (_jsx(Box, { as: "button", type: "button", role: "radio", ref: (el) => {
                             cells.current[index] = el;
                         }, "aria-checked": selected, "aria-label": soldOut ? `${value.label}, ${labels.soldOut.toLowerCase()}` : value.label, tabIndex: index === activeIndex ? 0 : -1, title: value.label, onClick: () => onPick(value.id), onMouseEnter: () => onPreview(value.id), onFocus: () => onPreview(value.id), onBlur: () => onPreview(null), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: TARGET, flexShrink: 0, borderRadius: "full", cursor: "pointer", sx: { outline: "none", ...focusVisibleStyles(colors) }, children: _jsx(Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(Box, { as: "span", display: "block", boxSize: `${dot}px`, borderRadius: "full", backgroundColor: value.swatch, opacity: soldOut ? UNAVAILABLE_OPACITY : 1, boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}` }) }) }, value.id));
-                }) }), rest > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "0.75rem", fontWeight: 500, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: ["+", rest] }), _jsx(VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
+                }) }), rest > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "xs", fontWeight: 500, color: colors.textMuted, sx: NUMERIC_TEXT, children: ["+", rest] }), _jsx(VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
 };
 export default ProductCardSwatches;

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

@@ -1,3 +1,4 @@
+import radii from "../../Theme/tokens/primitives/radii.js";
 export const DENSITY = {
     compact: {
         badgeInset: "0.5rem",
@@ -47,7 +48,7 @@ export const CSS_RATIO = {
     "1/1": "1 / 1",
     "3/4": "3 / 4",
 };
-export const MEDIA_RADIUS = "1rem";
+export const MEDIA_RADIUS = radii["2xl"];
 export const TITLE_LINES = 2;
 export const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
 export const FINE_POINTER = `@media ${FINE_POINTER_QUERY}`;

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

@@ -3,9 +3,14 @@ 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 { 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 { labelOnFill, solidFillRung } 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;
@@ -50,7 +55,7 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
     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 = () => {
@@ -61,13 +66,13 @@ 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: hoverScrim(0.3), 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[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], 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: {
+        }, 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: c.primary[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], 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: ACTION_TRANSITION, _hover: {
                                         bg: c.primary[600],
                                         color: labelOnFill(c.primary[600], c.white, c.black),
                                         transform: "scale(1.1)",
@@ -75,7 +80,7 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
                                     }, _active: {
                                         bg: c.primary[700],
                                         color: labelOnFill(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: {
+                                    } }) })), 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: c.gray[50],
                                         color: accentTextOnCanvas(c.primary, c.gray[50]),
                                         transform: "scale(1.1)",

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

@@ -3,6 +3,7 @@ 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 { reducedMotionSx } from "../../Theme/chakra/motion.js";
@@ -52,6 +53,6 @@ const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, ste
                 },
             }, 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: { fontVariantNumeric: "tabular-nums" }, children: current }), button("inc")] }));
+    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/RadioButton/RadioButton.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Box, Radio as ChakraRadio, RadioGroup as ChakraRadioGroup, Stack, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { TextLabel } from "../Common/FormLabel.js";
@@ -7,13 +8,14 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { fieldHoverBorder } from "../Common/fieldStyles.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
-const RadioButton = ({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }) => {
+/** One themed radio; `ref` is its native `<input type="radio">`. */
+const RadioButton = forwardRef(function RadioButton({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }, ref) {
     const { colors } = useCustomTheme();
     // colorScheme is any Chakra scheme name; only some resolve to a real scale.
     const scales = colors;
     const palette = (colorScheme && scales[colorScheme]) || colors.primary;
     const filled = resolveFilledSurface(palette, colors);
-    return (_jsx(ChakraRadio, { ...rest, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: fieldHoverBorder(colors), borderWidth: "1px", _hover: {
+    return (_jsx(ChakraRadio, { ...rest, ref: ref, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: fieldHoverBorder(colors), borderWidth: "1px", _hover: {
             borderColor: filled.fill,
             backgroundColor: colors.background[100],
         }, _focusVisible: focusVisibleRing(colors), _invalid: { borderColor: colors.semanticText.error }, _disabled: {
@@ -34,8 +36,9 @@ const RadioButton = ({ label, description, content, colorScheme, isChecked, onCh
                 backgroundColor: colors.background[100],
                 borderColor: colors.boxborder[500],
             },
-        }, children: _jsxs(Box, { children: [_jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && (_jsx(Box, { as: "span", display: "block", fontSize: "0.75rem", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
-};
+        }, children: _jsxs(Box, { children: [_jsx(TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && (_jsx(Box, { as: "span", display: "block", fontSize: "xs", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
+});
+RadioButton.displayName = "RadioButton";
 const RadioButtonGroup = ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired = false, }) => {
     const ids = useFieldIds(id, { error, errorMessage, helperText });
     return (_jsxs(Box, { children: [label && (_jsx(Box, { id: ids.labelId, children: _jsx(TextLabel, { label: label, isRequired: isRequired }) })), _jsx(ChakraRadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, name: name, id: ids.inputId, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, "aria-describedby": ids.describedBy, "aria-invalid": error || undefined, "aria-required": isRequired || undefined, children: _jsx(Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: children !== null && children !== void 0 ? children : options === null || options === void 0 ? void 0 : options.map((option) => (_jsx(RadioButton, { label: option.label, description: option.description, content: typeof option.content === "function" ? option.content(option) : option.content, value: option.id, isDisabled: isDisabled, isInvalid: error, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));

package/dist/esm/Components/RangeSlider/RangeSlider.js

@@ -123,9 +123,9 @@ function RangeSlider(rawProps) {
             ? stepMarks(min, max, step).map((v) => ({ value: v }))
             : [];
     const singleThumbLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Value";
-    return (_jsxs(Box, { "data-testid": testId, opacity: opacity, children: [label ? (_jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? (_jsxs(Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? (_jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(currentMin) })) : null, _jsx(Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, _jsx(Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: _jsxs(Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [_jsx(Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` }), resolvedMarks.map((mark) => {
+    return (_jsxs(Box, { "data-testid": testId, opacity: opacity, children: [label ? (_jsx(Text, { fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? (_jsxs(Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? (_jsx(Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(currentMin) })) : null, _jsx(Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, _jsx(Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: _jsxs(Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [_jsx(Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, style: { left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` } }), resolvedMarks.map((mark) => {
                             const markPos = valueToPosition(mark.value, min, max, scale);
-                            return (_jsx(Box, { "data-mark-value": mark.value, position: "absolute", top: "50%", left: `${markPos}%`, transform: "translate(-50%, -50%)", boxSize: "4px", borderRadius: "full", bg: colors.gray[400], children: mark.label ? (_jsx(Text, { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: mark.label })) : null }, mark.value));
-                        }), isRange ? (_jsx(ToolTip, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": minThumbLabel, "aria-valuemin": min, "aria-valuemax": currentMax, "aria-valuenow": currentMin, "aria-valuetext": formatValue(currentMin), position: "absolute", top: "50%", left: `${minPos}%`, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag("min"), onPointerMove: handleMove("min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge("min"), "data-testid": testId ? `${testId}-thumb-min` : undefined, id: `${reactId}-min` }) })) : null, _jsx(ToolTip, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": isRange ? maxThumbLabel : singleThumbLabel, "aria-valuemin": isRange ? currentMin : min, "aria-valuemax": max, "aria-valuenow": isRange ? currentMax : currentSingle, "aria-valuetext": formatValue(isRange ? currentMax : currentSingle), position: "absolute", top: "50%", left: `${maxPos}%`, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag(isRange ? "max" : "min"), onPointerMove: handleMove(isRange ? "max" : "min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge(isRange ? "max" : "min"), "data-testid": testId ? (isRange ? `${testId}-thumb-max` : `${testId}-thumb`) : undefined, id: `${reactId}-${isRange ? "max" : "single"}` }) })] }) })] }));
+                            return (_jsx(Box, { "data-mark-value": mark.value, position: "absolute", top: "50%", left: `${markPos}%`, transform: "translate(-50%, -50%)", boxSize: "4px", borderRadius: "full", bg: colors.gray[400], children: mark.label ? (_jsx(Text, { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", children: mark.label })) : null }, mark.value));
+                        }), isRange ? (_jsx(ToolTip, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": minThumbLabel, "aria-valuemin": min, "aria-valuemax": currentMax, "aria-valuenow": currentMin, "aria-valuetext": formatValue(currentMin), position: "absolute", top: "50%", style: { left: `${minPos}%` }, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag("min"), onPointerMove: handleMove("min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge("min"), "data-testid": testId ? `${testId}-thumb-min` : undefined, id: `${reactId}-min` }) })) : null, _jsx(ToolTip, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: _jsx(Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": isRange ? maxThumbLabel : singleThumbLabel, "aria-valuemin": isRange ? currentMin : min, "aria-valuemax": max, "aria-valuenow": isRange ? currentMax : currentSingle, "aria-valuetext": formatValue(isRange ? currentMax : currentSingle), position: "absolute", top: "50%", style: { left: `${maxPos}%` }, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag(isRange ? "max" : "min"), onPointerMove: handleMove(isRange ? "max" : "min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge(isRange ? "max" : "min"), "data-testid": testId ? (isRange ? `${testId}-thumb-max` : `${testId}-thumb`) : undefined, id: `${reactId}-${isRange ? "max" : "single"}` }) })] }) })] }));
 }
 export default RangeSlider;

package/dist/esm/Components/Rating/Rating.js

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { Star } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.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";
@@ -35,7 +36,7 @@ const Rating = ({ value, defaultValue = 0, max = 5, size = "sm", showValue = tru
         : compactCount
             ? new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(count)
             : nf.format(count);
-    const summary = (_jsxs(_Fragment, { children: [showValue && current > 0 && (_jsx(Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: valueText })), countText !== null && (_jsxs(Text, { as: "span", fontSize: TEXT_SIZE[size], color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: ["(", countText, ")"] }))] }));
+    const summary = (_jsxs(_Fragment, { children: [showValue && current > 0 && (_jsx(Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, color: colors.header[900], sx: NUMERIC_TEXT, children: valueText })), countText !== null && (_jsxs(Text, { as: "span", fontSize: TEXT_SIZE[size], color: colors.textMuted, sx: NUMERIC_TEXT, children: ["(", countText, ")"] }))] }));
     if (!interactive) {
         const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (current === 0 && !count
             ? "Not rated yet"