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

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

@@ -1,6 +1,6 @@
 import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 // NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
@@ -21,6 +21,5 @@ export const getAccordionHoverColors = (colors, isDark) => {
 export const accordionFocusRing = (colors) => ({
     outline: "2px solid transparent",
     outlineOffset: "-2px",
-    boxShadow: `inset 0 0 0 ${FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
-        `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`,
+    boxShadow: insetFocusRingShadow(colors),
 });

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
-import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
 import LazyReactApexChart from "../LazyReactApexChart.js";
 import ApexChartFallback from "../ApexChartFallback.js";
@@ -92,6 +92,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
             zoom: { enabled: !isSmall },
             toolbar: { show: showToolbar },
         }),
+        theme: { mode: chartMode(palette) },
         stroke: { curve: "smooth", width: 2, lineCap: "round" },
         colors: resolvedLineColors,
         xaxis: {

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

@@ -5,6 +5,7 @@ import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartT
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
 import LazyReactApexChart from "../LazyReactApexChart.js";
 import ApexChartFallback from "../ApexChartFallback.js";
+import { pieImageTexture } from "./pieImageTexture.js";
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -14,7 +15,7 @@ const getValidLegendPosition = (position) => {
     return "bottom";
 };
 /** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
-const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", images, }) => {
     var _a;
     const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
@@ -31,6 +32,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             ? "outside"
             : "none"
         : labelPlacement;
+    const sliceCount = data.length;
     const labelsOn = showDataLabels && placement !== "none";
     const outside = placement === "outside";
     const validLegendPosition = getValidLegendPosition(legendPosition);
@@ -87,10 +89,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                     fill: {
                         type: "image",
                         image: {
-                            src: [
-                                "https://i.imgur.com/UM3mrju.jpg",
-                                "https://i.imgur.com/NpPOqQq.jpg",
-                            ],
+                            src: images !== null && images !== void 0 ? images : Array.from({ length: sliceCount }, (_, i) => pieImageTexture(seriesColors[i % seriesColors.length], gap)),
                         },
                     },
                 };
@@ -180,6 +179,8 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         totalLabel,
         ink.muted,
         ink.text,
+        images,
+        sliceCount,
     ]);
     return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };

package/dist/esm/Components/Apexcharts/ApexPieChart/pieImageTexture.js

@@ -0,0 +1,10 @@
+const SIZE = 400;
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+export function pieImageTexture(color, stripe) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">` +
+        `<defs><pattern id="s" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">` +
+        `<rect width="10" height="24" fill="${stripe}" fill-opacity="0.28"/></pattern></defs>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="${color}"/>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="url(#s)"/></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}

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

@@ -12,6 +12,9 @@ import Kbd from "../Kbd/Kbd.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_BORDER_COLOR_TRANSITION = transitionFor(["background", "border-color"]);
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const COLUMNS = 2;
 const HEADING = "Your apps";
 const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
@@ -182,7 +185,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const currentSub = liftToContrast(theme.colors.textMuted, currentBg, AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
     const hint = shortcut && showShortcutHint ? formatShortcut(shortcut) : null;
-    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: BACKGROUND_BORDER_COLOR_TRANSITION, _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
                         if (!isOpen) {
                             if (e.key === "ArrowDown") {
                                 e.preventDefault();
@@ -191,7 +194,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);
@@ -229,7 +232,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                                                     borderEndStartRadius: "lg",
                                                     bg: currentBar,
                                                 }
-                                                : undefined, transition: "background 0.12s ease", _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(Text, { fontSize: s.name, fontWeight: 600, color: app.locked
+                                                : undefined, transition: BACKGROUND_TRANSITION, _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(Text, { fontSize: s.name, fontWeight: 600, color: app.locked
                                                                         ? theme.colors.textMuted
                                                                         : isCurrent
                                                                             ? currentName

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}`;