pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.10

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -4,7 +4,7 @@ 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 gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 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. */
@@ -17,11 +17,9 @@ const sizeMap = {
     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;
     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
@@ -37,10 +35,10 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
         info: { from: c.semantic.info[400], to: c.semantic.info[600] },
     };
-    const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
     // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
     // across brands) — the label/subtitle share this computed ink instead.
-    const ink = (0, accentText_1.onGradient)(resolved.from, resolved.to, c.white, c.black);
+    const resolved = (0, gradientInk_1.resolveGradient)(gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant], c.white, c.black);
+    const ink = resolved.ink;
     // 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.

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.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.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;
     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: (_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 }) })] })] }) })] })] }));
+    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.js

@@ -85,21 +85,20 @@ 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;
     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 = (_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];
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.text[900];
+    const avatarBg = colors.primary[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 = (0, accentText_1.accentTextOnCanvas)(colors === null || colors === void 0 ? void 0 : colors.primary, avatarBg !== null && avatarBg !== void 0 ? avatarBg : accentText_1.DEFAULT_CANVAS);
+    const avatarColor = (0, accentText_1.accentTextOnCanvas)(colors.primary, avatarBg);
     const successScheme = "green";
     const dangerScheme = "red";
     const handleDeactivateConfirm = () => {
@@ -108,14 +107,13 @@ 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: (_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;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: colors.backgroundColor.main, 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) => {
                                 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 ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50] : "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 ? colors.primary[50] : "transparent", _hover: {
                                         background: isSelected
-                                            ? (_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));
+                                            ? colors.primary[50]
+                                            : (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
+                                    }, 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: colors.primary[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: () => {
@@ -129,11 +127,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;
+                                                var _a;
                                                 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)((_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));
+                                                                bg: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: colors.primary[50], borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

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

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -6,6 +6,7 @@ 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");
 // One in-between windowed size — wider than a cramped dialog but not near-full
 // screen. There is no maximize/restore toggle (removed by product decision); the
 // `onMedium`/`onMaximize` props are kept optional for back-compat but unused.
@@ -18,7 +19,6 @@ const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
  * minimized windows with the companion WorkspaceTray.
  */
 function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
-    var _a, _b, _c, _d, _e, _f;
     // Must run before the early return: a minimized render would otherwise skip the hook
     // and change hook order when the window reopens.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -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: "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 })] }) })] }));
+                }, "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: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: theme.colors.text[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 —
@@ -52,7 +52,6 @@ function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", r
     // than a full-width docked bar, so it never covers the bottom strip of page
     // content and needs no reserved page gutter. Pills wrap upward.
     (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: 1400, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
-            var _a, _b, _c, _d, _e, _f;
             const api = {
                 restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
                 close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
@@ -60,6 +59,6 @@ function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", r
             if (renderItem) {
                 return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
             }
-            return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "blue.100", color: (_d = (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : "blue.700", boxShadow: "md", borderWidth: "1px", borderColor: (_f = (_e = theme.colors.primary) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : "blue.200", "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+            return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[100]), boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
         }) }));
 }

package/dist/Constants/Sidebar.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cssForScrollBar = exports.FlexCss = exports.HEADER_HEIGHT = void 0;
+const scrollbar_1 = require("../Theme/tokens/builders/scrollbar");
 exports.HEADER_HEIGHT = "4.3rem";
 exports.FlexCss = {
     "&::-webkit-scrollbar": {
-        width: "0.188rem",
+        width: scrollbar_1.SCROLLBAR_WIDTH,
     },
     "&::-webkit-scrollbar-track": {
         background: "transparent",
@@ -19,7 +20,7 @@ exports.FlexCss = {
 };
 const cssForScrollBar = (theme) => ({
     "&::-webkit-scrollbar": {
-        width: "0.125rem",
+        width: scrollbar_1.SCROLLBAR_WIDTH,
     },
     "&::-webkit-scrollbar-track": {
         background: theme.colors.sidebar.background[500],

package/dist/Theme/assertPalette.d.ts

@@ -0,0 +1,11 @@
+import type { PaletteProps } from "./tokens/types";
+declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic"];
+type Unlisted = Exclude<keyof PaletteProps, (typeof REQUIRED_GROUPS)[number]>;
+export type AllPaletteTokensListed = Unlisted extends never ? true : ["unlisted token", Unlisted];
+export declare const allPaletteTokensListed: AllPaletteTokensListed;
+export declare const missingPaletteTokens: (colors: unknown) => string[];
+/** Fails once, loudly, at the theme boundary — never as a wrong colour 40 components deep. */
+export declare const assertPixelizePalette: (theme: {
+    colors?: unknown;
+}) => PaletteProps;
+export {};

package/dist/Theme/assertPalette.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertPixelizePalette = exports.missingPaletteTokens = exports.allPaletteTokensListed = void 0;
+const REQUIRED_GROUPS = [
+    "gradient", "primary", "secondary", "tertiary", "transparent", "black", "white",
+    "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
+    "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
+    "boxShadow", "sidebar", "boxborder", "border", "table", "disabled", "accentText",
+    "textMuted", "semanticText", "onPrimary", "onSemantic",
+];
+exports.allPaletteTokensListed = true;
+const NESTED = [
+    ["semantic", ["success", "error", "warning", "info"]],
+    ["sidebar", [
+            "background", "activeIcon", "activeLabel", "mutedIcon", "mutedLabel", "elevated",
+            "semanticText",
+        ]],
+    ["semanticText", ["success", "error", "warning", "info"]],
+    ["onSemantic", ["success", "error", "warning", "info"]],
+    ["backgroundColor", ["main", "base"]],
+    ["boxShadow", ["primary", "default"]],
+];
+const missingPaletteTokens = (colors) => {
+    if (!colors || typeof colors !== "object")
+        return ["(no colors object)"];
+    const c = colors;
+    const missing = REQUIRED_GROUPS.filter((k) => c[k] === undefined).map(String);
+    for (const [group, keys] of NESTED) {
+        const value = c[group];
+        if (!value)
+            continue;
+        for (const key of keys)
+            if (value[key] === undefined)
+                missing.push(`${group}.${key}`);
+    }
+    return missing;
+};
+exports.missingPaletteTokens = missingPaletteTokens;
+const checked = new WeakSet();
+/** Fails once, loudly, at the theme boundary — never as a wrong colour 40 components deep. */
+const assertPixelizePalette = (theme) => {
+    if (typeof theme === "object" && theme !== null && checked.has(theme)) {
+        return theme.colors;
+    }
+    const missing = (0, exports.missingPaletteTokens)(theme === null || theme === void 0 ? void 0 : theme.colors);
+    if (missing.length > 0) {
+        throw new Error(`pixelize-design-library: this theme is missing ${missing.length} palette token(s): ` +
+            `${missing.join(", ")}. Components read these directly and have no fallback by design. ` +
+            `Wrap the app in <PixelizeThemeProvider>, or build the theme with createBrandTheme(palette).`);
+    }
+    if (typeof theme === "object" && theme !== null)
+        checked.add(theme);
+    return theme.colors;
+};
+exports.assertPixelizePalette = assertPixelizePalette;

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

@@ -6,20 +6,20 @@ declare const $badgeBorder: {
 export declare const Avatar: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         badge: {
-            [$badgeBorder.variable]: any;
+            [$badgeBorder.variable]: string;
         };
         container: {
-            [$badgeBorder.variable]: any;
+            [$badgeBorder.variable]: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+            keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+            keys: ("group" | "label" | "container" | "badge" | "excessLabel")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -27,6 +27,6 @@ export declare const Avatar: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("label" | "container" | "group" | "badge" | "excessLabel")[];
+    parts: ("group" | "label" | "container" | "badge" | "excessLabel")[];
 };
 export {};

package/dist/Theme/chakra/Avatar.styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Avatar = void 0;
+const paletteFromTheme_1 = require("./paletteFromTheme");
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.avatarAnatomy.keys);
@@ -12,8 +13,7 @@ const $badgeBorder = (0, react_1.cssVar)("avatar-border-color");
  * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
  */
 const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const border = (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff";
+    const border = (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light;
     return {
         badge: {
             [$badgeBorder.variable]: border,

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

@@ -6,19 +6,19 @@ declare const $bg: {
 export declare const Drawer: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         dialog: {
-            [$bg.variable]: any;
+            [$bg.variable]: string;
             bg: string;
-            color: any;
+            color: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,6 +26,6 @@ export declare const Drawer: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+    parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
 };
 export {};

package/dist/Theme/chakra/Drawer.styles.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
+const paletteFromTheme_1 = require("./paletteFromTheme");
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.drawerAnatomy.keys);
@@ -11,16 +12,13 @@ const $bg = (0, react_1.cssVar)("drawer-bg");
  * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
  * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
  */
-const baseStyle = definePartsStyle(({ theme }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    return ({
-        dialog: {
-            [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
-            bg: $bg.reference,
-            color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
-        },
-    });
-});
+const baseStyle = definePartsStyle(({ theme }) => ({
+    dialog: {
+        [$bg.variable]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
+        bg: $bg.reference,
+        color: (0, paletteFromTheme_1.paletteOf)(theme).text[900],
+    },
+}));
 exports.Drawer = defineMultiStyleConfig({
     baseStyle,
 });

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

@@ -25,26 +25,29 @@ declare const $itemBg: {
 export declare const Menu: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         list: {
-            [$bg.variable]: any;
+            [$bg.variable]: string;
             bg: string;
-            color: any;
+            color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
         };
         item: {
             bg: string;
             _focus: {
-                [$itemBg.variable]: any;
+                [$itemBg.variable]: string;
                 bg: string;
             };
             _hover: {
-                [$itemBg.variable]: any;
+                [$itemBg.variable]: string;
                 bg: string;
             };
             _active: {
-                [$itemBg.variable]: any;
+                [$itemBg.variable]: string;
                 bg: string;
             };
             _expanded: {
-                [$itemBg.variable]: any;
+                [$itemBg.variable]: string;
                 bg: string;
             };
         };

package/dist/Theme/chakra/Menu.styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
 /**
@@ -22,14 +23,19 @@ const $bg = (0, react_1.cssVar)("menu-bg");
  */
 const $itemBg = (0, react_1.cssVar)("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
-    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 hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
-    const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    const hoverBg = colors.primary.opacity[8];
+    const activeBg = colors.primary.opacity[16];
     return {
         list: {
-            [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
+            [$bg.variable]: colors.backgroundColor.light,
             bg: $bg.reference,
-            color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
+            color: colors.text[900],
+            // A rule at CHROME_RULE weight, not Chakra's gray.200: that default read as a hard edge,
+            // which is why this shipped borderless. At 1.31:1 the edge defines the surface instead.
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: colors.boxborder[200],
         },
         // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
         // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name

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

@@ -6,19 +6,19 @@ declare const $bg: {
 export declare const Modal: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         dialog: {
-            [$bg.variable]: any;
+            [$bg.variable]: string;
             bg: string;
-            color: any;
+            color: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,6 +26,6 @@ export declare const Modal: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+    parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
 };
 export {};