pixelize-design-library 2.2.197 → 2.3.1-beta.1

package/dist/Components/SideBar/SideBar.js

@@ -59,56 +59,73 @@ var OverflowTooltipText_1 = __importDefault(require("./components/OverflowToolti
 var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
 var OtherApps_1 = __importDefault(require("./components/OtherApps"));
 var SidebarHeader = function (_a) {
-    var logo = _a.logo, companyName = _a.companyName, toggle = _a.toggle, isLoading = _a.isLoading;
+    var logo = _a.logo, companyName = _a.companyName, companySubtitle = _a.companySubtitle, toggle = _a.toggle, isLoading = _a.isLoading, onToggle = _a.onToggle;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
-        return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
-            react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4 },
-            react_1.default.createElement(react_2.Skeleton, { w: "25px", h: "25px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
-            react_1.default.createElement(react_2.Skeleton, { h: "1.5rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
+        return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%" },
+            react_1.default.createElement(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, w: "100%" },
+            react_1.default.createElement(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }),
+            react_1.default.createElement(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
     }
-    if (logo) {
-        return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
-            react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
-            !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2, isTruncated: true, width: "100%" }, companyName)))));
-    }
-    return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem", minW: 0, overflow: "hidden" },
-        react_1.default.createElement(react_2.Box, { bg: theme.colors.white, color: theme.colors.black, borderRadius: "full", boxSize: "2rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", fontSize: { base: "xl", md: "2xl" } },
-            react_1.default.createElement(defaultLogo_1.default, null)),
+    var logoNode = logo ? (react_1.default.createElement(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : (react_1.default.createElement(react_2.Box, { bg: theme.colors.primary[500], color: theme.colors.white, borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined },
+        react_1.default.createElement(defaultLogo_1.default, null)));
+    return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0 },
+        logoNode,
         !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "left", color: theme.colors.white, lineHeight: 2, as: "p", width: "100%" }, companyName !== null && companyName !== void 0 ? companyName : "")))));
+            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%" }, companyName !== null && companyName !== void 0 ? companyName : ""),
+            companySubtitle && (react_1.default.createElement(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true }, companySubtitle)))),
+        !toggle && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: onToggle, "aria-label": "Collapse sidebar", w: "22px", h: "22px", borderRadius: "5px", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s" },
+            react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 })))));
 };
 var SkeletonMenuRow = function (_a) {
     var toggle = _a.toggle;
-    return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 3 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 4, justifyContent: "center" },
-        react_1.default.createElement(react_2.Skeleton, { w: "30px", h: "30px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 5 },
-        react_1.default.createElement(react_2.Skeleton, { w: "20px", h: "20px", borderRadius: "2rem", startColor: "gray.600", endColor: "gray.500" }),
-        react_1.default.createElement(react_2.Skeleton, { h: "1rem", w: "85%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
+    return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2 }, toggle ? (react_1.default.createElement(react_2.Flex, { align: "center", gap: 4, justifyContent: "center" },
+        react_1.default.createElement(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }))) : (react_1.default.createElement(react_2.Flex, { align: "center", gap: 3 },
+        react_1.default.createElement(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }),
+        react_1.default.createElement(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })))));
 };
 var AddNewButton = function (_a) {
-    var toggle = _a.toggle, isLoading = _a.isLoading, onClick = _a.onClick;
+    var toggle = _a.toggle, onClick = _a.onClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    if (isLoading) {
-        return (react_1.default.createElement(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2 },
-            react_1.default.createElement(react_2.Skeleton, { height: "1.25rem", borderRadius: "md" })));
-    }
-    return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[500] }, w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onClick },
-        react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", bg: theme.colors.white, borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" },
-            react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[500] })),
-        react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: theme.colors.white, fontWeight: "medium", display: toggle ? "none" : "block" }, "Add New")));
+    return (react_1.default.createElement(react_2.Flex, { role: "group", alignItems: "center", gap: "9px", px: "10px", py: "7px", borderRadius: "7px", cursor: "pointer", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick },
+        react_1.default.createElement(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
+            react_1.default.createElement(lucide_react_1.Plus, { size: 16, color: theme.colors.primary[300] })),
+        !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium" }, "Add New"))));
+};
+var deriveInitials = function (user) {
+    if (user.initials)
+        return user.initials;
+    var parts = user.name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "";
+    if (parts.length === 1)
+        return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+};
+var UserFooter = function (_a) {
+    var user = _a.user, toggle = _a.toggle;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var avatar = user.avatarUrl ? (react_1.default.createElement(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : (react_1.default.createElement(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: theme.colors.primary[300], display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: 600, flexShrink: 0 }, deriveInitials(user)));
+    return (react_1.default.createElement(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", flexShrink: 0 },
+        react_1.default.createElement(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: "8px", px: "8px", py: "6px", w: "100%", borderRadius: "7px", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s" },
+            avatar,
+            !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, textAlign: "left" },
+                react_1.default.createElement(react_2.Text, { fontSize: "11.5px", fontWeight: 500, color: "whiteAlpha.800", isTruncated: true }, user.name),
+                user.role && (react_1.default.createElement(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", isTruncated: true }, user.role)))),
+            !toggle && react_1.default.createElement(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.white, opacity: 0.3 }))));
 };
 var CollapseButton = function (_a) {
     var toggle = _a.toggle, onToggle = _a.onToggle;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", cursor: "pointer", w: "100%", justifyContent: toggle ? "center" : "flex-start", onClick: onToggle, transition: "all 0.5s", bg: theme.colors.gray[700] },
-        react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "1.625rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center" }, toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 16, color: theme.colors.white })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 16, color: theme.colors.white }))),
-        react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", color: "white", fontWeight: "medium", display: toggle ? "none" : "block" }, "Collapse")));
+    return (react_1.default.createElement(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "6px", flexShrink: 0 },
+        react_1.default.createElement(react_2.Flex, { alignItems: "center", justifyContent: "center", gap: "7px", px: "8px", py: "5px", borderRadius: "6px", cursor: "pointer", w: toggle ? "auto" : "100%", mx: toggle ? "auto" : 0, bg: "whiteAlpha.100", onClick: onToggle, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s" },
+            toggle ? (react_1.default.createElement(lucide_react_1.ArrowRightToLine, { size: 14, color: theme.colors.white, opacity: 0.6 })) : (react_1.default.createElement(lucide_react_1.ArrowLeftToLine, { size: 14, color: theme.colors.white, opacity: 0.6 })),
+            !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "11.5px", color: "whiteAlpha.700", fontWeight: "medium" }, "Collapse")))));
 };
 // --- Main Sidebar component ---
 function Sidebar(_a) {
     var _b;
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines, _d = _a.open, open = _d === void 0 ? true : _d, otherApps = _a.otherApps;
+    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, companySubtitle = _a.companySubtitle, user = _a.user, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines, _d = _a.open, open = _d === void 0 ? true : _d, otherApps = _a.otherApps;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     // Refs let the effects read the latest values without adding them to dep arrays,
     // which would cause infinite toggle loops since changeToggle flips state.
@@ -133,18 +150,16 @@ function Sidebar(_a) {
             changeToggleRef.current();
         }
     }, [secondaryItems.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500] },
+    return (react_1.default.createElement(react_2.Box, { transition: "all 0.5s", position: "sticky", height: "100vh", boxShadow: theme.shadows.lg, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100" },
         react_1.default.createElement(react_2.Box, { width: toggle ? "4.688rem" : "13rem", transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between" },
-            react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", as: "nav", h: "100vh" },
-                react_1.default.createElement(SidebarHeader, { logo: logo, companyName: companyName, toggle: toggle, isLoading: isLoading }),
-                react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200] }),
-                react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
-                    react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading
-                        ? Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(SkeletonMenuRow, { key: i, toggle: toggle })); })
-                        : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
-                    react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
-                    !isDisableAddNew && (react_1.default.createElement(AddNewButton, { toggle: toggle, isLoading: isLoading, onClick: onAddNewClick })),
+            react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", h: "100vh" },
+                react_1.default.createElement(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: toggle, isLoading: isLoading, onToggle: changeToggle }),
+                react_1.default.createElement(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: "all 0.3s ease" }) }, isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(SkeletonMenuRow, { key: i, toggle: toggle })); })) : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
+                react_1.default.createElement(react_2.Box, { flexShrink: 0 },
+                    !isDisableAddNew && (react_1.default.createElement(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px" },
+                        react_1.default.createElement(AddNewButton, { toggle: toggle, onClick: onAddNewClick }))),
                     react_1.default.createElement(OtherApps_1.default, { toggle: toggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }),
+                    user && react_1.default.createElement(UserFooter, { user: user, toggle: toggle }),
                     react_1.default.createElement(CollapseButton, { toggle: toggle, onToggle: changeToggle })))),
-        secondaryItems.length > 0 && (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title }))));
+        secondaryItems.length > 0 && (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon }))));
 }

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -1,12 +1,21 @@
+export type SidebarUser = {
+    name: string;
+    role?: string;
+    avatarUrl?: string;
+    initials?: string;
+    onClick?: () => void;
+};
 export type SidebarProps = {
     menus: MenuProps[];
-    activeMenu: string;
+    activeMenu: string | number;
     handleMenuClick?: (menu: MenuProps) => void;
     handleSecondaryNavClick?: (menu: MenuProps) => void;
     toggle: boolean;
     changeToggle: () => void;
     logo?: string;
     companyName: string;
+    companySubtitle?: string;
+    user?: SidebarUser;
     isDisableAddNew?: boolean;
     onAddNewClick?: () => void;
     selectedSubMenu?: string | null;
@@ -19,7 +28,7 @@ export type SidebarProps = {
 export type MenuProps = {
     id: string | number;
     title: string;
-    icon: any;
+    icon?: any;
     url: string;
     disabled?: boolean;
     locked?: boolean;
@@ -31,10 +40,11 @@ export type MenuProps = {
     };
     subMenu?: MenuProps[];
     secondaryItems?: MenuProps[];
+    group?: string;
 };
 export type RenderMenuType = {
     menus: MenuProps[];
-    activeMenu: string;
+    activeMenu: string | number;
     handleMenuClick: (menu: MenuProps) => void;
     toggle: boolean;
     selectedSubMenu?: string | null;
@@ -50,6 +60,7 @@ export type SecondaryBarProps = {
     selected?: string | number | null;
     onItemClick?: (item: MenuProps) => void;
     title?: string;
+    icon?: any;
 };
 export type OtherAppsProps = {
     toggle: boolean;

package/dist/Components/SideBar/components/MenuItemBox.js

@@ -44,28 +44,36 @@ var MenuItemBox = function (_a) {
         if (!disabled)
             handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
     };
+    // Pill-style nav item. Active items use a translucent-purple fill + a left
+    // accent bar; idle items rely on a subtle white-overlay hover.
     var commonStyles = {
+        role: "group",
         w: "100%",
-        px: "1.5rem",
-        py: "0.75rem",
+        borderRadius: "7px",
+        px: "10px",
+        py: "7px",
         fontWeight: "medium",
-        backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent",
-        color: disabled ? "gray.400" : theme.colors.white,
+        borderLeft: "2px solid",
+        borderLeftColor: isAnyActive ? theme.colors.primary[500] : "transparent",
+        backgroundColor: isAnyActive ? theme.colors.primary.opacity[16] : "transparent",
+        color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
         _hover: disabled
             ? {}
             : {
-                backgroundColor: theme.colors.primary[700],
+                backgroundColor: isAnyActive
+                    ? theme.colors.primary.opacity[16]
+                    : "whiteAlpha.100",
             },
-        pl: toggle ? "1.6875rem" : undefined,
         cursor: disabled ? "not-allowed" : "pointer",
         opacity: disabled ? 0.6 : 1,
+        transition: "background 0.12s",
     };
-    var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", justify: "space-between" },
-        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", overflow: "hidden" },
-            react_1.default.createElement(react_2.Box, { position: "relative" },
-                react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1.25rem", verticalAlign: "middle", color: disabled ? theme.colors.gray[400] : theme.colors.white }),
+    var buttonContent = (react_1.default.createElement(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between" },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden" },
+            react_1.default.createElement(react_2.Box, { position: "relative", display: "flex", alignItems: "center" },
+                react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }),
                 toggle && (badgeValue != null || hasSubmenuBadge) && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))),
-            !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "1rem", lineHeight: "1", flex: "1" }, title))),
+            !toggle && (react_1.default.createElement(TextTruncation_1.default, { open: isOpen, fontSize: "13px", lineHeight: "1", flex: "1", color: isAnyActive ? theme.colors.primary[100] : "whiteAlpha.900", fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: "white" } }, title))),
         !toggle && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.375rem" },
             (function () {
                 var _a, _b, _c;
@@ -75,8 +83,8 @@ var MenuItemBox = function (_a) {
                 var variant = (_c = (isBadgeObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
                 return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
             })(),
-            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" }),
-            hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", onClick: function (e) {
+            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }),
+            hasSubMenu && (react_1.default.createElement(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", color: "whiteAlpha.400", onClick: function (e) {
                     e.stopPropagation();
                     handleToggleSubMenu(e);
                 } }))))));
@@ -86,29 +94,25 @@ var MenuItemBox = function (_a) {
             react_1.default.createElement(react_2.PopoverTrigger, null,
                 react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title) }), buttonContent)),
             react_1.default.createElement(react_2.Portal, null,
-                react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isAnyActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
+                react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
                     react_1.default.createElement(react_2.PopoverBody, { p: "0.625rem", color: "white" },
                         react_1.default.createElement(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }))))));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_2.Box, __assign({}, commonStyles, { onClick: function (e) { return handleToggleSubMenu(e); }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title) }), buttonContent),
         hasSubMenu && (react_1.default.createElement(react_2.Collapse, { in: isOpen, animateOpacity: true },
-            react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", sx: {
+            react_1.default.createElement(react_2.Box, { "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
                     transition: "opacity 0.28s ease, transform 0.28s ease",
                     opacity: isOpen ? 1 : 0,
                     transform: isOpen ? "translateY(0)" : "translateY(-6px)",
                 } }, subMenu.map(function (sub, sIdx) {
                 var _a, _b;
                 var isSubActive = activeMenu === sub.id;
-                return (react_1.default.createElement(react_2.Box, { key: "".concat(String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx), "-").concat(sIdx), py: "0.5rem", px: "1.25rem", pl: "3.3rem", fontSize: "0.875rem", backgroundColor: isAnyActive ? theme.colors.primary[500] : "transparent", borderLeft: isSubActive
-                        ? "0.188rem solid ".concat(theme.colors.background[300])
-                        : "0.188rem solid transparent", _hover: {
-                        backgroundColor: theme.colors.primary[700],
-                    }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: function () { return !sub.disabled && (handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub)); }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", color: theme.colors.white },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
-                        react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem", verticalAlign: "middle" }),
-                        react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", lineHeight: "1", open: isOpen }, sub.title)),
-                    sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
+                return (react_1.default.createElement(react_2.Box, { key: "".concat(String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx), "-").concat(sIdx), role: "group", py: "5px", pl: "30px", pr: "10px", borderRadius: "6px", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: function () { return !sub.disabled && (handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub)); }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s" },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1" },
+                        sub.icon ? (react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : (react_1.default.createElement(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? theme.colors.primary[300] : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })),
+                        react_1.default.createElement(TextTruncation_1.default, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", open: isOpen, color: isSubActive ? "whiteAlpha.900" : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" } }, sub.title)),
+                    sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (function () {
                         var _a, _b, _c;
                         var isObj = typeof sub.badge === "object" && sub.badge !== null;
                         var value = isObj ? sub.badge.count : sub.badge;

package/dist/Components/SideBar/components/MenuItems.js

@@ -133,9 +133,23 @@ var MenuItems = function (_a) {
             }
         }
     }, [openMenuId, lastClickY]);
-    return (react_1.default.createElement(react_2.Box, null, menus.map(function (menu, idx) {
+    // Derive section labels from the optional `group` field on menu items: a label
+    // is rendered the first time a new group value appears, with a divider before
+    // every group after the first (the label hides when collapsed, the divider stays).
+    var lastGroup;
+    var groupCount = 0;
+    return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", gap: "2px" }, menus.map(function (menu, idx) {
         var _a, _b, _c;
-        return (react_1.default.createElement(MenuItemBox_1.default, { key: "".concat(String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx), "-").concat(idx), menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle }));
+        var showGroup = !!menu.group && menu.group !== lastGroup;
+        var isFirstGroup = showGroup && groupCount === 0;
+        if (showGroup) {
+            lastGroup = menu.group;
+            groupCount += 1;
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, { key: "".concat(String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx), "-").concat(idx) },
+            showGroup && !isFirstGroup && (react_1.default.createElement(react_2.Box, { h: "1px", bg: "whiteAlpha.100", mx: "8px", my: "5px" })),
+            showGroup && !toggle && (react_1.default.createElement(react_2.Box, { "aria-hidden": "true", px: "10px", pt: "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: "whiteAlpha.600", whiteSpace: "nowrap", overflow: "hidden" }, menu.group)),
+            react_1.default.createElement(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle })));
     })));
 };
 exports.default = MenuItems;

package/dist/Components/SideBar/components/MenuPopoverContent.js

@@ -11,15 +11,17 @@ var TextTruncation_1 = __importDefault(require("./TextTruncation"));
 var MenuPopoverContent = function (_a) {
     var menu = _a.menu, handleMenuClick = _a.handleMenuClick, activeMenu = _a.activeMenu;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var title = menu.title, subMenu = menu.subMenu, badge = menu.badge, locked = menu.locked;
-    var isAnySubActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some(function (sub) { return sub.id === activeMenu; });
+    var title = menu.title, icon = menu.icon, subMenu = menu.subMenu, badge = menu.badge, locked = menu.locked;
+    var hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    var isParentActive = activeMenu === menu.id;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.625rem", mb: (subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) ? "0.5rem" : 0, onClick: function () {
-                if (!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length)) {
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "8px", px: "8px", py: hasSubMenu ? "6px" : "8px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? "whiteAlpha.100" : undefined, borderRadius: hasSubMenu ? 0 : "7px", bg: !hasSubMenu && isParentActive ? theme.colors.primary.opacity[16] : "transparent", _hover: !hasSubMenu ? { bg: "whiteAlpha.100" } : undefined, onClick: function () {
+                if (!hasSubMenu) {
                     handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
                 }
-            }, cursor: !(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) ? "pointer" : "default" },
-            react_1.default.createElement(TextTruncation_1.default, { fontWeight: "medium", fontSize: "1rem", flex: "1" }, title),
+            }, cursor: !hasSubMenu ? "pointer" : "default" },
+            react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? theme.colors.primary[300] : "whiteAlpha.700" }),
+            react_1.default.createElement(TextTruncation_1.default, { fontWeight: 600, fontSize: "13px", flex: "1", color: "whiteAlpha.900" }, title),
             (function () {
                 var _a, _b, _c;
                 var isObj = typeof badge === "object" && badge !== null;
@@ -29,19 +31,17 @@ var MenuPopoverContent = function (_a) {
                 var variant = (_c = (isObj ? badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
                 return value != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, value)) : null;
             })(),
-            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })), subMenu === null || subMenu === void 0 ? void 0 :
+            locked && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })), subMenu === null || subMenu === void 0 ? void 0 :
         subMenu.map(function (sub) {
             var isSubActive = activeMenu === sub.id;
-            return (react_1.default.createElement(react_2.Flex, { key: sub.id || sub.title, onClick: function () { return !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)); }, px: "1rem", py: "0.7rem", align: "center", justify: "space-between", gap: "0.75rem", _hover: {
-                    bg: !sub.disabled ? theme.colors.primary[500] : "transparent",
+            return (react_1.default.createElement(react_2.Flex, { key: sub.id || sub.title, role: "group", onClick: function () { return !sub.disabled && (handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub)); }, px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.primary[500] : "transparent", bg: isSubActive ? theme.colors.primary.opacity[16] : "transparent", _hover: {
+                    bg: !sub.disabled ? "whiteAlpha.100" : "transparent",
                     cursor: !sub.disabled ? "pointer" : "not-allowed",
-                }, bg: isAnySubActive ? theme.colors.primary[500] : theme.colors.primary[700], borderLeft: isSubActive
-                    ? "0.188rem solid ".concat(theme.colors.background[300])
-                    : "0.188rem solid transparent", color: "white", opacity: sub.disabled ? 0.5 : 1, pointerEvents: sub.disabled ? "none" : "auto" },
-                react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", overflow: "auto" },
-                    react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "1rem" }),
-                    react_1.default.createElement(TextTruncation_1.default, { fontSize: "0.875rem", fontWeight: "medium", flex: 1 }, sub.title)),
-                sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem" })) : (function () {
+                }, opacity: sub.disabled ? 0.5 : 1, pointerEvents: sub.disabled ? "none" : "auto", transition: "background 0.12s" },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1" },
+                    react_1.default.createElement(react_2.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }),
+                    react_1.default.createElement(TextTruncation_1.default, { fontSize: "12.5px", fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? theme.colors.primary[100] : "whiteAlpha.900", _groupHover: isSubActive ? undefined : { color: "white" } }, sub.title)),
+                sub.locked ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (function () {
                     var _a, _b, _c;
                     var isObj = typeof sub.badge === "object" && sub.badge !== null;
                     var value = isObj ? sub.badge.count : sub.badge;

package/dist/Components/SideBar/components/OtherApps.js

@@ -11,28 +11,30 @@ var OtherApps = function (_a) {
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!otherApps || otherApps.length === 0)
         return null;
-    var row = function (app) { return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.625rem", px: "0.625rem", py: "0.5rem", w: "100%", cursor: "pointer", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: theme.colors.primary[500] }, transition: "background 0.15s", onClick: app.onClick, as: "button", type: "button", border: "none", bg: "transparent", color: "inherit" },
-        react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, flexShrink: 0, boxShadow: "0 0 5px ".concat(app.color) }),
-        !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, textAlign: "left" },
-            react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", fontWeight: 500, color: theme.colors.white, isTruncated: true }, app.name),
-            app.description && (react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: theme.colors.gray[400], isTruncated: true }, app.description)))))); };
+    var appIcon = function (app) {
+        var _a;
+        return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", color: "whiteAlpha.500", fontSize: "15px", flexShrink: 0 }, (_a = app.icon) !== null && _a !== void 0 ? _a : (react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: "0 0 5px ".concat(app.color), flexShrink: 0 }))));
+    };
+    // Grid cell: icon on top, truncated label below (label hidden when collapsed).
+    var appCell = function (app) { return (react_1.default.createElement(react_2.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "6px", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: app.onClick },
+        appIcon(app),
+        !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "9.5px", color: "whiteAlpha.500", textAlign: "center", maxW: "44px", isTruncated: true }, app.name)))); };
     var flyoutBody = function (app) {
         var _a;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", mb: "0.25rem", onClick: app.onClick }, (_a = app.icon) !== null && _a !== void 0 ? _a : (react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: "0 0 5px ".concat(app.color), flexShrink: 0 })),
                 react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: 700, color: theme.colors.white }, app.name)),
-            app.description && (react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: theme.colors.gray[400] }, app.description))));
+            app.description && (react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: "whiteAlpha.600" }, app.description))));
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
-        !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "0.625rem", fontWeight: 600, color: theme.colors.gray[400], letterSpacing: "0.08em", textTransform: "uppercase", px: "0.625rem", pt: "0.5rem", pb: "0.25rem", w: "100%" }, "Other Apps")),
-        otherApps.map(function (app) {
+    return (react_1.default.createElement(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: toggle ? "6px" : "8px 6px", flexShrink: 0 },
+        !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "9.5px", fontWeight: 600, color: "whiteAlpha.400", letterSpacing: "0.1em", textTransform: "uppercase", px: "8px", pt: "2px", pb: "5px" }, "Switch app")),
+        react_1.default.createElement(react_2.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px" }, otherApps.map(function (app) {
             return toggle ? (react_1.default.createElement(react_2.Popover, { key: app.name, trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
                 react_1.default.createElement(react_2.PopoverTrigger, null,
-                    react_1.default.createElement(react_2.Box, { w: "100%" }, row(app))),
+                    react_1.default.createElement(react_2.Box, { w: "100%" }, appCell(app))),
                 react_1.default.createElement(react_2.Portal, null,
-                    react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: "white" },
-                        react_1.default.createElement(react_2.PopoverBody, { p: "0.75rem" }, flyoutBody(app)))))) : (react_1.default.createElement(react_2.Box, { key: app.name, w: "100%" }, row(app)));
-        })));
+                    react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: "white" },
+                        react_1.default.createElement(react_2.PopoverBody, { p: "0.75rem" }, flyoutBody(app)))))) : (react_1.default.createElement(react_2.Box, { key: app.name, w: "100%" }, appCell(app)));
+        }))));
 };
 exports.default = OtherApps;

package/dist/Components/Table/Components/TableBody.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
 import { TableBodyPageProps } from "../TableProps";
-declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, }: TableBodyPageProps) => React.JSX.Element;
+export declare const DENSITY_CONFIG: Record<string, {
+    height: number;
+    py: string;
+}>;
+declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }: TableBodyPageProps) => React.JSX.Element;
 export default TableBody;