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

package/dist/Theme/tokens/primitives/shadows.js

@@ -1,17 +1,71 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+exports.shadowsFor = exports.shadowsDark = exports.shadowCss = exports.ELEVATION_LAYERS = exports.SHADOW_INK = void 0;
+const layer = (x, y, blur, spread, alphaHex) => ({
+    x,
+    y,
+    blur,
+    spread,
+    alphaHex,
+});
+exports.SHADOW_INK = { light: "#141828", dark: "#000000" };
+/** Pebble elevation stacks (mobile `pebble/elevation.ts`), per mode and role. */
+exports.ELEVATION_LAYERS = {
+    light: {
+        cardPress: [layer(0, 1, 2, 0, "0d"), layer(0, 2, 6, -2, "0d")],
+        card: [layer(0, 1, 2, 0, "0a"), layer(0, 3, 10, -2, "0d"), layer(0, 14, 32, -14, "1f")],
+        float: [layer(0, 2, 6, 0, "0f"), layer(0, 16, 40, -10, "38")],
+        dialog: [layer(0, 4, 12, 0, "0f"), layer(0, 28, 64, -16, "4d")],
+        sheet: [layer(0, -2, 8, 0, "0a"), layer(0, -18, 48, -14, "33")],
+    },
+    dark: {
+        cardPress: [layer(0, 1, 1, 0, "3d")],
+        card: [layer(0, 1, 2, 0, "47")],
+        float: [layer(0, 2, 8, 0, "52"), layer(0, 18, 44, -10, "9e")],
+        dialog: [layer(0, 4, 14, 0, "59"), layer(0, 28, 64, -16, "b3")],
+        sheet: [layer(0, -2, 10, 0, "4d"), layer(0, -18, 48, -14, "99")],
+    },
+};
+const length = (n) => (n === 0 ? "0" : `${n}px`);
+const rgbChannels = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(", ");
+const alphaOf = (alphaHex) => Math.round((parseInt(alphaHex, 16) / 255) * 100) / 100;
+const shadowCss = (layers, ink) => layers
+    .map((l) => `${length(l.x)} ${length(l.y)} ${length(l.blur)} ${length(l.spread)} rgba(${rgbChannels(ink)}, ${alphaOf(l.alphaHex)})`)
+    .join(", ");
+exports.shadowCss = shadowCss;
+const elevationRamp = (mode) => {
+    const css = (role) => (0, exports.shadowCss)(exports.ELEVATION_LAYERS[mode][role], exports.SHADOW_INK[mode]);
+    return {
+        sm: css("cardPress"),
+        base: css("card"),
+        md: css("float"),
+        lg: css("dialog"),
+        card: css("card"),
+        float: css("float"),
+        dialog: css("dialog"),
+        sheet: css("sheet"),
+    };
+};
+const lightElevation = elevationRamp("light");
+/** Light-mode ramp. A theme should carry `shadowsFor(mode)`, never this one in dark. */
 const shadows = {
     xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
-    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    sm: lightElevation.sm,
+    base: lightElevation.base,
+    md: lightElevation.md,
+    lg: lightElevation.lg,
     xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
     "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
     outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
     inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
     none: "none",
     darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
+    card: lightElevation.card,
+    float: lightElevation.float,
+    dialog: lightElevation.dialog,
+    sheet: lightElevation.sheet,
 };
+exports.shadowsDark = { ...shadows, ...elevationRamp("dark") };
+const shadowsFor = (mode) => mode === "dark" ? exports.shadowsDark : shadows;
+exports.shadowsFor = shadowsFor;
 exports.default = shadows;

package/dist/Theme/tokens/primitives/states.d.ts

@@ -0,0 +1 @@
+export declare const DISABLED_OPACITY = 0.5;

package/dist/Theme/tokens/primitives/states.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DISABLED_OPACITY = void 0;
+exports.DISABLED_OPACITY = 0.5;

package/dist/Theme/tokens/primitives/typography.d.ts

@@ -4,7 +4,9 @@ export declare const fonts: {
     mono: string;
 };
 export declare const fontSizes: {
+    "xs-minus": string;
     xs: string;
+    "xs-plus": string;
     sm: string;
     md: string;
     lg: string;
@@ -29,6 +31,19 @@ export declare const fontWeights: {
     extrabold: number;
     black: number;
 };
+export declare const NUMERIC_TEXT: {
+    readonly fontVariantNumeric: "tabular-nums";
+};
+export type TextStyleSpec = {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: number;
+    letterSpacing: string;
+    textTransform?: "uppercase";
+};
+export type TextStyleName = "title" | "heading" | "subheading" | "body" | "ui" | "label" | "caption" | "overline";
+/** Pebble's text variants at web density; bound to Chakra as `textStyle="<name>"`. */
+export declare const TEXT_STYLES: Readonly<Record<TextStyleName, TextStyleSpec>>;
 declare const typography: {
     fonts: {
         body: string;
@@ -36,7 +51,9 @@ declare const typography: {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;

package/dist/Theme/tokens/primitives/typography.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontWeights = exports.fontSizes = exports.fonts = void 0;
+exports.TEXT_STYLES = exports.NUMERIC_TEXT = exports.fontWeights = exports.fontSizes = exports.fonts = void 0;
 // NOTE: pure/platform-agnostic — the Inter font-face CSS import lives in Theme/chakra/fonts.web.ts, not here.
 exports.fonts = {
     body: "Inter Variable, sans-serif",
     heading: "Inter Variable, sans-serif",
-    mono: "Inter Variable, sans-serif",
+    mono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
 };
 exports.fontSizes = {
+    "xs-minus": "0.6875rem",
     xs: "0.75rem",
+    "xs-plus": "0.8125rem",
     sm: "0.875rem",
     md: "1rem",
     lg: "1.125rem",
@@ -33,5 +35,23 @@ exports.fontWeights = {
     extrabold: 800,
     black: 900,
 };
+exports.NUMERIC_TEXT = { fontVariantNumeric: "tabular-nums" };
+/** Pebble's text variants at web density; bound to Chakra as `textStyle="<name>"`. */
+exports.TEXT_STYLES = {
+    title: { fontSize: "1.5rem", lineHeight: "1.875rem", fontWeight: 700, letterSpacing: "-0.02em" },
+    heading: { fontSize: "1.25rem", lineHeight: "1.625rem", fontWeight: 600, letterSpacing: "-0.015em" },
+    subheading: { fontSize: "1rem", lineHeight: "1.375rem", fontWeight: 600, letterSpacing: "-0.006em" },
+    body: { fontSize: "0.875rem", lineHeight: "1.25rem", fontWeight: 400, letterSpacing: "0" },
+    ui: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 500, letterSpacing: "0" },
+    label: { fontSize: "0.8125rem", lineHeight: "1.125rem", fontWeight: 600, letterSpacing: "0" },
+    caption: { fontSize: "0.75rem", lineHeight: "1rem", fontWeight: 500, letterSpacing: "0" },
+    overline: {
+        fontSize: "0.6875rem",
+        lineHeight: "0.875rem",
+        fontWeight: 600,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+    },
+};
 const typography = { fonts: exports.fonts, fontSizes: exports.fontSizes, fontWeights: exports.fontWeights };
 exports.default = typography;

package/dist/Theme/tokens/primitives/zIndices.d.ts

@@ -9,6 +9,7 @@ declare const zIndices: {
     overlay: number;
     modal: number;
     popover: number;
+    popoverNested: number;
     skipLink: number;
     toast: number;
     tooltip: number;

package/dist/Theme/tokens/primitives/zIndices.js

@@ -11,6 +11,7 @@ const zIndices = {
     overlay: 1300,
     modal: 1400,
     popover: 1500,
+    popoverNested: 1510,
     skipLink: 1600,
     toast: 1700,
     tooltip: 1800,

package/dist/Utils/formatDate.d.ts

@@ -0,0 +1,25 @@
+/** A `Date`, epoch milliseconds, a `YYYY-MM-DD` calendar day, or any string `Date` parses. */
+export type DateInput = Date | number | string | null | undefined;
+/** Options shared by `formatDate`, `formatDateTime` and `formatDateRange`. */
+export type DateFormatOptions = {
+    /** BCP 47 tag; drives month names, order and digits. Defaults to "en-IN". */
+    locale?: string;
+    /** IANA zone the instant is read in; defaults to the device zone. A bare `YYYY-MM-DD` ignores it. */
+    timeZone?: string;
+    /** Returned for null, empty or invalid input instead of "Invalid Date". Defaults to "—". */
+    fallback?: string;
+    /** `"never"` drops the year, for compact chips and axes. Defaults to `"always"`. */
+    year?: "always" | "never";
+};
+/** `formatDateTime` options; `time` overrides the locale's 12- or 24-hour clock. */
+export type DateTimeFormatOptions = DateFormatOptions & {
+    /** `"12h"` ("2:05 PM") or `"24h"` ("14:05"); defaults to the locale's own clock. */
+    time?: "12h" | "24h";
+};
+export declare const DEFAULT_DATE_FALLBACK = "\u2014";
+/** "09 Oct 2026" in en-IN; locale order and month names otherwise. Null or invalid input gives `fallback`. */
+export declare function formatDate(value: DateInput, options?: DateFormatOptions): string;
+/** "09 Oct 2026, 2:05 pm" in en-IN; a bare `YYYY-MM-DD` has no time, so it prints the date alone. */
+export declare function formatDateTime(value: DateInput, options?: DateTimeFormatOptions): string;
+/** "09 – 24 Oct 2026": what both ends share is written once; reversed ends are reordered, one missing end prints the other. */
+export declare function formatDateRange(start: DateInput, end: DateInput, options?: DateFormatOptions): string;

package/dist/Utils/formatDate.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DATE_FALLBACK = void 0;
+exports.formatDate = formatDate;
+exports.formatDateTime = formatDateTime;
+exports.formatDateRange = formatDateRange;
+const price_1 = require("./price");
+exports.DEFAULT_DATE_FALLBACK = "—";
+const DAY_KEY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const EPOCH_DIGITS = /^-?\d+$/;
+const ENGLISH = /^en(?:-|$)/i;
+const RUNTIME_SPACES = /[\u2009\u202f]/g;
+const ONE_DIGIT = /^\d$/;
+const formatters = new Map();
+const build = (locale, options) => {
+    try {
+        return new Intl.DateTimeFormat(locale, options);
+    }
+    catch {
+        try {
+            return new Intl.DateTimeFormat(price_1.DEFAULT_LOCALE, options);
+        }
+        catch {
+            return new Intl.DateTimeFormat(price_1.DEFAULT_LOCALE, { ...options, timeZone: undefined });
+        }
+    }
+};
+const formatterFor = (locale, options) => {
+    const key = JSON.stringify([locale, options]);
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        const format = build(locale, options);
+        formatter = { format, english: ENGLISH.test(format.resolvedOptions().locale) };
+        formatters.set(key, formatter);
+    }
+    return formatter;
+};
+const utcNoon = ({ year, month, day }) => {
+    const date = new Date(Date.UTC(2000, month, day, 12));
+    date.setUTCFullYear(year);
+    return date;
+};
+const isValidDay = (day) => {
+    const probe = utcNoon(day);
+    return probe.getUTCFullYear() === day.year && probe.getUTCMonth() === day.month && probe.getUTCDate() === day.day;
+};
+const resolve = (value) => {
+    let date;
+    if (value instanceof Date)
+        date = value;
+    else if (typeof value === "number")
+        date = new Date(value);
+    else if (typeof value === "string") {
+        const text = value.trim();
+        if (!text)
+            return null;
+        const key = DAY_KEY.exec(text);
+        if (key) {
+            const day = { year: Number(key[1]), month: Number(key[2]) - 1, day: Number(key[3]) };
+            return isValidDay(day) ? { kind: "day", day } : null;
+        }
+        date = new Date(EPOCH_DIGITS.test(text) ? Number(text) : text);
+    }
+    else
+        return null;
+    return Number.isNaN(date.getTime()) ? null : { kind: "instant", date };
+};
+const ZONE_PARTS = { year: "numeric", month: "numeric", day: "numeric" };
+const dayIn = (date, timeZone) => {
+    if (timeZone === undefined)
+        return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
+    const read = {};
+    for (const part of formatterFor("en-US", { ...ZONE_PARTS, timeZone }).format.formatToParts(date)) {
+        read[part.type] = Number(part.value);
+    }
+    return { year: read.year, month: read.month - 1, day: read.day };
+};
+const toDay = (resolved, timeZone) => resolved.kind === "day" ? resolved.day : dayIn(resolved.date, timeZone);
+const dayOrdinal = ({ year, month, day }) => year * 10000 + month * 100 + day;
+const dateFields = (options) => ({
+    day: "2-digit",
+    month: "short",
+    ...(options.year === "never" ? {} : { year: "numeric" }),
+});
+const join = (parts, english) => parts
+    .map(({ type, value }) => {
+    if (type === "day" && ONE_DIGIT.test(value))
+        return `0${value}`;
+    if (english && type === "month" && value === "Sept")
+        return "Sep";
+    return value;
+})
+    .join("")
+    .replace(RUNTIME_SPACES, " ");
+const dayFormatter = (options) => { var _a; return formatterFor((_a = options.locale) !== null && _a !== void 0 ? _a : price_1.DEFAULT_LOCALE, { ...dateFields(options), timeZone: "UTC" }); };
+const formatDay = (day, options) => {
+    const { format, english } = dayFormatter(options);
+    return join(format.formatToParts(utcNoon(day)), english);
+};
+/** "09 Oct 2026" in en-IN; locale order and month names otherwise. Null or invalid input gives `fallback`. */
+function formatDate(value, options = {}) {
+    var _a;
+    const resolved = resolve(value);
+    if (!resolved)
+        return (_a = options.fallback) !== null && _a !== void 0 ? _a : exports.DEFAULT_DATE_FALLBACK;
+    return formatDay(toDay(resolved, options.timeZone), options);
+}
+/** "09 Oct 2026, 2:05 pm" in en-IN; a bare `YYYY-MM-DD` has no time, so it prints the date alone. */
+function formatDateTime(value, options = {}) {
+    var _a, _b;
+    const resolved = resolve(value);
+    if (!resolved)
+        return (_a = options.fallback) !== null && _a !== void 0 ? _a : exports.DEFAULT_DATE_FALLBACK;
+    if (resolved.kind === "day")
+        return formatDay(resolved.day, options);
+    const { format, english } = formatterFor((_b = options.locale) !== null && _b !== void 0 ? _b : price_1.DEFAULT_LOCALE, {
+        ...dateFields(options),
+        hour: "numeric",
+        minute: "2-digit",
+        ...(options.time ? { hour12: options.time === "12h" } : {}),
+        ...(options.timeZone ? { timeZone: options.timeZone } : {}),
+    });
+    return join(format.formatToParts(resolved.date), english);
+}
+/** "09 – 24 Oct 2026": what both ends share is written once; reversed ends are reordered, one missing end prints the other. */
+function formatDateRange(start, end, options = {}) {
+    var _a;
+    const first = resolve(start);
+    const second = resolve(end);
+    if (!first || !second) {
+        const only = first !== null && first !== void 0 ? first : second;
+        return only ? formatDay(toDay(only, options.timeZone), options) : ((_a = options.fallback) !== null && _a !== void 0 ? _a : exports.DEFAULT_DATE_FALLBACK);
+    }
+    const a = toDay(first, options.timeZone);
+    const b = toDay(second, options.timeZone);
+    const [from, to] = dayOrdinal(a) <= dayOrdinal(b) ? [a, b] : [b, a];
+    if (dayOrdinal(from) === dayOrdinal(to))
+        return formatDay(from, options);
+    const { format, english } = dayFormatter(options);
+    if (typeof format.formatRangeToParts !== "function") {
+        return `${formatDay(from, options)} – ${formatDay(to, options)}`;
+    }
+    return join(format.formatRangeToParts(utcNoon(from), utcNoon(to)), english);
+}

package/dist/esm/Components/Accordion/Accordion.js

@@ -20,13 +20,13 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
             var _a;
             return (_jsx(AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
-                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
                                         ...reducedMotionSx(),
                                         ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
                                             ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
                                         },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/AddressCard/AddressCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
 import Button from "../Button/Button.js";
 import Tag from "../Tag/Tag.js";
@@ -15,6 +16,6 @@ const AddressCard = ({ value, name, phone, lines, tag, isDefault = false, note,
     const copy = { ...DEFAULT_LABELS, ...labels };
     const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, selected, disabled, onSelect });
     const selectable = inGroup || !!onSelect;
-    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "1rem", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && (_jsx(Box, { mt: 0.5, children: _jsx(RadioIndicator, { selected: isSelected }) })), _jsxs(Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && _jsx(Tag, { label: tag, size: "xs", tone: "neutral" }), isDefault && _jsx(Tag, { label: copy.default, size: "xs", tone: "neutral" })] }), _jsxs(Box, { id: bodyId, children: [lines.map((line) => (_jsx(Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: phone })), note && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && (_jsxs(Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && (_jsx(Box, { mt: 0.5, children: _jsx(RadioIndicator, { selected: isSelected }) })), _jsxs(Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && _jsx(Tag, { label: tag, size: "xs", tone: "neutral" }), isDefault && _jsx(Tag, { label: copy.default, size: "xs", tone: "neutral" })] }), _jsxs(Box, { id: bodyId, children: [lines.map((line) => (_jsx(Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: NUMERIC_TEXT, children: phone })), note && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && (_jsxs(Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
 };
 export default AddressCard;

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -132,7 +132,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
         showSeries,
         palette,
     ]);
-    return (_jsxs("div", { ref: wrapperRef, children: [title && isSmall && (_jsx(ToolTip, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", isDisabled: !isTruncated, children: _jsx("div", { ref: titleRef, style: {
+    return (_jsxs("div", { ref: wrapperRef, children: [title && isSmall && (_jsx(ToolTip, { label: title, placement: "top", hasArrow: true, fontSize: "xs", isDisabled: !isTruncated, children: _jsx("div", { ref: titleRef, style: {
                         textAlign: "left",
                         color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
                         fontSize: computedFontSize,

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -191,7 +191,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, 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: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, 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: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);

package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js

@@ -10,7 +10,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import SelectV2 from "../SelectV2/SelectV2.js";
 const FieldLabel = ({ children }) => {
     const { colors } = useCustomTheme();
-    return (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
+    return (_jsx(Text, { fontSize: "sm", fontWeight: 500, color: colors.textMuted, mb: 2, children: children }));
 };
 const brandSwatch = (name, colors) => (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: lightPalettes[name].primary[500], border: "1px solid", borderColor: ruleInk(colors.boxborder[200], [colors.backgroundColor.light, colors.backgroundColor.tertiary], CHROME_RULE) }));
 export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {

package/dist/esm/Components/AudioRecorder/AudioRecorder.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
 import Button from "../Button/Button.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 const DEFAULT_LABELS = {
     start: "Start recording",
     stop: "Stop recording",
@@ -156,6 +157,6 @@ const AudioRecorder = ({ onRecorded, maxDurationSec, isDisabled = false, labels
     return (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Button, { label: isRecording ? text.stop : text.start, size: "sm", colorScheme: isRecording ? "red" : undefined, variant: isRecording ? "solid" : "outline", "aria-pressed": isRecording, isDisabled: isRecording ? false : isDisabled || blocked, onClick: isRecording ? stop : () => void start() }), isRecording ? (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Box, { "data-testid": "audio-recorder-dot", boxSize: "0.5rem", borderRadius: "full", bg: colors.semanticText.error, "aria-hidden": true, sx: {
                                     "@media (prefers-reduced-motion: no-preference)": { animation: "audio-recorder-pulse 1.2s ease-in-out infinite" },
                                     "@keyframes audio-recorder-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.35 } },
-                                } }), _jsx(Text, { as: "span", role: "timer", fontSize: "0.875rem", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: formatElapsed(elapsedMs) })] })) : null] }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? (_jsx(Text, { role: "alert", mt: 1, fontSize: "0.75rem", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
+                                } }), _jsx(Text, { as: "span", role: "timer", fontSize: "sm", color: colors.header[900], sx: NUMERIC_TEXT, children: formatElapsed(elapsedMs) })] })) : null] }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? (_jsx(Text, { role: "alert", mt: 1, fontSize: "xs", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
 };
 export default AudioRecorder;

package/dist/esm/Components/Avatar/Avatar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { forwardRef, useState } from "react";
 import { Box, Flex, Image, VisuallyHidden } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { toneInk } from "../../Theme/tokens/builders/tone.js";
@@ -11,12 +11,14 @@ const STATUS_TONE = {
 const STATUS_LABEL = {
     online: "Online", away: "Away", busy: "Busy", offline: "Offline",
 };
-const Avatar = ({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }) => {
+/** Initials or image avatar with an optional status dot; `ref` is the outer box. */
+const Avatar = forwardRef(function Avatar({ name, src, size = "md", status, ariaLabel, getInitials, "data-testid": testId }, ref) {
     const { colors } = useCustomTheme();
     const [imageFailed, setImageFailed] = useState(false);
     const px = SIZE_PX[size];
     const showImage = Boolean(src) && !imageFailed;
     const { bg, color } = resolveAvatarColorway(name, colors);
-    return (_jsxs(Box, { position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? (_jsx(Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : (_jsx(Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : initialsFor)(name) })), status ? (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", bottom: "0", right: "0", boxSize: DOT_SIZE[size], borderRadius: "full", bg: toneInk(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
-};
+    return (_jsxs(Box, { ref: ref, position: "relative", boxSize: `${px}px`, flexShrink: 0, "data-testid": testId, children: [showImage ? (_jsx(Image, { src: src, alt: name, boxSize: `${px}px`, borderRadius: "full", objectFit: "cover", onError: () => setImageFailed(true) })) : (_jsx(Flex, { role: "img", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : name, align: "center", justify: "center", boxSize: `${px}px`, borderRadius: "full", bg: bg, color: color, fontSize: FONT_SIZE[size], fontWeight: 600, userSelect: "none", children: (getInitials !== null && getInitials !== void 0 ? getInitials : initialsFor)(name) })), status ? (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", bottom: "0", right: "0", boxSize: DOT_SIZE[size], borderRadius: "full", bg: toneInk(colors, STATUS_TONE[status]), border: "2px solid", borderColor: colors.background[50] }), _jsx(VisuallyHidden, { children: STATUS_LABEL[status] })] })) : null] }));
+});
+Avatar.displayName = "Avatar";
 export default Avatar;

package/dist/esm/Components/Backdrop/Backdrop.js

@@ -24,5 +24,5 @@ export default function Backdrop({ open, variant = "dim", loader = false, text,
             inset: 0,
             zIndex: Number(zIndex !== null && zIndex !== void 0 ? zIndex : (container ? 10 : 1300)),
             pointerEvents: allowBackgroundInteraction ? "none" : "auto",
-        }, children: _jsx(Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...reducedMotionSx() }, children: children !== null && children !== void 0 ? children : (loader ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && _jsx(Text, { fontSize: "0.875rem", children: text })] })) : null) }) }));
+        }, children: _jsx(Box, { role: loader ? "status" : "presentation", "aria-live": loader ? "polite" : undefined, "aria-busy": loader || undefined, "aria-label": label, onClick: allowBackgroundInteraction ? undefined : onClick, position: "absolute", inset: "0", bg: scrim, backdropFilter: !isDim && !invisible ? OVERLAY_BLUR : undefined, color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, pointerEvents: allowBackgroundInteraction ? "none" : "auto", cursor: onClick && !allowBackgroundInteraction ? "pointer" : undefined, sx: { WebkitTapHighlightColor: "transparent", ...reducedMotionSx() }, children: children !== null && children !== void 0 ? children : (loader ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "lg", boxSize: SPINNER_BOX, thickness: SPINNER_THICKNESS, color: colors.white, label: text ? "" : "Loading" }), text && _jsx(Text, { fontSize: "sm", children: text })] })) : null) }) }));
 }

package/dist/esm/Components/BagBar/BagBar.js

@@ -5,6 +5,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { formatPrice } from "../../Utils/price.js";
 import Button from "../Button/Button.js";
@@ -18,7 +19,7 @@ const BagBar = ({ total, note, onViewDetails, ctaLabel, onCta, ctaDisabled = fal
     const { colors } = useCustomTheme();
     const copy = { ...DEFAULT_LABELS, ...labels };
     const sticky = position === "bottom";
-    return (_jsxs(Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "1.5rem", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${overlayScrim(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [_jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), _jsx(Text, { as: "span", fontSize: "1.25rem", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "bag-bar-total", children: formatPrice(total, { currency, locale }) })] }), note && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && (_jsxs(Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: {
+    return (_jsxs(Flex, { as: "section", "aria-label": copy.region, align: "center", justify: "space-between", gap: 4, px: 4, pt: 3, pb: SAFE_BOTTOM, borderTopRadius: "3xl", bg: `${colors.surfaceRaised}${GLASS_ALPHA}`, backdropFilter: BLUR, position: sticky ? "sticky" : "static", bottom: sticky ? 0 : undefined, zIndex: sticky ? zIndex : undefined, boxShadow: sticky ? `0 -12px 32px -16px ${overlayScrim(colors)}` : "none", "data-testid": testId, sx: { WebkitBackdropFilter: BLUR, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised } }, children: [_jsxs(Box, { minW: 0, children: [_jsxs(Flex, { align: "baseline", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, color: colors.textMuted, children: copy.total }), _jsx(Text, { as: "span", fontSize: "xl", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: NUMERIC_TEXT, "data-testid": "bag-bar-total", children: formatPrice(total, { currency, locale }) })] }), note && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note })), onViewDetails && (_jsxs(Box, { as: "button", type: "button", onClick: onViewDetails, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", fontSize: "xs", fontWeight: 600, color: colors.accentText, borderRadius: "sm", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: {
                             ...focusVisibleStyles(colors),
                             ...reducedMotionSx(),
                             "&::before": { content: '""', position: "absolute", inset: "-0.75rem -0.5rem" },