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

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -3,6 +3,7 @@ import { Box, Button, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, S
 import Avatar from "../Avatar/Avatar.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
 import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
@@ -48,7 +49,7 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
     };
-    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", flex: "1 1 0%", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, flexShrink: 0, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", flexShrink: 0, onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && (_jsxs(_Fragment, { children: [leading, _jsx(Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", flexShrink: 0, bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(ToolTip, { label: typeof navigationBarText.text === "string" ? navigationBarText.text : "", overflowOnly: true, placement: "bottom", children: _jsx(Text, { flex: "1 1 0%", w: 0, minW: 0, isTruncated: true, color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "xl", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }) }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, sx: { "& > *": { minW: 0 } }, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: ruleOn(theme.colors, theme.colors.backgroundColor.light), children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", flex: "1 1 0%", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, flexShrink: 0, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", flexShrink: 0, onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && (_jsxs(_Fragment, { children: [leading, _jsx(Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", flexShrink: 0, bg: ruleOn(theme.colors, theme.colors.backgroundColor.light) })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(ToolTip, { label: typeof navigationBarText.text === "string" ? navigationBarText.text : "", overflowOnly: true, placement: "bottom", children: _jsx(Text, { flex: "1 1 0%", w: 0, minW: 0, isTruncated: true, color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "xl", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }) }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, sx: { "& > *": { minW: 0 } }, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.surfaceRaised, 
                                         // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.

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

@@ -7,6 +7,7 @@ import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accent
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowCursorSx } from "../Select/optionRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import ToolTip from "../ToolTip/ToolTip.js";
@@ -106,14 +107,11 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             }
                                         }, borderRadius: "lg" })] }) })), _jsxs(Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
-                                    const rowHoverBg = isActive
-                                        ? rowBackgrounds.selectedActive
-                                        : rowBackgrounds.active;
                                     return (_jsxs(Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: "transparent", transition: "background 0.12s ease", ...optionRowCursorSx(rowBackgrounds), onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 export default OrgSwitcher;

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -6,7 +6,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 const RING_TRANSITION = transitionFor(["box-shadow"], "base");
 const FADE_TRANSITION = transitionFor(["opacity"], "base");
@@ -23,6 +23,7 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
     const fileInputRef = useRef(null);
     const theme = useCustomTheme();
     const c = theme.colors;
+    const editFill = resolveFilledSurface(c.primary, c);
     const handlePhotoChange = (event) => {
         var _a;
         if (!isEditable)
@@ -72,14 +73,14 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
             "&:hover .ppv-media": {
                 boxShadow: `0 0 0 0.1875rem ${c.primary.opacity[24]}`,
             },
-        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: FADE_TRANSITION, children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: c.primary[solidFillRung(c.primary, c.white)], color: labelOnFill(c.primary[solidFillRung(c.primary, c.white)], c.white, c.black), border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: ACTION_TRANSITION, _hover: {
-                                        bg: c.primary[600],
-                                        color: labelOnFill(c.primary[600], c.white, c.black),
+        }, children: [_jsx(Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: RING_TRANSITION, children: renderMedia() }), hasActions && (_jsxs(_Fragment, { children: [_jsx(Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: hoverScrim(0.3), opacity: 0, transition: FADE_TRANSITION, pointerEvents: "none" }), _jsxs(HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: FADE_TRANSITION, children: [isEditable && (_jsx(Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: editFill.fill, color: editFill.color, border: `0.125rem solid ${c.background[50]}`, boxShadow: (_b = theme.shadows) === null || _b === void 0 ? void 0 : _b.md, style: style, transition: ACTION_TRANSITION, _hover: {
+                                        bg: editFill.hoverFill,
+                                        color: editFill.hoverColor,
                                         transform: "scale(1.1)",
                                         boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg,
                                     }, _active: {
-                                        bg: c.primary[700],
-                                        color: labelOnFill(c.primary[700], c.white, c.black),
+                                        bg: editFill.activeFill,
+                                        color: editFill.activeColor,
                                     } }) })), isView && (_jsx(Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: ACTION_TRANSITION, _hover: {
                                         bg: c.gray[50],
                                         color: accentTextOnCanvas(c.primary, c.gray[50]),

package/dist/esm/Components/ScrollToTop/ScrollToTop.js

@@ -5,7 +5,7 @@ import { ChevronUp } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
-import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { transitionFor } from "../../Theme/tokens/primitives/index.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
@@ -14,6 +14,7 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
     const [visible, setVisible] = useState(false);
     const anchorRef = useRef(null);
     const theme = useCustomTheme();
+    const fill = resolveFilledSurface(theme.colors.primary, theme.colors);
     const getScroller = () => {
         var _a, _b;
         if (useWindow)
@@ -62,9 +63,9 @@ const ScrollToTop = ({ children, tooltipLabel = "Scroll to top", threshold = 300
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useWindow, threshold]);
-    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: transitionFor(["opacity", "transform", "box-shadow", "background-color", "color"], "base"), _hover: {
-                        bg: theme.colors.primary[600],
-                        color: labelOnFill(theme.colors.primary[600], theme.colors.white, theme.colors.black),
+    return (_jsxs(Box, { ref: anchorRef, position: "relative", children: [children, _jsx(ToolTip, { label: tooltipLabel, placement: "left", children: _jsx(Box, { as: "button", type: "button", onClick: scrollToTop, "aria-label": tooltipLabel, border: "none", position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: fill.fill, color: fill.color, boxShadow: "md", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: transitionFor(["opacity", "transform", "box-shadow", "background-color", "color"], "base"), _hover: {
+                        bg: fill.hoverFill,
+                        color: fill.hoverColor,
                         transform: "translateY(-2px) scale(1.05)",
                         boxShadow: "lg",
                     }, _active: { transform: "scale(0.95)" }, sx: { ...focusVisibleStyles(theme.colors), ...reducedMotionSx({ transform: "none" }) }, children: _jsx(ChevronUp, { size: 24, strokeWidth: 2.5 }) }) })] }));

package/dist/esm/Components/SearchSelect/SearchSelect.js

@@ -7,8 +7,8 @@ import Tag from "../Tag/Tag.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
-import { optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
-import { optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
+import { OPTION_ROW_RADIUS, optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
+import { optionRowCursorSx, optionRowFill, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
@@ -41,17 +41,9 @@ const normalizeMultiValue = (val) => {
 const DECORATIVE_CHECKBOX_SX = { pointerEvents: "none", "& input": { visibility: "hidden" } };
 const OptionRow = React.memo(function OptionRow({ option, index, optionId, isSelected, isActive, isMultiple, spec, colors, rowBackgrounds, checkboxSize, onSelect, onActivate, }) {
     const singleSelected = isSelected && !isMultiple;
-    return (_jsxs(Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: isSelected
-            ? isActive
-                ? rowBackgrounds.selectedActive
-                : rowBackgrounds.selected
-            : isActive
-                ? rowBackgrounds.active
-                : "transparent", _hover: {
-            bg: isSelected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-        }, onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: optionRowInk(colors, singleSelected), 
+    return (_jsxs(Box, { id: optionId, "data-index": index, role: "option", "aria-selected": isSelected, mx: spec.mx, py: spec.py, px: spec.px, minH: spec.minH, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", bg: optionRowFill(rowBackgrounds, isActive), onClick: () => onSelect(option), onMouseEnter: () => onActivate(index), display: "flex", alignItems: "center", gap: spec.gap, color: optionRowInk(colors, singleSelected), 
         // `view` is consumer JSX with no size of its own; it inherited the 16px body font.
-        fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
+        fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { flex: 1, minW: 0, isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
 });
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
 /** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
@@ -618,11 +610,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                                 }, children: [_jsxs(Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? (_jsx(SelectTruncatedLabel, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : (_jsx(Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.textMuted, isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: CHEVRON_TRANSITION, transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && (_jsx(Portal, { children: _jsx(Box, { ref: setInsideSelectMenuRef, id: insideSelectPortalId, role: "listbox", "aria-label": insidePlaceholder, onKeyDown: handleInsideMenuKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, position: "fixed", style: { top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px` }, zIndex: zIndices.popoverNested, bg: theme.colors.surfaceRaised, border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_c = insideSelect.option) === null || _c === void 0 ? void 0 : _c.map((item) => {
                                                 var _a;
                                                 const selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
-                                                return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), color: optionRowInk(theme.colors, selected), bg: selected ? rowBackgrounds.selected : "transparent", _hover: {
-                                                        bg: selected
-                                                            ? rowBackgrounds.selectedActive
-                                                            : rowBackgrounds.active,
-                                                    }, cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
+                                                return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: spec.gap, minH: spec.minH, py: spec.py, px: spec.px, fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), color: optionRowInk(theme.colors, selected), bg: "transparent", ...optionRowCursorSx(rowBackgrounds), cursor: "pointer", role: "option", "aria-selected": selected, tabIndex: -1, _focusVisible: insideFocusRing, onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleCustomSelect(item);
                                                     }, children: [_jsx(Text, { isTruncated: true, children: item.label }), selected && (_jsx(Check, { size: spec.iconSize, color: theme.colors.accentText }))] }, item.id));
@@ -661,6 +649,6 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                         top: `${dropdownPos.top}px`,
                         left: `${dropdownPos.left}px`,
                         width: `${dropdownPos.width}px`,
-                    }, zIndex: zIndices.popover, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [hasSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: activeIndex === SELECT_ALL_ROW ? rowBackgrounds.active : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(theme.colors)}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_jsx(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: setActiveIndex }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), bg: activeIndex === ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                    }, zIndex: zIndices.popover, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [hasSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, bg: activeIndex === SELECT_ALL_ROW ? rowBackgrounds.active : undefined, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `${BORDER_WIDTHS.hairline} solid ${raisedRule(theme.colors)}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: DECORATIVE_CHECKBOX_SX, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", py: 1, borderBottom: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_jsx(OptionRow, { option: option, index: index, optionId: getOptionId(index), isSelected: isSelected(option.id), isActive: index === activeIndex, isMultiple: isMultiple, spec: spec, colors: theme.colors, rowBackgrounds: rowBackgrounds, checkboxSize: s.checkboxSize, onSelect: selectOption, onActivate: setActiveIndex }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", justifyContent: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { id: addNewId, role: "option", "aria-selected": false, py: spec.py, px: spec.px, borderTop: `${BORDER_WIDTHS.hairline} solid`, borderColor: raisedRule(theme.colors), bg: activeIndex === ADD_NEW_ROW ? rowBackgrounds.active : theme.colors.surfaceRaised, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.accentText, fontWeight: 500, minH: spec.minH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: rowBackgrounds.active }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: spec.fontSize, children: addNew.text || "Add New" })] }))] }) })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 export default SearchSelect;

package/dist/esm/Components/Select/SelectPopup.js

@@ -6,7 +6,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
-import { optionRowDescriptionInk, optionRowInk, optionRowWeight } from "./optionRowInk.js";
+import { optionRowDescriptionInk, optionRowFill, optionRowInk, optionRowWeight } from "./optionRowInk.js";
 import { optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
@@ -36,9 +36,7 @@ const parseRemToPx = (value, fallbackPx) => {
 };
 const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, spec, renderOption, onSelect, onActivate, }) {
     const isSingleSelected = isSelected && !isMulti;
-    const selectedBg = isActive ? backgrounds.selectedActive : backgrounds.selected;
-    const restBg = isActive ? backgrounds.active : "transparent";
-    return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: optionRowWeight(isSingleSelected), color: optionRowInk(theme.colors, isSingleSelected), bg: isSingleSelected ? selectedBg : restBg, transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: optionRowDescriptionInk(theme.colors), isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
+    return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: optionRowWeight(isSingleSelected), color: optionRowInk(theme.colors, isSingleSelected), bg: optionRowFill(backgrounds, isActive), transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: optionRowDescriptionInk(theme.colors), isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
 });
 const buildGroupedRows = (options) => {
     const rows = [];

package/dist/esm/Components/Select/optionRowInk.js

@@ -5,6 +5,13 @@ import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 export const optionRowInk = (colors, isSingleSelected) => isSingleSelected ? colors.text[900] : colors.text[700];
 // A 12px sub-line reached only 4.00:1 on the hovered selected row in dark.
 export const optionRowDescriptionInk = (colors) => liftToContrast(colors.textMuted, listRowBackgrounds(colors).selectedActive, AA_NORMAL_TEXT);
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+export const optionRowFill = (rows, isActive) => isActive ? rows.active : "transparent";
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+export const optionRowCursorSx = (rows) => ({
+    _hover: { bg: rows.active },
+    _focus: { bg: rows.active },
+});
 export const OPTION_ROW_REST_WEIGHT = 400;
 // NOTE: 600 beside a tinted fill and a check read as three signals for one state.
 export const OPTION_ROW_SELECTED_WEIGHT = 500;

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -14,7 +14,7 @@ import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
-import { optionRowDescriptionInk, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
+import { optionRowCursorSx, optionRowDescriptionInk, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { PlusIcon, Check } from "lucide-react";
 const ROW_TRANSITION = transitionFor(["background-color"]);
@@ -30,18 +30,9 @@ const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOp
                 const selected = isOptionSelected(option);
                 const isSingleSelected = selected && !isMultipleSelect;
                 const isActive = index === activeIndex;
-                const rowBg = selected
-                    ? isActive
-                        ? rowBackgrounds.selectedActive
-                        : rowBackgrounds.selected
-                    : isActive
-                        ? rowBackgrounds.active
-                        : "transparent";
                 return (_jsxs(Box, { as: "button", type: "button", ref: (el) => {
                         optionRefs.current[index] = el;
-                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: optionRowInk(theme.colors, isSingleSelected), fontWeight: optionRowWeight(isSingleSelected), transition: ROW_TRANSITION, sx: reducedMotionSx(), _hover: {
-                        bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-                    }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: optionRowInk(theme.colors, isSingleSelected), fontWeight: optionRowWeight(isSingleSelected), transition: ROW_TRANSITION, sx: reducedMotionSx(), ...optionRowCursorSx(rowBackgrounds), onClick: () => handleOptionClick(option), onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             handleOptionClick(option);

package/dist/esm/Components/Table/Table.js

@@ -8,7 +8,7 @@ import { TABLE_VARIANTS } from "./variants/index.js";
 import { TableVariantProvider } from "./variants/TableVariantContext.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
-import { labelOnFill, solidFillRung, resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import Pagination from "./components/Pagination.js";
 import TableHeader from "./components/TableHeader.js";
 import TableBody from "./components/TableBody.js";
@@ -43,11 +43,12 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "studio", stripe = false, renderRowDetail, expandedRows, onExpandedRowsChange, groupColors, onAddItem, emptyState, onRefresh, isGlobalSearch = true, }) {
     var _a, _b, _c, _d, _e;
     const theme = useCustomTheme();
     const prefersReducedMotion = usePrefersReducedMotion();
     const clearFiltersTone = useMemo(() => resolveFilledSurface(theme.colors.semantic.error, theme.colors), [theme.colors]);
+    const clearBadge = useMemo(() => resolveFilledSurface(theme.colors.primary, theme.colors), [theme.colors]);
     const variantTokens = useMemo(() => TABLE_VARIANTS[variant](theme.colors, isDarkCanvas(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = useState({});
     const detailIdPrefix = useId();
@@ -391,7 +392,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                                     ? isFilterModalOpen
                                                                     : !!(filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, bg: "transparent", border: "none", borderRadius: "md", cursor: "pointer", onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
                                                                     color: theme.colors.accentText,
-                                                                }, sx: focusVisibleStyles(theme.colors), children: _jsx(Icon, { as: Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && (_jsx(Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                }, sx: focusVisibleStyles(theme.colors), children: _jsx(Icon, { as: Filter, transform: "scaleX(-1)", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500] }) }), sidebarActiveCount > 0 && (_jsx(Box, { as: "button", type: "button", "aria-label": "Clear filters", position: "absolute", top: "-6px", right: "-10px", bg: clearBadge.fill, color: clearBadge.color, border: "none", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                     var _a;
                                                                     e.stopPropagation();
                                                                     if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {

package/dist/esm/Components/Table/components/TableBody.js

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { flushSync } from "react-dom";
 import { normalizeTableCellValue, buildTablePalette, pickTableColor } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { TableBodyLoading } from "./TableLoading.js";
+import { LOADING_PLACEHOLDER_COLUMNS, TableBodyLoading } from "./TableLoading.js";
 import TableActions from "./TableActions.js";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
@@ -384,7 +384,15 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         });
     }, [data]);
     if (isLoading && data.length === 0) {
-        return (_jsx(TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[200], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
+        const dataColumns = columns.filter((o) => !o.isHidden).length;
+        const cells = [
+            ...(isContent ? ["blank"] : []),
+            ...(isCheckbox ? ["checkbox"] : []),
+            ...(rowDetail ? ["blank"] : []),
+            ...Array.from({ length: dataColumns || LOADING_PLACEHOLDER_COLUMNS }, () => "bar"),
+            ...(isLink ? ["blank"] : []),
+        ];
+        return (_jsx(TableBodyLoading, { noOfColumns: cells.length, cells: cells, borderColor: variant.row.ruleColor, rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4, rowHeight: rowHeight }));
     }
     if (!isLoading && data.length === 0) {
         return (_jsx(Tr, { backgroundColor: theme.colors.background[50], children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", children: _jsx(TableEmpty, { emptyState: emptyState }) }) }));

package/dist/esm/Components/Table/components/TableHeader.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Spinner, Th, Tr } from "@chakra-ui/react";
 import { memo, useState } from "react";
 import { calculateLeftOffset } from "../../../Utils/table.js";
@@ -8,16 +8,19 @@ import TableFilters from "../filters/TableFilters.js";
 import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
+import Skeletons from "../../Skeletons/Skeletons.js";
 import { useTableVariant } from "../variants/TableVariantContext.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { focusVisibleRing } from "../../../Theme/chakra/focusRing.styles.js";
 import { DETAIL_SLOT_PX, RowDetailHeaderCell } from "./rowDetail.js";
+import { LOADING_PLACEHOLDER_COLUMNS } from "./TableLoading.js";
 const LABEL_JUSTIFY = { start: "space-between", center: "center", end: "flex-start" };
 const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths, slotRef, slotWidth, columnsSort, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, hasDetail = false, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }) => {
     const [openFilterId, setOpenFilterId] = useState(null);
     const variant = useTableVariant();
-    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && (_jsx(RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), columns.map((header, index) => {
+    return (_jsxs(Tr, { pr: 0, "aria-rowindex": 1, children: [isContent && _jsx(ContentSpacerCell, { noBorders: noBorders }), isCheckbox && (_jsx(SelectAllCell, { slotRef: slotRef, freezedTextColor: freezedTextColor, noBorders: noBorders, isSelecting: isSelecting, isLoading: isLoading, checked: checked, handleCheckbox: handleCheckbox })), hasDetail && (_jsx(RowDetailHeaderCell, { left: isCheckbox ? slotWidth : 0, bg: variant.header.bg, ruleColor: variant.header.ruleColor, noBorders: noBorders })), isLoading && !columns.some((header) => !(header === null || header === void 0 ? void 0 : header.isHidden)) && (_jsx(LoadingHeaderCells, { noBorders: noBorders })), columns.map((header, index) => {
                 if (header === null || header === void 0 ? void 0 : header.isHidden)
                     return null;
                 return (_jsx(ColumnHeader, { header: header, index: index, columnWidths: columnWidths, slotWidth: slotWidth, detailWidth: hasDetail ? DETAIL_SLOT_PX : 0, handleSort: handleSort, isCheckbox: isCheckbox, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }, columnLabelText(header)));
@@ -27,8 +30,12 @@ export default memo(TableHeader);
 const SelectAllCell = memo(({ slotRef, freezedTextColor, noBorders, isSelecting, isLoading, checked, handleCheckbox, }) => {
     const theme = useCustomTheme();
     const variant = useTableVariant();
-    return (_jsx(Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })) }) }));
+    return (_jsx(Th, { ref: slotRef, scope: "col", w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: variant.header.bg, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: isSelecting ? (_jsx(Spinner, { size: "sm", color: theme.colors.accentText })) : (_jsx(CheckBox, { "aria-label": "Select all rows", variant: "outline", onChange: () => handleCheckbox(0), isChecked: isLoading ? false : checked === true, isDisabled: isLoading, isIndeterminate: checked === "indeterminate" })) }) }));
 });
+const LoadingHeaderCells = ({ noBorders }) => {
+    const variant = useTableVariant();
+    return (_jsx(_Fragment, { children: Array.from({ length: LOADING_PLACEHOLDER_COLUMNS }, (_, i) => (_jsx(Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: _jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full" }) }, i))) }));
+};
 const ContentSpacerCell = memo(({ noBorders }) => {
     const variant = useTableVariant();
     return (_jsx(Th, { scope: "col", w: 6, minW: "35px", p: 0, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, position: "sticky", className: `columns sticky-columns`, left: "0px", zIndex: 1 }));

package/dist/esm/Components/Table/components/TableLoading.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Skeleton, SkeletonText, Table, Tbody, Td, Th, Thead, Tr, } from "@chakra-ui/react";
+import { Box, SkeletonText, Table, Tbody, Td, Th, Thead, Tr, } from "@chakra-ui/react";
+import Skeletons from "../../Skeletons/Skeletons.js";
+import { BORDER_WIDTHS } from "../../../Theme/tokens/primitives/borderWidths.js";
+const CHECKBOX_PLACEHOLDER_STYLE = { display: "inline-block", verticalAlign: "middle" };
 const TableLoading = () => {
-    return (_jsx(Box, { overflowX: "auto", p: 4, children: _jsxs(Table, { variant: "simple", width: "full", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeleton, { height: "20px" }) })] }) }), _jsx(Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
+    return (_jsx(Box, { overflowX: "auto", p: 4, children: _jsxs(Table, { variant: "simple", width: "full", children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) }), _jsx(Th, { p: 2, children: _jsx(Skeletons, { type: "skeleton", height: "20px" }) })] }) }), _jsx(Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => (_jsxs(Tr, { children: [_jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), _jsx(Td, { p: 2, children: _jsx(SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
 };
 export default TableLoading;
-export const TableBodyLoading = ({ noOfColumns, borderColor, rowsCount = 4, rowHeight = 45, }) => {
-    return (_jsx(_Fragment, { children: Array.from({ length: rowsCount }).map((_, index) => {
-            return (_jsx(Tr, { children: _jsx(Td, { colSpan: noOfColumns, textAlign: "center", border: `1px solid ${borderColor}`, px: 2, pt: 2, pb: 0, height: `${rowHeight}px`, boxSizing: "border-box", children: _jsx(Skeleton, { height: "15px", variant: "shine" }) }) }, index));
-        }) }));
+export const LOADING_PLACEHOLDER_COLUMNS = 4;
+const BAR_WIDTHS = ["72%", "58%", "84%", "46%", "66%", "78%"];
+export const TableBodyLoading = ({ noOfColumns, cells, borderColor, rowsCount = 4, rowHeight = 45, }) => {
+    const layout = cells !== null && cells !== void 0 ? cells : Array.from({ length: noOfColumns }, () => "bar");
+    return (_jsx(_Fragment, { children: Array.from({ length: rowsCount }).map((_, row) => (_jsx(Tr, { "aria-hidden": "true", children: layout.map((kind, col) => (_jsxs(Td, { px: kind === "checkbox" ? 0 : 3, py: 0, height: `${rowHeight}px`, boxSizing: "border-box", border: "none", borderBottom: `${BORDER_WIDTHS.hairline} solid ${borderColor}`, textAlign: kind === "checkbox" ? "center" : undefined, children: [kind === "checkbox" && (_jsx(Skeletons, { type: "skeleton", height: "1rem", width: "1rem", borderRadius: "sm", style: CHECKBOX_PLACEHOLDER_STYLE })), kind === "bar" && (_jsx(Skeletons, { type: "skeleton", height: "0.75rem", width: BAR_WIDTHS[(row * 3 + col) % BAR_WIDTHS.length], borderRadius: "full" }))] }, col))) }, row))) }));
 };

package/dist/esm/Components/Table/filters/CompactSelect.js

@@ -6,7 +6,7 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
 import { optionRowSpec, OPTION_ROW_RADIUS } from "../../../Theme/tokens/primitives/optionRowSizes.js";
-import { optionRowInk, optionRowWeight } from "../../Select/optionRowInk.js";
+import { optionRowCursorSx, optionRowInk, optionRowWeight } from "../../Select/optionRowInk.js";
 import { useExclusiveOverlay } from "../../../Hooks/useExclusiveOverlay.js";
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
     const theme = useCustomTheme();
@@ -58,18 +58,9 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
                                     }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: raisedRule(theme.colors), onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
                                             const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
                                             const isActive = i === activeIndex;
-                                            const rowBg = selected
-                                                ? isActive
-                                                    ? rowBackgrounds.selectedActive
-                                                    : rowBackgrounds.selected
-                                                : isActive
-                                                    ? rowBackgrounds.active
-                                                    : theme.colors.transparent;
                                             return (_jsxs(Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
                                                     optionRefs.current[i] = el;
-                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", color: optionRowInk(theme.colors, selected), fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), _hover: {
-                                                    bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
-                                                }, bg: rowBg, onClick: () => {
+                                                }, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", display: "flex", alignItems: "center", gap: spec.gap, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, cursor: "pointer", color: optionRowInk(theme.colors, selected), fontSize: spec.fontSize, fontWeight: optionRowWeight(selected), bg: "transparent", ...optionRowCursorSx(rowBackgrounds), onClick: () => {
                                                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                     setIsOpen(false);
                                                     setQuery("");

package/dist/esm/Components/Table/variants/TableVariantContext.js

@@ -1,13 +1,13 @@
 import { createContext, useContext, useMemo } from "react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
-import { classicPreset } from "./classic.js";
+import { studioPreset } from "./studio.js";
 const TableVariantContext = createContext(null);
 export const TableVariantProvider = TableVariantContext.Provider;
-/** No provider means the table as it always was — the default is a variant, not a gap. */
+/** No provider means the default variant — studio, the same preset `Table` falls back to. */
 export function useTableVariant() {
     const provided = useContext(TableVariantContext);
     const theme = useCustomTheme();
     const isDark = isDarkCanvas(theme.colors.backgroundColor.main);
-    return useMemo(() => provided !== null && provided !== void 0 ? provided : classicPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
+    return useMemo(() => provided !== null && provided !== void 0 ? provided : studioPreset(theme.colors, isDark), [provided, theme.colors, isDark]);
 }

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, 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 { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
 import Button from "../Button/Button.js";
 import StageProgress from "../StageProgress/StageProgress.js";
@@ -44,15 +45,26 @@ const WizardFooter = ({ flow, labels, isFinishing, finishDisabled, finishBlocked
     const reason = finishDisabled && !isFinishing ? finishBlockedReason : undefined;
     return (_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, align: reason ? "center" : undefined, children: [!flow.isFirst ? (_jsx(Button, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast && reason ? (_jsx(Text, { id: reasonId, fontSize: "xs", color: colors.textMuted, "data-testid": "wizard-finish-reason", children: reason })) : null, flow.isLast ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, isDisabled: finishDisabled, "aria-describedby": reason ? reasonId : undefined, 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, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+const WizardInlineFrame = ({ title, subtitle, testId, footer, children }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { direction: "column", gap: 4, "data-testid": testId, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), subtitle ? (_jsx(Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })) : null] }), children, _jsx(Box, { position: "sticky", bottom: 0, pt: 3, borderTopWidth: "1px", borderColor: raisedRule(colors), bg: colors.surfaceRaised, children: footer })] }));
+};
+/** Wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. A Modal by default; `chrome="inline"` draws it in place. */
+export const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", chrome = "modal", 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, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }) })] }));
+    const body = (_jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }));
+    const footer = (_jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }));
+    if (chrome === "inline") {
+        if (!isOpen)
+            return null;
+        return (_jsx(WizardInlineFrame, { title: title, subtitle: subtitle, testId: testId ? `${testId}-inline` : "wizard-inline", footer: footer, children: body }));
+    }
+    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: body }), _jsx(ModalFooter, { children: footer })] }));
 };
 /** The same wizard inline, for a full-page flow rather than a modal. */
 export const Wizard = ({ steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {

package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -15,7 +15,11 @@ export default function WorkspaceTrayPreview({ children, preview, enabled = true
     const [open, setOpen] = useState(false);
     const openTimer = useRef(null);
     const closeTimer = useRef(null);
+    const openRef = useRef(false);
     const setOpenState = useCallback((next) => {
+        if (openRef.current === next)
+            return;
+        openRef.current = next;
         setOpen(next);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
     }, [onOpenChange]);