pixelize-design-library 2.4.1-beta.7 → 2.4.1-beta.8

package/dist/App.d.ts

@@ -0,0 +1,4 @@
+import "./global.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;
+//# sourceMappingURL=App.d.ts.map

package/dist/App.js

@@ -0,0 +1,95 @@
+"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 react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Loading_1 = __importDefault(require("./Components/Loading/Loading"));
+const SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
+const NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
+const useSidebarPrefs_1 = require("./Hooks/useSidebarPrefs");
+const provider_1 = require("./Theme/provider");
+const useCustomTheme_1 = require("./Theme/useCustomTheme");
+const Layout_1 = __importDefault(require("./Layout"));
+require("./global.css");
+// --- Static demo data (module scope so it isn't re-created each render) ------
+const menu = [
+    {
+        id: 1, title: "Dashboard", icon: lucide_react_1.House, url: "", group: "Main",
+        secondaryItems: [
+            { id: 11, title: "SubMenu", url: "submenu1", icon: lucide_react_1.Cuboid, badge: { count: 10, color: "red", radius: "5px", variant: "outline" } },
+            { id: 12, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
+        ],
+    },
+    {
+        id: 2, title: "AlertDialog", icon: lucide_react_1.Calendar, url: "alertdialog",
+        badge: { count: 10, color: "red", radius: "5px", variant: "outline" },
+    },
+    {
+        id: 3, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 31, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.FileText },
+            { id: 32, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Link2, badge: { count: 10, color: "red", radius: "5px", variant: "subtle" } },
+        ],
+    },
+    {
+        id: 4, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu",
+        subMenu: [
+            { id: 33, title: "SubMenu1", url: "submenu1" },
+            { id: 34, title: "SubMenu2", url: "submenu2" },
+        ],
+    },
+    {
+        id: 8, title: "SideMenu", icon: lucide_react_1.Cuboid, url: "sidemenu", group: "Tools",
+        subMenu: [
+            { id: 41, title: "SubMenu1", url: "submenu1", icon: lucide_react_1.Cuboid },
+            { id: 42, title: "SubMenu2", url: "submenu2", icon: lucide_react_1.Cuboid },
+        ],
+    },
+];
+const navmenus = [
+    { title: "Account Settings", url: "myaccount", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Cuboid, {}) },
+    { title: "Reset password", url: "resetpassword" },
+    { title: "Billing", url: "billing" },
+    { title: "Notifications", url: "notifications" },
+];
+function useWindowSize() {
+    const [windowSize, setWindowSize] = (0, react_1.useState)({ width: 0, height: 0 });
+    (0, react_1.useEffect)(() => {
+        const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+        window.addEventListener("resize", handleResize);
+        handleResize();
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return windowSize;
+}
+function App() {
+    const { height } = useWindowSize();
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    // Persisted layout choices — restored to exactly the same state on reload/new
+    // session via localStorage. `collapsed` = mini-rail; `mobileNav` = navbar mode
+    // forced on a big screen; `mobileOpen` = whether the overlay drawer is open.
+    // Composed handlers (onToggleMobileNav / closeMobile) come straight from the hook,
+    // so this app does not re-implement the navbar-mode/drawer behavior.
+    const { collapsed: toggle, toggleCollapsed, mobileNav, mobileOpen, toggleMobileOpen, onToggleMobileNav, closeMobile, } = (0, useSidebarPrefs_1.useSidebarPrefs)();
+    const [activeMenu, setActiveMenu] = (0, react_1.useState)(2);
+    const [activeSecondaryItem, setActiveSecondaryItem] = (0, react_1.useState)(null);
+    const handleMenuClick = (menu) => {
+        setActiveMenu(menu === null || menu === void 0 ? void 0 : menu.id);
+        setActiveSecondaryItem(null);
+    };
+    const handleSecondaryNavClick = (item) => {
+        var _a, _b;
+        setActiveSecondaryItem((_b = (_a = item === null || item === void 0 ? void 0 : item.id) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.title) !== null && _b !== void 0 ? _b : null);
+    };
+    const handleNavOnClick = () => { };
+    const handleLogout = () => { };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "App", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { minH: "100vh", bg: "gray.100", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(Loading_1.default, { text: "PIXELIZE CRM", isLoading: false, onlytext: true }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(SideBar_1.default, { menus: menu, activeMenu: activeMenu, handleMenuClick: handleMenuClick, handleSecondaryNavClick: handleSecondaryNavClick, toggle: toggle, changeToggle: toggleCollapsed, companyName: "PIXELIZE Technologies Pvt., Ltd.", selectedSecondaryItem: activeSecondaryItem, mobileOpen: mobileOpen, onMobileClose: closeMobile, mobileNav: mobileNav, onToggleMobileNav: onToggleMobileNav }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(NavigationBar_1.default, { userAvathar: "https://bit.ly/dan-abramo", userName: "PIXELIZE", userRole: "Admin", navMenu: navmenus, handleNavOnClick: handleNavOnClick, handleLogout: handleLogout, logoutText: "Logout", sideBarToggole: mobileOpen, onSideBarToggole: toggleMobileOpen, forceSideBarToggle: mobileNav, navigationBarText: {
+                                        text: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Dashboard" }),
+                                        onIconClick: () => { },
+                                    }, moreIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Calendar, {}) }, "navbar"), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-testid": "theme-controls", px: "50px", pb: 3, gap: 4, align: "center", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: true }), (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "icon" })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { p: "50px", pt: 0, height: height - 200, overflowY: "scroll", overflowX: "hidden", width: "100%", "data-testid": "playground-surface", bg: theme.colors.backgroundColor.main, children: (0, jsx_runtime_1.jsx)(Layout_1.default, {}) })] })] })] }) }));
+}
+exports.default = App;

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

@@ -1 +1 @@
-{"version":3,"file":"OrganizationDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/OrganizationDetails/OrganizationDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAoCjD,OAAO,EAEL,wBAAwB,EAEzB,MAAM,4BAA4B,CAAC;AAwCpC,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAgf3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"OrganizationDetails.d.ts","sourceRoot":"","sources":["../../../src/Components/OrganizationDetails/OrganizationDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAsCjD,OAAO,EAEL,wBAAwB,EAEzB,MAAM,4BAA4B,CAAC;AAyCpC,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+hB3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -10,6 +10,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
 const CreateOrgModal_1 = __importDefault(require("./CreateOrgModal"));
 const DeleteOrgModal_1 = __importDefault(require("./DeleteOrgModal"));
 const DEFAULT_LABELS = {
@@ -23,6 +24,7 @@ const DEFAULT_LABELS = {
     setAsDefault: "Set as Default",
     settingDefault: "Setting...",
     default: "Default",
+    owner: "Owner",
     pending: "Pending",
     accept: "Accept",
     accepting: "Accepting...",
@@ -48,7 +50,7 @@ const DEFAULT_LABELS = {
     copyright: "Pixelize Corp. All rights reserved.",
     termsOfService: "Terms of Service",
 };
-const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
+const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -102,21 +104,28 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
         setEditError("");
     };
     const renderActiveCard = (item) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const isSwitching = switchingOrgIds.includes(item.orgId);
-        const isProtected = item.defaultOrg === 1;
-        const isEditingThis = editingOrgId === item.orgId;
+        // Role name is a display value, not a permission — apps pass the real rule.
+        const canEdit = (_a = item.canRename) !== null && _a !== void 0 ? _a : item.roleName === "Super Admin";
+        const canProtect = !((_b = item.canDelete) !== null && _b !== void 0 ? _b : item.roleName === "Super Admin");
+        const isProtected = item.defaultOrg === 1 || canProtect;
+        const isEditingThis = canEdit && editingOrgId === item.orgId;
         const isSavingThis = editingOrgIds.includes(item.orgId);
+        const roleLabel = (_c = item.roleName) === null || _c === void 0 ? void 0 : _c.trim();
+        const deleteButton = ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.deleteOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }), size: "xs", variant: "ghost", borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
+                bg: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#FEF2F2",
+                color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#DC2626",
+            }, onClick: () => onDeleteRequest
+                ? onDeleteRequest(item.orgId)
+                : setDeleteOrgId(item.orgId) }));
         return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
-                borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#A5B4FC",
+                borderColor: (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : "#A5B4FC",
                 boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: primary500, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: primary600, bg: primary50 }, onClick: () => startEditing(item) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
-                                        ? labels.protectedOrganization
-                                        : labels.deleteOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.deleteOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }), size: "xs", variant: "ghost", borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
-                                            bg: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.red) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#FEF2F2",
-                                            color: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600]) !== null && _f !== void 0 ? _f : "#DC2626",
-                                        }, onClick: () => setDeleteOrgId(item.orgId) }) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: primary500, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: primary600, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+                                        ? ((_k = item.deleteDisabledReason) !== null && _k !== void 0 ? _k : labels.protectedOrganization)
+                                        : labels.deleteOrganization, hasArrow: true, children: isProtected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
                                         if (editError)
                                             setEditError("");
@@ -125,7 +134,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
                                             submitEditing(item);
                                         if (e.key === "Escape")
                                             cancelEditing();
-                                    } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.save, icon: isSavingThis ? (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.cancel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.7rem", color: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[600]) !== null && _h !== void 0 ? _h : "#DC2626", mt: 1, children: editError }))] })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }))] }, item.orgId));
+                                    } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.save, icon: isSavingThis ? (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs" }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.cancel, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.7rem", color: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.red) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : "#DC2626", mt: 1, children: editError }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, mt: 1, children: [item.isOwner && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: labels.owner, icon: lucide_react_1.Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
     };
     const renderInvitedCard = (item) => {
         var _a, _b, _c, _d;

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts

@@ -9,6 +9,18 @@ export type OrganizationItem = {
     uiInvite: number;
     /** 1 when the org is protected and cannot be deleted. */
     defaultOrg: number;
+    roleName?: string;
+    /** True when the current user owns this org; the app computes ownership. */
+    isOwner?: boolean;
+    /** Overrides the role-name check for the rename control. */
+    canRename?: boolean;
+    /** Overrides the role-name check for the delete control. */
+    canDelete?: boolean;
+    /**
+     * Why delete is unavailable for this organization, shown on the disabled
+     * control. Falls back to `labels.protectedOrganization` when not supplied.
+     */
+    deleteDisabledReason?: string;
 };
 export type CreateOrgFormValues = {
     company_name: string;
@@ -28,6 +40,7 @@ export type OrganizationDetailsLabels = {
     setAsDefault?: string;
     settingDefault?: string;
     default?: string;
+    owner?: string;
     pending?: string;
     accept?: string;
     accepting?: string;
@@ -74,7 +87,17 @@ export interface OrganizationDetailsProps {
     onSetDefault?: (orgId: number) => void | Promise<void>;
     onAcceptInvite?: (orgId: number) => void | Promise<void>;
     onDeclineInvite?: (orgId: number) => void | Promise<void>;
+    /**
+     * Called once the built-in confirm modal is accepted. Never called when
+     * `onDeleteRequest` is supplied — that app owns the whole delete.
+     */
     onDeleteOrganization?: (orgId: number) => void | Promise<void>;
+    /**
+     * Called on trash-click *instead of* opening the built-in confirm modal, so
+     * the app can run its own preview and confirmation. Supplying it suppresses
+     * both the modal and `onDeleteOrganization`; omit it to keep the built-in flow.
+     */
+    onDeleteRequest?: (orgId: number) => void | Promise<void>;
     onCreateOrganization?: (values: CreateOrganizationValues) => void | Promise<void>;
     /** Called when the user confirms a new name for an organization */
     onEditOrganization?: (orgId: number, newName: string) => void | Promise<void>;

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationDetailsProps.d.ts","sourceRoot":"","sources":["../../../src/Components/OrganizationDetails/OrganizationDetailsProps.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"OrganizationDetailsProps.d.ts","sourceRoot":"","sources":["../../../src/Components/OrganizationDetails/OrganizationDetailsProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,wBAAwB;IACvC,mBAAmB,EAAE,gBAAgB,EAAE,CAAC;IACxC,oBAAoB,EAAE,gBAAgB,EAAE,CAAC;IAEzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,oFAAoF;IACpF,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,oBAAoB,CAAC,EAAE,CACrB,MAAM,EAAE,wBAAwB,KAC7B,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,MAAM,EAAE,QAAQ,CACd,IAAI,CACF,yBAAyB,EACvB,oBAAoB,GACpB,aAAa,GACb,gBAAgB,GAChB,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,eAAe,GACf,cAAc,CACjB,CACF,CAAC;CACH;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,QAAQ,CACd,IAAI,CACF,yBAAyB,EACzB,iBAAiB,GAAG,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,CAC9D,CACF,CAAC;CACH"}

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"}