@oneplatformdev/ui 0.1.99-beta.281 → 0.1.99-beta.283

package/Dropzone/Dropzone.js

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