pixelize-design-library 2.4.2-beta.58 → 2.4.2-beta.59

package/dist/Components/SideBar/components/OtherApps.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const sidebarFocus_1 = require("../sidebarFocus");
 const OtherApps = ({ toggle, otherApps }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!otherApps || otherApps.length === 0)
@@ -12,7 +13,7 @@ const OtherApps = ({ toggle, otherApps }) => {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
     // Grid cell: icon on top, truncated label below (label hidden when collapsed).
-    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));

package/dist/Components/SideBar/components/PinnedSection.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { SidebarPinnedItem, SidebarPinnedLabels } from "../SideBarProps";
+export declare const DEFAULT_PINNED_LABEL = "Pinned";
+export declare const DEFAULT_PINNED_LIMIT = 5;
+type PinnedSectionProps = {
+    items: SidebarPinnedItem[];
+    label?: string;
+    limit?: number;
+    toggle: boolean;
+    overlay: boolean;
+    activeId?: string | number | null;
+    labels?: SidebarPinnedLabels;
+    onItemClick: (item: SidebarPinnedItem) => void;
+    onUnpin?: (item: SidebarPinnedItem) => void;
+};
+declare const PinnedSection: React.FC<PinnedSectionProps>;
+export default PinnedSection;

package/dist/Components/SideBar/components/PinnedSection.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PINNED_LIMIT = exports.DEFAULT_PINNED_LABEL = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const sidebarFocus_1 = require("../sidebarFocus");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const sidebarId_1 = require("../sidebarId");
+const sidebarScale_1 = require("../sidebarScale");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const MenuItemBox_1 = require("./MenuItemBox");
+exports.DEFAULT_PINNED_LABEL = "Pinned";
+exports.DEFAULT_PINNED_LIMIT = 5;
+const DEFAULT_LABELS = {
+    showMore: "Show {count} more",
+    showLess: "Show less",
+    unpin: "Unpin {title}",
+};
+const UNPIN_SIZE = "24px";
+const LADDER = { hover: "whiteAlpha.200", active: "whiteAlpha.300", activeHover: "whiteAlpha.400" };
+const VISUALLY_HIDDEN = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+const readBadge = (badge) => {
+    var _a;
+    const cfg = typeof badge === "object" && badge !== null ? badge : null;
+    const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    return { cfg, value };
+};
+const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = exports.DEFAULT_PINNED_LIMIT, toggle, overlay, activeId, labels, onItemClick, onUnpin, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const headingId = `pinned-${(0, sidebarId_1.sanitizeId)((0, react_1.useId)())}`;
+    const cap = Math.max(1, limit);
+    const rowHeight = overlay ? sidebarScale_1.SIDEBAR_ROW.overlayHeight : sidebarScale_1.SIDEBAR_ROW.height;
+    const activeIndex = activeId == null ? -1 : items.findIndex((i) => String(i.id) === String(activeId));
+    const [showAll, setShowAll] = (0, react_1.useState)(activeIndex >= cap);
+    (0, react_1.useEffect)(() => {
+        if (activeIndex >= cap)
+            setShowAll(true);
+    }, [activeIndex, cap]);
+    if (items.length === 0)
+        return null;
+    const hiddenCount = Math.max(0, items.length - cap);
+    const visible = showAll ? items : items.slice(0, cap);
+    const badgeSurface = (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]);
+    const unpinReplacesBadge = !!onUnpin && !overlay;
+    const renderBadge = (badge) => {
+        var _a, _b, _c;
+        const { cfg, value } = readBadge(badge);
+        if (value == null)
+            return null;
+        const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, (_a = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _a !== void 0 ? _a : "teal"), badgeSurface);
+        return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: (_b = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _b !== void 0 ? _b : "subtle", borderRadius: (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full", ...(unpinReplacesBadge
+                ? { _groupHover: { opacity: 0 }, _groupFocusWithin: { opacity: 0 } }
+                : {}), children: value }));
+    };
+    const renderRow = (item) => {
+        const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
+        const anchor = ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: rowHeight, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: "medium", borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: (e) => {
+                if (item.url && (0, MenuItemBox_1.isBrowserNavigationGesture)(e))
+                    return;
+                e.preventDefault();
+                onItemClick(item);
+            }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && readBadge(item.badge).value != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isActive ? activeAccent.label : theme.colors.white, fontWeight: isActive ? 600 : 500, _groupHover: isActive ? undefined : { color: theme.colors.white }, children: item.title }))] }), !toggle && renderBadge(item.badge)] }) }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "li", listStyleType: "none", position: "relative", "data-group": "", children: [toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.title, placement: "right", children: anchor })) : (anchor), onUnpin && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.unpin.replace("{title}", item.title), onClick: () => onUnpin(item), position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: UNPIN_SIZE, h: UNPIN_SIZE, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "lg", border: "none", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedIcon, opacity: overlay ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, _hover: {
+                        bg: LADDER.active,
+                        color: theme.colors.white,
+                    }, transition: "opacity 0.12s, background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.PinOff, fontSize: "sm" }) }))] }, String(item.id)));
+    };
+    const disclosureLabel = showAll
+        ? text.showLess
+        : text.showMore.replace("{count}", String(hiddenCount));
+    const disclosureButton = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: rowHeight, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: "medium", _hover: {
+            backgroundColor: LADDER.hover,
+            color: theme.colors.white,
+        }, transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: showAll ? lucide_react_1.ChevronUp : lucide_react_1.ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && (0, jsx_runtime_1.jsx)("span", { children: disclosureLabel })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", children: toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
+};
+exports.default = PinnedSection;

package/dist/Components/SideBar/sidebarFocus.d.ts

@@ -0,0 +1,23 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+type RailColors = Pick<PaletteProps, "focusRing" | "sidebar">;
+/** The ring is derived for the canvas; the rail is near-black in both modes, so it is re-settled against the rail. */
+export declare const sidebarFocusRing: (colors: RailColors, surface?: string) => {
+    focusRing: {
+        ring: string;
+        halo: string;
+    };
+};
+/** `focusVisibleStyles` for a control sitting on the rail (or on `surface`, e.g. the flyout). */
+export declare const sidebarFocusStyles: (colors: RailColors, surface?: string) => {
+    _focusVisible: {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+    };
+    "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible": {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+    };
+};
+export {};

package/dist/Components/SideBar/sidebarFocus.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarFocusStyles = exports.sidebarFocusRing = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const cache = new Map();
+/** The ring is derived for the canvas; the rail is near-black in both modes, so it is re-settled against the rail. */
+const sidebarFocusRing = (colors, surface = colors.sidebar.background[500]) => {
+    const key = `${colors.focusRing.ring}|${surface}`;
+    let tokens = cache.get(key);
+    if (!tokens) {
+        tokens = { ring: (0, outlineRung_1.liftToContrast)(colors.focusRing.ring, surface, outlineRung_1.AA_NON_TEXT), halo: surface };
+        cache.set(key, tokens);
+    }
+    return { focusRing: tokens };
+};
+exports.sidebarFocusRing = sidebarFocusRing;
+/** `focusVisibleStyles` for a control sitting on the rail (or on `surface`, e.g. the flyout). */
+const sidebarFocusStyles = (colors, surface) => (0, focusRing_styles_1.focusVisibleStyles)((0, exports.sidebarFocusRing)(colors, surface));
+exports.sidebarFocusStyles = sidebarFocusStyles;

package/dist/Components/StageProgress/StageProgress.js

@@ -32,12 +32,12 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     const total = stages.length;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), children: stages.map((stage, index) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: variant === "stepper" ? "ol" : undefined, m: variant === "stepper" ? 0 : undefined, listStyleType: variant === "stepper" ? "none" : undefined, display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), children: stages.map((stage, index) => {
             var _a;
             const state = stateFor(index);
             const stageDisabled = (_a = stage.isDisabled) !== null && _a !== void 0 ? _a : stage.disabled;
             if (variant === "stepper") {
-                return ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+                return ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, asListItem: true, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
             }
             return ((0, jsx_runtime_1.jsx)(StageItem_1.default, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
         }) }));

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -110,6 +110,8 @@ export interface StepperStageProps {
     rightDone: boolean;
     /** Only scrolls when this node's own state is "active" — a no-op otherwise. */
     scrollIntoViewWhenActive?: boolean;
+    /** Wraps the node in an `li` so a parent `ol` is a valid list; StageProgress sets it for variant="stepper". */
+    asListItem?: boolean;
 }
 /** Color set for one scheme's states, returned by resolveStagePalette (soft/strong/muted + text). */
 export interface StagePalette {

package/dist/Components/StageProgress/StepperStage.js

@@ -13,7 +13,7 @@ const sizeMap = {
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
     lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
 };
-const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, asListItem = false, }) => {
     const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
@@ -35,10 +35,13 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
     const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    const node = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
                             ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
                             : undefined, children: showCheck && state === "completed" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 2, px: 1, borderRadius: "sm", fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, transition: "background 0.18s ease, color 0.18s ease", _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
+    if (!asListItem)
+        return node;
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", display: "flex", flex: "1", minWidth: s.minW, flexShrink: 0, listStyleType: "none", children: node }));
 };
 exports.default = StepperStage;

package/dist/Components/WizardDialog/WizardDialog.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { WizardDialogProps, WizardProps } from "./WizardDialogProps";
+export { wizardTransition, firstInvalidStep, INITIAL_WIZARD_STATE } from "./wizardSteps";
+export type { WizardAction, WizardState, StepValidator } from "./wizardSteps";
+/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
+export declare const WizardDialog: React.FC<WizardDialogProps>;
+/** The same wizard inline, for a full-page flow rather than a modal. */
+export declare const Wizard: React.FC<WizardProps>;
+export default WizardDialog;

package/dist/Components/WizardDialog/WizardDialog.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = exports.WizardDialog = exports.INITIAL_WIZARD_STATE = exports.firstInvalidStep = exports.wizardTransition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const StageProgress_1 = __importDefault(require("../StageProgress/StageProgress"));
+const DescriptionList_1 = __importDefault(require("../DescriptionList/DescriptionList"));
+const useWizardFlow_1 = require("./useWizardFlow");
+var wizardSteps_1 = require("./wizardSteps");
+Object.defineProperty(exports, "wizardTransition", { enumerable: true, get: function () { return wizardSteps_1.wizardTransition; } });
+Object.defineProperty(exports, "firstInvalidStep", { enumerable: true, get: function () { return wizardSteps_1.firstInvalidStep; } });
+Object.defineProperty(exports, "INITIAL_WIZARD_STATE", { enumerable: true, get: function () { return wizardSteps_1.INITIAL_WIZARD_STATE; } });
+const DEFAULT_LABELS = {
+    back: "Back",
+    next: "Continue",
+    finish: "Finish",
+    cancel: "Cancel",
+    stepOf: (current, total) => `Step ${current} of ${total}`,
+    fixErrors: "Fix the following to continue",
+    review: "Review",
+};
+const WizardBody = ({ flow, steps, labels, testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const headingRef = (0, react_1.useRef)(null);
+    const previousStep = (0, react_1.useRef)(flow.step.id);
+    const reviewed = steps.filter((candidate) => candidate.summary !== undefined);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (previousStep.current === flow.step.id)
+            return;
+        previousStep.current = flow.step.id;
+        (_a = headingRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [flow.step.id]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, "data-step": flow.step.id, children: [(0, jsx_runtime_1.jsx)(StageProgress_1.default, { variant: "stepper", size: "sm", showCheck: true, stages: steps.map((candidate, index) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    isDisabled: index > flow.furthest,
+                })), value: flow.step.id, onChange: (_id, _stage, index) => flow.goto(index) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: labels.stepOf(flow.index + 1, steps.length) }), (0, jsx_runtime_1.jsx)(react_2.Heading, { ref: headingRef, tabIndex: -1, as: "h3", fontSize: "md", fontWeight: 600, color: colors.header[900], _focus: { outline: "none" }, children: flow.step.label })] }), flow.errors.length ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", role: "alert", "data-testid": "wizard-errors", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertTitle, { fontSize: "sm", children: labels.fixErrors }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { fontSize: "sm", children: (0, jsx_runtime_1.jsx)(react_2.UnorderedList, { mt: 1, children: flow.errors.map((message) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, { children: message }, message))) }) })] })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { children: flow.step.content }), flow.isLast && reviewed.length ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "wizard-review", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h4", fontSize: "sm", fontWeight: 600, mb: 2, color: colors.header[900], children: labels.review }), (0, jsx_runtime_1.jsx)(DescriptionList_1.default, { layout: "inline", columns: { base: 1 }, items: reviewed.map((candidate) => ({
+                            label: candidate.label,
+                            value: candidate.summary,
+                        })) })] })) : null] }));
+};
+const WizardFooter = ({ flow, labels, isFinishing, onCancel }) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, loadingText: labels.finish, "data-testid": "wizard-finish" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
+const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    const guardedClose = () => {
+        if (!isFinishing)
+            onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: guardedClose }) })] }));
+};
+exports.WizardDialog = WizardDialog;
+/** The same wizard inline, for a full-page flow rather than a modal. */
+const Wizard = ({ steps, onFinish, isFinishing = false, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: onCancel })] }));
+};
+exports.Wizard = Wizard;
+exports.default = exports.WizardDialog;

package/dist/Components/WizardDialog/WizardDialogProps.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+/** One step of a wizard: its stepper label, body, validation and review summary. */
+export type WizardStep = {
+    id: string;
+    /** Stepper label and the heading shown above the step content. */
+    label: string;
+    content: ReactNode;
+    /** Messages that block leaving this step; [] = valid. Must be pure (runs in the reducer). */
+    validate?: () => string[];
+    /** One line shown in the review on the last step; steps without it are not reviewed. */
+    summary?: ReactNode;
+};
+/** Visible strings; every key falls back to its English default. */
+export type WizardLabels = Partial<{
+    back: string;
+    next: string;
+    finish: string;
+    cancel: string;
+    stepOf: (current: number, total: number) => string;
+    fixErrors: string;
+    review: string;
+}>;
+/** Props for the modal wizard: Modal + stepper + per-step validation + review on the last step. */
+export interface WizardDialogProps {
+    isOpen: boolean;
+    /** Ignored while `isFinishing`. */
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    steps: WizardStep[];
+    /** Called after every step re-validates; a failing step is jumped to with its errors. */
+    onFinish: () => void;
+    /** Shows the Finish spinner and disables close, Esc, Back and Cancel. */
+    isFinishing?: boolean;
+    /** Controlled step; omit for uncontrolled (resets to the first step on close). */
+    stepId?: string;
+    /** Fires whenever the visible step changes, controlled or not. */
+    onStepChange?: (stepId: string) => void;
+    /** Modal width; default "3xl". */
+    size?: "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    labels?: WizardLabels;
+    "data-testid"?: string;
+}
+/** Same flow inline (a page section, not a modal) — for full-page wizards. */
+export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size"> {
+    /** Renders a Cancel button in the footer when provided. */
+    onCancel?: () => void;
+}

package/dist/Components/WizardDialog/WizardDialogProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/WizardDialog/useWizardFlow.d.ts

@@ -0,0 +1,22 @@
+import type { WizardStep } from "./WizardDialogProps";
+type FlowOptions = {
+    steps: WizardStep[];
+    stepId?: string;
+    onStepChange?: (stepId: string) => void;
+    onFinish: () => void;
+    resetWhen?: boolean;
+};
+export declare function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }: FlowOptions): {
+    index: number;
+    furthest: number;
+    errors: string[];
+    step: WizardStep;
+    isFirst: boolean;
+    isLast: boolean;
+    next: () => void;
+    back: () => void;
+    goto: (target: number) => void;
+    finish: () => void;
+};
+export type WizardFlow = ReturnType<typeof useWizardFlow>;
+export {};

package/dist/Components/WizardDialog/useWizardFlow.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWizardFlow = useWizardFlow;
+const react_1 = require("react");
+const wizardSteps_1 = require("./wizardSteps");
+function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }) {
+    const [state, setState] = (0, react_1.useState)(wizardSteps_1.INITIAL_WIZARD_STATE);
+    const validators = steps.map((step) => step.validate);
+    const controlledIndex = stepId === undefined ? -1 : steps.findIndex((s) => s.id === stepId);
+    const isControlled = stepId !== undefined;
+    const index = Math.min(isControlled ? Math.max(controlledIndex, 0) : state.index, Math.max(steps.length - 1, 0));
+    const furthest = Math.max(state.furthest, index);
+    (0, react_1.useEffect)(() => {
+        if (resetWhen)
+            setState(wizardSteps_1.INITIAL_WIZARD_STATE);
+    }, [resetWhen]);
+    const dispatch = (0, react_1.useCallback)((action) => {
+        const base = { ...state, index, furthest };
+        const next = (0, wizardSteps_1.wizardTransition)(base, action, validators);
+        setState(next);
+        if (next.index !== index)
+            onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(steps[next.index].id);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, index, furthest, steps, onStepChange]);
+    const finish = (0, react_1.useCallback)(() => {
+        const invalid = (0, wizardSteps_1.firstInvalidStep)(validators);
+        if (invalid) {
+            dispatch({ type: "fail", ...invalid });
+            return;
+        }
+        onFinish();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch, steps, onFinish]);
+    return {
+        index,
+        furthest,
+        errors: state.errors,
+        step: steps[index],
+        isFirst: index === 0,
+        isLast: index === steps.length - 1,
+        next: () => dispatch({ type: "next" }),
+        back: () => dispatch({ type: "back" }),
+        goto: (target) => dispatch({ type: "goto", index: target }),
+        finish,
+    };
+}

package/dist/Components/WizardDialog/wizardSteps.d.ts

@@ -0,0 +1,31 @@
+export type StepValidator = () => string[];
+/** Reducer state: current step, the furthest validly reached step, and the blocking messages. */
+export type WizardState = {
+    index: number;
+    /** Furthest step the user has validly reached; stages beyond it stay locked. */
+    furthest: number;
+    errors: string[];
+};
+/** Actions `wizardTransition` understands. */
+export type WizardAction = {
+    type: "next";
+} | {
+    type: "back";
+} | {
+    type: "goto";
+    index: number;
+} | {
+    type: "fail";
+    index: number;
+    errors: string[];
+} | {
+    type: "reset";
+};
+export declare const INITIAL_WIZARD_STATE: WizardState;
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+export declare function wizardTransition(state: WizardState, action: WizardAction, validators: (StepValidator | undefined)[]): WizardState;
+/** First step whose validator reports errors, or null when every step is valid. */
+export declare function firstInvalidStep(validators: (StepValidator | undefined)[]): {
+    index: number;
+    errors: string[];
+} | null;

package/dist/Components/WizardDialog/wizardSteps.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INITIAL_WIZARD_STATE = void 0;
+exports.wizardTransition = wizardTransition;
+exports.firstInvalidStep = firstInvalidStep;
+exports.INITIAL_WIZARD_STATE = { index: 0, furthest: 0, errors: [] };
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+function wizardTransition(state, action, validators) {
+    var _a, _b;
+    const last = validators.length - 1;
+    switch (action.type) {
+        case "next": {
+            const errors = (_b = (_a = validators[state.index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+            if (errors.length)
+                return { ...state, errors };
+            const index = Math.min(state.index + 1, last);
+            return { index, furthest: Math.max(state.furthest, index), errors: [] };
+        }
+        case "back":
+            return { ...state, index: Math.max(state.index - 1, 0), errors: [] };
+        case "goto":
+            if (action.index < 0 || action.index > state.furthest)
+                return state;
+            return { ...state, index: action.index, errors: [] };
+        case "fail":
+            return { ...state, index: action.index, errors: action.errors };
+        case "reset":
+            return exports.INITIAL_WIZARD_STATE;
+    }
+}
+/** First step whose validator reports errors, or null when every step is valid. */
+function firstInvalidStep(validators) {
+    var _a, _b;
+    for (let index = 0; index < validators.length; index += 1) {
+        const errors = (_b = (_a = validators[index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+        if (errors.length)
+            return { index, errors };
+    }
+    return null;
+}

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

@@ -8,6 +8,7 @@ import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { liftToContrast, neutralStep, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import Kbd from "../Kbd/Kbd.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
@@ -190,7 +191,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "full", px: 1.5, py: 0.5, children: hint }))] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);

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

@@ -42,12 +42,14 @@ export const matchesShortcut = (event, shortcut, isApple = typeof navigator !==
 };
 const APPLE_SYMBOLS = { mod: "⌘", cmd: "⌘", meta: "⌘", ctrl: "⌃", shift: "⇧", alt: "⌥" };
 const OTHER_LABELS = { mod: "Ctrl", cmd: "Win", meta: "Win", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
-export const formatShortcut = (shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+const isAppleNow = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+export const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
     const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
     const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
-    const rendered = parts.map((p, i) => { var _a; return i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase()); });
-    return isApple ? rendered.join("") : rendered.join("+");
+    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.