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

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

@@ -50,30 +50,37 @@ export const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
     return parts.map((p, i) => { var _a; return (i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase())); });
 };
 export const formatShortcut = (shortcut, isApple = isAppleNow()) => shortcutKeys(shortcut, isApple).join(isApple ? "" : "+");
-/**
- * Derives every app's origin from the host the consumer is already served on, so one deployment
- * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
- */
-export const buildSuiteApps = (apps, { baseUrl, baseSubdomain }) => {
-    let base;
+const parseAbsolute = (option, raw) => {
     try {
-        base = new URL(baseUrl.trim());
+        return new URL(raw.trim());
     }
     catch {
-        throw new Error(`[AppSwitcher] buildSuiteApps: baseUrl ${JSON.stringify(baseUrl)} is not an absolute URL.`);
+        throw new Error(`[AppSwitcher] buildSuiteApps: ${option} ${JSON.stringify(raw)} is not an absolute URL.`);
     }
-    const labels = base.hostname.split(".");
+};
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+export const buildSuiteApps = (apps, { baseUrl, baseSubdomain, devFallbackBaseUrl }) => {
+    const base = parseAbsolute("baseUrl", baseUrl);
+    const hostHasLabel = base.hostname.split(".").includes(baseSubdomain);
+    const useFallback = !hostHasLabel && devFallbackBaseUrl !== undefined;
+    const source = useFallback ? parseAbsolute("devFallbackBaseUrl", devFallbackBaseUrl) : base;
+    const labels = source.hostname.split(".");
     const at = labels.indexOf(baseSubdomain);
     return apps.map(({ subdomain, url, ...app }) => {
         if (url)
             return { ...app, url: url.trim() };
+        if (useFallback && subdomain === baseSubdomain)
+            return { ...app, url: base.origin };
         // Without the label there is nothing to swap, and every app would silently share one origin.
         if (at === -1) {
             throw new Error(`[AppSwitcher] buildSuiteApps: ${JSON.stringify(baseSubdomain)} is not a label in ` +
-                `"${base.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
+                `"${source.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
                 `Give that app an explicit url, or pass a baseUrl that contains the label.`);
         }
-        const next = new URL(base.toString());
+        const next = new URL(source.toString());
         next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
         return { ...app, url: next.origin };
     });

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

@@ -0,0 +1,67 @@
+import { Building2, Headphones, LayoutGrid, Megaphone, Receipt, Users } from "lucide-react";
+import { buildSuiteApps } from "./AppSwitcherProps.js";
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+export const PIXELIZE_SUITE = [
+    {
+        id: "crm",
+        subdomain: "crm",
+        name: "CRM",
+        description: "Leads, deals and pipeline",
+        icon: LayoutGrid,
+        keywords: ["leads", "deals", "pipeline", "contacts", "sales"],
+    },
+    {
+        id: "account",
+        subdomain: "account",
+        name: "Account",
+        description: "Organization and members",
+        icon: Building2,
+        keywords: ["organization", "members", "roles", "settings", "profile"],
+    },
+    {
+        id: "tickets",
+        subdomain: "tickets",
+        name: "Tickets",
+        description: "Support requests and queues",
+        icon: Headphones,
+        keywords: ["support", "helpdesk", "issues", "sla"],
+    },
+    {
+        id: "billing",
+        subdomain: "billing",
+        name: "Billing",
+        description: "Invoices and plans",
+        icon: Receipt,
+        keywords: ["invoices", "plans", "payments", "subscription"],
+        preRelease: true,
+    },
+    {
+        id: "hrms",
+        subdomain: "hrms",
+        name: "HRMS",
+        description: "People, leave and payroll",
+        icon: Users,
+        keywords: ["people", "employees", "leave", "attendance", "payroll"],
+        preRelease: true,
+    },
+    {
+        id: "social",
+        subdomain: "social",
+        name: "Social",
+        description: "Campaigns and inbox",
+        icon: Megaphone,
+        keywords: ["campaigns", "posts", "inbox", "marketing"],
+        preRelease: true,
+    },
+];
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+export const resolveSuiteApps = ({ currentAppId, isProduction, urls, overrides, ...urlOptions }) => {
+    const sources = PIXELIZE_SUITE.flatMap((entry) => {
+        const { preRelease, ...app } = { ...entry, ...overrides === null || overrides === void 0 ? void 0 : overrides[entry.id] };
+        if (isProduction && preRelease && app.id !== currentAppId)
+            return [];
+        const url = urls === null || urls === void 0 ? void 0 : urls[app.id];
+        return [url ? { ...app, url } : app];
+    });
+    return buildSuiteApps(sources, urlOptions);
+};

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

@@ -7,7 +7,7 @@ import { FONT_SIZE_OPTIONS } from "../../Theme/provider/fontSize.js";
 import { lightPalettes } from "../../Theme/tokens/brands/index.js";
 import { CHROME_RULE, ruleInk } from "../../Theme/tokens/builders/outlineRung.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import SelectV2 from "../SelectV2/SelectV2.js";
+import Select from "../Select/Select.js";
 const FieldLabel = ({ children }) => {
     const { colors } = useCustomTheme();
     return (_jsx(Text, { fontSize: "sm", fontWeight: 500, color: colors.textMuted, mb: 2, children: children }));
@@ -24,11 +24,11 @@ export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeC
     const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
     const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
     const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
-    return (_jsxs(VStack, { align: "stretch", spacing: 4, children: [showBrand && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: themeLabel }), _jsx(SelectV2, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+    return (_jsxs(VStack, { align: "stretch", spacing: 4, children: [showBrand && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: themeLabel }), _jsx(Select, { native: false, options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
                             if (!option)
                                 return;
                             onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
-                        } })] })), showColorMode && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: colorModeLabel }), _jsx(Box, { "data-testid": "appearance-mode-switcher", children: _jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: fontSizeLabel }), _jsx(SelectV2, { options: FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        } })] })), showColorMode && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: colorModeLabel }), _jsx(Box, { "data-testid": "appearance-mode-switcher", children: _jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: fontSizeLabel }), _jsx(Select, { native: false, options: FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
                         // Each row previews the size it sets, so the list is self-explaining.
                         renderOption: (option) => (_jsx(Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
                             if (!option)

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

@@ -1,5 +1,5 @@
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
-const AVATAR_SCALE_KEYS = [
+export const AVATAR_SCALE_KEYS = [
     "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
 ];
 const hashSeed = (seed) => {
@@ -10,11 +10,11 @@ const hashSeed = (seed) => {
 };
 export const avatarScaleKeyFor = (seed) => AVATAR_SCALE_KEYS[hashSeed(seed) % AVATAR_SCALE_KEYS.length];
 // Always via resolveFilledSurface, never scale[500] + a guessed ink.
-export const resolveAvatarColorway = (seed, colors) => {
-    const scale = colors[avatarScaleKeyFor(seed)];
-    const { fill, color } = resolveFilledSurface(scale, colors);
+export const avatarColorwayFor = (key, colors) => {
+    const { fill, color } = resolveFilledSurface(colors[key], colors);
     return { bg: fill, color };
 };
+export const resolveAvatarColorway = (seed, colors) => avatarColorwayFor(avatarScaleKeyFor(seed), colors);
 export const initialsFor = (name) => {
     const words = name.trim().split(/\s+/).filter(Boolean);
     if (words.length === 0)

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

@@ -5,6 +5,8 @@ import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { MOTION_OK_QUERY, reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { BUTTON_SIZES, DEFAULT_CONTROL_SIZE, MOTION_PRESS_SCALE, transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
 const BUTTON_TRANSITION = [
     transitionFor(["background-color", "border-color", "color", "box-shadow", "filter"]),
     transitionFor(["transform"], "fast", "out"),
@@ -24,6 +26,7 @@ const controlSize = (size) => {
 // NOTE: a bare button sits on the canvas, a card or an overlay; dark overlays are the hardest plane.
 const onCanvasText = (theme, colorScheme) => accentTextOnPlanes(theme.colors[colorScheme], [
     theme.colors.backgroundColor.main,
+    theme.colors.backgroundColor.base,
     theme.colors.background[50],
     theme.colors.surfaceRaised,
 ]);
@@ -72,7 +75,7 @@ export const Button = {
         transition: BUTTON_TRANSITION,
         ...reducedMotionSx(),
         _disabled: {
-            opacity: 0.6,
+            opacity: DISABLED_OPACITY,
             cursor: "not-allowed",
         },
         ...focusRing(theme),
@@ -111,7 +114,7 @@ export const Button = {
         outline: ({ theme, colorScheme = "primary" }) => {
             const ink = onCanvasText(theme, colorScheme);
             return {
-                border: "0.0625rem solid",
+                border: `${BORDER_WIDTHS.hairline} solid`,
                 borderColor: ink,
                 color: ink,
                 bg: "transparent",

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -5,6 +5,8 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
@@ -73,7 +75,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     fontSize: "xs-plus",
                                     fontWeight: 500,
                                     color: theme.colors.text[700],
-                                    transition: "background 0.12s",
+                                    transition: BACKGROUND_TRANSITION,
                                     "& svg": { width: "16px", height: "16px" },
                                     ...(divider
                                         ? {

package/dist/esm/Components/CalendarGrid/CalendarGrid.js

@@ -4,10 +4,12 @@ import { Box, Flex, Grid, Text } from "@chakra-ui/react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import Button from "../Button/Button.js";
 import Skeletons from "../Skeletons/Skeletons.js";
+import VisuallyHidden from "../VisuallyHidden/VisuallyHidden.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { focusVisibleStyles, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
 import { dayKey, eventsOnDay, formatFullDate, formatTitle, isNavKey, isSameDay, isWeekend, layoutWeek, moveFocus, shiftAnchor, startOfDay, visibleWeeks, weekdayLabels, } from "./calendarMath.js";
+import { isActivationKey } from "../Common/activationKey.js";
 const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
 const DEFAULT_LABELS = {
     today: "Today",
@@ -113,7 +115,7 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
                 onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(next);
             return;
         }
-        if ((e.key === "Enter" || e.key === " ") && onDateChange) {
+        if (isActivationKey(e) && onDateChange) {
             e.preventDefault();
             onDateChange(cellDate);
         }
@@ -156,9 +158,9 @@ const CalendarGrid = ({ view, date, events, onViewChange, onDateChange, onEventC
                     cellRefs.current.set(key, el);
                 else
                     cellRefs.current.delete(key);
-            }, "data-date": key, "aria-label": label, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
+            }, "data-date": key, "aria-current": isToday ? "date" : undefined, tabIndex: active ? 0 : -1, onFocus: () => setFocusedKey(key), onKeyDown: (e) => handleCellKeyDown(e, day), position: "relative", minH: MIN_CELL_HEIGHT[view], p: 1, bg: surface, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, outline: "none", _focusVisible: {
                 boxShadow: insetFocusRingShadow(colors),
-            }, children: [_jsx(Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "xs-plus", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), body] }, key));
+            }, children: [_jsx(Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: "1.5rem", h: "1.5rem", px: 1, borderRadius: "full", fontSize: "xs-plus", fontWeight: isToday ? 700 : 500, color: isToday ? colors.accentText : inMonth ? colors.header[900] : colors.textMuted, boxShadow: isToday ? `inset 0 0 0 1.5px ${colors.accentText}` : undefined, "aria-hidden": true, children: day.getDate() }), _jsx(VisuallyHidden, { position: "absolute", children: label }), body] }, key));
     };
     return (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", justify: "space-between", wrap: "wrap", gap: 2, mb: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [onDateChange ? (_jsxs(_Fragment, { children: [_jsx(Button, { label: text.today, size: "sm", variant: "outline", onClick: () => onDateChange(startOfDay(new Date())) }), _jsx(Button, { "aria-label": text.previous, size: "sm", variant: "ghost", leftIcon: _jsx(ChevronLeft, { size: 16, "aria-hidden": true }), onClick: () => onDateChange(shiftAnchor(view, anchor, -1)) }), _jsx(Button, { "aria-label": text.next, size: "sm", variant: "ghost", leftIcon: _jsx(ChevronRight, { size: 16, "aria-hidden": true }), onClick: () => onDateChange(shiftAnchor(view, anchor, 1)) })] })) : null, _jsx(Text, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title })] }), onViewChange ? (_jsx(Flex, { role: "group", "aria-label": text[view], gap: 1, children: VIEWS.map((v) => (_jsx(Button, { label: text[v], size: "sm", variant: v === view ? "solid" : "outline", "aria-pressed": v === view, onClick: () => onViewChange(v) }, v))) })) : null] }), _jsx(Box, { overflowX: "auto", children: _jsxs(Box, { role: "grid", "aria-label": title, "aria-busy": isLoading || undefined, "data-view": view, minW: view === "day" ? undefined : "42rem", borderTop: "1px solid", borderLeft: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: [_jsx(Grid, { role: "row", templateColumns: template, children: headerDays.map((i) => (_jsx(Box, { role: "columnheader", "aria-label": weekdayLong[i], px: 2, py: 1, fontSize: "xs", fontWeight: 600, color: colors.textMuted, bg: colors.backgroundColor.main, borderRight: "1px solid", borderBottom: "1px solid", borderColor: border, children: weekdayShort[i] }, i))) }), weeks.map((week, weekIndex) => {
                             const layout = layoutWeek(week, shownEvents, maxLanes);

package/dist/esm/Components/Card/Card.js

@@ -10,6 +10,7 @@ const PADDING_VALUES = {
     md: "1rem 1.25rem",
     lg: "1.25rem 1.5rem",
 };
+/** Themed card; `header` and `footer` render outside the body, `padding` sets density. */
 const Card = forwardRef(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, padding, ...rest }, ref) {
     const cardProps = { ...rest };
     delete cardProps.dividercolor;

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

@@ -3,6 +3,8 @@ import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import { fieldHoverBorder } from "../Common/fieldStyles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION = transitionFor(["background", "border-color", "box-shadow"]);
 // One fill rule for every colour scheme, via resolveFilledSurface — was a flat [600].
 export const Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
@@ -19,7 +21,7 @@ export const Checkbox = {
                 borderWidth: "1px",
                 borderRadius: "base",
                 borderColor: fieldHoverBorder(theme.colors),
-                transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
+                transition: BACKGROUND_BORDER_COLOR_BOX_SHADOW_TRANSITION,
                 _invalid: {
                     borderColor: theme.colors.semanticText.error,
                 },

package/dist/esm/Components/CheckoutKit/selectable.js

@@ -3,25 +3,28 @@ import { Children, createContext, isValidElement, useContext, useMemo, useState
 import { Box, Flex } from "@chakra-ui/react";
 import { Check } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { tonalHover } from "./tonalHover.js";
+import { isActivationKey } from "../Common/activationKey.js";
 const GroupContext = createContext(null);
 export const useSelectableGroup = () => useContext(GroupContext);
 const firstEnabledValue = (children) => {
     for (const child of Children.toArray(children)) {
         if (!isValidElement(child))
             continue;
-        const { value, disabled } = child.props;
-        if (typeof value === "string" && !disabled)
+        const { value, disabled, isDisabled } = child.props;
+        if (typeof value === "string" && !disabled && !isDisabled)
             return value;
     }
     return undefined;
 };
 const STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
 /** Radiogroup with a roving tab stop; arrows move focus and selection together, like native radios. */
-export const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
+export const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, columns = 1, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, }) => {
     const [inner, setInner] = useState(defaultValue);
     const current = value !== null && value !== void 0 ? value : inner;
     const state = useMemo(() => ({
@@ -51,16 +54,16 @@ export const SelectableGroup = ({ value, defaultValue, onValueChange, gap = 3, c
         if (next !== null)
             state.select(next);
     };
-    return (_jsx(GroupContext.Provider, { value: state, children: _jsx(Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
+    return (_jsx(GroupContext.Provider, { value: state, children: _jsx(Flex, { role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: "column", gap: gap, ...(columns > 1 ? { display: "grid", gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : {}), onKeyDown: onKeyDown, "data-testid": testId, children: children }) }));
 };
 /** Tonal card surface; selection is a 2px ink ring plus a check, never colour alone. */
 export const selectableSurface = (colors, { selected, disabled, interactive, ringed }) => ({
     bg: colors.background[100],
     borderRadius: "2xl",
     boxShadow: selected ? `inset 0 0 0 2px ${colors.header[900]}` : "none",
-    opacity: disabled ? 0.6 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     transition: transitionFor(["background-color", "box-shadow"]),
-    _hover: interactive && !selected && !disabled ? { bg: colors.background[200] } : undefined,
+    _hover: interactive && !selected && !disabled ? { bg: tonalHover(colors) } : undefined,
     sx: { ...(ringed ? focusVisibleRing(colors) : {}), ...reducedMotionSx() },
 });
 /** The 20px circle that carries selection state beside the text. */
@@ -93,7 +96,7 @@ export const useSelectable = ({ value, selected, disabled, onSelect, }) => {
         onKeyDown: (event) => {
             if (event.target !== event.currentTarget)
                 return;
-            if (event.key === " " || event.key === "Enter") {
+            if (isActivationKey(event)) {
                 event.preventDefault();
                 choose();
             }

package/dist/esm/Components/CheckoutKit/tonalHover.js

@@ -0,0 +1,2 @@
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+export const tonalHover = (colors, rest = colors.background[100], fill = colors.background[200]) => bandOn(fill, rest);

package/dist/esm/Components/ChoiceCard/ChoiceCard.js

@@ -3,7 +3,8 @@ import { useId } from "react";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
-const ChoiceCard = ({ value, label, description, icon, disabled = false, "data-testid": testId }) => {
+const ChoiceCard = ({ value, label, description, icon, disabled: disabledProp = false, isDisabled = false, "data-testid": testId }) => {
+    const disabled = disabledProp || isDisabled;
     const { colors } = useCustomTheme();
     const uid = useId();
     const labelId = `${uid}-label`;

package/dist/esm/Components/Common/FormLabel.js

@@ -3,15 +3,16 @@ import { Box, Icon } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { InfoIcon } from "lucide-react";
 import ToolTip from "../ToolTip/ToolTip.js";
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
 /** The one field-label look (13px / 500 / `text[700]`); `Label` and `TextLabel` both read it. */
 export const fieldLabelStyles = (colors) => ({
     color: colors.text[700],
     fontWeight: 500,
-    fontSize: "0.8125rem",
+    fontSize: fontSizes["xs-plus"],
     lineHeight: "1.2",
     mb: "0.375rem",
 });
-/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>` — not a substitute for `Label` (Common/Label.tsx), which always renders a `FormLabel`. */
+/** Renders a real `<label htmlFor>` only when `id` is given, else a `<span>`. */
 export const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
     const theme = useCustomTheme();
     const clampStyles = clampLines ? {
@@ -30,7 +31,7 @@ export const TextLabel = ({ label, id, isRequired = false, isInformation = false
         mb: inline ? 0 : base.mb,
         fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : base.fontSize,
     };
-    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { "aria-hidden": "true", style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
     // NOTE: real <label> only with a control id — Checkbox/Radio render this inline inside their own <label>.
     return id ? (_jsx(Box, { as: "label", htmlFor: id, ...wrapperStyles, children: content })) : (_jsx(Box, { as: "span", ...wrapperStyles, children: content }));
 };

package/dist/esm/Components/Common/HelperText.js

@@ -6,8 +6,7 @@ const UnregisteredHelperText = ({ helperText, id, style }) => {
     const styles = useFormControlStyles();
     return (_jsx(chakra.div, { id: id, ...style, __css: styles.helperText, className: "chakra-form__helper-text", children: helperText }));
 };
-/** `id` is optional — pass one to own aria-describedby; omitted, a FormControl wires its own. */
-/** Renders `helperText` unconditionally; prefer `FieldMessage`, which swaps it for the error. */
+/** Always renders `helperText`; prefer `FieldMessage`, which swaps it for the error. */
 const HelperText = ({ helperText, id }) => {
     const theme = useCustomTheme();
     const field = useFormControlContext();

package/dist/esm/Components/Common/activationKey.js

@@ -0,0 +1,7 @@
+export const isActivationKey = (event) => event.key === "Enter" || event.key === " ";
+export const onActivationKey = (activate) => (event) => {
+    if (!isActivationKey(event))
+        return;
+    event.preventDefault();
+    activate(event);
+};

package/dist/esm/Components/Common/fieldMessageStyles.js

@@ -1,8 +1,9 @@
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
 export const FIELD_MESSAGE_GAP = "0.25rem";
 /** Shared type for helper and error text, so switching between them never shifts the row. */
 export const fieldMessageStyles = (colors) => ({
     mt: FIELD_MESSAGE_GAP,
-    fontSize: "0.75rem",
+    fontSize: fontSizes.xs,
     lineHeight: "1.125rem",
     color: colors.textMuted,
 });

package/dist/esm/Components/Common/findSlot.js

@@ -0,0 +1,17 @@
+import React from "react";
+const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
+// NOTE: matches by element type through nested Fragments, so `<>{cond && <Footer />}</>` is not dropped.
+export const findSlot = (children, slot) => {
+    for (const child of React.Children.toArray(children)) {
+        if (!isReactElement(child))
+            continue;
+        if (child.type === slot)
+            return child;
+        if (child.type === React.Fragment) {
+            const nested = findSlot(child.props.children, slot);
+            if (nested)
+                return nested;
+        }
+    }
+    return undefined;
+};

package/dist/esm/Components/Common/surfaceFocusRing.js

@@ -0,0 +1,3 @@
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+// NOTE: for chrome painted on a fixed dark surface, where the palette's focusRing pair is tuned for the page canvas instead.
+export const surfaceFocusRing = (surface, ring) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${surface}, 0 0 0 ${FOCUS_RING_WIDTH}px ${ring}`;

package/dist/esm/Components/ConfirmDialog/ConfirmDialog.js

@@ -1,19 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Box, Flex, HStack, VStack, Text, } from "@chakra-ui/react";
 import { AlertTriangle } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
-const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
+const ConfirmDialog = ({ isOpen, onClose, onConfirm, title, children, icon, iconBg, iconColor, entityName, entityKind, dependents, consequence, alternative, isConfirmDisabled: isConfirmHeld = false, tone = "destructive", cancelLabel = "Cancel", confirmLabel = "Confirm", confirmIcon, isConfirmLoading = false, disableCancelWhilePending = true, confirmationText, confirmationLabel, bodyLayout = "flush", bodySpacing = 4, actionsPt = 0, focusCancelOnOpen = true, isCentered = true, closeOnEsc, closeOnOverlayClick, }) => {
     const { colors } = useCustomTheme();
     const cancelRef = useRef(null);
     const [typedText, setTypedText] = useState("");
     const requiresTypedConfirmation = confirmationText !== undefined;
-    const isConfirmDisabled = isConfirmLoading || (requiresTypedConfirmation && typedText !== confirmationText);
-    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && isConfirmLoading }), _jsx(Button, { label: confirmLabel, onClick: onConfirm, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
-    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (children);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg, color: iconColor, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: title })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
+    const isAlternativeLoading = (alternative === null || alternative === void 0 ? void 0 : alternative.isLoading) === true;
+    const isConfirmDisabled = isConfirmLoading ||
+        isAlternativeLoading ||
+        isConfirmHeld ||
+        (requiresTypedConfirmation && typedText !== confirmationText);
+    const swatch = resolveSoftTone(colors, tone === "destructive" ? colors.semantic.error : colors.primary, colors.surfaceRaised);
+    const isEntityPrompt = entityName !== undefined;
+    const resolvedTitle = title !== null && title !== void 0 ? title : `Delete ${entityKind ? `${entityKind} ` : ""}"${entityName}"?`;
+    const dependentFacts = dependents ? dependents.filter(Boolean) : [];
+    const resolvedConsequence = consequence !== null && consequence !== void 0 ? consequence : (isEntityPrompt ? "This cannot be undone." : undefined);
+    const hasFacts = dependentFacts.length > 0 || resolvedConsequence !== undefined || (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined;
+    const actions = (_jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: actionsPt, children: [_jsx(Button, { ref: cancelRef, label: cancelLabel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", isDisabled: disableCancelWhilePending && (isConfirmLoading || isAlternativeLoading) }), alternative && (_jsx(Button, { label: alternative.label, onClick: alternative.onSelect, colorScheme: "primary", size: "sm", isLoading: alternative.isLoading, loadingText: alternative.label, isDisabled: isConfirmLoading })), _jsx(Button, { label: confirmLabel, onClick: onConfirm, variant: alternative ? "outline" : undefined, colorScheme: tone === "destructive" ? "red" : "primary", size: "sm", isLoading: isConfirmLoading, isDisabled: isConfirmDisabled, leftIcon: confirmIcon })] }));
+    const facts = hasFacts && (_jsxs(VStack, { spacing: 3, align: "stretch", mt: bodyLayout === "flush" && children ? 3 : 0, mb: bodyLayout === "flush" ? 4 : 0, children: [dependentFacts.length > 0 && (_jsx(Text, { fontSize: "sm", fontWeight: 500, children: dependentFacts.join(" · ") })), resolvedConsequence !== undefined && (_jsx(Box, { fontSize: "sm", color: colors.textMuted, children: resolvedConsequence })), (alternative === null || alternative === void 0 ? void 0 : alternative.description) !== undefined && (_jsx(Box, { fontSize: "sm", p: 3, borderRadius: "md", border: "1px solid", borderColor: raisedRule(colors), children: alternative.description }))] }));
+    const body = requiresTypedConfirmation ? (_jsxs(_Fragment, { children: [children, facts, _jsx(TextInput, { label: confirmationLabel, value: typedText, onChange: (event) => setTypedText(event.target.value) })] })) : (_jsxs(_Fragment, { children: [children, facts] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: isCentered, closeOnEsc: closeOnEsc, closeOnOverlayClick: closeOnOverlayClick, initialFocusRef: focusCancelOnOpen ? cancelRef : undefined, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: raisedRule(colors), display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: iconBg !== null && iconBg !== void 0 ? iconBg : swatch.bg, color: iconColor !== null && iconColor !== void 0 ? iconColor : swatch.fg, children: icon !== null && icon !== void 0 ? icon : _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: resolvedTitle })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: bodyLayout === "stack" ? (_jsxs(VStack, { spacing: bodySpacing, align: "stretch", children: [body, actions] })) : (_jsxs(_Fragment, { children: [body, actions] })) })] })] }));
 };
 export default ConfirmDialog;

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -9,6 +9,8 @@ import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { transitionFor } from "../../Theme/tokens/primitives/index.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 /** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, onCopyError, }) => {
     const theme = useCustomTheme();
@@ -36,12 +38,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     if (variant === "menu-item") {
         const hoverAccent = accentTextOnCanvas(theme.colors.primary, rowBackgrounds.active);
         const hoverSuccess = liftToContrast(theme.colors.semantic.success[500], rowBackgrounds.active, AA_NORMAL_TEXT);
-        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, _focusVisible: focusVisibleRing(theme.colors), onClick: handleCopy, onKeyDown: (e) => {
-                        if (e.key !== "Enter" && e.key !== " ")
-                            return;
-                        e.preventDefault();
-                        handleCopy(e);
-                    }, children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { role: "button", tabIndex: 0, align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: BACKGROUND_TRANSITION, _hover: { bg: rowBackgrounds.active }, _focusVisible: focusVisibleRing(theme.colors), onClick: handleCopy, onKeyDown: onActivationKey(handleCopy), children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "sm", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }), announcement] }));
     }
     if (variant === "button") {
         return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 

package/dist/esm/Components/CouponField/CouponField.js

@@ -3,6 +3,7 @@ import { useId, useState } from "react";
 import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
 import { BadgeCheck, ChevronDown, Ticket } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.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";
@@ -11,6 +12,7 @@ import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js"
 import { formatPrice } from "../../Utils/price.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
 const DEFAULT_LABELS = {
     prompt: "Have a coupon?",
     inputLabel: "Coupon code",
@@ -26,6 +28,7 @@ const normalise = (raw) => raw.replace(/\s+/g, "").toUpperCase();
 /** Coupon entry that stays out of the way: a quiet prompt row, a field with tap-to-apply offers, then an applied state with the saving. */
 const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply, onRemove, suggestions, value, defaultValue = "", onValueChange, expanded, defaultExpanded = false, onExpandedChange, currency, locale, labels, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
+    const hoverFill = tonalHover(colors);
     const uid = useId();
     const panelId = `${uid}-panel`;
     const copy = { ...DEFAULT_LABELS, ...labels };
@@ -60,9 +63,9 @@ const CouponField = ({ status = "idle", appliedCode, savedAmount, error, onApply
     if (status === "applied" && appliedCode) {
         return (_jsxs(Flex, { align: "center", gap: 3, p: 3, pl: 4, borderRadius: "2xl", bg: colors.background[100], "data-testid": testId, "data-status": "applied", children: [_jsx(Flex, { as: "span", align: "center", justify: "center", boxSize: 8, flexShrink: 0, borderRadius: "full", bg: success.bg, color: success.fg, children: _jsx(BadgeCheck, { size: 16, "aria-hidden": true }) }), _jsxs(Box, { flex: 1, minW: 0, role: "status", children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], noOfLines: 1, children: copy.applied(appliedCode) }), savedAmount !== undefined && savedAmount > 0 && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", fontWeight: 600, lineHeight: 1.4, color: colors.semanticText.success, sx: NUMERIC_TEXT, children: copy.saved(formatPrice(savedAmount, { currency, locale })) }))] }), _jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} coupon ${appliedCode}`, children: copy.remove })] }));
     }
-    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [_jsxs(Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "2xl", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Ticket, { size: 18, "aria-hidden": true }), _jsx(Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), _jsx(Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: transitionFor(["transform"]), sx: reducedMotionSx({ transform: open ? "rotate(180deg)" : "none" }), children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [_jsxs(Flex, { gap: 2, align: "flex-start", children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(TextInput, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), _jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => (_jsx(Box, { as: "li", children: _jsxs(Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
+    return (_jsxs(Flex, { direction: "column", gap: 3, "data-testid": testId, "data-status": status, children: [_jsxs(Box, { as: "button", type: "button", "aria-expanded": open, "aria-controls": panelId, disabled: applying || status === "error", onClick: () => setOpen(!open), display: "flex", alignItems: "center", gap: 3, w: "100%", minH: "3rem", px: 4, borderRadius: "2xl", bg: colors.background[100], color: colors.header[900], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Ticket, { size: 18, "aria-hidden": true }), _jsx(Text, { as: "span", flex: 1, fontSize: "sm", fontWeight: 600, children: copy.prompt }), _jsx(Box, { as: "span", display: "inline-flex", "aria-hidden": true, transform: open ? "rotate(180deg)" : undefined, transition: transitionFor(["transform"]), sx: reducedMotionSx({ transform: open ? "rotate(180deg)" : "none" }), children: _jsx(ChevronDown, { size: 16 }) })] }), _jsxs(Box, { id: panelId, hidden: !open, display: open ? "block" : "none", onKeyDown: onKeyDown, children: [_jsxs(Flex, { gap: 2, align: "flex-start", children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(TextInput, { size: "lg", variant: "filled", "aria-label": copy.inputLabel, placeholder: copy.placeholder, value: text, onChange: (event) => setText(normalise(event.target.value)), error: status === "error", errorMessage: status === "error" ? error : undefined, isDisabled: applying, autoComplete: "off", autoCapitalize: "characters", spellCheck: false }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", size: "lg", isLoading: applying, isDisabled: !normalise(text), onClick: () => submit(text), children: copy.apply })] }), suggestions && suggestions.length > 0 && (_jsxs(Box, { mt: 4, children: [_jsx(Text, { as: "p", fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: copy.suggestionsTitle }), _jsx(Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: suggestions.map((s) => (_jsx(Box, { as: "li", children: _jsxs(Box, { as: "button", type: "button", disabled: applying, "aria-label": `${copy.applySuggestion(s.code)}: ${s.title}`, onClick: () => {
                                             setText(s.code);
                                             submit(s.code);
-                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "xl", bg: colors.background[100], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: colors.background[200] }, _disabled: { cursor: "not-allowed", opacity: 0.6 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "lg", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), _jsxs(Box, { as: "span", flex: 1, minW: 0, children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), _jsx(Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), _jsx(VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
+                                        }, display: "flex", alignItems: "center", gap: 3, w: "100%", p: 3, borderRadius: "xl", bg: colors.background[100], textAlign: "left", transition: transitionFor(["background-color"]), _hover: { bg: hoverFill }, _disabled: { cursor: "not-allowed", opacity: DISABLED_OPACITY }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: [_jsx(Text, { as: "span", flexShrink: 0, px: 2, py: 1, borderRadius: "lg", bg: colors.background[200], fontSize: "xs", fontWeight: 700, letterSpacing: "0.04em", color: colors.header[900], children: s.code }), _jsxs(Box, { as: "span", flex: 1, minW: 0, children: [_jsx(Text, { as: "span", display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: s.title }), s.detail && (_jsx(Text, { as: "span", display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: s.detail }))] }), _jsx(Text, { as: "span", "aria-hidden": true, fontSize: "sm", fontWeight: 600, color: colors.accentText, children: copy.apply })] }) }, s.code))) })] }))] }), _jsx(VisuallyHidden, { role: "status", children: applying ? `${copy.apply}…` : "" })] }));
 };
 export default CouponField;