@startdownnotez404/ui 1.3.5 → 1.3.6

package/dist/image.js

@@ -134,10 +134,37 @@ function CropperLayout({
         overflow: "auto"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Box.default, { sx: { display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 0, height: "100%", alignItems: "center", width: "-webkit-fill-available" }, children: [
-          left,
-          leftFooter
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_Box.default,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              minHeight: 0,
+              height: "100%",
+              alignItems: "center",
+              width: "-webkit-fill-available"
+            },
+            children: [
+              left,
+              leftFooter ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_Box.default,
+                {
+                  "data-testid": "cropper-left-footer",
+                  sx: {
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    pt: 1
+                  },
+                  children: leftFooter
+                }
+              ) : null
+            ]
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Box.default, { sx: { display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 0, height: "100%" }, children: [
           right,
           footer
@@ -544,476 +571,1215 @@ function CropperActionSection({
 // src/components/elemental/Image/src/Cropper/sections/CropperFileSelector.tsx
 var import_react3 = __toESM(require("react"));
 
-// src/components/compound/FileUploader/src/ReactDropzone.tsx
+// src/components/elemental/FileUpload/src/FileUpload.tsx
 var import_react2 = require("react");
-var import_react_dropzone = require("react-dropzone");
 
-// src/components/compound/FileUploader/src/theme.ts
-var fileUploaderRootSx = {
-  "--dropzone-bg": "var(--mui-palette-background-paper)",
-  "--dropzone-text-color": "var(--mui-palette-text-secondary)",
-  "--dropzone-border-hover": "var(--mui-palette-primary-main)",
-  "--dropzone-bg-hover": "var(--mui-palette-action-hover)"
+// src/components/elemental/Form/src/FormLabel/FormLabel.tsx
+var import_FormLabel = __toESM(require("@mui/material/FormLabel"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function MuiFormLabel(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime9 = require("react/jsx-runtime");
+var LinearProgress = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_LinearProgress.default, { ...props });
 };
 
-// src/_utils/_func/downloadFile.ts
-var import_file_type = require("file-type");
-async function downloadFile(url, fetchOptions) {
-  const res = await fetch(url, fetchOptions);
-  const blob = await res.blob();
-  const buffer = await blob.arrayBuffer();
-  const fType = await (0, import_file_type.fileTypeFromBuffer)(buffer);
-  const data = {
-    blobUrl: URL.createObjectURL(blob),
-    size: blob.size,
-    mimeType: fType?.mime || blob.type
-    // use file-type to get the mime type
-  };
-  const nonImgRes = {
-    ...data,
-    dimensions: {
-      width: 0,
-      height: 0
-    }
-  };
-  try {
-    if (data.mimeType.includes("image/")) {
-      const dimensions = await handleImageDownload(data.blobUrl);
-      return {
-        ...data,
-        dimensions
-      };
-    } else {
-      return nonImgRes;
-    }
-  } catch (err) {
-    console.warn("Failed to handle image download:", err);
-    return nonImgRes;
-  }
-}
-async function handleImageDownload(blobUrl) {
-  const img = new Image();
-  img.src = blobUrl;
-  await new Promise((resolve, reject) => {
-    img.onload = resolve;
-    img.onerror = reject;
-  });
-  const metaData = {
-    width: img.width,
-    height: img.height
-  };
-  img.remove();
-  return metaData;
-}
+// src/components/elemental/FileUpload/src/FileUpload.tsx
+var import_react_file_icon = require("react-file-icon");
 
-// src/_utils/_const/file.ts
-var FILE_STATUSs = {
-  // local status
-  uploadingToLocal: "local-uploading",
-  uploadedToLocal: "local-uploaded",
-  localError: "local-error",
-  pending: "pending",
-  // upload s3
-  uploadPending: "upload-pending",
-  gettingSignedURL: "upload-gettingSignedURL",
-  beginUploadToS3: "upload-beginUploadToS3",
-  uploadedToCloud: "upload-uploadedToCloud",
-  error: "upload-error",
-  // download
-  downloadPending: "download-pending",
-  downloading: "download-in-progress",
-  downloaded: "download-completed",
-  downloadError: "download-error"
+// 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 FILE_TYPEs = {
-  image: "image",
-  video: "video",
-  audio: "audio",
-  pdf: "pdf",
-  doc: "doc",
-  xls: "xls",
-  ppt: "ppt",
-  txt: "txt",
-  zip: "zip",
-  json: "json",
-  other: "other"
+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"
+  }
 };
-
-// src/_utils/classes/PreviewableFile.ts
-var PreviewableFile = class {
-  path;
-  blobUrl;
-  filename;
-  randomName;
-  fileType;
-  mimeType;
-  size;
-  displaySize;
-  url;
-  fetchOptions;
-  putUrl;
-  getUrl;
-  status;
-  revokeable;
-  imageProps;
-  constructor(props = {}) {
-    this.path = props.path ?? "";
-    this.blobUrl = props.blobUrl ?? "";
-    this.filename = props.filename ?? "";
-    this.randomName = props.randomName ?? "";
-    this.fileType = props.fileType ?? getFileType(props.mimeType ?? "");
-    this.mimeType = props.mimeType ?? "";
-    this.size = props.size ?? 0;
-    this.displaySize = props.displaySize ?? displayFileSize(props.size ?? 0);
-    this.url = props.url ?? "";
-    this.fetchOptions = props.fetchOptions ?? {};
-    this.putUrl = props.putUrl ?? "";
-    this.getUrl = props.getUrl ?? "";
-    this.status = props.status ?? FILE_STATUSs.pending;
-    this.revokeable = props.revokeable ?? true;
-    this.imageProps = props.imageProps ?? {
-      width: 0,
-      height: 0
-    };
-    Object.preventExtensions(this);
+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))"
   }
-  toPlainObj() {
-    return {
-      ...this
-    };
+};
+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"
   }
-  updateFile(file) {
-    if (!file) return;
-    this.path = file.path;
-    this.blobUrl = file.blobUrl;
-    this.filename = file.filename;
-    this.randomName = file.randomName;
-    this.fileType = file.fileType;
-    this.size = file.size;
-    this.displaySize = file.displaySize;
-    this.url = file.url;
-    this.fetchOptions = file.fetchOptions;
-    this.putUrl = file.putUrl;
-    this.getUrl = file.getUrl;
-    this.status = file.status;
-    this.revokeable = file.revokeable;
-    this.imageProps = file.imageProps;
+};
+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)"
   }
-  updateStatus(status) {
-    this.status = status;
+};
+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"
   }
-  async downloadFile() {
-    if (!this.url) return this;
-    try {
-      const res = await downloadFile(this.url, this.fetchOptions);
-      this.url = res.blobUrl;
-      this.path = res.blobUrl;
-      this.status = FILE_STATUSs.downloaded;
-      this.blobUrl = res.blobUrl;
-      this.fileType = getFileType(res.mimeType);
-      this.mimeType = res.mimeType;
-      this.size = res.size;
-      this.displaySize = displayFileSize(res.size);
-      this.imageProps = res.dimensions;
-      return this;
-    } catch (err) {
-      console.log(err);
-      return this;
-    }
+};
+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"
   }
-  _displayFileSize() {
-    return displayFileSize(this.size);
+};
+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
   }
-  getUploadFormat() {
-    return {
-      url: this.putUrl,
-      keyPath: this.putUrl,
-      filename: this.filename,
-      fileType: this.mimeType,
-      hostname: ""
-    };
+};
+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
   }
 };
-function displayFileSize(size) {
-  const units = ["B", "KB", "MB", "GB", "TB"];
-  let unitIndex = 0;
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024;
-    unitIndex++;
+
+// src/components/elemental/FileUpload/src/utils.ts
+var idSeq = 0;
+function createFileUploadId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
   }
-  const sizeWithUnit = size.toFixed(2) + " " + units[unitIndex];
-  return `[${sizeWithUnit}]`;
+  idSeq += 1;
+  return `fu-${Date.now()}-${idSeq}`;
+}
+function createFileUploadItem(file) {
+  return {
+    id: createFileUploadId(),
+    file,
+    status: "idle",
+    progress: 0
+  };
 }
-function getFileType(mimeType) {
-  const types = Object.values(FILE_TYPEs);
-  const [type] = mimeType.split("/");
-  if (types.includes(type)) {
-    return type;
+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`;
   }
-  const found = types.find((t) => mimeType.includes(t) && t !== FILE_TYPEs.other);
-  if (found) {
-    return found;
+  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 FILE_TYPEs.other;
+  return { accepted, rejections };
 }
-
-// src/components/compound/DisplayFile/src/DisplayFile.tsx
-var import_jsx_runtime8 = 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;
+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_runtime8.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_runtime10 = 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_react2.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_react2.useId)();
+    const inputId = idProp ?? `file-upload-${reactId}`;
+    const helperId = `${inputId}-helper`;
+    const inputRef = (0, import_react2.useRef)(null);
+    const isControlled = valueProp !== void 0;
+    const [uncontrolled, setUncontrolled] = (0, import_react2.useState)(
+      () => defaultValue ?? []
+    );
+    const items = (0, import_react2.useMemo)(
+      () => isControlled ? valueProp ?? [] : uncontrolled,
+      [isControlled, valueProp, uncontrolled]
+    );
+    const [active, setActive] = (0, import_react2.useState)(false);
+    const dragDepth = (0, import_react2.useRef)(0);
+    const atCapacity = (0, import_react2.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_react2.useCallback)(
+      (next) => {
+        if (!isControlled) setUncontrolled(next);
+        onChange?.(next);
+      },
+      [isControlled, onChange]
+    );
+    const ingest = (0, import_react2.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_react2.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_react2.useCallback)(() => {
+      if (disabled || atCapacity) return;
+      inputRef.current?.click();
+    }, [atCapacity, disabled]);
+    const onInputChange = (0, import_react2.useCallback)(
+      (e) => {
+        if (e.target.files) ingest(e.target.files);
+        e.target.value = "";
+      },
+      [ingest]
+    );
+    const onDragEnter = (0, import_react2.useCallback)(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (disabled || atCapacity) return;
+        dragDepth.current += 1;
+        setActive(true);
+      },
+      [atCapacity, disabled]
+    );
+    const onDragLeave = (0, import_react2.useCallback)((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragDepth.current = Math.max(0, dragDepth.current - 1);
+      if (dragDepth.current === 0) setActive(false);
+    }, []);
+    const onDragOver = (0, import_react2.useCallback)((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    const onDrop = (0, import_react2.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_runtime10.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_runtime10.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_runtime10.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_runtime10.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_runtime10.jsx)(import_CloudUpload.default, { sx: { fontSize: "1.15rem" } }),
+              onClick: openPicker,
+              sx: fileUploadButtonSx,
+              ...dragHandlers,
+              children: buttonLabel
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(
+                  import_CloudUpload.default,
+                  {
+                    "aria-hidden": true,
+                    sx: { fontSize: 36, color: "var(--fu-icon)", opacity: 0.9 }
+                  }
+                ),
+                typeof dropzoneTitle === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)(
+            import_Box.default,
+            {
+              component: "ul",
+              "data-testid": `${dataTestId}-list`,
+              "data-item-variant": "tile",
+              sx: fileUploadTileListSx,
+              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                FileUploadListItem,
+                {
+                  item,
+                  disabled,
+                  disableRemove: removeDisabled,
+                  onRemove: handleRemove,
+                  testId: `${dataTestId}-item`,
+                  itemVariant: "tile"
+                },
+                item.id
+              ))
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(
+                FileUploadListItem,
+                {
+                  item,
+                  disabled,
+                  disableRemove: removeDisabled,
+                  onRemove: handleRemove,
+                  testId: `${dataTestId}-item`,
+                  itemVariant: "row"
+                },
+                item.id
+              ))
+            }
+          ) : null,
+          helperText ? /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime8.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_runtime10.jsx)(import_Box.default, { sx: tile ? fileUploadTileLibIconSx : fileUploadLibIconSx, children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime8.jsx)(FileIcon, { fontSize: size >= 60 ? "large" : "medium", color: "action" })
+      ) })
     }
   );
-};
-var DisplayFile = ({
+}
+function FileUploadThumb({
   file,
-  onDelete,
-  mode = "thumbnail"
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)(FileThumbnail, { file }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_Box.default, { sx: { flex: 1, overflow: "hidden" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Typography.default, { variant: "body2", noWrap: true, sx: { maxWidth: 150 }, children: file.filename }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Typography.default, { variant: "caption", color: "text.secondary", children: file.displaySize })
-    ] }),
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      IconButton_default,
+  tile = false
+}) {
+  const [url, setUrl] = (0, import_react2.useState)(null);
+  const [previewFailed, setPreviewFailed] = (0, import_react2.useState)(false);
+  (0, import_react2.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_runtime10.jsx)(
+      import_Box.default,
       {
-        size: "small",
-        onClick: () => onDelete(file),
-        sx: { ml: "auto" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.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"
-};
-var DisplayFile_default = DisplayFile;
-
-// src/components/compound/FileUploader/src/DropZoneBox.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var DropZoneBox = ({ getRootProps, getInputProps, error }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FileUploadTypeIcon, { file, tile });
+}
+function FileUploadListItem({
+  item,
+  disabled,
+  disableRemove = false,
+  onRemove,
+  testId,
+  itemVariant
+}) {
+  if (itemVariant === "tile") {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)(
     import_Box.default,
     {
-      ...getRootProps(),
-      sx: {
-        flex: 1,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        p: 3,
-        border: "2px dashed",
-        borderColor: error ? "error.main" : "divider",
-        borderRadius: 1,
-        backgroundColor: "var(--dropzone-bg)",
-        outline: "none",
-        transition: "border .24s ease-in-out",
-        color: "var(--dropzone-text-color)",
-        cursor: "pointer",
-        "&:hover": {
-          borderColor: "var(--dropzone-border-hover)",
-          backgroundColor: "var(--dropzone-bg-hover)"
-        }
-      },
+      component: "li",
+      "data-testid": testId,
+      "data-status": status,
+      "data-item-variant": "row",
+      sx: fileUploadItemSx,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { ...getInputProps() }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_NoteAdd.default, { sx: { fontSize: "2.5rem", mb: 1 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { variant: "caption", align: "center", children: 'Drag "n" drop some files here, or click to select files' })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FileUploadThumb, { file: item.file }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_Box.default, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.jsx)(
+            LinearProgress,
+            {
+              "aria-label": "Uploading",
+              sx: { mt: 0.75, height: 4, borderRadius: 2 }
+            }
+          ) : null
+        ] }),
+        disableRemove ? null : /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_Close.default, { sx: { fontSize: "1rem" } })
+          }
+        )
       ]
     }
   );
-};
-var DropZoneBox_default = DropZoneBox;
-
-// src/components/compound/FileUploader/src/DropZoneButton.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var DropZoneButton = ({
-  getRootProps,
-  getInputProps,
-  label = "Upload file",
-  error = false
-}) => {
+}
+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_runtime10.jsxs)(
-    Button,
+    import_Box.default,
     {
-      variant: "outlined",
-      startIcon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_CloudUpload.default, {}),
-      color: error ? "error" : "primary",
-      ...getRootProps(),
+      component: "li",
+      "data-testid": testId,
+      "data-status": status,
+      "data-item-variant": "tile",
+      title: item.file.name,
+      sx: fileUploadTileSx,
       children: [
-        label,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { ...getInputProps() })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FileUploadThumb, { file: item.file, tile: true }),
+        showProgress ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          LinearProgress,
+          {
+            variant: "determinate",
+            value: Math.max(0, Math.min(100, item.progress ?? 0)),
+            "aria-label": `Upload progress ${item.progress ?? 0}%`,
+            sx: fileUploadTileProgressSx
+          }
+        ) : null,
+        indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          LinearProgress,
+          {
+            "aria-label": "Uploading",
+            sx: fileUploadTileProgressSx
+          }
+        ) : null,
+        disableRemove ? null : /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(import_Close.default, { sx: { fontSize: "0.85rem" } })
+          }
+        )
       ]
     }
   );
-};
-var DropZoneButton_default = DropZoneButton;
+}
 
-// src/components/compound/FileUploader/src/ReactDropzone.tsx
+// src/components/elemental/Image/src/Cropper/sections/CropperFileSelector.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ReactDropzone = ({
-  filesProps,
-  accept,
-  maxFiles = 0,
-  // 0 means unlimited
-  error = false,
-  dropzoneType = "box",
-  label = "Upload File"
-}) => {
-  const [files, setFiles] = filesProps;
-  const blobRegistryRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
-  const onDrop = (0, import_react2.useCallback)((acceptedFiles) => {
-    const newFiles = acceptedFiles.map((file) => {
-      const blobUrl = URL.createObjectURL(file);
-      blobRegistryRef.current.add(blobUrl);
-      return new PreviewableFile({
-        path: file.path,
-        blobUrl,
-        filename: file.name,
-        mimeType: file.type,
-        size: file.size,
-        displaySize: displayFileSize(file.size),
-        fileType: file.type.startsWith("image/") ? "image" : file.type.startsWith("application/json") ? "json" : "other"
-      });
-    });
-    setFiles((prev) => [...prev, ...newFiles]);
-  }, [setFiles]);
-  const isLimitReached = maxFiles > 0 && files.length >= maxFiles;
-  const { getRootProps, getInputProps } = (0, import_react_dropzone.useDropzone)({
-    onDrop,
-    accept,
-    maxFiles: maxFiles > 0 ? maxFiles - files.length : void 0,
-    disabled: isLimitReached
+function acceptToString(accept) {
+  if (!accept) return "image/*";
+  if (typeof accept === "string") return accept;
+  const parts = [];
+  Object.entries(accept).forEach(([mime, exts]) => {
+    parts.push(mime);
+    if (Array.isArray(exts)) parts.push(...exts);
   });
-  const handleDelete = (fileToDelete) => {
-    setFiles((prev) => prev.filter((f) => f !== fileToDelete));
-    if (fileToDelete.blobUrl) {
-      URL.revokeObjectURL(fileToDelete.blobUrl);
-      blobRegistryRef.current.delete(fileToDelete.blobUrl);
-    }
-  };
-  (0, import_react2.useEffect)(() => {
-    const blobRegistry = blobRegistryRef.current;
-    return () => {
-      blobRegistry.forEach((url) => URL.revokeObjectURL(url));
-      blobRegistry.clear();
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_Box.default, { sx: mergeSx({ maxWidth: "100%" }, fileUploaderRootSx), children: [
-    !isLimitReached && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Box.default, { component: "section", children: dropzoneType === "box" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropZoneBox_default, { getRootProps, getInputProps, error }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropZoneButton_default, { getRootProps, getInputProps, label, error }) }),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Stack.default, { spacing: 1, sx: { mt: 0 }, children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      DisplayFile_default,
-      {
-        file,
-        onDelete: handleDelete
-      },
-      file.blobUrl || file.filename || file.path
-    )) })
-  ] });
-};
-var ReactDropzone_default = ReactDropzone;
-
-// src/components/elemental/Image/src/Cropper/sections/CropperFileSelector.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-function CropperFileSelector({ accept = "image/*", buttonLabel = "Select Image", onPick }) {
-  const [files, setFiles] = import_react3.default.useState([]);
-  import_react3.default.useEffect(() => {
-  }, [files]);
-  const lastForwardedRef = import_react3.default.useRef(null);
+  return parts.length ? parts.join(",") : "image/*";
+}
+function CropperFileSelector({
+  accept = "image/*",
+  buttonLabel = "Select Image",
+  onPick
+}) {
+  const [value, setValue] = import_react3.default.useState([]);
+  const lastIdRef = import_react3.default.useRef(null);
   import_react3.default.useEffect(() => {
-    if (!files.length) {
-      if (lastForwardedRef.current) {
-        lastForwardedRef.current = null;
+    if (!value.length) {
+      if (lastIdRef.current) {
+        lastIdRef.current = null;
         onPick?.(null);
       }
       return;
     }
-    const pf = files[0];
-    if (!pf.blobUrl) return;
-    if (lastForwardedRef.current === pf.blobUrl) {
-      return;
-    }
-    let cancelled = false;
-    (async () => {
-      try {
-        const res = await fetch(pf.blobUrl);
-        const blob = await res.blob();
-        const file = new File([blob], pf.filename || "file", { type: pf.mimeType || void 0 });
-        if (!cancelled) {
-          lastForwardedRef.current = pf.blobUrl;
-          onPick?.(file);
+    const item = value[0];
+    if (lastIdRef.current === item.id) return;
+    lastIdRef.current = item.id;
+    onPick?.(item.file);
+  }, [value, onPick]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_Box.default,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        pt: 0
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        FileUpload,
+        {
+          value,
+          onChange: setValue,
+          accept: acceptToString(accept),
+          maxFiles: 1,
+          multiple: false,
+          variant: "button",
+          buttonLabel,
+          itemVariant: "tile",
+          sx: {
+            width: "fit-content",
+            maxWidth: "100%",
+            alignItems: "center",
+            "& .MuiButton-root": { alignSelf: "center" },
+            '& [data-testid$="-list"]': { justifyContent: "center" }
+          }
         }
-      } catch {
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [files, onPick]);
-  const acceptProp = typeof accept === "string" ? { [accept]: [] } : accept;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Box.default, { sx: { display: "flex", alignItems: "center", pt: 0, width: "100%", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ReactDropzone_default, { filesProps: [files, setFiles], accept: acceptProp, maxFiles: 1, dropzoneType: "button", label: buttonLabel }) });
+      )
+    }
+  );
 }
 
 // src/components/elemental/Image/src/Cropper/hooks/useCropperState.ts
@@ -1241,7 +2007,7 @@ function useCropperState({
 }
 
 // src/components/elemental/Image/src/Cropper/Cropper.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Cropper = ({
   blobUrl,
   onSave,
@@ -1283,10 +2049,10 @@ var Cropper = ({
     defaultRatio,
     cropConfig
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     CropperLayout,
     {
-      left: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      left: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         CropperSourceSection,
         {
           activeBlobUrl,
@@ -1302,7 +2068,7 @@ var Cropper = ({
           onImageLoad
         }
       ),
-      right: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      right: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         CropperControlsSection,
         {
           PreviewRenderer,
@@ -1313,9 +2079,9 @@ var Cropper = ({
           setScale
         }
       ),
-      leftFooter: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      leftFooter: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
         footerExtra,
-        showFileSelector && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        showFileSelector && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           CropperFileSelector,
           {
             accept: fileSelectorAccept,
@@ -1324,7 +2090,7 @@ var Cropper = ({
           }
         )
       ] }),
-      footer: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      footer: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         CropperActionSection,
         {
           onSave: handleSave,