pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Components/Toaster/Toaster.js

@@ -8,6 +8,9 @@ const react_2 = require("@chakra-ui/react");
 const react_3 = require("@emotion/react");
 const framer_motion_1 = require("framer-motion");
 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 ToasterContext = (0, react_1.createContext)(undefined);
 const shrink = (0, react_3.keyframes) `
   from { transform: scaleX(1); }
@@ -26,12 +29,9 @@ 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, _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";
-    const accent = (_k = (_j = meta.scale) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : solid;
-    const ringTint = (_m = (_l = meta.scale) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : soft;
+    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
+    const tone = (0, statusTone_1.resolveStatusTone)(meta.scale, mode);
     const showProgress = typeof duration === "number" && duration > 0;
     return ((0, jsx_runtime_1.jsxs)(MotionBox
     // Refined entrance — slides in from the right and settles, never a hard pop.
@@ -50,62 +50,69 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         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: {
+        bg: c.background[50], border: `0.063rem solid ${c.boxborder[300]}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "2xl", 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,
+        }, 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: tone.bg, color: tone.fg, sx: {
+                            ["--toast-pulse-color"]: tone.border,
                             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: (_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: {
+                        }, 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: c.text[800], children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, 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: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
+                            bg: c.gray[100],
+                            color: c.text[700],
+                        } }))] }), showProgress && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: meta.ink, opacity: 0.85, transformOrigin: "left", sx: {
                     animation: `${shrink} ${duration}ms linear forwards`,
                     animationPlayState: paused ? "paused" : "running",
                 } }))] }));
 }
 function ToasterProvider({ children }) {
-    var _a;
     const toast = (0, react_2.useToast)();
-    const theme = (0, react_2.useTheme)();
-    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
-    const showToast = ({ title, description, status = "info", duration = 5000, isClosable = true, position = "top-right", onClose, actions, }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        const statusConfig = {
-            success: {
-                scale: (_b = (_a = c.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : c.green,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 18 }),
-            },
-            error: {
-                scale: (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : c.red,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.XCircle, { size: 18 }),
-            },
-            warning: {
-                scale: (_g = (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.warning) !== null && _f !== void 0 ? _f : c.yellow) !== null && _g !== void 0 ? _g : c.orange,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }),
-            },
-            info: {
-                scale: (_j = (_h = c.semantic) === null || _h === void 0 ? void 0 : _h.info) !== null && _j !== void 0 ? _j : c.blue,
-                icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 18 }),
-            },
-            loading: {
-                scale: ((_k = c.primary) !== null && _k !== void 0 ? _k : c.gray),
-                icon: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
-            },
-        };
-        const meta = (_l = statusConfig[status]) !== null && _l !== void 0 ? _l : statusConfig.info;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const colors = theme.colors;
+    const shadowLg = theme.shadows.lg;
+    // Dark mode swaps the palette object, so this must re-derive per mode.
+    const statusConfig = (0, react_1.useMemo)(() => ({
+        success: {
+            scale: colors.semantic.success,
+            ink: colors.semanticText.success,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 18 }),
+        },
+        error: {
+            scale: colors.semantic.error,
+            ink: colors.semanticText.error,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.XCircle, { size: 18 }),
+        },
+        warning: {
+            scale: colors.semantic.warning,
+            ink: colors.semanticText.warning,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }),
+        },
+        info: {
+            scale: colors.semantic.info,
+            ink: colors.semanticText.info,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { size: 18 }),
+        },
+        loading: {
+            scale: colors.primary,
+            ink: colors.accentText,
+            icon: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
+        },
+    }), [colors]);
+    const showToast = (0, react_1.useCallback)(({ title, description, status = "info", duration = 5000, isClosable = true, position = "top-right", onClose, actions, }) => {
+        var _a;
+        const meta = (_a = statusConfig[status]) !== null && _a !== void 0 ? _a : statusConfig.info;
         toast({
             duration,
             isClosable,
             position,
             onCloseComplete: onClose,
-            render: ({ onClose }) => {
-                var _a;
-                return ((0, jsx_runtime_1.jsx)(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: c, shadowLg: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg }));
-            },
+            render: ({ onClose }) => ((0, jsx_runtime_1.jsx)(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: colors, shadowLg: shadowLg })),
         });
-    };
-    return ((0, jsx_runtime_1.jsx)(ToasterContext.Provider, { value: { showToast }, children: children }));
+    }, [toast, statusConfig, colors, shadowLg]);
+    // Memoized because this provider wraps the whole app: an unstable value re-renders every
+    // `useToaster()` consumer (92 files in crm-frontend) on each provider render, defeating the
+    // stable-children bail-out the consuming apps rely on.
+    const value = (0, react_1.useMemo)(() => ({ showToast }), [showToast]);
+    return ((0, jsx_runtime_1.jsx)(ToasterContext.Provider, { value: value, children: children }));
 }
 const useToaster = () => {
     const context = (0, react_1.useContext)(ToasterContext);

package/dist/Components/Toaster/ToasterProps.d.ts

@@ -17,4 +17,3 @@ export interface ToasterContextType {
 export interface ToasterChildren {
     children: ReactNode;
 }
-//# sourceMappingURL=ToasterProps.d.ts.map

package/dist/Components/Toggle/TableToggle.d.ts

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

package/dist/Components/Toggle/TableToggle.js

@@ -16,7 +16,7 @@ const TableToggle = ({ value, onChange }) => {
             alignItems: "center",
             bg: theme.colors.background[600],
             p: "0.125rem",
-            borderRadius: "0.375rem",
+            borderRadius: "md",
             height: "2rem",
             gap: "0.125rem",
             width: "6.3rem",
@@ -25,7 +25,7 @@ const TableToggle = ({ value, onChange }) => {
             bg: value === mode ? theme.colors.background[50] : "transparent",
             boxShadow: value === mode ? "md" : "none",
             color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
-            borderRadius: "0.313rem",
+            borderRadius: "base",
             height: "1.75rem",
             border: "0.031rem solid",
             borderColor: value === mode ? theme.colors.background[400] : "transparent",

package/dist/Components/Toggle/TableToggleProps.d.ts

@@ -3,4 +3,3 @@ export type ViewToggleProps = {
     value: ViewMode;
     onChange: (val: ViewMode) => void;
 };
-//# sourceMappingURL=TableToggleProps.d.ts.map

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

@@ -15,4 +15,3 @@ import { ToolTipProps } from "./ToolTipProps";
  * </OverflowToolTip>
  */
 export default function OverflowToolTip(props: ToolTipProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=OverflowToolTip.d.ts.map

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

@@ -1,3 +1,2 @@
 import { ToolTipProps } from "./ToolTipProps";
 export default function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, overflowOnly, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown, styles, }: ToolTipProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ToolTip.d.ts.map

package/dist/Components/ToolTip/ToolTip.js

@@ -7,12 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const useIsTruncated_1 = require("../../Hooks/useIsTruncated");
 const mergeRefs_1 = require("../../Utils/mergeRefs");
 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
@@ -23,7 +18,7 @@ function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize
     // 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;
+    const surface = theme.colors.sidebar.background[500];
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && (0, react_1.isValidElement)(children)) {
@@ -34,5 +29,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 !== 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 }));
+    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: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
 }

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

@@ -13,4 +13,3 @@ export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow
     overflowOnly?: boolean;
     placement?: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
 };
-//# sourceMappingURL=ToolTipProps.d.ts.map

package/dist/Components/Trail/EditableCell.d.ts

@@ -9,4 +9,3 @@ interface EditableCellProps {
 }
 export declare const EditableCell: React.FC<EditableCellProps>;
 export {};
-//# sourceMappingURL=EditableCell.d.ts.map

package/dist/Components/Trail/EditableCell.js

@@ -5,7 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const cellRef = (0, react_1.useRef)(null);
     (0, react_2.useOutsideClick)({
         ref: cellRef,
@@ -20,7 +23,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.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" })] })] }) }));
+            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: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.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: colors.teal[100] }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.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/Trail/SelectAllCheckbox.d.ts

@@ -6,4 +6,3 @@ interface SelectAllCheckboxProps {
 }
 export declare const SelectAllCheckbox: React.FC<SelectAllCheckboxProps>;
 export {};
-//# sourceMappingURL=SelectAllCheckbox.d.ts.map

package/dist/Components/Trail/TrailWorks.d.ts

@@ -1,3 +1,2 @@
 declare const TrailWorks: () => import("react/jsx-runtime").JSX.Element;
 export default TrailWorks;
-//# sourceMappingURL=TrailWorks.d.ts.map

package/dist/Components/Trail/TrailWorks.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const TrailWorks = () => {
-    var _a, _b, _c;
-    const theme = (0, react_1.useTheme)();
-    const cellBorder = (_b = (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const cellBorder = colors.border[500];
     const data = [
         {
             contact: "John Doe",

package/dist/Components/Trail/data.d.ts

@@ -13,4 +13,3 @@ export type Column = {
 };
 export declare const initialColumns: Column[];
 export declare const initialRows: Row[];
-//# sourceMappingURL=data.d.ts.map

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

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

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -5,31 +5,47 @@ 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" },
-    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" },
+    // 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: "full" },
+    md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "full" },
+    lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "full" },
 };
-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, }) => {
-    var _a, _b;
+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, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;
-    // 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] };
+    const themeGradient = c.gradient;
+    // `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;
+    const resolved = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant];
     // `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. The icon/spinner keep
-    // `iconColor` since non-text UI only needs WCAG 1.4.11's 3:1, which the gold clears.
+    // 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;
@@ -58,6 +74,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: ink, 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/UpgradeButton/UpgradeButtonProps.d.ts

@@ -41,4 +41,3 @@ export interface UpgradeButtonProps {
     ariaLabel?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
-//# sourceMappingURL=UpgradeButtonProps.d.ts.map

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

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

package/dist/Components/UserDetails/AddUserModal.js

@@ -18,7 +18,7 @@ const emptyValues = {
     role: null,
 };
 const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAddRoleClick, upgradeNotice, labels, }) => {
-    var _a, _b, _c, _d;
+    var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [values, setValues] = (0, react_1.useState)(emptyValues);
     const [errors, setErrors] = (0, react_1.useState)({});
@@ -80,10 +80,10 @@ 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, { 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) => ({
+    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: colors.boxborder[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) => {
+                                        })), value: (_a = values.role) !== null && _a !== void 0 ? _a : undefined, onSelect: (option) => {
                                             if (!option) {
                                                 setValues((prev) => ({ ...prev, role: null }));
                                             }

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

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

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, _e;
+    var _a;
     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, { 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) => ({
+    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.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[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

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

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -7,13 +7,13 @@ 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 DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
-    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, { 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 }) })] })] }) })] })] }));
+    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.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: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.gray[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, 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

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