pixelize-design-library 2.3.22 → 2.4.1-beta.2

package/dist/Components/Table/components/TableBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,kBAAkB,EAAsC,MAAM,eAAe,CAAC;AAoUnG,QAAA,MAAM,SAAS,GAAI,0RAuBhB,kBAAkB,4CAoWpB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAc,kBAAkB,EAAsC,MAAM,eAAe,CAAC;AA2UnG,QAAA,MAAM,SAAS,GAAI,0RAuBhB,kBAAkB,4CAyWpB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -41,8 +41,10 @@ const react_1 = require("@chakra-ui/react");
 const react_2 = __importStar(require("react"));
 const table_1 = require("../../../Utils/table");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const TableLoading_1 = require("./TableLoading");
 const TableActions_1 = __importDefault(require("./TableActions"));
+const tableRowHoverStyle_1 = require("./tableRowHoverStyle");
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const TableGroupRow_1 = __importDefault(require("./TableGroupRow"));
@@ -58,11 +60,12 @@ const getRowContent = (row) => typeof row.content === "function"
     ? row.content
     : undefined;
 // Monday-style status cell: the whole cell is filled with the status color and
-// the label is centered in white.
-const StatusCell = ({ value }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: "white", textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+// the label is centered in whichever of white/black clears AA against that fill —
+// the fill can be a consumer hex we can't know in advance is light or dark.
+const StatusCell = ({ value, onSolid }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
 const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, hoverStyle, rowHeight, cellPy, palette, accentColor, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
     const selectedBg = (_c = (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a.opacity) === null || _b === void 0 ? void 0 : _b[16]) !== null && _c !== void 0 ? _c : (_d = theme.colors.disabled) === null || _d === void 0 ? void 0 : _d[100];
@@ -114,7 +117,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     const rowStyle = row.rowStyle;
     const rowContent = getRowContent(row);
     return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: accentSx, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.gray[600], icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { fontSize: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.background) === null || _r === void 0 ? void 0 : _r[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": "Select all rows", onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
-                        var _a, _b, _c, _d, _e, _f;
+                        var _a, _b, _c, _d, _e, _f, _g, _h;
                         if (header.isHidden)
                             return null;
                         const isFrozen = header.isFreeze;
@@ -122,19 +125,23 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                         const isStatus = header.type === "status" && !header.node;
                         const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
                         const statusColor = isStatus
-                            ? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus])
+                            ? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus], theme)
                             : null;
-                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                        // Guards a `statusColor` built by an older external caller that predates `onSolid`.
+                        const statusOnSolid = statusColor
+                            ? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : (0, accentText_1.onFilled)((_d = statusColor.solid) !== null && _d !== void 0 ? _d : "#8B3FC8", theme.colors.white, theme.colors.black)
+                            : undefined;
+                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : (_e = theme.colors.background) === null || _e === void 0 ? void 0 : _e[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
                                 ? "none"
-                                : `0.063rem solid ${(_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? "white" : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: isStatus && statusColor
+                                : `0.063rem solid ${(_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? statusOnSolid : (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[500], _hover: isStatus && statusColor
                                 ? EMPTY_HOVER
                                 : (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
                                     ? EMPTY_HOVER
-                                    : hoverStyle, children: isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                                    : hoverStyle, children: isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: statusOnSolid })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
                     }), isLink && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : (_t = (_s = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _s === void 0 ? void 0 : _s.background) === null || _t === void 0 ? void 0 : _t[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? ((0, jsx_runtime_1.jsx)(TableActions_1.default, { row: row })) : null }))] }), rowContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_1.Tr, { ref: expandedRowRef, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
-                        (isLink ? 1 : 0), p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md", children: rowContent(row) }) }) }))] }));
+                        (isLink ? 1 : 0), p: 2, children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 2, bg: (_u = theme.colors.background) === null || _u === void 0 ? void 0 : _u[50], borderRadius: "md", children: rowContent(row) }) }) }))] }));
 });
 const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
@@ -271,12 +278,11 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
     }, [columnWidths, isCheckbox]);
     const borderStyle = (0, react_2.useMemo)(() => { var _a; return noBorders ? "none" : `0.063rem solid ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]}`; }, [noBorders, (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border]);
-    const hoverStyle = (0, react_2.useMemo)(() => {
-        var _a, _b, _c, _d, _e;
-        return ({
-            backgroundColor: (_c = (_b = (_a = theme.colors.table) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors.secondary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[4],
-        });
-    }, [(_c = theme.colors.table) === null || _c === void 0 ? void 0 : _c.hover, (_d = theme.colors.secondary) === null || _d === void 0 ? void 0 : _d.opacity]);
+    // Dark mode needs a much brighter fill to be visible against a near-black row (`table.hover[300]`
+    // sits within ~1.2:1 of it) plus a flipped ink color so the existing (light-tuned) cell text
+    // stays legible on that brighter fill — see `tableRowHoverStyle.ts`.
+    const isDark = (0, accentText_1.isDarkCanvas)((_d = (_c = theme.colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
+    const hoverStyle = (0, react_2.useMemo)(() => (0, tableRowHoverStyle_1.getTableRowHoverStyle)(theme.colors, isDark), [theme.colors, isDark]);
     if (isLoading && data.length === 0) {
         return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }

package/dist/Components/Table/components/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAGL,oBAAoB,EACrB,MAAM,eAAe,CAAC;iTAyBpB,oBAAoB;AA+GvB,wBAAiC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAGL,oBAAoB,EACrB,MAAM,eAAe,CAAC;iTAyBpB,oBAAoB;AA+GvB,wBAAiC"}

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

@@ -8,6 +8,7 @@ const react_1 = require("@chakra-ui/react");
 const react_2 = require("react");
 const table_1 = require("../../../Utils/table");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
@@ -42,12 +43,14 @@ const TableHeader = ({ columns, isCheckbox, handleSort, headerRefs, columnWidths
 };
 exports.default = (0, react_2.memo)(TableHeader);
 const SortingIcon = (0, react_2.memo)(({ sortState, handleSortClick, }) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: { color: (_a = theme.colors.secondary) === null || _a === void 0 ? void 0 : _a[500] }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", ml: 2, onClick: handleSortClick, transition: "color 0.2s ease-in-out", color: theme.colors.gray[600], _hover: {
+            color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50]),
+        }, children: [sortState === "none" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { size: 14 }), sortState === "asc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), sortState === "desc" && (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 })] }));
 });
 const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbox, noBorders, columnsSort, headerRefs, columnsSearch, setColumnsSearch, handleSort, openFilterId, setOpenFilterId, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     const [isHovered, setIsHovered] = (0, react_2.useState)(false);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const isFrozen = header.isFreeze;
@@ -99,7 +102,7 @@ const ColumnHeader = (0, react_2.memo)(({ header, index, columnWidths, isCheckbo
     }, [handleSort]);
     const isFiltersEnabled = (isHovered && header.isSort) ||
         ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.secondary) === null || _o === void 0 ? void 0 : _o[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", children: [isFiltersEnabled && ((0, jsx_runtime_1.jsx)(Sorting, { isSorting: isSorting, header: header })), sortPriority > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_r = (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[16], color: (_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.primary) === null || _t === void 0 ? void 0 : _t[600], children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
+    return ((0, jsx_runtime_1.jsx)(react_1.Th, { ref: (el) => (headerRefs.current[index] = el), "aria-sort": ariaSort, textTransform: "capitalize", fontSize: 13, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, overflow: "hidden", borderTop: "none", borderBottom: noBorders ? "none" : `0.063rem solid ${(_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border[500]}`, borderRight: noBorders ? "none" : `0.063rem solid ${(_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.boxborder) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray[200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, height: 45, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, (_q = (_p = (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.table) === null || _o === void 0 ? void 0 : _o.hover) === null || _p === void 0 ? void 0 : _p[200]) !== null && _q !== void 0 ? _q : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.secondary) === null || _s === void 0 ? void 0 : _s[50]), lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "inline-block", overflow: "hidden", children: header.label }), (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", children: [isFiltersEnabled && ((0, jsx_runtime_1.jsx)(Sorting, { isSorting: isSorting, header: header })), sortPriority > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", ml: 1, fontSize: "0.625rem", fontWeight: 700, lineHeight: "1", borderRadius: "full", px: "0.3rem", py: "0.1rem", bg: (_v = (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u.opacity) === null || _v === void 0 ? void 0 : _v[16], color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.primary) === null || _x === void 0 ? void 0 : _x[600], children: sortPriority })), (0, jsx_runtime_1.jsx)(TableFilters_1.default, { header: header, setColumnsSearch: (searchVal) => setColumnsSearch((prev) => ({
                                 ...prev,
                                 [header.id]: searchVal,
                             })), columnsSearch: columnsSearch[header.id] || "", onClose: () => {

package/dist/Components/Table/components/tableRowHoverStyle.d.ts

@@ -0,0 +1,13 @@
+import type { PaletteProps } from "../../../Theme/tokens/types";
+/**
+ * Per-cell hover fill for a table row. `table.hover[300]` (the token built for this) still works
+ * in light mode — a pale tint against a white canvas — but in dark mode that rung sits within
+ * ~10 lightness points of the near-black canvas (both compressed near L7-15), so it computes to
+ * ~1.2:1 contrast: invisible, which is exactly what QA reported. `background[900]` is this
+ * palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas, verified
+ * numerically across brands) — but the row's resting ink (`text[500]`) is tuned for a near-black
+ * backdrop and goes illegible against a bright one, so hover must also flip `color`, mirroring how
+ * Jodit's own dark-mode hover rule flips text to its canvas color alongside the brighter fill.
+ */
+export declare const getTableRowHoverStyle: (colors: PaletteProps, isDark: boolean) => Record<string, string>;
+//# sourceMappingURL=tableRowHoverStyle.d.ts.map

package/dist/Components/Table/components/tableRowHoverStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableRowHoverStyle.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/components/tableRowHoverStyle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,GAAI,QAAQ,YAAY,EAAE,QAAQ,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAUlG,CAAC"}

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTableRowHoverStyle = void 0;
+/**
+ * Per-cell hover fill for a table row. `table.hover[300]` (the token built for this) still works
+ * in light mode — a pale tint against a white canvas — but in dark mode that rung sits within
+ * ~10 lightness points of the near-black canvas (both compressed near L7-15), so it computes to
+ * ~1.2:1 contrast: invisible, which is exactly what QA reported. `background[900]` is this
+ * palette's dark-mode "bright highlight" rung (~9.7-10.7:1 against the canvas, verified
+ * numerically across brands) — but the row's resting ink (`text[500]`) is tuned for a near-black
+ * backdrop and goes illegible against a bright one, so hover must also flip `color`, mirroring how
+ * Jodit's own dark-mode hover rule flips text to its canvas color alongside the brighter fill.
+ */
+const getTableRowHoverStyle = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    if (isDark) {
+        return {
+            backgroundColor: (_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[900]) !== null && _b !== void 0 ? _b : (_d = (_c = colors.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[300],
+            color: (_e = colors.backgroundColor) === null || _e === void 0 ? void 0 : _e.main,
+        };
+    }
+    return {
+        backgroundColor: (_h = (_g = (_f = colors.table) === null || _f === void 0 ? void 0 : _f.hover) === null || _g === void 0 ? void 0 : _g[300]) !== null && _h !== void 0 ? _h : (_k = (_j = colors.secondary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[4],
+    };
+};
+exports.getTableRowHoverStyle = getTableRowHoverStyle;

package/dist/Components/Table/filters/CompactSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompactSelect.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/CompactSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,OAAO,GAAG;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7D,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAgFlC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CompactSelect.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/CompactSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAKjD,MAAM,MAAM,OAAO,GAAG;IAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7D,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAiFlC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -4,7 +4,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [query, setQuery] = (0, react_1.useState)("");
     const filtered = (0, react_1.useMemo)(() => {
@@ -13,7 +16,7 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
             return options;
         return options.filter((o) => (o.label || "").toLowerCase().includes(q));
     }, [query, options]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: "gray.300", bg: "white", borderRadius: "0.25rem", onClick: () => setIsOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100", children: [filtered.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: "gray.300", bg: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "0.25rem", onClick: () => setIsOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: "gray.800", noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100", children: [filtered.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 1, cursor: "pointer", _hover: { bg: "gray.50" }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? "gray.100" : "transparent", onClick: () => {
                                                 onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                 setIsOpen(false);
                                                 setQuery("");

package/dist/Components/Table/filters/LeftFilterPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LeftFilterPane.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/LeftFilterPane.tsx"],"names":[],"mappings":"AA4BA,OAAsB,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAClC,CAAC;AAqQF,QAAA,MAAM,cAAc,GAAI,2GAUrB,mBAAmB,4CAoNrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LeftFilterPane.d.ts","sourceRoot":"","sources":["../../../../src/Components/Table/filters/LeftFilterPane.tsx"],"names":[],"mappings":"AA4BA,OAAsB,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACzC,mDAAmD;IACnD,YAAY,CAAC,EAAE,OAAO,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAClC,CAAC;AAmQF,QAAA,MAAM,cAAc,GAAI,2GAUrB,mBAAmB,4CAoNrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Components/Table/filters/LeftFilterPane.js

@@ -43,6 +43,7 @@ const lucide_react_1 = require("lucide-react");
 const framer_motion_1 = require("framer-motion");
 const react_3 = require("@chakra-ui/react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const RadioButton_1 = require("../../RadioButton/RadioButton");
 const TextOperationControls_1 = require("./TextOperationControls");
 const SelectOperationControls_1 = require("./SelectOperationControls");
@@ -70,12 +71,12 @@ function formatHeaderLabel(label) {
     }
     return `${parts.join(" ")}..`;
 }
-const SectionLabel = ({ label, flex = false, theme }) => {
+const SectionLabel = ({ label, flex = false }) => {
     const needsTooltip = label.length > LABEL_MAX_LENGTH;
     const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: flex ? "1" : undefined, textAlign: "left", fontWeight: "medium", fontSize: "sm", sx: { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: formatHeaderLabel(label) }));
     if (!needsTooltip)
         return content;
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem", children: content }));
+    return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: content }));
 };
 const ActiveItemControls = ({ activeItem, sec, setTextOperator, setTextValue }) => {
     var _a;
@@ -125,7 +126,7 @@ const SectionContent = ({ sec, selected, toggleItem, setTextOperator, setTextVal
 };
 // ─── Main Component ───────────────────────────────────────────────────────────
 const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: selectedProp, onApply, onClear, theme, isApplyLoading = false, filterMode = "sidebar", }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     const [isSearching, setIsSearching] = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search));
     const [localSelected, setLocalSelected] = (0, react_1.useState)({});
     const searchRef = (0, react_1.useRef)(null);
@@ -206,6 +207,6 @@ const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: se
         }
         return filteredSections.map((sec) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200", children: (0, jsx_runtime_1.jsx)(SectionLabel, { label: sec.label, theme: theme }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pt: 2, pb: 1, children: (0, jsx_runtime_1.jsx)(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: "white", borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200", children: !isSearching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "semibold", fontSize: "sm", children: title }), (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: "gray.200", spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: "white", children: [(0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), (0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRight: "1px solid", borderColor: "gray.200", borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200", children: !isSearching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "semibold", fontSize: "sm", children: title }), (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16, color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[500] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: "gray.200", spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: (_f = theme.colors.background) === null || _f === void 0 ? void 0 : _f[50], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), (0, jsx_runtime_1.jsx)(react_2.Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 exports.default = LeftFilterPane;

package/dist/Components/Tag/Tag.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Tag/Tag.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAW7D,eAAO,MAAM,GAAG,EAAE,yBAsEjB,CAAC"}
+{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Tag/Tag.styles.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAa7D,eAAO,MAAM,GAAG,EAAE,yBAiFjB,CAAC"}

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 // Resolve a colorScheme key to a numeric swatch from the theme. All supported
 // colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
 // gray so an unknown/missing key can never throw at render time.
@@ -35,23 +36,31 @@ exports.Tag = {
     },
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const c = swatch(theme, colorScheme);
+            const white = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff";
+            const black = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.black) !== null && _d !== void 0 ? _d : "#000";
+            const fill = c[500];
+            const hoverFill = c[600];
+            const activeFill = c[700];
             return {
                 container: {
-                    bg: c[500],
-                    color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff",
-                    _hover: { bg: c[600] },
-                    _active: { bg: c[700] },
+                    bg: fill,
+                    color: (0, accentText_1.onFilled)(fill, white, black),
+                    _hover: { bg: hoverFill, color: (0, accentText_1.onFilled)(hoverFill, white, black) },
+                    _active: { bg: activeFill, color: (0, accentText_1.onFilled)(activeFill, white, black) },
                 },
             };
         },
         subtle: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
+            const bg = c[50];
             return {
                 container: {
-                    bg: c[50],
-                    color: c[700],
+                    bg,
+                    // A fixed [700] fails AA against [50] for some hues (orange 3.89, borderline green
+                    // 4.39) — walk the scale's own rungs against this specific tint instead.
+                    color: (0, accentText_1.accentTextOnCanvas)(c, bg),
                     border: "0.063rem solid",
                     borderColor: c[100],
                     _hover: { bg: c[100] },
@@ -60,12 +69,16 @@ exports.Tag = {
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
+            var _a, _b, _c;
             const c = swatch(theme, colorScheme);
+            const canvas = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : "#ffffff";
             return {
                 container: {
                     border: "0.094rem solid",
                     borderColor: c[500],
-                    color: c[600],
+                    // Text sits directly on the page canvas here — a fixed [600] failed AA for several
+                    // hues (orange 2.51, green 2.94, red 4.09); use the canvas-text helper instead.
+                    color: (0, accentText_1.accentTextOnCanvas)(c, canvas),
                     bg: "transparent",
                     _hover: { bg: c[50] },
                     _active: { bg: c[100] },

package/dist/Components/Timeline/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAgC,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAM9E,QAAA,MAAM,QAAQ,GAAI,sIAUf,aAAa,4CA0wBf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAgC,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAQ9E,QAAA,MAAM,QAAQ,GAAI,sIAUf,aAAa,4CA6wBf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Components/Timeline/Timeline.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const functions_1 = require("../../Utils/functions");
 const NoteTextArea_1 = __importDefault(require("../NoteTextArea/NoteTextArea"));
 const react_2 = require("react");
@@ -189,25 +190,25 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // 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).
     const EventCard = ({ event, index, accent, }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
         const scale = getEventScale(event.title);
         const changes = parseChanges(event.changes);
         const clickable = typeof onEventClick === "function";
         const isActiveNote = activeNoteEventIndex === index;
         const [isHovered, setIsHovered] = (0, react_2.useState)(false);
-        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: (_a = colors.white) !== null && _a !== void 0 ? _a : "#fff", border: `0.063rem solid ${(_c = (_b = colors.boxborder) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderRadius: "0.625rem", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
-                        borderColor: (_e = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[300],
-                        boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.md,
+        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: (_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderRadius: "0.625rem", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
+                        borderColor: (_f = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[300],
+                        boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.md,
                         transform: clickable ? "translateY(-1px)" : undefined,
-                    }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_j = (_h = colors.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (_l = scale === null || scale === void 0 ? void 0 : scale[700]) !== null && _l !== void 0 ? _l : scale === null || scale === void 0 ? void 0 : scale[600], bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_m = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _m !== void 0 ? _m : (_o = colors.gray) === null || _o === void 0 ? void 0 : _o[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[500], whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: (_b = (_a = colors.text) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[500], bg: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "0.25rem", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_j = (_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : (_k = colors.green) === null || _k === void 0 ? void 0 : _k[700], bg: (_o = (_m = (_l = colors.semantic) === null || _l === void 0 ? void 0 : _l.success) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : (_p = colors.green) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "0.25rem", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`));
-                            }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_s = (_r = (_q = colors.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[16]) !== null && _s !== void 0 ? _s : (_t = colors.primary) === null || _t === void 0 ? void 0 : _t[50], color: (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[600], fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[500], children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_x = (_w = colors.text) === null || _w === void 0 ? void 0 : _w[700]) !== null && _x !== void 0 ? _x : (_y = colors.gray) === null || _y === void 0 ? void 0 : _y[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && (isHovered || isActiveNote) && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: (e) => {
+                    }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_k = (_j = colors.text) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, (_m = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _m !== void 0 ? _m : "#ffffff"), bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_o = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: (_b = (_a = colors.text) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[500], bg: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "0.25rem", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(((_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) !== null && _h !== void 0 ? _h : colors.green), ((_l = (_k = (_j = colors.semantic) === null || _j === void 0 ? void 0 : _j.success) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : (_m = colors.green) === null || _m === void 0 ? void 0 : _m[50])), bg: (_q = (_p = (_o = colors.semantic) === null || _o === void 0 ? void 0 : _o.success) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : (_r = colors.green) === null || _r === void 0 ? void 0 : _r[50], borderRadius: "0.25rem", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`));
+                            }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_t = (_s = (_r = colors.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[16]) !== null && _t !== void 0 ? _t : (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[50], color: (_v = colors.primary) === null || _v === void 0 ? void 0 : _v[600], fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[500], children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_y = (_x = colors.text) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_z = colors.gray) === null || _z === void 0 ? void 0 : _z[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && (isHovered || isActiveNote) && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: (e) => {
                                         e.stopPropagation();
                                         setActiveNoteEventIndex(isActiveNote ? null : index);
-                                    }, px: 2, py: 1, borderRadius: "0.375rem", fontSize: "0.75rem", fontWeight: 600, color: (_z = colors.primary) === null || _z === void 0 ? void 0 : _z[700], bg: "transparent", cursor: "pointer", _hover: {
-                                        bg: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[50],
-                                    }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${(_2 = (_1 = colors.gray) === null || _1 === void 0 ? void 0 : _1[100]) !== null && _2 !== void 0 ? _2 : (_3 = colors.boxborder) === null || _3 === void 0 ? void 0 : _3[200]}`, children: event.notes.map((note, noteIndex) => {
+                                    }, px: 2, py: 1, borderRadius: "0.375rem", fontSize: "0.75rem", fontWeight: 600, color: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[700], bg: "transparent", cursor: "pointer", _hover: {
+                                        bg: (_1 = colors.primary) === null || _1 === void 0 ? void 0 : _1[50],
+                                    }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${(_3 = (_2 = colors.gray) === null || _2 === void 0 ? void 0 : _2[100]) !== null && _3 !== void 0 ? _3 : (_4 = colors.boxborder) === null || _4 === void 0 ? void 0 : _4[200]}`, children: event.notes.map((note, noteIndex) => {
                                 var _a;
                                 return ((0, jsx_runtime_1.jsx)(NoteItem, { note: note, event: event, index: index }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
                             }) }))] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
@@ -228,10 +229,10 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                 return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[500], bg: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[50], border: `0.063rem solid ${(_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", h: "0.063rem", bg: (_g = (_f = colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[200] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (_k = (_j = colors.gray) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = colors.boxborder) === null || _l === void 0 ? void 0 : _l[400], transform: "translateX(-50%)" }), groupedEvents[date].map((event, index) => {
-                                    var _a, _b, _c, _d;
+                                    var _a, _b, _c, _d, _e;
                                     const scale = getEventScale(event.title);
                                     const globalIndex = timelineEvents.indexOf(event);
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_a = colors.white) !== null && _a !== void 0 ? _a : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_b = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left" }) })] }, `${(_d = event.logs_id) !== null && _d !== void 0 ? _d : date}-${index}`));
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_c = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left" }) })] }, `${(_e = event.logs_id) !== null && _e !== void 0 ? _e : date}-${index}`));
                                 })] })] }, date));
             }) }));
     }
@@ -239,15 +240,15 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // Desktop: center spine with cards alternating left / right (the "tree")
     // -------------------------------------------------------------------------
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (_f = (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : (_g = colors.boxborder) === null || _g === void 0 ? void 0 : _g[400], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
-                var _a, _b, _c, _d, _e, _f;
-                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_b = colors.white) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map((event, index) => {
-                            var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e, _f, _g;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_c = (_b = colors.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map((event, index) => {
+                            var _a, _b, _c, _d, _e, _f, _g;
                             const isLeft = index % 2 === 0;
                             const scale = getEventScale(event.title);
                             const globalIndex = timelineEvents.indexOf(event);
                             return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_a = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _a !== void 0 ? _a : (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[300], left: isLeft
                                             ? `calc(50% - ${SPINE_GAP})`
-                                            : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_c = colors.white) !== null && _c !== void 0 ? _c : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_d = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left" }) })] }, `${(_f = event.logs_id) !== null && _f !== void 0 ? _f : date}-${index}`));
+                                            : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_d = (_c = colors.background) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_e = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left" }) })] }, `${(_g = event.logs_id) !== null && _g !== void 0 ? _g : date}-${index}`));
                         })] }, date));
             })] }));
 };

package/dist/Components/Toaster/Toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAqB,MAAM,gBAAgB,CAAC;AAyKxF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAkEpE;AAED,eAAO,MAAM,UAAU,0BAMtB,CAAC"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAqB,MAAM,gBAAgB,CAAC;AA2KxF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAkEpE;AAED,eAAO,MAAM,UAAU,0BAMtB,CAAC"}

package/dist/Components/Toaster/Toaster.js

@@ -26,7 +26,7 @@ const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
  * action without the toast vanishing mid-reach.
  */
 function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, shadowLg, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     const [paused, setPaused] = (0, react_1.useState)(false);
     const solid = (_d = (_b = (_a = meta.scale) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = c === null || c === void 0 ? void 0 : c.gray) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : "#718096";
     const soft = (_h = (_f = (_e = meta.scale) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : (_g = c === null || c === void 0 ? void 0 : c.gray) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#f7fafc";
@@ -47,15 +47,18 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         // by frame (that double-drive is what caused the ~200ms entry flicker). A
         // tween (not spring) lands on an exact end transform, so there's no residual
         // sub-pixel settle to shimmer.
-        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: (_o = c === null || c === void 0 ? void 0 : c.white) !== null && _o !== void 0 ? _o : "#fff", border: `0.063rem solid ${(_s = (_q = (_p = c === null || c === void 0 ? void 0 : c.boxborder) === null || _p === void 0 ? void 0 : _p[300]) !== null && _q !== void 0 ? _q : (_r = c === null || c === void 0 ? void 0 : c.gray) === null || _r === void 0 ? void 0 : _r[200]) !== null && _s !== void 0 ? _s : "#e2e8f0"}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "0.875rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
+        // Surface token, not `colors.white`: `white` is a foreground token and stays
+        // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
+        bg: (_p = (_o = c === null || c === void 0 ? void 0 : c.background) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#fff", border: `0.063rem solid ${(_t = (_r = (_q = c === null || c === void 0 ? void 0 : c.boxborder) === null || _q === void 0 ? void 0 : _q[300]) !== null && _r !== void 0 ? _r : (_s = c === null || c === void 0 ? void 0 : c.gray) === null || _s === void 0 ? void 0 : _s[200]) !== null && _t !== void 0 ? _t : "#e2e8f0"}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "0.875rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
             transition: "box-shadow 0.18s ease",
             _hover: { boxShadow: "xl" },
         }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent, sx: {
                             ["--toast-pulse-color"]: ringTint,
                             animation: `${iconPulse} 900ms ease-out 1`,
-                        }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_w = (_u = (_t = c === null || c === void 0 ? void 0 : c.text) === null || _t === void 0 ? void 0 : _t[800]) !== null && _u !== void 0 ? _u : (_v = c === null || c === void 0 ? void 0 : c.gray) === null || _v === void 0 ? void 0 : _v[800]) !== null && _w !== void 0 ? _w : "#2d3748", children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_0 = (_y = (_x = c === null || c === void 0 ? void 0 : c.gray) === null || _x === void 0 ? void 0 : _x[600]) !== null && _y !== void 0 ? _y : (_z = c === null || c === void 0 ? void 0 : c.text) === null || _z === void 0 ? void 0 : _z[600]) !== null && _0 !== void 0 ? _0 : "#718096", mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_2 = (_1 = c === null || c === void 0 ? void 0 : c.gray) === null || _1 === void 0 ? void 0 : _1[400]) !== null && _2 !== void 0 ? _2 : "#a0aec0", borderRadius: "md", alignSelf: "flex-start", _hover: {
-                            bg: (_4 = (_3 = c === null || c === void 0 ? void 0 : c.gray) === null || _3 === void 0 ? void 0 : _3[100]) !== null && _4 !== void 0 ? _4 : "#edf2f7",
-                            color: (_6 = (_5 = c === null || c === void 0 ? void 0 : c.gray) === null || _5 === void 0 ? void 0 : _5[700]) !== null && _6 !== void 0 ? _6 : "#4a5568",
+                        }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_x = (_v = (_u = c === null || c === void 0 ? void 0 : c.text) === null || _u === void 0 ? void 0 : _u[800]) !== null && _v !== void 0 ? _v : (_w = c === null || c === void 0 ? void 0 : c.gray) === null || _w === void 0 ? void 0 : _w[800]) !== null && _x !== void 0 ? _x : "#2d3748", children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_1 = (_z = (_y = c === null || c === void 0 ? void 0 : c.gray) === null || _y === void 0 ? void 0 : _y[600]) !== null && _z !== void 0 ? _z : (_0 = c === null || c === void 0 ? void 0 : c.text) === null || _0 === void 0 ? void 0 : _0[600]) !== null && _1 !== void 0 ? _1 : "#718096", mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_3 = (_2 = c === null || c === void 0 ? void 0 : c.gray) === null || _2 === void 0 ? void 0 : _2[400]) !== null && _3 !== void 0 ? _3 : "#a0aec0", borderRadius: "md", alignSelf: "flex-start", _hover: {
+                            bg: (_5 = (_4 = c === null || c === void 0 ? void 0 : c.gray) === null || _4 === void 0 ? void 0 : _4[100]) !== null && _5 !== void 0 ? _5 : "#edf2f7",
+                            color: (_7 = (_6 = c === null || c === void 0 ? void 0 : c.gray) === null || _6 === void 0 ? void 0 : _6[700]) !== null && _7 !== void 0 ? _7 : "#4a5568",
                         } }))] }), showProgress && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, opacity: 0.85, transformOrigin: "left", sx: {
                     animation: `${shrink} ${duration}ms linear forwards`,
                     animationPlayState: paused ? "paused" : "running",

package/dist/Components/Toggle/TableToggle.js

@@ -24,7 +24,7 @@ const TableToggle = ({ value, onChange }) => {
         button: (mode) => ({
             bg: value === mode ? theme.colors.background[50] : "transparent",
             boxShadow: value === mode ? "md" : "none",
-            color: value === mode ? theme.colors.black : theme.colors.background[800],
+            color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
             borderRadius: "0.313rem",
             height: "1.75rem",
             border: "0.031rem solid",
@@ -34,7 +34,7 @@ const TableToggle = ({ value, onChange }) => {
                 bg: value === mode
                     ? theme.colors.background[50]
                     : theme.colors.background[400],
-                color: value === mode ? theme.colors.black : theme.colors.background[900],
+                color: value === mode ? theme.colors.text[900] : theme.colors.background[900],
             },
             transition: "all 0.3s ease-in-out",
         }),