@gnwebsoft/ui 2.18.38 → 2.18.40

package/dist/{chunk-KADZH5FM.mjs → chunk-FSU3H777.mjs}

@@ -438,6 +438,27 @@ var AuthorizedView = ({ children, show }) => {
 };
 var AuthorizedView_default = AuthorizedView;
 
+// src/components/CancelButton/CancelButton.tsx
+import { Button as Button3 } from "@mui/material";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CancelButton = ({
+  isSubmitting,
+  handleCancel,
+  sx
+}) => {
+  return /* @__PURE__ */ jsx10(
+    Button3,
+    {
+      variant: "outlined",
+      onClick: handleCancel,
+      disabled: isSubmitting,
+      sx,
+      children: "Cancel"
+    }
+  );
+};
+var CancelButton_default = CancelButton;
+
 export {
   ClearButton_default,
   FilterButton_default,
@@ -447,5 +468,6 @@ export {
   ListWrapper_default,
   SimpleToolbar_default,
   SimpleButton_default,
-  AuthorizedView_default
+  AuthorizedView_default,
+  CancelButton_default
 };

package/dist/{chunk-RWMC36UO.js → chunk-JKUOV3MN.js}

@@ -438,6 +438,28 @@ var AuthorizedView = ({ children, show }) => {
 };
 var AuthorizedView_default = AuthorizedView;
 
+// src/components/CancelButton/CancelButton.tsx
+
+
+var CancelButton = ({
+  isSubmitting,
+  handleCancel,
+  sx
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _material.Button,
+    {
+      variant: "outlined",
+      onClick: handleCancel,
+      disabled: isSubmitting,
+      sx,
+      children: "Cancel"
+    }
+  );
+};
+var CancelButton_default = CancelButton;
+
+
 
 
 
@@ -448,4 +470,4 @@ var AuthorizedView_default = AuthorizedView;
 
 
 
-exports.ClearButton_default = ClearButton_default; exports.FilterButton_default = FilterButton_default; exports.FilterWrapper_default = FilterWrapper_default; exports.FormWrapper_default = FormWrapper_default; exports.LabelText_default = LabelText_default; exports.ListWrapper_default = ListWrapper_default; exports.SimpleToolbar_default = SimpleToolbar_default; exports.SimpleButton_default = SimpleButton_default; exports.AuthorizedView_default = AuthorizedView_default;
+exports.ClearButton_default = ClearButton_default; exports.FilterButton_default = FilterButton_default; exports.FilterWrapper_default = FilterWrapper_default; exports.FormWrapper_default = FormWrapper_default; exports.LabelText_default = LabelText_default; exports.ListWrapper_default = ListWrapper_default; exports.SimpleToolbar_default = SimpleToolbar_default; exports.SimpleButton_default = SimpleButton_default; exports.AuthorizedView_default = AuthorizedView_default; exports.CancelButton_default = CancelButton_default;

package/dist/{chunk-VOOWINZA.mjs → chunk-RVKKPXZC.mjs}

@@ -6,38 +6,45 @@ import {
 } from "./chunk-AVNKSUE5.mjs";
 
 // src/wrappers/DatePickerElement/DatePickerElement.tsx
-import {
-  useController
-} from "react-hook-form";
-import {
-  Grid2,
-  useForkRef
-} from "@mui/material";
-import {
-  DatePicker
-} from "@mui/x-date-pickers";
-import { useLocalizationContext } from "@mui/x-date-pickers/internals";
+import { useMemo, useCallback } from "react";
+import { useController } from "react-hook-form";
+import { DatePicker } from "@mui/x-date-pickers";
+import { Grid2, useForkRef } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
+function useTransform2(options) {
+  const value = useMemo(
+    () => typeof options.transform?.input === "function" ? options.transform.input(options.value) : options.value,
+    [options.transform, options.value]
+  );
+  const onChange = useCallback(
+    (...event) => {
+      if (typeof options.transform?.output === "function") {
+        options.onChange(options.transform.output(...event));
+      } else {
+        options.onChange(...event);
+      }
+    },
+    [options]
+  );
+  return {
+    value,
+    onChange
+  };
+}
 var Component = function DatePickerElement(props) {
   const {
-    parseError,
     name,
     required,
-    rules = {},
     inputProps,
     control,
     textReadOnly,
     label,
     placeholder,
-    gridProps,
     slotProps,
-    transform,
     datePickerProps = {},
-    variant,
     sx,
     ...rest
   } = props;
-  const adapter = useLocalizationContext();
   const { disabled, inputRef, onClose, ...restDatePickerProps } = datePickerProps;
   const {
     field,
@@ -47,12 +54,15 @@ var Component = function DatePickerElement(props) {
     control,
     defaultValue: null
   });
-  const { value, onChange } = useTransform({
+  const { value, onChange } = useTransform2({
     value: field.value,
     onChange: field.onChange,
     transform: {
-      input: typeof transform?.input === "function" ? transform.input : (newValue) => readValueAsDate(adapter, newValue),
-      output: typeof transform?.output === "function" ? transform.output : (newValue) => newValue
+      //@ts-ignore
+      output: (outputValue, context) => {
+        if (outputValue === null) return null;
+        return outputValue;
+      }
     }
   });
   const handleInputRef = useForkRef(field.ref, inputRef);
@@ -82,6 +92,9 @@ var Component = function DatePickerElement(props) {
       sx,
       slotProps: {
         ...slotProps,
+        actionBar: {
+          actions: ["clear", "today", "cancel", "accept"]
+        },
         textField: {
           ...inputProps,
           required,
@@ -485,7 +498,7 @@ import {
   useController as useController5
 } from "react-hook-form";
 import { useForkRef as useForkRef4, Grid2 as Grid25 } from "@mui/material";
-import { useLocalizationContext as useLocalizationContext2 } from "@mui/x-date-pickers/internals";
+import { useLocalizationContext } from "@mui/x-date-pickers/internals";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Component5 = function TimePickerElement(props) {
   const {
@@ -501,7 +514,7 @@ var Component5 = function TimePickerElement(props) {
     transform,
     ...rest
   } = props;
-  const adapter = useLocalizationContext2();
+  const adapter = useLocalizationContext();
   const {
     field,
     fieldState: { error }
@@ -575,9 +588,9 @@ import Autocomplete from "@mui/material/Autocomplete";
 import { debounce } from "@mui/material/utils";
 import {
   Fragment,
-  useCallback,
+  useCallback as useCallback2,
   useEffect as useEffect2,
-  useMemo,
+  useMemo as useMemo2,
   useRef,
   useState as useState2
 } from "react";
@@ -610,8 +623,8 @@ var Component6 = function AsyncSelectElement(props) {
   const [loading, setLoading] = useState2(false);
   const [selectedOption, setSelectedOption] = useState2(null);
   const [inputValue, setInputValue] = useState2("");
-  const inputValue2 = useMemo(() => inputValue, [inputValue]);
-  const setInputValue2 = useCallback(
+  const inputValue2 = useMemo2(() => inputValue, [inputValue]);
+  const setInputValue2 = useCallback2(
     (inputValue3) => setInputValue(inputValue3),
     []
   );
@@ -620,7 +633,7 @@ var Component6 = function AsyncSelectElement(props) {
     !initialValue ? true : !(initialValue != null && initialValue > 0)
   );
   const fieldValue = useRef(field.value);
-  const fetchData = useMemo(
+  const fetchData = useMemo2(
     () => debounce(
       (payload, callback) => {
         queryFn(payload).then((c) => callback(c));
@@ -786,9 +799,9 @@ import _ from "lodash";
 import {
   useState as useState3,
   useRef as useRef2,
-  useMemo as useMemo2,
+  useMemo as useMemo3,
   useEffect as useEffect3,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   Fragment as Fragment2
 } from "react";
 import { debounce as debounce2 } from "lodash";
@@ -834,12 +847,12 @@ var Component7 = function AsyncSelectMultiElement(props) {
   const initialValuesLoaded = useRef2(
     !(initialValues && initialValues.length > 0)
   );
-  const inputValue2 = useMemo2(() => inputValue, [inputValue]);
-  const setInputValue2 = useCallback2(
+  const inputValue2 = useMemo3(() => inputValue, [inputValue]);
+  const setInputValue2 = useCallback3(
     (inputValue3) => setInputValue(inputValue3),
     []
   );
-  const fetchData = useMemo2(
+  const fetchData = useMemo3(
     () => debounce2(
       (payload, callback) => {
         queryFn(payload).then((c) => callback(c));
@@ -990,19 +1003,12 @@ AsyncSelectMultiElement2.displayName = "AsyncSelectMulti";
 var AsyncMultiSelect_default = AsyncSelectMultiElement2;
 
 // src/wrappers/SelectElement/SelectElement.tsx
-import {
-  Autocomplete as Autocomplete3,
-  TextField as TextField5,
-  Grid2 as Grid28
-} from "@mui/material";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useMemo as useMemo4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
 import {
   useController as useController8
 } from "react-hook-form";
+import { Grid2 as Grid28, useTheme as useTheme5, TextField as TextField5, Autocomplete as Autocomplete3 } from "@mui/material";
 import { jsx as jsx8 } from "react/jsx-runtime";
-function isOptionType(option, key) {
-  return typeof option === "object" && option !== null && key in option;
-}
 var Component8 = function SelectElement(props) {
   const {
     name,
@@ -1011,50 +1017,89 @@ var Component8 = function SelectElement(props) {
     isEdit,
     options,
     label,
+    sx,
+    variant,
+    disabled,
     labelKey = "Label",
     valueKey = "Value",
+    placeholder,
+    textFieldProps = {},
     ...rest
   } = props;
-  const { field } = useController8({
+  const { required } = textFieldProps;
+  const {
+    field,
+    fieldState: { error }
+  } = useController8({
     name,
     control
   });
-  const [hasAutoSelected, setHasAutoSelected] = useState4(false);
+  const theme = useTheme5();
+  const getOptionValue = useCallback4(
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? option[valueKey] : null;
+    },
+    [valueKey]
+  );
+  const getOptionLabel = useCallback4(
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? String(option[labelKey]) : "";
+    },
+    [labelKey]
+  );
   const handleChange = (event, newValue, reason) => {
-    if (reason === "clear") {
-      field.onChange(null);
-      setHasAutoSelected(true);
-    } else {
-      const option = newValue;
-      field.onChange(option[valueKey] ?? null);
-      setHasAutoSelected(true);
-    }
+    const option = newValue;
+    field.onChange(option ? getOptionValue(option) : null);
     onChange?.(event, newValue, reason);
   };
   useEffect4(() => {
-    if (isEdit) {
-      return;
-    } else {
-      if (options.length === 1 && field.value == null && !hasAutoSelected) {
-        const option = options[0];
-        field.onChange(option);
-        setHasAutoSelected(true);
-      }
+    if (!isEdit && options.length === 1 && (field.value == null || field.value == void 0 || field.value === "")) {
+      const defaultOption = options[0];
+      const defaultValue = getOptionValue(defaultOption);
+      field.onChange(defaultValue);
     }
-  }, [options, field.value, field.onChange, hasAutoSelected]);
+  }, [isEdit, options]);
+  const autocompleteValue = useMemo4(
+    () => options.find((option) => getOptionValue(option) === field.value) ?? null,
+    [field.value, options, getOptionValue]
+  );
   return /* @__PURE__ */ jsx8(
     Autocomplete3,
     {
       ...rest,
       filterSelectedOptions: false,
       options,
-      value: field.value !== null ? options.find(
-        (option) => isOptionType(option, valueKey) && field.value === option[valueKey]
-      ) ?? null : null,
+      value: autocompleteValue,
       onChange: handleChange,
-      getOptionLabel: (option) => isOptionType(option, labelKey) ? String(option[labelKey]) : typeof option === "string" ? option : "",
-      isOptionEqualToValue: (option, value) => isOptionType(option, valueKey) && isOptionType(value, valueKey) ? option[valueKey] === value[valueKey] : false,
-      renderInput: (params) => /* @__PURE__ */ jsx8(TextField5, { ...params, label })
+      disabled,
+      getOptionLabel: (option) => getOptionLabel(option),
+      ref: field.ref,
+      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
+      renderInput: (params) => /* @__PURE__ */ jsx8(
+        TextField5,
+        {
+          ...params,
+          fullWidth: true,
+          required,
+          error: !!error,
+          helperText: error ? error.message : "",
+          label,
+          placeholder,
+          variant: variant ? variant : "outlined",
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
+            },
+            "& .MuiInputLabel-asterisk": { color: "red" },
+            "& .MuiInputBase-input": {
+              cursor: disabled ? "not-allowed" : "default"
+            },
+            ...sx
+          }
+        }
+      )
     }
   );
 };
@@ -1071,29 +1116,26 @@ SelectElement2.displayName = "SelectElement";
 var SelectElement_default = SelectElement2;
 
 // src/wrappers/SelectMultiElement/SelectMultiElement.tsx
-import {
-  Autocomplete as Autocomplete4,
-  CircularProgress as CircularProgress3,
-  Grid2 as Grid29,
-  TextField as TextField6
-} from "@mui/material";
-import {
-  useController as useController9
-} from "react-hook-form";
-import { Fragment as Fragment3, useState as useState5 } from "react";
+import { Fragment as Fragment3 } from "react";
+import { useController as useController9 } from "react-hook-form";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import { Grid2 as Grid29, Checkbox, TextField as TextField6, Autocomplete as Autocomplete4, CircularProgress as CircularProgress3 } from "@mui/material";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var Component9 = function SelectMultiElement(props) {
   const {
     name,
+    control,
     onBlur,
     disabled,
     options,
-    control,
     loading = false,
     placeholder,
     label,
     variant,
     sx,
+    labelKey = "Label",
+    valueKey = "Value",
     ...rest
   } = props;
   const {
@@ -1103,27 +1145,38 @@ var Component9 = function SelectMultiElement(props) {
     name,
     control
   });
-  const [selectedOptions, setSelectedOptions] = useState5([]);
-  const handleChange = (_2, selectedOptions2, reason) => {
+  const getOptionValue = (option) => {
+    if (typeof option === "string") return option;
+    return option ? option[valueKey] : null;
+  };
+  const getOptionLabel = (option) => {
+    if (typeof option === "string") return option;
+    return option ? option[labelKey] : "";
+  };
+  const selectedValue = field.value && Array.isArray(field.value) ? options.filter((option) => field.value.includes(getOptionValue(option))) : [];
+  const handleChange = (_2, selectedOptions, reason) => {
     if (reason === "clear") {
-      setSelectedOptions([]);
       field.onChange([]);
     } else if (reason === "selectOption" || reason === "removeOption") {
-      setSelectedOptions(selectedOptions2);
-      field.onChange(selectedOptions2.map((c) => c.Value));
+      const newValues = selectedOptions.map((option) => getOptionValue(option));
+      field.onChange(newValues);
     }
   };
+  const icon = /* @__PURE__ */ jsx9(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+  const checkedIcon = /* @__PURE__ */ jsx9(CheckBoxIcon, { fontSize: "small" });
   return /* @__PURE__ */ jsx9(
     Autocomplete4,
     {
       multiple: true,
-      value: selectedOptions,
+      value: selectedValue,
       loading,
       options,
-      getOptionLabel: (c) => c.Label,
+      getOptionLabel,
+      isOptionEqualToValue: (option, value) => getOptionValue(option) === getOptionValue(value),
       filterSelectedOptions: true,
+      disableCloseOnSelect: true,
       ref: field.ref,
-      disabled: field.disabled,
+      disabled: disabled ?? field.disabled,
       onChange: handleChange,
       onBlur: (event) => {
         field.onBlur();
@@ -1132,6 +1185,13 @@ var Component9 = function SelectMultiElement(props) {
         }
       },
       fullWidth: true,
+      renderOption: (props1, option, { selected }) => {
+        const { key, ...optionProps } = props1;
+        return /* @__PURE__ */ jsxs4("li", { ...optionProps, children: [
+          /* @__PURE__ */ jsx9(Checkbox, { icon, checkedIcon, checked: selected }),
+          getOptionLabel(option)
+        ] }, key);
+      },
       renderInput: (params) => /* @__PURE__ */ jsx9(
         TextField6,
         {
@@ -1172,36 +1232,54 @@ SelectMultiElement2.displayName = "SelectMultiElement";
 var SelectMultiElement_default = SelectMultiElement2;
 
 // src/wrappers/SelectCascadeElement/SelectCascadeElement.tsx
+import { useRef as useRef3, useState as useState4, useEffect as useEffect5, useCallback as useCallback5 } from "react";
+import {
+  useController as useController10
+} from "react-hook-form";
 import {
-  Autocomplete as Autocomplete5,
   Grid2 as Grid210,
+  useTheme as useTheme6,
   TextField as TextField7,
-  useTheme as useTheme5
+  Autocomplete as Autocomplete5
 } from "@mui/material";
-import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
-import {
-  useController as useController10
-} from "react-hook-form";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Component10 = function SelectCascadeElement(props) {
+var Component10 = function SelectCascadeElement2(props) {
   const {
+    labelKey = "Label",
+    valueKey = "Value",
     name,
     onBlur,
     onChange,
     disabled,
     options,
     control,
-    gridProps,
     loading = false,
     placeholder,
     label,
     dependsOn,
-    initialValue,
+    textFieldProps = {},
     variant,
     sx,
     isEdit = false,
     ...rest
   } = props;
+  const { required } = textFieldProps;
+  const getOptionKey = useCallback5(
+    (option) => {
+      if (typeof option === "string" || typeof option === "number") return option;
+      const key = option ? option[valueKey] : void 0;
+      return key !== void 0 && key !== null ? String(key) : "";
+    },
+    [valueKey]
+  );
+  const getOptionLabel = useCallback5(
+    (option) => {
+      if (typeof option === "string") return option;
+      return option ? String(option[labelKey]) : "";
+    },
+    [labelKey]
+  );
+  const isOptionEqualToValue = (option, value) => getOptionKey(option) === getOptionKey(value);
   const {
     field,
     fieldState: { error }
@@ -1209,50 +1287,53 @@ var Component10 = function SelectCascadeElement(props) {
     name,
     control
   });
-  const theme = useTheme5();
+  const theme = useTheme6();
   const { field: dependentField } = useController10({
     name: dependsOn,
     control
   });
   const parentValueRef = useRef3(dependentField.value ?? null);
   useEffect5(() => {
-    if (!!dependentField.value && parentValueRef?.current?.Value !== dependentField.value || dependentField.value === null) {
+    if (!!dependentField.value && parentValueRef?.current !== dependentField.value || dependentField.value === null) {
       field.onChange(null);
     }
-  }, [dependentField.value]);
-  useEffect5(() => {
-    if (initialValue) {
-      field.onChange(initialValue);
-    }
-  }, [initialValue]);
-  const [hasAutoSelected, setHasAutoSelected] = useState6(false);
+  }, [dependentField.value, field]);
+  const [hasAutoSelected, setHasAutoSelected] = useState4(false);
   useEffect5(() => {
     if (isEdit && !disabled && options.length === 1 && field.value == null && !hasAutoSelected) {
-      field.onChange(options[0].Value);
+      field.onChange(getOptionKey(options[0]));
       setHasAutoSelected(true);
     } else {
       if (options.length === 1 && field.value == null && !hasAutoSelected) {
-        field.onChange(options[0].Value);
+        field.onChange(getOptionKey(options[0]));
         setHasAutoSelected(true);
       }
     }
-  }, [options, field.value, field.onChange, hasAutoSelected, isEdit]);
+  }, [
+    options,
+    field.value,
+    field.onChange,
+    hasAutoSelected,
+    isEdit,
+    disabled,
+    field,
+    getOptionKey
+  ]);
   return /* @__PURE__ */ jsx10(
     Autocomplete5,
     {
       ...rest,
-      value: field.value !== null ? options.find((option) => {
-        return field.value === option.Value;
-      }) ?? null : null,
+      value: options.map((option) => getOptionKey(option) === field.value ? option : null).find(Boolean) || null,
       size: "small",
       loading,
       options,
-      getOptionLabel: (c) => c.Label,
-      isOptionEqualToValue: (option, value) => option.Value === value.Value,
+      getOptionKey,
+      getOptionLabel,
+      isOptionEqualToValue,
       ref: field.ref,
       disabled,
       onChange: (event, newValue, reason) => {
-        field.onChange(newValue ? newValue.Value : null);
+        field.onChange(newValue ? getOptionKey(newValue) : null);
         if (onChange && typeof onChange === "function") {
           onChange(event, newValue, reason);
         }
@@ -1270,15 +1351,19 @@ var Component10 = function SelectCascadeElement(props) {
           ...params,
           fullWidth: true,
           error: !!error,
+          required,
           helperText: error ? error.message : "",
           placeholder,
           label,
           variant: variant ? variant : "outlined",
           sx: {
+            "& .MuiOutlinedInput-root": {
+              bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent"
+            },
+            "& .MuiInputLabel-asterisk": { color: "red" },
             "& .MuiInputBase-input": {
               cursor: disabled ? "not-allowed" : "default"
             },
-            bgcolor: disabled ? theme.palette.action.disabledBackground : "transparent",
             ...sx
           }
         }
@@ -1286,7 +1371,7 @@ var Component10 = function SelectCascadeElement(props) {
     }
   );
 };
-var SelectCascadeElement2 = ({
+var SelectCascadeElement = ({
   gridProps,
   ...props
 }) => {
@@ -1295,12 +1380,12 @@ var SelectCascadeElement2 = ({
   }
   return /* @__PURE__ */ jsx10(Component10, { ...props });
 };
-SelectCascadeElement2.displayName = "SelectCascadeElement";
-var SelectCascadeElement_default = SelectCascadeElement2;
+SelectCascadeElement.displayName = "SelectCascadeElement";
+var SelectCascadeElement_default = SelectCascadeElement;
 
 // src/wrappers/CheckboxElement/CheckboxElement.tsx
 import {
-  Checkbox,
+  Checkbox as Checkbox2,
   FormControl as FormControl2,
   FormControlLabel as FormControlLabel2,
   FormGroup,
@@ -1328,7 +1413,7 @@ var Component11 = function CheckboxElement(props) {
         label: label || "",
         ...labelProps,
         control: /* @__PURE__ */ jsx11(
-          Checkbox,
+          Checkbox2,
           {
             ...rest,
             color: rest.color || "primary",
@@ -1367,14 +1452,14 @@ var CheckboxElement_default = CheckboxElement2;
 
 // src/wrappers/CheckboxGroup/CheckboxGroup.tsx
 import {
-  Checkbox as Checkbox2,
+  Checkbox as Checkbox3,
   FormControl as FormControl3,
   FormControlLabel as FormControlLabel3,
   FormGroup as FormGroup2,
   FormHelperText as FormHelperText3,
   Grid2 as Grid212
 } from "@mui/material";
-import { useEffect as useEffect6, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState5 } from "react";
 import {
   useController as useController12
 } from "react-hook-form";
@@ -1389,7 +1474,7 @@ var Component12 = function CheckboxGroup(props) {
     control,
     disabled: rest.disabled
   });
-  const [selectedValues, setSelectedValues] = useState7(
+  const [selectedValues, setSelectedValues] = useState5(
     options.filter((c) => field.value?.includes(c.Value)).map((c) => c.Value) || []
   );
   useEffect6(() => {
@@ -1410,7 +1495,7 @@ var Component12 = function CheckboxGroup(props) {
         label: option.Label,
         ...labelProps,
         control: /* @__PURE__ */ jsx12(
-          Checkbox2,
+          Checkbox3,
           {
             ...rest,
             color: rest.color || "primary",