@availity/mui-file-selector 1.6.6 → 1.7.1

package/dist/index.js

@@ -79,16 +79,25 @@ var __async = (__this, __arguments, generator) => {
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CLOUD_URL: () => CLOUD_URL,
   Dropzone: () => Dropzone,
+  Dropzone2: () => Dropzone2,
+  DropzoneContainer: () => DropzoneContainer,
   ErrorAlert: () => ErrorAlert,
   FileList: () => FileList,
+  FileList2: () => FileList2,
   FilePickerBtn: () => FilePickerBtn,
   FileRow: () => FileRow,
+  FileRow2: () => FileRow2,
   FileSelector: () => FileSelector,
+  FileSelector2: () => FileSelector2,
   FileTypesMessage: () => FileTypesMessage,
   HeaderMessage: () => HeaderMessage,
   UploadProgressBar: () => UploadProgressBar,
+  createCounter: () => createCounter,
   formatFileTooLarge: () => formatFileTooLarge,
+  innerBoxStyles: () => innerBoxStyles,
+  outerBoxStyles: () => outerBoxStyles,
   useUploadCore: () => useUploadCore
 });
 module.exports = __toCommonJS(index_exports);
@@ -340,9 +349,15 @@ var Dropzone = ({
   );
 };
 
-// src/lib/ErrorAlert.tsx
-var import_mui_alert = require("@availity/mui-alert");
-var import_mui_list = require("@availity/mui-list");
+// src/lib/Dropzone2.tsx
+var import_react2 = require("react");
+var import_react_dropzone2 = require("react-dropzone");
+var import_react_hook_form3 = require("react-hook-form");
+var import_mui_divider2 = require("@availity/mui-divider");
+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");
@@ -375,15 +390,196 @@ var FILE_EXT_ICONS = {
   pdf: import_mui_icon2.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] : import_mui_icon2.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] : 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/ErrorAlert.tsx
+// src/lib/Dropzone2.tsx
 var import_jsx_runtime3 = require("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 import_upload_core.default(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 } = (0, import_react_hook_form3.useFormContext)();
+  const accept = allowedFileTypes.join(",");
+  const handleValidation = (0, import_react2.useCallback)(
+    (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 = (0, import_react2.useCallback)(
+    (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 } = (0, import_react_dropzone2.useDropzone)({
+    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__ */ (0, import_jsx_runtime3.jsx)(DropzoneContainer, __spreadProps(__spreadValues({ sx: outerBoxStyles }, rootProps), { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_layout2.Box, { sx: innerBoxStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_layout2.Stack, { spacing: 2, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_icon3.CloudUploadIcon, { fontSize: "xlarge", color: "secondary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_typography2.Typography, { variant: "subtitle2", fontWeight: "700", children: "Drag and Drop Files Here" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_divider2.Divider, { flexItem: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_typography2.Typography, { variant: "subtitle2", children: "OR" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      FilePickerBtn,
+      {
+        name,
+        color: "primary",
+        disabled,
+        maxSize,
+        onClick,
+        inputProps,
+        onChange: handleOnChange,
+        children: "Browse Files"
+      }
+    )
+  ] }) }) }) })) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FilePickerBtn,
+    {
+      name,
+      color: "tertiary",
+      disabled,
+      maxSize,
+      onClick: handleOnClick,
+      inputProps,
+      onChange: handleOnChange,
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_icon3.PlusIcon, {}),
+      children: hasFiles ? "Add More Files" : "Add File(s)"
+    }
+  );
+};
+
+// src/lib/ErrorAlert.tsx
+var import_mui_alert = require("@availity/mui-alert");
+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",
   "file-invalid-type": "File has an invalid type",
@@ -400,14 +596,14 @@ var formatFileTooLarge = (message) => {
 };
 var ErrorAlert = ({ errors, fileName, id, onClose }) => {
   if (errors.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_alert.Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_alert.Alert, { severity: "error", onClose, children: errors.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_mui_alert.AlertTitle, { children: [
       "There were ",
       errors.length,
       " error(s) found when uploading ",
       fileName
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_mui_list.List,
       {
         sx: {
@@ -419,14 +615,14 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
           }
         },
         disablePadding: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: errors.map((error) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: errors.map((error) => {
           const message = error.code === "file-too-large" ? formatFileTooLarge(error.message) : error.message;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mui_list.ListItem, { disableGutters: true, disablePadding: true, divider: false, children: message }, `${id}-${error.code}`);
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_list.ListItem, { disableGutters: true, disablePadding: true, divider: false, children: message }, `${id}-${error.code}`);
         }) })
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_mui_alert.AlertTitle, { children: [
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_mui_alert.AlertTitle, { children: [
       codes[errors[0].code] || "Error",
       ": ",
       fileName
@@ -438,21 +634,21 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
 // src/lib/FileList.tsx
 var import_mui_list3 = require("@availity/mui-list");
 var import_mui_button4 = require("@availity/mui-button");
-var import_mui_icon5 = require("@availity/mui-icon");
-var import_mui_layout4 = require("@availity/mui-layout");
-var import_mui_divider2 = require("@availity/mui-divider");
+var import_mui_icon6 = require("@availity/mui-icon");
+var import_mui_layout5 = require("@availity/mui-layout");
+var import_mui_divider3 = require("@availity/mui-divider");
 
 // src/lib/UploadProgressBar.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_mui_button3 = require("@availity/mui-button");
 
 // ../dialog/src/lib/Dialog.tsx
 var import_Dialog = __toESM(require("@mui/material/Dialog"));
 var import_styles2 = require("@mui/material/styles");
 var import_mui_button2 = require("@availity/mui-button");
-var import_mui_icon3 = require("@availity/mui-icon");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CloseButton = (args) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_button2.IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_icon3.CloseIcon, { fontSize: "xsmall" }) }));
+var import_mui_icon4 = require("@availity/mui-icon");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CloseButton = (args) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_button2.IconButton, __spreadProps(__spreadValues({ title: "Close Dialog", color: "secondary" }, args), { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon4.CloseIcon, { fontSize: "xsmall" }) }));
 var CloseButtonSlot = (0, import_styles2.styled)(CloseButton, {
   name: "MuiDialog",
   slot: "AvCloseButton",
@@ -467,37 +663,37 @@ var CloseButtonSlot = (0, import_styles2.styled)(CloseButton, {
 });
 var Dialog = (_a) => {
   var _b = _a, { children, closeButton = true, onClose } = _b, rest = __objRest(_b, ["children", "closeButton", "onClose"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Dialog.default, __spreadProps(__spreadValues({ onClose }, rest), { children: [
-    closeButton ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseButtonSlot, { onClick: onClose }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_Dialog.default, __spreadProps(__spreadValues({ onClose }, rest), { children: [
+    closeButton ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseButtonSlot, { onClick: onClose }) : null,
     children
   ] }));
 };
 
 // ../dialog/src/lib/DialogActions.tsx
 var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var DialogActions = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_DialogActions.default, __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_DialogActions.default, __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // ../dialog/src/lib/DialogContent.tsx
 var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DialogContent = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_DialogContent.default, __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_DialogContent.default, __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // ../dialog/src/lib/DialogContentText.tsx
 var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 
 // ../dialog/src/lib/DialogTitle.tsx
 var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
 var import_mui_alert2 = require("@availity/mui-alert");
 var import_styles3 = require("@mui/material/styles");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var AlertIcon = (0, import_styles3.styled)("div", {
   name: "MuiDialogTitle",
   slot: "AvIcon",
@@ -510,26 +706,26 @@ var AlertIcon = (0, import_styles3.styled)("div", {
 });
 var DialogTitle = (_a) => {
   var _b = _a, { children, component = "h2", icon, variant = "h5" } = _b, rest = __objRest(_b, ["children", "component", "icon", "variant"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_DialogTitle.default, __spreadProps(__spreadValues({ component, variant }, rest), { children: [
-    icon ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AlertIcon, { children: import_mui_alert2.AlertIcons[icon] }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogTitle.default, __spreadProps(__spreadValues({ component, variant }, rest), { children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AlertIcon, { children: import_mui_alert2.AlertIcons[icon] }) : null,
     children
   ] }));
 };
 
 // src/lib/UploadProgressBar.tsx
 var import_mui_form_utils3 = require("@availity/mui-form-utils");
-var import_mui_icon4 = require("@availity/mui-icon");
-var import_mui_layout3 = require("@availity/mui-layout");
+var import_mui_icon5 = require("@availity/mui-icon");
+var import_mui_layout4 = require("@availity/mui-layout");
 var import_mui_list2 = require("@availity/mui-list");
 var import_mui_progress = require("@availity/mui-progress");
 
 // ../textfield/src/lib/TextField.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_TextField = __toESM(require("@mui/material/TextField"));
 var import_mui_form_utils2 = require("@availity/mui-form-utils");
-var import_mui_layout2 = require("@availity/mui-layout");
-var import_mui_typography2 = require("@availity/mui-typography");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_mui_layout3 = require("@availity/mui-layout");
+var import_mui_typography3 = require("@availity/mui-typography");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var TextFieldFormHelperText = (_a) => {
   var _b = _a, {
     charCount,
@@ -543,18 +739,18 @@ var TextFieldFormHelperText = (_a) => {
     "showCharacterCount"
   ]);
   if (showCharacterCount) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_layout2.Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_form_utils2.FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { sx: { marginRight: "12px" }, children: helperText })),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_typography2.Typography, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_typography2.Typography, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_layout3.Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils2.FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { sx: { marginRight: "12px" }, children: helperText })),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_typography3.Typography, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_typography3.Typography, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
         "/",
         maxLength
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_mui_form_utils2.FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils2.FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
 };
-var TextField = (0, import_react2.forwardRef)((props, ref) => {
+var TextField = (0, import_react3.forwardRef)((props, ref) => {
   var _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const _a = props, {
     InputProps: InputProps2,
@@ -579,19 +775,19 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
     "showCharacterCount",
     "displayOverflowMaxLength"
   ]);
-  const [openDetected, setOpenDetected] = (0, import_react2.useState)(false);
-  const [charCount, setCharCount] = (0, import_react2.useState)(0);
+  const [openDetected, setOpenDetected] = (0, import_react3.useState)(false);
+  const [charCount, setCharCount] = (0, import_react3.useState)(0);
   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__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_TextField.default,
     __spreadProps(__spreadValues({}, rest), {
       onChange: (event) => {
         setCharCount(event.target.value.length);
         if (rest.onChange) rest.onChange(event);
       },
-      helperText: helperText || /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {}),
+      helperText: helperText || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {}),
       slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
         input: resolvedProps(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils2.InputPropOverrides), (_h = rest.slotProps) == null ? void 0 : _h.input), {
@@ -624,7 +820,7 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
 });
 
 // src/lib/UploadProgressBar.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ERROR_MAPPINGS = [
   {
     pattern: /but has an extension for/i,
@@ -636,13 +832,13 @@ var friendlyErrorMessage = (errorMessage) => {
   return mapping ? mapping.friendlyMessage : errorMessage;
 };
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
-  const [statePercentage, setStatePercentage] = (0, import_react3.useState)(upload.percentage || 0);
-  const [errorMessage, setErrorMessage] = (0, import_react3.useState)(
+  const [statePercentage, setStatePercentage] = (0, import_react4.useState)(upload.percentage || 0);
+  const [errorMessage, setErrorMessage] = (0, import_react4.useState)(
     upload.errorMessage ? friendlyErrorMessage(upload.errorMessage) : ""
   );
-  const [password, setPassword] = (0, import_react3.useState)("");
-  const [showPassword, setShowPassword] = (0, import_react3.useState)(false);
-  const [modalOpen, setModalOpen] = (0, import_react3.useState)(false);
+  const [password, setPassword] = (0, import_react4.useState)("");
+  const [showPassword, setShowPassword] = (0, import_react4.useState)(false);
+  const [modalOpen, setModalOpen] = (0, import_react4.useState)(false);
   const handleOnProgress = () => {
     setStatePercentage(upload.percentage);
     setErrorMessage("");
@@ -673,24 +869,24 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_layout3.Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout4.Box, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       import_mui_list2.ListItemText,
       {
         slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } },
         sx: { wordWrap: "break-word" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_icon5.WarningTriangleIcon, { sx: { verticalAlign: "middle", mt: "-2px" } }),
           " ",
           errorMessage
         ]
       }
     ),
-    upload.status === "encrypted" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "pwRequired", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_button3.Button, { color: "secondary", size: "small", onClick: toggleModal, children: "Enter Password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { onSubmit: verifyPassword, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogTitle, { children: "Enter Password" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    upload.status === "encrypted" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pwRequired", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_button3.Button, { color: "secondary", size: "small", onClick: toggleModal, children: "Enter Password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Dialog, { open: modalOpen, onClose: toggleModal, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("form", { onSubmit: verifyPassword, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogTitle, { children: "Enter Password" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogContent, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           TextField,
           {
             type: showPassword ? "text" : "password",
@@ -699,31 +895,31 @@ var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
             onChange: handlePasswordChange,
             autoFocus: true,
             InputProps: {
-              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              endAdornment: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_form_utils3.InputAdornment, { position: "end", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 import_mui_button3.IconButton,
                 {
                   title: "password visibility",
                   onClick: () => setShowPassword((prev) => !prev),
                   edge: "end",
-                  children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon4.EyeSlashIcon, { fontSize: "small" })
+                  children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_icon5.EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_icon5.EyeSlashIcon, { fontSize: "small" })
                 }
               ) })
             }
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogActions, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_button3.Button, { color: "primary", type: "submit", children: "Ok" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogActions, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_button3.Button, { color: "primary", type: "submit", children: "Ok" }) })
       ] }) })
     ] })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
 };
 
 // src/lib/useUploadCore.tsx
 var import_react_query = require("@tanstack/react-query");
-var import_upload_core = __toESM(require("@availity/upload-core"));
-function startUpload(file, options) {
+var import_upload_core2 = __toESM(require("@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 import_upload_core.default(file, uploadOptions);
+    const upload = new import_upload_core2.default(file, uploadOptions);
     yield upload.generateId();
     if (onSuccess) upload.onSuccess.push(onSuccess);
     if (onError) upload.onError.push(onError);
@@ -737,7 +933,7 @@ function useUploadCore(file, options, queryOptions) {
   const isQueryEnabled = !!file;
   return (0, import_react_query.useQuery)(__spreadValues({
     queryKey: ["upload", file.name, options],
-    queryFn: () => startUpload(file, options),
+    queryFn: () => startUpload2(file, options),
     enabled: isQueryEnabled,
     retry: false,
     refetchOnWindowFocus: false
@@ -745,7 +941,7 @@ function useUploadCore(file, options, queryOptions) {
 }
 
 // src/lib/FileList.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FileRow = ({
   file,
   options,
@@ -757,12 +953,12 @@ var FileRow = ({
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options, queryOptions);
   if (!upload) return null;
-  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomRow, { upload, options, onRemoveFile });
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CustomRow, { upload, options, onRemoveFile });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     import_mui_list3.ListItem,
     {
       disableGutters: true,
-      secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         import_mui_button4.IconButton,
         {
           title: "remove file",
@@ -770,17 +966,17 @@ var FileRow = ({
           onClick: () => {
             onRemoveFile(upload.id, upload);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_icon5.DeleteIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_icon6.DeleteIcon, {})
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout4.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {}) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.ListItemText, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.ListItemText, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UploadProgressBar, { upload }) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_mui_layout5.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_layout5.Grid, { size: { xs: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_list3.ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_layout5.Grid, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_list3.ListItemText, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_layout5.Grid, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_list3.ListItemText, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_layout5.Grid, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UploadProgressBar, { upload }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_divider2.Divider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_divider3.Divider, {})
       ]
     }
   );
@@ -794,8 +990,8 @@ var FileList = ({
   disableRemove
 }) => {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list3.List, { children: files.map((file) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_mui_list3.List, { children: files.map((file) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       FileRow,
       {
         file,
@@ -810,17 +1006,84 @@ var FileList = ({
   }) });
 };
 
+// src/lib/FileList2.tsx
+var import_mui_list4 = require("@availity/mui-list");
+var import_mui_button5 = require("@availity/mui-button");
+var import_mui_icon7 = require("@availity/mui-icon");
+var import_mui_layout6 = require("@availity/mui-layout");
+var import_mui_divider4 = require("@availity/mui-divider");
+var import_jsx_runtime13 = require("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__ */ (0, import_jsx_runtime13.jsx)(CustomRow, { upload, options, onRemoveFile });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_mui_list4.ListItem,
+    {
+      disableGutters: true,
+      secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_mui_button5.IconButton,
+        {
+          title: "remove file",
+          edge: "end",
+          onClick: () => {
+            onRemoveFile(upload.id, upload);
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_icon7.DeleteIcon, {})
+        }
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_mui_layout6.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", flexWrap: "wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_layout6.Grid, { size: { xs: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_list4.ListItemIcon, { sx: { minWidth: "1.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_layout6.Grid, { size: { xs: 4 }, sx: { minWidth: "8rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_list4.ListItemText, { sx: { wordBreak: "break-all" }, children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_layout6.Grid, { size: { xs: 2 }, sx: { minWidth: "3rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_list4.ListItemText, { sx: { textAlign: "end" }, children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_layout6.Grid, { size: { xs: "grow" }, sx: { minWidth: "6rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(UploadProgressBar, { upload }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_divider4.Divider, {})
+      ]
+    }
+  );
+};
+var FileList2 = ({
+  uploads,
+  options,
+  onRemoveFile,
+  customFileRow,
+  disableRemove
+}) => {
+  if (uploads.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_mui_list4.List, { children: uploads.map((upload) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      FileRow2,
+      {
+        upload,
+        options,
+        onRemoveFile,
+        customFileRow,
+        disableRemove
+      },
+      upload.id
+    );
+  }) });
+};
+
 // src/lib/FileSelector.tsx
-var import_react4 = require("react");
-var import_react_hook_form3 = require("react-hook-form");
+var import_react5 = require("react");
+var import_react_hook_form4 = require("react-hook-form");
 var import_react_query2 = require("@tanstack/react-query");
-var import_mui_layout5 = require("@availity/mui-layout");
-var import_mui_typography5 = require("@availity/mui-typography");
+var import_mui_layout7 = require("@availity/mui-layout");
+var import_mui_typography6 = require("@availity/mui-typography");
 var import_mui_alert3 = require("@availity/mui-alert");
 
 // src/lib/FileTypesMessage.tsx
-var import_mui_typography3 = require("@availity/mui-typography");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_mui_typography4 = require("@availity/mui-typography");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FileTypesMessage = ({
   allowedFileTypes = [],
   customSizeMessage,
@@ -830,17 +1093,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__ */ (0, import_jsx_runtime12.jsxs)(import_mui_typography3.Typography, { variant, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_typography4.Typography, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
 };
 
 // src/lib/HeaderMessage.tsx
-var import_mui_typography4 = require("@availity/mui-typography");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_mui_typography5 = require("@availity/mui-typography");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var HeaderMessage = ({ maxFiles, maxSize }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_mui_typography4.Typography, { variant: "h6", children: [
+  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 ",
@@ -849,7 +1112,7 @@ var HeaderMessage = ({ maxFiles, maxSize }) => {
 };
 
 // src/lib/FileSelector.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -878,10 +1141,10 @@ var FileSelector = ({
   validator,
   disableRemove
 }) => {
-  const [totalSize, setTotalSize] = (0, import_react4.useState)(0);
-  const [fileRejections, setFileRejections] = (0, import_react4.useState)([]);
+  const [totalSize, setTotalSize] = (0, import_react5.useState)(0);
+  const [fileRejections, setFileRejections] = (0, import_react5.useState)([]);
   const client = (0, import_react_query2.useQueryClient)();
-  const formMethods = (0, import_react_hook_form3.useFormContext)();
+  const formMethods = (0, import_react_hook_form4.useFormContext)();
   const options = __spreadProps(__spreadValues({}, uploadOptions), {
     bucketId,
     customerId,
@@ -920,10 +1183,10 @@ var FileSelector = ({
   const otherRejections = fileRejections.filter(
     (rejection) => !rejection.errors.some((error) => error.code === TOO_MANY_FILES_CODE)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_typography5.Typography, { marginBottom: "4px", children: label }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_mui_typography6.Typography, { marginBottom: "4px", children: label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Dropzone,
         {
           name,
@@ -940,7 +1203,7 @@ var FileSelector = ({
           validator
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         FileTypesMessage,
         {
           allowedFileTypes,
@@ -951,10 +1214,10 @@ var FileSelector = ({
         }
       ),
       children
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_mui_layout5.Grid, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HeaderMessage, { maxFiles, maxSize }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    ] }) : /* @__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)(
           FileTypesMessage,
           {
             allowedFileTypes,
@@ -964,8 +1227,8 @@ var FileSelector = ({
           }
         )
       ] }),
-      children ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_layout5.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_mui_layout7.Grid, { children }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_mui_layout7.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Dropzone,
         {
           name,
@@ -983,20 +1246,20 @@ var FileSelector = ({
         }
       ) })
     ] }),
-    tooManyFilesRejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    tooManyFilesRejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       import_mui_alert3.Alert,
       {
         severity: "error",
         onClose: () => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id)),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_mui_alert3.AlertTitle, { children: "Items not allowed." }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_mui_alert3.AlertTitle, { children: "Items not allowed." }),
           "Too many files are selected for upload, maximum ",
           maxFiles,
           " allowed."
         ]
       }
     ),
-    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ErrorAlert,
       {
         errors: rejection.errors,
@@ -1006,7 +1269,7 @@ var FileSelector = ({
       },
       rejection.id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       FileList,
       {
         files: files || [],
@@ -1019,17 +1282,200 @@ var FileSelector = ({
     )
   ] });
 };
+
+// src/lib/FileSelector2.tsx
+var import_react6 = require("react");
+var import_react_hook_form5 = require("react-hook-form");
+var import_mui_layout8 = require("@availity/mui-layout");
+var import_mui_typography7 = require("@availity/mui-typography");
+var import_mui_alert4 = require("@availity/mui-alert");
+var import_jsx_runtime17 = require("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] = (0, import_react6.useState)(0);
+  const [fileRejections, setFileRejections] = (0, import_react6.useState)([]);
+  const formMethods = (0, import_react_hook_form5.useFormContext)();
+  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__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_mui_typography7.Typography, { marginBottom: "4px", children: label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Dropzone2,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          enableDropArea,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          onDrop,
+          setFileRejections,
+          setTotalSize,
+          uploadOptions: options,
+          validator
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        FileTypesMessage,
+        {
+          allowedFileTypes,
+          maxFileSize: maxSize,
+          customSizeMessage,
+          customTypesMessage,
+          variant: "caption"
+        }
+      ),
+      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)(
+          FileTypesMessage,
+          {
+            allowedFileTypes,
+            customSizeMessage,
+            customTypesMessage,
+            variant: "body2"
+          }
+        )
+      ] }),
+      children ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_mui_layout8.Grid, { children }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_mui_layout8.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Dropzone2,
+        {
+          name,
+          allowedFileTypes,
+          disabled,
+          enableDropArea,
+          maxFiles,
+          maxSize,
+          multiple,
+          onChange,
+          onDrop,
+          setFileRejections,
+          setTotalSize,
+          uploadOptions: options,
+          validator
+        }
+      ) })
+    ] }),
+    tooManyFilesRejections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      import_mui_alert4.Alert,
+      {
+        severity: "error",
+        onClose: () => tooManyFilesRejections.forEach((rejection) => handleRemoveRejection(rejection.id)),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_mui_alert4.AlertTitle, { children: "Items not allowed." }),
+          "Too many files are selected for upload, maximum ",
+          maxFiles,
+          " allowed."
+        ]
+      }
+    ),
+    otherRejections.length > 0 && otherRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ErrorAlert,
+      {
+        errors: rejection.errors,
+        fileName: rejection.file.name,
+        id: rejection.id,
+        onClose: () => handleRemoveRejection(rejection.id)
+      },
+      rejection.id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      FileList2,
+      {
+        uploads: uploads || [],
+        options,
+        onRemoveFile: handleOnRemoveFile,
+        customFileRow,
+        disableRemove
+      }
+    )
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CLOUD_URL,
   Dropzone,
+  Dropzone2,
+  DropzoneContainer,
   ErrorAlert,
   FileList,
+  FileList2,
   FilePickerBtn,
   FileRow,
+  FileRow2,
   FileSelector,
+  FileSelector2,
   FileTypesMessage,
   HeaderMessage,
   UploadProgressBar,
+  createCounter,
   formatFileTooLarge,
+  innerBoxStyles,
+  outerBoxStyles,
   useUploadCore
 });