pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.62

package/dist/esm/Components/StatCard/StatCard.js

@@ -4,12 +4,13 @@ import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 const StatCardSkeleton = ({ hasIcon }) => (_jsxs(Flex, { direction: "column", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [hasIcon && _jsx(Skeletons, { type: "skeleton", height: 8, width: 8 }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" })] }), _jsx(Skeletons, { type: "skeleton", height: 7, width: "55%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" })] }));
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, ...rest }) => {
     const { colors } = useCustomTheme();
     const isInteractive = !!onClick && !isLoading;
     const deltaColor = trend
@@ -32,10 +33,10 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, spar
         px: 5,
         py: 4,
     };
-    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
+    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: NUMERIC_TEXT, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: NUMERIC_TEXT, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
-        return (_jsx(Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+        return (_jsx(Box, { ...rest, ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }
-    return (_jsx(Box, { as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: transitionFor(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: content }));
+    return (_jsx(Box, { ...rest, as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: transitionFor(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: content }));
 };
 export default StatCard;

package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js

@@ -7,7 +7,7 @@ import PriceBlock from "../PriceBlock/PriceBlock.js";
 import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
 import { glassStyles } from "../MediaGallery/glass.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { MOTION_EASE, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { MOTION_EASE, MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import zIndices from "../../Theme/tokens/primitives/zIndices.js";
 import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
 const DEFAULT_LABELS = {
@@ -61,7 +61,7 @@ const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "st
         gridArea: "1 / 1",
         opacity: on ? 1 : 0,
         visibility: on ? "visible" : "hidden",
-        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : 150}ms`,
+        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : MOTION_MS.fast}ms`,
     });
     const label = (key) => {
         const on = key === active;

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

@@ -1,32 +1,48 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from "react";
-import { Button, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, VStack, } from "@chakra-ui/react";
+import React, { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Button, IconButton, Popover, PopoverAnchor, PopoverBody, PopoverContent, Portal, VStack, } from "@chakra-ui/react";
 import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+const assignRef = (ref, value) => {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref)
+        ref.current = value;
+};
+const TriggerAnchor = forwardRef(({ target }, ref) => {
+    useLayoutEffect(() => {
+        assignRef(ref, target.current);
+        return () => assignRef(ref, null);
+    }, [ref, target]);
+    return null;
+});
+TriggerAnchor.displayName = "TriggerAnchor";
 const TableActions = React.memo(({ row }) => {
     var _a;
     const [isOpen, setIsOpen] = useState(false);
     const ref = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverId = useId();
     const theme = useCustomTheme();
-    // Listen for "close-all-popovers"
-    useEffect(() => {
-        const handler = () => setIsOpen(false);
-        window.addEventListener("close-all-popovers", handler);
-        return () => window.removeEventListener("close-all-popovers", handler);
-    }, []);
-    // Detect outside click
     useEffect(() => {
+        if (!isOpen)
+            return;
+        const trigger = triggerRef.current;
+        const closeAll = () => setIsOpen(false);
         const handleClickOutside = (event) => {
             if (ref.current && !ref.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
-        if (isOpen) {
-            // ✅ Use click instead of mousedown
-            document.addEventListener("click", handleClickOutside);
-        }
+        window.addEventListener("close-all-popovers", closeAll);
+        document.addEventListener("click", handleClickOutside);
         return () => {
+            window.removeEventListener("close-all-popovers", closeAll);
             document.removeEventListener("click", handleClickOutside);
+            requestAnimationFrame(() => {
+                if (document.activeElement === document.body)
+                    trigger === null || trigger === void 0 ? void 0 : trigger.focus({ preventScroll: true });
+            });
         };
     }, [isOpen]);
     const handleOpen = () => {
@@ -37,19 +53,19 @@ const TableActions = React.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
-                                            var _a;
-                                            (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
-                                            var _a;
-                                            (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
-                                            var _a;
-                                            (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            handleClose();
-                                        }, children: [_jsx(Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && (_jsx(Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) }))] }) }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(IconButton, { ref: triggerRef, id: `popover-trigger-${popoverId}`, "aria-label": "Actions", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": `popover-content-${popoverId}`, color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }), isOpen && (_jsxs(Popover, { id: popoverId, placement: "bottom-start", isOpen: true, onClose: handleClose, closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverAnchor, { children: _jsx(TriggerAnchor, { target: triggerRef }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
+                                                var _a;
+                                                (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [_jsx(Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
+                                                var _a;
+                                                (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
+                                                handleClose();
+                                            }, children: [_jsx(Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && (_jsx(Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) })] }))] }));
 });
 TableActions.displayName = "TableActions";
 export default TableActions;

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, IconButton, Spinner, Td, Tr } from "@chakra-ui/react";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 import { normalizeTableCellValue, buildTablePalette, pickTableColor } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { TableBodyLoading } from "./TableLoading.js";
@@ -16,6 +17,7 @@ import { columnLabelText, isPrimitiveLabel } from "../columnLabel.js";
 import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../../Theme/chakra/motion.js";
 import { DETAIL_SLOT_PX, RowDetailRow, RowDetailToggle, detailDomIds } from "./rowDetail.js";
+import { useRowMeasurer } from "./rowMeasurer.js";
 const getRowId = (row) => row.id;
 const getRowContent = (row) => typeof row.content === "function"
     ? row.content
@@ -48,9 +50,7 @@ const StatusCell = ({ value, onSolid, align, }) => (_jsx(Box, { display: "flex",
 // the group header already uses, so an override hex behaves identically in both.
 const StatusPill = ({ value, soft, ink, radius, }) => (_jsx(Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
-const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
-    // Measured-height virtualization: report this row's real height (main + any
-    // expanded panel) so the windower can place variable/expandable rows exactly.
+const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, isStriped, rowDetail, isDetailOpen = false, detailLeft = 0, detailColSpan = 0, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, measurer, }) => {
     const mainRowRef = useRef(null);
     const expandedRowRef = useRef(null);
     const detailRowRef = useRef(null);
@@ -58,36 +58,15 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
     const detailNode = rowDetail ? rowDetail.render(row) : null;
     const hasDetail = detailNode !== null && detailNode !== undefined;
     const detailOpen = isDetailOpen && hasDetail;
-    const detailIds = rowDetail ? detailDomIds(rowDetail.idPrefix, getRowId(row)) : null;
+    const rowId = getRowId(row);
+    const detailIds = rowDetail ? detailDomIds(rowDetail.idPrefix, rowId) : null;
+    const expandedOpen = isExpanded && hasContent;
     useLayoutEffect(() => {
-        if (!onMeasure)
+        if (!measurer)
             return;
-        const measure = () => {
-            var _a, _b, _c, _d, _e, _f;
-            const main = (_b = (_a = mainRowRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
-            const exp = isExpanded && hasContent ? (_d = (_c = expandedRowRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0 : 0;
-            const det = detailOpen ? (_f = (_e = detailRowRef.current) === null || _e === void 0 ? void 0 : _e.offsetHeight) !== null && _f !== void 0 ? _f : 0 : 0;
-            const h = main + exp + det;
-            if (h > 0)
-                onMeasure(getRowId(row), h);
-        };
-        measure();
-        const raf = requestAnimationFrame(measure);
-        let ro;
-        if (typeof ResizeObserver !== "undefined") {
-            ro = new ResizeObserver(measure);
-            if (mainRowRef.current)
-                ro.observe(mainRowRef.current);
-            if (expandedRowRef.current)
-                ro.observe(expandedRowRef.current);
-            if (detailRowRef.current)
-                ro.observe(detailRowRef.current);
-        }
-        return () => {
-            cancelAnimationFrame(raf);
-            ro === null || ro === void 0 ? void 0 : ro.disconnect();
-        };
-    }, [onMeasure, isExpanded, hasContent, detailOpen, row]);
+        const parts = [mainRowRef.current, expandedOpen ? expandedRowRef.current : null, detailOpen ? detailRowRef.current : null];
+        return measurer.track(rowId, parts.filter((el) => el !== null));
+    }, [measurer, rowId, expandedOpen, detailOpen]);
     const handleCellClick = useCallback((header) => {
         if (!header.node && onRowClick) {
             onRowClick(row, {
@@ -206,15 +185,21 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
     const [viewportH, setViewportH] = useState(0);
     // Measured row heights keyed by row id (stable across scroll/paging).
     const [measuredHeights, setMeasuredHeights] = useState(new Map());
-    const reportHeight = useCallback((id, h) => {
-        setMeasuredHeights((prev) => {
-            if (prev.get(id) === h)
-                return prev;
-            const next = new Map(prev);
-            next.set(id, h);
+    // NOTE: flushSync lands the batch before paint, as the old per-row layout effect did.
+    const applyHeights = useCallback((heights) => {
+        flushSync(() => setMeasuredHeights((prev) => {
+            let next = prev;
+            heights.forEach((h, id) => {
+                if (next.get(id) === h)
+                    return;
+                if (next === prev)
+                    next = new Map(prev);
+                next.set(id, h);
+            });
             return next;
-        });
+        }));
     }, []);
+    const measurer = useRowMeasurer(applyHeights);
     useEffect(() => {
         const el = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
         if (!el || !(shouldVirtualize || groupVirtualize))
@@ -432,7 +417,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
         const windowItems = groupVirtualize ? items.slice(firstI, lastI) : items;
         return (_jsxs(_Fragment, { children: [gTopPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gTopPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gTopPad } }) })), windowItems.map((it, k) => {
                     var _a;
-                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: groupVirtualize && rowDetail ? reportHeight : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
+                    return it.kind === "header" ? (_jsx(TableGroupRow, { label: it.g.label, value: it.g.value, count: it.g.rows.length, color: it.g.color, collapsed: collapsedGroups.has(it.g.value), colSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, onToggle: () => toggleGroup(it.g.value), onAddItem: onAddItem }, `h-${it.g.value}`)) : (_jsx(TableRow, { row: it.row, rowIndex: firstI + k, isChecked: selectionsSet.has(getRowId(it.row)), isExpanded: expandedRows.has(firstI + k), isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: it.g.color.solid, isStriped: stripe && it.pos % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(it.row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: firstI + k + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: groupVirtualize && rowDetail ? measurer : undefined }, (_a = getRowId(it.row)) !== null && _a !== void 0 ? _a : `r-${firstI + k}`));
                 }), gBottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: gBottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: gBottomPad } }) }))] }));
     }
     return (_jsxs(_Fragment, { children: [isLoading && data.length > 0 && (_jsx(Tr, { children: _jsx(Td, { colSpan: totalVisibleColumns, p: 0, border: "none", position: "relative", height: 0, children: _jsx(Box, { position: "absolute", top: 4, left: "50%", transform: "translateX(-50%)", zIndex: 10, children: _jsx(Spinner, { size: "sm", color: theme.colors.accentText }) }) }) })), shouldVirtualize && topPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: topPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: topPad } }) })), visibleRows.map((row, i) => {
@@ -441,7 +426,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, rowsPerPage, columnWid
                 const rowIndex = startRow + index;
                 const isExpanded = expandedRows.has(rowIndex);
                 const isChecked = selectionsSet.has(getRowId(row));
-                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, onMeasure: shouldVirtualize ? reportHeight : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
+                return (_jsx(TableRow, { row: row, rowIndex: rowIndex, isChecked: isChecked, isExpanded: isExpanded, isContent: isContent, isLink: isLink, isCheckbox: isCheckbox, isLoading: isLoading, isActionFreeze: isActionFreeze, columns: columns, leftOffsets: leftOffsets, noBorders: noBorders, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, theme: theme, borderStyle: borderStyle, selectedBg: selectedBg, selectedFrozenBg: selectedFrozenBg, hoverStyle: hoverStyle, rowHeight: rowHeight, cellPy: cellPy, palette: palette, accentColor: accentColors === null || accentColors === void 0 ? void 0 : accentColors[getRowId(row)], isStriped: stripe && index % 2 === 1, rowDetail: rowDetail, isDetailOpen: !!(expandedIds === null || expandedIds === void 0 ? void 0 : expandedIds.has(getRowId(row))), detailLeft: detailLeft, detailColSpan: totalVisibleColumns, ariaRowIndex: index + 2, handleCheckbox: handleCheckbox, onRowClick: rowClickHandler, toggleRowExpansion: toggleRowExpansion, measurer: shouldVirtualize ? measurer : undefined }, (_a = getRowId(row)) !== null && _a !== void 0 ? _a : rowIndex));
             }), shouldVirtualize && bottomPad > 0 && (_jsx("tr", { "aria-hidden": "true", style: { height: bottomPad }, children: _jsx("td", { colSpan: totalVisibleColumns, style: { padding: 0, border: "none", height: bottomPad } }) }))] }));
 };
 export default TableBody;

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

@@ -0,0 +1,66 @@
+import { useEffect, useMemo } from "react";
+export const createRowMeasurer = (onHeights) => {
+    const rowOf = new Map();
+    const heightOf = new Map();
+    const elementsOf = new Map();
+    let observer = null;
+    const totalOf = (id) => {
+        var _a, _b;
+        let total = 0;
+        for (const el of (_a = elementsOf.get(id)) !== null && _a !== void 0 ? _a : [])
+            total += (_b = heightOf.get(el)) !== null && _b !== void 0 ? _b : 0;
+        return total;
+    };
+    const onResize = (entries) => {
+        const touched = new Set();
+        for (const { target } of entries) {
+            const id = rowOf.get(target);
+            if (id === undefined)
+                continue;
+            heightOf.set(target, target.offsetHeight);
+            touched.add(id);
+        }
+        const heights = new Map();
+        touched.forEach((id) => {
+            const total = totalOf(id);
+            if (total > 0)
+                heights.set(id, total);
+        });
+        if (heights.size > 0)
+            onHeights(heights);
+    };
+    const untrack = (id, elements) => {
+        for (const el of elements) {
+            observer === null || observer === void 0 ? void 0 : observer.unobserve(el);
+            rowOf.delete(el);
+            heightOf.delete(el);
+        }
+        if (elementsOf.get(id) === elements)
+            elementsOf.delete(id);
+    };
+    return {
+        track(id, elements) {
+            elementsOf.set(id, elements);
+            if (typeof ResizeObserver === "undefined")
+                return () => untrack(id, elements);
+            observer !== null && observer !== void 0 ? observer : (observer = new ResizeObserver(onResize));
+            for (const el of elements) {
+                rowOf.set(el, id);
+                observer.observe(el);
+            }
+            return () => untrack(id, elements);
+        },
+        dispose() {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            observer = null;
+            rowOf.clear();
+            heightOf.clear();
+            elementsOf.clear();
+        },
+    };
+};
+export const useRowMeasurer = (onHeights) => {
+    const measurer = useMemo(() => createRowMeasurer(onHeights), [onHeights]);
+    useEffect(() => () => measurer.dispose(), [measurer]);
+    return measurer;
+};

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

@@ -1,12 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef } from "react";
 import { Icon, IconButton, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useTheme, } from "@chakra-ui/react";
 import { columnLabelText } from "../columnLabel.js";
 import { EllipsisVertical, Search } from "lucide-react";
 const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
     const theme = useTheme();
     const searchRef = useRef(null);
-    const [refreshDataOnOpen, setRefreshDataOnOpen] = useState(false);
     const setColumnsSearchRef = useRef(setColumnsSearch);
     setColumnsSearchRef.current = setColumnsSearch;
     const debounceTimerRef = useRef(null);
@@ -17,12 +16,6 @@ const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, i
             setColumnsSearchRef.current(value);
         }, 700);
     }, []);
-    useEffect(() => {
-        if (columnsSearch.length && searchRef.current) {
-            searchRef.current.value = columnsSearch;
-        }
-        /* eslint-disable */
-    }, [refreshDataOnOpen]);
     // Auto-focus input when popover opens
     useEffect(() => {
         if (isOpen && searchRef.current) {
@@ -33,13 +26,9 @@ const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, i
             }, 100);
         }
     }, [isOpen]);
-    const handleOpen = () => {
-        setRefreshDataOnOpen((prev) => !prev);
-        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    };
-    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${columnLabelText(header)}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${columnLabelText(header)}...`, size: "xs", ref: searchRef, onChange: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: onOpen, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": `Filter ${columnLabelText(header)}`, icon: _jsx(EllipsisVertical, { size: 17, color: theme.colors.primary[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", bg: theme.colors.surfaceRaised, children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: theme.colors.textMuted, boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${columnLabelText(header)}...`, size: "xs", ref: searchRef, defaultValue: columnsSearch, onChange: (e) => {
                                         e.stopPropagation();
                                         debouncedSearch(e.target.value);
-                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));
+                                    }, onFocus: (e) => e.stopPropagation() })] }) }) }) }))] }));
 });
 export default TableFilters;

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

@@ -16,6 +16,11 @@ const mergeColumnWithPreference = (pref, originalCol) => {
     }
     return next;
 };
+const sameColumn = (a, b) => {
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
+};
+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([]);
@@ -59,24 +64,22 @@ const useTable = ({ data, isPagination, selections, onSelection, tablePreference
     useEffect(() => {
         var _a;
         const columnPreference = (_a = tablePreferences === null || tablePreferences === void 0 ? void 0 : tablePreferences.columns) !== null && _a !== void 0 ? _a : [];
-        if (Array.isArray(columnPreference) && columnPreference.length > 0) {
-            const mergedColumns = columnPreference.map((originalCol) => {
+        const next = Array.isArray(columnPreference) && columnPreference.length > 0
+            ? columnPreference.map((originalCol) => {
                 const prefCol = columns.find((c) => c.id === originalCol.id);
                 return prefCol
                     ? mergeColumnWithPreference(originalCol, prefCol)
                     : { ...originalCol };
-            });
-            setColumnsList(mergedColumns);
-        }
-        else {
-            setColumnsList(columns.map((col, i) => {
+            })
+            : columns.map((col, i) => {
                 var _a;
                 return ({
                     ...col,
                     isHidden: defaultVisibleColumns ? i >= defaultVisibleColumns : ((_a = col.isHidden) !== null && _a !== void 0 ? _a : false),
                 });
-            }));
-        }
+            });
+        // 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);

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

@@ -3,9 +3,9 @@ import { Badge } from "@chakra-ui/react";
 import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
 const BADGE_FONT_SIZE = {
     xs: "0.625rem",
-    sm: "0.6875rem",
-    md: "0.75rem",
-    lg: "0.8125rem",
+    sm: "xs-minus",
+    md: "xs",
+    lg: "xs-plus",
 };
 // Same resolveSoftTone(colors, scale, surface) pattern as SideBar/Header's own count badges.
 const CountBadge = ({ count, colors, scale, surface, size }) => {

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

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { forwardRef } from "react";
 import { Box } from "@chakra-ui/react";
 import { panelId, tabId, useTabsContext } from "../TabsContext.js";
 import { useTabAppearance } from "../useTabAppearance.js";
 import CountBadge from "./CountBadge.js";
-const Tab = ({ value, children, icon, count, isDisabled }) => {
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+const Tab = forwardRef(function Tab({ value, children, icon, count, isDisabled }, ref) {
     var _a;
     const ctx = useTabsContext();
-    const ref = useRef(null);
     const isSelected = ctx.selectedId === value;
     const isFocusTarget = ((_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId) === value;
     const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = useTabAppearance(isSelected, isDisabled);
     return (_jsxs(Box, { as: "button", type: "button", ref: ref, role: "tab", id: tabId(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? panelId(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), ...boxProps, children: [icon ? (_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: icon })) : null, _jsx(Box, { as: "span", children: children }), count !== undefined ? (_jsx(CountBadge, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
-};
+});
+Tab.displayName = "Tab";
 export default Tab;

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

@@ -6,19 +6,34 @@ import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { useTabsContext } from "../TabsContext.js";
 const ENABLED_TAB_SELECTOR = '[role="tab"]:not([aria-disabled="true"])';
 const findByValue = (container, value) => Array.from(container.querySelectorAll("[data-value]")).find((node) => node.dataset.value === value);
+const overshoot = (start, end, boxStart, boxEnd) => start < boxStart ? start - boxStart : Math.max(0, end - boxEnd);
+const revealWithinList = (list, tab) => {
+    const box = list.getBoundingClientRect();
+    const rect = tab.getBoundingClientRect();
+    list.scrollLeft += overshoot(rect.left, rect.right, box.left, box.right);
+    list.scrollTop += overshoot(rect.top, rect.bottom, box.top, box.bottom);
+};
 const TabList = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
     const { colors } = useCustomTheme();
     const ctx = useTabsContext();
     const ref = useRef(null);
     const isVertical = ctx.orientation === "vertical";
     const isLine = ctx.variant === "line";
+    const revealed = useRef(false);
     useEffect(() => {
         var _a, _b;
         const activeId = (_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId;
         if (!activeId || !ref.current)
             return;
         const el = findByValue(ref.current, activeId);
-        (_b = el === null || el === void 0 ? void 0 : el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
+        if (!el)
+            return;
+        if (!revealed.current) {
+            revealed.current = true;
+            revealWithinList(ref.current, el);
+            return;
+        }
+        (_b = el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
     }, [ctx.focusedId, ctx.selectedId]);
     const focusAndMaybeSelect = (el) => {
         el.focus();

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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Box, Flex, Icon, Tag as ChakraTag, TagLabel, TagLeftIcon, TagRightIcon, Text } from "@chakra-ui/react";
 import { toneToColorScheme } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -15,23 +17,24 @@ const ICON_SIZE = {
     lg: "1.1em",
 };
 const DOT_FONT_SIZE = {
-    xs: "0.75rem",
-    sm: "0.8125rem",
-    md: "0.875rem",
+    xs: "xs",
+    sm: "xs-plus",
+    md: "sm",
     lg: "0.9375rem",
 };
-/** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
+/** 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 { colors } = useCustomTheme();
     const isInteractive = !!onTagClick;
     if (display === "dot") {
-        return (_jsxs(Flex, { 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 ? 0.5 : 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, "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, { 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 &&
+    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) => {
                         e.stopPropagation();
                         if (!isDisabled)
                             onIconClick();
                     }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : (_jsx(TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
-};
+});
+Tag.displayName = "Tag";
 export default Tag;

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

@@ -2,6 +2,8 @@ import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 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 { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
 export const INTERACTIVE_HOVER = "&[data-interactive]:hover";
@@ -30,7 +32,7 @@ export const Tag = {
             transition: transitionFor(["background-color", "color", "border-color", "box-shadow"]),
             ...reducedMotionSx(),
             "&[data-interactive]": { cursor: "pointer" },
-            "&[data-disabled]": { opacity: 0.5, cursor: "not-allowed", pointerEvents: "none" },
+            "&[data-disabled]": { opacity: DISABLED_OPACITY, cursor: "not-allowed", pointerEvents: "none" },
         },
         label: {
             lineHeight: 1.45,
@@ -42,13 +44,13 @@ export const Tag = {
     }),
     sizes: {
         xs: {
-            container: { fontSize: "0.6875rem", px: 2, h: "1.25rem" },
+            container: { fontSize: fontSizes["xs-minus"], px: 2, h: "1.25rem" },
         },
         sm: {
-            container: { fontSize: "0.75rem", px: 2.5, h: "1.5rem" },
+            container: { fontSize: fontSizes.xs, px: 2.5, h: "1.5rem" },
         },
         md: {
-            container: { fontSize: "0.8125rem", px: 3, h: "1.75rem" },
+            container: { fontSize: fontSizes["xs-plus"], px: 3, h: "1.75rem" },
         },
         lg: {
             container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },