pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -36,52 +36,54 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var MenuItemBox_1 = __importDefault(require("./MenuItemBox"));
-var MenuItems = function (_a) {
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, selectedSubMenu = _a.selectedSubMenu;
-    var _b = (0, react_1.useState)(null), openMenuId = _b[0], setOpenMenuId = _b[1];
-    var _c = (0, react_1.useState)(null), lastClickY = _c[0], setLastClickY = _c[1];
-    (0, react_1.useEffect)(function () {
-        var parent = menus.find(function (m) { var _a; return (_a = m.subMenu) === null || _a === void 0 ? void 0 : _a.some(function (s) { return s.id === activeMenu; }); });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const MenuItemBox_1 = __importDefault(require("./MenuItemBox"));
+const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, containerId, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [openMenuId, setOpenMenuId] = (0, react_1.useState)(null);
+    const [lastClickY, setLastClickY] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const parent = menus.find((m) => { var _a; return (_a = m.subMenu) === null || _a === void 0 ? void 0 : _a.some((s) => s.id === activeMenu); });
         if (parent) {
             setOpenMenuId(parent.id);
         }
-        else if (menus.some(function (m) { return m.id === activeMenu; })) {
+        else if (menus.some((m) => m.id === activeMenu)) {
             setOpenMenuId(activeMenu);
         }
     }, [activeMenu, menus]);
-    var handleToggle = function (menu, clickY) {
-        setOpenMenuId(function (prev) { return (prev === menu.id ? null : menu.id); });
+    const handleToggle = (0, react_1.useCallback)((menu, clickY) => {
+        setOpenMenuId((prev) => (prev === menu.id ? null : menu.id));
         if (typeof clickY === "number")
             setLastClickY(clickY);
-    };
-    (0, react_1.useEffect)(function () {
+    }, []);
+    (0, react_1.useEffect)(() => {
         if (openMenuId == null)
             return;
-        var container = document.getElementById("sidebar-scroll-container");
+        const container = document.getElementById(containerId);
         if (!container)
             return;
-        var collapse = container.querySelector("[data-collapse=\"true\"][data-menu-id=\"".concat(openMenuId, "\"][data-open=\"true\"]"));
-        var header = container.querySelector("[data-menu-id=\"".concat(openMenuId, "\"]"));
+        const collapse = container.querySelector(`[data-collapse="true"][data-menu-id="${openMenuId}"][data-open="true"]`);
+        const header = container.querySelector(`[data-menu-id="${openMenuId}"]`);
         if (!collapse)
             return;
-        var cRect = container.getBoundingClientRect();
-        var tRect = collapse.getBoundingClientRect();
-        var hRect = header === null || header === void 0 ? void 0 : header.getBoundingClientRect();
-        var topGap = 16;
-        var bottomGap = 16;
+        const cRect = container.getBoundingClientRect();
+        const tRect = collapse.getBoundingClientRect();
+        const hRect = header === null || header === void 0 ? void 0 : header.getBoundingClientRect();
+        const topGap = 16;
+        const bottomGap = 16;
         if (lastClickY != null) {
             if (hRect) {
-                var toTop = container.scrollTop + (hRect.top - cRect.top) - topGap;
+                const toTop = container.scrollTop + (hRect.top - cRect.top) - topGap;
                 container.scrollTo({
                     top: Math.max(toTop, 0),
                     behavior: "smooth",
                 });
-                requestAnimationFrame(function () {
-                    var ncRect = container.getBoundingClientRect();
-                    var ntRect = collapse.getBoundingClientRect();
+                requestAnimationFrame(() => {
+                    const ncRect = container.getBoundingClientRect();
+                    const ntRect = collapse.getBoundingClientRect();
                     if (ntRect.bottom > ncRect.bottom - bottomGap) {
                         container.scrollTo({
                             top: container.scrollTop +
@@ -92,7 +94,7 @@ var MenuItems = function (_a) {
                 });
             }
             else {
-                var delta = tRect.bottom - lastClickY;
+                const delta = tRect.bottom - lastClickY;
                 if (delta > 0) {
                     container.scrollTo({
                         top: container.scrollTop + delta + bottomGap,
@@ -107,9 +109,9 @@ var MenuItems = function (_a) {
                     top: container.scrollTop + (hRect.top - cRect.top) - topGap,
                     behavior: "smooth",
                 });
-                requestAnimationFrame(function () {
-                    var ncRect = container.getBoundingClientRect();
-                    var ntRect = collapse.getBoundingClientRect();
+                requestAnimationFrame(() => {
+                    const ncRect = container.getBoundingClientRect();
+                    const ntRect = collapse.getBoundingClientRect();
                     if (ntRect.bottom > ncRect.bottom - bottomGap) {
                         container.scrollTo({
                             top: container.scrollTop +
@@ -132,10 +134,21 @@ var MenuItems = function (_a) {
                 });
             }
         }
-    }, [openMenuId, lastClickY]);
-    return (react_1.default.createElement(react_2.Box, null, 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 }));
-    })));
+    }, [openMenuId, lastClickY, containerId]);
+    // 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).
+    let lastGroup;
+    let groupCount = 0;
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", flexDirection: "column", gap: "2px", children: menus.map((menu, idx) => {
+            var _a, _b, _c;
+            const showGroup = !!menu.group && menu.group !== lastGroup;
+            const isFirstGroup = showGroup && groupCount === 0;
+            if (showGroup) {
+                lastGroup = menu.group;
+                groupCount += 1;
+            }
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle })] }, `${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)}-${idx}`));
+        }) }));
 };
-exports.default = MenuItems;
+exports.default = (0, react_1.memo)(MenuItems);

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

@@ -3,53 +3,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-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; });
-    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)) {
-                    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),
-            (function () {
-                var _a, _b, _c;
-                var isObj = typeof badge === "object" && badge !== null;
-                var value = isObj ? badge.count : badge;
-                var colorScheme = (_a = (isObj ? badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
-                var radius = (_b = (isObj ? badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
-                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 :
-        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",
-                    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 () {
-                    var _a, _b, _c;
-                    var isObj = typeof sub.badge === "object" && sub.badge !== null;
-                    var value = isObj ? sub.badge.count : sub.badge;
-                    var colorScheme = (_a = (isObj ? sub.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
-                    var radius = (_b = (isObj ? sub.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
-                    var variant = (_c = (isObj ? sub.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;
-                })()));
-        })));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const menuDisabled_1 = require("../menuDisabled");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const sidebarFocus_1 = require("../sidebarFocus");
+const sidebarScale_1 = require("../sidebarScale");
+const sidebarMotion_1 = require("../sidebarMotion");
+const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const { title, icon, subMenu, badge, locked, lockedReason } = menu;
+    const isBlocked = (0, menuDisabled_1.menuDisabled)(menu) || locked;
+    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    const isParentActive = activeMenu === menu.id;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: 2, px: 2, h: "32px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? theme.colors.sidebar.divider : undefined, borderRadius: hasSubMenu ? "none" : "lg", bg: !hasSubMenu && isParentActive ? "whiteAlpha.300" : "transparent", _hover: !hasSubMenu && !isBlocked
+                    ? { bg: isParentActive ? "whiteAlpha.400" : "whiteAlpha.200" }
+                    : undefined, onClick: (e) => {
+                    if (!hasSubMenu) {
+                        e.preventDefault();
+                        if (!isBlocked)
+                            handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
+                    }
+                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, sx: hasSubMenu ? undefined : (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors, theme.colors.sidebar.elevated), children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "md", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, flex: "1", color: theme.colors.white, children: title }), (() => {
+                        var _a, _b, _c, _d;
+                        const cfg = typeof badge === "object" && badge !== null
+                            ? badge
+                            : null;
+                        const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+                        if (value == null)
+                            return null;
+                        const colorScheme = (_b = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _b !== void 0 ? _b : "teal";
+                        const radius = (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full";
+                        const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                        const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated));
+                        return ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
+                    })(), locked && (lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })))] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
+                var _a;
+                const isSubActive = activeMenu === sub.id;
+                const isSubBlocked = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", onClick: (e) => {
+                        e.preventDefault();
+                        if (!isSubBlocked)
+                            handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub);
+                    }, px: 2, h: sidebarScale_1.SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                        bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
+                        cursor: !isSubBlocked ? "pointer" : "not-allowed",
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors, theme.colors.sidebar.elevated), children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
+                            var _a, _b, _c, _d;
+                            const cfg = typeof sub.badge === "object" && sub.badge !== null
+                                ? sub.badge
+                                : null;
+                            const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                            if (value == null)
+                                return null;
+                            const colorScheme = (_b = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _b !== void 0 ? _b : "teal";
+                            const radius = (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full";
+                            const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                            const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated));
+                            return ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
+                        })()] }, sub.id || sub.title));
+            })] }));
 };
 exports.default = MenuPopoverContent;

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

@@ -3,36 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-var OtherApps = function (_a) {
-    var toggle = _a.toggle, otherApps = _a.otherApps;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const zIndices_1 = __importDefault(require("../../../Theme/tokens/primitives/zIndices"));
+const sidebarFocus_1 = require("../sidebarFocus");
+const sidebarMotion_1 = require("../sidebarMotion");
+const OtherApps = ({ toggle, otherApps }) => {
+    const 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 flyoutBody = function (app) {
+    const appIcon = (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))));
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
-    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 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.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)));
-        })));
+    // Grid cell: icon on top, truncated label below (label hidden when collapsed).
+    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const flyoutBody = (app) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: zIndices_1.default.popover, color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
 };
 exports.default = OtherApps;

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

@@ -1,92 +1,35 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
-var OverflowTooltipText = function (_a) {
-    var children = _a.children, _b = _a.placement, placement = _b === void 0 ? "bottom" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "100%" : _c, _d = _a.isTooltipDisabled, isTooltipDisabled = _d === void 0 ? false : _d, textProps = __rest(_a, ["children", "placement", "maxWidth", "isTooltipDisabled"]);
-    var textRef = (0, react_1.useRef)(null);
-    var shadowRef = (0, react_1.useRef)(null);
-    var _e = (0, react_1.useState)(false), isTruncated = _e[0], setIsTruncated = _e[1];
-    (0, react_1.useEffect)(function () {
-        var checkTruncation = function () {
-            var textEl = textRef.current;
-            var shadowEl = shadowRef.current;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const sharedResizeObserver_1 = require("../../../Hooks/sharedResizeObserver");
+const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%", isTooltipDisabled = false, ...textProps }) => {
+    const textRef = (0, react_1.useRef)(null);
+    const shadowRef = (0, react_1.useRef)(null);
+    const [isTruncated, setIsTruncated] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const checkTruncation = () => {
+            const textEl = textRef.current;
+            const shadowEl = shadowRef.current;
             if (textEl && shadowEl) {
-                var visibleWidth = textEl.offsetWidth;
-                var fullTextWidth = shadowEl.scrollWidth;
+                const visibleWidth = textEl.offsetWidth;
+                const fullTextWidth = shadowEl.scrollWidth;
                 setIsTruncated(fullTextWidth > visibleWidth + 1);
             }
         };
         checkTruncation();
-        var resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return function () { return resizeObserver.disconnect(); };
+        if (!textRef.current)
+            return;
+        return (0, sharedResizeObserver_1.observeResize)(textRef.current, checkTruncation);
     }, [children]);
-    var shouldShowTooltip = isTruncated && !isTooltipDisabled;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ToolTip_1.default, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
-            react_1.default.createElement(react_2.Text, __assign({ ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: maxWidth }, textProps), children)),
-        react_1.default.createElement(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: textProps.fontSize, fontWeight: textProps.fontWeight, fontFamily: textProps.fontFamily, lineHeight: textProps.lineHeight, px: textProps.px, py: textProps.py }, children)));
+    const shouldShowTooltip = isTruncated && !isTooltipDisabled;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
+                    // NOTE: padding lifts descenders out of the clip box; margin keeps the label's height.
+                    py: "0.35em", my: "-0.35em", textOverflow: "ellipsis", maxW: maxWidth, ...textProps, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: textProps.fontSize, fontWeight: textProps.fontWeight, fontFamily: textProps.fontFamily, lineHeight: textProps.lineHeight, px: textProps.px, py: textProps.py, children: children })] }));
 };
 exports.default = OverflowTooltipText;

package/dist/Components/SideBar/components/PinnedSection.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { SidebarPinnedItem, SidebarPinnedLabels } from "../SideBarProps";
+export declare const DEFAULT_PINNED_LABEL = "Pinned";
+export declare const DEFAULT_PINNED_LIMIT = 5;
+type PinnedSectionProps = {
+    items: SidebarPinnedItem[];
+    label?: string;
+    limit?: number;
+    toggle: boolean;
+    overlay: boolean;
+    activeId?: string | number | null;
+    labels?: SidebarPinnedLabels;
+    onItemClick: (item: SidebarPinnedItem) => void;
+    onUnpin?: (item: SidebarPinnedItem) => void;
+};
+declare const PinnedSection: React.FC<PinnedSectionProps>;
+export default PinnedSection;

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

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PINNED_LIMIT = exports.DEFAULT_PINNED_LABEL = void 0;
+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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const sidebarFocus_1 = require("../sidebarFocus");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const sidebarId_1 = require("../sidebarId");
+const sidebarScale_1 = require("../sidebarScale");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const MenuItemBox_1 = require("./MenuItemBox");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("../sidebarMotion");
+exports.DEFAULT_PINNED_LABEL = "Pinned";
+exports.DEFAULT_PINNED_LIMIT = 5;
+const DEFAULT_LABELS = {
+    showMore: "Show {count} more",
+    showLess: "Show less",
+    unpin: "Unpin {title}",
+};
+const UNPIN_SIZE = "24px";
+const UNPIN_TRANSITION = (0, motion_1.transitionFor)(["opacity", "background"]);
+const LADDER = { hover: "whiteAlpha.200", active: "whiteAlpha.300", activeHover: "whiteAlpha.400" };
+const VISUALLY_HIDDEN = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+const readBadge = (badge) => {
+    var _a;
+    const cfg = typeof badge === "object" && badge !== null ? badge : null;
+    const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    return { cfg, value };
+};
+const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = exports.DEFAULT_PINNED_LIMIT, toggle, overlay, activeId, labels, onItemClick, onUnpin, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const headingId = `pinned-${(0, sidebarId_1.sanitizeId)((0, react_1.useId)())}`;
+    const cap = Math.max(1, limit);
+    const activeIndex = activeId == null ? -1 : items.findIndex((i) => String(i.id) === String(activeId));
+    const [showAll, setShowAll] = (0, react_1.useState)(activeIndex >= cap);
+    (0, react_1.useEffect)(() => {
+        if (activeIndex >= cap)
+            setShowAll(true);
+    }, [activeIndex, cap]);
+    if (items.length === 0)
+        return null;
+    const hiddenCount = Math.max(0, items.length - cap);
+    const visible = showAll ? items : items.slice(0, cap);
+    const badgeSurface = (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]);
+    const unpinReplacesBadge = !!onUnpin && !overlay;
+    const renderBadge = (badge) => {
+        var _a, _b, _c;
+        const { cfg, value } = readBadge(badge);
+        if (value == null)
+            return null;
+        const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, (_a = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _a !== void 0 ? _a : "teal"), badgeSurface);
+        return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: (_b = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _b !== void 0 ? _b : "subtle", borderRadius: (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full", ...(unpinReplacesBadge
+                ? { _groupHover: { opacity: 0 }, _groupFocusWithin: { opacity: 0 } }
+                : {}), children: value }));
+    };
+    const renderRow = (item) => {
+        const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
+        const anchor = ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: sidebarScale_1.SIDEBAR_ROW.height, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: 500, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: (e) => {
+                if (item.url && (0, MenuItemBox_1.isBrowserNavigationGesture)(e))
+                    return;
+                e.preventDefault();
+                onItemClick(item);
+            }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), toggle && readBadge(item.badge).value != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isActive ? activeAccent.label : theme.colors.white, fontWeight: isActive ? 600 : 500, _groupHover: isActive ? undefined : { color: theme.colors.white }, children: item.title }))] }), !toggle && renderBadge(item.badge)] }) }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "li", listStyleType: "none", position: "relative", "data-group": "", children: [toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.title, placement: "right", children: anchor })) : (anchor), onUnpin && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.unpin.replace("{title}", item.title), onClick: () => onUnpin(item), position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: UNPIN_SIZE, h: UNPIN_SIZE, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "lg", border: "none", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedIcon, opacity: overlay ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, _hover: {
+                        bg: LADDER.active,
+                        color: theme.colors.white,
+                    }, transition: UNPIN_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.PinOff, fontSize: "sm" }) }))] }, String(item.id)));
+    };
+    const disclosureLabel = showAll
+        ? text.showLess
+        : text.showMore.replace("{count}", String(hiddenCount));
+    const disclosureButton = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: sidebarScale_1.SIDEBAR_ROW.height, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: 500, _hover: {
+            backgroundColor: LADDER.hover,
+            color: theme.colors.white,
+        }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: showAll ? lucide_react_1.ChevronUp : lucide_react_1.ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && (0, jsx_runtime_1.jsx)("span", { children: disclosureLabel })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: headingId, as: "h2", px: "10px", pt: "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", children: toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: "8px", mb: "5px" })] }));
+};
+exports.default = PinnedSection;

package/dist/Components/SideBar/components/TextTruncation.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 import { TextProps } from "@chakra-ui/react";
 interface TruncatedTextWithTooltipProps extends TextProps {
     children: string;
-    open?: boolean;
 }
 declare const TruncatedTextWithTooltip: React.FC<TruncatedTextWithTooltipProps>;
 export default TruncatedTextWithTooltip;