pixelize-design-library 2.3.21 → 2.4.1-beta.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/Layout.d.ts

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

package/dist/Layout.js

@@ -0,0 +1,286 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const accordion_1 = __importDefault(require("./Pages/accordion"));
+const searchSelect_1 = __importDefault(require("./Pages/searchSelect"));
+const search_1 = __importDefault(require("./Pages/search"));
+const timeline_1 = __importDefault(require("./Pages/timeline"));
+const datePick_1 = __importDefault(require("./Pages/datePick"));
+const multiSelect_1 = __importDefault(require("./Pages/multiSelect"));
+const drawer_1 = __importDefault(require("./Pages/drawer"));
+const verifyEmail_1 = __importDefault(require("./Pages/verifyEmail"));
+const editor_1 = __importDefault(require("./Pages/editor"));
+const dropdown_1 = __importDefault(require("./Pages/dropdown"));
+const noteArea_1 = __importDefault(require("./Pages/noteArea"));
+const switch_1 = __importDefault(require("./Pages/switch"));
+const photoViewer_1 = __importDefault(require("./Pages/photoViewer"));
+const chart_1 = __importDefault(require("./Pages/chart"));
+const tooltip_1 = __importDefault(require("./Pages/tooltip"));
+const card_1 = __importDefault(require("./Pages/card"));
+const pinInputs_1 = __importDefault(require("./Pages/pinInputs"));
+const numberInput_1 = __importDefault(require("./Pages/numberInput"));
+const progressbar_1 = __importDefault(require("./Pages/progressbar"));
+const button_1 = __importDefault(require("./Pages/button"));
+const radioButton_1 = __importDefault(require("./Pages/radioButton"));
+const skeleton_1 = __importDefault(require("./Pages/skeleton"));
+const textArea_1 = __importDefault(require("./Pages/textArea"));
+const select_1 = __importDefault(require("./Pages/select"));
+const modal_1 = __importDefault(require("./Pages/modal"));
+const checkbox_1 = __importDefault(require("./Pages/checkbox"));
+const toster_1 = __importDefault(require("./Pages/toster"));
+const input_1 = __importDefault(require("./Pages/input"));
+const alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
+const productCaard_1 = __importDefault(require("./Pages/productCaard"));
+const table_1 = require("./Pages/table");
+const TInput_1 = __importDefault(require("./Pages/TInput"));
+const kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
+const tag_1 = __importDefault(require("./Pages/tag"));
+const Header_1 = __importDefault(require("./Components/Header/Header"));
+const fileUpload_1 = require("./Pages/fileUpload");
+// import SelectSelect from "./Pages/selectSearch";
+const Slider_1 = __importDefault(require("./Components/Slider/Slider"));
+const contactForm_1 = __importDefault(require("./Pages/contactForm"));
+const productDetailCard_1 = __importDefault(require("./Pages/productDetailCard"));
+const notification_1 = __importDefault(require("./Pages/notification"));
+const FeedbackForm_1 = __importDefault(require("./Components/FeedbackForm/FeedbackForm"));
+const productFilter_1 = __importDefault(require("./Pages/productFilter"));
+const tier1_1 = __importDefault(require("./Pages/tier1"));
+const stageProgress_1 = __importDefault(require("./Pages/stageProgress"));
+const orgSwitcher_1 = __importDefault(require("./Pages/orgSwitcher"));
+const upgradeButton_1 = __importDefault(require("./Pages/upgradeButton"));
+const userDetails_1 = __importDefault(require("./Pages/userDetails"));
+const rolesPermission_1 = __importDefault(require("./Pages/rolesPermission"));
+const customModulesTable_1 = __importDefault(require("./Pages/customModulesTable"));
+const signInActivityTable_1 = __importDefault(require("./Pages/signInActivityTable"));
+const organizationDetails_1 = __importDefault(require("./Pages/organizationDetails"));
+// All component demo routes — sorted alphabetically by label for the nav grid.
+const componentLinks = [
+    { label: "Accordion", path: "/accordion" },
+    { label: "Alert Dialog", path: "/alertdialog" },
+    { label: "Button", path: "/button" },
+    { label: "Card", path: "/card" },
+    { label: "Charts", path: "/charts" },
+    { label: "Checkbox", path: "/checkbox" },
+    { label: "Contact Form", path: "/contactForm" },
+    { label: "Datepicker", path: "/datepicker" },
+    { label: "Drawer", path: "/drawer" },
+    { label: "Dropdown", path: "/dropdown" },
+    { label: "Editor", path: "/editor" },
+    { label: "Feedback Form", path: "/feedbackForm" },
+    { label: "File Upload", path: "/upload" },
+    { label: "Header", path: "/header" },
+    { label: "Input", path: "/InputPage" },
+    { label: "Kanban", path: "/kanban" },
+    { label: "Modal", path: "/modal" },
+    { label: "Multiselect", path: "/multiselect" },
+    { label: "Note Area", path: "/notearea" },
+    { label: "Notification", path: "/notification" },
+    { label: "Number Input", path: "/numberinput" },
+    { label: "Photo Viewer", path: "/photoViewer" },
+    { label: "Pin Input", path: "/pininput" },
+    { label: "Product Card", path: "/productCard" },
+    { label: "Product Detail Card", path: "/productDetails" },
+    { label: "Product Filter", path: "/productFilter" },
+    { label: "Progressbar", path: "/progressbar" },
+    { label: "Radio Button", path: "/radio" },
+    { label: "Search", path: "/search" },
+    { label: "Search Select", path: "/searchSelect" },
+    { label: "Select", path: "/select" },
+    { label: "Skeleton", path: "/skeleton" },
+    { label: "Slider", path: "/slider" },
+    { label: "Switch", path: "/switch" },
+    { label: "Table", path: "/table" },
+    { label: "Tag", path: "/tag" },
+    { label: "Tier 1 (New)", path: "/tier1" },
+    { label: "Stage Progress", path: "/stageProgress" },
+    { label: "Org Switcher", path: "/orgSwitcher" },
+    { label: "Upgrade Button", path: "/upgradeButton" },
+    { label: "User Details", path: "/userDetails" },
+    { label: "Roles & Permissions", path: "/rolesPermission" },
+    { label: "Custom Modules", path: "/customModulesTable" },
+    { label: "Sign-in Activity", path: "/signInActivityTable" },
+    { label: "Organization Details", path: "/organizationDetails" },
+    { label: "Text Area", path: "/textarea" },
+    { label: "Timeline", path: "/timeline" },
+    { label: "Toaster", path: "/toster" },
+    { label: "Tooltip", path: "/tooltip" },
+    { label: "Verify Email", path: "/verifyEmail" },
+].sort((a, b) => a.label.localeCompare(b.label));
+const Layout = () => {
+    const [currentPath, setCurrentPath] = (0, react_2.useState)(window.location.pathname);
+    const navigate = (path) => {
+        window.history.pushState({}, "", path);
+        setCurrentPath(path);
+    };
+    (0, react_2.useEffect)(() => {
+        const handlePopState = () => {
+            setCurrentPath(window.location.pathname);
+        };
+        window.addEventListener("popstate", handlePopState);
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, []);
+    const renderPage = () => {
+        switch (currentPath) {
+            case "/alertdialog":
+                return (0, jsx_runtime_1.jsx)(alertdialog_1.default, {});
+            case "/accordion":
+                return (0, jsx_runtime_1.jsx)(accordion_1.default, {});
+            case "/searchSelect":
+                return (0, jsx_runtime_1.jsx)(searchSelect_1.default, {});
+            case "/timeline":
+                return (0, jsx_runtime_1.jsx)(timeline_1.default, {});
+            case "/search":
+                return (0, jsx_runtime_1.jsx)(search_1.default, {});
+            case "/datepicker":
+                return (0, jsx_runtime_1.jsx)(datePick_1.default, {});
+            case "/multiselect":
+                return (0, jsx_runtime_1.jsx)(multiSelect_1.default, {});
+            case "/drawer":
+                return (0, jsx_runtime_1.jsx)(drawer_1.default, {});
+            case "/verifyEmail":
+                return (0, jsx_runtime_1.jsx)(verifyEmail_1.default, {});
+            case "/editor":
+                return (0, jsx_runtime_1.jsx)(editor_1.default, {});
+            case "/dropdown":
+                return (0, jsx_runtime_1.jsx)(dropdown_1.default, {});
+            case "/notearea":
+                return (0, jsx_runtime_1.jsx)(noteArea_1.default, {});
+            case "/notification":
+                return (0, jsx_runtime_1.jsx)(notification_1.default, {});
+            case "/switch":
+                return (0, jsx_runtime_1.jsx)(switch_1.default, {});
+            case "/photoViewer":
+                return (0, jsx_runtime_1.jsx)(photoViewer_1.default, {});
+            case "/charts":
+                return (0, jsx_runtime_1.jsx)(chart_1.default, {});
+            case "/tooltip":
+                return (0, jsx_runtime_1.jsx)(tooltip_1.default, {});
+            case "/card":
+                return (0, jsx_runtime_1.jsx)(card_1.default, {});
+            case "/pininput":
+                return (0, jsx_runtime_1.jsx)(pinInputs_1.default, {});
+            case "/numberinput":
+                return (0, jsx_runtime_1.jsx)(numberInput_1.default, {});
+            case "/progressbar":
+                return (0, jsx_runtime_1.jsx)(progressbar_1.default, {});
+            case "/button":
+                return (0, jsx_runtime_1.jsx)(button_1.default, {});
+            case "/radio":
+                return (0, jsx_runtime_1.jsx)(radioButton_1.default, {});
+            case "/skeleton":
+                return (0, jsx_runtime_1.jsx)(skeleton_1.default, {});
+            case "/textarea":
+                return (0, jsx_runtime_1.jsx)(textArea_1.default, {});
+            case "/select":
+                return (0, jsx_runtime_1.jsx)(select_1.default, {});
+            case "/modal":
+                return (0, jsx_runtime_1.jsx)(modal_1.default, {});
+            case "/checkbox":
+                return (0, jsx_runtime_1.jsx)(checkbox_1.default, {});
+            case "/toster":
+                return (0, jsx_runtime_1.jsx)(toster_1.default, {});
+            case "/InputPage":
+                return (0, jsx_runtime_1.jsx)(input_1.default, {});
+            case "/table":
+                return (0, jsx_runtime_1.jsx)(table_1.TableExample, {});
+            case "/tinput":
+                return (0, jsx_runtime_1.jsx)(TInput_1.default, {});
+            case "/kanban":
+                return (0, jsx_runtime_1.jsx)(kanbanboard_1.default, {});
+            case "/contactForm":
+                return (0, jsx_runtime_1.jsx)(contactForm_1.default, {});
+            case "/header":
+                return ((0, jsx_runtime_1.jsx)(Header_1.default, { logo: (0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "xl", fontWeight: "bold", children: "MyApp" }), 
+                    // colorScheme="gray"
+                    active: "/", menuItems: [
+                        { label: "Home", href: "/" },
+                        {
+                            label: "Products",
+                            // badge: {
+                            //   label: "new",
+                            //   colorScheme: "red",
+                            // },
+                            children: [
+                                {
+                                    label: "AI Tools",
+                                    href: "/products/ai",
+                                    badge: {
+                                        label: "new",
+                                        colorScheme: "blackAlpha",
+                                    },
+                                },
+                                {
+                                    label: "APIs",
+                                    href: "/products/apis",
+                                    badge: { label: "coming soon", colorScheme: "green" },
+                                },
+                            ],
+                        },
+                        {
+                            label: "Docs",
+                            href: "/docs",
+                            badge: { label: "updated", colorScheme: "yellow" },
+                        },
+                    ], rightSlot: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "ghost", colorScheme: "purple", children: "Login" }), (0, jsx_runtime_1.jsx)(react_1.Button, { colorScheme: "purple", children: "Sign Up" })] }) }));
+            case "/upload":
+                return (0, jsx_runtime_1.jsx)(fileUpload_1.FileUploader, {});
+            case "/slider":
+                return ((0, jsx_runtime_1.jsx)(Slider_1.default, { images: [
+                        {
+                            "id": 5,
+                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229934288-Winter_Delghts.webp",
+                            "order": 1
+                        },
+                        {
+                            "id": 6,
+                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766229935/main_sweets/1766229935008-Shree_M_-_Desktop_Banner_1.jpg",
+                            "order": 2
+                        },
+                        {
+                            "id": 7,
+                            "previewUrl": "https://res.cloudinary.com/dcpnzaqtu/image/upload/v1766649309/main_sweets/1766649308634-muthukavitha_laddu_banner_unde.jpg",
+                            "order": 3
+                        }
+                    ] }));
+            case "/productCard":
+                return (0, jsx_runtime_1.jsx)(productCaard_1.default, {});
+            case "/productDetails":
+                return (0, jsx_runtime_1.jsx)(productDetailCard_1.default, {});
+            case "/productFilter":
+                return (0, jsx_runtime_1.jsx)(productFilter_1.default, {});
+            case "/tier1":
+                return (0, jsx_runtime_1.jsx)(tier1_1.default, {});
+            case "/stageProgress":
+                return (0, jsx_runtime_1.jsx)(stageProgress_1.default, {});
+            case "/orgSwitcher":
+                return (0, jsx_runtime_1.jsx)(orgSwitcher_1.default, {});
+            case "/upgradeButton":
+                return (0, jsx_runtime_1.jsx)(upgradeButton_1.default, {});
+            case "/userDetails":
+                return (0, jsx_runtime_1.jsx)(userDetails_1.default, {});
+            case "/rolesPermission":
+                return (0, jsx_runtime_1.jsx)(rolesPermission_1.default, {});
+            case "/customModulesTable":
+                return (0, jsx_runtime_1.jsx)(customModulesTable_1.default, {});
+            case "/signInActivityTable":
+                return (0, jsx_runtime_1.jsx)(signInActivityTable_1.default, {});
+            case "/organizationDetails":
+                return (0, jsx_runtime_1.jsx)(organizationDetails_1.default, {});
+            case "/feedbackForm":
+                return (0, jsx_runtime_1.jsx)(FeedbackForm_1.default, {});
+            case "/tag":
+                return (0, jsx_runtime_1.jsx)(tag_1.default, {});
+            case "/":
+            default:
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "nav", mb: 8, children: [(0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: "gray.500", mb: 3, children: ["Components (", componentLinks.length, ")"] }), (0, jsx_runtime_1.jsxs)(react_1.SimpleGrid, { minChildWidth: "8rem", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => navigate("/"), variant: currentPath === "/" ? "solid" : "outline", size: "xs", w: "100%", children: "Home" }), componentLinks.map((link) => ((0, jsx_runtime_1.jsx)(react_1.Button, { onClick: () => navigate(link.path), variant: currentPath === link.path ? "solid" : "outline", size: "xs", w: "100%", children: link.label }, link.path)))] })] }), renderPage()] }));
+};
+exports.default = Layout;

package/dist/Pages/TInput.d.ts

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

package/dist/Pages/TInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TInput.d.ts","sourceRoot":"","sources":["../../src/Pages/TInput.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,+CAiCX,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/Pages/TInput.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Input_1 = __importDefault(require("../Components/Input/Input/Input"));
+const Buttons_1 = __importDefault(require("../Components/Buttons/Buttons"));
+const PinInputs_1 = __importDefault(require("../Components/PinInputs/PinInputs"));
+const TInput = () => {
+    const [email, setEmail] = (0, react_1.useState)("");
+    const [password, setPassword] = (0, react_1.useState)("");
+    const [errors] = (0, react_1.useState)({
+        email: "ddd",
+        password: "",
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { label: "Email Address", type: "email", value: email, onChange: setEmail, error: errors.email, placeholder: "Email Address", inputBoxClassName: "w-1/6" }), (0, jsx_runtime_1.jsx)(Input_1.default, { label: "Password", type: "password", value: password, onChange: setPassword, error: errors.password, placeholder: "Password", inputBoxClassName: "w-1/6" }), (0, jsx_runtime_1.jsx)(PinInputs_1.default, { length: 6, error: "", onComplete: (value) => { console.log(value, "value"); } }), (0, jsx_runtime_1.jsx)(Buttons_1.default, { label: "Sign In", onClick: () => { } })] }));
+};
+exports.default = TInput;

package/dist/Pages/accordion.d.ts

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

package/dist/Pages/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/Pages/accordion.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,UAAU,+CAsCf,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/Pages/accordion.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Accordion_1 = __importDefault(require("../Components/Accordion/Accordion"));
+const react_1 = require("@chakra-ui/react");
+const Accordions = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { maxW: "40rem", mx: "auto", py: 6, px: 4, children: (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowToggle: true, items: [
+                {
+                    header: "Section 1 title",
+                    content: ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { children: "This is text inside Section 1." }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: "gray.100", borderRadius: "md", p: 4, mt: 2, children: "This is a box with more content inside Section 1." }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { mt: 2, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", bg: "blue.100", borderRadius: "md", p: 4, children: "Box 1" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", bg: "green.100", borderRadius: "md", p: 4, children: "Box 2" })] })] })),
+                },
+                {
+                    header: "Section 2 title",
+                    content: ((0, jsx_runtime_1.jsx)(react_1.Text, { children: "This is text inside Section 2. The chevron rotates and the header tints when the section is expanded." })),
+                },
+            ] }) }));
+};
+exports.default = Accordions;

package/dist/Pages/alertdialog.d.ts

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

package/dist/Pages/alertdialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alertdialog.d.ts","sourceRoot":"","sources":["../../src/Pages/alertdialog.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,+CA0BnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Pages/alertdialog.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const AlertDialog_1 = __importDefault(require("../Components/AlertDialog/AlertDialog"));
+const react_2 = require("@chakra-ui/react");
+const AlertdialogBox = () => {
+    const [alertActive, setAlertActive] = (0, react_1.useState)(false);
+    const leastDestructiveRef = react_1.default.useRef();
+    const handleAlert = () => {
+        setAlertActive(!alertActive);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => {
+                    setAlertActive(true);
+                }, children: "AlertDialog" }), (0, jsx_runtime_1.jsx)(AlertDialog_1.default, { isOpen: alertActive, onClose: handleAlert, leastDestructiveRef: leastDestructiveRef, title: "hello", content: (0, jsx_runtime_1.jsx)("div", { style: { color: "red", height: "200px" }, children: "hellobody" }), onConfirm: () => handleAlert(), size: "500" })] }));
+};
+exports.default = AlertdialogBox;

package/dist/Pages/button.d.ts

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

package/dist/Pages/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/Pages/button.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,UAAU,+CA+Cf,CAAC;AAEF,eAAe,UAAU,CAAC"}