pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -8,25 +11,50 @@ 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 surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowInk_1 = require("../Select/optionRowInk");
+const selectKeyboardRing_1 = require("../Select/selectKeyboardRing");
+const selectRowInk_1 = require("../Select/selectRowInk");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const sizeMap = {
-    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
-    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
-    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+    sm: { h: "32px", avatarH: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatarH: "36px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatarH: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
 };
+const MD_QUERY = "(min-width: 48em)";
 const Avatar = ({ org, boxSize, fontSize, }) => {
     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: "lg", objectFit: "cover", flexShrink: 0 }));
     }
     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, colors.white, colors.black), fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { "aria-hidden": "true", "data-initials": (0, OrgSwitcherProps_1.orgInitial)(org.name), _before: { content: "attr(data-initials)" }, align: "center", justify: "center", boxSize: boxSize, borderRadius: "lg", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, colors.white, colors.black), fontSize: fontSize, fontWeight: 700 }));
 };
-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;
+/** Session-scoped organization switcher: a trigger plus searchable popover that reports the chosen org via `onChange`. */
+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, display = "full", }) => {
+    var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const isMd = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const avatarOnly = display === "avatar" || (display === "auto" && !isMd);
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.selectRowBackgrounds)(theme.colors), [theme.colors]);
+    const keyboardRing = {
+        outline: "2px solid transparent",
+        boxShadow: (0, selectKeyboardRing_1.keyboardRingShadow)(rowBackgrounds.keyboardRing),
+    };
     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);
@@ -65,52 +93,45 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    // boxborder[500], not raw gray[200]: this styles a real `<button>` (Flex as="button" below),
-    // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named surface up
-    // to `muted` (lightest); gray[200] fails there in dark mode.
+    // NOTE: boxborder[500] not gray[200] — this styles a real button, WCAG 1.4.11 needs >=3:1; gray[200] fails in dark.
     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
-    // near-neutral brand (zinc) the two measured near-1.0: an invisible hover, same bug shape as
-    // NavigationBar's menu items.
+    // NOTE: hover reads against backgroundColor.light (the navbar shell) — for zinc the two measured near-1.0, invisible.
     const triggerHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const searchRule = (0, accentText_1.isDarkCanvas)(theme.colors.surfaceRaised)
+        ? (0, surfaceRaised_1.raisedRule)(theme.colors)
+        : theme.colors.gray[100];
     const handleSelect = (org) => {
         onClose();
         setQuery("");
         if (org.id !== value)
             onChange(org.id, org);
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
+    const avatarNode = 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 }) }));
+    const labelGap = s.px === 2 ? 8 : 10;
+    const squeezedWidth = `calc(${s.px * 8 + labelGap * 2 + 16}px + ${s.avatar})`;
+    const shownName = avatarOnly ? selected === null || selected === void 0 ? void 0 : selected.name : ((_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder);
+    const trigger = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": shownName ? `${ariaLabel}, ${shownName}` : ariaLabel, align: "center", justify: avatarOnly ? "center" : undefined, gap: avatarOnly ? "4px" : `${labelGap}px`, h: avatarOnly ? s.avatarH : s.h, px: avatarOnly ? "6px" : s.px, minW: avatarOnly ? undefined : squeezedWidth, flexShrink: avatarOnly ? 0 : 1, borderRadius: "lg", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: BACKGROUND_TRANSITION, _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [avatarNode, !avatarOnly && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, minW: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_b = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _b !== void 0 ? _b : placeholder })), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : avatarOnly ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronDown, size: 12, color: theme.colors.textMuted, flexShrink: 0, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }));
+    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", 
-                // Chakra's PopoverContent baseStyle defaults bg to var(--popper-bg), which is hardcoded
-                // to colors.white and only repointed under Chakra's own `_dark` — dead code here since
-                // this app toggles dark mode by swapping the palette, not Chakra's colorMode. Without an
-                // explicit bg the panel always rendered white regardless of the active theme.
-                bg: theme.colors.backgroundColor.light, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (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.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [avatarOnly ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder, placement: "bottom", isDisabled: isOpen, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: trigger })), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { "aria-label": ariaLabel, minW: menuMinWidth, maxW: "calc(100vw - 32px)", w: "auto", 
+                // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
+                bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, 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: searchRule, 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.textMuted }) }), (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
-                                    // 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);
                                     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: "calc(100% - 0.5rem)", mx: 1, textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, cursor: "pointer", bg: isActive ? rowBackgrounds.selected : "transparent", transition: BACKGROUND_TRANSITION, _hover: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focus: { bg: isActive ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focusVisible: keyboardRing, 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: (0, optionRowInk_1.optionRowWeight)(isActive), color: (0, selectRowInk_1.selectRowInk)(theme.colors, isActive), overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: (0, selectRowInk_1.selectRowDescriptionInk)(theme.colors), 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,5 +1,7 @@
 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 {
+    /** Unique key; compared with `value` to mark the active organization and passed to `onChange`. */
     id: string | number;
     /** Organization display name. */
     name: string;
@@ -8,13 +10,17 @@ 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";
+/** Trigger layout: avatar + name + chevron ("full"), avatar + chevron only ("avatar"), or "auto" to switch at the `md` breakpoint. */
+export type OrgSwitcherDisplay = "full" | "avatar" | "auto";
+/** 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 +30,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;
@@ -31,14 +38,17 @@ export interface OrgSwitcherProps {
     menuMinWidth?: string;
     /** Shown when no org is selected. */
     placeholder?: string;
-    /** Accessible label for the trigger. */
+    /** Names the trigger; the shown organization (or placeholder) is appended, so the name always holds the visible text. */
     ariaLabel?: string;
     /** Show the role subtitle inside the dropdown rows. Default true. */
     showRole?: boolean;
+    /** "avatar" shows only the org avatar and a small chevron, name moves to the accessible name and a tooltip; "auto" is avatar below `md`, full from `md` up. Default "full". */
+    display?: OrgSwitcherDisplay;
 }
 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";
+export declare const AVATAR_INK: string;
+/** 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

@@ -3,12 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.orgInitial = exports.avatarColor = exports.AVATAR_INK = exports.AVATAR_COLORS = void 0;
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
 exports.AVATAR_COLORS = [
     ...chartColorsFromTheme_1.CATEGORICAL_SERIES.light,
     ...chartColorsFromTheme_1.CATEGORICAL_SERIES.dark,
 ];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
-exports.AVATAR_INK = "#ffffff";
+exports.AVATAR_INK = neutrals_1.neutralTokens.white;
+/** 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/CreateOrgModal.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const EMPTY = {
@@ -56,6 +57,6 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 exports.default = CreateOrgModal;

package/dist/Components/OrganizationDetails/DeleteOrgModal.js

@@ -7,13 +7,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
-const Button_1 = __importDefault(require("../Button/Button"));
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
-    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: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[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: errorTone.bg, color: errorTone.fg, 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: colors.textMuted, 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 }) })] })] })] })] }));
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }) }));
 };
 exports.default = DeleteOrgModal;

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,12 +9,19 @@ 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 statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const CreateOrgModal_1 = __importDefault(require("./CreateOrgModal"));
 const DeleteOrgModal_1 = __importDefault(require("./DeleteOrgModal"));
+const activationKey_1 = require("../Common/activationKey");
 const DEFAULT_LABELS = {
     greeting: "Hello, User!",
     manageSubtitle: "Manage your organizations",
@@ -52,6 +59,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]);
@@ -61,9 +69,8 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const [editingOrgId, setEditingOrgId] = (0, react_1.useState)(null);
     const [editValue, setEditValue] = (0, react_1.useState)("");
     const [editError, setEditError] = (0, react_1.useState)("");
-    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
-    const warningTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.warning, mode);
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    const warningTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.warning);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
     const muted = colors.textMuted;
@@ -72,8 +79,9 @@ 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 onPrimary50 = (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]);
+    const primarySolid = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const primaryTile = (0, planeStep_1.bandOn)(primary50, surface);
+    const onPrimaryTile = (0, accentText_1.accentTextOnCanvas)(colors.primary, primaryTile);
     const cardSx = {
         backgroundColor: surface,
         borderRadius: "xl",
@@ -123,11 +131,11 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
             }, onClick: () => onDeleteRequest
                 ? onDeleteRequest(item.orgId)
                 : setDeleteOrgId(item.orgId) }));
-        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)(), _hover: {
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primaryTile, color: onPrimaryTile, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: (0, motion_1.transitionFor)(["color", "gap"]), sx: (0, motion_2.reducedMotionSx)(), role: "button", tabIndex: 0, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), onKeyDown: (0, activationKey_1.onActivationKey)(() => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId)), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimaryTile, bg: primaryTile }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
@@ -142,7 +150,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     };
     const renderInvitedCard = (item) => {
         const isResponding = respondingOrgIds.includes(item.orgId);
-        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: (0, motion_1.transitionFor)(["box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)(), _hover: {
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
             }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Globe, { size: 13 }), (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
@@ -158,9 +166,9 @@ 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) => {
+                                                    : labels.greeting }), userName ? (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "xs", name: userName, src: userAvatarUrl }) : null] }), (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));
                     setCreateOpen(false);
                 }, labels: labels }), (0, jsx_runtime_1.jsx)(DeleteOrgModal_1.default, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {

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

@@ -1,20 +1,25 @@
 import { ReactNode } from "react";
+/** One organization row — active or invited — rendered as a card in OrganizationDetails' grid. */
 export type OrganizationItem = {
+    /** Unique per card (React key); passed to every per-organization callback and matched against the `*OrgIds` spinner arrays. */
     orgId: number;
+    /** Card title; seeds the inline rename field, and renames are sent trimmed through `onEditOrganization`. */
     company_name: string;
+    /** Invited cards only: shown as a line with a globe icon; ignored on active cards. */
     company_url?: string;
     /** 1 when this org is the user's default org. */
     default: number;
-    /** 1 = active/accepted, 0 = pending invite. */
-    uiInvite: number;
-    /** 1 when the org is protected and cannot be deleted. */
+    /** @deprecated Ignored; kept so existing callers still compile. Active vs. invited comes from which array the item is in. */
+    uiInvite?: number;
+    /** Distinct from `default` above — only gates delete-protection, not the Default badge/set-default flow. */
     defaultOrg: number;
+    /** Shown as a tag on active cards; "Super Admin" is what `canRename` and `canDelete` default to allowing. */
     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,59 +27,110 @@ export type OrganizationItem = {
      */
     deleteDisabledReason?: string;
 };
+/** Local form state for CreateOrgModal — the shape onSubmit receives when the create form is confirmed. */
 export type CreateOrgFormValues = {
+    /** Organization name entered in the create form; required, and trimmed before submit. */
     company_name: string;
+    /** Address entered in the create form; required, and trimmed before submit. */
     company_address: string;
+    /** Trimmed phone; the built-in form requires it with at least 8 digits even though it is typed optional. */
     phone?: string;
+    /** @deprecated Dead — never populated by the built-in CreateOrgModal, no known consumer usage. */
     default?: number;
+    /** @deprecated Dead — never populated by the built-in CreateOrgModal, no known consumer usage. */
     defaultOrg?: number;
 };
+/** All copy in OrganizationDetails is overridable here; unset fields fall back to its built-in DEFAULT_LABELS. */
 export type OrganizationDetailsLabels = {
+    /** Header title, default "Hello, User!"; when `userName` is set, "User" is replaced by that name. */
     greeting?: string;
+    /** Header subtitle under the greeting. Default "Manage your organizations". */
     manageSubtitle?: string;
+    /** Not rendered by the current UI. */
     organizationDetails?: string;
+    /** Header button that opens the create modal. Default "Create New Organization". */
     createNewOrganization?: string;
+    /** Create modal title and the empty-state button. Default "Create Organization". */
     createOrganization?: string;
+    /** Heading of the active organizations section. Default "Active Organizations". */
     activeOrganizations?: string;
+    /** Heading of the invitations section. Default "Invited Organizations". */
     invitedOrganizations?: string;
+    /** Link on a non-default active card that calls `onSetDefault`. Default "Set as Default". */
     setAsDefault?: string;
+    /** Text beside the spinner while the card's id is in `switchingOrgIds`. Default "Setting...". */
     settingDefault?: string;
+    /** Badge on the card where `default` is 1. Default "Default". */
     default?: string;
+    /** Tag shown when `isOwner` is true. Default "Owner". */
     owner?: string;
+    /** Badge on invited cards. Default "Pending". */
     pending?: string;
+    /** Accept button on invited cards. Default "Accept". */
     accept?: string;
+    /** Accept button text while the id is in `respondingOrgIds`. Default "Accepting...". */
     accepting?: string;
+    /** Decline button on invited cards. Default "Decline". */
     decline?: string;
+    /** Accessible name of the delete icon, and its tooltip on an unprotected card. Default "Delete Organization". */
     deleteOrganization?: string;
+    /** Tooltip on a disabled delete icon when `deleteDisabledReason` is not set. Default "Protected organization". */
     protectedOrganization?: string;
+    /** Confirm button in the delete modal. Default "Delete". */
     delete?: string;
+    /** Accessible name and tooltip of the rename pencil. Default "Edit organization name". */
     editOrganization?: string;
+    /** Accessible name of the inline rename save button. Default "Save". */
     save?: string;
+    /** Not rendered by the current UI. */
     saving?: string;
+    /** Error shown when a rename is saved blank. Default "Organization name cannot be empty". */
     emptyNameError?: string;
+    /** Empty-state title when there are no active or invited organizations. Default "No organizations found". */
     noOrganizationsTitle?: string;
+    /** Empty-state description under the title. */
     noOrganizationsDescription?: string;
+    /** Create form field label. Default "Company Name". */
     companyName?: string;
+    /** Create form field label. Default "Company Address". */
     companyAddress?: string;
+    /** Create form field label. Default "Phone". */
     phone?: string;
+    /** Cancel button in the create and delete modals and the rename cancel button. Default "Cancel". */
     cancel?: string;
+    /** Submit button of the create form. Default "Submit". */
     submit?: string;
+    /** Create form error for an empty required field. Default "This field is required". */
     requiredField?: string;
+    /** Create form error for a phone with fewer than 8 digits. */
     invalidPhone?: string;
+    /** Delete modal title. Default "Confirm Deletion". */
     confirmDeletion?: string;
+    /** Delete modal body question. */
     deleteConfirmText?: string;
+    /** Not rendered by the built-in UI; put footer text in `footerSlot`. */
     copyright?: string;
+    /** Not rendered by the built-in UI; put footer links in `footerSlot`. */
     termsOfService?: string;
 };
+/** Payload for the public onCreateOrganization callback — company_address/phone optional here, unlike CreateOrgFormValues. */
 export interface CreateOrganizationValues {
+    /** Organization name, trimmed; required by the built-in form. */
     company_name: string;
+    /** Address, trimmed; the built-in form requires it. */
     company_address?: string;
+    /** Trimmed phone; the built-in form requires 8 or more digits. */
     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 {
+    /** Organizations the user belongs to; each renders a card with rename, delete and set-default controls. */
     activeOrganizations: OrganizationItem[];
+    /** Pending invitations; each renders a card with Accept and Decline buttons. */
     invitedOrganizations: OrganizationItem[];
+    /** Replaces both sections with six skeleton cards while true. Defaults to false. */
     isLoading?: boolean;
+    /** Puts the create modal's submit button into its loading state. Defaults to false. */
     isCreating?: boolean;
     /** orgIds currently switching to default (shows a spinner on that card) */
     switchingOrgIds?: number[];
@@ -82,10 +138,15 @@ export interface OrganizationDetailsProps {
     respondingOrgIds?: number[];
     /** orgIds currently saving a renamed organization (shows a spinner on that card) */
     editingOrgIds?: number[];
+    /** Greets the signed-in user in the header and names their avatar; no avatar renders without it. */
     userName?: string;
+    /** Avatar photo; initials from `userName` show when it is missing or fails to load. */
     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>;
+    /** Fires with the invitation's orgId on Decline; the button has no built-in loading state. */
     onDeclineInvite?: (orgId: number) => void | Promise<void>;
     /**
      * Called once the built-in confirm modal is accepted. Never called when
@@ -98,13 +159,18 @@ 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;
+    /** Rendered below the sections, above the modals; use it for copyright or terms links. */
     footerSlot?: ReactNode;
+    /** Partial copy overrides; unset keys keep the English defaults. */
     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 +178,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/PageHeader/PageHeader.d.ts

@@ -0,0 +1,4 @@
+import type { PageHeaderProps } from "./PageHeaderProps";
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+declare const PageHeader: ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize, actionsLayout, "data-testid": testId, ...rest }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default PageHeader;