pixelize-design-library 2.4.2-beta.1 → 2.4.2-beta.11

package/dist/Components/Accordion/Accordion.js

@@ -10,13 +10,13 @@ const accordionColors_1 = require("./accordionColors");
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isDark = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main);
-    const border = colors.boxborder[300];
+    const border = colors.boxborder[200];
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = (0, react_1.useMemo)(() => (0, accordionColors_1.getAccordionHoverColors)(colors, isDark), [colors, isDark]);
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[400] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+            return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
                     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",

package/dist/Components/Button/Button.styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 /**
  * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
  * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
@@ -141,11 +142,11 @@ exports.Button = {
         // Theme-based two-tone gradient: each theme defines its own `gradient` {from,to} pair.
         // Ignores colorScheme; hover/active shift brightness so it works for any pair.
         gradient: ({ theme }) => {
-            const g = theme.colors.gradient;
-            const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
+            const g = (0, gradientInk_1.resolveGradient)(theme.colors.gradient, theme.colors.white, theme.colors.black);
+            const bg = (0, gradientInk_1.gradientCss)(g);
             return {
                 bgImage: bg,
-                color: (0, accentText_1.onGradient)(g.from, g.to, theme.colors.white, theme.colors.black),
+                color: g.ink,
                 border: "none",
                 _hover: {
                     bgImage: bg,

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
@@ -49,9 +49,9 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     // keep the segments transparent (so it doesn't restart per button/icon), with a
     // translucent-white hover overlay for per-segment feedback.
     const isGradient = variant === "gradient";
-    const gradientStops = theme.colors.gradient;
-    const gradientBg = `linear-gradient(135deg, ${gradientStops.from} 0%, ${gradientStops.to} 100%)`;
-    const gradientInk = (0, accentText_1.onGradient)(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const gradientStops = (0, gradientInk_1.resolveGradient)(theme.colors.gradient, theme.colors.white, theme.colors.black);
+    const gradientBg = (0, gradientInk_1.gradientCss)(gradientStops);
+    const gradientInk = gradientStops.ink;
     const whiteRgb = (0, color_1.hexToRgb)(theme.colors.white);
     const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
     const gradientItemSx = isGradient
@@ -72,7 +72,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                             // this theme-swap app never triggers) — our `bg` prop above only recolors the list
                             // itself, not the inherited var, so items fell back to white until hover/focus (which
                             // our own sx already overrides). Setting the var here fixes the rest state too.
-                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: theme.colors.boxborder[500], borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: "0.5rem",
@@ -90,7 +90,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                             mx: 0,
                                             borderRadius: "none",
                                             borderBottom: "1px solid",
-                                            borderColor: theme.colors.boxborder[300],
+                                            borderColor: theme.colors.boxborder[200],
                                         }
                                         : {}),
                                     _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },

package/dist/Components/Checkbox/Checkbox.js

@@ -27,7 +27,7 @@ function CheckBox({ label, labelFontSize, showLabelTooltip, labelTooltip, labelC
             ...labelSx,
         }
         : { ...labelSx };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Checkbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
                     ...sx,
                     ".chakra-checkbox__control": { w: controlSize, h: controlSize },
                 }, children: label && (showLabelTooltip ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -18,6 +18,8 @@ exports.Checkbox = {
                 height: "1.25rem",
                 borderWidth: "1.6px",
                 borderRadius: "base",
+                // Without a resting colour Chakra falls back to its own gray.500.
+                borderColor: theme.colors.boxborder[500],
                 transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
                 _disabled: {
                     bg: theme.colors.background[50],

package/dist/Components/Common/fieldStyles.js

@@ -14,7 +14,7 @@ exports.FIELD_TRANSITION = "border-color 0.2s, box-shadow 0.2s";
 const getFieldStateStyles = (theme, { error = false, focused = false } = {}) => {
     // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
     // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const idleBorder = theme.colors.boxborder[800];
+    const idleBorder = theme.colors.boxborder[500];
     const primary = theme.colors.primary[500];
     const errorColor = theme.colors.semanticText.error;
     const ringPrimary = theme.colors.boxShadow.primary;

package/dist/Components/CopyButton/CopyButton.js

@@ -39,7 +39,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     if (variant === "button") {
         return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
             // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[800], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
+            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: copied ? copiedLabel : label })] }));
     }
     return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: copied ? copiedLabel : tooltip, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: iconSize }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: iconSize }) }) }));
 };

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -19,6 +19,6 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
                                 // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
                                 // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
                                 // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
-                                borderColor: colors.boxborder[800], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+                                borderColor: colors.boxborder[500], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 exports.default = EditModuleModal;

package/dist/Components/DatePicker/CalendarPanel.js

@@ -26,7 +26,7 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
     const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
     const selectStyles = {
         border: "1px solid",
-        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[300]
+        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[200]
         // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
         borderColor: theme.colors.boxborder[500],
         borderRadius: "md",

package/dist/Components/DatePicker/RangeDatePicker.js

@@ -178,7 +178,7 @@ const RangeDatePicker = (props) => {
                                                 : `0 0 0 1px ${theme.colors.primary[500]}`,
                                         }, _hover: {
                                             borderColor: error ? theme.colors.semanticText.error : undefined,
-                                        }, cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                        }, cursor: "pointer" }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
                                             const [from, to] = p.getRange();
                                             applyPreset(from, to);
                                         }, children: p.label }, p.label))) }), (0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect }), formatHasTime && ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? ((0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: startTimeBaseDate, onChange: (updated) => {
@@ -207,7 +207,7 @@ const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 };
 exports.RangeDatePicker = RangeDatePicker;
 exports.default = exports.RangeDatePicker;

package/dist/Components/DatePicker/SingleDatePicker.js

@@ -962,7 +962,7 @@ const SingleDatePicker = (props) => {
                                             else {
                                                 onClose();
                                             }
-                                        }, style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
+                                        }, style: { cursor: "pointer" }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: calendarIconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showDate && ((0, jsx_runtime_1.jsx)(CalendarPanel_1.default, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonth((prev) => updater(prev)), today: today, isRange: false, tempDate: tempDate, tempRangeStart: null, tempRangeEnd: null, isSameDay: date_fns_1.isSameDay, isBefore: date_fns_1.isBefore, isAfter: date_fns_1.isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect })), showTime && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: showDate ? 3 : 0, children: resolvedPickerType === "time" ? ((0, jsx_runtime_1.jsx)(TimePickerInput_1.TimePickerInput, { value: tempDate, onChange: (updatedDate) => {
                                             setTempDate(updatedDate);
                                             setInputValue(updatedDate ? (0, date_fns_1.format)(updatedDate, resolvedDateFormat) : "");
                                             setIsTyping(false);
@@ -970,7 +970,7 @@ const SingleDatePicker = (props) => {
                                             setTempDate(updatedDate);
                                             setInputValue((0, date_fns_1.format)(updatedDate, resolvedDateFormat));
                                             setIsTyping(false);
-                                        }, disabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                        }, disabled: disabled })) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                 setTempDate(null);
                                                 requestClose(null);
                                             }, children: "Clear" }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

package/dist/Components/DatePicker/TimeOnlyPicker.js

@@ -79,7 +79,7 @@ const TimeOnlyPicker = (props) => {
                                             onOpen();
                                     }, error: error, size: sizeKey }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { children: [(0, jsx_runtime_1.jsx)(TimePicker_1.default, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                         handleTimePickerChange(updatedDate);
-                                    } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
+                                    } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 };
 exports.TimeOnlyPicker = TimeOnlyPicker;
 exports.default = exports.TimeOnlyPicker;

package/dist/Components/Dropdown/DropDown.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const lucide_react_1 = require("lucide-react");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, ...props }))));
@@ -213,18 +214,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
     };
     const DropdownContentRender = () => {
         var _a;
-        return ((0, jsx_runtime_1.jsx)(react_2.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: {
-                scrollbarWidth: "thin",
-                scrollbarColor: `${theme.colors.gray[300]} transparent`,
-                "&::-webkit-scrollbar": { width: "6px" },
-                "&::-webkit-scrollbar-thumb": {
-                    background: theme.colors.gray[300],
-                    borderRadius: "base",
-                },
-                "&::-webkit-scrollbar-thumb:hover": {
-                    background: theme.colors.gray[400],
-                },
-            }, style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
+        return ((0, jsx_runtime_1.jsx)(react_2.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: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), style: ListStyle, children: options.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { ref: (node) => {
                     itemRefs.current[index] = node;
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
@@ -236,7 +226,7 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
                     bg: theme.colors.primary.opacity[8],
                     color: theme.colors.accentText,
                 }, borderBottom: divider
-                    ? `0.063rem solid ${theme.colors.boxborder[100]}`
+                    ? `0.063rem solid ${theme.colors.boxborder[200]}`
                     : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500, children: [(option === null || option === void 0 ? void 0 : option.image) && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
                         // fontWeight={400}
                         style: LabelStyle, children: option.label })] }, option.id))) }));

package/dist/Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js

@@ -11,7 +11,7 @@ function VerifyEmailOtp({ resendMail, onChange, onComplete, placeholder = "", pi
                         // [800], not [300]: WCAG 1.4.11 needs >=3.0 for a control boundary against any
                         // named surface up to `muted` (lightest); [300] fails there, [800] clears all
                         // with margin.
-                        borderColor: theme.colors.boxborder[800], backgroundColor: theme.colors.background[200], _focus: {
+                        borderColor: theme.colors.boxborder[500], backgroundColor: theme.colors.background[200], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
                         } }, index))) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));

package/dist/Components/FilePreview/FilePreview.js

@@ -70,7 +70,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
             , { 
                 // Chakra's default Modal drives its bg off `--modal-bg`, which flips to
                 // `colors.gray.700` under `_dark` — a light grey in our derived dark palettes.
-                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[100], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
+                bg: theme.colors.background[50], borderRadius: "2xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -149,13 +149,13 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                         pointerEvents: 'none', // Allow clicks to pass through track
                                         zIndex: 3,
                                         margin: 0,
-                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "min" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: () => {
+                                    } })] }), (0, jsx_runtime_1.jsxs)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "min", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMin, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.gray[50], borderColor: theme.colors.gray[300], cursor: "pointer", onClick: () => setOpenPrice({ id: section.id, target: "max" }), gap: 2, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[800], children: [v, range.unit ? ` ${range.unit}` : ""] }), currentMin === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.red[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: (0, accentText_1.onFilled)(theme.colors.red[100], theme.colors.white, theme.colors.black) }) })) : null] }, `min-${v}`))) }) }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: openPrice.id === section.id && openPrice.target === "max", onClose: () => setOpenPrice({}), placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "12px", color: theme.colors.text[500], whiteSpace: "nowrap", children: [currentMax, range.unit ? ` ${range.unit}` : ""] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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)];
@@ -175,10 +175,10 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             const starColor = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? theme.colors.red[50] : theme.colors.background[50]);
                                             return Array.from({ length: 5 }, (_, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`)));
                                         })() }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`))) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.gray[50], border: "1px solid", 
-                        // boxborder[800], not raw gray[200]: WCAG 1.4.11 needs >=3.0 for a control
+                        // 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.
-                        borderColor: theme.colors.boxborder[800], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
+                        borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.red[400], boxShadow: "none" }, value: searchTerms[section.id] || "", onChange: (e) => {
                             const v = e.target.value;
                             setSearchTerms((prev) => ({ ...prev, [section.id]: v }));
                             if (v)

package/dist/Components/Form/FormWrapper.js

@@ -5,6 +5,6 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormWrapper = ({ icon, text, children, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "base", bg: colors.background[50], border: `0.075rem solid ${colors.border[500]}`, boxShadow: `0 0.063rem 0.125rem 0 ${colors.boxShadow.primary}`, p: "1.5rem", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, size: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "base", bg: colors.background[50], border: `0.075rem solid ${colors.boxborder[200]}`, boxShadow: `0 0.063rem 0.125rem 0 ${colors.boxShadow.primary}`, p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/Header/HeaderActions.d.ts

@@ -1,5 +1,7 @@
 import { OptionProp } from "../Select/SelectProps";
-declare const HeaderActions: ({ select, edit, create, }: {
+declare const HeaderActions: ({ select, edit, create, surface, }: {
+    /** Background this is drawn on. Header's bar is dark in BOTH modes — pass it there. */
+    surface?: string;
     select?: {
         isSelect?: boolean;
         options?: OptionProp[];

package/dist/Components/Header/HeaderActions.js

@@ -9,20 +9,24 @@ const react_2 = __importDefault(require("react"));
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const Select_1 = __importDefault(require("../Select/Select"));
 const Divider_1 = __importDefault(require("../Divider/Divider"));
-const HeaderActions = ({ select, edit, create, }) => {
+const HeaderActions = ({ select, edit, create, surface, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    const ink = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, accentText_1.AA_NORMAL_TEXT);
+    const iconInk = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, outlineRung_1.AA_NON_TEXT);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
         elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: colors.text[500] }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: colors.text[500] }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.Input = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         field: {
             fontWeight: 500,
             fontSize: "0.875rem",
@@ -13,11 +14,12 @@ exports.Input = {
             alignItems: "center",
             borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
+            // Every variant inherits the hint ink; only `outline` used to set it.
             _placeholder: {
-                fontStyle: "italic",
+                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
             },
         },
-    },
+    }),
     sizes: {
         sm: {
             field: {
@@ -52,7 +54,7 @@ exports.Input = {
                     border: "0.063rem solid",
                     borderColor,
                     _placeholder: {
-                        color: theme.colors.textMuted,
+                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                     },
                     _hover: {
                         borderColor: primary,

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Textarea = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.Textarea = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         fontWeight: 500,
         fontSize: "0.875rem",
         letterSpacing: "0.044rem",
@@ -11,9 +12,9 @@ exports.Textarea = {
         borderRadius: "lg",
         transition: "border-color 0.2s, box-shadow 0.2s",
         _placeholder: {
-            fontStyle: "italic",
+            color: (0, placeholderInk_1.placeholderInk)(theme.colors),
         },
-    },
+    }),
     sizes: {
         md: {
             fontSize: "0.875rem",
@@ -33,7 +34,7 @@ exports.Textarea = {
                 borderColor,
                 bg: theme.colors.gray[50],
                 _placeholder: {
-                    color: theme.colors.textMuted,
+                    color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                 },
                 _hover: {
                     borderColor: primary,

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -43,6 +43,7 @@ const dnd_1 = require("@hello-pangea/dnd");
 const lucide_react_1 = require("lucide-react");
 const react_window_1 = require("react-window");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const usePreferences_1 = require("../../Hooks/usePreferences");
 const AccountCard_1 = __importDefault(require("./AccountCard"));
 const HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
@@ -402,37 +403,15 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
                     : colors.boxborder[200]}`, transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: `${containerHeight - 60}px`, onMouseEnter: () => setHoveredColumn(colId), onMouseLeave: () => setHoveredColumn(null), children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_a = column.color) !== null && _a !== void 0 ? _a : colors.primary[500], bg: colors.background[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: colors.text[700], sx: {
                                             writingMode: "vertical-rl",
                                             textOrientation: "mixed",
-                                        }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "full", border: "1px solid", borderColor: colors.boxborder[200], display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "10px", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `0.063rem solid ${colors.boxborder[100]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "full", backgroundColor: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[700], fontWeight: 600, fontSize: "0.625rem", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete &&
+                                        }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "full", border: "1px solid", borderColor: colors.boxborder[200], display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "10px", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "full", backgroundColor: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[700], fontWeight: 600, fontSize: "0.625rem", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete &&
                                         hoveredColumn === colId &&
                                         column.items.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => handleColumnDelete(colId), transition: "color 0.2s ease", flexShrink: 0 })), !(canDelete &&
                                         hoveredColumn === colId &&
                                         column.items.length > 0) && (0, jsx_runtime_1.jsx)(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                            ...(0, scrollbar_1.scrollbarStyles)(colors),
                             overflowY: "auto",
                             overflowX: "hidden",
-                            scrollbarWidth: "thin",
-                            scrollbarColor: `${colors.gray[300]} transparent`,
-                            "&::-webkit-scrollbar": {
-                                width: "6px !important",
-                                height: "6px !important",
-                            },
-                            "&::-webkit-scrollbar-track": {
-                                background: colors.gray[100],
-                                borderRadius: "base",
-                                marginTop: "4px",
-                                marginBottom: "4px",
-                            },
-                            "&::-webkit-scrollbar-thumb": {
-                                background: colors.gray[300],
-                                borderRadius: "base",
-                                border: "1px solid",
-                                borderColor: colors.gray[100],
-                            },
-                            "&::-webkit-scrollbar-thumb:hover": {
-                                background: colors.gray[400],
-                            },
-                            "&": {
-                                scrollbarGutter: "stable both-edges",
-                            },
+                            "&": { scrollbarGutter: "stable both-edges" },
                             cursor: canDrag ? "grab" : "not-allowed",
                         }, children: [(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && ((0, jsx_runtime_1.jsx)(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), virtualization ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { ref: (el) => {
                                     if (el)
@@ -447,26 +426,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         return null;
     const showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
     const hasAnyColumns = Object.keys(columns).length > 0;
-    const flexScrollSx = {
-        "&::-webkit-scrollbar": {
-            height: "6px",
-        },
-        "&::-webkit-scrollbar-track": {
-            background: colors.gray[100],
-            borderRadius: "base",
-            margin: "0 4px",
-        },
-        "&::-webkit-scrollbar-thumb": {
-            background: colors.gray[400],
-            borderRadius: "base",
-            border: `1px solid ${colors.gray[100]}`,
-        },
-        "&::-webkit-scrollbar-thumb:hover": {
-            background: colors.gray[500],
-        },
-        scrollbarWidth: "thin",
-        scrollbarColor: `${colors.gray[400]} ${colors.gray[100]}`,
-    };
+    const flexScrollSx = (0, scrollbar_1.scrollbarStyles)(colors);
     const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: `${containerHeight - 60}px`, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
     const columnsList = Object.entries(columns).map(([colId, column], colIndex) => {
         const isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);