@clickhouse/click-ui 0.0.222 → 0.0.223

package/dist/click-ui.bundled.es.js

@@ -17759,7 +17759,7 @@ const truncateFilename = (filename, maxLength = 40, delimiter2 = "~") => {
   const truncatedName = nameWithoutExtension.slice(0, maxLength) + delimiter2;
   return truncatedName + extension;
 };
-const UploadArea = pt.div.withConfig({
+const UploadArea$1 = pt.div.withConfig({
   componentId: "sc-1rzizve-0"
 })(["background-color:", ";border:", ";border-radius:", ";padding:", ";display:flex;flex-direction:", ";align-items:center;justify-content:", ";gap:", ";cursor:", ";transition:", ";", " ", ""], ({
   theme: theme2
@@ -17786,7 +17786,7 @@ const UploadArea = pt.div.withConfig({
 }) => theme2.click.fileUpload.color.stroke.active)), (props) => props.$isError && ct(["background-color:", ";border:none;"], ({
   theme: theme2
 }) => theme2.click.fileUpload.color.background.error));
-const FileUploadTitle = pt(Title$2).withConfig({
+const FileUploadTitle$1 = pt(Title$2).withConfig({
   componentId: "sc-1rzizve-1"
 })(["font:", ";color:", ";"], ({
   theme: theme2
@@ -17794,14 +17794,14 @@ const FileUploadTitle = pt(Title$2).withConfig({
   theme: theme2,
   $isNotSupported
 }) => $isNotSupported ? theme2.click.fileUpload.color.title.error : theme2.click.fileUpload.color.title.default);
-const FileUploadDescription = pt(Text).withConfig({
+const FileUploadDescription$1 = pt(Text).withConfig({
   componentId: "sc-1rzizve-2"
 })(["font:", ";color:", ";"], ({
   theme: theme2
 }) => theme2.click.fileUpload.typography.description.default, ({
   theme: theme2
 }) => theme2.click.fileUpload.color.description.default);
-const DocumentIcon = pt(SvgImage).withConfig({
+const DocumentIcon$1 = pt(SvgImage).withConfig({
   componentId: "sc-1rzizve-3"
 })(["svg{width:", ";height:", ";color:", ";}"], ({
   theme: theme2
@@ -17810,7 +17810,7 @@ const DocumentIcon = pt(SvgImage).withConfig({
 }) => theme2.click.fileUpload.sm.icon.size.height, ({
   theme: theme2
 }) => theme2.click.fileUpload.sm.color.icon.default);
-const UploadIcon = pt(SvgImage).withConfig({
+const UploadIcon$1 = pt(SvgImage).withConfig({
   componentId: "sc-1rzizve-4"
 })(["svg{width:", ";height:", ";color:", ";}"], ({
   theme: theme2
@@ -17819,41 +17819,41 @@ const UploadIcon = pt(SvgImage).withConfig({
 }) => theme2.click.fileUpload.md.icon.size.height, ({
   theme: theme2
 }) => theme2.click.fileUpload.md.color.icon.default);
-const UploadText = pt.div.withConfig({
+const UploadText$1 = pt.div.withConfig({
   componentId: "sc-1rzizve-5"
 })(["text-align:", ";", " ", ""], (props) => props.$hasFile || props.$size === "sm" ? "left" : "center", (props) => (props.$hasFile || props.$size === "sm") && ct(["flex:1;"]), (props) => !props.$hasFile && props.$size === "md" && ct(["display:flex;flex-direction:column;align-items:center;width:100%;"]));
-const FileInfoHeader = pt.div.withConfig({
+const FileInfoHeader$1 = pt.div.withConfig({
   componentId: "sc-1rzizve-6"
 })(["display:flex;align-items:center;gap:", ";width:100%;"], ({
   theme: theme2
 }) => theme2.click.fileUpload.sm.space.gap);
-const FileInfo = pt.div.withConfig({
+const FileInfo$1 = pt.div.withConfig({
   componentId: "sc-1rzizve-7"
 })(["display:flex;flex-direction:column;gap:", ";flex:1;"], ({
   theme: theme2
 }) => theme2.click.fileUpload.hasFile.header.space.gap);
-const FileDetails = pt.div.withConfig({
+const FileDetails$1 = pt.div.withConfig({
   componentId: "sc-1rzizve-8"
 })(["display:flex;gap:", ";border:none;"], ({
   theme: theme2
 }) => theme2.click.fileUpload.md.space.gap);
-const FileActions = pt.div.withConfig({
+const FileActions$1 = pt.div.withConfig({
   componentId: "sc-1rzizve-9"
 })(["display:flex;align-items:center;margin-left:auto;gap:0;"]);
-const ProgressContainer$1 = pt.div.withConfig({
+const ProgressContainer$2 = pt.div.withConfig({
   componentId: "sc-1rzizve-10"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;"]);
-const ProgressBarContainer = pt.div.withConfig({
+const ProgressBarContainer$1 = pt.div.withConfig({
   componentId: "sc-1rzizve-11"
 })(["width:100%;flex:1;"]);
-const ProgressPercentage = pt(Text).withConfig({
+const ProgressPercentage$1 = pt(Text).withConfig({
   componentId: "sc-1rzizve-12"
 })(["min-width:", ";text-align:right;padding-right:", ";"], ({
   theme: theme2
 }) => theme2.sizes[10], ({
   theme: theme2
 }) => theme2.click.fileUpload.md.space.gap);
-const formatFileSize = (sizeInBytes) => {
+const formatFileSize$1 = (sizeInBytes) => {
   if (sizeInBytes < 1024) {
     return `${sizeInBytes.toFixed(1)} B`;
   } else if (sizeInBytes < 1024 * 1024) {
@@ -17864,7 +17864,7 @@ const formatFileSize = (sizeInBytes) => {
     return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
   }
 };
-const isFiletypeSupported = (filename, supportedTypes) => {
+const isFiletypeSupported$1 = (filename, supportedTypes) => {
   if (!supportedTypes.length) return true;
   const extension = filename.toLowerCase().slice(filename.lastIndexOf("."));
   return supportedTypes.some((type) => type.toLowerCase() === extension.toLowerCase());
@@ -17934,13 +17934,10 @@ const FileUpload = ({
     };
   }, []);
   const processFile = useCallback((file2) => {
-    if (!isFiletypeSupported(file2.name, supportedFileTypes)) {
+    if (!isFiletypeSupported$1(file2.name, supportedFileTypes)) {
+      setIsNotSupported(true);
       if (onFileFailure) {
         onFileFailure();
-        console.log("File type not supported");
-        setIsNotSupported(true);
-      } else {
-        console.warn(`File type not supported: ${file2.name}`);
       }
       return;
     }
@@ -17949,9 +17946,9 @@ const FileUpload = ({
       size: file2.size
     };
     setFile(newFile);
+    setIsNotSupported(false);
     if (onFileSelect) {
       onFileSelect(file2);
-      setIsNotSupported(false);
     }
   }, [onFileSelect, supportedFileTypes, onFileFailure]);
   const handleDrop = useCallback((e) => {
@@ -17991,11 +17988,11 @@ const FileUpload = ({
   }, [onRetry]);
   const acceptedFileTypes = supportedFileTypes.join(",");
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(UploadArea, { $isDragging: isDragging, $size: size2, $hasFile: !!file, $isError: !!file && !showSuccess && !showProgress, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !file ? handleBrowseClick : void 0, children: !file ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      /* @__PURE__ */ jsx(UploadIcon, { name: "upload" }),
-      /* @__PURE__ */ jsxs(UploadText, { $size: size2, $hasFile: false, children: [
-        isNotSupported ? /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: isNotSupported, type: "h1", children: title }),
-        /* @__PURE__ */ jsxs(FileUploadDescription, { children: [
+    /* @__PURE__ */ jsx(UploadArea$1, { $isDragging: isDragging, $size: size2, $hasFile: !!file, $isError: !!file && !showSuccess && !showProgress, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !file ? handleBrowseClick : void 0, children: !file ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(UploadIcon$1, { name: "upload" }),
+      /* @__PURE__ */ jsxs(UploadText$1, { $size: size2, $hasFile: false, children: [
+        isNotSupported ? /* @__PURE__ */ jsx(FileUploadTitle$1, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsx(FileUploadTitle$1, { $isNotSupported: isNotSupported, type: "h1", children: title }),
+        /* @__PURE__ */ jsxs(FileUploadDescription$1, { children: [
           "Files supported: ",
           supportedFileTypes.join(", ")
         ] })
@@ -18004,23 +18001,23 @@ const FileUpload = ({
         e.stopPropagation();
         handleBrowseClick();
       }, children: "Browse file" })
-    ] }) : /* @__PURE__ */ jsxs(FileInfo, { children: [
-      /* @__PURE__ */ jsxs(FileInfoHeader, { children: [
-        /* @__PURE__ */ jsx(DocumentIcon, { name: "document" }),
-        /* @__PURE__ */ jsxs(FileDetails, { children: [
+    ] }) : /* @__PURE__ */ jsxs(FileInfo$1, { children: [
+      /* @__PURE__ */ jsxs(FileInfoHeader$1, { children: [
+        /* @__PURE__ */ jsx(DocumentIcon$1, { name: "document" }),
+        /* @__PURE__ */ jsxs(FileDetails$1, { children: [
           /* @__PURE__ */ jsx(Text, { size: "md", children: truncateFilename(file.name) }),
-          (showSuccess || showProgress) && /* @__PURE__ */ jsx(Text, { size: "md", color: "muted", children: formatFileSize(file.size) }),
+          (showSuccess || showProgress) && /* @__PURE__ */ jsx(Text, { size: "md", color: "muted", children: formatFileSize$1(file.size) }),
           !showProgress && !showSuccess && /* @__PURE__ */ jsx(Text, { size: "md", color: "danger", children: failureMessage }),
           showSuccess && /* @__PURE__ */ jsx(SvgImage, { size: "xs", state: "success", name: "check" })
         ] }),
-        /* @__PURE__ */ jsxs(FileActions, { children: [
+        /* @__PURE__ */ jsxs(FileActions$1, { children: [
           !showProgress && !showSuccess && /* @__PURE__ */ jsx(IconButton$1, { size: "sm", icon: "refresh", type: "ghost", onClick: handleRetryUpload }),
           /* @__PURE__ */ jsx(IconButton$1, { size: "sm", icon: "cross", type: "ghost", onClick: handleRemoveFile })
         ] })
       ] }),
-      showProgress && /* @__PURE__ */ jsxs(ProgressContainer$1, { children: [
-        /* @__PURE__ */ jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsx(ProgressBar, { progress, type: "small" }) }),
-        /* @__PURE__ */ jsxs(ProgressPercentage, { size: "sm", color: "muted", children: [
+      showProgress && /* @__PURE__ */ jsxs(ProgressContainer$2, { children: [
+        /* @__PURE__ */ jsx(ProgressBarContainer$1, { children: /* @__PURE__ */ jsx(ProgressBar, { progress, type: "small" }) }),
+        /* @__PURE__ */ jsxs(ProgressPercentage$1, { size: "sm", color: "muted", children: [
           progress,
           "%"
         ] })
@@ -18031,6 +18028,280 @@ const FileUpload = ({
     } })
   ] });
 };
+const UploadArea = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-0"
+})(["background-color:", ";border:", ";border-radius:", ";padding:", ";display:flex;flex-direction:column;align-items:center;justify-content:center;gap:", ";cursor:pointer;transition:", ";border-style:dashed;border-color:", ";", ""], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.background.default, ({
+  theme: theme2
+}) => `1px solid ${theme2.click.fileUpload.color.stroke.default}`, ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.radii.all, ({
+  theme: theme2
+}) => `${theme2.click.fileUpload.md.space.y} ${theme2.click.fileUpload.md.space.x}`, ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.space.gap, ({
+  theme: theme2
+}) => theme2.click.fileUpload.transitions.all, ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.stroke.default, (props) => props.$isDragging && ct(["background-color:", ";border-color:", ";"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.background.active, ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.stroke.active));
+const FileUploadTitle = pt(Title$2).withConfig({
+  componentId: "sc-1w9rsfj-1"
+})(["font:", ";color:", ";"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.typography.title.default, ({
+  theme: theme2,
+  $isNotSupported
+}) => $isNotSupported ? theme2.click.fileUpload.color.title.error : theme2.click.fileUpload.color.title.default);
+const FileUploadDescription = pt(Text).withConfig({
+  componentId: "sc-1w9rsfj-2"
+})(["font:", ";color:", ";"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.typography.description.default, ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.description.default);
+const UploadIcon = pt(SvgImage).withConfig({
+  componentId: "sc-1w9rsfj-3"
+})(["svg{width:", ";height:", ";color:", ";}"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.icon.size.width, ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.icon.size.height, ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.color.icon.default);
+const UploadText = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-4"
+})(["text-align:center;display:flex;flex-direction:column;align-items:center;width:100%;"]);
+const FilesList = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-5"
+})(["display:flex;flex-direction:column;gap:", ";width:100%;margin-top:", ";"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.space.gap, ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.space.gap);
+const FileItem = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-6"
+})(["background-color:", ";border:", ";border-radius:", ";padding:", ";display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:", ";", ""], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.background.default, ({
+  theme: theme2
+}) => `1px solid ${theme2.click.fileUpload.color.stroke.default}`, ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.radii.all, ({
+  theme: theme2
+}) => `${theme2.click.fileUpload.sm.space.y} ${theme2.click.fileUpload.sm.space.x}`, ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.space.gap, (props) => props.$isError && ct(["background-color:", ";border:none;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.background.error));
+const DocumentIcon = pt(SvgImage).withConfig({
+  componentId: "sc-1w9rsfj-7"
+})(["svg{width:", ";height:", ";color:", ";}"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.icon.size.width, ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.icon.size.height, ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.color.icon.default);
+const FileInfoHeader = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-8"
+})(["display:flex;align-items:center;gap:", ";width:100%;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.space.gap);
+const FileInfo = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-9"
+})(["display:flex;flex-direction:column;gap:", ";flex:1;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.hasFile.header.space.gap);
+const FileDetails = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-10"
+})(["display:flex;gap:", ";border:none;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.space.gap);
+const FileActions = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-11"
+})(["display:flex;align-items:center;margin-left:auto;gap:0;"]);
+const ProgressContainer$1 = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-12"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;"]);
+const ProgressBarContainer = pt.div.withConfig({
+  componentId: "sc-1w9rsfj-13"
+})(["width:100%;flex:1;"]);
+const ProgressPercentage = pt(Text).withConfig({
+  componentId: "sc-1w9rsfj-14"
+})(["min-width:", ";text-align:right;padding-right:", ";"], ({
+  theme: theme2
+}) => theme2.sizes[10], ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.space.gap);
+const formatFileSize = (sizeInBytes) => {
+  if (sizeInBytes < 1024) {
+    return `${sizeInBytes.toFixed(1)} B`;
+  } else if (sizeInBytes < 1024 * 1024) {
+    return `${(sizeInBytes / 1024).toFixed(1)} KB`;
+  } else if (sizeInBytes < 1024 * 1024 * 1024) {
+    return `${(sizeInBytes / (1024 * 1024)).toFixed(1)} MB`;
+  } else {
+    return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+  }
+};
+const isFiletypeSupported = (filename, supportedTypes) => {
+  if (!supportedTypes.length) return true;
+  const extension = filename.toLowerCase().slice(filename.lastIndexOf("."));
+  return supportedTypes.some((type) => type.toLowerCase() === extension.toLowerCase());
+};
+const FileMultiUpload = ({
+  title,
+  supportedFileTypes = [".txt", ".sql"],
+  files,
+  onFileSelect,
+  onFileRetry,
+  onFileRemove,
+  onFileFailure
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isSupported, setIsSupported] = useState(true);
+  const fileInputRef = useRef(null);
+  const dragCounterRef = useRef(0);
+  useEffect(() => {
+    let timeoutId;
+    if (!isSupported) {
+      timeoutId = setTimeout(() => {
+        setIsSupported(true);
+      }, 2e3);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isSupported]);
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current += 1;
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current <= 0) {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    }
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  useEffect(() => {
+    const handleDragEnd = () => {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    };
+    window.addEventListener("dragend", handleDragEnd);
+    document.addEventListener("drop", handleDragEnd);
+    document.addEventListener("mouseleave", handleDragEnd);
+    return () => {
+      window.removeEventListener("dragend", handleDragEnd);
+      document.removeEventListener("drop", handleDragEnd);
+      document.removeEventListener("mouseleave", handleDragEnd);
+    };
+  }, []);
+  const processFile = useCallback((file) => {
+    if (!isFiletypeSupported(file.name, supportedFileTypes)) {
+      setIsSupported(false);
+      if (onFileFailure) {
+        onFileFailure();
+      }
+      return;
+    }
+    setIsSupported(true);
+    if (onFileSelect) {
+      onFileSelect(file);
+    }
+  }, [onFileSelect, supportedFileTypes, onFileFailure]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    dragCounterRef.current = 0;
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      Array.from(e.dataTransfer.files).forEach((file) => {
+        processFile(file);
+      });
+    }
+  }, [processFile]);
+  const handleFileSelect = useCallback((e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      Array.from(e.target.files).forEach((file) => {
+        processFile(file);
+      });
+    }
+  }, [processFile]);
+  const handleBrowseClick = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, []);
+  const handleRemoveFile = useCallback((fileId) => {
+    if (onFileRemove) {
+      onFileRemove(fileId);
+    }
+  }, [onFileRemove]);
+  const handleRetryUpload = useCallback((fileId) => {
+    if (onFileRetry) {
+      onFileRetry(fileId);
+    }
+  }, [onFileRetry]);
+  const acceptedFileTypes = supportedFileTypes.join(",");
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs(UploadArea, { $isDragging: isDragging, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleBrowseClick, children: [
+      /* @__PURE__ */ jsx(UploadIcon, { name: "upload" }),
+      /* @__PURE__ */ jsxs(UploadText, { children: [
+        !isSupported ? /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: !isSupported, type: "h1", children: title }),
+        /* @__PURE__ */ jsxs(FileUploadDescription, { children: [
+          "Files supported: ",
+          supportedFileTypes.join(", ")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "secondary", onClick: (e) => {
+        e.stopPropagation();
+        handleBrowseClick();
+      }, children: "Browse files" })
+    ] }),
+    files.length > 0 && /* @__PURE__ */ jsx(FilesList, { children: files.map((file) => /* @__PURE__ */ jsx(FileItem, { $isError: file.status === "error", children: /* @__PURE__ */ jsxs(FileInfo, { children: [
+      /* @__PURE__ */ jsxs(FileInfoHeader, { children: [
+        /* @__PURE__ */ jsx(DocumentIcon, { name: "document" }),
+        /* @__PURE__ */ jsxs(FileDetails, { children: [
+          /* @__PURE__ */ jsx(Text, { size: "md", children: truncateFilename(file.name) }),
+          (file.status === "success" || file.status === "uploading") && /* @__PURE__ */ jsx(Text, { size: "md", color: "muted", children: formatFileSize(file.size) }),
+          file.status === "error" && /* @__PURE__ */ jsx(Text, { size: "md", color: "danger", children: file.errorMessage || "Upload failed" }),
+          file.status === "success" && /* @__PURE__ */ jsx(SvgImage, { size: "xs", state: "success", name: "check" })
+        ] }),
+        /* @__PURE__ */ jsxs(FileActions, { children: [
+          file.status === "error" && /* @__PURE__ */ jsx(IconButton$1, { size: "sm", icon: "refresh", type: "ghost", onClick: () => handleRetryUpload(file.id) }),
+          /* @__PURE__ */ jsx(IconButton$1, { size: "sm", icon: "cross", type: "ghost", onClick: () => handleRemoveFile(file.id) })
+        ] })
+      ] }),
+      file.status === "uploading" && /* @__PURE__ */ jsxs(ProgressContainer$1, { children: [
+        /* @__PURE__ */ jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsx(ProgressBar, { progress: file.progress, type: "small" }) }),
+        /* @__PURE__ */ jsxs(ProgressPercentage, { size: "sm", color: "muted", children: [
+          file.progress,
+          "%"
+        ] })
+      ] })
+    ] }) }, file.id)) }),
+    /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, multiple: true, style: {
+      display: "none"
+    } })
+  ] });
+};
 const Flyout = ({
   modal = false,
   ...props
@@ -52112,6 +52383,7 @@ export {
   Dialog,
   Dropdown,
   EllipsisContent,
+  FileMultiUpload,
   FileTabElement,
   FileTabs,
   FileUpload,