npm - akeyless-client-commons - Versions diffs - 1.0.40 → 1.0.41 - Mend

akeyless-client-commons 1.0.40 → 1.0.41

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

Files changed (7) hide show

package/dist/components/index.d.mts +8 -5
package/dist/components/index.d.ts +8 -5
package/dist/components/index.js +81 -80
package/dist/components/index.mjs +25 -24
package/dist/types/index.d.mts +7 -5
package/dist/types/index.d.ts +7 -5
package/package.json +1 -1

package/dist/components/index.d.mts CHANGED Viewed

@@ -77,8 +77,8 @@ interface MultipleSelectorProps {
     defaultOptions?: MultipleSelectorOption[];
     options?: MultipleSelectorOption[];
     placeholder?: string;
-    loadingIndicator?: React$1.ReactNode;
-    emptyIndicator?: React$1.ReactNode;
+    loadingIndicator?: React__default.ReactNode;
+    emptyIndicator?: React__default.ReactNode;
     delay?: number;
     triggerSearchOnFocus?: boolean;
     onSearch?: (value: string) => Promise<MultipleSelectorOption[]>;
@@ -93,8 +93,8 @@ interface MultipleSelectorProps {
     badgeClassName?: string;
     selectFirstItem?: boolean;
     createNewOptionLabel?: string;
-    commandProps?: React$1.ComponentPropsWithoutRef<typeof Command>;
-    inputProps?: Omit<React$1.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
+    commandProps?: React__default.ComponentPropsWithoutRef<typeof Command>;
+    inputProps?: Omit<React__default.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
     hideClearAllButton?: boolean;
     dropdownClassName?: string;
     dropdownOptionClassName?: string;
@@ -165,6 +165,7 @@ interface SearchSelectProps {
     disabled?: boolean;
     direction?: Direction;
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface BaseElementProps {
@@ -235,6 +236,7 @@ interface MultiSelectProps extends Omit<BaseElementProps, "containerClassName" |
     sortAsNumber?: boolean;
     searchInputProps?: MultipleSelectorProps["inputProps"];
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface SelectWithSearchProps extends BaseElementProps {
     type?: "selectWithSearch";
@@ -255,6 +257,7 @@ interface SelectWithSearchProps extends BaseElementProps {
     sortAsNumber?: boolean;
     disabled?: boolean;
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface InternationalInputProps extends Omit<BaseElementProps, "elementClassName"> {
     type?: "internationalPhoneInput";
@@ -496,7 +499,7 @@ declare const useSortValues: (options: any[], sortDirection: "abc" | "cba", sort
 declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, }: InputContainerProps) => react_jsx_runtime.JSX.Element;
 declare const SelectContainer: ({ name, labelContent, containerClassName, labelClassName, defaultValue, elementClassName, optionClassName, required, options, optionsContainerClassName, sortDirection, sortAsNumber, direction, onChange, }: SelectContainerProps) => react_jsx_runtime.JSX.Element;
 declare function MultiSelect({ onChange, selectedOptions, emptyOptionsElement, unremovableOptions, options, styles, name, placeholder, labelContent, required, labelClassName, groupBy, onSearch, onSearchSync, triggerSearchOnFocus, sortDirection, sortAsNumber, direction, createNewOptionLabel, searchInputProps, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
-declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
+declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, createNewOptionContainerClassName, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
 declare const TextAreaContainer: ({ name, labelContent, defaultValue, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, }: TextAreaContainerProps) => react_jsx_runtime.JSX.Element;
 declare const ElementLabel: ({ labelContent, labelClassName, name, required, withDots, direction, }: Omit<BaseElementProps, "containerClassName" | "elementClassName"> & {
     withDots?: boolean;

package/dist/components/index.d.ts CHANGED Viewed

@@ -77,8 +77,8 @@ interface MultipleSelectorProps {
     defaultOptions?: MultipleSelectorOption[];
     options?: MultipleSelectorOption[];
     placeholder?: string;
-    loadingIndicator?: React$1.ReactNode;
-    emptyIndicator?: React$1.ReactNode;
+    loadingIndicator?: React__default.ReactNode;
+    emptyIndicator?: React__default.ReactNode;
     delay?: number;
     triggerSearchOnFocus?: boolean;
     onSearch?: (value: string) => Promise<MultipleSelectorOption[]>;
@@ -93,8 +93,8 @@ interface MultipleSelectorProps {
     badgeClassName?: string;
     selectFirstItem?: boolean;
     createNewOptionLabel?: string;
-    commandProps?: React$1.ComponentPropsWithoutRef<typeof Command>;
-    inputProps?: Omit<React$1.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
+    commandProps?: React__default.ComponentPropsWithoutRef<typeof Command>;
+    inputProps?: Omit<React__default.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
     hideClearAllButton?: boolean;
     dropdownClassName?: string;
     dropdownOptionClassName?: string;
@@ -165,6 +165,7 @@ interface SearchSelectProps {
     disabled?: boolean;
     direction?: Direction;
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface BaseElementProps {
@@ -235,6 +236,7 @@ interface MultiSelectProps extends Omit<BaseElementProps, "containerClassName" |
     sortAsNumber?: boolean;
     searchInputProps?: MultipleSelectorProps["inputProps"];
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface SelectWithSearchProps extends BaseElementProps {
     type?: "selectWithSearch";
@@ -255,6 +257,7 @@ interface SelectWithSearchProps extends BaseElementProps {
     sortAsNumber?: boolean;
     disabled?: boolean;
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface InternationalInputProps extends Omit<BaseElementProps, "elementClassName"> {
     type?: "internationalPhoneInput";
@@ -496,7 +499,7 @@ declare const useSortValues: (options: any[], sortDirection: "abc" | "cba", sort
 declare const InputContainer: ({ validationError, name, inputType, labelContent, defaultValue, validationName, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, value, }: InputContainerProps) => react_jsx_runtime.JSX.Element;
 declare const SelectContainer: ({ name, labelContent, containerClassName, labelClassName, defaultValue, elementClassName, optionClassName, required, options, optionsContainerClassName, sortDirection, sortAsNumber, direction, onChange, }: SelectContainerProps) => react_jsx_runtime.JSX.Element;
 declare function MultiSelect({ onChange, selectedOptions, emptyOptionsElement, unremovableOptions, options, styles, name, placeholder, labelContent, required, labelClassName, groupBy, onSearch, onSearchSync, triggerSearchOnFocus, sortDirection, sortAsNumber, direction, createNewOptionLabel, searchInputProps, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
-declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
+declare const SelectWithSearch: ({ options, labelClassName, labelContent, name, onChange, value, placeholder, required, defaultValue, notFoundLabel, searchPlaceholder, containerClassName, dropdownClassName, dropdownOptionClassName, elementClassName, notFoundLabelClassName, searchClassName, buttonClassName, buttonFocusClassName, sortDirection, sortAsNumber, disabled, direction, createNewOptionLabel, createNewOptionContainerClassName, }: SelectWithSearchProps) => react_jsx_runtime.JSX.Element;
 declare const TextAreaContainer: ({ name, labelContent, defaultValue, containerClassName, labelClassName, elementClassName, required, placeholder, props, minLength, onKeyDown, onChange, direction, }: TextAreaContainerProps) => react_jsx_runtime.JSX.Element;
 declare const ElementLabel: ({ labelContent, labelClassName, name, required, withDots, direction, }: Omit<BaseElementProps, "containerClassName" | "elementClassName"> & {
     withDots?: boolean;

package/dist/components/index.js CHANGED Viewed

@@ -695,7 +695,7 @@ var Version = function(param) {
 // src/components/table/components.tsx
 var import_exceljs = __toESM(require("exceljs"));
 var import_file_saver = require("file-saver");
-var import_react7 = require("react");
+var import_react8 = require("react");
 // src/assets/svg.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var RedXSvg = function(param) {
@@ -1527,8 +1527,8 @@ ProgressComponent.displayName = ProgressPrimitive.Root.displayName;
 var import_react_dom = __toESM(require("react-dom"));
 var import_cmdk2 = require("cmdk");
 var import_lucide_react3 = require("lucide-react");
-var React9 = __toESM(require("react"));
-var import_react5 = require("react");
+var import_react5 = __toESM(require("react"));
+var import_react6 = require("react");
 // src/components/ui/command.tsx
 var import_cmdk = require("cmdk");
 var import_lucide_react2 = require("lucide-react");
@@ -3619,7 +3619,7 @@ function isOptionsExist(groupOption, targetOption) {
     }
     return false;
 }
-var CommandEmpty2 = (0, import_react5.forwardRef)(function(_param, forwardedRef) {
+var CommandEmpty2 = (0, import_react6.forwardRef)(function(_param, forwardedRef) {
     var className = _param.className, props = _object_without_properties(_param, [
         "className"
     ]);
@@ -3636,8 +3636,8 @@ var CommandEmpty2 = (0, import_react5.forwardRef)(function(_param, forwardedRef)
 });
 CommandEmpty2.displayName = "CommandEmpty";
 function useDebounce(value, delay) {
-    var _React9_useState = _sliced_to_array(React9.useState(value), 2), debouncedValue = _React9_useState[0], setDebouncedValue = _React9_useState[1];
-    (0, import_react5.useEffect)(function() {
+    var _import_react5_default_useState = _sliced_to_array(import_react5.default.useState(value), 2), debouncedValue = _import_react5_default_useState[0], setDebouncedValue = _import_react5_default_useState[1];
+    (0, import_react6.useEffect)(function() {
         var timer = setTimeout(function() {
             return setDebouncedValue(value);
         }, delay || 500);
@@ -3650,10 +3650,10 @@ function useDebounce(value, delay) {
     ]);
     return debouncedValue;
 }
-var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
+var MultipleSelector = (0, import_react6.forwardRef)(function(param, ref) {
     var value = param.value, onChange = param.onChange, placeholder = param.placeholder, tmp = param.defaultOptions, arrayDefaultOptions = tmp === void 0 ? [] : tmp, arrayOptions = param.options, delay = param.delay, onSearch = param.onSearch, onSearchSync = param.onSearchSync, loadingIndicator = param.loadingIndicator, emptyIndicator = param.emptyIndicator, _param_maxSelected = param.maxSelected, maxSelected = _param_maxSelected === void 0 ? Number.MAX_SAFE_INTEGER : _param_maxSelected, onMaxSelected = param.onMaxSelected, _param_hidePlaceholderWhenSelected = param.hidePlaceholderWhenSelected, hidePlaceholderWhenSelected = _param_hidePlaceholderWhenSelected === void 0 ? true : _param_hidePlaceholderWhenSelected, disabled = param.disabled, groupBy = param.groupBy, className = param.className, badgeClassName = param.badgeClassName, _param_selectFirstItem = param.selectFirstItem, selectFirstItem = _param_selectFirstItem === void 0 ? true : _param_selectFirstItem, createNewOptionLabel = param.createNewOptionLabel, _param_triggerSearchOnFocus = param.triggerSearchOnFocus, triggerSearchOnFocus = _param_triggerSearchOnFocus === void 0 ? true : _param_triggerSearchOnFocus, commandProps = param.commandProps, inputProps = param.inputProps, _param_hideClearAllButton = param.hideClearAllButton, hideClearAllButton = _param_hideClearAllButton === void 0 ? false : _param_hideClearAllButton, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, emptyIndicatorClassName = param.emptyIndicatorClassName, _param_unremovableOptions = param.unremovableOptions, unremovableOptions = _param_unremovableOptions === void 0 ? [] : _param_unremovableOptions, name = param.name, _param_dropdownContainerClassName = param.dropdownContainerClassName, dropdownContainerClassName = _param_dropdownContainerClassName === void 0 ? "" : _param_dropdownContainerClassName;
     var _containerRef_current;
-    var _React9_useState = _sliced_to_array(React9.useState(false), 2), isLoading = _React9_useState[0], setIsLoading = _React9_useState[1];
+    var _import_react5_default_useState = _sliced_to_array(import_react5.default.useState(false), 2), isLoading = _import_react5_default_useState[0], setIsLoading = _import_react5_default_useState[1];
     var _useFloating = useFloating({
         placement: "bottom-start",
         middleware: [
@@ -3663,20 +3663,20 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         ],
         whileElementsMounted: autoUpdate
     }), x = _useFloating.x, y = _useFloating.y, strategy = _useFloating.strategy, refs = _useFloating.refs, update = _useFloating.update;
-    var containerRef = (0, import_react5.useRef)(null);
+    var containerRef = (0, import_react6.useRef)(null);
     var setContainerRef = function(node) {
         containerRef.current = node;
         refs.setReference(node);
     };
-    var inputRef = (0, import_react5.useRef)(null);
-    var _React9_useState1 = _sliced_to_array(React9.useState(false), 2), open = _React9_useState1[0], setOpen = _React9_useState1[1];
-    var _React9_useState2 = _sliced_to_array(React9.useState(false), 2), onScrollbar = _React9_useState2[0], setOnScrollbar = _React9_useState2[1];
-    var dropdownRef = (0, import_react5.useRef)(null);
-    var _React9_useState3 = _sliced_to_array(React9.useState(value || []), 2), selected = _React9_useState3[0], setSelected = _React9_useState3[1];
-    var _React9_useState4 = _sliced_to_array(React9.useState(transToGroupOption(arrayDefaultOptions, groupBy)), 2), options = _React9_useState4[0], setOptions = _React9_useState4[1];
-    var _React9_useState5 = _sliced_to_array(React9.useState(""), 2), inputValue = _React9_useState5[0], setInputValue = _React9_useState5[1];
+    var inputRef = (0, import_react6.useRef)(null);
+    var _import_react5_default_useState1 = _sliced_to_array(import_react5.default.useState(false), 2), open = _import_react5_default_useState1[0], setOpen = _import_react5_default_useState1[1];
+    var _import_react5_default_useState2 = _sliced_to_array(import_react5.default.useState(false), 2), onScrollbar = _import_react5_default_useState2[0], setOnScrollbar = _import_react5_default_useState2[1];
+    var dropdownRef = (0, import_react6.useRef)(null);
+    var _import_react5_default_useState3 = _sliced_to_array(import_react5.default.useState(value || []), 2), selected = _import_react5_default_useState3[0], setSelected = _import_react5_default_useState3[1];
+    var _import_react5_default_useState4 = _sliced_to_array(import_react5.default.useState(transToGroupOption(arrayDefaultOptions, groupBy)), 2), options = _import_react5_default_useState4[0], setOptions = _import_react5_default_useState4[1];
+    var _import_react5_default_useState5 = _sliced_to_array(import_react5.default.useState(""), 2), inputValue = _import_react5_default_useState5[0], setInputValue = _import_react5_default_useState5[1];
     var debouncedSearchTerm = useDebounce(inputValue, delay || 500);
-    React9.useImperativeHandle(ref, function() {
+    import_react5.default.useImperativeHandle(ref, function() {
         return {
             selectedValue: _to_consumable_array(selected),
             input: inputRef.current,
@@ -3691,7 +3691,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
     }, [
         selected
     ]);
-    (0, import_react5.useEffect)(function() {
+    (0, import_react6.useEffect)(function() {
         if (open) {
             update();
         }
@@ -3699,14 +3699,14 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         open,
         update
     ]);
-    var handleClickOutside = (0, import_react5.useCallback)(function(event) {
+    var handleClickOutside = (0, import_react6.useCallback)(function(event) {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target) && containerRef.current && !containerRef.current.contains(event.target)) {
             var _inputRef_current;
             setOpen(false);
             (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
         }
     }, []);
-    (0, import_react5.useEffect)(function() {
+    (0, import_react6.useEffect)(function() {
         if (open) {
             document.addEventListener("mousedown", handleClickOutside);
             document.addEventListener("touchend", handleClickOutside);
@@ -3722,14 +3722,14 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         open,
         handleClickOutside
     ]);
-    (0, import_react5.useEffect)(function() {
+    (0, import_react6.useEffect)(function() {
         if (value) {
             setSelected(value);
         }
     }, [
         value
     ]);
-    (0, import_react5.useEffect)(function() {
+    (0, import_react6.useEffect)(function() {
         if (!arrayOptions || onSearch) return;
         var newOption = transToGroupOption(arrayOptions || [], groupBy);
         if (JSON.stringify(newOption) !== JSON.stringify(options)) {
@@ -3742,7 +3742,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         onSearch,
         options
     ]);
-    (0, import_react5.useEffect)(function() {
+    (0, import_react6.useEffect)(function() {
         var doSearchSync = function() {
             var res = onSearchSync === null || onSearchSync === void 0 ? void 0 : onSearchSync(debouncedSearchTerm);
             setOptions(transToGroupOption(res || [], groupBy));
@@ -3776,7 +3776,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         triggerSearchOnFocus,
         onSearchSync
     ]);
-    (0, import_react5.useEffect)(function() {
+    (0, import_react6.useEffect)(function() {
         var doSearch = /*#__PURE__*/ function() {
             var _ref = _async_to_generator(function() {
                 var res;
@@ -3852,7 +3852,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         triggerSearchOnFocus,
         onSearch
     ]);
-    var handleUnselect = (0, import_react5.useCallback)(function(option) {
+    var handleUnselect = (0, import_react6.useCallback)(function(option) {
         if (unremovableOptions.find(function(v) {
             return (0, import_lodash4.isEqual)(v.value, option.value);
         })) {
@@ -3868,7 +3868,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         selected,
         unremovableOptions
     ]);
-    var handleKeyDown = (0, import_react5.useCallback)(function(e) {
+    var handleKeyDown = (0, import_react6.useCallback)(function(e) {
         var input = inputRef.current;
         if (input) {
             if (e.key === "Delete" || e.key === "Backspace") {
@@ -3887,7 +3887,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         handleUnselect,
         selected
     ]);
-    var combinedFloatingRef = (0, import_react5.useCallback)(function(node) {
+    var combinedFloatingRef = (0, import_react6.useCallback)(function(node) {
         if (!node) return;
         refs.setFloating(node);
         dropdownRef.current = node;
@@ -3938,7 +3938,7 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         }
         return void 0;
     };
-    var EmptyItem = (0, import_react5.useCallback)(function() {
+    var EmptyItem = (0, import_react6.useCallback)(function() {
         if (!emptyIndicator) return void 0;
         if (onSearch && !createNewOptionLabel && Object.keys(options).length === 0) {
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CommandItem, {
@@ -3959,13 +3959,13 @@ var MultipleSelector = (0, import_react5.forwardRef)(function(param, ref) {
         options,
         emptyIndicatorClassName
     ]);
-    var selectables = (0, import_react5.useMemo)(function() {
+    var selectables = (0, import_react6.useMemo)(function() {
         return removePickedOption(options, selected);
     }, [
         options,
         selected
     ]);
-    var commandFilter = (0, import_react5.useCallback)(function() {
+    var commandFilter = (0, import_react6.useCallback)(function() {
         if (commandProps === null || commandProps === void 0 ? void 0 : commandProps.filter) {
             return commandProps.filter;
         }
@@ -4210,27 +4210,27 @@ function PopoverContent(_param) {
 }
 // src/components/ui/SearchSelect.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function SearchSelect(param) {
-    var options = param.options, name = param.name, _param_selectPlaceholder = param.selectPlaceholder, selectPlaceholder = _param_selectPlaceholder === void 0 ? "Select" : _param_selectPlaceholder, defaultValue = param.defaultValue, _param_searchPlaceholder = param.searchPlaceholder, searchPlaceholder = _param_searchPlaceholder === void 0 ? "Search" : _param_searchPlaceholder, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, notFoundLabel = param.notFoundLabel, notFoundLabelClassName = param.notFoundLabelClassName, elementClassName = param.elementClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, value = param.value, disabled = param.disabled, onChange = param.onChange, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel;
-    var id = (0, import_react6.useId)();
-    var _ref = _sliced_to_array((0, import_react6.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react6.useState)(value || defaultValue || ""), 2), selectedValue = _ref1[0], setSelectedValue = _ref1[1];
-    var _ref2 = _sliced_to_array((0, import_react6.useState)(""), 2), searchQuery = _ref2[0], setSearchQuery = _ref2[1];
-    var _ref3 = _sliced_to_array((0, import_react6.useState)([]), 2), newOptions = _ref3[0], setNewOptions = _ref3[1];
-    (0, import_react6.useEffect)(function() {
+    var options = param.options, name = param.name, _param_selectPlaceholder = param.selectPlaceholder, selectPlaceholder = _param_selectPlaceholder === void 0 ? "Select" : _param_selectPlaceholder, defaultValue = param.defaultValue, _param_searchPlaceholder = param.searchPlaceholder, searchPlaceholder = _param_searchPlaceholder === void 0 ? "Search" : _param_searchPlaceholder, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, notFoundLabel = param.notFoundLabel, notFoundLabelClassName = param.notFoundLabelClassName, elementClassName = param.elementClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, value = param.value, disabled = param.disabled, onChange = param.onChange, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName;
+    var id = (0, import_react7.useId)();
+    var _ref = _sliced_to_array((0, import_react7.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react7.useState)(value || defaultValue || ""), 2), selectedValue = _ref1[0], setSelectedValue = _ref1[1];
+    var _ref2 = _sliced_to_array((0, import_react7.useState)(""), 2), searchQuery = _ref2[0], setSearchQuery = _ref2[1];
+    var _ref3 = _sliced_to_array((0, import_react7.useState)([]), 2), newOptions = _ref3[0], setNewOptions = _ref3[1];
+    (0, import_react7.useEffect)(function() {
         setSelectedValue(value);
     }, [
         value
     ]);
-    var allOptions = (0, import_react6.useMemo)(function() {
+    var allOptions = (0, import_react7.useMemo)(function() {
         return _to_consumable_array(options).concat(_to_consumable_array(newOptions));
     }, [
         options,
         newOptions
     ]);
-    var filteredOptions = (0, import_react6.useMemo)(function() {
+    var filteredOptions = (0, import_react7.useMemo)(function() {
         if (!searchQuery) return allOptions;
         var query2 = searchQuery.toLowerCase().trim();
         return allOptions.filter(function(option) {
@@ -4242,7 +4242,7 @@ function SearchSelect(param) {
         allOptions,
         searchQuery
     ]);
-    var selectLabel = (0, import_react6.useMemo)(function() {
+    var selectLabel = (0, import_react7.useMemo)(function() {
         var _allOptions_find;
         return selectedValue ? ((_allOptions_find = allOptions.find(function(item) {
             return item.value === selectedValue;
@@ -4252,7 +4252,7 @@ function SearchSelect(param) {
         allOptions,
         selectPlaceholder
     ]);
-    var addNewOption = (0, import_react6.useCallback)(function() {
+    var addNewOption = (0, import_react7.useCallback)(function() {
         var newOption = {
             value: searchQuery,
             label: searchQuery
@@ -4327,14 +4327,14 @@ function SearchSelect(param) {
                                 }),
                                 /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandList, {
                                     children: filteredOptions.length === 0 && searchQuery !== "" ? createNewOptionLabel ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandEmpty, {
+                                        style: {
+                                            direction: direction
+                                        },
                                         onClick: addNewOption,
-                                        className: cn("hover:bg-[#cccbcb] cursor-pointer w-full", notFoundLabelClassName),
+                                        className: cn("hover:bg-[#cccbcb] cursor-pointer w-full", createNewOptionContainerClassName),
                                         children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", {
-                                            className: "w-full h-10 flex items-center px-2",
-                                            style: {
-                                                direction: direction
-                                            },
-                                            children: "".concat(createNewOptionLabel, ": ").concat(searchQuery)
+                                            className: cn("w-full h-10 flex items-center px-2", notFoundLabelClassName),
+                                            children: "".concat(createNewOptionLabel, " : ").concat(searchQuery)
                                         })
                                     }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CommandEmpty, {
                                         className: cn("w-full py-2 text-center", notFoundLabelClassName),
@@ -4414,7 +4414,7 @@ var TableCell = function(param) {
         children: value
     });
 };
-var Filter = (0, import_react7.memo)(function(param) {
+var Filter = (0, import_react8.memo)(function(param) {
     var filterableColumn = param.filterableColumn, index2 = param.index;
     var _filters_filterableColumn_dataKey, _filters_filterableColumn_dataKey1, _filterOptions_filterableColumn_dataKey;
     var _useTableContext = useTableContext(), direction = _useTableContext.direction, headers = _useTableContext.headers, filters = _useTableContext.filters, filterOptions = _useTableContext.filterOptions, filterPopupsDisplay = _useTableContext.filterPopupsDisplay, handleFilterChange = _useTableContext.handleFilterChange, handleFilterClick = _useTableContext.handleFilterClick, closeFilterWindow = _useTableContext.closeFilterWindow, filterLabel = _useTableContext.filterLabel;
@@ -4492,9 +4492,9 @@ var Filter = (0, import_react7.memo)(function(param) {
         ]
     });
 });
-var TableHead = (0, import_react7.memo)(function() {
+var TableHead = (0, import_react8.memo)(function() {
     var _useTableContext = useTableContext(), headers = _useTableContext.headers, headerStyle = _useTableContext.headerStyle, headerCellStyle = _useTableContext.headerCellStyle, sortColumn = _useTableContext.sortColumn, handleSort = _useTableContext.handleSort, sortKeys = _useTableContext.sortKeys, sortOrder = _useTableContext.sortOrder, _useTableContext_filterableColumns = _useTableContext.filterableColumns, filterableColumns = _useTableContext_filterableColumns === void 0 ? [] : _useTableContext_filterableColumns, sortLabel = _useTableContext.sortLabel, headerClassName = _useTableContext.headerClassName, headerCellClassName = _useTableContext.headerCellClassName;
-    var sortDisplay = (0, import_react7.useMemo)(function() {
+    var sortDisplay = (0, import_react8.useMemo)(function() {
         return Boolean(sortKeys === null || sortKeys === void 0 ? void 0 : sortKeys.length);
     }, [
         sortKeys
@@ -4534,7 +4534,7 @@ var TableHead = (0, import_react7.memo)(function() {
         })
     });
 }, renderOnce);
-var TableBody = (0, import_react7.memo)(function() {
+var TableBody = (0, import_react8.memo)(function() {
     var dataToRender = useTableContext().dataToRender;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("tbody", {
         className: "divide-y divide-gray-600",
@@ -4546,7 +4546,7 @@ var TableBody = (0, import_react7.memo)(function() {
         })
     });
 }, renderOnce);
-var MaxRowsLabel = (0, import_react7.memo)(function() {
+var MaxRowsLabel = (0, import_react8.memo)(function() {
     var _useTableContext = useTableContext(), data = _useTableContext.data, dataToRender = _useTableContext.dataToRender, maxRowsLabel1 = _useTableContext.maxRowsLabel1, maxRowsLabel2 = _useTableContext.maxRowsLabel2, maxRows = _useTableContext.maxRows, maxRowsContainerClassName = _useTableContext.maxRowsContainerClassName;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", {
         className: cn("flex justify-start items-center text-lg gap-1", maxRowsContainerClassName || ""),
@@ -4566,7 +4566,7 @@ var MaxRowsLabel = (0, import_react7.memo)(function() {
         ]
     });
 }, renderOnce);
-var ExportToExcel = (0, import_react7.memo)(function() {
+var ExportToExcel = (0, import_react8.memo)(function() {
     var _useTableContext = useTableContext(), exportToExcelKeys = _useTableContext.exportToExcelKeys, dataToAddToExcelTable = _useTableContext.dataToAddToExcelTable, excelFileName = _useTableContext.excelFileName, dataToRender = _useTableContext.dataToRender, headers = _useTableContext.headers, sumColumns = _useTableContext.sumColumns, exportExcelTitle = _useTableContext.exportExcelTitle, exportExcelContent = _useTableContext.exportExcelContent, exportToExcelClassName = _useTableContext.exportToExcelClassName;
     var addPropertiesToExcel = function(properties) {
         var newData = _to_consumable_array(dataToRender.renderedData);
@@ -4646,7 +4646,7 @@ var ExportToExcel = (0, import_react7.memo)(function() {
         children: exportExcelContent || exportToExcelSvg()
     });
 }, renderOnce);
-var Search = (0, import_react7.memo)(function() {
+var Search = (0, import_react8.memo)(function() {
     var _useTableContext = useTableContext(), searchQuery = _useTableContext.searchQuery, handleSearch = _useTableContext.handleSearch, searchPlaceHolder = _useTableContext.searchPlaceHolder, searchInputClassName = _useTableContext.searchInputClassName, searchInputStyle = _useTableContext.searchInputStyle;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", {
         className: cn("w-40 border-black border-[1px] text-lg px-2 ", searchInputClassName),
@@ -4657,7 +4657,7 @@ var Search = (0, import_react7.memo)(function() {
         style: searchInputStyle
     });
 }, renderOnce);
-var Summary = (0, import_react7.memo)(function() {
+var Summary = (0, import_react8.memo)(function() {
     var _useTableContext = useTableContext(), summaryContainerStyle = _useTableContext.summaryContainerStyle, summaryLabelStyle = _useTableContext.summaryLabelStyle, summaryLabel = _useTableContext.summaryLabel, summaryRowStyle = _useTableContext.summaryRowStyle, sumColumns = _useTableContext.sumColumns, dataToRender = _useTableContext.dataToRender, direction = _useTableContext.direction;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", {
         style: _object_spread_props(_object_spread({}, summaryContainerStyle), {
@@ -4742,7 +4742,7 @@ var TableButton = function(param) {
 };
 var DurationUI = function(param) {
     var duration = param.duration, _param_daysLabel = param.daysLabel, daysLabel = _param_daysLabel === void 0 ? "d" : _param_daysLabel, _param_hoursLabel = param.hoursLabel, hoursLabel = _param_hoursLabel === void 0 ? "h" : _param_hoursLabel, _param_minutesLabel = param.minutesLabel, minutesLabel = _param_minutesLabel === void 0 ? "m" : _param_minutesLabel, _param_secondsLabel = param.secondsLabel, secondsLabel = _param_secondsLabel === void 0 ? "s" : _param_secondsLabel, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, direction = param.direction;
-    var _ref = (0, import_react7.useMemo)(function() {
+    var _ref = (0, import_react8.useMemo)(function() {
         var secondsInDay = 86400;
         var days = Math.floor(duration / secondsInDay);
         var remainderAfterDays = duration % secondsInDay;
@@ -4858,12 +4858,12 @@ var NumberUI = function(param) {
     });
 };
 // src/components/forms/ModularForm/ModularForm.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 // src/components/forms/ModularForm/formElements.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 // src/components/forms/ModularForm/InternationalPhonePicker.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var RPNInput = __toESM(require("react-phone-number-input"));
 var import_flags = __toESM(require("react-phone-number-input/flags"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -4876,8 +4876,8 @@ function InternationalPhonePicker(param) {
             }
         }
     };
-    var _ref = _sliced_to_array((0, import_react8.useState)(""), 2), tempPhoneValue = _ref[0], setTempPhoneValue = _ref[1];
-    (0, import_react8.useEffect)(function() {
+    var _ref = _sliced_to_array((0, import_react9.useState)(""), 2), tempPhoneValue = _ref[0], setTempPhoneValue = _ref[1];
+    (0, import_react9.useEffect)(function() {
         if (defaultValue) {
             if (setPhoneValue) {
                 setPhoneValue(defaultValue);
@@ -4942,15 +4942,15 @@ function InternationalPhonePicker(param) {
         ]
     });
 }
-var PhoneInput = (0, import_react8.forwardRef)(function(_param, ref) {
+var PhoneInput = (0, import_react9.forwardRef)(function(_param, ref) {
     var className = _param.className, onKeyDown = _param.onKeyDown, defaultValue = _param.defaultValue, style = _param.style, props = _object_without_properties(_param, [
         "className",
         "onKeyDown",
         "defaultValue",
         "style"
     ]);
-    var inputRef = (0, import_react8.useRef)(null);
-    (0, import_react8.useEffect)(function() {
+    var inputRef = (0, import_react9.useRef)(null);
+    (0, import_react9.useEffect)(function() {
         if (inputRef.current) {
             inputRef.current.focus();
         }
@@ -4976,7 +4976,7 @@ var CountrySelect = function(param) {
     var handleSelect = function(event) {
         onChange(event.target.value);
     };
-    var originalClassName = (0, import_react8.useMemo)(function() {
+    var originalClassName = (0, import_react9.useMemo)(function() {
         return "relative inline-flex items-center self-stretch rounded-s-lg border border-input bg-background py-2 pe-2 ps-3 text-muted-foreground transition-shadow focus-within:z-10 focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 hover:bg-accent hover:text-foreground has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50";
     }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", {
@@ -5041,7 +5041,7 @@ var FlagComponent = function(param) {
 // src/components/forms/ModularForm/formElements.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var useSortValues = function(options, sortDirection, sortAsNumber) {
-    var sortOptions = (0, import_react9.useMemo)(function() {
+    var sortOptions = (0, import_react10.useMemo)(function() {
         var sorted = sortAsNumber ? options.sort(function(a, b) {
             return parseInt(b.label) - parseInt(a.label);
         }) : options.sort(function(a, b) {
@@ -5057,13 +5057,13 @@ var useSortValues = function(options, sortDirection, sortAsNumber) {
 };
 var InputContainer = function(param) {
     var validationError = param.validationError, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_inputType = param.inputType, inputType = _param_inputType === void 0 ? "text" : _param_inputType, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_validationName = param.validationName, validationName = _param_validationName === void 0 ? "textNumbers" : _param_validationName, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, placeholder = param.placeholder, props = param.props, minLength = param.minLength, onKeyDown = param.onKeyDown, onChange = param.onChange, direction = param.direction, value = param.value;
-    var handleChangeFunction = (0, import_react9.useCallback)(function(e) {
+    var handleChangeFunction = (0, import_react10.useCallback)(function(e) {
         handleChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
     }, [
         onChange
     ]);
-    var validationProps = (0, import_react9.useMemo)(function() {
+    var validationProps = (0, import_react10.useMemo)(function() {
         return _object_spread_props(_object_spread({}, useValidation(validationName, validationError)), {
             onChange: handleChangeFunction
         });
@@ -5102,8 +5102,8 @@ var SelectContainer = function(param) {
     var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_optionClassName = param.optionClassName, optionClassName = _param_optionClassName === void 0 ? "" : _param_optionClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_optionsContainerClassName = param.optionsContainerClassName, optionsContainerClassName = _param_optionsContainerClassName === void 0 ? "" : _param_optionsContainerClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, onChange = param.onChange;
     var _sortOptions_, _options_find;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
-    var _ref = _sliced_to_array((0, import_react9.useState)(false), 2), isOpen = _ref[0], setIsOpen = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react9.useState)(defaultValue || ((_sortOptions_ = sortOptions[0]) === null || _sortOptions_ === void 0 ? void 0 : _sortOptions_.value) || ""), 2), selectedValue = _ref1[0], setSelectedValue = _ref1[1];
+    var _ref = _sliced_to_array((0, import_react10.useState)(false), 2), isOpen = _ref[0], setIsOpen = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react10.useState)(defaultValue || ((_sortOptions_ = sortOptions[0]) === null || _sortOptions_ === void 0 ? void 0 : _sortOptions_.value) || ""), 2), selectedValue = _ref1[0], setSelectedValue = _ref1[1];
     var handleOptionClick = function(value) {
         setSelectedValue(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
@@ -5205,7 +5205,7 @@ function MultiSelect(param) {
     });
 }
 var SelectWithSearch = function(param) {
-    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel;
+    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", {
         className: cn("flex justify-between items-center w-full", containerClassName),
@@ -5220,6 +5220,7 @@ var SelectWithSearch = function(param) {
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SearchSelect, {
                 direction: direction,
                 createNewOptionLabel: createNewOptionLabel,
+                createNewOptionContainerClassName: createNewOptionContainerClassName,
                 options: sortOptions,
                 value: value,
                 onChange: onChange,
@@ -5303,8 +5304,8 @@ var ModularForm = function(param) {
             return _ref.apply(this, arguments);
         };
     }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef;
-    var _ref = _sliced_to_array((0, import_react10.useState)(""), 2), errorMsg = _ref[0], setErrorMsg = _ref[1];
-    var _ref1 = _sliced_to_array((0, import_react10.useState)(false), 2), isLoading = _ref1[0], setIsLoading = _ref1[1];
+    var _ref = _sliced_to_array((0, import_react11.useState)(""), 2), errorMsg = _ref[0], setErrorMsg = _ref[1];
+    var _ref1 = _sliced_to_array((0, import_react11.useState)(false), 2), isLoading = _ref1[0], setIsLoading = _ref1[1];
     var onSubmit = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(e) {
             var form, err;
@@ -5405,7 +5406,7 @@ var ModularForm = function(param) {
                         }), index2);
                     case "custom":
                         var _element_element;
-                        return typeof ((_element_element = element.element) === null || _element_element === void 0 ? void 0 : _element_element.type) !== "string" && (0, import_react10.cloneElement)(element.element, {
+                        return typeof ((_element_element = element.element) === null || _element_element === void 0 ? void 0 : _element_element.type) !== "string" && (0, import_react11.cloneElement)(element.element, {
                             key: index2
                         });
                     default:
@@ -5437,7 +5438,7 @@ var ModularForm = function(param) {
 };
 var ModularForm_default = ModularForm;
 // src/components/forms/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_moment2 = __toESM(require("moment"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ConfirmForm = function(param) {
@@ -5562,7 +5563,7 @@ var DatePicker = function(param) {
             return _ref.apply(this, arguments);
         };
     }() : _param_submit, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_labelsClassName = param.labelsClassName, labelsClassName = _param_labelsClassName === void 0 ? "" : _param_labelsClassName, _param_inputsClassName = param.inputsClassName, inputsClassName = _param_inputsClassName === void 0 ? "" : _param_inputsClassName, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, _param_buttonStyle = param.buttonStyle, buttonStyle = _param_buttonStyle === void 0 ? {} : _param_buttonStyle, defaultFrom = param.defaultFrom, defaultTo = param.defaultTo, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_fromText = param.fromText, fromText = _param_fromText === void 0 ? "From date" : _param_fromText, _param_toText = param.toText, toText = _param_toText === void 0 ? "To date" : _param_toText, _param_buttonText = param.buttonText, buttonText = _param_buttonText === void 0 ? "Search" : _param_buttonText;
-    var _ref = _sliced_to_array((0, import_react11.useState)(false), 2), isLoading = _ref[0], setIsLoading = _ref[1];
+    var _ref = _sliced_to_array((0, import_react12.useState)(false), 2), isLoading = _ref[0], setIsLoading = _ref[1];
     var onSubmit = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(e) {
             return _ts_generator(this, function(_state) {
@@ -5636,12 +5637,12 @@ var DatePicker = function(param) {
 };
 // src/components/CodeInput.tsx
 var import_input_otp = require("input-otp");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 function CodeInput(param) {
     var codeValue = param.codeValue, setCodeValue = param.setCodeValue, _param_className = param.className, className = _param_className === void 0 ? "" : _param_className, _param_slotContainerClassName = param.slotContainerClassName, slotContainerClassName = _param_slotContainerClassName === void 0 ? "" : _param_slotContainerClassName;
-    var firstInputRef = (0, import_react12.useRef)(null);
-    (0, import_react12.useEffect)(function() {
+    var firstInputRef = (0, import_react13.useRef)(null);
+    (0, import_react13.useEffect)(function() {
         if (firstInputRef.current) {
             firstInputRef.current.focus();
         }

package/dist/components/index.mjs CHANGED Viewed

@@ -1332,7 +1332,7 @@ ProgressComponent.displayName = ProgressPrimitive.Root.displayName;
 import ReactDOM2 from "react-dom";
 import { Command as CommandPrimitive2, useCommandState } from "cmdk";
 import { X as X2 } from "lucide-react";
-import * as React9 from "react";
+import React9 from "react";
 import { forwardRef as forwardRef6, useEffect as useEffect4, useCallback as useCallback2, useMemo as useMemo4, useRef as useRef3 } from "react";
 // src/components/ui/command.tsx
 import { Command as CommandPrimitive } from "cmdk";
@@ -4015,15 +4015,15 @@ function PopoverContent(_param) {
 }
 // src/components/ui/SearchSelect.tsx
 import { CheckIcon, ChevronDownIcon } from "lucide-react";
-import { useCallback as useCallback3, useEffect as useEffect5, useId, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useId, useMemo as useMemo5, useState as useState4 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function SearchSelect(param) {
-    var options = param.options, name = param.name, _param_selectPlaceholder = param.selectPlaceholder, selectPlaceholder = _param_selectPlaceholder === void 0 ? "Select" : _param_selectPlaceholder, defaultValue = param.defaultValue, _param_searchPlaceholder = param.searchPlaceholder, searchPlaceholder = _param_searchPlaceholder === void 0 ? "Search" : _param_searchPlaceholder, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, notFoundLabel = param.notFoundLabel, notFoundLabelClassName = param.notFoundLabelClassName, elementClassName = param.elementClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, value = param.value, disabled = param.disabled, onChange = param.onChange, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel;
+    var options = param.options, name = param.name, _param_selectPlaceholder = param.selectPlaceholder, selectPlaceholder = _param_selectPlaceholder === void 0 ? "Select" : _param_selectPlaceholder, defaultValue = param.defaultValue, _param_searchPlaceholder = param.searchPlaceholder, searchPlaceholder = _param_searchPlaceholder === void 0 ? "Search" : _param_searchPlaceholder, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, notFoundLabel = param.notFoundLabel, notFoundLabelClassName = param.notFoundLabelClassName, elementClassName = param.elementClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, value = param.value, disabled = param.disabled, onChange = param.onChange, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName;
     var id = useId();
-    var _useState5 = _sliced_to_array(useState5(false), 2), open = _useState5[0], setOpen = _useState5[1];
-    var _useState51 = _sliced_to_array(useState5(value || defaultValue || ""), 2), selectedValue = _useState51[0], setSelectedValue = _useState51[1];
-    var _useState52 = _sliced_to_array(useState5(""), 2), searchQuery = _useState52[0], setSearchQuery = _useState52[1];
-    var _useState53 = _sliced_to_array(useState5([]), 2), newOptions = _useState53[0], setNewOptions = _useState53[1];
+    var _useState4 = _sliced_to_array(useState4(false), 2), open = _useState4[0], setOpen = _useState4[1];
+    var _useState41 = _sliced_to_array(useState4(value || defaultValue || ""), 2), selectedValue = _useState41[0], setSelectedValue = _useState41[1];
+    var _useState42 = _sliced_to_array(useState4(""), 2), searchQuery = _useState42[0], setSearchQuery = _useState42[1];
+    var _useState43 = _sliced_to_array(useState4([]), 2), newOptions = _useState43[0], setNewOptions = _useState43[1];
     useEffect5(function() {
         setSelectedValue(value);
     }, [
@@ -4132,14 +4132,14 @@ function SearchSelect(param) {
                                 }),
                                 /* @__PURE__ */ jsx15(CommandList, {
                                     children: filteredOptions.length === 0 && searchQuery !== "" ? createNewOptionLabel ? /* @__PURE__ */ jsx15(CommandEmpty, {
+                                        style: {
+                                            direction: direction
+                                        },
                                         onClick: addNewOption,
-                                        className: cn("hover:bg-[#cccbcb] cursor-pointer w-full", notFoundLabelClassName),
+                                        className: cn("hover:bg-[#cccbcb] cursor-pointer w-full", createNewOptionContainerClassName),
                                         children: /* @__PURE__ */ jsx15("div", {
-                                            className: "w-full h-10 flex items-center px-2",
-                                            style: {
-                                                direction: direction
-                                            },
-                                            children: "".concat(createNewOptionLabel, ": ").concat(searchQuery)
+                                            className: cn("w-full h-10 flex items-center px-2", notFoundLabelClassName),
+                                            children: "".concat(createNewOptionLabel, " : ").concat(searchQuery)
                                         })
                                     }) : /* @__PURE__ */ jsx15(CommandEmpty, {
                                         className: cn("w-full py-2 text-center", notFoundLabelClassName),
@@ -4663,12 +4663,12 @@ var NumberUI = function(param) {
     });
 };
 // src/components/forms/ModularForm/ModularForm.tsx
-import { cloneElement, useState as useState8 } from "react";
+import { cloneElement, useState as useState7 } from "react";
 // src/components/forms/ModularForm/formElements.tsx
-import { useCallback as useCallback4, useMemo as useMemo8, useState as useState7 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo8, useState as useState6 } from "react";
 // src/components/forms/ModularForm/InternationalPhonePicker.tsx
 import { ChevronDown, Phone } from "lucide-react";
-import { forwardRef as forwardRef7, useEffect as useEffect6, useMemo as useMemo7, useRef as useRef4, useState as useState6 } from "react";
+import { forwardRef as forwardRef7, useEffect as useEffect6, useMemo as useMemo7, useRef as useRef4, useState as useState5 } from "react";
 import * as RPNInput from "react-phone-number-input";
 import flags from "react-phone-number-input/flags";
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -4681,7 +4681,7 @@ function InternationalPhonePicker(param) {
             }
         }
     };
-    var _useState6 = _sliced_to_array(useState6(""), 2), tempPhoneValue = _useState6[0], setTempPhoneValue = _useState6[1];
+    var _useState5 = _sliced_to_array(useState5(""), 2), tempPhoneValue = _useState5[0], setTempPhoneValue = _useState5[1];
     useEffect6(function() {
         if (defaultValue) {
             if (setPhoneValue) {
@@ -4907,8 +4907,8 @@ var SelectContainer = function(param) {
     var _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_labelContent = param.labelContent, labelContent = _param_labelContent === void 0 ? "" : _param_labelContent, _param_containerClassName = param.containerClassName, containerClassName = _param_containerClassName === void 0 ? "" : _param_containerClassName, _param_labelClassName = param.labelClassName, labelClassName = _param_labelClassName === void 0 ? "" : _param_labelClassName, _param_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _param_elementClassName = param.elementClassName, elementClassName = _param_elementClassName === void 0 ? "" : _param_elementClassName, _param_optionClassName = param.optionClassName, optionClassName = _param_optionClassName === void 0 ? "" : _param_optionClassName, _param_required = param.required, required = _param_required === void 0 ? false : _param_required, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_optionsContainerClassName = param.optionsContainerClassName, optionsContainerClassName = _param_optionsContainerClassName === void 0 ? "" : _param_optionsContainerClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, onChange = param.onChange;
     var _sortOptions_, _options_find;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
-    var _useState7 = _sliced_to_array(useState7(false), 2), isOpen = _useState7[0], setIsOpen = _useState7[1];
-    var _useState71 = _sliced_to_array(useState7(defaultValue || ((_sortOptions_ = sortOptions[0]) === null || _sortOptions_ === void 0 ? void 0 : _sortOptions_.value) || ""), 2), selectedValue = _useState71[0], setSelectedValue = _useState71[1];
+    var _useState6 = _sliced_to_array(useState6(false), 2), isOpen = _useState6[0], setIsOpen = _useState6[1];
+    var _useState61 = _sliced_to_array(useState6(defaultValue || ((_sortOptions_ = sortOptions[0]) === null || _sortOptions_ === void 0 ? void 0 : _sortOptions_.value) || ""), 2), selectedValue = _useState61[0], setSelectedValue = _useState61[1];
     var handleOptionClick = function(value) {
         setSelectedValue(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
@@ -5010,7 +5010,7 @@ function MultiSelect(param) {
     });
 }
 var SelectWithSearch = function(param) {
-    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel;
+    var options = param.options, labelClassName = param.labelClassName, labelContent = param.labelContent, name = param.name, onChange = param.onChange, value = param.value, placeholder = param.placeholder, required = param.required, defaultValue = param.defaultValue, notFoundLabel = param.notFoundLabel, searchPlaceholder = param.searchPlaceholder, containerClassName = param.containerClassName, dropdownClassName = param.dropdownClassName, dropdownOptionClassName = param.dropdownOptionClassName, elementClassName = param.elementClassName, notFoundLabelClassName = param.notFoundLabelClassName, searchClassName = param.searchClassName, buttonClassName = param.buttonClassName, buttonFocusClassName = param.buttonFocusClassName, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, disabled = param.disabled, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, createNewOptionContainerClassName = param.createNewOptionContainerClassName;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     return /* @__PURE__ */ jsxs13("div", {
         className: cn("flex justify-between items-center w-full", containerClassName),
@@ -5025,6 +5025,7 @@ var SelectWithSearch = function(param) {
             /* @__PURE__ */ jsx18(SearchSelect, {
                 direction: direction,
                 createNewOptionLabel: createNewOptionLabel,
+                createNewOptionContainerClassName: createNewOptionContainerClassName,
                 options: sortOptions,
                 value: value,
                 onChange: onChange,
@@ -5108,8 +5109,8 @@ var ModularForm = function(param) {
             return _ref.apply(this, arguments);
         };
     }() : _param_submitFunction, _param_elements = param.elements, elements = _param_elements === void 0 ? [] : _param_elements, headerContent = param.headerContent, buttonContent = param.buttonContent, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_headerClassName = param.headerClassName, headerClassName = _param_headerClassName === void 0 ? "" : _param_headerClassName, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, submitRef = param.submitRef;
-    var _useState8 = _sliced_to_array(useState8(""), 2), errorMsg = _useState8[0], setErrorMsg = _useState8[1];
-    var _useState81 = _sliced_to_array(useState8(false), 2), isLoading = _useState81[0], setIsLoading = _useState81[1];
+    var _useState7 = _sliced_to_array(useState7(""), 2), errorMsg = _useState7[0], setErrorMsg = _useState7[1];
+    var _useState71 = _sliced_to_array(useState7(false), 2), isLoading = _useState71[0], setIsLoading = _useState71[1];
     var onSubmit = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(e) {
             var form, err;
@@ -5242,7 +5243,7 @@ var ModularForm = function(param) {
 };
 var ModularForm_default = ModularForm;
 // src/components/forms/index.tsx
-import { useState as useState9 } from "react";
+import { useState as useState8 } from "react";
 import moment3 from "moment";
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var ConfirmForm = function(param) {
@@ -5367,7 +5368,7 @@ var DatePicker = function(param) {
             return _ref.apply(this, arguments);
         };
     }() : _param_submit, _param_formClassName = param.formClassName, formClassName = _param_formClassName === void 0 ? "" : _param_formClassName, _param_labelsClassName = param.labelsClassName, labelsClassName = _param_labelsClassName === void 0 ? "" : _param_labelsClassName, _param_inputsClassName = param.inputsClassName, inputsClassName = _param_inputsClassName === void 0 ? "" : _param_inputsClassName, _param_buttonClassName = param.buttonClassName, buttonClassName = _param_buttonClassName === void 0 ? "" : _param_buttonClassName, _param_buttonStyle = param.buttonStyle, buttonStyle = _param_buttonStyle === void 0 ? {} : _param_buttonStyle, defaultFrom = param.defaultFrom, defaultTo = param.defaultTo, _param_direction = param.direction, direction = _param_direction === void 0 ? "rtl" : _param_direction, _param_fromText = param.fromText, fromText = _param_fromText === void 0 ? "From date" : _param_fromText, _param_toText = param.toText, toText = _param_toText === void 0 ? "To date" : _param_toText, _param_buttonText = param.buttonText, buttonText = _param_buttonText === void 0 ? "Search" : _param_buttonText;
-    var _useState9 = _sliced_to_array(useState9(false), 2), isLoading = _useState9[0], setIsLoading = _useState9[1];
+    var _useState8 = _sliced_to_array(useState8(false), 2), isLoading = _useState8[0], setIsLoading = _useState8[1];
     var onSubmit = /*#__PURE__*/ function() {
         var _ref = _async_to_generator(function(e) {
             return _ts_generator(this, function(_state) {

package/dist/types/index.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Command as Command$1 } from 'cmdk';
 import * as React$1 from 'react';
-import { ReactNode, Dispatch, SetStateAction } from 'react';
+import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
 import * as RPNInput from 'react-phone-number-input';
 import { WhereFilterOp, Unsubscribe } from 'firebase/firestore';
@@ -34,8 +34,8 @@ interface MultipleSelectorProps {
     defaultOptions?: MultipleSelectorOption[];
     options?: MultipleSelectorOption[];
     placeholder?: string;
-    loadingIndicator?: React$1.ReactNode;
-    emptyIndicator?: React$1.ReactNode;
+    loadingIndicator?: React__default.ReactNode;
+    emptyIndicator?: React__default.ReactNode;
     delay?: number;
     triggerSearchOnFocus?: boolean;
     onSearch?: (value: string) => Promise<MultipleSelectorOption[]>;
@@ -50,8 +50,8 @@ interface MultipleSelectorProps {
     badgeClassName?: string;
     selectFirstItem?: boolean;
     createNewOptionLabel?: string;
-    commandProps?: React$1.ComponentPropsWithoutRef<typeof Command>;
-    inputProps?: Omit<React$1.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
+    commandProps?: React__default.ComponentPropsWithoutRef<typeof Command>;
+    inputProps?: Omit<React__default.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
     hideClearAllButton?: boolean;
     dropdownClassName?: string;
     dropdownOptionClassName?: string;
@@ -183,6 +183,7 @@ interface MultiSelectProps extends Omit<BaseElementProps, "containerClassName" |
     sortAsNumber?: boolean;
     searchInputProps?: MultipleSelectorProps["inputProps"];
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface SelectWithSearchProps extends BaseElementProps {
     type?: "selectWithSearch";
@@ -203,6 +204,7 @@ interface SelectWithSearchProps extends BaseElementProps {
     sortAsNumber?: boolean;
     disabled?: boolean;
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface InternationalInputProps extends Omit<BaseElementProps, "elementClassName"> {
     type?: "internationalPhoneInput";

package/dist/types/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Command as Command$1 } from 'cmdk';
 import * as React$1 from 'react';
-import { ReactNode, Dispatch, SetStateAction } from 'react';
+import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
 import * as RPNInput from 'react-phone-number-input';
 import { WhereFilterOp, Unsubscribe } from 'firebase/firestore';
@@ -34,8 +34,8 @@ interface MultipleSelectorProps {
     defaultOptions?: MultipleSelectorOption[];
     options?: MultipleSelectorOption[];
     placeholder?: string;
-    loadingIndicator?: React$1.ReactNode;
-    emptyIndicator?: React$1.ReactNode;
+    loadingIndicator?: React__default.ReactNode;
+    emptyIndicator?: React__default.ReactNode;
     delay?: number;
     triggerSearchOnFocus?: boolean;
     onSearch?: (value: string) => Promise<MultipleSelectorOption[]>;
@@ -50,8 +50,8 @@ interface MultipleSelectorProps {
     badgeClassName?: string;
     selectFirstItem?: boolean;
     createNewOptionLabel?: string;
-    commandProps?: React$1.ComponentPropsWithoutRef<typeof Command>;
-    inputProps?: Omit<React$1.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
+    commandProps?: React__default.ComponentPropsWithoutRef<typeof Command>;
+    inputProps?: Omit<React__default.ComponentPropsWithoutRef<typeof Command$1.Input>, "value" | "placeholder" | "disabled">;
     hideClearAllButton?: boolean;
     dropdownClassName?: string;
     dropdownOptionClassName?: string;
@@ -183,6 +183,7 @@ interface MultiSelectProps extends Omit<BaseElementProps, "containerClassName" |
     sortAsNumber?: boolean;
     searchInputProps?: MultipleSelectorProps["inputProps"];
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface SelectWithSearchProps extends BaseElementProps {
     type?: "selectWithSearch";
@@ -203,6 +204,7 @@ interface SelectWithSearchProps extends BaseElementProps {
     sortAsNumber?: boolean;
     disabled?: boolean;
     createNewOptionLabel?: string;
+    createNewOptionContainerClassName?: string;
 }
 interface InternationalInputProps extends Omit<BaseElementProps, "elementClassName"> {
     type?: "internationalPhoneInput";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "akeyless-client-commons",
-    "version": "1.0.40",
+    "version": "1.0.41",
     "scripts": {
         "build": "tsup",
         "deploy": "npm run build && npm version patch --no-git-tag-version && npm publish",