formik-form-components 0.2.13 → 0.2.15

package/dist/index.mjs

@@ -5,7 +5,6 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { Dayjs } from 'dayjs';
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
 import _19, { get } from 'lodash';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
@@ -76,7 +75,7 @@ var AppDatePicker = forwardRef(
         externalOnBlur(event);
       }
     };
-    return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsx(DemoContainer, { components: ["DatePicker"], children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsx(
       DatePicker,
       {
         label,
@@ -171,7 +170,7 @@ var AppDatePicker = forwardRef(
         },
         ...otherProps
       }
-    ) }) }) });
+    ) }) });
   }
 );
 AppDatePicker.displayName = "AppDatePicker";
@@ -1070,10 +1069,19 @@ var AppCheckBox = ({
   const isTouched = _19.get(touched, name);
   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__ */ jsxs(
     Box,
@@ -1142,11 +1150,9 @@ var AppCheckBox = ({
                   /* @__PURE__ */ jsx(
                     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",
@@ -11152,12 +11158,14 @@ var AppRichTextEditor = ({
           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
           }
         )
@@ -11167,167 +11175,173 @@ var AppRichTextEditor = ({
       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__ */ jsx(Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(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__ */ jsx(Tooltip, { title: "Bold", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleBold().run(),
-          color: editor.isActive("bold") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("bold") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatBoldIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Italic", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleItalic().run(),
-          color: editor.isActive("italic") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("italic") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatItalicIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Underline", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleUnderline().run(),
-          color: editor.isActive("underline") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("underline") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatUnderlinedIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Strike", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleStrike().run(),
-          color: editor.isActive("strike") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("strike") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(StrikethroughSIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Bullet List", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleBulletList().run(),
-          color: editor.isActive("bulletList") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("bulletList") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatListBulletedIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Numbered List", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().toggleOrderedList().run(),
-          color: editor.isActive("orderedList") ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive("orderedList") ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatListNumberedIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("left").run(),
-          color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatAlignLeftIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("center").run(),
-          color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatAlignCenterIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          onClick: () => editor.chain().focus().setTextAlign("right").run(),
-          color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
-          sx: {
-            ...buttonSx,
-            ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
-          },
-          children: /* @__PURE__ */ jsx(FormatAlignRightIcon, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Heading 1", children: /* @__PURE__ */ jsx(
-        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__ */ jsx(TitleIcon, { sx: { fontSize: "1rem" } })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsxs(
-        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__ */ jsx(TitleIcon, { sx: { fontSize: "0.85rem" } }),
-            /* @__PURE__ */ jsx(UndoIcon, {})
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Tooltip, { title: "Redo", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsx(RedoIcon, {}) }) })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      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__ */ jsx(Tooltip, { title: "Bold", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleBold().run(),
+              color: editor.isActive("bold") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("bold") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatBoldIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Italic", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleItalic().run(),
+              color: editor.isActive("italic") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("italic") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatItalicIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Underline", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleUnderline().run(),
+              color: editor.isActive("underline") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("underline") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatUnderlinedIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Strike", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleStrike().run(),
+              color: editor.isActive("strike") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("strike") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(StrikethroughSIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Bullet List", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              color: editor.isActive("bulletList") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("bulletList") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatListBulletedIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Numbered List", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              color: editor.isActive("orderedList") ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive("orderedList") ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatListNumberedIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Align Left", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("left").run(),
+              color: editor.isActive({ textAlign: "left" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "left" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatAlignLeftIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Align Center", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("center").run(),
+              color: editor.isActive({ textAlign: "center" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "center" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatAlignCenterIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Align Right", children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: () => editor.chain().focus().setTextAlign("right").run(),
+              color: editor.isActive({ textAlign: "right" }) ? "primary" : "default",
+              sx: {
+                ...buttonSx,
+                ...editor.isActive({ textAlign: "right" }) ? activeButtonSx : {}
+              },
+              children: /* @__PURE__ */ jsx(FormatAlignRightIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Heading 1", children: /* @__PURE__ */ jsx(
+            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__ */ jsx(TitleIcon, { sx: { fontSize: "1rem" } })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Heading 2", children: /* @__PURE__ */ jsx(
+            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__ */ jsx(TitleIcon, { sx: { fontSize: "0.85rem" } })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Undo", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => editor.chain().focus().undo().run(), children: /* @__PURE__ */ jsx(UndoIcon, {}) }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Redo", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => editor.chain().focus().redo().run(), children: /* @__PURE__ */ jsx(RedoIcon, {}) }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx(
       Box,
       {
@@ -13027,7 +13041,9 @@ function MultiFilePreview({
     );
   }) });
 }
-function SingleFilePreview({ file }) {
+function SingleFilePreview({
+  file
+}) {
   if (!file) {
     return null;
   }
@@ -13677,7 +13693,13 @@ function Upload({
   sx,
   ...other
 }) {
-  const { getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragReject,
+    fileRejections
+  } = useDropzone({
     multiple,
     disabled,
     ...other
@@ -13746,9 +13768,25 @@ function Upload({
       }
     ),
     hasFiles === true && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { sx: { my: 3 }, children: /* @__PURE__ */ jsx(MultiFilePreview, { files, thumbnail, onRemove }) }),
+      /* @__PURE__ */ jsx(Box, { sx: { my: 3 }, children: /* @__PURE__ */ jsx(
+        MultiFilePreview,
+        {
+          files,
+          thumbnail,
+          onRemove
+        }
+      ) }),
       /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-end", spacing: 1.5, children: [
-        onRemoveAll && /* @__PURE__ */ jsx(Button, { color: "inherit", variant: "outlined", size: "small", onClick: onRemoveAll, children: t("Remove all") }),
+        onRemoveAll && /* @__PURE__ */ jsx(
+          Button,
+          {
+            color: "inherit",
+            variant: "outlined",
+            size: "small",
+            onClick: onRemoveAll,
+            children: t("Remove all")
+          }
+        ),
         onUpload && /* @__PURE__ */ jsx(Button, { size: "small", variant: "contained", onClick: onUpload, children: t("Upload files") })
       ] })
     ] })
@@ -13813,17 +13851,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 } = useFormikContext();
   const fieldError = _19.get(errors, name);
   const isTouched = _19.get(touched, name);
@@ -13833,43 +13862,16 @@ var AppUploadFile = ({
   } else if (!((_b = rest.multiple) != null ? _b : false) && _19.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__ */ jsxs(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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ 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;
@@ -13882,7 +13884,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;
@@ -13897,57 +13899,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.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.isEqual(e, file.file);
+            }
+            return !_19.isEqual(e, file);
+          });
+          setFieldValue(name, afterFilter, true);
         }
       }
     ),
     Boolean(fieldError) && Boolean(isTouched) && /* @__PURE__ */ jsx(
       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__ */ jsxs(
-      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__ */ jsxs(Typography, { variant: "caption", display: "block", gutterBottom: true, children: [
+      "Maximum ",
+      rest.maxFiles,
+      " file allowed"
+    ] })
   ] });
 };
 var AppUploadFile_default = AppUploadFile;