pixelize-design-library 2.3.31 → 2.4.1-beta.10

package/dist/Components/Toaster/Toaster.js

@@ -26,7 +26,7 @@ const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
  * action without the toast vanishing mid-reach.
  */
 function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, shadowLg, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     const [paused, setPaused] = (0, react_1.useState)(false);
     const solid = (_d = (_b = (_a = meta.scale) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = c === null || c === void 0 ? void 0 : c.gray) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : "#718096";
     const soft = (_h = (_f = (_e = meta.scale) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : (_g = c === null || c === void 0 ? void 0 : c.gray) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#f7fafc";
@@ -47,15 +47,18 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         // by frame (that double-drive is what caused the ~200ms entry flicker). A
         // tween (not spring) lands on an exact end transform, so there's no residual
         // sub-pixel settle to shimmer.
-        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: (_o = c === null || c === void 0 ? void 0 : c.white) !== null && _o !== void 0 ? _o : "#fff", border: `0.063rem solid ${(_s = (_q = (_p = c === null || c === void 0 ? void 0 : c.boxborder) === null || _p === void 0 ? void 0 : _p[300]) !== null && _q !== void 0 ? _q : (_r = c === null || c === void 0 ? void 0 : c.gray) === null || _r === void 0 ? void 0 : _r[200]) !== null && _s !== void 0 ? _s : "#e2e8f0"}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "0.875rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
+        // Surface token, not `colors.white`: `white` is a foreground token and stays
+        // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
+        bg: (_p = (_o = c === null || c === void 0 ? void 0 : c.background) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#fff", border: `0.063rem solid ${(_t = (_r = (_q = c === null || c === void 0 ? void 0 : c.boxborder) === null || _q === void 0 ? void 0 : _q[300]) !== null && _r !== void 0 ? _r : (_s = c === null || c === void 0 ? void 0 : c.gray) === null || _s === void 0 ? void 0 : _s[200]) !== null && _t !== void 0 ? _t : "#e2e8f0"}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "0.875rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
             transition: "box-shadow 0.18s ease",
             _hover: { boxShadow: "xl" },
         }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent, sx: {
                             ["--toast-pulse-color"]: ringTint,
                             animation: `${iconPulse} 900ms ease-out 1`,
-                        }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_w = (_u = (_t = c === null || c === void 0 ? void 0 : c.text) === null || _t === void 0 ? void 0 : _t[800]) !== null && _u !== void 0 ? _u : (_v = c === null || c === void 0 ? void 0 : c.gray) === null || _v === void 0 ? void 0 : _v[800]) !== null && _w !== void 0 ? _w : "#2d3748", children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_0 = (_y = (_x = c === null || c === void 0 ? void 0 : c.gray) === null || _x === void 0 ? void 0 : _x[600]) !== null && _y !== void 0 ? _y : (_z = c === null || c === void 0 ? void 0 : c.text) === null || _z === void 0 ? void 0 : _z[600]) !== null && _0 !== void 0 ? _0 : "#718096", mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_2 = (_1 = c === null || c === void 0 ? void 0 : c.gray) === null || _1 === void 0 ? void 0 : _1[400]) !== null && _2 !== void 0 ? _2 : "#a0aec0", borderRadius: "md", alignSelf: "flex-start", _hover: {
-                            bg: (_4 = (_3 = c === null || c === void 0 ? void 0 : c.gray) === null || _3 === void 0 ? void 0 : _3[100]) !== null && _4 !== void 0 ? _4 : "#edf2f7",
-                            color: (_6 = (_5 = c === null || c === void 0 ? void 0 : c.gray) === null || _5 === void 0 ? void 0 : _5[700]) !== null && _6 !== void 0 ? _6 : "#4a5568",
+                        }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_x = (_v = (_u = c === null || c === void 0 ? void 0 : c.text) === null || _u === void 0 ? void 0 : _u[800]) !== null && _v !== void 0 ? _v : (_w = c === null || c === void 0 ? void 0 : c.gray) === null || _w === void 0 ? void 0 : _w[800]) !== null && _x !== void 0 ? _x : "#2d3748", children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_1 = (_z = (_y = c === null || c === void 0 ? void 0 : c.gray) === null || _y === void 0 ? void 0 : _y[600]) !== null && _z !== void 0 ? _z : (_0 = c === null || c === void 0 ? void 0 : c.text) === null || _0 === void 0 ? void 0 : _0[600]) !== null && _1 !== void 0 ? _1 : "#718096", mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_3 = (_2 = c === null || c === void 0 ? void 0 : c.gray) === null || _2 === void 0 ? void 0 : _2[400]) !== null && _3 !== void 0 ? _3 : "#a0aec0", borderRadius: "md", alignSelf: "flex-start", _hover: {
+                            bg: (_5 = (_4 = c === null || c === void 0 ? void 0 : c.gray) === null || _4 === void 0 ? void 0 : _4[100]) !== null && _5 !== void 0 ? _5 : "#edf2f7",
+                            color: (_7 = (_6 = c === null || c === void 0 ? void 0 : c.gray) === null || _6 === void 0 ? void 0 : _6[700]) !== null && _7 !== void 0 ? _7 : "#4a5568",
                         } }))] }), showProgress && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, opacity: 0.85, transformOrigin: "left", sx: {
                     animation: `${shrink} ${duration}ms linear forwards`,
                     animationPlayState: paused ? "paused" : "running",

package/dist/Components/Toggle/TableToggle.js

@@ -24,7 +24,7 @@ const TableToggle = ({ value, onChange }) => {
         button: (mode) => ({
             bg: value === mode ? theme.colors.background[50] : "transparent",
             boxShadow: value === mode ? "md" : "none",
-            color: value === mode ? theme.colors.black : theme.colors.background[800],
+            color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
             borderRadius: "0.313rem",
             height: "1.75rem",
             border: "0.031rem solid",
@@ -34,7 +34,7 @@ const TableToggle = ({ value, onChange }) => {
                 bg: value === mode
                     ? theme.colors.background[50]
                     : theme.colors.background[400],
-                color: value === mode ? theme.colors.black : theme.colors.background[900],
+                color: value === mode ? theme.colors.text[900] : theme.colors.background[900],
             },
             transition: "all 0.3s ease-in-out",
         }),

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

@@ -1 +1 @@
-{"version":3,"file":"ToolTip.d.ts","sourceRoot":"","sources":["../../../src/Components/ToolTip/ToolTip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAI9C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,SAAiB,EACjB,KAAK,EACL,QAAQ,EACR,QAAe,EACf,QAAiB,EACjB,EAAc,EACd,KAAe,EACf,UAAU,EACV,YAAoB,EACpB,MAAM,EACN,aAAa,EACb,SAAa,EACb,UAAc,EACd,SAAc,EACd,YAAoB,EACpB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,MAAU,EACV,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,MAAM,GACP,EAAE,YAAY,2CA4Dd"}
+{"version":3,"file":"ToolTip.d.ts","sourceRoot":"","sources":["../../../src/Components/ToolTip/ToolTip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAU9C,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,SAAiB,EACjB,KAAK,EACL,QAAQ,EACR,QAAe,EACf,QAAiB,EACjB,EAAE,EACF,KAAe,EACf,UAAU,EACV,YAAoB,EACpB,MAAM,EACN,aAAa,EACb,SAAa,EACb,UAAc,EACd,SAAc,EACd,YAAoB,EACpB,IAAI,EACJ,KAAK,EACL,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,MAAU,EACV,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,MAAM,GACP,EAAE,YAAY,2CAmEd"}

package/dist/Components/ToolTip/ToolTip.js

@@ -6,12 +6,24 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const mergeRefs_1 = require("../../Utils/mergeRefs");
-function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg = "#12161B", color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+// Surface used when no Pixelize palette is in context — a bare `ChakraProvider`, or no
+// provider at all (Chakra's `useTheme()` yields `{}` there rather than throwing). Keeps
+// tooltips outside the Pixelize theme rendering exactly as they did before theming.
+const FALLBACK_SURFACE = "#12161B";
+function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+    var _a, _b, _c, _d;
     // Measure the child for `overflowOnly`. The hook is always called (Rules of
     // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
     // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
     // runs on hover/scroll, so showing the tooltip stays as cheap as before.
     const { ref, isTruncated } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
+    // A tooltip is an INVERTED surface: near-black under a light canvas, carrying a white
+    // label. `sidebar.background` is the only ramp `buildDarkPalette` deliberately leaves
+    // un-inverted, so it stays near-black in dark mode and the white label stays legible —
+    // every other surface ramp flips light and would render the label invisible.
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const surface = (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : FALLBACK_SURFACE;
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && (0, react_1.isValidElement)(children)) {
@@ -22,5 +34,5 @@ function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize
         });
         effectiveDisabled = Boolean(isDisabled) || !isTruncated;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "8px", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg !== null && bg !== void 0 ? bg : surface, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "8px", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
 }

package/dist/Components/Trail/EditableCell.js

@@ -20,7 +20,7 @@ const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChan
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "50%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
         }
         else if (column.label === "priority") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: "teal.500", color: "white", _hover: { bg: "teal.600" }, _active: { bg: "teal.700" }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: "teal.100" }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: "teal.100" }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: "teal.100" }, children: "High" })] })] }) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: "teal.50", color: "teal.900", _hover: { bg: "teal.100" }, _active: { bg: "teal.200" }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: "teal.100" }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: "teal.100" }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: "teal.100" }, children: "High" })] })] }) }));
         }
         else {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"UpgradeButton.d.ts","sourceRoot":"","sources":["../../../src/Components/UpgradeButton/UpgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EACL,kBAAkB,EAGnB,MAAM,sBAAsB,CAAC;AAa9B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsJ/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"UpgradeButton.d.ts","sourceRoot":"","sources":["../../../src/Components/UpgradeButton/UpgradeButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EACL,kBAAkB,EAGnB,MAAM,sBAAsB,CAAC;AAgB9B,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAyK/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -4,34 +4,57 @@ 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 color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
+const ACCENT_GOLD = "#FFD66B";
 const sizeMap = {
-    sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
+    // Compact, not tiny: an 8px subtitle was unreadable, so `sm` sits deliberately
+    // close to `md` — it's the dense variant of the same badge, not a smaller one.
+    sm: { px: "14px", py: "4px", font: "13px", sub: "9px", icon: 12, radius: "44px" },
     md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
     lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
 };
-const FALLBACK_GRADIENT = { from: "#667eea", to: "#764ba2" };
-const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor = "#FFD66B", variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
+const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
-    const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : FALLBACK_GRADIENT;
+    // Only reachable if a consumer hand-builds a palette without `gradient`; every shipped brand sets it.
+    const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : { from: c.primary[500], to: c.primary[700] };
+    // `primary`/`secondary` at [500]->[700] / [400]->[600] sit in the mid-luminance band where
+    // neither white nor black ink clears AA at both ends at once (measured worst-case as low as
+    // 2.72:1 across brands — no ink choice fixes a gradient with no readable ink at all). One rung
+    // darker moves both stops onto the same side of that divide; verified universally >=4.5 at
+    // both ends across all 9 brands x both modes. `success`/`warning`/`danger`/`info` already sit
+    // there at [400]->[600] and don't need the shift.
     const variantGradient = {
         brand: themeGradient,
-        primary: { from: c.primary[500], to: c.primary[700] },
-        secondary: { from: c.secondary[400], to: c.secondary[600] },
+        primary: { from: c.primary[600], to: c.primary[800] },
+        secondary: { from: c.secondary[600], to: c.secondary[800] },
         success: { from: c.semantic.success[400], to: c.semantic.success[600] },
         warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
         info: { from: c.semantic.info[400], to: c.semantic.info[600] },
     };
     const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
+    // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
+    // across brands) — the label/subtitle share this computed ink instead.
+    const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    // The gold only clears 1.4.11's 3:1 on a DARK gradient. zinc dark inverts `primary` to a
+    // near-white fill, where gold-on-near-white measures ~1.3:1 and the icon vanishes, so fall
+    // back to the label's ink whenever the gold misses either stop.
+    const resolvedIconColor = iconColor !== null && iconColor !== void 0 ? iconColor : ((0, color_1.contrastRatio)(ACCENT_GOLD, resolved.from) >= outlineRung_1.AA_NON_TEXT &&
+        (0, color_1.contrastRatio)(ACCENT_GOLD, resolved.to) >= outlineRung_1.AA_NON_TEXT
+        ? ACCENT_GOLD
+        : ink);
     const s = sizeMap[size];
     const Icon = icon;
     const blocked = isLoading || isDisabled;
     const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
     const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: `0 0 0 3px ${resolved.from}55` }, _hover: blocked
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: `0 0 0 3px ${resolved.from}55` }, _hover: blocked
             ? undefined
             : {
                 transform: "translateY(-2px)",
@@ -53,6 +76,6 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
                     pointerEvents: "none",
                 },
             }
-            : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: iconColor, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 exports.default = UpgradeButton;

package/dist/Components/UserDetails/AddUserModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddUserModal.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/AddUserModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAiBnD,OAAO,EAEL,iBAAiB,EAElB,MAAM,oBAAoB,CAAC;AAa5B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2K7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AddUserModal.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/AddUserModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAiBnD,OAAO,EAEL,iBAAiB,EAElB,MAAM,oBAAoB,CAAC;AAa5B,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+K7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/UserDetails/AddUserModal.js

@@ -80,7 +80,7 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, 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.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: (_d = values.role) !== null && _d !== void 0 ? _d : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -11,7 +11,7 @@ const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
 const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOptions, isLoading, onSubmit, onAddRoleClick, labels, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [selectedRole, setSelectedRole] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -36,7 +36,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/DeactivateConfirmModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeactivateConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/DeactivateConfirmModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAEjE,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA2EjE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"DeactivateConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/DeactivateConfirmModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AAEjE,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA6EjE,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -9,8 +9,11 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_h = (_f = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _d === void 0 ? void 0 : _d.error) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#FEF2F2", color: (_o = (_l = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _j === void 0 ? void 0 : _j.error) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[500]) !== null && _o !== void 0 ? _o : "#EF4444", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[800], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: (_r = (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[50]) !== null && _r !== void 0 ? _r : "#F8FAFC", borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_t = (_s = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _s === void 0 ? void 0 : _s[200]) !== null && _t !== void 0 ? _t : (_u = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _u === void 0 ? void 0 : _u[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[600], fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", 
+                                // `red` reverses in dark (50 → deep red); `semantic.error` does not, so it would
+                                // leave this disc pale pink on a near-black modal. Identical values in light.
+                                bg: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#EF4444", children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : "#F8FAFC", borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _m === void 0 ? void 0 : _m[200]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
 };
 exports.default = DeactivateConfirmModal;

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

@@ -1 +1 @@
-{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAiCjD,OAAO,EAEL,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6gB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/UserDetails/UserDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAmCjD,OAAO,EAEL,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAyC5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwhB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/UserDetails/UserDetails.js

@@ -41,6 +41,8 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
 const ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
@@ -83,7 +85,7 @@ const DEFAULT_LABELS = {
     deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
 };
 const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], canManageUsers = false, isUsersLoading = false, isInviteLoading = false, isDeactivateLoading = false, isAddUserLoading = false, isChangeRoleLoading = false, onSelectUser, onRefresh, onBack, onAddUserSubmit, onChangeRoleSubmit, onReinvite, onDeactivate, onAddRoleClick, addUserUpgradeNotice, labels: labelOverrides, minHeight = "90vh", }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
     const { isOpen: isAddUserOpen, onOpen: onAddUserOpen, onClose: onAddUserClose, } = (0, react_2.useDisclosure)();
@@ -91,9 +93,15 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const { isOpen: isConfirmOpen, onOpen: onConfirmOpen, onClose: onConfirmClose, } = (0, react_2.useDisclosure)();
     const [actionUserId, setActionUserId] = (0, react_1.useState)(null);
     const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
-    const surface = (_e = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _e !== void 0 ? _e : "#FFFFFF";
-    const muted = (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500]) !== null && _g !== void 0 ? _g : "#64748B";
-    const heading = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : "#1E293B";
+    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    const heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    const avatarBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[100]) !== null && _m !== void 0 ? _m : "#E0E7FF";
+    // Picked dynamically against `avatarBg` rather than a fixed [600] rung — a fixed rung falls
+    // short of AA (4.27) for some brands' primary scale in dark mode.
+    const avatarColor = (colors === null || colors === void 0 ? void 0 : colors.primary)
+        ? (0, accentText_1.accentTextOnCanvas)(colors.primary, avatarBg)
+        : "#4F46E5";
     const successScheme = "green";
     const dangerScheme = "red";
     const handleDeactivateConfirm = () => {
@@ -102,15 +110,15 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
         onConfirmClose();
     };
     const renderStatusBadge = (isActive) => ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, textTransform: "none", children: isActive ? labels.active : labels.inactive }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : "#F8FAFC", minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.refreshList, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "9" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#F8FAFC", minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.refreshList, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "9" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
+                                var _a, _b, _c, _d, _e, _f, _g, _h;
                                 const isSelected = selectedUserId != null && selectedUserId === user.id;
                                 return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#EEF2FF" : "transparent", _hover: {
                                         background: isSelected
                                             ? (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#EEF2FF"
                                             : (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#F8FAFC",
-                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#6366F1" })), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[100]) !== null && _k !== void 0 ? _k : "#E0E7FF", color: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : "#4F46E5" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: muted, noOfLines: 1, children: user.email })] }), renderStatusBadge(user.isActive)] }, user.id));
-                            }) })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", children: isUsersLoading ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, p: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "16" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _m === void 0 ? void 0 : _m[100]) !== null && _o !== void 0 ? _o : "#E0E7FF", color: (_q = (_p = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "#4F46E5" }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
+                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#6366F1" })), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: avatarBg, color: avatarColor }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: muted, noOfLines: 1, children: user.email })] }), renderStatusBadge(user.isActive)] }, user.id));
+                            }) })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", children: isUsersLoading ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, p: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "16" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: avatarBg, color: avatarColor }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
                                                         (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { size: 13 }), onClick: () => {
                                                         if (selectedUser.userId != null) {
@@ -123,9 +131,11 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                             onConfirmOpen();
                                                         }
                                                     }, children: labels.deactivateUser }))] }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3, children: labels.personalInformation }), (0, jsx_runtime_1.jsx)(react_2.Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: selectedUser.details.map((detail, index) => {
-                                                var _a, _b, _c, _d, _e, _f, _g;
+                                                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
-                                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: { bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC" }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#EEF2FF", borderRadius: "lg", color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4F46E5", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                                return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
+                                                                bg: (0, outlineRung_1.resolveHoverTint)((_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC", (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#ffffff"),
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#EEF2FF", borderRadius: "lg", color: (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : "#4F46E5", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceTrayPreview.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceTrayPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAcxE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,OAAO,EACP,OAAc,EACd,WAAiB,EACjB,YAAkB,EAClB,SAAqB,EACrB,YAAY,EACZ,KAAe,EACf,MAAiC,GAClC,EAAE,yBAAyB,2CAuG3B"}
+{"version":3,"file":"WorkspaceTrayPreview.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceTrayPreview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAgBxE;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,OAAO,EACP,OAAc,EACd,WAAiB,EACjB,YAAkB,EAClB,SAAqB,EACrB,YAAY,EACZ,KAAe,EACf,MAAiC,GAClC,EAAE,yBAAyB,2CAwG3B"}

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -4,6 +4,7 @@ exports.default = WorkspaceTrayPreview;
 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 PLACEMENT_STYLE = {
     "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
     "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
@@ -24,6 +25,8 @@ const PLACEMENT_STYLE = {
  * `onOpenChange`.
  */
 function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [open, setOpen] = (0, react_1.useState)(false);
     const openTimer = (0, react_1.useRef)(null);
     const closeTimer = (0, react_1.useRef)(null);
@@ -77,7 +80,7 @@ function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs =
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: "white", borderWidth: "1px", borderColor: "gray.200", borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: "gray.800", cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
+        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.background[50], borderWidth: "1px", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : theme.colors.gray[200], borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts

@@ -6,10 +6,10 @@ import type { WorkspaceTrayProps, WorkspaceWindowProps } from "./WorkspaceWindow
  * management: the parent owns the window state and passes callbacks. Render
  * minimized windows with the companion WorkspaceTray.
  */
-export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
+export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
 /**
  * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
  * the parent supplies the minimized items and restore/close handlers.
  */
-export declare function WorkspaceTray({ items, onRestore, onClose, testId, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function WorkspaceTray({ items, onRestore, onClose, testId, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=WorkspaceWindow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceWindow.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindow.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,wBAAwB,CAAC;AAOhC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,cAAc,EACd,aAAa,EACb,MAA2B,GAC5B,EAAE,oBAAoB,kDAqGtB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAyB,GAC1B,EAAE,kBAAkB,kDAkEpB"}
+{"version":3,"file":"WorkspaceWindow.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindow.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,wBAAwB,CAAC;AAOhC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,EACb,MAA2B,GAC5B,EAAE,oBAAoB,kDAkHtB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAyB,EACzB,UAAU,GACX,EAAE,kBAAkB,kDA6EpB"}

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -5,6 +5,7 @@ exports.WorkspaceTray = WorkspaceTray;
 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");
 // One in-between windowed size — wider than a cramped dialog but not near-full
 // screen. There is no maximize/restore toggle (removed by product decision); the
 // `onMedium`/`onMaximize` props are kept optional for back-compat but unused.
@@ -16,25 +17,49 @@ const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
  * management: the parent owns the window state and passes callbacks. Render
  * minimized windows with the companion WorkspaceTray.
  */
-function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, headerActions, testId = "workspace-window", }) {
+function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+    var _a, _b, _c, _d, _e, _f;
+    // Must run before the early return: a minimized render would otherwise skip the hook
+    // and change hook order when the window reopens.
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (state === "minimized")
         return null;
     const size = WINDOW_SIZE;
     return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
         // Don't discard unsaved work on an accidental overlay click / Esc — the
         // parent decides via the explicit Close control.
-        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: "white", borderRadius: "0.75rem", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: "gray.100", bg: "gray.50", flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: "gray.700", noOfLines: 1, "data-testid": `${testId}-title`, children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
+                // With size="full" the transparent ModalContent covers the whole
+                // viewport, so Chakra's own closeOnOverlayClick never fires (the
+                // ModalOverlay sits behind it). Detect "clicked the blurred area
+                // around the window" ourselves: only when the click lands on this
+                // wrapper, not on the window Box or its children.
+                onMouseDown: (e) => {
+                    if (e.target === e.currentTarget)
+                        onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
+                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "0.75rem", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : theme.colors.gray[100], bg: (_d = (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : theme.colors.gray[50], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: (_f = (_e = theme.colors.text) === null || _e === void 0 ? void 0 : _e[700]) !== null && _f !== void 0 ? _f : theme.colors.gray[700], noOfLines: 1, "data-testid": `${testId}-title`, children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 /**
  * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
  * the parent supplies the minimized items and restore/close handlers.
  */
-function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", }) {
+function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!items.length)
         return null;
     return (
     // Floating bottom-right cluster (Gmail/Jira minimized-window pattern) rather
     // than a full-width docked bar, so it never covers the bottom strip of page
     // content and needs no reserved page gutter. Pills wrap upward.
-    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: 1400, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: "blue.100", color: "blue.700", boxShadow: "md", borderWidth: "1px", borderColor: "blue.200", "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id), "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: () => onClose(item.id), "data-testid": `${testId}-close` })) : null] }, item.id))) }));
+    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: 1400, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
+            var _a, _b, _c, _d, _e, _f;
+            const api = {
+                restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
+                close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
+            };
+            if (renderItem) {
+                return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
+            }
+            return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "blue.100", color: (_d = (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : "blue.700", boxShadow: "md", borderWidth: "1px", borderColor: (_f = (_e = theme.colors.primary) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : "blue.200", "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+        }) }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -19,6 +19,13 @@ export interface WorkspaceWindowProps {
     onClose?: () => void;
     /** Optional "pop out to full page" affordance; hidden when omitted. */
     onOpenFullPage?: () => void;
+    /**
+     * Fires when the blurred area around the window is clicked. With
+     * `size="full"` the transparent ModalContent covers the whole viewport, so
+     * Chakra's own `closeOnOverlayClick` never fires — the parent handles this
+     * itself (e.g. minimize-on-backdrop-click) via this callback.
+     */
+    onOverlayClick?: () => void;
     /** Extra controls rendered in the control bar, left of the window buttons. */
     headerActions?: ReactNode;
     /** data-testid for the window container. */
@@ -34,6 +41,17 @@ export interface WorkspaceTrayProps {
     onRestore?: (id: string) => void;
     onClose?: (id: string) => void;
     testId?: string;
+    /**
+     * Full override for a single item's pill markup — e.g. to wrap it in an
+     * app-specific hover preview, or to show extra state (a dirty dot) the
+     * generic pill doesn't know about. Receives the item plus ready-bound
+     * restore/close callbacks; when provided, the built-in pill is skipped for
+     * that item and this renders in its place inside the same positioned tray.
+     */
+    renderItem?: (item: WorkspaceTrayItem, api: {
+        restore: () => void;
+        close: () => void;
+    }) => ReactNode;
 }
 export interface WorkspaceTrayPreviewProps {
     /**