pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/MultiSelect/MultiSelect.js

@@ -1,105 +1,52 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = MultiSelect;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var FormLabel_1 = require("../Common/FormLabel");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-var Tag_1 = __importDefault(require("../Tag/Tag"));
-var lucide_react_1 = require("lucide-react");
-var generateUniqueId = (function () {
-    var counter = 0;
-    return function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const FormLabel_1 = require("../Common/FormLabel");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
+const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const HelperText_1 = __importDefault(require("../Common/HelperText"));
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const lucide_react_1 = require("lucide-react");
+const generateUniqueId = (() => {
+    let counter = 0;
+    return () => {
         counter += 1;
-        return "".concat(Date.now(), "-").concat(counter);
+        return `${Date.now()}-${counter}`;
     };
 })();
-function MultiSelect(_a) {
-    var _b, _c, _d, _e;
-    var value = _a.value, onValueChange = _a.onValueChange, _f = _a.width, width = _f === void 0 ? "100%" : _f, _g = _a.label, label = _g === void 0 ? "label" : _g, _h = _a.isRequired, isRequired = _h === void 0 ? true : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, _k = _a.informationMessage, informationMessage = _k === void 0 ? "" : _k, name = _a.name, id = _a.id, _l = _a.placeholderText, placeholderText = _l === void 0 ? "Type valid email and press enter" : _l, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _m = _a.size, size = _m === void 0 ? "md" : _m, inputStyle = _a.inputStyle, helperText = _a.helperText, error = _a.error, errorMessage = _a.errorMessage;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
-    var options = value;
-    var _o = (0, react_1.useState)(""), inputValue = _o[0], setInputValue = _o[1];
-    var _p = (0, react_1.useState)(""), localError = _p[0], setLocalError = _p[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var handleInputChange = (0, react_1.useCallback)(function (e) {
+function MultiSelect({ value, onValueChange, width = "100%", label = "label", isRequired = true, isInformation = false, informationMessage = "", name, id, placeholderText = "Type valid email and press enter", isDisabled, isReadOnly, size = "md", inputStyle, helperText, error, errorMessage, }) {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)((size || "md"));
+    const options = value;
+    const [inputValue, setInputValue] = (0, react_1.useState)("");
+    const [localError, setLocalError] = (0, react_1.useState)("");
+    const inputRef = (0, react_1.useRef)(null);
+    const handleInputChange = (0, react_1.useCallback)((e) => {
         setInputValue(e.target.value);
         setLocalError("");
     }, []);
-    var validateEmail = function (email) {
-        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
     };
-    var handleKeyDown = function (e) {
+    const handleKeyDown = (e) => {
         if (e.key === "Enter" && inputValue.trim() !== "") {
             if (!validateEmail(inputValue)) {
                 setLocalError("Invalid email address");
                 return;
             }
-            var existingOption = options.find(function (option) { return option.label === inputValue; });
+            const existingOption = options.find((option) => option.label === inputValue);
             if (!existingOption) {
-                var newOption = { id: generateUniqueId(), label: inputValue };
-                onValueChange(__spreadArray(__spreadArray([], options, true), [newOption], false));
+                const newOption = { id: generateUniqueId(), label: inputValue };
+                onValueChange([...options, newOption]);
                 setInputValue("");
             }
         }
@@ -107,23 +54,20 @@ function MultiSelect(_a) {
             onValueChange(options.slice(0, -1));
         }
     };
-    var handleRemove = (0, react_1.useCallback)(function (optionToRemove) {
-        onValueChange(options.filter(function (option) { return option.id !== optionToRemove.id; }));
+    const handleRemove = (0, react_1.useCallback)((optionToRemove) => {
+        onValueChange(options.filter((option) => option.id !== optionToRemove.id));
     }, [options, onValueChange]);
-    return (react_1.default.createElement(react_2.Box, { width: width },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", borderColor: error || localError
-                ? theme.colors.semantic.error[500]
-                : (_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], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
-                borderColor: error || localError
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, border: "0.063rem solid", borderColor: error || localError
                     ? theme.colors.semantic.error[500]
-                    : theme.colors.primary[500],
-                boxShadow: "0 0 0 0.125rem ".concat(error || localError
-                    ? (_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error
-                    : (_e = theme.colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary),
-            } },
-            options.map(function (option) { return (react_1.default.createElement(Tag_1.default, { key: option.id, size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: function () { return handleRemove(option); }, icon: lucide_react_1.X })); }),
-            react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: __assign({ backgroundColor: "transparent" }, inputStyle), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })),
-        (error || localError) && (react_1.default.createElement(ErrorMessage_1.default, { errorMessage: localError || errorMessage })),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+                    : (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500], borderRadius: "0.5rem", bg: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[50], minH: s.minH, transition: "border-color 0.2s, box-shadow 0.2s", _focusWithin: {
+                    borderColor: error || localError
+                        ? theme.colors.semantic.error[500]
+                        : theme.colors.primary[500],
+                    boxShadow: `0 0 0 0.125rem ${error || localError
+                        ? (_c = theme.colors.boxShadow) === null || _c === void 0 ? void 0 : _c.error
+                        : (_d = theme.colors.boxShadow) === null || _d === void 0 ? void 0 : _d.primary}`,
+                }, children: [options.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: option.label, onIconClick: () => handleRemove(option), icon: lucide_react_1.X }, option.id))), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: "500", color: theme.colors.gray[700], letterSpacing: "0.02em", flex: "1", minW: 0, style: {
+                            backgroundColor: "transparent",
+                            ...inputStyle,
+                        }, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: options.length === 0 ? placeholderText : "" })] }), (error || localError) && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: localError || errorMessage })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));
 }

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -13,7 +13,7 @@ export type MultiSelectProps = {
     isReadOnly?: boolean;
     error?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
-    inputStyle?: {};
+    inputStyle?: object;
     errorMessage?: string;
     helperText?: string;
 };
@@ -21,3 +21,4 @@ export type MultiSelctOPtions = {
     id: string;
     label: string;
 };
+//# sourceMappingURL=MultiSelectProps.d.ts.map

package/dist/Components/MultiSelect/MultiSelectProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectProps.d.ts","sourceRoot":"","sources":["../../../src/Components/MultiSelect/MultiSelectProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,aAAa,EAAE,CAAC,OAAO,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/dist/Components/NavigationBar/NavBar.stories.d.ts

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=NavBar.stories.d.ts.map

package/dist/Components/NavigationBar/NavBar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.stories.d.ts","sourceRoot":"","sources":["../../../src/Components/NavigationBar/NavBar.stories.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,CAAC"}

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

@@ -1,3 +1,3 @@
-import React from "react";
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): React.JSX.Element;
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NavigationBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/Components/NavigationBar/NavigationBar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAa,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAS9D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,gBAAgB,GAChB,EAAE,WAAW,2CAkKb"}

package/dist/Components/NavigationBar/NavigationBar.js

@@ -1,30 +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 };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = NavBar;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-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, 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)();
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const lucide_react_1 = require("lucide-react");
+function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, }) {
+    var _a, _b, _c, _d;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Shared rounded pill affordance for the bar's icon controls.
-    var iconButtonStyle = {
+    const iconButtonStyle = {
         w: "1.75rem",
         h: "1.75rem",
         alignItems: "center",
@@ -35,7 +20,7 @@ function NavBar(_a) {
         _hover: { bg: "blackAlpha.50" },
     };
     // Light elevated pill item.
-    var menuItemStyle = {
+    const menuItemStyle = {
         bg: "transparent",
         borderRadius: "7px",
         mx: "0.375rem",
@@ -50,35 +35,14 @@ function NavBar(_a) {
         _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, __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, { minW: 0, flexShrink: 1 },
-                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0 },
-                    moreIcon && (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", minW: 0 }, moreIcon)),
-                    react_1.default.createElement(react_2.Menu, null,
-                        react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 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, 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, { pt: 4, pb: 2 },
-                                    react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
-                                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: 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, { 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))))))))));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: { base: "flex", lg: "none", xl: "none", md: "none" }, ...iconButtonStyle, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary) === null || _d === void 0 ? void 0 : _d[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.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", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: "gray.800", isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: "gray.500", isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                                        var _a, _b, _c;
+                                                        return ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.Box, { children: menu.title })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+                                                    }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
+                                                        ...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" },
+                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { children: logoutText })] })] }) })] })] }) })] }) }));
 }

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

@@ -1,21 +1,24 @@
+import type { ReactNode } from "react";
 export type NavbarProps = {
     userAvathar: string;
     userName: string;
     userRole?: string;
     navMenu: MenuProps[];
-    moreIcon?: any;
+    moreIcon?: ReactNode;
     handleNavOnClick: (url: string) => void;
     handleLogout: () => void;
     logoutText: string;
     navigationBarText?: {
-        text: React.ReactNode;
+        text: ReactNode;
         onIconClick?: () => void;
     };
     sideBarToggole?: boolean;
     onSideBarToggole?: () => void;
 };
 export type MenuProps = {
+    id?: string | number;
     title: string;
     url: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
 };
+//# sourceMappingURL=NavigationBarProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBarProps.d.ts","sourceRoot":"","sources":["../../../src/Components/NavigationBar/NavigationBarProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE;QAClB,IAAI,EAAE,SAAS,CAAC;QAChB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;IACF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC"}

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { NoteTextAreaProps } from "./NoteTextAreaProps";
-export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): React.JSX.Element;
+export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref: inputRef, customPlaceholder, cancelButtonHide, }: NoteTextAreaProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NoteTextArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NoteTextArea.d.ts","sourceRoot":"","sources":["../../../src/Components/NoteTextArea/NoteTextArea.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAUxD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAc,EACd,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,UAAkB,EAClB,iBAAiB,EACjB,WAA6B,EAC7B,iBAAuE,EACvE,gBAAqB,EACrB,QAAQ,EACR,GAAG,EAAE,QAAQ,EACb,iBAAmC,EACnC,gBAAwB,GAC3B,EAAE,iBAAiB,2CAgXnB"}