@oneplatformdev/ui 0.1.99-beta.29 → 0.1.99-beta.290

package/Dropzone/Dropzone.js

@@ -1,140 +1,186 @@
-import { jsxs as t, jsx as l, Fragment as j } from "react/jsx-runtime";
-import { X as H } from "lucide-react";
-import { forwardRef as O, useState as g, useImperativeHandle as X } from "react";
-import { useDropzone as Y } from "react-dropzone";
-import { cn as n } from "@oneplatformdev/utils";
-import { Card as q } from "../Card/Card.js";
-import { DEFAULT_FILE_TYPES as G } from "./Dropzone.types.js";
-import { FilePreview as J } from "./DropzoneFilePreview.js";
-import { DropzoneSinglePickPreview as K } from "./DropzoneSinglePickPreview.js";
-import { DefaultFileIcon as Q, isFile as v, extractName as R } from "./DropzoneUtils.js";
-const Z = O(
+import { jsxs as r, jsx as e, Fragment as U } from "react/jsx-runtime";
+import { X as M, Plus as Se, UploadIcon as Me, FileTextIcon as V, InfoIcon as ee } from "lucide-react";
+import { forwardRef as ke, useState as te, useEffect as Re, useImperativeHandle as We } from "react";
+import { useDropzone as Ae } from "react-dropzone";
+import { cn as x } from "@oneplatformdev/utils";
+import { Card as _e } from "../Card/Card.js";
+import { DEFAULT_FILE_TYPES as $e } from "./Dropzone.types.js";
+import { FilePreview as re } from "./DropzoneFilePreview.js";
+import { DropzoneSinglePickPreview as Xe } from "./DropzoneSinglePickPreview.js";
+import { isFile as z, isVideoUrl as Ge, extractName as Ke } from "./DropzoneUtils.js";
+import { Button as Le } from "../Button/Button.js";
+import "../Button/buttonVariants.js";
+import Oe from "./icons/file-csv.svg.js";
+import Pe from "./icons/file-doc.svg.js";
+import Te from "./icons/file-docx.svg.js";
+import le from "./icons/file-jpg.svg.js";
+import qe from "./icons/file-pdf.svg.js";
+import He from "./icons/file-png.svg.js";
+import Je from "./icons/file-ppt.svg.js";
+import Ye from "./icons/file-pptx.svg.js";
+import Ze from "./icons/file-rar.svg.js";
+import Qe from "./icons/file-svg.svg.js";
+import Ue from "./icons/file-webp.svg.js";
+import Ve from "./icons/file-xls.svg.js";
+import et from "./icons/file-xlsx.svg.js";
+import tt from "./icons/file-zip.svg.js";
+const b = (l = 0) => {
+  if (!l || l < 0) return "0 KB";
+  const s = 1024, m = s * 1024, a = m * 1024;
+  if (l >= a) return `${(l / a).toFixed(2)} GB`;
+  if (l >= m) {
+    const c = l / m;
+    return `${c >= 100 ? c.toFixed(0) : c.toFixed(2)} MB`;
+  }
+  return l >= s ? `${(l / s).toFixed(l / s >= 100 ? 0 : 1)} KB` : `${l} B`;
+}, rt = {
+  csv: Oe,
+  doc: Pe,
+  docx: Te,
+  jpg: le,
+  jpeg: le,
+  pdf: qe,
+  png: He,
+  ppt: Je,
+  pptx: Ye,
+  rar: Ze,
+  svg: Qe,
+  webp: Ue,
+  xls: Ve,
+  xlsx: et,
+  zip: tt
+}, lt = (l) => {
+  if (!l) return "";
+  const s = l.toLowerCase().split(".");
+  return s.length > 1 ? s[s.length - 1] : "";
+}, it = (l) => {
+  const s = lt(l);
+  return rt[s] ?? null;
+}, nt = (l, s) => {
+  if (l === s) return !0;
+  if (l.length !== s.length) return !1;
+  for (let m = 0; m < l.length; m++) {
+    const a = l[m], c = s[m];
+    if (a !== c) {
+      if (typeof a == "string" && typeof c == "string") {
+        if (a !== c) return !1;
+        continue;
+      }
+      if (z(a) && z(c)) {
+        if (a.name !== c.name || a.size !== c.size || a.type !== c.type || a.lastModified !== c.lastModified)
+          return !1;
+        continue;
+      }
+      return !1;
+    }
+  }
+  return !0;
+}, ot = ke(
   ({
-    acceptTypes: w = G,
-    maxSizeMB: N,
-    maxFiles: x = 1,
-    onErrors: E,
-    hideErrors: y = !1,
-    disabled: a = !1,
-    classNames: m,
-    value: F = [],
-    onChangeValue: h,
-    className: z,
-    labelDropzonePrompt: D = "Drop files here or click to select",
-    labelDropzoneSubPrompt: I = "",
-    labelOrClickToSelect: $ = "Click to select files",
-    labelSelectedFiles: b = "Selected Files",
-    labelUploadErrors: S = "Upload Errors",
-    labelFileTooLarge: C = "File is too large",
-    labelInvalidFileType: W = "Invalid file type",
-    singlePick: i = !1,
-    labelDropzoneClassname: k,
-    labelDropzoneSubClassname: B,
-    ...T
-  }, _) => {
-    const [s, d] = g(F), [p, A] = g([]), L = (e, o) => {
-      A(o), E?.(o);
-      const r = i ? e.slice(0, 1) : [...s, ...e].slice(0, x);
-      d(r), h?.(r);
-    }, u = (e, o) => {
-      if (a) return;
-      e.stopPropagation();
-      const r = s.filter((c, f) => f !== o);
-      d(r), h?.(r);
-    }, { getRootProps: M, getInputProps: P, isDragActive: U } = Y({
-      onDrop: L,
-      accept: w.reduce((e, o) => (e[o] = [], e), {}),
-      maxSize: N * 1024 * 1024,
-      maxFiles: i ? 1 : x,
-      disabled: a
+    acceptTypes: l = $e,
+    maxSizeMB: s,
+    maxFiles: m = 1,
+    onErrors: a,
+    hideErrors: c = !1,
+    disabled: f = !1,
+    classNames: u,
+    value: v,
+    onChangeValue: K,
+    className: ie,
+    labelDropzonePrompt: k = "Drop files here or click to select",
+    labelDropzoneSubPrompt: ne = "",
+    labelOrClickToSelect: oe = "Upload file",
+    labelSelectedFiles: se = "Selected Files",
+    labelUploadErrors: ce = "Upload Errors",
+    labelFileTooLarge: R = "File is too large",
+    labelInvalidFileType: I = "Invalid file type",
+    labelVideoUploaded: ae = "Uploaded",
+    labelVideoReplace: de = "Replace",
+    singlePick: n = !1,
+    labelDropzoneClassname: me,
+    labelDropzoneSubClassname: fe,
+    isUploading: p = !1,
+    uploadProgress: L = 0,
+    uploadLoadedBytes: pe = 0,
+    uploadTotalBytes: xe = 0,
+    onCancelUpload: O,
+    labelUploadingTitle: he = "Uploading video...",
+    labelUploadingHint: ue = "Please do not close this page",
+    labelUploadingActionCancel: ge = "Cancel",
+    labelUploadingOf: we = "of",
+    playerTranslations: Ne,
+    singlePickFileInfo: W,
+    persistentDropzone: P = !1,
+    previewVariant: g = "default",
+    coverFirstItem: Fe = !1,
+    ...A
+  }, ve) => {
+    const [i, y] = te(v ?? []), [h, T] = te([]), w = i[0], _ = h[0]?.file, Ce = !!_?.type?.includes("image"), $ = n && i.length > 0 && z(w), be = $ && w.type.includes("image"), q = $ && w.type.includes("video") || n && i.length > 0 && typeof w == "string" && Ge(w), X = $ && !be && !q, H = n && !i.length && !!_ && !Ce, N = X ? w : _, D = it(N?.name), E = n && q, ze = E, j = n && i.length > 0, Ie = j && !X && !E, ye = (t, d) => {
+      T(d), a?.(d);
+      const o = n ? t.slice(0, 1) : [...i, ...t].slice(0, m);
+      y(o), K?.(o);
+    };
+    Re(() => {
+      v && !nt(i, v) && y(v);
+    }, [i, v]);
+    const B = (t, d) => {
+      if (f) return;
+      t.stopPropagation();
+      const o = i.filter((F, S) => S !== d);
+      y(o), K?.(o);
+    }, { getRootProps: De, getInputProps: Ee, isDragActive: je, open: G } = Ae({
+      onDrop: ye,
+      accept: l.reduce((t, d) => (t[d] = [], t), {}),
+      maxSize: s * 1024 * 1024,
+      maxFiles: n ? 1 : m,
+      disabled: f || p,
+      noClick: !0
     });
-    return X(_, () => ({
-      setItems: d
-    }), []), /* @__PURE__ */ t(
-      q,
-      {
-        ...M(),
-        ...T,
-        className: n(
-          "border-dashed p-2 text-center flex flex-col items-center justify-center cursor-pointer",
-          a && "border-[#E4E4E7] pointer-events-none",
-          p.length > 0 ? "border-red-500" : "border-[#E4E4E7]!",
-          U && "bg-gray-100",
-          i && "shadow-none!",
-          i && s.length > 0 && "p-0! shadow-none!",
-          z
-        ),
-        children: [
-          /* @__PURE__ */ l("input", { ...P() }),
-          s.length === 0 && p.length === 0 && /* @__PURE__ */ t(
-            "div",
-            {
-              className: n(
-                "flex flex-col items-center gap-1",
-                m?.idleWrapper
-              ),
-              children: [
-                /* @__PURE__ */ l(Q, {}),
-                !a && /* @__PURE__ */ t(j, { children: [
-                  /* @__PURE__ */ l("span", { className: n("font-medium text-md text-foreground max-w-[200px]", k), children: D }),
-                  /* @__PURE__ */ l("span", { className: n("font-normal text-xs text-foreground max-w-[250px]", B), children: I })
-                ] })
-              ]
-            }
+    We(ve, () => ({
+      setItems: y
+    }), []);
+    const C = Fe && g === "image-grid" && !n && i.length > 0, J = !p && !n && P && i.length > 0, Y = C ? i.slice(1) : i, Z = !f && !n && g === "image-grid" && i.length > 0 && i.length < m, Q = !p && !n && (Y.length > 0 || Z) && /* @__PURE__ */ r("div", { className: x("w-full mt-2", u?.previewWrapper), children: [
+      g === "default" && /* @__PURE__ */ r("pre", { className: "font-semibold text-gray-600", children: [
+        se,
+        ":"
+      ] }),
+      /* @__PURE__ */ r(
+        "ul",
+        {
+          className: x(
+            "mt-2 text-sm text-gray-500 flex flex-wrap items-start",
+            g === "image-grid" ? "gap-2 justify-start" : "gap-4 justify-center"
           ),
-          p.length > 0 && /* @__PURE__ */ t("div", { className: n("w-full mt-4", m?.errorWrapper), children: [
-            /* @__PURE__ */ t("span", { className: "font-semibold text-red-500", children: [
-              S,
-              ":"
-            ] }),
-            /* @__PURE__ */ l("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: p.map((e, o) => /* @__PURE__ */ t("li", { children: [
-              e.file.name,
-              " (",
-              (e.file.size / (1024 * 1024)).toFixed(2),
-              " MB)",
-              !y && /* @__PURE__ */ l("ul", { className: "ml-4 list-disc list-inside", children: e.errors.map((r, c) => /* @__PURE__ */ t("li", { children: [
-                r.code === "file-too-large" && C,
-                r.code === "file-invalid-type" && W,
-                r.code !== "file-too-large" && r.code !== "file-invalid-type" && r.message
-              ] }, c)) })
-            ] }, o)) })
-          ] }),
-          !!(i && s.length) && /* @__PURE__ */ l(
-            K,
-            {
-              item: s[0],
-              onRemoveClick: (e) => u(e, 0),
-              disabled: a
-            }
-          ),
-          !i && s.length > 0 && /* @__PURE__ */ t("div", { className: n("w-full mt-2", m?.previewWrapper), children: [
-            /* @__PURE__ */ t("pre", { className: "font-semibold text-gray-600", children: [
-              b,
-              ":"
-            ] }),
-            /* @__PURE__ */ l("ul", { className: "mt-2 text-sm text-gray-500 flex flex-wrap gap-4 items-start justify-center", children: s.map((e, o) => {
-              const r = v(e) ? e.name : R(e), c = v(e) ? (e.size / (1024 * 1024)).toFixed(2) + " MB" : "";
-              return /* @__PURE__ */ t(
+          children: [
+            Y.map((t, d) => {
+              const o = C ? d + 1 : d, F = z(t) ? t.name : Ke(t), S = z(t) ? b(t.size) : "";
+              return /* @__PURE__ */ r(
                 "li",
                 {
-                  className: "flex flex-col items-center gap-2 relative",
+                  className: x(
+                    "relative",
+                    g === "image-grid" ? "w-[75px] h-[75px]" : "flex flex-col items-center gap-2"
+                  ),
                   children: [
-                    /* @__PURE__ */ t("div", { className: "relative", children: [
-                      /* @__PURE__ */ l(J, { item: e, styles: m }),
-                      /* @__PURE__ */ l(
+                    /* @__PURE__ */ r("div", { className: "relative w-full h-full", children: [
+                      /* @__PURE__ */ e(re, { item: t, styles: u }),
+                      /* @__PURE__ */ e(
                         "div",
                         {
-                          className: "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm",
-                          onClick: (f) => u(f, o),
-                          children: /* @__PURE__ */ l(H, { size: 16, strokeWidth: 1, color: "black" })
+                          className: x(
+                            "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm",
+                            g === "image-grid" && "top-1 right-1 bg-white/90 rounded-full p-0.5"
+                          ),
+                          onClick: (Be) => B(Be, o),
+                          children: /* @__PURE__ */ e(M, { size: 16, strokeWidth: 1, color: "black" })
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ t("span", { className: "inline-flex flex-col items-center", children: [
-                      /* @__PURE__ */ l("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: r }),
-                      c && /* @__PURE__ */ t("span", { children: [
+                    g === "default" && /* @__PURE__ */ r("span", { className: "inline-flex flex-col items-center", children: [
+                      /* @__PURE__ */ e("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: F }),
+                      S && /* @__PURE__ */ r("span", { children: [
                         "(",
-                        c,
+                        S,
                         ")"
                       ] })
                     ] })
@@ -142,15 +188,307 @@ const Z = O(
                 },
                 o
               );
-            }) })
-          ] })
-        ]
-      }
-    );
+            }),
+            Z && /* @__PURE__ */ e(
+              "li",
+              {
+                className: "relative w-[75px] h-[75px] flex items-center justify-center rounded-[8px] border border-dashed border-[#9368FF80] bg-[#FCFCFC] cursor-pointer hover:bg-[#9368FF0F]",
+                onClick: (t) => {
+                  t.stopPropagation(), !(f || p) && G();
+                },
+                children: /* @__PURE__ */ e("div", { className: "flex size-6 items-center justify-center rounded-full bg-[#9368FF1F]", children: /* @__PURE__ */ e(Se, { size: 16, className: "text-[#9368FF]" }) })
+              },
+              "add-more"
+            )
+          ]
+        }
+      )
+    ] });
+    return /* @__PURE__ */ r("div", { className: "w-full select-none", children: [
+      /* @__PURE__ */ r(
+        _e,
+        {
+          ...A,
+          ...De({
+            onClick: (t) => {
+              if (!(f || p)) {
+                if (ze) {
+                  A.onClick?.(t);
+                  return;
+                }
+                G(), A.onClick?.(t);
+              }
+            }
+          }),
+          className: x(
+            "w-full text-center flex flex-col items-center justify-center gap-6 cursor-pointer",
+            !j && "border border-dashed border-[#9368FF80] rounded-[8px] bg-[#FCFCFC] p-4",
+            j && "min-h-0 border-0 bg-transparent p-0",
+            C && "relative",
+            f && "border-[#E4E4E7] pointer-events-none",
+            h.length > 0 && !j && "border-red-500",
+            je && "bg-gray-100",
+            n && "shadow-none!",
+            n && i.length > 0 && !E && "p-0! shadow-none!",
+            E && "h-auto! max-h-none! min-h-0! p-2!",
+            Ie && "h-64",
+            ie
+          ),
+          children: [
+            /* @__PURE__ */ e("input", { ...Ee() }),
+            p && /* @__PURE__ */ r(
+              "div",
+              {
+                className: "w-full h-full min-h-46 rounded-lg border border-[#E4E4E7] bg-[#FCFCFC] flex flex-col items-center justify-center gap-4 p-4",
+                onClick: (t) => t.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ r("div", { className: "relative h-24 w-24", children: [
+                    /* @__PURE__ */ e("svg", { className: "h-24 w-24", viewBox: "0 0 100 100", children: /* @__PURE__ */ e("circle", { cx: "50", cy: "50", r: "42", stroke: "#E6E1F5", strokeWidth: "8", fill: "none" }) }),
+                    /* @__PURE__ */ r("span", { className: "absolute inset-0 flex items-center justify-center text-lg font-semibold text-foreground", children: [
+                      Math.max(0, Math.min(100, Math.round(L))),
+                      "%"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "text-center", children: [
+                    /* @__PURE__ */ e("p", { className: "text-xl font-semibold text-foreground", children: he }),
+                    /* @__PURE__ */ r("p", { className: "text-sm text-[#666A78]", children: [
+                      b(pe),
+                      " ",
+                      we,
+                      " ",
+                      b(xe)
+                    ] }),
+                    /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-[#666A78]", children: ue })
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "w-full max-w-[520px] h-2 rounded-full bg-[#E6E1F5] overflow-hidden", children: /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "h-full bg-[#9368FF] transition-[width] duration-150 ease-linear",
+                      style: { width: `${Math.max(0, Math.min(100, L))}%` }
+                    }
+                  ) }),
+                  O && /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      className: "mt-1 h-10 min-w-36 rounded-md border border-[#E4E4E7] bg-white px-6 text-base font-medium text-foreground cursor-pointer",
+                      onClick: (t) => {
+                        t.stopPropagation(), O();
+                      },
+                      children: ge
+                    }
+                  )
+                ]
+              }
+            ),
+            !p && C && /* @__PURE__ */ r(
+              "div",
+              {
+                className: "absolute inset-0 rounded-[8px] overflow-hidden",
+                onClick: (t) => t.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ e(
+                    re,
+                    {
+                      item: i[0],
+                      styles: {
+                        ...u,
+                        previewWraper: x(
+                          "w-full h-full rounded-[8px] border-0",
+                          u?.previewWraper?.replace(/w-\[[^\]]+\]|h-\[[^\]]+\]/g, "")
+                        )
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "absolute top-2 right-2 cursor-pointer bg-white/90 rounded-full p-1",
+                      onClick: (t) => B(t, 0),
+                      children: /* @__PURE__ */ e(M, { size: 16, strokeWidth: 1, color: "black" })
+                    }
+                  )
+                ]
+              }
+            ),
+            !p && (i.length === 0 || !n && P) && (h.length === 0 || !n) && /* @__PURE__ */ r(
+              "div",
+              {
+                className: x(
+                  "flex flex-col items-center gap-2 w-full",
+                  u?.idleWrapper,
+                  C && "invisible"
+                ),
+                children: [
+                  /* @__PURE__ */ e("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#9368FF1F]", children: /* @__PURE__ */ e(Me, { className: "size-6 text-[#9368FF]" }) }),
+                  /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-1 w-full", children: !f && /* @__PURE__ */ r(U, { children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: x(
+                          "font-semibold text-[14px] leading-[125%] text-[#06080D] text-center w-full whitespace-pre-line",
+                          me
+                        ),
+                        children: k
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: x(
+                          "font-medium text-[12px] leading-[120%] text-[#666A78] text-center w-full whitespace-pre-line",
+                          fe
+                        ),
+                        children: ne
+                      }
+                    )
+                  ] }) }),
+                  !f && /* @__PURE__ */ e(
+                    Le,
+                    {
+                      type: "button",
+                      size: "md",
+                      children: oe
+                    }
+                  )
+                ]
+              }
+            ),
+            !p && n && h.length > 0 && !H && /* @__PURE__ */ r("div", { className: x("w-full mt-4", u?.errorWrapper), children: [
+              /* @__PURE__ */ r("span", { className: "font-semibold text-red-500", children: [
+                ce,
+                ":"
+              ] }),
+              /* @__PURE__ */ e("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: h.map((t, d) => /* @__PURE__ */ r("li", { children: [
+                t.file.name,
+                " (",
+                b(t.file.size),
+                ")",
+                !c && /* @__PURE__ */ e("ul", { className: "ml-4 list-disc list-inside", children: t.errors.map((o, F) => /* @__PURE__ */ r("li", { children: [
+                  o.code === "file-too-large" && R,
+                  o.code === "file-invalid-type" && I,
+                  o.code !== "file-too-large" && o.code !== "file-invalid-type" && o.message
+                ] }, F)) })
+              ] }, d)) })
+            ] }),
+            !p && !!(n && i.length) && /* @__PURE__ */ e(U, { children: X ? /* @__PURE__ */ r(
+              "div",
+              {
+                className: "w-full max-w-[502px] flex flex-col items-center gap-4",
+                onClick: (t) => t.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ e("p", { className: "w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]", children: k }),
+                  /* @__PURE__ */ r("div", { className: "w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4", children: [
+                    D ? /* @__PURE__ */ e(
+                      "img",
+                      {
+                        src: D,
+                        alt: "",
+                        className: "size-10 shrink-0"
+                      }
+                    ) : /* @__PURE__ */ e("div", { className: "size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(V, { size: 20 }) }),
+                    /* @__PURE__ */ r("div", { className: "flex flex-col items-start text-left gap-1 min-w-0 flex-1", children: [
+                      /* @__PURE__ */ e("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate", children: W?.name || N?.name }),
+                      /* @__PURE__ */ e("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#666A78]", children: b(W?.size || N?.size) })
+                    ] }),
+                    !f && /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "size-6 flex items-center justify-center cursor-pointer",
+                        onClick: (t) => B(t, 0),
+                        children: /* @__PURE__ */ e(M, { size: 24, color: "#06080D" })
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ e(
+              Xe,
+              {
+                item: i[0],
+                onRemoveClick: (t) => B(t, 0),
+                onReplaceClick: (t) => {
+                  t.stopPropagation(), !f && G();
+                },
+                labelUploaded: ae,
+                labelReplace: de,
+                fileInfo: W,
+                disabled: f,
+                playerTranslations: Ne
+              }
+            ) }),
+            !p && H && /* @__PURE__ */ r(
+              "div",
+              {
+                className: "w-full max-w-[502px] flex flex-col items-center gap-4",
+                onClick: (t) => t.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ e("p", { className: "w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]", children: k }),
+                  /* @__PURE__ */ r("div", { className: "w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4", children: [
+                    D ? /* @__PURE__ */ e(
+                      "img",
+                      {
+                        src: D,
+                        alt: "",
+                        className: "size-10 shrink-0"
+                      }
+                    ) : /* @__PURE__ */ e("div", { className: "size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(V, { size: 20 }) }),
+                    /* @__PURE__ */ r("div", { className: "flex flex-col items-start text-left gap-1 min-w-0 flex-1", children: [
+                      /* @__PURE__ */ e("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate", children: N?.name }),
+                      /* @__PURE__ */ e("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#666A78]", children: N ? `${(N.size / (1024 * 1024)).toFixed(0)} MB` : "" })
+                    ] }),
+                    !f && /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: "size-6 flex items-center justify-center cursor-pointer",
+                        onClick: (t) => {
+                          t.stopPropagation(), T([]);
+                        },
+                        children: /* @__PURE__ */ e(M, { size: 24, color: "#06080D" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "w-full bg-[#DC26260F] p-4 flex items-start gap-4", children: [
+                    /* @__PURE__ */ e(ee, { size: 20, color: "#DC2626" }),
+                    /* @__PURE__ */ e("p", { className: "text-[12px] leading-[120%] font-medium text-[#DC2626] text-left", children: h[0]?.errors?.[0]?.code === "file-too-large" ? R : h[0]?.errors?.[0]?.message || I })
+                  ] })
+                ]
+              }
+            ),
+            !J && Q
+          ]
+        }
+      ),
+      J && /* @__PURE__ */ e("div", { className: "w-full", children: Q }),
+      !p && !n && h.length > 0 && /* @__PURE__ */ e(
+        "div",
+        {
+          className: x("w-full mt-4 flex flex-col gap-2", u?.errorWrapper),
+          children: h.map((t, d) => {
+            const o = t.errors[0], F = o?.code === "file-too-large" ? R : o?.code === "file-invalid-type" ? I : o?.message || I;
+            return /* @__PURE__ */ r(
+              "div",
+              {
+                className: "w-full bg-[#DC26260F] p-4 flex items-start gap-4 rounded-[8px]",
+                children: [
+                  /* @__PURE__ */ e(ee, { size: 20, color: "#DC2626", className: "shrink-0" }),
+                  /* @__PURE__ */ r("p", { className: "text-[12px] leading-[120%] font-medium text-[#DC2626] text-left", children: [
+                    /* @__PURE__ */ e("span", { className: "font-semibold", children: t.file.name }),
+                    " — ",
+                    F
+                  ] })
+                ]
+              },
+              d
+            );
+          })
+        }
+      )
+    ] });
   }
 );
-Z.displayName = "Dropzone";
+ot.displayName = "Dropzone";
 export {
-  Z as Dropzone
+  ot as Dropzone
 };
 //# sourceMappingURL=Dropzone.js.map