@availity/mui-file-selector 1.6.6 → 1.7.1

package/dist/index.mjs

@@ -297,9 +297,15 @@ var Dropzone = ({
   );
 };
 
-// src/lib/ErrorAlert.tsx
-import { Alert, AlertTitle } from "@availity/mui-alert";
-import { List, ListItem } from "@availity/mui-list";
+// src/lib/Dropzone2.tsx
+import { useCallback as useCallback2 } from "react";
+import { useDropzone as useDropzone2 } from "react-dropzone";
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { Divider as Divider2 } from "@availity/mui-divider";
+import { CloudUploadIcon as CloudUploadIcon2, PlusIcon as PlusIcon2 } from "@availity/mui-icon";
+import { Box as Box2, Stack as Stack2 } from "@availity/mui-layout";
+import { Typography as Typography2 } from "@availity/mui-typography";
+import Upload from "@availity/upload-core";
 
 // src/lib/util.ts
 import {
@@ -343,15 +349,196 @@ var FILE_EXT_ICONS = {
   pdf: FilePdfIcon
 };
 var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
-var getFileExtIcon = (fileName) => {
+var getFileExtension = (fileName) => {
   var _a;
-  const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : FileIcon;
-  return icon;
+  return ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
+};
+var getFileExtIcon = (fileName) => {
+  const ext = getFileExtension(fileName);
+  return isValidKey(ext) ? FILE_EXT_ICONS[ext] : 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/ErrorAlert.tsx
+// src/lib/Dropzone2.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var counter2 = createCounter();
+function startUpload(file, options) {
+  return __async(this, null, function* () {
+    const _a = options, { onSuccess, onError, onProgress, onChunkComplete } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError", "onProgress", "onChunkComplete"]);
+    const upload = new Upload(file, uploadOptions);
+    yield upload.generateId();
+    if (onSuccess) upload.onSuccess.push(onSuccess);
+    if (onError) upload.onError.push(onError);
+    if (onProgress) upload.onProgress.push(onProgress);
+    if (onChunkComplete) upload.onChunkComplete.push(onChunkComplete);
+    upload.start();
+    return upload;
+  });
+}
+var Dropzone2 = ({
+  allowedFileTypes = [],
+  disabled,
+  enableDropArea = true,
+  maxFiles,
+  maxSize,
+  multiple,
+  name,
+  onChange,
+  onClick,
+  onDrop,
+  setFileRejections,
+  setTotalSize,
+  uploadOptions,
+  validator
+}) => {
+  const { getValues, setValue, watch } = useFormContext2();
+  const accept = allowedFileTypes.join(",");
+  const handleValidation = useCallback2(
+    (file) => {
+      var _a2;
+      const previous = (_a2 = watch(name)) != null ? _a2 : [];
+      const errors = [];
+      const isDuplicate = previous.some((prev) => prev.file.name === file.name);
+      if (isDuplicate) {
+        errors.push({
+          code: "duplicate-name",
+          message: "A file with this name already exists"
+        });
+      }
+      const hasMaxFiles = maxFiles && previous.length >= maxFiles;
+      if (hasMaxFiles) {
+        errors.push({
+          code: "too-many-files",
+          message: `Too many files. You may only upload ${maxFiles} file(s).`
+        });
+      }
+      if (validator) {
+        const validatorErrors = validator(file);
+        if (validatorErrors) {
+          if (Array.isArray(validatorErrors)) {
+            errors.push(...validatorErrors);
+          } else {
+            errors.push(validatorErrors);
+          }
+        }
+      }
+      return errors.length > 0 ? dedupeErrors(errors) : null;
+    },
+    [maxFiles, validator]
+  );
+  const handleOnDrop = useCallback2(
+    (acceptedFiles, fileRejections, event) => __async(void 0, null, function* () {
+      var _a2;
+      let newSize = 0;
+      for (const file of acceptedFiles) {
+        newSize += file.size;
+      }
+      setTotalSize((prev) => prev + newSize);
+      const previous = (_a2 = watch(name)) != null ? _a2 : [];
+      const uploads = acceptedFiles.map((file) => startUpload(file, uploadOptions));
+      setValue(name, previous.concat(yield Promise.all(uploads)));
+      if (fileRejections.length > 0) {
+        const TOO_MANY_FILES_CODE = "too-many-files";
+        let hasTooManyFiles = false;
+        fileRejections = fileRejections.reduce(
+          (acc, rejection) => {
+            const isTooManyFiles = rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE);
+            if (isTooManyFiles) {
+              if (!hasTooManyFiles) {
+                hasTooManyFiles = true;
+                acc.push(__spreadProps(__spreadValues({}, rejection), {
+                  id: counter2.increment()
+                }));
+              }
+            } else {
+              acc.push(__spreadProps(__spreadValues({}, rejection), {
+                id: counter2.increment()
+              }));
+            }
+            return acc;
+          },
+          []
+        );
+      }
+      if (setFileRejections) setFileRejections(fileRejections);
+      if (onDrop) onDrop(acceptedFiles, fileRejections, event);
+    }),
+    [setFileRejections]
+  );
+  const { getRootProps, getInputProps } = useDropzone2({
+    onDrop: handleOnDrop,
+    maxSize,
+    maxFiles,
+    disabled,
+    multiple,
+    accept,
+    validator: handleValidation
+  });
+  const inputProps = getInputProps({
+    multiple,
+    accept,
+    onChange
+  });
+  const _a = getRootProps(), { role, tabIndex } = _a, rootProps = __objRest(_a, ["role", "tabIndex"]);
+  const handleOnChange = (event) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(event);
+    }
+  };
+  const handleOnClick = (event) => {
+    if (!enableDropArea && rootProps.onClick) rootProps.onClick(event);
+    if (onClick) onClick;
+  };
+  const getFieldValue = () => {
+    const field = getValues();
+    return field[name] || [];
+  };
+  const hasFiles = getFieldValue().length > 0;
+  return enableDropArea ? /* @__PURE__ */ jsx3(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ jsx3(Box2, { sx: innerBoxStyles, children: /* @__PURE__ */ jsx3(Stack2, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(CloudUploadIcon2, { fontSize: "xlarge", color: "secondary" }),
+    /* @__PURE__ */ jsx3(Typography2, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
+    /* @__PURE__ */ jsx3(Divider2, { flexItem: true, children: /* @__PURE__ */ jsx3(Typography2, { variant: "subtitle2", children: "OR" }) }),
+    /* @__PURE__ */ jsx3(
+      FilePickerBtn,
+      {
+        name,
+        color: "primary",
+        disabled,
+        maxSize,
+        onClick,
+        inputProps,
+        onChange: handleOnChange,
+        children: "Browse Files"
+      }
+    )
+  ] }) }) }) })) : /* @__PURE__ */ jsx3(
+    FilePickerBtn,
+    {
+      name,
+      color: "tertiary",
+      disabled,
+      maxSize,
+      onClick: handleOnClick,
+      inputProps,
+      onChange: handleOnChange,
+      startIcon: /* @__PURE__ */ jsx3(PlusIcon2, {}),
+      children: hasFiles ? "Add More Files" : "Add File(s)"
+    }
+  );
+};
+
+// src/lib/ErrorAlert.tsx
+import { Alert, AlertTitle } from "@availity/mui-alert";
+import { List, ListItem } from "@availity/mui-list";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var codes = {
   "file-too-large": "File exceeds maximum size",
   "file-invalid-type": "File has an invalid type",
@@ -368,14 +555,14 @@ var formatFileTooLarge = (message) => {
 };
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
   if (errors.length === 0) return null;
-  return /* @__PURE__ */ jsx3(Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsxs3(AlertTitle, { children: [
+  return /* @__PURE__ */ jsx4(Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsxs4(AlertTitle, { children: [
       "There were ",
       errors.length,
       " error(s) found when uploading ",
       fileName
     ] }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       List,
       {
         sx: {
@@ -387,14 +574,14 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
           }
         },
         disablePadding: true,
-        children: /* @__PURE__ */ jsx3(Fragment3, { children: errors.map((error) => {
+        children: /* @__PURE__ */ jsx4(Fragment4, { children: errors.map((error) => {
           const message = error.code === "file-too-large" ? formatFileTooLarge(error.message) : error.message;
-          return /* @__PURE__ */ jsx3(ListItem, { disableGutters: true, disablePadding: true, divider: false, children: message }, `${id}-${error.code}`);
+          return /* @__PURE__ */ jsx4(ListItem, { disableGutters: true, disablePadding: true, divider: false, children: message }, `${id}-${error.code}`);
         }) })
       }
     )
-  ] }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
-    /* @__PURE__ */ jsxs3(AlertTitle, { children: [
+  ] }) : /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsxs4(AlertTitle, { children: [
       codes[errors[0].code] || "Error",
       ": ",
       fileName
@@ -408,7 +595,7 @@ import { List as List2, ListItem as ListItem2, ListItemText as ListItemText2, Li
 import { IconButton as IconButton3 } from "@availity/mui-button";
 import { DeleteIcon } from "@availity/mui-icon";
 import { Grid as Grid2 } from "@availity/mui-layout";
-import { Divider as Divider2 } from "@availity/mui-divider";
+import { Divider as Divider3 } from "@availity/mui-divider";
 
 // src/lib/UploadProgressBar.tsx
 import { useState as useState2 } from "react";
@@ -419,8 +606,8 @@ import MuiDialog from "@mui/material/Dialog";
 import { styled as styled2 } from "@mui/material/styles";
 import { IconButton } from "@availity/mui-button";
 import { CloseIcon } from "@availity/mui-icon";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var CloseButton = (args) => /* @__PURE__ */ jsx4(IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ jsx4(CloseIcon, { fontSize: "xsmall" }) }));
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var CloseButton = (args) => /* @__PURE__ */ jsx5(IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ jsx5(CloseIcon, { fontSize: "xsmall" }) }));
 var CloseButtonSlot = styled2(CloseButton, {
   name: "MuiDialog",
   slot: "AvCloseButton",
@@ -435,37 +622,37 @@ var CloseButtonSlot = styled2(CloseButton, {
 });
 var Dialog = (_a) => {
   var _b = _a, { children, closeButton = true, onClose } = _b, rest = __objRest(_b, ["children", "closeButton", "onClose"]);
-  return /* @__PURE__ */ jsxs4(MuiDialog, __spreadProps(__spreadValues({ onClose }, rest), { children: [
-    closeButton ? /* @__PURE__ */ jsx4(CloseButtonSlot, { onClick: onClose }) : null,
+  return /* @__PURE__ */ jsxs5(MuiDialog, __spreadProps(__spreadValues({ onClose }, rest), { children: [
+    closeButton ? /* @__PURE__ */ jsx5(CloseButtonSlot, { onClick: onClose }) : null,
     children
   ] }));
 };
 
 // ../dialog/src/lib/DialogActions.tsx
 import MuiDialogActions from "@mui/material/DialogActions";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var DialogActions = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx5(MuiDialogActions, __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ jsx6(MuiDialogActions, __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // ../dialog/src/lib/DialogContent.tsx
 import MuiDialogContent from "@mui/material/DialogContent";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var DialogContent = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx6(MuiDialogContent, __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ jsx7(MuiDialogContent, __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // ../dialog/src/lib/DialogContentText.tsx
 import MuiDialogContentText from "@mui/material/DialogContentText";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 
 // ../dialog/src/lib/DialogTitle.tsx
 import MuiDialogTitle from "@mui/material/DialogTitle";
 import { AlertIcons } from "@availity/mui-alert";
 import { styled as styled3 } from "@mui/material/styles";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var AlertIcon = styled3("div", {
   name: "MuiDialogTitle",
   slot: "AvIcon",
@@ -478,8 +665,8 @@ var AlertIcon = styled3("div", {
 });
 var DialogTitle = (_a) => {
   var _b = _a, { children, component = "h2", icon, variant = "h5" } = _b, rest = __objRest(_b, ["children", "component", "icon", "variant"]);
-  return /* @__PURE__ */ jsxs5(MuiDialogTitle, __spreadProps(__spreadValues({ component, variant }, rest), { children: [
-    icon ? /* @__PURE__ */ jsx8(AlertIcon, { children: AlertIcons[icon] }) : null,
+  return /* @__PURE__ */ jsxs6(MuiDialogTitle, __spreadProps(__spreadValues({ component, variant }, rest), { children: [
+    icon ? /* @__PURE__ */ jsx9(AlertIcon, { children: AlertIcons[icon] }) : null,
     children
   ] }));
 };
@@ -487,7 +674,7 @@ var DialogTitle = (_a) => {
 // src/lib/UploadProgressBar.tsx
 import { InputAdornment } from "@availity/mui-form-utils";
 import { EyeIcon, EyeSlashIcon, WarningTriangleIcon } from "@availity/mui-icon";
-import { Box as Box2 } from "@availity/mui-layout";
+import { Box as Box3 } from "@availity/mui-layout";
 import { ListItemText } from "@availity/mui-list";
 import { LinearProgress } from "@availity/mui-progress";
 
@@ -502,8 +689,8 @@ import {
   SelectPropOverrides
 } from "@availity/mui-form-utils";
 import { Grid } from "@availity/mui-layout";
-import { Typography as Typography2 } from "@availity/mui-typography";
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Typography as Typography3 } from "@availity/mui-typography";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var TextFieldFormHelperText = (_a) => {
   var _b = _a, {
     charCount,
@@ -517,16 +704,16 @@ var TextFieldFormHelperText = (_a) => {
     "showCharacterCount"
   ]);
   if (showCharacterCount) {
-    return /* @__PURE__ */ jsxs6(Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
-      /* @__PURE__ */ jsx9(FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { sx: { marginRight: "12px" }, children: helperText })),
-      /* @__PURE__ */ jsxs6(Typography2, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
-        /* @__PURE__ */ jsx9(Typography2, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
+    return /* @__PURE__ */ jsxs7(Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
+      /* @__PURE__ */ jsx10(FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { sx: { marginRight: "12px" }, children: helperText })),
+      /* @__PURE__ */ jsxs7(Typography3, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
+        /* @__PURE__ */ jsx10(Typography3, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
         "/",
         maxLength
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsx9(FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
+  return /* @__PURE__ */ jsx10(FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
 };
 var TextField = forwardRef((props, ref) => {
   var _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
@@ -558,14 +745,14 @@ var TextField = forwardRef((props, ref) => {
   const maxLength = (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength);
   const allReadOnly = (InputProps2 == null ? void 0 : InputProps2.readOnly) || (inputProps == null ? void 0 : inputProps.readOnly) || ((_e = (_d = rest.slotProps) == null ? void 0 : _d.htmlInput) == null ? void 0 : _e.readOnly) || ((_g = (_f = rest.slotProps) == null ? void 0 : _f.input) == null ? void 0 : _g.readOnly);
   const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     MuiTextField,
     __spreadProps(__spreadValues({}, rest), {
       onChange: (event) => {
         setCharCount(event.target.value.length);
         if (rest.onChange) rest.onChange(event);
       },
-      helperText: helperText || /* @__PURE__ */ jsx9(Fragment4, {}),
+      helperText: helperText || /* @__PURE__ */ jsx10(Fragment5, {}),
       slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
         input: resolvedProps(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_h = rest.slotProps) == null ? void 0 : _h.input), {
@@ -598,7 +785,7 @@ var TextField = forwardRef((props, ref) => {
 });
 
 // src/lib/UploadProgressBar.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var ERROR_MAPPINGS = [
   {
     pattern: /but has an extension for/i,
@@ -647,24 +834,24 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return errorMessage ? /* @__PURE__ */ jsxs7(Box2, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
-    /* @__PURE__ */ jsxs7(
+  return errorMessage ? /* @__PURE__ */ jsxs8(Box3, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
+    /* @__PURE__ */ jsxs8(
       ListItemText,
       {
         slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } },
         sx: { wordWrap: "break-word" },
         children: [
-          /* @__PURE__ */ jsx10(WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
+          /* @__PURE__ */ jsx11(WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
           " ",
           errorMessage
         ]
       }
     ),
-    upload.status === "encrypted" && /* @__PURE__ */ jsxs7("div", { className: "pwRequired", children: [
-      /* @__PURE__ */ jsx10(Button2, { color: "secondary", size: "small", onClick: toggleModal, children: "Enter Password" }),
-      /* @__PURE__ */ jsx10(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ jsxs7("form", { onSubmit: verifyPassword, children: [
-        /* @__PURE__ */ jsx10(DialogTitle, { children: "Enter Password" }),
-        /* @__PURE__ */ jsx10(DialogContent, { children: /* @__PURE__ */ jsx10(
+    upload.status === "encrypted" && /* @__PURE__ */ jsxs8("div", { className: "pwRequired", children: [
+      /* @__PURE__ */ jsx11(Button2, { color: "secondary", size: "small", onClick: toggleModal, children: "Enter Password" }),
+      /* @__PURE__ */ jsx11(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ jsxs8("form", { onSubmit: verifyPassword, children: [
+        /* @__PURE__ */ jsx11(DialogTitle, { children: "Enter Password" }),
+        /* @__PURE__ */ jsx11(DialogContent, { children: /* @__PURE__ */ jsx11(
           TextField,
           {
             type: showPassword ? "text" : "password",
@@ -673,31 +860,31 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
             onChange: handlePasswordChange,
             autoFocus: true,
             InputProps: {
-              endAdornment: /* @__PURE__ */ jsx10(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx10(
+              endAdornment: /* @__PURE__ */ jsx11(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx11(
                 IconButton2,
                 {
                   title: "password visibility",
                   onClick: () => setShowPassword((prev) => !prev),
                   edge: "end",
-                  children: showPassword ? /* @__PURE__ */ jsx10(EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx10(EyeSlashIcon, { fontSize: "small" })
+                  children: showPassword ? /* @__PURE__ */ jsx11(EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx11(EyeSlashIcon, { fontSize: "small" })
                 }
               ) })
             }
           }
         ) }),
-        /* @__PURE__ */ jsx10(DialogActions, { children: /* @__PURE__ */ jsx10(Button2, { color: "primary", type: "submit", children: "Ok" }) })
+        /* @__PURE__ */ jsx11(DialogActions, { children: /* @__PURE__ */ jsx11(Button2, { color: "primary", type: "submit", children: "Ok" }) })
       ] }) })
     ] })
-  ] }) : /* @__PURE__ */ jsx10(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+  ] }) : /* @__PURE__ */ jsx11(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
 };
 
 // src/lib/useUploadCore.tsx
 import { useQuery } from "@tanstack/react-query";
-import Upload from "@availity/upload-core";
-function startUpload(file, options) {
+import Upload2 from "@availity/upload-core";
+function startUpload2(file, options) {
   return __async(this, null, function* () {
     const _a = options, { onSuccess, onError, onProgress, onChunkComplete } = _a, uploadOptions = __objRest(_a, ["onSuccess", "onError", "onProgress", "onChunkComplete"]);
-    const upload = new Upload(file, uploadOptions);
+    const upload = new Upload2(file, uploadOptions);
     yield upload.generateId();
     if (onSuccess) upload.onSuccess.push(onSuccess);
     if (onError) upload.onError.push(onError);
@@ -711,7 +898,7 @@ function useUploadCore(file, options, queryOptions) {
   const isQueryEnabled = !!file;
   return useQuery(__spreadValues({
     queryKey: ["upload", file.name, options],
-    queryFn: () => startUpload(file, options),
+    queryFn: () => startUpload2(file, options),
     enabled: isQueryEnabled,
     retry: false,
     refetchOnWindowFocus: false
@@ -719,7 +906,7 @@ function useUploadCore(file, options, queryOptions) {
 }
 
 // src/lib/FileList.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var FileRow = ({
   file,
   options,
@@ -731,12 +918,12 @@ var FileRow = ({
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options, queryOptions);
   if (!upload) return null;
-  if (CustomRow) return /* @__PURE__ */ jsx11(CustomRow, { upload, options, onRemoveFile });
-  return /* @__PURE__ */ jsxs8(
+  if (CustomRow) return /* @__PURE__ */ jsx12(CustomRow, { upload, options, onRemoveFile });
+  return /* @__PURE__ */ jsxs9(
     ListItem2,
     {
       disableGutters: true,
-      secondaryAction: !disableRemove && /* @__PURE__ */ jsx11(
+      secondaryAction: !disableRemove && /* @__PURE__ */ jsx12(
         IconButton3,
         {
           title: "remove file",
@@ -744,17 +931,17 @@ var FileRow = ({
           onClick: () => {
             onRemoveFile(upload.id, upload);
           },
-          children: /* @__PURE__ */ jsx11(DeleteIcon, {})
+          children: /* @__PURE__ */ jsx12(DeleteIcon, {})
         }
       ),
       children: [
-        /* @__PURE__ */ jsxs8(Grid2, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: "auto" }, children: /* @__PURE__ */ jsx11(ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ jsx11(Icon, {}) }) }),
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ jsx11(ListItemText2, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ jsx11(ListItemText2, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
-          /* @__PURE__ */ jsx11(Grid2, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ jsx11(UploadProgressBar, { upload }) })
+        /* @__PURE__ */ jsxs9(Grid2, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
+          /* @__PURE__ */ jsx12(Grid2, { size: { xs: "auto" }, children: /* @__PURE__ */ jsx12(ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ jsx12(Icon, {}) }) }),
+          /* @__PURE__ */ jsx12(Grid2, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ jsx12(ListItemText2, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ jsx12(Grid2, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ jsx12(ListItemText2, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ jsx12(Grid2, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ jsx12(UploadProgressBar, { upload }) })
         ] }),
-        /* @__PURE__ */ jsx11(Divider2, {})
+        /* @__PURE__ */ jsx12(Divider3, {})
       ]
     }
   );
@@ -768,8 +955,8 @@ var FileList = ({
   disableRemove
 }) => {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ jsx11(List2, { children: files.map((file) => {
-    return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(List2, { children: files.map((file) => {
+    return /* @__PURE__ */ jsx12(
       FileRow,
       {
         file,
@@ -784,17 +971,84 @@ var FileList = ({
   }) });
 };
 
+// src/lib/FileList2.tsx
+import { List as List3, ListItem as ListItem3, ListItemText as ListItemText3, ListItemIcon as ListItemIcon2 } from "@availity/mui-list";
+import { IconButton as IconButton4 } from "@availity/mui-button";
+import { DeleteIcon as DeleteIcon2 } from "@availity/mui-icon";
+import { Grid as Grid3 } from "@availity/mui-layout";
+import { Divider as Divider4 } from "@availity/mui-divider";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var FileRow2 = ({
+  upload,
+  options,
+  onRemoveFile,
+  customFileRow: CustomRow,
+  disableRemove = false
+}) => {
+  const Icon = getFileExtIcon(upload.file.name);
+  if (!upload) return null;
+  if (CustomRow) return /* @__PURE__ */ jsx13(CustomRow, { upload, options, onRemoveFile });
+  return /* @__PURE__ */ jsxs10(
+    ListItem3,
+    {
+      disableGutters: true,
+      secondaryAction: !disableRemove && /* @__PURE__ */ jsx13(
+        IconButton4,
+        {
+          title: "remove file",
+          edge: "end",
+          onClick: () => {
+            onRemoveFile(upload.id, upload);
+          },
+          children: /* @__PURE__ */ jsx13(DeleteIcon2, {})
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsxs10(Grid3, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
+          /* @__PURE__ */ jsx13(Grid3, { size: { xs: "auto" }, children: /* @__PURE__ */ jsx13(ListItemIcon2, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ jsx13(Icon, {}) }) }),
+          /* @__PURE__ */ jsx13(Grid3, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ jsx13(ListItemText3, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ jsx13(Grid3, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ jsx13(ListItemText3, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ jsx13(Grid3, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ jsx13(UploadProgressBar, { upload }) })
+        ] }),
+        /* @__PURE__ */ jsx13(Divider4, {})
+      ]
+    }
+  );
+};
+var FileList2 = ({
+  uploads,
+  options,
+  onRemoveFile,
+  customFileRow,
+  disableRemove
+}) => {
+  if (uploads.length === 0) return null;
+  return /* @__PURE__ */ jsx13(List3, { children: uploads.map((upload) => {
+    return /* @__PURE__ */ jsx13(
+      FileRow2,
+      {
+        upload,
+        options,
+        onRemoveFile,
+        customFileRow,
+        disableRemove
+      },
+      upload.id
+    );
+  }) });
+};
+
 // src/lib/FileSelector.tsx
 import { useState as useState3 } from "react";
-import { useFormContext as useFormContext2 } from "react-hook-form";
+import { useFormContext as useFormContext3 } from "react-hook-form";
 import { useQueryClient } from "@tanstack/react-query";
-import { Grid as Grid3 } from "@availity/mui-layout";
-import { Typography as Typography5 } from "@availity/mui-typography";
+import { Grid as Grid4 } from "@availity/mui-layout";
+import { Typography as Typography6 } from "@availity/mui-typography";
 import { Alert as Alert2, AlertTitle as AlertTitle2 } from "@availity/mui-alert";
 
 // src/lib/FileTypesMessage.tsx
-import { Typography as Typography3 } from "@availity/mui-typography";
-import { jsxs as jsxs9 } from "react/jsx-runtime";
+import { Typography as Typography4 } from "@availity/mui-typography";
+import { jsxs as jsxs11 } from "react/jsx-runtime";
 var FileTypesMessage = ({
   allowedFileTypes = [],
   customSizeMessage,
@@ -804,17 +1058,17 @@ var FileTypesMessage = ({
 }) => {
   const fileSizeMsg = customSizeMessage || (typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null);
   const fileTypesMsg = customTypesMessage || (allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.");
-  return /* @__PURE__ */ jsxs9(Typography3, { variant, children: [
+  return /* @__PURE__ */ jsxs11(Typography4, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
 };
 
 // src/lib/HeaderMessage.tsx
-import { Typography as Typography4 } from "@availity/mui-typography";
-import { jsxs as jsxs10 } from "react/jsx-runtime";
+import { Typography as Typography5 } from "@availity/mui-typography";
+import { jsxs as jsxs12 } from "react/jsx-runtime";
 var HeaderMessage = ({ maxFiles, maxSize }) => {
-  return /* @__PURE__ */ jsxs10(Typography4, { variant: "h6", children: [
+  return /* @__PURE__ */ jsxs12(Typography5, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
@@ -823,7 +1077,7 @@ var HeaderMessage = ({ maxFiles, maxSize }) => {
 };
 
 // src/lib/FileSelector.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -855,7 +1109,7 @@ var FileSelector = ({
   const [totalSize, setTotalSize] = useState3(0);
   const [fileRejections, setFileRejections] = useState3([]);
   const client = useQueryClient();
-  const formMethods = useFormContext2();
+  const formMethods = useFormContext3();
   const options = __spreadProps(__spreadValues({}, uploadOptions), {
     bucketId,
     customerId,
@@ -894,10 +1148,10 @@ var FileSelector = ({
   const otherRejections = fileRejections.filter(
     (rejection) => !rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
   );
-  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
-    enableDropArea ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
-      label ? /* @__PURE__ */ jsx12(Typography5, { marginBottom: "4px", children: label }) : null,
-      /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
+    enableDropArea ? /* @__PURE__ */ jsxs13(Fragment6, { children: [
+      label ? /* @__PURE__ */ jsx14(Typography6, { marginBottom: "4px", children: label }) : null,
+      /* @__PURE__ */ jsx14(
         Dropzone,
         {
           name,
@@ -914,7 +1168,7 @@ var FileSelector = ({
           validator
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         FileTypesMessage,
         {
           allowedFileTypes,
@@ -925,10 +1179,10 @@ var FileSelector = ({
         }
       ),
       children
-    ] }) : /* @__PURE__ */ jsxs11(Grid3, { container: true, rowSpacing: 3, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs11(Grid3, { children: [
-        /* @__PURE__ */ jsx12(HeaderMessage, { maxFiles, maxSize }),
-        /* @__PURE__ */ jsx12(
+    ] }) : /* @__PURE__ */ jsxs13(Grid4, { container: true, rowSpacing: 3, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs13(Grid4, { children: [
+        /* @__PURE__ */ jsx14(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx14(
           FileTypesMessage,
           {
             allowedFileTypes,
@@ -938,8 +1192,8 @@ var FileSelector = ({
           }
         )
       ] }),
-      children ? /* @__PURE__ */ jsx12(Grid3, { children }) : null,
-      /* @__PURE__ */ jsx12(Grid3, { children: /* @__PURE__ */ jsx12(
+      children ? /* @__PURE__ */ jsx14(Grid4, { children }) : null,
+      /* @__PURE__ */ jsx14(Grid4, { children: /* @__PURE__ */ jsx14(
         Dropzone,
         {
           name,
@@ -957,20 +1211,20 @@ var FileSelector = ({
         }
       ) })
     ] }),
-    tooManyFilesRejections.length > 0 && /* @__PURE__ */ jsxs11(
+    tooManyFilesRejections.length > 0 && /* @__PURE__ */ jsxs13(
       Alert2,
       {
         severity: "error",
         onClose: () => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id)),
         children: [
-          /* @__PURE__ */ jsx12(AlertTitle2, { children: "Items not allowed." }),
+          /* @__PURE__ */ jsx14(AlertTitle2, { children: "Items not allowed." }),
           "Too many files are selected for upload, maximum ",
           maxFiles,
           " allowed."
         ]
       }
     ),
-    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ jsx12(
+    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ jsx14(
       ErrorAlert,
       {
         errors: rejection.errors,
@@ -980,7 +1234,7 @@ var FileSelector = ({
       },
       rejection.id
     )),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       FileList,
       {
         files: files || [],
@@ -993,16 +1247,199 @@ var FileSelector = ({
     )
   ] });
 };
+
+// src/lib/FileSelector2.tsx
+import { useState as useState4 } from "react";
+import { useFormContext as useFormContext4 } from "react-hook-form";
+import { Grid as Grid5 } from "@availity/mui-layout";
+import { Typography as Typography7 } from "@availity/mui-typography";
+import { Alert as Alert3, AlertTitle as AlertTitle3 } from "@availity/mui-alert";
+import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var FileSelector2 = ({
+  name,
+  allowedFileNameCharacters,
+  allowedFileTypes = [],
+  bucketId,
+  clientId,
+  children,
+  customSizeMessage,
+  customTypesMessage,
+  customerId,
+  customFileRow,
+  disabled = false,
+  enableDropArea = true,
+  endpoint,
+  isCloud,
+  label = "Upload file",
+  maxFiles,
+  maxSize,
+  multiple = true,
+  onChange,
+  onDrop,
+  onUploadRemove,
+  uploadOptions,
+  validator,
+  disableRemove
+}) => {
+  const [totalSize, setTotalSize] = useState4(0);
+  const [fileRejections, setFileRejections] = useState4([]);
+  const formMethods = useFormContext4();
+  const options = __spreadProps(__spreadValues({}, uploadOptions), {
+    bucketId,
+    customerId,
+    clientId,
+    fileTypes: allowedFileTypes,
+    maxSize,
+    allowedFileNameCharacters
+  });
+  if (endpoint) options.endpoint = endpoint;
+  if (isCloud) options.endpoint = CLOUD_URL;
+  const handleOnRemoveFile = (uploadId, upload) => {
+    const prevFiles = formMethods.getValues(name);
+    const newFiles = prevFiles.filter((prev) => prev.file.name !== upload.file.name);
+    if (newFiles.length !== prevFiles.length) {
+      const removedFile = prevFiles.find((prev) => prev.file.name === upload.file.name);
+      try {
+        upload.abort();
+      } catch (e) {
+        console.error("Encountered an issue stopping the file upload");
+      }
+      formMethods.setValue(name, newFiles);
+      if (removedFile == null ? void 0 : removedFile.file.size) setTotalSize(totalSize - removedFile.file.size);
+      if (onUploadRemove) onUploadRemove(newFiles, uploadId);
+    }
+  };
+  const uploads = formMethods.watch(name) || [];
+  const handleRemoveRejection = (id) => {
+    const rejections = fileRejections.filter((value) => value.id !== id);
+    setFileRejections(rejections);
+  };
+  const TOO_MANY_FILES_CODE = "too-many-files";
+  const tooManyFilesRejections = fileRejections.filter(
+    (rejection) => rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+  const otherRejections = fileRejections.filter(
+    (rejection) => !rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
+  );
+  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    enableDropArea ? /* @__PURE__ */ jsxs14(Fragment7, { children: [
+      label ? /* @__PURE__ */ jsx15(Typography7, { marginBottom: "4px", children: label }) : null,
+      /* @__PURE__ */ jsx15(
+        Dropzone2,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          enableDropArea,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          onDrop,
+          setFileRejections,
+          setTotalSize,
+          uploadOptions: options,
+          validator
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        FileTypesMessage,
+        {
+          allowedFileTypes,
+          maxFileSize: maxSize,
+          customSizeMessage,
+          customTypesMessage,
+          variant: "caption"
+        }
+      ),
+      children
+    ] }) : /* @__PURE__ */ jsxs14(Grid5, { container: true, rowSpacing: 3, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs14(Grid5, { children: [
+        /* @__PURE__ */ jsx15(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx15(
+          FileTypesMessage,
+          {
+            allowedFileTypes,
+            customSizeMessage,
+            customTypesMessage,
+            variant: "body2"
+          }
+        )
+      ] }),
+      children ? /* @__PURE__ */ jsx15(Grid5, { children }) : null,
+      /* @__PURE__ */ jsx15(Grid5, { children: /* @__PURE__ */ jsx15(
+        Dropzone2,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          enableDropArea,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          onDrop,
+          setFileRejections,
+          setTotalSize,
+          uploadOptions: options,
+          validator
+        }
+      ) })
+    ] }),
+    tooManyFilesRejections.length > 0 && /* @__PURE__ */ jsxs14(
+      Alert3,
+      {
+        severity: "error",
+        onClose: () => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id)),
+        children: [
+          /* @__PURE__ */ jsx15(AlertTitle3, { children: "Items not allowed." }),
+          "Too many files are selected for upload, maximum ",
+          maxFiles,
+          " allowed."
+        ]
+      }
+    ),
+    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ jsx15(
+      ErrorAlert,
+      {
+        errors: rejection.errors,
+        fileName: rejection.file.name,
+        id: rejection.id,
+        onClose: () => handleRemoveRejection(rejection.id)
+      },
+      rejection.id
+    )),
+    /* @__PURE__ */ jsx15(
+      FileList2,
+      {
+        uploads: uploads || [],
+        options,
+        onRemoveFile: handleOnRemoveFile,
+        customFileRow,
+        disableRemove
+      }
+    )
+  ] });
+};
 export {
+  CLOUD_URL,
   Dropzone,
+  Dropzone2,
+  DropzoneContainer,
   ErrorAlert,
   FileList,
+  FileList2,
   FilePickerBtn,
   FileRow,
+  FileRow2,
   FileSelector,
+  FileSelector2,
   FileTypesMessage,
   HeaderMessage,
   UploadProgressBar,
+  createCounter,
   formatFileTooLarge,
+  innerBoxStyles,
+  outerBoxStyles,
   useUploadCore
 };