@oneplatformdev/ui 0.1.99-beta.296 → 0.1.99-beta.298

package/Dropzone/Dropzone.js

@@ -1,73 +1,74 @@
-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 { 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 _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 { 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 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`;
+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 l >= s ? `${(l / s).toFixed(l / s >= 100 ? 0 : 1)} KB` : `${l} B`;
-}, rt = {
-  csv: Oe,
+  return r >= s ? `${(r / s).toFixed(r / s >= 100 ? 0 : 1)} KB` : `${r} B`;
+}, st = {
+  csv: Je,
   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(".");
+  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] : "";
-}, 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;
+}, 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 (z(a) && z(c)) {
-        if (a.name !== c.name || a.size !== c.size || a.type !== c.type || a.lastModified !== c.lastModified)
+      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;
       }
@@ -75,128 +76,141 @@ const b = (l = 0) => {
     }
   }
   return !0;
-}, ot = ke(
+}, dt = _e(
   ({
-    acceptTypes: l = $e,
+    acceptTypes: r = Ke,
     maxSizeMB: s,
-    maxFiles: m = 1,
-    onErrors: a,
-    hideErrors: c = !1,
+    maxFiles: d = 1,
+    onErrors: m,
+    hideErrors: a = !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",
+    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: me,
-    labelDropzoneSubClassname: fe,
+    labelDropzoneClassname: xe,
+    labelDropzoneSubClassname: he,
     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,
+    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: 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);
+    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);
     };
-    Re(() => {
-      v && !nt(i, v) && y(v);
-    }, [i, v]);
-    const B = (t, d) => {
+    $e(() => {
+      I && !at(o, I) && A(I);
+    }, [o, I]);
+    const E = (e, c) => {
       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), {}),
+      e.stopPropagation();
+      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 : m,
-      disabled: f || p,
+      maxFiles: n ? 1 : d,
+      disabled: f || p || N,
       noClick: !0
     });
-    We(ve, () => ({
-      setItems: y
+    Le(be, () => ({
+      setItems: A
     }), []);
-    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,
+    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,
         ":"
       ] }),
-      /* @__PURE__ */ r(
+      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",
-            g === "image-grid" ? "gap-2 justify-start" : "gap-4 justify-center"
+            h === "image-grid" ? "gap-2 justify-start" : "gap-4 justify-center"
           ),
           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(
+            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: x(
                     "relative",
-                    g === "image-grid" ? "w-[75px] h-[75px]" : "flex flex-col items-center gap-2"
+                    h === "image-grid" ? "w-[75px] h-[75px]" : "flex flex-col items-center gap-2"
                   ),
                   children: [
-                    /* @__PURE__ */ r("div", { className: "relative w-full h-full", children: [
-                      /* @__PURE__ */ e(re, { item: t, styles: u }),
-                      /* @__PURE__ */ e(
+                    /* @__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: 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"
+                            "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: (Be) => B(Be, o),
-                          children: /* @__PURE__ */ e(M, { size: 16, strokeWidth: 1, color: "black" })
+                          onClick: (Re) => E(Re, i),
+                          children: /* @__PURE__ */ t(M, { size: 16, strokeWidth: 1, color: "black" })
                         }
                       )
                     ] }),
-                    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: [
+                    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: [
                         "(",
-                        S,
+                        C,
                         ")"
                       ] })
                     ] })
                   ]
                 },
-                o
+                i
               );
             }),
-            Z && /* @__PURE__ */ e(
+            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: (t) => {
-                  t.stopPropagation(), !(f || p) && G();
+                onClick: (e) => {
+                  e.stopPropagation(), !(f || p) && K();
                 },
-                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]" }) })
+                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"
             )
@@ -204,282 +218,291 @@ const b = (l = 0) => {
         }
       )
     ] });
-    return /* @__PURE__ */ r("div", { className: "w-full select-none", children: [
-      /* @__PURE__ */ r(
-        _e,
+    return /* @__PURE__ */ l("div", { className: "w-full select-none", children: [
+      /* @__PURE__ */ l(
+        Xe,
         {
-          ...A,
-          ...De({
-            onClick: (t) => {
-              if (!(f || p)) {
-                if (ze) {
-                  A.onClick?.(t);
+          ...$,
+          ...Se({
+            onClick: (e) => {
+              if (!(f || p || N)) {
+                if (De) {
+                  $.onClick?.(e);
                   return;
                 }
-                G(), A.onClick?.(t);
+                K(), $.onClick?.(e);
               }
             }
           }),
           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",
+            !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",
-            h.length > 0 && !j && "border-red-500",
-            je && "bg-gray-100",
+            u.length > 0 && !B && "border-red-500",
+            Be && "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
+            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__ */ e("input", { ...Ee() }),
-            p && /* @__PURE__ */ r(
+            /* @__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: (t) => t.stopPropagation(),
+                onClick: (e) => e.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__ */ 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__ */ 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),
+                  /* @__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),
                       " ",
-                      we,
+                      ve,
                       " ",
-                      b(xe)
+                      z(ge)
                     ] }),
-                    /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-[#666A78]", children: ue })
+                    /* @__PURE__ */ t("p", { className: "mt-2 text-sm text-[#666A78]", children: Fe })
                   ] }),
-                  /* @__PURE__ */ e("div", { className: "w-full max-w-[520px] h-2 rounded-full bg-[#E6E1F5] overflow-hidden", children: /* @__PURE__ */ e(
+                  /* @__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, L))}%` }
+                      style: { width: `${Math.max(0, Math.min(100, H))}%` }
                     }
                   ) }),
-                  O && /* @__PURE__ */ e(
+                  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: (t) => {
-                        t.stopPropagation(), O();
+                      onClick: (e) => {
+                        e.stopPropagation(), J();
                       },
-                      children: ge
+                      children: we
                     }
                   )
                 ]
               }
             ),
-            !p && C && /* @__PURE__ */ r(
+            !p && D && /* @__PURE__ */ l(
               "div",
               {
                 className: "absolute inset-0 rounded-[8px] overflow-hidden",
-                onClick: (t) => t.stopPropagation(),
+                onClick: (e) => e.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(
+                  /* @__PURE__ */ t(re, { item: o[0], className: "rounded-[8px]" }),
+                  /* @__PURE__ */ t(
                     "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" })
+                      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 && (i.length === 0 || !n && P) && (h.length === 0 || !n) && /* @__PURE__ */ r(
+            !p && (o.length === 0 || !n && _) && (u.length === 0 || !n) && /* @__PURE__ */ l(
               "div",
               {
                 className: x(
                   "flex flex-col items-center gap-2 w-full",
-                  u?.idleWrapper,
-                  C && "invisible"
+                  b?.idleWrapper,
+                  D && "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(
+                  /* @__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",
-                          me
+                          N && "text-[#A1A1AA]",
+                          xe
                         ),
-                        children: k
+                        children: R
                       }
                     ),
-                    /* @__PURE__ */ e(
+                    /* @__PURE__ */ t(
                       "span",
                       {
                         className: x(
                           "font-medium text-[12px] leading-[120%] text-[#666A78] text-center w-full whitespace-pre-line",
-                          fe
+                          he
                         ),
-                        children: ne
+                        children: ce
                       }
                     )
                   ] }) }),
-                  !f && /* @__PURE__ */ e(
-                    Le,
+                  !f && /* @__PURE__ */ t(
+                    nt,
                     {
                       type: "button",
                       size: "md",
-                      children: oe
+                      disabled: N,
+                      children: ae
                     }
                   )
                 ]
               }
             ),
-            !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,
+            !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__ */ 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,
+              /* @__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,
                 " (",
-                b(t.file.size),
+                z(e.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)) })
+                !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 && i.length) && /* @__PURE__ */ e(U, { children: X ? /* @__PURE__ */ r(
+            !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: (t) => t.stopPropagation(),
+                onClick: (e) => e.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(
+                  /* @__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: D,
+                        src: S,
                         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) })
+                    ) : /* @__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__ */ e(
+                    !f && /* @__PURE__ */ t(
                       "div",
                       {
                         className: "size-6 flex items-center justify-center cursor-pointer",
-                        onClick: (t) => B(t, 0),
-                        children: /* @__PURE__ */ e(M, { size: 24, color: "#06080D" })
+                        onClick: (e) => E(e, 0),
+                        children: /* @__PURE__ */ t(M, { size: 24, color: "#06080D" })
                       }
                     )
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ e(
-              Xe,
+            ) : /* @__PURE__ */ t(
+              qe,
               {
-                item: i[0],
-                onRemoveClick: (t) => B(t, 0),
-                onReplaceClick: (t) => {
-                  t.stopPropagation(), !f && G();
+                item: o[0],
+                onRemoveClick: (e) => E(e, 0),
+                onReplaceClick: (e) => {
+                  e.stopPropagation(), !f && K();
                 },
-                labelUploaded: ae,
-                labelReplace: de,
+                labelUploaded: fe,
+                labelReplace: pe,
                 fileInfo: W,
                 disabled: f,
-                playerTranslations: Ne
+                playerTranslations: Ce
               }
             ) }),
-            !p && H && /* @__PURE__ */ r(
+            !p && Z && /* @__PURE__ */ l(
               "div",
               {
                 className: "w-full max-w-[502px] flex flex-col items-center gap-4",
-                onClick: (t) => t.stopPropagation(),
+                onClick: (e) => e.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(
+                  /* @__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: D,
+                        src: S,
                         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` : "" })
+                    ) : /* @__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__ */ e(
+                    !f && /* @__PURE__ */ t(
                       "div",
                       {
                         className: "size-6 flex items-center justify-center cursor-pointer",
-                        onClick: (t) => {
-                          t.stopPropagation(), T([]);
+                        onClick: (e) => {
+                          e.stopPropagation(), P([]);
                         },
-                        children: /* @__PURE__ */ e(M, { size: 24, color: "#06080D" })
+                        children: /* @__PURE__ */ t(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 })
+                  /* @__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 })
                   ] })
                 ]
               }
             ),
-            !J && Q
+            !O && U
           ]
         }
       ),
-      J && /* @__PURE__ */ e("div", { className: "w-full", children: Q }),
-      !p && !n && h.length > 0 && /* @__PURE__ */ e(
+      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", 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(
+          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__ */ 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 }),
+                  /* @__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 }),
                     " — ",
-                    F
+                    g
                   ] })
                 ]
               },
-              d
+              c
             );
           })
         }
@@ -487,8 +510,8 @@ const b = (l = 0) => {
     ] });
   }
 );
-ot.displayName = "Dropzone";
+dt.displayName = "Dropzone";
 export {
-  ot as Dropzone
+  dt as Dropzone
 };
 //# sourceMappingURL=Dropzone.js.map