pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.10

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

@@ -6,7 +6,6 @@ import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { useDebounce } from "../../../Utils/table.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
 const TableSearch = ({ onSearch }) => {
-    var _a, _b, _c, _d, _e;
     const { colors } = useCustomTheme();
     const [showInput, setShowInput] = useState(false);
     const [query, setQuery] = useState("");
@@ -26,6 +25,6 @@ const TableSearch = ({ onSearch }) => {
         setQuery(value);
         handleDebounce(value);
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], onClick: handleSearchClick, _hover: { color: (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500] } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500], _focus: { borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "2", children: [!showInput && (_jsx(ToolTip, { label: "Search", placement: "top", children: _jsx(IconButton, { "aria-label": "Search", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 5 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: colors.text[500], onClick: handleSearchClick, _hover: { color: colors.accentText } }) })), showInput ? (_jsxs(InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease", children: [_jsx(Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: colors.boxborder[500], _focus: { borderColor: colors.accentText }, autoFocus: true }), _jsx(InputRightElement, { display: "flex", alignItems: "center", height: "2rem", children: _jsx(IconButton, { "aria-label": "Clear search", icon: _jsx(Icon, { as: X }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", color: colors.text[500], cursor: "pointer", onClick: handleSearchClick }) })] })) : null] }));
 };
 export default TableSearch;

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

@@ -10,13 +10,12 @@
  * `color` flip is needed. Pinned by tableRowHoverStyle.test.ts.
  */
 export const getTableRowHoverStyle = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     if (isDark) {
         return {
-            backgroundColor: (_c = (_b = (_a = colors.table) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : (_d = colors.background) === null || _d === void 0 ? void 0 : _d[400],
+            backgroundColor: colors.table.hover[500],
         };
     }
     return {
-        backgroundColor: (_g = (_f = (_e = colors.table) === null || _e === void 0 ? void 0 : _e.hover) === null || _f === void 0 ? void 0 : _f[300]) !== null && _g !== void 0 ? _g : (_j = (_h = colors.secondary) === null || _h === void 0 ? void 0 : _h.opacity) === null || _j === void 0 ? void 0 : _j[4],
+        backgroundColor: colors.table.hover[300],
     };
 };

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

@@ -3,9 +3,10 @@ import React, { useCallback, useMemo } from "react";
 import { Box, Flex, Text, IconButton } from "@chakra-ui/react";
 import { X } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../../Theme/tokens/builders/accentText.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import VeritcalDivider from "../../Divider/Divider.js";
 const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const theme = useCustomTheme();
     const columnLabelMap = useMemo(() => {
         const map = new Map();
@@ -34,29 +35,9 @@ const ActiveFilters = React.memo(({ columns, columnsSearch, setColumnsSearch, })
     if (activeFilters.length === 0) {
         return null;
     }
-    return (_jsx(Box, { px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b[100]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) === null || _d === void 0 ? void 0 : _d[50]), overflowX: "auto", sx: {
-            '&::-webkit-scrollbar': {
-                height: '6px',
-            },
-            '&::-webkit-scrollbar-track': {
-                background: theme.colors.gray[100],
-                borderRadius: 'base',
-            },
-            '&::-webkit-scrollbar-thumb': {
-                background: theme.colors.gray[400],
-                borderRadius: 'base',
-            },
-            '&::-webkit-scrollbar-thumb:hover': {
-                background: theme.colors.gray[500],
-            },
-            scrollbarWidth: 'thin',
-            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-        }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                    return (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.blue) === null || _b === void 0 ? void 0 : _b[50]) || ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[50]), borderRadius: "md", border: `0.063rem solid ${((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[200]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[200])}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[700], whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
-                                    bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.blue) === null || _m === void 0 ? void 0 : _m[100]) || ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.primary) === null || _p === void 0 ? void 0 : _p[100]),
-                                }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId));
-                }), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.blue) === null || _f === void 0 ? void 0 : _f[600]) || ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[600]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
+    return (_jsx(Box, { px: 2, py: 1, bg: theme.colors.background[100], overflowX: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "nowrap", minW: "max-content", children: [activeFilters.length > 0 && _jsx(VeritcalDivider, {}), activeFilters.map((filter) => (_jsxs(Flex, { alignItems: "center", gap: 1, px: 2, py: 1, bg: theme.colors.blue[50], borderRadius: "md", border: `0.063rem solid ${theme.colors.blue[200]}`, flexShrink: 0, children: [_jsxs(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.blue[50]), whiteSpace: "nowrap", children: [_jsxs(Text, { as: "span", fontWeight: 600, children: [filter.label, ":"] }), " ", filter.value] }), _jsx(IconButton, { "aria-label": `Remove filter for ${filter.label}`, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", onClick: () => handleRemoveFilter(filter.columnId), _hover: {
+                                bg: theme.colors.blue[100],
+                            }, minW: "auto", h: "auto", p: 0.5, flexShrink: 0 })] }, filter.columnId))), activeFilters.length > 1 && (_jsx(Text, { as: "p", className: "clear-all-text", "aria-label": "Clear All", fontSize: "sm", color: accentTextOnCanvas(theme.colors.blue, theme.colors.background[100]), cursor: "pointer", fontWeight: 500, onClick: handleClearAll, _hover: {
                         textDecoration: "underline",
                     }, flexShrink: 0, whiteSpace: "nowrap", children: "Clear All" }))] }) }));
 });

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

@@ -4,7 +4,6 @@ import { Box, Text, Input, Popover, PopoverTrigger, PopoverContent, PopoverBody,
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
-    var _a;
     const theme = useCustomTheme();
     const [isOpen, setIsOpen] = useState(false);
     const [query, setQuery] = useState("");
@@ -39,17 +38,17 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(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: "base", onClick: () => setIsOpen((prev) => !prev), children: [_jsx(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 ? _jsx(ChevronUp, { size: 12 }) : _jsx(ChevronDown, { size: 12 })] }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, children: _jsx(PopoverBody, { p: 2, children: _jsxs(VStack, { spacing: 2, align: "stretch", children: [_jsx(Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [_jsx(PopoverTrigger, { children: _jsxs(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: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "base", onClick: () => setIsOpen((prev) => !prev), children: [_jsx(Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? _jsx(ChevronUp, { size: 12 }) : _jsx(ChevronDown, { size: 12 })] }) }), _jsx(Portal, { children: _jsx(PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 2, children: _jsxs(VStack, { spacing: 2, align: "stretch", children: [_jsx(Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "ArrowDown" && filtered.length > 0) {
                                             e.preventDefault();
                                             focusOption(0);
                                         }
-                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: "gray.100", onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => (_jsx(Box, { as: "button", type: "button", role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.id) === opt.id, tabIndex: i === activeIndex ? 0 : -1, ref: (el) => {
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), _jsxs(Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => (_jsx(Box, { as: "button", type: "button", role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.id) === opt.id, tabIndex: i === activeIndex ? 0 : -1, ref: (el) => {
                                                 optionRefs.current[i] = el;
-                                            }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", 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: () => {
+                                            }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", _hover: { bg: theme.colors.background[100] }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? theme.colors.background[200] : theme.colors.transparent, onClick: () => {
                                                 onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
                                                 setIsOpen(false);
                                                 setQuery("");
-                                            }, children: _jsx(Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id))), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color: "gray.500", children: "No results" }) }))] })] }) }) }) })] }));
+                                            }, children: _jsx(Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id))), filtered.length === 0 && (_jsx(Box, { px: 2, py: 2, children: _jsx(Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
 };
 export default CompactSelect;

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

@@ -88,7 +88,6 @@ 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, _e, _f;
     const [isSearching, setIsSearching] = useState(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search));
     const [localSelected, setLocalSelected] = useState({});
     const searchRef = useRef(null);
@@ -162,13 +161,13 @@ const LeftFilterPane = ({ title = "Filter", height = 300, sections, selected: se
     const sectionContentProps = { selected: localSelected, toggleItem, setTextOperator, setTextValue, setSelected };
     const renderSections = () => {
         if (filteredSections.length === 0) {
-            return (_jsx(Box, { p: 4, textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: "gray.500", children: "No filters found" }) }));
+            return (_jsx(Box, { p: 4, textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No filters found" }) }));
         }
         if (filteredSections.length > 1) {
-            return (_jsx(Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => (_jsxs(AccordionItem, { border: "none", children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 3, py: 2, _expanded: { bg: "gray.50" }, children: [_jsx(SectionLabel, { label: sec.label, flex: true, theme: theme }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
+            return (_jsx(Accordion, { allowMultiple: true, defaultIndex: filteredSections.map((s, i) => (s.initiallyExpanded ? i : -1)).filter((i) => i >= 0), children: filteredSections.map((sec) => (_jsxs(AccordionItem, { border: "none", children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 3, py: 2, _expanded: { bg: theme.colors.background[100] }, children: [_jsx(SectionLabel, { label: sec.label, flex: true, theme: theme }), _jsx(AccordionIcon, {})] }) }), _jsx(AccordionPanel, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id))) }));
         }
-        return filteredSections.map((sec) => (_jsxs(Box, { children: [_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "gray.200", children: _jsx(SectionLabel, { label: sec.label, theme: theme }) }), _jsx(Box, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
+        return filteredSections.map((sec) => (_jsxs(Box, { children: [_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsx(SectionLabel, { label: sec.label, theme: theme }) }), _jsx(Box, { px: 3, pt: 2, pb: 1, children: _jsx(SectionContent, { sec: sec, ...sectionContentProps }) })] }, sec.id)));
     };
-    return (_jsxs(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: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: "gray.200", children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", 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 })] })) : (_jsx(motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(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: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", color: "white", size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
+    return (_jsxs(Box, { width: filterMode === "modal" ? "100%" : "180px", height: filterMode === "modal" ? "100%" : height, minHeight: "32rem", bg: theme.colors.background[50], borderRight: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", overflow: "hidden", display: "flex", flexDirection: "column", marginBottom: filterMode === "modal" && hasActiveFilters ? '3.5rem' : 0, children: [_jsx(Box, { p: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: !isSearching ? (_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", children: title }), _jsx(IconButton, { "aria-label": "Search filters", icon: _jsx(Icon, { as: Search, transform: "scaleX(-1)", boxSize: 4 }), variant: "unstyled", minW: "auto", h: "auto", display: "flex", cursor: "pointer", color: theme.colors.text[500], onClick: () => setIsSearching(true), mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 })] })) : (_jsx(motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 }, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 16, color: theme.colors.text[500] }) }), _jsx(Input, { placeholder: "Search", value: search, onChange: (e) => setSearch(e.target.value), autoFocus: true }), search.length > 0 && (_jsx(InputRightElement, { children: _jsx(IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: _jsx(X, { size: 14 }), onClick: () => { setSearch(""); setIsSearching(false); } }) }))] }) })) }), _jsx(Box, { flex: "1", overflowY: "auto", children: renderSections() }), hasActiveFilters && (_jsxs(HStack, { px: 2, py: 1, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], spacing: 2, position: filterMode === "modal" ? "absolute" : "relative", bottom: 0, left: 0, right: 0, bg: theme.colors.background[50], children: [_jsx(Button, { flex: 1, variant: "outline", size: "sm", onClick: handleClear, fontSize: "xs", colorScheme: "red", children: "Clear All" }), _jsx(Button, { flex: 1, colorScheme: "primary", color: theme.colors.onPrimary, size: "sm", onClick: handleApply, fontSize: "xs", isLoading: isApplyLoading, children: "Apply" })] }))] }));
 };
 export default LeftFilterPane;

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

@@ -3,7 +3,6 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Icon, IconButton, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Portal, useTheme, } from "@chakra-ui/react";
 import { EllipsisVertical, Search } from "lucide-react";
 const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, isOpen, onOpen, }) => {
-    var _a, _b;
     const theme = useTheme();
     const searchRef = useRef(null);
     const [refreshDataOnOpen, setRefreshDataOnOpen] = useState(false);
@@ -37,7 +36,7 @@ const TableFilters = memo(({ header, setColumnsSearch, columnsSearch, onClose, i
         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": "Search", icon: _jsx(EllipsisVertical, { size: 17, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "200px", children: _jsx(PopoverBody, { p: 2, children: _jsxs(InputGroup, { flex: "1", size: "xs", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Icon, { as: Search, color: "gray.400", boxSize: 4 }) }), _jsx(Input, { autoFocus: true, placeholder: `Search ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Search", 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.background[50], 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 ${header.label}...`, size: "xs", ref: searchRef, onChange: (e) => {
                                         e.stopPropagation();
                                         debouncedSearch(e.target.value);
                                     }, onFocus: (e) => e.stopPropagation() })] }) }) }) })] }));

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

@@ -63,17 +63,14 @@ const useTable = ({ tableBorderColor, data, isPagination, selections, onSelectio
             }));
         }
     }, [tablePreferences, columns, defaultVisibleColumns]);
-    const tableContainerStyles = useMemo(() => {
-        var _a;
-        return ({
-            borderRadius: "10px 0 0 10px",
-            borderWidth: "0px 0px 0px 5px",
-            borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[500],
-            boxShadow: theme.shadows.lg,
-            maxHeight: "50vh",
-            overflowY: "auto",
-        });
-    }, [tableBorderColor, theme]);
+    const tableContainerStyles = useMemo(() => ({
+        borderRadius: "10px 0 0 10px",
+        borderWidth: "0px 0px 0px 5px",
+        borderColor: tableBorderColor !== null && tableBorderColor !== void 0 ? tableBorderColor : theme.colors.boxborder[500],
+        boxShadow: theme.shadows.lg,
+        maxHeight: "50vh",
+        overflowY: "auto",
+    }), [tableBorderColor, theme]);
     const prevIsContent = useRef(false);
     const prevIsLink = useRef(false);
     const isContent = useMemo(() => {

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

@@ -3,6 +3,7 @@ import { useImperativeHandle, useMemo, useState, useEffect } from "react";
 import { Box, Flex, IconButton, Input, List, ListItem, Text, } from "@chakra-ui/react";
 import Checkbox from "../../Checkbox/Checkbox.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
     const theme = useCustomTheme();
@@ -69,22 +70,7 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
             setError(null);
         }
     };
-    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: {
-                    "&::-webkit-scrollbar": { width: "3px", height: "3px" },
-                    "&::-webkit-scrollbar-track": {
-                        background: theme.colors.gray[100],
-                        borderRadius: "sm",
-                    },
-                    "&::-webkit-scrollbar-thumb": {
-                        background: theme.colors.gray[400],
-                        borderRadius: "sm",
-                    },
-                    "&::-webkit-scrollbar-thumb:hover": {
-                        background: theme.colors.gray[500],
-                    },
-                    scrollbarWidth: "thin",
-                    scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-                }, children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
                     const isDraggingThisItem = draggedItemIndex === index;
                     const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
                     const realIndex = items.findIndex((i) => i.id === item.id);
@@ -96,10 +82,10 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                             ? theme.colors.primary[400]
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
                             bg: theme.colors.gray[50],
-                            borderColor: theme.colors.border[200],
+                            borderColor: theme.colors.boxborder[200],
                         }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
                                     color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
                                 } }), _jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
-                })) : (_jsx(Text, { color: "gray.500", textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+                })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };
 export default ManageColumns;

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

@@ -5,6 +5,7 @@ import { motion } from "framer-motion";
 import ManageColumns from "./ManageColumns.js";
 import Button from "../../Button/Button.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
 import { Settings, Check } from "lucide-react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 const MotionModalContent = motion(ModalContent);
@@ -14,7 +15,6 @@ const DENSITY_OPTIONS = [
     { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
 ];
 const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const theme = useCustomTheme();
     const childInputMethodsRef = useRef({});
     const [settingsOpen, setSettingsOpen] = useState(false);
@@ -37,28 +37,20 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
         px: 4,
         py: 2,
         borderBottom: "2px solid transparent",
-        color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[400],
+        color: theme.colors.textMuted,
         _selected: {
-            borderBottom: `2px solid ${theme.colors.primary[600]}`,
-            color: theme.colors.primary[600],
+            borderBottom: `2px solid ${theme.colors.accentText}`,
+            color: theme.colors.accentText,
             fontWeight: 600,
         },
-        _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[600] },
+        _hover: { color: theme.colors.text[600] },
     };
-    return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500], _hover: {
+    return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
                         transform: "scale(1.1)",
-                        color: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.primary) === null || _h === void 0 ? void 0 : _h[500]
-                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.border) === null || _m === void 0 ? void 0 : _m[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
-                                            "&::-webkit-scrollbar": { width: "3px", height: "3px" },
-                                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "sm" },
-                                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "sm" },
-                                            "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
-                                            scrollbarWidth: "thin",
-                                            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-                                        }, children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
-                                                            var _a;
+                        color: theme.colors.accentText
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: scrollbarStyles(theme.colors), children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
-                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.gray[500], children: opt.desc })] })] }, opt.value));
+                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
                                                             "& [role='listitem'], & > div > div": {
                                                                 py: "4px !important",
@@ -68,15 +60,15 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                             "& .chakra-checkbox": { gap: "8px !important" },
                                                             "& .chakra-checkbox__label": { fontSize: "13px !important" },
                                                             "& [draggable]": { py: "5px !important" },
-                                                        }, children: _jsx(ManageColumns, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), _jsxs(TabPanel, { px: 0, py: 1, children: [_jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], mb: 2, children: "Group rows by a column. Click Save to apply." }), _jsx(Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
+                                                        }, children: _jsx(ManageColumns, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), _jsxs(TabPanel, { px: 0, py: 1, children: [_jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), _jsx(Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
                                                                 // Only columns that declare a `columnType` are groupable.
                                                                 ...columns
                                                                     .filter((c) => !!c.columnType && !c.isHidden)
                                                                     .map((c) => ({ id: c.id, label: String(c.label) }))]
                                                                 .map((opt) => {
-                                                                var _a, _b;
+                                                                var _a;
                                                                 const selected = selectedGroup === opt.id;
-                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300], bg: selected ? theme.colors.primary.opacity[8] : "transparent", transition: "all 0.15s", _hover: { borderColor: theme.colors.primary[400] }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.primary[500] : theme.colors.gray[400], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.primary[500], strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_b = opt.id) !== null && _b !== void 0 ? _b : "__none__")));
-                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.border) === null || _p === void 0 ? void 0 : _p[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 export default TableSettings;

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

@@ -1,8 +1,13 @@
-import { DEFAULT_BLACK, DEFAULT_CANVAS, DEFAULT_WHITE, accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 // 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.
-const swatch = (theme, colorScheme = "primary") => { var _a, _b, _c, _d; return (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {}; };
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const isScaleKey = (key) => SCALE_KEYS.includes(key);
+const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? theme.colors[colorScheme] : theme.colors.gray;
 // Chakra Tag is a multipart component (container / label / closeButton); styling
 // is keyed under those parts, so it needs a multi-style config with `parts`.
 export const Tag = {
@@ -33,10 +38,8 @@ export const Tag = {
     },
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            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 : DEFAULT_WHITE;
-            const black = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.black) !== null && _d !== void 0 ? _d : DEFAULT_BLACK;
+            const { white, black } = theme.colors;
             const fill = c[500];
             const hoverFill = c[600];
             const activeFill = c[700];
@@ -66,9 +69,8 @@ export const 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 : DEFAULT_CANVAS;
+            const canvas = theme.colors.backgroundColor.main;
             return {
                 container: {
                     border: "0.094rem solid",