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

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/OrgSwitcher/OrgSwitcher.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 });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -10,12 +13,15 @@ const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsF
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const sizeMap = {
-    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatarH: "36px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatarH: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
+const MD_QUERY = "(min-width: 48em)";
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (org.logoUrl) {
@@ -24,9 +30,11 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
     const fill = (0, OrgSwitcherProps_1.avatarColor)(org.name, (0, chartColorsFromTheme_1.chartMode)(colors));
     return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
 };
-const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
-    var _a;
+const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, display = "full", }) => {
+    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const isMd = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
@@ -87,10 +95,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         if (org.id !== value)
             onChange(org.id, org);
     };
+    const avatarNode = selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) }));
+    const labelGap = s.px === 2 ? 8 : 10;
+    const squeezedWidth = `calc(${s.px * 8 + labelGap * 2 + 16}px + ${s.avatar})`;
+    const trigger = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": avatarOnly && selected ? `${ariaLabel}, ${selected.name}` : ariaLabel, align: "center", justify: avatarOnly ? "center" : undefined, gap: avatarOnly ? "4px" : `${labelGap}px`, h: avatarOnly ? s.avatarH : s.h, px: avatarOnly ? "6px" : s.px, minW: avatarOnly ? undefined : squeezedWidth, flexShrink: avatarOnly ? 0 : 1, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [avatarNode, !avatarOnly && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, minW: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : avatarOnly ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronDown, size: 12, color: theme.colors.textMuted, flexShrink: 0, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: (_b = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _b !== void 0 ? _b : placeholder, placement: "bottom", isDisabled: isOpen, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger })), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
                 // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
                 bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -11,6 +11,8 @@ export interface OrgOption {
 }
 /** Trigger size; looked up in a fixed sizeMap for height, avatar and font sizing. */
 export type OrgSwitcherSize = "sm" | "md" | "lg";
+/** Trigger layout: avatar + name + chevron ("full"), avatar + chevron only ("avatar"), or "auto" to switch at the `md` breakpoint. */
+export type OrgSwitcherDisplay = "full" | "avatar" | "auto";
 /** Session-scoped org switcher (trigger+popover) — not an admin screen; see OrganizationDetails for create/rename/delete/default. Closed prop list, no ...rest/ref on the trigger button. */
 export interface OrgSwitcherProps {
     /** Organizations to choose from. */
@@ -39,6 +41,8 @@ export interface OrgSwitcherProps {
     ariaLabel?: string;
     /** Show the role subtitle inside the dropdown rows. Default true. */
     showRole?: boolean;
+    /** "avatar" shows only the org avatar and a small chevron, name moves to the accessible name and a tooltip; "auto" is avatar below `md`, full from `md` up. Default "full". */
+    display?: OrgSwitcherDisplay;
 }
 export declare const AVATAR_COLORS: readonly string[];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */

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;

package/dist/Components/PincodeChecker/PincodeChecker.js

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

package/dist/Components/PlanPill/PlanPill.js

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

package/dist/Components/PriceBlock/PriceBlock.js

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

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

@@ -1,3 +1,3 @@
-export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
 export { Table as TableRoot } from "@chakra-ui/react";
-export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, BadgeProps, IconProps, LinkProps, ImageProps, DividerProps, ContainerProps, IconButtonProps, FormControlProps, FormLabelProps, PopoverProps, ListProps, AlertProps, MenuProps, } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, BadgeProps, IconProps, LinkProps, ImageProps, DividerProps, ContainerProps, FormControlProps, FormLabelProps, PopoverProps, ListProps, AlertProps, MenuProps, } from "@chakra-ui/react";