pixelize-design-library 2.4.1-beta.9 → 2.4.2-beta.0

package/dist/Components/LimitReachedModal/limitReachedCopy.d.ts

@@ -4,4 +4,3 @@ export declare function resolveLimitCopy(kind: LimitKind, canManageBilling: bool
     message: string;
 };
 export declare function formatLimitUsage(kind: LimitKind, used?: number | null, limit?: number | null): string | null;
-//# sourceMappingURL=limitReachedCopy.d.ts.map

package/dist/Components/Loading/Loading.d.ts

@@ -1,3 +1,2 @@
 import { LoadingProps } from "./LoadingProps";
 export default function Loading({ text, isLoading, onlytext, container }: LoadingProps): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=Loading.d.ts.map

package/dist/Components/Loading/LoadingProps.d.ts

@@ -5,4 +5,3 @@ export type LoadingProps = {
     /** Scope the overlay to the nearest positioned ancestor with a MUI-style scrim, instead of full-viewport. */
     container?: boolean;
 };
-//# sourceMappingURL=LoadingProps.d.ts.map

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

@@ -10,4 +10,3 @@ export declare const ModalFooter: React.FC<{
     children: React.ReactNode;
 }>;
 export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Modal.d.ts.map

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

@@ -8,4 +8,3 @@ export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFoc
     children?: React.ReactNode;
     isLoading?: boolean;
 };
-//# sourceMappingURL=ModalProps.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { MoreItemsProps } from "./MoreItemsProps";
 declare const MoreItems: React.FC<MoreItemsProps>;
 export default MoreItems;
-//# sourceMappingURL=MoreItems.d.ts.map

package/dist/Components/MoreItems/MoreItems.js

@@ -9,10 +9,10 @@ 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", 
+    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: "xl", 
                 // 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) => {
+                bg: theme.colors.background[50], boxShadow: "lg", _focus: { outline: "none", boxShadow: "lg" }, 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", 

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

@@ -27,4 +27,3 @@ export interface MoreItemsProps {
     /** Popover placement. */
     placement?: "bottom-start" | "bottom-end" | "bottom" | "top" | "right" | "left";
 }
-//# sourceMappingURL=MoreItemsProps.d.ts.map

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

@@ -1,3 +1,2 @@
 import { MultiSelectProps } from "./MultiSelectProps";
 export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, helperText, error, errorMessage, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MultiSelect.d.ts.map

package/dist/Components/MultiSelect/MultiSelect.js

@@ -62,7 +62,7 @@ function MultiSelect({ value, onValueChange, width = "100%", label = "label", is
                 // surface up to `muted` (lightest); [500] fails there, [800] clears all with margin.
                 borderColor: error || localError
                     ? theme.colors.semantic.error[500]
-                    : (_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: {
+                    : (_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: {
                     borderColor: error || localError
                         ? theme.colors.semantic.error[500]
                         : theme.colors.primary[500],

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

@@ -21,4 +21,3 @@ export type MultiSelctOPtions = {
     id: string;
     label: string;
 };
-//# sourceMappingURL=MultiSelectProps.d.ts.map

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

@@ -1,3 +1,2 @@
 import { NavbarProps } from "./NavigationBarProps";
 export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NavigationBar.d.ts.map

package/dist/Components/NavigationBar/NavigationBar.js

@@ -18,16 +18,20 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         justifyContent: "center",
         borderRadius: "md",
         cursor: "pointer",
+        border: "none",
+        bg: "transparent",
         transition: "background 0.15s",
         _hover: { bg: "blackAlpha.50" },
     };
     // 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 = (0, outlineRung_1.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 : "#ffffff");
+    const menuHoverBg = (0, outlineRung_1.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 : accentText_1.DEFAULT_CANVAS);
     // Light elevated pill item.
     const menuItemStyle = {
         bg: "transparent",
-        borderRadius: "7px",
+        borderRadius: "lg",
+        // Chakra's MenuItem is width:100%, so mx added 12px and forced a horizontal scrollbar.
+        w: "calc(100% - 0.75rem)",
         mx: "0.375rem",
         px: "0.625rem",
         py: "0.5rem",
@@ -40,19 +44,21 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: menuHoverBg, color: theme.colors.primary[700] },
         _active: { bg: menuHoverBg, 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: (_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) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.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 }))] }), (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, 
+    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, { 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 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_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) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.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 }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+                                        // Without a cap one long title stretches the whole dropdown; titles truncate instead.
+                                        maxW: "18rem", bg: theme.colors.backgroundColor.light, 
                                         // Chakra's MenuItem renders `background: var(--menu-bg)` at rest; its MenuList
                                         // baseStyle hardcodes that var to "#fff" (gated behind `_dark`, which this theme-swap
                                         // app never triggers). The `bg` prop above only recolors the list itself, not the
                                         // inherited var, so items fall back to white until hover/focus — set the var too.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "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}`));
+                                        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: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                                        var _a, _b, _c, _d;
+                                                        return ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
                                                     }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsxs)(react_1.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" },
-                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { children: logoutText })] })] }) })] })] }) })] }) }));
+                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String(logoutText !== null && logoutText !== void 0 ? logoutText : ""), children: logoutText })] })] }) })] })] }) })] }) }));
 }

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 export type NavbarProps = {
-    userAvathar: string;
+    userAvathar?: string;
     userName: string;
     userRole?: string;
     navMenu: MenuProps[];
@@ -28,4 +28,3 @@ export type MenuProps = {
     url: string;
     icon?: ReactNode;
 };
-//# sourceMappingURL=NavigationBarProps.d.ts.map

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

@@ -1,3 +1,2 @@
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
 export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NoteTextArea.d.ts.map

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

@@ -16,4 +16,3 @@ export type NoteTextAreaProps = {
     customPlaceholder?: string;
     cancelButtonHide?: boolean;
 };
-//# sourceMappingURL=NoteTextAreaProps.d.ts.map

package/dist/Components/Notification/Notification.d.ts

@@ -1,4 +1,3 @@
 import { NotificationProps } from "./NotificationProps";
 declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 export default Notification;
-//# sourceMappingURL=Notification.d.ts.map

package/dist/Components/Notification/NotificationProps.d.ts

@@ -27,4 +27,3 @@ export type NotificationColor = {
     errorColor?: string;
     successColor?: string;
 };
-//# sourceMappingURL=NotificationProps.d.ts.map

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

@@ -1,3 +1,17 @@
-import { NumberInputProps } from "./NumberInputProps";
-export default function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width, minW, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=NumberInput.d.ts.map
+declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<import("@chakra-ui/react").NumberInputProps, "maxW" | "defaultValue" | "onBlur" | "onChange" | "size" | "max" | "min" | "step" | "name" | "value" | "precision" | "clampValueOnBlur" | "keepWithinRange" | "allowMouseWheel"> & {
+    NumberIncrementStepperBg?: string;
+    NumberIncrementStepperActive?: import("./NumberInputProps").ActiveStyle;
+    NumberIncrementStepperChildren?: string;
+    NumberDecrementStepperBg?: string;
+    NumberDecrementStepperChildren?: string;
+    NumberDecrementStepperActive?: import("./NumberInputProps").ActiveStyle;
+    label?: string;
+    isInformation?: boolean;
+    informationMessage?: string;
+    isRequired?: boolean;
+    id?: string;
+    width?: string;
+    minW?: string;
+    maxW?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default NumberInput;

package/dist/Components/NumberInput/NumberInput.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = NumberInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
 const FormLabel_1 = require("../Common/FormLabel");
-function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, {}), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
-}
+const NumberInput = (0, react_2.forwardRef)(function NumberInput({ defaultValue, min, max, precision, step, clampValueOnBlur, keepWithinRange, value, onChange, onBlur, name, size, maxW, allowMouseWheel, NumberIncrementStepperBg, NumberIncrementStepperActive, NumberIncrementStepperChildren, NumberDecrementStepperBg, NumberDecrementStepperChildren, NumberDecrementStepperActive, label, isInformation, informationMessage, isRequired, id, width = "100%", minW, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_1.NumberInput, { defaultValue: defaultValue, min: min, max: max, step: step, precision: precision, clampValueOnBlur: clampValueOnBlur, keepWithinRange: keepWithinRange, value: value, onChange: onChange, onBlur: onBlur, name: name, size: size, maxW: maxW, allowMouseWheel: allowMouseWheel, ...props, children: [(0, jsx_runtime_1.jsx)(react_1.NumberInputField, { ref: ref }), (0, jsx_runtime_1.jsxs)(react_1.NumberInputStepper, { children: [(0, jsx_runtime_1.jsx)(react_1.NumberIncrementStepper, { bg: NumberIncrementStepperBg, _active: NumberIncrementStepperActive, children: NumberIncrementStepperChildren }), (0, jsx_runtime_1.jsx)(react_1.NumberDecrementStepper, { bg: NumberDecrementStepperBg, _active: NumberDecrementStepperActive, children: NumberDecrementStepperChildren })] })] })] }));
+});
+exports.default = NumberInput;

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

@@ -1,3 +1,2 @@
 import { ComponentStyleConfig } from "@chakra-ui/react";
 export declare const NumberInput: ComponentStyleConfig;
-//# sourceMappingURL=NumberInput.styles.d.ts.map

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

@@ -9,7 +9,7 @@ exports.NumberInput = {
             letterSpacing: "0.044rem",
             pt: "0.813rem",
             pb: "0.813rem",
-            borderRadius: "0.5rem",
+            borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
                 fontStyle: "italic",

package/dist/Components/NumberInput/NumberInputProps.d.ts

@@ -1,5 +1,5 @@
 import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
-export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel"> & {
+export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name"> & {
     NumberIncrementStepperBg?: string;
     NumberIncrementStepperActive?: ActiveStyle;
     NumberIncrementStepperChildren?: string;
@@ -18,4 +18,3 @@ export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "mi
 export type ActiveStyle = {
     bg: string;
 };
-//# sourceMappingURL=NumberInputProps.d.ts.map

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

@@ -2,4 +2,3 @@ import React from "react";
 import { OrgSwitcherProps } from "./OrgSwitcherProps";
 declare const OrgSwitcher: React.FC<OrgSwitcherProps>;
 export default OrgSwitcher;
-//# sourceMappingURL=OrgSwitcher.d.ts.map

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -6,6 +6,7 @@ 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 chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const sizeMap = {
@@ -14,15 +15,13 @@ const sizeMap = {
     lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
 const Avatar = ({ org, boxSize, fontSize, }) => {
+    var _a, _b;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     if (org.logoUrl) {
-        return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "8px", objectFit: "cover", flexShrink: 0 }));
+        return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "lg", objectFit: "cover", flexShrink: 0 }));
     }
-    // `AVATAR_COLORS` is a fixed 8-swatch palette hashed from the org name (not theme-derived, so
-    // it can't lean on a per-brand text rung). Two of the eight — amber `#F59E0B`, teal `#14B8A6` —
-    // measure 2.15:1 / 2.49:1 against hardcoded white, well under AA. `onFilled` is provably >=4.5
-    // against ANY fill, so it's the correct ink for an arbitrary, theme-independent swatch.
-    const fill = (0, OrgSwitcherProps_1.avatarColor)(org.name);
-    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, "#ffffff", "#000000"), fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
+    const fill = (0, OrgSwitcherProps_1.avatarColor)(org.name, (0, chartColorsFromTheme_1.chartMode)(colors));
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, (_a = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _a !== void 0 ? _a : accentText_1.DEFAULT_WHITE, (_b = colors === null || colors === void 0 ? void 0 : colors.black) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_BLACK), 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;
@@ -31,6 +30,9 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const [query, setQuery] = (0, react_1.useState)("");
     const searchRef = (0, react_1.useRef)(null);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const optionRefs = (0, react_1.useRef)([]);
+    const firstOptionRef = (0, react_1.useRef)(null);
     const selected = (0, react_1.useMemo)(() => organizations.find((o) => o.id === value), [organizations, value]);
     const showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : organizations.length >= searchThreshold;
     const filtered = (0, react_1.useMemo)(() => {
@@ -39,6 +41,31 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         const q = query.toLowerCase();
         return organizations.filter((o) => o.name.toLowerCase().includes(q));
     }, [organizations, query]);
+    (0, react_1.useEffect)(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = (0, react_1.useCallback)((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // Roving tabindex: only the active row is a tab stop, arrow keys move focus between
+    // options — mirrors CompactSelect's established listbox keyboard pattern in this repo.
+    const handleListKeyDown = (0, react_1.useCallback)((e) => {
+        if (filtered.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filtered.length) % filtered.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filtered.length - 1);
+        }
+    }, [activeIndex, filtered.length, focusOption]);
     // 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.
@@ -61,12 +88,17 @@ 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" ? triggerHoverBg : 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", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, 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: "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 ? ((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: "lg", 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) => {
+                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: (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), onKeyDown: (e) => {
+                                            if (e.key === "ArrowDown" && filtered.length > 0) {
+                                                e.preventDefault();
+                                                focusOption(0);
+                                            }
+                                        }, borderRadius: "lg" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
                                     const isActive = org.id === value;
                                     // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
                                     // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
@@ -75,7 +107,11 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                     const rowHoverBg = isActive
                                         ? (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[50], theme.colors.primary[50])
                                         : (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.backgroundColor.light);
-                                    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: rowHoverBg }, 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));
+                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
+                                            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: [(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/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -1,3 +1,4 @@
+import { type ChartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
 export interface OrgOption {
     id: string | number;
     /** Organization display name. */
@@ -35,9 +36,8 @@ export interface OrgSwitcherProps {
     /** Show the role subtitle inside the dropdown rows. Default true. */
     showRole?: boolean;
 }
-export declare const AVATAR_COLORS: string[];
-/** Deterministically pick an avatar color from an org name. */
-export declare const avatarColor: (seed: string) => string;
+export declare const AVATAR_COLORS: readonly string[];
+export declare const avatarColor: (seed: string, mode?: ChartMode) => string;
 /**
  * Fallback-avatar initials, up to 2 characters. A single letter reads well for one
  * org but collides constantly across a real list — two orgs both starting with
@@ -47,4 +47,3 @@ export declare const avatarColor: (seed: string) => string;
  * one-word org still gets a distinct-looking mark instead of falling back to one.
  */
 export declare const orgInitial: (name: string) => string;
-//# sourceMappingURL=OrgSwitcherProps.d.ts.map

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -1,23 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.orgInitial = exports.avatarColor = exports.AVATAR_COLORS = void 0;
+const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 exports.AVATAR_COLORS = [
-    "#6366F1",
-    "#0EA5E9",
-    "#10B981",
-    "#F59E0B",
-    "#EF4444",
-    "#EC4899",
-    "#8B5CF6",
-    "#14B8A6",
+    ...chartColorsFromTheme_1.CATEGORICAL_SERIES.light,
+    ...chartColorsFromTheme_1.CATEGORICAL_SERIES.dark,
 ];
-/** Deterministically pick an avatar color from an org name. */
-const avatarColor = (seed) => {
+const avatarColor = (seed, mode = "light") => {
     let hash = 0;
     for (let i = 0; i < seed.length; i += 1) {
         hash = seed.charCodeAt(i) + ((hash << 5) - hash);
     }
-    return exports.AVATAR_COLORS[Math.abs(hash) % exports.AVATAR_COLORS.length];
+    const ramp = chartColorsFromTheme_1.CATEGORICAL_SERIES[mode];
+    return ramp[Math.abs(hash) % ramp.length];
 };
 exports.avatarColor = avatarColor;
 /**

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

@@ -2,4 +2,3 @@ import React from "react";
 import { CreateOrgModalProps } from "./OrganizationDetailsProps";
 declare const CreateOrgModal: React.FC<CreateOrgModalProps>;
 export default CreateOrgModal;
-//# sourceMappingURL=CreateOrgModal.d.ts.map

package/dist/Components/OrganizationDetails/DeleteOrgModal.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { DeleteOrgModalProps } from "./OrganizationDetailsProps";
 declare const DeleteOrgModal: React.FC<DeleteOrgModalProps>;
 export default DeleteOrgModal;
-//# sourceMappingURL=DeleteOrgModal.d.ts.map

package/dist/Components/OrganizationDetails/DeleteOrgModal.js

@@ -9,8 +9,8 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#EF4444", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[600], fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.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 }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
 };
 exports.default = DeleteOrgModal;

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

@@ -2,4 +2,3 @@ import React from "react";
 import { OrganizationDetailsProps } from "./OrganizationDetailsProps";
 declare const OrganizationDetails: React.FC<OrganizationDetailsProps>;
 export default OrganizationDetails;
-//# sourceMappingURL=OrganizationDetails.d.ts.map