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

package/dist/Components/NotificationBell/NotificationPanel.js

@@ -12,6 +12,7 @@ const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const NotificationList_1 = __importDefault(require("./NotificationList"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const notificationHelpers_1 = require("./notificationHelpers");
 const DEFAULT_EMPTY = { title: "No notifications yet", description: "You're all caught up.", size: "sm" };
 /** The panel shell: header, zone/filter row, scroll body with loading/empty/error, footer. */
@@ -23,14 +24,14 @@ function NotificationPanel({ items, toItem, zones, activeZone, onZoneChange, fil
     const measuredHeight = (0, notificationHelpers_1.useAnchoredPanelHeight)(ref);
     const resolvedMaxH = maxH !== null && maxH !== void 0 ? maxH : (isPopover ? measuredHeight : undefined);
     const activeZoneConfig = zones === null || zones === void 0 ? void 0 : zones.find((zone) => zone.id === activeZone);
-    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { ref: ref, direction: "column", w: "100%", maxH: isPopover ? resolvedMaxH : undefined, overflow: isPopover ? "hidden" : "visible", bg: colors.surfaceRaised, borderRadius: "xl", children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 3, borderBottom: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: [header !== null && header !== void 0 ? header : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontWeight: 700, fontSize: "0.9375rem", color: colors.header[900], children: "Notifications" })), headerAction] }), zones && zones.length ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { role: "group", "aria-label": "Notification zones", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: zones.map((zone) => {
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { ref: ref, direction: "column", w: "100%", maxH: isPopover ? resolvedMaxH : undefined, overflow: isPopover ? "hidden" : "visible", bg: colors.surfaceRaised, borderRadius: "xl", children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 3, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: [header !== null && header !== void 0 ? header : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontWeight: 700, fontSize: "0.9375rem", color: colors.header[900], children: "Notifications" })), headerAction] }), zones && zones.length ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { role: "group", "aria-label": "Notification zones", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: zones.map((zone) => {
                     const isActive = zone.id === activeZone;
                     const label = zone.count ? `${zone.label} (${(0, notificationHelpers_1.formatCount)(zone.count)})` : zone.label;
                     return ((0, jsx_runtime_1.jsx)(Button_1.default, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "primary", "aria-pressed": isActive, onClick: () => onZoneChange === null || onZoneChange === void 0 ? void 0 : onZoneChange(zone.id) }, zone.id));
-                }) })) : null, filters && filters.length ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { role: "group", "aria-label": "Notification filters", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: filters.map((filter) => {
+                }) })) : null, filters && filters.length ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { role: "group", "aria-label": "Notification filters", gap: 2, px: 4, py: 2, borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: filters.map((filter) => {
                     const isActive = filter.id === activeFilter;
                     const label = typeof filter.count === "number" ? `${filter.label} (${(0, notificationHelpers_1.formatCount)(filter.count)})` : filter.label;
                     return ((0, jsx_runtime_1.jsx)(Button_1.default, { label: label, size: "xs", variant: isActive ? "solid" : "ghost", colorScheme: "secondary", "aria-pressed": isActive, onClick: () => onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(filter.id) }, filter.id));
-                }) })) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "circle", size: "7" }), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "70%" }), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: lucide_react_1.AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NotificationList_1.default, { items: items, toItem: toItem, groupBy: groupBy, collapseGroups: collapseGroups, dayLabels: dayLabels, onItemClick: onItemClick, itemActions: itemActions, renderItem: renderItem, renderSectionHeader: renderSectionHeader, unreadIndicator: unreadIndicator, actionsAlwaysVisible: actionsAlwaysVisible, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Notifications" }), hasMore ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { justify: "center", py: 3, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0, children: footer })) : null] }));
+                }) })) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Box, { flex: "1", minH: 0, overflowY: isPopover ? "auto" : "visible", children: (activeZoneConfig === null || activeZoneConfig === void 0 ? void 0 : activeZoneConfig.render) ? (activeZoneConfig.render()) : isLoading ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { p: 4, role: "status", "aria-live": "polite", "aria-label": "Loading notifications", children: [0, 1, 2, 3].map((rowIndex) => ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { gap: 3, mt: rowIndex ? 4 : 0, align: "center", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "circle", size: "7" }), (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: "70%" }), (0, jsx_runtime_1.jsx)(Primitives_1.Box, { mt: 1.5, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.625rem", width: "45%" }) })] })] }, rowIndex))) })) : error ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { title: "Couldn't load notifications", description: error instanceof Error ? error.message : "Something went wrong. Try again.", icon: lucide_react_1.AlertCircle, colorScheme: "error", size: "sm", action: onRetry ? (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Retry", size: "sm", variant: "outline", colorScheme: "red", onClick: onRetry }) : undefined })) : items.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { ...(empty !== null && empty !== void 0 ? empty : DEFAULT_EMPTY) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NotificationList_1.default, { items: items, toItem: toItem, groupBy: groupBy, collapseGroups: collapseGroups, dayLabels: dayLabels, onItemClick: onItemClick, itemActions: itemActions, renderItem: renderItem, renderSectionHeader: renderSectionHeader, unreadIndicator: unreadIndicator, actionsAlwaysVisible: actionsAlwaysVisible, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Notifications" }), hasMore ? ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { justify: "center", py: 3, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Load more", size: "sm", variant: "ghost", colorScheme: "primary", isLoading: isLoadingMore, onClick: onLoadMore }) })) : null] })) }), footer ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { px: 4, py: 2.5, borderTop: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), flexShrink: 0, children: footer })) : null] }));
 }
 exports.default = NotificationPanel;

package/dist/Components/OffersList/OffersList.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const COPIED_MS = 1600;
@@ -77,7 +78,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
                                     height: "1px",
                                     background: colors.background[200],
                                 },
-                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: { fontVariantNumeric: "tabular-nums" }, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: typography_1.NUMERIC_TEXT, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
                     }) }) }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: message })] }));
 };
 exports.default = OffersList;

package/dist/Components/OptionChip/OptionChip.js

@@ -6,6 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const optionInk_1 = require("./optionInk");
@@ -87,11 +88,11 @@ const OptionChip = (0, react_1.forwardRef)(function OptionChip({ label, selected
         whiteSpace: "nowrap",
         boxShadow: invalid && !selected ? errorRing(colors) : "none",
     };
-    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckGrow, { selected: selected }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: { fontVariantNumeric: "tabular-nums" }, children: label })] }));
+    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckGrow, { selected: selected }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: typography_1.NUMERIC_TEXT, children: label })] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...base, ...surface, sx: {
             ...motion,
             "&:hover:not(:disabled):not([aria-checked=true])": unavailable ? undefined : { backgroundColor: tone.hoverFill },
             ...(unavailable ? { "&::after": { content: '""', ...strikeLayer(band("currentColor", "0.5px")) } } : {}),
-        }, children: [content, isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", mt: "0.125rem", fontSize: "0.6875rem", fontWeight: 500, color: tone.hint, sx: { fontVariantNumeric: "tabular-nums" }, children: hint })) : null, !isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "0.0625rem", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
+        }, children: [content, isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", mt: "0.125rem", fontSize: "xs-minus", fontWeight: 500, color: tone.hint, sx: typography_1.NUMERIC_TEXT, children: hint })) : null, !isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "px", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
 });
 exports.default = OptionChip;

package/dist/Components/OrderStatusTimeline/OrderStatusTimeline.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const DEFAULT_LABELS = { done: "Completed", current: "In progress", upcoming: "Upcoming" };
@@ -34,7 +35,7 @@ const Marker = ({ state, colors }) => {
 };
 const StepText = ({ step, copy, align, colors, }) => {
     const active = step.state !== "upcoming";
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: align, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: active ? 700 : 500, lineHeight: 1.4, color: active ? colors.header[900] : colors.textMuted, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy[step.state], ": "] }), step.label] }), step.date && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: step.date })), step.detail && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: step.detail }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: align, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { as: "span", display: "block", fontSize: "sm", fontWeight: active ? 700 : 500, lineHeight: 1.4, color: active ? colors.header[900] : colors.textMuted, children: [(0, jsx_runtime_1.jsxs)(react_1.VisuallyHidden, { children: [copy[step.state], ": "] }), step.label] }), step.date && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: step.date })), step.detail && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: step.detail }))] }));
 };
 /** Order tracking steps: filled check, ringed dot and hollow ring markers, each backed by spoken state text. */
 const OrderStatusTimeline = ({ steps, orientation = "vertical", labels, "aria-label": ariaLabel = "Order status", "data-testid": testId, }) => {

package/dist/Components/OrderSummary/OrderSummary.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const price_1 = require("../../Utils/price");
 const ProgressBar_1 = __importDefault(require("../ProgressBar/ProgressBar"));
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
@@ -22,8 +23,7 @@ const DEFAULT_LABELS = {
     progressLabel: "Progress to free delivery",
 };
 const MINUS = "−";
-const tabular = { fontVariantNumeric: "tabular-nums" };
-const SummarySkeleton = () => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, p: 5, borderRadius: "1.5rem", "aria-busy": "true", "data-testid": "order-summary-skeleton", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), [0, 1, 2].map((row) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "20%" })] }, row))), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", pt: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 5, width: "25%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 5, width: "30%" })] })] }));
+const SummarySkeleton = () => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, p: 5, borderRadius: "3xl", "aria-busy": "true", "data-testid": "order-summary-skeleton", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), [0, 1, 2].map((row) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "20%" })] }, row))), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", pt: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 5, width: "25%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 5, width: "30%" })] })] }));
 /** Tonal price panel: label/amount rows, a large tabular total, a calm savings banner and free-delivery progress. */
 const OrderSummary = ({ lines, total, savings, taxNote, freeShippingProgress, hideTitle = false, isLoading = false, currency, locale, labels, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -53,11 +53,11 @@ const OrderSummary = ({ lines, total, savings, taxNote, freeShippingProgress, hi
     const unlocked = !!progress && remaining === 0;
     const percent = progress && progress.threshold > 0 ? Math.min(100, Math.round((progress.current / progress.threshold) * 100)) : 0;
     const progressText = unlocked ? copy.unlocked : copy.addMore((0, price_1.formatPrice)(remaining, fmt));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, children: [progress && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, px: 1, "data-testid": "order-summary-progress", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: unlocked ? colors.semanticText.success : colors.header[900], sx: tabular, children: progressText }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { size: "xs", value: percent, colorScheme: unlocked ? "green" : "primary", borderRadius: "full", "aria-label": copy.progressLabel, "aria-valuetext": progressText })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "section", "aria-labelledby": hideTitle ? undefined : headingId, "aria-label": hideTitle ? copy.title : undefined, bg: panel, borderRadius: "1.5rem", p: 5, children: [!hideTitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", id: headingId, fontSize: "md", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], mb: 4, children: copy.title })), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "dl", direction: "column", gap: 3, m: 0, children: lines.map((line) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, "data-testid": testId, children: [progress && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, px: 1, "data-testid": "order-summary-progress", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "p", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: unlocked ? colors.semanticText.success : colors.header[900], sx: typography_1.NUMERIC_TEXT, children: progressText }), (0, jsx_runtime_1.jsx)(ProgressBar_1.default, { size: "xs", value: percent, colorScheme: unlocked ? "green" : "primary", borderRadius: "full", "aria-label": copy.progressLabel, "aria-valuetext": progressText })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "section", "aria-labelledby": hideTitle ? undefined : headingId, "aria-label": hideTitle ? copy.title : undefined, bg: panel, borderRadius: "3xl", p: 5, children: [!hideTitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "h2", id: headingId, fontSize: "md", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], mb: 4, children: copy.title })), (0, jsx_runtime_1.jsx)(react_2.Flex, { as: "dl", direction: "column", gap: 3, m: 0, children: lines.map((line) => {
                             var _a;
                             const { text, isFree, isDeduction } = amountText(line);
                             const ink = inkFor(line, isFree, isDeduction);
-                            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "flex-start", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "dt", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", lineHeight: 1.45, color: line.tone === "muted" ? colors.textMuted : colors.text[800], children: line.label }), line.hint && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: line.hint }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "dd", m: 0, flexShrink: 0, textAlign: "right", fontSize: "sm", fontWeight: isFree || isDeduction ? 600 : 500, lineHeight: 1.45, color: ink, sx: tabular, children: text })] }, (_a = line.id) !== null && _a !== void 0 ? _a : line.label));
-                        }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "baseline", gap: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "md", fontWeight: 700, color: colors.header[900], children: copy.total }), (0, jsx_runtime_1.jsxs)(react_2.Box, { textAlign: "right", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "1.5rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: tabular, "data-testid": "order-summary-total", children: (0, price_1.formatPrice)(total, fmt) }), taxNote && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: taxNote }))] })] }), savings !== undefined && savings > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mt: 4, px: 3, py: 2.5, borderRadius: "0.75rem", bg: success.bg, color: success.fg, "data-testid": "order-summary-savings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PartyPopper, { size: 16, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, sx: tabular, children: copy.savings((0, price_1.formatPrice)(savings, fmt)) })] }))] })] }));
+                            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "flex-start", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "dt", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", lineHeight: 1.45, color: line.tone === "muted" ? colors.textMuted : colors.text[800], children: line.label }), line.hint && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: line.hint }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "dd", m: 0, flexShrink: 0, textAlign: "right", fontSize: "sm", fontWeight: isFree || isDeduction ? 600 : 500, lineHeight: 1.45, color: ink, sx: typography_1.NUMERIC_TEXT, children: text })] }, (_a = line.id) !== null && _a !== void 0 ? _a : line.label));
+                        }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "baseline", gap: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "md", fontWeight: 700, color: colors.header[900], children: copy.total }), (0, jsx_runtime_1.jsxs)(react_2.Box, { textAlign: "right", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: typography_1.NUMERIC_TEXT, "data-testid": "order-summary-total", children: (0, price_1.formatPrice)(total, fmt) }), taxNote && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: taxNote }))] })] }), savings !== undefined && savings > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mt: 4, px: 3, py: 2.5, borderRadius: "xl", bg: success.bg, color: success.fg, "data-testid": "order-summary-savings", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.PartyPopper, { size: 16, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, sx: typography_1.NUMERIC_TEXT, children: copy.savings((0, price_1.formatPrice)(savings, fmt)) })] }))] })] }));
 };
 exports.default = OrderSummary;

package/dist/Components/OrganizationDetails/CreateOrgModal.js

@@ -7,6 +7,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 surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const EMPTY = {
@@ -56,6 +57,6 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 exports.default = CreateOrgModal;

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -9,10 +9,12 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
@@ -76,7 +78,8 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const primary50 = colors.primary[50];
     const primary100 = colors.primary[100];
     const primarySolid = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
-    const onPrimary50 = (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]);
+    const primaryTile = (0, planeStep_1.bandOn)(primary50, surface);
+    const onPrimaryTile = (0, accentText_1.accentTextOnCanvas)(colors.primary, primaryTile);
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
@@ -130,7 +133,12 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: (0, motion_1.transitionFor)(["color", "gap"]), sx: (0, motion_2.reducedMotionSx)(), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: (0, motion_1.transitionFor)(["color", "gap"]), sx: (0, motion_2.reducedMotionSx)(), role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);

package/dist/Components/PageHeader/PageHeader.d.ts

@@ -1,4 +1,4 @@
 import type { PageHeaderProps } from "./PageHeaderProps";
 /** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
-declare const PageHeader: ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize, actionsLayout, "data-testid": testId, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageHeader: ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize, actionsLayout, "data-testid": testId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default PageHeader;

package/dist/Components/PageHeader/PageHeader.js

@@ -9,10 +9,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 } = (0, useCustomTheme_1.useCustomTheme)();
     const wraps = actionsLayout === "auto";
     const stacked = actionsLayout === "stacked";
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: leading }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && ((0, jsx_runtime_1.jsx)(react_1.Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && (0, jsx_runtime_1.jsx)(react_1.Box, { children: tabs })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { ...rest, direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: leading }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && ((0, jsx_runtime_1.jsx)(react_1.Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && (0, jsx_runtime_1.jsx)(react_1.Box, { children: tabs })] }));
 };
 exports.default = PageHeader;

package/dist/Components/PageHeader/PageHeaderProps.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode } from "react";
-/** Page title block per DESIGN-GUIDE §6; keep at most one solid button in `actions`. */
-export interface PageHeaderProps {
+import type { HTMLAttributes, ReactNode } from "react";
+/** Page title block per DESIGN-GUIDE §6; other `<div>` attributes (id, className, style, data-*, aria-*) land on the root. */
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "color" | "children" | "dangerouslySetInnerHTML"> {
     /** Rendered as the page's h1. */
     title: ReactNode;
     /** Muted small line under the title. */

package/dist/Components/Pagination/Pagination.d.ts

@@ -0,0 +1,5 @@
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import { type PaginationProps } from "./PaginationProps";
+export declare const PICKER_SIZE: Readonly<Record<ControlSize, ControlSize>>;
+declare const _default: import("react").MemoExoticComponent<(props: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/Components/Pagination/Pagination.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PICKER_SIZE = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Select_1 = __importDefault(require("../Select/Select"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const pageWindow_1 = require("./pageWindow");
+const PaginationProps_1 = require("./PaginationProps");
+exports.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const gapInk = (0, react_1.useMemo)(() => (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.backgroundColor.main), [colors]);
+    const copy = { ...PaginationProps_1.defaultPaginationLabels, ...labels };
+    const pageCount = props.totalItems === undefined ? Math.max(1, props.pageCount) : (0, pageWindow_1.pageCountFor)(props.totalItems, props.pageSize);
+    const current = (0, pageWindow_1.clampPage)(page, pageCount);
+    const items = (0, react_1.useMemo)(() => (0, pageWindow_1.pageWindow)(current, pageCount, siblingCount), [current, pageCount, siblingCount]);
+    const { height, fontSize, iconSize } = controlSizes_1.BUTTON_SIZES[size];
+    const previousRef = (0, react_1.useRef)(null);
+    const nextRef = (0, react_1.useRef)(null);
+    const currentRef = (0, react_1.useRef)(null);
+    (0, react_1.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 = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "nav", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "ul", listStyleType: "none", m: 0, p: 0, align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: previousRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.previous, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: iconSize }), isDisabled: isDisabled || current <= 1, onClick: () => go(current - 1) }) }), items.map((item) => typeof item === "number" ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsx)(Button_1.default, { 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: typography_1.NUMERIC_TEXT, children: item }) }, item)) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: height, h: height, fontSize: fontSize, color: gapInk, children: "\u2026" }) }, item))), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: nextRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.next, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: iconSize }), isDisabled: isDisabled || current >= pageCount, onClick: () => go(current + 1) }) })] }), onPageSizeChange && sizeOptions.length > 0 && ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": copy.pageSize, size: exports.PICKER_SIZE[size], width: PICKER_WIDTH[size], isDisabled: isDisabled, value: pageSize, options: sizeOptions, onChange: (option) => option && onPageSizeChange(Number(option.id)) }))] }));
+};
+exports.default = (0, react_1.memo)(Pagination);

package/dist/Components/Pagination/PaginationProps.d.ts

@@ -0,0 +1,46 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Screen-reader names, merged over `defaultPaginationLabels`; override them all for another language. */
+export interface PaginationLabels {
+    previous: string;
+    next: string;
+    /** Names a numbered button from its 1-based page, e.g. (3) => "Page 3". */
+    page: (page: number) => string;
+    /** Names the rows-per-page picker. */
+    pageSize: string;
+}
+export declare const defaultPaginationLabels: PaginationLabels;
+type PaginationCount = {
+    /** Total pages; anything below 1 renders a single page. */
+    pageCount: number;
+    totalItems?: undefined;
+    /** Rows per page; only the rows-per-page picker reads it here. */
+    pageSize?: number;
+} | {
+    /** Total rows; pages are derived as ceil(totalItems / pageSize), at least 1. */
+    totalItems: number;
+    /** Rows per page; also the picker's current value. */
+    pageSize: number;
+    pageCount?: undefined;
+};
+/** Controlled page navigation: numbered pages, ellipses, previous/next and an optional rows-per-page picker. */
+export type PaginationProps = PaginationCount & {
+    /** Current page, 1-based. Out-of-range values are clamped for display, never reported back. */
+    page: number;
+    /** Fires with the chosen 1-based page; never for the page already shown. */
+    onPageChange: (page: number) => void;
+    /** Rows-per-page choices; the picker needs this, `pageSize` and `onPageSizeChange`. */
+    pageSizeOptions?: number[];
+    /** Fires with the chosen page size; resetting `page` is the caller's call. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Pages kept either side of the current one; defaults to 1. First and last always show. */
+    siblingCount?: number;
+    /** Same size names as Button; defaults to "sm". */
+    size?: ControlSize;
+    /** Disables every control, e.g. while the next page loads. */
+    isDisabled?: boolean;
+    /** Names the nav landmark; defaults to "Pagination". Give each pager on a screen its own. */
+    "aria-label"?: string;
+    labels?: Partial<PaginationLabels>;
+    "data-testid"?: string;
+};
+export {};

package/dist/Components/Pagination/PaginationProps.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultPaginationLabels = void 0;
+exports.defaultPaginationLabels = {
+    previous: "Previous page",
+    next: "Next page",
+    page: (page) => `Page ${page}`,
+    pageSize: "Rows per page",
+};

package/dist/Components/Pagination/pageWindow.d.ts

@@ -0,0 +1,4 @@
+export type PageItem = number | "start-ellipsis" | "end-ellipsis";
+export declare const pageCountFor: (totalItems: number, pageSize: number) => number;
+export declare const clampPage: (page: number, pageCount: number) => number;
+export declare const pageWindow: (page: number, pageCount: number, siblingCount?: number) => PageItem[];

package/dist/Components/Pagination/pageWindow.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageWindow = exports.clampPage = exports.pageCountFor = void 0;
+const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+const pageCountFor = (totalItems, pageSize) => pageSize > 0 ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1;
+exports.pageCountFor = pageCountFor;
+const clampPage = (page, pageCount) => Math.min(Math.max(1, page), Math.max(1, pageCount));
+exports.clampPage = clampPage;
+const pageWindow = (page, pageCount, siblingCount = 1) => {
+    const count = Math.max(1, pageCount);
+    const siblings = Math.max(0, siblingCount);
+    const current = (0, exports.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];
+};
+exports.pageWindow = pageWindow;

package/dist/Components/PaymentOption/PaymentOption.js

@@ -19,6 +19,6 @@ const PaymentOption = ({ value, title, subtitle, icon, offer, selected, onSelect
     const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, selected, disabled, onSelect });
     const selectable = inGroup || !!onSelect;
     const expanded = isSelected && !!children;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.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 && (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }), icon && ((0, jsx_runtime_1.jsx)(react_2.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 })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: offer, size: "xs", tone: "success" })] }), expanded && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.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 && (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }), icon && ((0, jsx_runtime_1.jsx)(react_2.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 })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: offer, size: "xs", tone: "success" })] }), expanded && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
 };
 exports.default = PaymentOption;

package/dist/Components/PersonChip/PersonChip.js

@@ -12,10 +12,10 @@ const motion_1 = require("../../Theme/chakra/motion");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
 const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 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/Components/PinInput/PinInput.d.ts

@@ -1,3 +1,3 @@
 import { ChakraPinInputProps } from "./PinInputProps";
 /** 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, variant, pins, label, id, isRequired, isInformation, informationMessage, size, }: ChakraPinInputProps): import("react/jsx-runtime").JSX.Element;
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, size, error, errorMessage, helperText, isDisabled, }: ChakraPinInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PinInputs;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,13 +11,25 @@ const FormLabel_1 = require("../Common/FormLabel");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const pinInputCellSize_1 = require("./pinInputCellSize");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
 /** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
-function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }) {
+function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = controlSizes_1.DEFAULT_CONTROL_SIZE, error, errorMessage, helperText, isDisabled, }) {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const invalidCell = error
+        ? {
+            _invalid: {
+                borderColor: theme.colors.semanticText.error,
+                boxShadow: "none",
+                _focus: { borderColor: theme.colors.semanticText.error, ...(0, focusRing_styles_1.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 = (0, pinInputCellSize_1.pinInputCellSize)(size);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { role: "group", "aria-label": fieldName, children: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsx)(react_1.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], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) } }, index))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { role: "group", "aria-label": fieldName, children: (0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsx)(react_1.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], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) }, ...invalidCell }, index))) }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -8,8 +8,16 @@ export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultV
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";
     pins: number;
     label?: string;
-    /** Used as a fallback accessible name (with `label`) for the field group and each digit; never rendered. */
+    /** Fallback accessible name (after `label`) for the group and digits; also the base of the message ids. */
     id?: string;
+    /** Marks every digit aria-invalid with the error border and shows `errorMessage` in place of `helperText`. */
+    error?: boolean;
+    /** Shown under the cells while `error` is true; each digit's aria-describedby points at it. */
+    errorMessage?: string;
+    /** Shown under the cells when there is no error; each digit's aria-describedby points at it. */
+    helperText?: string;
+    /** Disables every digit cell. */
+    isDisabled?: boolean;
     isRequired?: boolean;
     isInformation?: boolean;
     informationMessage?: string;

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] })] }));
 };