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

package/dist/Components/Notification/NotificationProps.d.ts

@@ -1,32 +1,48 @@
 /** The event/task/call record a Notification card renders; startDate/dueDate/endDate drive its countdown text. */
 export type NotificationData = {
+    /** Echoed back to onClick together with `type`. */
     id: number;
+    /** Card heading; also the avatar's initials when `host` is empty. */
     title: string;
+    /** Avatar image; initials from `host` or `title` show without it. */
     avatarUrl?: string;
+    /** Date-parsable string shown in en-US; meetings add the time, others the year. */
     startDate: string;
+    /** Countdown target, preferred over endDate; the label only recomputes when the dates change. */
     dueDate?: string;
+    /** Countdown target used only when dueDate is absent. */
     endDate?: string;
+    /** Shown in the footer and used for the avatar's initials. */
     host?: string;
     description?: string;
-    /** Accepted but never read by Notification — the status dot's color comes from date math (dueDate/endDate), not this field. */
+    /** @deprecated Never read; the status dot colour comes from dueDate/endDate date math. */
     status?: string;
+    /** Prefixes the countdown label ("Task due in 3 days") and is echoed to onClick. */
     type: "task" | "meeting" | "call";
 };
 /** Props for the `Notification` countdown card. */
 export type NotificationProps = {
     notification: NotificationData;
+    /** Shows a dismiss control (also Enter/Space); the card never hides itself. */
     onClose?: () => void;
+    /** Adds a dot coloured by urgency: overdue, under an hour, under a day, later. */
     showStatus?: boolean;
     /** Fires only when the title text is clicked — the avatar, description and card body are not clickable. */
     onClick?: (id: number, type: "task" | "meeting" | "call") => void;
+    /** Renders a skeleton card in place of the notification. */
     isLoading?: boolean;
+    /** Per-card colour overrides; raw values here do not follow dark mode. */
     colors?: NotificationColor;
 };
 /** Optional per-card palette override for Notification; any field left unset falls back to theme tokens. */
 export type NotificationColor = {
+    /** Card surface; the default title, due-label and meta inks are contrast-lifted against it. */
     bgColor?: string;
+    /** Card border and both dividers. */
     borderColor?: string;
+    /** Description text only. */
     textColor?: string;
+    /** Replaces the contrast-lifted title ink, so check AA contrast yourself. */
     titleColor?: string;
     /** warningColor/errorColor/successColor only paint the status dot, and only when showStatus is true — otherwise inert. */
     warningColor?: string;

package/dist/Components/NotificationBell/NotificationBell.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const lucide_react_1 = require("lucide-react");
 const Primitives_1 = require("../Primitives/Primitives");
+const IconButton_1 = __importDefault(require("../IconButton/IconButton"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const tone_1 = require("../../Theme/tokens/builders/tone");
@@ -30,6 +34,6 @@ const NotificationBell = (0, react_1.forwardRef)(function NotificationBell({ cou
     const badgeOffset = BADGE_OFFSET[size];
     const countSurface = showCount ? (0, filledSurface_1.resolveFilledSurface)((0, tone_1.toneScale)(colors, tone), colors) : null;
     const dotFill = showFallbackDot ? (0, tone_1.toneInk)(colors, dotTone) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", display: "inline-flex", children: [(0, jsx_runtime_1.jsx)(Primitives_1.IconButton, { ref: ref, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: icon, boxSize: `${ICON_BOX[size]}px` }), variant: "ghost", size: size, onClick: onClick }), showCount && countSurface ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-count", position: "absolute", top: badgeOffset, right: badgeOffset, minW: "1.1rem", h: "1.1rem", px: "0.25rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.625rem", fontWeight: 700, lineHeight: 1, bg: countSurface.fill, color: countSurface.color, boxShadow: `0 0 0 2px ${ring}`, children: (0, notificationHelpers_1.formatCount)(count, max) })) : null, showFallbackDot ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-dot", position: "absolute", top: badgeOffset, right: badgeOffset, boxSize: "0.5rem", borderRadius: "full", bg: dotFill, boxShadow: `0 0 0 2px ${ring}` })) : null] }));
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", display: "inline-flex", children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { ref: ref, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "dialog", icon: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: icon, boxSize: `${ICON_BOX[size]}px` }), variant: "ghost", size: size, onClick: onClick }), showCount && countSurface ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-count", position: "absolute", top: badgeOffset, right: badgeOffset, minW: "1.1rem", h: "1.1rem", px: "0.25rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.625rem", fontWeight: 700, lineHeight: 1, bg: countSurface.fill, color: countSurface.color, boxShadow: `0 0 0 2px ${ring}`, children: (0, notificationHelpers_1.formatCount)(count, max) })) : null, showFallbackDot ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "span", "data-testid": "notification-bell-dot", position: "absolute", top: badgeOffset, right: badgeOffset, boxSize: "0.5rem", borderRadius: "full", bg: dotFill, boxShadow: `0 0 0 2px ${ring}` })) : null] }));
 });
 exports.default = NotificationBell;

package/dist/Components/NotificationBell/NotificationItem.js

@@ -28,7 +28,7 @@ const NotificationItem = ({ item, onClick, actions, actionsAlwaysVisible = false
     const rowShadow = unreadIndicator === "bar" && unread ? `inset 2px 0 0 ${ink}` : undefined;
     const hasTile = Boolean(item.icon) || Boolean(item.actor);
     // Never nested inside the row's own clickable button — a real <button> can't contain another.
-    const tileAndText = ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "flex-start", gap: 3, flex: "1", minW: 0, textAlign: "left", children: [hasTile ? ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, boxSize: TILE_SIZE, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Flex, { boxSize: TILE_SIZE, align: "center", justify: "center", borderRadius: "lg", bg: tile.bg, border: "1px solid", borderColor: tile.border, children: item.icon ? (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: item.icon, boxSize: "0.875rem", color: tile.fg, "aria-hidden": true }) : null }), item.actor ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", bottom: "-2px", right: "-2px", borderRadius: "full", border: "2px solid", borderColor: colors.background[50], children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: (_b = item.actor.name) !== null && _b !== void 0 ? _b : "?", src: (_c = item.actor.avatarUrl) !== null && _c !== void 0 ? _c : undefined, size: "2xs" }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [item.eyebrow ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "0.6875rem", fontWeight: 600, color: colors.text[500], textTransform: "uppercase", children: item.eyebrow })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", gap: 1.5, children: [unreadIndicator === "dot" && unread ? (0, jsx_runtime_1.jsx)(Primitives_1.Box, { boxSize: "0.375rem", borderRadius: "full", bg: ink, flexShrink: 0 }) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "0.875rem", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 0.5, fontSize: "0.8125rem", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1, fontSize: "0.75rem", color: colors.text[500], children: (0, notificationHelpers_1.formatRelativeTime)(item.timestamp) })] })] }));
+    const tileAndText = ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "flex-start", gap: 3, flex: "1", minW: 0, textAlign: "left", children: [hasTile ? ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, boxSize: TILE_SIZE, children: [(0, jsx_runtime_1.jsx)(Primitives_1.Flex, { boxSize: TILE_SIZE, align: "center", justify: "center", borderRadius: "lg", bg: tile.bg, border: "1px solid", borderColor: tile.border, children: item.icon ? (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: item.icon, boxSize: "0.875rem", color: tile.fg, "aria-hidden": true }) : null }), item.actor ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { position: "absolute", bottom: "-2px", right: "-2px", borderRadius: "full", border: "2px solid", borderColor: colors.background[50], children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { name: (_b = item.actor.name) !== null && _b !== void 0 ? _b : "?", src: (_c = item.actor.avatarUrl) !== null && _c !== void 0 ? _c : undefined, size: "2xs" }) })) : null] })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [item.eyebrow ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "xs-minus", fontWeight: 600, color: colors.text[500], textTransform: "uppercase", children: item.eyebrow })) : null, (0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", gap: 1.5, children: [unreadIndicator === "dot" && unread ? (0, jsx_runtime_1.jsx)(Primitives_1.Box, { boxSize: "0.375rem", borderRadius: "full", bg: ink, flexShrink: 0 }) : null, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { fontSize: "sm", fontWeight: unread ? 700 : 500, color: colors.header[900], noOfLines: 2, children: item.title })] }), item.body ? ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 0.5, fontSize: "xs-plus", color: colors.text[600], noOfLines: 2, children: item.body })) : null, preview, (0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1, fontSize: "xs", color: colors.text[500], children: (0, notificationHelpers_1.formatRelativeTime)(item.timestamp) })] })] }));
     return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { role: "group", position: "relative", align: "flex-start", gap: 2, px: 3, py: 2.5, bg: rowTint, boxShadow: rowShadow, _hover: { bg: rowTint !== null && rowTint !== void 0 ? rowTint : colors.backgroundColor.secondary }, children: [(0, jsx_runtime_1.jsxs)(Primitives_1.Box, { flex: "1", minW: 0, children: [onClick ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { as: "button", type: "button", onClick: onClick, display: "flex", w: "100%", textAlign: "left", borderRadius: "md", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: tileAndText })) : (tileAndText), groupCount && groupCount > 1 ? ((0, jsx_runtime_1.jsx)(Button_1.default, { label: `Show ${groupCount} updates`, variant: "link", size: "xs", colorScheme: "primary", mt: 1, pl: hasTile ? `calc(${TILE_SIZE} + 0.75rem)` : 0, onClick: onExpandGroup })) : null] }), trailing, actions ? ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { opacity: actionsAlwaysVisible ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, flexShrink: 0, children: actions })) : null] }));
 };
 exports.default = NotificationItem;

package/dist/Components/NotificationBell/NotificationList.js

@@ -20,7 +20,7 @@ function NotificationList({ items, toItem, groupBy = "day", collapseGroups = fal
     const sections = groupBy === "day" ? (0, notificationHelpers_1.sectionizeByDay)(items, (row) => toItem(row).timestamp, dayLabels) : [{ label: "", rows: items }];
     return ((0, jsx_runtime_1.jsx)(Primitives_1.Box, { "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, children: sections.map((section, sectionIndex) => {
             const groups = (0, notificationHelpers_1.groupConsecutive)(section.rows, (row) => (collapseGroups ? toItem(row).groupKey : undefined));
-            return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { children: [section.label ? (renderSectionHeader ? (renderSectionHeader(section.label)) : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { position: "sticky", top: 0, zIndex: 1, px: 3, py: 1.5, fontSize: "0.6875rem", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: colors.text[500], bg: colors.backgroundColor.main, children: section.label }))) : null, groups.map((group, groupIndex) => {
+            return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { children: [section.label ? (renderSectionHeader ? (renderSectionHeader(section.label)) : ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { position: "sticky", top: 0, zIndex: 1, px: 3, py: 1.5, fontSize: "xs-minus", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: colors.text[500], bg: colors.backgroundColor.main, children: section.label }))) : null, groups.map((group, groupIndex) => {
                         var _a;
                         const groupId = `${section.label}-${(_a = group.key) !== null && _a !== void 0 ? _a : `__row${groupIndex}`}`;
                         const isCollapsedRun = collapseGroups && group.rows.length > 1 && !expandedGroups.has(groupId);

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/OrganizationDetails.js

@@ -13,6 +13,7 @@ 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"));
@@ -130,7 +131,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: 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)(), 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: onPrimary50, bg: primary50 }, 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;