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

package/dist/Components/NavLauncher/spotlightParts.js

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.describeFacts = exports.QUICK_ACTION_LIMIT = void 0;
+exports.QuickActionsRow = QuickActionsRow;
+exports.TopHitCard = TopHitCard;
+exports.AnswerCard = AnswerCard;
+exports.ShowMoreOption = ShowMoreOption;
+exports.FactList = FactList;
+exports.PreviewPane = PreviewPane;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const motion_1 = require("../../Theme/chakra/motion");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Button_1 = __importDefault(require("../Button/Button"));
+const CopyButton_1 = __importDefault(require("../CopyButton/CopyButton"));
+const Kbd_1 = require("../Kbd/Kbd");
+const launcherParts_1 = require("./launcherParts");
+exports.QUICK_ACTION_LIMIT = 5;
+const HIDE_ON_TOUCH = { "@media (hover: none)": { display: "none" } };
+function QuickActionsRow({ items, label, link, onRun, }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { role: "group", "aria-label": label, "data-testid": "launcher-quick-actions", gap: "6px", minW: 0, flexWrap: "wrap", px: "4px", children: items.slice(0, exports.QUICK_ACTION_LIMIT).map((item) => {
+            const Icon = item.icon;
+            const common = {
+                variant: "outline",
+                colorScheme: "gray",
+                size: "sm",
+                borderRadius: "full",
+                flexShrink: 0,
+                label: item.label,
+                leftIcon: Icon ? ((0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 2, "aria-hidden": true })) : undefined,
+            };
+            return item.href && !item.run ? ((0, jsx_runtime_1.jsx)(Button_1.default, { ...common, as: link.linkAs, href: item.href, onClick: link.onPlainClick }, item.id)) : ((0, jsx_runtime_1.jsx)(Button_1.default, { ...common, onClick: () => onRun(item) }, item.id));
+        }) }));
+}
+const useCardSurface = (isActive) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { edge, fill } = (0, launcherParts_1.activeRowStyle)(colors);
+    return {
+        position: "relative",
+        borderRadius: "xl",
+        borderWidth: "1px",
+        borderColor: isActive ? edge : colors.boxborder[200],
+        bg: isActive ? fill : colors.surfaceRaised,
+        transition: (0, motion_2.transitionFor)(["background-color", "border-color"]),
+        sx: (0, motion_1.reducedMotionSx)(),
+    };
+};
+function IconChip({ icon, size }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const Icon = icon !== null && icon !== void 0 ? icon : lucide_react_1.Search;
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { boxSize: `${size}px`, borderRadius: "10px", bg: colors.primary.opacity[8], color: colors.accentText, align: "center", justify: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: Math.round(size / 2), strokeWidth: 1.8, "aria-hidden": true }) }));
+}
+function CardAnchor({ item, link }) {
+    if (!item.href)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: item.href, tabIndex: -1, "aria-hidden": true, onClick: link.onPlainClick, position: "absolute", inset: 0, borderRadius: "xl" }));
+}
+function TopHitCard({ item, query, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const surface = useCardSurface(isActive);
+    const meta = [item.context, item.hint].filter(Boolean).join(" · ");
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, "data-reveal": isActive, direction: "column", gap: "10px", p: "12px", onMouseMove: onHover, ...surface, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 40 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "2px", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", lineHeight: "22px", fontWeight: 600, color: colors.text[900], noOfLines: 1, children: (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.label, query: query }) }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "12.5px", color: colors.textMuted, noOfLines: 1, children: meta })) : null, item.keywordHint ? ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: [`${labels.matchedOn} “`, (0, jsx_runtime_1.jsx)(launcherParts_1.Highlight, { text: item.keywordHint, query: query }), "\u201D"] })) : null] }), (0, jsx_runtime_1.jsx)(launcherParts_1.CountBadge, { value: item.badge }), (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": true, flexShrink: 0, sx: HIDE_ON_TOUCH, children: (0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "sm" }) })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
+}
+function AnswerCard({ item, isActive, optionId, link, labels, onOpen, onHover, describedBy, }) {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const surface = useCardSurface(isActive);
+    const answer = (_a = item.answer) !== null && _a !== void 0 ? _a : {
+        label: (_b = item.context) !== null && _b !== void 0 ? _b : "",
+        value: item.label,
+    };
+    const acts = Boolean(item.href || item.run);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "presentation", "data-group": true, p: "12px 14px", onMouseMove: onHover, ...surface, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "aria-describedby": describedBy, "data-active": isActive, align: "center", gap: "12px", flex: 1, minW: 0, cursor: "pointer", onClick: () => {
+                    if (!item.href)
+                        onOpen();
+                }, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: 36 }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, gap: "1px", children: [answer.label ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", color: colors.textMuted, noOfLines: 1, children: answer.label })) : null, (0, jsx_runtime_1.jsx)(react_1.Text, { id: `${optionId}-value`, fontSize: "lg", lineHeight: "24px", fontWeight: 600, color: colors.text[900], noOfLines: 2, children: answer.value }), answer.hint ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: answer.hint })) : null] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: "6px", flexShrink: 0, fontSize: "11.5px", color: colors.textMuted, sx: HIDE_ON_TOUCH, children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), acts ? labels.hintOpen : labels.hintCopy] })] }), (0, jsx_runtime_1.jsx)(CardAnchor, { item: item, link: link })] }));
+}
+function ShowMoreOption({ count, isActive, optionId, label, onExpand, onHover, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isTouch = (0, launcherParts_1.useTouchDensity)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { id: optionId, role: "option", "aria-selected": isActive, "data-active": isActive, align: "center", gap: "6px", minH: isTouch ? "44px" : "30px", px: "8px", mt: "2px", borderRadius: "lg", cursor: "pointer", fontSize: "12.5px", fontWeight: 500, color: colors.accentText, onClick: onExpand, onMouseMove: onHover, _hover: { bg: (0, rowStates_1.listRowBackgrounds)(colors).active }, sx: isActive ? (0, launcherParts_1.activeRowSurface)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, strokeWidth: 2, "aria-hidden": true }), label(count)] }));
+}
+const describeFacts = (facts) => facts.map((f) => `${f.label}: ${f.value}`).join("; ");
+exports.describeFacts = describeFacts;
+function FactList({ facts, labels, layout, onCopied, onCopyBlocked, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const values = (0, react_2.useRef)([]);
+    const isPane = layout === "pane";
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "dl", m: 0, display: "grid", gridTemplateColumns: isPane ? "minmax(0, 1fr)" : "repeat(auto-fill, minmax(11rem, 1fr))", gap: isPane ? "12px" : "6px 16px", children: facts.map((fact, i) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "dt", fontSize: "11.5px", lineHeight: "16px", color: colors.textMuted, children: fact.label }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "dd", m: 0, align: "center", gap: "2px", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { ref: (node) => {
+                                values.current[i] = node;
+                            }, fontSize: isPane ? "13.5px" : "12.5px", lineHeight: "20px", color: colors.text[900], wordBreak: "break-word", minW: 0, children: fact.value }), fact.copyable ? ((0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: fact.value, tooltip: labels.copy(fact.label), copiedLabel: labels.copied, size: isPane ? "xs" : "sm", iconSize: 14, onCopy: onCopied, onCopyError: () => onCopyBlocked(values.current[i]) })) : null] })] }, `${fact.label}-${i}`))) }));
+}
+function PreviewPane({ item, placement, width, labels, onCopied, onCopyBlocked, }) {
+    var _a, _b, _c, _d, _e;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isDock = placement === "dock";
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "aside", "aria-label": labels.preview, "data-testid": "launcher-preview", "data-scroll-region": true, direction: "column", gap: isDock ? "10px" : "16px", w: isDock ? "100%" : width, maxH: isDock ? "min(45vh, 20rem)" : undefined, flexShrink: 0, px: "18px", pt: isDock ? "12px" : "16px", pb: isDock ? "12px" : "16px", bg: colors.backgroundColor.subtle, ...(isDock ? { borderTopWidth: "1px" } : { borderLeftWidth: "1px" }), borderColor: colors.boxborder[200], overflowY: "auto", children: item ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "10px", minW: 0, children: [(0, jsx_runtime_1.jsx)(IconChip, { icon: item.icon, size: isDock ? 28 : 36 }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: isDock ? "14px" : "15px", fontWeight: 600, color: colors.text[900], noOfLines: isDock ? 1 : 2, children: (_b = (_a = item.answer) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : item.label }), item.context || item.answer ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: colors.textMuted, noOfLines: 1, children: (_d = (_c = item.answer) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : item.context })) : null] })] }), ((_e = item.facts) === null || _e === void 0 ? void 0 : _e.length) ? ((0, jsx_runtime_1.jsx)(FactList, { facts: item.facts, labels: labels, layout: isDock ? "inline" : "pane", onCopied: onCopied, onCopyBlocked: onCopyBlocked }, item.id)) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "aria-hidden": true, align: "center", gap: "6px", fontSize: "xs", color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Kbd_1.KbdShortcut, { shortcut: "enter", size: "xs" }), labels.hintOpen] }))] })) : null }));
+}

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

@@ -13,8 +13,10 @@ const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 const columnLabel_1 = require("../columnLabel");
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
 const TableVariantContext_1 = require("../variants/TableVariantContext");
 const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../../Theme/chakra/focusRing.styles");
 const rowDetail_1 = require("./rowDetail");
@@ -37,7 +39,7 @@ const SelectAllCell = (0, react_2.memo)(({ slotRef, freezedTextColor, noBorders,
 });
 const LoadingHeaderCells = ({ noBorders }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, (_, i) => ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `0.063rem solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full", variant: "shine" }) }, i))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: TableLoading_1.LOADING_PLACEHOLDER_COLUMNS }, (_, i) => ((0, jsx_runtime_1.jsx)(react_1.Th, { scope: "col", "aria-hidden": "true", px: 3, backgroundColor: variant.header.bg, borderBottom: noBorders ? "none" : `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${variant.header.ruleColor}`, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: i % 2 ? "50%" : "70%", borderRadius: "full" }) }, i))) }));
 };
 const ContentSpacerCell = (0, react_2.memo)(({ noBorders }) => {
     const variant = (0, TableVariantContext_1.useTableVariant)();

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

@@ -1,16 +1,22 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableBodyLoading = exports.LOADING_PLACEHOLDER_COLUMNS = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Skeletons_1 = __importDefault(require("../../Skeletons/Skeletons"));
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const CHECKBOX_PLACEHOLDER_STYLE = { display: "inline-block", verticalAlign: "middle" };
 const TableLoading = () => {
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { overflowX: "auto", p: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Table, { variant: "simple", width: "full", children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "20px" }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { overflowX: "auto", p: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Table, { variant: "simple", width: "full", children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { children: (0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) }), (0, jsx_runtime_1.jsx)(react_1.Th, { p: 2, children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "20px" }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { children: Array.from({ length: 5 }).map((_, rowIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Tr, { children: [(0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) }), (0, jsx_runtime_1.jsx)(react_1.Td, { p: 2, children: (0, jsx_runtime_1.jsx)(react_1.SkeletonText, { noOfLines: 1, skeletonHeight: "2" }) })] }, rowIndex))) })] }) }));
 };
 exports.default = TableLoading;
 exports.LOADING_PLACEHOLDER_COLUMNS = 4;
 const BAR_WIDTHS = ["72%", "58%", "84%", "46%", "66%", "78%"];
 const TableBodyLoading = ({ noOfColumns, cells, borderColor, rowsCount = 4, rowHeight = 45, }) => {
     const layout = cells !== null && cells !== void 0 ? cells : Array.from({ length: noOfColumns }, () => "bar");
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowsCount }).map((_, row) => ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-hidden": "true", children: layout.map((kind, col) => ((0, jsx_runtime_1.jsxs)(react_1.Td, { px: kind === "checkbox" ? 0 : 3, py: 0, height: `${rowHeight}px`, boxSizing: "border-box", border: "none", borderBottom: `0.0625rem solid ${borderColor}`, textAlign: kind === "checkbox" ? "center" : undefined, children: [kind === "checkbox" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { boxSize: "1rem", borderRadius: "sm", variant: "shine", display: "inline-block", verticalAlign: "middle" })), kind === "bar" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: "0.75rem", width: BAR_WIDTHS[(row * 3 + col) % BAR_WIDTHS.length], borderRadius: "full", variant: "shine" }))] }, col))) }, row))) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowsCount }).map((_, row) => ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-hidden": "true", children: layout.map((kind, col) => ((0, jsx_runtime_1.jsxs)(react_1.Td, { px: kind === "checkbox" ? 0 : 3, py: 0, height: `${rowHeight}px`, boxSizing: "border-box", border: "none", borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${borderColor}`, textAlign: kind === "checkbox" ? "center" : undefined, children: [kind === "checkbox" && ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "1rem", borderRadius: "sm", style: CHECKBOX_PLACEHOLDER_STYLE })), kind === "bar" && ((0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "0.75rem", width: BAR_WIDTHS[(row * 3 + col) % BAR_WIDTHS.length], borderRadius: "full" }))] }, col))) }, row))) }));
 };
 exports.TableBodyLoading = TableBodyLoading;

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

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

package/dist/Components/WizardDialog/WizardDialog.js

@@ -41,6 +41,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Modal_1 = __importStar(require("../Modal/Modal"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const StageProgress_1 = __importDefault(require("../StageProgress/StageProgress"));
@@ -86,15 +87,26 @@ const WizardFooter = ({ flow, labels, isFinishing, finishDisabled, finishBlocked
     const reason = finishDisabled && !isFinishing ? finishBlockedReason : undefined;
     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: reason ? "center" : undefined, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast && reason ? ((0, jsx_runtime_1.jsx)(react_2.Text, { id: reasonId, fontSize: "xs", color: colors.textMuted, "data-testid": "wizard-finish-reason", children: reason })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { 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" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
 };
-/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
-const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+const WizardInlineFrame = ({ title, subtitle, testId, footer, children }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), subtitle ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })) : null] }), children, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "sticky", bottom: 0, pt: 3, borderTopWidth: "1px", borderColor: (0, surfaceRaised_1.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. */
+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 = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
     const resolved = { ...DEFAULT_LABELS, ...labels };
     const guardedClose = () => {
         if (!isFinishing)
             onClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }) })] }));
+    const body = ((0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }));
+    const footer = ((0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }));
+    if (chrome === "inline") {
+        if (!isOpen)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(WizardInlineFrame, { title: title, subtitle: subtitle, testId: testId ? `${testId}-inline` : "wizard-inline", footer: footer, children: body }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: body }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: footer })] }));
 };
 exports.WizardDialog = WizardDialog;
 /** The same wizard inline, for a full-page flow rather than a modal. */

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

@@ -20,7 +20,7 @@ export type WizardLabels = Partial<{
     fixErrors: string;
     review: string;
 }>;
-/** Props for the modal wizard: Modal + stepper + per-step validation + review on the last step. */
+/** Props for the wizard dialog: Modal (or inline with `chrome`) + stepper + per-step validation + review on the last step. */
 export interface WizardDialogProps {
     isOpen: boolean;
     /** Ignored while `isFinishing`. */
@@ -40,13 +40,15 @@ export interface WizardDialogProps {
     stepId?: string;
     /** Fires whenever the visible step changes, controlled or not. */
     onStepChange?: (stepId: string) => void;
-    /** Modal width; default "3xl". */
+    /** Modal width; default "3xl". Ignored when `chrome` is "inline". */
     size?: "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    /** "inline" draws the wizard in place with no Modal (no overlay, focus trap, close X, Esc or dialog role) for a host that is already the dialog, such as a WorkspaceWindow; it renders nothing while closed and Cancel still calls `onClose`. Default "modal". */
+    chrome?: "modal" | "inline";
     labels?: WizardLabels;
     "data-testid"?: string;
 }
 /** Same flow inline (a page section, not a modal) — for full-page wizards. */
-export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size"> {
+export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size" | "chrome"> {
     /** Renders a Cancel button in the footer when provided. */
     onCancel?: () => void;
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -59,9 +59,10 @@ function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", p
                     restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
                     close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
                 };
+                const pill = ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: ink, boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [item.isDirty ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [item.title, item.subtitle ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": closeLabel ? closeLabel(item) : "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }));
                 if (renderItem) {
-                    return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
+                    return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api, pill) }, item.id);
                 }
-                return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: ink, boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [item.isDirty ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [item.title, item.subtitle ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": closeLabel ? closeLabel(item) : "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+                return (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: pill }, item.id);
             }) }) }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -82,17 +82,11 @@ export interface WorkspaceTrayProps {
     dirtyLabel?: string;
     /** Accessible name of the tray region. Default "Minimized windows". */
     label?: string;
-    /**
-     * Full override for a single item's pill markup — e.g. to wrap it in an
-     * app-specific hover preview, or to show extra state (a dirty dot) the
-     * generic pill doesn't know about. Receives the item plus ready-bound
-     * restore/close callbacks; when provided, the built-in pill is skipped for
-     * that item and this renders in its place inside the same positioned tray.
-     */
+    /** Replaces one item's pill inside the same tray; gets the item, bound restore/close and `pill`, the built-in pill (dot, subtitle, close button) to return as is or wrap, e.g. in WorkspaceTrayPreview. */
     renderItem?: (item: WorkspaceTrayItem, api: {
         restore: () => void;
         close: () => void;
-    }) => ReactNode;
+    }, pill: ReactNode) => ReactNode;
 }
 /** Props for WorkspaceTrayPreview — despite the name, works for any hover trigger, not just tray pills. */
 export interface WorkspaceTrayPreviewProps {

package/dist/Theme/chakra/ringShadow.d.ts

@@ -0,0 +1,3 @@
+import { type BorderWidthRole } from "../tokens/primitives/borderWidths";
+/** A stroke drawn inside the border box as a box-shadow, so it never costs layout. */
+export declare const insetRingShadow: (color: string, width?: BorderWidthRole) => string;

package/dist/Theme/chakra/ringShadow.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insetRingShadow = void 0;
+const borderWidths_1 = require("../tokens/primitives/borderWidths");
+/** A stroke drawn inside the border box as a box-shadow, so it never costs layout. */
+const insetRingShadow = (color, width = "hairline") => `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS[width]} ${color}`;
+exports.insetRingShadow = insetRingShadow;

package/dist/Theme/tokens/builders/buildDarkPalette.d.ts

@@ -6,7 +6,7 @@ export declare const shiftLighter: (scale: ColorScale) => ColorScale;
 export declare const accentLightnessDelta: (accent500: string, white: string) => number;
 /** Raises every rung by the same lightness delta, preserving the ramp's shape and hue. */
 export declare const liftScale: (scale: ColorScale, delta: number) => ColorScale;
-/** `lifted`: brand-tinted canvas, card a CARD_LIFT step above it. `flat`: the hue-neutral canvas the card shares. */
+/** `lifted`: the card sits a CARD_LIFT step above the canvas. `flat`: the card is the canvas. */
 export type DarkPlanes = "lifted" | "flat";
 export interface DarkPaletteOptions {
     planes?: DarkPlanes;

package/dist/Theme/tokens/builders/buildDarkPalette.js

@@ -151,7 +151,8 @@ const NAMED_SURFACE_L = {
     accent: 17,
     muted: 18,
 };
-const SURFACE_SAT = { lifted: 14, flat: 0 };
+// NOTE: surfaces are hue-neutral on every brand; brand hue stays on accents, ink and rules.
+const SURFACE_SAT = 0;
 const TEXT_SAT = 12;
 const PLACEHOLDER_SAT = 10;
 const BORDER_SAT = 12;
@@ -182,16 +183,15 @@ const cardPlane = (canvas, white, planes) => {
 function buildDarkPalette(light, { planes = "lifted" } = {}) {
     const hueSource = light.primary[500];
     const { h } = (0, color_1.hexToHsl)(hueSource);
-    const surfaceSat = SURFACE_SAT[planes];
     const namedSurfaces = Object.fromEntries(Object.entries(NAMED_SURFACE_L).map(([key, l]) => [
         key,
-        (0, color_1.hslToHex)({ h, s: surfaceSat, l }),
+        (0, color_1.hslToHex)({ h, s: SURFACE_SAT, l }),
     ]));
     const white = light.white;
     const { card, rise, tableHover } = cardPlane(namedSurfaces.main, white, planes);
     const primary = liftBrand(light.primary, white);
     const background = {
-        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), surfaceSat),
+        ...fromTargets(hueSource, raise(SURFACE_TARGETS, BACKGROUND_FILLS, rise), SURFACE_SAT),
         50: card,
     };
     const semantic = {
@@ -231,7 +231,7 @@ function buildDarkPalette(light, { planes = "lifted" } = {}) {
         border: dividerRamp,
         boxborder: dividerRamp,
         table: {
-            hover: fromTargets(hueSource, tableHover, surfaceSat),
+            hover: fromTargets(hueSource, tableHover, SURFACE_SAT),
         },
         disabled: fromTargets(hueSource, DISABLED_TARGETS, DISABLED_SAT),
         accentText: (0, accentText_1.pickAccentText)(primary, namedSurfaces.main),

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

@@ -10,7 +10,7 @@ import { transitionFor } from "../../Theme/tokens/primitives/index.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 /** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
-const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
+const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, onCopyError, }) => {
     const theme = useCustomTheme();
     const [copied, setCopied] = useState(false);
     const timer = useRef();
@@ -25,7 +25,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
             timer.current = setTimeout(() => setCopied(false), feedbackDuration);
         }
         catch {
-            /* clipboard unavailable — silently ignore */
+            onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(value);
         }
     };
     // NOTE: primary[500] fails AA as canvas ink in 5/7 brands (dark) — accentTextOnCanvas steps to a clearing rung.

package/dist/esm/Components/Drawer/Drawer.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { DialogNaming } from "../Modal/dialogNaming.js";
 import { warnDroppedSlotChildren } from "../Modal/warnDroppedSlotChildren.js";
 import { Drawer as ChakraDrawer, DrawerBody as ChakraDrawerBody, DrawerFooter as ChakraDrawerFooter, DrawerHeader as ChakraDrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, } from "@chakra-ui/react";
 export const DrawerHeader = ({ children }) => {
@@ -29,12 +30,15 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }) {
+function DialogContent({ label, labelledBy, ...props }) {
+    return (_jsx(DialogNaming, { label: label, labelledBy: labelledBy, children: _jsx(DrawerContent, { ...props }) }));
+}
+export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) {
     var _a, _b;
     const { colors } = useCustomTheme();
     const headerSlot = findSlot(children, DrawerHeader);
     const bodySlot = findSlot(children, DrawerBody);
     const footerSlot = findSlot(children, DrawerFooter);
     warnDroppedSlotChildren("Drawer", children, [DrawerHeader, DrawerBody, DrawerFooter]);
-    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: raisedRule(colors), ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: raisedRule(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DialogContent, { ...contentProps, label: ariaLabel, labelledBy: ariaLabelledBy, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: raisedRule(colors), ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: raisedRule(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

package/dist/esm/Components/FormDrawer/FormDrawer.js

@@ -12,7 +12,7 @@ const DEFAULT_LABELS = {
     discard: "Discard",
     keepEditing: "Keep editing",
 };
-export default function FormDrawer({ isOpen, onClose, title, description, sections, errors = [], isDirty, onSubmit, isSubmitting = false, submitLabel = "Save", cancelLabel = "Cancel", secondaryAction, size = "md", labels, "data-testid": testId = "form-drawer", }) {
+export default function FormDrawer({ isOpen, onClose, title, description, sections, errors = [], isDirty, onSubmit, isSubmitting = false, isSubmitDisabled = false, submitLabel = "Save", cancelLabel = "Cancel", secondaryAction, size = "md", labels, "data-testid": testId = "form-drawer", }) {
     const { colors } = useCustomTheme();
     const uid = useId();
     const formId = `${uid}-form`;
@@ -45,7 +45,7 @@ export default function FormDrawer({ isOpen, onClose, title, description, sectio
     };
     const submit = (event) => {
         event.preventDefault();
-        if (isSubmitting)
+        if (isSubmitting || isSubmitDisabled)
             return;
         focusPending.current = true;
         setAttempt((n) => n + 1);
@@ -54,5 +54,5 @@ export default function FormDrawer({ isOpen, onClose, title, description, sectio
     return (_jsxs(Drawer, { isOpen: isOpen, onClose: requestClose, size: size, closeOnEsc: !isSubmitting, closeOnOverlayClick: !isSubmitting, portalChildren: _jsx(AlertDialog, { isOpen: confirmDiscard, onClose: () => setConfirmDiscard(false), leastDestructiveRef: keepEditingRef, isCentered: true, tone: "danger", title: text.discardTitle, content: _jsx(Text, { fontSize: "sm", color: colors.text[800], children: text.discardBody }), cancelButtonText: text.keepEditing, confirmButtonText: text.discard, onConfirm: () => {
                 setConfirmDiscard(false);
                 onClose();
-            } }), children: [_jsxs(DrawerHeader, { children: [_jsx(Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? (_jsx(Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), _jsx(DrawerBody, { children: _jsx(Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: _jsxs(Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? (_jsxs(Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-errors`, children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: text.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Divider, { borderColor: colors.boxborder[200] }) : null, _jsxs(Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? (_jsxs(Box, { children: [_jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? (_jsx(Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), _jsx(DrawerFooter, { children: _jsxs(Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, _jsx(Button, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), _jsx(Button, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
+            } }), children: [_jsxs(DrawerHeader, { children: [_jsx(Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? (_jsx(Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), _jsx(DrawerBody, { children: _jsx(Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: _jsxs(Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? (_jsxs(Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-errors`, children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: text.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Divider, { borderColor: colors.boxborder[200] }) : null, _jsxs(Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? (_jsxs(Box, { children: [_jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? (_jsx(Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), _jsx(DrawerFooter, { children: _jsxs(Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, _jsx(Button, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), _jsx(Button, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, isDisabled: isSubmitDisabled, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
 }

package/dist/esm/Components/Modal/dialogNaming.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ModalContextProvider, useModalContext } from "@chakra-ui/react";
+// Chakra's getDialogProps always points aria-labelledby at the header, so override it at the source.
+export function DialogNaming({ label, labelledBy, children }) {
+    const modal = useModalContext();
+    const value = useMemo(() => label || labelledBy
+        ? {
+            ...modal,
+            getDialogProps: ((...args) => ({
+                ...modal.getDialogProps(...args),
+                ...(label ? { "aria-label": label } : {}),
+                "aria-labelledby": labelledBy,
+            })),
+        }
+        : modal, [modal, label, labelledBy]);
+    return _jsx(ModalContextProvider, { value: value, children: children });
+}

package/dist/esm/Components/NavLauncher/LauncherTabs.js

@@ -42,7 +42,7 @@ export function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveU
                         refs.current.set(tab.id, node);
                     else
                         refs.current.delete(tab.id);
-                }, "aria-selected": isSelected, "aria-controls": isSelected ? panelId(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "14px", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: transitionFor(["color"]), _hover: {
+                }, "aria-selected": isSelected, "aria-controls": isSelected ? panelId(idBase) : undefined, tabIndex: isSelected ? 0 : -1, onClick: () => onSelect(tab.id), position: "relative", flex: { base: 1, md: "none" }, minW: { md: "112px" }, h: "46px", px: { base: "6px", md: "14px" }, whiteSpace: "nowrap", fontSize: "sm", fontWeight: isSelected ? 600 : 500, color: isSelected ? colors.accentText : colors.textMuted, transition: transitionFor(["color"]), _hover: {
                     color: isSelected ? colors.accentText : colors.text[900],
                 }, _after: {
                     content: '""',
@@ -53,6 +53,6 @@ export function LauncherTabs({ tabs, selected, onSelect, idBase, label, onLeaveU
                     h: "2px",
                     borderRadius: "2px 2px 0 0",
                     bg: isSelected ? colors.primary[500] : "transparent",
-                }, sx: { ...ring, borderRadius: "8px" }, children: tab.label }, tab.id));
+                }, sx: { ...ring, borderRadius: "lg" }, children: tab.label }, tab.id));
         }) }));
 }