@availity/mui-file-selector 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.2.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.2.0...@availity/mui-file-selector@1.2.1) (2025-03-21)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `1.2.0`
+* `mui-dialog` updated to version `1.2.0`
+* `mui-textfield` updated to version `1.2.0`
+## [1.2.0](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.1.2...@availity/mui-file-selector@1.2.0) (2025-03-13)
+
+
+### Features
+
+* **mui-file-selector:** add encrypted file support ([831383d](https://github.com/Availity/element/commit/831383d7c1470f0fbb086b40f268a60925268656))
+
 ## [1.1.2](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.1.1...@availity/mui-file-selector@1.1.2) (2025-03-12)
 
 ## [1.1.1](https://github.com/Availity/element/compare/@availity/mui-file-selector@1.1.0...@availity/mui-file-selector@1.1.1) (2025-03-07)

package/dist/index.js

@@ -347,46 +347,236 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
 
 // src/lib/FileList.tsx
 var import_mui_list2 = require("@availity/mui-list");
-var import_mui_button2 = require("@availity/mui-button");
-var import_mui_icon4 = require("@availity/mui-icon");
-var import_mui_layout2 = require("@availity/mui-layout");
+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");
 
 // src/lib/UploadProgressBar.tsx
-var import_react2 = require("react");
-var import_mui_progress = require("@availity/mui-progress");
+var import_react3 = 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_icon2 = require("@availity/mui-icon");
-var import_mui_list = require("@availity/mui-list");
 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_icon2.CloseIcon, { fontSize: "xsmall" }) }));
+var CloseButtonSlot = (0, import_styles2.styled)(CloseButton, {
+  name: "MuiDialog",
+  slot: "AvCloseButton",
+  overridesResolver: (props, styles) => styles.avCloseButton
+})({
+  position: "absolute",
+  top: ".5rem",
+  right: ".5rem",
+  "~ .MuiDialogTitle-root": {
+    marginRight: "3.5rem"
+  }
+});
+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,
+    children
+  ] }));
+};
+
+// ../dialog/src/lib/DialogActions.tsx
+var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
+var import_jsx_runtime5 = 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 }));
+};
+
+// ../dialog/src/lib/DialogContent.tsx
+var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
+var import_jsx_runtime6 = 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 }));
+};
+
+// ../dialog/src/lib/DialogContentText.tsx
+var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"));
+var import_jsx_runtime7 = 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 AlertIcon = (0, import_styles3.styled)("div", {
+  name: "MuiDialogTitle",
+  slot: "AvIcon",
+  overridesResolver: (props, styles) => styles.avIcon
+})({
+  display: "inline-flex",
+  fontSize: "inherit",
+  marginRight: ".5rem",
+  verticalAlign: "text-bottom"
+});
+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,
+    children
+  ] }));
+};
+
+// src/lib/UploadProgressBar.tsx
+var import_mui_form_utils3 = require("@availity/mui-form-utils");
+var import_mui_icon3 = require("@availity/mui-icon");
+var import_mui_layout3 = require("@availity/mui-layout");
+var import_mui_list = require("@availity/mui-list");
+var import_mui_progress = require("@availity/mui-progress");
+
+// ../textfield/src/lib/TextField.tsx
+var import_react2 = 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_styles4 = require("@mui/material/styles");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SelectPlaceholder = (0, import_styles4.styled)("span", {
+  name: "MuiTextField",
+  slot: "SelectPlaceholder",
+  overridesResolver: (props, styles) => styles.avFilled
+})(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
+var TextField = (0, import_react2.forwardRef)((props, ref) => {
+  var _b, _c, _d, _e, _f, _g, _h;
+  const _a = props, {
+    InputProps: InputProps2,
+    helpTopicId,
+    InputLabelProps,
+    FormHelperTextProps: FormHelperTextProps2,
+    required,
+    SelectProps: SelectProps2,
+    inputProps,
+    helperText,
+    showCharacterCount = false
+  } = _a, rest = __objRest(_a, [
+    "InputProps",
+    "helpTopicId",
+    "InputLabelProps",
+    "FormHelperTextProps",
+    "required",
+    "SelectProps",
+    "inputProps",
+    "helperText",
+    "showCharacterCount"
+  ]);
+  const [openDetected, setOpenDetected] = (0, import_react2.useState)(false);
+  const [charCount, setCharCount] = (0, import_react2.useState)(0);
+  const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_TextField.default,
+    __spreadProps(__spreadValues({}, rest), {
+      onChange: (event) => {
+        setCharCount(event.target.value.length);
+        if (rest.onChange) rest.onChange(event);
+      },
+      helperText: showCharacterCount ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_mui_layout2.Grid, { container: true, justifyContent: "space-between", children: [
+        helperText,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { marginLeft: 4 }, children: [
+          charCount || 0,
+          "/",
+          (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
+        ] })
+      ] }) : helperText,
+      slots: { formHelperText: import_mui_form_utils2.FormHelperText },
+      slotProps: {
+        input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils2.InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
+        htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
+        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+          displayEmpty: !!rest.placeholder,
+          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
+        }, SelectProps2), import_mui_form_utils2.SelectPropOverrides), (0, import_mui_form_utils2.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
+        inputLabel: resolvedProps(__spreadValues(__spreadValues({
+          component: import_mui_form_utils2.FormLabel,
+          helpTopicId,
+          required,
+          shrink: true
+        }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
+        formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
+      },
+      ref
+    })
+  );
+});
+
+// src/lib/UploadProgressBar.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
-  const [statePercentage, setStatePercentage] = (0, import_react2.useState)(upload.percentage || 0);
-  const [error, setError] = (0, import_react2.useState)(false);
+  const [statePercentage, setStatePercentage] = (0, import_react3.useState)(upload.percentage || 0);
+  const [errorMessage, setErrorMessage] = (0, import_react3.useState)(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 handleOnProgress = () => {
     setStatePercentage(upload.percentage);
-    setError(false);
+    setErrorMessage("");
     if (onProgress) onProgress(upload);
   };
   const handleOnError = () => {
-    setError(true);
+    setErrorMessage(upload.errorMessage || "Error");
     if (onError) onError(upload);
   };
   const handleOnSuccess = () => {
     setStatePercentage(100);
-    setError(false);
+    setErrorMessage("");
     if (onSuccess) onSuccess(upload);
   };
+  const toggleModal = () => {
+    setModalOpen((prev) => !prev);
+    setPassword("");
+  };
+  const verifyPassword = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    upload.sendPassword(password);
+    toggleModal();
+  };
+  const handlePasswordChange = (event) => {
+    setPassword(event.target.value);
+  };
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return upload.errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_mui_list.ListItemText, { primaryTypographyProps: { color: "text.error", variant: "body2" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_icon2.WarningTriangleIcon, {}),
-    " ",
-    upload.errorMessage
-  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+  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)(import_mui_list.ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.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)(
+          TextField,
+          {
+            type: showPassword ? "text" : "password",
+            name: "upload-password",
+            label: "Password",
+            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)(import_mui_button3.IconButton, { title: "password visibility", onClick: () => setShowPassword((prev) => !prev), edge: "end", children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_icon3.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_runtime10.jsx)(import_mui_progress.LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
 };
 
 // src/lib/util.ts
-var import_mui_icon3 = require("@availity/mui-icon");
+var import_mui_icon4 = require("@availity/mui-icon");
 function formatBytes(bytes, decimals = 2) {
   if (!+bytes) return "0 Bytes";
   const k = 1024;
@@ -396,30 +586,30 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 var FILE_EXT_ICONS = {
-  png: import_mui_icon3.FileImageIcon,
-  jpg: import_mui_icon3.FileImageIcon,
-  jpeg: import_mui_icon3.FileImageIcon,
-  gif: import_mui_icon3.FileImageIcon,
-  csv: import_mui_icon3.FileCsvIcon,
-  ppt: import_mui_icon3.FilePowerpointIcon,
-  pptx: import_mui_icon3.FilePowerpointIcon,
-  xls: import_mui_icon3.FileExcelIcon,
-  xlsx: import_mui_icon3.FileExcelIcon,
-  doc: import_mui_icon3.FileWordIcon,
-  docx: import_mui_icon3.FileWordIcon,
-  txt: import_mui_icon3.FileLinesIcon,
-  text: import_mui_icon3.FileLinesIcon,
-  zip: import_mui_icon3.FileArchiveIcon,
-  "7zip": import_mui_icon3.FileArchiveIcon,
-  xml: import_mui_icon3.FileCodeIcon,
-  html: import_mui_icon3.FileCodeIcon,
-  pdf: import_mui_icon3.FilePdfIcon
+  png: import_mui_icon4.FileImageIcon,
+  jpg: import_mui_icon4.FileImageIcon,
+  jpeg: import_mui_icon4.FileImageIcon,
+  gif: import_mui_icon4.FileImageIcon,
+  csv: import_mui_icon4.FileCsvIcon,
+  ppt: import_mui_icon4.FilePowerpointIcon,
+  pptx: import_mui_icon4.FilePowerpointIcon,
+  xls: import_mui_icon4.FileExcelIcon,
+  xlsx: import_mui_icon4.FileExcelIcon,
+  doc: import_mui_icon4.FileWordIcon,
+  docx: import_mui_icon4.FileWordIcon,
+  txt: import_mui_icon4.FileLinesIcon,
+  text: import_mui_icon4.FileLinesIcon,
+  zip: import_mui_icon4.FileArchiveIcon,
+  "7zip": import_mui_icon4.FileArchiveIcon,
+  xml: import_mui_icon4.FileCodeIcon,
+  html: import_mui_icon4.FileCodeIcon,
+  pdf: import_mui_icon4.FilePdfIcon
 };
 var isValidKey = (key) => key ? key in FILE_EXT_ICONS : false;
 var getFileExtIcon = (fileName) => {
   var _a;
   const ext = ((_a = fileName.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "";
-  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : import_mui_icon3.FileIcon;
+  const icon = isValidKey(ext) ? FILE_EXT_ICONS[ext] : import_mui_icon4.FileIcon;
   return icon;
 };
 
@@ -449,7 +639,7 @@ function useUploadCore(file, options, queryOptions) {
 }
 
 // src/lib/FileList.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var FileRow = ({
   file,
   options,
@@ -460,31 +650,31 @@ var FileRow = ({
 }) => {
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options, queryOptions);
-  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CustomRow, { upload, options, onRemoveFile });
+  if (CustomRow) return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     import_mui_list2.ListItem,
     {
       disableGutters: true,
-      secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_mui_button2.IconButton,
+      secondaryAction: !disableRemove && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_mui_button4.IconButton,
         {
           title: "remove file",
           edge: "end",
           onClick: () => {
             onRemoveFile(upload.id, upload);
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon4.DeleteIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_icon5.DeleteIcon, {})
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_mui_layout2.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { size: { xs: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { size: { xs: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { size: { xs: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.ListItemText, { children: formatBytes(upload.file.size) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_layout2.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(UploadProgressBar, { upload }) })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_mui_layout4.Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemIcon, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {}) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemText, { children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.ListItemText, { children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_layout4.Grid, { size: { xs: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(UploadProgressBar, { upload }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_divider2.Divider, {})
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_divider2.Divider, {})
       ]
     }
   );
@@ -498,8 +688,8 @@ var FileList = ({
   disableRemove
 }) => {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_list2.List, { children: files.map((file) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_mui_list2.List, { children: files.map((file) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       FileRow,
       {
         file,
@@ -515,15 +705,15 @@ var FileList = ({
 };
 
 // src/lib/FileSelector.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_react_query2 = require("@tanstack/react-query");
-var import_mui_layout3 = require("@availity/mui-layout");
+var import_mui_layout5 = require("@availity/mui-layout");
 var import_mui_typography4 = require("@availity/mui-typography");
 
 // src/lib/FileTypesMessage.tsx
 var import_mui_typography2 = require("@availity/mui-typography");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var FileTypesMessage = ({
   allowedFileTypes = [],
   maxFileSize,
@@ -531,7 +721,7 @@ var FileTypesMessage = ({
 }) => {
   const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
   const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_mui_typography2.Typography, { variant, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_mui_typography2.Typography, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
@@ -539,9 +729,9 @@ var FileTypesMessage = ({
 
 // src/lib/HeaderMessage.tsx
 var import_mui_typography3 = require("@availity/mui-typography");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var HeaderMessage = ({ maxFiles, maxSize }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_mui_typography3.Typography, { variant: "h6", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_mui_typography3.Typography, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
@@ -550,7 +740,7 @@ var HeaderMessage = ({ maxFiles, maxSize }) => {
 };
 
 // src/lib/FileSelector.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -577,8 +767,8 @@ var FileSelector = ({
   validator,
   disableRemove
 }) => {
-  const [totalSize, setTotalSize] = (0, import_react3.useState)(0);
-  const [fileRejections, setFileRejections] = (0, import_react3.useState)([]);
+  const [totalSize, setTotalSize] = (0, import_react4.useState)(0);
+  const [fileRejections, setFileRejections] = (0, import_react4.useState)([]);
   const client = (0, import_react_query2.useQueryClient)();
   const formMethods = (0, import_react_hook_form3.useFormContext)();
   const options = __spreadProps(__spreadValues({}, uploadOptions), {
@@ -612,10 +802,10 @@ var FileSelector = ({
     const rejections = fileRejections.filter((value) => value.id !== id);
     setFileRejections(rejections);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    enableDropArea ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_mui_typography4.Typography, { marginBottom: "4px", children: label }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  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_typography4.Typography, { marginBottom: "4px", children: label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Dropzone,
         {
           name,
@@ -632,15 +822,15 @@ var FileSelector = ({
           validator
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
       children
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_mui_layout3.Grid, { container: true, rowSpacing: 3, flexDirection: "column", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_mui_layout3.Grid, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HeaderMessage, { maxFiles, maxSize }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileTypesMessage, { allowedFileTypes, variant: "body2" })
+    ] }) : /* @__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)(FileTypesMessage, { allowedFileTypes, variant: "body2" })
       ] }),
-      children ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_mui_layout3.Grid, { children }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_mui_layout3.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      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)(
         Dropzone,
         {
           name,
@@ -658,7 +848,7 @@ var FileSelector = ({
         }
       ) })
     ] }),
-    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ErrorAlert,
       {
         errors: rejection.errors,
@@ -668,7 +858,7 @@ var FileSelector = ({
       },
       rejection.id
     )) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       FileList,
       {
         files: files || [],

package/dist/index.mjs

@@ -305,42 +305,238 @@ var ErrorAlert = ({ errors, fileName, id, onClose }) => {
 
 // src/lib/FileList.tsx
 import { List, ListItem, ListItemText as ListItemText2, ListItemIcon } from "@availity/mui-list";
-import { IconButton } from "@availity/mui-button";
+import { IconButton as IconButton3 } from "@availity/mui-button";
 import { DeleteIcon } from "@availity/mui-icon";
-import { Grid } from "@availity/mui-layout";
+import { Grid as Grid2 } from "@availity/mui-layout";
 import { Divider as Divider2 } from "@availity/mui-divider";
 
 // src/lib/UploadProgressBar.tsx
-import { useState } from "react";
-import { LinearProgress } from "@availity/mui-progress";
-import { WarningTriangleIcon } from "@availity/mui-icon";
+import { useState as useState2 } from "react";
+import { Button as Button2, IconButton as IconButton2 } from "@availity/mui-button";
+
+// ../dialog/src/lib/Dialog.tsx
+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" }) }));
+var CloseButtonSlot = styled2(CloseButton, {
+  name: "MuiDialog",
+  slot: "AvCloseButton",
+  overridesResolver: (props, styles) => styles.avCloseButton
+})({
+  position: "absolute",
+  top: ".5rem",
+  right: ".5rem",
+  "~ .MuiDialogTitle-root": {
+    marginRight: "3.5rem"
+  }
+});
+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,
+    children
+  ] }));
+};
+
+// ../dialog/src/lib/DialogActions.tsx
+import MuiDialogActions from "@mui/material/DialogActions";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DialogActions = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx5(MuiDialogActions, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// ../dialog/src/lib/DialogContent.tsx
+import MuiDialogContent from "@mui/material/DialogContent";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DialogContent = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx6(MuiDialogContent, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// ../dialog/src/lib/DialogContentText.tsx
+import MuiDialogContentText from "@mui/material/DialogContentText";
+import { jsx as jsx7 } 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";
+var AlertIcon = styled3("div", {
+  name: "MuiDialogTitle",
+  slot: "AvIcon",
+  overridesResolver: (props, styles) => styles.avIcon
+})({
+  display: "inline-flex",
+  fontSize: "inherit",
+  marginRight: ".5rem",
+  verticalAlign: "text-bottom"
+});
+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,
+    children
+  ] }));
+};
+
+// 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 { ListItemText } from "@availity/mui-list";
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { LinearProgress } from "@availity/mui-progress";
+
+// ../textfield/src/lib/TextField.tsx
+import { forwardRef, useState } from "react";
+import MuiTextField from "@mui/material/TextField";
+import {
+  FormHelperText,
+  FormLabel,
+  InputPropOverrides,
+  SelectAccessibilityOverrides,
+  SelectPropOverrides
+} from "@availity/mui-form-utils";
+import { Grid } from "@availity/mui-layout";
+import { styled as styled4 } from "@mui/material/styles";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var SelectPlaceholder = styled4("span", {
+  name: "MuiTextField",
+  slot: "SelectPlaceholder",
+  overridesResolver: (props, styles) => styles.avFilled
+})(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
+var TextField = forwardRef((props, ref) => {
+  var _b, _c, _d, _e, _f, _g, _h;
+  const _a = props, {
+    InputProps: InputProps2,
+    helpTopicId,
+    InputLabelProps,
+    FormHelperTextProps: FormHelperTextProps2,
+    required,
+    SelectProps: SelectProps2,
+    inputProps,
+    helperText,
+    showCharacterCount = false
+  } = _a, rest = __objRest(_a, [
+    "InputProps",
+    "helpTopicId",
+    "InputLabelProps",
+    "FormHelperTextProps",
+    "required",
+    "SelectProps",
+    "inputProps",
+    "helperText",
+    "showCharacterCount"
+  ]);
+  const [openDetected, setOpenDetected] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+  const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
+  return /* @__PURE__ */ jsx9(
+    MuiTextField,
+    __spreadProps(__spreadValues({}, rest), {
+      onChange: (event) => {
+        setCharCount(event.target.value.length);
+        if (rest.onChange) rest.onChange(event);
+      },
+      helperText: showCharacterCount ? /* @__PURE__ */ jsxs6(Grid, { container: true, justifyContent: "space-between", children: [
+        helperText,
+        " ",
+        /* @__PURE__ */ jsxs6("span", { style: { marginLeft: 4 }, children: [
+          charCount || 0,
+          "/",
+          (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
+        ] })
+      ] }) : helperText,
+      slots: { formHelperText: FormHelperText },
+      slotProps: {
+        input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
+        htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
+        select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+          displayEmpty: !!rest.placeholder,
+          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ jsx9(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
+        }, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
+        inputLabel: resolvedProps(__spreadValues(__spreadValues({
+          component: FormLabel,
+          helpTopicId,
+          required,
+          shrink: true
+        }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
+        formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
+      },
+      ref
+    })
+  );
+});
+
+// src/lib/UploadProgressBar.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var UploadProgressBar = ({ upload, onProgress, onError, onSuccess }) => {
-  const [statePercentage, setStatePercentage] = useState(upload.percentage || 0);
-  const [error, setError] = useState(false);
+  const [statePercentage, setStatePercentage] = useState2(upload.percentage || 0);
+  const [errorMessage, setErrorMessage] = useState2(upload.errorMessage || "");
+  const [password, setPassword] = useState2("");
+  const [showPassword, setShowPassword] = useState2(false);
+  const [modalOpen, setModalOpen] = useState2(false);
   const handleOnProgress = () => {
     setStatePercentage(upload.percentage);
-    setError(false);
+    setErrorMessage("");
     if (onProgress) onProgress(upload);
   };
   const handleOnError = () => {
-    setError(true);
+    setErrorMessage(upload.errorMessage || "Error");
     if (onError) onError(upload);
   };
   const handleOnSuccess = () => {
     setStatePercentage(100);
-    setError(false);
+    setErrorMessage("");
     if (onSuccess) onSuccess(upload);
   };
+  const toggleModal = () => {
+    setModalOpen((prev) => !prev);
+    setPassword("");
+  };
+  const verifyPassword = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    upload.sendPassword(password);
+    toggleModal();
+  };
+  const handlePasswordChange = (event) => {
+    setPassword(event.target.value);
+  };
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
-  return upload.errorMessage ? /* @__PURE__ */ jsx4(Fragment4, { children: /* @__PURE__ */ jsxs4(ListItemText, { primaryTypographyProps: { color: "text.error", variant: "body2" }, children: [
-    /* @__PURE__ */ jsx4(WarningTriangleIcon, {}),
-    " ",
-    upload.errorMessage
-  ] }) }) : /* @__PURE__ */ jsx4(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
+  return errorMessage ? /* @__PURE__ */ jsxs7(Box2, { sx: { display: "flex", flexWrap: "wrap", columnGap: "4px" }, children: [
+    /* @__PURE__ */ jsxs7(ListItemText, { slotProps: { primary: { color: "text.error", variant: "body2", component: "div" } }, children: [
+      /* @__PURE__ */ jsx10(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(
+          TextField,
+          {
+            type: showPassword ? "text" : "password",
+            name: "upload-password",
+            label: "Password",
+            onChange: handlePasswordChange,
+            autoFocus: true,
+            InputProps: {
+              endAdornment: /* @__PURE__ */ jsx10(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx10(IconButton2, { title: "password visibility", onClick: () => setShowPassword((prev) => !prev), edge: "end", children: showPassword ? /* @__PURE__ */ jsx10(EyeIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx10(EyeSlashIcon, { fontSize: "small" }) }) })
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx10(DialogActions, { children: /* @__PURE__ */ jsx10(Button2, { color: "primary", type: "submit", children: "Ok" }) })
+      ] }) })
+    ] })
+  ] }) : /* @__PURE__ */ jsx10(LinearProgress, { value: statePercentage, "aria-label": `${upload.file.name}-progress` });
 };
 
 // src/lib/util.ts
@@ -418,7 +614,7 @@ function useUploadCore(file, options, queryOptions) {
 }
 
 // src/lib/FileList.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var FileRow = ({
   file,
   options,
@@ -429,31 +625,31 @@ var FileRow = ({
 }) => {
   const Icon = getFileExtIcon(file.name);
   const { data: upload } = useUploadCore(file, options, queryOptions);
-  if (CustomRow) return /* @__PURE__ */ jsx5(CustomRow, { upload, options, onRemoveFile });
+  if (CustomRow) return /* @__PURE__ */ jsx11(CustomRow, { upload, options, onRemoveFile });
   if (!upload) return null;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs8(
     ListItem,
     {
       disableGutters: true,
-      secondaryAction: !disableRemove && /* @__PURE__ */ jsx5(
-        IconButton,
+      secondaryAction: !disableRemove && /* @__PURE__ */ jsx11(
+        IconButton3,
         {
           title: "remove file",
           edge: "end",
           onClick: () => {
             onRemoveFile(upload.id, upload);
           },
-          children: /* @__PURE__ */ jsx5(DeleteIcon, {})
+          children: /* @__PURE__ */ jsx11(DeleteIcon, {})
         }
       ),
       children: [
-        /* @__PURE__ */ jsxs5(Grid, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
-          /* @__PURE__ */ jsx5(Grid, { size: { xs: 1 }, children: /* @__PURE__ */ jsx5(ListItemIcon, { children: /* @__PURE__ */ jsx5(Icon, {}) }) }),
-          /* @__PURE__ */ jsx5(Grid, { size: { xs: 3 }, children: /* @__PURE__ */ jsx5(ListItemText2, { children: upload.trimFileName(upload.file.name) }) }),
-          /* @__PURE__ */ jsx5(Grid, { size: { xs: 2 }, children: /* @__PURE__ */ jsx5(ListItemText2, { children: formatBytes(upload.file.size) }) }),
-          /* @__PURE__ */ jsx5(Grid, { size: { xs: 6 }, children: /* @__PURE__ */ jsx5(UploadProgressBar, { upload }) })
+        /* @__PURE__ */ jsxs8(Grid2, { container: true, spacing: 2, alignItems: "center", justifyContent: "space-between", width: "100%", children: [
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 1 }, children: /* @__PURE__ */ jsx11(ListItemIcon, { children: /* @__PURE__ */ jsx11(Icon, {}) }) }),
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 3 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: upload.trimFileName(upload.file.name) }) }),
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 2 }, children: /* @__PURE__ */ jsx11(ListItemText2, { children: formatBytes(upload.file.size) }) }),
+          /* @__PURE__ */ jsx11(Grid2, { size: { xs: 6 }, children: /* @__PURE__ */ jsx11(UploadProgressBar, { upload }) })
         ] }),
-        /* @__PURE__ */ jsx5(Divider2, {})
+        /* @__PURE__ */ jsx11(Divider2, {})
       ]
     }
   );
@@ -467,8 +663,8 @@ var FileList = ({
   disableRemove
 }) => {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ jsx5(List, { children: files.map((file) => {
-    return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx11(List, { children: files.map((file) => {
+    return /* @__PURE__ */ jsx11(
       FileRow,
       {
         file,
@@ -484,15 +680,15 @@ var FileList = ({
 };
 
 // src/lib/FileSelector.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { useFormContext as useFormContext2 } from "react-hook-form";
 import { useQueryClient } from "@tanstack/react-query";
-import { Grid as Grid2 } from "@availity/mui-layout";
+import { Grid as Grid3 } from "@availity/mui-layout";
 import { Typography as Typography4 } from "@availity/mui-typography";
 
 // src/lib/FileTypesMessage.tsx
 import { Typography as Typography2 } from "@availity/mui-typography";
-import { jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsxs as jsxs9 } from "react/jsx-runtime";
 var FileTypesMessage = ({
   allowedFileTypes = [],
   maxFileSize,
@@ -500,7 +696,7 @@ var FileTypesMessage = ({
 }) => {
   const fileSizeMsg = typeof maxFileSize === "number" ? `Maximum file size is ${formatBytes(maxFileSize)}. ` : null;
   const fileTypesMsg = allowedFileTypes.length > 0 ? `Supported file types include: ${allowedFileTypes.join(", ")}` : "All file types allowed.";
-  return /* @__PURE__ */ jsxs6(Typography2, { variant, children: [
+  return /* @__PURE__ */ jsxs9(Typography2, { variant, children: [
     fileSizeMsg,
     fileTypesMsg
   ] });
@@ -508,9 +704,9 @@ var FileTypesMessage = ({
 
 // src/lib/HeaderMessage.tsx
 import { Typography as Typography3 } from "@availity/mui-typography";
-import { jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsxs as jsxs10 } from "react/jsx-runtime";
 var HeaderMessage = ({ maxFiles, maxSize }) => {
-  return /* @__PURE__ */ jsxs7(Typography3, { variant: "h6", children: [
+  return /* @__PURE__ */ jsxs10(Typography3, { variant: "h6", children: [
     "Attach up to ",
     maxFiles,
     " file(s), with a maximum individual size of ",
@@ -519,7 +715,7 @@ var HeaderMessage = ({ maxFiles, maxSize }) => {
 };
 
 // src/lib/FileSelector.tsx
-import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var CLOUD_URL = "/cloud/web/appl/vault/upload/v1/resumable";
 var FileSelector = ({
   name,
@@ -546,8 +742,8 @@ var FileSelector = ({
   validator,
   disableRemove
 }) => {
-  const [totalSize, setTotalSize] = useState2(0);
-  const [fileRejections, setFileRejections] = useState2([]);
+  const [totalSize, setTotalSize] = useState3(0);
+  const [fileRejections, setFileRejections] = useState3([]);
   const client = useQueryClient();
   const formMethods = useFormContext2();
   const options = __spreadProps(__spreadValues({}, uploadOptions), {
@@ -581,10 +777,10 @@ var FileSelector = ({
     const rejections = fileRejections.filter((value) => value.id !== id);
     setFileRejections(rejections);
   };
-  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
-    enableDropArea ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
-      label ? /* @__PURE__ */ jsx6(Typography4, { marginBottom: "4px", children: label }) : null,
-      /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    enableDropArea ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      label ? /* @__PURE__ */ jsx12(Typography4, { marginBottom: "4px", children: label }) : null,
+      /* @__PURE__ */ jsx12(
         Dropzone,
         {
           name,
@@ -601,15 +797,15 @@ var FileSelector = ({
           validator
         }
       ),
-      /* @__PURE__ */ jsx6(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
+      /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, maxFileSize: maxSize, variant: "caption" }),
       children
-    ] }) : /* @__PURE__ */ jsxs8(Grid2, { container: true, rowSpacing: 3, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs8(Grid2, { children: [
-        /* @__PURE__ */ jsx6(HeaderMessage, { maxFiles, maxSize }),
-        /* @__PURE__ */ jsx6(FileTypesMessage, { allowedFileTypes, variant: "body2" })
+    ] }) : /* @__PURE__ */ jsxs11(Grid3, { container: true, rowSpacing: 3, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs11(Grid3, { children: [
+        /* @__PURE__ */ jsx12(HeaderMessage, { maxFiles, maxSize }),
+        /* @__PURE__ */ jsx12(FileTypesMessage, { allowedFileTypes, variant: "body2" })
       ] }),
-      children ? /* @__PURE__ */ jsx6(Grid2, { children }) : null,
-      /* @__PURE__ */ jsx6(Grid2, { children: /* @__PURE__ */ jsx6(
+      children ? /* @__PURE__ */ jsx12(Grid3, { children }) : null,
+      /* @__PURE__ */ jsx12(Grid3, { children: /* @__PURE__ */ jsx12(
         Dropzone,
         {
           name,
@@ -627,7 +823,7 @@ var FileSelector = ({
         }
       ) })
     ] }),
-    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ jsx6(
+    fileRejections.length > 0 ? fileRejections.map((rejection) => /* @__PURE__ */ jsx12(
       ErrorAlert,
       {
         errors: rejection.errors,
@@ -637,7 +833,7 @@ var FileSelector = ({
       },
       rejection.id
     )) : null,
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx12(
       FileList,
       {
         files: files || [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-file-selector",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "description": "Availity MUI file-selector Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -44,7 +44,7 @@
     "@availity/mui-alert": "^1.0.1",
     "@availity/mui-button": "^1.0.1",
     "@availity/mui-divider": "^1.0.1",
-    "@availity/mui-form-utils": "^1.0.1",
+    "@availity/mui-form-utils": "^1.1.0",
     "@availity/mui-icon": "^1.0.1",
     "@availity/mui-layout": "^1.0.1",
     "@availity/mui-list": "^1.0.1",

package/src/lib/FileSelector.stories.tsx

@@ -33,6 +33,21 @@ const meta: Meta<typeof FileSelector> = {
       </QueryClientProvider>
     ),
   ],
+  args: {
+    name: 'file-selector',
+    allowedFileTypes: ['.txt', '.png', '.pdf'],
+    clientId: '123',
+    customerId: '456',
+    bucketId: '789',
+    uploadOptions: {
+      retryDelays: [],
+    },
+    maxFiles: 5,
+    maxSize: 1 * 1024 * 1024, // 1MB
+    enableDropArea: true,
+    isCloud: true,
+    multiple: true,
+  },
 };
 
 export default meta;
@@ -85,7 +100,91 @@ export const _FileSelector: StoryObj<typeof FileSelector> = {
               </DismissableAlert>
             </FileSelector>
             {files.length > 0 && (
-              <Grid xs={12} justifyContent="end" display="flex" paddingTop={2.5}>
+              <Grid size={{xs: 12}} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+};
+
+/** Set `enableDropzone` to `false` for a button only file selector. */
+export const _ButtonOnly: StoryObj<typeof FileSelector> = {
+  render: (props: FileSelectorProps) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const client = useQueryClient();
+
+    const files = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+
+      const queries = client.getQueriesData<Upload>(['upload']);
+      const uploads = [];
+      for (const [, data] of queries) {
+        if (data) uploads.push(data);
+      }
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector {...props} enableDropArea={false}/>
+            {files.length > 0 && (
+              <Grid size={{xs: 12}} justifyContent="end" display="flex" paddingTop={2.5}>
+                <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
+                  Submit
+                </Button>
+              </Grid>
+            )}
+          </form>
+        </FormProvider>
+      </Paper>
+    );
+  },
+};
+
+/** Upload password protected files. _For this example, the password for any file is '1234'_ */
+export const _Encrypted: StoryObj<typeof FileSelector> = {
+  render: (props: Omit<FileSelectorProps, 'bucketId'>) => {
+    const methods = useForm({
+      defaultValues: {
+        [props.name]: [] as File[],
+      },
+    });
+
+    const client = useQueryClient();
+
+    const files = methods.watch(props.name);
+
+    const handleOnSubmit = (values: Record<string, File[]>) => {
+      if (values[props.name].length === 0) return;
+
+      const queries = client.getQueriesData<Upload>(['upload']);
+      const uploads = [];
+      for (const [, data] of queries) {
+        if (data) uploads.push(data);
+      }
+    };
+
+    return (
+      <Paper sx={{ padding: '2rem' }}>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(handleOnSubmit)}>
+            <FileSelector {...props} bucketId="enc"/>
+            {files.length > 0 && (
+              <Grid size={{xs: 12}} justifyContent="end" display="flex" paddingTop={2.5}>
                 <Button type="submit" sx={{ marginLeft: 'auto', marginRight: 0 }}>
                   Submit
                 </Button>
@@ -97,18 +196,9 @@ export const _FileSelector: StoryObj<typeof FileSelector> = {
     );
   },
   args: {
-    name: 'file-selector',
-    allowedFileTypes: ['.txt', '.png', '.pdf'],
-    clientId: '123',
-    customerId: '456',
-    bucketId: '789',
-    uploadOptions: {
-      retryDelays: [],
-    },
-    maxFiles: 5,
-    maxSize: 1 * 1024 * 1024, // 1MB
-    enableDropArea: true,
-    isCloud: true,
-    multiple: true,
+    bucketId: 'enc'
   },
+  argTypes: {
+    bucketId: { control: false }
+  }
 };

package/src/lib/UploadProgressBar.test.tsx

@@ -37,4 +37,22 @@ describe('UploadProgressBar', () => {
 
     expect(screen.getByText('error message')).toBeTruthy();
   });
+
+  test('should allow passwords for encrypted files', () => {
+    const mockUpload: unknown = {
+      onProgress: [],
+      onError: [],
+      onSuccess: [],
+      errorMessage: 'error message',
+      file: {
+        name: 'test',
+      },
+      status: 'encrypted'
+    };
+
+    render(<UploadProgressBar upload={mockUpload as Upload} />);
+
+    expect(screen.getByText('error message')).toBeTruthy();
+    expect(screen.getByText('Enter Password')).toBeTruthy();
+  });
 });

package/src/lib/UploadProgressBar.tsx

@@ -1,8 +1,13 @@
-import { useState } from 'react';
+import { ChangeEvent, FormEventHandler, useState } from 'react';
+import { Button, IconButton } from '@availity/mui-button';
+import { Dialog, DialogActions, DialogContent, DialogTitle } from '@availity/mui-dialog';
+import { InputAdornment } from '@availity/mui-form-utils';
+import { EyeIcon, EyeSlashIcon, WarningTriangleIcon } from '@availity/mui-icon';
+import { Box } from '@availity/mui-layout';
+import { ListItemText } from '@availity/mui-list';
 import { LinearProgress } from '@availity/mui-progress';
+import { TextField } from '@availity/mui-textfield';
 import type Upload from '@availity/upload-core';
-import { WarningTriangleIcon } from '@availity/mui-icon';
-import { ListItemText } from '@availity/mui-list';
 
 export type UploadProgressBarProps = {
   /**
@@ -25,75 +30,90 @@ export type UploadProgressBarProps = {
 
 export const UploadProgressBar = ({ upload, onProgress, onError, onSuccess }: UploadProgressBarProps) => {
   const [statePercentage, setStatePercentage] = useState(upload.percentage || 0);
-  const [error, setError] = useState(false);
-  // const [password, setPassword] = useState('');
-  // const [modalOpen, setModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(upload.errorMessage || '');
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
 
   const handleOnProgress = () => {
     setStatePercentage(upload.percentage);
-    setError(false);
+    setErrorMessage('');
 
     if (onProgress) onProgress(upload);
   };
 
   const handleOnError = () => {
-    setError(true);
+    setErrorMessage(upload.errorMessage || 'Error');
 
     if (onError) onError(upload);
   };
 
   const handleOnSuccess = () => {
     setStatePercentage(100);
-    setError(false);
+    setErrorMessage('');
 
     if (onSuccess) onSuccess(upload);
   };
 
-  // const toggleModal = () => {
-  //   setModalOpen((prev) => !prev);
-  //   setPassword('');
-  // };
+  const toggleModal = () => {
+    setModalOpen((prev) => !prev);
+    setPassword('');
+  };
 
-  // const verifyPassword: FormEventHandler<HTMLFormElement> = (event) => {
-  //   event.preventDefault();
-  //   event.stopPropagation();
-  //   upload.sendPassword(password);
-  //   toggleModal();
-  // };
+  const verifyPassword: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    upload.sendPassword(password);
+    toggleModal();
+  };
 
-  // const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
-  //   setPassword(event.target.value);
-  // };
+  const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  };
 
   upload.onProgress.push(handleOnProgress);
   upload.onSuccess.push(handleOnSuccess);
   upload.onError.push(handleOnError);
 
-  return upload.errorMessage ? (
-    <>
-      <ListItemText primaryTypographyProps={{ color: 'text.error', variant: 'body2' }}>
-        <WarningTriangleIcon /> {upload.errorMessage}
+  return errorMessage ? (
+    <Box sx={{display: 'flex', flexWrap: 'wrap', columnGap: '4px'}}>
+      <ListItemText slotProps={{primary: { color: 'text.error', variant: 'body2', component: 'div' }}}>
+        <WarningTriangleIcon sx={{verticalAlign: 'middle', mt: '-2px'}}/> {errorMessage}
       </ListItemText>
-      {/* {upload.status === 'encrypted' && (
+      {upload.status === 'encrypted' && (
         <div className="pwRequired">
-          <Button color="primary" onClick={toggleModal}>
-            Enter password
+          <Button color="secondary" size="small" onClick={toggleModal}>
+            Enter Password
           </Button>
-          <Modal isOpen={modalOpen} toggle={toggleModal}>
+          <Dialog open={modalOpen} onClose={toggleModal}>
             <form onSubmit={verifyPassword}>
-              <ModalHeader toggle={toggleModal}>Enter Password</ModalHeader>
-              <ModalBody>
-                <Label for="upload-password">Password</Label>
-                <Input id="upload-password" onChange={handlePasswordChange} type="password" placeholder="password" />
-              </ModalBody>
-              <ModalFooter>
-                <Button color="primary">Ok</Button>
-              </ModalFooter>
+              <DialogTitle>Enter Password</DialogTitle>
+              <DialogContent>
+                <TextField
+                  type={showPassword ? 'text' : 'password'}
+                  name="upload-password"
+                  label="Password"
+                  onChange={handlePasswordChange}
+                  autoFocus
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton title="password visibility" onClick={() => setShowPassword((prev) => !prev)} edge="end">
+                          {showPassword ? <EyeIcon fontSize="small" /> : <EyeSlashIcon fontSize="small" />}
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                />
+              </DialogContent>
+              <DialogActions>
+                <Button color="primary" type="submit">Ok</Button>
+              </DialogActions>
             </form>
-          </Modal>
+          </Dialog>
         </div>
-      )} */}
-    </>
+      )}
+    </Box>
   ) : (
     <LinearProgress value={statePercentage} aria-label={`${upload.file.name}-progress`} />
   );