pixelize-design-library 2.3.22 → 2.4.1

package/dist/Components/UserDetails/UserDetails.js

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

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

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

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

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

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

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

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -5,6 +5,7 @@ exports.WorkspaceTray = WorkspaceTray;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 // One in-between windowed size — wider than a cramped dialog but not near-full
 // screen. There is no maximize/restore toggle (removed by product decision); the
 // `onMedium`/`onMaximize` props are kept optional for back-compat but unused.
@@ -17,13 +18,16 @@ const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
  * minimized windows with the companion WorkspaceTray.
  */
 function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, headerActions, testId = "workspace-window", }) {
+    // Must run before the early return: a minimized render would otherwise skip the hook
+    // and change hook order when the window reopens.
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (state === "minimized")
         return null;
     const size = WINDOW_SIZE;
     return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
         // Don't discard unsaved work on an accidental overlay click / Esc — the
         // parent decides via the explicit Close control.
-        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: "white", borderRadius: "0.75rem", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: "gray.100", bg: "gray.50", flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: "gray.700", noOfLines: 1, "data-testid": `${testId}-title`, children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 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: "gray.100", bg: "gray.50", flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: "gray.700", noOfLines: 1, "data-testid": `${testId}-title`, children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 /**
  * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —

package/dist/Theme/chakra/common.web.d.ts

@@ -0,0 +1,171 @@
+/**
+ * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
+ * concern, which is why this assembly lives here and not in `tokens/`.
+ */
+declare const common: {
+    lineHeights: {
+        normal: string;
+        none: number;
+        shorter: number;
+        short: number;
+        base: number;
+        tall: number;
+        taller: string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "10": string;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    space: {
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+    };
+    sizes: {
+        full: string;
+        screenW: string;
+        screenH: string;
+        max: string;
+        min: string;
+        "3xs": string;
+        "2xs": string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        container: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        px: string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+    };
+    breakpoints: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+    shadows: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        outline: string;
+        inner: string;
+        none: string;
+        darkLg: string;
+    };
+    radii: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        full: string;
+    };
+    zIndices: {
+        hide: number;
+        auto: string;
+        base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+    config: {
+        cssVarPrefix: string;
+    };
+};
+export default common;
+//# sourceMappingURL=common.web.d.ts.map

package/dist/Theme/chakra/common.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/common.web.ts"],"names":[],"mappings":"AAWA;;;GAGG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/Theme/chakra/common.web.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const primitives_1 = require("../tokens/primitives");
+/**
+ * Web (Chakra) assembly of the pure primitives. `config.cssVarPrefix` is a Chakra
+ * concern, which is why this assembly lives here and not in `tokens/`.
+ */
+const common = {
+    lineHeights: primitives_1.lineHeights,
+    letterSpacings: primitives_1.letterSpacings,
+    space: primitives_1.space,
+    sizes: primitives_1.sizes,
+    breakpoints: primitives_1.breakpoints,
+    shadows: primitives_1.shadows,
+    radii: primitives_1.radii,
+    zIndices: primitives_1.zIndices,
+    config: {
+        cssVarPrefix: "ck",
+    },
+};
+exports.default = common;

package/dist/Theme/chakra/componentStyles.d.ts

@@ -0,0 +1,13 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const componentStyles: {
+    Checkbox: ComponentStyleConfig;
+    Input: ComponentStyleConfig;
+    Button: ComponentStyleConfig;
+    Select: ComponentStyleConfig;
+    Tag: import("@chakra-ui/react").ComponentMultiStyleConfig;
+    Textarea: ComponentStyleConfig;
+    NumberInput: ComponentStyleConfig;
+    Badge: import("@chakra-ui/react").ComponentSingleStyleConfig;
+    FormError: import("@chakra-ui/react").ComponentSingleStyleConfig;
+};
+//# sourceMappingURL=componentStyles.d.ts.map

package/dist/Theme/chakra/componentStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentStyles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/componentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAsB,MAAM,kBAAkB,CAAC;AA2E5E,eAAO,MAAM,eAAe;;;;;;;;;;CAU3B,CAAC"}

package/dist/Theme/chakra/componentStyles.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStyles = void 0;
+const Button_styles_1 = require("../../Components/Button/Button.styles");
+const Checkbox_styles_1 = require("../../Components/Checkbox/Checkbox.styles");
+const TextInput_styles_1 = require("../../Components/Input/TextInput.styles");
+const Select_styles_1 = require("../../Components/Select/Select.styles");
+const Tag_styles_1 = require("../../Components/Tag/Tag.styles");
+const InputTextArea_style_1 = require("../../Components/InputTextArea/InputTextArea.style");
+const NumberInput_styles_1 = require("../../Components/NumberInput/NumberInput.styles");
+const accentText_1 = require("../tokens/builders/accentText");
+const color_1 = require("../tokens/builders/color");
+// `colorScheme` accepts any Chakra scale, including built-ins we never themed (blackAlpha,
+// whiteAlpha) whose rungs are translucent `rgba(...)` strings, not opaque hex — our contrast
+// math (hexToRgb) throws on those on purpose (see color.ts). Guard so those scales fall back to
+// Chakra's own original fixed rung instead of computing contrast on a color it can't parse.
+const isHexColor = (color) => typeof color === "string" && /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color);
+// Badge isn't its own component family (no Components/Badge/), so its style config lives here —
+// Chakra's stock `solid` variant hardcodes a white label on a variable fill, same AA gap Tag had.
+const Badge = {
+    variants: {
+        solid: ({ theme, colorScheme = "gray" }) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
+            const bg = swatch === null || swatch === void 0 ? void 0 : swatch[500];
+            const white = (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.white) !== null && _f !== void 0 ? _f : "#fff";
+            const black = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.black) !== null && _h !== void 0 ? _h : "#000";
+            return {
+                bg,
+                color: isHexColor(bg) ? (0, accentText_1.onFilled)(bg, white, black) : swatch === null || swatch === void 0 ? void 0 : swatch[800],
+            };
+        },
+        // Chakra's stock `subtle` picks its bg/color pair via `mode()`, keyed to Chakra's own
+        // colorMode — which this app never toggles (dark mode swaps the palette object instead), so
+        // it always takes the light-mode branch. Applied to our mode-reversed dark scales, that
+        // branch's fixed rung pair (100/800) measures 4.06 in dark mode, just under AA.
+        subtle: ({ theme, colorScheme = "gray" }) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const swatch = (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
+            const bg = (_e = swatch === null || swatch === void 0 ? void 0 : swatch[100]) !== null && _e !== void 0 ? _e : swatch === null || swatch === void 0 ? void 0 : swatch[50];
+            if (!isHexColor(bg))
+                return { bg, color: swatch === null || swatch === void 0 ? void 0 : swatch[800] };
+            // accentTextOnCanvas keeps brand hue by trying this scale's own rungs first, but some
+            // narrow-gamut hues (e.g. yellow) don't reach far enough at either end to clear AA against
+            // every bg they can land on in dark mode (measured 4.42 for a reversed-yellow badge) — its
+            // own doc admits it falls back to "the most extreme rung" rather than guaranteeing AA. Verify
+            // the candidate actually clears AA; if not, drop brand hue for the guaranteed white/black ink
+            // (onFilled is provably >=4.5 against any bg) rather than ship a near-miss.
+            const accent = (0, accentText_1.accentTextOnCanvas)(swatch, bg);
+            if ((0, color_1.contrastRatio)(accent, bg) >= 4.5)
+                return { bg, color: accent };
+            const white = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.white) !== null && _g !== void 0 ? _g : "#fff";
+            const black = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.black) !== null && _j !== void 0 ? _j : "#000";
+            return { bg, color: (0, accentText_1.onFilled)(bg, white, black) };
+        },
+    },
+    defaultProps: {
+        variant: "subtle",
+        colorScheme: "gray",
+    },
+};
+// Chakra's stock FormErrorMessage hardcodes `colors.red.500` (our own `red[500]`, since
+// `createBrandTheme` sets `theme.colors = palette`) — same AA gap as our own ErrorMessage/
+// ErrorComponent, fixed the same way rather than leaving Chakra's raw usage (e.g. FeedbackForm)
+// unfixed.
+const FormError = {
+    baseStyle: ({ theme }) => {
+        var _a, _b, _c, _d;
+        // `icon` (FormErrorIcon) shares the same AA gap as `text` — both must be fixed together or
+        // the icon stays on Chakra's raw `red.500`.
+        const color = (0, accentText_1.accentTextOnCanvas)((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.red, (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : "#ffffff");
+        return {
+            text: { color },
+            icon: { color },
+        };
+    },
+};
+exports.componentStyles = {
+    Checkbox: Checkbox_styles_1.Checkbox,
+    Input: TextInput_styles_1.Input,
+    Button: Button_styles_1.Button,
+    Select: Select_styles_1.Select,
+    Tag: Tag_styles_1.Tag,
+    Textarea: InputTextArea_style_1.Textarea,
+    NumberInput: NumberInput_styles_1.NumberInput,
+    Badge,
+    FormError,
+};

package/dist/Theme/chakra/createBrandTheme.d.ts

@@ -0,0 +1,18 @@
+import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
+export interface CreateBrandThemeOptions {
+    /** Which palette this theme represents. Defaults to `light`. */
+    colorMode?: ResolvedColorMode;
+}
+/**
+ * Builds a Chakra theme from a pure brand palette.
+ *
+ * Replaces the seven byte-identical `<Brand>/theme.ts` files — they differed only in
+ * which palette they imported.
+ *
+ * Dark mode works by swapping which palette the theme carries: `componentStyles` variants
+ * are functions of `({ theme })` and `useCustomTheme()` reads `theme.colors`, so both follow
+ * the palette automatically without any per-component `_dark` overrides.
+ */
+export declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
+export default createBrandTheme;
+//# sourceMappingURL=createBrandTheme.d.ts.map

package/dist/Theme/chakra/createBrandTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createBrandTheme.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/createBrandTheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMvE,MAAM,WAAW,uBAAuB;IACtC,gEAAgE;IAChE,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,YAAY,EACrB,UAAS,uBAA4B,wBAwDtC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/Theme/chakra/createBrandTheme.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBrandTheme = void 0;
+const react_1 = require("@chakra-ui/react");
+const common_web_1 = __importDefault(require("./common.web"));
+const fonts_web_1 = __importDefault(require("./fonts.web"));
+const componentStyles_1 = require("./componentStyles");
+/**
+ * Builds a Chakra theme from a pure brand palette.
+ *
+ * Replaces the seven byte-identical `<Brand>/theme.ts` files — they differed only in
+ * which palette they imported.
+ *
+ * Dark mode works by swapping which palette the theme carries: `componentStyles` variants
+ * are functions of `({ theme })` and `useCustomTheme()` reads `theme.colors`, so both follow
+ * the palette automatically without any per-component `_dark` overrides.
+ */
+const createBrandTheme = (palette, options = {}) => {
+    var _a;
+    const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const brand = {
+        colors: palette,
+        ...fonts_web_1.default,
+        ...common_web_1.default,
+    };
+    return (0, react_1.extendTheme)({
+        ...brand,
+        config: {
+            ...common_web_1.default.config,
+            // Deliberately ALWAYS "light", even for the dark theme — this is not a bug.
+            //
+            // Dark works by swapping the palette, so the palette is ALREADY mode-adapted by the time
+            // Chakra sees it. Telling Chakra it is in dark mode makes it adapt a second time: its
+            // built-ins carry `_dark` blocks that reach for `gray.700`/`gray.800` assuming a scale where
+            // those rungs are dark. Our dark gray ramp runs dark -> light, so those rungs are LIGHT —
+            // producing a light Card/Skeleton/Menu on a dark canvas. Adapting twice cancels out.
+            //
+            // Keeping Chakra on its `_light` branch is what makes the swap work: those defaults are
+            // gray-RUNG references (`gray.100`, `gray.200`, `gray.600`), and our reversed ramp already
+            // maps each rung to the right value per mode. `semanticTokens` below patches the one default
+            // that hardcodes a literal color instead of a rung.
+            initialColorMode: "light",
+            useSystemColorMode: false,
+        },
+        // `chakra-body-bg` is the only stock semantic token that resolves to a LITERAL (`white`)
+        // rather than a gray rung, so it is the only one the palette swap cannot correct on its own —
+        // it is what paints a white Card/Modal/Menu on the dark canvas. `background[50]` is the
+        // canvas-following equivalent: byte-identical `#ffffff` in light, the canvas in dark.
+        // `chakra-inverse-text` is the same literal-`white` problem in text form.
+        semanticTokens: {
+            colors: {
+                "chakra-body-bg": palette.background[50],
+                "chakra-inverse-text": palette.background[50],
+            },
+        },
+        // Light themes intentionally declare no global styles — that is the pre-existing
+        // behavior, and adding any would shift every consuming app's light rendering.
+        // Dark needs a canvas, otherwise the page stays white behind the components.
+        ...(colorMode === "dark"
+            ? {
+                styles: {
+                    global: {
+                        body: {
+                            bg: palette.backgroundColor.main,
+                            color: palette.text[900],
+                        },
+                    },
+                },
+            }
+            : {}),
+        components: componentStyles_1.componentStyles,
+    });
+};
+exports.createBrandTheme = createBrandTheme;
+exports.default = exports.createBrandTheme;

package/dist/Theme/chakra/fonts.web.d.ts

@@ -0,0 +1,42 @@
+/** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
+import "@fontsource-variable/inter/index.css";
+/**
+ * Web font binding: loads the Inter font face (CSS side-effect) and re-exports the pure
+ * typography tokens. The CSS import lives here rather than in `tokens/` so the token
+ * layer stays portable to mobile.
+ */
+declare const fonts: {
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    fontWeights: {
+        hairline: number;
+        thin: number;
+        light: number;
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        black: number;
+    };
+};
+export default fonts;
+//# sourceMappingURL=fonts.web.d.ts.map

package/dist/Theme/chakra/fonts.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.web.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/fonts.web.ts"],"names":[],"mappings":"AAAA,qGAAqG;AACrG,OAAO,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAC;AAEzB,eAAe,KAAK,CAAC"}

package/dist/Theme/chakra/fonts.web.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
+require("@fontsource-variable/inter/index.css");
+const typography_1 = __importDefault(require("../tokens/primitives/typography"));
+/**
+ * Web font binding: loads the Inter font face (CSS side-effect) and re-exports the pure
+ * typography tokens. The CSS import lives here rather than in `tokens/` so the token
+ * layer stays portable to mobile.
+ */
+const fonts = typography_1.default;
+exports.default = fonts;