@oneplatformdev/ui 0.1.99-beta.295 → 0.1.99-beta.297

package/Dropzone/Dropzone.js

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