ics-ui-kit 0.1.6 → 0.1.7

package/dist/components/file-upload.js

@@ -1,25 +1,26 @@
-import { jsx as a, jsxs as p, Fragment as Q } from "react/jsx-runtime";
+import { jsx as a, jsxs as m, Fragment as Y } from "react/jsx-runtime";
 import { I as C } from "../IconButton-DwkpNgn3.js";
-import { f as T, u as S } from "../useFileUpload-iDag0iqM.js";
-import U, { useMemo as V, useCallback as W } from "react";
-import { T as y } from "../index-BVqs-uqP.js";
+import { f as S } from "../formatBytes-C4QXq5lC.js";
+import U, { useMemo as V, useCallback as R } from "react";
+import { T as b } from "../index-BVqs-uqP.js";
 import { F as q } from "../FeatureIcon-BGE0Orkc.js";
-import { c as v } from "../createLucideIcon-DwBrHnj9.js";
-import { I as Y } from "../image-BqL5JP90.js";
+import { c as F } from "../createLucideIcon-DwBrHnj9.js";
+import { I as ee } from "../image-BqL5JP90.js";
 import { T as B } from "../TextOverflowTooltip-DlUgic5y.js";
 import { D as Z } from "../download-BHsj218e.js";
 import { X as L } from "../x-tDTt7hTQ.js";
-import { A as ee, b as ae, a as te } from "../AlertIcon-5B6AgZpe.js";
-import { C as re } from "../circle-alert-CVIokIC7.js";
-import { B as oe } from "../Button-Dg89xRSi.js";
+import { A as ae, b as te, a as re } from "../AlertIcon-5B6AgZpe.js";
+import { C as oe } from "../circle-alert-CVIokIC7.js";
+import { B as ie } from "../Button-Dg89xRSi.js";
 import { I as se } from "../Icon-DH3ev9GK.js";
+import { u as E } from "../useFileUpload-Bnl3P8mP.js";
 /**
  * @license lucide-react v0.460.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ie = v("FileArchive", [
+const ne = F("FileArchive", [
   ["path", { d: "M10 12v-1", key: "v7bkov" }],
   ["path", { d: "M10 18v-2", key: "1cjy8d" }],
   ["path", { d: "M10 7V6", key: "dljcrl" }],
@@ -36,7 +37,7 @@ const ie = v("FileArchive", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const le = v("FileSpreadsheet", [
+const le = F("FileSpreadsheet", [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M8 13h2", key: "yr2amv" }],
@@ -50,7 +51,7 @@ const le = v("FileSpreadsheet", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ne = v("FileText", [
+const de = F("FileText", [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }],
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
@@ -63,7 +64,7 @@ const ne = v("FileText", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const de = v("File", [
+const ce = F("File", [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
 ]);
@@ -73,7 +74,7 @@ const de = v("File", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ce = v("Headphones", [
+const pe = F("Headphones", [
   [
     "path",
     {
@@ -88,7 +89,7 @@ const ce = v("Headphones", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const E = v("Upload", [
+const O = F("Upload", [
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
   ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
@@ -99,7 +100,7 @@ const E = v("Upload", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const pe = v("Video", [
+const me = F("Video", [
   [
     "path",
     {
@@ -108,35 +109,35 @@ const pe = v("Video", [
     }
   ],
   ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
-]), O = (r) => {
+]), _ = (r) => {
   const e = r.type, t = r.name;
-  return e.includes("pdf") || t.endsWith(".pdf") || e.includes("word") || t.endsWith(".doc") || t.endsWith(".docx") ? ne : e.includes("zip") || e.includes("archive") || t.endsWith(".zip") || t.endsWith(".rar") ? ie : e.includes("excel") || t.endsWith(".xls") || t.endsWith(".xlsx") ? le : e.includes("video/") ? pe : e.includes("audio/") ? ce : e.startsWith("image/") ? Y : de;
-}, me = y({
+  return e.includes("pdf") || t.endsWith(".pdf") || e.includes("word") || t.endsWith(".doc") || t.endsWith(".docx") ? de : e.includes("zip") || e.includes("archive") || t.endsWith(".zip") || t.endsWith(".rar") ? ne : e.includes("excel") || t.endsWith(".xls") || t.endsWith(".xlsx") ? le : e.includes("video/") ? me : e.includes("audio/") ? pe : e.startsWith("image/") ? ee : ce;
+}, he = b({
   base: "rounded-md text-muted ring-0"
-}), he = ({ file: r }) => {
-  const e = O(r);
-  return /* @__PURE__ */ a(q, { icon: e, size: "lg", className: me() });
-}, fe = y({
+}), fe = ({ file: r }) => {
+  const e = _(r);
+  return /* @__PURE__ */ a(q, { icon: e, size: "lg", className: he() });
+}, ue = b({
   slots: {
     wrapper: "box-border flex h-16 justify-between gap-2 rounded-xl border border-secondary-border bg-background p-3 pe-3",
     infoWrapper: "flex min-w-0 flex-1 items-center gap-2.5",
     textWrapper: "flex min-w-0 flex-col gap-0.5",
     title: "truncate text-sm font-medium",
-    description: "text-xs text-muted",
+    description: "text-xs tabular-nums text-muted",
     actionWrapper: "-me-3 -mt-3 flex h-8 items-center -space-x-1.5"
   }
-}), _ = U.forwardRef(
-  ({ onClear: r, onDownload: e, file: t, className: i, ...l }, c) => {
-    const s = fe();
-    return /* @__PURE__ */ p("div", { className: s.wrapper({ className: i }), ref: c, ...l, children: [
-      /* @__PURE__ */ p("div", { className: s.infoWrapper(), children: [
-        /* @__PURE__ */ a(he, { file: t }),
-        /* @__PURE__ */ p("div", { className: s.textWrapper(), children: [
-          /* @__PURE__ */ a(B, { className: s.title(), children: t.name }),
-          /* @__PURE__ */ a("p", { className: s.description(), children: T(t.size) })
+}), X = U.forwardRef(
+  ({ onClear: r, onDownload: e, file: t, className: i, renderDescription: s, ...d }, c) => {
+    const o = ue();
+    return /* @__PURE__ */ m("div", { className: o.wrapper({ className: i }), ref: c, ...d, children: [
+      /* @__PURE__ */ m("div", { className: o.infoWrapper(), children: [
+        /* @__PURE__ */ a(fe, { file: t }),
+        /* @__PURE__ */ m("div", { className: o.textWrapper(), children: [
+          /* @__PURE__ */ a(B, { className: o.title(), children: t.name }),
+          /* @__PURE__ */ a("p", { className: o.description(), children: s?.(t) ?? S(t.size) })
         ] })
       ] }),
-      /* @__PURE__ */ p("div", { className: s.actionWrapper(), children: [
+      /* @__PURE__ */ m("div", { className: o.actionWrapper(), children: [
         e && /* @__PURE__ */ a(
           C,
           {
@@ -165,21 +166,21 @@ const pe = v("Video", [
     ] });
   }
 );
-_.displayName = "FileUploadItem";
-const R = U.forwardRef(({ error: r, ...e }, t) => {
+X.displayName = "FileUploadItem";
+const H = U.forwardRef(({ error: r, ...e }, t) => {
   const i = Array.isArray(r) ? r.join(`
 `) : r;
-  return /* @__PURE__ */ p(ee, { status: "error", focus: "medium", ...e, ref: t, children: [
-    /* @__PURE__ */ a(ae, { icon: re }),
-    /* @__PURE__ */ a(te, { className: "whitespace-pre-line", children: i })
+  return /* @__PURE__ */ m(ae, { status: "error", focus: "medium", ...e, ref: t, children: [
+    /* @__PURE__ */ a(te, { icon: oe }),
+    /* @__PURE__ */ a(re, { className: "whitespace-pre-line", children: i })
   ] });
 });
-R.displayName = "FileUploadError";
-const ue = y({
+H.displayName = "FileUploadError";
+const ye = b({
   base: "shrink-0 bg-status-neutral-fg"
-}), H = ({ icon: r, className: e, ...t }) => /* @__PURE__ */ a(q, { size: "xl", icon: r, className: ue({ className: e }), ...t });
-H.displayName = "FileUploadDropAreaIcon";
-const ye = y({
+}), j = ({ icon: r, className: e, ...t }) => /* @__PURE__ */ a(q, { size: "xl", icon: r, className: ye({ className: e }), ...t });
+j.displayName = "FileUploadDropAreaIcon";
+const be = b({
   slots: {
     wrapper: [
       "has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50",
@@ -192,7 +193,7 @@ const ye = y({
     icon: "mb-3 size-11",
     description: "flex flex-wrap justify-center gap-1 text-xs text-muted"
   }
-}), X = U.forwardRef(
+}), $ = U.forwardRef(
   ({
     className: r,
     title: e = "Click to upload or drop your files here ",
@@ -202,20 +203,20 @@ Infinity files
 ∙
 Infinity size`,
     icon: i,
-    children: l,
-    ...c
-  }, s) => {
-    const o = ye();
-    return /* @__PURE__ */ p("div", { role: "button", className: o.wrapper({ className: r }), ref: s, ...c, children: [
-      /* @__PURE__ */ a(H, { icon: i || E, className: o.icon() }),
+    children: s,
+    ...d
+  }, c) => {
+    const o = be();
+    return /* @__PURE__ */ m("div", { role: "button", className: o.wrapper({ className: r }), ref: c, ...d, children: [
+      /* @__PURE__ */ a(j, { icon: i || O, className: o.icon() }),
       /* @__PURE__ */ a("p", { className: o.title(), children: e }),
       t && /* @__PURE__ */ a("p", { className: o.description(), children: t }),
-      l
+      s
     ] });
   }
 );
-X.displayName = "FileUploadDropArea";
-const be = y({
+$.displayName = "FileUploadDropArea";
+const xe = b({
   slots: {
     wrapper: [
       "has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50",
@@ -228,99 +229,103 @@ const be = y({
     title: "text-sm font-medium text-primary-accent",
     description: "ml-1.5 flex flex-wrap justify-center gap-1.5 text-xs text-muted"
   }
-}), $ = U.forwardRef(
-  ({ className: r, title: e = "Upload files", description: t = "Drag & drop or click to browse", icon: i, children: l, ...c }, s) => {
-    const o = be();
-    return /* @__PURE__ */ p("div", { role: "button", className: o.wrapper({ className: r }), ref: s, ...c, children: [
-      /* @__PURE__ */ a(H, { icon: i || E, className: o.icon(), size: "sm" }),
-      /* @__PURE__ */ p("div", { className: "flex items-baseline", children: [
+}), G = U.forwardRef(
+  ({ className: r, title: e = "Upload files", description: t = "Drag & drop or click to browse", icon: i, children: s, ...d }, c) => {
+    const o = xe();
+    return /* @__PURE__ */ m("div", { role: "button", className: o.wrapper({ className: r }), ref: c, ...d, children: [
+      /* @__PURE__ */ a(j, { icon: i || O, className: o.icon(), size: "sm" }),
+      /* @__PURE__ */ m("div", { className: "flex items-baseline", children: [
         /* @__PURE__ */ a("p", { className: o.title(), children: e }),
-        t && /* @__PURE__ */ p(Q, { children: [
+        t && /* @__PURE__ */ m(Y, { children: [
           /* @__PURE__ */ a("span", { className: "ml-1.5 text-muted", children: "∙" }),
           /* @__PURE__ */ a("p", { className: o.description(), children: t })
         ] }),
-        l
+        s
       ] })
     ] });
   }
 );
-$.displayName = "FileUploadInlineDropArea";
-const G = ({ children: r = "Remove all files", ...e }) => /* @__PURE__ */ a(oe, { size: "sm", variant: "outline", type: "button", ...e, children: r });
-G.displayName = "FileUploadClearButton";
-const J = ({
+G.displayName = "FileUploadInlineDropArea";
+const J = ({ children: r = "Remove all files", ...e }) => /* @__PURE__ */ a(ie, { size: "sm", variant: "outline", type: "button", ...e, children: r });
+J.displayName = "FileUploadClearButton";
+const K = ({
   isDragging: r,
   getInputProps: e,
   openFileDialog: t,
   handleDragEnter: i,
-  handleDragLeave: l,
-  handleDragOver: c,
-  handleDrop: s,
-  ...o
+  handleDragLeave: s,
+  handleDragOver: d,
+  handleDrop: c,
+  title: o,
+  description: p
 }) => /* @__PURE__ */ a(
-  X,
+  $,
   {
     onClick: t,
     onDragEnter: i,
-    onDragLeave: l,
-    onDragOver: c,
-    onDrop: s,
+    onDragLeave: s,
+    onDragOver: d,
+    onDrop: c,
     "data-dragging": r || void 0,
-    ...o,
+    title: o,
+    description: p,
     children: /* @__PURE__ */ a("input", { className: "sr-only", "aria-label": "Upload files", ...e() })
   }
 );
-J.displayName = "FileUploadInputZone";
-const K = ({
+K.displayName = "FileUploadInputZone";
+const P = ({
   isDragging: r,
   getInputProps: e,
   openFileDialog: t,
   handleDragEnter: i,
-  handleDragLeave: l,
-  handleDragOver: c,
-  handleDrop: s,
-  ...o
+  handleDragLeave: s,
+  handleDragOver: d,
+  handleDrop: c,
+  title: o,
+  description: p
 }) => /* @__PURE__ */ a(
-  $,
+  G,
   {
     onClick: t,
     onDragEnter: i,
-    onDragLeave: l,
-    onDragOver: c,
-    onDrop: s,
+    onDragLeave: s,
+    onDragOver: d,
+    onDrop: c,
     "data-dragging": r || void 0,
-    ...o,
+    title: o,
+    description: p,
     children: /* @__PURE__ */ a("input", { className: "sr-only", "aria-label": "Upload files", ...e() })
   }
 );
-K.displayName = "FileUploadCompactInputZone";
-const xe = y({
+P.displayName = "FileUploadCompactInputZone";
+const ge = b({
   slots: {
     wrapper: "box-border flex h-10 items-center gap-2 rounded-lg border border-secondary-border bg-background p-2.5 pr-1",
     icon: "text-muted",
     infoWrapper: "flex w-full items-center overflow-hidden",
     textWrapper: "flex w-full items-center justify-between",
     title: "truncate text-sm font-medium",
-    description: "text-sm text-muted",
+    description: "text-sm tabular-nums text-muted",
     actionWrapper: "ml-auto flex items-center -space-x-1.5"
   }
-}), P = U.forwardRef(
-  ({ onClear: r, file: e, className: t, renderIcon: i, onDownload: l, ...c }, s) => {
-    const o = xe(), N = O(e);
-    return /* @__PURE__ */ a("div", { className: "relative", children: /* @__PURE__ */ p("div", { className: o.wrapper({ className: t }), ref: s, ...c, children: [
-      i ?? /* @__PURE__ */ a("div", { className: "size-5", children: /* @__PURE__ */ a(se, { icon: N, size: "lg", className: o.icon() }) }),
-      /* @__PURE__ */ a("div", { className: o.infoWrapper(), children: /* @__PURE__ */ p("div", { className: o.textWrapper(), children: [
-        /* @__PURE__ */ a(B, { className: o.title(), children: e.name }),
-        /* @__PURE__ */ a("p", { className: o.description(), children: T(e.size) })
+}), Q = U.forwardRef(
+  ({ onClear: r, file: e, className: t, renderIcon: i, onDownload: s, renderDescription: d, ...c }, o) => {
+    const p = ge(), k = _(e);
+    return /* @__PURE__ */ a("div", { className: "relative", children: /* @__PURE__ */ m("div", { className: p.wrapper({ className: t }), ref: o, ...c, children: [
+      i ?? /* @__PURE__ */ a("div", { className: "size-5", children: /* @__PURE__ */ a(se, { icon: k, size: "lg", className: p.icon() }) }),
+      /* @__PURE__ */ a("div", { className: p.infoWrapper(), children: /* @__PURE__ */ m("div", { className: p.textWrapper(), children: [
+        /* @__PURE__ */ a(B, { className: p.title(), children: e.name }),
+        /* @__PURE__ */ a("p", { className: p.description(), children: d?.(e) ?? S(e.size) })
       ] }) }),
-      /* @__PURE__ */ p("div", { className: o.actionWrapper(), children: [
-        l && /* @__PURE__ */ a(
+      /* @__PURE__ */ m("div", { className: p.actionWrapper(), children: [
+        s && /* @__PURE__ */ a(
           C,
           {
             variant: "text",
             size: "sm",
             type: "button",
             icon: Z,
-            onClick: () => l(e),
+            onClick: () => s(e),
             "aria-label": "Download file",
             iconClassName: "size-4"
           }
@@ -341,144 +346,148 @@ const xe = y({
     ] }) });
   }
 );
-P.displayName = "FileUploadItemCompact";
-const ge = y({
+Q.displayName = "FileUploadItemCompact";
+const ve = b({
   base: "flex flex-col gap-3"
-}), ve = (r) => {
+}), Fe = (r) => {
   const {
     files: e,
     onRemove: t,
     onAdd: i,
-    onClear: l,
-    onDownload: c,
-    initialFiles: s,
+    onClear: s,
+    onDownload: d,
+    initialFiles: c,
     onChange: o,
-    className: N,
-    title: I,
+    className: p,
+    title: k,
     description: w,
     helpText: z,
     removeBtnText: D,
     errorMessages: A,
-    multiple: F = !0,
-    ...M
-  } = r, [{ files: b, isDragging: k, errors: x }, g] = S({
-    ...M,
-    initialFiles: s,
-    multiple: F,
+    multiple: M = !0,
+    renderItemDescription: N,
+    ...W
+  } = r, [{ files: x, isDragging: I, errors: g }, v] = E({
+    ...W,
+    initialFiles: c,
+    multiple: M,
     errorMessages: A,
-    onFilesChange: (d) => {
-      const u = d.map((h) => h.file);
-      o?.(u);
+    onFilesChange: (l) => {
+      const y = l.map((f) => f.file);
+      o?.(y);
     },
-    onFilesAdded: (d) => {
-      const u = d.map((h) => h.file);
-      i?.(u);
+    onFilesAdded: (l) => {
+      const y = l.map((f) => f.file);
+      i?.(y);
     }
-  }), n = V(() => e || b.map((d) => d.file), [e, b]), m = W(() => {
-    g.clearFiles(), l?.();
-  }, [g, l]), f = W(
-    (d, u) => {
-      const h = b.find((j) => j.file.name === d.name && j.file.size === d.size)?.id;
-      h && g.removeFile(h), t?.(d, u);
+  }), n = V(() => e || x.map((l) => l.file), [e, x]), h = R(() => {
+    v.clearFiles(), s?.();
+  }, [v, s]), u = R(
+    (l, y) => {
+      const f = x.find((T) => T.file.name === l.name && T.file.size === l.size)?.id;
+      f && v.removeFile(f), t?.(l, y);
     },
-    [b, g, t]
+    [x, v, t]
   );
-  return /* @__PURE__ */ p("div", { className: ge({ className: N }), children: [
+  return /* @__PURE__ */ m("div", { className: ve({ className: p }), children: [
     /* @__PURE__ */ a(
-      J,
+      K,
       {
-        ...g,
-        isDragging: k,
-        title: I,
+        ...v,
+        isDragging: I,
+        title: k,
         description: w,
         helpText: z
       }
     ),
-    x.length > 0 && /* @__PURE__ */ a(R, { error: x }),
-    n.length > 0 && /* @__PURE__ */ p("div", { className: "space-y-2", children: [
-      n.map((d, u) => /* @__PURE__ */ a(
-        _,
+    g.length > 0 && /* @__PURE__ */ a(H, { error: g }),
+    n.length > 0 && /* @__PURE__ */ m("div", { className: "space-y-2", children: [
+      n.map((l, y) => /* @__PURE__ */ a(
+        X,
         {
-          file: d,
-          onClear: () => f(d, u),
-          onDownload: c
+          file: l,
+          onClear: () => u(l, y),
+          onDownload: d,
+          renderDescription: N
         },
-        u
+        y
       )),
-      n.length > 1 && /* @__PURE__ */ a(G, { onClick: m, children: D })
+      n.length > 1 && /* @__PURE__ */ a(J, { onClick: h, children: D })
     ] })
   ] });
 };
-ve.displayName = "FileUpload";
-const Fe = y({
+Fe.displayName = "FileUpload";
+const Ne = b({
   base: "box-border flex flex-col gap-2"
-}), Ne = (r) => {
+}), ke = (r) => {
   const {
     files: e,
     onRemove: t,
     onDownload: i,
-    onAdd: l,
-    initialFiles: c,
-    onChange: s,
+    onAdd: s,
+    initialFiles: d,
+    onChange: c,
     className: o,
-    title: N,
-    description: I,
+    title: p,
+    description: k,
     multiple: w = !0,
     errorMessages: z,
     renderFileIcon: D,
-    ...A
-  } = r, [{ files: F, isDragging: M, errors: b }, k] = S({
-    ...A,
-    initialFiles: c,
+    renderItemDescription: A,
+    ...M
+  } = r, [{ files: N, isDragging: W, errors: x }, I] = E({
+    ...M,
+    initialFiles: d,
     multiple: w,
     errorMessages: z,
     onFilesChange: (n) => {
-      const m = n.map((f) => f.file);
-      s?.(m);
+      const h = n.map((u) => u.file);
+      c?.(h);
     },
     onFilesAdded: (n) => {
-      const m = n.map((f) => f.file);
-      l?.(m);
+      const h = n.map((u) => u.file);
+      s?.(h);
     }
-  }), x = V(() => e || F.map((n) => n.file), [e, F]), g = W(
-    (n, m) => {
-      const f = F.find((d) => d.file.name === n.name && d.file.size === n.size)?.id;
-      f && k.removeFile(f), t?.(n, m);
+  }), g = V(() => e || N.map((n) => n.file), [e, N]), v = R(
+    (n, h) => {
+      const u = N.find((l) => l.file.name === n.name && l.file.size === n.size)?.id;
+      u && I.removeFile(u), t?.(n, h);
     },
-    [F, k, t]
+    [N, I, t]
   );
-  return /* @__PURE__ */ p("div", { className: Fe({ className: o }), children: [
-    /* @__PURE__ */ a(K, { ...k, isDragging: M, title: N, description: I }),
-    b.length > 0 && /* @__PURE__ */ a(R, { error: b }),
-    x.length > 0 && /* @__PURE__ */ a("div", { children: x.map((n, m) => {
-      const f = m === 0, d = x.length === 1, u = m === x.length - 1;
-      let h = "";
-      return d ? h = "" : f ? h = "border-b-0 rounded-b-none" : u ? h = "rounded-t-none" : h = "border-b-0 rounded-none", /* @__PURE__ */ a(
-        P,
+  return /* @__PURE__ */ m("div", { className: Ne({ className: o }), children: [
+    /* @__PURE__ */ a(P, { ...I, isDragging: W, title: p, description: k }),
+    x.length > 0 && /* @__PURE__ */ a(H, { error: x }),
+    g.length > 0 && /* @__PURE__ */ a("div", { children: g.map((n, h) => {
+      const u = h === 0, l = g.length === 1, y = h === g.length - 1;
+      let f = "";
+      return l ? f = "" : u ? f = "border-b-0 rounded-b-none" : y ? f = "rounded-t-none" : f = "border-b-0 rounded-none", /* @__PURE__ */ a(
+        Q,
         {
           file: n,
-          onClear: () => g(n, m),
-          className: h,
+          onClear: () => v(n, h),
+          className: f,
           renderIcon: D?.(n),
+          renderDescription: A,
           onDownload: i
         },
-        m
+        h
       );
     }) })
   ] });
 };
-Ne.displayName = "FileUploadCompact";
+ke.displayName = "FileUploadCompact";
 export {
-  ve as FileUpload,
-  G as FileUploadClearButton,
-  Ne as FileUploadCompact,
-  K as FileUploadCompactInputZone,
-  X as FileUploadDropArea,
-  R as FileUploadError,
-  he as FileUploadIcon,
-  $ as FileUploadInlineDropArea,
-  J as FileUploadInputZone,
-  _ as FileUploadItem,
-  P as FileUploadItemCompact
+  Fe as FileUpload,
+  J as FileUploadClearButton,
+  ke as FileUploadCompact,
+  P as FileUploadCompactInputZone,
+  $ as FileUploadDropArea,
+  H as FileUploadError,
+  fe as FileUploadIcon,
+  G as FileUploadInlineDropArea,
+  K as FileUploadInputZone,
+  X as FileUploadItem,
+  Q as FileUploadItemCompact
 };
 //# sourceMappingURL=file-upload.js.map