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

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]);

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -9,7 +9,7 @@ const lucide_react_1 = require("lucide-react");
 const Button_1 = __importDefault(require("../Button/Button"));
 const UpgradeButton_1 = __importDefault(require("../UpgradeButton/UpgradeButton"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const limitReachedCopy_1 = require("./limitReachedCopy");
 const KIND_ICON = {
     record: lucide_react_1.Crown,
@@ -24,10 +24,9 @@ const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, c
     const copy = (0, limitReachedCopy_1.resolveLimitCopy)(kind, canManageBilling);
     const usage = (0, limitReachedCopy_1.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 = (0, accentText_1.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 = (0, gradientInk_1.resolveGradient)(colors.gradient, colors.white, colors.black);
+    const ink = gradient.ink;
     return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(5px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { pb: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
 };
 exports.default = LimitReachedModal;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -61,7 +61,7 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
                 // 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/Components/NavigationBar/NavigationBar.js

@@ -48,17 +48,17 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: menuHoverBg, color: menuHoverInk },
         _active: { bg: menuHoverBg, color: menuHoverInk },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.border[500], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.backgroundColor.light, 
                                         // Chakra's MenuItem renders `background: var(--menu-bg)` at rest; its MenuList
                                         // baseStyle hardcodes that var to "#fff" (gated behind `_dark`, which this theme-swap
                                         // app never triggers). The `bg` prop above only recolors the list itself, not the
                                         // inherited var, so items fall back to white until hover/focus — set the var too.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: theme.colors.boxborder[500], borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.border[500] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.boxborder[200] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
                                                         var _a, _b, _c, _d;
                                                         return ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
-                                                    }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.border[500] }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
+                                                    }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: theme.colors.boxborder[200] }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: theme.colors.semanticText.error,
                                                         _hover: { bg: dangerTone.bg, color: dangerTone.fg },

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const countWords = (text = "") => {
     const t = text.trim();
@@ -122,9 +123,10 @@ function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title
                                                 setTitleShow(false);
                                             setTitleValue(e.target.value);
                                         }, placeholder: "Add a title...", variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "0.875rem", color: theme.colors.text[700], _placeholder: {
-                                            fontStyle: "italic",
-                                            color: theme.colors.textMuted,
-                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: { fontStyle: "italic", color: theme.colors.textMuted }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
+                                            color: (0, placeholderInk_1.placeholderInk)(theme.colors),
+                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: (0, jsx_runtime_1.jsx)(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: {
+                                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
+                                    }, style: { overflow: "hidden" }, p: 0 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2.5, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.textMuted, transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: () => setTitleShow(true), px: 2, py: 1, borderRadius: "md", color: theme.colors.textMuted, fontWeight: 500, fontSize: "sm", transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] }, children: "+ Add a title" })) : ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), (0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), (0, jsx_runtime_1.jsx)("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
                                     const newFiles = Array.from(e.target.files || []);
                                     const validFiles = newFiles.filter((f) => f.size <= maxFileSize);
                                     const invalidFiles = newFiles.filter((f) => f.size > maxFileSize);

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.NumberInput = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         field: {
             fontWeight: 500,
             fontSize: "0.875rem",
@@ -12,10 +13,10 @@ exports.NumberInput = {
             borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
-                fontStyle: "italic",
+                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
             },
         },
-    },
+    }),
     sizes: {
         md: {
             field: {
@@ -38,7 +39,7 @@ exports.NumberInput = {
                     border: "0.063rem solid",
                     borderColor,
                     _placeholder: {
-                        color: theme.colors.textMuted,
+                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                     },
                     _hover: {
                         borderColor: primary,

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -65,11 +65,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/Components/PinInput/PinInput.js

@@ -11,7 +11,7 @@ function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBor
                         // [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/Components/PlanPill/PlanPill.js

@@ -4,7 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const planPillGradient_1 = require("./planPillGradient");
 const TONE_ICON = {
     normal: lucide_react_1.Sparkles,
@@ -15,15 +15,15 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
     const toneGradient = {
-        normal: (0, planPillGradient_1.inkSafeGradient)(c.gradient),
+        normal: c.gradient,
         warning: (0, planPillGradient_1.statusGradient)(c.semantic.warning),
         danger: (0, planPillGradient_1.statusGradient)(c.semantic.error),
     };
-    const resolved = (0, planPillGradient_1.inkSafeGradient)(gradient !== null && gradient !== void 0 ? gradient : toneGradient[tone]);
-    const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    const resolved = (0, gradientInk_1.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 ((0, jsx_runtime_1.jsxs)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.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: (0, gradientInk_1.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/Components/PlanPill/planPillGradient.d.ts

@@ -5,20 +5,8 @@ export type Gradient = {
 };
 export declare 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 declare const ACCENT_GRADIENT: Gradient;
 /**

package/dist/Components/PlanPill/planPillGradient.js

@@ -5,22 +5,10 @@ const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const color_1 = require("../../Theme/tokens/builders/color");
 exports.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.
  */
-exports.ACCENT_GRADIENT = { from: "#8B3FC8", to: "#df187a" };
+exports.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/Components/Primitives/Primitives.d.ts

@@ -0,0 +1,6 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Avatar, AvatarGroup, Badge, Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Tabs, TabList, Tab, TabPanels, TabPanel, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+export { Table as TableRoot, Slider as RangeSlider } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, AvatarProps, BadgeProps, IconProps, LinkProps, ImageProps, SpinnerProps, DividerProps, ContainerProps, IconButtonProps, FormControlProps, FormLabelProps, TabsProps, PopoverProps, ListProps, AlertProps, MenuProps, AccordionProps, } from "@chakra-ui/react";
+export { Input, Textarea, Progress, Radio, RadioGroup, Skeleton, ModalOverlay, ModalContent, ModalCloseButton, CardBody, } from "@chakra-ui/react";
+export { Card as ChakraCard, Select as ChakraSelect, Modal as ChakraModal, ModalBody as ChakraModalBody, ModalHeader as ChakraModalHeader, ModalFooter as ChakraModalFooter, } from "@chakra-ui/react";
+export type { InputProps, TextareaProps, ProgressProps, RadioProps, SkeletonProps as ChakraSkeletonProps, SelectProps as ChakraSelectProps, ModalProps as ChakraModalProps, CardProps as ChakraCardProps, } from "@chakra-ui/react";

package/dist/Components/Primitives/Primitives.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Spinner = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
+exports.ChakraModalBody = exports.ChakraModal = exports.ChakraSelect = exports.ChakraCard = exports.CardBody = exports.ModalCloseButton = exports.ModalContent = exports.ModalOverlay = exports.Skeleton = exports.RadioGroup = exports.Radio = exports.Progress = exports.Textarea = exports.Input = exports.RangeSlider = exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.SliderMark = exports.SliderThumb = exports.SliderFilledTrack = exports.SliderTrack = exports.AccordionIcon = exports.AccordionPanel = exports.AccordionButton = exports.AccordionItem = exports.Accordion = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = exports.Tr = exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.IconButton = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = void 0;
+exports.ChakraModalFooter = exports.ChakraModalHeader = void 0;
+var react_1 = require("@chakra-ui/react");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return react_1.Box; } });
+Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return react_1.Flex; } });
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return react_1.Stack; } });
+Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return react_1.VStack; } });
+Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return react_1.HStack; } });
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return react_1.Grid; } });
+Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return react_1.GridItem; } });
+Object.defineProperty(exports, "SimpleGrid", { enumerable: true, get: function () { return react_1.SimpleGrid; } });
+Object.defineProperty(exports, "Wrap", { enumerable: true, get: function () { return react_1.Wrap; } });
+Object.defineProperty(exports, "WrapItem", { enumerable: true, get: function () { return react_1.WrapItem; } });
+Object.defineProperty(exports, "Center", { enumerable: true, get: function () { return react_1.Center; } });
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return react_1.Spacer; } });
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return react_1.Container; } });
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return react_1.Divider; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return react_1.Text; } });
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return react_1.Heading; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return react_1.Link; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return react_1.Image; } });
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_1.Icon; } });
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return react_1.Avatar; } });
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return react_1.AvatarGroup; } });
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return react_1.Badge; } });
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return react_1.Spinner; } });
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return react_1.Alert; } });
+Object.defineProperty(exports, "AlertIcon", { enumerable: true, get: function () { return react_1.AlertIcon; } });
+Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return react_1.AlertTitle; } });
+Object.defineProperty(exports, "AlertDescription", { enumerable: true, get: function () { return react_1.AlertDescription; } });
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return react_1.Portal; } });
+Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return react_1.Collapse; } });
+Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return react_1.Show; } });
+Object.defineProperty(exports, "Hide", { enumerable: true, get: function () { return react_1.Hide; } });
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return react_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return react_1.ListItem; } });
+Object.defineProperty(exports, "ListIcon", { enumerable: true, get: function () { return react_1.ListIcon; } });
+Object.defineProperty(exports, "OrderedList", { enumerable: true, get: function () { return react_1.OrderedList; } });
+Object.defineProperty(exports, "UnorderedList", { enumerable: true, get: function () { return react_1.UnorderedList; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return react_1.Tabs; } });
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return react_1.TabList; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return react_1.Tab; } });
+Object.defineProperty(exports, "TabPanels", { enumerable: true, get: function () { return react_1.TabPanels; } });
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return react_1.TabPanel; } });
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return react_1.Popover; } });
+Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return react_1.PopoverTrigger; } });
+Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return react_1.PopoverContent; } });
+Object.defineProperty(exports, "PopoverBody", { enumerable: true, get: function () { return react_1.PopoverBody; } });
+Object.defineProperty(exports, "PopoverHeader", { enumerable: true, get: function () { return react_1.PopoverHeader; } });
+Object.defineProperty(exports, "PopoverFooter", { enumerable: true, get: function () { return react_1.PopoverFooter; } });
+Object.defineProperty(exports, "PopoverArrow", { enumerable: true, get: function () { return react_1.PopoverArrow; } });
+Object.defineProperty(exports, "PopoverCloseButton", { enumerable: true, get: function () { return react_1.PopoverCloseButton; } });
+Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return react_1.FormControl; } });
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return react_1.FormLabel; } });
+Object.defineProperty(exports, "FormErrorMessage", { enumerable: true, get: function () { return react_1.FormErrorMessage; } });
+Object.defineProperty(exports, "FormHelperText", { enumerable: true, get: function () { return react_1.FormHelperText; } });
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return react_1.IconButton; } });
+Object.defineProperty(exports, "TableContainer", { enumerable: true, get: function () { return react_1.TableContainer; } });
+Object.defineProperty(exports, "Thead", { enumerable: true, get: function () { return react_1.Thead; } });
+Object.defineProperty(exports, "Tbody", { enumerable: true, get: function () { return react_1.Tbody; } });
+Object.defineProperty(exports, "Tfoot", { enumerable: true, get: function () { return react_1.Tfoot; } });
+Object.defineProperty(exports, "Tr", { enumerable: true, get: function () { return react_1.Tr; } });
+Object.defineProperty(exports, "Th", { enumerable: true, get: function () { return react_1.Th; } });
+Object.defineProperty(exports, "Td", { enumerable: true, get: function () { return react_1.Td; } });
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return react_1.Menu; } });
+Object.defineProperty(exports, "MenuButton", { enumerable: true, get: function () { return react_1.MenuButton; } });
+Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return react_1.MenuList; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return react_1.MenuItem; } });
+Object.defineProperty(exports, "MenuGroup", { enumerable: true, get: function () { return react_1.MenuGroup; } });
+Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return react_1.MenuDivider; } });
+Object.defineProperty(exports, "MenuOptionGroup", { enumerable: true, get: function () { return react_1.MenuOptionGroup; } });
+Object.defineProperty(exports, "MenuItemOption", { enumerable: true, get: function () { return react_1.MenuItemOption; } });
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return react_1.Accordion; } });
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return react_1.AccordionItem; } });
+Object.defineProperty(exports, "AccordionButton", { enumerable: true, get: function () { return react_1.AccordionButton; } });
+Object.defineProperty(exports, "AccordionPanel", { enumerable: true, get: function () { return react_1.AccordionPanel; } });
+Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return react_1.AccordionIcon; } });
+Object.defineProperty(exports, "SliderTrack", { enumerable: true, get: function () { return react_1.SliderTrack; } });
+Object.defineProperty(exports, "SliderFilledTrack", { enumerable: true, get: function () { return react_1.SliderFilledTrack; } });
+Object.defineProperty(exports, "SliderThumb", { enumerable: true, get: function () { return react_1.SliderThumb; } });
+Object.defineProperty(exports, "SliderMark", { enumerable: true, get: function () { return react_1.SliderMark; } });
+Object.defineProperty(exports, "ChakraProvider", { enumerable: true, get: function () { return react_1.ChakraProvider; } });
+Object.defineProperty(exports, "extendTheme", { enumerable: true, get: function () { return react_1.extendTheme; } });
+Object.defineProperty(exports, "useDisclosure", { enumerable: true, get: function () { return react_1.useDisclosure; } });
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return react_1.useMediaQuery; } });
+Object.defineProperty(exports, "useToken", { enumerable: true, get: function () { return react_1.useToken; } });
+Object.defineProperty(exports, "useBreakpointValue", { enumerable: true, get: function () { return react_1.useBreakpointValue; } });
+// Renamed: the library's own Table and Slider own these names.
+var react_2 = require("@chakra-ui/react");
+Object.defineProperty(exports, "TableRoot", { enumerable: true, get: function () { return react_2.Table; } });
+Object.defineProperty(exports, "RangeSlider", { enumerable: true, get: function () { return react_2.Slider; } });
+var react_3 = require("@chakra-ui/react");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return react_3.Input; } });
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return react_3.Textarea; } });
+Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return react_3.Progress; } });
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return react_3.Radio; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return react_3.RadioGroup; } });
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return react_3.Skeleton; } });
+Object.defineProperty(exports, "ModalOverlay", { enumerable: true, get: function () { return react_3.ModalOverlay; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return react_3.ModalContent; } });
+Object.defineProperty(exports, "ModalCloseButton", { enumerable: true, get: function () { return react_3.ModalCloseButton; } });
+Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return react_3.CardBody; } });
+// Prefixed because the library ships its own component under each of these names.
+var react_4 = require("@chakra-ui/react");
+Object.defineProperty(exports, "ChakraCard", { enumerable: true, get: function () { return react_4.Card; } });
+Object.defineProperty(exports, "ChakraSelect", { enumerable: true, get: function () { return react_4.Select; } });
+Object.defineProperty(exports, "ChakraModal", { enumerable: true, get: function () { return react_4.Modal; } });
+Object.defineProperty(exports, "ChakraModalBody", { enumerable: true, get: function () { return react_4.ModalBody; } });
+Object.defineProperty(exports, "ChakraModalHeader", { enumerable: true, get: function () { return react_4.ModalHeader; } });
+Object.defineProperty(exports, "ChakraModalFooter", { enumerable: true, get: function () { return react_4.ModalFooter; } });

package/dist/Components/ProductCard/ProductPrice.js

@@ -109,7 +109,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: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: theme.colors.green[100], color: (0, accentText_1.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` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.HStack, { gridColumn: 1, gridRow: 1, spacing: 2, align: "center", minW: 0, mb: 0, children: (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", maxWidth: "100%", fontSize: { base: "xs", md: "sm" }, fontWeight: "medium", whiteSpace: "nowrap", children: option.label }) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: 1, gridRow: 2, mt: 0, textAlign: "left", children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [option.offer > 0 && ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: theme.colors.green[100], color: (0, accentText_1.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` })), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: "bold", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, isSelected ? theme.colors.red[50] : theme.colors.background[50]), whiteSpace: "nowrap", children: ["\u20B9", discounted] }), option.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, textDecoration: "line-through", whiteSpace: "nowrap", children: ["\u20B9", option.price] }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.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));
                     }) }) })), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", fontSize: cfg.price, gap: 2, minW: 0, children: [selected.offer > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: theme.colors.textMuted, textDecoration: "line-through", children: ["\u20B9", selected.price] })), (0, jsx_runtime_1.jsxs)(react_2.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.red, theme.colors.backgroundColor.main), fontWeight: "semibold", children: ["\u20B9", getDiscountedPrice(selected)] })] }), rightSlot && ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, mt: { base: 2, md: 0 }, children: rightSlot }))] })] }));
 };
 exports.default = ProductPrice;

package/dist/Components/ProfileCard/ProfileCard.js

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

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -38,7 +38,7 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
     // [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/Components/RadioButton/RadioButton.js

@@ -7,7 +7,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const FormLabel_1 = require("../Common/FormLabel");
 const RadioButton = ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.75rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
+    return ((0, jsx_runtime_1.jsx)(react_1.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], borderWidth: "1.6px", _hover: {
             borderColor: theme.colors.primary[500],
             backgroundColor: theme.colors.background[100],
         }, sx: {

package/dist/Components/Reorder/Reorder.js

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

package/dist/Components/ScrollbarBox/ScrollbarBox.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import { ScrollbarVariant } from "../../Theme/tokens/builders/scrollbar";
+export interface ScrollbarBoxProps {
+    children: ReactNode;
+    height?: string;
+    maxHeight?: string;
+    overflowX?: string;
+    overflowY?: string;
+    variant?: ScrollbarVariant;
+    scrollContainerRef?: React.Ref<HTMLDivElement> | null;
+}
+declare const ScrollbarBox: React.FC<ScrollbarBoxProps>;
+export default ScrollbarBox;

package/dist/Components/ScrollbarBox/ScrollbarBox.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...(0, scrollbar_1.scrollbarStyles)(colors, variant) }, children: children }));
+};
+exports.default = ScrollbarBox;