pixelize-design-library 2.3.22 → 2.4.1-beta.1

package/dist/Components/Header/components/desktopMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"desktopMenu.d.ts","sourceRoot":"","sources":["../../../../src/Components/Header/components/desktopMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAG,MAAM,gBAAgB,CAAC;AAGnD,QAAA,MAAM,WAAW,GAAI,2GAUlB,gBAAgB,4CAkHlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"desktopMenu.d.ts","sourceRoot":"","sources":["../../../../src/Components/Header/components/desktopMenu.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAG,MAAM,gBAAgB,CAAC;AAInD,QAAA,MAAM,WAAW,GAAI,2GAUlB,gBAAgB,4CA8HlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/Header/components/desktopMenu.js

@@ -4,25 +4,41 @@ 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 DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem", children: menuItems.map((item) => {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             const hasChildren = !!item.children;
             const isHovered = hoveredMenu === item.label;
             return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }) : undefined, 
                         // bg={isActive(item.href) ? activeBg : "transparent"}
-                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: isActive(item.href) ? activeBg : color, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
+                        // `activeBg` is only readable as an underline accent (WCAG 1.4.11, 3:1) — it comes
+                        // from accentTextOnCanvas walking a LIGHT-oriented scale (`themeColor.primary`)
+                        // against this ALWAYS-dark sidebar canvas, which searches the wrong direction and
+                        // can land near-black (measured ~1.0-1.1 contrast). Text stays on `color`, the
+                        // white-family ink Header already uses for every other item on this same canvas.
+                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: color, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, children: [item.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", borderRadius: "md", boxShadow: "sm", 
                                     // backdropFilter="saturate(180%) blur(6px)"
                                     // bg="whiteAlpha.800"
                                     // color="gray.800"
-                                    px: 2, py: 0.5, children: (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 1, p: 2, children: (_d = item.children) === null || _d === void 0 ? void 0 : _d.map((subItem) => {
-                                    var _a, _b, _c, _d;
+                                    px: 2, py: 0.5, children: (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { children: item.label })] }) }), hasChildren && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isHovered, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "100%", bg: (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50], color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[900], rounded: "md", shadow: "md", minW: "10rem", zIndex: 10, children: (0, jsx_runtime_1.jsx)(react_1.Stack, { spacing: 1, p: 2, children: (_f = item.children) === null || _f === void 0 ? void 0 : _f.map((subItem) => {
+                                    var _a, _b, _c, _d, _e, _f;
                                     return ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 0, align: "start", children: [subItem.badge && ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "md", boxShadow: "sm", 
                                                     // backdropFilter="saturate(180%) blur(6px)"
                                                     // bg="whiteAlpha.800"
                                                     // color="gray.800"
-                                                    px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
+                                                    px: 2, py: 0.5, children: (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label })), (0, jsx_runtime_1.jsx)(react_1.Text
+                                                // text[800] is tuned for the background[50] canvas, not the activeBg
+                                                // fill this row switches to — onFilled picks whichever of white/black
+                                                // actually clears AA against that fill instead.
+                                                , { 
+                                                    // text[800] is tuned for the background[50] canvas, not the activeBg
+                                                    // fill this row switches to — onFilled picks whichever of white/black
+                                                    // actually clears AA against that fill instead.
+                                                    color: isActive(subItem.href)
+                                                        ? (0, accentText_1.onFilled)(activeBg, (_d = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _d !== void 0 ? _d : "#fff", (_e = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _e !== void 0 ? _e : "#000")
+                                                        : (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
                                 }) }) }) }))] }, item.label));
         }) }));
 };

package/dist/Components/Input/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Components/Input/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;uLAkBvC,UAAU;AA2Eb,wBAAiC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/Components/Input/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;uLAmBvC,UAAU;AA8Eb,wBAAiC"}

package/dist/Components/Input/Input/Input.js

@@ -43,6 +43,7 @@ const lucide_react_1 = require("lucide-react");
 const FormLabel_1 = require("../../Common/FormLabel");
 const fieldStyles_1 = require("../../Common/fieldStyles");
 const ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Input = ({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired, isInformation, informationMessage, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const theme = (0, react_2.useTheme)();
@@ -50,14 +51,17 @@ const Input = ({ label, type, value, onChange, error, placeholder, className, in
     const [showPassword, setShowPassword] = (0, react_1.useState)(false);
     const isPassword = type === "password";
     const inputType = isPassword ? (showPassword ? "text" : "password") : type;
+    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured against the
+    // parent surface — up to `muted` (lightest). [500] fails there; [800] clears all named
+    // surfaces with margin (3.44-3.90).
     const borderColor = error
         ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
         : value
             ? (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[500]
-            : (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[500];
+            : (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[800];
     const shadowPrimary = (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
     const shadowError = (_f = colors.boxShadow) === null || _f === void 0 ? void 0 : _f.error;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { className: inputBoxClassName, mb: 4, children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (_g = colors.secondary) === null || _g === void 0 ? void 0 : _g[500], pr: isPassword ? 10 : 4, _hover: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { className: inputBoxClassName, mb: 4, children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: className, px: 4, py: 2, borderRadius: fieldStyles_1.FIELD_RADIUS, borderWidth: "1px", borderColor: borderColor, color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, (_g = colors.backgroundColor) === null || _g === void 0 ? void 0 : _g.main), pr: isPassword ? 10 : 4, _hover: {
                             borderColor: error
                                 ? (_j = (_h = colors.semantic) === null || _h === void 0 ? void 0 : _h.error) === null || _j === void 0 ? void 0 : _j[600]
                                 : value

package/dist/Components/Input/Switch/InputSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputSwitch.d.ts","sourceRoot":"","sources":["../../../../src/Components/Input/Switch/InputSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIN,WAAW,EAIX,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,GAAI,yHAWzB,iBAAiB,4CAqEnB,CAAC"}
+{"version":3,"file":"InputSwitch.d.ts","sourceRoot":"","sources":["../../../../src/Components/Input/Switch/InputSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIN,WAAW,EAGX,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,WAAW,GAAI,yHAWzB,iBAAiB,4CAiEnB,CAAC"}

package/dist/Components/Input/Switch/InputSwitch.js

@@ -7,8 +7,10 @@ const FormLabel_1 = require("../../Common/FormLabel");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, label, isInformation, informationMessage, isRequired, size = "md", ...props }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const activeColor = (0, react_1.useColorModeValue)(theme.colors.primary[500], theme.colors.primary[300]);
-    const inactiveColor = (0, react_1.useColorModeValue)(theme.colors.gray[300], theme.colors.gray[600]);
+    // Read the palette directly — it is already swapped for the active mode, so pairing the rungs
+    // through useColorModeValue would adapt twice and pick the wrong rung on the dark canvas.
+    const activeColor = theme.colors.primary[500];
+    const inactiveColor = theme.colors.gray[300];
     const sizeStyles = {
         sm: { fontSize: "sm", spacing: 1 },
         md: { fontSize: "md", spacing: 2 },

package/dist/Components/Input/TextInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Input/TextInput.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,KAAK,EAAE,oBA+FnB,CAAC"}
+{"version":3,"file":"TextInput.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Input/TextInput.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,KAAK,EAAE,oBAoGnB,CAAC"}

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

@@ -43,7 +43,12 @@ exports.Input = {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             const { theme } = props;
             const errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
-            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            // [800], not [500]/[700]: the resting border IS the control boundary (WCAG 1.4.11
+            // needs >=3.0), measured against the control's actual parent surface — which can be
+            // any named elevation up to `muted` (the lightest). [700] only clears the canvas-level
+            // surfaces (main/base); it fails (2.41-2.72) against `muted` in every brand. [800]
+            // clears all 12 named surfaces with margin (3.44-3.90) and improves light mode too.
+            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800]) !== null && _e !== void 0 ? _e : "gray.400";
             const shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
             const shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
             const primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";

package/dist/Components/InputTextArea/InputTextArea.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputTextArea.style.d.ts","sourceRoot":"","sources":["../../../src/Components/InputTextArea/InputTextArea.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,oBAyEtB,CAAC"}
+{"version":3,"file":"InputTextArea.style.d.ts","sourceRoot":"","sources":["../../../src/Components/InputTextArea/InputTextArea.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,oBA4EtB,CAAC"}

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

@@ -25,7 +25,10 @@ exports.Textarea = {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             const { theme } = props;
             const errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
-            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            // [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 = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800]) !== null && _e !== void 0 ? _e : "gray.400";
             const shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
             const shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
             const primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";

package/dist/Components/KanbanBoard/AccountCard.js

@@ -44,17 +44,17 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const AccountRow_1 = __importDefault(require("./AccountRow"));
 const excludeKeys = ["id", "details"];
 const AccountCard = react_1.default.memo(({ account, onDelete, onOpen, isExpanded = false, onToggleExpand, isDeletable = true, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const keys = (0, react_1.useMemo)(() => Object.keys(account).filter((key) => typeof account[key] === "string" && !excludeKeys.includes(key)), [account]);
     const visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     const handleToggle = () => {
         onToggleExpand === null || onToggleExpand === void 0 ? void 0 : onToggleExpand();
     };
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "0.625rem", background: (_a = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _a !== void 0 ? _a : "#fff", border: `0.063rem solid ${(_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]}`, boxShadow: "0 0.063rem 0.125rem rgba(0,0,0,0.04)", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
-            borderColor: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[300],
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { role: "group", width: "100%", borderRadius: "0.625rem", background: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, boxShadow: "0 0.063rem 0.125rem rgba(0,0,0,0.04)", p: 3, boxSizing: "border-box", minHeight: isExpanded ? "180px" : "80px", transition: "border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease", _hover: {
+            borderColor: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[300],
             boxShadow: "0 0.25rem 0.75rem rgba(0,0,0,0.08)",
             transform: "translateY(-0.063rem)",
-        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[700], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: (_g = colors === null || colors === void 0 ? void 0 : colors.text) === null || _g === void 0 ? void 0 : _g[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[600], fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_l = colors === null || colors === void 0 ? void 0 : colors.red) === null || _l === void 0 ? void 0 : _l[50], color: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[600] }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_p = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _p === void 0 ? void 0 : _p[50], color: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[600] }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, fontSize: "0.875rem", color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[700], children: [visibleKeys.map((key) => ((0, jsx_runtime_1.jsx)(AccountRow_1.default, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), (0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { pt: 2, fontSize: "0.8125rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[600], children: account.details }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[600], fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[700] }, children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 13 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 13 })] })) : ((0, jsx_runtime_1.jsx)(react_2.Spacer, {})), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: [isDeletable && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[50], color: (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[600] }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Open", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "0.375rem", cursor: "pointer", color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[500], transition: "background 0.15s ease, color 0.15s ease", _hover: { bg: (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[50], color: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[600] }, onClick: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(account), "aria-label": "Open", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 15 }) }) })] })] })] }) }));
 });
 exports.default = AccountCard;

package/dist/Components/LazyWrapper/LazyWrapper.js

@@ -5,9 +5,8 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const DefaultFallback = ({ minHeight }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#EDF2F7", color: theme.colors.primary[500] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.primary[500] }) }));
 };
 const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : (0, jsx_runtime_1.jsx)(DefaultFallback, { minHeight: minHeight }), children: children }));
 exports.default = LazyWrapper;

package/dist/Components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAW5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE/D,CAAC;AACF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE7D,CAAC;AACF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE/D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,MAAc,EACd,OAAO,EACP,SAA4B,EAC5B,qBAAsD,EACtD,qBAAqB,EACrB,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CAkElB"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/Components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAW5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE/D,CAAC;AACF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE7D,CAAC;AACF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE/D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,IAAI,EACJ,MAAc,EACd,OAAO,EACP,SAA4B,EAC5B,qBAAsD,EACtD,qBAAqB,EACrB,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,2CAoElB"}

package/dist/Components/Modal/Modal.js

@@ -8,6 +8,7 @@ exports.default = Modal;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const ModalHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -21,6 +22,8 @@ const ModalFooter = ({ children }) => {
 };
 exports.ModalFooter = ModalFooter;
 function Modal({ size, isOpen = false, onClose, overlaybg = "blackAlpha.300", overlaybackdropFilter = "blur(10px) hue-rotate(90deg)", overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (!isOpen)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     const isReactElement = (child) => {
@@ -29,7 +32,7 @@ function Modal({ size, isOpen = false, onClose, overlaybg = "blackAlpha.300", ov
     const header = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalHeader);
     const body = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalBody);
     const footer = react_1.default.Children.toArray(children).find((child) => isReactElement(child) && child.type === exports.ModalFooter);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsx)(react_2.ModalContent, { children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsx)(react_2.ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",

package/dist/Components/MoreItems/MoreItems.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoreItems.d.ts","sourceRoot":"","sources":["../../../src/Components/MoreItems/MoreItems.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA0GvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"MoreItems.d.ts","sourceRoot":"","sources":["../../../src/Components/MoreItems/MoreItems.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA8GvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Components/MoreItems/MoreItems.js

@@ -9,10 +9,16 @@ const MoreItems = ({ items, moreCount, triggerText, colorResolver, hideDots = fa
     const count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
     if (count <= 0)
         return triggerText ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: triggerText }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: (_a = theme.colors.primary[600]) !== null && _a !== void 0 ? _a : theme.colors.primary[500], bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: (_b = theme.colors.primary[100]) !== null && _b !== void 0 ? _b : theme.colors.primary[50] }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "12px", boxShadow: "0 8px 24px rgba(0,0,0,0.12)", _focus: { outline: "none", boxShadow: "0 8px 24px rgba(0,0,0,0.12)" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, {}), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
-                                var _a, _b, _c, _d, _e, _f, _g;
-                                const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : ((_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : "#A0AEC0");
-                                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", color: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[700]) !== null && _f !== void 0 ? _f : "#2D3748", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_g = item.id) !== null && _g !== void 0 ? _g : index));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: trigger, placement: placement, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer", children: [triggerText !== undefined && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: triggerText })), (0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: (_a = theme.colors.primary[600]) !== null && _a !== void 0 ? _a : theme.colors.primary[500], bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: (_b = theme.colors.primary[100]) !== null && _b !== void 0 ? _b : theme.colors.primary[50] }, children: ["+", count, " more"] })] }) }), (0, jsx_runtime_1.jsxs)(react_1.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "12px", 
+                // Chakra defaults this surface to `colors.gray.700` in dark, which against the
+                // swapped (dark-inverted) palette is a *light* grey — wrong for a popover bg. Pin it.
+                bg: theme.colors.background[50], boxShadow: "0 8px 24px rgba(0,0,0,0.12)", _focus: { outline: "none", boxShadow: "0 8px 24px rgba(0,0,0,0.12)" }, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverArrow, { bg: theme.colors.background[50] }), (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsx)(react_1.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2, children: items === null || items === void 0 ? void 0 : items.map((item, index) => {
+                                var _a, _b, _c;
+                                const color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : theme.colors.gray[400];
+                                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "8px", minW: 0, children: [!hideDots && ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", 
+                                            // gray[500]: the library's verified muted-text token (clears AA against
+                                            // every named surface), rather than an arbitrary local rung.
+                                            color: theme.colors.gray[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.label })] }, (_c = item.id) !== null && _c !== void 0 ? _c : index));
                             }) }) })] })] }));
 };
 exports.default = MoreItems;

package/dist/Components/MultiSelect/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/Components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAqB,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAoBzE,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,aAAa,EACb,KAAc,EACd,KAAe,EACf,UAAiB,EACjB,aAAqB,EACrB,kBAAuB,EACvB,IAAI,EACJ,EAAE,EACF,eAAoD,EACpD,UAAU,EACV,UAAU,EACV,IAAW,EACX,UAAU,EACV,UAAU,EACV,KAAK,EACL,YAAY,GACb,EAAE,gBAAgB,2CA4HlB"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/Components/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAqB,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAoBzE,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAK,EACL,aAAa,EACb,KAAc,EACd,KAAe,EACf,UAAiB,EACjB,aAAqB,EACrB,kBAAuB,EACvB,IAAI,EACJ,EAAE,EACF,eAAoD,EACpD,UAAU,EACV,UAAU,EACV,IAAW,EACX,UAAU,EACV,UAAU,EACV,KAAK,EACL,YAAY,GACb,EAAE,gBAAgB,2CA8HlB"}

package/dist/Components/MultiSelect/MultiSelect.js

@@ -57,9 +57,12 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
     const handleRemove = (0, react_1.useCallback)((optionToRemove) => {
         onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", borderColor: error || localError
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", 
+                // [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.
+                borderColor: error || localError
                     ? theme.colors.semantic.error[500]
-                    : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500], borderRadius: "0.5rem", bg: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
+                    : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800], borderRadius: "0.5rem", bg: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
                     borderColor: error || localError
                         ? theme.colors.semantic.error[500]
                         : theme.colors.primary[500],

package/dist/Components/NavigationBar/NavigationBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/Components/NavigationBar/NavigationBar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAa,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAS9D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,kBAA0B,GAC1B,EAAE,WAAW,2CAmKb"}
+{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/Components/NavigationBar/NavigationBar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAa,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAU9D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,kBAA0B,GAC1B,EAAE,WAAW,2CAwKb"}

package/dist/Components/NavigationBar/NavigationBar.js

@@ -4,9 +4,10 @@ exports.default = NavBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const lucide_react_1 = require("lucide-react");
 function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Shared rounded pill affordance for the bar's icon controls.
     const iconButtonStyle = {
@@ -35,7 +36,12 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
         _active: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", 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, { onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", ...iconButtonStyle, 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, 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: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary) === null || _d === void 0 ? void 0 : _d[500], 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", bg: theme.colors.backgroundColor.light, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", 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: "gray.800", isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: "gray.500", isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", 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, { onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", ...iconButtonStyle, 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, 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: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary, (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.backgroundColor) === null || _e === void 0 ? void 0 : _e.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", 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: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", 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: "gray.800", isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: "gray.500", isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
                                                         var _a, _b, _c;
                                                         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, { children: menu.title })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
                                                     }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {

package/dist/Components/NoteTextArea/NoteTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoteTextArea.d.ts","sourceRoot":"","sources":["../../../src/Components/NoteTextArea/NoteTextArea.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAc,EACd,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,iBAAiB,EACjB,WAA6B,EAC7B,iBAAuE,EACvE,gBAAqB,EACrB,QAAQ,EACR,GAAG,EAAE,QAAQ,EACb,iBAAmC,EACnC,gBAAwB,GAC3B,EAAE,iBAAiB,2CAgXnB"}
+{"version":3,"file":"NoteTextArea.d.ts","sourceRoot":"","sources":["../../../src/Components/NoteTextArea/NoteTextArea.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAc,EACd,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,iBAAiB,EACjB,WAA6B,EAC7B,iBAAuE,EACvE,gBAAqB,EACrB,QAAQ,EACR,GAAG,EAAE,QAAQ,EACb,iBAAmC,EACnC,gBAAwB,GAC3B,EAAE,iBAAiB,2CAkXnB"}

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -118,14 +118,17 @@ function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title
     };
     const noteWordCount = countWords(noteValue);
     const isOverLimit = noteWordCount > maxNoteWordCount;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500], bg: isActive ? theme.colors.gray[50] : theme.colors.white, transition: "border-color 0.2s", children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.gray[500] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.gray[500], fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.white, children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, value: titleValue, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", 
+        // [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.
+        borderColor: isActive ? theme.colors.primary[500] : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: "border-color 0.2s", children: [!isActive && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: theme.colors.gray[500] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.gray[500], fontSize: "sm", children: customPlaceholder })] })), isActive && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], children: [titleShow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, value: titleValue, onChange: (e) => {
                                             if (e.target.value.length === 0)
                                                 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.gray[300],
-                                        } }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: theme.colors.gray[200] })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.white, 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.gray[300] }, 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.gray[600], 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.gray[600], 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.gray[600], 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.semantic.error[500] : theme.colors.gray[500], 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) => {
+                                        } }), (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.gray[300] }, 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.gray[600], 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.gray[600], 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.gray[600], 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.semantic.error[500] : theme.colors.gray[500], 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/Notification/Notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/Components/Notification/Notification.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,QAAA,MAAM,YAAY,GAAI,oEAOnB,iBAAiB,4CA0OnB,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Notification.d.ts","sourceRoot":"","sources":["../../../src/Components/Notification/Notification.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAIxD,QAAA,MAAM,YAAY,GAAI,oEAOnB,iBAAiB,4CA+OnB,CAAC;AACF,eAAe,YAAY,CAAC"}

package/dist/Components/Notification/Notification.js

@@ -5,15 +5,19 @@ 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 accentText_1 = require("../../Theme/tokens/builders/accentText");
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const bgColor = (colors === null || colors === void 0 ? void 0 : colors.bgColor) || theme.colors.white;
+    const bgColor = (colors === null || colors === void 0 ? void 0 : colors.bgColor) || theme.colors.background[50];
     const borderColor = (colors === null || colors === void 0 ? void 0 : colors.borderColor) || theme.colors.gray[200];
     const textColor = (colors === null || colors === void 0 ? void 0 : colors.textColor) || theme.colors.gray[700];
     const titleColor = (colors === null || colors === void 0 ? void 0 : colors.titleColor) || theme.colors.gray[800];
-    const warningColor = (colors === null || colors === void 0 ? void 0 : colors.warningColor) || theme.colors.semantic.warning;
-    const errorColor = (colors === null || colors === void 0 ? void 0 : colors.errorColor) || theme.colors.semantic.error;
-    const successColor = (colors === null || colors === void 0 ? void 0 : colors.successColor) || theme.colors.semantic.success;
+    // `NotificationProps.colors` declares these as hex strings — the un-indexed scale defaults
+    // below were handing a whole ColorScale object to `bg=` (getStatusColor()'s consumer),
+    // which Chakra can't render as a color.
+    const warningColor = (colors === null || colors === void 0 ? void 0 : colors.warningColor) || theme.colors.semantic.warning[500];
+    const errorColor = (colors === null || colors === void 0 ? void 0 : colors.errorColor) || theme.colors.semantic.error[500];
+    const successColor = (colors === null || colors === void 0 ? void 0 : colors.successColor) || theme.colors.semantic.success[500];
     const startDate = (0, react_1.useMemo)(() => notification.startDate
         ? new Date(notification.startDate)
         : null, [notification.startDate]);
@@ -99,6 +103,6 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                     bg: theme.colors.red[100],
                     color: theme.colors.red[500],
                     transform: "scale(1.1)",
-                }, transition: "all 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: theme.colors.orange[400], boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.orange[500], fontWeight: "semibold", children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.primary[500] }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), children: notification.title }), notification.description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.gray[400], boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.gray[400], boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
+                }, transition: "all 0.2s ease", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: TimeIcon, color: (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, bgColor), boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, bgColor), fontWeight: "semibold", children: timeLabel })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { align: "center", spacing: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.primary[500] }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), children: notification.title }), notification.description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: borderColor }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.gray[400], boxSize: 4 }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], children: formattedStartDateTime })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.gray[400], boxSize: 4 }), notification.host && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], children: notification.host }))] }), showStatus && ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };
 exports.default = Notification;

package/dist/Components/NumberInput/NumberInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/NumberInput/NumberInput.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,WAAW,EAAE,oBAiFzB,CAAC"}
+{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/NumberInput/NumberInput.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,WAAW,EAAE,oBAoFzB,CAAC"}

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

@@ -29,7 +29,10 @@ exports.NumberInput = {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
             const { theme } = props;
             const errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
-            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            // [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 = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800]) !== null && _e !== void 0 ? _e : "gray.400";
             const shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
             const shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
             const primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";

package/dist/Components/OrgSwitcher/OrgSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAkBzD,OAAO,EAGL,gBAAgB,EAGjB,MAAM,oBAAoB,CAAC;AA6C5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoM3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAkBzD,OAAO,EAGL,gBAAgB,EAGjB,MAAM,oBAAoB,CAAC;AA6C5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4M3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -18,7 +18,7 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
     return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: (0, OrgSwitcherProps_1.avatarColor)(org.name), color: "white", fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
 };
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
@@ -32,10 +32,13 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         const q = query.toLowerCase();
         return organizations.filter((o) => o.name.toLowerCase().includes(q));
     }, [organizations, query]);
+    // boxborder[800], 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: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : "#E2E8F0", bg: theme.colors.white }
+        ? { border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : theme.colors.gray[200], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
-            ? { bg: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#F8FAFC" }
+            ? { bg: theme.colors.gray[50] }
             : { bg: "transparent" };
     const handleSelect = (org) => {
         onClose();
@@ -46,10 +49,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[100]) !== null && _f !== void 0 ? _f : "#F1F5F9" : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: (_h = (_g = theme.colors.gray) === null || _g === void 0 ? void 0 : _g[100]) !== null && _h !== void 0 ? _h : "#F1F5F9", color: (_k = (_j = theme.colors.gray) === null || _j === void 0 ? void 0 : _j[400]) !== null && _k !== void 0 ? _k : "#A0AEC0", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: (_m = (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[700]) !== null && _m !== void 0 ? _m : "#2D3748", maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_o = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _o !== void 0 ? _o : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[400]) !== null && _q !== void 0 ? _q : "#A0AEC0", flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", borderRadius: "12px", overflow: "hidden", boxShadow: "0 10px 30px rgba(0,0,0,0.14)", _focus: { outline: "none", boxShadow: "0 10px 30px rgba(0,0,0,0.14)" }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: (_s = (_r = theme.colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "#EDF2F7", children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: (_u = (_t = theme.colors.gray) === null || _t === void 0 ? void 0 : _t[400]) !== null && _u !== void 0 ? _u : "#A0AEC0" }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "8px" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "320px", overflowY: "auto", py: 1, children: [filtered.map((org) => {
-                                    var _a, _b, _c, _d, _e, _f;
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? theme.colors.gray[100] : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: theme.colors.gray[100], color: theme.colors.gray[400], flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
+                // Chakra's PopoverContent baseStyle defaults bg to var(--popper-bg), which is hardcoded
+                // to colors.white and only repointed under Chakra's own `_dark` — dead code here since
+                // this app toggles dark mode by swapping the palette, not Chakra's colorMode. Without an
+                // explicit bg the panel always rendered white regardless of the active theme.
+                bg: theme.colors.backgroundColor.light, borderRadius: "12px", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "8px" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "320px", overflowY: "auto", py: 1, children: [filtered.map((org) => {
                                     const isActive = org.id === value;
-                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: isActive ? theme.colors.primary[50] : (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#F8FAFC" }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[800]) !== null && _d !== void 0 ? _d : "#1A202C", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
-                                }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: (_w = (_v = theme.colors.gray) === null || _v === void 0 ? void 0 : _v[500]) !== null && _w !== void 0 ? _w : "#718096", textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
+                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: isActive ? theme.colors.primary[50] : theme.colors.gray[50] }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
+                                }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

package/dist/Components/OrganizationDetails/CreateOrgModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateOrgModal.d.ts","sourceRoot":"","sources":["../../../src/Components/OrganizationDetails/CreateOrgModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAenD,OAAO,EAAuB,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAUtF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkHjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CreateOrgModal.d.ts","sourceRoot":"","sources":["../../../src/Components/OrganizationDetails/CreateOrgModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAenD,OAAO,EAAuB,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAUtF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsHjD,CAAC;AAEF,eAAe,cAAc,CAAC"}