@availity/mui-file-selector 1.6.5 → 1.7.0

package/dist/index.mjs

@@ -1,7 +1,11 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -17,6 +21,12 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -29,6 +39,25 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -50,6 +79,135 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 
+// ../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
+var require_use_sync_external_store_shim_production = __commonJS({
+  "../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
+    "use strict";
+    var React6 = __require("react");
+    function is(x, y) {
+      return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
+    }
+    var objectIs = "function" === typeof Object.is ? Object.is : is;
+    var useState7 = React6.useState;
+    var useEffect4 = React6.useEffect;
+    var useLayoutEffect = React6.useLayoutEffect;
+    var useDebugValue = React6.useDebugValue;
+    function useSyncExternalStore$2(subscribe, getSnapshot) {
+      var value = getSnapshot(), _useState = useState7({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
+      useLayoutEffect(
+        function() {
+          inst.value = value;
+          inst.getSnapshot = getSnapshot;
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+        },
+        [subscribe, value, getSnapshot]
+      );
+      useEffect4(
+        function() {
+          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          return subscribe(function() {
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          });
+        },
+        [subscribe]
+      );
+      useDebugValue(value);
+      return value;
+    }
+    function checkIfSnapshotChanged(inst) {
+      var latestGetSnapshot = inst.getSnapshot;
+      inst = inst.value;
+      try {
+        var nextValue = latestGetSnapshot();
+        return !objectIs(inst, nextValue);
+      } catch (error) {
+        return true;
+      }
+    }
+    function useSyncExternalStore$12(subscribe, getSnapshot) {
+      return getSnapshot();
+    }
+    var shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$12 : useSyncExternalStore$2;
+    exports.useSyncExternalStore = void 0 !== React6.useSyncExternalStore ? React6.useSyncExternalStore : shim;
+  }
+});
+
+// ../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
+var require_use_sync_external_store_shim_development = __commonJS({
+  "../../node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
+    "use strict";
+    "production" !== process.env.NODE_ENV && function() {
+      function is(x, y) {
+        return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
+      }
+      function useSyncExternalStore$2(subscribe, getSnapshot) {
+        didWarnOld18Alpha || void 0 === React6.startTransition || (didWarnOld18Alpha = true, console.error(
+          "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
+        ));
+        var value = getSnapshot();
+        if (!didWarnUncachedGetSnapshot) {
+          var cachedValue = getSnapshot();
+          objectIs(value, cachedValue) || (console.error(
+            "The result of getSnapshot should be cached to avoid an infinite loop"
+          ), didWarnUncachedGetSnapshot = true);
+        }
+        cachedValue = useState7({
+          inst: { value, getSnapshot }
+        });
+        var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
+        useLayoutEffect(
+          function() {
+            inst.value = value;
+            inst.getSnapshot = getSnapshot;
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+          },
+          [subscribe, value, getSnapshot]
+        );
+        useEffect4(
+          function() {
+            checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+            return subscribe(function() {
+              checkIfSnapshotChanged(inst) && forceUpdate({ inst });
+            });
+          },
+          [subscribe]
+        );
+        useDebugValue(value);
+        return value;
+      }
+      function checkIfSnapshotChanged(inst) {
+        var latestGetSnapshot = inst.getSnapshot;
+        inst = inst.value;
+        try {
+          var nextValue = latestGetSnapshot();
+          return !objectIs(inst, nextValue);
+        } catch (error) {
+          return true;
+        }
+      }
+      function useSyncExternalStore$12(subscribe, getSnapshot) {
+        return getSnapshot();
+      }
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+      var React6 = __require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState7 = React6.useState, useEffect4 = React6.useEffect, useLayoutEffect = React6.useLayoutEffect, useDebugValue = React6.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$12 : useSyncExternalStore$2;
+      exports.useSyncExternalStore = void 0 !== React6.useSyncExternalStore ? React6.useSyncExternalStore : shim;
+      "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+    }();
+  }
+});
+
+// ../../node_modules/use-sync-external-store/shim/index.js
+var require_shim = __commonJS({
+  "../../node_modules/use-sync-external-store/shim/index.js"(exports, module) {
+    "use strict";
+    if (process.env.NODE_ENV === "production") {
+      module.exports = require_use_sync_external_store_shim_production();
+    } else {
+      module.exports = require_use_sync_external_store_shim_development();
+    }
+  }
+});
+
 // src/lib/Dropzone.tsx
 import { useCallback } from "react";
 import { styled } from "@mui/material/styles";
@@ -297,9 +455,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 +507,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 +713,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 +732,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 +753,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 +764,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 +780,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 +823,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 +832,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 +847,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,19 +862,19 @@ 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;
+  var _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const _a = props, {
     InputProps: InputProps2,
     helpTopicId,
@@ -556,37 +901,39 @@ var TextField = forwardRef((props, ref) => {
   const [openDetected, setOpenDetected] = useState(false);
   const [charCount, setCharCount] = 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__ */ 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(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
+        input: resolvedProps(__spreadProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_h = rest.slotProps) == null ? void 0 : _h.input), {
+          readOnly: allReadOnly
+        })),
         htmlInput: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
           "aria-required": required
-        }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
+        }, inputProps), (_i = rest.slotProps) == null ? void 0 : _i.htmlInput), {
           maxLength: !displayOverflowMaxLength ? maxLength : void 0
         })),
-        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
+        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_j = rest.slotProps) == null ? void 0 : _j.select)),
         inputLabel: resolvedProps(__spreadValues(__spreadValues({
           component: FormLabel,
           helpTopicId,
           required,
           shrink: true
-        }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
+        }, InputLabelProps), (_k = rest.slotProps) == null ? void 0 : _k.inputLabel)),
         formHelperText: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
           component: "div"
-        }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText), {
+        }, FormHelperTextProps2), (_l = rest.slotProps) == null ? void 0 : _l.formHelperText), {
           charCount,
           helperText,
           maxLength,
-          displayOverflowMaxLength,
           showCharacterCount
         }))
       },
@@ -596,7 +943,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,
@@ -645,24 +992,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",
@@ -671,70 +1018,1014 @@ 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) {
-  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;
+// ../../node_modules/@tanstack/query-core/build/lib/subscribable.mjs
+var Subscribable = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.subscribe = this.subscribe.bind(this);
+  }
+  subscribe(listener) {
+    const identity = {
+      listener
+    };
+    this.listeners.add(identity);
+    this.onSubscribe();
+    return () => {
+      this.listeners.delete(identity);
+      this.onUnsubscribe();
+    };
+  }
+  hasListeners() {
+    return this.listeners.size > 0;
+  }
+  onSubscribe() {
+  }
+  onUnsubscribe() {
+  }
+};
+
+// ../../node_modules/@tanstack/query-core/build/lib/utils.mjs
+var isServer = typeof window === "undefined" || "Deno" in window;
+function noop() {
+  return void 0;
+}
+function isValidTimeout(value) {
+  return typeof value === "number" && value >= 0 && value !== Infinity;
+}
+function timeUntilStale(updatedAt, staleTime) {
+  return Math.max(updatedAt + (staleTime || 0) - Date.now(), 0);
+}
+function parseQueryArgs(arg1, arg2, arg3) {
+  if (!isQueryKey(arg1)) {
+    return arg1;
+  }
+  if (typeof arg2 === "function") {
+    return __spreadProps(__spreadValues({}, arg3), {
+      queryKey: arg1,
+      queryFn: arg2
+    });
+  }
+  return __spreadProps(__spreadValues({}, arg2), {
+    queryKey: arg1
   });
 }
-function useUploadCore(file, options, queryOptions) {
-  const isQueryEnabled = !!file;
-  return useQuery(__spreadValues({
-    queryKey: ["upload", file.name, options],
-    queryFn: () => startUpload(file, options),
-    enabled: isQueryEnabled,
-    retry: false,
-    refetchOnWindowFocus: false
-  }, queryOptions));
+function replaceEqualDeep(a, b) {
+  if (a === b) {
+    return a;
+  }
+  const array = isPlainArray(a) && isPlainArray(b);
+  if (array || isPlainObject(a) && isPlainObject(b)) {
+    const aSize = array ? a.length : Object.keys(a).length;
+    const bItems = array ? b : Object.keys(b);
+    const bSize = bItems.length;
+    const copy = array ? [] : {};
+    let equalItems = 0;
+    for (let i = 0; i < bSize; i++) {
+      const key = array ? i : bItems[i];
+      copy[key] = replaceEqualDeep(a[key], b[key]);
+      if (copy[key] === a[key]) {
+        equalItems++;
+      }
+    }
+    return aSize === bSize && equalItems === aSize ? a : copy;
+  }
+  return b;
 }
-
-// src/lib/FileList.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var FileRow = ({
-  file,
-  options,
-  onRemoveFile,
-  queryOptions,
-  customFileRow: CustomRow,
-  disableRemove = false
-}) => {
-  const Icon = getFileExtIcon(file.name);
+function shallowEqualObjects(a, b) {
+  if (a && !b || b && !a) {
+    return false;
+  }
+  for (const key in a) {
+    if (a[key] !== b[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+function isPlainArray(value) {
+  return Array.isArray(value) && value.length === Object.keys(value).length;
+}
+function isPlainObject(o) {
+  if (!hasObjectPrototype(o)) {
+    return false;
+  }
+  const ctor = o.constructor;
+  if (typeof ctor === "undefined") {
+    return true;
+  }
+  const prot = ctor.prototype;
+  if (!hasObjectPrototype(prot)) {
+    return false;
+  }
+  if (!prot.hasOwnProperty("isPrototypeOf")) {
+    return false;
+  }
+  return true;
+}
+function hasObjectPrototype(o) {
+  return Object.prototype.toString.call(o) === "[object Object]";
+}
+function isQueryKey(value) {
+  return Array.isArray(value);
+}
+function sleep(timeout) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeout);
+  });
+}
+function scheduleMicrotask(callback) {
+  sleep(0).then(callback);
+}
+function replaceData(prevData, data, options) {
+  if (options.isDataEqual != null && options.isDataEqual(prevData, data)) {
+    return prevData;
+  } else if (typeof options.structuralSharing === "function") {
+    return options.structuralSharing(prevData, data);
+  } else if (options.structuralSharing !== false) {
+    return replaceEqualDeep(prevData, data);
+  }
+  return data;
+}
+
+// ../../node_modules/@tanstack/query-core/build/lib/focusManager.mjs
+var FocusManager = class extends Subscribable {
+  constructor() {
+    super();
+    this.setup = (onFocus) => {
+      if (!isServer && window.addEventListener) {
+        const listener = () => onFocus();
+        window.addEventListener("visibilitychange", listener, false);
+        window.addEventListener("focus", listener, false);
+        return () => {
+          window.removeEventListener("visibilitychange", listener);
+          window.removeEventListener("focus", listener);
+        };
+      }
+      return;
+    };
+  }
+  onSubscribe() {
+    if (!this.cleanup) {
+      this.setEventListener(this.setup);
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      var _this$cleanup;
+      (_this$cleanup = this.cleanup) == null ? void 0 : _this$cleanup.call(this);
+      this.cleanup = void 0;
+    }
+  }
+  setEventListener(setup) {
+    var _this$cleanup2;
+    this.setup = setup;
+    (_this$cleanup2 = this.cleanup) == null ? void 0 : _this$cleanup2.call(this);
+    this.cleanup = setup((focused) => {
+      if (typeof focused === "boolean") {
+        this.setFocused(focused);
+      } else {
+        this.onFocus();
+      }
+    });
+  }
+  setFocused(focused) {
+    const changed = this.focused !== focused;
+    if (changed) {
+      this.focused = focused;
+      this.onFocus();
+    }
+  }
+  onFocus() {
+    this.listeners.forEach(({
+      listener
+    }) => {
+      listener();
+    });
+  }
+  isFocused() {
+    if (typeof this.focused === "boolean") {
+      return this.focused;
+    }
+    if (typeof document === "undefined") {
+      return true;
+    }
+    return [void 0, "visible", "prerender"].includes(document.visibilityState);
+  }
+};
+var focusManager = new FocusManager();
+
+// ../../node_modules/@tanstack/query-core/build/lib/onlineManager.mjs
+var onlineEvents = ["online", "offline"];
+var OnlineManager = class extends Subscribable {
+  constructor() {
+    super();
+    this.setup = (onOnline) => {
+      if (!isServer && window.addEventListener) {
+        const listener = () => onOnline();
+        onlineEvents.forEach((event) => {
+          window.addEventListener(event, listener, false);
+        });
+        return () => {
+          onlineEvents.forEach((event) => {
+            window.removeEventListener(event, listener);
+          });
+        };
+      }
+      return;
+    };
+  }
+  onSubscribe() {
+    if (!this.cleanup) {
+      this.setEventListener(this.setup);
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      var _this$cleanup;
+      (_this$cleanup = this.cleanup) == null ? void 0 : _this$cleanup.call(this);
+      this.cleanup = void 0;
+    }
+  }
+  setEventListener(setup) {
+    var _this$cleanup2;
+    this.setup = setup;
+    (_this$cleanup2 = this.cleanup) == null ? void 0 : _this$cleanup2.call(this);
+    this.cleanup = setup((online) => {
+      if (typeof online === "boolean") {
+        this.setOnline(online);
+      } else {
+        this.onOnline();
+      }
+    });
+  }
+  setOnline(online) {
+    const changed = this.online !== online;
+    if (changed) {
+      this.online = online;
+      this.onOnline();
+    }
+  }
+  onOnline() {
+    this.listeners.forEach(({
+      listener
+    }) => {
+      listener();
+    });
+  }
+  isOnline() {
+    if (typeof this.online === "boolean") {
+      return this.online;
+    }
+    if (typeof navigator === "undefined" || typeof navigator.onLine === "undefined") {
+      return true;
+    }
+    return navigator.onLine;
+  }
+};
+var onlineManager = new OnlineManager();
+
+// ../../node_modules/@tanstack/query-core/build/lib/retryer.mjs
+function canFetch(networkMode) {
+  return (networkMode != null ? networkMode : "online") === "online" ? onlineManager.isOnline() : true;
+}
+var CancelledError = class {
+  constructor(options) {
+    this.revert = options == null ? void 0 : options.revert;
+    this.silent = options == null ? void 0 : options.silent;
+  }
+};
+function isCancelledError(value) {
+  return value instanceof CancelledError;
+}
+
+// ../../node_modules/@tanstack/query-core/build/lib/notifyManager.mjs
+function createNotifyManager() {
+  let queue = [];
+  let transactions = 0;
+  let notifyFn = (callback) => {
+    callback();
+  };
+  let batchNotifyFn = (callback) => {
+    callback();
+  };
+  const batch = (callback) => {
+    let result;
+    transactions++;
+    try {
+      result = callback();
+    } finally {
+      transactions--;
+      if (!transactions) {
+        flush();
+      }
+    }
+    return result;
+  };
+  const schedule = (callback) => {
+    if (transactions) {
+      queue.push(callback);
+    } else {
+      scheduleMicrotask(() => {
+        notifyFn(callback);
+      });
+    }
+  };
+  const batchCalls = (callback) => {
+    return (...args) => {
+      schedule(() => {
+        callback(...args);
+      });
+    };
+  };
+  const flush = () => {
+    const originalQueue = queue;
+    queue = [];
+    if (originalQueue.length) {
+      scheduleMicrotask(() => {
+        batchNotifyFn(() => {
+          originalQueue.forEach((callback) => {
+            notifyFn(callback);
+          });
+        });
+      });
+    }
+  };
+  const setNotifyFunction = (fn) => {
+    notifyFn = fn;
+  };
+  const setBatchNotifyFunction = (fn) => {
+    batchNotifyFn = fn;
+  };
+  return {
+    batch,
+    batchCalls,
+    schedule,
+    setNotifyFunction,
+    setBatchNotifyFunction
+  };
+}
+var notifyManager = createNotifyManager();
+
+// ../../node_modules/@tanstack/query-core/build/lib/queryObserver.mjs
+var QueryObserver = class extends Subscribable {
+  constructor(client, options) {
+    super();
+    this.client = client;
+    this.options = options;
+    this.trackedProps = /* @__PURE__ */ new Set();
+    this.selectError = null;
+    this.bindMethods();
+    this.setOptions(options);
+  }
+  bindMethods() {
+    this.remove = this.remove.bind(this);
+    this.refetch = this.refetch.bind(this);
+  }
+  onSubscribe() {
+    if (this.listeners.size === 1) {
+      this.currentQuery.addObserver(this);
+      if (shouldFetchOnMount(this.currentQuery, this.options)) {
+        this.executeFetch();
+      }
+      this.updateTimers();
+    }
+  }
+  onUnsubscribe() {
+    if (!this.hasListeners()) {
+      this.destroy();
+    }
+  }
+  shouldFetchOnReconnect() {
+    return shouldFetchOn(this.currentQuery, this.options, this.options.refetchOnReconnect);
+  }
+  shouldFetchOnWindowFocus() {
+    return shouldFetchOn(this.currentQuery, this.options, this.options.refetchOnWindowFocus);
+  }
+  destroy() {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.clearStaleTimeout();
+    this.clearRefetchInterval();
+    this.currentQuery.removeObserver(this);
+  }
+  setOptions(options, notifyOptions) {
+    const prevOptions = this.options;
+    const prevQuery = this.currentQuery;
+    this.options = this.client.defaultQueryOptions(options);
+    if (process.env.NODE_ENV !== "production" && typeof (options == null ? void 0 : options.isDataEqual) !== "undefined") {
+      this.client.getLogger().error("The isDataEqual option has been deprecated and will be removed in the next major version. You can achieve the same functionality by passing a function as the structuralSharing option");
+    }
+    if (!shallowEqualObjects(prevOptions, this.options)) {
+      this.client.getQueryCache().notify({
+        type: "observerOptionsUpdated",
+        query: this.currentQuery,
+        observer: this
+      });
+    }
+    if (typeof this.options.enabled !== "undefined" && typeof this.options.enabled !== "boolean") {
+      throw new Error("Expected enabled to be a boolean");
+    }
+    if (!this.options.queryKey) {
+      this.options.queryKey = prevOptions.queryKey;
+    }
+    this.updateQuery();
+    const mounted = this.hasListeners();
+    if (mounted && shouldFetchOptionally(this.currentQuery, prevQuery, this.options, prevOptions)) {
+      this.executeFetch();
+    }
+    this.updateResult(notifyOptions);
+    if (mounted && (this.currentQuery !== prevQuery || this.options.enabled !== prevOptions.enabled || this.options.staleTime !== prevOptions.staleTime)) {
+      this.updateStaleTimeout();
+    }
+    const nextRefetchInterval = this.computeRefetchInterval();
+    if (mounted && (this.currentQuery !== prevQuery || this.options.enabled !== prevOptions.enabled || nextRefetchInterval !== this.currentRefetchInterval)) {
+      this.updateRefetchInterval(nextRefetchInterval);
+    }
+  }
+  getOptimisticResult(options) {
+    const query = this.client.getQueryCache().build(this.client, options);
+    const result = this.createResult(query, options);
+    if (shouldAssignObserverCurrentProperties(this, result, options)) {
+      this.currentResult = result;
+      this.currentResultOptions = this.options;
+      this.currentResultState = this.currentQuery.state;
+    }
+    return result;
+  }
+  getCurrentResult() {
+    return this.currentResult;
+  }
+  trackResult(result) {
+    const trackedResult = {};
+    Object.keys(result).forEach((key) => {
+      Object.defineProperty(trackedResult, key, {
+        configurable: false,
+        enumerable: true,
+        get: () => {
+          this.trackedProps.add(key);
+          return result[key];
+        }
+      });
+    });
+    return trackedResult;
+  }
+  getCurrentQuery() {
+    return this.currentQuery;
+  }
+  remove() {
+    this.client.getQueryCache().remove(this.currentQuery);
+  }
+  refetch(_a = {}) {
+    var _b = _a, {
+      refetchPage
+    } = _b, options = __objRest(_b, [
+      "refetchPage"
+    ]);
+    return this.fetch(__spreadProps(__spreadValues({}, options), {
+      meta: {
+        refetchPage
+      }
+    }));
+  }
+  fetchOptimistic(options) {
+    const defaultedOptions = this.client.defaultQueryOptions(options);
+    const query = this.client.getQueryCache().build(this.client, defaultedOptions);
+    query.isFetchingOptimistic = true;
+    return query.fetch().then(() => this.createResult(query, defaultedOptions));
+  }
+  fetch(fetchOptions) {
+    var _fetchOptions$cancelR;
+    return this.executeFetch(__spreadProps(__spreadValues({}, fetchOptions), {
+      cancelRefetch: (_fetchOptions$cancelR = fetchOptions.cancelRefetch) != null ? _fetchOptions$cancelR : true
+    })).then(() => {
+      this.updateResult();
+      return this.currentResult;
+    });
+  }
+  executeFetch(fetchOptions) {
+    this.updateQuery();
+    let promise = this.currentQuery.fetch(this.options, fetchOptions);
+    if (!(fetchOptions != null && fetchOptions.throwOnError)) {
+      promise = promise.catch(noop);
+    }
+    return promise;
+  }
+  updateStaleTimeout() {
+    this.clearStaleTimeout();
+    if (isServer || this.currentResult.isStale || !isValidTimeout(this.options.staleTime)) {
+      return;
+    }
+    const time = timeUntilStale(this.currentResult.dataUpdatedAt, this.options.staleTime);
+    const timeout = time + 1;
+    this.staleTimeoutId = setTimeout(() => {
+      if (!this.currentResult.isStale) {
+        this.updateResult();
+      }
+    }, timeout);
+  }
+  computeRefetchInterval() {
+    var _this$options$refetch;
+    return typeof this.options.refetchInterval === "function" ? this.options.refetchInterval(this.currentResult.data, this.currentQuery) : (_this$options$refetch = this.options.refetchInterval) != null ? _this$options$refetch : false;
+  }
+  updateRefetchInterval(nextInterval) {
+    this.clearRefetchInterval();
+    this.currentRefetchInterval = nextInterval;
+    if (isServer || this.options.enabled === false || !isValidTimeout(this.currentRefetchInterval) || this.currentRefetchInterval === 0) {
+      return;
+    }
+    this.refetchIntervalId = setInterval(() => {
+      if (this.options.refetchIntervalInBackground || focusManager.isFocused()) {
+        this.executeFetch();
+      }
+    }, this.currentRefetchInterval);
+  }
+  updateTimers() {
+    this.updateStaleTimeout();
+    this.updateRefetchInterval(this.computeRefetchInterval());
+  }
+  clearStaleTimeout() {
+    if (this.staleTimeoutId) {
+      clearTimeout(this.staleTimeoutId);
+      this.staleTimeoutId = void 0;
+    }
+  }
+  clearRefetchInterval() {
+    if (this.refetchIntervalId) {
+      clearInterval(this.refetchIntervalId);
+      this.refetchIntervalId = void 0;
+    }
+  }
+  createResult(query, options) {
+    const prevQuery = this.currentQuery;
+    const prevOptions = this.options;
+    const prevResult = this.currentResult;
+    const prevResultState = this.currentResultState;
+    const prevResultOptions = this.currentResultOptions;
+    const queryChange = query !== prevQuery;
+    const queryInitialState = queryChange ? query.state : this.currentQueryInitialState;
+    const prevQueryResult = queryChange ? this.currentResult : this.previousQueryResult;
+    const {
+      state
+    } = query;
+    let {
+      dataUpdatedAt,
+      error,
+      errorUpdatedAt,
+      fetchStatus,
+      status
+    } = state;
+    let isPreviousData = false;
+    let isPlaceholderData = false;
+    let data;
+    if (options._optimisticResults) {
+      const mounted = this.hasListeners();
+      const fetchOnMount = !mounted && shouldFetchOnMount(query, options);
+      const fetchOptionally = mounted && shouldFetchOptionally(query, prevQuery, options, prevOptions);
+      if (fetchOnMount || fetchOptionally) {
+        fetchStatus = canFetch(query.options.networkMode) ? "fetching" : "paused";
+        if (!dataUpdatedAt) {
+          status = "loading";
+        }
+      }
+      if (options._optimisticResults === "isRestoring") {
+        fetchStatus = "idle";
+      }
+    }
+    if (options.keepPreviousData && !state.dataUpdatedAt && prevQueryResult != null && prevQueryResult.isSuccess && status !== "error") {
+      data = prevQueryResult.data;
+      dataUpdatedAt = prevQueryResult.dataUpdatedAt;
+      status = prevQueryResult.status;
+      isPreviousData = true;
+    } else if (options.select && typeof state.data !== "undefined") {
+      if (prevResult && state.data === (prevResultState == null ? void 0 : prevResultState.data) && options.select === this.selectFn) {
+        data = this.selectResult;
+      } else {
+        try {
+          this.selectFn = options.select;
+          data = options.select(state.data);
+          data = replaceData(prevResult == null ? void 0 : prevResult.data, data, options);
+          this.selectResult = data;
+          this.selectError = null;
+        } catch (selectError) {
+          if (process.env.NODE_ENV !== "production") {
+            this.client.getLogger().error(selectError);
+          }
+          this.selectError = selectError;
+        }
+      }
+    } else {
+      data = state.data;
+    }
+    if (typeof options.placeholderData !== "undefined" && typeof data === "undefined" && status === "loading") {
+      let placeholderData;
+      if (prevResult != null && prevResult.isPlaceholderData && options.placeholderData === (prevResultOptions == null ? void 0 : prevResultOptions.placeholderData)) {
+        placeholderData = prevResult.data;
+      } else {
+        placeholderData = typeof options.placeholderData === "function" ? options.placeholderData() : options.placeholderData;
+        if (options.select && typeof placeholderData !== "undefined") {
+          try {
+            placeholderData = options.select(placeholderData);
+            this.selectError = null;
+          } catch (selectError) {
+            if (process.env.NODE_ENV !== "production") {
+              this.client.getLogger().error(selectError);
+            }
+            this.selectError = selectError;
+          }
+        }
+      }
+      if (typeof placeholderData !== "undefined") {
+        status = "success";
+        data = replaceData(prevResult == null ? void 0 : prevResult.data, placeholderData, options);
+        isPlaceholderData = true;
+      }
+    }
+    if (this.selectError) {
+      error = this.selectError;
+      data = this.selectResult;
+      errorUpdatedAt = Date.now();
+      status = "error";
+    }
+    const isFetching = fetchStatus === "fetching";
+    const isLoading = status === "loading";
+    const isError2 = status === "error";
+    const result = {
+      status,
+      fetchStatus,
+      isLoading,
+      isSuccess: status === "success",
+      isError: isError2,
+      isInitialLoading: isLoading && isFetching,
+      data,
+      dataUpdatedAt,
+      error,
+      errorUpdatedAt,
+      failureCount: state.fetchFailureCount,
+      failureReason: state.fetchFailureReason,
+      errorUpdateCount: state.errorUpdateCount,
+      isFetched: state.dataUpdateCount > 0 || state.errorUpdateCount > 0,
+      isFetchedAfterMount: state.dataUpdateCount > queryInitialState.dataUpdateCount || state.errorUpdateCount > queryInitialState.errorUpdateCount,
+      isFetching,
+      isRefetching: isFetching && !isLoading,
+      isLoadingError: isError2 && state.dataUpdatedAt === 0,
+      isPaused: fetchStatus === "paused",
+      isPlaceholderData,
+      isPreviousData,
+      isRefetchError: isError2 && state.dataUpdatedAt !== 0,
+      isStale: isStale(query, options),
+      refetch: this.refetch,
+      remove: this.remove
+    };
+    return result;
+  }
+  updateResult(notifyOptions) {
+    const prevResult = this.currentResult;
+    const nextResult = this.createResult(this.currentQuery, this.options);
+    this.currentResultState = this.currentQuery.state;
+    this.currentResultOptions = this.options;
+    if (shallowEqualObjects(nextResult, prevResult)) {
+      return;
+    }
+    this.currentResult = nextResult;
+    const defaultNotifyOptions = {
+      cache: true
+    };
+    const shouldNotifyListeners = () => {
+      if (!prevResult) {
+        return true;
+      }
+      const {
+        notifyOnChangeProps
+      } = this.options;
+      const notifyOnChangePropsValue = typeof notifyOnChangeProps === "function" ? notifyOnChangeProps() : notifyOnChangeProps;
+      if (notifyOnChangePropsValue === "all" || !notifyOnChangePropsValue && !this.trackedProps.size) {
+        return true;
+      }
+      const includedProps = new Set(notifyOnChangePropsValue != null ? notifyOnChangePropsValue : this.trackedProps);
+      if (this.options.useErrorBoundary) {
+        includedProps.add("error");
+      }
+      return Object.keys(this.currentResult).some((key) => {
+        const typedKey = key;
+        const changed = this.currentResult[typedKey] !== prevResult[typedKey];
+        return changed && includedProps.has(typedKey);
+      });
+    };
+    if ((notifyOptions == null ? void 0 : notifyOptions.listeners) !== false && shouldNotifyListeners()) {
+      defaultNotifyOptions.listeners = true;
+    }
+    this.notify(__spreadValues(__spreadValues({}, defaultNotifyOptions), notifyOptions));
+  }
+  updateQuery() {
+    const query = this.client.getQueryCache().build(this.client, this.options);
+    if (query === this.currentQuery) {
+      return;
+    }
+    const prevQuery = this.currentQuery;
+    this.currentQuery = query;
+    this.currentQueryInitialState = query.state;
+    this.previousQueryResult = this.currentResult;
+    if (this.hasListeners()) {
+      prevQuery == null ? void 0 : prevQuery.removeObserver(this);
+      query.addObserver(this);
+    }
+  }
+  onQueryUpdate(action) {
+    const notifyOptions = {};
+    if (action.type === "success") {
+      notifyOptions.onSuccess = !action.manual;
+    } else if (action.type === "error" && !isCancelledError(action.error)) {
+      notifyOptions.onError = true;
+    }
+    this.updateResult(notifyOptions);
+    if (this.hasListeners()) {
+      this.updateTimers();
+    }
+  }
+  notify(notifyOptions) {
+    notifyManager.batch(() => {
+      if (notifyOptions.onSuccess) {
+        var _this$options$onSucce, _this$options, _this$options$onSettl, _this$options2;
+        (_this$options$onSucce = (_this$options = this.options).onSuccess) == null ? void 0 : _this$options$onSucce.call(_this$options, this.currentResult.data);
+        (_this$options$onSettl = (_this$options2 = this.options).onSettled) == null ? void 0 : _this$options$onSettl.call(_this$options2, this.currentResult.data, null);
+      } else if (notifyOptions.onError) {
+        var _this$options$onError, _this$options3, _this$options$onSettl2, _this$options4;
+        (_this$options$onError = (_this$options3 = this.options).onError) == null ? void 0 : _this$options$onError.call(_this$options3, this.currentResult.error);
+        (_this$options$onSettl2 = (_this$options4 = this.options).onSettled) == null ? void 0 : _this$options$onSettl2.call(_this$options4, void 0, this.currentResult.error);
+      }
+      if (notifyOptions.listeners) {
+        this.listeners.forEach(({
+          listener
+        }) => {
+          listener(this.currentResult);
+        });
+      }
+      if (notifyOptions.cache) {
+        this.client.getQueryCache().notify({
+          query: this.currentQuery,
+          type: "observerResultsUpdated"
+        });
+      }
+    });
+  }
+};
+function shouldLoadOnMount(query, options) {
+  return options.enabled !== false && !query.state.dataUpdatedAt && !(query.state.status === "error" && options.retryOnMount === false);
+}
+function shouldFetchOnMount(query, options) {
+  return shouldLoadOnMount(query, options) || query.state.dataUpdatedAt > 0 && shouldFetchOn(query, options, options.refetchOnMount);
+}
+function shouldFetchOn(query, options, field) {
+  if (options.enabled !== false) {
+    const value = typeof field === "function" ? field(query) : field;
+    return value === "always" || value !== false && isStale(query, options);
+  }
+  return false;
+}
+function shouldFetchOptionally(query, prevQuery, options, prevOptions) {
+  return options.enabled !== false && (query !== prevQuery || prevOptions.enabled === false) && (!options.suspense || query.state.status !== "error") && isStale(query, options);
+}
+function isStale(query, options) {
+  return query.isStaleByTime(options.staleTime);
+}
+function shouldAssignObserverCurrentProperties(observer, optimisticResult, options) {
+  if (options.keepPreviousData) {
+    return false;
+  }
+  if (options.placeholderData !== void 0) {
+    return optimisticResult.isPlaceholderData;
+  }
+  if (!shallowEqualObjects(observer.getCurrentResult(), optimisticResult)) {
+    return true;
+  }
+  return false;
+}
+
+// ../../node_modules/@tanstack/react-query/build/lib/useSyncExternalStore.mjs
+var import_shim = __toESM(require_shim(), 1);
+var useSyncExternalStore = import_shim.useSyncExternalStore;
+
+// ../../node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs
+import * as React from "react";
+var defaultContext = /* @__PURE__ */ React.createContext(void 0);
+var QueryClientSharingContext = /* @__PURE__ */ React.createContext(false);
+function getQueryClientContext(context, contextSharing) {
+  if (context) {
+    return context;
+  }
+  if (contextSharing && typeof window !== "undefined") {
+    if (!window.ReactQueryClientContext) {
+      window.ReactQueryClientContext = defaultContext;
+    }
+    return window.ReactQueryClientContext;
+  }
+  return defaultContext;
+}
+var useQueryClient = ({
+  context
+} = {}) => {
+  const queryClient = React.useContext(getQueryClientContext(context, React.useContext(QueryClientSharingContext)));
+  if (!queryClient) {
+    throw new Error("No QueryClient set, use QueryClientProvider to set one");
+  }
+  return queryClient;
+};
+
+// ../../node_modules/@tanstack/react-query/build/lib/isRestoring.mjs
+import * as React2 from "react";
+var IsRestoringContext = /* @__PURE__ */ React2.createContext(false);
+var useIsRestoring = () => React2.useContext(IsRestoringContext);
+var IsRestoringProvider = IsRestoringContext.Provider;
+
+// ../../node_modules/@tanstack/react-query/build/lib/QueryErrorResetBoundary.mjs
+import * as React3 from "react";
+function createValue() {
+  let isReset = false;
+  return {
+    clearReset: () => {
+      isReset = false;
+    },
+    reset: () => {
+      isReset = true;
+    },
+    isReset: () => {
+      return isReset;
+    }
+  };
+}
+var QueryErrorResetBoundaryContext = /* @__PURE__ */ React3.createContext(createValue());
+var useQueryErrorResetBoundary = () => React3.useContext(QueryErrorResetBoundaryContext);
+
+// ../../node_modules/@tanstack/react-query/build/lib/errorBoundaryUtils.mjs
+import * as React4 from "react";
+
+// ../../node_modules/@tanstack/react-query/build/lib/utils.mjs
+function shouldThrowError(_useErrorBoundary, params) {
+  if (typeof _useErrorBoundary === "function") {
+    return _useErrorBoundary(...params);
+  }
+  return !!_useErrorBoundary;
+}
+
+// ../../node_modules/@tanstack/react-query/build/lib/errorBoundaryUtils.mjs
+var ensurePreventErrorBoundaryRetry = (options, errorResetBoundary) => {
+  if (options.suspense || options.useErrorBoundary) {
+    if (!errorResetBoundary.isReset()) {
+      options.retryOnMount = false;
+    }
+  }
+};
+var useClearResetErrorBoundary = (errorResetBoundary) => {
+  React4.useEffect(() => {
+    errorResetBoundary.clearReset();
+  }, [errorResetBoundary]);
+};
+var getHasError = ({
+  result,
+  errorResetBoundary,
+  useErrorBoundary,
+  query
+}) => {
+  return result.isError && !errorResetBoundary.isReset() && !result.isFetching && shouldThrowError(useErrorBoundary, [result.error, query]);
+};
+
+// ../../node_modules/@tanstack/react-query/build/lib/suspense.mjs
+var ensureStaleTime = (defaultedOptions) => {
+  if (defaultedOptions.suspense) {
+    if (typeof defaultedOptions.staleTime !== "number") {
+      defaultedOptions.staleTime = 1e3;
+    }
+  }
+};
+var willFetch = (result, isRestoring) => result.isLoading && result.isFetching && !isRestoring;
+var shouldSuspend = (defaultedOptions, result, isRestoring) => (defaultedOptions == null ? void 0 : defaultedOptions.suspense) && willFetch(result, isRestoring);
+var fetchOptimistic = (defaultedOptions, observer, errorResetBoundary) => observer.fetchOptimistic(defaultedOptions).then(({
+  data
+}) => {
+  defaultedOptions.onSuccess == null ? void 0 : defaultedOptions.onSuccess(data);
+  defaultedOptions.onSettled == null ? void 0 : defaultedOptions.onSettled(data, null);
+}).catch((error) => {
+  errorResetBoundary.clearReset();
+  defaultedOptions.onError == null ? void 0 : defaultedOptions.onError(error);
+  defaultedOptions.onSettled == null ? void 0 : defaultedOptions.onSettled(void 0, error);
+});
+
+// ../../node_modules/@tanstack/react-query/build/lib/useBaseQuery.mjs
+import * as React5 from "react";
+function useBaseQuery(options, Observer) {
+  const queryClient = useQueryClient({
+    context: options.context
+  });
+  const isRestoring = useIsRestoring();
+  const errorResetBoundary = useQueryErrorResetBoundary();
+  const defaultedOptions = queryClient.defaultQueryOptions(options);
+  defaultedOptions._optimisticResults = isRestoring ? "isRestoring" : "optimistic";
+  if (defaultedOptions.onError) {
+    defaultedOptions.onError = notifyManager.batchCalls(defaultedOptions.onError);
+  }
+  if (defaultedOptions.onSuccess) {
+    defaultedOptions.onSuccess = notifyManager.batchCalls(defaultedOptions.onSuccess);
+  }
+  if (defaultedOptions.onSettled) {
+    defaultedOptions.onSettled = notifyManager.batchCalls(defaultedOptions.onSettled);
+  }
+  ensureStaleTime(defaultedOptions);
+  ensurePreventErrorBoundaryRetry(defaultedOptions, errorResetBoundary);
+  useClearResetErrorBoundary(errorResetBoundary);
+  const [observer] = React5.useState(() => new Observer(queryClient, defaultedOptions));
+  const result = observer.getOptimisticResult(defaultedOptions);
+  useSyncExternalStore(React5.useCallback((onStoreChange) => {
+    const unsubscribe = isRestoring ? () => void 0 : observer.subscribe(notifyManager.batchCalls(onStoreChange));
+    observer.updateResult();
+    return unsubscribe;
+  }, [observer, isRestoring]), () => observer.getCurrentResult(), () => observer.getCurrentResult());
+  React5.useEffect(() => {
+    observer.setOptions(defaultedOptions, {
+      listeners: false
+    });
+  }, [defaultedOptions, observer]);
+  if (shouldSuspend(defaultedOptions, result, isRestoring)) {
+    throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary);
+  }
+  if (getHasError({
+    result,
+    errorResetBoundary,
+    useErrorBoundary: defaultedOptions.useErrorBoundary,
+    query: observer.getCurrentQuery()
+  })) {
+    throw result.error;
+  }
+  return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result;
+}
+
+// ../../node_modules/@tanstack/react-query/build/lib/useQuery.mjs
+function useQuery(arg1, arg2, arg3) {
+  const parsedOptions = parseQueryArgs(arg1, arg2, arg3);
+  return useBaseQuery(parsedOptions, QueryObserver);
+}
+
+// src/lib/useUploadCore.tsx
+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 Upload2(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;
+  });
+}
+function useUploadCore(file, options, queryOptions) {
+  const isQueryEnabled = !!file;
+  return useQuery(__spreadValues({
+    queryKey: ["upload", file.name, options],
+    queryFn: () => startUpload2(file, options),
+    enabled: isQueryEnabled,
+    retry: false,
+    refetchOnWindowFocus: false
+  }, queryOptions));
+}
+
+// src/lib/FileList.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var FileRow = ({
+  file,
+  options,
+  onRemoveFile,
+  queryOptions,
+  customFileRow: CustomRow,
+  disableRemove = false
+}) => {
+  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",
@@ -742,17 +2033,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, {})
       ]
     }
   );
@@ -766,8 +2057,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,
@@ -782,17 +2073,83 @@ var FileList = ({
   }) });
 };
 
-// src/lib/FileSelector.tsx
-import { useState as useState3 } from "react";
-import { useFormContext as useFormContext2 } from "react-hook-form";
-import { useQueryClient } from "@tanstack/react-query";
+// 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 { Typography as Typography5 } from "@availity/mui-typography";
+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 useState5 } from "react";
+import { useFormContext as useFormContext3 } from "react-hook-form";
+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,
@@ -802,17 +2159,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 ",
@@ -821,7 +2178,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,
@@ -850,10 +2207,10 @@ var FileSelector = ({
   validator,
   disableRemove
 }) => {
-  const [totalSize, setTotalSize] = useState3(0);
-  const [fileRejections, setFileRejections] = useState3([]);
+  const [totalSize, setTotalSize] = useState5(0);
+  const [fileRejections, setFileRejections] = useState5([]);
   const client = useQueryClient();
-  const formMethods = useFormContext2();
+  const formMethods = useFormContext3();
   const options = __spreadProps(__spreadValues({}, uploadOptions), {
     bucketId,
     customerId,
@@ -892,10 +2249,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,
@@ -912,7 +2269,7 @@ var FileSelector = ({
           validator
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         FileTypesMessage,
         {
           allowedFileTypes,
@@ -923,10 +2280,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,
@@ -936,8 +2293,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,
@@ -955,20 +2312,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,
@@ -978,7 +2335,7 @@ var FileSelector = ({
       },
       rejection.id
     )),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       FileList,
       {
         files: files || [],
@@ -991,16 +2348,223 @@ var FileSelector = ({
     )
   ] });
 };
+
+// src/lib/FileSelector2.tsx
+import { useState as useState6 } 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] = useState6(0);
+  const [fileRejections, setFileRejections] = useState6([]);
+  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
 };
+/*! Bundled license information:
+
+use-sync-external-store/cjs/use-sync-external-store-shim.production.js:
+  (**
+   * @license React
+   * use-sync-external-store-shim.production.js
+   *
+   * Copyright (c) Meta Platforms, Inc. and affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+
+use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
+  (**
+   * @license React
+   * use-sync-external-store-shim.development.js
+   *
+   * Copyright (c) Meta Platforms, Inc. and affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   *)
+*/