pixelize-design-library 2.3.7 → 2.3.8

package/dist/Components/SelectSearch/SelectSearch.js

@@ -1,103 +1,39 @@
 "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 = 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"));
-var RenderOptions = function (_a) {
-    var isOptionLoading = _a.isOptionLoading, filteredOptions = _a.filteredOptions, loadingText = _a.loadingText, handleOptionClick = _a.handleOptionClick, isProfile = _a.isProfile, isColorOptions = _a.isColorOptions;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
+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 fieldStyles_1 = require("../Common/fieldStyles");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const lucide_react_1 = require("lucide-react");
+const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isOptionLoading) {
-        return (react_1.default.createElement(react_2.VStack, { py: 2 },
-            react_1.default.createElement(react_2.Spinner, { size: "sm", color: theme.colors.primary[500] }),
-            react_1.default.createElement(react_2.Text, { color: theme.colors.primary[500] }, loadingText)));
+        return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { py: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.primary[500] }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.primary[500], children: loadingText })] }));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return (react_1.default.createElement(react_1.default.Fragment, null, filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: function () { return handleOptionClick(option); }, display: "flex", alignItems: "center", gap: "0.5rem" },
-            isProfile && (react_1.default.createElement(react_2.Box, null,
-                react_1.default.createElement(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }))),
-            isColorOptions && (react_1.default.createElement(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })),
-            react_1.default.createElement(react_2.Box, null,
-                react_1.default.createElement(react_2.Box, null, option.label),
-                option.email && (react_1.default.createElement(react_2.Box, { fontSize: 12, color: "gray.400" }, option.email))))); })));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: "gray.400", children: option.email }))] })] }, option.id))) }));
     }
-    return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
+    return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: "gray.500", children: "No options found" }));
 };
-function SelectSearch(_a) {
-    var options = _a.options, initialSelectedOption = _a.initialSelectedOption, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, dropdownStyle = _a.dropdownStyle, inputStyle = _a.inputStyle, isOptionLoading = _a.isOptionLoading, _b = _a.loadingText, loadingText = _b === void 0 ? "loading" : _b, boxStyle = _a.boxStyle, _c = _a.placeholder, placeholder = _c === void 0 ? "Select Option" : _c, _d = _a.searchQuery, searchQuery = _d === void 0 ? null : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, _f = _a.isMultipleSelect, isMultipleSelect = _f === void 0 ? false : _f, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.isProfile, isProfile = _j === void 0 ? false : _j, _k = _a.isBottomIcon, isBottomIcon = _k === void 0 ? false : _k, errorMessage = _a.errorMessage, 
-    // BottomIconStyle,
-    _l = _a.BottomIcon, 
-    // BottomIconStyle,
-    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 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];
-    var _p = (0, react_1.useState)(false), isOpen = _p[0], setIsOpen = _p[1];
-    var _q = (0, react_1.useState)("below"), position = _q[0], setPosition = _q[1];
-    var inputRef = (0, react_1.useRef)(null);
-    var dropdownRef = (0, react_1.useRef)(null);
+function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, 
+// BottomIconStyle,
+BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const errorBorder = `2px solid ${theme.colors.semantic.error[500]}`;
+    const defaultBorderThin = `1px solid ${theme.colors.boxborder[500]}`;
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []);
+    const [inputValue, setInputValue] = (0, react_1.useState)(searchQuery);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [position, setPosition] = (0, react_1.useState)("below");
+    const inputRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
     // const filteredOptions = useMemo(() => {
     //   return options.filter((option) => {
     //     const optionLabel = option.label || '';
@@ -105,18 +41,18 @@ function SelectSearch(_a) {
     //     return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
     //   });
     // }, [options, inputValue]);
-    var filteredOptions = (0, react_1.useMemo)(function () {
-        return options.filter(function (option) {
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        return options.filter((option) => {
             // First filter out already selected options
             // const isNotSelected = !selectedOptions.some(
             //   (selected) => selected.id === option.id
             // );
-            var isNotSelected = isMultipleSelect
-                ? !selectedOptions.some(function (selected) { return selected.id === option.id; })
+            const isNotSelected = isMultipleSelect
+                ? !selectedOptions.some((selected) => selected.id === option.id)
                 : true;
             // Then apply the search filter
-            var optionLabel = option.label || "";
-            var searchValue = inputValue || "";
+            const optionLabel = option.label || "";
+            const searchValue = inputValue || "";
             return (isNotSelected &&
                 optionLabel.toLowerCase().includes(searchValue.toLowerCase()));
         });
@@ -150,19 +86,19 @@ function SelectSearch(_a) {
     //     },
     //     [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
     //   );
-    var handleOptionClick = (0, react_1.useCallback)(function (option) {
+    const handleOptionClick = (0, react_1.useCallback)((option) => {
         if (isMultipleSelect) {
-            setSelectedOptions(function (prev) {
-                var isSelected = prev.some(function (selected) { return selected.id === option.id; });
-                var newSelected = isSelected
-                    ? prev.filter(function (selected) { return selected.id !== option.id; })
-                    : __spreadArray(__spreadArray([], prev, true), [option], false);
+            setSelectedOptions((prev) => {
+                const isSelected = prev.some((selected) => selected.id === option.id);
+                const newSelected = isSelected
+                    ? prev.filter((selected) => selected.id !== option.id)
+                    : [...prev, option];
                 // Update the input value and notify the parent
                 setInputValue("");
                 if (onOptionMultiSelect) {
                     // Call the prop to update state in the parent component
                     // Note: This should not directly set the state in SelectSearch
-                    setTimeout(function () { return onOptionMultiSelect(newSelected); }, 0);
+                    setTimeout(() => onOptionMultiSelect(newSelected), 0);
                 }
                 return newSelected;
             });
@@ -175,34 +111,32 @@ function SelectSearch(_a) {
             }
         }
     }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
-    var handleRemoveOption = function (option) {
-        setSelectedOptions(function (prev) {
-            return prev.filter(function (selected) { return selected.id !== option.id; });
-        });
+    const handleRemoveOption = (option) => {
+        setSelectedOptions((prev) => prev.filter((selected) => selected.id !== option.id));
         if (onOptionMultiSelect) {
-            onOptionMultiSelect(selectedOptions.filter(function (selected) { return selected.id !== option.id; }));
+            onOptionMultiSelect(selectedOptions.filter((selected) => selected.id !== option.id));
             setInputValue("");
         }
     };
-    var handleInputChange = function (value) {
+    const handleInputChange = (value) => {
         setInputValue(value);
         inputOnchange(value);
     };
-    var handleKeyDown = function (e) {
+    const handleKeyDown = (e) => {
         if (e.key === "Enter") {
-            var matchingOption = options.find(function (option) { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
+            const matchingOption = options.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
             if (matchingOption) {
                 handleOptionClick(matchingOption);
             }
         }
     };
-    var updateDropdownPosition = function () {
+    const updateDropdownPosition = () => {
         if (inputRef.current && dropdownRef.current) {
-            var inputRect = inputRef.current.getBoundingClientRect();
-            var dropdownRect = dropdownRef.current.getBoundingClientRect();
-            var viewportHeight = window.innerHeight;
-            var spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
-            var spaceAbove = inputRect.top + window.scrollY;
+            const inputRect = inputRef.current.getBoundingClientRect();
+            const dropdownRect = dropdownRef.current.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
+            const spaceAbove = inputRect.top + window.scrollY;
             if (spaceBelow >= dropdownRect.height) {
                 setPosition("below");
             }
@@ -214,11 +148,11 @@ function SelectSearch(_a) {
             }
         }
     };
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (isOpen) {
             updateDropdownPosition();
         }
-        var handleClickOutside = function (event) {
+        const handleClickOutside = (event) => {
             if (inputRef.current &&
                 dropdownRef.current &&
                 !inputRef.current.contains(event.target) &&
@@ -227,36 +161,29 @@ function SelectSearch(_a) {
             }
         };
         document.addEventListener("mousedown", handleClickOutside);
-        return function () {
+        return () => {
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_2.FormControl, { isInvalid: error },
-            react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
-                label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-                isMultipleSelect && selectedOptions.length > 0 && (react_1.default.createElement(react_2.HStack, { spacing: 2, mb: 2 }, selectedOptions.map(function (option) { return (react_1.default.createElement(react_2.Tag, { size: "md", key: option.id, borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] } },
-                    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, 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
-                                ? 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 }),
-                    react_1.default.createElement("hr", null),
-                    isBottomIcon && (react_1.default.createElement(react_2.Box, { position: "sticky", bottom: 0, background: "white", display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: "1px solid lightgray" },
-                        react_1.default.createElement(react_2.Box, null, BottomIcon ? BottomIcon : react_1.default.createElement(lucide_react_1.PlusIcon, { size: "1rem" })),
-                        react_1.default.createElement(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
-                                ? BottomTextColor
-                                : theme.colors.primary[500], padding: "8px 8px" }, BottomText || "Add New"))))),
-                error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => setIsOpen(true), onChange: (e) => 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
+                                        ? theme.colors.semantic.error[500]
+                                        : theme.colors.primary[500],
+                                    boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme, !!error),
+                                }, style: {
+                                    ...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 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(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, children: [(0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: "white", display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: "gray.300", zIndex: 1, borderTop: "1px solid lightgray", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
+                                            ? BottomTextColor
+                                            : theme.colors.primary[500], padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }) }) }));
 }

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -9,7 +9,6 @@ export type SelectSearchProps = {
     name?: string;
     label?: string;
     inputStyle?: React.CSSProperties;
-    dropdownStyle?: React.CSSProperties;
     boxStyle?: React.CSSProperties;
     isOptionLoading?: boolean;
     loadingText?: string;
@@ -18,7 +17,7 @@ export type SelectSearchProps = {
     isInformation?: boolean;
     informationMessage?: string;
     rightIcon?: React.ReactNode;
-    rightElementStyle?: {};
+    rightElementStyle?: object;
     isMultipleSelect?: boolean;
     isRequired?: boolean | undefined;
     error?: boolean | undefined;
@@ -39,3 +38,4 @@ export type selectOptions = {
     profileUrl?: string;
     color?: string;
 };
+//# sourceMappingURL=SelectSearchProps.d.ts.map

package/dist/Components/SelectSearch/SelectSearchProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectSearchProps.d.ts","sourceRoot":"","sources":["../../../src/Components/SelectSearch/SelectSearchProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACxD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAElC,YAAY,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}

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

@@ -2,3 +2,4 @@ import React from "react";
 import { SecondaryBarProps } from "./SideBarProps";
 declare const SecondaryBar: React.FC<SecondaryBarProps>;
 export default SecondaryBar;
+//# sourceMappingURL=SecondaryBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SecondaryBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,OAAO,EAAa,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAmK9D,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuH7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/Components/SideBar/SecondaryBar.js

@@ -1,49 +1,17 @@
 "use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var 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) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const lucide_react_1 = require("lucide-react");
+const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const Sidebar_1 = require("../../Constants/Sidebar");
+const parseBadge = (badge) => {
     var _a, _b, _c;
     return ({
         badgeVal: badge === null || badge === void 0 ? void 0 : badge.count,
@@ -52,56 +20,26 @@ var parseBadge = function (badge) {
         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, { 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.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 },
-                            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))))))));
+const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(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: () => !item.disabled && (onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item)), bg: isActive ? theme.colors.primary.opacity[16] : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? theme.colors.primary[300] : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(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', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: 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, { 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: 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))));
+const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
+    return ((0, jsx_runtime_1.jsxs)(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: () => !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", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(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" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(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", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: 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.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[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);
-                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 }));
-            })))));
+const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
+    const width = collapsed ? collapsedWidth : expandedWidth;
+    return ((0, jsx_runtime_1.jsx)(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, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(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, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "0.95rem", color: theme.colors.primary[300], flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { w: "20px", h: "20px", borderRadius: "5px", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.white, opacity: 0.6 }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.white, opacity: 0.6 })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
+                        var _a;
+                        const isActive = String(selected) === String(item.id) ||
+                            String(selected) === String(item.title);
+                        const key = String((_a = item.id) !== null && _a !== void 0 ? _a : item.title);
+                        return collapsed ? ((0, jsx_runtime_1.jsx)(CollapsedItem, { item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }, key)) : ((0, jsx_runtime_1.jsx)(ExpandedItem, { item: item, isActive: isActive, itemFontSize: itemFontSize, onItemClick: onItemClick }, key));
+                    }) })] }) }));
 };
 exports.default = SecondaryBar;

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, companySubtitle, user, 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): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SideBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBar.d.ts","sourceRoot":"","sources":["../../../src/Components/SideBar/SideBar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAe,MAAM,gBAAgB,CAAC;AAkU3D,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,eAAe,EACf,IAAI,EACJ,eAAuB,EACvB,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,SAAS,EACT,YAAY,EACZ,IAAW,EACX,SAAS,GACV,EAAE,YAAY,2CAoHd"}