npm - pixelize-design-library - Versions diffs - 2.2.121 → 2.2.123 - Mend

pixelize-design-library 2.2.121 → 2.2.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/Components/DatePicker/SingleDatePicker.js CHANGED Viewed

@@ -176,6 +176,7 @@ var getFormatForPickerType = function (pickerType, dateFormat) {
     if (pickerType === "time") {
         var hasDate = /[dDmMyY]/.test(dateFormat);
         if (hasDate) {
+            // eslint-disable-next-line no-useless-escape
             var timeMatch = dateFormat.match(/[dDmMyY\/\-\s\.]+\s*([hHmsSaA\/\-\s:]+)$/);
             if (timeMatch && timeMatch[1]) {
                 return timeMatch[1].trim();
@@ -185,27 +186,24 @@ var getFormatForPickerType = function (pickerType, dateFormat) {
     }
     return dateFormat;
 };
-var usesAmPm = function (format) { return /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(format); };
-var sanitizeTimeInput = function (raw, format) {
-    var _a;
-    var ampm = usesAmPm(format);
-    var only = raw.replace(/[^0-9aApPmM:\s]/g, "");
-    if (/H{1,2}:m{1,2}/.test(format) || /h{1,2}:m{1,2}/i.test(format)) {
-        var digits = only.replace(/[^0-9]/g, "");
-        var hh = digits.slice(0, 2);
-        var mm = digits.slice(2, 4);
-        var out = hh;
-        if (mm.length)
-            out += ":" + mm;
-        if (ampm) {
-            var suffix = (((_a = only.match(/(am|pm)/i)) === null || _a === void 0 ? void 0 : _a[0]) || "").toUpperCase();
-            if (suffix)
-                out += " " + suffix;
-        }
-        return out;
-    }
-    return only;
-};
+// const usesAmPm = (format: string): boolean => /(^|[^a-zA-Z])a([^a-zA-Z]|$)/i.test(format);
+// const sanitizeTimeInput = (raw: string, format: string): string => {
+//   const ampm = usesAmPm(format);
+//   const only = raw.replace(/[^0-9aApPmM:\s]/g, "");
+//   if (/H{1,2}:m{1,2}/.test(format) || /h{1,2}:m{1,2}/i.test(format)) {
+//     const digits = only.replace(/[^0-9]/g, "");
+//     const hh = digits.slice(0, 2);
+//     const mm = digits.slice(2, 4);
+//     let out = hh;
+//     if (mm.length) out += ":" + mm;
+//     if (ampm) {
+//       const suffix = (only.match(/(am|pm)/i)?.[0] || "").toUpperCase();
+//       if (suffix) out += " " + suffix;
+//     }
+//     return out;
+//   }
+//   return only;
+// };
 var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hour) {
     if (!tokenChar)
         return { value: rawBuffer, completed: rawBuffer.length >= segmentLength };
@@ -215,7 +213,7 @@ var normalizeTimeBuffer = function (tokenChar, rawBuffer, segmentLength, is12Hou
         return { value: buf, completed: buf.length >= segmentLength };
     }
     if (t === "h") {
-        var maxHour = is12Hour ? 12 : 24;
+        // const maxHour = is12Hour ? 12 : 24;
         if (buf.length === 1) {
             var d = parseInt(buf[0], 10);
             var firstMax = is12Hour ? 1 : 2;
@@ -338,7 +336,7 @@ var SingleDatePicker = function (props) {
     var _t = (0, react_1.useState)(""), inputValue = _t[0], setInputValue = _t[1];
     var _u = (0, react_1.useState)(false), isTyping = _u[0], setIsTyping = _u[1];
     var _v = (0, react_1.useState)(false), isMaskActive = _v[0], setIsMaskActive = _v[1];
-    var _w = (0, react_1.useState)(0), currentSegmentIndex = _w[0], setCurrentSegmentIndex = _w[1];
+    var _w = (0, react_1.useState)(0), setCurrentSegmentIndex = _w[1];
     var lastSegmentIndexRef = (0, react_1.useRef)(0);
     var resetCommitGuardAndOpen = function () {
         didCommitRef.current = false;
@@ -542,7 +540,7 @@ var SingleDatePicker = function (props) {
             document.removeEventListener("mousedown", handleClickOutside, true);
             document.removeEventListener("click", handleClickOutside, true);
         };
-    }, [isOpen, tempDate, activeFormat]);
+    }, [isOpen, tempDate, activeFormat]); // eslint-disable-line react-hooks/exhaustive-deps
     var ensureMaskValue = (0, react_1.useCallback)(function () {
         var _a, _b, _c, _d;
         if (!enableMask) {

package/dist/Components/DatePicker/TimeOnlyPicker.js CHANGED Viewed

@@ -30,7 +30,6 @@ exports.TimeOnlyPicker = void 0;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var date_fns_1 = require("date-fns");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var FormLabel_1 = require("../Common/FormLabel");
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
@@ -41,16 +40,15 @@ var formatToPlaceholder = function (formatStr) {
 };
 var TimeOnlyPicker = function (props) {
     var _a;
-    var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onOpen = _f.onOpen, onClose = _f.onClose;
+    var id = props.id, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, placeholderText = props.placeholderText, _b = props.dateFormat, dateFormat = _b === void 0 ? "HH:mm" : _b, disabled = props.disabled, _c = props.width, width = _c === void 0 ? "100%" : _c, _d = props.disableToday, disableToday = _d === void 0 ? false : _d;
+    var _e = (0, react_2.useDisclosure)(), isOpen = _e.isOpen, onOpen = _e.onOpen, onClose = _e.onClose;
     var popoverRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var inputWrapperRef = (0, react_1.useRef)(null);
     var today = new Date();
     var tomorrow = (0, date_fns_1.addDays)(today, 1);
     var selectedDate = ((_a = props.value) !== null && _a !== void 0 ? _a : props.selectedDate);
-    var _g = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _g[0], setTempDate = _g[1];
+    var _f = (0, react_1.useState)(selectedDate ? new Date(selectedDate) : null), tempDate = _f[0], setTempDate = _f[1];
     (0, react_1.useEffect)(function () {
         setTempDate(selectedDate ? new Date(selectedDate) : null);
     }, [selectedDate]);

package/dist/Components/DatePicker/TimePicker.js CHANGED Viewed

@@ -45,7 +45,7 @@ var TimePicker = function (_a) {
         if (is12HourFormat) {
             setAmpm(rawHour >= 12 ? "PM" : "AM");
         }
-    }, [date, is12HourFormat]);
+    }, [date, is12HourFormat]); // eslint-disable-line react-hooks/exhaustive-deps
     var convertTo24Hour = function (hr, meridiem) {
         if (meridiem === "AM")
             return hr === 12 ? 0 : hr;

package/dist/Components/DatePicker/TimePickerInput.js CHANGED Viewed

@@ -120,9 +120,9 @@ var TimePickerInput = function (_a) {
     var inputRef = (0, react_1.useRef)(null);
     var _c = (0, react_1.useState)(""), digits = _c[0], setDigits = _c[1];
     var digitsRef = (0, react_1.useRef)("");
-    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var _d = (0, react_1.useState)(false), setIsFocused = _d[1];
     var isFocusedRef = (0, react_1.useRef)(false);
-    var _e = (0, react_1.useState)("hour"), activeSegment = _e[0], setActiveSegment = _e[1];
+    var _e = (0, react_1.useState)("hour"), setActiveSegment = _e[1];
     var is12Hour = (0, react_1.useMemo)(function () { return /h{1,2}/i.test(dateFormat) && !/H{1,2}/.test(dateFormat); }, [dateFormat]);
     var placeholderText = (0, react_1.useMemo)(function () { return placeholder || formatToPlaceholder(dateFormat); }, [placeholder, dateFormat]);
     var ampmRef = (0, react_1.useRef)("AM");

package/dist/Components/FeedbackForm/FeedbackForm.js CHANGED Viewed

@@ -61,6 +61,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+// eslint-disable-next-line no-control-regex, no-useless-escape
 var emailRegex = /^(?:[a-zA-Z0-9_'^&\/+{}=?`|~!-]+(?:\.[a-zA-Z0-9_'^&\/+{}=?`|~!-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-zA-Z-]*[a-zA-Z]:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]+)\])$/;
 function FeedbackForm(props) {
     var _this = this;

package/dist/Components/Header/Header.js CHANGED Viewed

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
+var Sidebar_1 = require("../../Constants/Sidebar");
 var lucide_react_1 = require("lucide-react");
 var react_2 = __importStar(require("react"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
@@ -52,7 +53,7 @@ var Header = function (_a) {
         ? react_2.default.cloneElement(rightSlot, { closeMobileMenu: closeMobileMenu })
         : rightSlot;
     return (react_2.default.createElement(react_1.Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: 1000, position: "sticky" },
-        react_2.default.createElement(react_1.Flex, { minH: 16, align: "center", mx: "auto", justifyContent: "flex-start" },
+        react_2.default.createElement(react_1.Flex, { h: Sidebar_1.HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start" },
             react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center" },
                 react_2.default.createElement(react_1.Box, { cursor: "pointer" }, logo),
                 react_2.default.createElement(desktopMenu_1.default, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText })),

package/dist/Components/KanbanBoard/AccountCard.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
 import React from "react";
 import { Account, KanbanBoardProps } from "./KanbanBoardProps";
-declare const AccountCard: ({ account, index, onDelete, onOpen, isExpanded, onToggleExpand, }: {
+declare const AccountCard: ({ account, index, onDelete, onOpen, isExpanded, onToggleExpand, isDeletable, }: {
     account: Account;
     index: number;
     onDelete: KanbanBoardProps["onDelete"];
     onOpen: KanbanBoardProps["onOpen"];
     isExpanded?: boolean | undefined;
     onToggleExpand?: (() => void) | undefined;
+    isDeletable?: boolean | undefined;
 }) => React.JSX.Element;
 export default AccountCard;

package/dist/Components/KanbanBoard/AccountCard.js CHANGED Viewed

@@ -34,9 +34,9 @@ var AccountRow_1 = __importDefault(require("./AccountRow"));
 var excludeKeys = ["id", "details"];
 var AccountCard = function (_a) {
     var _b, _c, _d, _e, _f, _g;
-    var account = _a.account, index = _a.index, onDelete = _a.onDelete, onOpen = _a.onOpen, _h = _a.isExpanded, isExpanded = _h === void 0 ? false : _h, onToggleExpand = _a.onToggleExpand;
+    var account = _a.account, index = _a.index, onDelete = _a.onDelete, onOpen = _a.onOpen, _h = _a.isExpanded, isExpanded = _h === void 0 ? false : _h, onToggleExpand = _a.onToggleExpand, _j = _a.isDeletable, isDeletable = _j === void 0 ? true : _j;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _j = (0, react_1.useState)(false), showMore = _j[0], setShowMore = _j[1];
+    var _k = (0, react_1.useState)(false), showMore = _k[0], setShowMore = _k[1];
     var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
     var visibleKeys = isExpanded ? keys : keys.slice(0, 4);
     // Handle the show more/less toggle
@@ -57,9 +57,9 @@ var AccountCard = function (_a) {
                     isExpanded ? react_1.default.createElement(lucide_react_1.ChevronUp, { size: 14 }) : react_1.default.createElement(lucide_react_1.ChevronDown, { size: 14 }))),
                 react_1.default.createElement(react_2.Spacer, null),
                 react_1.default.createElement(react_2.HStack, { spacing: 2 },
-                    react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
-                        react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, cursor: "pointer" })),
+                    isDeletable && (react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
+                        react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); }, cursor: "pointer", "aria-label": "Delete" }))),
                     react_1.default.createElement(react_2.Tooltip, { label: "Open" },
-                        react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _g === void 0 ? void 0 : _g[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer" })))))));
+                        react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_g = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _g === void 0 ? void 0 : _g[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); }, cursor: "pointer", "aria-label": "Open" })))))));
 };
 exports.default = AccountCard;

package/dist/Components/KanbanBoard/AccountCard.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "@testing-library/jest-dom";

package/dist/Components/KanbanBoard/AccountCard.test.js ADDED Viewed

@@ -0,0 +1,63 @@
+"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 __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("@testing-library/react");
+require("@testing-library/jest-dom");
+var AccountCard_1 = __importDefault(require("./AccountCard"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 500: "#fff" },
+            gray: { 200: "#eee", 700: "#333" },
+            primary: { 500: "#3182ce" },
+            red: { 600: "#e53e3e" },
+            blue: { 600: "#3182ce" },
+            text: {},
+        },
+    }); },
+}); });
+var mockAccount = {
+    id: "1",
+    name: "Test Account",
+    email: "test@example.com",
+};
+var defaultProps = {
+    account: mockAccount,
+    index: 0,
+    onDelete: jest.fn(),
+    onOpen: jest.fn(),
+};
+describe("AccountCard – permissions", function () {
+    it("renders the delete icon when isDeletable is true (default)", function () {
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps)));
+        expect(react_2.screen.getByLabelText("Delete")).toBeInTheDocument();
+    });
+    it("hides the delete icon when isDeletable is false", function () {
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
+        expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+    });
+    it("renders the open (ExternalLink) icon regardless of isDeletable", function () {
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { isDeletable: false })));
+        expect(react_2.screen.getByLabelText("Open")).toBeInTheDocument();
+    });
+    it("calls onDelete when delete icon is clicked and isDeletable is true", function () {
+        var onDelete = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(AccountCard_1.default, __assign({}, defaultProps, { onDelete: onDelete, isDeletable: true })));
+        react_2.screen.getByLabelText("Delete").click();
+        expect(onDelete).toHaveBeenCalledWith(mockAccount);
+    });
+});

package/dist/Components/KanbanBoard/KanbanBoard.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import React from "react";
 import { KanbanBoardProps } from "./KanbanBoardProps";
-declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, }: KanbanBoardProps) => React.JSX.Element;
+declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, }: KanbanBoardProps) => React.JSX.Element | null;
 export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED Viewed

@@ -57,8 +57,12 @@ var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
 var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
 var KanbanBoard = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
-    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization;
+    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions;
     var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
+    var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
+    var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
+    var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
     var _k = (0, react_1.useState)(data), columns = _k[0], setColumns = _k[1];
     var _l = (0, react_1.useState)(600), containerHeight = _l[0], setContainerHeight = _l[1];
     var _m = (0, react_1.useState)(null), hoveredColumn = _m[0], setHoveredColumn = _m[1];
@@ -160,12 +164,14 @@ var KanbanBoard = function (_a) {
         return (react_1.default.createElement("div", { style: style },
             react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
                 react_1.default.createElement("div", { style: { marginBottom: 12 } },
-                    react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
-                        react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); } }))); }))),
+                    react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
+                        react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); }, isDeletable: canDelete }))); }))),
             index === items.length - 1 && placeholder));
     };
+    if (!canView)
+        return null;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
+        react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
         react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
             react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
                 react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%",
@@ -214,13 +220,9 @@ var KanbanBoard = function (_a) {
                                     : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
                                 react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
                                     react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
-                                    hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
-                                    !(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
-                                react_1.default.createElement(react_2.Box
-                                // px={2}
-                                // pb={2}
-                                , {
-                                    // px={2}
+                                    canDelete && hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
+                                    !(canDelete && hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
+                                react_1.default.createElement(react_2.Box, { px: 2,
                                     // pb={2}
                                     flex: "1", overflowY: "auto", width: "100%",
                                     // mr={1} // Add right margin to create gap for scrollbar
@@ -255,6 +257,7 @@ var KanbanBoard = function (_a) {
                                         "&": {
                                             scrollbarGutter: "stable both-edges",
                                         },
+                                        cursor: canDrag ? "grab" : "not-allowed",
                                     } }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
                                         if (el)
                                             listRefs.current[colId] = el;
@@ -264,10 +267,10 @@ var KanbanBoard = function (_a) {
                                         placeholder: provided.placeholder,
                                     } }, Row)) : (react_1.default.createElement(react_2.Box, null,
                                     column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
-                                        react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
+                                        react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
                                             react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
                                                     return toggleExpand(account.id, colId, index);
-                                                } }))); }))); }),
+                                                }, isDeletable: canDelete }))); }))); }),
                                     provided.placeholder)))));
                         }));
                     }))))));

package/dist/Components/KanbanBoard/KanbanBoard.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import "@testing-library/jest-dom";

package/dist/Components/KanbanBoard/KanbanBoard.test.js ADDED Viewed

@@ -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 });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var KanbanBoard_1 = __importDefault(require("./KanbanBoard"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 100: "#f9f9f9", 500: "#fff" },
+            gray: { 100: "#f0f0f0", 200: "#eee", 300: "#ddd", 400: "#ccc", 500: "#bbb", 700: "#333" },
+            primary: { 500: "#3182ce" },
+            blue: { 50: "#ebf8ff", 500: "#3182ce", 600: "#3182ce" },
+            red: { 600: "#e53e3e" },
+            text: { 500: "#555", 600: "#444", 700: "#333" },
+            secondary: { 500: "#805ad5" },
+        },
+    }); },
+}); });
+jest.mock("@hello-pangea/dnd", function () { return ({
+    DragDropContext: function (_a) {
+        var children = _a.children;
+        return react_1.default.createElement("div", null, children);
+    },
+    Droppable: function (_a) {
+        var children = _a.children;
+        return children({ innerRef: function () { }, droppableProps: {}, placeholder: null }, { isDraggingOver: false });
+    },
+    Draggable: function (_a) {
+        var children = _a.children, isDragDisabled = _a.isDragDisabled;
+        var provided = {
+            innerRef: function () { },
+            draggableProps: { "data-drag-disabled": isDragDisabled },
+            dragHandleProps: {},
+        };
+        return children(provided, { isDragging: false });
+    },
+}); });
+jest.mock("react-window", function () { return ({
+    VariableSizeList: function () { return null; },
+}); });
+var sampleData = {
+    col1: {
+        id: "col1",
+        title: "To Do",
+        color: "#3182ce",
+        items: [
+            { id: "1", name: "Account A", email: "a@example.com" },
+            { id: "2", name: "Account B", email: "b@example.com" },
+        ],
+    },
+};
+describe("KanbanBoard – permissions", function () {
+    describe("isDeletable", function () {
+        it("shows card delete icons when permissions.isDeletable is true", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: true } }));
+            expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
+        });
+        it("hides card delete icons when permissions.isDeletable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isDeletable: false } }));
+            expect(react_2.screen.queryByLabelText("Delete")).not.toBeInTheDocument();
+        });
+        it("shows card delete icons when permissions prop is omitted (default allow)", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData }));
+            expect(react_2.screen.getAllByLabelText("Delete").length).toBeGreaterThan(0);
+        });
+    });
+    describe("isCreatable", function () {
+        var kanbanCreate = { isCreatable: true, label: "Create New" };
+        it("shows the create button when permissions.isCreatable is true", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: true } }));
+            expect(react_2.screen.getByText("Create New")).toBeInTheDocument();
+        });
+        it("hides the create button when permissions.isCreatable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanCreate: kanbanCreate, permissions: { isCreatable: false } }));
+            expect(react_2.screen.queryByText("Create New")).not.toBeInTheDocument();
+        });
+    });
+    describe("isEditable", function () {
+        var kanbanEdit = { isEditable: true, label: "Edit Layout" };
+        it("shows the edit button when permissions.isEditable is true", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: true } }));
+            expect(react_2.screen.getByText("Edit Layout")).toBeInTheDocument();
+        });
+        it("hides the edit button when permissions.isEditable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, kanbanEdit: kanbanEdit, permissions: { isEditable: false } }));
+            expect(react_2.screen.queryByText("Edit Layout")).not.toBeInTheDocument();
+        });
+        it("sets isDragDisabled on cards when permissions.isEditable is false", function () {
+            (0, react_2.render)(react_1.default.createElement(KanbanBoard_1.default, { data: sampleData, permissions: { isEditable: false } }));
+            var disabledDraggables = react_2.screen
+                .getAllByRole("generic")
+                .filter(function (el) { return el.getAttribute("data-drag-disabled") === "true"; });
+            expect(disabledDraggables.length).toBeGreaterThan(0);
+        });
+    });
+});

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED Viewed

@@ -39,4 +39,10 @@ export type KanbanBoardProps = {
         label?: string;
     };
     virtualization?: boolean;
+    permissions?: {
+        isEditable?: boolean;
+        isCreatable?: boolean;
+        isDeletable?: boolean;
+        isViewable?: boolean;
+    };
 };

package/dist/Components/Notification/Notification.js CHANGED Viewed

@@ -37,9 +37,9 @@ var Notification = function (_a) {
     var warningColor = (colors === null || colors === void 0 ? void 0 : colors.warningColor) || theme.colors.semantic.warning;
     var errorColor = (colors === null || colors === void 0 ? void 0 : colors.errorColor) || theme.colors.semantic.error;
     var successColor = (colors === null || colors === void 0 ? void 0 : colors.successColor) || theme.colors.semantic.success;
-    var startDate = notification.startDate
+    var startDate = (0, react_1.useMemo)(function () { return notification.startDate
         ? new Date(notification.startDate)
-        : null;
+        : null; }, [notification.startDate]);
     var _c = (0, react_1.useMemo)(function () {
         var targetDate = notification.dueDate
             ? new Date(notification.dueDate)

package/dist/Components/ProductDetails/ProductDetails.js CHANGED Viewed

@@ -9,7 +9,6 @@ var ProductImageSlider_1 = __importDefault(require("./ProductImageSlider"));
 var ProductLabel_1 = __importDefault(require("../ProductCard/ProductLabel"));
 var ProductTags_1 = __importDefault(require("../ProductCard/ProductTags"));
 var ProductDtlPrice_1 = __importDefault(require("./ProductDtlPrice"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var Button_1 = __importDefault(require("../Button/Button"));
 var lucide_react_1 = require("lucide-react");
 var ProductReview_1 = __importDefault(require("../ProductCard/ProductReview"));
@@ -17,7 +16,6 @@ var FormattedDescription_1 = __importDefault(require("../Common/FormattedDescrip
 var ProductDetails = function (_a) {
     var _b, _c, _d, _e, _f;
     var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onOptionChange = _a.onOptionChange, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, rating = _a.rating, reviews = _a.reviews, notifyMe = _a.notifyMe, _g = _a.isQtyEditable, isQtyEditable = _g === void 0 ? false : _g, _h = _a.displayRating, displayRating = _h === void 0 ? true : _h;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
     var _j = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _j[0], setSelectedOption = _j[1];
     var _k = react_1.default.useState(1), qty = _k[0], setQty = _k[1];

package/dist/Components/SideBar/SecondaryBar.d.ts CHANGED Viewed

@@ -1,15 +1,4 @@
 import React from "react";
-import { MenuProps } from "./SideBarProps";
-type SecondaryBarProps = {
-    items?: MenuProps[];
-    defaultCollapsed?: boolean;
-    collapsedWidth?: string | number;
-    expandedWidth?: string | number;
-    headerFontSize?: string;
-    itemFontSize?: string;
-    selected?: string | number | null;
-    onItemClick?: (item: MenuProps) => void;
-    title?: string;
-};
+import { SecondaryBarProps } from "./SideBarProps";
 declare const SecondaryBar: React.FC<SecondaryBarProps>;
 export default SecondaryBar;

package/dist/Components/SideBar/SecondaryBar.js CHANGED Viewed

@@ -32,59 +32,64 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var parseBadge = function (badge) {
+    var _a, _b, _c;
+    return ({
+        badgeVal: badge === null || badge === void 0 ? void 0 : badge.count,
+        colorScheme: (_a = badge === null || badge === void 0 ? void 0 : badge.color) !== null && _a !== void 0 ? _a : "teal",
+        radius: (_b = badge === null || badge === void 0 ? void 0 : badge.radius) !== null && _b !== void 0 ? _b : "full",
+        variant: (_c = badge === null || badge === void 0 ? void 0 : badge.variant) !== null && _c !== void 0 ? _c : "subtle",
+    });
+};
+var CollapsedItem = function (_a) {
+    var item = _a.item, isActive = _a.isActive, itemFontSize = _a.itemFontSize, onItemClick = _a.onItemClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _b = parseBadge(item.badge), badgeVal = _b.badgeVal, colorScheme = _b.colorScheme, radius = _b.radius, variant = _b.variant;
+    return (react_1.default.createElement(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.Box, { py: "0.75rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: { bg: item.disabled ? "transparent" : theme.colors.primary[700] }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, bg: isActive ? theme.colors.primary[600] : "transparent" },
+                react_1.default.createElement(react_2.Box, { position: "relative" },
+                    react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
+                    badgeVal != null && (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] }))))),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none' },
+                react_1.default.createElement(react_2.PopoverBody, { p: "0.75rem" },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
+                        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
+                            react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
+                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
+                        badgeVal != null && (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal))))))));
+};
+var ExpandedItem = function (_a) {
+    var item = _a.item, isActive = _a.isActive, itemFontSize = _a.itemFontSize, onItemClick = _a.onItemClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _b = parseBadge(item.badge), badgeVal = _b.badgeVal, colorScheme = _b.colorScheme, radius = _b.radius, variant = _b.variant;
+    return (react_1.default.createElement(react_2.Flex, { px: "1rem", py: "0.75rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: { bg: item.disabled ? "transparent" : theme.colors.primary[700] }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive ? "0.188rem solid ".concat(theme.colors.background[300]) : "0.188rem solid transparent" },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
+            react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
+            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
+        badgeVal != null && (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal))));
+};
 var SecondaryBar = function (_a) {
-    var _b, _c, _d;
-    var _e = _a.items, items = _e === void 0 ? [] : _e, _f = _a.defaultCollapsed, defaultCollapsed = _f === void 0 ? true : _f, _g = _a.collapsedWidth, collapsedWidth = _g === void 0 ? "3.5rem" : _g, _h = _a.expandedWidth, expandedWidth = _h === void 0 ? "10rem" : _h, _j = _a.headerFontSize, headerFontSize = _j === void 0 ? "0.95rem" : _j, _k = _a.itemFontSize, itemFontSize = _k === void 0 ? "0.875rem" : _k, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
+    var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.defaultCollapsed, defaultCollapsed = _c === void 0 ? true : _c, _d = _a.collapsedWidth, collapsedWidth = _d === void 0 ? "3.5rem" : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? "10rem" : _e, _f = _a.headerFontSize, headerFontSize = _f === void 0 ? "0.95rem" : _f, _g = _a.itemFontSize, itemFontSize = _g === void 0 ? "0.875rem" : _g, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _l = (0, react_1.useState)(defaultCollapsed), collapsed = _l[0], setCollapsed = _l[1];
+    var _h = (0, react_1.useState)(defaultCollapsed), collapsed = _h[0], setCollapsed = _h[1];
     var width = collapsed ? collapsedWidth : expandedWidth;
-    var showText = !collapsed;
-    var textMaxWidth = expandedWidth !== null && expandedWidth !== void 0 ? expandedWidth : "10rem";
-    return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: (_d = (_c = (_b = theme.colors.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], boxShadow: theme.shadows.md, zIndex: 1 },
+    return (react_1.default.createElement(react_2.Box, { transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[200], boxShadow: theme.shadows.md, zIndex: 1 },
         react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0 },
-            react_1.default.createElement(react_2.Flex, { align: "center", justify: showText ? "space-between" : "center", px: showText ? "0.75rem" : 0, h: "3.91rem", overflow: "hidden" },
-                showText ? (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, mr: "0.5rem" },
-                    react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : ""))) : null,
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "0.75rem", h: "4rem", overflow: "hidden" },
+                !collapsed && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, mr: "0.5rem" },
+                    react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 700, color: theme.colors.white, as: "p" }, title !== null && title !== void 0 ? title : ""))),
                 react_1.default.createElement(react_2.Box, { w: "1.625rem", h: "100%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { return setCollapsed(function (c) { return !c; }); } }, collapsed ? (react_1.default.createElement(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right" },
                     react_1.default.createElement(lucide_react_1.ChevronRight, { size: 16, color: theme.colors.white }))) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 16, color: theme.colors.white })))),
-            react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[300] }),
+            react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[500] }),
             react_1.default.createElement(react_2.Box, { id: "secondary-scroll-container", flex: "1", overflowY: "auto", overflowX: "hidden" }, items.map(function (item) {
-                var _a, _b, _c, _d, _e;
+                var _a;
                 var isActive = String(selected) === String(item.id) ||
                     String(selected) === String(item.title);
-                var isObj = typeof item.badge === "object" && item.badge !== null;
-                var badgeVal = isObj ? item.badge.count : item.badge;
-                var colorScheme = (_a = (isObj ? item.badge.color : undefined)) !== null && _a !== void 0 ? _a : "teal";
-                var radius = (_b = (isObj ? item.badge.radius : undefined)) !== null && _b !== void 0 ? _b : "full";
-                var variant = (_c = (isObj ? item.badge.variant : undefined)) !== null && _c !== void 0 ? _c : "subtle";
-                if (!showText) {
-                    return (react_1.default.createElement(react_2.Popover, { key: String((_d = item.id) !== null && _d !== void 0 ? _d : item.title), trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
-                        react_1.default.createElement(react_2.PopoverTrigger, null,
-                            react_1.default.createElement(react_2.Box, { py: "0.625rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, color: theme.colors.white, _hover: {
-                                    bg: item.disabled ? "transparent" : theme.colors.primary[700],
-                                }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); } },
-                                react_1.default.createElement(react_2.Box, { position: "relative" },
-                                    react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem" }),
-                                    badgeVal != null && (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] }))))),
-                        react_1.default.createElement(react_2.Portal, null,
-                            react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[isActive ? 500 : 700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.313rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white" },
-                                react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem" },
-                                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between" },
-                                        react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0 },
-                                            react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }),
-                                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p" }, item.title)),
-                                        badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null))))));
-                }
-                return (react_1.default.createElement(react_2.Flex, { key: String((_e = item.id) !== null && _e !== void 0 ? _e : item.title), px: "1rem", py: "0.625rem", align: "center", justify: "space-between", gap: "0.5rem", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary[600] : "transparent", _hover: {
-                        bg: item.disabled ? "transparent" : theme.colors.primary[700],
-                    }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, color: theme.colors.white, borderLeft: isActive
-                        ? "0.188rem solid ".concat(theme.colors.background[300])
-                        : "0.188rem solid transparent" },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, overflow: "hidden" },
-                        react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1.2rem", flexShrink: 0 }),
-                        react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
-                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 600, as: "p" }, item.title))),
-                    badgeVal != null ? (react_1.default.createElement(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius }, badgeVal)) : null));
+                var key = String((_a = item.id) !== null && _a !== void 0 ? _a : item.title);
+                return collapsed ? (react_1.default.createElement(CollapsedItem, { key: key, item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick })) : (react_1.default.createElement(ExpandedItem, { key: key, item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }));
             })))));
 };
 exports.default = SecondaryBar;

package/dist/Components/SideBar/SideBar.js CHANGED Viewed

@@ -23,9 +23,55 @@ var MenuItems_1 = __importDefault(require("./components/MenuItems"));
 var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
+var SidebarHeader = function (_a) {
+    var logo = _a.logo, companyName = _a.companyName, toggle = _a.toggle, isLoading = _a.isLoading;
+    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" })))));
+    }
+    if (logo) {
+        return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
+            react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
+            !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName))));
+    }
+    return (react_1.default.createElement(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
+        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)),
+        !toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : ""))));
+};
+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" })))));
+};
+var AddNewButton = function (_a) {
+    var toggle = _a.toggle, isLoading = _a.isLoading, 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")));
+};
+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")));
+};
+// --- Main Sidebar component ---
 function Sidebar(_a) {
-    var _b, _c;
-    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, _d = _a.isDisableAddNew, isDisableAddNew = _d === void 0 ? false : _d, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines;
+    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;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var activeTop = menus.find(function (m) { return String(m.title) === String(activeMenu); }) ||
         menus.find(function (m) { return String(m.id) === String(activeMenu); });
@@ -33,31 +79,15 @@ function Sidebar(_a) {
     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] },
         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" },
-                isLoading ? (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" }))))) : (react_1.default.createElement(react_2.Box, null, logo ? (react_1.default.createElement(react_2.Flex, { h: "4.688rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
-                    react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "2rem", src: logo, alt: "Company Logo" }),
-                    !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "18px", fontWeight: 800, color: theme.colors.white, lineHeight: 2 }, companyName)))) : (react_1.default.createElement(react_2.Flex, { h: "3.91rem", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "0.625rem", px: toggle ? 0 : "0.625rem" },
-                    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)),
-                    !toggle && (react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", fontWeight: 800, fontSize: "1.3rem", textAlign: "center", color: theme.colors.white, lineHeight: 2, as: "p" }, companyName !== null && companyName !== void 0 ? companyName : "")))))),
+                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 ? loadingLines : 15 }).map(function (_, i) { return (react_1.default.createElement(react_2.Box, { key: i, 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" }))))); })) : (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, { 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 &&
-                        (isLoading ? (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" }))) : (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: onAddNewClick },
-                            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")))),
-                    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: changeToggle, 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: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.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"))))),
-        secondaryItems.length ? (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 })) : null));
+                    !isDisableAddNew && (react_1.default.createElement(AddNewButton, { toggle: toggle, isLoading: isLoading, onClick: onAddNewClick })),
+                    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 }))));
 }
 exports.default = Sidebar;

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

@@ -38,3 +38,14 @@ export type RenderMenuType = {
     selectedSubMenu?: string | null;
     selectedSecondaryItem?: string | number | null;
 };
+export type SecondaryBarProps = {
+    items?: MenuProps[];
+    defaultCollapsed?: boolean;
+    collapsedWidth?: string | number;
+    expandedWidth?: string | number;
+    headerFontSize?: string;
+    itemFontSize?: string;
+    selected?: string | number | null;
+    onItemClick?: (item: MenuProps) => void;
+    title?: string;
+};

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

@@ -86,8 +86,8 @@ 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.313rem", cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500 },
-                    react_1.default.createElement(react_2.PopoverBody, { p: "0.5rem", color: "white" },
+                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.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,

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

@@ -32,7 +32,7 @@ var MenuPopoverContent = function (_a) {
             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.5rem", align: "center", justify: "space-between", gap: "0.75rem", _hover: {
+            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

package/dist/Constants/Sidebar.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+export declare const HEADER_HEIGHT = "4.3rem";
 export declare const FlexCss: {
     "&::-webkit-scrollbar": {
         width: string;

package/dist/Constants/Sidebar.js CHANGED Viewed

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cssForScrollBar = exports.FlexCss = void 0;
+exports.cssForScrollBar = exports.FlexCss = exports.HEADER_HEIGHT = void 0;
+exports.HEADER_HEIGHT = "4.3rem";
 exports.FlexCss = {
     "&::-webkit-scrollbar": {
         width: "0.188rem",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.121",
+  "version": "2.2.123",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",