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

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

@@ -1,3 +1,4 @@
+/** No `options` prop — typed text is validated as an email, not picked from a list; use `SearchSelect isMultiple`. */
 export type MultiSelectProps = {
     value: MultiSelctOPtions[];
     onValueChange: (options: MultiSelctOPtions[]) => void;
@@ -17,6 +18,7 @@ export type MultiSelectProps = {
     errorMessage?: string;
     helperText?: string;
 };
+/** One entered chip — id is a generated key, label is the email text the user typed. */
 export type MultiSelctOPtions = {
     id: string;
     label: string;

package/dist/Components/NavigationBar/NavigationBar.js

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

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

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
+/** Props for the top navbar — user menu, nav items, and the toggle/peek affordances shared with SideBar. */
 export type NavbarProps = {
+    /** Prop name is spelled exactly this way ("Avathar") — not a typo to correct at the call site. */
     userAvathar?: string;
     userName: string;
     userRole?: string;
@@ -27,6 +29,7 @@ export type NavbarProps = {
      */
     onSideBarPeek?: () => void;
 };
+/** One navMenu entry (id/title/url/icon) — unrelated to Chakra's own MenuProps despite the shared name. */
 export type MenuProps = {
     id?: string | number;
     title: string;

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

@@ -1,2 +1,3 @@
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
+/** Self-contained note composer (optional title + textarea + Save); its `ref` only ever reaches the title input, never the primary textarea. */
 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;

package/dist/Components/NoteTextArea/NoteTextArea.js

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

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

@@ -1,4 +1,5 @@
 import { LegacyRef } from "react";
+/** Plain Chakra Textarea + title + file attach, not a rich text editor — no formatting toolbar despite the "note" naming. Use Editor for HTML content. */
 export type NoteTextAreaProps = {
     width?: number | string;
     handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
@@ -7,6 +8,7 @@ export type NoteTextAreaProps = {
     file?: File[];
     isEditable?: boolean;
     handleCancel?: (isActive: boolean) => void;
+    /** Any transition to false while isEditable is not true clears the note, title and files — including after a failed save, not just success. */
     saveButtonLoading?: boolean;
     maxFileSize?: number;
     maxFilesSizeError?: string;

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

@@ -1,3 +1,4 @@
 import { NotificationProps } from "./NotificationProps";
+/** Self-contained event/task card with its own loading skeleton — not the app's toast/alert system; for status messages use Toaster (overlays). */
 declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, colors, }: NotificationProps) => import("react/jsx-runtime").JSX.Element;
 export default Notification;

package/dist/Components/Notification/Notification.js

@@ -7,6 +7,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+/** Self-contained event/task card with its own loading skeleton — not the app's toast/alert system; for status messages use Toaster (overlays). */
 const Notification = ({ notification, onClose, showStatus, onClick, isLoading = false, colors, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const theme = (0, useCustomTheme_1.useCustomTheme)();

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

@@ -1,3 +1,4 @@
+/** The event/task/call record a Notification card renders; startDate/dueDate/endDate drive its countdown text. */
 export type NotificationData = {
     id: number;
     title: string;
@@ -7,22 +8,27 @@ export type NotificationData = {
     endDate?: string;
     host?: string;
     description?: string;
+    /** Accepted but never read by Notification — the status dot's color comes from date math (dueDate/endDate), not this field. */
     status?: string;
     type: "task" | "meeting" | "call";
 };
+/** Wraps a NotificationData record with the click/close handlers and optional color overrides that render it. */
 export type NotificationProps = {
     notification: NotificationData;
     onClose?: () => void;
     showStatus?: boolean;
+    /** Fires only when the title text is clicked — the avatar, description and card body are not clickable. */
     onClick?: (id: number, type: "task" | "meeting" | "call") => void;
     isLoading?: boolean;
     colors?: NotificationColor;
 };
+/** Optional per-card palette override for Notification; any field left unset falls back to theme tokens. */
 export type NotificationColor = {
     bgColor?: string;
     borderColor?: string;
     textColor?: string;
     titleColor?: string;
+    /** warningColor/errorColor/successColor only paint the status dot, and only when showStatus is true — otherwise inert. */
     warningColor?: string;
     errorColor?: string;
     successColor?: string;

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

@@ -1,3 +1,4 @@
+/** Labelled numeric field; unlike most fields here, `isRequired` propagates natively via `FormControl`, not just the label asterisk. */
 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;

package/dist/Components/NumberInput/NumberInput.js

@@ -4,7 +4,10 @@ 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");
+/** Labelled numeric field; unlike most fields here, `isRequired` propagates natively via `FormControl`, not just the label asterisk. */
 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 })] })] })] }));
+    const generatedId = (0, react_2.useId)();
+    const resolvedId = id !== null && id !== void 0 ? id : generatedId;
+    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { w: width, minW: minW, maxW: maxW, id: resolvedId, isRequired: isRequired, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: resolvedId, 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.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.NumberInput = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         field: {
             fontWeight: 500,
             fontSize: "0.875rem",
@@ -12,10 +13,10 @@ exports.NumberInput = {
             borderRadius: "lg",
             transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
-                fontStyle: "italic",
+                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
             },
         },
-    },
+    }),
     sizes: {
         md: {
             field: {
@@ -34,11 +35,11 @@ exports.NumberInput = {
             const primary = theme.colors.primary[500];
             return {
                 field: {
-                    bg: theme.colors.gray[50],
+                    bg: theme.colors.background[50],
                     border: "0.063rem solid",
                     borderColor,
                     _placeholder: {
-                        color: theme.colors.textMuted,
+                        color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                     },
                     _hover: {
                         borderColor: primary,
@@ -68,7 +69,7 @@ exports.NumberInput = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: theme.colors.gray[100],
+                        bg: theme.colors.background[100],
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {

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

@@ -1,5 +1,7 @@
 import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
+/** Picks a safe subset of Chakra's NumberInput props and adds label/stepper-color props of its own. */
 export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name"> & {
+    /** NumberIncrementStepperChildren/NumberDecrementStepperChildren accept only a string, not an icon — omit them to keep Chakra's default chevrons. */
     NumberIncrementStepperBg?: string;
     NumberIncrementStepperActive?: ActiveStyle;
     NumberIncrementStepperChildren?: string;
@@ -15,6 +17,7 @@ export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "mi
     minW?: string;
     maxW?: string;
 };
+/** Background applied to a stepper button's `_active` (pressed) state. */
 export type ActiveStyle = {
     bg: string;
 };

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -8,6 +8,8 @@ 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 rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const sizeMap = {
     sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -25,8 +27,14 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
 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;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const s = sizeMap[size];
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const handlePopoverOpen = () => {
+        requestExclusiveOpen();
+        onOpen();
+    };
     const [query, setQuery] = (0, react_1.useState)("");
     const searchRef = (0, react_1.useRef)(null);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
@@ -71,7 +79,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     const triggerStyles = triggerVariant === "outline"
         ? { border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
-            ? { bg: theme.colors.gray[50] }
+            ? { bg: theme.colors.background[50] }
             : { bg: "transparent" };
     // `gray[100]` hover on a "transparent" trigger reads against whatever's actually behind it —
     // this control lives in a navbar-like shell, so `backgroundColor.light` is that surface. For a
@@ -84,7 +92,7 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         if (org.id !== value)
             onChange(org.id, org);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: handlePopoverOpen, onClose: () => {
             onClose();
             setQuery("");
         }, 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: (0, accentText_1.accentTextOnCanvas)(theme.colors.gray, theme.colors.gray[100]), 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: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
@@ -99,18 +107,14 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
                                             }
                                         }, 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
-                                    // backdrop until distinguishable, so handing it its own resting bg as the backdrop
-                                    // is enough to make hover read as a real state change on both active and inactive rows.
                                     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);
+                                        ? rowBackgrounds.selectedActive
+                                        : rowBackgrounds.active;
                                     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: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[50]), 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" }))] })] }) })] }));
+                                        }, 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 ? rowBackgrounds.selected : "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.accentText, flexShrink: 0 }))] }, org.id));
+                                }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.textMuted, textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

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

@@ -1,4 +1,5 @@
 import { type ChartMode } from "../../Theme/tokens/builders/chartColorsFromTheme";
+/** One organization in the switcher's list; `id` is matched against `value` to find the active one. */
 export interface OrgOption {
     id: string | number;
     /** Organization display name. */
@@ -8,13 +9,15 @@ export interface OrgOption {
     /** Optional logo image URL. Falls back to an initial-based avatar. */
     logoUrl?: string;
 }
+/** Trigger size; looked up in a fixed sizeMap for height, avatar and font sizing. */
 export type OrgSwitcherSize = "sm" | "md" | "lg";
+/** Session-scoped org switcher (trigger+popover) — not an admin screen; see OrganizationDetails for create/rename/delete/default. Closed prop list, no ...rest/ref on the trigger button. */
 export interface OrgSwitcherProps {
     /** Organizations to choose from. */
     organizations: OrgOption[];
     /** id of the currently active organization. */
     value?: string | number;
-    /** Fired when a different organization is picked. */
+    /** Not fired when the clicked org already matches value — only on an actual change. */
     onChange: (id: string | number, org: OrgOption) => void;
     /** Shows an inline spinner and disables interaction (e.g. while switching). */
     isLoading?: boolean;
@@ -24,6 +27,7 @@ export interface OrgSwitcherProps {
     searchThreshold?: number;
     /** Trigger styling. "ghost" suits a navbar; "outline"/"subtle" for forms. */
     triggerVariant?: "ghost" | "outline" | "subtle";
+    /** Default "md". */
     size?: OrgSwitcherSize;
     /** Max width of the trigger label before truncation. */
     maxWidth?: string;
@@ -39,6 +43,7 @@ export interface OrgSwitcherProps {
 export declare const AVATAR_COLORS: readonly string[];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
 export declare const AVATAR_INK = "#ffffff";
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 export declare const avatarColor: (seed: string, mode?: ChartMode) => string;
 /**
  * Fallback-avatar initials, up to 2 characters. A single letter reads well for one

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -9,6 +9,7 @@ exports.AVATAR_COLORS = [
 ];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
 exports.AVATAR_INK = "#ffffff";
+/** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 const avatarColor = (seed, mode = "light") => {
     let hash = 0;
     for (let i = 0; i < seed.length; i += 1) {

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

@@ -1,4 +1,5 @@
 import React from "react";
 import { OrganizationDetailsProps } from "./OrganizationDetailsProps";
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher. */
 declare const OrganizationDetails: React.FC<OrganizationDetailsProps>;
 export default OrganizationDetails;

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -9,6 +9,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 filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
@@ -52,6 +53,7 @@ const DEFAULT_LABELS = {
     copyright: "Pixelize Corp. All rights reserved.",
     termsOfService: "Terms of Service",
 };
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher. */
 const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -72,7 +74,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const pageBg = colors.backgroundColor.main;
     const primary50 = colors.primary[50];
     const primary100 = colors.primary[100];
-    const primary500 = colors.primary[500];
+    const primarySolid = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
     const onPrimary50 = (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]);
     const cardSx = {
         backgroundColor: surface,
@@ -158,7 +160,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         width: "100%",
     };
     const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: (0, accentText_1.onFilled)(primary500, colors.white, colors.black), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primarySolid.fill, color: primarySolid.color, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
                                                     ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
                                                     : labels.greeting }), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Users, { size: 16, color: colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, color: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), (0, jsx_runtime_1.jsx)(react_2.Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, (0, jsx_runtime_1.jsx)(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
                     await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));

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

@@ -1,20 +1,21 @@
 import { ReactNode } from "react";
+/** One organization row — active or invited — rendered as a card in OrganizationDetails' grid. */
 export type OrganizationItem = {
     orgId: number;
     company_name: string;
     company_url?: string;
     /** 1 when this org is the user's default org. */
     default: number;
-    /** 1 = active/accepted, 0 = pending invite. */
+    /** Not read by OrganizationDetails — active vs. invited comes from which array the item is placed in. */
     uiInvite: number;
-    /** 1 when the org is protected and cannot be deleted. */
+    /** Distinct from `default` above — only gates delete-protection, not the Default badge/set-default flow. */
     defaultOrg: number;
     roleName?: string;
     /** True when the current user owns this org; the app computes ownership. */
     isOwner?: boolean;
-    /** Overrides the role-name check for the rename control. */
+    /** Overrides the role-name check for rename; omitted, defaults to roleName === "Super Admin". */
     canRename?: boolean;
-    /** Overrides the role-name check for the delete control. */
+    /** Same default-if-omitted as canRename; defaultOrg === 1 still blocks delete regardless. */
     canDelete?: boolean;
     /**
      * Why delete is unavailable for this organization, shown on the disabled
@@ -22,13 +23,16 @@ export type OrganizationItem = {
      */
     deleteDisabledReason?: string;
 };
+/** Local form state for CreateOrgModal — the shape onSubmit receives when the create form is confirmed. */
 export type CreateOrgFormValues = {
     company_name: string;
     company_address: string;
     phone?: string;
+    /** Never populated by the built-in CreateOrgModal — dead unless your own submit handler sets it. */
     default?: number;
     defaultOrg?: number;
 };
+/** All copy in OrganizationDetails is overridable here; unset fields fall back to its built-in DEFAULT_LABELS. */
 export type OrganizationDetailsLabels = {
     greeting?: string;
     manageSubtitle?: string;
@@ -66,11 +70,13 @@ export type OrganizationDetailsLabels = {
     copyright?: string;
     termsOfService?: string;
 };
+/** Payload for the public onCreateOrganization callback — company_address/phone optional here, unlike CreateOrgFormValues. */
 export interface CreateOrganizationValues {
     company_name: string;
     company_address?: string;
     phone?: string;
 }
+/** Admin panel for the org list — rename/delete/create/invites/default; not a session switcher (see OrgSwitcher for picking the active org). */
 export interface OrganizationDetailsProps {
     activeOrganizations: OrganizationItem[];
     invitedOrganizations: OrganizationItem[];
@@ -84,7 +90,9 @@ export interface OrganizationDetailsProps {
     editingOrgIds?: number[];
     userName?: string;
     userAvatarUrl?: string;
+    /** Not awaited internally despite the Promise signature — drive switchingOrgIds yourself. */
     onSetDefault?: (orgId: number) => void | Promise<void>;
+    /** Same as onSetDefault — not awaited internally; respondingOrgIds is entirely consumer-managed. */
     onAcceptInvite?: (orgId: number) => void | Promise<void>;
     onDeclineInvite?: (orgId: number) => void | Promise<void>;
     /**
@@ -98,13 +106,16 @@ export interface OrganizationDetailsProps {
      * both the modal and `onDeleteOrganization`; omit it to keep the built-in flow.
      */
     onDeleteRequest?: (orgId: number) => void | Promise<void>;
+    /** Rejecting/throwing here leaves the modal open with no built-in error UI — same for onDeleteOrganization/onEditOrganization; show your own toast. */
     onCreateOrganization?: (values: CreateOrganizationValues) => void | Promise<void>;
     /** Called when the user confirms a new name for an organization */
     onEditOrganization?: (orgId: number, newName: string) => void | Promise<void>;
+    /** Back icon renders only when this is provided, not merely disabled when omitted. */
     onBack?: () => void;
     footerSlot?: ReactNode;
     labels?: OrganizationDetailsLabels;
 }
+/** Props for the internal create-org modal; `labels` needs only the subset of OrganizationDetailsLabels it renders. */
 export interface CreateOrgModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -112,6 +123,7 @@ export interface CreateOrgModalProps {
     onSubmit: (values: CreateOrgFormValues) => void | Promise<void>;
     labels: Required<Pick<OrganizationDetailsLabels, "createOrganization" | "companyName" | "companyAddress" | "phone" | "cancel" | "submit" | "requiredField" | "invalidPhone">>;
 }
+/** Props for the internal delete-confirm modal; same narrowed-labels pattern as CreateOrgModalProps. */
 export interface DeleteOrgModalProps {
     isOpen: boolean;
     onClose: () => void;

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export interface PdfViewerProps {
-    /** URL of the PDF to embed. */
+    /** Rendered via a native browser <embed> — no fallback UI if the browser can't show PDFs inline. */
     pdfUrl: string;
     /** File name shown in the toolbar. */
     fileName?: string;
@@ -11,5 +11,6 @@ export interface PdfViewerProps {
     /** Border radius of the frame. */
     borderRadius?: string;
 }
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 declare const PdfViewer: React.FC<PdfViewerProps>;
 export default PdfViewer;