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

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

@@ -16,7 +16,6 @@ const generateUniqueId = (() => {
     };
 })();
 export default function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = "md", inputStyle, helperText, error, errorMessage, }) {
-    var _a, _b, _c, _d;
     const theme = useCustomTheme();
     const s = getSearchSelectSizeStyles((size || "md"));
     const options = value;
@@ -55,14 +54,14 @@ export default function MultiSelect({ value, onValueChange, width = "100%", labe
                 // [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[800], borderRadius: "lg", 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: {
+                    ? 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: {
                     borderColor: error || localError
-                        ? theme.colors.semantic.error[500]
+                        ? theme.colors.semanticText.error
                         : theme.colors.primary[500],
                     boxShadow: `0 0 0 0.125rem ${error || localError
-                        ? (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.error
-                        : (_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.primary}`,
+                        ? theme.colors.boxShadow.error
+                        : theme.colors.boxShadow.primary}`,
                 }, children: [options.map((option) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: X }, option.id))), _jsx(Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
                             backgroundColor: "transparent",
                             ...inputStyle,

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

@@ -1,12 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, Box, Button, Center, Flex, Menu, MenuButton, MenuDivider, MenuItem, MenuList, Stack, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import { CircleArrowLeft, LogOut, PanelLeftClose, PanelRightClose, } from "lucide-react";
-export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+// Roomy enough to hover without aiming: the glyph is only 1.25rem.
+const SIDEBAR_TOGGLE_HIT = "2.5rem";
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, }) {
     const theme = useCustomTheme();
+    // For a near-neutral brand (e.g. zinc), `primary[50]` is itself a pale near-white tint — on
+    // the menu's own near-white surface that measured as low as ~1.02:1, an invisible hover.
+    const menuHoverBg = resolveHoverTint(theme.colors.primary[50], theme.colors.backgroundColor.light);
+    const barHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const menuHoverInk = accentTextOnCanvas(theme.colors.primary, menuHoverBg);
+    const dangerTone = resolveStatusTone(theme.colors.semantic.error, isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light");
     // Shared rounded pill affordance for the bar's icon controls.
     const iconButtonStyle = {
         w: "1.75rem",
@@ -18,12 +26,8 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         border: "none",
         bg: "transparent",
         transition: "background 0.15s",
-        _hover: { bg: "blackAlpha.50" },
+        _hover: { bg: barHoverBg },
     };
-    // For a near-neutral brand (e.g. zinc), `primary[50]` is itself a pale near-white tint — on
-    // the menu's own near-white surface that measured as low as ~1.02:1, an invisible hover.
-    const menuHoverBg = resolveHoverTint(theme.colors.primary[50], (_d = (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.light) !== null && _b !== void 0 ? _b : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : DEFAULT_CANVAS);
-    // Light elevated pill item.
     const menuItemStyle = {
         bg: "transparent",
         borderRadius: "lg",
@@ -34,28 +38,28 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         py: "0.5rem",
         fontWeight: 500,
         fontSize: "13px",
-        color: "gray.700",
+        color: theme.colors.text[900],
         gap: theme.space["2"],
         transition: "background 0.12s",
-        _hover: { bg: menuHoverBg, color: theme.colors.primary[700] },
-        _focus: { bg: menuHoverBg, color: theme.colors.primary[700] },
-        _active: { bg: menuHoverBg, color: theme.colors.primary[700] },
+        _hover: { bg: menuHoverBg, color: menuHoverInk },
+        _focus: { bg: menuHoverBg, color: menuHoverInk },
+        _active: { bg: menuHoverBg, color: menuHoverInk },
     };
-    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(Text, { color: accentTextOnCanvas((_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.secondary, (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.backgroundColor) === null || _j === void 0 ? void 0 : _j.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.border[500], children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: _jsx(CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (_jsx(Text, { color: accentTextOnCanvas(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         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: "blackAlpha.100", borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Center, { pt: 4, pb: 2, children: _jsx(Avatar, { size: "xl", name: userName, src: userAvathar }) }), _jsxs(Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && (_jsx(Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), _jsx(MenuDivider, { borderColor: "blackAlpha.100" }), _jsx(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 }, border: "1px solid", borderColor: theme.colors.boxborder[500], borderRadius: "xl", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Center, { pt: 4, pb: 2, children: _jsx(Avatar, { size: "xl", name: userName, src: userAvathar }) }), _jsxs(Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && (_jsx(Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), _jsx(MenuDivider, { borderColor: theme.colors.border[500] }), _jsx(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 (_jsxs(MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), _jsx(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}`));
-                                                    }) }), _jsx(MenuDivider, { borderColor: "blackAlpha.100" }), _jsxs(MenuItem, { onClick: handleLogout, sx: {
+                                                    }) }), _jsx(MenuDivider, { borderColor: theme.colors.border[500] }), _jsxs(MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
-                                                        color: "red.500",
-                                                        _hover: { bg: "red.50", color: "red.600" },
-                                                        _focus: { bg: "red.50", color: "red.600" },
-                                                        _active: { bg: "red.50", color: "red.600" },
+                                                        color: theme.colors.semanticText.error,
+                                                        _hover: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                        _focus: { bg: dangerTone.bg, color: dangerTone.fg },
+                                                        _active: { bg: dangerTone.bg, color: dangerTone.fg },
                                                     }, children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: _jsx(LogOut, { size: 16 }) }), _jsx(Box, { minW: 0, isTruncated: true, title: String(logoutText !== null && logoutText !== void 0 ? logoutText : ""), children: logoutText })] })] }) })] })] }) })] }) }));
 }

package/dist/esm/Components/NoteTextArea/NoteTextArea.js

@@ -11,7 +11,6 @@ const countWords = (text = "") => {
     return t.split(/\s+/).length;
 };
 export default function NoteTextArea({ width = "100%", handleSubmit, handleCancel, value, title, file, isEditable = false, saveButtonLoading, maxFileSize = 1 * 1024 * 1024, maxFilesSizeError = "Some files are too large. Maximum allowed size is", maxNoteWordCount = 15, onChange, ref: inputRef, customPlaceholder = "Add a note...", cancelButtonHide = false, }) {
-    var _a;
     const theme = useCustomTheme();
     const noteAreaRef = useRef(null);
     const [isActive, setIsActive] = useState(false);
@@ -115,17 +114,14 @@ export default function NoteTextArea({ width = "100%", handleSubmit, handleCance
     };
     const noteWordCount = countWords(noteValue);
     const isOverLimit = noteWordCount > maxNoteWordCount;
-    return (_jsxs(Box, { w: width, borderRadius: 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 && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.gray[500] }), _jsx(Text, { color: theme.colors.gray[500], fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(Input, { ref: inputRef, value: titleValue, onChange: (e) => {
+    return (_jsxs(Box, { w: width, borderRadius: FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : theme.colors.boxborder[500], bg: isActive ? theme.colors.gray[50] : theme.colors.background[50], transition: "border-color 0.2s", children: [!isActive && (_jsxs(Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.background[50], borderRadius: FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] }, children: [_jsx(SquarePen, { size: 16, color: theme.colors.textMuted }), _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", children: customPlaceholder })] })), isActive && (_jsxs(_Fragment, { children: [_jsxs(Box, { bg: theme.colors.background[50], children: [titleShow && (_jsxs(_Fragment, { children: [_jsx(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],
-                                        } }), _jsx(Divider, { borderColor: theme.colors.gray[200] })] })), _jsx(Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: _jsx(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 }) })] }), _jsx(Divider, { borderColor: theme.colors.gray[200] }), _jsxs(Box, { px: 3, py: 2.5, children: [_jsxs(Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: _jsx(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: _jsx(Paperclip, { size: 16 }) }) }), _jsx(Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? (_jsx(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" })) : (_jsx(Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: _jsx(Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), _jsxs(Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [_jsxs(Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semantic.error[500] : theme.colors.gray[500], whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : (_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), _jsxs(Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? (_jsx(Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), _jsx("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: (e) => {
+                                            color: theme.colors.textMuted,
+                                        } }), _jsx(Divider, { borderColor: theme.colors.gray[200] })] })), _jsx(Box, { bg: theme.colors.background[50], minH: "76px", px: 3, pt: 2.5, position: "relative", children: _jsx(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 }) })] }), _jsx(Divider, { borderColor: theme.colors.gray[200] }), _jsxs(Box, { px: 3, py: 2.5, children: [_jsxs(Flex, { align: "center", justify: "space-between", w: "100%", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Tooltip, { label: "Attach files", hasArrow: true, placement: "top", children: _jsx(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: _jsx(Paperclip, { size: 16 }) }) }), _jsx(Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }), !titleShow ? (_jsx(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" })) : (_jsx(Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue, children: _jsx(Text, { color: theme.colors.textMuted, fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px", children: titleValue || "Title" }) }))] }), _jsxs(Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0, children: [_jsxs(Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semanticText.error : theme.colors.textMuted, whiteSpace: "nowrap", children: [noteWordCount, "/", maxNoteWordCount] }), cancelButtonHide ? null : (_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea, children: "Cancel" })), _jsxs(Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: () => handleSubmit(noteValue, titleValue, files), children: [saveButtonLoading ? (_jsx(Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null, "Save"] })] })] }), _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);
@@ -138,5 +134,5 @@ export default function NoteTextArea({ width = "100%", handleSubmit, handleCance
                                     if (validFiles.length > 0) {
                                         setFiles((prev) => [...prev, ...validFiles]);
                                     }
-                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semantic.error[500], mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: theme.colors.gray[500] }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: theme.colors.gray[500], whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.gray[500], transition: "all 0.15s", _hover: { bg: theme.colors.gray[200], color: theme.colors.semantic.error[500] }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
+                                }, multiple: true }), fileError && (_jsx(Text, { color: theme.colors.semanticText.error, mt: 2, fontSize: "xs", children: fileError })), files.length > 0 && (_jsx(Flex, { mt: 3, gap: 2, wrap: "wrap", children: files.map((f, idx) => (_jsxs(Flex, { align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%", children: [_jsx(FileIcon, { size: 13, color: theme.colors.textMuted }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px", children: shortenFileName(f.name) }), _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, whiteSpace: "nowrap", children: formatBytes(f.size) }), _jsx(Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.textMuted, transition: "all 0.15s", _hover: { bg: theme.colors.gray[200], color: theme.colors.semanticText.error }, onClick: () => setFiles((prev) => prev.filter((fileItem) => fileItem !== f)), children: _jsx(X, { size: 13 }) })] }, idx))) }))] })] }))] }));
 }

package/dist/esm/Components/Notification/Notification.js

@@ -3,19 +3,21 @@ import { useMemo } from "react";
 import { Box, VStack, HStack, Text, Icon, Avatar, Divider, Skeleton, SkeletonCircle, } from "@chakra-ui/react";
 import { Clock, AlertCircle, Calendar, X, User } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const theme = useCustomTheme();
-    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];
-    // `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 mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
+    const closeTone = resolveStatusTone(theme.colors.semantic.error, mode);
+    const bgColor = (_a = colors === null || colors === void 0 ? void 0 : colors.bgColor) !== null && _a !== void 0 ? _a : theme.colors.background[50];
+    const borderColor = (_b = colors === null || colors === void 0 ? void 0 : colors.borderColor) !== null && _b !== void 0 ? _b : theme.colors.boxborder[200];
+    const textColor = (_c = colors === null || colors === void 0 ? void 0 : colors.textColor) !== null && _c !== void 0 ? _c : theme.colors.text[700];
+    const titleColor = (_d = colors === null || colors === void 0 ? void 0 : colors.titleColor) !== null && _d !== void 0 ? _d : theme.colors.text[800];
+    // The dot is a graphic on the canvas: `semantic[tone][500]` measures under 3:1 there.
+    const warningColor = (_e = colors === null || colors === void 0 ? void 0 : colors.warningColor) !== null && _e !== void 0 ? _e : theme.colors.semanticText.warning;
+    const errorColor = (_f = colors === null || colors === void 0 ? void 0 : colors.errorColor) !== null && _f !== void 0 ? _f : theme.colors.semanticText.error;
+    const successColor = (_g = colors === null || colors === void 0 ? void 0 : colors.successColor) !== null && _g !== void 0 ? _g : theme.colors.semanticText.success;
     const startDate = useMemo(() => notification.startDate
         ? new Date(notification.startDate)
         : null, [notification.startDate]);
@@ -60,13 +62,13 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
     }, [notification.dueDate, notification.endDate, notification.type]);
     const getStatusColor = () => {
         if (diffDays === null)
-            return theme.colors.gray[400];
+            return theme.colors.textMuted;
         if (diffDays < 0)
             return errorColor;
         if (diffDays <= 0.04)
             return warningColor;
         if (diffDays <= 1)
-            return theme.colors.yellow[400];
+            return accentTextOnCanvas(theme.colors.yellow, bgColor);
         return successColor;
     };
     const TimeIcon = diffDays !== null && diffDays < 0 ? AlertCircle : Clock;
@@ -98,9 +100,9 @@ const Notification = ({ notification, onClose, showStatus, onClick, isLoading =
                         onClose();
                     }
                 }, tabIndex: 0, p: 1, borderRadius: "md", _hover: {
-                    bg: theme.colors.red[100],
-                    color: theme.colors.red[500],
+                    bg: closeTone.bg,
+                    color: closeTone.fg,
                     transform: "scale(1.1)",
-                }, transition: "all 0.2s ease", children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: accentTextOnCanvas(theme.colors.orange, bgColor), boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.orange, bgColor), fontWeight: "semibold", children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(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 && (_jsx(Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: Calendar, color: theme.colors.gray[400], boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], children: formattedStartDateTime })] }), _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: User, color: theme.colors.gray[400], boxSize: 4 }), notification.host && (_jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], children: notification.host }))] }), showStatus && (_jsx(Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
+                }, transition: "all 0.2s ease", children: _jsx(X, { size: 16 }) })), _jsxs(VStack, { align: "start", spacing: 3, w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: TimeIcon, color: accentTextOnCanvas(theme.colors.orange, bgColor), boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: accentTextOnCanvas(theme.colors.orange, bgColor), fontWeight: "semibold", children: timeLabel })] }), _jsxs(HStack, { align: "center", spacing: 3, w: "100%", children: [_jsx(Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }), _jsxs(VStack, { align: "start", spacing: 0, flex: "1", children: [_jsx(Text, { fontWeight: "bold", fontSize: "md", color: titleColor, cursor: "pointer", _hover: { textColor: theme.colors.accentText }, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(notification.id, notification.type), children: notification.title }), notification.description && (_jsx(Text, { fontSize: "sm", color: textColor, children: notification.description }))] })] }), _jsx(Divider, { borderColor: borderColor }), _jsxs(HStack, { justify: "space-between", w: "100%", children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: Calendar, color: theme.colors.textMuted, boxSize: 4 }), _jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: formattedStartDateTime })] }), _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { as: User, color: theme.colors.textMuted, boxSize: 4 }), notification.host && (_jsx(Text, { fontSize: "sm", color: theme.colors.textMuted, children: notification.host }))] }), showStatus && (_jsx(Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))] })] })] }));
 };
 export default Notification;

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

@@ -23,21 +23,20 @@ export const NumberInput = {
     },
     variants: {
         outline: (props) => {
-            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";
-            // [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";
+            const errorColor = theme.colors.semanticText.error;
+            const borderColor = theme.colors.boxborder[500];
+            const shadowPrimary = theme.colors.boxShadow.primary;
+            const shadowError = theme.colors.boxShadow.error;
+            const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    bg: theme.colors.gray[50],
                     border: "0.063rem solid",
                     borderColor,
+                    _placeholder: {
+                        color: theme.colors.textMuted,
+                    },
                     _hover: {
                         borderColor: primary,
                         // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
@@ -66,7 +65,7 @@ export const NumberInput = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                        bg: theme.colors.gray[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

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

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Flex, Image, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Spinner, Text, useDisclosure, } from "@chakra-ui/react";
 import { Building2, Check, ChevronsUpDown, Search } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_BLACK, DEFAULT_WHITE, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { avatarColor, orgInitial, } from "./OrgSwitcherProps.js";
@@ -13,16 +13,15 @@ const sizeMap = {
     lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
-    var _a, _b;
     const { colors } = useCustomTheme();
     if (org.logoUrl) {
         return (_jsx(Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0 }));
     }
     const fill = avatarColor(org.name, chartMode(colors));
-    return (_jsx(Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: onFilled(fill, (_a = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _a !== void 0 ? _a : DEFAULT_WHITE, (_b = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _b !== void 0 ? _b : DEFAULT_BLACK), fontSize: fontSize, fontWeight: 700, children: orgInitial(org.name) }));
+    return (_jsx(Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: onFilled(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700, children: 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;
+    var _a;
     const theme = useCustomTheme();
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = useDisclosure();
@@ -68,7 +67,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     // 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.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : theme.colors.gray[200], bg: theme.colors.background[50] }
+        ? { border: "1px solid", borderColor: theme.colors.boxborder[800], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
             ? { bg: theme.colors.gray[50] }
             : { bg: "transparent" };
@@ -86,12 +85,12 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     return (_jsxs(Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: theme.colors.gray[400], flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: accentTextOnCanvas(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
                 // 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: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.gray[400] }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                bg: theme.colors.backgroundColor.light, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {
                                                 e.preventDefault();
                                                 focusOption(0);
@@ -109,7 +108,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             optionRefs.current[idx] = el;
                                             if (idx === 0)
                                                 firstOptionRef.current = el;
-                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: accentTextOnCanvas(theme.colors.primary, theme.colors.primary[50]), flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 export default OrgSwitcher;

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

@@ -1,15 +1,19 @@
 import { CATEGORICAL_SERIES } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { resolveAvatarFill } from "../../Theme/tokens/builders/statusTone.js";
 export const AVATAR_COLORS = [
     ...CATEGORICAL_SERIES.light,
     ...CATEGORICAL_SERIES.dark,
 ];
+/** Chart hues are tuned to sit apart from each other, not to carry a label. */
+export const AVATAR_INK = "#ffffff";
 export const avatarColor = (seed, mode = "light") => {
     let hash = 0;
     for (let i = 0; i < seed.length; i += 1) {
         hash = seed.charCodeAt(i) + ((hash << 5) - hash);
     }
     const ramp = CATEGORICAL_SERIES[mode];
-    return ramp[Math.abs(hash) % ramp.length];
+    const hue = ramp[Math.abs(hash) % ramp.length];
+    return resolveAvatarFill(hue);
 };
 /**
  * Fallback-avatar initials, up to 2 characters. A single letter reads well for one

package/dist/esm/Components/OrganizationDetails/CreateOrgModal.js

@@ -10,7 +10,6 @@ const EMPTY = {
     phone: "",
 };
 const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
-    var _a, _b, _c;
     const { colors } = useCustomTheme();
     const [values, setValues] = useState(EMPTY);
     const [errors, setErrors] = useState({});
@@ -52,6 +51,6 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
         });
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 export default CreateOrgModal;

package/dist/esm/Components/OrganizationDetails/DeleteOrgModal.js

@@ -2,10 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
 import { AlertTriangle, Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import Button from "../Button/Button.js";
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
     const { colors } = useCustomTheme();
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_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 === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50], color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[500], children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[600], fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = resolveStatusTone(colors.semantic.error, mode);
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
 };
 export default DeleteOrgModal;

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -3,6 +3,8 @@ import { useMemo, useState } from "react";
 import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
 import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
 import Button from "../Button/Button.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import Tag from "../Tag/Tag.js";
@@ -46,7 +48,6 @@ const DEFAULT_LABELS = {
     termsOfService: "Terms of Service",
 };
 const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { colors } = useCustomTheme();
     const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const [isCreateOpen, setCreateOpen] = useState(false);
@@ -55,16 +56,19 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const [editingOrgId, setEditingOrgId] = useState(null);
     const [editValue, setEditValue] = useState("");
     const [editError, setEditError] = useState("");
-    const border = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200];
-    const surface = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : colors === null || colors === void 0 ? void 0 : colors.white;
-    const muted = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500];
-    const subtle = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[600];
-    const heading = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[800];
-    const pageBg = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[50];
-    const primary50 = (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[50];
-    const primary100 = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[100];
-    const primary500 = (_m = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _m === void 0 ? void 0 : _m[500];
-    const primary600 = (_o = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _o === void 0 ? void 0 : _o[600];
+    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
+    const errorTone = resolveStatusTone(colors.semantic.error, mode);
+    const warningTone = resolveStatusTone(colors.semantic.warning, mode);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const subtle = colors.text[600];
+    const heading = colors.text[900];
+    const pageBg = colors.backgroundColor.main;
+    const primary50 = colors.primary[50];
+    const primary100 = colors.primary[100];
+    const primary500 = colors.primary[500];
+    const onPrimary50 = accentTextOnCanvas(colors.primary, colors.primary[50]);
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
@@ -99,7 +103,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         setEditError("");
     };
     const renderActiveCard = (item) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d;
         const isSwitching = switchingOrgIds.includes(item.orgId);
         // Role name is a display value, not a permission — apps pass the real rule.
         const canEdit = (_a = item.canRename) !== null && _a !== void 0 ? _a : item.roleName === "Super Admin";
@@ -109,17 +113,17 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         const isSavingThis = editingOrgIds.includes(item.orgId);
         const roleLabel = (_c = item.roleName) === null || _c === void 0 ? void 0 : _c.trim();
         const deleteButton = (_jsx(IconButton, { "aria-label": labels.deleteOrganization, icon: _jsx(Trash2, { size: 12 }), size: "xs", variant: "ghost", borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
-                bg: (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[50],
-                color: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600],
+                bg: errorTone.bg,
+                color: errorTone.fg,
             }, onClick: () => onDeleteRequest
                 ? onDeleteRequest(item.orgId)
                 : setDeleteOrgId(item.orgId) }));
         return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
-                borderColor: (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[300],
+                borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: primary500, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: primary600, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
-                                        ? ((_g = item.deleteDisabledReason) !== null && _g !== void 0 ? _g : labels.protectedOrganization)
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: colors.accentText, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+                                        ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
                                         if (editError)
@@ -129,15 +133,14 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
                                             submitEditing(item);
                                         if (e.key === "Escape")
                                             cancelEditing();
-                                    } }), _jsx(IconButton, { "aria-label": labels.save, icon: isSavingThis ? _jsx(Spinner, { size: "xs" }) : _jsx(Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), _jsx(IconButton, { "aria-label": labels.cancel, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && (_jsx(Text, { fontSize: "0.7rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[600], mt: 1, children: editError }))] })) : (_jsxs(Box, { children: [_jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && (_jsxs(HStack, { spacing: 1, mt: 1, children: [item.isOwner && (_jsx(Tag, { label: labels.owner, icon: Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && (_jsx(Tag, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
+                                    } }), _jsx(IconButton, { "aria-label": labels.save, icon: isSavingThis ? _jsx(Spinner, { size: "xs" }) : _jsx(Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), _jsx(IconButton, { "aria-label": labels.cancel, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && (_jsx(Text, { fontSize: "0.7rem", color: colors.semanticText.error, mt: 1, children: editError }))] })) : (_jsxs(Box, { children: [_jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && (_jsxs(HStack, { spacing: 1, mt: 1, children: [item.isOwner && (_jsx(Tag, { label: labels.owner, icon: Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && (_jsx(Tag, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
     };
     const renderInvitedCard = (item) => {
-        var _a, _b;
         const isResponding = respondingOrgIds.includes(item.orgId);
         return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _a === void 0 ? void 0 : _a[100], color: (_b = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _b === void 0 ? void 0 : _b[600], children: _jsx(Building2, { size: 18 }) }), _jsx(Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && (_jsxs(Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [_jsx(Globe, { size: 13 }), _jsx(Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), _jsxs(HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [_jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), _jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: _jsx(Building2, { size: 18 }) }), _jsx(Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && (_jsxs(Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [_jsx(Globe, { size: 13 }), _jsx(Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), _jsxs(HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [_jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), _jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
     };
     const gridSx = {
         display: "grid",
@@ -150,9 +153,9 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         width: "100%",
     };
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
-    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: "white", children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: onFilled(primary500, colors.white, colors.black), children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
-                                                    : labels.greeting }), _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: primary500 }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: (_p = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _p === void 0 ? void 0 : _p[500] }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
+                                                    : labels.greeting }), _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: colors.accentText }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: colors.semanticText.warning }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));
                     setCreateOpen(false);
                 }, labels: labels }), _jsx(DeleteOrgModal, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {