@availity/mui-file-selector 1.7.1 → 1.8.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.8.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.7.1...@availity/mui-file-selector@1.8.0) (2025-06-16)
+
+
+### Features
+
+* **mui-file-selector:** add maxTotalSize check to FileSelector ([03f78d6](https://github.com/Availity/element/commit/03f78d674243a76cc6d3e65a20b6e8ce3a46b8ca))
+* **mui-file-selector:** add maxTotalSize check to FileSelector ([802e2ae](https://github.com/Availity/element/commit/802e2ae502aa8727037e2998849acf01a6ea0382))
+* **mui-file-selector:** add maxTotalSize check to FileSelector2 ([ccd0cfa](https://github.com/Availity/element/commit/ccd0cfa95610d6e354402a3fa698b63b6659644c))
+
+
+### Bug Fixes
+
+* **mui-file-selector:** ensure only the maximum amount of files are uploaded ([5d80d2b](https://github.com/Availity/element/commit/5d80d2b046ea928ea432d7f269d1bfc99dd43782))
+
 ## [1.7.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.7.0...@availity/mui-file-selector@1.7.1) (2025-05-30)
 
 

package/dist/index.d.mts

@@ -54,6 +54,10 @@ type DropzoneProps = {
      * Maximum size of each file in bytes
      */
     maxSize?: number;
+    /**
+     * Maximum size of total upload in bytes
+     */
+    maxTotalSize?: number;
     /**
      * Whether multiple file selection is allowed
      */
@@ -88,7 +92,7 @@ type DropzoneProps = {
     validator?: (file: File) => FileError | FileError[] | null;
 };
 declare const DropzoneContainer: typeof MuiBox;
-declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
 type Dropzone2Props = DropzoneProps & {
     uploadOptions: UploadOptions;
@@ -101,7 +105,7 @@ type Dropzone2Props = DropzoneProps & {
  * `<Dropzone2 />` adds the `uploadOptions` prop that previously existed on
  * `<FileSelector />`.
  */
-declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
+declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
 
 type ErrorAlertProps = {
     /**
@@ -268,6 +272,10 @@ type FileSelectorProps = {
      * Overrides the standard file size message
      */
     customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard total upload size message
+     */
+    customTotalSizeMessage?: React.ReactNode;
     /**
      * Overrides the standard file types message
      */
@@ -307,6 +315,11 @@ type FileSelectorProps = {
      * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
      */
     maxSize: number;
+    /**
+     * Maximum size allowed for total upload in bytes
+     * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
+     */
+    maxTotalSize?: number;
     /**
      * Whether multiple file selection is allowed
      * @default true
@@ -347,7 +360,7 @@ type FileSelectorProps = {
      */
     disableRemove?: boolean;
 };
-declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
+declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
 type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptions'> & {
     onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
@@ -361,7 +374,7 @@ type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptio
  * `<FileSelector2 />` removes the reliance on `@tanstack/react-query`. The
  * `Upload` object can now be accessed from the form state.
  */
-declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
+declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
 
 type FileTypesMessageProps = {
     /**
@@ -372,6 +385,10 @@ type FileTypesMessageProps = {
      * Overrides the standard file size message
      */
     customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard total upload size message
+     */
+    customTotalSizeMessage?: React.ReactNode;
     /**
      * Overrides the standard file types message
      */
@@ -380,9 +397,13 @@ type FileTypesMessageProps = {
      * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
      */
     maxFileSize?: number;
+    /**
+     * Maximum size of the total upload in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
+     */
+    maxTotalSize?: number;
     variant?: 'caption' | 'body2';
 };
-declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTypesMessage, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
+declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTotalSizeMessage, customTypesMessage, maxFileSize, maxTotalSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
 
 type HeaderMessageProps = {
     /**
@@ -390,11 +411,15 @@ type HeaderMessageProps = {
      */
     maxFiles: number;
     /**
-     * Maximum combined total size of all files
+     * Maximum size of each file
      */
     maxSize: number;
+    /**
+     * Maximum combined total size of all files
+     */
+    maxTotalSize?: number;
 };
-declare const HeaderMessage: ({ maxFiles, maxSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
+declare const HeaderMessage: ({ maxFiles, maxSize, maxTotalSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
 
 type UploadProgressBarProps = {
     /**

package/dist/index.d.ts

@@ -54,6 +54,10 @@ type DropzoneProps = {
      * Maximum size of each file in bytes
      */
     maxSize?: number;
+    /**
+     * Maximum size of total upload in bytes
+     */
+    maxTotalSize?: number;
     /**
      * Whether multiple file selection is allowed
      */
@@ -88,7 +92,7 @@ type DropzoneProps = {
     validator?: (file: File) => FileError | FileError[] | null;
 };
 declare const DropzoneContainer: typeof MuiBox;
-declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
+declare const Dropzone: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, validator, }: DropzoneProps) => react_jsx_runtime.JSX.Element;
 
 type Dropzone2Props = DropzoneProps & {
     uploadOptions: UploadOptions;
@@ -101,7 +105,7 @@ type Dropzone2Props = DropzoneProps & {
  * `<Dropzone2 />` adds the `uploadOptions` prop that previously existed on
  * `<FileSelector />`.
  */
-declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
+declare const Dropzone2: ({ allowedFileTypes, disabled, enableDropArea, maxFiles, maxSize, maxTotalSize, multiple, name, onChange, onClick, onDrop, setFileRejections, setTotalSize, uploadOptions, validator, }: Dropzone2Props) => react_jsx_runtime.JSX.Element;
 
 type ErrorAlertProps = {
     /**
@@ -268,6 +272,10 @@ type FileSelectorProps = {
      * Overrides the standard file size message
      */
     customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard total upload size message
+     */
+    customTotalSizeMessage?: React.ReactNode;
     /**
      * Overrides the standard file types message
      */
@@ -307,6 +315,11 @@ type FileSelectorProps = {
      * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
      */
     maxSize: number;
+    /**
+     * Maximum size allowed for total upload in bytes
+     * Use Kibi or Mibibytes. eg: 1kb = 1024 bytes; 1mb = 1024kb
+     */
+    maxTotalSize?: number;
     /**
      * Whether multiple file selection is allowed
      * @default true
@@ -347,7 +360,7 @@ type FileSelectorProps = {
      */
     disableRemove?: boolean;
 };
-declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
+declare const FileSelector: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, queryOptions, uploadOptions, validator, disableRemove, }: FileSelectorProps) => react_jsx_runtime.JSX.Element;
 
 type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptions'> & {
     onUploadRemove?: (uploads: Upload[], removedUploadId: string) => void;
@@ -361,7 +374,7 @@ type FileSelector2Props = Omit<FileSelectorProps, 'onUploadRemove' | 'queryOptio
  * `<FileSelector2 />` removes the reliance on `@tanstack/react-query`. The
  * `Upload` object can now be accessed from the form state.
  */
-declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
+declare const FileSelector2: ({ name, allowedFileNameCharacters, allowedFileTypes, bucketId, clientId, children, customSizeMessage, customTotalSizeMessage, customTypesMessage, customerId, customFileRow, disabled, enableDropArea, endpoint, isCloud, label, maxFiles, maxSize, maxTotalSize, multiple, onChange, onDrop, onUploadRemove, uploadOptions, validator, disableRemove, }: FileSelector2Props) => react_jsx_runtime.JSX.Element;
 
 type FileTypesMessageProps = {
     /**
@@ -372,6 +385,10 @@ type FileTypesMessageProps = {
      * Overrides the standard file size message
      */
     customSizeMessage?: React.ReactNode;
+    /**
+     * Overrides the standard total upload size message
+     */
+    customTotalSizeMessage?: React.ReactNode;
     /**
      * Overrides the standard file types message
      */
@@ -380,9 +397,13 @@ type FileTypesMessageProps = {
      * Maximum size per file in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
      */
     maxFileSize?: number;
+    /**
+     * Maximum size of the total upload in bytes. This will be formatted. eg: 1024 * 20 = 20 KB
+     */
+    maxTotalSize?: number;
     variant?: 'caption' | 'body2';
 };
-declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTypesMessage, maxFileSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
+declare const FileTypesMessage: ({ allowedFileTypes, customSizeMessage, customTotalSizeMessage, customTypesMessage, maxFileSize, maxTotalSize, variant, }: FileTypesMessageProps) => react_jsx_runtime.JSX.Element;
 
 type HeaderMessageProps = {
     /**
@@ -390,11 +411,15 @@ type HeaderMessageProps = {
      */
     maxFiles: number;
     /**
-     * Maximum combined total size of all files
+     * Maximum size of each file
      */
     maxSize: number;
+    /**
+     * Maximum combined total size of all files
+     */
+    maxTotalSize?: number;
 };
-declare const HeaderMessage: ({ maxFiles, maxSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
+declare const HeaderMessage: ({ maxFiles, maxSize, maxTotalSize }: HeaderMessageProps) => react_jsx_runtime.JSX.Element;
 
 type UploadProgressBarProps = {
     /**

package/dist/index.js

@@ -108,7 +108,7 @@ var import_styles = require("@mui/material/styles");
 var import_react_dropzone = require("react-dropzone");
 var import_react_hook_form2 = require("react-hook-form");
 var import_mui_divider = require("@availity/mui-divider");
-var import_mui_icon = require("@availity/mui-icon");
+var import_mui_icon2 = require("@availity/mui-icon");
 var import_mui_layout = require("@availity/mui-layout");
 var import_mui_typography = require("@availity/mui-typography");
 
@@ -166,6 +166,55 @@ var FilePickerBtn = (_a) => {
   ] });
 };
 
+// src/lib/util.ts
+var import_mui_icon = require("@availity/mui-icon");
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+var FILE_EXT_ICONS = {
+  png: import_mui_icon.FileImageIcon,
+  jpg: import_mui_icon.FileImageIcon,
+  jpeg: import_mui_icon.FileImageIcon,
+  gif: import_mui_icon.FileImageIcon,
+  csv: import_mui_icon.FileCsvIcon,
+  ppt: import_mui_icon.FilePowerpointIcon,
+  pptx: import_mui_icon.FilePowerpointIcon,
+  xls: import_mui_icon.FileExcelIcon,
+  xlsx: import_mui_icon.FileExcelIcon,
+  doc: import_mui_icon.FileWordIcon,
+  docx: import_mui_icon.FileWordIcon,
+  txt: import_mui_icon.FileLinesIcon,
+  text: import_mui_icon.FileLinesIcon,
+  zip: import_mui_icon.FileArchiveIcon,
+  "7zip": import_mui_icon.FileArchiveIcon,
+  xml: import_mui_icon.FileCodeIcon,
+  html: import_mui_icon.FileCodeIcon,
+  pdf: import_mui_icon.FilePdfIcon
+};
+var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
+var getFileExtension = (fileName) => {
+  var _a;
+  return ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+};
+var getFileExtIcon = (fileName) => {
+  const ext = getFileExtension(fileName);
+  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : import_mui_icon.FileIcon;
+};
+var dedupeErrors = (errors) => {
+  const dedupedErrors = errors.reduce((acc, error) => {
+    if (!acc.find((err) => err.code === error.code)) {
+      acc.push(error);
+    }
+    return acc;
+  }, []);
+  return dedupedErrors;
+};
+
 // src/lib/Dropzone.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var outerBoxStyles = {
@@ -205,6 +254,7 @@ var Dropzone = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -257,7 +307,48 @@ var Dropzone = ({
       }
       setTotalSize((prev) => prev + newSize);
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
-      setValue(name, previous.concat(acceptedFiles));
+      if (maxTotalSize) {
+        const currentTotalSize = previous.reduce((sum, file) => sum + file.size, 0);
+        let newSize2 = 0;
+        const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
+        let sizeCounter = 0;
+        const cutoffIndex = acceptedFiles.findIndex((file) => {
+          sizeCounter += file.size;
+          return sizeCounter > availableSize;
+        });
+        if (cutoffIndex !== -1) {
+          const filesToAdd2 = acceptedFiles.slice(0, cutoffIndex === 0 ? 0 : cutoffIndex);
+          fileRejections.push({
+            file: acceptedFiles[cutoffIndex],
+            errors: [
+              {
+                code: "upload-too-large",
+                message: `Total upload size exceeds the limit of ${formatBytes(maxTotalSize)}.`
+              }
+            ],
+            id: counter.increment()
+          });
+          acceptedFiles = filesToAdd2;
+        }
+        newSize2 = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
+        setTotalSize((prev) => prev + newSize2);
+      }
+      const remainingSlots = maxFiles ? Math.max(0, maxFiles - previous.length) : acceptedFiles.length;
+      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
+      setValue(name, previous.concat(filesToAdd));
+      if (maxFiles && acceptedFiles.length > remainingSlots) {
+        fileRejections.push({
+          file: acceptedFiles[remainingSlots],
+          // Use the first excess file
+          errors: [
+            {
+              code: "too-many-files",
+              message: `Too many files. You may only upload ${maxFiles} file(s).`
+            }
+          ],
+          id: counter.increment()
+        });
+      }
       if (fileRejections.length > 0) {
         const TOO_MANY_FILES_CODE = "too-many-files";
         let hasTooManyFiles = false;
@@ -317,7 +408,7 @@ var Dropzone = ({
   };
   const hasFiles = getFieldValue().length > 0;
   return enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_layout.Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_divider.Divider, { flexItem: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_typography.Typography, { variant: "subtitle2", children: "OR" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -343,7 +434,7 @@ var Dropzone = ({
       onClick: handleOnClick,
       inputProps,
       onChange: handleOnChange,
-      startIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon.PlusIcon, {}),
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_icon2.PlusIcon, {}),
       children: hasFiles ? "Add More Files" : "Add File(s)"
     }
   );
@@ -358,57 +449,6 @@ var import_mui_icon3 = require("@availity/mui-icon");
 var import_mui_layout2 = require("@availity/mui-layout");
 var import_mui_typography2 = require("@availity/mui-typography");
 var import_upload_core = __toESM(require("@availity/upload-core"));
-
-// src/lib/util.ts
-var import_mui_icon2 = require("@availity/mui-icon");
-function formatBytes(bytes, decimals = 2) {
-  if (!+bytes) return "0 Bytes";
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-var FILE_EXT_ICONS = {
-  png: import_mui_icon2.FileImageIcon,
-  jpg: import_mui_icon2.FileImageIcon,
-  jpeg: import_mui_icon2.FileImageIcon,
-  gif: import_mui_icon2.FileImageIcon,
-  csv: import_mui_icon2.FileCsvIcon,
-  ppt: import_mui_icon2.FilePowerpointIcon,
-  pptx: import_mui_icon2.FilePowerpointIcon,
-  xls: import_mui_icon2.FileExcelIcon,
-  xlsx: import_mui_icon2.FileExcelIcon,
-  doc: import_mui_icon2.FileWordIcon,
-  docx: import_mui_icon2.FileWordIcon,
-  txt: import_mui_icon2.FileLinesIcon,
-  text: import_mui_icon2.FileLinesIcon,
-  zip: import_mui_icon2.FileArchiveIcon,
-  "7zip": import_mui_icon2.FileArchiveIcon,
-  xml: import_mui_icon2.FileCodeIcon,
-  html: import_mui_icon2.FileCodeIcon,
-  pdf: import_mui_icon2.FilePdfIcon
-};
-var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
-var getFileExtension = (fileName) => {
-  var _a;
-  return ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-};
-var getFileExtIcon = (fileName) => {
-  const ext = getFileExtension(fileName);
-  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : import_mui_icon2.FileIcon;
-};
-var dedupeErrors = (errors) => {
-  const dedupedErrors = errors.reduce((acc, error) => {
-    if (!acc.find((err) => err.code === error.code)) {
-      acc.push(error);
-    }
-    return acc;
-  }, []);
-  return dedupedErrors;
-};
-
-// src/lib/Dropzone2.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var counter2 = createCounter();
 function startUpload(file, options) {
@@ -430,6 +470,7 @@ var Dropzone2 = ({
   enableDropArea = true,
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple,
   name,
   onChange,
@@ -484,8 +525,50 @@ var Dropzone2 = ({
       }
       setTotalSize((prev) => prev + newSize);
       const previous = (_a2 = watch(name)) != null ? _a2 : [];
-      const uploads = acceptedFiles.map((file) => startUpload(file, uploadOptions));
+      if (maxTotalSize) {
+        const currentTotalSize = previous.reduce((sum, upload) => sum + upload.file.size, 0);
+        console.log({ previous });
+        let newSize2 = 0;
+        const availableSize = Math.max(0, maxTotalSize - currentTotalSize);
+        let sizeCounter = 0;
+        const cutoffIndex = acceptedFiles.findIndex((file) => {
+          sizeCounter += file.size;
+          return sizeCounter > availableSize;
+        });
+        if (cutoffIndex !== -1) {
+          const filesToAdd2 = acceptedFiles.slice(0, cutoffIndex === 0 ? 0 : cutoffIndex);
+          fileRejections.push({
+            file: acceptedFiles[cutoffIndex],
+            errors: [
+              {
+                code: "upload-too-large",
+                message: `Total upload size exceeds the limit of ${formatBytes(maxTotalSize)}.`
+              }
+            ],
+            id: counter2.increment()
+          });
+          acceptedFiles = filesToAdd2;
+        }
+        newSize2 = acceptedFiles.reduce((sum, file) => sum + file.size, 0);
+        setTotalSize((prev) => prev + newSize2);
+      }
+      const remainingSlots = maxFiles ? Math.max(0, maxFiles - previous.length) : acceptedFiles.length;
+      const filesToAdd = acceptedFiles.slice(0, remainingSlots);
+      const uploads = filesToAdd.map((file) => startUpload(file, uploadOptions));
       setValue(name, previous.concat(yield Promise.all(uploads)));
+      if (maxFiles && acceptedFiles.length > remainingSlots) {
+        fileRejections.push({
+          file: acceptedFiles[remainingSlots],
+          // Use the first excess file
+          errors: [
+            {
+              code: "too-many-files",
+              message: `Too many files. You may only upload ${maxFiles} file(s).`
+            }
+          ],
+          id: counter2.increment()
+        });
+      }
       if (fileRejections.length > 0) {
         const TOO_MANY_FILES_CODE = "too-many-files";
         let hasTooManyFiles = false;
@@ -582,6 +665,7 @@ var import_mui_list = require("@availity/mui-list");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var codes = {
   "file-too-large": "File exceeds maximum size",
+  "upload-too-large": "File causes maximum total upload size to be exceeded",
   "file-invalid-type": "File has an invalid type",
   "file-too-small": "File is smaller than minimum size",
   "too-many-file": "Too many files",
@@ -1087,14 +1171,18 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 var FileTypesMessage = ({
   allowedFileTypes = [],
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   maxFileSize,
+  maxTotalSize,
   variant = "caption"
 }) => {
   const fileSizeMsg = customSizeMessage || (typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null);
+  const totalFileSizeMsg = customTotalSizeMessage || (typeof maxTotalSize === "number" ? `Maximum total upload size is ${formatBytes(maxTotalSize)}. ` : null);
   const fileTypesMsg = customTypesMessage || (allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.");
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_typography4.Typography, { variant, children: [
     fileSizeMsg,
+    totalFileSizeMsg,
     fileTypesMsg
   ] });
 };
@@ -1102,12 +1190,14 @@ var FileTypesMessage = ({
 // src/lib/HeaderMessage.tsx
 var import_mui_typography5 = require("@availity/mui-typography");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var HeaderMessage = ({ maxFiles, maxSize }) => {
+var HeaderMessage = ({ maxFiles, maxSize, maxTotalSize }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_mui_typography5.Typography, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
-    formatBytes(maxSize)
+    formatBytes(maxSize),
+    " ",
+    maxTotalSize && `and a maximum total size of ${formatBytes(maxTotalSize)}`
   ] });
 };
 
@@ -1122,6 +1212,7 @@ var FileSelector = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1132,6 +1223,7 @@ var FileSelector = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1195,6 +1287,7 @@ var FileSelector = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1208,7 +1301,9 @@ var FileSelector = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1216,11 +1311,12 @@ var FileSelector = ({
       children
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_mui_layout7.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_mui_layout7.Grid, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           FileTypesMessage,
           {
             allowedFileTypes,
+            customTotalSizeMessage,
             customSizeMessage,
             customTypesMessage,
             variant: "body2"
@@ -1237,6 +1333,7 @@ var FileSelector = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1298,6 +1395,7 @@ var FileSelector2 = ({
   clientId,
   children,
   customSizeMessage,
+  customTotalSizeMessage,
   customTypesMessage,
   customerId,
   customFileRow,
@@ -1308,6 +1406,7 @@ var FileSelector2 = ({
   label = "Upload file",
   maxFiles,
   maxSize,
+  maxTotalSize,
   multiple = true,
   onChange,
   onDrop,
@@ -1368,6 +1467,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,
@@ -1382,7 +1482,9 @@ var FileSelector2 = ({
         {
           allowedFileTypes,
           maxFileSize: maxSize,
+          maxTotalSize,
           customSizeMessage,
+          customTotalSizeMessage,
           customTypesMessage,
           variant: "caption"
         }
@@ -1390,12 +1492,13 @@ var FileSelector2 = ({
       children
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_mui_layout8.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_mui_layout8.Grid, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(HeaderMessage, { maxFiles, maxSize, maxTotalSize }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           FileTypesMessage,
           {
             allowedFileTypes,
             customSizeMessage,
+            customTotalSizeMessage,
             customTypesMessage,
             variant: "body2"
           }
@@ -1411,6 +1514,7 @@ var FileSelector2 = ({
           enableDropArea,
           maxFiles,
           maxSize,
+          maxTotalSize,
           multiple,
           onChange,
           onDrop,