pixelize-design-library 2.2.198 → 2.3.1-beta.2

package/dist/Components/NavigationBar/NavigationBar.js

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -10,48 +21,64 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 function NavBar(_a) {
     var _b, _c, _d, _e;
-    var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText, sideBarToggole = _a.sideBarToggole, onSideBarToggole = _a.onSideBarToggole;
+    var userAvathar = _a.userAvathar, userName = _a.userName, userRole = _a.userRole, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText, sideBarToggole = _a.sideBarToggole, onSideBarToggole = _a.onSideBarToggole;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
+    // Shared rounded pill affordance for the bar's icon controls.
+    var iconButtonStyle = {
+        w: "1.75rem",
+        h: "1.75rem",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "md",
+        cursor: "pointer",
+        transition: "background 0.15s",
+        _hover: { bg: "blackAlpha.50" },
+    };
+    // Light elevated pill item.
+    var menuItemStyle = {
+        bg: "transparent",
+        borderRadius: "7px",
+        mx: "0.375rem",
+        px: "0.625rem",
+        py: "0.5rem",
+        fontWeight: 500,
+        fontSize: "13px",
+        color: "gray.700",
+        gap: theme.space["2"],
+        transition: "background 0.12s",
+        _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+        _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+        _active: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+    };
+    return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100" },
         react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
             react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
-                react_1.default.createElement(react_2.Box, { onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "block", lg: "none", xl: "none", md: "none" } }, sideBarToggole ? (react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : (react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" }))),
-                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
+                react_1.default.createElement(react_2.Box, __assign({ onClick: function () { return onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(); }, display: { base: "flex", lg: "none", xl: "none", md: "none" } }, iconButtonStyle), sideBarToggole ? (react_1.default.createElement(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : (react_1.default.createElement(lucide_react_1.PanelRightClose, { size: "1.25rem" }))),
+                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, __assign({}, iconButtonStyle, { display: "flex", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } }),
                     react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
                 (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
             react_1.default.createElement(react_2.Flex, null,
                 react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 7 },
                     react_1.default.createElement(react_2.Menu, null,
-                        react_1.default.createElement(react_2.Box, { cursor: "pointer" }, moreIcon),
+                        moreIcon && react_1.default.createElement(react_2.Box, __assign({}, iconButtonStyle, { display: "flex" }), moreIcon),
                         react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
                             react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
-                        react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0 },
+                        react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", overflow: "hidden" },
                             react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", maxH: "90vh" },
-                                react_1.default.createElement(react_2.Center, { py: 4 },
+                                react_1.default.createElement(react_2.Center, { pt: 4, pb: 2 },
                                     react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
-                                react_1.default.createElement(react_2.Center, null,
-                                    react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
-                                react_1.default.createElement(react_2.MenuDivider, null),
+                                react_1.default.createElement(react_2.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4 },
+                                    react_1.default.createElement(react_2.Text, { fontWeight: 600, fontSize: "14px", color: "gray.800", isTruncated: true, maxW: "100%" }, userName),
+                                    userRole && (react_1.default.createElement(react_2.Text, { fontSize: "11px", color: "gray.500", isTruncated: true, maxW: "100%" }, userRole))),
+                                react_1.default.createElement(react_2.MenuDivider, { borderColor: "blackAlpha.100" }),
                                 react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto" }, navMenu === null || navMenu === void 0 ? void 0 : navMenu.map(function (menu, idx) {
                                     var _a, _b, _c;
-                                    return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, 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), sx: {
-                                            fontWeight: 500,
-                                            gap: theme.space["2"],
-                                        }, _focus: {
-                                            backgroundColor: "transparent",
-                                        }, _hover: {
-                                            backgroundColor: theme.colors.primary["50"],
-                                        } },
-                                        menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
+                                    return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, 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), sx: menuItemStyle },
+                                        menu.icon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } } }, menu === null || menu === void 0 ? void 0 : menu.icon)),
                                         react_1.default.createElement(react_2.Box, null, menu.title)));
                                 })),
-                                react_1.default.createElement(react_2.MenuDivider, null),
-                                react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
-                                        fontWeight: 500,
-                                        gap: theme.space["2"],
-                                    }, _hover: {
-                                        backgroundColor: theme.colors.primary["50"],
-                                    } },
-                                    react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
+                                react_1.default.createElement(react_2.MenuDivider, { borderColor: "blackAlpha.100" }),
+                                react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: __assign(__assign({}, menuItemStyle), { color: "red.500", _hover: { bg: "red.50", color: "red.600" }, _focus: { bg: "red.50", color: "red.600" }, _active: { bg: "red.50", color: "red.600" } }) },
+                                    react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center" }, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
                                     react_1.default.createElement(react_2.Box, null, logoutText))))))))));
 }

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -1,6 +1,7 @@
 export type NavbarProps = {
     userAvathar: string;
     userName: string;
+    userRole?: string;
     navMenu: MenuProps[];
     moreIcon?: any;
     handleNavOnClick: (url: string) => void;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -47,6 +47,7 @@ var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var fieldStyles_1 = require("../Common/fieldStyles");
 var countWords = function (text) {
     if (text === void 0) { text = ""; }
     var t = text.trim();
@@ -160,43 +161,45 @@ function NoteTextArea(_a) {
         var start = nameWithoutExtension.substring(0, maxLength - extension.length - 3);
         return "".concat(start, "...").concat(extension);
     };
-    return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: "0.25rem", overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[300] : theme.colors.gray[200], bg: isActive ? theme.colors.gray[50] : "transparent", boxShadow: isActive ? "0 0 0 0.125rem ".concat((_b = theme.colors.boxShadow) === null || _b === void 0 ? void 0 : _b.primary) : "none" },
-        !isActive && (react_1.default.createElement(react_2.Flex, { px: 4, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: "0.25rem", minH: "44px" },
-            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[300], fontStyle: "italic", fontSize: "md" }, customPlaceholder))),
+    var noteWordCount = countWords(noteValue);
+    var isOverLimit = noteWordCount > maxNoteWordCount;
+    return (react_1.default.createElement(react_2.Box, { w: width, borderRadius: fieldStyles_1.FIELD_RADIUS, overflow: "hidden", border: "1px solid", borderColor: isActive ? theme.colors.primary[500] : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], bg: isActive ? theme.colors.gray[50] : theme.colors.white, transition: "border-color 0.2s" },
+        !isActive && (react_1.default.createElement(react_2.Flex, { px: 3, gap: 2, align: "center", cursor: "text", onClick: handleTextArea, bg: theme.colors.white, borderRadius: fieldStyles_1.FIELD_RADIUS, minH: "2.5rem", transition: "background 0.15s", _hover: { bg: theme.colors.gray[50] } },
+            react_1.default.createElement(lucide_react_1.SquarePen, { size: 16, color: theme.colors.gray[500] }),
+            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[500], fontSize: "sm" }, customPlaceholder))),
         isActive && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(react_2.Box, { bg: theme.colors.white },
-                titleShow && (react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {
-                        if (e.target.value.length === 0)
-                            setTitleShow(false);
-                        setTitleValue(e.target.value);
-                    }, placeholder: "Add a title...", variant: "unstyled", pl: 3, fontWeight: 500, fontSize: "0.95rem", _placeholder: {
-                        fontStyle: "italic",
-                        color: theme.colors.gray[300],
-                        background: theme.colors.white,
-                    } })),
-                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "80px", pl: 3, pt: 2, position: "relative" },
-                    react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "80px", _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
-            react_1.default.createElement(react_2.Divider, null),
-            react_1.default.createElement(react_2.Box, { px: 4, py: 3 },
-                react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%" },
-                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, minW: 0 },
-                        react_1.default.createElement(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", gap: 2 },
-                            react_1.default.createElement(lucide_react_1.Paperclip, { size: 18 })),
-                        react_1.default.createElement(react_2.Box, { h: "18px", w: "1px", bg: theme.colors.gray[200] }),
-                        !titleShow ? (react_1.default.createElement(react_2.Text, { onClick: function () { return setTitleShow(true); }, cursor: "pointer", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm" }, "Add a Title")) : (react_1.default.createElement(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue },
-                            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "200px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, titleValue || "Title")))),
-                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center", ml: "auto", flexShrink: 0 },
-                        cancelButtonHide ? null : (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(react_2.Button, { variant: "ghost", colorScheme: "gray", borderRadius: "6px", onClick: handleCloseTextArea, _hover: { bg: "transparent" } }, "Cancel"))),
-                        react_1.default.createElement(react_2.Button, { colorScheme: "purple", borderRadius: "8px", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
+                titleShow && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(react_2.Input, { ref: inputRef, value: titleValue, onChange: function (e) {
+                            if (e.target.value.length === 0)
+                                setTitleShow(false);
+                            setTitleValue(e.target.value);
+                        }, placeholder: "Add a title...", variant: "unstyled", px: 3, pt: 2.5, pb: 1.5, fontWeight: 600, fontSize: "0.875rem", color: theme.colors.text[700], _placeholder: {
+                            fontStyle: "italic",
+                            color: theme.colors.gray[300],
+                        } }),
+                    react_1.default.createElement(react_2.Divider, { borderColor: theme.colors.gray[200] }))),
+                react_1.default.createElement(react_2.Box, { bg: theme.colors.white, minH: "76px", px: 3, pt: 2.5, position: "relative" },
+                    react_1.default.createElement(react_2.Textarea, { ref: noteAreaRef, value: noteValue, onChange: handleNoteChange, placeholder: customPlaceholder, variant: "unstyled", resize: "none", minH: "76px", fontSize: "0.75rem", color: theme.colors.text[700], _placeholder: { fontStyle: "italic", color: theme.colors.gray[300] }, style: { overflow: "hidden" }, p: 0 }))),
+            react_1.default.createElement(react_2.Divider, { borderColor: theme.colors.gray[200] }),
+            react_1.default.createElement(react_2.Box, { px: 3, py: 2.5 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", w: "100%", gap: 3 },
+                    react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                        react_1.default.createElement(react_2.Tooltip, { label: "Attach files", hasArrow: true, placement: "top" },
+                            react_1.default.createElement(react_2.Box, { as: "label", htmlFor: "file-upload", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", w: "1.75rem", h: "1.75rem", borderRadius: "md", color: theme.colors.gray[600], transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] } },
+                                react_1.default.createElement(lucide_react_1.Paperclip, { size: 16 }))),
+                        react_1.default.createElement(react_2.Box, { h: "1rem", w: "1px", bg: theme.colors.gray[200] }),
+                        !titleShow ? (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setTitleShow(true); }, px: 2, py: 1, borderRadius: "md", color: theme.colors.gray[600], fontWeight: 500, fontSize: "sm", transition: "background 0.15s", _hover: { bg: theme.colors.gray[100] } }, "+ Add a title")) : (react_1.default.createElement(react_2.Tooltip, { label: titleValue, hasArrow: true, isDisabled: !titleValue },
+                            react_1.default.createElement(react_2.Text, { color: theme.colors.gray[600], fontSize: "sm", fontWeight: 500, isTruncated: true, maxW: "180px" }, titleValue || "Title")))),
+                    react_1.default.createElement(react_2.Flex, { gap: 2.5, align: "center", ml: "auto", flexShrink: 0 },
+                        react_1.default.createElement(react_2.Text, { fontSize: "xs", fontWeight: 500, color: isOverLimit ? theme.colors.semantic.error[500] : theme.colors.gray[500], whiteSpace: "nowrap" },
+                            noteWordCount,
+                            "/",
+                            maxNoteWordCount),
+                        cancelButtonHide ? null : (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleCloseTextArea }, "Cancel")),
+                        react_1.default.createElement(react_2.Button, { size: "sm", variant: "solid", isLoading: !!saveButtonLoading, isDisabled: !noteValue || isSaveDisabled, onClick: function () { return handleSubmit(noteValue, titleValue, files); } },
                             saveButtonLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "2px", mr: 2 })) : null,
                             "Save"))),
-                react_1.default.createElement(react_2.Flex, { mt: 3, gap: 2, align: "center", color: theme.colors.gray[600], fontSize: "sm" },
-                    react_1.default.createElement(react_2.Text, { fontWeight: 600 }, "Note:"),
-                    react_1.default.createElement(react_2.Text, null,
-                        "You can add up to ",
-                        maxNoteWordCount,
-                        " words only")),
                 react_1.default.createElement("input", { id: "file-upload", type: "file", style: { display: "none" }, onChange: function (e) {
                         var newFiles = Array.from(e.target.files || []);
                         var validFiles = newFiles.filter(function (f) { return f.size <= maxFileSize; });
@@ -211,12 +214,13 @@ function NoteTextArea(_a) {
                             setFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), validFiles, true); });
                         }
                     }, multiple: true }),
-                fileError && (react_1.default.createElement(react_2.Text, { color: theme.colors.red[500], mt: 2, fontSize: "sm" }, fileError)),
-                files.length > 0 && (react_1.default.createElement(react_2.Box, { mt: 3 }, files.map(function (f, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, align: "center", justify: "space-between", w: "320px", mb: 2 },
-                    react_1.default.createElement(react_2.Flex, { gap: 3, align: "center" },
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm" }, shortenFileName(f.name)),
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formatBytes(f.size))),
-                    react_1.default.createElement(lucide_react_1.X, { size: 16, cursor: "pointer", color: theme.colors.red[600], onClick: function () {
+                fileError && (react_1.default.createElement(react_2.Text, { color: theme.colors.semantic.error[500], mt: 2, fontSize: "xs" }, fileError)),
+                files.length > 0 && (react_1.default.createElement(react_2.Flex, { mt: 3, gap: 2, wrap: "wrap" }, files.map(function (f, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, align: "center", gap: 2, pl: 2.5, pr: 1.5, py: 1, borderRadius: "full", bg: theme.colors.gray[100], maxW: "100%" },
+                    react_1.default.createElement(lucide_react_1.File, { size: 13, color: theme.colors.gray[500] }),
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.text[700], isTruncated: true, maxW: "160px" }, shortenFileName(f.name)),
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], whiteSpace: "nowrap" }, formatBytes(f.size)),
+                    react_1.default.createElement(react_2.Box, { as: "button", type: "button", display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "full", p: 0.5, color: theme.colors.gray[500], transition: "all 0.15s", _hover: { bg: theme.colors.gray[200], color: theme.colors.semantic.error[500] }, onClick: function () {
                             return setFiles(function (prev) { return prev.filter(function (fileItem) { return fileItem !== f; }); });
-                        } }))); }))))))));
+                        } },
+                        react_1.default.createElement(lucide_react_1.X, { size: 13 })))); }))))))));
 }

package/dist/Components/NumberInput/NumberInput.styles.js

@@ -9,7 +9,8 @@ exports.NumberInput = {
             letterSpacing: "0.044rem",
             pt: "0.813rem",
             pb: "0.813rem",
-            borderRadius: "0.25rem",
+            borderRadius: "0.5rem",
+            transition: "border-color 0.2s, box-shadow 0.2s",
             _placeholder: {
                 fontStyle: "italic",
             },

package/dist/Components/PinInput/PinInput.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { ChakraPinInputProps } from "./PinInputProps";
-export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, }: ChakraPinInputProps): React.JSX.Element;
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, }: ChakraPinInputProps): React.JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -7,11 +7,12 @@ exports.default = PinInputs;
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var FormLabel_1 = require("../Common/FormLabel");
 function PinInputs(_a) {
-    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, _b = _a.color, color = _b === void 0 ? "primary" : _b, variant = _a.variant, _c = _a.pins, pins = _c === void 0 ? 3 : _c, label = _a.label;
+    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, _b = _a.color, color = _b === void 0 ? "primary" : _b, variant = _a.variant, _c = _a.pins, pins = _c === void 0 ? 3 : _c, label = _a.label, id = _a.id, isRequired = _a.isRequired, isInformation = _a.isInformation, informationMessage = _a.informationMessage;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        label && (react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label)),
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         react_1.default.createElement(react_2.HStack, null,
             react_1.default.createElement(react_2.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[300], _focus: {
                     borderColor: theme.colors.primary[500],

package/dist/Components/PinInput/PinInputProps.d.ts

@@ -6,4 +6,8 @@ export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultV
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";
     pins: number;
     label?: string;
+    id?: string;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
 };

package/dist/Components/RadioButton/RadioButton.js

@@ -25,7 +25,7 @@ var RadioButton = function (_a) {
                 boxShadow: "0 0 0 2px ".concat(theme.colors.primary[200]),
             },
         } },
-        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines })));
+        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true })));
 };
 exports.RadioButton = RadioButton;
 var RadioButtonGroup = function (_a) {

package/dist/Components/SearchSelect/SearchSelect.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { SearchSelectProps } from "./SearchSelectProps";
-declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, }: SearchSelectProps) => React.JSX.Element;
+declare const SearchSelect: ({ id, label, options, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, }: SearchSelectProps) => React.JSX.Element;
 export default SearchSelect;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -82,7 +82,7 @@ var normalizeMultiValue = function (val) {
 };
 var SearchSelect = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j;
-    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ? "Loading..." : _m, _o = _a.placeholder, placeholder = _o === void 0 ? "Select" : _o, value = _a.value, _p = _a.searchQuery, searchQuery = _p === void 0 ? "" : _p, _q = _a.isMultiple, isMultiple = _q === void 0 ? false : _q, _r = _a.isRequired, isRequired = _r === void 0 ? false : _r, _s = _a.error, error = _s === void 0 ? false : _s, errorMessage = _a.errorMessage, helperText = _a.helperText, _t = _a.width, width = _t === void 0 ? "100%" : _t, height = _a.height, _u = _a.size, size = _u === void 0 ? "md" : _u, chip = _a.chip, information = _a.information, rightIcon = _a.rightIcon, addNew = _a.addNew, _v = _a.isSelectAll, isSelectAll = _v === void 0 ? false : _v, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
+    var id = _a.id, label = _a.label, options = _a.options, onSelect = _a.onSelect, onSearch = _a.onSearch, _k = _a.isOptionLoading, isOptionLoading = _k === void 0 ? false : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, _m = _a.loadingText, loadingText = _m === void 0 ? "Loading..." : _m, _o = _a.placeholder, placeholder = _o === void 0 ? "Select" : _o, value = _a.value, _p = _a.searchQuery, searchQuery = _p === void 0 ? "" : _p, _q = _a.isMultiple, isMultiple = _q === void 0 ? false : _q, _r = _a.isRequired, isRequired = _r === void 0 ? false : _r, _s = _a.error, error = _s === void 0 ? false : _s, errorMessage = _a.errorMessage, helperText = _a.helperText, _t = _a.width, width = _t === void 0 ? "100%" : _t, height = _a.height, _u = _a.size, size = _u === void 0 ? "md" : _u, chip = _a.chip, information = _a.information, isInformation = _a.isInformation, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, addNew = _a.addNew, _v = _a.isSelectAll, isSelectAll = _v === void 0 ? false : _v, pagination = _a.pagination, insideSelect = _a.insideSelect, isRemoveAllIcon = _a.isRemoveAllIcon;
     var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
     var insideSelectBoxHeight = height !== null && height !== void 0 ? height : s.insideSelectDefaultHeight;
     var _w = (0, react_1.useState)(searchQuery), inputValue = _w[0], setInputValue = _w[1];
@@ -224,13 +224,13 @@ var SearchSelect = function (_a) {
         }
     }, [customSelectOpen]);
     return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: information === null || information === void 0 ? void 0 : information.informationMessage })),
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })),
         react_1.default.createElement(react_2.InputGroup, { size: size },
             react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
                     ? theme.colors.semantic.error[500]
                     : focused
                         ? theme.colors.primary[500]
-                        : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.25rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], boxShadow: focused
+                        : (_b = theme.colors.boxborder) === null || _b === void 0 ? void 0 : _b[500], borderRadius: "0.5rem", bg: (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[50], boxShadow: focused
                     ? error
                         ? "0 0 0 0.125rem ".concat((_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error)
                         : "0 0 0 0.125rem ".concat((_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary)

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -27,6 +27,8 @@ export type SearchSelectProps = {
         isInformation?: boolean;
         informationMessage?: string;
     };
+    isInformation?: boolean;
+    informationMessage?: string;
     rightIcon?: {
         icon?: React.ReactNode;
         onClick?: () => void;

package/dist/Components/Select/Select.styles.js

@@ -7,7 +7,8 @@ exports.Select = {
             fontWeight: 500,
             fontSize: "0.875rem",
             letterSpacing: "0.044rem",
-            borderRadius: "0.25rem",
+            borderRadius: "0.5rem",
+            transition: "border-color 0.2s, box-shadow 0.2s",
             minWidth: "0", // allow shrinking inside flex
             width: "100%", // full container width
             maxWidth: "100%",

package/dist/Components/SelectSearch/SelectSearch.js

@@ -60,6 +60,7 @@ exports.default = SelectSearch;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
+var fieldStyles_1 = require("../Common/fieldStyles");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
@@ -90,7 +91,6 @@ function SelectSearch(_a) {
     BottomIcon = _l === void 0 ? false : _l, BottomText = _a.BottomText, handleBottomClick = _a.handleBottomClick, BottomTextColor = _a.BottomTextColor, isColorOptions = _a.isColorOptions;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var errorBorder = "2px solid ".concat(theme.colors.semantic.error[500]);
-    var defaultBorderThick = "2px solid ".concat(theme.colors.boxborder[500]);
     var defaultBorderThin = "1px solid ".concat(theme.colors.boxborder[500]);
     var _m = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _m[0], setSelectedOptions = _m[1];
     var _o = (0, react_1.useState)(searchQuery), inputValue = _o[0], setInputValue = _o[1];
@@ -239,13 +239,16 @@ function SelectSearch(_a) {
                     react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
                     react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),
                 react_1.default.createElement(react_2.InputGroup, null,
-                    react_1.default.createElement(react_2.Input, { ref: inputRef, border: error ? errorBorder : defaultBorderThick, variant: "flushed", value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: "gray.300", _hover: {
+                    react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: function () { return setIsOpen(true); }, onFocus: function () { return setIsOpen(true); }, onChange: function (e) { return handleInputChange(e.target.value); }, placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, cursor: "pointer", borderColor: theme.colors.boxborder[500], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
                             borderColor: error
                                 ? theme.colors.semantic.error[500]
                                 : theme.colors.primary[500],
                         }, _focus: {
-                            borderColor: error ? "none" : theme.colors.primary[500],
-                        }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7, border: error ? errorBorder : defaultBorderThin }) }),
+                            borderColor: error
+                                ? theme.colors.semantic.error[500]
+                                : theme.colors.primary[500],
+                            boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme, !!error),
+                        }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.gray[50], fontWeight: 600, color: theme.colors.gray[700], padding: "0 0.75rem", fontSize: 15, letterSpacing: 0.7, border: error ? errorBorder : defaultBorderThin }) }),
                     rightIcon && (react_1.default.createElement(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: __assign({}, rightElementStyle) }))),
                 isOpen && (react_1.default.createElement(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: "gray.300", borderRadius: "md", bg: "white", maxHeight: "150px", overflowY: "auto", zIndex: 10 },
                     react_1.default.createElement(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions }),

package/dist/Components/SideBar/SecondaryBar.js

@@ -42,6 +42,7 @@ 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 Sidebar_1 = require("../../Constants/Sidebar");
 var parseBadge = function (badge) {
     var _a, _b, _c;
     return ({
@@ -57,12 +58,12 @@ var CollapsedItem = function (_a) {
     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" }),
+            react_1.default.createElement(react_2.Box, { role: "group", py: "8px", mb: "2px", borderRadius: "7px", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", _hover: { bg: item.disabled ? "transparent" : "whiteAlpha.100" }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, bg: isActive ? theme.colors.primary.opacity[16] : "transparent", transition: "background 0.12s" },
+                react_1.default.createElement(react_2.Box, { position: "relative", display: "flex", alignItems: "center" },
+                    react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? theme.colors.primary[300] : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }),
                     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.PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], 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 },
@@ -74,27 +75,28 @@ 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 }),
+    return (react_1.default.createElement(react_2.Flex, { role: "group", px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? theme.colors.primary.opacity[16] : "transparent", _hover: { bg: item.disabled ? "transparent" : "whiteAlpha.100" }, onClick: function () { return !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)); }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", transition: "background 0.12s" },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden" },
+            react_1.default.createElement(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? theme.colors.primary[300] : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "white" }, transition: "color 0.12s" }),
             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))),
+                react_1.default.createElement(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? theme.colors.primary[100] : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, 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 = _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 _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.75rem" : _f, _g = _a.itemFontSize, itemFontSize = _g === void 0 ? "0.75rem" : _g, selected = _a.selected, onItemClick = _a.onItemClick, title = _a.title, icon = _a.icon;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _h = (0, react_1.useState)(defaultCollapsed), collapsed = _h[0], setCollapsed = _h[1];
     var width = collapsed ? collapsedWidth : expandedWidth;
-    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: 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[500] }),
-            react_1.default.createElement(react_2.Box, { id: "secondary-scroll-container", flex: "1", overflowY: "auto", overflowX: "hidden" }, items.map(function (item) {
+    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[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1 },
+        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 0, h: "100%" },
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0 },
+                !collapsed && (react_1.default.createElement(react_1.default.Fragment, null,
+                    icon && (react_1.default.createElement(react_2.Icon, { as: icon, fontSize: "0.95rem", color: theme.colors.primary[300], 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: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p" }, title !== null && title !== void 0 ? title : "")))),
+                react_1.default.createElement(react_2.Box, { w: "20px", h: "20px", borderRadius: "5px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: function () { return setCollapsed(function (c) { return !c; }); }, _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s" }, 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: 13, color: theme.colors.white, opacity: 0.6 }))) : (react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.white, opacity: 0.6 })))),
+            react_1.default.createElement(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px" }, items.map(function (item) {
                 var _a;
                 var isActive = String(selected) === String(item.id) ||
                     String(selected) === String(item.title);

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { SidebarProps } from "./SideBarProps";
-export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open, otherApps, }: SidebarProps): React.JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open, otherApps, }: SidebarProps): React.JSX.Element;