@startdownnotez404/ui 1.3.5 → 1.3.6

package/dist/process.js

@@ -102,7 +102,7 @@ __export(Process_exports, {
 module.exports = __toCommonJS(Process_exports);
 
 // src/components/compound/Process/src/ProcessModal.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/_utils/_func/random.ts
 function randomStrGenerator(length = 20) {
@@ -386,7 +386,8 @@ var CLASSNAMEs = {
       // button variant used by AvatarButton and related controls
       button: "Elemental-AvatarButton"
     },
-    modal: "Elemental-Modal"
+    modal: "Elemental-Modal",
+    dialog: "Elemental-Dialog"
   },
   compound: {
     useForm: {
@@ -899,174 +900,1171 @@ function MuiModalHeader({
   ] });
 }
 
+// src/components/elemental/FileUpload/src/FileUpload.tsx
+var import_react3 = require("react");
+
+// src/components/elemental/Form/src/FormLabel/FormLabel.tsx
+var import_FormLabel = __toESM(require("@mui/material/FormLabel"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MuiFormLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_FormLabel.default, { ...props });
+}
+
+// src/components/elemental/Form/src/index.ts
+var import_FormControl = __toESM(require("@mui/material/FormControl"));
+var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"));
+var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
+var import_InputLabel = __toESM(require("@mui/material/InputLabel"));
+
 // src/components/elemental/Progress/src/LinearProgress.tsx
 var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var LinearProgress = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_LinearProgress.default, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_LinearProgress.default, { ...props });
 };
 
 // src/components/elemental/Progress/src/CircularProgress.tsx
 var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var CircularProgress = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CircularProgress.default, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_CircularProgress.default, { ...props });
 };
 
-// src/_utils/_const/file.ts
-var FILE_TYPEs = {
-  image: "image",
-  video: "video",
-  audio: "audio",
-  pdf: "pdf",
-  doc: "doc",
-  xls: "xls",
-  ppt: "ppt",
-  txt: "txt",
-  zip: "zip",
-  json: "json",
-  other: "other"
+// src/components/elemental/FileUpload/src/FileUpload.tsx
+var import_react_file_icon = require("react-file-icon");
+
+// src/components/elemental/FileUpload/src/theme.ts
+var fileUploadRootSx = {
+  "--fu-border": "var(--mui-palette-border-1)",
+  "--fu-border-hover": "var(--mui-palette-border-hover-1, var(--mui-palette-text-secondary))",
+  "--fu-border-active": "color-mix(in srgb, var(--mui-palette-text-secondary) 65%, transparent)",
+  "--fu-border-error": "var(--mui-palette-error-main)",
+  "--fu-surface": "color-mix(in srgb, var(--mui-palette-background-paper) 78%, transparent)",
+  "--fu-surface-hover": "color-mix(in srgb, var(--mui-palette-background-paper) 92%, transparent)",
+  "--fu-surface-active": "color-mix(in srgb, var(--mui-palette-primary-main) 8%, var(--mui-palette-background-paper))",
+  "--fu-item-bg": "color-mix(in srgb, var(--mui-palette-background-paper) 88%, transparent)",
+  "--fu-icon": "var(--mui-palette-text-secondary)",
+  "--fu-text": "var(--mui-palette-text-primary)",
+  "--fu-text-secondary": "var(--mui-palette-text-secondary)",
+  "--fu-shadow": "inset 0 1px 0 color-mix(in srgb, var(--mui-palette-common-white) 6%, transparent)",
+  "--fu-radius": "16px",
+  "--fu-item-radius": "12px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 1,
+  width: "100%",
+  boxSizing: "border-box",
+  '[color-scheme="dark"] &': {
+    "--fu-surface": "color-mix(in srgb, var(--mui-palette-background-paper) 70%, transparent)",
+    "--fu-surface-hover": "color-mix(in srgb, var(--mui-palette-background-paper) 88%, transparent)",
+    "--fu-item-bg": "color-mix(in srgb, var(--mui-palette-background-paper) 82%, transparent)",
+    "--fu-shadow": "inset 0 1px 0 color-mix(in srgb, var(--mui-palette-common-white) 8%, transparent), 0 1px 2px rgba(0,0,0,0.18)"
+  }
+};
+var fileUploadDropzoneSx = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  gap: 0.75,
+  px: 3,
+  py: 3.5,
+  minHeight: 140,
+  borderRadius: "var(--fu-radius)",
+  border: "1px dashed var(--fu-drop-border, var(--fu-border))",
+  backgroundColor: "var(--fu-drop-bg, var(--fu-surface))",
+  boxShadow: "var(--fu-shadow)",
+  color: "var(--fu-text-secondary)",
+  cursor: "pointer",
+  outline: "none",
+  boxSizing: "border-box",
+  transition: "border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease",
+  "&:hover": {
+    borderColor: "var(--fu-border-hover)",
+    backgroundColor: "var(--fu-surface-hover)"
+  },
+  "&:focus-visible": {
+    borderColor: "var(--fu-border-active)",
+    borderStyle: "solid"
+  },
+  '&[data-active="true"]': {
+    borderColor: "var(--fu-border-active)",
+    borderStyle: "solid",
+    backgroundColor: "var(--fu-surface-active)"
+  },
+  '&[data-error="true"]': {
+    "--fu-drop-border": "var(--fu-border-error)"
+  },
+  '&[data-disabled="true"]': {
+    opacity: 0.58,
+    cursor: "default",
+    pointerEvents: "none"
+  }
+};
+var fileUploadItemSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 1.25,
+  px: 1.25,
+  py: 1,
+  borderRadius: "var(--fu-item-radius)",
+  border: "1px solid var(--fu-border)",
+  backgroundColor: "var(--fu-item-bg)",
+  boxShadow: "var(--fu-shadow)",
+  boxSizing: "border-box",
+  minWidth: 0,
+  '&[data-status="error"]': {
+    borderColor: "color-mix(in srgb, var(--mui-palette-error-main) 55%, var(--fu-border))",
+    backgroundColor: "color-mix(in srgb, var(--mui-palette-error-main) 8%, var(--fu-item-bg))"
+  }
+};
+var fileUploadThumbSx = {
+  width: 36,
+  height: 36,
+  minWidth: 36,
+  borderRadius: "8px",
+  objectFit: "cover",
+  flexShrink: 0,
+  border: "1px solid var(--fu-border)",
+  backgroundColor: "var(--fu-item-bg)",
+  display: "block",
+  boxSizing: "border-box"
+};
+var fileUploadIconWellSx = {
+  width: 36,
+  height: 36,
+  minWidth: 36,
+  borderRadius: "8px",
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  border: "1px solid var(--fu-border)",
+  backgroundColor: "color-mix(in srgb, var(--mui-palette-background-paper) 55%, transparent)",
+  boxSizing: "border-box",
+  overflow: "hidden"
+};
+var fileUploadLibIconSx = {
+  width: 24,
+  height: 30,
+  lineHeight: 0,
+  flexShrink: 0,
+  // Keep library colors vivid (no opacity / filter / color overrides).
+  color: "unset",
+  filter: "none",
+  opacity: 1,
+  "& svg": {
+    width: "100%",
+    height: "100%",
+    display: "block",
+    // Prevent inherited MUI text color from washing glyph/label fills.
+    color: "unset"
+  }
+};
+var fileUploadButtonSx = {
+  alignSelf: "flex-start",
+  textTransform: "none",
+  fontWeight: 600,
+  fontSize: "0.8125rem",
+  lineHeight: 1.25,
+  borderRadius: "10px",
+  px: 1.5,
+  py: 0.75,
+  minHeight: 36,
+  border: "1px solid var(--fu-border)",
+  backgroundColor: "var(--fu-surface)",
+  color: "var(--fu-text)",
+  boxShadow: "var(--fu-shadow)",
+  transition: "border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease",
+  "&:hover": {
+    borderColor: "var(--fu-border-hover)",
+    backgroundColor: "var(--fu-surface-hover)"
+  },
+  "&:focus-visible": {
+    borderColor: "var(--fu-border-active)",
+    outline: "none"
+  },
+  '&[data-active="true"]': {
+    borderColor: "var(--fu-border-active)",
+    backgroundColor: "var(--fu-surface-active)"
+  },
+  '&[data-error="true"]': {
+    borderColor: "var(--fu-border-error)",
+    color: "var(--fu-border-error)"
+  },
+  "&.Mui-disabled": {
+    opacity: 0.58,
+    borderColor: "var(--fu-border)",
+    color: "var(--fu-text-secondary)"
+  },
+  "& .MuiButton-startIcon": {
+    marginRight: "8px",
+    marginLeft: 0,
+    color: "var(--fu-icon)"
+  }
+};
+var fileUploadTileListSx = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 1.25,
+  m: 0,
+  p: 0,
+  listStyle: "none"
+};
+var fileUploadTileSx = {
+  "--fu-tile-size": "80px",
+  position: "relative",
+  width: "var(--fu-tile-size)",
+  height: "var(--fu-tile-size)",
+  minWidth: "var(--fu-tile-size)",
+  borderRadius: "12px",
+  border: "1px solid var(--fu-border)",
+  backgroundColor: "var(--fu-item-bg)",
+  boxShadow: "var(--fu-shadow)",
+  boxSizing: "border-box",
+  overflow: "hidden",
+  flexShrink: 0,
+  '&[data-status="error"]': {
+    borderColor: "color-mix(in srgb, var(--mui-palette-error-main) 55%, var(--fu-border))"
+  },
+  "&:hover .fu-tile-remove, &:focus-within .fu-tile-remove": {
+    opacity: 1,
+    pointerEvents: "auto"
+  }
+};
+var fileUploadTileMediaSx = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  display: "block",
+  borderRadius: "inherit"
+};
+var fileUploadTileIconWellSx = {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "color-mix(in srgb, var(--mui-palette-background-paper) 55%, transparent)",
+  border: "none",
+  borderRadius: 0,
+  boxSizing: "border-box",
+  overflow: "hidden"
+};
+var fileUploadTileLibIconSx = {
+  width: 36,
+  height: 44,
+  lineHeight: 0,
+  flexShrink: 0,
+  color: "unset",
+  filter: "none",
+  opacity: 1,
+  "& svg": {
+    width: "100%",
+    height: "100%",
+    display: "block",
+    color: "unset"
+  }
+};
+var fileUploadTileRemoveSx = {
+  position: "absolute",
+  top: 4,
+  right: 4,
+  zIndex: 2,
+  width: 22,
+  height: 22,
+  p: 0,
+  opacity: 0,
+  pointerEvents: "none",
+  backgroundColor: "#fff",
+  color: "rgba(15, 23, 42, 0.72)",
+  boxShadow: "0 1px 3px rgba(0,0,0,0.22)",
+  border: "1px solid color-mix(in srgb, var(--mui-palette-common-black) 8%, transparent)",
+  transition: "opacity 140ms ease, background-color 140ms ease",
+  "&:hover": {
+    backgroundColor: "#fff",
+    color: "rgba(15, 23, 42, 0.92)"
+  },
+  "&.Mui-disabled": {
+    opacity: 0
+  }
+};
+var fileUploadTileProgressSx = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 1,
+  height: 3,
+  borderRadius: 0,
+  backgroundColor: "color-mix(in srgb, var(--mui-palette-common-black) 25%, transparent)",
+  "& .MuiLinearProgress-bar": {
+    borderRadius: 0
+  }
 };
 
-// src/components/compound/DisplayFile/src/DisplayFile.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var getFileIcon = (fileType) => {
-  switch (fileType) {
-    case FILE_TYPEs.image:
-      return import_ImageOutlined.default;
-    case FILE_TYPEs.pdf:
-      return import_PictureAsPdf.default;
-    case FILE_TYPEs.audio:
-      return import_AudioFile.default;
-    case FILE_TYPEs.video:
-      return import_VideoFile.default;
-    case FILE_TYPEs.xls:
-      return import_TableChart.default;
-    case FILE_TYPEs.zip:
-      return import_FolderZip.default;
-    case FILE_TYPEs.json:
-      return import_DataObject.default;
-    case FILE_TYPEs.ppt:
-    case FILE_TYPEs.doc:
-    case FILE_TYPEs.txt:
-      return import_Description.default;
-    default:
-      return import_InsertDriveFile.default;
+// src/components/elemental/FileUpload/src/utils.ts
+var idSeq = 0;
+function createFileUploadId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  idSeq += 1;
+  return `fu-${Date.now()}-${idSeq}`;
+}
+function createFileUploadItem(file) {
+  return {
+    id: createFileUploadId(),
+    file,
+    status: "idle",
+    progress: 0
+  };
+}
+function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function parseAccept(accept) {
+  if (!accept || !accept.trim()) return [];
+  return accept.split(",").map((p) => p.trim()).filter(Boolean).map((token) => {
+    if (token.startsWith(".")) {
+      return { type: "ext", value: token.toLowerCase() };
+    }
+    return { type: "mime", value: token.toLowerCase() };
+  });
+}
+function matchesAccept(file, rules) {
+  if (rules.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const mime = (file.type || "").toLowerCase();
+  return rules.some((rule) => {
+    if (rule.type === "ext") {
+      return name.endsWith(rule.value);
+    }
+    if (rule.value.endsWith("/*")) {
+      const prefix = rule.value.slice(0, -1);
+      return mime.startsWith(prefix);
+    }
+    return mime === rule.value;
+  });
+}
+function validateFiles(incoming, opts) {
+  const rules = parseAccept(opts.accept);
+  const accepted = [];
+  const rejections = [];
+  const hardCap = opts.multiple ? opts.maxFiles != null && opts.maxFiles > 0 ? opts.maxFiles : Infinity : 1;
+  for (const file of incoming) {
+    const errors = [];
+    if (!matchesAccept(file, rules)) {
+      errors.push("file-invalid-type");
+    }
+    if (opts.maxSize != null && opts.maxSize > 0 && file.size > opts.maxSize) {
+      errors.push("file-too-large");
+    }
+    if (opts.currentCount + accepted.length >= hardCap) {
+      errors.push("too-many-files");
+    }
+    if (errors.length > 0) {
+      rejections.push({ file, errors });
+    } else {
+      accepted.push(file);
+    }
+  }
+  return { accepted, rejections };
+}
+var MIME_TO_EXT = {
+  "application/pdf": "pdf",
+  "application/zip": "zip",
+  "application/x-zip-compressed": "zip",
+  "application/gzip": "gz",
+  "application/x-gzip": "gz",
+  "application/x-rar-compressed": "rar",
+  "application/vnd.rar": "rar",
+  "application/x-7z-compressed": "7z",
+  "application/x-tar": "tar",
+  "application/json": "json",
+  "application/msword": "doc",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+  "application/vnd.ms-excel": "xls",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "xlsx",
+  "application/vnd.ms-powerpoint": "ppt",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": "pptx",
+  "text/plain": "txt",
+  "text/csv": "csv",
+  "text/markdown": "md",
+  "image/jpeg": "jpg",
+  "image/png": "png",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/svg+xml": "svg",
+  "audio/mpeg": "mp3",
+  "audio/wav": "wav",
+  "video/mp4": "mp4",
+  "video/webm": "webm"
+};
+function getFileExtension(file) {
+  const name = file.name || "";
+  const dot = name.lastIndexOf(".");
+  if (dot > 0 && dot < name.length - 1) {
+    return name.slice(dot + 1).toLowerCase();
   }
+  const mime = (file.type || "").toLowerCase();
+  return MIME_TO_EXT[mime] ?? "";
+}
+function isImageFile(file) {
+  return typeof file.type === "string" && file.type.startsWith("image/");
+}
+var EXT_ALIASES = {
+  "7z": "7zip",
+  tgz: "gz",
+  tbz: "gz",
+  tbz2: "gz"
+};
+var ARCHIVE_FILE_ICON_STYLE = {
+  type: "compressed",
+  labelColor: "#E2A903",
+  labelTextColor: "#1A1A1A",
+  labelUppercase: true,
+  foldColor: "#C48E02",
+  color: "#F6E7A8",
+  glyphColor: "rgba(40, 30, 0, 0.35)"
 };
-var FileThumbnail = ({ file, size = 60 }) => {
-  const isImage = file.fileType === FILE_TYPEs.image;
-  const FileIcon = getFileIcon(file.fileType || "");
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+var ARCHIVE_EXTS = /* @__PURE__ */ new Set([
+  "zip",
+  "zipx",
+  "rar",
+  "7z",
+  "7zip",
+  "gz",
+  "tar",
+  "tgz",
+  "sitx",
+  "bz2"
+]);
+var TYPE_COLOR_FALLBACKS = {
+  "3d": {
+    type: "3d",
+    labelColor: "#5FB9AD",
+    foldColor: "#4A9E94",
+    color: "#E5F6F4"
+  },
+  acrobat: {
+    type: "acrobat",
+    labelColor: "#D93831",
+    foldColor: "#B82E28",
+    color: "#FCE8E7"
+  },
+  android: {
+    type: "android",
+    labelColor: "#3DDC84",
+    foldColor: "#2BB86A",
+    color: "#E6FBF0"
+  },
+  audio: {
+    type: "audio",
+    labelColor: "#9B59B6",
+    foldColor: "#7E3F9A",
+    color: "#F3E9F8"
+  },
+  binary: {
+    type: "binary",
+    labelColor: "#E67E22",
+    foldColor: "#C86A1A",
+    color: "#FDF0E4"
+  },
+  code: {
+    type: "code",
+    labelColor: "#3498DB",
+    foldColor: "#2A7AB0",
+    color: "#E7F3FB"
+  },
+  compressed: { ...ARCHIVE_FILE_ICON_STYLE },
+  document: {
+    type: "document",
+    labelColor: "#5B8DEF",
+    labelUppercase: true,
+    foldColor: "#4A75C9",
+    color: "#E8EEF9",
+    glyphColor: "rgba(40, 60, 120, 0.35)"
+  },
+  drive: {
+    type: "drive",
+    labelColor: "#27AE60",
+    foldColor: "#1E8A4B",
+    color: "#E5F7ED"
+  },
+  font: {
+    type: "font",
+    labelColor: "#8E44AD",
+    foldColor: "#71368A",
+    color: "#F2E8F7"
+  },
+  image: {
+    type: "image",
+    labelColor: "#1ABC9C",
+    foldColor: "#14967C",
+    color: "#E4F8F3"
+  },
+  presentation: {
+    type: "presentation",
+    labelColor: "#D35400",
+    labelUppercase: true,
+    foldColor: "#A84300",
+    color: "#FCEADE",
+    glyphColor: "rgba(120, 50, 0, 0.35)"
+  },
+  settings: {
+    type: "settings",
+    labelColor: "#16A085",
+    foldColor: "#117A65",
+    color: "#E4F6F2"
+  },
+  spreadsheet: {
+    type: "spreadsheet",
+    labelColor: "#2D7D46",
+    labelUppercase: true,
+    foldColor: "#246338",
+    color: "#E5F2EA",
+    glyphColor: "rgba(20, 60, 30, 0.35)"
+  },
+  vector: {
+    type: "vector",
+    labelColor: "#FF7F18",
+    foldColor: "#D96A12",
+    color: "#FFF0E4"
+  },
+  video: {
+    type: "video",
+    labelColor: "#E74C3C",
+    foldColor: "#C0392B",
+    color: "#FCE9E7"
+  }
+};
+var UNKNOWN_FILE_ICON_STYLE = {
+  type: "document",
+  labelColor: "#5B8DEF",
+  labelTextColor: "#FFFFFF",
+  labelUppercase: true,
+  foldColor: "#4A75C9",
+  color: "#E8EEF9",
+  glyphColor: "rgba(40, 60, 120, 0.35)"
+};
+var MONO_PAGE_COLORS = /* @__PURE__ */ new Set([
+  "",
+  "whitesmoke",
+  "#fff",
+  "#ffffff",
+  "white",
+  "#f5f5f5",
+  "#fafafa"
+]);
+function hasVividColor(style) {
+  if (typeof style.labelColor === "string" && style.labelColor.trim()) {
+    return true;
+  }
+  if (typeof style.color === "string") {
+    const c = style.color.trim().toLowerCase();
+    if (c && !MONO_PAGE_COLORS.has(c)) return true;
+  }
+  return false;
+}
+function mergeColorEnrichment(lib, enrichment) {
+  return {
+    ...enrichment,
+    ...lib,
+    labelColor: lib.labelColor ?? enrichment.labelColor,
+    labelTextColor: lib.labelTextColor ?? enrichment.labelTextColor,
+    foldColor: lib.foldColor ?? enrichment.foldColor,
+    color: lib.color ?? enrichment.color,
+    glyphColor: lib.glyphColor ?? enrichment.glyphColor,
+    labelUppercase: lib.labelUppercase ?? enrichment.labelUppercase,
+    type: lib.type ?? enrichment.type
+  };
+}
+function resolveFileIconStyle(file, defaultStyles2) {
+  const rawExt = getFileExtension(file);
+  const styleKey = (EXT_ALIASES[rawExt] ?? rawExt).toLowerCase();
+  const displayExt = rawExt || styleKey || void 0;
+  const lib = {
+    ...(styleKey ? defaultStyles2[styleKey] : void 0) ?? {}
+  };
+  const isArchive = ARCHIVE_EXTS.has(rawExt) || ARCHIVE_EXTS.has(styleKey) || lib.type === "compressed";
+  let style;
+  if (isArchive) {
+    style = { ...lib, ...ARCHIVE_FILE_ICON_STYLE };
+  } else if (hasVividColor(lib)) {
+    style = { ...lib };
+  } else if (lib.type && TYPE_COLOR_FALLBACKS[lib.type]) {
+    style = mergeColorEnrichment(lib, TYPE_COLOR_FALLBACKS[lib.type]);
+  } else {
+    style = mergeColorEnrichment(lib, UNKNOWN_FILE_ICON_STYLE);
+  }
+  return {
+    extension: displayExt,
+    styleKey,
+    style
+  };
+}
+
+// src/components/elemental/FileUpload/src/FileUpload.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function mergeSx2(...parts) {
+  const out = [];
+  for (const p of parts) {
+    if (!p) continue;
+    if (Array.isArray(p)) out.push(...p);
+    else out.push(p);
+  }
+  return out;
+}
+var FileUpload = (0, import_react3.forwardRef)(
+  function FileUpload2(props, ref) {
+    const {
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onRemove,
+      onReject,
+      multiple = true,
+      accept,
+      maxSize,
+      maxFiles,
+      disabled = false,
+      hideDropzone = false,
+      disableRemove = false,
+      readOnly = false,
+      label,
+      name,
+      helperText,
+      error = false,
+      required = false,
+      variant = "dropzone",
+      itemVariant = "row",
+      buttonLabel = "Upload file",
+      dropzoneTitle = "Drag & drop files here",
+      dropzoneDescription = "or click to browse",
+      id: idProp,
+      className,
+      sx,
+      "data-testid": dataTestId = "file-upload"
+    } = props;
+    const reactId = (0, import_react3.useId)();
+    const inputId = idProp ?? `file-upload-${reactId}`;
+    const helperId = `${inputId}-helper`;
+    const inputRef = (0, import_react3.useRef)(null);
+    const isControlled = valueProp !== void 0;
+    const [uncontrolled, setUncontrolled] = (0, import_react3.useState)(
+      () => defaultValue ?? []
+    );
+    const items = (0, import_react3.useMemo)(
+      () => isControlled ? valueProp ?? [] : uncontrolled,
+      [isControlled, valueProp, uncontrolled]
+    );
+    const [active, setActive] = (0, import_react3.useState)(false);
+    const dragDepth = (0, import_react3.useRef)(0);
+    const atCapacity = (0, import_react3.useMemo)(() => {
+      if (!multiple) return items.length >= 1;
+      if (maxFiles != null && maxFiles > 0) return items.length >= maxFiles;
+      return false;
+    }, [items.length, maxFiles, multiple]);
+    const commit = (0, import_react3.useCallback)(
+      (next) => {
+        if (!isControlled) setUncontrolled(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange]
+    );
+    const ingest = (0, import_react3.useCallback)(
+      (fileList) => {
+        if (disabled) return;
+        const incoming = Array.from(fileList);
+        if (incoming.length === 0) return;
+        const { accepted, rejections } = validateFiles(incoming, {
+          accept,
+          maxSize,
+          maxFiles,
+          currentCount: items.length,
+          multiple
+        });
+        if (rejections.length > 0) {
+          onReject?.(rejections);
+        }
+        if (accepted.length === 0) return;
+        const nextItems = accepted.map(createFileUploadItem);
+        if (!multiple) {
+          commit(nextItems.slice(0, 1));
+          return;
+        }
+        commit([...items, ...nextItems]);
+      },
+      [
+        accept,
+        disabled,
+        items,
+        maxFiles,
+        maxSize,
+        multiple,
+        onReject,
+        commit
+      ]
+    );
+    const handleRemove = (0, import_react3.useCallback)(
+      (item) => {
+        if (disabled) return;
+        const next = items.filter((i) => i.id !== item.id);
+        commit(next);
+        onRemove?.(item, next);
+        if (inputRef.current) inputRef.current.value = "";
+      },
+      [commit, disabled, items, onRemove]
+    );
+    const openPicker = (0, import_react3.useCallback)(() => {
+      if (disabled || atCapacity) return;
+      inputRef.current?.click();
+    }, [atCapacity, disabled]);
+    const onInputChange = (0, import_react3.useCallback)(
+      (e) => {
+        if (e.target.files) ingest(e.target.files);
+        e.target.value = "";
+      },
+      [ingest]
+    );
+    const onDragEnter = (0, import_react3.useCallback)(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled || atCapacity) return;
+        dragDepth.current += 1;
+        setActive(true);
+      },
+      [atCapacity, disabled]
+    );
+    const onDragLeave = (0, import_react3.useCallback)((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setActive(false);
+    }, []);
+    const onDragOver = (0, import_react3.useCallback)((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    const onDrop = (0, import_react3.useCallback)(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragDepth.current = 0;
+        setActive(false);
+        if (disabled || atCapacity) return;
+        if (e.dataTransfer.files?.length) {
+          ingest(e.dataTransfer.files);
+        }
+      },
+      [atCapacity, disabled, ingest]
+    );
+    const queueOnly = readOnly || hideDropzone;
+    const removeDisabled = readOnly || disableRemove || disabled;
+    const showTrigger = !queueOnly && !atCapacity;
+    const isButton = variant === "button";
+    const fileInput = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        id: inputId,
+        name,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        onChange: onInputChange,
+        style: { display: "none" },
+        "aria-hidden": true,
+        tabIndex: -1
+      }
+    );
+    const dragHandlers = {
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      import_Box.default,
+      {
+        ref,
+        className,
+        "data-testid": dataTestId,
+        "data-variant": variant,
+        "data-readonly": readOnly || queueOnly ? "true" : void 0,
+        sx: mergeSx2(fileUploadRootSx, sx),
+        children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            MuiFormLabel,
+            {
+              htmlFor: showTrigger ? inputId : void 0,
+              required,
+              error,
+              sx: {
+                mb: 0.25,
+                color: error ? "error.main" : "text.secondary",
+                fontSize: "0.8rem",
+                fontWeight: 600
+              },
+              children: label
+            }
+          ) : null,
+          fileInput,
+          showTrigger ? isButton ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Button,
+            {
+              type: "button",
+              disableElevation: true,
+              disabled,
+              "aria-invalid": error || void 0,
+              "aria-describedby": helperText ? helperId : void 0,
+              "data-active": active ? "true" : "false",
+              "data-error": error ? "true" : "false",
+              "data-testid": `${dataTestId}-button`,
+              startIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_CloudUpload.default, { sx: { fontSize: "1.15rem" } }),
+              onClick: openPicker,
+              sx: fileUploadButtonSx,
+              ...dragHandlers,
+              children: buttonLabel
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            import_Box.default,
+            {
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-disabled": disabled || void 0,
+              "aria-invalid": error || void 0,
+              "aria-describedby": helperText ? helperId : void 0,
+              "data-active": active ? "true" : "false",
+              "data-error": error ? "true" : "false",
+              "data-disabled": disabled ? "true" : "false",
+              "data-testid": `${dataTestId}-dropzone`,
+              sx: fileUploadDropzoneSx,
+              onClick: openPicker,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  openPicker();
+                }
+              },
+              ...dragHandlers,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_CloudUpload.default,
+                  {
+                    "aria-hidden": true,
+                    sx: { fontSize: 36, color: "var(--fu-icon)", opacity: 0.9 }
+                  }
+                ),
+                typeof dropzoneTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_Typography.default,
+                  {
+                    variant: "subtitle2",
+                    sx: { m: 0, color: "var(--fu-text)", fontWeight: 600 },
+                    children: dropzoneTitle
+                  }
+                ) : dropzoneTitle,
+                dropzoneDescription ? typeof dropzoneDescription === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  import_Typography.default,
+                  {
+                    variant: "caption",
+                    sx: { m: 0, color: "var(--fu-text-secondary)" },
+                    children: dropzoneDescription
+                  }
+                ) : dropzoneDescription : null
+              ]
+            }
+          ) : null,
+          items.length > 0 ? itemVariant === "tile" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_Box.default,
+            {
+              component: "ul",
+              "data-testid": `${dataTestId}-list`,
+              "data-item-variant": "tile",
+              sx: fileUploadTileListSx,
+              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                FileUploadListItem,
+                {
+                  item,
+                  disabled,
+                  disableRemove: removeDisabled,
+                  onRemove: handleRemove,
+                  testId: `${dataTestId}-item`,
+                  itemVariant: "tile"
+                },
+                item.id
+              ))
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_Stack.default,
+            {
+              component: "ul",
+              spacing: 1,
+              "data-testid": `${dataTestId}-list`,
+              "data-item-variant": "row",
+              sx: { m: 0, p: 0, listStyle: "none" },
+              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                FileUploadListItem,
+                {
+                  item,
+                  disabled,
+                  disableRemove: removeDisabled,
+                  onRemove: handleRemove,
+                  testId: `${dataTestId}-item`,
+                  itemVariant: "row"
+                },
+                item.id
+              ))
+            }
+          ) : null,
+          helperText ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_FormHelperText.default,
+            {
+              id: helperId,
+              error,
+              sx: { mx: 0.5, mt: 0 },
+              children: helperText
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+function FileUploadTypeIcon({
+  file,
+  tile = false
+}) {
+  const resolved = resolveFileIconStyle(
+    file,
+    import_react_file_icon.defaultStyles
+  );
+  const { extension, styleKey } = resolved;
+  const iconStyle = resolved.style;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_Box.default,
     {
-      sx: {
-        width: size,
-        height: size,
-        minWidth: size,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        bgcolor: "transparent",
-        borderRadius: 1,
-        overflow: "hidden"
-      },
-      children: isImage && file.blobUrl ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_Box.default,
+      "aria-hidden": true,
+      "data-testid": "file-upload-icon",
+      "data-ext": extension || void 0,
+      "data-style-key": styleKey || void 0,
+      sx: tile ? fileUploadTileIconWellSx : fileUploadIconWellSx,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box.default, { sx: tile ? fileUploadTileLibIconSx : fileUploadLibIconSx, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_react_file_icon.FileIcon,
         {
-          component: "img",
-          src: file.blobUrl,
-          alt: file.filename,
-          sx: { width: "100%", height: "100%", objectFit: "cover" }
+          fold: true,
+          radius: 3,
+          extension,
+          ...iconStyle
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileIcon, { fontSize: size >= 60 ? "large" : "medium", color: "action" })
+      ) })
     }
   );
-};
-var DisplayFile = ({
+}
+function FileUploadThumb({
   file,
-  onDelete,
-  mode = "thumbnail"
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Box.default, { sx: {
-    display: "flex",
-    alignItems: "center",
-    gap: 1,
-    p: 1,
-    border: "1px solid",
-    borderColor: "divider",
-    borderRadius: 1,
-    width: mode === "thumbnail" ? "fit-content" : "100%",
-    maxWidth: "100%",
-    position: "relative"
-  }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FileThumbnail, { file }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_Box.default, { sx: { flex: 1, overflow: "hidden" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Typography.default, { variant: "body2", noWrap: true, sx: { maxWidth: 150 }, children: file.filename }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Typography.default, { variant: "caption", color: "text.secondary", children: file.displaySize })
-    ] }),
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      IconButton_default,
+  tile = false
+}) {
+  const [url, setUrl] = (0, import_react3.useState)(null);
+  const [previewFailed, setPreviewFailed] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
+    setPreviewFailed(false);
+    if (!isImageFile(file)) {
+      setUrl(null);
+      return;
+    }
+    const objectUrl = URL.createObjectURL(file);
+    setUrl(objectUrl);
+    return () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+  }, [file]);
+  if (url && !previewFailed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_Box.default,
       {
-        size: "small",
-        onClick: () => onDelete(file),
-        sx: { ml: "auto" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Close.default, { fontSize: "small" })
+        component: "img",
+        src: url,
+        alt: "",
+        "data-testid": "file-upload-thumb",
+        sx: tile ? fileUploadTileMediaSx : fileUploadThumbSx,
+        onError: () => setPreviewFailed(true)
       }
-    )
-  ] });
-};
-DisplayFile.DISPLAY_MODEs = {
-  thumbnail: "thumbnail",
-  name: "name"
-};
-
-// src/components/compound/Process/src/ProcessItem.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ProcessItem = ({ file, progress }) => {
-  const isComplete = progress >= 100;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { display: "flex", gap: 2, alignItems: "center", mb: 2, p: 1, border: "1px solid", borderColor: "var(--process-item-border)", borderRadius: 1 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileThumbnail, { file, size: 48 }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { display: "flex", justifyContent: "space-between", mb: 0.5 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Typography.default, { variant: "body2", noWrap: true, sx: { fontWeight: 500 }, children: file.filename }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Typography.default, { variant: "caption", sx: { pl: 0.5, color: "var(--process-item-secondary-color)" }, children: file.displaySize })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileUploadTypeIcon, { file, tile });
+}
+function FileUploadListItem({
+  item,
+  disabled,
+  disableRemove = false,
+  onRemove,
+  testId,
+  itemVariant
+}) {
+  if (itemVariant === "tile") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      FileUploadTileItem,
+      {
+        item,
+        disabled,
+        disableRemove,
+        onRemove,
+        testId
+      }
+    );
+  }
+  const status = item.status ?? (item.error ? "error" : "idle");
+  const showProgress = status === "uploading" || typeof item.progress === "number" && item.progress > 0 && item.progress < 100 && status !== "error" && status !== "success";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_Box.default,
+    {
+      component: "li",
+      "data-testid": testId,
+      "data-status": status,
+      "data-item-variant": "row",
+      sx: fileUploadItemSx,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileUploadThumb, { file: item.file }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_Typography.default,
+            {
+              variant: "body2",
+              noWrap: true,
+              title: item.file.name,
+              sx: { m: 0, fontWeight: 500, color: "var(--fu-text)" },
+              children: item.file.name
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            import_Typography.default,
+            {
+              variant: "caption",
+              sx: { m: 0, color: "var(--fu-text-secondary)" },
+              children: [
+                formatFileSize(item.file.size),
+                item.error ? ` \xB7 ${item.error}` : null,
+                status === "success" && !item.error ? " \xB7 Done" : null
+              ]
+            }
+          ),
+          showProgress ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            LinearProgress,
+            {
+              variant: "determinate",
+              value: Math.max(0, Math.min(100, item.progress ?? 0)),
+              "aria-label": `Upload progress ${item.progress ?? 0}%`,
+              sx: { mt: 0.75, height: 4, borderRadius: 2 }
+            }
+          ) : null,
+          status === "uploading" && item.progress == null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            LinearProgress,
+            {
+              "aria-label": "Uploading",
+              sx: { mt: 0.75, height: 4, borderRadius: 2 }
+            }
+          ) : null
+        ] }),
+        disableRemove ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          IconButton_default,
+          {
+            size: "small",
+            "aria-label": `Remove ${item.file.name}`,
+            disabled,
+            onClick: () => onRemove(item),
+            sx: {
+              flexShrink: 0,
+              color: "var(--fu-text-secondary)",
+              p: 0.35
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Close.default, { sx: { fontSize: "1rem" } })
+          }
+        )
+      ]
+    }
+  );
+}
+function FileUploadTileItem({
+  item,
+  disabled,
+  disableRemove = false,
+  onRemove,
+  testId
+}) {
+  const status = item.status ?? (item.error ? "error" : "idle");
+  const showProgress = status === "uploading" || typeof item.progress === "number" && item.progress > 0 && item.progress < 100 && status !== "error" && status !== "success";
+  const indeterminate = status === "uploading" && item.progress == null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    import_Box.default,
+    {
+      component: "li",
+      "data-testid": testId,
+      "data-status": status,
+      "data-item-variant": "tile",
+      title: item.file.name,
+      sx: fileUploadTileSx,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FileUploadThumb, { file: item.file, tile: true }),
+        showProgress ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           LinearProgress,
           {
             variant: "determinate",
-            value: progress,
-            sx: {
-              flex: 1,
-              height: 6
-            }
+            value: Math.max(0, Math.min(100, item.progress ?? 0)),
+            "aria-label": `Upload progress ${item.progress ?? 0}%`,
+            sx: fileUploadTileProgressSx
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Typography.default, { variant: "caption", sx: { minWidth: 35, textAlign: "right", color: "var(--process-item-secondary-color)" }, children: [
-          Math.round(progress),
-          "%"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box.default, { sx: { display: "flex", alignItems: "center", width: 24, justifyContent: "center" }, children: isComplete && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_CheckCircle.default, { color: "success", fontSize: "small" }) })
-  ] });
-};
+        ) : null,
+        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          LinearProgress,
+          {
+            "aria-label": "Uploading",
+            sx: fileUploadTileProgressSx
+          }
+        ) : null,
+        disableRemove ? null : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          IconButton_default,
+          {
+            className: "fu-tile-remove",
+            size: "small",
+            "aria-label": `Remove ${item.file.name}`,
+            disabled,
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(item);
+            },
+            sx: fileUploadTileRemoveSx,
+            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Close.default, { sx: { fontSize: "0.85rem" } })
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/components/compound/Process/src/hooks/useProgressTracking.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useProgressTracking(files, observerRef) {
-  const [progressMap, setProgressMap] = (0, import_react3.useState)(/* @__PURE__ */ new Map());
-  const handleProgress = (0, import_react3.useCallback)((file, progress) => {
+  const [progressMap, setProgressMap] = (0, import_react4.useState)(/* @__PURE__ */ new Map());
+  const handleProgress = (0, import_react4.useCallback)((file, progress) => {
     setProgressMap((prev) => {
-      if (prev.get(file.filename) === progress) return prev;
-      const newMap = new Map(prev);
-      newMap.set(file.filename, progress);
-      return newMap;
+      if (prev.get(file.id) === progress) return prev;
+      const next = new Map(prev);
+      next.set(file.id, progress);
+      return next;
     });
   }, []);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (files.length === 0) return;
     let total = 0;
     let completed = 0;
@@ -1077,15 +2075,15 @@ function useProgressTracking(files, observerRef) {
     const avg = Math.round(total / files.length);
     observerRef.current.update(files.length, completed, avg);
   }, [progressMap, files, observerRef]);
-  const allComplete = (0, import_react3.useMemo)(() => {
+  const allComplete = (0, import_react4.useMemo)(() => {
     if (files.length === 0) return false;
-    return files.every((f) => (progressMap.get(f.filename) || 0) >= 100);
+    return files.every((f) => (progressMap.get(f.id) || 0) >= 100);
   }, [files, progressMap]);
   return { progressMap, handleProgress, allComplete };
 }
 
 // src/components/compound/Process/src/hooks/useProcessAlert.ts
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/components/compound/Alert/src/_utils/utils.ts
 var import_notistack = require("notistack");
@@ -1102,6 +2100,8 @@ var ALERT_VARIANTs = {
 };
 var DEFAULTs = {
   AUTO_HIDE_DURATION: 3e3,
+  /** Quiet glass toast look is the default snackbar chrome. */
+  STYLE_VARIANT: "soft",
   ANCHOR_ORIGIN: { horizontal: "right", vertical: "top" },
   PROVIDER_CONFIGs: {
     maxSnack: 3,
@@ -1119,6 +2119,8 @@ function enqueueAlertWith(enqueue, {
   autoHideDuration = DEFAULTs.AUTO_HIDE_DURATION,
   anchorOrigin = DEFAULTs.ANCHOR_ORIGIN,
   icon,
+  styleVariant,
+  action,
   ...rest
 }) {
   try {
@@ -1129,6 +2131,8 @@ function enqueueAlertWith(enqueue, {
       key: id,
       id,
       icon,
+      styleVariant,
+      alertAction: action,
       ...rest
     });
     return { success: true, data: id };
@@ -1141,20 +2145,20 @@ function enqueueCollapsableWith(enqueue, {
   id = randomStrGenerator(10),
   autoHideDuration = DEFAULTs.AUTO_HIDE_DURATION,
   anchorOrigin = DEFAULTs.ANCHOR_ORIGIN,
+  styleVariant,
   componentProps = {},
-  componentWrapperProps = {
-    Renderer: () => null
-  },
+  componentWrapperProps = {},
   ...rest
 }) {
   try {
-    enqueue({
+    enqueue("", {
       variant: ALERT_VARIANTs.collapsable,
       anchorOrigin,
       autoHideDuration,
       componentProps,
       componentWrapperProps,
       id,
+      styleVariant,
       ...rest
     });
     return { success: true, data: id };
@@ -1187,7 +2191,7 @@ function useAlert() {
 }
 
 // src/components/compound/Process/src/ProcessAlert.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ProcessAlertContent = ({
   allComplete,
@@ -1213,8 +2217,8 @@ var ProcessAlertContent = ({
   ] });
 };
 var ProcessAlertObserver = ({ observer, onMaximize }) => {
-  const [state, setState] = (0, import_react4.useState)({ fileCount: 0, completedCount: 0, totalProgress: 0, minimized: false });
-  (0, import_react4.useEffect)(() => {
+  const [state, setState] = (0, import_react5.useState)({ fileCount: 0, completedCount: 0, totalProgress: 0, minimized: false });
+  (0, import_react5.useEffect)(() => {
     return observer.subscribe((newState) => {
       setState(newState);
     });
@@ -1269,21 +2273,21 @@ function useProcessAlert({
   onMaximize
 }) {
   const { enqueueInfo, closeSnackbar } = useAlert();
-  const observerRef = (0, import_react5.useRef)(new ProgressObserver());
-  const snackbarIdRef = (0, import_react5.useRef)(null);
-  const alertAnchorOrigin = (0, import_react5.useMemo)(() => ({
+  const observerRef = (0, import_react6.useRef)(new ProgressObserver());
+  const snackbarIdRef = (0, import_react6.useRef)(null);
+  const alertAnchorOrigin = (0, import_react6.useMemo)(() => ({
     "bottom-right": { vertical: "bottom", horizontal: "right" },
     "bottom-left": { vertical: "bottom", horizontal: "left" },
     "top-right": { vertical: "top", horizontal: "right" },
     "top-left": { vertical: "top", horizontal: "left" }
   })[minimizePlacement], [minimizePlacement]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     observerRef.current.setMinimized(minimized);
   }, [minimized]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (open) {
       if (!snackbarIdRef.current) {
-        const message = import_react5.default.createElement(ProcessAlertObserver, {
+        const message = import_react6.default.createElement(ProcessAlertObserver, {
           observer: observerRef.current,
           onMaximize
         });
@@ -1303,7 +2307,7 @@ function useProcessAlert({
       }
     }
   }, [alertAnchorOrigin, closeSnackbar, enqueueInfo, open, onMaximize]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => {
       if (snackbarIdRef.current) {
         closeSnackbar(snackbarIdRef.current);
@@ -1318,7 +2322,7 @@ function useProcessAlert({
 var processModalRootSx = {
   "--process-description-color": "var(--mui-palette-text-secondary)",
   "--process-item-secondary-color": "var(--mui-palette-text-secondary)",
-  "--process-item-border": "var(--mui-palette-divider)"
+  "--process-item-border": "var(--mui-palette-border-1)"
 };
 
 // src/components/compound/Process/src/ProcessModal.tsx
@@ -1331,7 +2335,7 @@ var ProcessLogicRunner = ({
   paused
 }) => {
   const progress = useProgress(file, paused);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     onProgress(file, progress);
   }, [file, progress, onProgress]);
   return null;
@@ -1346,20 +2350,36 @@ var ProcessModal = ({
   onStop,
   minimizable = false,
   minimizePlacement = "bottom-right",
-  autoClose = false
+  autoClose = false,
+  itemVariant = "row"
 }) => {
   const [open, setOpen] = openProps;
-  const [minimized, setMinimized] = (0, import_react6.useState)(false);
-  const [paused, setPaused] = (0, import_react6.useState)(false);
-  const handleMaximize = (0, import_react6.useCallback)(() => setMinimized(false), []);
+  const [minimized, setMinimized] = (0, import_react7.useState)(false);
+  const [paused, setPaused] = (0, import_react7.useState)(false);
+  const handleMaximize = (0, import_react7.useCallback)(() => setMinimized(false), []);
   const { observerRef } = useProcessAlert({
     open,
     minimized,
     minimizePlacement,
     onMaximize: handleMaximize
   });
-  const { progressMap, handleProgress, allComplete } = useProgressTracking(files, observerRef);
-  (0, import_react6.useEffect)(() => {
+  const { progressMap, handleProgress, allComplete } = useProgressTracking(
+    files,
+    observerRef
+  );
+  const queueValue = (0, import_react7.useMemo)(
+    () => files.map((file) => {
+      const progress = progressMap.get(file.id) ?? 0;
+      const clamped = Math.max(0, Math.min(100, progress));
+      return {
+        ...file,
+        progress: clamped,
+        status: clamped >= 100 ? "success" : "uploading"
+      };
+    }),
+    [files, progressMap]
+  );
+  (0, import_react7.useEffect)(() => {
     if (autoClose && allComplete && open) {
       const timer = setTimeout(() => {
         setOpen(false);
@@ -1385,7 +2405,7 @@ var ProcessModal = ({
         onProgress: handleProgress,
         paused
       },
-      file.filename
+      file.id
     )),
     minimized ? null : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       MuiModal,
@@ -1403,55 +2423,107 @@ var ProcessModal = ({
           } : void 0
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_Box.default, { sx: mergeSx({ py: 2 }, processModalRootSx), children: [
-          description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_Typography.default, { variant: "body2", sx: { mb: 3, color: "var(--process-description-color)" }, children: description }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_Box.default, { sx: { display: "flex", flexDirection: "column", gap: 1, maxHeight: "60vh", overflowY: "auto" }, children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            ProcessItem,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_Typography.default,
             {
-              file,
-              progress: progressMap.get(file.filename) || 0
-            },
-            file.filename
-          )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_Box.default, { sx: { mt: 3, display: "flex", justifyContent: "flex-end", gap: 2 }, children: [
-            !allComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-              onStop && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Button,
-                {
-                  variant: "outlined",
-                  color: "error",
-                  startIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_StopRounded.default, {}),
-                  onClick: handleStop,
-                  children: "Stop"
-                }
-              ),
-              onPause && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                Button,
+              variant: "body2",
+              sx: { mb: 3, color: "var(--process-description-color)" },
+              children: description
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_Box.default,
+            {
+              sx: {
+                maxHeight: "60vh",
+                overflowY: "auto"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                FileUpload,
                 {
-                  variant: "outlined",
-                  color: "warning",
-                  startIcon: paused ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_PlayArrow.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_PauseOutlined.default, {}),
-                  onClick: handlePauseToggle,
-                  children: paused ? "Resume" : "Pause"
+                  value: queueValue,
+                  readOnly: true,
+                  hideDropzone: true,
+                  disableRemove: true,
+                  itemVariant,
+                  "data-testid": "process-file-queue"
                 }
               )
-            ] }),
-            allComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              Button,
-              {
-                variant: "contained",
-                onClick: () => setOpen(false),
-                disabled: !allComplete && !onStop,
-                startIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_CheckCircle.default, {}),
-                color: "success",
-                children: "Done"
-              }
-            )
-          ] })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            import_Box.default,
+            {
+              sx: { mt: 3, display: "flex", justifyContent: "flex-end", gap: 2 },
+              children: [
+                !allComplete ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                  onStop ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Button,
+                    {
+                      variant: "outlined",
+                      color: "error",
+                      startIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_StopRounded.default, {}),
+                      onClick: handleStop,
+                      children: "Stop"
+                    }
+                  ) : null,
+                  onPause ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    Button,
+                    {
+                      variant: "outlined",
+                      color: "warning",
+                      startIcon: paused ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_PlayArrow.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_PauseOutlined.default, {}),
+                      onClick: handlePauseToggle,
+                      children: paused ? "Resume" : "Pause"
+                    }
+                  ) : null
+                ] }) : null,
+                allComplete ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  Button,
+                  {
+                    variant: "contained",
+                    onClick: () => setOpen(false),
+                    disabled: !allComplete && !onStop,
+                    startIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_CheckCircle.default, {}),
+                    color: "success",
+                    children: "Done"
+                  }
+                ) : null
+              ]
+            }
+          )
         ] })
       }
     )
   ] });
 };
+
+// src/components/compound/Process/src/ProcessItem.tsx
+var import_react8 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var ProcessItem = ({ file, progress }) => {
+  const value = (0, import_react8.useMemo)(() => {
+    const clamped = Math.max(0, Math.min(100, progress));
+    return [
+      {
+        ...file,
+        progress: clamped,
+        status: clamped >= 100 ? "success" : "uploading"
+      }
+    ];
+  }, [file, progress]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    FileUpload,
+    {
+      value,
+      readOnly: true,
+      hideDropzone: true,
+      disableRemove: true,
+      itemVariant: "row",
+      "data-testid": "process-item"
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ProcessAlertContent,