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

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

@@ -22,7 +22,6 @@ const sameColumn = (a, b) => {
 };
 const sameColumns = (a, b) => a === b || (a.length === b.length && a.every((col, i) => sameColumn(col, b[i])));
 const useTable = ({ data, isPagination, selections, onSelection, tablePreferences, savePreferences, noOfRowsPerPage, isServerPagination, totalRecords, columns, onNoOfRowsPerPageChange, defaultVisibleColumns, columnsSearch, }) => {
-    var _a, _b;
     const headerRefs = useRef([]);
     const slotObserver = useRef(null);
     const [columnWidths, setColumnWidths] = useState([]);
@@ -81,12 +80,17 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
         // NOTE: an equal list keeps its identity so memoised rows skip re-rendering.
         setColumnsList((prev) => (sameColumns(prev, next) ? prev : next));
     }, [tablePreferences, columns, defaultVisibleColumns]);
-    const isContent = useMemo(() => {
-        return tableData.some((o) => o.content);
-    }, [tableData.length === 0 ? 0 : (_a = tableData[0]) === null || _a === void 0 ? void 0 : _a.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    const isLink = useMemo(() => {
-        return tableData.some((o) => o.onLink || o.onDelete || o.onEdit);
-    }, [tableData.length === 0 ? 0 : (_b = tableData[0]) === null || _b === void 0 ? void 0 : _b.id, tableData.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    const { isContent, isLink } = useMemo(() => {
+        let content = false;
+        let link = false;
+        for (const row of tableData) {
+            content = content || Boolean(row.content);
+            link = link || Boolean(row.onLink || row.onDelete || row.onEdit);
+            if (content && link)
+                break;
+        }
+        return { isContent: content, isLink: link };
+    }, [tableData]);
     useEffect(() => {
         const widths = headerRefs.current.map((ref) => (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0);
         setColumnWidths(widths);

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

@@ -5,6 +5,7 @@ import Checkbox from "../../Checkbox/Checkbox.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { raisedRule } from "../../../Theme/tokens/builders/surfaceRaised.js";
 import { listRowBackgrounds } from "../../../Theme/tokens/builders/rowStates.js";
 import { columnLabelText } from "../columnLabel.js";
 import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
@@ -85,12 +86,12 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                                 ? rowBackgrounds.selected
                                 : "transparent", display: "flex", alignItems: "center", borderRadius: "lg", border: "1px solid", borderColor: isDraggingThisItem
                             ? theme.colors.primary[400]
-                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: transitionFor(["background-color", "border-color"]), _hover: {
+                            : "transparent", cursor: "grab", fontSize: "xs-plus", px: 2, py: "3px", mb: "3px", transition: transitionFor(["background-color", "border-color"]), _hover: {
                             bg: rowBackgrounds.active,
-                            borderColor: theme.colors.boxborder[200],
+                            borderColor: raisedRule(theme.colors),
                         }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.textMuted }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: columnLabelText(item), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
-                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                                } }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${columnLabelText(item)} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.textMuted, isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
                 })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 export default ManageColumns;

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

@@ -41,7 +41,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
         setSettingsOpen(true);
     }, [columns, groupBy]);
     const tabStyle = {
-        fontSize: "13px",
+        fontSize: "xs-plus",
         fontWeight: 500,
         px: 4,
         py: 2,
@@ -59,7 +59,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                         color: theme.colors.accentText
                     } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: { base: "full", md: "md" }, children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", left: { base: 0, md: "auto" }, right: { base: 0, md: "auto" }, position: "absolute", borderTopRadius: "none", initial: { y: sheetOffset, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: sheetOffset, opacity: 0, transition: SHEET_EXIT }, transition: SHEET_ENTER, padding: "0", minW: { base: "auto", md: "620px" }, minH: { base: "auto", md: "520px" }, maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.surfaceRaised, overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: raisedRule(theme.colors), children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
-                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
+                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : raisedRule(theme.colors), bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "xs-plus", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "xs-minus", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
                                                             "& [role='listitem'], & > div > div": {
                                                                 py: "4px !important",
@@ -69,7 +69,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                             "& .chakra-checkbox": { gap: "8px !important" },
                                                             "& .chakra-checkbox__label": { fontSize: "13px !important" },
                                                             "& [draggable]": { py: "5px !important" },
-                                                        }, children: _jsx(ManageColumns, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), _jsxs(TabPanel, { px: 0, py: 1, children: [_jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), _jsx(Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
+                                                        }, children: _jsx(ManageColumns, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), _jsxs(TabPanel, { px: 0, py: 1, children: [_jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), _jsx(Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
                                                                 // Only columns that declare a `columnType` are groupable.
                                                                 ...columns
                                                                     .filter((c) => !!c.columnType && !c.isHidden)
@@ -77,7 +77,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
-                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : raisedRule(theme.colors), bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: transitionFor(["background-color", "border-color"]), _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "xs-plus", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
                                                             }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: raisedRule(theme.colors), pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 export default TableSettings;

package/dist/esm/Components/Tabs/Tabs.js

@@ -7,6 +7,7 @@ import Tab from "./components/Tab.js";
 import TabPanels from "./components/TabPanels.js";
 import TabPanel from "./components/TabPanel.js";
 import TabLinkList from "./components/TabLinkList.js";
+/** Tabs from `items` or composed TabList and TabPanels; all-`href` items render a nav. */
 const Tabs = ({ items, children, value, defaultValue, onChange, variant = "line", size = "sm", colorScheme = "primary", orientation = "horizontal", activationMode = "automatic", isLazy = false, isFitted = false, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, linkAs = "a", }) => {
     var _a;
     const generatedId = useId();

package/dist/esm/Components/Tabs/components/TabList.js

@@ -13,6 +13,7 @@ const revealWithinList = (list, tab) => {
     list.scrollLeft += overshoot(rect.left, rect.right, box.left, box.right);
     list.scrollTop += overshoot(rect.top, rect.bottom, box.top, box.bottom);
 };
+/** Tablist that scrolls to keep the focused or selected tab in view. */
 const TabList = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
     const { colors } = useCustomTheme();
     const ctx = useTabsContext();

package/dist/esm/Components/Tabs/components/TabPanel.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Box } from "@chakra-ui/react";
 import { panelId, tabId, useTabsContext } from "../TabsContext.js";
+/** Panel for the tab with the same `value`; mounts on first selection when lazy. */
 const TabPanel = ({ value, children }) => {
     const ctx = useTabsContext();
     const isSelected = ctx.selectedId === value;

package/dist/esm/Components/Tabs/tabStyles.js

@@ -1,4 +1,4 @@
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, accentTextOnPlanes } from "../../Theme/tokens/builders/accentText.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
@@ -11,7 +11,8 @@ const restStyle = (colors, hoverBg) => ({
 });
 /** Rest/selected/hover ink+fill for one tab, mirroring Button.styles.ts's per-variant resolution. */
 export const resolveTabStyle = (colors, scale, canvas, variant, isSelected) => {
-    const accent = accentTextOnCanvas(scale, canvas);
+    const pagePlanes = [canvas, colors.backgroundColor.base];
+    const accent = accentTextOnPlanes(scale, pagePlanes);
     const hoverTint = resolveHoverTint(colors.gray[50], canvas);
     if (!isSelected)
         return restStyle(colors, hoverTint);
@@ -27,7 +28,8 @@ export const resolveTabStyle = (colors, scale, canvas, variant, isSelected) => {
         return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, border: accent };
     }
     if (variant === "ghost") {
-        return { bg: hoverTint, color: accent, hoverBg: hoverTint, hoverColor: accent };
+        const ghostAccent = accentTextOnCanvas(scale, hoverTint);
+        return { bg: hoverTint, color: ghostAccent, hoverBg: hoverTint, hoverColor: ghostAccent };
     }
     return { bg: "transparent", color: accent, hoverBg: "transparent", hoverColor: accent, indicator: accent };
 };

package/dist/esm/Components/Tag/Tag.js

@@ -22,15 +22,16 @@ const DOT_FONT_SIZE = {
     md: "sm",
     lg: "0.9375rem",
 };
+const defaultRemoveLabel = (label) => `Remove ${label}`;
 /** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
-const Tag = forwardRef(function Tag({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }, ref) {
+const Tag = forwardRef(function Tag({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, removeLabel = defaultRemoveLabel, isDisabled, "data-testid": testId, ...dataAttributes }, ref) {
     const { colors } = useCustomTheme();
     const isInteractive = !!onTagClick;
     if (display === "dot") {
-        return (_jsxs(Flex, { ref: ref, as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? focusVisibleStyles(colors) : undefined, children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: dotColor(colors, tone, colorScheme) }), _jsx(Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+        return (_jsxs(Flex, { ref: ref, as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, ...dataAttributes, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? focusVisibleStyles(colors) : undefined, children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: dotColor(colors, tone, colorScheme) }), _jsx(Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
     }
-    return (_jsxs(ChakraTag, { ref: ref, size: size, variant: variant, colorScheme: tone ? toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && _jsx(TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })) : (_jsx(TagLabel, { noOfLines: undefined, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
-                (onIconClick ? (_jsx(Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
+    return (_jsxs(ChakraTag, { ref: ref, size: size, variant: variant, colorScheme: tone ? toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, ...dataAttributes, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && _jsx(TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })) : (_jsx(TagLabel, { noOfLines: undefined, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
+                (onIconClick ? (_jsx(Box, { as: "button", type: "button", "aria-label": typeof removeLabel === "function" ? removeLabel(label) : removeLabel, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
                         e.stopPropagation();
                         if (!isDisabled)
                             onIconClick();

package/dist/esm/Components/Tag/Tag.styles.js

@@ -4,6 +4,7 @@ import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
 import { fontSizes } from "../../Theme/tokens/primitives/typography.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";
 export const INTERACTIVE_HOVER = "&[data-interactive]:hover";
@@ -77,9 +78,9 @@ export const Tag = {
                 container: {
                     bg,
                     color: fg,
-                    boxShadow: `inset 0 0 0 0.0625rem ${border}`,
-                    [INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 0.0625rem ${hoverBorder}` },
-                    [INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 0.0625rem ${activeBorder}` },
+                    boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${border}`,
+                    [INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${hoverBorder}` },
+                    [INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${activeBorder}` },
                 },
             };
         },
@@ -90,7 +91,7 @@ export const Tag = {
             return {
                 container: {
                     border: "none",
-                    boxShadow: `inset 0 0 0 0.0625rem ${ink}`,
+                    boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${ink}`,
                     color: ink,
                     bg: "transparent",
                     [INTERACTIVE_HOVER]: { bg: softTint(c, 16) },

package/dist/esm/Components/Tag/tagDot.js

@@ -1,17 +1,24 @@
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { toneToSemantic } from "../../Theme/tokens/builders/tone.js";
+import { scaleNamed } from "../../Theme/tokens/builders/paletteScale.js";
+import { warnUnknownColorScheme } from "../../Theme/chakra/paletteFromTheme.js";
 const SCALE_KEYS = [
     "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
     "green", "teal", "blue", "cyan", "purple", "pink",
 ];
+const themedScale = (colors, colorScheme) => {
+    const scale = SCALE_KEYS.includes(colorScheme) ? scaleNamed(colors, colorScheme) : undefined;
+    if (scale)
+        return scale;
+    warnUnknownColorScheme(colorScheme);
+    return colors.gray;
+};
 export const dotColor = (colors, tone, colorScheme) => {
     const surfaces = [colors.background[50], colors.backgroundColor.main];
     if (tone === "neutral")
         return colors.textMuted;
     const scale = tone
         ? colors.semantic[toneToSemantic[tone]]
-        : SCALE_KEYS.includes(colorScheme)
-            ? colors[colorScheme]
-            : colors.gray;
+        : themedScale(colors, colorScheme);
     return surfaces.reduce((ink, surface) => liftToContrast(ink, surface), scale[500]);
 };

package/dist/esm/Components/TagInput/TagInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useMemo, useRef, useState } from "react";
 import { Box, Flex, Input, VisuallyHidden, useMergeRefs } from "@chakra-ui/react";
 import { X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -12,8 +12,8 @@ import FieldMessage from "../Common/FieldMessage.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
 import { getSearchSelectSizeStyles } from "../SearchSelect/searchSelectSize.js";
 import Tag from "../Tag/Tag.js";
-import { addTags, hasSeparator, splitEntries } from "./tagEntries.js";
-const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+import { addTags, hasSeparator, resolveTagInputLabels, splitEntries } from "./tagEntries.js";
+const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, labels, width = "100%", }, ref) {
     const theme = useCustomTheme();
     const s = getSearchSelectSizeStyles(size);
     const inputRef = useRef(null);
@@ -25,11 +25,12 @@ const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTa
     const shownError = rejection !== null && rejection !== void 0 ? rejection : errorMessage;
     const ids = useFieldIds(id, { error: isInvalid, errorMessage: shownError, helperText });
     const locked = isDisabled || isReadOnly;
+    const messages = useMemo(() => resolveTagInputLabels(labels), [labels]);
     const commit = (text) => {
-        const result = addTags(value, splitEntries(text), { validate, maxTags, allowDuplicates });
+        const result = addTags(value, splitEntries(text), { validate, maxTags, allowDuplicates, labels: messages });
         if (result.added.length) {
             onChange(result.tags);
-            setAnnouncement(`Added ${result.added.join(", ")}`);
+            setAnnouncement(messages.added(result.added));
         }
         setRejection(result.message);
         setDraft(result.rejected.join(", "));
@@ -37,7 +38,7 @@ const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTa
     const removeAt = (index) => {
         const removed = value[index];
         onChange(value.filter((_, i) => i !== index));
-        setAnnouncement(`Removed ${removed}`);
+        setAnnouncement(messages.removed(removed));
         setRejection(null);
     };
     const onKeyDown = (event) => {
@@ -82,7 +83,7 @@ const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTa
                 }, _hover: isDisabled || isInvalid ? undefined : { borderColor: fieldHoverBorder(theme.colors) }, _focusWithin: {
                     borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
                     boxShadow: fieldFocusRing(theme),
-                }, children: [value.map((tag, index) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: tag, isDisabled: isDisabled, icon: locked ? undefined : X, onIconClick: locked
+                }, children: [value.map((tag, index) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: tag, removeLabel: messages.remove, isDisabled: isDisabled, icon: locked ? undefined : X, onIconClick: locked
                             ? undefined
                             : () => {
                                 var _a;

package/dist/esm/Components/TagInput/tagEntries.js

@@ -1,3 +1,15 @@
+export const DEFAULT_TAG_INPUT_LABELS = {
+    maxTags: (max) => `You can add up to ${max} ${max === 1 ? "tag" : "tags"}.`,
+    duplicate: (entry) => `"${entry}" is already added.`,
+    invalid: (entry) => `"${entry}" is not valid.`,
+    added: (entries) => `Added ${entries.join(", ")}`,
+    removed: (entry) => `Removed ${entry}`,
+    remove: (entry) => `Remove ${entry}`,
+};
+export const resolveTagInputLabels = (labels) => ({
+    ...DEFAULT_TAG_INPUT_LABELS,
+    ...labels,
+});
 const SEPARATORS = /[,\r\n]/;
 export const hasSeparator = (text) => SEPARATORS.test(text);
 export const splitEntries = (text) => text
@@ -6,14 +18,14 @@ export const splitEntries = (text) => text
     .filter(Boolean);
 const fold = (tag) => tag.toLocaleLowerCase();
 const rejection = (entry, tags, seen, rules) => {
-    const { validate, maxTags, allowDuplicates = false } = rules;
+    const { validate, maxTags, allowDuplicates = false, labels } = rules;
     if (maxTags !== undefined && tags.length >= maxTags)
-        return `You can add up to ${maxTags} ${maxTags === 1 ? "tag" : "tags"}.`;
+        return labels.maxTags(maxTags);
     if (!allowDuplicates && seen.has(fold(entry)))
-        return `"${entry}" is already added.`;
+        return labels.duplicate(entry);
     const verdict = validate === null || validate === void 0 ? void 0 : validate(entry, tags);
     if (verdict === false)
-        return `"${entry}" is not valid.`;
+        return labels.invalid(entry);
     if (typeof verdict === "string" && verdict)
         return verdict;
     return null;

package/dist/esm/Components/TimePicker/TimePicker.js

@@ -9,7 +9,7 @@ import { useFieldIds } from "../Common/useFieldIds.js";
 import { fieldControlStyles } from "../Common/fieldStyles.js";
 import { HOURS_12, HOURS_24, atTime, displayHour, isTwelveHour, meridiemOf, minuteOptions, pad2, toHour24, } from "./timeParts.js";
 const EMPTY = "";
-const TimePicker = forwardRef(function TimePicker({ value, date, onChange, use24Hour, dateFormat, minuteStep, baseDate, isDisabled, disabled: legacyDisabled, id, name, label, "aria-label": ariaLabel, isRequired = false, isInformation, informationMessage, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+const TimePicker = forwardRef(function TimePicker({ value, date, onChange, onClear, use24Hour, dateFormat, minuteStep, baseDate, isDisabled, disabled: legacyDisabled, id, name, label, "aria-label": ariaLabel, isRequired = false, isInformation, informationMessage, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
     var _a;
     const theme = useCustomTheme();
     const ids = useFieldIds(id, { error, errorMessage, helperText });
@@ -21,12 +21,16 @@ const TimePicker = forwardRef(function TimePicker({ value, date, onChange, use24
     const hour24 = current ? current.getHours() : null;
     const commit = (nextHour24, nextMinute) => { var _a; return onChange(atTime((_a = current !== null && current !== void 0 ? current : baseDate) !== null && _a !== void 0 ? _a : new Date(), nextHour24, nextMinute)); };
     const onHour = (event) => {
+        if (event.target.value === EMPTY)
+            return onClear === null || onClear === void 0 ? void 0 : onClear();
         const picked = Number(event.target.value);
         const next = twelveHour ? toHour24(picked, hour24 === null ? "AM" : meridiemOf(hour24)) : picked;
         commit(next, current ? current.getMinutes() : 0);
     };
-    const onMinute = (event) => commit(hour24 !== null && hour24 !== void 0 ? hour24 : 0, Number(event.target.value));
+    const onMinute = (event) => event.target.value === EMPTY ? onClear === null || onClear === void 0 ? void 0 : onClear() : commit(hour24 !== null && hour24 !== void 0 ? hour24 : 0, Number(event.target.value));
     const onMeridiem = (event) => {
+        if (event.target.value === EMPTY)
+            return onClear === null || onClear === void 0 ? void 0 : onClear();
         const meridiem = event.target.value === "PM" ? "PM" : "AM";
         commit(toHour24(hour24 === null ? 12 : displayHour(hour24, true), meridiem), current ? current.getMinutes() : 0);
     };
@@ -38,7 +42,7 @@ const TimePicker = forwardRef(function TimePicker({ value, date, onChange, use24
         sx: selectSx,
         "aria-describedby": ids.describedBy,
     };
-    const placeholder = current ? null : (_jsx("option", { value: EMPTY, disabled: true, children: "--" }));
+    const placeholder = current && !onClear ? null : (_jsx("option", { value: EMPTY, disabled: !current, children: "--" }));
     return (_jsxs(FormControl, { isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, children: [label && (_jsx(Box, { id: ids.labelId, children: _jsx(TextLabel, { label: label, id: `${ids.inputId}-hour`, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }) })), _jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsxs(Select, { ...shared, ref: ref, id: `${ids.inputId}-hour`, "aria-label": "Hour", value: hour24 === null ? EMPTY : displayHour(hour24, twelveHour), onChange: onHour, children: [placeholder, (twelveHour ? HOURS_12 : HOURS_24).map((hour) => (_jsx("option", { value: hour, children: pad2(hour) }, hour)))] }), _jsxs(Select, { ...shared, id: `${ids.inputId}-minute`, "aria-label": "Minute", value: current ? current.getMinutes() : EMPTY, onChange: onMinute, children: [placeholder, minutes.map((minute) => (_jsx("option", { value: minute, children: pad2(minute) }, minute)))] }), twelveHour && (_jsxs(Select, { ...shared, id: `${ids.inputId}-meridiem`, "aria-label": "AM or PM", value: hour24 === null ? EMPTY : meridiemOf(hour24), onChange: onMeridiem, children: [placeholder, _jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] }))] }), name && _jsx("input", { type: "hidden", name: name, value: current ? `${pad2(current.getHours())}:${pad2(current.getMinutes())}` : EMPTY }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 TimePicker.displayName = "TimePicker";

package/dist/esm/Components/Timeline/Timeline.js

@@ -4,7 +4,7 @@ import { ArrowRight, FileText, IndianRupee, Paperclip, Pencil, PencilLine, Plus,
 import React from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
@@ -153,12 +153,15 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
     var _a, _b;
     const isEditing = activeEditNoteId === note.log_note_id;
     const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
-    const noteChip = bandOn(colors.primary[50], colors.gray[50]);
+    const noteBox = bandOn(colors.gray[50], colors.background[50]);
+    const noteChip = bandOn(colors.primary[50], noteBox);
     const noteChipInk = accentTextOnCanvas(colors.primary, noteChip);
+    const chipHover = bandOn(colors.primary[100], noteChip);
+    const chipHoverInk = accentTextOnCanvas(colors.primary, chipHover);
     if (isEditing) {
         return (_jsx(Box, { children: _jsx(NoteTextArea, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
     }
-    return (_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.primary, colors.gray[50]), display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (_jsx(Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: reducedMotionSx(), children: isDeleting ? (_jsx(Spinner, { size: "xs", color: colors.textMuted })) : (_jsxs(_Fragment, { children: [onEditNote && (_jsx(Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Edit note", sx: focusVisibleStyles(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+    return (_jsxs(Box, { position: "relative", zIndex: 1, bg: noteBox, border: `${BORDER_WIDTHS.hairline} solid ${cardRule(colors)}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.primary, noteBox), display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && (_jsx(Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: reducedMotionSx(), children: isDeleting ? (_jsx(Spinner, { size: "xs", color: colors.textMuted })) : (_jsxs(_Fragment, { children: [onEditNote && (_jsx(Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Edit note", sx: focusVisibleStyles(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
                                             bg: noteChip,
                                             color: noteChipInk,
                                         }, onClick: (e) => {
@@ -170,7 +173,7 @@ const NoteItem = React.memo(function NoteItem({ note, event, index, colors, acti
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
-                                        }, children: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => (_jsxs(Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: noteChip, color: noteChipInk, fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && (_jsxs(Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+                                        }, children: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => (_jsxs(Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: noteChip, color: noteChipInk, fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: chipHover, color: chipHoverInk }, children: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && (_jsxs(Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
 });
 // The colored event card (shared by both the desktop "tree" and mobile rail).
 // `accent` decides which edge carries the colored bar (pointing toward the spine).
@@ -181,15 +184,16 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
     const clickable = typeof onEventClick === "function";
     const actor = formatName(event.action_by);
     const addNoteHover = bandOn(colors.primary[50], colors.background[50]);
+    const changeFromFill = bandOn(colors.gray[50], colors.background[50]);
     return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, ...(clickable && {
                     transition: CARD_TRANSITION,
                     _hover: {
                         borderColor: scale[300],
                         boxShadow: "md",
-                        transform: "translateY(-0.063rem)",
+                        transform: "translateY(-1px)",
                     },
                     sx: reducedMotionSx({ transform: "none" }),
-                }), children: [clickable && (_jsx(Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: focusVisibleStyles(colors) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Text, { fontSize: fontSizes["xs-plus"], fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), _jsx(Box, { as: "span", fontSize: fontSizes["xs-minus"], fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: accentTextOnCanvas(scale, scale[50]), bg: scale[50], border: `${BORDER_WIDTHS.hairline} solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), _jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && (_jsx(Box, { mt: 1.5, fontSize: fontSizes.xs, color: colors.text[700], children: event.description })), changes.length > 0 && (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => (_jsxs(Flex, { align: "center", gap: 1.5, fontSize: fontSizes["xs-minus"], lineHeight: "1.4", flexWrap: "wrap", children: [_jsx(Text, { fontWeight: 600, color: colors.text[700], children: toWords(c.field) }), c.from !== null && c.from !== undefined && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), _jsx(Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: _jsx(ArrowRight, { size: 11 }) })] })), _jsx(Box, { as: "span", color: accentTextOnCanvas(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Tooltip, { label: actor, placement: "top", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: accentTextOnCanvas(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), _jsxs(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, children: ["by", " ", _jsx(Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && (_jsx(Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+                }), children: [clickable && (_jsx(Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: focusVisibleStyles(colors) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Text, { fontSize: fontSizes["xs-plus"], fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), _jsx(Box, { as: "span", fontSize: fontSizes["xs-minus"], fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: accentTextOnCanvas(scale, scale[50]), bg: scale[50], border: `${BORDER_WIDTHS.hairline} solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), _jsx(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && (_jsx(Box, { mt: 1.5, fontSize: fontSizes.xs, color: colors.text[700], children: event.description })), changes.length > 0 && (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => (_jsxs(Flex, { align: "center", gap: 1.5, fontSize: fontSizes["xs-minus"], lineHeight: "1.4", flexWrap: "wrap", children: [_jsx(Text, { fontWeight: 600, color: colors.text[700], children: toWords(c.field) }), c.from !== null && c.from !== undefined && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", color: accentTextOnCanvas(colors.gray, changeFromFill), bg: changeFromFill, borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), _jsx(Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: _jsx(ArrowRight, { size: 11 }) })] })), _jsx(Box, { as: "span", color: accentTextOnCanvas(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Tooltip, { label: actor, placement: "top", hasArrow: true, children: _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: accentTextOnCanvas(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), _jsxs(Text, { fontSize: fontSizes["xs-minus"], color: colors.textMuted, children: ["by", " ", _jsx(Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && (_jsx(Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     setActiveNoteEventIndex(isActiveNote ? null : index);
                                 }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, px: 2, py: 1, borderRadius: "md", fontSize: fontSizes.xs, fontWeight: 600, color: accentTextOnCanvas(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
@@ -197,7 +201,7 @@ const EventCard = React.memo(function EventCard({ event, index, accent, colors,
                                     color: addNoteHover === colors.primary[50]
                                         ? undefined
                                         : accentTextOnCanvas(colors.primary, addNoteHover),
-                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && (_jsx(Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: event.notes.map((note, noteIndex) => {
+                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && (_jsx(Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${BORDER_WIDTHS.hairline} solid ${cardRule(colors)}`, children: event.notes.map((note, noteIndex) => {
                             var _a;
                             return (_jsx(NoteItem, { note: note, event: event, index: index, colors: colors, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEditNote: onEditNote, onDeleteNote: onDeleteNote }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
                         }) }))] }), isActiveNote && (_jsx(Box, { mt: 2, children: _jsx(NoteTextArea, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
@@ -238,10 +242,10 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // Mobile: single left rail (alternating doesn't read well on narrow widths)
     // -------------------------------------------------------------------------
     if (isMobile) {
-        return (_jsx(Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsxs(Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [_jsx(Text, { fontSize: fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), _jsx(Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[200] })] }), _jsxs(Box, { position: "relative", children: [_jsx(Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+        return (_jsx(Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => (_jsxs(Box, { mb: 2, children: [_jsxs(Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [_jsx(Text, { fontSize: fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), _jsx(Box, { flex: "1", h: BORDER_WIDTHS.hairline, bg: colors.boxborder[200] })] }), _jsxs(Box, { position: "relative", children: [_jsx(Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: liftToContrast(colors.gray[300], colors.backgroundColor.main, AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
                                 var _a;
                                 const scale = getEventScale(colors, event.title);
-                                return (_jsxs(Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
+                                return (_jsxs(Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 ${BORDER_WIDTHS.hairline} ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
                             })] })] }, date))) }));
     }
     // -------------------------------------------------------------------------
@@ -253,7 +257,7 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
                         const scale = getEventScale(colors, event.title);
                         return (_jsxs(Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, sx: OFFSCREEN_SKIP, children: [_jsx(Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: scale[300], left: isLeft
                                         ? `calc(50% - ${SPINE_GAP})`
-                                        : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), _jsx(Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 2, children: getIcon(event, 15) }), _jsx(Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: _jsx(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
+                                        : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), _jsx(Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 ${BORDER_WIDTHS.hairline} ${scale[200]}`, zIndex: 2, children: getIcon(event, 15) }), _jsx(Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: _jsx(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
                     })] }, date)))] }));
 };
 export default Timeline;

package/dist/esm/Components/Toaster/Toaster.js

@@ -11,6 +11,7 @@ import { motionTransition, transitionFor } from "../../Theme/tokens/primitives/m
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
 import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
 const ToasterContext = createContext(undefined);
 const shrink = keyframes `
   from { transform: scaleX(1); }
@@ -36,7 +37,7 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         , { 
             // The single live-region root: an explicit aria-live here, on the card's own
             // root, keeps errors from being announced a second time by a duplicate wrapper.
-            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `${BORDER_WIDTHS.hairline} solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
                 isolation: "isolate",
                 transition: transitionFor(["box-shadow"]),
                 _hover: { boxShadow: "lg" },

package/dist/esm/Components/Toggle/TableToggle.js

@@ -14,7 +14,7 @@ const TRACK_HEIGHT = BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
 const INK_TRANSITION = transitionFor(["color"], "base");
 const PILL_TRANSITION = transitionFor(["transform", "width"], "base", "out");
-/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
+/** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl. */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = useCustomTheme();
     const { colors } = theme;

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
 import { Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
 import { resolveGradient } from "../../Theme/tokens/builders/gradientInk.js";
 import { contrastRatio } from "../../Theme/tokens/builders/color.js";
 import { AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
@@ -45,7 +46,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
     const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
     const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: 700, textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? DISABLED_OPACITY : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: 700, textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
             ? undefined
             : {
                 transform: "translateY(-2px)",
@@ -69,6 +70,6 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
                 },
                 ...reducedMotionSx({ "&::before": { transition: "none" } }),
             }
-            : { ...focusVisibleStyles(c), ...reducedMotionSx() }, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: 700, color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : { ...focusVisibleStyles(c), ...reducedMotionSx() }, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor, label: "" })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: 700, color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 export default UpgradeButton;