pixelize-design-library 2.4.2-beta.34 → 2.4.2-beta.35

package/dist/esm/Components/Dropdown/DropDown.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Box, Flex, Button, useDisclosure, List, ListItem, Portal, } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
-import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { ChevronDown } from "lucide-react";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 const MotionBox = motion(forwardRef((props, ref) => (_jsx(Box, { ref: ref, ...props }))));
@@ -19,7 +20,9 @@ const SIZE_MAP = {
 const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleOptionSelect, dropdownType = "button", text, DropdownIcon, isVisibleIconShow = true, buttonProps, headStyle, ListStyle, ItemStyle, LabelStyle, ImageStyle, size, optionsSize, divider = false, ariaLabel, }, ref) => {
     var _a, _b;
     const theme = useCustomTheme();
-    const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
     const dropdownRef = useRef(null);
     const menuRef = useRef(null);
     const [menuPos, setMenuPos] = useState({ top: 0, left: 0, width: 0 });
@@ -49,6 +52,16 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
         }
         else {
             pendingFocusIndex.current = index;
+            requestExclusiveOpen();
+            onOpen();
+        }
+    };
+    const handleToggle = () => {
+        if (isOpen) {
+            onClose();
+        }
+        else {
+            requestExclusiveOpen();
             onOpen();
         }
     };
@@ -91,7 +104,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
             // `fireEvent` does not simulate a real browser's Enter/Space-activates-
             // button default action either.
             e.preventDefault();
-            onToggle();
+            handleToggle();
         }
     };
     const handleMenuKeyDown = (e) => {
@@ -207,13 +220,13 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     };
     const Chevron = isVisibleIconShow ? (_jsx(Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", children: _jsx(ChevronDown, { size: s.chevron }) })) : undefined;
     const dropDownToggleOption = () => {
-        const ButtonToggle = (_jsx(Button, { ref: buttonTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
-        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: onToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
+        const ButtonToggle = (_jsx(Button, { ref: buttonTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, size: s.btn, colorScheme: "primary", borderRadius: "lg", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (ButtonText ? undefined : "Open menu"), rightIcon: Chevron, sx: { transition: "all 0.15s ease", ...(dropDownButtonStyle) }, ...buttonProps, children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0, children: [DropdownIcon, ButtonText] }) }));
+        const TextToggle = (_jsxs(Flex, { ref: textTriggerRef, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: theme.colors.text[700], transition: "color 0.15s ease", _hover: { color: theme.colors.accentText }, style: dropDownButtonStyle, role: "button", tabIndex: 0, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (text ? undefined : "Open menu"), children: [DropdownIcon, text, Chevron] }));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     const DropdownContentRender = () => {
         var _a;
-        const hoverTint = resolveHoverTint(theme.colors.primary[500], theme.colors.background[50]);
+        const hoverTint = rowBackgrounds.active;
         return (_jsx(List, { id: menuId, role: "menu", onKeyDown: handleMenuKeyDown, bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "xl", boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: scrollbarStyles(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => (_jsxs(ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {

package/dist/esm/Components/EmptyState/EmptyState.js

@@ -25,7 +25,7 @@ const EmptyState = ({ title = "No data found", description, icon: IconComp = Inb
     const accentSoft = palette[50];
     const accent = accentTextOnCanvas(palette, accentSoft);
     const containerStyles = variant === "subtle"
-        ? { bg: theme.colors.gray[50], borderRadius: "2xl" }
+        ? { bg: theme.colors.background[50], borderRadius: "2xl" }
         : variant === "dashed"
             ? {
                 border: "2px dashed",

package/dist/esm/Components/FileUpload/FileUpload.js

@@ -14,7 +14,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
     const [previewUrl, setPreviewUrl] = React.useState(null);
     const [previewTitle, setPreviewTitle] = React.useState(null);
     const [errors, setErrors] = React.useState([]);
-    const bg = colors.gray[50];
+    const bg = colors.background[50];
     const border = colors.boxborder[500];
     const mappedAccept = acceptTypes.reduce((acc, ext) => {
         const mime = mimeMap[ext];
@@ -54,7 +54,7 @@ const FileUpload = ({ onFilesUploaded, uploadedFiles, onRemoveFile, acceptTypes
             setErrors(messages);
         },
     });
-    return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.gray[100] }, position: "relative", children: [_jsx("input", { ...getInputProps({ "aria-label": inputAriaLabel }) }), _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
+    return (_jsxs(_Fragment, { children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsxs(Box, { ...getRootProps(), border: "2px dashed", borderColor: border, borderRadius: "md", p: compact ? 3 : 10, textAlign: "center", bg: bg, cursor: "pointer", transition: "all 0.2s", _hover: { bg: colors.background[100] }, position: "relative", children: [_jsx("input", { ...getInputProps({ "aria-label": inputAriaLabel }) }), _jsxs(Stack, { direction: compact ? "row" : "column", spacing: compact ? 3 : 2, align: "center", justify: "center", children: [_jsx(Icon, { as: Upload, boxSize: compact ? 4 : 6 }), _jsxs(Stack, { spacing: 0, align: compact ? "start" : "center", children: [_jsx(Text, { fontWeight: "medium", fontSize: compact ? "sm" : "md", color: colors.textMuted, children: "Drag and drop files here" }), _jsxs(Text, { fontSize: compact ? "xs" : "sm", color: colors.textMuted, children: [acceptTypes.join(", "), " up to ", toMB(maxSizeKB), " ", maxFiles ? `- ${maxFiles} file(s) max` : ""] })] })] })] }), errors.length > 0 && (_jsx(Box, { children: errors.map((err, idx) => (_jsx(Text, { fontSize: "sm", color: colors.semanticText.error, children: err }, idx))) })), uploadedFiles.length > 0 && (_jsxs(Box, { children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: "Uploaded Files" }) }), _jsx(List, { spacing: 2, children: uploadedFiles.map((file, index) => (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(ListItem, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [_jsxs(HStack, { spacing: 3, flex: "1", children: [file.type.startsWith("image/") ? (_jsxs(Box, { boxSize: "2.5rem", cursor: "pointer", position: "relative", _hover: {
                                                                 ".hover-icon": {
                                                                     opacity: 1,
                                                                     bg: "blackAlpha.500",

package/dist/esm/Components/FilterSidebar/FilterSidebar.js

@@ -144,13 +144,13 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                    } })] }), _jsxs(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [_jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMin === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMin === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMin === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
                                                                 const min = v;
                                                                 const max = currentMax;
                                                                 const nextVal = [Math.min(min, max), Math.max(min, max)];
                                                                 setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });
                                                                 setOpenPrice({});
-                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
+                                                            }, children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? (_jsx(Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: onFilled(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), _jsxs(Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), _jsx(PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: currentMax === v ? theme.colors.red[50] : theme.colors.background[50], borderLeftWidth: currentMax === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: currentMax === v ? theme.colors.red[400] : "transparent", _hover: { bg: hoverBg }, onClick: () => {
                                                             const max = v;
                                                             const min = currentMin;
                                                             const nextVal = [Math.min(min, max), Math.max(min, max)];
@@ -169,7 +169,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             const isRowSelected = String(internalSelected[section.id] || "") === String(r);
                                             const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
                                             return Array.from({ length: 5 }, (_, i) => (_jsx(Box, { children: _jsx(Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
-                                        })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", 
+                                        })() }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
                         // boxborder[500], not raw gray[200]: WCAG 1.4.11 needs >=3.0 for a control
                         // boundary against any named surface up to `muted` (lightest); gray[200] fails
                         // there in dark mode.
@@ -228,7 +228,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 : {
                     justifyContent: "space-between",
                     padding: 0,
-                    background: theme.colors.gray[50],
+                    background: theme.colors.background[50],
                     borderRadius: theme.radii.lg,
                     border: `1px solid ${theme.colors.gray[200]}`,
                     marginBottom: 6,
@@ -249,6 +249,6 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                 },
         },
     }));
-    return (_jsxs(Box, { w: width, bg: variant === "minimal" ? theme.colors.background[50] : theme.colors.gray[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.gray[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
+    return (_jsxs(Box, { w: width, bg: theme.colors.background[50], p: containerPadding !== undefined ? containerPadding : (variant === "minimal" ? 3 : 2), borderRadius: variant === "minimal" ? "lg" : "none", boxShadow: variant === "minimal" ? "sm" : "none", border: variant === "minimal" ? `1px solid ${theme.colors.gray[200]}` : "none", h: "fit-content", maxH: containerHeight !== undefined ? containerHeight : undefined, overflowY: containerHeight !== undefined ? "auto" : "visible", children: [_jsxs(Flex, { className: "filters-header", align: "center", justify: "space-between", mb: 2, borderBottom: "2px solid", borderColor: theme.colors.gray[100], children: [_jsx(Text, { fontSize: "lg", fontWeight: "bold", color: theme.colors.text[500], children: "Filters" }), activeCount > 0 && clearAllButton && (_jsx(_Fragment, { children: _jsx(Button, { size: "xs", variant: "outline", leftIcon: _jsx(X, { size: 12 }), onClick: clearAll, "aria-label": "Clear All", className: "clear-all-btn", colorScheme: "red", children: "Clear All" }) }))] }), _jsx(Accordion, { allowMultiple: true, defaultIndex: sidebarOptions.map((_, i) => i), items: items })] }));
 };
 export default FilterSidebar;

package/dist/esm/Components/FilterSidebar/filterHoverStyle.js

@@ -1,4 +1,3 @@
-import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
-// The fill itself must clear AA against `text[500]`, the only ink these rows ever use.
-export const getFilterHoverBg = (colors, isDark) => isDark ? liftToContrast(colors.gray[300], colors.text[500], AA_NORMAL_TEXT) : colors.gray[50];
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+export const getFilterHoverBg = (colors, _isDark) => listRowBackgrounds(colors).active;

package/dist/esm/Components/Input/TextInput.styles.js

@@ -47,7 +47,7 @@ export const Input = {
             const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: theme.colors.gray[50],
+                    bg: theme.colors.background[50],
                     border: "0.063rem solid",
                     borderColor,
                     _placeholder: {
@@ -81,7 +81,7 @@ export const Input = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: theme.colors.gray[100],
+                        bg: theme.colors.background[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

package/dist/esm/Components/InputTextArea/InputTextArea.style.js

@@ -29,7 +29,7 @@ export const Textarea = {
             return {
                 border: "0.063rem solid",
                 borderColor,
-                bg: theme.colors.gray[50],
+                bg: theme.colors.background[50],
                 _placeholder: {
                     color: placeholderInk(theme.colors),
                 },
@@ -59,7 +59,7 @@ export const Textarea = {
                     boxShadow: 'inherit',
                 },
                 _disabled: {
-                    bg: theme.colors.gray[100],
+                    bg: theme.colors.background[100],
                     opacity: 1,
                     cursor: "not-allowed",
                     _hover: {

package/dist/esm/Components/MoreItems/MoreItems.js

@@ -1,12 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger, SimpleGrid, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = false, columns = 2, minWidth = "260px", triggerMaxWidth = "250px", trigger = "hover", placement = "bottom-start", }) => {
     const theme = useCustomTheme();
+    const countBadgeBg = listRowBackgrounds(theme.colors).selected;
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? _jsx(_Fragment, { children: triggerText }) : null;
-    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: theme.colors.primary[100] }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
+    return (_jsxs(Popover, { trigger: trigger, placement: placement, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && (_jsx(Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), _jsxs(Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: theme.colors.accentText, bg: countBadgeBg, transition: "all 0.15s ease", _hover: { bg: listRowBackgrounds(theme.colors).selectedActive }, children: ["+", count, " more"] })] }) }), _jsxs(PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "xl", 
                 // Chakra defaults this surface to `colors.gray.700` in dark, which against the
                 // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
                 bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, children: [_jsx(PopoverArrow, { bg: theme.colors.background[50] }), _jsx(PopoverBody, { p: 3, children: _jsx(SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {

package/dist/esm/Components/MultiSelect/MultiSelect.js

@@ -55,14 +55,14 @@ export default function MultiSelect({ value, onValueChange, width = "100%", labe
                 // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
                 borderColor: error || localError
                     ? theme.colors.semanticText.error
-                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.gray[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
+                    : theme.colors.boxborder[500], borderRadius: "lg", bg: theme.colors.background[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
                     borderColor: error || localError
                         ? theme.colors.semanticText.error
                         : theme.colors.primary[500],
                     boxShadow: `0 0 0 0.125rem ${error || localError
                         ? theme.colors.boxShadow.error
                         : theme.colors.boxShadow.primary}`,
-                }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
+                }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.text[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,
                         }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && (_jsx(ErrorMessage, { errorMessage: localError || errorMessage })), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -3,17 +3,16 @@ import { Avatar, Box, Button, Center, Flex, Menu, MenuButton, MenuDivider, MenuI
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
 export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, }) {
     const theme = useCustomTheme();
-    // For a near-neutral brand (e.g. zinc), `primary[50]` is itself a pale near-white tint — on
-    // the menu's own near-white surface that measured as low as ~1.02:1, an invisible hover.
-    const menuHoverBg = resolveHoverTint(theme.colors.primary[50], theme.colors.backgroundColor.light);
+    const rowBackgrounds = listRowBackgrounds(theme.colors);
+    const menuHoverBg = rowBackgrounds.active;
     const barHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.backgroundColor.light);
-    const menuHoverInk = accentTextOnCanvas(theme.colors.primary, menuHoverBg);
     const dangerTone = resolveStatusTone(theme.colors.semantic.error, isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light");
     // Shared rounded pill affordance for the bar's icon controls.
     const iconButtonStyle = {
@@ -41,9 +40,9 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         color: theme.colors.text[900],
         gap: theme.space["2"],
         transition: "background 0.12s",
-        _hover: { bg: menuHoverBg, color: menuHoverInk },
-        _focus: { bg: menuHoverBg, color: menuHoverInk },
-        _active: { bg: menuHoverBg, color: menuHoverInk },
+        _hover: { bg: menuHoverBg },
+        _focus: { bg: menuHoverBg },
+        _active: { bg: rowBackgrounds.selectedActive },
     };
     return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(Text, { color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.

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

@@ -32,7 +32,7 @@ export const NumberInput = {
             const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: theme.colors.gray[50],
+                    bg: theme.colors.background[50],
                     border: "0.063rem solid",
                     borderColor,
                     _placeholder: {
@@ -66,7 +66,7 @@ export const NumberInput = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: theme.colors.gray[100],
+                        bg: theme.colors.background[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -6,6 +6,8 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
 const sizeMap = {
     sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -23,8 +25,14 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
     var _a;
     const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => listRowBackgrounds(theme.colors), [theme.colors]);
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const handlePopoverOpen = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const [query, setQuery] = useState("");
     const searchRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -69,7 +77,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     const triggerStyles = triggerVariant === "outline"
         ? { border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
-            ? { bg: theme.colors.gray[50] }
+            ? { bg: theme.colors.background[50] }
             : { bg: "transparent" };
     // `gray[100]` hover on a "transparent" trigger reads against whatever's actually behind it —
     // this control lives in a navbar-like shell, so `backgroundColor.light` is that surface. For a
@@ -82,7 +90,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         if (org.id !== value)
             onChange(org.id, org);
     };
-    return (_jsxs(Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
         }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
@@ -97,18 +105,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             }
                                         }, borderRadius: "lg" })] }) })), _jsxs(Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
-                                    // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
-                                    // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
-                                    // backdrop until distinguishable, so handing it its own resting bg as the backdrop
-                                    // is enough to make hover read as a real state change on both active and inactive rows.
                                     const rowHoverBg = isActive
-                                        ? resolveHoverTint(theme.colors.primary[50], theme.colors.primary[50])
-                                        : resolveHoverTint(theme.colors.gray[50], theme.colors.backgroundColor.light);
+                                        ? rowBackgrounds.selectedActive
+                                        : rowBackgrounds.active;
                                     return (_jsxs(Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: accentTextOnCanvas(theme.colors.primary, theme.colors.primary[50]), flexShrink: 0 }))] }, org.id));
-                                }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.accentText, flexShrink: 0 }))] }, org.id));
+                                }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 export default OrgSwitcher;

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -3,13 +3,13 @@ import { Box, Flex, Text } from "@chakra-ui/react";
 import { Download, ExternalLink, FileText } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
     const theme = useCustomTheme();
-    const toolbarSurface = theme.colors.gray[50];
+    const toolbarSurface = theme.colors.background[50];
     const iconHoverInk = accentTextOnCanvas(theme.colors.primary, toolbarSurface);
-    const iconHoverBg = resolveHoverTint(theme.colors.primary[50], toolbarSurface);
-    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const iconHoverBg = listRowBackgrounds(theme.colors).active;
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.accentText }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 export default PdfViewer;

package/dist/esm/Components/RolesPermission/RolesPermission.js

@@ -3,7 +3,7 @@ import { useMemo, useState } from "react";
 import { Badge, Box, Checkbox, Divider, Flex, Heading, HStack, IconButton, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tooltip, Tr, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Check, Pencil, Plus, ShieldCheck, SquareArrowOutUpRight, Trash2, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import EmptyState from "../EmptyState/EmptyState.js";
@@ -59,8 +59,9 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
     const surface = colors.background[50];
     const muted = colors.textMuted;
     const heading = colors.text[900];
-    const headBg = colors.gray[50];
-    const rowHover = resolveHoverTint(colors.gray[50], surface);
+    const rowBackgrounds = listRowBackgrounds(colors);
+    const headBg = colors.background[100];
+    const rowHover = rowBackgrounds.active;
     const isViewMode = mode === "view";
     const columnLabels = {
         read: labels.read,