formik-form-components 0.2.13 → 0.2.15

package/dist/index.d.ts

@@ -492,7 +492,7 @@ interface Props$2 {
     placeholder?: string;
     required?: boolean;
     /** Variant of the input field */
-    variant?: 'outlined' | 'filled' | 'standard';
+    variant?: "outlined" | "filled" | "standard";
     sx?: SxProps<Theme>;
     editorSx?: SxProps<Theme>;
     toolbarSx?: SxProps<Theme>;
@@ -825,14 +825,8 @@ interface UploadProps extends DropzoneOptions {
 interface AppUploadFilePropTypes extends UploadProps {
     name: string;
     label?: string;
-    sx?: SxProps<Theme>;
-    uploadSx?: SxProps<Theme>;
-    errorSx?: SxProps<Theme>;
-    helperTextSx?: SxProps<Theme>;
-    previewSx?: SxProps<Theme>;
-    dropZoneSx?: SxProps<Theme>;
 }
-declare const AppUploadFile: ({ name, sx, uploadSx, errorSx, helperTextSx, previewSx, dropZoneSx, ...rest }: AppUploadFilePropTypes) => react_jsx_runtime.JSX.Element;
+declare const AppUploadFile: ({ name, ...rest }: AppUploadFilePropTypes) => react_jsx_runtime.JSX.Element;
 
 interface SubmitButtonProps {
     children: React__default.ReactNode;

package/dist/index.js

@@ -7,7 +7,6 @@ var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
 var dayjs = require('dayjs');
-var demo = require('@mui/x-date-pickers/internals/demo');
 var _19 = require('lodash');
 var jsxRuntime = require('react/jsx-runtime');
 var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
@@ -103,7 +102,7 @@ var AppDatePicker = react.forwardRef(
         externalOnBlur(event);
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsx(demo.DemoContainer, { components: ["DatePicker"], children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker.DatePicker,
       {
         label,
@@ -198,7 +197,7 @@ var AppDatePicker = react.forwardRef(
         },
         ...otherProps
       }
-    ) }) }) });
+    ) }) });
   }
 );
 AppDatePicker.displayName = "AppDatePicker";
@@ -1097,10 +1096,19 @@ var AppCheckBox = ({
   const isTouched = _19__default.default.get(touched, name);
   material.useTheme();
   const value = getFieldProps(name).value;
-  const checkedNames = Array.isArray(value) ? value : value ? [value] : [];
-  const handleChange = (itemName, isChecked) => {
-    const newValue = isChecked ? [...checkedNames, itemName] : checkedNames.filter((n) => n !== itemName);
-    setFieldValue(name, option.length === 1 ? isChecked : newValue);
+  const checkedValues = (() => {
+    if (Array.isArray(value)) {
+      return value.map(String);
+    }
+    return value ? [String(value)] : [];
+  })();
+  const handleChange = (itemValue, isChecked) => {
+    if (option.length === 1) {
+      setFieldValue(name, isChecked ? itemValue : false);
+    } else {
+      const newValue = isChecked ? [...checkedValues, String(itemValue)] : checkedValues.filter((v) => v !== String(itemValue));
+      setFieldValue(name, newValue);
+    }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     material.Box,
@@ -1169,11 +1177,9 @@ var AppCheckBox = ({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     material.Checkbox,
                     {
-                      ...getFieldProps(name),
-                      name,
-                      value: item.name,
-                      checked: checkedNames.includes(item.name),
-                      onChange: (e) => handleChange(item.name, e.target.checked),
+                      name: `${name}.${item.name}`,
+                      checked: option.length === 1 ? getFieldProps(name).value === item.value : checkedValues.includes(String(item.value)),
+                      onChange: (e) => handleChange(item.value, e.target.checked),
                       disabled: disabled || item.disabled,
                       sx: [{
                         color: "primary.main",
@@ -11179,12 +11185,14 @@ var AppRichTextEditor = ({
           material.Typography,
           {
             variant: "caption",
-            sx: [{
-              color: "error.main",
-              display: "block",
-              mt: 0.5,
-              ...errorSx
-            }],
+            sx: [
+              {
+                color: "error.main",
+                display: "block",
+                mt: 0.5,
+                ...errorSx
+              }
+            ],
             children: msg
           }
         )
@@ -11194,167 +11202,173 @@ var AppRichTextEditor = ({
       material.Typography,
       {
         variant: "button",
-        sx: [{
-          color: "text.primary",
-          mb: 1,
-          display: "block",
-          ...labelSx
-        }],
+        sx: [
+          {
+            color: "text.primary",
+            mb: 1,
+            display: "block",
+            ...labelSx
+          }
+        ],
         children: [
           label,
           required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
-      mb: 1,
-      display: "flex",
-      gap: 1,
-      flexWrap: "wrap",
-      p: 1,
-      bgcolor: "background.paper",
-      borderRadius: 1,
-      border: "1px solid",
-      borderColor: "divider",
-      ...toolbarSx
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleBold().run(),
-          color: editor.isActive("bold") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("bold") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatBoldIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleItalic().run(),
-          color: editor.isActive("italic") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("italic") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatItalicIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleUnderline().run(),
-          color: editor.isActive("underline") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("underline") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatUnderlinedIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Strike", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleStrike().run(),
-          color: editor.isActive("strike") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("strike") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(StrikethroughSIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bullet List", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleBulletList().run(),
-          color: editor.isActive("bulletList") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("bulletList") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatListBulletedIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Numbered List", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleOrderedList().run(),
-          color: editor.isActive("orderedList") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("orderedList") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatListNumberedIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("left").run(),
-          color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignLeftIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("center").run(),
-          color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignCenterIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("right").run(),
-          color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignRightIcon__default.default, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 1", children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-          color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "1rem" } })
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        material.IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-          color: editor.isActive("heading", { level: 2 }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } }),
-            /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {})
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(RedoIcon__default.default, {}) }) })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Box,
+      {
+        sx: {
+          mb: 1,
+          display: "flex",
+          gap: 1,
+          flexWrap: "wrap",
+          p: 1,
+          bgcolor: "background.paper",
+          borderRadius: 1,
+          border: "1px solid",
+          borderColor: "divider",
+          ...toolbarSx
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleBold().run(),
+              color: editor.isActive("bold") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("bold") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatBoldIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleItalic().run(),
+              color: editor.isActive("italic") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("italic") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatItalicIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Underline", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleUnderline().run(),
+              color: editor.isActive("underline") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("underline") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatUnderlinedIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Strike", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleStrike().run(),
+              color: editor.isActive("strike") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("strike") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(StrikethroughSIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Bullet List", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              color: editor.isActive("bulletList") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("bulletList") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatListBulletedIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Numbered List", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              color: editor.isActive("orderedList") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("orderedList") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatListNumberedIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("left").run(),
+              color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignLeftIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("center").run(),
+              color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignCenterIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("right").run(),
+              color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(FormatAlignRightIcon__default.default, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+              color: editor.isActive("heading", { level: 1 }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("heading", { level: 1 }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "1rem" } })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            material.IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+              color: editor.isActive("heading", { level: 2 }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("heading", { level: 2 }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(TitleIcon__default.default, { sx: { fontSize: "0.85rem" } })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Undo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().undo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon__default.default, {}) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: "Redo", children: /* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsxRuntime.jsx(RedoIcon__default.default, {}) }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Box,
       {
@@ -13054,7 +13068,9 @@ function MultiFilePreview({
     );
   }) });
 }
-function SingleFilePreview({ file }) {
+function SingleFilePreview({
+  file
+}) {
   if (!file) {
     return null;
   }
@@ -13704,7 +13720,13 @@ function Upload({
   sx,
   ...other
 }) {
-  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = reactDropzone.useDropzone({
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject,
+    fileRejections
+  } = reactDropzone.useDropzone({
     multiple,
     disabled,
     ...other
@@ -13773,9 +13795,25 @@ function Upload({
       }
     ),
     hasFiles === true && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { my: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(MultiFilePreview, { files, thumbnail, onRemove }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { my: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        MultiFilePreview,
+        {
+          files,
+          thumbnail,
+          onRemove
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(material.Stack, { direction: "row", justifyContent: "flex-end", spacing: 1.5, children: [
-        onRemoveAll && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { color: "inherit", variant: "outlined", size: "small", onClick: onRemoveAll, children: t("Remove all") }),
+        onRemoveAll && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Button,
+          {
+            color: "inherit",
+            variant: "outlined",
+            size: "small",
+            onClick: onRemoveAll,
+            children: t("Remove all")
+          }
+        ),
         onUpload && /* @__PURE__ */ jsxRuntime.jsx(material.Button, { size: "small", variant: "contained", onClick: onUpload, children: t("Upload files") })
       ] })
     ] })
@@ -13840,17 +13878,8 @@ async function blobToBase64(file) {
     };
   });
 }
-var AppUploadFile = ({
-  name,
-  sx,
-  uploadSx,
-  errorSx,
-  helperTextSx,
-  previewSx,
-  dropZoneSx,
-  ...rest
-}) => {
-  var _a, _b;
+var AppUploadFile = ({ name, ...rest }) => {
+  var _a, _b, _c, _d, _e;
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
   const fieldError = _19__default.default.get(errors, name);
   const isTouched = _19__default.default.get(touched, name);
@@ -13860,43 +13889,16 @@ var AppUploadFile = ({
   } else if (!((_b = rest.multiple) != null ? _b : false) && _19__default.default.isArray(val)) {
     val = val[0];
   }
-  const formatValue = (val2) => {
-    if (rest.multiple) {
-      return (Array.isArray(val2) ? val2 : []).map((item) => ({
-        ...(item == null ? void 0 : item.file) ? item : { file: item, preview: item == null ? void 0 : item.preview }
-      }));
-    }
-    return (val2 == null ? void 0 : val2.file) ? val2 : val2 ? { file: val2, preview: val2.preview } : null;
-  };
-  const formattedValue = formatValue(val);
-  const currentFiles = Array.isArray(val) ? val : [];
-  const isMaxFilesReached = rest.maxFiles !== null && rest.maxFiles !== void 0 && currentFiles.length >= rest.maxFiles;
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
+  const value = ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Upload,
       {
         ...rest,
-        file: rest.multiple ? void 0 : formattedValue,
-        files: rest.multiple ? formattedValue : void 0,
+        file: ((_d = rest.multiple) != null ? _d : false) ? void 0 : value,
+        files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
         error: Boolean(fieldError) && isTouched,
-        disabled: isMaxFilesReached,
-        sx: [{
-          "& .MuiDropzoneArea-root": {
-            minHeight: 200,
-            border: "2px dashed",
-            borderColor: "divider",
-            borderRadius: 1,
-            "&:hover": {
-              borderColor: "primary.main",
-              backgroundColor: "action.hover"
-            },
-            ...dropZoneSx
-          },
-          "& .MuiDropzonePreviewList-root": {
-            ...previewSx
-          },
-          ...uploadSx
-        }],
+        disabled: (rest == null ? void 0 : rest.maxFiles) !== null && (rest == null ? void 0 : rest.maxFiles) !== void 0 && (value == null ? void 0 : value.length) >= (rest == null ? void 0 : rest.maxFiles),
         onDrop: (fileVal) => {
           (async () => {
             var _a2;
@@ -13909,7 +13911,7 @@ var AppUploadFile = ({
                 };
               })
             );
-            const currentValue = Array.isArray(val) ? [...val] : [];
+            const currentValue = Array.isArray(value) ? value : [];
             if (rest.multiple === true) {
               if (currentValue.length >= ((_a2 = rest.maxFiles) != null ? _a2 : Infinity))
                 return;
@@ -13924,57 +13926,36 @@ var AppUploadFile = ({
           if ((_a2 = rest.multiple) != null ? _a2 : false) {
             setFieldValue(name, [], true);
           } else {
-            setFieldValue(name, null, true);
+            setFieldValue(name, "", true);
           }
         },
-        onRemove: (fileToRemove) => {
-          if (rest.multiple) {
-            const currentFiles2 = Array.isArray(val) ? [...val] : [];
-            const filteredFiles = currentFiles2.filter((file) => {
-              const fileObj = (file == null ? void 0 : file.file) ? file.file : file;
-              return !_19__default.default.isEqual(fileObj, fileToRemove);
-            });
-            setFieldValue(name, filteredFiles, true);
-          } else {
-            setFieldValue(name, null, true);
-          }
+        onRemove: (e) => {
+          const afterFilter = val.filter((file) => {
+            var _a2;
+            if ((_a2 = file.file) != null ? _a2 : false) {
+              return !_19__default.default.isEqual(e, file.file);
+            }
+            return !_19__default.default.isEqual(e, file);
+          });
+          setFieldValue(name, afterFilter, true);
         }
       }
     ),
     Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsxRuntime.jsx(
       material.Typography,
       {
+        color: "#FF5630",
         variant: "caption",
-        sx: [{
-          color: "error.main",
-          display: "block",
-          mt: 0.5,
-          ...errorSx
-        }],
+        display: "block",
         gutterBottom: true,
         children: fieldError
       }
     ),
-    rest.maxFiles != null && /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Typography,
-      {
-        variant: "caption",
-        sx: [{
-          display: "block",
-          color: "text.secondary",
-          mt: 0.5,
-          ...helperTextSx
-        }],
-        gutterBottom: true,
-        children: [
-          "Maximum ",
-          rest.maxFiles,
-          " file",
-          rest.maxFiles !== 1 ? "s" : "",
-          " allowed"
-        ]
-      }
-    )
+    rest.maxFiles != null && /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "caption", display: "block", gutterBottom: true, children: [
+      "Maximum ",
+      rest.maxFiles,
+      " file allowed"
+    ] })
   ] });
 };
 var AppUploadFile_default = AppUploadFile;