pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/esm/Components/NumberInput/NumberInput.styles.js

@@ -1,86 +1,26 @@
-import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
-export const NumberInput = {
-    baseStyle: ({ theme }) => ({
-        field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            pt: "0.813rem",
-            pb: "0.813rem",
-            borderRadius: "lg",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            _placeholder: {
-                fontStyle: "italic",
-                color: placeholderInk(theme.colors),
-            },
-        },
-    }),
-    sizes: {
-        md: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.875rem",
-            },
+import { fieldPartStyles, fieldSizes } from "../Input/TextInput.styles.js";
+import { CONTROL_SIZES, CONTROL_SIZE_NAMES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+const stepperSizes = Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => {
+    const half = `calc(${CONTROL_SIZES[size].height} / 2)`;
+    return [
+        size,
+        {
+            stepperGroup: { width: "1.5rem", height: CONTROL_SIZES[size].height },
+            stepper: { height: half, fontSize: "0.5rem", boxSizing: "border-box" },
         },
-    },
+    ];
+}));
+const numberInputSizes = fieldSizes("field");
+for (const size of CONTROL_SIZE_NAMES) {
+    Object.assign(numberInputSizes[size], stepperSizes[size]);
+}
+export const NumberInput = {
+    sizes: numberInputSizes,
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
-            return {
-                field: {
-                    bg: theme.colors.gray[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _placeholder: {
-                        color: placeholderInk(theme.colors),
-                    },
-                    _hover: {
-                        borderColor: primary,
-                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                        outline: "0"
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        _hover: {
-                            borderColor: errorColor,
-                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                            outline: "0"
-                        },
-                    },
-                    _readOnly: {
-                        boxShadow: 'inherit',
-                    },
-                    _disabled: {
-                        bg: theme.colors.gray[100],
-                        opacity: 1,
-                        cursor: "not-allowed",
-                        _hover: {
-                            border: "0.063rem solid",
-                            borderColor,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: fieldPartStyles(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: DEFAULT_CONTROL_SIZE,
     },
 };

package/dist/esm/Components/OffersList/OffersList.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { Check, ChevronDown, Tag } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.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 { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const COPIED_MS = 1600;
+const DEFAULT_LABELS = {
+    summary: (count, best) => `Offers (${count}) · Best: ${best}`,
+    summaryCount: (count) => `Offers (${count})`,
+    copy: "Copy",
+    copied: "Copied",
+    copyCode: (code) => `Copy code ${code}`,
+    copiedMessage: (code) => `Code ${code} copied`,
+};
+const writeToClipboard = (code) => {
+    var _a;
+    try {
+        const pending = (_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText(code);
+        pending === null || pending === void 0 ? void 0 : pending.catch(() => undefined);
+    }
+    catch {
+        return;
+    }
+};
+/** One collapsed tonal row ("Offers (3) · Best: ...") that opens into the full list with copy-code buttons; renders nothing for no offers. */
+const OffersList = ({ offers, bestOfferId, isOpen, defaultOpen = false, onOpenChange, onCopy, labels, "data-testid": testId, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    const hoverFill = tonalHover(colors);
+    const panelId = useId();
+    const [innerOpen, setInnerOpen] = useState(defaultOpen);
+    const [copiedId, setCopiedId] = useState(null);
+    const [message, setMessage] = useState("");
+    const timer = useRef();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const open = isOpen !== null && isOpen !== void 0 ? isOpen : innerOpen;
+    useEffect(() => () => clearTimeout(timer.current), []);
+    if (offers.length === 0)
+        return null;
+    const best = (_a = offers.find((offer) => offer.id === bestOfferId)) !== null && _a !== void 0 ? _a : offers[0];
+    const summary = offers.length === 1
+        ? `${best.title} · ${best.detail}`
+        : best.title
+            ? copy.summary(offers.length, best.title)
+            : copy.summaryCount(offers.length);
+    const toggle = () => {
+        const next = !open;
+        if (isOpen === undefined)
+            setInnerOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    };
+    const copyCode = (offer, code) => {
+        writeToClipboard(code);
+        setCopiedId(offer.id);
+        setMessage(copy.copiedMessage(code));
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+            setCopiedId(null);
+            setMessage("");
+        }, COPIED_MS);
+        onCopy === null || onCopy === void 0 ? void 0 : onCopy(offer);
+    };
+    return (_jsxs(Box, { bg: colors.background[100], borderRadius: "xl", overflow: "hidden", "data-testid": testId, children: [_jsxs(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: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.accentText, children: _jsx(Tag, { size: 18 }) }), _jsx(Text, { as: "span", flex: "1", minW: 0, fontSize: "sm", fontWeight: 600, noOfLines: open ? undefined : 1, children: summary }), _jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, color: colors.textMuted, transform: open ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 18 }) })] }), _jsx(Box, { id: panelId, hidden: !open, children: _jsx(Box, { as: "ul", listStyleType: "none", m: 0, px: 4, pb: 2, children: offers.map((offer) => {
+                        const copied = copiedId === offer.id;
+                        const { code } = offer;
+                        return (_jsxs(Flex, { as: "li", position: "relative", align: "center", justify: "space-between", gap: 3, py: 3, sx: {
+                                "&:not(:first-of-type)::before": {
+                                    content: '""',
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                    height: "1px",
+                                    background: colors.background[200],
+                                },
+                            }, children: [_jsxs(Box, { minW: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: colors.header[900], children: offer.title }), _jsx(Text, { mt: 0.5, fontSize: "sm", lineHeight: 1.45, color: colors.textMuted, children: offer.detail })] }), code ? (_jsxs(Flex, { align: "center", gap: 1, flexShrink: 0, children: [_jsx(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: NUMERIC_TEXT, children: code }), _jsxs(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: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [copied ? _jsx(Check, { size: 16, "aria-hidden": true }) : null, _jsx("span", { children: copied ? copy.copied : copy.copy })] })] })) : null] }, offer.id));
+                    }) }) }), _jsx(VisuallyHidden, { "aria-live": "polite", children: message })] }));
+};
+export default OffersList;

package/dist/esm/Components/OffersList/OffersListProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/OptionChip/OptionChip.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.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 { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { optionInk } from "./optionInk.js";
+const CHIP_HEIGHT = { md: "2.75rem", lg: "3.25rem" };
+const PACK_HEIGHT = { md: "3.5rem", lg: "4rem" };
+const DOT = { md: "1.75rem", lg: "2rem" };
+const TILE = { md: { w: "4rem", h: "5rem" }, lg: { w: "4.5rem", h: "5.625rem" } };
+const DIM_OPACITY = 0.5;
+const band = (color, half) => `linear-gradient(to top right, transparent calc(50% - ${half}), ${color} calc(50% - ${half}), ${color} calc(50% + ${half}), transparent calc(50% + ${half}))`;
+const strikeImage = (ink, halo) => `${band(ink, "0.5px")}, ${band(halo, "1.5px")}`;
+const strikeLayer = (image) => ({
+    position: "absolute",
+    inset: 0,
+    borderRadius: "inherit",
+    pointerEvents: "none",
+    backgroundImage: image,
+});
+const CheckGrow = ({ selected }) => (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", alignItems: "center", flexShrink: 0, overflow: "hidden", w: selected ? "1.125rem" : 0, opacity: selected ? 1 : 0, transition: transitionFor(["width", "opacity"], "base"), sx: reducedMotionSx(), children: _jsx(Check, { size: 14, strokeWidth: 2.5 }) }));
+const errorRing = (colors) => `inset 0 0 0 1px ${colors.semanticText.error}`;
+/** The one selectable option control: text chip, colour swatch, image tile or pack. Parent group supplies the radiogroup. */
+const OptionChip = forwardRef(function OptionChip({ label, selected = false, disabled = false, unavailable = false, invalid = false, variant = "chip", swatch, image, hint, showLabel = false, size = "md", fullWidth = false, onSelect, onFocus, tabIndex, "data-testid": testId, }, ref) {
+    const { colors } = useCustomTheme();
+    const { rest, selected: picked } = optionInk(colors);
+    const tone = selected ? picked : rest;
+    const dimmed = unavailable || disabled;
+    const accessibleName = [label, hint, unavailable ? "unavailable" : null].filter(Boolean).join(", ");
+    const strikeBackground = strikeImage(colors.text[800], colors.background[50]);
+    const base = {
+        ref,
+        as: "button",
+        type: "button",
+        role: "radio",
+        "aria-checked": selected,
+        "aria-disabled": unavailable || undefined,
+        "aria-label": accessibleName,
+        "data-testid": testId,
+        disabled,
+        tabIndex,
+        onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(),
+        onFocus: () => onFocus === null || onFocus === void 0 ? void 0 : onFocus(),
+        position: "relative",
+        flexShrink: 0,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: dimmed ? DIM_OPACITY : 1,
+        w: fullWidth ? "100%" : undefined,
+        transition: transitionFor(["background-color", "color", "box-shadow", "border-color", "transform"]),
+        _active: dimmed ? undefined : { transform: "scale(0.97)" },
+    };
+    const motion = {
+        ...focusVisibleStyles(colors),
+        ...reducedMotionSx({ "&:active": { transform: "none" } }),
+    };
+    if (variant === "swatch") {
+        const dot = DOT[size];
+        return (_jsxs(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: [_jsx(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: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsx(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 ${BORDER_WIDTHS.hairline} ${colors.boxborder[200]}`, sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined }) }), showLabel ? (_jsx(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];
+        return (_jsxs(Box, { ...base, display: "inline-flex", flexDirection: "column", alignItems: "center", gap: "0.375rem", bg: "transparent", color: rest.ink, w: fullWidth ? "100%" : undefined, maxW: `calc(${tile.w} + 0.5rem)`, sx: motion, children: [_jsx(Box, { as: "span", display: "block", p: "0.125rem", borderWidth: "2px", borderStyle: "solid", borderRadius: "calc(0.75rem + 4px)", borderColor: selected ? colors.header[900] : invalid ? colors.semanticText.error : "transparent", transition: transitionFor(["border-color"]), sx: reducedMotionSx(), children: _jsxs(Box, { as: "span", position: "relative", display: "block", w: tile.w, h: tile.h, borderRadius: "xl", overflow: "hidden", backgroundColor: swatch !== null && swatch !== void 0 ? swatch : colors.background[100], sx: unavailable ? { "&::after": { content: '""', ...strikeLayer(strikeBackground) } } : undefined, children: [image ? _jsx(Box, { as: "img", src: image, alt: "", loading: "lazy", w: "100%", h: "100%", objectFit: "cover", display: "block" }) : null, _jsx(Box, { as: "span", "aria-hidden": true, position: "absolute", top: "0.25rem", right: "0.25rem", display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "1.125rem", borderRadius: "full", bg: picked.fill, color: picked.ink, opacity: selected ? 1 : 0, transform: selected ? "scale(1)" : "scale(0.6)", transition: transitionFor(["opacity", "transform"], "base"), sx: reducedMotionSx({ transform: "none" }), children: _jsx(Check, { size: 12, strokeWidth: 3 }) })] }) }), _jsx(Text, { as: "span", maxW: "100%", fontSize: "xs", fontWeight: selected ? 600 : 500, lineHeight: "short", textAlign: "center", noOfLines: 2, wordBreak: "break-word", children: label }), hint ? (_jsx(Text, { as: "span", fontSize: "xs", lineHeight: "short", color: rest.hint, noOfLines: 1, children: hint })) : null] }));
+    }
+    const isPack = variant === "pack";
+    const surface = {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minW: isPack ? "5.75rem" : "3.5rem",
+        h: isPack ? PACK_HEIGHT[size] : CHIP_HEIGHT[size],
+        px: isPack ? 3 : 4,
+        borderRadius: "xl",
+        bg: tone.fill,
+        color: tone.ink,
+        fontSize: size === "lg" ? "md" : "sm",
+        fontWeight: 600,
+        lineHeight: "short",
+        whiteSpace: "nowrap",
+        boxShadow: invalid && !selected ? errorRing(colors) : "none",
+    };
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", children: [_jsx(CheckGrow, { selected: selected }), _jsx(Box, { as: "span", sx: NUMERIC_TEXT, children: label })] }));
+    return (_jsxs(Box, { ...base, ...surface, sx: {
+            ...motion,
+            "&:hover:not(:disabled):not([aria-checked=true])": unavailable ? undefined : { backgroundColor: tone.hoverFill },
+            ...(unavailable ? { "&::after": { content: '""', ...strikeLayer(band("currentColor", "0.5px")) } } : {}),
+        }, children: [content, isPack && hint ? (_jsx(Text, { as: "span", mt: "0.125rem", fontSize: "xs-minus", fontWeight: 500, color: tone.hint, sx: NUMERIC_TEXT, children: hint })) : null, !isPack && hint ? (_jsx(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 ${BORDER_WIDTHS.hairline} ${colors.boxborder[200]}`, pointerEvents: "none", children: hint })) : null] }));
+});
+export default OptionChip;

package/dist/esm/Components/OptionChip/OptionChipProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/OptionChip/optionInk.js

@@ -0,0 +1,23 @@
+import { mix } from "../../Theme/tokens/builders/color.js";
+import { AA_NORMAL_TEXT, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+/** Resting and selected fills for an option; selection is the neutral ink fill, never the brand. */
+export const optionInk = (colors) => {
+    const selectedFill = colors.header[900];
+    const restHover = bandOn(colors.background[400], colors.background[300]);
+    const selectedInk = onFilled(selectedFill, colors.white, colors.black);
+    const rest = {
+        fill: colors.background[300],
+        hoverFill: restHover,
+        ink: colors.text[800],
+        hint: liftToContrast(colors.text[700], restHover, AA_NORMAL_TEXT),
+    };
+    const selected = {
+        fill: selectedFill,
+        hoverFill: selectedFill,
+        ink: selectedInk,
+        hint: liftToContrast(mix(selectedInk, selectedFill, 0.2), selectedFill, AA_NORMAL_TEXT),
+    };
+    return { rest, selected };
+};

package/dist/esm/Components/OrderStatusTimeline/OrderStatusTimeline.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.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 { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+const DEFAULT_LABELS = { done: "Completed", current: "In progress", upcoming: "Upcoming" };
+const MARKER = "1.5rem";
+const RULE = "2px";
+const Marker = ({ state, colors }) => {
+    const ink = colors.header[900];
+    const base = {
+        as: "span",
+        "aria-hidden": true,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSize: MARKER,
+        flexShrink: 0,
+        borderRadius: "full",
+        transition: transitionFor(["background-color", "box-shadow"]),
+        sx: reducedMotionSx(),
+    };
+    if (state === "done") {
+        return (_jsx(Box, { ...base, bg: ink, color: onFilled(ink, colors.white, colors.black), children: _jsx(Check, { size: 14, strokeWidth: 3 }) }));
+    }
+    if (state === "current") {
+        return (_jsx(Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.thick} ${ink}`, children: _jsx(Box, { as: "span", boxSize: "0.5rem", borderRadius: "full", bg: ink }) }));
+    }
+    return _jsx(Box, { ...base, bg: "transparent", boxShadow: `inset 0 0 0 1.5px ${colors.textMuted}` });
+};
+const StepText = ({ step, copy, align, colors, }) => {
+    const active = step.state !== "upcoming";
+    return (_jsxs(Box, { textAlign: align, minW: 0, children: [_jsxs(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: active ? 700 : 500, lineHeight: 1.4, color: active ? colors.header[900] : colors.textMuted, children: [_jsxs(VisuallyHidden, { children: [copy[step.state], ": "] }), step.label] }), step.date && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: NUMERIC_TEXT, children: step.date })), step.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: step.detail }))] }));
+};
+/** Order tracking steps: filled check, ringed dot and hollow ring markers, each backed by spoken state text. */
+const OrderStatusTimeline = ({ steps, orientation = "vertical", labels, "aria-label": ariaLabel = "Order status", "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const filledRule = colors.header[900];
+    const idleRule = colors.boxborder[300];
+    if (orientation === "horizontal") {
+        return (_jsx(Box, { as: "ol", "aria-label": ariaLabel, display: "grid", gridTemplateColumns: `repeat(${steps.length}, minmax(0, 1fr))`, m: 0, p: 0, listStyleType: "none", "data-testid": testId, children: steps.map((step, i) => {
+                const before = i > 0 && steps[i - 1].state === "done";
+                const after = step.state === "done";
+                return (_jsxs(Flex, { as: "li", direction: "column", align: "center", gap: 2, px: 1, "aria-current": step.state === "current" ? "step" : undefined, "data-state": step.state, children: [_jsxs(Flex, { align: "center", w: "100%", children: [_jsx(Box, { flex: 1, h: RULE, bg: i === 0 ? "transparent" : before ? filledRule : idleRule }), _jsx(Marker, { state: step.state, colors: colors }), _jsx(Box, { flex: 1, h: RULE, bg: i === steps.length - 1 ? "transparent" : after ? filledRule : idleRule })] }), _jsx(StepText, { step: step, copy: copy, align: "center", colors: colors })] }, step.id));
+            }) }));
+    }
+    return (_jsx(Box, { as: "ol", "aria-label": ariaLabel, m: 0, p: 0, listStyleType: "none", "data-testid": testId, children: steps.map((step, i) => {
+            const last = i === steps.length - 1;
+            return (_jsxs(Flex, { as: "li", gap: 3, "aria-current": step.state === "current" ? "step" : undefined, "data-state": step.state, children: [_jsxs(Flex, { direction: "column", align: "center", flexShrink: 0, children: [_jsx(Marker, { state: step.state, colors: colors }), !last && _jsx(Box, { flex: 1, w: RULE, minH: "1.5rem", my: 1, bg: step.state === "done" ? filledRule : idleRule })] }), _jsx(Box, { pb: last ? 0 : 4, pt: "0.125rem", flex: 1, minW: 0, children: _jsx(StepText, { step: step, copy: copy, align: "left", colors: colors }) })] }, step.id));
+        }) }));
+};
+export default OrderStatusTimeline;

package/dist/esm/Components/OrderStatusTimeline/OrderStatusTimelineProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/OrderSummary/OrderSummary.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { PartyPopper } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { formatPrice } from "../../Utils/price.js";
+import ProgressBar from "../ProgressBar/ProgressBar.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+const DEFAULT_LABELS = {
+    title: "Price details",
+    total: "Total",
+    free: "FREE",
+    savings: (amount) => `You save ${amount} on this order`,
+    addMore: (amount) => `Add ${amount} more for free delivery`,
+    unlocked: "You've unlocked free delivery",
+    progressLabel: "Progress to free delivery",
+};
+const MINUS = "−";
+const SummarySkeleton = () => (_jsxs(Flex, { direction: "column", gap: 4, p: 5, borderRadius: "3xl", "aria-busy": "true", "data-testid": "order-summary-skeleton", children: [_jsx(Skeletons, { type: "skeleton", height: 4, width: "40%" }), [0, 1, 2].map((row) => (_jsxs(Flex, { justify: "space-between", children: [_jsx(Skeletons, { type: "skeleton", height: 3, width: "30%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "20%" })] }, row))), _jsxs(Flex, { justify: "space-between", pt: 2, children: [_jsx(Skeletons, { type: "skeleton", height: 5, width: "25%" }), _jsx(Skeletons, { type: "skeleton", height: 5, width: "30%" })] })] }));
+/** Tonal price panel: label/amount rows, a large tabular total, a calm savings banner and free-delivery progress. */
+const OrderSummary = ({ lines, total, savings, taxNote, freeShippingProgress, hideTitle = false, isLoading = false, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const headingId = useId();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const fmt = { currency, locale };
+    const panel = colors.background[100];
+    if (isLoading)
+        return _jsx(SummarySkeleton, {});
+    const inkFor = (line, isFree, isDeduction) => {
+        if (isFree || isDeduction || line.tone === "success")
+            return colors.semanticText.success;
+        return line.tone === "muted" ? colors.textMuted : colors.header[900];
+    };
+    const amountText = (line) => {
+        if (typeof line.amount === "string")
+            return { text: line.amount, isFree: false, isDeduction: false };
+        if (line.amount === 0 && line.freeWhenZero)
+            return { text: copy.free, isFree: true, isDeduction: false };
+        if (line.amount < 0)
+            return { text: `${MINUS}${formatPrice(Math.abs(line.amount), fmt)}`, isFree: false, isDeduction: true };
+        return { text: formatPrice(line.amount, fmt), isFree: false, isDeduction: false };
+    };
+    const success = resolveSoftTone(colors, toneScale(colors, "success"), panel);
+    const progress = freeShippingProgress;
+    const remaining = progress ? Math.max(0, progress.threshold - progress.current) : 0;
+    const unlocked = !!progress && remaining === 0;
+    const percent = progress && progress.threshold > 0 ? Math.min(100, Math.round((progress.current / progress.threshold) * 100)) : 0;
+    const progressText = unlocked ? copy.unlocked : copy.addMore(formatPrice(remaining, fmt));
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, children: [progress && (_jsxs(Flex, { direction: "column", gap: 2, px: 1, "data-testid": "order-summary-progress", children: [_jsx(Text, { as: "p", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: unlocked ? colors.semanticText.success : colors.header[900], sx: NUMERIC_TEXT, children: progressText }), _jsx(ProgressBar, { size: "xs", value: percent, colorScheme: unlocked ? "green" : "primary", borderRadius: "full", "aria-label": copy.progressLabel, "aria-valuetext": progressText })] })), _jsxs(Box, { as: "section", "aria-labelledby": hideTitle ? undefined : headingId, "aria-label": hideTitle ? copy.title : undefined, bg: panel, borderRadius: "3xl", p: 5, children: [!hideTitle && (_jsx(Text, { as: "h2", id: headingId, fontSize: "md", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], mb: 4, children: copy.title })), _jsx(Flex, { as: "dl", direction: "column", gap: 3, m: 0, children: lines.map((line) => {
+                            var _a;
+                            const { text, isFree, isDeduction } = amountText(line);
+                            const ink = inkFor(line, isFree, isDeduction);
+                            return (_jsxs(Flex, { justify: "space-between", align: "flex-start", gap: 4, children: [_jsxs(Box, { as: "dt", minW: 0, children: [_jsx(Text, { as: "span", fontSize: "sm", lineHeight: 1.45, color: line.tone === "muted" ? colors.textMuted : colors.text[800], children: line.label }), line.hint && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: line.hint }))] }), _jsx(Box, { as: "dd", m: 0, flexShrink: 0, textAlign: "right", fontSize: "sm", fontWeight: isFree || isDeduction ? 600 : 500, lineHeight: 1.45, color: ink, sx: NUMERIC_TEXT, children: text })] }, (_a = line.id) !== null && _a !== void 0 ? _a : line.label));
+                        }) }), _jsxs(Flex, { justify: "space-between", align: "baseline", gap: 4, mt: 6, children: [_jsx(Text, { as: "span", fontSize: "md", fontWeight: 700, color: colors.header[900], children: copy.total }), _jsxs(Box, { textAlign: "right", children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.02em", color: colors.header[900], sx: NUMERIC_TEXT, "data-testid": "order-summary-total", children: formatPrice(total, fmt) }), taxNote && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: taxNote }))] })] }), savings !== undefined && savings > 0 && (_jsxs(Flex, { align: "center", gap: 2, mt: 4, px: 3, py: 2.5, borderRadius: "xl", bg: success.bg, color: success.fg, "data-testid": "order-summary-savings", children: [_jsx(PartyPopper, { size: 16, "aria-hidden": true }), _jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, sx: NUMERIC_TEXT, children: copy.savings(formatPrice(savings, fmt)) })] }))] })] }));
+};
+export default OrderSummary;

package/dist/esm/Components/OrderSummary/OrderSummaryProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -1,30 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Flex, Image, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Spinner, Text, useDisclosure, } from "@chakra-ui/react";
-import { Building2, Check, ChevronsUpDown, Search } from "lucide-react";
+import { Building2, Check, ChevronDown, ChevronsUpDown, Search } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowWeight } from "../Select/optionRowInk.js";
+import { keyboardRingShadow } from "../Select/selectKeyboardRing.js";
+import { selectRowDescriptionInk, selectRowInk } from "../Select/selectRowInk.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+import ToolTip from "../ToolTip/ToolTip.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const sizeMap = {
-    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatarH: "36px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatarH: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
+const MD_QUERY = "(min-width: 48em)";
 const Avatar = ({ org, boxSize, fontSize, }) => {
     const { colors } = useCustomTheme();
     if (org.logoUrl) {
         return (_jsx(Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0 }));
     }
     const fill = avatarColor(org.name, chartMode(colors));
-    return (_jsx(Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: onFilled(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700, children: orgInitial(org.name) }));
+    return (_jsx(Flex, { "aria-hidden": "true", "data-initials": orgInitial(org.name), _before: { content: "attr(data-initials)" }, align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: 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, }) => {
-    var _a;
+/** Session-scoped organization switcher: a trigger plus searchable popover that reports the chosen org via `onChange`. */
+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, _c;
     const theme = useCustomTheme();
+    const isMd = useMatchMedia(MD_QUERY, true);
+    const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(theme.colors), [theme.colors]);
+    const keyboardRing = {
+        outline: "2px solid transparent",
+        boxShadow: keyboardRingShadow(rowBackgrounds.keyboardRing),
+    };
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const handlePopoverOpen = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const [query, setQuery] = useState("");
     const searchRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -63,52 +88,45 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    // boxborder[500], not raw gray[200]: this styles a real `<button>` (Flex as="button" below),
-    // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named surface up
-    // to `muted` (lightest); gray[200] fails there in dark mode.
+    // NOTE: boxborder[500] not gray[200] — this styles a real button, WCAG 1.4.11 needs >=3:1; gray[200] fails in dark.
     const triggerStyles = triggerVariant === "outline"
         ? { border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
-            ? { bg: theme.colors.gray[50] }
+            ? { bg: theme.colors.background[50] }
             : { bg: "transparent" };
-    // `gray[100]` hover on a "transparent" trigger reads against whatever's actually behind it —
-    // this control lives in a navbar-like shell, so `backgroundColor.light` is that surface. For a
-    // near-neutral brand (zinc) the two measured near-1.0: an invisible hover, same bug shape as
-    // NavigationBar's menu items.
+    // NOTE: hover reads against backgroundColor.light (the navbar shell) — for zinc the two measured near-1.0, invisible.
     const triggerHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const searchRule = isDarkCanvas(theme.colors.surfaceRaised)
+        ? raisedRule(theme.colors)
+        : theme.colors.gray[100];
     const handleSelect = (org) => {
         onClose();
         setQuery("");
         if (org.id !== value)
             onChange(org.id, org);
     };
-    return (_jsxs(Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
+    const avatarNode = selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) }));
+    const labelGap = s.px === 2 ? 8 : 10;
+    const squeezedWidth = `calc(${s.px * 8 + labelGap * 2 + 16}px + ${s.avatar})`;
+    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 = (_jsxs(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 && (_jsx(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 ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : avatarOnly ? (_jsx(Box, { as: ChevronDown, size: 12, color: theme.colors.textMuted, flexShrink: 0, "aria-hidden": "true" })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }));
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
-                // Chakra's PopoverContent baseStyle defaults bg to var(--popper-bg), which is hardcoded
-                // to colors.white and only repointed under Chakra's own `_dark` — dead code here since
-                // this app toggles dark mode by swapping the palette, not Chakra's colorMode. Without an
-                // explicit bg the panel always rendered white regardless of the active theme.
-                bg: theme.colors.backgroundColor.light, 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: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? (_jsx(ToolTip, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder, placement: "bottom", isDisabled: isOpen, children: _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: _jsx(PopoverTrigger, { children: trigger }) }) })) : (_jsx(PopoverTrigger, { children: trigger })), _jsx(PopoverContent, { "aria-label": ariaLabel, 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: "float", _focus: { outline: "none", boxShadow: "float" }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: searchRule, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(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);
                                             }
                                         }, borderRadius: "lg" })] }) })), _jsxs(Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
-                                    // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
-                                    // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
-                                    // backdrop until distinguishable, so handing it its own resting bg as the backdrop
-                                    // is enough to make hover read as a real state change on both active and inactive rows.
-                                    const rowHoverBg = isActive
-                                        ? resolveHoverTint(theme.colors.primary[50], theme.colors.primary[50])
-                                        : resolveHoverTint(theme.colors.gray[50], theme.colors.backgroundColor.light);
                                     return (_jsxs(Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
                                             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: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(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 && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: accentTextOnCanvas(theme.colors.primary, theme.colors.primary[50]), flexShrink: 0 }))] }, org.id));
-                                }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "calc(100% - 0.5rem)", mx: 1, textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: BACKGROUND_TRANSITION, _hover: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focus: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focusVisible: keyboardRing, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: optionRowWeight(isActive), color: selectRowInk(theme.colors, isActive), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: selectRowDescriptionInk(theme.colors), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 export default OrgSwitcher;