pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.66

package/dist/Components/Notification/Notification.js

@@ -15,8 +15,10 @@ const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const motion_1 = require("../../Theme/chakra/motion");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
+const activationKey_1 = require("../Common/activationKey");
 const CARD_TRANSITION = (0, motion_2.transitionFor)(["box-shadow", "background-color", "border-color"], "base");
 const DISMISS_TRANSITION = (0, motion_2.transitionFor)(["background-color", "color", "transform"], "base");
+const TICK_MS = 60000;
 /** Date-driven countdown card ("due in 3 days" / "overdue by 2 hours"). For inbox-style rows use `NotificationItem`, which cannot render a future date. */
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
@@ -36,6 +38,15 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
     const startDate = (0, react_1.useMemo)(() => notification.startDate
         ? new Date(notification.startDate)
         : null, [notification.startDate]);
+    const hasTarget = Boolean(notification.dueDate || notification.endDate);
+    const [now, setNow] = (0, react_1.useState)(() => Date.now());
+    (0, react_1.useEffect)(() => {
+        if (!hasTarget || isLoading)
+            return;
+        setNow(Date.now());
+        const timer = setInterval(() => setNow(Date.now()), TICK_MS);
+        return () => clearInterval(timer);
+    }, [hasTarget, isLoading, notification.dueDate, notification.endDate]);
     const { timeLabel, diffDays } = (0, react_1.useMemo)(() => {
         const targetDate = notification.dueDate
             ? new Date(notification.dueDate)
@@ -44,8 +55,7 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                 : null;
         if (!targetDate)
             return { timeLabel: "", diffDays: null };
-        const now = new Date();
-        const diffMs = targetDate.getTime() - now.getTime();
+        const diffMs = targetDate.getTime() - now;
         const diffMinutes = Math.floor(diffMs / (1000 * 60));
         const diffHours = diffMinutes / 60;
         const diffDays = diffHours / 24;
@@ -59,11 +69,11 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
         if (diffMs < 0) {
             const overdueMinutes = Math.abs(diffMinutes);
             if (overdueMinutes < 60)
-                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${overdueMinutes} minute${overdueMinutes === 1 ? "" : "s"}`;
             else if (overdueMinutes < 1440)
-                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 60)} hour${Math.floor(overdueMinutes / 60) === 1 ? "" : "s"}`;
             else
-                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"} ago`;
+                label = `${typeLabel} overdue by ${Math.floor(overdueMinutes / 1440)} day${Math.floor(overdueMinutes / 1440) === 1 ? "" : "s"}`;
         }
         else {
             if (diffMinutes < 60)
@@ -74,7 +84,7 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                 label = `${typeLabel} due in ${Math.ceil(diffDays)} day${Math.ceil(diffDays) === 1 ? "" : "s"}`;
         }
         return { timeLabel: label, diffDays };
-    }, [notification.dueDate, notification.endDate, notification.type]);
+    }, [notification.dueDate, notification.endDate, notification.type, now]);
     const getStatusColor = () => {
         if (diffDays === null)
             return theme.colors.textMuted;
@@ -104,29 +114,17 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
             };
         return startDate.toLocaleString("en-US", options);
     }, [startDate, notification.type]);
-    // 🔄 If loading, show skeleton
     if (isLoading) {
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "4" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "14px", width: "60%" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "8" }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "16px", width: "70%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "50%" })] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "40%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%" })] })] }) }));
     }
-    // 🧩 Normal render
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), position: "relative", children: [onClose && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        onClose();
-                    }
-                }, role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md" }, transition: CARD_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), position: "relative", children: [onClose && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: (0, activationKey_1.onActivationKey)(() => onClose()), role: "button", "aria-label": "Dismiss notification", tabIndex: 0, p: 1, borderRadius: "md", _hover: {
                     bg: closeTone.bg,
                     color: closeTone.fg,
                     transform: "scale(1.1)",
-                }, transition: DISMISS_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
+                }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), transition: DISMISS_TRANSITION, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: dueLabelColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: dueLabelColor, fontWeight: 600, children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || undefined }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 700, fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), ...(onClick && {
                                             role: "button",
                                             tabIndex: 0,
-                                            onKeyDown: (e) => {
-                                                if (e.key !== "Enter" && e.key !== " ")
-                                                    return;
-                                                e.preventDefault();
-                                                onClick(notification.id, notification.type);
-                                            },
+                                            onKeyDown: (0, activationKey_1.onActivationKey)(() => onClick(notification.id, notification.type)),
                                             _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
                                         }), children: notification.title }), notification.description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: metaColor, boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: metaColor, boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: metaColor, children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };

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

@@ -8,7 +8,7 @@ export type NotificationData = {
     avatarUrl?: string;
     /** Date-parsable string shown in en-US; meetings add the time, others the year. */
     startDate: string;
-    /** Countdown target, preferred over endDate; the label only recomputes when the dates change. */
+    /** Countdown target, preferred over endDate; the label refreshes every minute. */
     dueDate?: string;
     /** Countdown target used only when dueDate is absent. */
     endDate?: string;

package/dist/Components/NotificationBell/notificationHelpers.d.ts

@@ -22,8 +22,23 @@ export declare function sectionizeByDay<T>(rows: T[], getTime: (row: T) => numbe
 export declare function groupConsecutive<T>(rows: T[], getKey: (row: T) => string | null | undefined): ConsecutiveGroup<T>[];
 /** 5 -> "5"; 150 with max 99 -> "99+". Negative/NaN input is clamped to 0. */
 export declare function formatCount(value: number, max?: number): string;
+export interface RelativeTimeLabels {
+    justNow: string;
+    minutesAgo: (count: number) => string;
+    hoursAgo: (count: number) => string;
+    daysAgo: (count: number) => string;
+}
+export declare const DEFAULT_RELATIVE_TIME_LABELS: RelativeTimeLabels;
+/** Overrides for the English wording and the date locale of `formatRelativeTime`. */
+export interface RelativeTimeOptions {
+    /** Replaces the English "Just now" / "5m ago" / "3h ago" / "2d ago" wording. */
+    labels?: RelativeTimeLabels;
+    /** BCP 47 tag for the short date shown past a week; defaults to "en-US". */
+    locale?: string;
+}
 /** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
-export declare function formatRelativeTime(value: number | string | Date, now?: number | Date): string;
+export declare function formatRelativeTime(value: number | string | Date, now?: number | Date, { labels, locale }?: RelativeTimeOptions): string;
+/** Minimum panel height and bottom gutter for `useAnchoredPanelHeight`. */
 export interface AnchoredPanelHeightOptions {
     min?: number;
     gutter?: number;

package/dist/Components/NotificationBell/notificationHelpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_DAY_LABELS = void 0;
+exports.DEFAULT_RELATIVE_TIME_LABELS = exports.DEFAULT_DAY_LABELS = void 0;
 exports.sectionizeByDay = sectionizeByDay;
 exports.groupConsecutive = groupConsecutive;
 exports.formatCount = formatCount;
@@ -80,20 +80,26 @@ const MINUTE = 60;
 const HOUR = MINUTE * 60;
 const DAY = HOUR * 24;
 const WEEK = DAY * 7;
+exports.DEFAULT_RELATIVE_TIME_LABELS = {
+    justNow: "Just now",
+    minutesAgo: (count) => `${count}m ago`,
+    hoursAgo: (count) => `${count}h ago`,
+    daysAgo: (count) => `${count}d ago`,
+};
 /** "Just now" / "5m ago" / "3h ago" / "2d ago"; falls back to a short date past a week. */
-function formatRelativeTime(value, now = Date.now()) {
+function formatRelativeTime(value, now = Date.now(), { labels = exports.DEFAULT_RELATIVE_TIME_LABELS, locale = "en-US" } = {}) {
     const then = toDate(value);
     const nowMs = typeof now === "number" ? now : now.getTime();
     const diffSec = Math.max(0, Math.round((nowMs - then.getTime()) / 1000));
     if (diffSec < MINUTE)
-        return "Just now";
+        return labels.justNow;
     if (diffSec < HOUR)
-        return `${Math.floor(diffSec / MINUTE)}m ago`;
+        return labels.minutesAgo(Math.floor(diffSec / MINUTE));
     if (diffSec < DAY)
-        return `${Math.floor(diffSec / HOUR)}h ago`;
+        return labels.hoursAgo(Math.floor(diffSec / HOUR));
     if (diffSec < WEEK)
-        return `${Math.floor(diffSec / DAY)}d ago`;
-    return then.toLocaleDateString("en-US", { day: "2-digit", month: "short" });
+        return labels.daysAgo(Math.floor(diffSec / DAY));
+    return then.toLocaleDateString(locale, { day: "2-digit", month: "short" });
 }
 /** The tickets/hrms formula: max(min, viewport bottom edge - panel top - gutter), remeasured on resize. */
 function useAnchoredPanelHeight(ref, options) {

package/dist/Components/OffersList/OffersList.js

@@ -9,6 +9,7 @@ const motion_1 = require("../../Theme/tokens/primitives/motion");
 const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
 const COPIED_MS = 1600;
 const DEFAULT_LABELS = {
     summary: (count, best) => `Offers (${count}) · Best: ${best}`,
@@ -32,6 +33,7 @@ const writeToClipboard = (code) => {
 const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenChange, onCopy, labels, "data-testid": testId, }) => {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hoverFill = (0, tonalHover_1.tonalHover)(colors);
     const panelId = (0, react_1.useId)();
     const [innerOpen, setInnerOpen] = (0, react_1.useState)(defaultOpen);
     const [copiedId, setCopiedId] = (0, react_1.useState)(null);
@@ -65,7 +67,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
         }, COPIED_MS);
         onCopy === null || onCopy === void 0 ? void 0 : onCopy(offer);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: panelId, hidden: !open, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", w: "100%", minH: "3rem", px: 4, py: 3, align: "center", gap: 3, textAlign: "left", borderRadius: "xl", color: colors.header[900], "aria-expanded": open, "aria-controls": panelId, onClick: toggle, transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: hoverFill }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: panelId, hidden: !open, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
                         const copied = copiedId === offer.id;
                         const { code } = offer;
                         return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "li", position: "relative", align: "center", justify: "space-between", gap: 3, py: 3, sx: {
@@ -78,7 +80,7 @@ const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenCh
                                     height: "1px",
                                     background: colors.background[200],
                                 },
-                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: typography_1.NUMERIC_TEXT, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2.5, py: 1, borderRadius: "md", bg: colors.background[200], color: colors.header[900], fontSize: "xs", fontWeight: 700, letterSpacing: "0.06em", sx: typography_1.NUMERIC_TEXT, children: code }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 1.5, minH: "2.75rem", px: 3, borderRadius: "lg", fontSize: "sm", fontWeight: 600, color: colors.accentText, "aria-label": copied ? undefined : copy.copyCode(code), onClick: () => copyCode(offer, code), transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: hoverFill }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, "aria-hidden": true }) : null, (0, jsx_runtime_1.jsx)("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
                     }) }) }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: message })] }));
 };
 exports.default = OffersList;

package/dist/Components/OptionChip/OptionChip.js

@@ -9,6 +9,7 @@ const motion_1 = require("../../Theme/tokens/primitives/motion");
 const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const optionInk_1 = require("./optionInk");
 const CHIP_HEIGHT = { md: "2.75rem", lg: "3.25rem" };
 const PACK_HEIGHT = { md: "3.5rem", lg: "4rem" };
@@ -64,7 +65,7 @@ const OptionChip = (0, react_1.forwardRef)(function OptionChip({ label, selected
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...base, display: "inline-flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.25rem", minW: CHIP_HEIGHT[size], minH: CHIP_HEIGHT[size], borderRadius: "xl", bg: "transparent", color: colors.text[800], title: showLabel ? undefined : label, sx: {
                 ...motion,
                 "&:hover:not(:disabled) [data-ring]:not([data-selected])": { borderColor: colors.boxborder[500] },
-            }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "data-ring": true, "data-selected": selected ? "" : undefined, display: "inline-flex", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", position: "relative", display: "block", boxSize: dot, borderRadius: "full", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[200], boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}`, sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined }) }), showLabel ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: selected ? 600 : 500, color: selected ? colors.header[900] : rest.ink, lineHeight: "short", children: label })) : null] }));
+            }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "data-ring": true, "data-selected": selected ? "" : undefined, display: "inline-flex", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", position: "relative", display: "block", boxSize: dot, borderRadius: "full", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[200], boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${colors.boxborder[200]}`, sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined }) }), showLabel ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "xs", fontWeight: selected ? 600 : 500, color: selected ? colors.header[900] : rest.ink, lineHeight: "short", children: label })) : null] }));
     }
     if (variant === "image-tile") {
         const tile = TILE[size];
@@ -93,6 +94,6 @@ const OptionChip = (0, react_1.forwardRef)(function OptionChip({ label, selected
             ...motion,
             "&:hover:not(:disabled):not([aria-checked=true])": unavailable ? undefined : { backgroundColor: tone.hoverFill },
             ...(unavailable ? { "&::after": { content: '""', ...strikeLayer(band("currentColor", "0.5px")) } } : {}),
-        }, children: [content, isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", mt: "0.125rem", fontSize: "xs-minus", fontWeight: 500, color: tone.hint, sx: typography_1.NUMERIC_TEXT, children: hint })) : null, !isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "px", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 1px ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
+        }, children: [content, isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", mt: "0.125rem", fontSize: "xs-minus", fontWeight: 500, color: tone.hint, sx: typography_1.NUMERIC_TEXT, children: hint })) : null, !isPack && hint ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", position: "absolute", top: "-0.375rem", right: "-0.25rem", px: "0.375rem", py: "px", borderRadius: "full", bg: colors.surfaceRaised, color: colors.text[800], fontSize: "0.625rem", fontWeight: 600, lineHeight: "1rem", boxShadow: `0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
 });
 exports.default = OptionChip;

package/dist/Components/OptionChip/optionInk.js

@@ -4,15 +4,17 @@ exports.optionInk = void 0;
 const color_1 = require("../../Theme/tokens/builders/color");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 /** Resting and selected fills for an option; selection is the neutral ink fill, never the brand. */
 const optionInk = (colors) => {
     const selectedFill = colors.header[900];
+    const restHover = (0, planeStep_1.bandOn)(colors.background[400], colors.background[300]);
     const selectedInk = (0, accentText_1.onFilled)(selectedFill, colors.white, colors.black);
     const rest = {
         fill: colors.background[300],
-        hoverFill: colors.background[400],
+        hoverFill: restHover,
         ink: colors.text[800],
-        hint: (0, outlineRung_1.liftToContrast)(colors.text[700], colors.background[400], accentText_1.AA_NORMAL_TEXT),
+        hint: (0, outlineRung_1.liftToContrast)(colors.text[700], restHover, accentText_1.AA_NORMAL_TEXT),
     };
     const selected = {
         fill: selectedFill,

package/dist/Components/OrderStatusTimeline/OrderStatusTimeline.js

@@ -8,6 +8,7 @@ const motion_1 = require("../../Theme/tokens/primitives/motion");
 const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const DEFAULT_LABELS = { done: "Completed", current: "In progress", upcoming: "Upcoming" };
 const MARKER = "1.5rem";
 const RULE = "2px";
@@ -29,7 +30,7 @@ const Marker = ({ state, colors }) => {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...base, bg: ink, color: (0, accentText_1.onFilled)(ink, colors.white, colors.black), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, strokeWidth: 3 }) }));
     }
     if (state === "current") {
-        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 2px ${ink}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", boxSize: "0.5rem", borderRadius: "full", bg: ink }) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.thick} ${ink}`, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", boxSize: "0.5rem", borderRadius: "full", bg: ink }) }));
     }
     return (0, jsx_runtime_1.jsx)(react_1.Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 1.5px ${colors.textMuted}` });
 };

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -11,12 +11,15 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const optionRowInk_1 = require("../Select/optionRowInk");
 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 motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const sizeMap = {
     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 },
@@ -29,10 +32,10 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
         return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0 }));
     }
     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) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { "aria-hidden": "true", "data-initials": (0, OrgSwitcherProps_1.orgInitial)(org.name), _before: { content: "attr(data-initials)" }, 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 }));
 };
 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;
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isMd = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
     const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
@@ -90,6 +93,9 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             : { bg: "transparent" };
     // NOTE: hover reads against backgroundColor.light (the navbar shell) — for zinc the two measured near-1.0, invisible.
     const triggerHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const searchRule = (0, accentText_1.isDarkCanvas)(theme.colors.surfaceRaised)
+        ? (0, surfaceRaised_1.raisedRule)(theme.colors)
+        : theme.colors.gray[100];
     const handleSelect = (org) => {
         onClose();
         setQuery("");
@@ -99,13 +105,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     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 }))] }));
+    const shownName = avatarOnly ? selected === null || selected === void 0 ? void 0 : selected.name : ((_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder);
+    const trigger = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": shownName ? `${ariaLabel}, ${shownName}` : 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_TRANSITION, _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: (_b = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _b !== void 0 ? _b : 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: [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", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : 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) => {
+                bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, 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: searchRule, 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) {
                                                 e.preventDefault();
                                                 focusOption(0);
@@ -116,7 +123,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: "background 0.12s ease", ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: BACKGROUND_TRANSITION, ...(0, optionRowInk_1.optionRowCursorSx)(rowBackgrounds), onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

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

@@ -37,7 +37,7 @@ export interface OrgSwitcherProps {
     menuMinWidth?: string;
     /** Shown when no org is selected. */
     placeholder?: string;
-    /** Accessible label for the trigger. */
+    /** Names the trigger; the shown organization (or placeholder) is appended, so the name always holds the visible text. */
     ariaLabel?: string;
     /** Show the role subtitle inside the dropdown rows. Default true. */
     showRole?: boolean;

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -15,11 +15,13 @@ 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 Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const CreateOrgModal_1 = __importDefault(require("./CreateOrgModal"));
 const DeleteOrgModal_1 = __importDefault(require("./DeleteOrgModal"));
+const activationKey_1 = require("../Common/activationKey");
 const DEFAULT_LABELS = {
     greeting: "Hello, User!",
     manageSubtitle: "Manage your organizations",
@@ -133,12 +135,7 @@ 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: primaryTile, color: onPrimaryTile, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: (0, motion_1.transitionFor)(["color", "gap"]), sx: (0, motion_2.reducedMotionSx)(), role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (e) => {
-                                        if (e.key !== "Enter" && e.key !== " ")
-                                            return;
-                                        e.preventDefault();
-                                        onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId);
-                                    }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: (0, motion_1.transitionFor)(["color", "gap"]), sx: (0, motion_2.reducedMotionSx)(), role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (0, activationKey_1.onActivationKey)(() => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId)), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
@@ -171,7 +168,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primarySolid.fill, color: primarySolid.color, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
-                                                    : labels.greeting }), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, color: colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, color: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, (0, jsx_runtime_1.jsx)(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
+                                                    : labels.greeting }), userName ? (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "xs", name: userName, src: userAvatarUrl }) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, color: colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, color: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, (0, jsx_runtime_1.jsx)(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));
                     setCreateOpen(false);
                 }, labels: labels }), (0, jsx_runtime_1.jsx)(DeleteOrgModal_1.default, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts

@@ -6,8 +6,8 @@ export type OrganizationItem = {
     company_url?: string;
     /** 1 when this org is the user's default org. */
     default: number;
-    /** Not read by OrganizationDetails — active vs. invited comes from which array the item is placed in. */
-    uiInvite: number;
+    /** @deprecated Ignored; kept so existing callers still compile. Active vs. invited comes from which array the item is in. */
+    uiInvite?: number;
     /** Distinct from `default` above — only gates delete-protection, not the Default badge/set-default flow. */
     defaultOrg: number;
     roleName?: string;
@@ -89,7 +89,9 @@ export interface OrganizationDetailsProps {
     respondingOrgIds?: number[];
     /** orgIds currently saving a renamed organization (shows a spinner on that card) */
     editingOrgIds?: number[];
+    /** Greets the signed-in user in the header and names their avatar; no avatar renders without it. */
     userName?: string;
+    /** Avatar photo; initials from `userName` show when it is missing or fails to load. */
     userAvatarUrl?: string;
     /** Not awaited internally despite the Promise signature — drive switchingOrgIds yourself. */
     onSetDefault?: (orgId: number) => void | Promise<void>;

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -6,6 +6,7 @@ export type PdfViewerLabels = Partial<{
     unsupported: string;
     failed: string;
 }>;
+/** Inline PDF viewer fed by a URL or an authed blob getter. */
 export interface PdfViewerProps {
     /** URL of the PDF, rendered via a native browser <embed>; pass exactly one of `pdfUrl` / `getBlob`. */
     pdfUrl?: string;

package/dist/Components/PlanBadge/PlanBadgeProps.d.ts

@@ -5,7 +5,7 @@ export interface PlanBadgeProps {
     input: PlanBadgeInput;
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;
-    /** Accessible label (falls back to `label — status`). */
+    /** Replaces the name read from the visible label and status; it must contain that text, or voice control cannot match it. */
     ariaLabel?: string;
     /** Passed straight through to the underlying PlanPill button — same always-interactive caveat applies. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;

package/dist/Components/PlanPill/PlanPill.js

@@ -8,6 +8,8 @@ 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 motion_1 = require("../../Theme/tokens/primitives/motion");
+const BASE_TRANSFORM_BOX_SHADOW_TRANSITION = (0, motion_1.transitionFor)(["transform", "box-shadow"], "base");
 const TONE_ICON = {
     normal: lucide_react_1.Sparkles,
     warning: lucide_react_1.Clock,
@@ -25,7 +27,7 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const ink = resolved.ink;
     const Icon = icon === undefined ? TONE_ICON[tone] : icon;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: (0, gradientInk_1.gradientCss)(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: (0, gradientInk_1.gradientCss)(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: BASE_TRANSFORM_BOX_SHADOW_TRANSITION, _hover: {
             transform: "translateY(-1px)",
             boxShadow: `0 6px 18px ${resolved.from}59`,
         }, sx: {
@@ -34,6 +36,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: "xs-minus", fontWeight: "700", lineHeight: "18px", sx: typography_1.NUMERIC_TEXT, 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: "xs-plus", 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: "xs-plus", 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/PlanPill/PlanPillProps.d.ts

@@ -22,7 +22,7 @@ export interface PlanPillProps {
     };
     /** Truncate the label beyond this width. */
     maxLabelWidth?: string;
-    /** Accessible label (falls back to `label — status`). */
+    /** Replaces the name read from the visible label and status; it must contain that text, or voice control cannot match it. */
     ariaLabel?: string;
     /** Renders as a real <button> (hover-lift, pointer cursor, tabbable) even when omitted — there is no static/non-interactive mode. */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;

package/dist/Components/ProductCard/ProductCardAction.js

@@ -14,6 +14,7 @@ const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
 const cardMetrics_1 = require("./cardMetrics");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
 const morphIn = (0, react_2.keyframes) `
   0% { opacity: 0; transform: scale(0.85); }
   100% { opacity: 1; transform: scale(1); }
@@ -37,7 +38,7 @@ const ProductCardAction = ({ kind, title, labels, placement, inset, hoverBar, qu
     const bar = onMedia && hoverBar && !isNotify;
     const look = onMedia
         ? { bg: (0, scrim_1.overlayScrim)(colors), hoverBg: (0, scrim_1.overlayScrim)(colors), color: colors.white }
-        : { bg: colors.background[100], hoverBg: colors.background[200], color: colors.header[900] };
+        : { bg: colors.background[100], hoverBg: (0, tonalHover_1.tonalHover)(colors), color: colors.header[900] };
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-control": true, "data-bar": bar || undefined, "data-action": kind, "aria-label": name, onClick: onPress, ...place, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 1.5, h: DISC, minW: DISC, px: isNotify ? 3 : 0, borderRadius: "full", bg: look.bg, color: look.color, cursor: "pointer", transition: (0, motion_1.transitionFor)(["background-color", "opacity", "transform"], "base"), _hover: { bg: look.hoverBg }, _active: reduced ? undefined : { transform: "scale(0.9)" }, sx: {
             outline: "none",
             ...(onMedia ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),

package/dist/Components/ProductCard/ProductCardSwatches.js

@@ -8,6 +8,7 @@ const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const TARGET = "1.5rem";
 const UNAVAILABLE_OPACITY = 0.45;
 /** Colour dots for the first swatch axis: hover or focus previews the image, a press keeps it. */
@@ -32,7 +33,7 @@ const ProductCardSwatches = ({ axis, limit, dot, activeId, soldOutIds, labels, o
                     const soldOut = soldOutIds.has(value.id);
                     return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", role: "radio", ref: (el) => {
                             cells.current[index] = el;
-                        }, "aria-checked": selected, "aria-label": soldOut ? `${value.label}, ${labels.soldOut.toLowerCase()}` : value.label, tabIndex: index === activeIndex ? 0 : -1, title: value.label, onClick: () => onPick(value.id), onMouseEnter: () => onPreview(value.id), onFocus: () => onPreview(value.id), onBlur: () => onPreview(null), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: TARGET, flexShrink: 0, borderRadius: "full", cursor: "pointer", sx: { outline: "none", ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", boxSize: `${dot}px`, borderRadius: "full", backgroundColor: value.swatch, opacity: soldOut ? UNAVAILABLE_OPACITY : 1, boxShadow: `inset 0 0 0 1px ${colors.boxborder[200]}` }) }) }, value.id));
+                        }, "aria-checked": selected, "aria-label": soldOut ? `${value.label}, ${labels.soldOut.toLowerCase()}` : value.label, tabIndex: index === activeIndex ? 0 : -1, title: value.label, onClick: () => onPick(value.id), onMouseEnter: () => onPreview(value.id), onFocus: () => onPreview(value.id), onBlur: () => onPreview(null), display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: TARGET, flexShrink: 0, borderRadius: "full", cursor: "pointer", sx: { outline: "none", ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", p: "2px", borderWidth: "2px", borderStyle: "solid", borderRadius: "full", borderColor: selected ? colors.header[900] : "transparent", transition: (0, motion_1.transitionFor)(["border-color"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", boxSize: `${dot}px`, borderRadius: "full", backgroundColor: value.swatch, opacity: soldOut ? UNAVAILABLE_OPACITY : 1, boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${colors.boxborder[200]}` }) }) }, value.id));
                 }) }), rest > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", "aria-hidden": true, ml: 1, fontSize: "xs", fontWeight: 500, color: colors.textMuted, sx: typography_1.NUMERIC_TEXT, children: ["+", rest] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: labels.moreColours(rest) })] })) : null] }));
 };
 exports.default = ProductCardSwatches;