akeyless-client-commons 1.0.132 → 1.0.134

package/dist/components/index.js

@@ -431,6 +431,9 @@ __export(index_exports, {
     Checkbox: function() {
         return Checkbox;
     },
+    CheckboxContainer: function() {
+        return CheckboxContainer;
+    },
     CodeInput: function() {
         return CodeInput;
     },
@@ -458,6 +461,9 @@ __export(index_exports, {
     Filter: function() {
         return Filter;
     },
+    FormElementContainer: function() {
+        return FormElementContainer;
+    },
     FormSeparator: function() {
         return FormSeparator;
     },
@@ -1120,7 +1126,7 @@ var callCenterDomain = isLocal ? "http://localhost:9003/api/call-center" : baseD
 var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Checkbox = function(param) {
-    var id = param.id, _param_checked = param.checked, checked = _param_checked === void 0 ? false : _param_checked, setChecked = param.setChecked, _param_rotate = param.rotate, rotate = _param_rotate === void 0 ? true : _param_rotate, className = param.className, circleClassName = param.circleClassName, containerClassName = param.containerClassName, elementClassName = param.elementClassName, name = param.name, props = param.props;
+    var _param_id = param.id, id = _param_id === void 0 ? Math.random().toString() : _param_id, _param_checked = param.checked, checked = _param_checked === void 0 ? false : _param_checked, setChecked = param.setChecked, _param_rotate = param.rotate, rotate = _param_rotate === void 0 ? true : _param_rotate, className = param.className, circleClassName = param.circleClassName, containerClassName = param.containerClassName, elementClassName = param.elementClassName, name = param.name, props = param.props, title = param.title;
     var _ref = _sliced_to_array((0, import_react2.useState)(checked), 2), isChecked = _ref[0], setIsChecked = _ref[1];
     var toggleChecked = function() {
         setIsChecked(!isChecked);
@@ -1137,12 +1143,14 @@ var Checkbox = function(param) {
                 checked: isChecked,
                 onChange: toggleChecked
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", _object_spread_props(_object_spread({}, props), {
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", _object_spread_props(_object_spread({
+                title: title
+            }, props), {
                 htmlFor: id,
                 className: cn("relative block w-[42px] h-[24px] cursor-pointer transform-gpu", className),
                 children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-                        className: cn("relative top-[1px] left-[1px] w-[40px] h-[22px] rounded-[12px] transition-colors duration-200 ease-in-out ".concat(isChecked ? "bg-[#52d66b]" : "bg-[#c8ccd4]"), elementClassName)
+                        className: cn("relative w-[40px] h-[22px] rounded-[12px] transition-colors duration-200 ease-in-out ".concat(isChecked ? "bg-[#52d66b]" : "bg-[#c8ccd4]"), elementClassName)
                     }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
                         className: cn("absolute ".concat(rotate ? "left-0" : "right-0", " top-0 w-[24px] h-[24px] bg-white rounded-full shadow-md transition-transform duration-200 ease-in-out ").concat(isChecked ? rotate ? "translate-x-[18px]" : "-translate-x-[18px]" : ""), circleClassName),
@@ -4941,7 +4949,9 @@ var Filter = (0, import_react11.memo)(function(param) {
                         }),
                         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
                             className: "overflow-auto h-[80%] flex flex-col gap-1 w-full cursor-pointer ",
-                            children: (_filterOptions_filterableColumn_dataKey = filterOptions[filterableColumn.dataKey]) === null || _filterOptions_filterableColumn_dataKey === void 0 ? void 0 : _filterOptions_filterableColumn_dataKey.map(function(option, i) {
+                            children: (_filterOptions_filterableColumn_dataKey = filterOptions[filterableColumn.dataKey]) === null || _filterOptions_filterableColumn_dataKey === void 0 ? void 0 : _filterOptions_filterableColumn_dataKey.sort(function(a, b) {
+                                return b.localeCompare(a);
+                            }).map(function(option, i) {
                                 var _filters_filterableColumn_dataKey;
                                 return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", {
                                     className: "flex items-center px-2 justify-start hover:bg-[#547f22] hover:text-white",
@@ -5592,7 +5602,7 @@ var useSortValues = function(options, sortDirection, sortAsNumber) {
     return sortOptions;
 };
 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, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    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, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, title = param.title;
     var handleChangeFunction = (0, import_react13.useCallback)(function(e) {
         handleChange(e);
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
@@ -5606,38 +5616,48 @@ var InputContainer = function(param) {
     }, [
         handleChangeFunction
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-        className: cn(defaultFormElementContainerClassName, containerClassName),
-        children: [
-            labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
-                labelsCommonClassName: labelsCommonClassName,
-                withDots: labelWithDots,
-                direction: direction,
-                labelContent: labelContent,
-                labelClassName: labelClassName,
-                name: name,
-                required: required
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, props), {
-                minLength: minLength,
-                placeholder: placeholder,
-                className: cn("flex-1 bg-inherit h-9 py-2 px-3", defaultFormElementBorderClassName, elementClassName),
-                defaultValue: defaultValue
-            }), validationProps), {
-                value: value,
-                onChange: function(e) {
-                    return handleChangeFunction(e);
-                },
-                required: required,
-                name: name,
-                onKeyDown: onKeyDown,
-                type: inputType
-            }))
-        ]
-    });
+    var containerProps = (0, import_react13.useMemo)(function() {
+        return {
+            containerClassName: containerClassName,
+            direction: direction,
+            labelClassName: labelClassName,
+            labelContent: labelContent,
+            labelWithDots: labelWithDots,
+            labelsCommonClassName: labelsCommonClassName,
+            name: name,
+            required: required
+        };
+    }, [
+        containerClassName,
+        direction,
+        labelClassName,
+        labelContent,
+        labelWithDots,
+        labelsCommonClassName,
+        name,
+        required
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormElementContainer, _object_spread_props(_object_spread({}, containerProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, props), {
+            title: title,
+            minLength: minLength,
+            placeholder: placeholder,
+            className: cn("flex-1 bg-inherit h-9 py-2 px-3", defaultFormElementBorderClassName, elementClassName),
+            defaultValue: defaultValue
+        }), validationProps), {
+            value: value,
+            onChange: function(e) {
+                return handleChangeFunction(e);
+            },
+            required: required,
+            name: name,
+            onKeyDown: onKeyDown,
+            type: inputType
+        }))
+    }));
 };
 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_selectClassName = param.selectClassName, selectClassName = _param_selectClassName === void 0 ? "" : _param_selectClassName, _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, labelWithDots = param.labelWithDots, iconClassName = param.iconClassName, labelsCommonClassName = param.labelsCommonClassName;
+    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_selectClassName = param.selectClassName, selectClassName = _param_selectClassName === void 0 ? "" : _param_selectClassName, _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, labelWithDots = param.labelWithDots, iconClassName = param.iconClassName, labelsCommonClassName = param.labelsCommonClassName, title = param.title;
     var _sortOptions_, _options_find;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
     var _ref = _sliced_to_array((0, import_react13.useState)(false), 2), isOpen = _ref[0], setIsOpen = _ref[1];
@@ -5647,181 +5667,276 @@ var SelectContainer = function(param) {
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
         setIsOpen(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-        className: cn(defaultFormElementContainerClassName, containerClassName),
-        children: [
-            labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
-                labelsCommonClassName: labelsCommonClassName,
-                withDots: labelWithDots,
-                direction: direction,
-                labelContent: labelContent,
-                labelClassName: labelClassName,
-                name: name,
-                required: required
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-                style: {
-                    direction: direction
-                },
-                className: cn("flex-1 relative", elementClassName),
-                onClick: function() {
-                    return setIsOpen(!isOpen);
-                },
-                children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
-                        className: cn("h-9 max-h-9 py-2 px-3 flex items-center justify-center cursor-pointer", defaultFormElementBorderClassName, selectClassName),
-                        children: ((_options_find = options.find(function(opt) {
-                            return opt.value === selectedValue;
-                        })) === null || _options_find === void 0 ? void 0 : _options_find.label) || selectedValue
-                    }),
-                    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", {
-                        className: cn("fa-light fa-chevron-up absolute top-3 ".concat(direction === "ltr" ? "right-2" : "left-2", " cursor-pointer"), iconClassName)
-                    }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", {
-                        className: cn("fa-light fa-chevron-down absolute top-3 ".concat(direction === "ltr" ? "right-2" : "left-2", " cursor-pointer"), iconClassName)
-                    }),
-                    isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
-                        className: cn("absolute w-full bg-white border  border-gray-300 max-h-32 overflow-y-auto z-10", optionsContainerClassName),
-                        children: sortOptions.map(function(option) {
-                            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
-                                className: "p-2 cursor-pointer hover:bg-gray-200 ".concat(optionClassName),
-                                onClick: function() {
-                                    return handleOptionClick(option.value);
-                                },
-                                children: option.label
-                            }, option.value);
-                        })
-                    }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", {
-                        value: selectedValue,
-                        type: "hidden",
-                        name: name,
-                        required: required
+    var containerProps = (0, import_react13.useMemo)(function() {
+        return {
+            containerClassName: containerClassName,
+            direction: direction,
+            labelClassName: labelClassName,
+            labelContent: labelContent,
+            labelWithDots: labelWithDots,
+            labelsCommonClassName: labelsCommonClassName,
+            name: name,
+            required: required
+        };
+    }, [
+        containerClassName,
+        direction,
+        labelClassName,
+        labelContent,
+        labelWithDots,
+        labelsCommonClassName,
+        name,
+        required
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormElementContainer, _object_spread_props(_object_spread({}, containerProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
+            title: title,
+            style: {
+                direction: direction
+            },
+            className: cn("flex-1 relative", elementClassName),
+            onClick: function() {
+                return setIsOpen(!isOpen);
+            },
+            children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                    className: cn("h-9 max-h-9 py-2 px-3 flex items-center justify-center cursor-pointer", defaultFormElementBorderClassName, selectClassName),
+                    children: ((_options_find = options.find(function(opt) {
+                        return opt.value === selectedValue;
+                    })) === null || _options_find === void 0 ? void 0 : _options_find.label) || selectedValue
+                }),
+                isOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", {
+                    className: cn("fa-light fa-chevron-up absolute top-3 ".concat(direction === "ltr" ? "right-2" : "left-2", " cursor-pointer"), iconClassName)
+                }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", {
+                    className: cn("fa-light fa-chevron-down absolute top-3 ".concat(direction === "ltr" ? "right-2" : "left-2", " cursor-pointer"), iconClassName)
+                }),
+                isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                    className: cn("absolute w-full bg-white border  border-gray-300 max-h-32 overflow-y-auto z-10", optionsContainerClassName),
+                    children: sortOptions.map(function(option) {
+                        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
+                            className: "p-2 cursor-pointer hover:bg-gray-200 ".concat(optionClassName),
+                            onClick: function() {
+                                return handleOptionClick(option.value);
+                            },
+                            children: option.label
+                        }, option.value);
                     })
-                ]
-            })
-        ]
-    });
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", {
+                    value: selectedValue,
+                    type: "hidden",
+                    name: name,
+                    required: required
+                })
+            ]
+        })
+    }));
 };
 function MultiSelect(param) {
     var onChange = param.onChange, selectedOptions = param.selectedOptions, emptyOptionsElement = param.emptyOptionsElement, unremovableOptions = param.unremovableOptions, _param_options = param.options, options = _param_options === void 0 ? [] : _param_options, _param_styles = param.styles, styles = _param_styles === void 0 ? {} : _param_styles, _param_name = param.name, name = _param_name === void 0 ? "multipleSelect" : _param_name, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Select items" : _param_placeholder, labelContent = param.labelContent, required = param.required, labelClassName = param.labelClassName, groupBy = param.groupBy, onSearch = param.onSearch, onSearchSync = param.onSearchSync, triggerSearchOnFocus = param.triggerSearchOnFocus, _param_sortDirection = param.sortDirection, sortDirection = _param_sortDirection === void 0 ? "abc" : _param_sortDirection, sortAsNumber = param.sortAsNumber, direction = param.direction, createNewOptionLabel = param.createNewOptionLabel, searchInputProps = param.searchInputProps, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-        className: cn("".concat(labelContent ? defaultFormElementContainerClassName : ""), styles.containerClassName),
-        children: [
-            labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
-                labelsCommonClassName: labelsCommonClassName,
-                withDots: labelWithDots,
-                direction: direction,
-                labelContent: labelContent,
-                labelClassName: labelClassName,
-                name: name,
-                required: required
+    var containerProps = (0, import_react13.useMemo)(function() {
+        return {
+            containerClassName: styles.containerClassName,
+            direction: direction,
+            labelClassName: labelClassName,
+            labelContent: labelContent,
+            labelWithDots: labelWithDots,
+            labelsCommonClassName: labelsCommonClassName,
+            name: name,
+            required: required,
+            defaultContainerClassName: !!labelContent
+        };
+    }, [
+        styles.containerClassName,
+        direction,
+        labelClassName,
+        labelContent,
+        labelWithDots,
+        labelsCommonClassName,
+        name,
+        required
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormElementContainer, _object_spread_props(_object_spread({}, containerProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(multiselect_default, {
+            commandProps: {
+                label: placeholder
+            },
+            name: name,
+            defaultOptions: sortOptions,
+            unremovableOptions: unremovableOptions,
+            value: selectedOptions,
+            onChange: onChange,
+            onSearch: onSearch,
+            onSearchSync: onSearchSync,
+            triggerSearchOnFocus: triggerSearchOnFocus,
+            groupBy: groupBy,
+            placeholder: placeholder,
+            createNewOptionLabel: createNewOptionLabel,
+            hideClearAllButton: true,
+            hidePlaceholderWhenSelected: true,
+            badgeClassName: styles.badgeClassName,
+            className: cn(defaultFormElementBorderClassName, styles.className),
+            dropdownClassName: styles.dropdownClassName,
+            dropdownOptionClassName: styles.dropdownOptionClassName,
+            emptyIndicator: emptyOptionsElement || /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", {
+                className: "text-center text-sm",
+                children: "all options selected."
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(multiselect_default, {
-                commandProps: {
-                    label: placeholder
-                },
-                name: name,
-                defaultOptions: sortOptions,
-                unremovableOptions: unremovableOptions,
-                value: selectedOptions,
-                onChange: onChange,
-                onSearch: onSearch,
-                onSearchSync: onSearchSync,
-                triggerSearchOnFocus: triggerSearchOnFocus,
-                groupBy: groupBy,
-                placeholder: placeholder,
-                createNewOptionLabel: createNewOptionLabel,
-                hideClearAllButton: true,
-                hidePlaceholderWhenSelected: true,
-                badgeClassName: styles.badgeClassName,
-                className: cn(defaultFormElementBorderClassName, styles.className),
-                dropdownClassName: styles.dropdownClassName,
-                dropdownOptionClassName: styles.dropdownOptionClassName,
-                emptyIndicator: emptyOptionsElement || /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", {
-                    className: "text-center text-sm",
-                    children: "all options selected."
-                }),
-                emptyIndicatorClassName: styles.emptyIndicatorClassName,
-                dropdownContainerClassName: styles.dropdownContainerClassName,
-                inputProps: searchInputProps
-            })
-        ]
-    });
+            emptyIndicatorClassName: styles.emptyIndicatorClassName,
+            dropdownContainerClassName: styles.dropdownContainerClassName,
+            inputProps: searchInputProps
+        })
+    }));
 }
 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, createNewOptionContainerClassName = param.createNewOptionContainerClassName, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
     var sortOptions = useSortValues(options, sortDirection, sortAsNumber);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-        className: cn(defaultFormElementContainerClassName, containerClassName),
-        children: [
-            labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
-                labelsCommonClassName: labelsCommonClassName,
-                withDots: labelWithDots,
-                direction: direction,
-                labelContent: labelContent,
-                labelClassName: labelClassName,
-                name: name,
-                required: required
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchSelect, {
-                direction: direction,
-                createNewOptionLabel: createNewOptionLabel,
-                createNewOptionContainerClassName: createNewOptionContainerClassName,
-                options: sortOptions,
-                value: value,
-                onChange: onChange,
-                defaultValue: defaultValue,
-                name: name,
-                elementClassName: elementClassName,
-                selectPlaceholder: placeholder,
-                buttonClassName: cn(defaultFormElementBorderClassName, buttonClassName),
-                buttonFocusClassName: buttonFocusClassName,
-                disabled: disabled,
-                searchClassName: searchClassName,
-                searchPlaceholder: searchPlaceholder,
-                dropdownClassName: dropdownClassName,
-                dropdownOptionClassName: dropdownOptionClassName,
-                notFoundLabelClassName: notFoundLabelClassName,
-                notFoundLabel: notFoundLabel
-            })
-        ]
-    });
+    var containerProps = (0, import_react13.useMemo)(function() {
+        return {
+            containerClassName: containerClassName,
+            direction: direction,
+            labelClassName: labelClassName,
+            labelContent: labelContent,
+            labelWithDots: labelWithDots,
+            labelsCommonClassName: labelsCommonClassName,
+            name: name,
+            required: required
+        };
+    }, [
+        containerClassName,
+        direction,
+        labelClassName,
+        labelContent,
+        labelWithDots,
+        labelsCommonClassName,
+        name,
+        required
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormElementContainer, _object_spread_props(_object_spread({}, containerProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SearchSelect, {
+            direction: direction,
+            createNewOptionLabel: createNewOptionLabel,
+            createNewOptionContainerClassName: createNewOptionContainerClassName,
+            options: sortOptions,
+            value: value,
+            onChange: onChange,
+            defaultValue: defaultValue,
+            name: name,
+            elementClassName: elementClassName,
+            selectPlaceholder: placeholder,
+            buttonClassName: cn(defaultFormElementBorderClassName, buttonClassName),
+            buttonFocusClassName: buttonFocusClassName,
+            disabled: disabled,
+            searchClassName: searchClassName,
+            searchPlaceholder: searchPlaceholder,
+            dropdownClassName: dropdownClassName,
+            dropdownOptionClassName: dropdownOptionClassName,
+            notFoundLabelClassName: notFoundLabelClassName,
+            notFoundLabel: notFoundLabel
+        })
+    }));
 };
 var TextAreaContainer = 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_defaultValue = param.defaultValue, defaultValue = _param_defaultValue === void 0 ? "" : _param_defaultValue, _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, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName;
+    var containerProps = (0, import_react13.useMemo)(function() {
+        return {
+            containerClassName: containerClassName,
+            direction: direction,
+            labelClassName: labelClassName,
+            labelContent: labelContent,
+            labelWithDots: labelWithDots,
+            labelsCommonClassName: labelsCommonClassName,
+            name: name,
+            required: required
+        };
+    }, [
+        containerClassName,
+        direction,
+        labelClassName,
+        labelContent,
+        labelWithDots,
+        labelsCommonClassName,
+        name,
+        required
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormElementContainer, _object_spread_props(_object_spread({}, containerProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("textarea", _object_spread_props(_object_spread({}, props), {
+            onChange: onChange,
+            minLength: minLength,
+            placeholder: placeholder,
+            className: cn("flex-1 bg-inherit min-h-16 max-h-52 overflow-auto px-2 py-1", defaultFormElementBorderClassName, elementClassName),
+            defaultValue: defaultValue,
+            required: required,
+            name: name,
+            onKeyDown: onKeyDown
+        }))
+    }));
+};
+var FormSeparator = function(param) {
+    var props = param.props, children = param.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", _object_spread_props(_object_spread({}, props), {
+        className: cn("border-b-[1px] border-gray-300 h-[1px]", props === null || props === void 0 ? void 0 : props.className),
+        children: children
+    }));
+};
+var CheckboxContainer = function(param) {
+    var id = param.id, checked = param.checked, setChecked = param.setChecked, circleClassName = param.circleClassName, className = param.className, containerClassName = param.containerClassName, elementClassName = param.elementClassName, name = param.name, direction = param.direction, labelClassName = param.labelClassName, labelContent = param.labelContent, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, props = param.props, rotate = param.rotate, title = param.title, required = param.required;
+    var containerProps = (0, import_react13.useMemo)(function() {
+        return {
+            containerClassName: containerClassName,
+            direction: direction,
+            labelClassName: labelClassName,
+            labelContent: labelContent,
+            labelWithDots: labelWithDots,
+            labelsCommonClassName: labelsCommonClassName,
+            name: name,
+            required: required
+        };
+    }, [
+        containerClassName,
+        direction,
+        labelClassName,
+        labelContent,
+        labelWithDots,
+        labelsCommonClassName,
+        name,
+        required
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(FormElementContainer, _object_spread_props(_object_spread({}, containerProps), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Checkbox, {
+            id: id,
+            name: name,
+            checked: checked,
+            setChecked: setChecked,
+            props: props,
+            rotate: rotate,
+            circleClassName: circleClassName,
+            className: className,
+            containerClassName: containerClassName,
+            elementClassName: elementClassName,
+            title: title
+        })
+    }));
+};
+var FormElementContainer = function(param) {
+    var containerClassName = param.containerClassName, direction = param.direction, labelClassName = param.labelClassName, labelContent = param.labelContent, labelWithDots = param.labelWithDots, labelsCommonClassName = param.labelsCommonClassName, name = param.name, required = param.required, children = param.children, _param_defaultContainerClassName = param.defaultContainerClassName, defaultContainerClassName = _param_defaultContainerClassName === void 0 ? true : _param_defaultContainerClassName;
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", {
-        className: cn(defaultFormElementContainerClassName, containerClassName),
+        className: cn(defaultContainerClassName ? defaultFormElementContainerClassName : "", containerClassName),
         children: [
             labelContent && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ElementLabel, {
                 labelsCommonClassName: labelsCommonClassName,
+                withDots: labelWithDots,
                 direction: direction,
                 labelContent: labelContent,
                 labelClassName: labelClassName,
                 name: name,
-                required: required,
-                withDots: labelWithDots
+                required: required
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("textarea", _object_spread_props(_object_spread({}, props), {
-                onChange: onChange,
-                minLength: minLength,
-                placeholder: placeholder,
-                className: cn("flex-1 bg-inherit min-h-16 max-h-52 overflow-auto px-2 py-1", defaultFormElementBorderClassName, elementClassName),
-                defaultValue: defaultValue,
-                required: required,
-                name: name,
-                onKeyDown: onKeyDown
-            }))
+            children
         ]
     });
 };
-var FormSeparator = function(param) {
-    var props = param.props, children = param.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", _object_spread_props(_object_spread({}, props), {
-        className: cn("border-b-[1px] border-gray-300 h-[1px]", props === null || props === void 0 ? void 0 : props.className),
-        children: children
-    }));
-};
 var ElementLabel = function(param) {
     var labelContent = param.labelContent, labelClassName = param.labelClassName, name = param.name, required = param.required, _param_withDots = param.withDots, withDots = _param_withDots === void 0 ? false : _param_withDots, direction = param.direction, labelsCommonClassName = param.labelsCommonClassName;
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", {
@@ -5907,7 +6022,8 @@ var ModularForm = function(param) {
                             var hasMinLengthType = function(element2) {
                                 return ![
                                     "custom",
-                                    "separator"
+                                    "separator",
+                                    "checkbox"
                                 ].includes(element2.type);
                             };
                             if (hasMinLengthType(element) && element.minLength) {
@@ -5981,6 +6097,11 @@ var ModularForm = function(param) {
                             direction: direction,
                             labelsCommonClassName: labelsCommonClassName
                         }), index2);
+                    case "checkbox":
+                        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckboxContainer, _object_spread_props(_object_spread({}, element), {
+                            direction: direction,
+                            labelsCommonClassName: labelsCommonClassName
+                        }), index2);
                     case "multiSelect":
                         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MultiSelect, _object_spread_props(_object_spread({}, element), {
                             direction: direction,
@@ -6205,6 +6326,7 @@ function Slot2(props) {
     BooleanUi: BooleanUi,
     Button: Button,
     Checkbox: Checkbox,
+    CheckboxContainer: CheckboxContainer,
     CodeInput: CodeInput,
     ConfirmForm: ConfirmForm,
     DatePicker: DatePicker,
@@ -6214,6 +6336,7 @@ function Slot2(props) {
     ErrorBoundary: ErrorBoundary,
     ExportToExcel: ExportToExcel,
     Filter: Filter,
+    FormElementContainer: FormElementContainer,
     FormSeparator: FormSeparator,
     GeoUi: GeoUi,
     Input: Input,