@oneplatformdev/ui 0.1.99-beta.3 → 0.1.99-beta.300

package/Dropzone/Dropzone.js

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