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

package/dist/esm/Components/SideBar/components/MenuItemBox.js

@@ -12,13 +12,14 @@ import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
 import { sanitizeId } from "../sidebarId.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
  * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
  * routed through the in-app handler.
  */
-const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+export const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
 const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, overlay = false, }) => {
     var _a, _b, _c, _d, _e;
     const theme = useCustomTheme();
@@ -86,6 +87,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         cursor: isBlocked ? "not-allowed" : "pointer",
         opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
+        sx: sidebarFocusStyles(theme.colors),
     };
     const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
                     // open={isOpen}
@@ -138,7 +140,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                 e.preventDefault();
                                 if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge

package/dist/esm/Components/SideBar/components/MenuPopoverContent.js

@@ -9,6 +9,7 @@ import { sidebarRowPeak } from "../../../Theme/tokens/builders/sidebarAccent.js"
 import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
 const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
@@ -26,7 +27,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         if (!isBlocked)
                             handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
                     }
-                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, children: [_jsx(Icon, { as: icon, fontSize: "md", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon }), _jsx(TruncatedTextWithTooltip, { fontWeight: 600, fontSize: SIDEBAR_ROW.fontSize, flex: "1", color: theme.colors.white, children: title }), (() => {
+                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, sx: hasSubMenu ? undefined : sidebarFocusStyles(theme.colors, theme.colors.sidebar.elevated), children: [_jsx(Icon, { as: icon, fontSize: "md", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon }), _jsx(TruncatedTextWithTooltip, { fontWeight: 600, fontSize: SIDEBAR_ROW.fontSize, flex: "1", color: theme.colors.white, children: title }), (() => {
                         var _a, _b, _c, _d;
                         const cfg = typeof badge === "object" && badge !== null
                             ? badge
@@ -50,7 +51,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     }, px: 2, h: SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                         bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors, theme.colors.sidebar.elevated), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Flex, Text, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
 const OtherApps = ({ toggle, otherApps }) => {
     const theme = useCustomTheme();
     if (!otherApps || otherApps.length === 0)
@@ -10,7 +11,7 @@ const OtherApps = ({ toggle, otherApps }) => {
         return (_jsx(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 : (_jsx(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) => (_jsxs(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 && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => (_jsxs(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: sidebarFocusStyles(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && (_jsx(Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Badge, Box, Flex, Icon } from "@chakra-ui/react";
+import { ChevronDown, ChevronUp, PinOff } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+import { sidebarRowPeak } from "../../../Theme/tokens/builders/sidebarAccent.js";
+import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
+import { getSidebarActiveAccent } from "../sidebarAccentColors.js";
+import { sanitizeId } from "../sidebarId.js";
+import { SIDEBAR_ROW } from "../sidebarScale.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import TruncatedTextWithTooltip from "./TextTruncation.js";
+import { isBrowserNavigationGesture } from "./MenuItemBox.js";
+export const DEFAULT_PINNED_LABEL = "Pinned";
+export const 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 = DEFAULT_PINNED_LABEL, limit = DEFAULT_PINNED_LIMIT, toggle, overlay, activeId, labels, onItemClick, onUnpin, }) => {
+    const theme = useCustomTheme();
+    const activeAccent = getSidebarActiveAccent(theme.colors);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const headingId = `pinned-${sanitizeId(useId())}`;
+    const cap = Math.max(1, limit);
+    const rowHeight = overlay ? SIDEBAR_ROW.overlayHeight : SIDEBAR_ROW.height;
+    const activeIndex = activeId == null ? -1 : items.findIndex((i) => String(i.id) === String(activeId));
+    const [showAll, setShowAll] = useState(activeIndex >= cap);
+    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 = 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 = resolveSoftTone(theme.colors, scaleFor(theme.colors, (_a = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _a !== void 0 ? _a : "teal"), badgeSurface);
+        return (_jsx(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 = (_jsx(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: sidebarFocusStyles(theme.colors), onClick: (e) => {
+                if (item.url && isBrowserNavigationGesture(e))
+                    return;
+                e.preventDefault();
+                onItemClick(item);
+            }, children: _jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(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 && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip, { fontSize: 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 (_jsxs(Box, { as: "li", listStyleType: "none", position: "relative", "data-group": "", children: [toggle ? (_jsx(ToolTip, { label: item.title, placement: "right", children: anchor })) : (anchor), onUnpin && !toggle && (_jsx(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: sidebarFocusStyles(theme.colors), children: _jsx(Icon, { as: PinOff, fontSize: "sm" }) }))] }, String(item.id)));
+    };
+    const disclosureLabel = showAll
+        ? text.showLess
+        : text.showMore.replace("{count}", String(hiddenCount));
+    const disclosureButton = (_jsxs(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: SIDEBAR_ROW.fontSize, fontWeight: "medium", _hover: {
+            backgroundColor: LADDER.hover,
+            color: theme.colors.white,
+        }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsx(Icon, { as: showAll ? ChevronUp : ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && _jsx("span", { children: disclosureLabel })] }));
+    return (_jsxs(Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [_jsx(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 }), _jsxs(Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && (_jsx(Box, { as: "li", listStyleType: "none", children: toggle ? (_jsx(ToolTip, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), _jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
+};
+export default PinnedSection;

package/dist/esm/Components/SideBar/sidebarFocus.js

@@ -0,0 +1,15 @@
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+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. */
+export const sidebarFocusRing = (colors, surface = colors.sidebar.background[500]) => {
+    const key = `${colors.focusRing.ring}|${surface}`;
+    let tokens = cache.get(key);
+    if (!tokens) {
+        tokens = { ring: liftToContrast(colors.focusRing.ring, surface, AA_NON_TEXT), halo: surface };
+        cache.set(key, tokens);
+    }
+    return { focusRing: tokens };
+};
+/** `focusVisibleStyles` for a control sitting on the rail (or on `surface`, e.g. the flyout). */
+export const sidebarFocusStyles = (colors, surface) => focusVisibleStyles(sidebarFocusRing(colors, surface));

package/dist/esm/Components/StageProgress/StageProgress.js

@@ -27,12 +27,12 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     const total = stages.length;
-    return (_jsx(Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: scrollbarStyles(theme.colors, "overlay"), children: stages.map((stage, index) => {
+    return (_jsx(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: 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 (_jsx(StepperStage, { 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 (_jsx(StepperStage, { 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 (_jsx(StageItem, { 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/esm/Components/StageProgress/StepperStage.js

@@ -11,7 +11,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 = useCustomTheme();
     const palette = resolveStagePalette(theme, colorScheme);
@@ -33,10 +33,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) => (_jsx(Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return (_jsxs(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 ? focusVisibleStyles(theme.colors) : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(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: transitionFor(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    const node = (_jsxs(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 ? focusVisibleStyles(theme.colors) : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(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: 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" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(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 (_jsx(Box, { as: "li", display: "flex", flex: "1", minWidth: s.minW, flexShrink: 0, listStyleType: "none", children: node }));
 };
 export default StepperStage;

package/dist/esm/Components/WizardDialog/WizardDialog.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Flex, Heading, ListItem, Text, UnorderedList, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
+import Button from "../Button/Button.js";
+import StageProgress from "../StageProgress/StageProgress.js";
+import DescriptionList from "../DescriptionList/DescriptionList.js";
+import { useWizardFlow } from "./useWizardFlow.js";
+export { wizardTransition, firstInvalidStep, INITIAL_WIZARD_STATE } from "./wizardSteps.js";
+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 } = useCustomTheme();
+    const headingRef = useRef(null);
+    const previousStep = useRef(flow.step.id);
+    const reviewed = steps.filter((candidate) => candidate.summary !== undefined);
+    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 (_jsxs(Flex, { direction: "column", gap: 5, "data-testid": testId, "data-step": flow.step.id, children: [_jsx(StageProgress, { 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) }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: labels.stepOf(flow.index + 1, steps.length) }), _jsx(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 ? (_jsxs(Alert, { status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", role: "alert", "data-testid": "wizard-errors", children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: labels.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: flow.errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, _jsx(Box, { children: flow.step.content }), flow.isLast && reviewed.length ? (_jsxs(Box, { "data-testid": "wizard-review", children: [_jsx(Heading, { as: "h4", fontSize: "sm", fontWeight: 600, mb: 2, color: colors.header[900], children: labels.review }), _jsx(DescriptionList, { layout: "inline", columns: { base: 1 }, items: reviewed.map((candidate) => ({
+                            label: candidate.label,
+                            value: candidate.summary,
+                        })) })] })) : null] }));
+};
+const WizardFooter = ({ flow, labels, isFinishing, onCancel }) => (_jsxs(Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? (_jsx(Button, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : (_jsx("span", {})), _jsxs(Flex, { gap: 2, children: [!flow.isFirst ? (_jsx(Button, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, loadingText: labels.finish, "data-testid": "wizard-finish" })) : (_jsx(Button, { 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. */
+export const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+    const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    const guardedClose = () => {
+        if (!isFinishing)
+            onClose();
+    };
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [_jsx(ModalBody, { children: _jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), _jsx(ModalFooter, { children: _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: guardedClose }) })] }));
+};
+/** The same wizard inline, for a full-page flow rather than a modal. */
+export const Wizard = ({ steps, onFinish, isFinishing = false, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+    const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: onCancel })] }));
+};
+export default WizardDialog;

package/dist/esm/Components/WizardDialog/WizardDialogProps.js

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

package/dist/esm/Components/WizardDialog/useWizardFlow.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from "react";
+import { INITIAL_WIZARD_STATE, firstInvalidStep, wizardTransition, } from "./wizardSteps.js";
+export function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }) {
+    const [state, setState] = useState(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);
+    useEffect(() => {
+        if (resetWhen)
+            setState(INITIAL_WIZARD_STATE);
+    }, [resetWhen]);
+    const dispatch = useCallback((action) => {
+        const base = { ...state, index, furthest };
+        const next = 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 = useCallback(() => {
+        const invalid = 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/esm/Components/WizardDialog/wizardSteps.js

@@ -0,0 +1,35 @@
+export const INITIAL_WIZARD_STATE = { index: 0, furthest: 0, errors: [] };
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+export 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 INITIAL_WIZARD_STATE;
+    }
+}
+/** First step whose validator reports errors, or null when every step is valid. */
+export 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/index.js

@@ -262,3 +262,10 @@ export { default as ProductCardGrid } from "./Components/ProductCard/ProductCard
 export { default as ProductCardSkeleton } from "./Components/ProductCard/ProductCardSkeleton.js";
 export { default as QuickAddSheet } from "./Components/ProductCard/QuickAddSheet.js";
 export * from "./Components/Primitives/Primitives.js";
+export { default as Kbd, KbdShortcut } from "./Components/Kbd/Kbd.js";
+export { default as LauncherTrigger } from "./Components/LauncherTrigger/LauncherTrigger.js";
+export { default as NavLauncher } from "./Components/NavLauncher/NavLauncher.js";
+export { default as PinToggle } from "./Components/NavLauncher/PinToggle.js";
+export { default as NewTabLink } from "./Components/NavLauncher/NewTabLink.js";
+export { searchLauncher, searchLauncherSections, flattenScreens } from "./Components/NavLauncher/match.js";
+export { default as WizardDialog, Wizard, wizardTransition, firstInvalidStep, } from "./Components/WizardDialog/WizardDialog.js";

package/dist/index.d.ts

@@ -147,7 +147,7 @@ export type { LimitReachedModalProps, LimitKind, } from "./Components/LimitReach
 export type { AccountHandoffConfig, AccountHandoff, AccountHandoffLinkOptions, AccountHandoffUsersOptions, ResolveReturnUrlOptions, } from "./Utils/accountHandoff";
 export type { TableProps, TableHeaderProps, TableColumnType, TableDensity, TableVariant, TableEmptyState, TableRenderGroup, HeaderActionsProps, ColumnSortingProps, ExportOption, DataObject, FilterValues, } from "./Components/Table/TableProps";
 export type { ButtonProps } from "./Components/Button/ButtonProps";
-export type { CardProps } from "./Components/Card/CardProps";
+export type { CardProps, CardPadding } from "./Components/Card/CardProps";
 export type { ProfileCardProps, ProfileCardVariant, ProfileCardVariantLegacy, } from "./Components/ProfileCard/ProfileCardProps";
 export type { ChakraModelProps as ModalProps } from "./Components/Modal/ModalProps";
 export type { DrawerProps } from "./Components/Drawer/DrawerProps";
@@ -175,11 +175,11 @@ export type { LoadingProps } from "./Components/Loading/LoadingProps";
 export type { SkeletonProps } from "./Components/Skeletons/SkeletonProps";
 export type { ProgressBarProps } from "./Components/ProgressBar/ProgressBarProps";
 export type { ToasterToastProps } from "./Components/Toaster/ToasterProps";
-export type { BreadcrumbsProps, BreadcrumbItem } from "./Components/Breadcrumbs/BreadcrumbsProps";
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbsLabels } from "./Components/Breadcrumbs/BreadcrumbsProps";
 export type { TimelineProps, TimelineEvent, TimelineEvents, TimelineNote, TimelineNoteAttachment, } from "./Components/Timeline/TimelineProps";
 export type { Stage, StageProgressProps, StageItemProps, StageSize, StageState, StageVariant, StageColorScheme, } from "./Components/StageProgress/StageProgressProps";
 export type { FileUploaderProps, MimeExtension } from "./Components/FileUpload/FileUploadProps";
-export type { SidebarProps, SidebarUser, SecondaryBarProps, OtherAppsProps, MenuProps as SidebarMenuProps, } from "./Components/SideBar/SideBarProps";
+export type { SidebarProps, SidebarUser, SecondaryBarProps, OtherAppsProps, MenuProps as SidebarMenuProps, SidebarPinnedItem, SidebarPinnedLabels, SidebarCollapseTransition, } from "./Components/SideBar/SideBarProps";
 export type { NavbarProps, MenuProps as NavbarMenuProps } from "./Components/NavigationBar/NavigationBarProps";
 export type { HeaderProps } from "./Components/Header/HeaderProps";
 export { appInitials, filterApps, matchesShortcut, formatShortcut, buildSuiteApps, } from "./Components/AppSwitcher/AppSwitcherProps";
@@ -211,7 +211,7 @@ export { fieldControlStyles, controlSizeStyles } from "./Components/Common/field
 export { fieldLabelStyles } from "./Components/Common/FormLabel";
 export { fieldMessageStyles } from "./Components/Common/fieldMessageStyles";
 export { default as PageHeader } from "./Components/PageHeader/PageHeader";
-export type { PageHeaderProps } from "./Components/PageHeader/PageHeaderProps";
+export type { PageHeaderProps, PageHeaderTitleSize, PageHeaderActionsLayout } from "./Components/PageHeader/PageHeaderProps";
 export { default as StatCard } from "./Components/StatCard/StatCard";
 export type { StatCardProps } from "./Components/StatCard/StatCardProps";
 export { default as ErrorState } from "./Components/QueryState/ErrorState";
@@ -354,3 +354,18 @@ export { default as QuickAddSheet } from "./Components/ProductCard/QuickAddSheet
 export type { ProductCardProps, ProductCardLayout, ProductCardDensity, ProductCardAspectRatio, ProductCardAction, ProductCardLabels, ProductCardPressHandler, ProductCardSkeletonProps, ProductCardGridProps, ProductCardGridColumns } from "./Components/ProductCard/ProductCardProps";
 export type { QuickAddSheetProps, QuickAddSheetLabels, QuickAddPresentation } from "./Components/ProductCard/QuickAddSheetProps";
 export * from "./Components/Primitives/Primitives";
+export { default as Kbd, KbdShortcut } from "./Components/Kbd/Kbd";
+export type { KbdProps, KbdShortcutProps } from "./Components/Kbd/KbdProps";
+export { default as LauncherTrigger } from "./Components/LauncherTrigger/LauncherTrigger";
+export type { LauncherTriggerProps } from "./Components/LauncherTrigger/LauncherTriggerProps";
+export { default as NavLauncher } from "./Components/NavLauncher/NavLauncher";
+export { default as PinToggle } from "./Components/NavLauncher/PinToggle";
+export { default as NewTabLink } from "./Components/NavLauncher/NewTabLink";
+export { searchLauncher, searchLauncherSections, flattenScreens } from "./Components/NavLauncher/match";
+export type { LauncherResult, LauncherResultView, LauncherSectionResult } from "./Components/NavLauncher/match";
+export type { LauncherIcon, LauncherScreen, LauncherModule, LauncherSection, LauncherSearchItem, LauncherResultGroup, LauncherLabels, LauncherNavigateOptions, NavLauncherProps, PinToggleProps, NewTabLinkProps, } from "./Components/NavLauncher/NavLauncherProps";
+export { default as WizardDialog, Wizard, wizardTransition, firstInvalidStep, } from "./Components/WizardDialog/WizardDialog";
+export type { WizardStep, WizardLabels, WizardDialogProps, WizardProps } from "./Components/WizardDialog/WizardDialogProps";
+export type { WizardState, WizardAction, StepValidator } from "./Components/WizardDialog/wizardSteps";
+export type { PdfViewerProps, PdfViewerLabels } from "./Components/PdfViewer/PdfViewer";
+export type { EditorProps, EditorApi, EditorMergeField, EditorTokenSyntax, EditorToolbarButton, EditorLabels, } from "./Components/Editor/EditorProps";

package/dist/index.js

@@ -47,7 +47,7 @@ exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual
 exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = exports.StatCard = exports.PageHeader = exports.fieldMessageStyles = exports.fieldLabelStyles = exports.controlSizeStyles = exports.fieldControlStyles = exports.FieldMessage = exports.useFieldIds = exports.REDUCED_MOTION_QUERY = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.OVERLAY_BLUR = exports.overlayScrimStyles = exports.RAISED_OVERLAY = exports.raisedRule = exports.buildSurfaceRaised = exports.tooltipSurface = exports.SCRIM_OPACITY = exports.overlayScrim = exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.toneToSemantic = exports.toneToColorScheme = exports.isTone = exports.TONES = exports.transitionFor = exports.MOTION_EASE = exports.MOTION_MS = exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = void 0;
 exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = exports.installPreloadErrorReload = exports.lazyWithRetry = exports.useAnchoredPanelHeight = exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = exports.ConfirmDialog = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.Accordian = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = exports.Spinner = void 0;
 exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = exports.MediaViewer = void 0;
-exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = void 0;
+exports.firstInvalidStep = exports.wizardTransition = exports.Wizard = exports.WizardDialog = exports.flattenScreens = exports.searchLauncherSections = exports.searchLauncher = exports.NewTabLink = exports.PinToggle = exports.NavLauncher = exports.LauncherTrigger = exports.KbdShortcut = exports.Kbd = exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordion = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -668,3 +668,23 @@ Object.defineProperty(exports, "ProductCardSkeleton", { enumerable: true, get: f
 var QuickAddSheet_1 = require("./Components/ProductCard/QuickAddSheet");
 Object.defineProperty(exports, "QuickAddSheet", { enumerable: true, get: function () { return __importDefault(QuickAddSheet_1).default; } });
 __exportStar(require("./Components/Primitives/Primitives"), exports);
+var Kbd_1 = require("./Components/Kbd/Kbd");
+Object.defineProperty(exports, "Kbd", { enumerable: true, get: function () { return __importDefault(Kbd_1).default; } });
+Object.defineProperty(exports, "KbdShortcut", { enumerable: true, get: function () { return Kbd_1.KbdShortcut; } });
+var LauncherTrigger_1 = require("./Components/LauncherTrigger/LauncherTrigger");
+Object.defineProperty(exports, "LauncherTrigger", { enumerable: true, get: function () { return __importDefault(LauncherTrigger_1).default; } });
+var NavLauncher_1 = require("./Components/NavLauncher/NavLauncher");
+Object.defineProperty(exports, "NavLauncher", { enumerable: true, get: function () { return __importDefault(NavLauncher_1).default; } });
+var PinToggle_1 = require("./Components/NavLauncher/PinToggle");
+Object.defineProperty(exports, "PinToggle", { enumerable: true, get: function () { return __importDefault(PinToggle_1).default; } });
+var NewTabLink_1 = require("./Components/NavLauncher/NewTabLink");
+Object.defineProperty(exports, "NewTabLink", { enumerable: true, get: function () { return __importDefault(NewTabLink_1).default; } });
+var match_1 = require("./Components/NavLauncher/match");
+Object.defineProperty(exports, "searchLauncher", { enumerable: true, get: function () { return match_1.searchLauncher; } });
+Object.defineProperty(exports, "searchLauncherSections", { enumerable: true, get: function () { return match_1.searchLauncherSections; } });
+Object.defineProperty(exports, "flattenScreens", { enumerable: true, get: function () { return match_1.flattenScreens; } });
+var WizardDialog_1 = require("./Components/WizardDialog/WizardDialog");
+Object.defineProperty(exports, "WizardDialog", { enumerable: true, get: function () { return __importDefault(WizardDialog_1).default; } });
+Object.defineProperty(exports, "Wizard", { enumerable: true, get: function () { return WizardDialog_1.Wizard; } });
+Object.defineProperty(exports, "wizardTransition", { enumerable: true, get: function () { return WizardDialog_1.wizardTransition; } });
+Object.defineProperty(exports, "firstInvalidStep", { enumerable: true, get: function () { return WizardDialog_1.firstInvalidStep; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.58",
+  "version": "2.4.2-beta.59",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",