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

package/dist/Components/Toaster/Toaster.js

@@ -26,12 +26,12 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     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 solid = (_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];
+    const soft = (_e = (_d = meta.scale) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : (_f = c === null || c === void 0 ? void 0 : c.gray) === null || _f === void 0 ? void 0 : _f[50];
+    const accent = (_h = (_g = meta.scale) === null || _g === void 0 ? void 0 : _g[600]) !== null && _h !== void 0 ? _h : solid;
+    const ringTint = (_k = (_j = meta.scale) === null || _j === void 0 ? void 0 : _j[200]) !== null && _k !== void 0 ? _k : soft;
     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,15 +50,15 @@ 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: (_l = c === null || c === void 0 ? void 0 : c.background) === null || _l === void 0 ? void 0 : _l[50], border: `0.063rem solid ${(_o = (_m = c === null || c === void 0 ? void 0 : c.boxborder) === null || _m === void 0 ? void 0 : _m[300]) !== null && _o !== void 0 ? _o : (_p = c === null || c === void 0 ? void 0 : c.gray) === null || _p === void 0 ? void 0 : _p[200]}`, 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,
                             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",
+                        }, 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: (_r = (_q = c === null || c === void 0 ? void 0 : c.text) === null || _q === void 0 ? void 0 : _q[800]) !== null && _r !== void 0 ? _r : (_s = c === null || c === void 0 ? void 0 : c.gray) === null || _s === void 0 ? void 0 : _s[800], children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_u = (_t = c === null || c === void 0 ? void 0 : c.gray) === null || _t === void 0 ? void 0 : _t[600]) !== null && _u !== void 0 ? _u : (_v = c === null || c === void 0 ? void 0 : c.text) === null || _v === void 0 ? void 0 : _v[600], 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: (_w = c === null || c === void 0 ? void 0 : c.gray) === null || _w === void 0 ? void 0 : _w[400], borderRadius: "md", alignSelf: "flex-start", _hover: {
+                            bg: (_x = c === null || c === void 0 ? void 0 : c.gray) === null || _x === void 0 ? void 0 : _x[100],
+                            color: (_y = c === null || c === void 0 ? void 0 : c.gray) === null || _y === void 0 ? void 0 : _y[700],
                         } }))] }), 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",
@@ -68,10 +68,14 @@ 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 = {
+    const colors = theme.colors;
+    const shadowLg = (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg;
+    // Keyed off `theme.colors`, not the `?? {}` fallback: dark mode swaps the palette object, so
+    // this must re-derive per mode or a toast fired after a switch paints the old mode's colors.
+    const statusConfig = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const c = colors !== null && colors !== void 0 ? colors : {};
+        return {
             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 }),
@@ -93,19 +97,23 @@ function ToasterProvider({ children }) {
                 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;
+    }, [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 !== null && colors !== void 0 ? 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

@@ -34,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 !== 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/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/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

@@ -12,9 +12,9 @@ const ACCENT_GOLD = "#FFD66B";
 const sizeMap = {
     // 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" },
+    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, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
     var _a, _b;

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/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/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

@@ -9,11 +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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     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 }) })] })] }) })] })] }));
+                                bg: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50], color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.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: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[800], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _j === void 0 ? void 0 : _j[200]) !== null && _k !== void 0 ? _k : (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[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

@@ -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

package/dist/Components/UserDetails/UserDetails.js

@@ -85,23 +85,21 @@ 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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)();
     const { isOpen: isChangeRoleOpen, onOpen: onChangeRoleOpen, onClose: onChangeRoleClose, } = (0, react_2.useDisclosure)();
     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 = (_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";
+    const border = (_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];
+    const surface = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50];
+    const muted = (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500];
+    const heading = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[800];
+    const avatarBg = (_g = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _g === void 0 ? void 0 : _g[100];
     // 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 avatarColor = (0, accentText_1.accentTextOnCanvas)(colors === null || colors === void 0 ? void 0 : colors.primary, avatarBg !== null && avatarBg !== void 0 ? avatarBg : accentText_1.DEFAULT_CANVAS);
     const successScheme = "green";
     const dangerScheme = "red";
     const handleDeactivateConfirm = () => {
@@ -110,15 +108,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: (_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;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[50], 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: "sm", 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;
                                 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: {
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50] : "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: 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 &&
+                                            ? (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[50]
+                                            : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[50],
+                                    }, 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: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] })), (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: "sm", 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) {
@@ -131,11 +129,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, _h, _j;
+                                                var _a, _b, _c, _d, _e;
                                                 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: (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));
+                                                                bg: (0, outlineRung_1.resolveHoverTint)((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50], (_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[50]),
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[50], borderRadius: "lg", color: (_e = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _e === void 0 ? void 0 : _e[600], 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/UserDetails/UserDetailsProps.d.ts

@@ -149,4 +149,3 @@ export interface DeactivateConfirmModalProps {
     onConfirm: () => void;
     labels: Required<Pick<UserDetailsLabels, "confirmDeactivation" | "deactivateConfirmQuestion" | "deactivateConfirmDescription" | "cancel" | "deactivateUser">>;
 }
-//# sourceMappingURL=UserDetailsProps.d.ts.map

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

@@ -13,4 +13,3 @@ import type { WorkspaceTrayPreviewProps } from "./WorkspaceWindowProps";
  * `onOpenChange`.
  */
 export default function WorkspaceTrayPreview({ children, preview, enabled, openDelayMs, closeDelayMs, placement, onOpenChange, width, testId, }: WorkspaceTrayPreviewProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=WorkspaceTrayPreview.d.ts.map

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

@@ -12,4 +12,3 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
  * the parent supplies the minimized items and restore/close handlers.
  */
 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.js

@@ -37,7 +37,7 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
                 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 })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "xl", 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 —

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

@@ -87,4 +87,3 @@ export interface WorkspaceTrayPreviewProps {
     /** data-testid for the floating card. */
     testId?: string;
 }
-//# sourceMappingURL=WorkspaceWindowProps.d.ts.map

package/dist/Constants/Sidebar.d.ts

@@ -38,4 +38,3 @@ export declare const cssForScrollBar: (theme: CustomThemeProps) => {
         scrollbarColor: string;
     };
 };
-//# sourceMappingURL=Sidebar.d.ts.map

package/dist/Hooks/useIsTruncated.d.ts

@@ -33,4 +33,3 @@ export declare function useIsTruncated<T extends HTMLElement = HTMLElement>(cont
     isTruncated: boolean;
 };
 export default useIsTruncated;
-//# sourceMappingURL=useIsTruncated.d.ts.map

package/dist/Hooks/usePreferences.d.ts

@@ -24,4 +24,3 @@ declare const useSavePreferences: ({ baseUrl, key, page, name, authToken, orgId,
     error: unknown;
 };
 export { useGetPreferences, useSavePreferences };
-//# sourceMappingURL=usePreferences.d.ts.map

package/dist/Hooks/usePreferences.js

@@ -21,7 +21,12 @@ const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
 };
 const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
     const [preferences, setPreferences] = (0, react_1.useState)([]);
-    const [loading, setLoading] = (0, react_1.useState)(false);
+    // Must start true (not false) whenever a fetch is about to happen: this is
+    // read by consumers (KanbanBoard's preferences-hydration effect) on their
+    // very first render, before this hook's own mount effect has run. Starting
+    // false let that first render look like "nothing loading, nothing saved",
+    // which permanently skipped hydration once the real data arrived.
+    const [loading, setLoading] = (0, react_1.useState)(() => Boolean(baseUrl));
     (0, react_1.useEffect)(() => {
         if (!baseUrl) {
             return;

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -64,4 +64,3 @@ export type UseSidebarPrefsResult = SidebarPrefs & {
 };
 export declare const useSidebarPrefs: (options?: UseSidebarPrefsOptions) => UseSidebarPrefsResult;
 export default useSidebarPrefs;
-//# sourceMappingURL=useSidebarPrefs.d.ts.map

package/dist/Theme/chakra/Avatar.styles.d.ts

@@ -14,12 +14,12 @@ export declare const Avatar: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+            keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+            keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -27,7 +27,6 @@ export declare const Avatar: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+    parts: ("label" | "container" | "group" | "badge" | "excessLabel")[];
 };
 export {};
-//# sourceMappingURL=Avatar.styles.d.ts.map

package/dist/Theme/chakra/Drawer.styles.d.ts

@@ -13,12 +13,12 @@ export declare const Drawer: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,7 +26,6 @@ export declare const Drawer: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+    parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
 };
 export {};
-//# sourceMappingURL=Drawer.styles.d.ts.map

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -51,12 +51,12 @@ export declare const Menu: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+            keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+            keys: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -64,7 +64,6 @@ export declare const Menu: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+    parts: ("button" | "list" | "icon" | "divider" | "command" | "item" | "groupTitle")[];
 };
 export {};
-//# sourceMappingURL=Menu.styles.d.ts.map

package/dist/Theme/chakra/Modal.styles.d.ts

@@ -13,12 +13,12 @@ export declare const Modal: {
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,7 +26,6 @@ export declare const Modal: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+    parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
 };
 export {};
-//# sourceMappingURL=Modal.styles.d.ts.map