@mdigital_ui/ui 0.4.0 → 0.4.2

package/dist/chunk-3BZE6BBJ.js

@@ -0,0 +1,758 @@
+import { useRipple, RippleContainer } from './chunk-OFUPJH35.js';
+import { getValidationStatus, cn, statusMessageVariants, iconSizes } from './chunk-NGYLRX6F.js';
+import { Image, Upload as Upload$1, File, X, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var uploadButtonVariants = cva(
+  "inline-flex cursor-pointer outline-none border items-center justify-center gap-2 font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+  {
+    variants: {
+      color: {
+        primary: "border-primary text-white bg-primary hover:bg-primary/90",
+        secondary: "border-secondary text-white bg-secondary hover:bg-secondary/90",
+        success: "border-success text-white bg-success hover:bg-success/90",
+        error: "border-error text-white bg-error hover:bg-error/90",
+        accent: "border-accent text-white bg-accent hover:bg-accent/90",
+        warning: "border-warning text-white bg-warning hover:bg-warning/90",
+        info: "border-info text-white bg-info hover:bg-info/90"
+      },
+      size: {
+        xs: "h-(--button-height-xs) px-(--button-padding-x-xs) text-xs",
+        sm: "h-(--button-height-sm) px-(--button-padding-x-sm) text-sm",
+        md: "h-(--button-height-md) px-(--button-padding-x-md) text-base",
+        lg: "h-(--button-height-lg) px-(--button-padding-x-lg) text-lg"
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  }
+);
+var uploadDropzoneVariants = cva(
+  "relative border-2 border-dashed rounded-lg transition-[colors,border-color] duration-200 cursor-pointer",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary hover:bg-primary/5",
+        dragActive: "border-primary bg-primary/10",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "p-2",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var uploadDraggerVariants = cva(
+  "relative border-2 border-dashed rounded-lg transition-[colors,border-color] duration-200 cursor-pointer flex flex-col items-center justify-center gap-2",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary hover:bg-primary/5",
+        dragActive: "border-primary bg-primary/10 scale-[1.02]",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "min-h-[100px] p-3",
+        sm: "min-h-[120px] p-4",
+        md: "min-h-[160px] p-6",
+        lg: "min-h-[200px] p-8"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var uploadAvatarVariants = cva(
+  "relative overflow-hidden rounded-full border-2 border-dashed cursor-pointer transition-[colors,border-color] duration-200 flex items-center justify-center",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary",
+        dragActive: "border-primary bg-primary/10",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "w-12 h-12",
+        sm: "w-16 h-16",
+        md: "w-24 h-24",
+        lg: "w-32 h-32"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var uploadPictureVariants = cva(
+  "relative overflow-hidden rounded-md border-2 border-dashed cursor-pointer transition-[colors,border-color] duration-200 flex items-center justify-center",
+  {
+    variants: {
+      status: {
+        default: "border-border bg-surface/50 hover:border-primary",
+        dragActive: "border-primary bg-primary/10",
+        error: "border-error bg-error/5",
+        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
+      },
+      size: {
+        xs: "w-16 h-16",
+        sm: "w-24 h-24",
+        md: "w-32 h-32",
+        lg: "w-40 h-40"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md"
+    }
+  }
+);
+var formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+};
+var isImageFile = (file) => {
+  const type = file.type || "";
+  return type.startsWith("image/");
+};
+var generateUID = () => {
+  return `upload-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+};
+var Upload = React.memo(
+  ({
+    variant = "button",
+    size = "md",
+    color = "primary",
+    label,
+    helperText,
+    error,
+    warning,
+    info,
+    success,
+    accept,
+    multiple = false,
+    maxSize,
+    maxCount,
+    fileList,
+    defaultFileList = [],
+    showUploadList = true,
+    listType = "text",
+    disabled = false,
+    buttonText = "Upload File",
+    dragText = "Click or drag file to this area to upload",
+    dragHint = "Support for a single or bulk upload",
+    onChange,
+    onRemove,
+    beforeUpload,
+    customRequest,
+    onError,
+    className,
+    classNames,
+    ref,
+    ...props
+  }) => {
+    const [internalFileList, setInternalFileList] = React.useState(defaultFileList);
+    const [dragActive, setDragActive] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const prevFileListRef = React.useRef([]);
+    const { ripples, onPointerDown: ripplePointerDown, onKeyDown: rippleKeyDown, onAnimationEnd: rippleAnimationEnd } = useRipple(!disabled);
+    const currentFileList = fileList !== void 0 ? fileList : internalFileList;
+    const { status, message: helperMessage } = getValidationStatus({
+      error,
+      warning,
+      info,
+      success,
+      helperText
+    });
+    const validateFile = React.useCallback(
+      (file) => {
+        if (maxSize && file.size > maxSize) {
+          return `File size exceeds ${formatFileSize(maxSize)}`;
+        }
+        if (maxCount && currentFileList.length >= maxCount) {
+          return `Maximum ${maxCount} file${maxCount > 1 ? "s" : ""} allowed`;
+        }
+        return null;
+      },
+      [maxSize, maxCount, currentFileList.length]
+    );
+    const handleFiles = React.useCallback(
+      async (files) => {
+        if (!files || files.length === 0) return;
+        const newFiles = [];
+        for (let i = 0; i < files.length; i++) {
+          const file = files[i];
+          if (!file) continue;
+          const validationError = validateFile(file);
+          if (validationError) {
+            onError?.(validationError, file);
+            continue;
+          }
+          if (beforeUpload) {
+            const shouldUpload = await beforeUpload(file);
+            if (!shouldUpload) continue;
+          }
+          const uploadFile = {
+            uid: generateUID(),
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            status: "uploading",
+            percent: 0
+          };
+          newFiles.push(uploadFile);
+          if (customRequest) {
+            customRequest({
+              file,
+              onProgress: (percent) => {
+                setInternalFileList(
+                  (prev) => prev.map(
+                    (f) => f.uid === uploadFile.uid ? { ...f, percent } : f
+                  )
+                );
+              },
+              onSuccess: (response) => {
+                setInternalFileList(
+                  (prev) => prev.map(
+                    (f) => f.uid === uploadFile.uid ? {
+                      ...f,
+                      status: "done",
+                      percent: 100,
+                      response
+                    } : f
+                  )
+                );
+              },
+              onError: (err) => {
+                setInternalFileList(
+                  (prev) => prev.map(
+                    (f) => f.uid === uploadFile.uid ? { ...f, status: "error", error: err } : f
+                  )
+                );
+              }
+            });
+          } else {
+            if (file && isImageFile(file)) {
+              uploadFile.thumbUrl = URL.createObjectURL(file);
+            }
+            uploadFile.status = "done";
+            uploadFile.percent = 100;
+          }
+        }
+        const updatedList = multiple ? [...currentFileList, ...newFiles] : newFiles;
+        if (fileList === void 0) {
+          setInternalFileList(updatedList);
+        }
+        onChange?.(updatedList);
+      },
+      [
+        validateFile,
+        beforeUpload,
+        customRequest,
+        onError,
+        multiple,
+        currentFileList,
+        fileList,
+        onChange
+      ]
+    );
+    const handleInputChange = React.useCallback(
+      (e) => {
+        handleFiles(e.target.files);
+        e.target.value = "";
+      },
+      [handleFiles]
+    );
+    const handleRemove = React.useCallback(
+      (file) => {
+        if (file.thumbUrl?.startsWith("blob:")) {
+          URL.revokeObjectURL(file.thumbUrl);
+        }
+        const updatedList = currentFileList.filter((f) => f.uid !== file.uid);
+        if (fileList === void 0) {
+          setInternalFileList(updatedList);
+        }
+        onRemove?.(file);
+        onChange?.(updatedList);
+      },
+      [currentFileList, fileList, onRemove, onChange]
+    );
+    React.useEffect(() => {
+      const prevFileList = prevFileListRef.current;
+      prevFileList.forEach((prevFile) => {
+        const stillExists = currentFileList.some((file) => file.uid === prevFile.uid);
+        if (!stillExists && prevFile.thumbUrl?.startsWith("blob:")) {
+          URL.revokeObjectURL(prevFile.thumbUrl);
+        }
+      });
+      prevFileListRef.current = currentFileList;
+    }, [currentFileList]);
+    React.useEffect(() => {
+      return () => {
+        prevFileListRef.current.forEach((file) => {
+          if (file.thumbUrl?.startsWith("blob:")) {
+            URL.revokeObjectURL(file.thumbUrl);
+          }
+        });
+      };
+    }, []);
+    const handleClick = React.useCallback(() => {
+      if (!disabled) {
+        inputRef.current?.click();
+      }
+    }, [disabled]);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (disabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          inputRef.current?.click();
+        }
+      },
+      [disabled]
+    );
+    const handleDragEnter = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(true);
+    }, []);
+    const handleDragLeave = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+    }, []);
+    const handleDragOver = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    const handleDrop = React.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragActive(false);
+        if (!disabled) {
+          handleFiles(e.dataTransfer.files);
+        }
+      },
+      [disabled, handleFiles]
+    );
+    const renderFileList = () => {
+      if (!showUploadList || currentFileList.length === 0) return null;
+      if (listType === "picture-card") {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "upload_fileList",
+            className: cn("upload_fileList", "flex flex-wrap gap-2 mt-2", classNames?.fileList),
+            children: currentFileList.map((file) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "upload_fileItem",
+                className: cn(
+                  "upload_fileItem",
+                  "relative w-24 h-24 rounded-md border border-border overflow-hidden group",
+                  classNames?.fileItem
+                ),
+                children: [
+                  file.thumbUrl ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: file.thumbUrl,
+                      alt: file.name,
+                      className: "w-full h-full object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-surface", children: /* @__PURE__ */ jsx(File, { className: "w-8 h-8 text-text-secondary" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleRemove(file),
+                      className: "text-white hover:text-error transition-colors",
+                      children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+                    }
+                  ) }),
+                  file.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 text-white animate-spin" }) })
+                ]
+              },
+              file.uid
+            ))
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "upload_fileList",
+          className: cn("upload_fileList", "mt-2 space-y-1", classNames?.fileList),
+          children: currentFileList.map((file) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "upload_fileItem",
+              className: cn(
+                "upload_fileItem",
+                "flex items-center justify-between p-2 rounded-md bg-surface hover:bg-surface/80 transition-colors",
+                classNames?.fileItem
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+                  listType === "picture" && file.thumbUrl ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: file.thumbUrl,
+                      alt: file.name,
+                      className: "w-8 h-8 rounded object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    File,
+                    {
+                      className: cn("text-text-secondary shrink-0", iconSizes[size])
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-sm text-text-primary truncate", children: file.name }),
+                    /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-secondary", children: [
+                      formatFileSize(file.size),
+                      file.status === "uploading" && file.percent !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+                        " - ",
+                        file.percent,
+                        "%"
+                      ] })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  file.status === "uploading" && /* @__PURE__ */ jsx(
+                    Loader2,
+                    {
+                      className: cn("text-primary animate-spin", iconSizes[size])
+                    }
+                  ),
+                  file.status === "done" && /* @__PURE__ */ jsx(
+                    CheckCircle,
+                    {
+                      className: cn("text-success", iconSizes[size])
+                    }
+                  ),
+                  file.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: cn("text-error", iconSizes[size]) }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => handleRemove(file),
+                      className: "text-text-secondary hover:text-error transition-colors",
+                      children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
+                    }
+                  )
+                ] })
+              ]
+            },
+            file.uid
+          ))
+        }
+      );
+    };
+    const currentFile = currentFileList[0];
+    const renderUploadArea = () => {
+      const dragStatus = dragActive ? "dragActive" : disabled ? "disabled" : status === "error" ? "error" : "default";
+      switch (variant) {
+        case "button":
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleClick,
+              onPointerDown: ripplePointerDown,
+              onKeyDown: rippleKeyDown,
+              disabled,
+              "data-slot": "upload_dropzone",
+              className: cn(
+                "upload_dropzone",
+                uploadButtonVariants({ color, size }),
+                "relative overflow-hidden",
+                classNames?.dropzone,
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Upload$1,
+                  {
+                    "data-slot": "upload_icon",
+                    className: cn("upload_icon", iconSizes[size], classNames?.icon)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "upload_text",
+                    className: cn("upload_text", classNames?.text),
+                    children: buttonText
+                  }
+                ),
+                /* @__PURE__ */ jsx(RippleContainer, { ripples, onAnimationEnd: rippleAnimationEnd })
+              ]
+            }
+          );
+        case "dropzone":
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": `Upload file${multiple ? "s" : ""}`,
+              "aria-disabled": disabled || void 0,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              "data-slot": "upload_dropzone",
+              className: cn(
+                "upload_dropzone",
+                uploadDropzoneVariants({ status: dragStatus, size }),
+                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
+                classNames?.dropzone,
+                className
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  Upload$1,
+                  {
+                    "data-slot": "upload_icon",
+                    className: cn(
+                      "upload_icon",
+                      "text-text-secondary",
+                      iconSizes[size],
+                      classNames?.icon
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      "data-slot": "upload_text",
+                      className: cn(
+                        "upload_text",
+                        "text-sm text-text-primary font-medium",
+                        classNames?.text
+                      ),
+                      children: dragText
+                    }
+                  ),
+                  dragHint && /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      "data-slot": "upload_hint",
+                      className: cn(
+                        "upload_hint",
+                        "text-xs text-text-secondary mt-0.5",
+                        classNames?.hint
+                      ),
+                      children: dragHint
+                    }
+                  )
+                ] })
+              ] })
+            }
+          );
+        case "dragger":
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": `Upload file${multiple ? "s" : ""}`,
+              "aria-disabled": disabled || void 0,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              "data-slot": "upload_dropzone",
+              className: cn(
+                "upload_dropzone",
+                uploadDraggerVariants({ status: dragStatus, size }),
+                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
+                classNames?.dropzone,
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Upload$1,
+                  {
+                    "data-slot": "upload_icon",
+                    className: cn("upload_icon", "w-10 h-10 text-primary", classNames?.icon)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    "data-slot": "upload_text",
+                    className: cn(
+                      "upload_text",
+                      "text-base font-medium text-text-primary",
+                      classNames?.text
+                    ),
+                    children: dragText
+                  }
+                ),
+                dragHint && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    "data-slot": "upload_hint",
+                    className: cn(
+                      "upload_hint",
+                      "text-sm text-text-secondary",
+                      classNames?.hint
+                    ),
+                    children: dragHint
+                  }
+                )
+              ]
+            }
+          );
+        case "avatar":
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": "Upload avatar image",
+              "aria-disabled": disabled || void 0,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              "data-slot": "upload_dropzone",
+              className: cn(
+                "upload_dropzone",
+                uploadAvatarVariants({ status: dragStatus, size }),
+                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
+                classNames?.dropzone,
+                className
+              ),
+              children: currentFile?.thumbUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: currentFile.thumbUrl,
+                  alt: "avatar",
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx(
+                Image,
+                {
+                  "data-slot": "upload_icon",
+                  className: cn(
+                    "upload_icon",
+                    "w-8 h-8 text-text-secondary",
+                    classNames?.icon
+                  )
+                }
+              )
+            }
+          );
+        case "picture":
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "button",
+              tabIndex: disabled ? -1 : 0,
+              "aria-label": "Upload picture",
+              "aria-disabled": disabled || void 0,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              onDragEnter: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDragOver: handleDragOver,
+              onDrop: handleDrop,
+              "data-slot": "upload_dropzone",
+              className: cn(
+                "upload_dropzone",
+                uploadPictureVariants({ status: dragStatus, size }),
+                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
+                classNames?.dropzone,
+                className
+              ),
+              children: currentFile?.thumbUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: currentFile.thumbUrl,
+                  alt: "preview",
+                  className: "w-full h-full object-cover"
+                }
+              ) : /* @__PURE__ */ jsx(
+                Image,
+                {
+                  "data-slot": "upload_icon",
+                  className: cn(
+                    "upload_icon",
+                    "w-8 h-8 text-text-secondary",
+                    classNames?.icon
+                  )
+                }
+              )
+            }
+          );
+        default:
+          return null;
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "upload_root",
+        className: cn("upload_root", "w-full", classNames?.root),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: handleInputChange,
+              disabled,
+              "data-slot": "upload_input",
+              className: cn("upload_input", "hidden", classNames?.input),
+              ...props
+            }
+          ),
+          label && /* @__PURE__ */ jsx("label", { className: "block mb-1", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-secondary", children: label }) }),
+          renderUploadArea(),
+          renderFileList(),
+          helperMessage && /* @__PURE__ */ jsx("p", { className: cn(statusMessageVariants({ status }), "mt-1"), children: helperMessage })
+        ]
+      }
+    );
+  }
+);
+Upload.displayName = "Upload";
+var upload_default = Upload;
+
+export { upload_default };
+//# sourceMappingURL=chunk-3BZE6BBJ.js.map
+//# sourceMappingURL=chunk-3BZE6BBJ.js.map