@clickhouse/click-ui 0.0.221 → 0.0.223

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

@@ -17775,7 +17775,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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
@@ -17802,7 +17802,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => 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
@@ -17810,14 +17810,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     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
@@ -17826,7 +17826,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => 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
@@ -17835,41 +17835,41 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => 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) {
@@ -17880,7 +17880,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       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());
@@ -17950,13 +17950,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       };
     }, []);
     const processFile = React.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;
       }
@@ -17965,9 +17962,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         size: file2.size
       };
       setFile(newFile);
+      setIsNotSupported(false);
       if (onFileSelect) {
         onFileSelect(file2);
-        setIsNotSupported(false);
       }
     }, [onFileSelect, supportedFileTypes, onFileFailure]);
     const handleDrop = React.useCallback((e) => {
@@ -18007,11 +18004,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }, [onRetry]);
     const acceptedFileTypes = supportedFileTypes.join(",");
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, { name: "upload" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(UploadText, { $size: size2, $hasFile: false, children: [
-          isNotSupported ? /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: isNotSupported, type: "h1", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsxs(FileUploadDescription, { children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UploadIcon$1, { name: "upload" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(UploadText$1, { $size: size2, $hasFile: false, children: [
+          isNotSupported ? /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle$1, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle$1, { $isNotSupported: isNotSupported, type: "h1", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileUploadDescription$1, { children: [
             "Files supported: ",
             supportedFileTypes.join(", ")
           ] })
@@ -18020,23 +18017,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           e.stopPropagation();
           handleBrowseClick();
         }, children: "Browse file" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FileInfo, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(FileInfoHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(DocumentIcon, { name: "document" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(FileDetails, { children: [
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FileInfo$1, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FileInfoHeader$1, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DocumentIcon$1, { name: "document" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileDetails$1, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", children: truncateFilename(file.name) }),
-            (showSuccess || showProgress) && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", color: "muted", children: formatFileSize(file.size) }),
+            (showSuccess || showProgress) && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", color: "muted", children: formatFileSize$1(file.size) }),
             !showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", color: "danger", children: failureMessage }),
             showSuccess && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { size: "xs", state: "success", name: "check" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(FileActions, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(FileActions$1, { children: [
             !showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { size: "sm", icon: "refresh", type: "ghost", onClick: handleRetryUpload }),
             /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { size: "sm", icon: "cross", type: "ghost", onClick: handleRemoveFile })
           ] })
         ] }),
-        showProgress && /* @__PURE__ */ jsxRuntime.jsxs(ProgressContainer$1, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { progress, type: "small" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ProgressPercentage, { size: "sm", color: "muted", children: [
+        showProgress && /* @__PURE__ */ jsxRuntime.jsxs(ProgressContainer$2, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ProgressBarContainer$1, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { progress, type: "small" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ProgressPercentage$1, { size: "sm", color: "muted", children: [
             progress,
             "%"
           ] })
@@ -18047,6 +18044,280 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       } })
     ] });
   };
+  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] = React.useState(false);
+    const [isSupported, setIsSupported] = React.useState(true);
+    const fileInputRef = React.useRef(null);
+    const dragCounterRef = React.useRef(0);
+    React.useEffect(() => {
+      let timeoutId;
+      if (!isSupported) {
+        timeoutId = setTimeout(() => {
+          setIsSupported(true);
+        }, 2e3);
+      }
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [isSupported]);
+    const handleDragEnter = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current += 1;
+      setIsDragging(true);
+    }, []);
+    const handleDragLeave = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current -= 1;
+      if (dragCounterRef.current <= 0) {
+        setIsDragging(false);
+        dragCounterRef.current = 0;
+      }
+    }, []);
+    const handleDragOver = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    React.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 = React.useCallback((file) => {
+      if (!isFiletypeSupported(file.name, supportedFileTypes)) {
+        setIsSupported(false);
+        if (onFileFailure) {
+          onFileFailure();
+        }
+        return;
+      }
+      setIsSupported(true);
+      if (onFileSelect) {
+        onFileSelect(file);
+      }
+    }, [onFileSelect, supportedFileTypes, onFileFailure]);
+    const handleDrop = React.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 = React.useCallback((e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        Array.from(e.target.files).forEach((file) => {
+          processFile(file);
+        });
+      }
+    }, [processFile]);
+    const handleBrowseClick = React.useCallback(() => {
+      if (fileInputRef.current) {
+        fileInputRef.current.click();
+      }
+    }, []);
+    const handleRemoveFile = React.useCallback((fileId) => {
+      if (onFileRemove) {
+        onFileRemove(fileId);
+      }
+    }, [onFileRemove]);
+    const handleRetryUpload = React.useCallback((fileId) => {
+      if (onFileRetry) {
+        onFileRetry(fileId);
+      }
+    }, [onFileRetry]);
+    const acceptedFileTypes = supportedFileTypes.join(",");
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(UploadArea, { $isDragging: isDragging, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleBrowseClick, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, { name: "upload" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(UploadText, { children: [
+          !isSupported ? /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: !isSupported, type: "h1", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileUploadDescription, { children: [
+            "Files supported: ",
+            supportedFileTypes.join(", ")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "secondary", onClick: (e) => {
+          e.stopPropagation();
+          handleBrowseClick();
+        }, children: "Browse files" })
+      ] }),
+      files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(FilesList, { children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(FileItem, { $isError: file.status === "error", children: /* @__PURE__ */ jsxRuntime.jsxs(FileInfo, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FileInfoHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DocumentIcon, { name: "document" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileDetails, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", children: truncateFilename(file.name) }),
+            (file.status === "success" || file.status === "uploading") && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", color: "muted", children: formatFileSize(file.size) }),
+            file.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", color: "danger", children: file.errorMessage || "Upload failed" }),
+            file.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { size: "xs", state: "success", name: "check" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileActions, { children: [
+            file.status === "error" && /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { size: "sm", icon: "refresh", type: "ghost", onClick: () => handleRetryUpload(file.id) }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { size: "sm", icon: "cross", type: "ghost", onClick: () => handleRemoveFile(file.id) })
+          ] })
+        ] }),
+        file.status === "uploading" && /* @__PURE__ */ jsxRuntime.jsxs(ProgressContainer$1, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { progress: file.progress, type: "small" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ProgressPercentage, { size: "sm", color: "muted", children: [
+            file.progress,
+            "%"
+          ] })
+        ] })
+      ] }) }, file.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, multiple: true, style: {
+        display: "none"
+      } })
+    ] });
+  };
   const Flyout = ({
     modal = false,
     ...props
@@ -52127,6 +52398,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.Dialog = Dialog;
   exports2.Dropdown = Dropdown;
   exports2.EllipsisContent = EllipsisContent;
+  exports2.FileMultiUpload = FileMultiUpload;
   exports2.FileTabElement = FileTabElement;
   exports2.FileTabs = FileTabs;
   exports2.FileUpload = FileUpload;
@@ -52184,3 +52456,4 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.useToast = useToast;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
+//# sourceMappingURL=click-ui.bundled.umd.js.map