@trinityui/design-system 2.2.4 → 2.3.0

package/dist/forms.js

@@ -1,22 +1,22 @@
-import { jsxs as f, jsx as e, Fragment as Re } from "react/jsx-runtime";
-import * as O from "react";
-import Fe, { createElement as Oe, useState as ae, useRef as Se, useCallback as S } from "react";
-import { useTheme as Me, Paper as de, Box as C, ListItem as pe, alpha as he, ListItemIcon as re, Checkbox as ge, ListItemText as ue, Divider as ye, Button as me, Autocomplete as Ae, Typography as _, Popper as Be, Chip as Ie, TextField as Ee, Alert as ve, Stack as ze, List as We, LinearProgress as je, ListItemSecondaryAction as Te, IconButton as $e } from "@mui/material";
-import { Check as le, Add as Ue, Close as be } from "@mui/icons-material";
-import ce from "@mui/icons-material/CloudUpload";
+import { jsxs as f, jsx as e, Fragment as Se } from "react/jsx-runtime";
+import * as M from "react";
+import Oe, { createElement as Re, useState as le, useRef as Fe, useCallback as A } from "react";
+import { useTheme as Me, Paper as pe, Box as L, ListItem as ue, alpha as he, ListItemIcon as te, Checkbox as ge, ListItemText as me, Divider as ye, Button as fe, Autocomplete as Ae, Typography as _, Popper as Be, Chip as Ie, TextField as Ee, Alert as ve, Stack as ze, List as We, LinearProgress as je, ListItemSecondaryAction as Te, IconButton as $e } from "@mui/material";
+import { Check as ce, Add as Ue, Close as be } from "@mui/icons-material";
+import de from "@mui/icons-material/CloudUpload";
 import Ve from "@mui/icons-material/InsertDriveFile";
-import _e from "@mui/icons-material/Delete";
+import Ke from "@mui/icons-material/Delete";
 import ke from "@mui/icons-material/CheckCircle";
-import Ge from "@mui/icons-material/Error";
-import Ke from "@mui/icons-material/PictureAsPdf";
-import qe from "@mui/icons-material/Image";
+import _e from "@mui/icons-material/Error";
+import qe from "@mui/icons-material/PictureAsPdf";
+import Ge from "@mui/icons-material/Image";
 import Ne from "@mui/icons-material/VideoLibrary";
 import He from "@mui/icons-material/Description";
 import { s as Ce } from "./app-shell.js";
-const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, Je = (c) => /* @__PURE__ */ e(
+const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, Je = (d) => /* @__PURE__ */ e(
   Be,
   {
-    ...c,
+    ...d,
     placement: "bottom-start",
     modifiers: [
       {
@@ -27,100 +27,110 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
       }
     ]
   }
-), pr = O.forwardRef(function({
-  options: d,
-  value: n,
-  defaultValue: D,
-  onChange: b,
-  creatable: x = !1,
-  onCreate: w,
-  createText: M = 'Create "{value}"',
-  multiple: p = !1,
-  placeholder: X = "Select...",
-  label: G,
-  helperText: a,
-  error: K = !1,
-  errorMessage: te,
-  disabled: Y = !1,
-  fullWidth: U = !1,
-  size: W = "medium",
-  limitTags: q = 3,
-  showCheckbox: j = !0,
-  groupBy: Z = !1,
-  loading: V = !1,
-  noOptionsText: N = "No options",
-  filterOptions: H,
-  renderOption: J,
-  renderTag: T,
+), pr = M.forwardRef(function({
+  options: p,
+  value: s,
+  defaultValue: S,
+  onChange: x,
+  creatable: w = !1,
+  onCreate: I,
+  createText: B = 'Create "{value}"',
+  multiple: u = !1,
+  placeholder: Y = "Select...",
+  label: q,
+  helperText: l,
+  error: G = !1,
+  errorMessage: oe,
+  disabled: Z = !1,
+  fullWidth: V = !1,
+  size: j = "medium",
+  limitTags: N = 3,
+  showCheckbox: T = !0,
+  groupBy: ee = !1,
+  loading: K = !1,
+  noOptionsText: H = "No options",
+  filterOptions: J,
+  renderOption: Q,
+  renderTag: $,
   freeSolo: g = !1,
-  autoHighlight: I = !0,
-  clearOnEscape: oe = !0,
-  showSelectAll: A = !1,
-  selectAllText: ee = "Select All",
-  className: ne,
-  sx: se
+  autoHighlight: C = !0,
+  clearOnEscape: ne = !0,
+  showSelectAll: E = !1,
+  selectAllText: re = "Select All",
+  className: se,
+  sx: ae
 }, ie) {
-  const Q = Me(), [y, $] = O.useState(""), [P, B] = O.useState(
-    D || []
-  ), L = n !== void 0 ? n : P, r = O.useCallback(
+  const X = Me(), [y, U] = M.useState(""), [O, z] = M.useState(
+    S || []
+  ), k = s !== void 0 ? s : O, r = M.useCallback(
     (t, o) => {
-      if (H)
-        return H(t, o);
-      const s = o.inputValue.toLowerCase();
+      if (J)
+        return J(t, o);
+      const n = o.inputValue.toLowerCase();
       return t.filter(
-        (u) => u.label.toLowerCase().includes(s) || u.secondary?.toLowerCase().includes(s)
+        (a) => a.label.toLowerCase().includes(n) || a.secondary?.toLowerCase().includes(n)
       );
     },
-    [H]
-  ), l = O.useMemo(() => !x || !y.trim() ? !1 : !d.some(
-    (o) => o.label.toLowerCase() === y.toLowerCase()
-  ), [x, y, d]), k = async (t, o) => {
-    let s;
-    if (p) {
-      const u = o || [];
-      s = await Promise.all(
-        u.map(async (m) => typeof m == "string" ? x && w ? await w(m) : { id: xe(), label: m } : m)
+    [J]
+  ), c = M.useMemo(() => {
+    if (!w || !y.trim()) return !1;
+    const t = y.trim().toLowerCase(), o = p.some(
+      (a) => a.label.toLowerCase() === t
+    ), n = k.some(
+      (a) => a.label.toLowerCase() === t
+    );
+    return !o && !n;
+  }, [w, y, p, k]), D = async (t, o) => {
+    let n;
+    if (u) {
+      const m = o || [];
+      n = await Promise.all(
+        m.map(async (P) => typeof P == "string" ? w && I ? await I(P) : { id: xe(), label: P } : P)
       );
     } else
-      o === null ? s = [] : typeof o == "string" ? x && w ? s = [await w(o)] : s = [{ id: xe(), label: o }] : s = [o];
-    B(s), b?.(s);
-  }, R = O.useMemo(() => {
-    const t = d.filter((o) => !o.disabled);
+      o === null ? n = [] : typeof o == "string" ? w && I ? n = [await I(o)] : n = [{ id: xe(), label: o }] : n = [o];
+    const a = /* @__PURE__ */ new Set(), b = /* @__PURE__ */ new Set();
+    n = n.filter((m) => {
+      const P = m.label.toLowerCase();
+      return a.has(m.id) || b.has(P) ? !1 : (a.add(m.id), b.add(P), !0);
+    }), z(n), x?.(n);
+  }, R = M.useMemo(() => {
+    const t = p.filter((o) => !o.disabled);
     return t.length > 0 && t.every(
-      (o) => L.some((s) => s.id === o.id)
+      (o) => k.some((n) => n.id === o.id)
     );
-  }, [d, L]), v = O.useCallback(() => {
+  }, [p, k]), v = M.useCallback(() => {
     if (R)
-      B([]), b?.([]);
+      z([]), x?.([]);
     else {
-      const t = d.filter((o) => !o.disabled);
-      B(t), b?.(t);
+      const t = p.filter((o) => !o.disabled);
+      z(t), x?.(t);
     }
-  }, [R, d, b]), h = O.useCallback(async () => {
-    if (!l || !w) return;
-    const t = await w(y), o = p ? [...L, t] : [t];
-    B(o), b?.(o), $("");
-  }, [l, w, y, p, L, b]), E = (t) => /* @__PURE__ */ e(
+  }, [R, p, x]), h = M.useCallback(async () => {
+    if (!c || !I) return;
+    const t = await I(y), o = u ? [...k, t] : [t];
+    z(o), x?.(o), U("");
+  }, [c, I, y, u, k, x]), W = (t) => /* @__PURE__ */ e(
     Ee,
     {
       ...t,
-      label: G,
-      placeholder: L.length === 0 ? X : void 0,
-      error: K,
-      helperText: K ? te : a,
-      size: W
+      label: q,
+      placeholder: k.length === 0 ? Y : void 0,
+      error: G,
+      helperText: G ? oe : l,
+      size: j
     }
   ), F = (t, o) => {
-    const s = o;
-    return (Array.isArray(t) ? t : []).map((m, z) => {
-      const fe = s({ index: z });
-      return T ? T(m, fe.onDelete) : /* @__PURE__ */ Oe(
+    const n = o;
+    return (Array.isArray(t) ? t : []).map((b, m) => {
+      const P = n({ index: m });
+      return $ ? $(b, P.onDelete) : /* @__PURE__ */ Re(
         Ie,
         {
-          ...fe,
-          key: typeof m == "object" ? m.id : z,
-          label: typeof m == "object" ? m.label : String(m),
-          size: W,
+          ...P,
+          key: typeof b == "object" ? b.id : m,
+          label: typeof b == "object" ? b.label : String(b),
+          size: j,
           deleteIcon: /* @__PURE__ */ e(be, { fontSize: "small" }),
           sx: {
             maxWidth: 150,
@@ -132,36 +142,36 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         }
       );
     });
-  }, i = O.useCallback(
+  }, i = M.useCallback(
     (t) => {
-      const { children: o, ...s } = t;
-      return /* @__PURE__ */ f(de, { ...s, elevation: 8, children: [
-        p && A && /* @__PURE__ */ f(
-          C,
+      const { children: o, ...n } = t;
+      return /* @__PURE__ */ f(pe, { ...n, elevation: 8, children: [
+        u && E && /* @__PURE__ */ f(
+          L,
           {
-            onMouseDown: (u) => {
-              u.preventDefault(), u.stopPropagation();
+            onMouseDown: (a) => {
+              a.preventDefault(), a.stopPropagation();
             },
-            onClick: (u) => {
-              u.preventDefault(), u.stopPropagation(), v();
+            onClick: (a) => {
+              a.preventDefault(), a.stopPropagation(), v();
             },
             children: [
               /* @__PURE__ */ f(
-                pe,
+                ue,
                 {
                   dense: !0,
                   sx: {
                     cursor: "pointer",
                     "&:hover": {
-                      backgroundColor: he(Q.palette.primary.main, 0.08)
+                      backgroundColor: he(X.palette.primary.main, 0.08)
                     }
                   },
                   children: [
-                    j && /* @__PURE__ */ e(re, { sx: { minWidth: 36, pointerEvents: "none" }, children: /* @__PURE__ */ e(
+                    T && /* @__PURE__ */ e(te, { sx: { minWidth: 36, pointerEvents: "none" }, children: /* @__PURE__ */ e(
                       ge,
                       {
                         icon: /* @__PURE__ */ e(
-                          C,
+                          L,
                           {
                             sx: {
                               width: 18,
@@ -174,7 +184,7 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                           }
                         ),
                         checkedIcon: /* @__PURE__ */ e(
-                          C,
+                          L,
                           {
                             sx: {
                               width: 18,
@@ -188,7 +198,7 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                               justifyContent: "center"
                             },
                             children: /* @__PURE__ */ e(
-                              le,
+                              ce,
                               {
                                 sx: {
                                   width: 14,
@@ -206,9 +216,9 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                       }
                     ) }),
                     /* @__PURE__ */ e(
-                      ue,
+                      me,
                       {
-                        primary: R ? "Deselect All" : ee,
+                        primary: R ? "Deselect All" : re,
                         slotProps: { primary: {
                           variant: "body2",
                           sx: { fontWeight: 500 }
@@ -223,13 +233,16 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
           }
         ),
         o,
-        l && /* @__PURE__ */ f(Re, { children: [
+        c && /* @__PURE__ */ f(Se, { children: [
           /* @__PURE__ */ e(ye, {}),
           /* @__PURE__ */ e(
-            me,
+            fe,
             {
               fullWidth: !0,
               startIcon: /* @__PURE__ */ e(Ue, {}),
+              onMouseDown: (a) => {
+                a.preventDefault();
+              },
               onClick: h,
               sx: {
                 justifyContent: "flex-start",
@@ -239,109 +252,109 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
                 color: "primary.main",
                 borderRadius: 0,
                 "&:hover": {
-                  backgroundColor: he(Q.palette.primary.main, 0.08)
+                  backgroundColor: he(X.palette.primary.main, 0.08)
                 }
               },
-              children: M.replace("{value}", y)
+              children: B.replace("{value}", y)
             }
           )
         ] })
       ] });
     },
-    [l, M, y, Q.palette.primary.main, h, p, A, j, v, R, ee]
-  ), Le = d;
+    [c, B, y, X.palette.primary.main, h, u, E, T, v, R, re]
+  ), Le = p;
   return /* @__PURE__ */ e(
     Ae,
     {
       ref: ie,
-      className: ne,
-      sx: { width: U ? "100%" : 300, ...se },
-      multiple: p,
+      className: se,
+      sx: { width: V ? "100%" : 300, ...ae },
+      multiple: u,
       options: Le,
-      value: p ? L : L[0] || null,
-      onChange: k,
+      value: u ? k : k[0] || null,
+      onChange: D,
       inputValue: y,
-      onInputChange: (t, o) => $(o),
+      onInputChange: (t, o) => U(o),
       getOptionLabel: (t) => typeof t == "string" ? t : t.label,
       isOptionEqualToValue: (t, o) => t.id === o.id,
       getOptionDisabled: (t) => typeof t == "object" && t.disabled === !0,
-      groupBy: Z ? (t) => t.group || "" : void 0,
+      groupBy: ee ? (t) => t.group || "" : void 0,
       filterOptions: r,
-      renderInput: E,
-      renderValue: p ? F : void 0,
-      renderOption: (t, o, { selected: s }) => {
-        const { key: u, ...m } = t, z = o;
-        return J ? /* @__PURE__ */ e("li", { ...m, children: J(z, { selected: s }) }, u) : /* @__PURE__ */ f(pe, { ...m, dense: !0, children: [
-          p && j && /* @__PURE__ */ e(re, { sx: { minWidth: 36 }, children: /* @__PURE__ */ e(
+      renderInput: W,
+      renderValue: u ? F : void 0,
+      renderOption: (t, o, { selected: n }) => {
+        const { key: a, ...b } = t, m = o;
+        return Q ? /* @__PURE__ */ e("li", { ...b, children: Q(m, { selected: n }) }, a) : /* @__PURE__ */ f(ue, { ...b, dense: !0, children: [
+          u && T && /* @__PURE__ */ e(te, { sx: { minWidth: 36 }, children: /* @__PURE__ */ e(
             ge,
             {
-              icon: /* @__PURE__ */ e(C, { sx: { width: 18, height: 18, border: "2px solid", borderColor: "action.active", borderRadius: 0.5, backgroundColor: "transparent" } }),
-              checkedIcon: /* @__PURE__ */ e(C, { sx: { width: 18, height: 18, border: "2px solid", borderColor: "primary.main", borderRadius: 0.5, backgroundColor: "primary.main", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ e(le, { sx: { width: 14, height: 14, color: "primary.contrastText" } }) }),
-              checked: s,
+              icon: /* @__PURE__ */ e(L, { sx: { width: 18, height: 18, border: "2px solid", borderColor: "action.active", borderRadius: 0.5, backgroundColor: "transparent" } }),
+              checkedIcon: /* @__PURE__ */ e(L, { sx: { width: 18, height: 18, border: "2px solid", borderColor: "primary.main", borderRadius: 0.5, backgroundColor: "primary.main", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ e(ce, { sx: { width: 14, height: 14, color: "primary.contrastText" } }) }),
+              checked: n,
               size: "small"
             }
           ) }),
-          z.icon && /* @__PURE__ */ e(re, { sx: { minWidth: 36 }, children: z.icon }),
+          m.icon && /* @__PURE__ */ e(te, { sx: { minWidth: 36 }, children: m.icon }),
           /* @__PURE__ */ e(
-            ue,
+            me,
             {
-              primary: z.label,
-              secondary: z.secondary,
+              primary: m.label,
+              secondary: m.secondary,
               slotProps: { primary: { variant: "body2" }, secondary: { variant: "caption" } }
             }
           ),
-          !p && s && /* @__PURE__ */ e(le, { sx: { ml: 1, color: "primary.main" }, fontSize: "small" })
-        ] }, u);
+          !u && n && /* @__PURE__ */ e(ce, { sx: { ml: 1, color: "primary.main" }, fontSize: "small" })
+        ] }, a);
       },
       slots: {
-        paper: x || p && A ? i : de,
+        paper: w || u && E ? i : pe,
         popper: Je
       },
-      limitTags: q,
-      disabled: Y,
-      loading: V,
-      noOptionsText: l ? /* @__PURE__ */ e(_, { variant: "body2", color: "text.secondary", children: "Press Enter or click below to create" }) : N,
-      freeSolo: g || x,
-      autoHighlight: I,
-      clearOnEscape: oe,
-      disableCloseOnSelect: p,
-      slotProps: { chip: { size: W, deleteIcon: /* @__PURE__ */ e(be, { fontSize: "small" }) } }
+      limitTags: N,
+      disabled: Z,
+      loading: K,
+      noOptionsText: c ? /* @__PURE__ */ e(_, { variant: "body2", color: "text.secondary", children: "Press Enter or click below to create" }) : H,
+      freeSolo: g || w,
+      autoHighlight: C,
+      clearOnEscape: ne,
+      disableCloseOnSelect: u,
+      slotProps: { chip: { size: j, deleteIcon: /* @__PURE__ */ e(be, { fontSize: "small" }) } }
     }
   );
-}), De = (c) => {
-  if (c === 0) return "0 Bytes";
-  const d = 1024, n = ["Bytes", "KB", "MB", "GB"], D = Math.floor(Math.log(c) / Math.log(d));
-  return parseFloat((c / Math.pow(d, D)).toFixed(2)) + " " + n[D];
-}, Pe = (c) => c.startsWith("image/") ? /* @__PURE__ */ e(qe, {}) : c.startsWith("video/") ? /* @__PURE__ */ e(Ne, {}) : c === "application/pdf" ? /* @__PURE__ */ e(Ke, {}) : c.includes("document") || c.includes("text") ? /* @__PURE__ */ e(He, {}) : /* @__PURE__ */ e(Ve, {}), Qe = () => `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, ur = Fe.forwardRef(function({
-  variant: d = "dropzone",
-  accept: n,
-  multiple: D = !1,
-  maxSize: b,
-  maxFiles: x,
-  files: w,
-  onFilesChange: M,
-  onFileSelect: p,
-  onFileRemove: X,
-  onUpload: G,
-  disabled: a = !1,
-  helperText: K,
-  error: te,
-  showFileList: Y = !0,
-  size: U = "medium",
-  sx: W
-}, q) {
-  const [j, Z] = ae([]), [V, N] = ae(!1), [H, J] = ae(null), T = Se(null), g = w ?? j, I = S((r) => {
-    typeof r == "function" ? M ? M(r(w ?? j)) : Z(r) : M ? M(r) : Z(r);
-  }, [w, j, M]), oe = (r) => b && r.size > b ? `File "${r.name}" exceeds maximum size of ${De(b)}` : x && g.length >= x ? `Maximum ${x} files allowed` : null, A = S(
+}), De = (d) => {
+  if (d === 0) return "0 Bytes";
+  const p = 1024, s = ["Bytes", "KB", "MB", "GB"], S = Math.floor(Math.log(d) / Math.log(p));
+  return parseFloat((d / Math.pow(p, S)).toFixed(2)) + " " + s[S];
+}, Pe = (d) => d.startsWith("image/") ? /* @__PURE__ */ e(Ge, {}) : d.startsWith("video/") ? /* @__PURE__ */ e(Ne, {}) : d === "application/pdf" ? /* @__PURE__ */ e(qe, {}) : d.includes("document") || d.includes("text") ? /* @__PURE__ */ e(He, {}) : /* @__PURE__ */ e(Ve, {}), Qe = () => `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, ur = Oe.forwardRef(function({
+  variant: p = "dropzone",
+  accept: s,
+  multiple: S = !1,
+  maxSize: x,
+  maxFiles: w,
+  files: I,
+  onFilesChange: B,
+  onFileSelect: u,
+  onFileRemove: Y,
+  onUpload: q,
+  disabled: l = !1,
+  helperText: G,
+  error: oe,
+  showFileList: Z = !0,
+  size: V = "medium",
+  sx: j
+}, N) {
+  const [T, ee] = le([]), [K, H] = le(!1), [J, Q] = le(null), $ = Fe(null), g = I ?? T, C = A((r) => {
+    typeof r == "function" ? B ? B(r(I ?? T)) : ee(r) : B ? B(r) : ee(r);
+  }, [I, T, B]), ne = (r) => x && r.size > x ? `File "${r.name}" exceeds maximum size of ${De(x)}` : w && g.length >= w ? `Maximum ${w} files allowed` : null, E = A(
     async (r) => {
-      const l = Array.from(r), k = [], R = [];
-      for (const v of l) {
-        const h = oe(v);
+      const c = Array.from(r), D = [], R = [];
+      for (const v of c) {
+        const h = ne(v);
         if (h) {
           R.push(h);
           continue;
         }
-        const E = {
+        const W = {
           id: Qe(),
           file: v,
           name: v.name,
@@ -351,166 +364,166 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
           status: "pending",
           preview: v.type.startsWith("image/") ? URL.createObjectURL(v) : void 0
         };
-        k.push(E);
+        D.push(W);
       }
-      if (R.length > 0 ? J(R[0]) : J(null), k.length > 0) {
-        const v = D ? [...g, ...k] : k;
-        if (I(v), p?.(k.map((h) => h.file)), G)
-          for (const h of k)
+      if (R.length > 0 ? Q(R[0]) : Q(null), D.length > 0) {
+        const v = S ? [...g, ...D] : D;
+        if (C(v), u?.(D.map((h) => h.file)), q)
+          for (const h of D)
             try {
-              I(
+              C(
                 (F) => F.map(
                   (i) => i.id === h.id ? { ...i, status: "uploading" } : i
                 )
               );
-              const E = setInterval(() => {
-                I(
+              const W = setInterval(() => {
+                C(
                   (F) => F.map(
                     (i) => i.id === h.id && i.progress < 90 ? { ...i, progress: i.progress + 10 } : i
                   )
                 );
               }, 200);
-              await G(h.file), clearInterval(E), I(
+              await q(h.file), clearInterval(W), C(
                 (F) => F.map(
                   (i) => i.id === h.id ? { ...i, status: "complete", progress: 100 } : i
                 )
               );
-            } catch (E) {
-              I(
+            } catch (W) {
+              C(
                 (F) => F.map(
                   (i) => i.id === h.id ? {
                     ...i,
                     status: "error",
-                    error: E instanceof Error ? E.message : "Upload failed"
+                    error: W instanceof Error ? W.message : "Upload failed"
                   } : i
                 )
               );
             }
       }
     },
-    [g, I, b, x, D, p, G]
-  ), ee = S((r) => {
-    r.preventDefault(), r.stopPropagation(), a || N(!0);
-  }, [a]), ne = S((r) => {
-    r.preventDefault(), r.stopPropagation(), N(!1);
-  }, []), se = S((r) => {
+    [g, C, x, w, S, u, q]
+  ), re = A((r) => {
+    r.preventDefault(), r.stopPropagation(), l || H(!0);
+  }, [l]), se = A((r) => {
+    r.preventDefault(), r.stopPropagation(), H(!1);
+  }, []), ae = A((r) => {
     r.preventDefault(), r.stopPropagation();
-  }, []), ie = S(
+  }, []), ie = A(
     (r) => {
-      if (r.preventDefault(), r.stopPropagation(), N(!1), a) return;
-      const l = r.dataTransfer.files;
-      l.length > 0 && A(l);
+      if (r.preventDefault(), r.stopPropagation(), H(!1), l) return;
+      const c = r.dataTransfer.files;
+      c.length > 0 && E(c);
     },
-    [a, A]
-  ), Q = S(
+    [l, E]
+  ), X = A(
     (r) => {
-      const l = r.target.files;
-      l && l.length > 0 && A(l), T.current && (T.current.value = "");
+      const c = r.target.files;
+      c && c.length > 0 && E(c), $.current && ($.current.value = "");
     },
-    [A]
-  ), y = S(
+    [E]
+  ), y = A(
     (r) => {
       r.preview && URL.revokeObjectURL(r.preview);
-      const l = g.filter((k) => k.id !== r.id);
-      I(l), X?.(r);
+      const c = g.filter((D) => D.id !== r.id);
+      C(c), Y?.(r);
     },
-    [g, I, X]
-  ), $ = () => {
-    T.current?.click();
-  }, P = te || H, B = /* @__PURE__ */ e(
+    [g, C, Y]
+  ), U = () => {
+    $.current?.click();
+  }, O = oe || J, z = /* @__PURE__ */ e(
     "input",
     {
-      ref: T,
+      ref: $,
       type: "file",
-      accept: n,
-      multiple: D,
-      onChange: Q,
+      accept: s,
+      multiple: S,
+      onChange: X,
       style: { display: "none" },
-      disabled: a
+      disabled: l
     }
-  ), L = S(
+  ), k = A(
     (r) => {
-      (r.key === "Enter" || r.key === " ") && !a && (r.preventDefault(), $());
+      (r.key === "Enter" || r.key === " ") && !l && (r.preventDefault(), U());
     },
-    [a]
+    [l]
   );
-  return d === "dropzone" ? /* @__PURE__ */ f(C, { ref: q, sx: W, children: [
-    B,
+  return p === "dropzone" ? /* @__PURE__ */ f(L, { ref: N, sx: j, children: [
+    z,
     /* @__PURE__ */ f(
-      de,
+      pe,
       {
         role: "button",
-        tabIndex: a ? -1 : 0,
-        "aria-label": `Upload files${n ? `. Accepted formats: ${n}` : ""}. Drag and drop or press Enter to browse`,
-        "aria-disabled": a,
-        onDragEnter: ee,
-        onDragLeave: ne,
-        onDragOver: se,
+        tabIndex: l ? -1 : 0,
+        "aria-label": `Upload files${s ? `. Accepted formats: ${s}` : ""}. Drag and drop or press Enter to browse`,
+        "aria-disabled": l,
+        onDragEnter: re,
+        onDragLeave: se,
+        onDragOver: ae,
         onDrop: ie,
-        onClick: $,
-        onKeyDown: L,
+        onClick: U,
+        onKeyDown: k,
         sx: {
-          p: U === "small" ? 3 : 4,
+          p: V === "small" ? 3 : 4,
           border: "2px dashed",
-          borderColor: P ? "error.main" : V ? "primary.main" : "divider",
+          borderColor: O ? "error.main" : K ? "primary.main" : "divider",
           borderRadius: Ce.borders.radiusPx.lg,
-          bgcolor: V ? "action.hover" : a ? "action.disabledBackground" : "background.paper",
+          bgcolor: K ? "action.hover" : l ? "action.disabledBackground" : "background.paper",
           textAlign: "center",
-          cursor: a ? "not-allowed" : "pointer",
+          cursor: l ? "not-allowed" : "pointer",
           transition: "all 0.2s ease",
           "&:hover": {
-            bgcolor: a ? void 0 : "action.hover",
-            borderColor: a ? void 0 : "primary.main"
+            bgcolor: l ? void 0 : "action.hover",
+            borderColor: l ? void 0 : "primary.main"
           }
         },
         children: [
           /* @__PURE__ */ e(
-            ce,
+            de,
             {
               sx: {
-                fontSize: U === "small" ? 40 : 56,
-                color: V ? "primary.main" : "action.active",
+                fontSize: V === "small" ? 40 : 56,
+                color: K ? "primary.main" : "action.active",
                 mb: 2
               }
             }
           ),
-          /* @__PURE__ */ e(_, { variant: U === "small" ? "body1" : "h6", gutterBottom: !0, children: V ? "Drop files here" : "Drag & drop files here" }),
+          /* @__PURE__ */ e(_, { variant: V === "small" ? "body1" : "h6", gutterBottom: !0, children: K ? "Drop files here" : "Drag & drop files here" }),
           /* @__PURE__ */ e(_, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: "or click to browse" }),
-          K && /* @__PURE__ */ e(_, { variant: "caption", color: "text.secondary", children: K })
+          G && /* @__PURE__ */ e(_, { variant: "caption", color: "text.secondary", children: G })
         ]
       }
     ),
-    P && /* @__PURE__ */ e(ve, { severity: "error", sx: { mt: 2 }, children: P }),
-    Y && g.length > 0 && /* @__PURE__ */ e(we, { files: g, onRemove: y })
-  ] }) : d === "button" ? /* @__PURE__ */ f(C, { ref: q, sx: W, children: [
-    B,
+    O && /* @__PURE__ */ e(ve, { severity: "error", sx: { mt: 2 }, children: O }),
+    Z && g.length > 0 && /* @__PURE__ */ e(we, { files: g, onRemove: y })
+  ] }) : p === "button" ? /* @__PURE__ */ f(L, { ref: N, sx: j, children: [
+    z,
     /* @__PURE__ */ f(
-      me,
+      fe,
       {
         variant: "contained",
-        startIcon: /* @__PURE__ */ e(ce, {}),
-        onClick: $,
-        disabled: a,
-        size: U,
+        startIcon: /* @__PURE__ */ e(de, {}),
+        onClick: U,
+        disabled: l,
+        size: V,
         children: [
           "Upload ",
-          D ? "Files" : "File"
+          S ? "Files" : "File"
         ]
       }
     ),
-    P && /* @__PURE__ */ e(ve, { severity: "error", sx: { mt: 2 }, children: P }),
-    Y && g.length > 0 && /* @__PURE__ */ e(we, { files: g, onRemove: y })
-  ] }) : /* @__PURE__ */ f(C, { ref: q, sx: W, children: [
-    B,
+    O && /* @__PURE__ */ e(ve, { severity: "error", sx: { mt: 2 }, children: O }),
+    Z && g.length > 0 && /* @__PURE__ */ e(we, { files: g, onRemove: y })
+  ] }) : /* @__PURE__ */ f(L, { ref: N, sx: j, children: [
+    z,
     /* @__PURE__ */ f(ze, { direction: "row", spacing: 1, useFlexGap: !0, sx: { alignItems: "center", flexWrap: "wrap" }, children: [
       /* @__PURE__ */ e(
-        me,
+        fe,
         {
           variant: "outlined",
           size: "small",
-          startIcon: /* @__PURE__ */ e(ce, {}),
-          onClick: $,
-          disabled: a,
+          startIcon: /* @__PURE__ */ e(de, {}),
+          onClick: U,
+          disabled: l,
           children: "Browse"
         }
       ),
@@ -533,29 +546,29 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
         r.id
       ))
     ] }),
-    P && /* @__PURE__ */ e(_, { variant: "caption", color: "error", sx: { mt: 0.5, display: "block" }, children: P })
+    O && /* @__PURE__ */ e(_, { variant: "caption", color: "error", sx: { mt: 0.5, display: "block" }, children: O })
   ] });
-}), we = ({ files: c, onRemove: d }) => /* @__PURE__ */ e(We, { dense: !0, sx: { mt: 2 }, children: c.map((n) => /* @__PURE__ */ f(
-  pe,
+}), we = ({ files: d, onRemove: p }) => /* @__PURE__ */ e(We, { dense: !0, sx: { mt: 2 }, children: d.map((s) => /* @__PURE__ */ f(
+  ue,
   {
     sx: {
       bgcolor: "background.paper",
       borderRadius: Ce.borders.radiusPx.md,
       mb: 1,
       border: "1px solid",
-      borderColor: n.status === "error" ? "error.light" : "divider"
+      borderColor: s.status === "error" ? "error.light" : "divider"
     },
     children: [
-      /* @__PURE__ */ e(re, { children: n.status === "complete" ? /* @__PURE__ */ e(ke, { color: "success" }) : n.status === "error" ? /* @__PURE__ */ e(Ge, { color: "error" }) : Pe(n.type) }),
+      /* @__PURE__ */ e(te, { children: s.status === "complete" ? /* @__PURE__ */ e(ke, { color: "success" }) : s.status === "error" ? /* @__PURE__ */ e(_e, { color: "error" }) : Pe(s.type) }),
       /* @__PURE__ */ e(
-        ue,
+        me,
         {
-          primary: n.name,
-          secondary: /* @__PURE__ */ f(C, { component: "span", children: [
-            De(n.size),
-            n.error && /* @__PURE__ */ f(_, { component: "span", color: "error", sx: { ml: 1 }, children: [
+          primary: s.name,
+          secondary: /* @__PURE__ */ f(L, { component: "span", children: [
+            De(s.size),
+            s.error && /* @__PURE__ */ f(_, { component: "span", color: "error", sx: { ml: 1 }, children: [
               "• ",
-              n.error
+              s.error
             ] })
           ] }),
           sx: {
@@ -567,11 +580,11 @@ const xe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
           }
         }
       ),
-      n.status === "uploading" && /* @__PURE__ */ e(C, { sx: { width: 100, mr: 2 }, children: /* @__PURE__ */ e(je, { variant: "determinate", value: n.progress }) }),
-      /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e($e, { edge: "end", onClick: () => d(n), size: "small", children: /* @__PURE__ */ e(_e, { fontSize: "small" }) }) })
+      s.status === "uploading" && /* @__PURE__ */ e(L, { sx: { width: 100, mr: 2 }, children: /* @__PURE__ */ e(je, { variant: "determinate", value: s.progress }) }),
+      /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e($e, { edge: "end", onClick: () => p(s), size: "small", children: /* @__PURE__ */ e(Ke, { fontSize: "small" }) }) })
     ]
   },
-  n.id
+  s.id
 )) });
 export {
   pr as C,