pixelize-design-library 1.1.30 → 1.1.31

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -28,4 +28,5 @@ export type ButtonGroupIconProps = {
     rightIconDropdown?: boolean;
     menulistStyle?: React.CSSProperties;
     menuItemStyle?: React.CSSProperties;
+    isLoading?: boolean;
 };

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.d.ts

@@ -2,4 +2,4 @@ import React from "react";
 import { ButtonGroupIconProps } from "./ButtonGoupIconProps";
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
-rightIconDropdown, menulistStyle, menuItemStyle }: ButtonGroupIconProps): React.JSX.Element;
+rightIconDropdown, menulistStyle, menuItemStyle, isLoading, }: ButtonGroupIconProps): React.JSX.Element;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -29,7 +29,7 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ButtonGroupIcon(_a) {
     var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onLeftIconClick = _a.onLeftIconClick, onRightIconClick = _a.onRightIconClick, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onButtongroupClick = _a.onButtongroupClick, size = _a.size, variant = _a.variant, color = _a.color, buttonGroupStyle = _a.buttonGroupStyle, buttonGroupLeftIconStyle = _a.buttonGroupLeftIconStyle, buttonGroupRightIconStyle = _a.buttonGroupRightIconStyle, buttonStyle = _a.buttonStyle, onBlurLeftIcon = _a.onBlurLeftIcon, onBlurRightIcon = _a.onBlurRightIcon, dropdownOptions = _a.dropdownOptions, // New prop for dropdown options
     onDropdownOptionClick = _a.onDropdownOptionClick, // New prop to handle option clicks
-    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle;
+    rightIconDropdown = _a.rightIconDropdown, menulistStyle = _a.menulistStyle, menuItemStyle = _a.menuItemStyle, isLoading = _a.isLoading;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _b = (0, react_1.useState)(false), isDropdownOpen = _b[0], setIsDropdownOpen = _b[1];
     var handleRightIconClick = function () {
@@ -52,7 +52,7 @@ function ButtonGroupIcon(_a) {
                     backgroundColor: theme.colors.primary[400],
                 },
             } })),
-        react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, sx: {
+        react_1.default.createElement(react_2.Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, sx: {
                 backgroundColor: theme.colors.primary[500],
                 "&:hover": {
                     backgroundColor: theme.colors.primary[400],
@@ -68,11 +68,11 @@ function ButtonGroupIcon(_a) {
             react_1.default.createElement(react_2.Portal, null,
                 react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle }, option === null || option === void 0 ? void 0 :
                     option.image,
-                    option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
+                    option.label)); }))))) : (rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
                 backgroundColor: theme.colors.primary[500],
                 "&:hover": {
                     backgroundColor: theme.colors.primary[400],
                 },
-            } }))));
+            } })))));
 }
 exports.default = ButtonGroupIcon;

package/dist/Components/DatePicker/DatePicker.js

@@ -16,7 +16,7 @@ var FormLabel_1 = require("../Common/FormLabel");
 var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 var HelperText_1 = __importDefault(require("../Common/HelperText"));
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"], ["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"])), function (props) { return props.theme.colors.primary[500]; });
+var DatePickerContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n    font-size: 14px;\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"], ["\n  border-radius: 5px;\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  color: #333;\n  .react-datepicker-wrapper {\n    width: 100%;\n  }\n  .react-datepicker__input-container input {\n    width: 100%;\n    padding: 8px;\n    border: none;\n    border-radius: 5px;\n    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n    font-size: 14px;\n  }\n  .react-datepicker__input-container input:focus {\n    outline: none;\n    box-shadow: 0 0 5px rgb(49 130 206);\n  }\n  .react-datepicker__day--selected {\n    background-color: ", " !important;\n    color: white !important;\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: #66bb6a !important;\n    color: white !important;\n  }\n"])), function (props) { return props.theme.colors.primary[500]; });
 // const Label = styled.label`
 //   display: block;
 //   margin-bottom: 5px;

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, }: NoteTextAreaProps): React.JSX.Element;
+export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, }: NoteTextAreaProps): React.JSX.Element;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -70,16 +70,22 @@ var FileUploadLabel = styled_1.default.label(templateObject_6 || (templateObject
 var AddTitleButton = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"], ["\n  color: #616e88;\n  cursor: pointer;\n  fontsize: 0.8rem;\n"])));
 var Button = styled_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"], ["\n  border: none;\n  padding: 3px 15px;\n  text-align: center;\n  text-decoration: none;\n  background: ", ";\n  color: ", ";\n  font-size: 1rem;\n  margin-right: 5px;\n  border-radius: 5px;\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n"])), function (_a) {
     var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, theme = _a.theme;
-    return isSaveButton ? (noteValue && !isLoading ? theme.colors.primary[500] : theme.colors.primary[500]) : "white";
+    return isSaveButton
+        ? noteValue && !isLoading
+            ? theme.colors.primary[500]
+            : theme.colors.primary[500]
+        : "white";
 }, function (_a) {
     var isSaveButton = _a.isSaveButton, isLoading = _a.isLoading;
     return isSaveButton && !isLoading ? "white" : "white";
 }, function (_a) {
-    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
-    return isSaveButton && (!noteValue || isLoading) ? "0.5" : "1";
+    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
+    return isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1";
 }, function (_a) {
-    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading;
-    return isSaveButton && (!noteValue || isLoading) ? "initial" : "pointer";
+    var isSaveButton = _a.isSaveButton, noteValue = _a.noteValue, isLoading = _a.isLoading, disabled = _a.disabled;
+    return isSaveButton && (!noteValue || isLoading || disabled)
+        ? "initial"
+        : "pointer";
 }, function (_a) {
     var isLoading = _a.isLoading;
     return (isLoading ? "none" : "auto");
@@ -88,16 +94,28 @@ var CancelButton = styled_1.default.button(templateObject_9 || (templateObject_9
 var FileViewer = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 300px;\n"])));
 var FileEdit = (0, styled_1.default)(fi_1.FiX)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  cursor: pointer;\n  color: #ff0000;\n"], ["\n  cursor: pointer;\n  color: #ff0000;\n"])));
 var ErrorText = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"], ["\n  color: #ff0000;\n  font-size: 0.8rem;\n  margin-top: 8px;\n"])));
+var countWords = function (text) {
+    return text.trim().split(/\s+/).length;
+};
 function NoteTextArea(_a) {
-    var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e;
+    var _b = _a.width, width = _b === void 0 ? "100%" : _b, handleSubmit = _a.handleSubmit, handleCancel = _a.handleCancel, value = _a.value, title = _a.title, file = _a.file, _c = _a.isEditable, isEditable = _c === void 0 ? false : _c, saveButtonLoading = _a.saveButtonLoading, _d = _a.maxFileSize, maxFileSize = _d === void 0 ? 1 * 1024 * 1024 : _d, _e = _a.maxFilesSizeError, maxFilesSizeError = _e === void 0 ? "Some files are too large. Maximum allowed size is" : _e, _f = _a.maxNoteWordCount, maxNoteWordCount = _f === void 0 ? 15 : _f;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var noteAreaRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(false), isActive = _f[0], setIsActive = _f[1];
-    var _g = (0, react_1.useState)(""), noteValue = _g[0], setNoteValue = _g[1];
-    var _h = (0, react_1.useState)(""), titleValue = _h[0], setTitleValue = _h[1];
-    var _j = (0, react_1.useState)(false), titleShow = _j[0], setTitleShow = _j[1];
-    var _k = (0, react_1.useState)([]), files = _k[0], setFiles = _k[1];
-    var _l = (0, react_1.useState)(""), fileError = _l[0], setFileError = _l[1];
+    var _g = (0, react_1.useState)(false), isActive = _g[0], setIsActive = _g[1];
+    var _h = (0, react_1.useState)(""), noteValue = _h[0], setNoteValue = _h[1];
+    var _j = (0, react_1.useState)(""), titleValue = _j[0], setTitleValue = _j[1];
+    var _k = (0, react_1.useState)(false), titleShow = _k[0], setTitleShow = _k[1];
+    var _l = (0, react_1.useState)([]), files = _l[0], setFiles = _l[1];
+    var _m = (0, react_1.useState)(""), fileError = _m[0], setFileError = _m[1];
+    var _o = (0, react_1.useState)(false), isSaveDisabled = _o[0], setIsSaveDisabled = _o[1];
+    (0, react_1.useEffect)(function () {
+        var titleWordCount = countWords(titleValue);
+        setIsSaveDisabled(titleWordCount > maxNoteWordCount);
+    }, [titleValue, maxNoteWordCount]);
+    (0, react_1.useEffect)(function () {
+        var noteWordCount = countWords(noteValue);
+        setIsSaveDisabled(noteWordCount > maxNoteWordCount);
+    }, [noteValue, maxNoteWordCount]);
     (0, react_1.useEffect)(function () {
         if (isEditable) {
             setIsActive(true);
@@ -228,13 +246,19 @@ function NoteTextArea(_a) {
                         react_1.default.createElement(AddTitleButton, { onClick: handleSetTitle }, "Add a Title"))),
                     react_1.default.createElement("div", { style: { marginLeft: "auto" } },
                         react_1.default.createElement(CancelButton, { onClick: handleCloseTextArea }, "Cancel"),
-                        react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, disabled: !noteValue, isLoading: saveButtonLoading, theme: theme, onClick: function () {
+                        react_1.default.createElement(Button, { isSaveButton: true, noteValue: noteValue, isLoading: saveButtonLoading, disabled: !noteValue || isSaveDisabled, theme: theme, onClick: function () {
                                 handleSubmit(noteValue, titleValue, files);
                                 // handleCloseTextArea();
                             } },
                             saveButtonLoading && (react_1.default.createElement("span", { style: { marginRight: "6px" } },
                                 react_1.default.createElement(react_2.Spinner, { thickness: "2px", speed: "0.75s", emptyColor: "gray.200", color: "blue.500", size: "xs" }))),
                             "Save"))),
+                react_1.default.createElement("div", { style: { display: "flex", gap: "10px" } },
+                    react_1.default.createElement("div", null, "Note:"),
+                    react_1.default.createElement("div", null,
+                        "You can add up to ",
+                        maxNoteWordCount,
+                        " words only")),
                 fileError && react_1.default.createElement(ErrorText, null, fileError),
                 " ",
                 files.length > 0 && (react_1.default.createElement("div", null, files.map(function (item, index) { return (react_1.default.createElement(FileViewer, { key: index },

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

@@ -9,4 +9,5 @@ export type NoteTextAreaProps = {
     saveButtonLoading: boolean;
     maxFileSize?: number;
     maxFilesSizeError?: string;
+    maxNoteWordCount?: number;
 };

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { SelectSearchProps } from "./SelectSearchProps";
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, dropdownStyle, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -313,17 +313,17 @@ var RenderOptions = function (_a) {
     return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "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, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, 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 ? "" : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, isMultipleSelect = _a.isMultipleSelect, _f = _a.isRequired, isRequired = _f === void 0 ? false : _f, onOptionMultiSelect = _a.onOptionMultiSelect;
+    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;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _g[0], setSelectedOptions = _g[1];
-    var _h = (0, react_1.useState)(searchQuery), inputValue = _h[0], setInputValue = _h[1];
-    var _j = (0, react_1.useState)(false), isOpen = _j[0], setIsOpen = _j[1];
-    var _k = (0, react_1.useState)("below"), position = _k[0], setPosition = _k[1];
+    var _h = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []), selectedOptions = _h[0], setSelectedOptions = _h[1];
+    var _j = (0, react_1.useState)(searchQuery), inputValue = _j[0], setInputValue = _j[1];
+    var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = (0, react_1.useState)("below"), position = _l[0], setPosition = _l[1];
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = (0, react_1.useMemo)(function () {
         return options.filter(function (option) {
-            return option.label.toLowerCase().includes(inputValue.toLowerCase());
+            return option.label.toLowerCase().includes((inputValue !== null && inputValue !== void 0 ? inputValue : "").toLowerCase());
         });
     }, [options, inputValue]);
     //   const handleOptionClick = useCallback(
@@ -390,7 +390,9 @@ function SelectSearch(_a) {
     };
     var handleKeyDown = function (e) {
         if (e.key === "Enter") {
-            var matchingOption = options.find(function (option) { return option.label.toLowerCase() === inputValue.toLowerCase(); });
+            var matchingOption = options.find(function (option) {
+                return option.label.toLowerCase() === (inputValue !== null && inputValue !== void 0 ? inputValue : "").toLowerCase();
+            });
             if (matchingOption) {
                 handleOptionClick(matchingOption);
             }
@@ -437,7 +439,7 @@ 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, variant: "flushed", value: inputValue, onClick: 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: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
+            react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "flushed", value: inputValue ? inputValue : "", onClick: 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: { borderColor: "blue.500" }, _focus: { borderColor: "blue.500" }, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.main, fontWeight: 800, color: theme.colors.gray[700], padding: "0 0.5rem", fontSize: 15, letterSpacing: 0.7 }) }),
             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, 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 })))));

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

@@ -15,7 +15,7 @@ export type SelectSearchProps = {
     isOptionLoading?: boolean;
     loadingText?: string;
     placeholder?: string;
-    searchQuery: string;
+    searchQuery: string | null;
     isInformation?: boolean;
     informationMessage?: string;
     rightIcon?: React.ReactNode;

package/dist/Components/Switch/Switch.js

@@ -19,7 +19,7 @@ var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __m
 var SwitchList = styled_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"], ["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"])));
 var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  ", "\n"])), function (_a) {
     var isActive = _a.isActive;
-    return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-weight: 500;\n      background-color: transparent;\n      z-index: 1;\n    "], ["\n      font-weight: 500;\n      background-color: transparent;\n      z-index: 1;\n    "])));
+    return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-weight: 700;\n      background-color: transparent;\n      z-index: 1;\n    "], ["\n      font-weight: 700;\n      background-color: transparent;\n      z-index: 1;\n    "])));
 });
 var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: white;\n  height: auto;\n  padding: 3px 3px 3px 3px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"], ["\n  background-color: white;\n  height: auto;\n  padding: 3px 3px 3px 3px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"])));
 function Switch(_a) {

package/package.json

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