pixelize-design-library 2.4.2-beta.2 → 2.4.2-beta.4

package/dist/esm/Components/DatePicker/SingleDatePicker.js

@@ -964,7 +964,7 @@ export const SingleDatePicker = (props) => {
                                             setTempDate(updatedDate);
                                             setInputValue(format(updatedDate, resolvedDateFormat));
                                             setIsTyping(false);
-                                        }, disabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
+                                        }, disabled: disabled })) })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: () => {
                                                 setTempDate(null);
                                                 requestClose(null);
                                             }, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: () => requestClose(), children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));

package/dist/esm/Components/DatePicker/TimeOnlyPicker.js

@@ -73,6 +73,6 @@ export const TimeOnlyPicker = (props) => {
                                             onOpen();
                                     }, error: error, size: sizeKey }) }) }) }), _jsx(PopoverContent, { width: "auto", p: 4, ref: popoverRef, boxShadow: "lg", bg: theme.colors.background[50], children: _jsxs(PopoverBody, { children: [_jsx(TimePicker, { date: resolvedTempDate, dateFormat: dateFormat, onChange: (updatedDate) => {
                                         handleTimePickerChange(updatedDate);
-                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[300], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                                    } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", mt: 4, pt: 4, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ChakraButton, { size: "sm", variant: "ghost", onClick: handleClear, children: "Clear" }), _jsx(ChakraButton, { size: "sm", colorScheme: "primary", onClick: handleOk, children: "OK" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
 };
 export default TimeOnlyPicker;

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

@@ -3,6 +3,7 @@ import { forwardRef, useCallback, useEffect, useId, useRef, useState } from "rea
 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 { ChevronDown } from "lucide-react";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 const MotionBox = motion(forwardRef((props, ref) => (_jsx(Box, { ref: ref, ...props }))));
@@ -211,18 +212,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
     };
     const DropdownContentRender = () => {
         var _a;
-        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: {
-                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) => (_jsxs(ListItem, { ref: (node) => {
+        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: () => {
                     handleListItemClick(option.id, option.label);
@@ -234,7 +224,7 @@ const Dropdown = forwardRef(({ dropDownButtonStyle, ButtonText, options, handleO
                     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) && (_jsx(Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: theme.colors.textMuted, style: ImageStyle })), _jsx(Box, { as: "span", fontSize: s.fontSize, isTruncated: true, 
                         // fontWeight={400}
                         style: LabelStyle, children: option.label })] }, option.id))) }));

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

@@ -8,7 +8,7 @@ export default function VerifyEmailOtp({ resendMail, onChange, onComplete, place
                         // [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))) }) }), _jsx(Flex, { justify: "center", children: _jsxs(Text, { fontSize: "sm", color: theme.colors.gray[600], children: ["Didn\u2019t receive the code?", " ", _jsx(Button, { variant: "link", color: theme.colors.accentText, fontWeight: "semibold", onClick: resendMail, children: "Resend Code" })] }) })] }));

package/dist/esm/Components/FilePreview/FilePreview.js

@@ -64,7 +64,7 @@ export const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hide
             , { 
                 // 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: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[100], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(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: [_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(ToolTip, { label: fileName || "File", placement: "bottom", children: _jsx(Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), _jsxs(Flex, { align: "center", gap: 1, children: [kind === "image" && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Zoom out", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: _jsx(Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), _jsx(ToolTip, { label: "Zoom in", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: _jsx(Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), _jsx(ToolTip, { label: "Rotate", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: _jsx(RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && (_jsx(ToolTip, { label: "Download", placement: "bottom", children: _jsx(IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: _jsx(Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), _jsx(ModalCloseButton, { position: "static" })] })] }), _jsx(ModalBody, { p: 5, children: renderBody() })] })] }));
 };
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 export const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {

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

@@ -170,10 +170,10 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                                             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", 
-                        // 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/esm/Components/Input/TextInput.styles.js

@@ -1,3 +1,5 @@
+import { softenToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { PLACEHOLDER_TEXT } from "../../Theme/tokens/builders/surfaceRungs.js";
 export const Input = {
     baseStyle: {
         field: {
@@ -48,8 +50,10 @@ export const Input = {
                     bg: theme.colors.gray[50],
                     border: "0.063rem solid",
                     borderColor,
+                    // `textMuted` is body copy, so a hint read as a filled value (6.59:1).
+                    // Settled against the field's own bg to just clear of AA.
                     _placeholder: {
-                        color: theme.colors.textMuted,
+                        color: softenToContrast(theme.colors.placeholder[500], theme.colors.gray[50], PLACEHOLDER_TEXT),
                     },
                     _hover: {
                         borderColor: primary,

package/dist/esm/Components/KanbanBoard/KanbanBoard.js

@@ -5,6 +5,7 @@ import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
 import { Plus, Trash2, GripVertical, ChevronLeft, ChevronRight } from "lucide-react";
 import { VariableSizeList as List, } from "react-window";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
 import AccountCard from "./AccountCard.js";
 import HeaderActions from "../Header/HeaderActions.js";
@@ -364,37 +365,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 ? (_jsxs(Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [_jsxs(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 ? (_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: _jsx(Box, { as: GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && (_jsx(Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: _jsx(IconButton, { "aria-label": "Expand column", icon: _jsx(ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), _jsx(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 }), _jsx(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 ? (_jsx(Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? (_jsx(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: _jsx(Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: _jsx(VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : (_jsx(Box, { flex: "1", minH: 0 }))] })) : (_jsxs(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: [_jsxs(Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? (_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: _jsx(Box, { as: GripVertical, size: 14, color: colors.textMuted }) })) : null, _jsx(Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", children: column.title }) })] }), column.customNode ? (_jsx(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] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(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 && (_jsx(IconButton, { "aria-label": "Collapse column", icon: _jsx(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 }), _jsx(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 ? (_jsx(Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? (_jsx(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: _jsx(Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: _jsx(VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : (_jsx(Box, { flex: "1", minH: 0 }))] })) : (_jsxs(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: [_jsxs(Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? (_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: _jsx(Box, { as: GripVertical, size: 14, color: colors.textMuted }) })) : null, _jsx(Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", children: column.title }) })] }), column.customNode ? (_jsx(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] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(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 && (_jsx(IconButton, { "aria-label": "Collapse column", icon: _jsx(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 && (_jsx(Box, { as: 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) && _jsx(Box, { width: "16px", height: "16px", flexShrink: 0 })] })] })), !isColCollapsed && (_jsxs(Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                            ...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 && (_jsx(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), virtualization ? (_jsx(List, { ref: (el) => {
                                     if (el)
@@ -409,26 +388,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 = scrollbarStyles(colors);
     const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && (_jsx(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: _jsxs(Flex, { direction: "column", align: "center", gap: 2, children: [_jsx(Box, { as: Plus, size: 20, color: colors.text[700] }), _jsx(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]);

package/dist/esm/Components/LimitReachedModal/LimitReachedModal.js

@@ -4,7 +4,7 @@ import { CheckCircle, Crown, Users } from "lucide-react";
 import Button from "../Button/Button.js";
 import UpgradeButton from "../UpgradeButton/UpgradeButton.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { resolveGradient } from "../../Theme/tokens/builders/gradientInk.js";
 import { formatLimitUsage, resolveLimitCopy } from "./limitReachedCopy.js";
 const KIND_ICON = {
     record: Crown,
@@ -19,10 +19,9 @@ const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, c
     const copy = resolveLimitCopy(kind, canManageBilling);
     const usage = formatLimitUsage(kind, used, limit);
     const KindIcon = KIND_ICON[kind];
-    const gradient = colors.gradient;
-    // Header banner uses the brand gradient (not a fixed blue/purple) so it reads correctly
-    // across all 9 brand themes, with ink picked for AA against whichever stop is lighter.
-    const ink = onGradient(gradient.from, gradient.to, colors.white, colors.black);
+    // Header banner uses the brand gradient so it reads correctly across all 9 brands.
+    const gradient = resolveGradient(colors.gradient, colors.white, colors.black);
+    const ink = gradient.ink;
     return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [_jsx(ModalOverlay, { backdropFilter: "blur(5px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, children: [_jsxs(Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [_jsx(ModalHeader, { pb: 4, children: _jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), _jsx(Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), _jsx(ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && (_jsx(Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && (_jsx(List, { spacing: 2, mt: 5, children: features.map((feature) => (_jsxs(ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [_jsx(ListIcon, { as: CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), _jsx(Divider, {}), _jsx(ModalFooter, { children: _jsxs(HStack, { spacing: 3, children: [_jsx(Button, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && (_jsx(UpgradeButton, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
 };
 export default LimitReachedModal;

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

@@ -55,7 +55,7 @@ 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[800], 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.gray[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],

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

@@ -63,11 +63,11 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    // boxborder[800], not raw gray[200]: this styles a real `<button>` (Flex as="button" below),
+    // boxborder[500], not raw gray[200]: this styles a real `<button>` (Flex as="button" below),
     // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named surface up
     // to `muted` (lightest); gray[200] fails there in dark mode.
     const triggerStyles = triggerVariant === "outline"
-        ? { border: "1px solid", borderColor: theme.colors.boxborder[800], bg: theme.colors.background[50] }
+        ? { border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
             ? { bg: theme.colors.gray[50] }
             : { bg: "transparent" };

package/dist/esm/Components/PinInput/PinInput.js

@@ -8,7 +8,7 @@ export default function PinInputs({ otp, mask, defaultValue, placeholder, manage
                         // [800], not [300]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
                         // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
                         // [800] clears all named surfaces with margin (3.44-3.90).
-                        borderColor: theme.colors.boxborder[800], _focus: {
+                        borderColor: theme.colors.boxborder[500], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
                         } }, index))) }) })] }));

package/dist/esm/Components/PlanPill/PlanPill.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { AlertCircle, Clock, Sparkles } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onGradient } from "../../Theme/tokens/builders/accentText.js";
-import { chipBorder, chipFill, inkSafeGradient, statusGradient, } from "./planPillGradient.js";
+import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
+import { chipBorder, chipFill, statusGradient, } from "./planPillGradient.js";
 const TONE_ICON = {
     normal: Sparkles,
     warning: Clock,
@@ -13,15 +13,15 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const theme = useCustomTheme();
     const c = theme.colors;
     const toneGradient = {
-        normal: inkSafeGradient(c.gradient),
+        normal: c.gradient,
         warning: statusGradient(c.semantic.warning),
         danger: statusGradient(c.semantic.error),
     };
-    const resolved = inkSafeGradient(gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone]);
-    const ink = onGradient(resolved.from, resolved.to, c.white, c.black);
+    const resolved = resolveGradient(gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone], c.white, c.black);
+    const ink = resolved.ink;
     const Icon = icon === undefined ? TONE_ICON[tone] : icon;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`, color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
+    return (_jsxs(Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: gradientCss(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
             transform: "translateY(-1px)",
             boxShadow: `0 6px 18px ${resolved.from}59`,
         }, _focusVisible: {

package/dist/esm/Components/PlanPill/planPillGradient.js

@@ -2,22 +2,10 @@ import { resolveAvatarFill } from "../../Theme/tokens/builders/statusTone.js";
 import { relativeLuminance } from "../../Theme/tokens/builders/color.js";
 export const STATUS_INK = "#ffffff";
 /**
- * The plan badge's `normal` tone is a single fixed accent — not brand-driven, and
- * not mode-dependent.
- *
- * Its tone carries meaning (normal / warning / danger), and a brand gradient can
- * collide with that: rosewood's `#c74962 → #ea0727` is red, so a healthy plan
- * rendered as if it had expired. Greyscale brands failed the other way, sinking
- * the badge into the header chrome.
- *
- * One accent for both color modes is deliberate: a lighter dark-mode variant was
- * tried and flipped `onGradient`'s ink to black, which read as a washed-out candy
- * pill on dark chrome. These stops keep white ink in both modes, so the badge looks
- * like the same component everywhere. Verified at AA (>= 4.5:1) on both stops.
- *
- * Consumers who genuinely want another colour still pass `gradient`.
+ * Opt-in accent for consumers who want a fixed badge colour instead of the brand `gradient`.
+ * One hue, like every brand gradient — a second hue reads as a status change, not a style.
  */
-export const ACCENT_GRADIENT = { from: "#8B3FC8", to: "#df187a" };
+export const ACCENT_GRADIENT = { from: "#8b3fc8", to: "#762d9d" };
 /**
  * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
  * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the

package/dist/esm/Components/ProductCard/ProductPrice.js

@@ -104,7 +104,7 @@ const ProductPrice = ({ options, size, onSelect, rightSlot }) => {
                             }, templateColumns: { base: '1fr auto', md: '1fr auto' }, 
                             // columnGap={{ base: 2, md: 3 }}
                             // rowGap={{ base: 1.5, md: 2 }}
-                            alignItems: "center", children: [_jsx(HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), _jsx(Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: _jsxs(HStack, { spacing: 2, align: "center", children: [option.offer > 0 && (_jsx(Badge, { bg: theme.colors.green[100], color: accentTextOnCanvas(theme.colors.green, theme.colors.green[100]), borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), _jsxs(Text, { fontSize: "sm", fontWeight: "bold", color: accentTextOnCanvas(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && (_jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), _jsx(Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? theme.colors.red[500] : theme.colors.boxborder[800], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && (_jsx(Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.red[500], borderRadius: "full" })) })] }, option.var_id));
+                            alignItems: "center", children: [_jsx(HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), _jsx(Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: _jsxs(HStack, { spacing: 2, align: "center", children: [option.offer > 0 && (_jsx(Badge, { bg: theme.colors.green[100], color: accentTextOnCanvas(theme.colors.green, theme.colors.green[100]), borderRadius: "md", px: { base: 0, md: 0.5 }, py: { base: 0, md: 0.25 }, fontWeight: "bold", fontSize: "10px", flexShrink: 0, children: isMobile ? `${option.offer}%` : `${option.offer}% OFF` })), _jsxs(Text, { fontSize: "sm", fontWeight: "bold", color: accentTextOnCanvas(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && (_jsxs(Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), _jsx(Box, { gridColumn: 2, gridRow: 1, ml: { base: 0, md: 0 }, justifySelf: "end", w: { base: "0.625rem", md: "0.75rem" }, h: { base: "0.625rem", md: "0.75rem" }, minW: { base: "0.625rem", md: "0.75rem" }, borderRadius: "full", border: "0.125rem solid", borderColor: isSelected ? theme.colors.red[500] : theme.colors.boxborder[500], bg: theme.colors.background[50], display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "none", children: isSelected && (_jsx(Box, { w: { base: "0.25rem", md: "0.3125rem" }, h: { base: "0.25rem", md: "0.3125rem" }, bg: theme.colors.red[500], borderRadius: "full" })) })] }, option.var_id));
                     }) }) })), _jsxs(Flex, { mt: 2, w: "full", gap: 3, direction: { base: "column", md: "row" }, align: { base: "flex-start", md: "center" }, justify: { base: "flex-start", md: rightSlot ? "space-between" : "flex-start" }, children: [_jsxs(Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && (_jsxs(Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), _jsxs(Text, { color: accentTextOnCanvas(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && (_jsx(Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
 };
 export default ProductPrice;

package/dist/esm/Components/ProfileCard/ProfileCard.js

@@ -13,7 +13,7 @@ export const ProfileCardFooter = ({ children, }) => {
 };
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "0.5px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
     const { colors } = useCustomTheme();
-    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[400];
+    const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.border[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
     const isReactElement = (child) => {
         return child !== null && typeof child === "object" && "type" in child;

package/dist/esm/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -35,7 +35,7 @@ export default function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth
     // [800], not [300]: the edit IconButton's border is a control boundary — WCAG 1.4.11 needs
     // >=3.0 against any named surface up to `muted` (lightest); [300] fails there, [800] clears
     // all with margin.
-    const border = c.boxborder[800];
+    const border = c.boxborder[500];
     // Shared modern frame for whichever media we render (photo / pdf / fallback).
     const mediaFrame = {
         boxSize: imageWidth,

package/dist/esm/Components/Reorder/Reorder.js

@@ -15,7 +15,7 @@ const ReorderList = ({ label = "", items, onReorder, showRemoveIcon = false, onR
     };
     return (_jsxs(Box, { borderWidth: "0.063rem", borderRadius: "md", px: 3, py: 2, bg: colors.background[50], children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BetweenHorizonalStart, {}), _jsx(Text, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 14, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", py: 4, children: label })] }), _jsx(Divider, {}), _jsx("br", {}), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "item-list", direction: "horizontal", children: (provided) => (_jsxs(HStack, { ref: provided.innerRef, ...provided.droppableProps, spacing: 4, overflowX: "auto", children: [items.map((item, index) => (_jsx(Draggable, { draggableId: item.id, index: index, children: (provided) => {
                                     var _a;
-                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[300], borderRadius: "md", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
+                                    return (_jsxs(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, position: "relative", border: "0.063rem solid", borderColor: colors.boxborder[200], borderRadius: "md", overflow: "hidden", children: [_jsx(Image, { src: item.previewUrl, alt: (_a = item.name) !== null && _a !== void 0 ? _a : `item-${index}`, boxSize: "7.5rem", objectFit: "cover" }), _jsx(IconButton, { icon: _jsx(GripVertical, { size: 16, color: colors.textMuted }), "aria-label": "Drag", size: "sm", position: "absolute", top: 1, left: 1, variant: "ghost" }), _jsx(Badge, { position: "absolute", colorScheme: "gray", variant: "solid", bottom: 1, right: 1, children: index + 1 }), showRemoveIcon && (_jsx(IconButton, { icon: _jsx(X, { size: 16, color: colors.semanticText.error }), "aria-label": "Remove", size: "sm", position: "absolute", top: 1, right: 1, variant: "ghost", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id) }))] }));
                                 } }, item.id))), provided.placeholder] })) }) })] }));
 };
 export default ReorderList;

package/dist/esm/Components/ScrollbarBox/ScrollbarBox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { scrollbarStyles, } from "../../Theme/tokens/builders/scrollbar.js";
+const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...scrollbarStyles(colors, variant) }, children: children }));
+};
+export default ScrollbarBox;

package/dist/esm/Components/SearchSelect/SearchSelect.js

@@ -449,7 +449,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                             var _a, _b, _c, _d, _e;
                             const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
-                            return (_jsxs(Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: theme.colors.boxborder[300], bg: customSelectOpen
+                            return (_jsxs(Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: customSelectOpen
                                     ? theme.colors.primary.opacity[8]
                                     : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: "background 0.15s ease, box-shadow 0.15s ease", boxShadow: customSelectOpen
                                     ? `inset 0 0 0 0.063rem ${theme.colors.primary[500]}`
@@ -506,10 +506,10 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                                 setCustomSelectOpen(false);
                                             return !prev;
                                         });
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && (_jsxs(Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[100]}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_jsxs(Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && (_jsxs(Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => (_jsxs(Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
                                             ? theme.colors.primary.opacity[8]
                                             : isSelected(option.id)
                                                 ? theme.colors.gray[100]
-                                                : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[100]}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && _jsx(HelperText, { helperText: helperText }), error && _jsx(ErrorMessage, { errorMessage: errorMessage })] }));
+                                                : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (_jsxs(Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (_jsxs(Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || _jsx(Plus, { size: s.addNewIconSize }), _jsx(Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && _jsx(HelperText, { helperText: helperText }), error && _jsx(ErrorMessage, { errorMessage: errorMessage })] }));
 };
 export default SearchSelect;

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

@@ -60,7 +60,7 @@ export const Select = {
             // [800], not [500]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
             // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
             // [800] clears all named surfaces with margin (3.44-3.90).
-            const borderColor = theme.colors.boxborder[800];
+            const borderColor = theme.colors.boxborder[500];
             const shadowPrimary = theme.colors.boxShadow.primary;
             const shadowError = theme.colors.boxShadow.error;
             const primary = theme.colors.primary[500];

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -30,7 +30,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
     const errorBorder = `2px solid ${theme.colors.semanticText.error}`;
     // [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 defaultBorderThin = `1px solid ${theme.colors.boxborder[800]}`;
+    const defaultBorderThin = `1px solid ${theme.colors.boxborder[500]}`;
     const [selectedOptions, setSelectedOptions] = useState(initialSelectedOption ? [initialSelectedOption] : []);
     const [inputValue, setInputValue] = useState(searchQuery);
     const [isOpen, setIsOpen] = useState(false);
@@ -246,7 +246,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                                         return;
                                     }
                                     setIsOpen(true);
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[800], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[500], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
                                     borderColor: error
                                         ? theme.colors.semanticText.error
                                         : theme.colors.primary[500],
@@ -264,7 +264,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                                     fontSize: 15,
                                     letterSpacing: 0.7,
                                     border: error ? errorBorder : defaultBorderThin,
-                                } }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[300], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[300], zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
+                                } }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && _jsx(ErrorMessage, { errorMessage: errorMessage })] }) }) }));
 }

package/dist/esm/Components/SelectV2/SelectV2.js

@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from
 import { Box, Checkbox, FormControl, Input, Popover, PopoverAnchor, PopoverContent, Portal, useDisclosure, } from "@chakra-ui/react";
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { getFieldStateStyles } from "../Common/fieldStyles.js";
 import { TextLabel } from "../Common/FormLabel.js";
 import ErrorMessage from "../Common/ErrorMessage.js";
@@ -192,15 +193,7 @@ export default function SelectV2(props) {
     const triggerId = `selectv2-trigger-${instanceId}`;
     const activeOption = filteredOptions[activeIndex];
     const activeDescendantId = activeOption ? optionDomId(listboxId, activeOption.id) : undefined;
-    const listScrollStyles = useMemo(() => ({
-        scrollbarWidth: "thin",
-        scrollbarColor: `${theme.colors.gray[300]} transparent`,
-        "&::-webkit-scrollbar": { width: "6px" },
-        "&::-webkit-scrollbar-thumb": {
-            background: theme.colors.gray[300],
-            borderRadius: "base",
-        },
-    }), [theme]);
+    const listScrollStyles = useMemo(() => scrollbarStyles(theme.colors, "overlay"), [theme]);
     const defaultTriggerContent = () => {
         var _a;
         if (props.isMulti) {
@@ -215,7 +208,7 @@ export default function SelectV2(props) {
         return selectedOptions[0] ? selectedOptions[0].label : placeholder;
     };
     const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
-    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: triggerId, isRequired: isRequired })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? theme.colors.text[900] : theme.colors.placeholder[500], "data-testid": dataTestId, ...fieldStyles, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: theme.colors.textMuted, children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { width: "100%", borderRadius: "xl", border: `0.063rem solid ${theme.colors.boxborder[200]}`, boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && (_jsx(Box, { p: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[100]}`, children: _jsx(Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
+    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: triggerId, isRequired: isRequired })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? theme.colors.text[900] : theme.colors.placeholder[500], "data-testid": dataTestId, ...fieldStyles, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: theme.colors.textMuted, children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(Portal, { children: _jsxs(PopoverContent, { width: "100%", borderRadius: "xl", border: `0.063rem solid ${theme.colors.boxborder[200]}`, boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && (_jsx(Box, { p: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: _jsx(Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
                                             setFilterText(event.target.value);
                                             setActiveIndex(0);
                                         }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), _jsxs(Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && (_jsx(Box, { px: 3, py: 2, fontSize: "0.8125rem", color: theme.colors.textMuted, children: "No Options" })), filteredOptions.map((option, index) => {

package/dist/esm/Components/StageProgress/StageProgress.js

@@ -1,16 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Flex, Skeleton } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import StageItem from "./StageItem.js";
 import StepperStage from "./StepperStage.js";
-const scrollSxFor = (thumb) => ({
-    "&::-webkit-scrollbar": { height: "4px" },
-    "&::-webkit-scrollbar-thumb": {
-        borderRadius: "full",
-        backgroundColor: thumb,
-    },
-    "&::-webkit-scrollbar-track": { background: "transparent" },
-});
 // Gap between items per variant (chevron interlocks via negative margin).
 const gapFor = {
     chevron: "0",
@@ -35,7 +28,7 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
     const total = stages.length;
     return (_jsx(Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: {
             "&:hover": { overflowX: "auto" },
-            ...scrollSxFor(theme.colors.gray[300]),
+            ...scrollbarStyles(theme.colors, "overlay"),
         }, children: stages.map((stage, index) => {
             const state = stateFor(index);
             if (variant === "stepper") {