@sth87/shadcn-design-system 0.0.35 → 0.1.0

package/dist/esm/components/Upload/Upload.js

@@ -1,33 +1,33 @@
-import { jsxs as c, Fragment as H, jsx as e } from "react/jsx-runtime";
-import Be, { useRef as pe, useState as j, useCallback as me } from "react";
-import { cva as He } from "class-variance-authority";
+import { jsxs as i, Fragment as H, jsx as s } from "react/jsx-runtime";
+import Bs, { useRef as ps, useState as j, useCallback as ms } from "react";
+import { cva as Hs } from "class-variance-authority";
 import { cn as C } from "../../packages/ui/src/lib/utils.js";
-import { Trash2 as A, Upload as _e, CloudUploadIcon as Ge, Loader2 as Q, CheckCircle2 as Z, AlertCircle as ee, Eye as _, Download as G, X as Ye, Image as Ae, Film as Je, Music as Ve, Archive as Xe, FileCode as qe, FileText as Ke, File as Qe } from "lucide-react";
+import { Trash2 as A, Upload as _s, CloudUploadIcon as Gs, Loader2 as Q, CheckCircle2 as Z, AlertCircle as ss, Eye as _, Download as G, X as Ys, Image as As, Film as Js, Music as Vs, Archive as Xs, FileCode as qs, FileText as Ks, File as Qs } from "lucide-react";
 import { toast as P } from "../Toast/Toast.js";
-import Ze from "../Dialog/Dialog.js";
-const er = He(
-  "relative flex justify-center items-center rounded-lg transition-all duration-200 cursor-pointer select-none",
+import Zs from "../Dialog/Dialog.js";
+const se = Hs(
+  "ds:relative ds:flex ds:justify-center ds:items-center ds:rounded-lg ds:transition-all ds:duration-200 ds:cursor-pointer ds:select-none",
   {
     variants: {
       variant: {
-        outline: "border border-foreground/10 bg-background text-foreground",
-        primaryOutline: "border border-primary bg-background text-primary",
-        icon: "border border-primary text-primary bg-background rounded-xl p-2",
-        avatar: "border-2 border-dashed border-foreground/20 bg-background !w-full !h-full flex-col text-center hover:border-foreground/40 !p-1",
-        avatarCircle: "border-2 border-dashed border-foreground/20 bg-background !w-full !h-full rounded-full flex-col text-center hover:border-foreground/40 !p-1",
-        dropzone: "border border-foreground/10 bg-background flex-col text-center py-10",
-        primaryDropzone: "border border-primary bg-primary/10 flex-col text-center py-10",
-        secondaryDropzone: "border border-foreground/10 bg-foreground/10 flex-col text-center py-10"
+        outline: "ds:border ds:border-foreground/10 ds:bg-background ds:text-foreground",
+        primaryOutline: "ds:border ds:border-primary ds:bg-background ds:text-primary",
+        icon: "ds:border ds:border-primary ds:text-primary ds:bg-background ds:rounded-xl ds:p-2",
+        avatar: "ds:border-2 ds:border-dashed ds:border-foreground/20 ds:bg-background ds:!w-full ds:!h-full ds:flex-col ds:text-center ds:hover:border-foreground/40 ds:!p-1",
+        avatarCircle: "ds:border-2 ds:border-dashed ds:border-foreground/20 ds:bg-background ds:!w-full ds:!h-full ds:rounded-full ds:flex-col ds:text-center ds:hover:border-foreground/40 ds:!p-1",
+        dropzone: "ds:border ds:border-foreground/10 ds:bg-background ds:flex-col ds:text-center ds:py-10",
+        primaryDropzone: "ds:border ds:border-primary ds:bg-primary/10 ds:flex-col ds:text-center ds:py-10",
+        secondaryDropzone: "ds:border ds:border-foreground/10 ds:bg-foreground/10 ds:flex-col ds:text-center ds:py-10"
       },
       size: {
-        small: "h-8 p-[6px] text-sm",
-        medium: "h-10 p-2 text-base",
-        large: "h-12 p-3 text-base"
+        small: "ds:h-8 ds:p-[6px] ds:text-sm",
+        medium: "ds:h-10 ds:p-2 ds:text-base",
+        large: "ds:h-12 ds:p-3 ds:text-base"
       },
       status: {
         idle: "",
-        dragover: "border-primary bg-primary/5 scale-[1.02]",
-        disabled: "opacity-50 cursor-not-allowed"
+        dragover: "ds:border-primary ds:bg-primary/5 ds:scale-[1.02]",
+        disabled: "ds:opacity-50 ds:cursor-not-allowed"
       }
     },
     defaultVariants: {
@@ -36,17 +36,17 @@ const er = He(
       status: "idle"
     }
   }
-), Y = (r) => {
-  const s = r.type || "", m = r.name.toLowerCase();
-  return s.startsWith("image/") ? /* @__PURE__ */ e(Ae, { className: "h-4 w-4" }) : s.startsWith("video/") ? /* @__PURE__ */ e(Je, { className: "h-4 w-4" }) : s.startsWith("audio/") ? /* @__PURE__ */ e(Ve, { className: "h-4 w-4" }) : m.endsWith(".zip") || m.endsWith(".rar") || m.endsWith(".7z") ? /* @__PURE__ */ e(Xe, { className: "h-4 w-4" }) : m.endsWith(".js") || m.endsWith(".ts") || m.endsWith(".jsx") || m.endsWith(".tsx") || m.endsWith(".css") || m.endsWith(".html") ? /* @__PURE__ */ e(qe, { className: "h-4 w-4" }) : m.endsWith(".txt") || m.endsWith(".md") ? /* @__PURE__ */ e(Ke, { className: "h-4 w-4" }) : /* @__PURE__ */ e(Qe, { className: "h-4 w-4" });
-}, re = (r) => {
-  if (r === 0) return "0 Bytes";
-  const s = 1024, m = ["Bytes", "KB", "MB", "GB"], v = Math.floor(Math.log(r) / Math.log(s));
-  return Math.round(r / Math.pow(s, v) * 100) / 100 + " " + m[v];
-}, he = () => `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, ge = Be.forwardRef(
+), Y = (e) => {
+  const t = e.type || "", m = e.name.toLowerCase();
+  return t.startsWith("image/") ? /* @__PURE__ */ s(As, { className: "ds:h-4 ds:w-4" }) : t.startsWith("video/") ? /* @__PURE__ */ s(Js, { className: "ds:h-4 ds:w-4" }) : t.startsWith("audio/") ? /* @__PURE__ */ s(Vs, { className: "ds:h-4 ds:w-4" }) : m.endsWith(".zip") || m.endsWith(".rar") || m.endsWith(".7z") ? /* @__PURE__ */ s(Xs, { className: "ds:h-4 ds:w-4" }) : m.endsWith(".js") || m.endsWith(".ts") || m.endsWith(".jsx") || m.endsWith(".tsx") || m.endsWith(".css") || m.endsWith(".html") ? /* @__PURE__ */ s(qs, { className: "ds:h-4 ds:w-4" }) : m.endsWith(".txt") || m.endsWith(".md") ? /* @__PURE__ */ s(Ks, { className: "ds:h-4 ds:w-4" }) : /* @__PURE__ */ s(Qs, { className: "ds:h-4 ds:w-4" });
+}, es = (e) => {
+  if (e === 0) return "0 Bytes";
+  const t = 1024, m = ["Bytes", "KB", "MB", "GB"], v = Math.floor(Math.log(e) / Math.log(t));
+  return Math.round(e / Math.pow(t, v) * 100) / 100 + " " + m[v];
+}, hs = () => `upload-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`, gs = Bs.forwardRef(
   ({
-    className: r,
-    variant: s,
+    className: e,
+    variant: t,
     accept: m,
     multiple: v = !1,
     disabled: N = !1,
@@ -55,256 +55,256 @@ const er = He(
     action: x,
     customRequest: k,
     beforeUpload: L,
-    onChange: i,
-    onRemove: te,
-    onPreview: oe,
-    onDownload: se,
+    onChange: l,
+    onRemove: ds,
+    onPreview: rs,
+    onDownload: ts,
     maxCount: E,
     maxSize: F,
-    listType: fe = "text",
+    listType: fs = "text",
     showUploadList: I = !0,
-    pictureCardSize: ye,
-    pictureCardCols: we = 3,
+    pictureCardSize: ys,
+    pictureCardCols: ws = 3,
     iconOnly: J = !1,
-    showBorder: ve = !0,
-    uploadText: xe = "Click to upload",
-    uploadDescription: ne,
-    uploadIcon: ae,
+    showBorder: vs = !0,
+    uploadText: xs = "Click to upload",
+    uploadDescription: os,
+    uploadIcon: ns,
     size: M = "medium",
-    children: Ne,
+    children: Ns,
     headers: W,
     withCredentials: V,
     directory: T = !1,
-    ...ke
-  }, De) => {
-    const O = pe(null), [ze, Ce] = j(R), [Le, X] = j(!1), [Pe, le] = j(!1), [Ee, Ue] = j(""), [ie, $e] = j(""), b = $ ?? ze, q = $ ? void 0 : Ce, Fe = [
+    ...ks
+  }, Ds) => {
+    const O = ps(null), [zs, Cs] = j(R), [Ls, X] = j(!1), [Ps, as] = j(!1), [Es, Us] = j(""), [ls, $s] = j(""), b = $ ?? zs, q = $ ? void 0 : Cs, Fs = [
       "dropzone",
       "primaryDropzone",
       "secondaryDropzone"
-    ].includes(s || ""), U = T || Fe && b.length > 0 ? "text" : fe, ce = pe(b);
-    ce.current = b;
-    const S = E ? b.length < E : T || v ? !0 : b.length === 0, f = me(
-      (o, n) => {
-        const a = o(ce.current);
-        q && q(o), i && i({ file: n || {}, fileList: a });
+    ].includes(t || ""), U = T || Fs && b.length > 0 ? "text" : fs, is = ps(b);
+    is.current = b;
+    const S = E ? b.length < E : T || v ? !0 : b.length === 0, f = ms(
+      (r, o) => {
+        const n = r(is.current);
+        q && q(r), l && l({ file: o || {}, fileList: n });
       },
-      [q, i]
-    ), Re = me(
-      (o) => {
-        const n = o.type.startsWith("image/") ? URL.createObjectURL(o) : void 0, a = {
-          uid: he(),
-          name: o.name,
-          size: o.size,
-          type: o.type,
+      [q, l]
+    ), Rs = ms(
+      (r) => {
+        const o = r.type.startsWith("image/") ? URL.createObjectURL(r) : void 0, n = {
+          uid: hs(),
+          name: r.name,
+          size: r.size,
+          type: r.type,
           status: "uploading",
           percent: 0,
-          originFileObj: o,
-          url: n,
-          thumbUrl: n
+          originFileObj: r,
+          url: o,
+          thumbUrl: o
         };
-        if (f((h) => [...h, a], a), k)
+        if (f((h) => [...h, n], n), k)
           k({
-            file: o,
+            file: r,
             onProgress: (h) => {
-              const u = { ...a, percent: h };
+              const u = { ...n, percent: h };
               f(
-                (t) => t.map(
-                  (l) => l.uid === a.uid ? u : l
+                (d) => d.map(
+                  (a) => a.uid === n.uid ? u : a
                 ),
                 u
               );
             },
             onSuccess: (h) => {
               const u = {
-                ...a,
+                ...n,
                 status: "done",
                 percent: 100,
                 response: h
               };
               f(
-                (t) => t.map(
-                  (l) => l.uid === a.uid ? u : l
+                (d) => d.map(
+                  (a) => a.uid === n.uid ? u : a
                 ),
                 u
               );
             },
             onError: (h) => {
               const u = {
-                ...a,
+                ...n,
                 status: "error",
                 error: h
               };
               f(
-                (t) => t.map(
-                  (l) => l.uid === a.uid ? u : l
+                (d) => d.map(
+                  (a) => a.uid === n.uid ? u : a
                 ),
                 u
               );
             }
           });
         else if (x) {
-          const h = typeof x == "function" ? x(o) : x, u = new FormData();
-          u.append("file", o);
-          const t = new XMLHttpRequest();
-          t.upload.addEventListener("progress", (l) => {
-            if (l.lengthComputable) {
-              const w = Math.round(l.loaded / l.total * 100), g = { ...a, percent: w };
+          const h = typeof x == "function" ? x(r) : x, u = new FormData();
+          u.append("file", r);
+          const d = new XMLHttpRequest();
+          d.upload.addEventListener("progress", (a) => {
+            if (a.lengthComputable) {
+              const w = Math.round(a.loaded / a.total * 100), g = { ...n, percent: w };
               f(
                 (y) => y.map(
-                  (p) => p.uid === a.uid ? g : p
+                  (p) => p.uid === n.uid ? g : p
                 ),
                 g
               );
             }
-          }), t.addEventListener("load", () => {
-            if (t.status >= 200 && t.status < 300) {
-              const l = JSON.parse(t.responseText), w = {
-                ...a,
+          }), d.addEventListener("load", () => {
+            if (d.status >= 200 && d.status < 300) {
+              const a = JSON.parse(d.responseText), w = {
+                ...n,
                 status: "done",
                 percent: 100,
-                response: l,
-                url: l.url || l.data?.url
+                response: a,
+                url: a.url || a.data?.url
               };
               f(
                 (g) => g.map(
-                  (y) => y.uid === a.uid ? w : y
+                  (y) => y.uid === n.uid ? w : y
                 ),
                 w
               );
             } else {
-              const l = {
-                ...a,
+              const a = {
+                ...n,
                 status: "error",
-                error: new Error(`Upload failed with status ${t.status}`)
+                error: new Error(`Upload failed with status ${d.status}`)
               };
               f(
                 (w) => w.map(
-                  (g) => g.uid === a.uid ? l : g
+                  (g) => g.uid === n.uid ? a : g
                 ),
-                l
+                a
               );
             }
-          }), t.addEventListener("error", () => {
-            const l = {
-              ...a,
+          }), d.addEventListener("error", () => {
+            const a = {
+              ...n,
               status: "error",
               error: new Error("Network error")
             };
             f(
-              (w) => w.map((g) => g.uid === a.uid ? l : g),
-              l
+              (w) => w.map((g) => g.uid === n.uid ? a : g),
+              a
             );
-          }), t.open("POST", h), W && Object.entries(W).forEach(([l, w]) => {
-            t.setRequestHeader(l, w);
-          }), V && (t.withCredentials = !0), t.send(u);
+          }), d.open("POST", h), W && Object.entries(W).forEach(([a, w]) => {
+            d.setRequestHeader(a, w);
+          }), V && (d.withCredentials = !0), d.send(u);
         } else
           setTimeout(() => {
             const h = {
-              ...a,
+              ...n,
               status: "done",
               percent: 100
             };
             f(
               (u) => u.map(
-                (t) => t.uid === a.uid ? h : t
+                (d) => d.uid === n.uid ? h : d
               ),
               h
             );
           }, 100);
       },
       [x, k, f, W, V]
-    ), Ie = async (o) => {
-      const n = Array.from(o.target.files || []);
-      if (console.log("=== handleFileChange DEBUG ==="), console.log("Files from browser:", n.length), console.log("Directory mode:", T), console.log("Multiple mode:", v), console.log("Current fileList length:", b.length), console.log(
+    ), Is = async (r) => {
+      const o = Array.from(r.target.files || []);
+      if (console.log("=== handleFileChange DEBUG ==="), console.log("Files from browser:", o.length), console.log("Directory mode:", T), console.log("Multiple mode:", v), console.log("Current fileList length:", b.length), console.log(
         "File names:",
-        n.map((t) => t.name)
-      ), n.length === 0) return;
+        o.map((d) => d.name)
+      ), o.length === 0) return;
       if (!T && !v && b.length > 0) {
         P.error(
           "You can only upload one file. Please remove the existing file first."
         );
         return;
       }
-      if (E && b.length + n.length > E) {
+      if (E && b.length + o.length > E) {
         P.error(`You can only upload up to ${E} file(s)`);
         return;
       }
-      let a = 0;
+      let n = 0;
       const h = [];
-      for (const t of n) {
+      for (const d of o) {
         if (console.log(`
-📁 Processing: ${t.name}`), F && t.size > F) {
+📁 Processing: ${d.name}`), F && d.size > F) {
           console.log(
-            `❌ REJECTED: File size ${t.size} exceeds maxSize ${F}`
+            `❌ REJECTED: File size ${d.size} exceeds maxSize ${F}`
           ), P.error(
-            `${t.name} exceeds maximum size of ${re(F)}`
+            `${d.name} exceeds maximum size of ${es(F)}`
           );
           continue;
         }
         if (L) {
-          if (console.log(`🔍 Calling beforeUpload for ${t.name}...`), await L(t, n) === !1) {
-            console.log(`❌ REJECTED by beforeUpload: ${t.name}`);
+          if (console.log(`🔍 Calling beforeUpload for ${d.name}...`), await L(d, o) === !1) {
+            console.log(`❌ REJECTED by beforeUpload: ${d.name}`);
             continue;
           }
-          console.log(`✅ beforeUpload passed for ${t.name}`);
+          console.log(`✅ beforeUpload passed for ${d.name}`);
         }
-        console.log(`✅ Valid file: ${t.name}`), h.push(t), a++;
+        console.log(`✅ Valid file: ${d.name}`), h.push(d), n++;
       }
       console.log(
         `
-📊 Summary: ${a} / ${n.length} files will be uploaded`
+📊 Summary: ${n} / ${o.length} files will be uploaded`
       );
-      const u = h.map((t) => {
-        const l = t.type.startsWith("image/") ? URL.createObjectURL(t) : void 0;
+      const u = h.map((d) => {
+        const a = d.type.startsWith("image/") ? URL.createObjectURL(d) : void 0;
         return {
-          uid: he(),
-          name: t.name,
-          size: t.size,
-          type: t.type,
+          uid: hs(),
+          name: d.name,
+          size: d.size,
+          type: d.type,
           status: "uploading",
           percent: 0,
-          originFileObj: t,
-          url: l,
-          thumbUrl: l
+          originFileObj: d,
+          url: a,
+          thumbUrl: a
         };
       });
-      f((t) => [...t, ...u]), u.forEach((t, l) => {
-        const w = h[l];
+      f((d) => [...d, ...u]), u.forEach((d, a) => {
+        const w = h[a];
         if (k)
           k({
             file: w,
             onProgress: (g) => {
-              const y = { ...t, percent: g };
+              const y = { ...d, percent: g };
               f(
                 (p) => p.map(
-                  (d) => d.uid === t.uid ? y : d
+                  (c) => c.uid === d.uid ? y : c
                 ),
                 y
               );
             },
             onSuccess: (g) => {
               const y = {
-                ...t,
+                ...d,
                 status: "done",
                 percent: 100,
                 response: g
               };
               f(
                 (p) => p.map(
-                  (d) => d.uid === t.uid ? y : d
+                  (c) => c.uid === d.uid ? y : c
                 ),
                 y
               );
             },
             onError: (g) => {
               const y = {
-                ...t,
+                ...d,
                 status: "error",
                 error: g
               };
               f(
                 (p) => p.map(
-                  (d) => d.uid === t.uid ? y : d
+                  (c) => c.uid === d.uid ? y : c
                 ),
                 y
               );
@@ -314,65 +314,65 @@ const er = He(
           const g = typeof x == "function" ? x(w) : x, y = new FormData();
           y.append("file", w);
           const p = new XMLHttpRequest();
-          p.upload.addEventListener("progress", (d) => {
-            if (d.lengthComputable) {
-              const D = Math.round(d.loaded / d.total * 100), z = { ...t, percent: D };
+          p.upload.addEventListener("progress", (c) => {
+            if (c.lengthComputable) {
+              const D = Math.round(c.loaded / c.total * 100), z = { ...d, percent: D };
               f(
                 (B) => B.map(
-                  (ue) => ue.uid === t.uid ? z : ue
+                  (us) => us.uid === d.uid ? z : us
                 ),
                 z
               );
             }
           }), p.addEventListener("load", () => {
             if (p.status >= 200 && p.status < 300) {
-              const d = JSON.parse(p.responseText), D = {
-                ...t,
+              const c = JSON.parse(p.responseText), D = {
+                ...d,
                 status: "done",
                 percent: 100,
-                response: d,
-                url: d.url || d.data?.url
+                response: c,
+                url: c.url || c.data?.url
               };
               f(
                 (z) => z.map(
-                  (B) => B.uid === t.uid ? D : B
+                  (B) => B.uid === d.uid ? D : B
                 ),
                 D
               );
             } else {
-              const d = {
-                ...t,
+              const c = {
+                ...d,
                 status: "error",
                 error: new Error(`Upload failed with status ${p.status}`)
               };
               f(
                 (D) => D.map(
-                  (z) => z.uid === t.uid ? d : z
+                  (z) => z.uid === d.uid ? c : z
                 ),
-                d
+                c
               );
             }
           }), p.addEventListener("error", () => {
-            const d = {
-              ...t,
+            const c = {
+              ...d,
               status: "error",
               error: new Error("Network error")
             };
             f(
-              (D) => D.map((z) => z.uid === t.uid ? d : z),
-              d
+              (D) => D.map((z) => z.uid === d.uid ? c : z),
+              c
             );
-          }), p.open("POST", g), W && Object.entries(W).forEach(([d, D]) => {
-            p.setRequestHeader(d, D);
+          }), p.open("POST", g), W && Object.entries(W).forEach(([c, D]) => {
+            p.setRequestHeader(c, D);
           }), V && (p.withCredentials = !0), p.send(y);
         } else
           console.log(
-            `⏱️ Mock upload starting for ${w.name} (delay: ${100 + l * 50}ms)`
+            `⏱️ Mock upload starting for ${w.name} (delay: ${100 + a * 50}ms)`
           ), setTimeout(
             () => {
               console.log(`✅ Mock upload complete for ${w.name}`);
               const g = {
-                ...t,
+                ...d,
                 status: "done",
                 percent: 100
               };
@@ -380,68 +380,68 @@ const er = He(
                 `📝 Updating status for ${w.name}, current list:`,
                 y.length
               ), y.map(
-                (p) => p.uid === t.uid ? g : p
+                (p) => p.uid === d.uid ? g : p
               )), g);
             },
-            100 + l * 50
+            100 + a * 50
           );
       }), O.current && (O.current.value = "");
-    }, de = async (o) => {
-      te && await te(o) === !1 || (f((n) => n.filter((a) => a.uid !== o.uid), {
-        ...o,
+    }, cs = async (r) => {
+      ds && await ds(r) === !1 || (f((o) => o.filter((n) => n.uid !== r.uid), {
+        ...r,
         status: "removed"
-      }), o.url && o.url.startsWith("blob:") && URL.revokeObjectURL(o.url));
-    }, We = (o) => {
-      o.preventDefault(), o.stopPropagation(), !N && S && X(!0);
-    }, Te = (o) => {
-      o.preventDefault(), o.stopPropagation(), X(!1);
-    }, je = async (o) => {
-      if (o.preventDefault(), o.stopPropagation(), X(!1), N || !S) return;
-      let n = Array.from(o.dataTransfer.files);
-      if (n.length !== 0) {
+      }), r.url && r.url.startsWith("blob:") && URL.revokeObjectURL(r.url));
+    }, Ws = (r) => {
+      r.preventDefault(), r.stopPropagation(), !N && S && X(!0);
+    }, Ts = (r) => {
+      r.preventDefault(), r.stopPropagation(), X(!1);
+    }, js = async (r) => {
+      if (r.preventDefault(), r.stopPropagation(), X(!1), N || !S) return;
+      let o = Array.from(r.dataTransfer.files);
+      if (o.length !== 0) {
         if (!v && b.length > 0) {
           P.error(
             "You can only upload one file. Please remove the existing file first."
           );
           return;
         }
-        if (!v && n.length > 1 && (P.error("You can only upload one file at a time"), n = [n[0]]), E && b.length + n.length > E) {
+        if (!v && o.length > 1 && (P.error("You can only upload one file at a time"), o = [o[0]]), E && b.length + o.length > E) {
           P.error(`You can only upload up to ${E} file(s)`);
           return;
         }
-        for (const a of n)
-          if (!(m && !a.type.match(new RegExp(m.replace(/,/g, "|"))))) {
-            if (F && a.size > F) {
+        for (const n of o)
+          if (!(m && !n.type.match(new RegExp(m.replace(/,/g, "|"))))) {
+            if (F && n.size > F) {
               P.error(
-                `${a.name} exceeds maximum size of ${re(F)}`
+                `${n.name} exceeds maximum size of ${es(F)}`
               );
               continue;
             }
-            L && await L(a, n) === !1 || Re(a);
+            L && await L(n, o) === !1 || Rs(n);
           }
       }
-    }, Me = () => {
+    }, Ms = () => {
       !N && S && O.current?.click();
-    }, Oe = (o) => {
-      oe ? oe(o) : (o.url || o.thumbUrl) && (Ue(o.url || o.thumbUrl || ""), $e(o.name), le(!0));
-    }, Se = async (o) => {
-      if (se)
-        se(o);
-      else if (o.url) {
-        if (o.status === "uploading") {
+    }, Os = (r) => {
+      rs ? rs(r) : (r.url || r.thumbUrl) && (Us(r.url || r.thumbUrl || ""), $s(r.name), as(!0));
+    }, Ss = async (r) => {
+      if (ts)
+        ts(r);
+      else if (r.url) {
+        if (r.status === "uploading") {
           P.error("Please wait until the file finishes uploading");
           return;
         }
-        if (o.status === "error") {
+        if (r.status === "error") {
           P.error("Cannot download file with error status");
           return;
         }
         try {
-          const a = await (await fetch(o.url)).blob(), h = URL.createObjectURL(a), u = document.createElement("a");
-          u.href = h, u.download = o.name, u.style.display = "none", document.body.appendChild(u), u.click(), document.body.removeChild(u), setTimeout(() => URL.revokeObjectURL(h), 100);
+          const n = await (await fetch(r.url)).blob(), h = URL.createObjectURL(n), u = document.createElement("a");
+          u.href = h, u.download = r.name, u.style.display = "none", document.body.appendChild(u), u.click(), document.body.removeChild(u), setTimeout(() => URL.revokeObjectURL(h), 100);
         } catch {
-          const n = document.createElement("a");
-          n.href = o.url, n.download = o.name, n.target = "_blank", n.rel = "noopener noreferrer", n.style.display = "none", document.body.appendChild(n), n.click(), document.body.removeChild(n);
+          const o = document.createElement("a");
+          o.href = r.url, o.download = r.name, o.target = "_blank", o.rel = "noopener noreferrer", o.style.display = "none", document.body.appendChild(o), o.click(), document.body.removeChild(o);
         }
       }
     }, K = typeof I == "boolean" ? {
@@ -453,35 +453,35 @@ const er = He(
       showRemoveIcon: I.showRemoveIcon ?? !0,
       showDownloadIcon: I.showDownloadIcon ?? !0
     };
-    return /* @__PURE__ */ c(H, { children: [
-      /* @__PURE__ */ c("div", { ref: De, className: C(r), ...ke, children: [
-        /* @__PURE__ */ c(
+    return /* @__PURE__ */ i(H, { children: [
+      /* @__PURE__ */ i("div", { ref: Ds, className: C(e), ...ks, children: [
+        /* @__PURE__ */ i(
           "div",
           {
             className: C(
-              er({
-                variant: s,
-                status: N || !S ? "disabled" : Le ? "dragover" : "idle",
+              se({
+                variant: t,
+                status: N || !S ? "disabled" : Ls ? "dragover" : "idle",
                 size: [
                   "dropzone",
                   "primaryDropzone",
                   "secondaryDropzone"
-                ].includes(s) ? void 0 : M
+                ].includes(t) ? void 0 : M
               }),
               ["dropzone", "primaryDropzone", "secondaryDropzone"].includes(
-                s
-              ) && "min-h-[180px] min-w-[300px]",
-              !ve && "border-0",
-              !J && s !== "avatar" && s !== "avatarCircle" && "px-4",
+                t
+              ) && "ds:min-h-[180px] ds:min-w-[300px]",
+              !vs && "ds:border-0",
+              !J && t !== "avatar" && t !== "avatarCircle" && "ds:px-4",
               // Remove disabled opacity for avatar variants when image is shown
-              (s === "avatar" || s === "avatarCircle") && b.length > 0 && b[0].url && "opacity-100!"
+              (t === "avatar" || t === "avatarCircle") && b.length > 0 && b[0].url && "ds:opacity-100!"
             ),
-            onDragOver: We,
-            onDragLeave: Te,
-            onDrop: je,
-            onClick: Me,
+            onDragOver: Ws,
+            onDragLeave: Ts,
+            onDrop: js,
+            onClick: Ms,
             children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ s(
                 "input",
                 {
                   ref: O,
@@ -489,50 +489,50 @@ const er = He(
                   accept: m,
                   multiple: v,
                   disabled: N,
-                  onChange: Ie,
-                  className: "hidden",
+                  onChange: Is,
+                  className: "ds:hidden",
                   ...T ? { webkitdirectory: "", directory: "" } : {}
                 }
               ),
-              s === "avatar" || s === "avatarCircle" ? /* @__PURE__ */ e(H, { children: b.length > 0 && b[0].url && !N ? /* @__PURE__ */ c("div", { className: "relative w-full h-full group", children: [
-                /* @__PURE__ */ e(
+              t === "avatar" || t === "avatarCircle" ? /* @__PURE__ */ s(H, { children: b.length > 0 && b[0].url && !N ? /* @__PURE__ */ i("div", { className: "ds:relative ds:w-full ds:h-full ds:group", children: [
+                /* @__PURE__ */ s(
                   "img",
                   {
                     draggable: !1,
                     src: b[0].url || b[0].thumbUrl,
                     alt: b[0].name,
                     className: C(
-                      "w-full h-full object-cover",
-                      s === "avatarCircle" && "rounded-full",
-                      s === "avatar" && "rounded-lg"
+                      "ds:w-full ds:h-full ds:object-cover",
+                      t === "avatarCircle" && "ds:rounded-full",
+                      t === "avatar" && "ds:rounded-lg"
                     )
                   }
                 ),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ s(
                   "div",
                   {
                     className: C(
-                      "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center",
-                      s === "avatarCircle" && "rounded-full",
-                      s === "avatar" && "rounded-lg"
+                      "ds:absolute ds:inset-0 ds:bg-black/50 ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity ds:flex ds:items-center ds:justify-center",
+                      t === "avatarCircle" && "ds:rounded-full",
+                      t === "avatar" && "ds:rounded-lg"
                     ),
-                    onClick: (o) => {
-                      o.stopPropagation(), de(b[0]);
+                    onClick: (r) => {
+                      r.stopPropagation(), cs(b[0]);
                     },
-                    children: /* @__PURE__ */ e(A, { className: "h-6 w-6 text-white cursor-pointer hover:scale-110 transition-transform" })
+                    children: /* @__PURE__ */ s(A, { className: "ds:h-6 ds:w-6 ds:text-white ds:cursor-pointer ds:hover:scale-110 ds:transition-transform" })
                   }
                 )
-              ] }) : Ne }) : /* @__PURE__ */ c(
+              ] }) : Ns }) : /* @__PURE__ */ i(
                 "div",
                 {
                   className: C(
-                    "flex items-center justify-center gap-2",
+                    "ds:flex ds:items-center ds:justify-center ds:gap-2",
                     ["secondaryDropzone", "dropzone", "primaryDropzone"].includes(
-                      s
-                    ) && "flex-col"
+                      t
+                    ) && "ds:flex-col"
                   ),
                   children: [
-                    ae ? /* @__PURE__ */ e(
+                    ns ? /* @__PURE__ */ s(
                       "div",
                       {
                         className: C(
@@ -540,58 +540,58 @@ const er = He(
                             "dropzone",
                             "primaryDropzone",
                             "secondaryDropzone"
-                          ].includes(s) ? "h-10 w-10" : M === "small" ? "h-5 w-5" : "h-6 w-6",
-                          s === "outline" && "text-gray-500",
+                          ].includes(t) ? "ds:h-10 ds:w-10" : M === "small" ? "ds:h-5 ds:w-5" : "ds:h-6 ds:w-6",
+                          t === "outline" && "ds:text-gray-500",
                           [
                             "primaryDropzone",
                             "secondaryDropzone",
                             "primaryOutline"
-                          ].includes(s) && "text-primary"
+                          ].includes(t) && "ds:text-primary"
                         ),
-                        children: ae
+                        children: ns
                       }
-                    ) : /* @__PURE__ */ e(H, { children: J ? /* @__PURE__ */ e(
-                      _e,
+                    ) : /* @__PURE__ */ s(H, { children: J ? /* @__PURE__ */ s(
+                      _s,
                       {
                         className: C(
                           [
                             "dropzone",
                             "primaryDropzone",
                             "secondaryDropzone"
-                          ].includes(s) ? "h-10 w-10" : M === "small" ? "h-5 w-5" : "h-6 w-6",
-                          s === "outline" && "text-gray-500",
+                          ].includes(t) ? "ds:h-10 ds:w-10" : M === "small" ? "ds:h-5 ds:w-5" : "ds:h-6 ds:w-6",
+                          t === "outline" && "ds:text-gray-500",
                           [
                             "secondaryDropzone",
                             "primaryDropzone",
                             "primaryOutline"
-                          ].includes(s) && "text-primary"
+                          ].includes(t) && "ds:text-primary"
                         )
                       }
-                    ) : /* @__PURE__ */ e(
-                      Ge,
+                    ) : /* @__PURE__ */ s(
+                      Gs,
                       {
                         className: C(
                           [
                             "dropzone",
                             "primaryDropzone",
                             "secondaryDropzone"
-                          ].includes(s) ? "h-10 w-10" : M === "small" ? "h-5 w-5" : "h-6 w-6",
-                          s === "outline" && "text-gray-500",
+                          ].includes(t) ? "ds:h-10 ds:w-10" : M === "small" ? "ds:h-5 ds:w-5" : "ds:h-6 ds:w-6",
+                          t === "outline" && "ds:text-gray-500",
                           [
                             "primaryDropzone",
                             "secondaryDropzone",
                             "primaryOutline"
-                          ].includes(s) && "text-primary"
+                          ].includes(t) && "ds:text-primary"
                         )
                       }
                     ) }),
-                    !J && /* @__PURE__ */ c(H, { children: [
-                      /* @__PURE__ */ e("span", { className: "font-medium whitespace-nowrap text-sm", children: xe }),
-                      ne && [
+                    !J && /* @__PURE__ */ i(H, { children: [
+                      /* @__PURE__ */ s("span", { className: "ds:font-medium ds:whitespace-nowrap ds:text-sm", children: xs }),
+                      os && [
                         "dropzone",
                         "primaryDropzone",
                         "secondaryDropzone"
-                      ].includes(s) && /* @__PURE__ */ e("span", { className: "text-xs text-gray-500", children: ne })
+                      ].includes(t) && /* @__PURE__ */ s("span", { className: "ds:text-xs ds:text-gray-500", children: os })
                     ] })
                   ]
                 }
@@ -599,49 +599,49 @@ const er = He(
             ]
           }
         ),
-        I && b.length > 0 && /* @__PURE__ */ e(
+        I && b.length > 0 && /* @__PURE__ */ s(
           "div",
           {
             className: C(
-              "mt-4",
-              (U === "picture-card" || U === "picture-circle") && "grid gap-2",
-              U === "picture" && "space-y-2"
+              "ds:mt-4",
+              (U === "picture-card" || U === "picture-circle") && "ds:grid ds:gap-2",
+              U === "picture" && "ds:space-y-2"
             ),
             style: {
-              gridTemplateColumns: U === "picture-card" || U === "picture-circle" ? `repeat(${we}, 1fr)` : void 0,
+              gridTemplateColumns: U === "picture-card" || U === "picture-circle" ? `repeat(${ws}, 1fr)` : void 0,
               minWidth: U === "picture-card" || U === "picture-circle" ? "100px" : void 0
             },
-            children: b.filter((o) => o.response !== be.LIST_IGNORE).map((o) => /* @__PURE__ */ e(
-              rr,
+            children: b.filter((r) => r.response !== bs.LIST_IGNORE).map((r) => /* @__PURE__ */ s(
+              ee,
               {
-                file: o,
+                file: r,
                 listType: U,
-                onRemove: () => de(o),
-                onPreview: Oe,
-                onDownload: Se,
+                onRemove: () => cs(r),
+                onPreview: Os,
+                onDownload: Ss,
                 showPreviewIcon: K.showPreviewIcon,
                 showRemoveIcon: K.showRemoveIcon,
                 showDownloadIcon: K.showDownloadIcon,
-                pictureCardSize: ye
+                pictureCardSize: ys
               },
-              o.uid
+              r.uid
             ))
           }
         )
       ] }),
-      /* @__PURE__ */ e(
-        Ze,
+      /* @__PURE__ */ s(
+        Zs,
         {
-          open: Pe,
-          onOpenChange: le,
-          title: ie,
+          open: Ps,
+          onOpenChange: as,
+          title: ls,
           size: "lg",
-          children: /* @__PURE__ */ e(
+          children: /* @__PURE__ */ s(
             "img",
             {
-              src: Ee,
-              alt: ie,
-              className: "w-full h-auto max-h-[70vh] object-contain"
+              src: Es,
+              alt: ls,
+              className: "ds:w-full ds:h-auto ds:max-h-[70vh] ds:object-contain"
             }
           )
         }
@@ -649,12 +649,12 @@ const er = He(
     ] });
   }
 );
-ge.displayName = "Upload";
-const be = ge;
-be.LIST_IGNORE = "LIST_IGNORE";
-const rr = ({
-  file: r,
-  listType: s,
+gs.displayName = "Upload";
+const bs = gs;
+bs.LIST_IGNORE = "LIST_IGNORE";
+const ee = ({
+  file: e,
+  listType: t,
   onRemove: m,
   onPreview: v,
   onDownload: N,
@@ -663,11 +663,11 @@ const rr = ({
   showDownloadIcon: x
   // pictureCardSize, // Unused currently
 }) => {
-  const k = r.type?.startsWith("image/"), L = k || r.url;
-  return s === "picture-card" ? /* @__PURE__ */ c(
+  const k = e.type?.startsWith("image/"), L = k || e.url;
+  return t === "picture-card" ? /* @__PURE__ */ i(
     "div",
     {
-      className: "relative aspect-square rounded-lg border bg-muted/50 overflow-hidden group",
+      className: "ds:relative ds:aspect-square ds:rounded-lg ds:border ds:bg-muted/50 ds:overflow-hidden ds:group",
       style: {
         width: "100px",
         height: "100px",
@@ -676,77 +676,77 @@ const rr = ({
         padding: "4px"
       },
       children: [
-        r.url && k ? /* @__PURE__ */ e(
+        e.url && k ? /* @__PURE__ */ s(
           "img",
           {
-            src: r.thumbUrl || r.url,
-            alt: r.name,
-            className: "h-full w-full object-cover rounded-lg"
+            src: e.thumbUrl || e.url,
+            alt: e.name,
+            className: "ds:h-full ds:w-full ds:object-cover ds:rounded-lg"
           }
-        ) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full", children: Y(r) }),
-        r.status === "uploading" && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center", children: /* @__PURE__ */ c("div", { className: "w-full px-4", children: [
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
-            /* @__PURE__ */ e(Q, { className: "h-4 w-4 animate-spin" }),
-            /* @__PURE__ */ c("span", { className: "text-xs", children: [
-              r.percent,
+        ) : /* @__PURE__ */ s("div", { className: "ds:flex ds:items-center ds:justify-center ds:h-full", children: Y(e) }),
+        e.status === "uploading" && /* @__PURE__ */ s("div", { className: "ds:absolute ds:inset-0 ds:bg-background/80 ds:flex ds:items-center ds:justify-center", children: /* @__PURE__ */ i("div", { className: "ds:w-full ds:px-4", children: [
+          /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-2 ds:mb-2", children: [
+            /* @__PURE__ */ s(Q, { className: "ds:h-4 ds:w-4 ds:animate-spin" }),
+            /* @__PURE__ */ i("span", { className: "ds:text-xs", children: [
+              e.percent,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ e("div", { className: "h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ s("div", { className: "ds:h-1 ds:bg-muted ds:rounded-full ds:overflow-hidden", children: /* @__PURE__ */ s(
             "div",
             {
-              className: "h-full bg-primary transition-all duration-300",
-              style: { width: `${r.percent}%` }
+              className: "ds:h-full ds:bg-primary ds:transition-all ds:duration-300",
+              style: { width: `${e.percent}%` }
             }
           ) })
         ] }) }),
-        r.status === "done" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2 bg-green-500 rounded-full p-1", children: /* @__PURE__ */ e(Z, { className: "h-4 w-4 text-white" }) }),
-        r.status === "error" && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2 bg-red-500 rounded-full p-1", children: /* @__PURE__ */ e(ee, { className: "h-4 w-4 text-white" }) }),
-        /* @__PURE__ */ c("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
-          $ && L && /* @__PURE__ */ e(
+        e.status === "done" && /* @__PURE__ */ s("div", { className: "ds:absolute ds:top-2 ds:right-2 ds:bg-green-500 ds:rounded-full ds:p-1", children: /* @__PURE__ */ s(Z, { className: "ds:h-4 ds:w-4 ds:text-white" }) }),
+        e.status === "error" && /* @__PURE__ */ s("div", { className: "ds:absolute ds:top-2 ds:right-2 ds:bg-red-500 ds:rounded-full ds:p-1", children: /* @__PURE__ */ s(ss, { className: "ds:h-4 ds:w-4 ds:text-white" }) }),
+        /* @__PURE__ */ i("div", { className: "ds:absolute ds:inset-0 ds:bg-black/60 ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity ds:flex ds:items-center ds:justify-center ds:gap-2", children: [
+          $ && L && /* @__PURE__ */ s(
             "button",
             {
-              onClick: (i) => {
-                i.stopPropagation(), v?.(r);
+              onClick: (l) => {
+                l.stopPropagation(), v?.(e);
               },
-              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              className: "ds:p-1 ds:rounded-full ds:bg-background/20 ds:hover:bg-background/30 ds:transition-colors",
               title: "Preview",
-              children: /* @__PURE__ */ e(_, { className: "h-4 w-4 text-white" })
+              children: /* @__PURE__ */ s(_, { className: "ds:h-4 ds:w-4 ds:text-white" })
             }
           ),
-          x && r.url && /* @__PURE__ */ e(
+          x && e.url && /* @__PURE__ */ s(
             "button",
             {
-              onClick: (i) => {
-                i.stopPropagation(), N?.(r);
+              onClick: (l) => {
+                l.stopPropagation(), N?.(e);
               },
-              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              className: "ds:p-1 ds:rounded-full ds:bg-background/20 ds:hover:bg-background/30 ds:transition-colors",
               title: "Download",
-              children: /* @__PURE__ */ e(G, { className: "h-4 w-4 text-white" })
+              children: /* @__PURE__ */ s(G, { className: "ds:h-4 ds:w-4 ds:text-white" })
             }
           ),
-          R && /* @__PURE__ */ e(
+          R && /* @__PURE__ */ s(
             "button",
             {
-              onClick: (i) => {
-                i.stopPropagation(), m();
+              onClick: (l) => {
+                l.stopPropagation(), m();
               },
-              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              className: "ds:p-1 ds:rounded-full ds:bg-background/20 ds:hover:bg-background/30 ds:transition-colors",
               title: "Remove",
-              children: /* @__PURE__ */ e(A, { className: "h-4 w-4 text-white" })
+              children: /* @__PURE__ */ s(A, { className: "ds:h-4 ds:w-4 ds:text-white" })
             }
           )
         ] }),
-        /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 p-2 text-white text-xs truncate opacity-0 group-hover:opacity-100 transition-opacity", children: r.name })
+        /* @__PURE__ */ s("div", { className: "ds:absolute ds:bottom-0 ds:left-0 ds:right-0 ds:bg-black/60 ds:p-2 ds:text-white ds:text-xs ds:truncate ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity", children: e.name })
       ]
     }
-  ) : s === "picture-circle" ? /* @__PURE__ */ c(
+  ) : t === "picture-circle" ? /* @__PURE__ */ i(
     "div",
     {
       className: C(
-        "relative aspect-square rounded-full border bg-muted/50 overflow-hidden group",
-        r.status === "done" && "border-2 border-green-500",
-        r.status === "error" && "border-2 border-red-500"
+        "ds:relative ds:aspect-square ds:rounded-full ds:border ds:bg-muted/50 ds:overflow-hidden ds:group",
+        e.status === "done" && "ds:border-2 ds:border-green-500",
+        e.status === "error" && "ds:border-2 ds:border-red-500"
       ),
       style: {
         width: "100px",
@@ -756,193 +756,193 @@ const rr = ({
         padding: "4px"
       },
       children: [
-        r.url && k ? /* @__PURE__ */ e(
+        e.url && k ? /* @__PURE__ */ s(
           "img",
           {
-            src: r.thumbUrl || r.url,
-            alt: r.name,
-            className: "h-full w-full object-cover rounded-full"
+            src: e.thumbUrl || e.url,
+            alt: e.name,
+            className: "ds:h-full ds:w-full ds:object-cover ds:rounded-full"
           }
-        ) : /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full rounded-full bg-muted", children: Y(r) }),
-        r.status === "uploading" && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center rounded-full", children: /* @__PURE__ */ c("div", { className: "w-full px-4", children: [
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2 justify-center", children: [
-            /* @__PURE__ */ e(Q, { className: "h-4 w-4 animate-spin" }),
-            /* @__PURE__ */ c("span", { className: "text-xs", children: [
-              r.percent,
+        ) : /* @__PURE__ */ s("div", { className: "ds:flex ds:items-center ds:justify-center ds:h-full ds:rounded-full ds:bg-muted", children: Y(e) }),
+        e.status === "uploading" && /* @__PURE__ */ s("div", { className: "ds:absolute ds:inset-0 ds:bg-background/80 ds:flex ds:items-center ds:justify-center ds:rounded-full", children: /* @__PURE__ */ i("div", { className: "ds:w-full ds:px-4", children: [
+          /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-2 ds:mb-2 ds:justify-center", children: [
+            /* @__PURE__ */ s(Q, { className: "ds:h-4 ds:w-4 ds:animate-spin" }),
+            /* @__PURE__ */ i("span", { className: "ds:text-xs", children: [
+              e.percent,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ e("div", { className: "h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ s("div", { className: "ds:h-1 ds:bg-muted ds:rounded-full ds:overflow-hidden", children: /* @__PURE__ */ s(
             "div",
             {
-              className: "h-full bg-primary transition-all duration-300",
-              style: { width: `${r.percent}%` }
+              className: "ds:h-full ds:bg-primary ds:transition-all ds:duration-300",
+              style: { width: `${e.percent}%` }
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ c("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2 rounded-full", children: [
-          $ && L && /* @__PURE__ */ e(
+        /* @__PURE__ */ i("div", { className: "ds:absolute ds:inset-0 ds:bg-black/60 ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity ds:flex ds:items-center ds:justify-center ds:gap-2 ds:rounded-full", children: [
+          $ && L && /* @__PURE__ */ s(
             "button",
             {
-              onClick: (i) => {
-                i.stopPropagation(), v?.(r);
+              onClick: (l) => {
+                l.stopPropagation(), v?.(e);
               },
-              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              className: "ds:p-1 ds:rounded-full ds:bg-background/20 ds:hover:bg-background/30 ds:transition-colors",
               title: "Preview",
-              children: /* @__PURE__ */ e(_, { className: "h-4 w-4 text-white" })
+              children: /* @__PURE__ */ s(_, { className: "ds:h-4 ds:w-4 ds:text-white" })
             }
           ),
-          x && r.url && /* @__PURE__ */ e(
+          x && e.url && /* @__PURE__ */ s(
             "button",
             {
-              onClick: (i) => {
-                i.stopPropagation(), N?.(r);
+              onClick: (l) => {
+                l.stopPropagation(), N?.(e);
               },
-              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              className: "ds:p-1 ds:rounded-full ds:bg-background/20 ds:hover:bg-background/30 ds:transition-colors",
               title: "Download",
-              children: /* @__PURE__ */ e(G, { className: "h-4 w-4 text-white" })
+              children: /* @__PURE__ */ s(G, { className: "ds:h-4 ds:w-4 ds:text-white" })
             }
           ),
-          R && /* @__PURE__ */ e(
+          R && /* @__PURE__ */ s(
             "button",
             {
-              onClick: (i) => {
-                i.stopPropagation(), m();
+              onClick: (l) => {
+                l.stopPropagation(), m();
               },
-              className: "p-1 rounded-full bg-background/20 hover:bg-background/30 transition-colors",
+              className: "ds:p-1 ds:rounded-full ds:bg-background/20 ds:hover:bg-background/30 ds:transition-colors",
               title: "Remove",
-              children: /* @__PURE__ */ e(A, { className: "h-4 w-4 text-white" })
+              children: /* @__PURE__ */ s(A, { className: "ds:h-4 ds:w-4 ds:text-white" })
             }
           ),
-          /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 bg-black/60 p-2 text-white text-xs truncate opacity-0 group-hover:opacity-100 transition-opacity", children: r.name })
+          /* @__PURE__ */ s("div", { className: "ds:absolute ds:bottom-0 ds:left-0 ds:right-0 ds:bg-black/60 ds:p-2 ds:text-white ds:text-xs ds:truncate ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity", children: e.name })
         ] })
       ]
     }
-  ) : s === "picture" ? /* @__PURE__ */ c("div", { className: "flex items-center gap-3 p-2 rounded-lg border bg-background hover:bg-muted/50 transition-colors group", children: [
-    /* @__PURE__ */ e("div", { className: "shrink-0 h-10 w-10 rounded overflow-hidden bg-muted flex items-center justify-center", children: r.url && k ? /* @__PURE__ */ e(
+  ) : t === "picture" ? /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-3 ds:p-2 ds:rounded-lg ds:border ds:bg-background ds:hover:bg-muted/50 ds:transition-colors ds:group", children: [
+    /* @__PURE__ */ s("div", { className: "ds:shrink-0 ds:h-10 ds:w-10 ds:rounded ds:overflow-hidden ds:bg-muted ds:flex ds:items-center ds:justify-center", children: e.url && k ? /* @__PURE__ */ s(
       "img",
       {
-        src: r.thumbUrl || r.url,
-        alt: r.name,
-        className: "h-full w-full object-cover"
+        src: e.thumbUrl || e.url,
+        alt: e.name,
+        className: "ds:h-full ds:w-full ds:object-cover"
       }
-    ) : Y(r) }),
-    /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ e("p", { className: "text-sm font-medium truncate", children: r.name }),
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mt-1", children: [
-        r.size && /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: re(r.size) }),
-        r.status === "uploading" && /* @__PURE__ */ c("span", { className: "text-xs text-primary", children: [
-          r.percent,
+    ) : Y(e) }),
+    /* @__PURE__ */ i("div", { className: "ds:flex-1 ds:min-w-0", children: [
+      /* @__PURE__ */ s("p", { className: "ds:text-sm ds:font-medium ds:truncate", children: e.name }),
+      /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-2 ds:mt-1", children: [
+        e.size && /* @__PURE__ */ s("span", { className: "ds:text-xs ds:text-muted-foreground", children: es(e.size) }),
+        e.status === "uploading" && /* @__PURE__ */ i("span", { className: "ds:text-xs ds:text-primary", children: [
+          e.percent,
           "%"
         ] }),
-        r.status === "done" && /* @__PURE__ */ e(Z, { className: "h-4 w-4 text-green-500" }),
-        r.status === "error" && /* @__PURE__ */ e(ee, { className: "h-4 w-4 text-red-500" })
+        e.status === "done" && /* @__PURE__ */ s(Z, { className: "ds:h-4 ds:w-4 ds:text-green-500" }),
+        e.status === "error" && /* @__PURE__ */ s(ss, { className: "ds:h-4 ds:w-4 ds:text-red-500" })
       ] }),
-      r.status === "uploading" && /* @__PURE__ */ e("div", { className: "h-1 bg-muted rounded-full overflow-hidden mt-2", children: /* @__PURE__ */ e(
+      e.status === "uploading" && /* @__PURE__ */ s("div", { className: "ds:h-1 ds:bg-muted ds:rounded-full ds:overflow-hidden ds:mt-2", children: /* @__PURE__ */ s(
         "div",
         {
-          className: "h-full bg-primary transition-all duration-300",
-          style: { width: `${r.percent}%` }
+          className: "ds:h-full ds:bg-primary ds:transition-all ds:duration-300",
+          style: { width: `${e.percent}%` }
         }
       ) })
     ] }),
-    /* @__PURE__ */ c("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
-      $ && L && /* @__PURE__ */ e(
+    /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-1 ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity", children: [
+      $ && L && /* @__PURE__ */ s(
         "button",
         {
-          onClick: (i) => {
-            i.stopPropagation(), v?.(r);
+          onClick: (l) => {
+            l.stopPropagation(), v?.(e);
           },
-          className: "p-1.5 rounded hover:bg-muted transition-colors",
+          className: "ds:p-1.5 ds:rounded ds:hover:bg-muted ds:transition-colors",
           title: "Preview",
-          children: /* @__PURE__ */ e(_, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ s(_, { className: "ds:h-4 ds:w-4" })
         }
       ),
-      x && r.url && /* @__PURE__ */ e(
+      x && e.url && /* @__PURE__ */ s(
         "button",
         {
-          onClick: (i) => {
-            i.stopPropagation(), N?.(r);
+          onClick: (l) => {
+            l.stopPropagation(), N?.(e);
           },
-          className: "p-1.5 rounded hover:bg-muted transition-colors",
+          className: "ds:p-1.5 ds:rounded ds:hover:bg-muted ds:transition-colors",
           title: "Download",
-          children: /* @__PURE__ */ e(G, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ s(G, { className: "ds:h-4 ds:w-4" })
         }
       ),
-      R && /* @__PURE__ */ e(
+      R && /* @__PURE__ */ s(
         "button",
         {
-          onClick: (i) => {
-            i.stopPropagation(), m();
+          onClick: (l) => {
+            l.stopPropagation(), m();
           },
-          className: "p-1.5 rounded hover:bg-destructive/10 transition-colors text-destructive",
+          className: "ds:p-1.5 ds:rounded ds:hover:bg-destructive/10 ds:transition-colors ds:text-destructive",
           title: "Remove",
-          children: /* @__PURE__ */ e(Ye, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ s(Ys, { className: "ds:h-4 ds:w-4" })
         }
       )
     ] })
-  ] }) : /* @__PURE__ */ c("div", { className: "flex items-center gap-2 p-2 rounded hover:bg-muted/50 transition-colors group", children: [
-    /* @__PURE__ */ e("div", { className: "shrink-0", children: Y(r) }),
-    /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e("p", { className: "text-sm truncate", children: r.name }),
-        r.status === "done" && /* @__PURE__ */ e(Z, { className: "h-4 w-4 text-green-500 shrink-0" }),
-        r.status === "error" && /* @__PURE__ */ e(ee, { className: "h-4 w-4 text-red-500 shrink-0" }),
-        r.status === "uploading" && /* @__PURE__ */ e(Q, { className: "h-4 w-4 animate-spin shrink-0" })
+  ] }) : /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-2 ds:p-2 ds:rounded ds:hover:bg-muted/50 ds:transition-colors ds:group", children: [
+    /* @__PURE__ */ s("div", { className: "ds:shrink-0", children: Y(e) }),
+    /* @__PURE__ */ i("div", { className: "ds:flex-1 ds:min-w-0", children: [
+      /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-2", children: [
+        /* @__PURE__ */ s("p", { className: "ds:text-sm ds:truncate", children: e.name }),
+        e.status === "done" && /* @__PURE__ */ s(Z, { className: "ds:h-4 ds:w-4 ds:text-green-500 ds:shrink-0" }),
+        e.status === "error" && /* @__PURE__ */ s(ss, { className: "ds:h-4 ds:w-4 ds:text-red-500 ds:shrink-0" }),
+        e.status === "uploading" && /* @__PURE__ */ s(Q, { className: "ds:h-4 ds:w-4 ds:animate-spin ds:shrink-0" })
       ] }),
-      r.status === "uploading" && /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e("div", { className: "flex-1 h-1 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ e(
+      e.status === "uploading" && /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-2", children: [
+        /* @__PURE__ */ s("div", { className: "ds:flex-1 ds:h-1 ds:bg-muted ds:rounded-full ds:overflow-hidden", children: /* @__PURE__ */ s(
           "div",
           {
-            className: "h-full bg-primary transition-all duration-300",
-            style: { width: `${r.percent}%` }
+            className: "ds:h-full ds:bg-primary ds:transition-all ds:duration-300",
+            style: { width: `${e.percent}%` }
           }
         ) }),
-        /* @__PURE__ */ c("span", { className: "text-xs text-muted-foreground", children: [
-          r.percent,
+        /* @__PURE__ */ i("span", { className: "ds:text-xs ds:text-muted-foreground", children: [
+          e.percent,
           "%"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ c("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [
-      $ && L && /* @__PURE__ */ e(
+    /* @__PURE__ */ i("div", { className: "ds:flex ds:items-center ds:gap-1 ds:opacity-0 ds:group-hover:opacity-100 ds:transition-opacity", children: [
+      $ && L && /* @__PURE__ */ s(
         "button",
         {
-          onClick: (i) => {
-            i.stopPropagation(), v?.(r);
+          onClick: (l) => {
+            l.stopPropagation(), v?.(e);
           },
-          className: "p-1 rounded hover:bg-muted transition-colors",
+          className: "ds:p-1 ds:rounded ds:hover:bg-muted ds:transition-colors",
           title: "Preview",
-          children: /* @__PURE__ */ e(_, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ s(_, { className: "ds:h-4 ds:w-4" })
         }
       ),
-      x && r.url && /* @__PURE__ */ e(
+      x && e.url && /* @__PURE__ */ s(
         "button",
         {
-          onClick: (i) => {
-            i.stopPropagation(), N?.(r);
+          onClick: (l) => {
+            l.stopPropagation(), N?.(e);
           },
-          className: "p-1 rounded hover:bg-muted transition-colors",
+          className: "ds:p-1 ds:rounded ds:hover:bg-muted ds:transition-colors",
           title: "Download",
-          children: /* @__PURE__ */ e(G, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ s(G, { className: "ds:h-4 ds:w-4" })
         }
       ),
-      R && /* @__PURE__ */ e(
+      R && /* @__PURE__ */ s(
         "button",
         {
-          onClick: (i) => {
-            i.stopPropagation(), m();
+          onClick: (l) => {
+            l.stopPropagation(), m();
           },
-          className: "p-1 rounded hover:bg-destructive/10 transition-colors text-destructive",
+          className: "ds:p-1 ds:rounded ds:hover:bg-destructive/10 ds:transition-colors ds:text-destructive",
           title: "Remove",
-          children: /* @__PURE__ */ e(A, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ s(A, { className: "ds:h-4 ds:w-4" })
         }
       )
     ] })
   ] });
 };
 export {
-  be as Upload,
-  be as default
+  bs as Upload,
+  bs as default
 };
 //# sourceMappingURL=Upload.js.map