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

package/dist/Components/PincodeChecker/PincodeChecker.js

@@ -14,6 +14,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const DEFAULT_LABELS = {
     heading: "Check delivery",
@@ -34,7 +35,6 @@ const DEFAULT_LABELS = {
 const PIN_LENGTH = 6;
 const FIELD_HEIGHT = "3rem";
 const ERROR_RING = "1.5px";
-const tabular = { fontVariantNumeric: "tabular-nums" };
 const pulse = (0, react_3.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;
@@ -165,10 +165,10 @@ const PincodeChecker = ({ value, defaultValue = "", onValueChange, status: statu
                             borderColor: invalid ? "transparent" : colors.primary[500],
                             ...(0, focusRing_styles_1.fieldFocusVisible)(colors),
                             boxShadow: invalid ? `${fieldRing}, ${(0, focusRing_styles_1.fieldFocusVisible)(colors).boxShadow}` : (0, focusRing_styles_1.fieldFocusVisible)(colors).boxShadow,
-                        }, sx: { ...(0, fieldStyles_1.fieldTextStyles)(colors), ...tabular, letterSpacing: "0.08em", ...(0, motion_2.reducedMotionSx)() } }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", size: "lg", label: copy.check })] }), invalid ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { id: errorId, mt: 2, gap: 1.5, align: "center", fontSize: "sm", fontWeight: 500, color: colors.semanticText.error, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 16, "aria-hidden": true, style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: (status === "invalid" && (result === null || result === void 0 ? void 0 : result.message)) || copy.invalid })] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { id: hintId, mt: 2, fontSize: "xs", color: colors.textMuted, children: copy.hint }))] }));
+                        }, sx: { ...(0, fieldStyles_1.fieldTextStyles)(colors), ...typography_1.NUMERIC_TEXT, letterSpacing: "0.08em", ...(0, motion_2.reducedMotionSx)() } }), (0, jsx_runtime_1.jsx)(Button_1.default, { type: "submit", size: "lg", label: copy.check })] }), invalid ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { id: errorId, mt: 2, gap: 1.5, align: "center", fontSize: "sm", fontWeight: 500, color: colors.semanticText.error, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 16, "aria-hidden": true, style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: (status === "invalid" && (result === null || result === void 0 ? void 0 : result.message)) || copy.invalid })] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { id: hintId, mt: 2, fontSize: "xs", color: colors.textMuted, children: copy.hint }))] }));
     const changeButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { ref: changeRef, variant: "link", size: "sm", h: "2.75rem", flexShrink: 0, onClick: reopen, label: copy.change }));
-    const savedLine = !showField && outcome === "serviceable" ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, sx: tabular, children: [copy.deliverTo, " ", (0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [result.deliveryBy && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "lg", lineHeight: 1.3, sx: tabular, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontSize: "sm", color: colors.textMuted, children: [copy.deliveryBy, " "] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: 700, color: colors.header[900], children: result.deliveryBy })] })), result.cod !== undefined && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, fontSize: "sm", fontWeight: 500, color: colors.header[900], children: [result.cod ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: colors.semanticText.success, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: colors.semanticText.warning, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: result.cod ? copy.codAvailable : copy.codUnavailable })] })), result.shippingNote && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: result.shippingNote }))] })) : outcome === "unserviceable" ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "flex-start", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: (result === null || result === void 0 ? void 0 : result.message) || copy.unserviceable }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: copy.unserviceableHint })] }), !showField && changeButton] })) : null;
+    const savedLine = !showField && outcome === "serviceable" ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: [copy.deliverTo, " ", (0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [result.deliveryBy && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "lg", lineHeight: 1.3, sx: typography_1.NUMERIC_TEXT, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontSize: "sm", color: colors.textMuted, children: [copy.deliveryBy, " "] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: 700, color: colors.header[900], children: result.deliveryBy })] })), result.cod !== undefined && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, fontSize: "sm", fontWeight: 500, color: colors.header[900], children: [result.cod ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: colors.semanticText.success, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: colors.semanticText.warning, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: result.cod ? copy.codAvailable : copy.codUnavailable })] })), result.shippingNote && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: result.shippingNote }))] })) : outcome === "unserviceable" ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "flex-start", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: (result === null || result === void 0 ? void 0 : result.message) || copy.unserviceable }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.textMuted, children: copy.unserviceableHint })] }), !showField && changeButton] })) : null;
     const skeleton = checking && !outcome && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)(SkeletonBlock, { w: "55%", h: "0.875rem" }), (0, jsx_runtime_1.jsx)(SkeletonBlock, { w: "40%", h: "1.5rem" }), (0, jsx_runtime_1.jsx)(SkeletonBlock, { w: "70%", h: "0.875rem" })] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "aria-busy": checking || undefined, bg: colors.background[100], borderRadius: "xl", p: 4, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], mb: 3, children: copy.heading }), showField && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { as: "label", htmlFor: inputId, children: copy.inputLabel }), field] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, mt: showField && (outcome || skeleton) ? 4 : 0, "aria-live": "polite", opacity: checking && outcome ? 0.6 : 1, transition: (0, motion_1.transitionFor)(["opacity"]), sx: (0, motion_2.reducedMotionSx)(), children: [checking && (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: copy.checking }), savedLine, details, skeleton] })] }));
 };

package/dist/Components/PlanPill/PlanPill.js

@@ -6,6 +6,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const planPillGradient_1 = require("./planPillGradient");
 const TONE_ICON = {
     normal: lucide_react_1.Sparkles,
@@ -33,6 +34,6 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
                 transition: "none",
                 _hover: { transform: "none" },
             },
-        }, children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: (0, planPillGradient_1.chipFill)(resolved), border: "1px solid", borderColor: (0, planPillGradient_1.chipBorder)(resolved), fontSize: "11px", fontWeight: "700", lineHeight: "18px", sx: { fontVariantNumeric: "tabular-nums" }, children: status })) : null] }));
+        }, children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 12, strokeWidth: 2.5, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "12.5px", fontWeight: "600", lineHeight: "18px", display: { base: "block", md: "none" }, children: mobileLabel })) : null, status ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", px: "8px", borderRadius: "full", bg: (0, planPillGradient_1.chipFill)(resolved), border: "1px solid", borderColor: (0, planPillGradient_1.chipBorder)(resolved), fontSize: "xs-minus", fontWeight: "700", lineHeight: "18px", sx: typography_1.NUMERIC_TEXT, children: status })) : null] }));
 };
 exports.default = PlanPill;

package/dist/Components/PriceBlock/PriceBlock.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const price_1 = require("../../Utils/price");
 const SCALE = {
     sm: { price: "0.9375rem", priceLine: 1.33, secondary: "0.75rem", secondaryLine: 1.33, note: "0.75rem" },
@@ -21,7 +22,6 @@ const DEFAULT_LABELS = {
     save: (amount) => `You save ${amount}`,
 };
 const unitText = (unit, fmt) => typeof unit === "string" ? unit : `${(0, price_1.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 } = (0, useCustomTheme_1.useCustomTheme)();
@@ -35,7 +35,7 @@ const PriceBlock = ({ price, mrp, priceRange, size = "md", align = "start", show
     const percent = !priceRange && selling !== undefined ? (0, price_1.discountPercent)(selling, mrp) : 0;
     const saved = !priceRange && selling !== undefined ? (0, price_1.discountAmount)(selling, mrp) : 0;
     const hasDiscount = percent > 0;
-    const muted = { fontSize: scale.note, lineHeight: 1.4, color: colors.textMuted, sx: tabular };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: a.items, gap: 0.5, textAlign: a.text, "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", justify: a.justify, columnGap: 2, rowGap: 0, wrap: "wrap", children: [priceText !== null && ((0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", fontSize: scale.price, lineHeight: scale.priceLine, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy.price, " "] }), priceText] })), hasDiscount && mrp !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "del", fontSize: scale.secondary, lineHeight: scale.secondaryLine, color: colors.textMuted, textDecoration: "line-through", sx: tabular, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy.originalPrice, " "] }), (0, price_1.formatPrice)(mrp, fmt)] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: scale.secondary, lineHeight: scale.secondaryLine, fontWeight: 600, color: colors.semanticText.success, sx: tabular, children: copy.off(percent) })] }))] }), showSavings && hasDiscount && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: scale.note, lineHeight: 1.4, fontWeight: 600, color: colors.semanticText.success, sx: tabular, children: copy.save((0, price_1.formatPrice)(saved, fmt)) })), taxNote && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ...muted, children: taxNote })), unitPrice != null && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ...muted, children: unitText(unitPrice, fmt) }))] }));
+    const muted = { fontSize: scale.note, lineHeight: 1.4, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: a.items, gap: 0.5, textAlign: a.text, "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", justify: a.justify, columnGap: 2, rowGap: 0, wrap: "wrap", children: [priceText !== null && ((0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", fontSize: scale.price, lineHeight: scale.priceLine, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy.price, " "] }), priceText] })), hasDiscount && mrp !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "del", fontSize: scale.secondary, lineHeight: scale.secondaryLine, color: colors.textMuted, textDecoration: "line-through", sx: typography_1.NUMERIC_TEXT, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy.originalPrice, " "] }), (0, price_1.formatPrice)(mrp, fmt)] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: scale.secondary, lineHeight: scale.secondaryLine, fontWeight: 600, color: colors.semanticText.success, sx: typography_1.NUMERIC_TEXT, children: copy.off(percent) })] }))] }), showSavings && hasDiscount && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: scale.note, lineHeight: 1.4, fontWeight: 600, color: colors.semanticText.success, sx: typography_1.NUMERIC_TEXT, children: copy.save((0, price_1.formatPrice)(saved, fmt)) })), taxNote && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ...muted, children: taxNote })), unitPrice != null && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", ...muted, children: unitText(unitPrice, fmt) }))] }));
 };
 exports.default = PriceBlock;

package/dist/Components/Primitives/Primitives.d.ts

@@ -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";
 export { Table as TableRoot } from "@chakra-ui/react";
-export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, BadgeProps, IconProps, LinkProps, ImageProps, DividerProps, ContainerProps, IconButtonProps, FormControlProps, FormLabelProps, PopoverProps, ListProps, AlertProps, MenuProps, } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, BadgeProps, IconProps, LinkProps, ImageProps, DividerProps, ContainerProps, FormControlProps, FormLabelProps, PopoverProps, ListProps, AlertProps, MenuProps, } from "@chakra-ui/react";

package/dist/Components/Primitives/Primitives.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.IconButton = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Badge = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
-exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = exports.Tr = void 0;
+exports.Tr = exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Badge = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
+exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = void 0;
 var react_1 = require("@chakra-ui/react");
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return react_1.Box; } });
 Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return react_1.Flex; } });
@@ -48,7 +48,6 @@ Object.defineProperty(exports, "FormControl", { enumerable: true, get: function
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return react_1.FormLabel; } });
 Object.defineProperty(exports, "FormErrorMessage", { enumerable: true, get: function () { return react_1.FormErrorMessage; } });
 Object.defineProperty(exports, "FormHelperText", { enumerable: true, get: function () { return react_1.FormHelperText; } });
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return react_1.IconButton; } });
 Object.defineProperty(exports, "TableContainer", { enumerable: true, get: function () { return react_1.TableContainer; } });
 Object.defineProperty(exports, "Thead", { enumerable: true, get: function () { return react_1.Thead; } });
 Object.defineProperty(exports, "Tbody", { enumerable: true, get: function () { return react_1.Tbody; } });

package/dist/Components/ProductBadges/ProductBadges.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const scrim_1 = require("../../Theme/tokens/builders/scrim");
@@ -55,7 +56,7 @@ const ProductBadges = ({ badges, max = 2, size = "sm", variant = "solid", orient
     return ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.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 && (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: "6px", flexShrink: 0, borderRadius: "full", bg: look.dot }), (0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.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 && (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: "6px", flexShrink: 0, borderRadius: "full", bg: look.dot }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, fontWeight: 600, lineHeight: 1, letterSpacing: "0.01em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", sx: typography_1.NUMERIC_TEXT, children: badge.label })] }, `${badge.label}-${i}`));
         }) }));
 };
 exports.default = ProductBadges;

package/dist/Components/ProductCard/ProductCard.js

@@ -41,6 +41,7 @@ const ProductCard = (props) => {
     const [previewed, setPreviewed] = (0, react_1.useState)(null);
     const [innerQuantity, setInnerQuantity] = (0, react_1.useState)(0);
     const [pressed, setPressed] = (0, react_1.useState)(false);
+    const canHover = (0, useMatchMedia_1.useMatchMedia)(cardMetrics_1.FINE_POINTER_QUERY, true);
     if (isLoading)
         return (0, jsx_runtime_1.jsx)(ProductCardSkeleton_1.default, { layout: layout, density: density, aspectRatio: aspectRatio, "data-testid": testId });
     const copy = { ...cardLabels_1.DEFAULT_LABELS, ...labels };
@@ -93,7 +94,6 @@ const ProductCard = (props) => {
     const slotted = horizontal ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "relative", zIndex: 2, children: actions })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-control": true, position: "absolute", right: m.actionInset, bottom: m.actionInset, zIndex: 2, children: actions }));
     const control = actions ? slotted : defaultControl;
     const wishlist = ((0, jsx_runtime_1.jsx)(WishlistToggle_1.default, { variant: horizontal ? "soft" : "glass", size: "md", label: copy.save(title), selected: wishlisted, onSelectedChange: onWishlistChange }));
-    const canHover = (0, useMatchMedia_1.useMatchMedia)(cardMetrics_1.FINE_POINTER_QUERY, true);
     const hoverFrame = previewed === null && canHover ? frames[1] : undefined;
     const pressable = interactive && !reduced;
     const ink = (0, optionInk_1.optionInk)(colors).selected;

package/dist/Components/ProductCard/ProductCardAction.js

@@ -29,7 +29,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 ((0, jsx_runtime_1.jsx)(react_1.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_1.MOTION_EASE}`, children: (0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: "sm", value: quantity, min: 1, max: maxQuantity, removable: true, itemLabel: title, onValueChange: onQuantityChange, onRemove: onRemove }) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.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_1.MOTION_MS.enter}ms ${motion_1.MOTION_EASE}`, children: (0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { 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);
@@ -60,6 +60,6 @@ const ProductCardAction = ({ kind, title, labels, placement, inset, hoverBar, qu
                     },
                 }
                 : {}),
-        }, children: [isNotify ? (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 16, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 18, strokeWidth: 2.25, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", "data-label": true, fontSize: "0.8125rem", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", children: isNotify ? labels.notifyMe : barText })] }));
+        }, children: [isNotify ? (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 16, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 18, strokeWidth: 2.25, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", "data-label": true, fontSize: "xs-plus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", children: isNotify ? labels.notifyMe : barText })] }));
 };
 exports.default = ProductCardAction;

package/dist/Components/ProductCard/ProductCardSwatches.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
@@ -32,6 +33,6 @@ const ProductCardSwatches = ({ axis, limit, dot, activeId, soldOutIds, labels, o
                     return ((0, jsx_runtime_1.jsx)(react_2.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", ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "0.75rem", fontWeight: 500, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: ["+", rest] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
+                }) }), rest > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "xs", fontWeight: 500, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: ["+", rest] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
 };
 exports.default = ProductCardSwatches;

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

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

package/dist/Components/ProductCard/cardMetrics.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FINE_POINTER = exports.FINE_POINTER_QUERY = exports.TITLE_LINES = exports.MEDIA_RADIUS = exports.CSS_RATIO = exports.DENSITY = void 0;
+const radii_1 = __importDefault(require("../../Theme/tokens/primitives/radii"));
 exports.DENSITY = {
     compact: {
         badgeInset: "0.5rem",
@@ -50,7 +54,7 @@ exports.CSS_RATIO = {
     "1/1": "1 / 1",
     "3/4": "3 / 4",
 };
-exports.MEDIA_RADIUS = "1rem";
+exports.MEDIA_RADIUS = radii_1.default["2xl"];
 exports.TITLE_LINES = 2;
 exports.FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
 exports.FINE_POINTER = `@media ${exports.FINE_POINTER_QUERY}`;

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -7,16 +7,27 @@ export type ProfileCardVariantLegacy = "outlein";
 export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" | "justify" | "overflow"> & {
     /** Only ProfileCardHeader/Body/Footer children render, matched by type one fragment deep; any other sibling is dropped. */
     children: React.ReactNode;
+    /** Chakra Card variant; "outlein" is mapped to "outline". */
     variant?: ProfileCardVariant | ProfileCardVariantLegacy;
+    /** Padding scale of header, body and footer. */
     size?: "sm" | "md" | "lg";
+    /** @deprecated No visual effect: forwarded as colorScheme, which the Card styles never read. */
     color?: "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    /** CSS colour of the rule under the header, drawn only with a header slot. */
     dividercolor?: string;
+    /** Thickness of the header rule; defaults to "1px". */
     dividersize?: string;
+    /** Border style of the header rule; defaults to "solid". */
     dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
+    /** Inline style on the card root; an accent border replaces its own borderTop/borderLeft. */
     CardStyle?: React.CSSProperties;
+    /** Applied as the header's sx; an `sx` on ProfileCardHeader replaces it entirely. */
     CardHeaderStyle?: React.CSSProperties;
+    /** Applied as the body's sx; an `sx` on ProfileCardBody replaces it entirely. */
     CardBodyStyle?: React.CSSProperties;
+    /** True draws a 2px brand-primary border along the top. */
     borderTopColor?: boolean;
+    /** True draws a 2px brand-primary border down the left; wins over borderTopColor. */
     borderLeftColor?: boolean;
 };
 /** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered CardHeader; omit to keep theme/CardHeaderStyle defaults. */

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const color_1 = require("../../Theme/tokens/builders/color");
@@ -53,7 +54,7 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
     const mediaFrame = {
         boxSize: imageWidth,
         borderRadius: imageBorderRadius,
-        border: `0.063rem solid ${border}`,
+        border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${border}`,
         boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.sm,
     };
     const renderMedia = () => {
@@ -78,7 +79,7 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
                                     }, _active: {
                                         bg: c.primary[700],
                                         color: (0, filledSurface_1.labelOnFill)(c.primary[700], c.white, c.black),
-                                    } }) })), isView && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
                                         bg: c.gray[50],
                                         color: (0, accentText_1.accentTextOnCanvas)(c.primary, c.gray[50]),
                                         transform: "scale(1.1)",

package/dist/Components/QuantityStepper/QuantityStepper.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
@@ -54,6 +55,6 @@ const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, ste
                 },
             }, children: (0, jsx_runtime_1.jsx)(Icon, { size: spec.iconSize, "aria-hidden": true }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", "aria-label": `Quantity${subject}`, display: "inline-flex", align: "center", h: spec.height, borderRadius: "full", ...surface, "data-testid": testId, children: [button("dec"), (0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "group", "aria-label": `Quantity${subject}`, display: "inline-flex", align: "center", h: spec.height, borderRadius: "full", ...surface, "data-testid": testId, children: [button("dec"), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", "aria-live": "polite", "aria-atomic": "true", minW: "1.75rem", textAlign: "center", fontSize: spec.fontSize, fontWeight: 600, color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: current }), button("inc")] }));
 };
 exports.default = QuantityStepper;

package/dist/Components/RadioButton/RadioButton.d.ts

@@ -1,4 +1,13 @@
-import { ChakraRadioProps, ChakraRadioGroupProps } from "./RadioButtonProps";
-declare const RadioButton: ({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize, labelClampLines, showLabelTooltip, labelTooltip, ...rest }: ChakraRadioProps) => import("react/jsx-runtime").JSX.Element;
+import { ChakraRadioGroupProps } from "./RadioButtonProps";
+/** One themed radio; `ref` is its native `<input type="radio">`. */
+declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").RadioProps, "content" | "children"> & {
+    label: string;
+    description?: string;
+    content?: import("react").ReactNode;
+    labelFontSize?: string;
+    labelClampLines?: number;
+    showLabelTooltip?: boolean;
+    labelTooltip?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
 declare const RadioButtonGroup: ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction, align, labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired, }: ChakraRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export { RadioButton, RadioButtonGroup };

package/dist/Components/RadioButton/RadioButton.js

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonGroup = exports.RadioButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
 const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
@@ -13,13 +14,14 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
-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 = (0, react_1.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 } = (0, useCustomTheme_1.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 = (0, filledSurface_1.resolveFilledSurface)(palette, colors);
-    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { ...rest, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors), borderWidth: "1px", _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_2.Radio, { ...rest, ref: ref, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors), borderWidth: "1px", _hover: {
             borderColor: filled.fill,
             backgroundColor: colors.background[100],
         }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), _invalid: { borderColor: colors.semanticText.error }, _disabled: {
@@ -40,11 +42,12 @@ const RadioButton = ({ label, description, content, colorScheme, isChecked, onCh
                 backgroundColor: colors.background[100],
                 borderColor: colors.boxborder[500],
             },
-        }, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "block", fontSize: "0.75rem", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
-};
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "xs", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
+});
 exports.RadioButton = RadioButton;
+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 = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [label && ((0, jsx_runtime_1.jsx)(react_1.Box, { id: ids.labelId, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired }) })), (0, jsx_runtime_1.jsx)(react_1.RadioGroup, { 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: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.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))) }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: ids.labelId, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired }) })), (0, jsx_runtime_1.jsx)(react_2.RadioGroup, { 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: (0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.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))) }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.RadioButtonGroup = RadioButtonGroup;

package/dist/Components/RangeSlider/RangeSlider.js

@@ -128,9 +128,9 @@ function RangeSlider(rawProps) {
             ? (0, rangeSliderMath_1.stepMarks)(min, max, step).map((v) => ({ value: v }))
             : [];
     const singleThumbLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Value";
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, opacity: opacity, children: [label ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: "semibold", color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(currentMin) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: "semibold", color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` }), resolvedMarks.map((mark) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, opacity: opacity, children: [label ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(currentMin) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [(0, jsx_runtime_1.jsx)(react_2.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 = (0, rangeSliderMath_1.valueToPosition)(mark.value, min, max, scale);
-                            return ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.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, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.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, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.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"}` }) })] }) })] }));
 }
 exports.default = RangeSlider;

package/dist/Components/Rating/Rating.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
@@ -37,7 +38,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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showValue && current > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: valueText })), countText !== null && ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontSize: TEXT_SIZE[size], color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: ["(", countText, ")"] }))] }));
+    const summary = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showValue && current > 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: valueText })), countText !== null && ((0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontSize: TEXT_SIZE[size], color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: ["(", countText, ")"] }))] }));
     if (!interactive) {
         const label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (current === 0 && !count
             ? "Not rated yet"

package/dist/Components/Reorder/Reorder.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const dnd_1 = require("@hello-pangea/dnd");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 /** Horizontal drag-reorderable row of image tiles (wraps @hello-pangea/dnd) — not a substitute for KanbanBoard's column drag/drop. */
 const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onRemove, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -16,9 +17,9 @@ const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onR
         reordered.splice(result.destination.index, 0, moved);
         onReorder(reordered);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderWidth: "0.063rem", borderRadius: "xl", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BetweenHorizonalStart, {}), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "0.06em", textTransform: "uppercase", py: 4, children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => ((0, jsx_runtime_1.jsxs)(react_1.HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: item.id, index: index, children: (provided) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderWidth: borderWidths_1.BORDER_WIDTHS.hairline, borderRadius: "xl", px: 3, py: 2, bg: colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BetweenHorizonalStart, {}), (0, jsx_runtime_1.jsx)(react_1.Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: "sm", lineHeight: "100%", letterSpacing: "0.06em", textTransform: "uppercase", py: 4, children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => ((0, jsx_runtime_1.jsxs)(react_1.HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: item.id, index: index, children: (provided) => {
                                     var _a;
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: colors.boxborder[200], borderRadius: "lg", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index + 1}`, boxSize: "7.5rem", objectFit: "cover" }), (0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_1.Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
                                 } }, item.id))), provided.placeholder] })) }) })] }));
 };
 exports.default = ReorderList;

package/dist/Components/ReviewList/ReviewList.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
@@ -30,7 +31,6 @@ const DEFAULT_LABELS = {
     photoAlt: (author) => `Photo from ${author}'s review`,
 };
 const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
-const tabular = { fontVariantNumeric: "tabular-nums" };
 const SKELETON_ROWS = [0, 1, 2];
 const makeFormatter = (locale) => {
     const options = { day: "numeric", month: "short", year: "numeric" };
@@ -59,8 +59,8 @@ const ReviewRow = ({ review, index, clampChars, fmt, labels, pressed, expanded,
     const showHelpful = review.helpful !== undefined || pressed;
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "li", listStyleType: "none", "data-testid": `review-${review.id}`, children: [index > 0 && (0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": true, h: "1px", bg: colors.background[100] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2.5, py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Rating_1.default, { value: review.rating, size: "sm", showValue: false }), review.title && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "h3", fontSize: "md", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: review.title }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { id: bodyId, fontSize: "sm", lineHeight: 1.6, color: colors.text[700], noOfLines: isLong && !expanded ? 4 : undefined, children: review.body }), isLong && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", mt: 1, fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-expanded": expanded, "aria-controls": bodyId, onClick: () => onToggleExpanded(review.id), borderRadius: "sm", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: expanded ? labels.readLess : labels.readMore }))] }), review.media && review.media.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, wrap: "wrap", children: review.media.map((m) => {
                             var _a;
-                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "72px", borderRadius: "12px", overflow: "hidden", bg: colors.background[100], flexShrink: 0, children: (0, jsx_runtime_1.jsx)("img", { src: m.src, alt: (_a = m.alt) !== null && _a !== void 0 ? _a : labels.photoAlt(review.author), loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, m.id));
-                        }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", fontSize: "xs", color: colors.textMuted, sx: tabular, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: 600, color: colors.header[900], children: review.author }), review.city && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: review.city })] })), (0, jsx_runtime_1.jsx)(Dot, {}), date.valid ? ((0, jsx_runtime_1.jsx)("time", { dateTime: review.date, children: date.text })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: date.text })), review.purchasedSize && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.purchasedSize(review.purchasedSize) })] })), review.verified && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, fontWeight: 600, color: colors.semanticText.success, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 14, "aria-hidden": true, focusable: "false" }), labels.verified] })] }))] }), showHelpful && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-pressed": pressed, onClick: () => onToggleHelpful(review), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { size: 14, "aria-hidden": true, fill: pressed ? "currentColor" : "none" }), sx: { color: pressed ? colors.header[900] : colors.textMuted, fontVariantNumeric: "tabular-nums" }, children: labels.helpful(count) }) }))] })] }));
+                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "72px", borderRadius: "xl", overflow: "hidden", bg: colors.background[100], flexShrink: 0, children: (0, jsx_runtime_1.jsx)("img", { src: m.src, alt: (_a = m.alt) !== null && _a !== void 0 ? _a : labels.photoAlt(review.author), loading: "lazy", style: { width: "100%", height: "100%", objectFit: "cover" } }) }, m.id));
+                        }) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", fontSize: "xs", color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: 600, color: colors.header[900], children: review.author }), review.city && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: review.city })] })), (0, jsx_runtime_1.jsx)(Dot, {}), date.valid ? ((0, jsx_runtime_1.jsx)("time", { dateTime: review.date, children: date.text })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: date.text })), review.purchasedSize && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.purchasedSize(review.purchasedSize) })] })), review.verified && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dot, {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, fontWeight: 600, color: colors.semanticText.success, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.BadgeCheck, { size: 14, "aria-hidden": true, focusable: "false" }), labels.verified] })] }))] }), showHelpful && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-pressed": pressed, onClick: () => onToggleHelpful(review), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ThumbsUp, { size: 14, "aria-hidden": true, fill: pressed ? "currentColor" : "none" }), sx: { color: pressed ? colors.header[900] : colors.textMuted, ...typography_1.NUMERIC_TEXT }, children: labels.helpful(count) }) }))] })] }));
 };
 const SkeletonRow = () => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", "aria-hidden": true, py: 6, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "80px", height: "14px", borderRadius: "sm" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "100%", height: "12px", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "94%", height: "12px", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "60%", height: "12px", borderRadius: "sm" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", width: "180px", height: "12px", borderRadius: "sm" })] }) }));
 /** Customer reviews: stars, clamped body, verified marker, helpful vote and load-more paging, with a slot for sorting. */

package/dist/Components/ReviewSummary/ReviewSummary.js

@@ -7,12 +7,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const price_1 = require("../../Utils/price");
 const Rating_1 = __importDefault(require("../Rating/Rating"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const STARS = [5, 4, 3, 2, 1];
 const DEFAULT_MIN_RATINGS_FOR_BARS = 10;
-const tabular = { fontVariantNumeric: "tabular-nums" };
 const defaultLabels = (locale) => ({
     heading: "Ratings & reviews",
     writeReview: "Write a review",
@@ -39,9 +39,9 @@ const ReviewSummary = ({ rating, count, breakdown, minRatingsForBars = DEFAULT_M
         const percentOf = percentages(counts);
         return ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, flex: "1", minW: 0, maxW: "26rem", w: "100%", children: STARS.map((stars) => {
                 const percent = percentOf(stars);
-                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "grid", gridTemplateColumns: "2.25rem minmax(0, 1fr) 3.5rem", alignItems: "center", columnGap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: 1, fontSize: "sm", color: colors.text[800], sx: tabular, children: [(0, jsx_runtime_1.jsx)("span", { children: stars }), (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 12, fill: "currentColor", strokeWidth: 1.5 })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { role: "meter", "aria-label": copy.bar(stars, percent), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, h: "0.5rem", borderRadius: "full", bg: colors.background[200], overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_1.Box, { h: "100%", w: `${percent}%`, borderRadius: "full", bg: colors.star }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { "aria-hidden": true, fontSize: "sm", textAlign: "right", color: colors.textMuted, sx: tabular, children: nf.format(counts[stars]) })] }, stars));
+                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "grid", gridTemplateColumns: "2.25rem minmax(0, 1fr) 3.5rem", alignItems: "center", columnGap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: 1, fontSize: "sm", color: colors.text[800], sx: typography_1.NUMERIC_TEXT, children: [(0, jsx_runtime_1.jsx)("span", { children: stars }), (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 12, fill: "currentColor", strokeWidth: 1.5 })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { role: "meter", "aria-label": copy.bar(stars, percent), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, h: "0.5rem", borderRadius: "full", bg: colors.background[200], overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_1.Box, { h: "100%", w: `${percent}%`, borderRadius: "full", bg: colors.star }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { "aria-hidden": true, fontSize: "sm", textAlign: "right", color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: nf.format(counts[stars]) })] }, stars));
             }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "section", "aria-labelledby": id, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "h2", id: id, fontSize: "lg", fontWeight: 700, lineHeight: 1.3, color: colors.header[900], children: copy.heading }), empty ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "flex-start", gap: 1, mt: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody }), writeButton ? (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 3, children: writeButton }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: { base: "column", sm: "row" }, align: { base: "flex-start", sm: "center" }, gap: { base: 5, sm: 10 }, mt: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "flex-start", gap: 1.5, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "3rem", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, children: averageText }), (0, jsx_runtime_1.jsx)(Rating_1.default, { value: average, size: "md", showValue: false }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.textMuted, sx: tabular, children: copy.ratings(count) })] }), showBars && breakdown ? distribution(breakdown) : null] }), writeButton ? (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 5, children: writeButton }) : null] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "section", "aria-labelledby": id, "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "h2", id: id, fontSize: "lg", fontWeight: 700, lineHeight: 1.3, color: colors.header[900], children: copy.heading }), empty ? ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "flex-start", gap: 1, mt: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 600, color: colors.header[900], children: copy.emptyTitle }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.textMuted, children: copy.emptyBody }), writeButton ? (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 3, children: writeButton }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: { base: "column", sm: "row" }, align: { base: "flex-start", sm: "center" }, gap: { base: 5, sm: 10 }, mt: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "flex-start", gap: 1.5, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "5xl", lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, children: averageText }), (0, jsx_runtime_1.jsx)(Rating_1.default, { value: average, size: "md", showValue: false }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: copy.ratings(count) })] }), showBars && breakdown ? distribution(breakdown) : null] }), writeButton ? (0, jsx_runtime_1.jsx)(react_1.Box, { mt: 5, children: writeButton }) : null] }))] }));
 };
 exports.default = ReviewSummary;

package/dist/Components/SaveBar/SaveBar.d.ts

@@ -1,4 +1,4 @@
 import type { SaveBarProps } from "./SaveBarProps";
 /** Floating dirty-state bar: surfaceRaised card, slides/fades in on mount, unmounts when closed. */
-declare const SaveBar: ({ isOpen, message, onSave, onDiscard, isSaving, isSaveDisabled, saveLabel, discardLabel, position, }: SaveBarProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const SaveBar: ({ isOpen, message, onSave, onDiscard, isSaving, isSaveDisabled, saveLabel, discardLabel, position, ...rest }: SaveBarProps) => import("react/jsx-runtime").JSX.Element | null;
 export default SaveBar;