@trinityui/design-system 2.1.4 → 2.2.3

package/dist/Legend.js

@@ -1,124 +1,125 @@
-import { jsxs as f, jsx as e, Fragment as te } from "react/jsx-runtime";
-import Z, { useState as O, useCallback as S, useRef as re, createContext as oe, useContext as ne } from "react";
-import { useTheme as le, Dialog as ce, DialogTitle as ae, Box as v, Typography as k, IconButton as se, DialogContent as de, DialogContentText as he, DialogActions as ge, Button as B, CircularProgress as fe, Portal as ue, Snackbar as pe, Alert as xe, AlertTitle as ye, Slide as me, Fade as we, Grow as be, Stack as z, Link as G, Badge as ke, Chip as ve } from "@mui/material";
-import Se from "@mui/icons-material/Close";
-import Le from "@mui/icons-material/CheckCircle";
-import Ce from "@mui/icons-material/Error";
-import We from "@mui/icons-material/Warning";
-import Ie from "@mui/icons-material/Info";
-import ze from "@mui/icons-material/HelpOutline";
-import { s as L, b as h, I as T } from "./app-shell.js";
-function De(t) {
-  const r = t.palette.trinity;
+import { jsxs as f, jsx as e, Fragment as re } from "react/jsx-runtime";
+import D, { useState as O, useCallback as W, useRef as oe, createContext as ne, useContext as le } from "react";
+import { useTheme as ce, Dialog as ae, DialogTitle as se, Box as C, Typography as S, IconButton as de, DialogContent as he, DialogContentText as ge, DialogActions as fe, Button as T, CircularProgress as ue, Portal as pe, Snackbar as xe, Alert as ye, AlertTitle as me, Slide as we, Fade as be, Grow as ke, Stack as P, Link as U, Badge as ve, Chip as Se } from "@mui/material";
+import Le from "@mui/icons-material/Close";
+import Ce from "@mui/icons-material/CheckCircle";
+import We from "@mui/icons-material/Error";
+import Ie from "@mui/icons-material/Warning";
+import ze from "@mui/icons-material/Info";
+import De from "@mui/icons-material/HelpOutlined";
+import { s as I, b as d, I as E } from "./app-shell.js";
+function Me(r) {
+  const i = r.palette.trinity;
   return {
     default: {
       icon: null,
-      color: r.interactive.default,
+      color: i.interactive.default,
       primaryColor: "primary"
     },
     info: {
-      icon: /* @__PURE__ */ e(Ie, {}),
-      color: r.status.info.text,
+      icon: /* @__PURE__ */ e(ze, {}),
+      color: i.status.info.text,
       primaryColor: "info"
     },
     success: {
-      icon: /* @__PURE__ */ e(Le, {}),
-      color: r.status.success.text,
+      icon: /* @__PURE__ */ e(Ce, {}),
+      color: i.status.success.text,
       primaryColor: "success"
     },
     warning: {
-      icon: /* @__PURE__ */ e(We, {}),
-      color: r.status.warning.text,
+      icon: /* @__PURE__ */ e(Ie, {}),
+      color: i.status.warning.text,
       primaryColor: "warning"
     },
     danger: {
-      icon: /* @__PURE__ */ e(Ce, {}),
-      color: r.status.error.text,
+      icon: /* @__PURE__ */ e(We, {}),
+      color: i.status.error.text,
       primaryColor: "error"
     },
     confirm: {
-      icon: /* @__PURE__ */ e(ze, {}),
-      color: r.interactive.default,
+      icon: /* @__PURE__ */ e(De, {}),
+      color: i.interactive.default,
       primaryColor: "primary"
     }
   };
 }
-const Me = ({
-  open: t,
-  onClose: r,
-  title: i,
-  children: o,
-  variant: c = "default",
+const Pe = D.forwardRef(function({
+  open: i,
+  onClose: t,
+  title: o,
+  children: n,
+  variant: l = "default",
   primaryAction: a,
-  onPrimaryAction: l,
-  secondaryAction: d = "Cancel",
-  onSecondaryAction: g,
-  loading: u = !1,
-  primaryDisabled: s = !1,
-  showCloseButton: b = !0,
-  disableBackdropClick: C = !1,
-  disableEscapeKeyDown: I = !1,
-  maxWidth: y = "sm",
-  fullWidth: D = !0,
-  fullScreenMobile: M = !1,
+  onPrimaryAction: s,
+  secondaryAction: g = "Cancel",
+  onSecondaryAction: x,
+  loading: p = !1,
+  primaryDisabled: v = !1,
+  showCloseButton: w = !0,
+  disableBackdropClick: h = !1,
+  disableEscapeKeyDown: L = !1,
+  maxWidth: z = "sm",
+  fullWidth: m = !0,
+  fullScreenMobile: F = !1,
   footer: Q,
-  hideFooter: j = !1,
-  sx: p
-}) => {
-  const x = le(), [m, E] = O(!1), F = De(x)[c], Y = (R, N) => {
-    N === "backdropClick" && C || N === "escapeKeyDown" && I || r();
-  }, ee = async () => {
-    if (l) {
-      const R = l();
-      if (R instanceof Promise) {
-        E(!0);
+  hideFooter: u = !1,
+  sx: y
+}, b) {
+  const j = ce(), [$, _] = O(!1), R = Me(j)[l], ee = (Z, G) => {
+    G === "backdropClick" && h || G === "escapeKeyDown" && L || t();
+  }, ie = async () => {
+    if (s) {
+      const Z = s();
+      if (Z instanceof Promise) {
+        _(!0);
         try {
-          await R;
+          await Z;
         } finally {
-          E(!1);
+          _(!1);
         }
       }
     }
-  }, ie = () => {
-    g?.(), r();
-  }, V = u || m, _ = Z.useId(), A = Z.useId();
+  }, te = () => {
+    x?.(), t();
+  }, V = p || $, A = D.useId(), N = D.useId();
   return /* @__PURE__ */ f(
-    ce,
+    ae,
     {
-      open: t,
-      onClose: Y,
-      maxWidth: y,
-      fullWidth: D,
-      fullScreen: M ? void 0 : !1,
-      "aria-labelledby": i ? _ : void 0,
-      "aria-describedby": o ? A : void 0,
+      ref: b,
+      open: i,
+      onClose: ee,
+      maxWidth: z,
+      fullWidth: m,
+      fullScreen: F ? void 0 : !1,
+      "aria-labelledby": o ? A : void 0,
+      "aria-describedby": n ? N : void 0,
       sx: {
         "& .MuiDialog-paper": {
-          borderRadius: L.borders.radiusPx.lg,
+          borderRadius: I.borders.radiusPx.lg,
           // 12px
-          ...p
+          ...y
         }
       },
       children: [
-        (i || b) && /* @__PURE__ */ f(
-          ae,
+        (o || w) && /* @__PURE__ */ f(
+          se,
           {
-            id: _,
+            id: A,
             sx: {
               display: "flex",
               alignItems: "center",
               gap: 1.5,
-              pr: b ? 6 : 3
+              pr: w ? 6 : 3
             },
             children: [
-              F.icon && /* @__PURE__ */ e(
-                v,
+              R.icon && /* @__PURE__ */ e(
+                C,
                 {
                   sx: {
-                    width: L.iconSize.display + 4,
+                    width: I.iconSize.display + 4,
                     // 40px - prominent icon with frame
-                    height: L.iconSize.display + 4,
-                    borderRadius: `${L.borders.radius.circle}px`,
+                    height: I.iconSize.display + 4,
+                    borderRadius: `${I.borders.radius.circle}px`,
                     // Perfect circle
                     bgcolor: "action.selected",
                     // Theme-aware 12% overlay
@@ -126,19 +127,19 @@ const Me = ({
                     alignItems: "center",
                     justifyContent: "center",
                     "& .MuiSvgIcon-root": {
-                      color: F.color,
-                      fontSize: L.iconSize.prominent
+                      color: R.color,
+                      fontSize: I.iconSize.prominent
                       // 24px
                     }
                   },
-                  children: F.icon
+                  children: R.icon
                 }
               ),
-              /* @__PURE__ */ e(k, { variant: "h6", component: "span", fontWeight: 600, children: i }),
-              b && /* @__PURE__ */ e(
-                se,
+              /* @__PURE__ */ e(S, { variant: "h6", component: "span", sx: { fontWeight: 600 }, children: o }),
+              w && /* @__PURE__ */ e(
+                de,
                 {
-                  onClick: r,
+                  onClick: t,
                   disabled: V,
                   "aria-label": "Close dialog",
                   sx: {
@@ -147,31 +148,31 @@ const Me = ({
                     top: 8,
                     color: "text.secondary"
                   },
-                  children: /* @__PURE__ */ e(Se, {})
+                  children: /* @__PURE__ */ e(Le, {})
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(de, { id: A, dividers: c === "default", children: typeof o == "string" ? /* @__PURE__ */ e(he, { children: o }) : o }),
-        !j && /* @__PURE__ */ e(ge, { sx: { px: 3, py: 2 }, children: Q || /* @__PURE__ */ f(te, { children: [
-          d && /* @__PURE__ */ e(
-            B,
+        /* @__PURE__ */ e(he, { id: N, dividers: l === "default", children: typeof n == "string" ? /* @__PURE__ */ e(ge, { children: n }) : n }),
+        !u && /* @__PURE__ */ e(fe, { sx: { px: 3, py: 2 }, children: Q || /* @__PURE__ */ f(re, { children: [
+          g && /* @__PURE__ */ e(
+            T,
             {
-              onClick: ie,
+              onClick: te,
               disabled: V,
               color: "inherit",
-              children: d
+              children: g
             }
           ),
           a && /* @__PURE__ */ e(
-            B,
+            T,
             {
-              onClick: ee,
-              disabled: s || V,
+              onClick: ie,
+              disabled: v || V,
               variant: "contained",
-              color: F.primaryColor,
-              startIcon: V ? /* @__PURE__ */ e(fe, { size: 16, color: "inherit" }) : void 0,
+              color: R.primaryColor,
+              startIcon: V ? /* @__PURE__ */ e(ue, { size: 16, color: "inherit" }) : void 0,
               children: a
             }
           )
@@ -179,31 +180,31 @@ const Me = ({
       ]
     }
   );
-}, ki = ({
-  open: t,
-  onClose: r,
-  onConfirm: i,
+}), Si = ({
+  open: r,
+  onClose: i,
+  onConfirm: t,
   title: o = "Confirm Action",
-  message: c = "Are you sure you want to proceed?",
-  confirmLabel: a = "Confirm",
-  cancelLabel: l = "Cancel",
-  variant: d = "default",
+  message: n = "Are you sure you want to proceed?",
+  confirmLabel: l = "Confirm",
+  cancelLabel: a = "Cancel",
+  variant: s = "default",
   loading: g = !1
 }) => /* @__PURE__ */ e(
-  Me,
+  Pe,
   {
-    open: t,
-    onClose: r,
+    open: r,
+    onClose: i,
     title: o,
-    variant: d === "default" ? "confirm" : d,
-    primaryAction: a,
-    onPrimaryAction: i,
-    secondaryAction: l,
+    variant: s === "default" ? "confirm" : s,
+    primaryAction: l,
+    onPrimaryAction: t,
+    secondaryAction: a,
     loading: g,
     maxWidth: "xs",
-    children: /* @__PURE__ */ e(k, { color: "text.secondary", children: c })
+    children: /* @__PURE__ */ e(S, { color: "text.secondary", children: n })
   }
-), U = {
+), H = {
   isOpen: !1,
   title: "Confirm Action",
   message: "Are you sure you want to proceed?",
@@ -211,65 +212,66 @@ const Me = ({
   confirmLabel: "Confirm",
   onConfirm: () => {
   }
-}, vi = () => {
-  const [t, r] = O(U), i = S(
-    (c) => {
-      r({
-        ...U,
-        ...c,
+}, Li = () => {
+  const [r, i] = O(H), t = W(
+    (n) => {
+      i({
+        ...H,
+        ...n,
         isOpen: !0
       });
     },
     []
-  ), o = S(() => {
-    r((c) => ({ ...c, isOpen: !1 }));
+  ), o = W(() => {
+    i((n) => ({ ...n, isOpen: !1 }));
   }, []);
-  return { confirm: i, close: o, state: t };
-}, q = oe(null), H = (t) => /* @__PURE__ */ e(me, { ...t, direction: "left" }), Pe = (t) => /* @__PURE__ */ e(be, { ...t }), Be = (t) => /* @__PURE__ */ e(we, { ...t }), Te = (t) => {
-  const [r, i] = t.split("-");
-  return { vertical: r, horizontal: i };
-}, Ee = (t) => {
-  switch (t) {
+  return { confirm: t, close: o, state: r };
+}, J = ne(null), q = (r) => /* @__PURE__ */ e(we, { ...r, direction: "left" }), Be = (r) => /* @__PURE__ */ e(ke, { ...r }), Te = (r) => /* @__PURE__ */ e(be, { ...r }), Ee = (r) => {
+  const [i, t] = r.split("-");
+  return { vertical: i, horizontal: t };
+}, $e = (r) => {
+  switch (r) {
     case "slide":
-      return H;
+      return q;
     case "grow":
-      return Pe;
-    case "fade":
       return Be;
+    case "fade":
+      return Te;
     default:
-      return H;
+      return q;
   }
-}, $e = ({
-  id: t,
-  message: r,
-  title: i,
-  severity: o = "info",
-  duration: c = 5e3,
+}, Re = D.forwardRef(function({
+  id: i,
+  message: t,
+  title: o,
+  severity: n = "info",
+  duration: l = 5e3,
   action: a,
-  onAction: l,
-  position: d = "top-right",
-  transition: g = "slide",
-  dismissible: u = !0,
-  open: s,
-  onClose: b
-}) => {
-  const C = Te(d), I = Ee(g);
+  onAction: s,
+  position: g = "top-right",
+  transition: x = "slide",
+  dismissible: p = !0,
+  open: v,
+  onClose: w
+}, h) {
+  const L = Ee(g), z = $e(x);
   return /* @__PURE__ */ e(
-    pe,
+    xe,
     {
-      open: s,
-      autoHideDuration: c,
-      onClose: b,
-      anchorOrigin: C,
-      TransitionComponent: I,
+      ref: h,
+      open: v,
+      autoHideDuration: l,
+      onClose: w,
+      anchorOrigin: L,
+      slots: { transition: z },
       children: /* @__PURE__ */ f(
-        xe,
+        ye,
         {
-          severity: o,
+          severity: n,
           variant: "filled",
-          onClose: u ? b : void 0,
-          action: a ? /* @__PURE__ */ e(B, { color: "inherit", size: "small", onClick: () => {
-            l?.(), b();
+          onClose: p ? w : void 0,
+          action: a ? /* @__PURE__ */ e(T, { color: "inherit", size: "small", onClick: () => {
+            s?.(), w();
           }, children: a }) : void 0,
           sx: {
             width: "100%",
@@ -281,83 +283,83 @@ const Me = ({
             }
           },
           children: [
-            i && /* @__PURE__ */ e(ye, { children: i }),
-            r
+            o && /* @__PURE__ */ e(me, { children: o }),
+            t
           ]
         }
       )
     }
   );
-}, Si = ({
-  children: t,
-  defaultPosition: r = "top-right",
-  defaultDuration: i = 5e3,
+}), Ci = ({
+  children: r,
+  defaultPosition: i = "top-right",
+  defaultDuration: t = 5e3,
   maxToasts: o = 5,
-  defaultTransition: c = "slide"
+  defaultTransition: n = "slide"
 }) => {
-  const [a, l] = O([]), d = re(0), g = S(() => (d.current += 1, `toast-${d.current}-${Date.now()}`), []), u = S(
-    (p) => {
-      const x = g(), m = {
-        ...p,
-        id: x,
+  const [l, a] = O([]), s = oe(0), g = W(() => (s.current += 1, `toast-${s.current}-${Date.now()}`), []), x = W(
+    (u) => {
+      const y = g(), b = {
+        ...u,
+        id: y,
         open: !0,
-        position: p.position ?? r,
-        duration: p.duration ?? i,
-        transition: p.transition ?? c,
-        dismissible: p.dismissible ?? !0
+        position: u.position ?? i,
+        duration: u.duration ?? t,
+        transition: u.transition ?? n,
+        dismissible: u.dismissible ?? !0
       };
-      return l((E) => {
-        const $ = [...E, m];
+      return a((j) => {
+        const $ = [...j, b];
         return $.length > o ? $.slice(-o) : $;
-      }), x;
+      }), y;
     },
-    [g, r, i, c, o]
-  ), s = S((p) => {
-    l(
-      (x) => x.map((m) => m.id === p ? { ...m, open: !1 } : m)
+    [g, i, t, n, o]
+  ), p = W((u) => {
+    a(
+      (y) => y.map((b) => b.id === u ? { ...b, open: !1 } : b)
     ), setTimeout(() => {
-      l((x) => x.filter((m) => m.id !== p));
+      a((y) => y.filter((b) => b.id !== u));
     }, 300);
-  }, []), b = S(() => {
-    l((p) => p.map((x) => ({ ...x, open: !1 }))), setTimeout(() => {
-      l([]);
+  }, []), v = W(() => {
+    a((u) => u.map((y) => ({ ...y, open: !1 }))), setTimeout(() => {
+      a([]);
     }, 300);
-  }, []), C = S(
-    (p) => u(p),
-    [u]
-  ), I = S(
-    (p, x) => u({ message: p, severity: "success", ...x }),
-    [u]
-  ), y = S(
-    (p, x) => u({ message: p, severity: "info", ...x }),
-    [u]
-  ), D = S(
-    (p, x) => u({ message: p, severity: "warning", ...x }),
-    [u]
-  ), M = S(
-    (p, x) => u({ message: p, severity: "error", ...x }),
-    [u]
-  ), Q = {
-    toast: C,
-    success: I,
-    info: y,
-    warning: D,
-    error: M,
-    dismiss: s,
-    dismissAll: b
-  }, j = a.reduce((p, x) => {
-    const m = x.position || r;
-    return p[m] || (p[m] = []), p[m].push(x), p;
+  }, []), w = W(
+    (u) => x(u),
+    [x]
+  ), h = W(
+    (u, y) => x({ message: u, severity: "success", ...y }),
+    [x]
+  ), L = W(
+    (u, y) => x({ message: u, severity: "info", ...y }),
+    [x]
+  ), z = W(
+    (u, y) => x({ message: u, severity: "warning", ...y }),
+    [x]
+  ), m = W(
+    (u, y) => x({ message: u, severity: "error", ...y }),
+    [x]
+  ), F = {
+    toast: w,
+    success: h,
+    info: L,
+    warning: z,
+    error: m,
+    dismiss: p,
+    dismissAll: v
+  }, Q = l.reduce((u, y) => {
+    const b = y.position || i;
+    return u[b] || (u[b] = []), u[b].push(y), u;
   }, {});
-  return /* @__PURE__ */ f(q.Provider, { value: Q, children: [
-    t,
-    /* @__PURE__ */ e(ue, { children: Object.entries(j).map(([p, x]) => /* @__PURE__ */ e(
-      v,
+  return /* @__PURE__ */ f(J.Provider, { value: F, children: [
+    r,
+    /* @__PURE__ */ e(pe, { children: Object.entries(Q).map(([u, y]) => /* @__PURE__ */ e(
+      C,
       {
         sx: {
           position: "fixed",
           zIndex: 9999,
-          ...Fe(p),
+          ...Ve(u),
           display: "flex",
           flexDirection: "column",
           gap: 1,
@@ -366,20 +368,20 @@ const Me = ({
             pointerEvents: "auto"
           }
         },
-        children: x.map((m) => /* @__PURE__ */ e($e, { ...m, onClose: () => s(m.id) }, m.id))
+        children: y.map((b) => /* @__PURE__ */ e(Re, { ...b, onClose: () => p(b.id) }, b.id))
       },
-      p
+      u
     )) })
   ] });
-}, Fe = (t) => {
-  const r = {};
-  return t.startsWith("top") && (r.top = 16), t.startsWith("bottom") && (r.bottom = 16), t.endsWith("left") && (r.left = 16), t.endsWith("right") && (r.right = 16), t.endsWith("center") && (r.left = "50%", r.transform = "translateX(-50%)"), r;
-}, Li = () => {
-  const t = ne(q);
-  if (!t)
+}, Ve = (r) => {
+  const i = {};
+  return r.startsWith("top") && (i.top = 16), r.startsWith("bottom") && (i.bottom = 16), r.endsWith("left") && (i.left = 16), r.endsWith("right") && (i.right = 16), r.endsWith("center") && (i.left = "50%", i.transform = "translateX(-50%)"), i;
+}, Wi = () => {
+  const r = le(J);
+  if (!r)
     throw new Error("useToast must be used within a ToastProvider");
-  return t;
-}, w = {
+  return r;
+}, k = {
   // Error/danger - Tailwind red-500
   error: {
     main: "#EF4444",
@@ -399,7 +401,7 @@ const Me = ({
   accent: {
     flame: "#FFD93D"
   }
-}, J = {
+}, K = {
   small: {
     illustrationSize: 120,
     titleVariant: "subtitle1",
@@ -421,431 +423,427 @@ const Me = ({
     spacing: 4,
     padding: 6
   }
-}, Ve = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("rect", { x: "20", y: "60", width: "160", height: "100", rx: "8", fill: i }),
-  /* @__PURE__ */ e("rect", { x: "20", y: "60", width: "160", height: "24", rx: "8", fill: r, opacity: "0.2" }),
-  /* @__PURE__ */ e("rect", { x: "30", y: "94", width: "60", height: "8", rx: "4", fill: i, opacity: "0.8" }),
-  /* @__PURE__ */ e("rect", { x: "100", y: "94", width: "70", height: "8", rx: "4", fill: i, opacity: "0.6" }),
-  /* @__PURE__ */ e("rect", { x: "30", y: "114", width: "50", height: "8", rx: "4", fill: i, opacity: "0.8" }),
-  /* @__PURE__ */ e("rect", { x: "100", y: "114", width: "50", height: "8", rx: "4", fill: i, opacity: "0.6" }),
-  /* @__PURE__ */ e("rect", { x: "30", y: "134", width: "70", height: "8", rx: "4", fill: i, opacity: "0.8" }),
-  /* @__PURE__ */ e("rect", { x: "100", y: "134", width: "60", height: "8", rx: "4", fill: i, opacity: "0.6" }),
-  /* @__PURE__ */ e("circle", { cx: "100", cy: "115", r: "35", fill: "white", stroke: r, strokeWidth: "3", strokeDasharray: "6 4" }),
-  /* @__PURE__ */ e("text", { x: "100", y: "122", textAnchor: "middle", fill: r, fontSize: "32", fontWeight: "300", children: "?" })
+}, Fe = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("rect", { x: "20", y: "60", width: "160", height: "100", rx: "8", fill: t }),
+  /* @__PURE__ */ e("rect", { x: "20", y: "60", width: "160", height: "24", rx: "8", fill: i, opacity: "0.2" }),
+  /* @__PURE__ */ e("rect", { x: "30", y: "94", width: "60", height: "8", rx: "4", fill: t, opacity: "0.8" }),
+  /* @__PURE__ */ e("rect", { x: "100", y: "94", width: "70", height: "8", rx: "4", fill: t, opacity: "0.6" }),
+  /* @__PURE__ */ e("rect", { x: "30", y: "114", width: "50", height: "8", rx: "4", fill: t, opacity: "0.8" }),
+  /* @__PURE__ */ e("rect", { x: "100", y: "114", width: "50", height: "8", rx: "4", fill: t, opacity: "0.6" }),
+  /* @__PURE__ */ e("rect", { x: "30", y: "134", width: "70", height: "8", rx: "4", fill: t, opacity: "0.8" }),
+  /* @__PURE__ */ e("rect", { x: "100", y: "134", width: "60", height: "8", rx: "4", fill: t, opacity: "0.6" }),
+  /* @__PURE__ */ e("circle", { cx: "100", cy: "115", r: "35", fill: "white", stroke: i, strokeWidth: "3", strokeDasharray: "6 4" }),
+  /* @__PURE__ */ e("text", { x: "100", y: "122", textAnchor: "middle", fill: i, fontSize: "32", fontWeight: "300", children: "?" })
 ] }), Qe = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("rect", { x: "50", y: "50", width: "100", height: "120", rx: "6", fill: i, transform: "rotate(-5 50 50)" }),
-  /* @__PURE__ */ e("rect", { x: "55", y: "45", width: "100", height: "120", rx: "6", fill: "white", stroke: i, strokeWidth: "2" }),
-  /* @__PURE__ */ e("rect", { x: "70", y: "65", width: "60", height: "6", rx: "3", fill: i }),
-  /* @__PURE__ */ e("rect", { x: "70", y: "80", width: "70", height: "6", rx: "3", fill: i, opacity: "0.6" }),
-  /* @__PURE__ */ e("rect", { x: "70", y: "95", width: "50", height: "6", rx: "3", fill: i, opacity: "0.4" }),
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("rect", { x: "50", y: "50", width: "100", height: "120", rx: "6", fill: t, transform: "rotate(-5 50 50)" }),
+  /* @__PURE__ */ e("rect", { x: "55", y: "45", width: "100", height: "120", rx: "6", fill: "white", stroke: t, strokeWidth: "2" }),
+  /* @__PURE__ */ e("rect", { x: "70", y: "65", width: "60", height: "6", rx: "3", fill: t }),
+  /* @__PURE__ */ e("rect", { x: "70", y: "80", width: "70", height: "6", rx: "3", fill: t, opacity: "0.6" }),
+  /* @__PURE__ */ e("rect", { x: "70", y: "95", width: "50", height: "6", rx: "3", fill: t, opacity: "0.4" }),
   /* @__PURE__ */ f("g", { transform: "translate(120, 100) rotate(45)", children: [
     /* @__PURE__ */ e("rect", { x: "0", y: "0", width: "50", height: "10", fill: o }),
     /* @__PURE__ */ e("polygon", { points: "50,0 60,5 50,10", fill: o, opacity: "0.7" }),
-    /* @__PURE__ */ e("rect", { x: "-5", y: "2", width: "5", height: "6", fill: r })
+    /* @__PURE__ */ e("rect", { x: "-5", y: "2", width: "5", height: "6", fill: i })
   ] })
 ] }), je = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "100", rx: "30", ry: "50", fill: r }),
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "100", rx: "30", ry: "50", fill: i }),
   /* @__PURE__ */ e("circle", { cx: "100", cy: "85", r: "12", fill: "white" }),
   /* @__PURE__ */ e("circle", { cx: "100", cy: "85", r: "8", fill: o, opacity: "0.3" }),
   /* @__PURE__ */ e("path", { d: "M70 120 L50 150 L70 140 Z", fill: o }),
   /* @__PURE__ */ e("path", { d: "M130 120 L150 150 L130 140 Z", fill: o }),
   /* @__PURE__ */ e("ellipse", { cx: "100", cy: "160", rx: "15", ry: "25", fill: o, opacity: "0.8" }),
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "155", rx: "10", ry: "18", fill: w.accent.flame }),
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "155", rx: "10", ry: "18", fill: k.accent.flame }),
   /* @__PURE__ */ e("ellipse", { cx: "100", cy: "150", rx: "5", ry: "10", fill: "white" }),
-  /* @__PURE__ */ e("circle", { cx: "40", cy: "50", r: "3", fill: r, opacity: "0.5" }),
-  /* @__PURE__ */ e("circle", { cx: "160", cy: "40", r: "2", fill: r, opacity: "0.5" }),
+  /* @__PURE__ */ e("circle", { cx: "40", cy: "50", r: "3", fill: i, opacity: "0.5" }),
+  /* @__PURE__ */ e("circle", { cx: "160", cy: "40", r: "2", fill: i, opacity: "0.5" }),
   /* @__PURE__ */ e("circle", { cx: "30", cy: "120", r: "2", fill: o, opacity: "0.5" }),
   /* @__PURE__ */ e("circle", { cx: "170", cy: "100", r: "3", fill: o, opacity: "0.5" })
-] }), Re = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("path", { d: "M30 70 L30 160 L170 160 L170 70 L100 70 L90 55 L30 55 Z", fill: i }),
-  /* @__PURE__ */ e("path", { d: "M30 70 L170 70 L170 160 L30 160 Z", fill: "white", stroke: i, strokeWidth: "2" }),
-  /* @__PURE__ */ e("rect", { x: "60", y: "85", width: "50", height: "60", rx: "4", fill: "white", stroke: r, strokeWidth: "2" }),
-  /* @__PURE__ */ e("rect", { x: "70", y: "95", width: "30", height: "4", rx: "2", fill: i }),
-  /* @__PURE__ */ e("rect", { x: "70", y: "105", width: "25", height: "4", rx: "2", fill: i, opacity: "0.6" }),
-  /* @__PURE__ */ e("rect", { x: "70", y: "115", width: "30", height: "4", rx: "2", fill: i, opacity: "0.4" }),
-  /* @__PURE__ */ e("circle", { cx: "140", cy: "130", r: "20", fill: r }),
+] }), Ze = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("path", { d: "M30 70 L30 160 L170 160 L170 70 L100 70 L90 55 L30 55 Z", fill: t }),
+  /* @__PURE__ */ e("path", { d: "M30 70 L170 70 L170 160 L30 160 Z", fill: "white", stroke: t, strokeWidth: "2" }),
+  /* @__PURE__ */ e("rect", { x: "60", y: "85", width: "50", height: "60", rx: "4", fill: "white", stroke: i, strokeWidth: "2" }),
+  /* @__PURE__ */ e("rect", { x: "70", y: "95", width: "30", height: "4", rx: "2", fill: t }),
+  /* @__PURE__ */ e("rect", { x: "70", y: "105", width: "25", height: "4", rx: "2", fill: t, opacity: "0.6" }),
+  /* @__PURE__ */ e("rect", { x: "70", y: "115", width: "30", height: "4", rx: "2", fill: t, opacity: "0.4" }),
+  /* @__PURE__ */ e("circle", { cx: "140", cy: "130", r: "20", fill: i }),
   /* @__PURE__ */ e("rect", { x: "132", y: "127", width: "16", height: "6", rx: "3", fill: "white" }),
   /* @__PURE__ */ e("rect", { x: "137", y: "122", width: "6", height: "16", rx: "3", fill: "white" })
-] }), Ze = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("rect", { x: "30", y: "40", width: "140", height: "120", rx: "8", fill: "white", stroke: i, strokeWidth: "2" }),
-  /* @__PURE__ */ e("line", { x1: "30", y1: "80", x2: "170", y2: "80", stroke: i, strokeWidth: "1", strokeDasharray: "4" }),
-  /* @__PURE__ */ e("line", { x1: "30", y1: "120", x2: "170", y2: "120", stroke: i, strokeWidth: "1", strokeDasharray: "4" }),
-  /* @__PURE__ */ e("rect", { x: "50", y: "100", width: "20", height: "50", rx: "4", fill: i, opacity: "0.5" }),
-  /* @__PURE__ */ e("rect", { x: "90", y: "80", width: "20", height: "70", rx: "4", fill: i, opacity: "0.5" }),
-  /* @__PURE__ */ e("rect", { x: "130", y: "90", width: "20", height: "60", rx: "4", fill: i, opacity: "0.5" }),
+] }), Oe = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("rect", { x: "30", y: "40", width: "140", height: "120", rx: "8", fill: "white", stroke: t, strokeWidth: "2" }),
+  /* @__PURE__ */ e("line", { x1: "30", y1: "80", x2: "170", y2: "80", stroke: t, strokeWidth: "1", strokeDasharray: "4" }),
+  /* @__PURE__ */ e("line", { x1: "30", y1: "120", x2: "170", y2: "120", stroke: t, strokeWidth: "1", strokeDasharray: "4" }),
+  /* @__PURE__ */ e("rect", { x: "50", y: "100", width: "20", height: "50", rx: "4", fill: t, opacity: "0.5" }),
+  /* @__PURE__ */ e("rect", { x: "90", y: "80", width: "20", height: "70", rx: "4", fill: t, opacity: "0.5" }),
+  /* @__PURE__ */ e("rect", { x: "130", y: "90", width: "20", height: "60", rx: "4", fill: t, opacity: "0.5" }),
   /* @__PURE__ */ e("circle", { cx: "160", cy: "60", r: "25", fill: o, opacity: "0.2" }),
   /* @__PURE__ */ e("path", { d: "M160 45 L160 55 M148 52 L155 58 M172 52 L165 58", stroke: o, strokeWidth: "3", strokeLinecap: "round" }),
   /* @__PURE__ */ e("circle", { cx: "160", cy: "65", r: "10", fill: o }),
-  /* @__PURE__ */ e("rect", { x: "155", y: "75", width: "10", height: "8", rx: "2", fill: r })
-] }), Oe = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("circle", { cx: "85", cy: "85", r: "45", fill: "white", stroke: r, strokeWidth: "4" }),
-  /* @__PURE__ */ e("line", { x1: "118", y1: "118", x2: "160", y2: "160", stroke: r, strokeWidth: "8", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("line", { x1: "65", y1: "65", x2: "105", y2: "105", stroke: i, strokeWidth: "6", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("line", { x1: "105", y1: "65", x2: "65", y2: "105", stroke: i, strokeWidth: "6", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("text", { x: "155", y: "50", fill: i, fontSize: "20", fontWeight: "bold", children: "?" }),
-  /* @__PURE__ */ e("text", { x: "40", y: "160", fill: i, fontSize: "16", fontWeight: "bold", children: "?" })
+  /* @__PURE__ */ e("rect", { x: "155", y: "75", width: "10", height: "8", rx: "2", fill: i })
 ] }), _e = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("path", { d: "M100 30 L170 150 L30 150 Z", fill: w.warning.light, stroke: w.warning.main, strokeWidth: "3" }),
-  /* @__PURE__ */ e("rect", { x: "94", y: "70", width: "12", height: "45", rx: "6", fill: w.warning.main }),
-  /* @__PURE__ */ e("circle", { cx: "100", cy: "130", r: "7", fill: w.warning.main }),
-  /* @__PURE__ */ e("circle", { cx: "30", cy: "60", r: "8", fill: i, opacity: "0.5" }),
-  /* @__PURE__ */ e("circle", { cx: "170", cy: "80", r: "6", fill: i, opacity: "0.5" }),
-  /* @__PURE__ */ e("rect", { x: "160", y: "130", width: "20", height: "4", rx: "2", fill: i, opacity: "0.3" }),
-  /* @__PURE__ */ e("rect", { x: "20", y: "120", width: "15", height: "4", rx: "2", fill: i, opacity: "0.3" })
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("circle", { cx: "85", cy: "85", r: "45", fill: "white", stroke: i, strokeWidth: "4" }),
+  /* @__PURE__ */ e("line", { x1: "118", y1: "118", x2: "160", y2: "160", stroke: i, strokeWidth: "8", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("line", { x1: "65", y1: "65", x2: "105", y2: "105", stroke: t, strokeWidth: "6", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("line", { x1: "105", y1: "65", x2: "65", y2: "105", stroke: t, strokeWidth: "6", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("text", { x: "155", y: "50", fill: t, fontSize: "20", fontWeight: "bold", children: "?" }),
+  /* @__PURE__ */ e("text", { x: "40", y: "160", fill: t, fontSize: "16", fontWeight: "bold", children: "?" })
 ] }), Ae = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("text", { x: "100", y: "100", textAnchor: "middle", fill: r, fontSize: "48", fontWeight: "bold", children: "404" }),
-  /* @__PURE__ */ e("path", { d: "M60 130 Q40 130 40 150 Q40 170 60 170", stroke: i, strokeWidth: "4", fill: "none", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("path", { d: "M140 130 Q160 130 160 150 Q160 170 140 170", stroke: i, strokeWidth: "4", fill: "none", strokeLinecap: "round" }),
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("path", { d: "M100 30 L170 150 L30 150 Z", fill: k.warning.light, stroke: k.warning.main, strokeWidth: "3" }),
+  /* @__PURE__ */ e("rect", { x: "94", y: "70", width: "12", height: "45", rx: "6", fill: k.warning.main }),
+  /* @__PURE__ */ e("circle", { cx: "100", cy: "130", r: "7", fill: k.warning.main }),
+  /* @__PURE__ */ e("circle", { cx: "30", cy: "60", r: "8", fill: t, opacity: "0.5" }),
+  /* @__PURE__ */ e("circle", { cx: "170", cy: "80", r: "6", fill: t, opacity: "0.5" }),
+  /* @__PURE__ */ e("rect", { x: "160", y: "130", width: "20", height: "4", rx: "2", fill: t, opacity: "0.3" }),
+  /* @__PURE__ */ e("rect", { x: "20", y: "120", width: "15", height: "4", rx: "2", fill: t, opacity: "0.3" })
+] }), Ne = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("text", { x: "100", y: "100", textAnchor: "middle", fill: i, fontSize: "48", fontWeight: "bold", children: "404" }),
+  /* @__PURE__ */ e("path", { d: "M60 130 Q40 130 40 150 Q40 170 60 170", stroke: t, strokeWidth: "4", fill: "none", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("path", { d: "M140 130 Q160 130 160 150 Q160 170 140 170", stroke: t, strokeWidth: "4", fill: "none", strokeLinecap: "round" }),
   /* @__PURE__ */ e("line", { x1: "85", y1: "150", x2: "95", y2: "140", stroke: o, strokeWidth: "3", strokeLinecap: "round" }),
   /* @__PURE__ */ e("line", { x1: "105", y1: "160", x2: "115", y2: "150", stroke: o, strokeWidth: "3", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("circle", { cx: "75", cy: "60", r: "5", fill: r }),
-  /* @__PURE__ */ e("circle", { cx: "125", cy: "60", r: "5", fill: r }),
-  /* @__PURE__ */ e("path", { d: "M80 75 Q100 65 120 75", stroke: r, strokeWidth: "3", fill: "none", strokeLinecap: "round" })
-] }), Ne = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("rect", { x: "60", y: "40", width: "80", height: "120", rx: "8", fill: i }),
+  /* @__PURE__ */ e("circle", { cx: "75", cy: "60", r: "5", fill: i }),
+  /* @__PURE__ */ e("circle", { cx: "125", cy: "60", r: "5", fill: i }),
+  /* @__PURE__ */ e("path", { d: "M80 75 Q100 65 120 75", stroke: i, strokeWidth: "3", fill: "none", strokeLinecap: "round" })
+] }), Ge = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("rect", { x: "60", y: "40", width: "80", height: "120", rx: "8", fill: t }),
   /* @__PURE__ */ e("rect", { x: "70", y: "50", width: "60", height: "25", rx: "4", fill: "white" }),
   /* @__PURE__ */ e("rect", { x: "70", y: "85", width: "60", height: "25", rx: "4", fill: "white" }),
   /* @__PURE__ */ e("rect", { x: "70", y: "120", width: "60", height: "25", rx: "4", fill: "white" }),
-  /* @__PURE__ */ e("circle", { cx: "80", cy: "62", r: "4", fill: w.error.main }),
-  /* @__PURE__ */ e("circle", { cx: "92", cy: "62", r: "4", fill: w.error.main }),
-  /* @__PURE__ */ e("circle", { cx: "80", cy: "97", r: "4", fill: w.error.main }),
+  /* @__PURE__ */ e("circle", { cx: "80", cy: "62", r: "4", fill: k.error.main }),
+  /* @__PURE__ */ e("circle", { cx: "92", cy: "62", r: "4", fill: k.error.main }),
+  /* @__PURE__ */ e("circle", { cx: "80", cy: "97", r: "4", fill: k.error.main }),
   /* @__PURE__ */ e("circle", { cx: "92", cy: "97", r: "4", fill: o, opacity: "0.5" }),
   /* @__PURE__ */ e("circle", { cx: "80", cy: "132", r: "4", fill: o, opacity: "0.5" }),
   /* @__PURE__ */ e("circle", { cx: "92", cy: "132", r: "4", fill: o, opacity: "0.5" }),
   /* @__PURE__ */ e("path", { d: "M150 50 L135 90 L150 90 L130 130 L155 80 L140 80 Z", fill: o }),
   /* @__PURE__ */ f("g", { transform: "translate(40, 70)", children: [
-    /* @__PURE__ */ e("line", { x1: "0", y1: "0", x2: "15", y2: "15", stroke: w.error.main, strokeWidth: "3", strokeLinecap: "round" }),
-    /* @__PURE__ */ e("line", { x1: "15", y1: "0", x2: "0", y2: "15", stroke: w.error.main, strokeWidth: "3", strokeLinecap: "round" })
+    /* @__PURE__ */ e("line", { x1: "0", y1: "0", x2: "15", y2: "15", stroke: k.error.main, strokeWidth: "3", strokeLinecap: "round" }),
+    /* @__PURE__ */ e("line", { x1: "15", y1: "0", x2: "0", y2: "15", stroke: k.error.main, strokeWidth: "3", strokeLinecap: "round" })
   ] })
-] }), Ge = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("rect", { x: "60", y: "90", width: "80", height: "70", rx: "10", fill: r }),
-  /* @__PURE__ */ e("path", { d: "M75 90 L75 60 Q75 40 100 40 Q125 40 125 60 L125 90", stroke: r, strokeWidth: "10", fill: "none", strokeLinecap: "round" }),
+] }), Ue = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("rect", { x: "60", y: "90", width: "80", height: "70", rx: "10", fill: i }),
+  /* @__PURE__ */ e("path", { d: "M75 90 L75 60 Q75 40 100 40 Q125 40 125 60 L125 90", stroke: i, strokeWidth: "10", fill: "none", strokeLinecap: "round" }),
   /* @__PURE__ */ e("circle", { cx: "100", cy: "115", r: "12", fill: "white" }),
   /* @__PURE__ */ e("rect", { x: "95", y: "115", width: "10", height: "20", rx: "3", fill: "white" }),
   /* @__PURE__ */ e("path", { d: "M100 25 L140 45 L140 85 Q140 115 100 135 Q60 115 60 85 L60 45 Z", fill: o, opacity: "0.15" }),
-  /* @__PURE__ */ e("circle", { cx: "155", cy: "65", r: "20", fill: w.error.light, stroke: w.error.main, strokeWidth: "2" }),
-  /* @__PURE__ */ e("rect", { x: "147", y: "55", width: "16", height: "20", rx: "4", fill: w.error.main })
-] }), K = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "80", rx: "60", ry: "40", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "60", cy: "95", rx: "35", ry: "25", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "140", cy: "95", rx: "35", ry: "25", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "100", rx: "50", ry: "30", fill: i }),
-  /* @__PURE__ */ e("rect", { x: "92", y: "110", width: "16", height: "50", rx: "4", fill: r }),
-  /* @__PURE__ */ e("polygon", { points: "100,85 75,120 125,120", fill: r }),
+  /* @__PURE__ */ e("circle", { cx: "155", cy: "65", r: "20", fill: k.error.light, stroke: k.error.main, strokeWidth: "2" }),
+  /* @__PURE__ */ e("rect", { x: "147", y: "55", width: "16", height: "20", rx: "4", fill: k.error.main })
+] }), X = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "80", rx: "60", ry: "40", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "60", cy: "95", rx: "35", ry: "25", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "140", cy: "95", rx: "35", ry: "25", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "100", rx: "50", ry: "30", fill: t }),
+  /* @__PURE__ */ e("rect", { x: "92", y: "110", width: "16", height: "50", rx: "4", fill: i }),
+  /* @__PURE__ */ e("polygon", { points: "100,85 75,120 125,120", fill: i }),
   /* @__PURE__ */ e("rect", { x: "30", y: "140", width: "140", height: "50", rx: "8", fill: "white", stroke: o, strokeWidth: "2", strokeDasharray: "8 4" }),
-  /* @__PURE__ */ e("rect", { x: "85", y: "150", width: "30", height: "35", rx: "4", fill: "white", stroke: r, strokeWidth: "2" }),
-  /* @__PURE__ */ e("path", { d: "M100 150 L115 150 L115 165 L100 165 L100 150 Z", fill: r, opacity: "0.2" })
-] }), Ue = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100,
-  accentColor: o = h.secondary.main
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "70", fill: w.success.light }),
-  /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "55", fill: w.success.main }),
+  /* @__PURE__ */ e("rect", { x: "85", y: "150", width: "30", height: "35", rx: "4", fill: "white", stroke: i, strokeWidth: "2" }),
+  /* @__PURE__ */ e("path", { d: "M100 150 L115 150 L115 165 L100 165 L100 150 Z", fill: i, opacity: "0.2" })
+] }), He = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100,
+  accentColor: o = d.secondary.main
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "70", fill: k.success.light }),
+  /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "55", fill: k.success.main }),
   /* @__PURE__ */ e("path", { d: "M65 100 L90 125 L135 75", stroke: "white", strokeWidth: "10", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
   /* @__PURE__ */ e("circle", { cx: "40", cy: "50", r: "6", fill: o, opacity: "0.6" }),
   /* @__PURE__ */ e("circle", { cx: "160", cy: "60", r: "4", fill: o, opacity: "0.6" }),
-  /* @__PURE__ */ e("circle", { cx: "170", cy: "130", r: "5", fill: r, opacity: "0.4" }),
-  /* @__PURE__ */ e("circle", { cx: "30", cy: "140", r: "4", fill: r, opacity: "0.4" }),
+  /* @__PURE__ */ e("circle", { cx: "170", cy: "130", r: "5", fill: i, opacity: "0.4" }),
+  /* @__PURE__ */ e("circle", { cx: "30", cy: "140", r: "4", fill: i, opacity: "0.4" }),
   /* @__PURE__ */ e("path", { d: "M45 170 L50 180 L55 170 L60 180", stroke: o, strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }),
-  /* @__PURE__ */ e("path", { d: "M140 170 L145 180 L150 170 L155 180", stroke: r, strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })
-] }), He = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("path", { d: "M100 40 Q130 40 140 80 L145 120 L55 120 L60 80 Q70 40 100 40 Z", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "120", rx: "50", ry: "12", fill: i }),
-  /* @__PURE__ */ e("circle", { cx: "100", cy: "145", r: "12", fill: i }),
-  /* @__PURE__ */ e("path", { d: "M100 40 L100 25", stroke: r, strokeWidth: "4", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("text", { x: "145", y: "60", fill: r, fontSize: "20", fontWeight: "bold", opacity: "0.6", children: "Z" }),
-  /* @__PURE__ */ e("text", { x: "155", y: "45", fill: r, fontSize: "16", fontWeight: "bold", opacity: "0.4", children: "z" }),
-  /* @__PURE__ */ e("text", { x: "165", y: "35", fill: r, fontSize: "12", fontWeight: "bold", opacity: "0.2", children: "z" })
+  /* @__PURE__ */ e("path", { d: "M140 170 L145 180 L150 170 L155 180", stroke: i, strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })
 ] }), qe = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "60", rx: "50", ry: "20", fill: i }),
-  /* @__PURE__ */ e("rect", { x: "50", y: "60", width: "100", height: "80", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "140", rx: "50", ry: "20", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "60", rx: "50", ry: "20", fill: "white", stroke: r, strokeWidth: "2" }),
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "140", rx: "50", ry: "20", fill: "white", stroke: r, strokeWidth: "2" }),
-  /* @__PURE__ */ e("line", { x1: "50", y1: "60", x2: "50", y2: "140", stroke: r, strokeWidth: "2" }),
-  /* @__PURE__ */ e("line", { x1: "150", y1: "60", x2: "150", y2: "140", stroke: r, strokeWidth: "2" }),
-  /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "25", fill: "white", stroke: r, strokeWidth: "2", strokeDasharray: "5 3" }),
-  /* @__PURE__ */ e("text", { x: "100", y: "108", textAnchor: "middle", fill: r, fontSize: "24", fontWeight: "300", children: "0" })
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("path", { d: "M100 40 Q130 40 140 80 L145 120 L55 120 L60 80 Q70 40 100 40 Z", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "120", rx: "50", ry: "12", fill: t }),
+  /* @__PURE__ */ e("circle", { cx: "100", cy: "145", r: "12", fill: t }),
+  /* @__PURE__ */ e("path", { d: "M100 40 L100 25", stroke: i, strokeWidth: "4", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("text", { x: "145", y: "60", fill: i, fontSize: "20", fontWeight: "bold", opacity: "0.6", children: "Z" }),
+  /* @__PURE__ */ e("text", { x: "155", y: "45", fill: i, fontSize: "16", fontWeight: "bold", opacity: "0.4", children: "z" }),
+  /* @__PURE__ */ e("text", { x: "165", y: "35", fill: i, fontSize: "12", fontWeight: "bold", opacity: "0.2", children: "z" })
 ] }), Je = ({
-  size: t = 180,
-  primaryColor: r = h.primary.main,
-  secondaryColor: i = h.neutral.gray100
-}) => /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "80", rx: "55", ry: "35", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "60", cy: "95", rx: "30", ry: "22", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "140", cy: "95", rx: "30", ry: "22", fill: i }),
-  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "100", rx: "45", ry: "25", fill: i }),
-  /* @__PURE__ */ e("line", { x1: "75", y1: "70", x2: "125", y2: "110", stroke: w.error.main, strokeWidth: "8", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("line", { x1: "125", y1: "70", x2: "75", y2: "110", stroke: w.error.main, strokeWidth: "8", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("path", { d: "M45 140 Q45 160 65 160", stroke: i, strokeWidth: "3", fill: "none", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("path", { d: "M35 145 Q35 170 65 170", stroke: i, strokeWidth: "3", fill: "none", strokeLinecap: "round", opacity: "0.6" }),
-  /* @__PURE__ */ e("path", { d: "M155 140 Q155 160 135 160", stroke: i, strokeWidth: "3", fill: "none", strokeLinecap: "round" }),
-  /* @__PURE__ */ e("path", { d: "M165 145 Q165 170 135 170", stroke: i, strokeWidth: "3", fill: "none", strokeLinecap: "round", opacity: "0.6" })
-] }), Ke = {
-  "empty-table": Ve,
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "60", rx: "50", ry: "20", fill: t }),
+  /* @__PURE__ */ e("rect", { x: "50", y: "60", width: "100", height: "80", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "140", rx: "50", ry: "20", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "60", rx: "50", ry: "20", fill: "white", stroke: i, strokeWidth: "2" }),
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "140", rx: "50", ry: "20", fill: "white", stroke: i, strokeWidth: "2" }),
+  /* @__PURE__ */ e("line", { x1: "50", y1: "60", x2: "50", y2: "140", stroke: i, strokeWidth: "2" }),
+  /* @__PURE__ */ e("line", { x1: "150", y1: "60", x2: "150", y2: "140", stroke: i, strokeWidth: "2" }),
+  /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "25", fill: "white", stroke: i, strokeWidth: "2", strokeDasharray: "5 3" }),
+  /* @__PURE__ */ e("text", { x: "100", y: "108", textAnchor: "middle", fill: i, fontSize: "24", fontWeight: "300", children: "0" })
+] }), Ke = ({
+  size: r = 180,
+  primaryColor: i = d.primary.main,
+  secondaryColor: t = d.neutral.gray100
+}) => /* @__PURE__ */ f("svg", { width: r, height: r, viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "80", rx: "55", ry: "35", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "60", cy: "95", rx: "30", ry: "22", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "140", cy: "95", rx: "30", ry: "22", fill: t }),
+  /* @__PURE__ */ e("ellipse", { cx: "100", cy: "100", rx: "45", ry: "25", fill: t }),
+  /* @__PURE__ */ e("line", { x1: "75", y1: "70", x2: "125", y2: "110", stroke: k.error.main, strokeWidth: "8", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("line", { x1: "125", y1: "70", x2: "75", y2: "110", stroke: k.error.main, strokeWidth: "8", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("path", { d: "M45 140 Q45 160 65 160", stroke: t, strokeWidth: "3", fill: "none", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("path", { d: "M35 145 Q35 170 65 170", stroke: t, strokeWidth: "3", fill: "none", strokeLinecap: "round", opacity: "0.6" }),
+  /* @__PURE__ */ e("path", { d: "M155 140 Q155 160 135 160", stroke: t, strokeWidth: "3", fill: "none", strokeLinecap: "round" }),
+  /* @__PURE__ */ e("path", { d: "M165 145 Q165 170 135 170", stroke: t, strokeWidth: "3", fill: "none", strokeLinecap: "round", opacity: "0.6" })
+] }), Xe = {
+  "empty-table": Fe,
   "empty-drafts": Qe,
   "getting-started": je,
-  "empty-documents": Re,
-  "empty-insights": Ze,
-  "no-results": Oe,
-  "error-generic": _e,
-  "error-404": Ae,
-  "error-500": Ne,
-  "error-permission": Ge,
-  upload: K,
-  success: Ue,
-  "no-notifications": He,
-  "no-data": qe,
-  offline: Je
-}, Ci = ({
-  illustration: t,
-  title: r,
-  description: i,
-  primaryAction: o,
-  secondaryAction: c,
-  size: a = "medium",
-  customIllustration: l,
-  sx: d
-}) => {
-  const g = J[a], u = Ke[t];
-  return /* @__PURE__ */ f(
-    v,
-    {
-      sx: {
-        textAlign: "center",
-        p: g.padding,
-        maxWidth: a === "small" ? 300 : a === "large" ? 500 : 400,
-        mx: "auto",
-        ...d
-      },
-      children: [
-        /* @__PURE__ */ e(
-          v,
-          {
-            sx: {
-              mb: g.spacing,
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            },
-            role: "img",
-            "aria-hidden": "true",
-            children: l || /* @__PURE__ */ e(u, { size: g.illustrationSize })
-          }
-        ),
-        /* @__PURE__ */ e(
-          k,
-          {
-            variant: g.titleVariant,
-            sx: { mb: 1, fontWeight: 600 },
-            children: r
-          }
-        ),
-        i && /* @__PURE__ */ e(
-          k,
-          {
-            variant: g.descriptionVariant,
-            color: "text.secondary",
-            sx: { mb: g.spacing },
-            children: i
-          }
-        ),
-        (o || c) && /* @__PURE__ */ f(
-          z,
-          {
-            spacing: 1.5,
-            alignItems: "center",
-            sx: { mt: g.spacing },
-            children: [
-              o && (o.href ? /* @__PURE__ */ e(
-                B,
-                {
-                  variant: "contained",
-                  href: o.href,
-                  onClick: o.onClick,
-                  children: o.label
-                }
-              ) : /* @__PURE__ */ e(
-                B,
-                {
-                  variant: "contained",
-                  onClick: o.onClick,
-                  children: o.label
-                }
-              )),
-              c && (c.href ? /* @__PURE__ */ e(
-                G,
-                {
-                  href: c.href,
-                  onClick: c.onClick,
-                  underline: "hover",
-                  sx: { cursor: "pointer" },
-                  children: c.label
-                }
-              ) : /* @__PURE__ */ e(
-                G,
-                {
-                  component: "button",
-                  onClick: c.onClick,
-                  underline: "hover",
-                  sx: { cursor: "pointer" },
-                  children: c.label
-                }
-              ))
-            ]
-          }
-        )
-      ]
-    }
-  );
-}, Wi = ({
-  title: t = "Drag and drop your file",
-  description: r = "or click to browse from your computer",
-  acceptedTypes: i = "PNG, JPG, PDF up to 10MB",
-  browseLabel: o = "Browse Files",
-  onDrop: c,
-  onBrowse: a,
-  isDragging: l = !1,
-  size: d = "medium",
-  sx: g
-}) => {
-  const [u, s] = Z.useState(l), b = J[d], C = (y) => {
-    y.preventDefault(), y.stopPropagation(), y.type === "dragenter" || y.type === "dragover" ? s(!0) : y.type === "dragleave" && s(!1);
-  };
-  return /* @__PURE__ */ f(
-    v,
-    {
-      onDragEnter: C,
-      onDragLeave: C,
-      onDragOver: C,
-      onDrop: (y) => {
-        y.preventDefault(), y.stopPropagation(), s(!1), y.dataTransfer.files && y.dataTransfer.files.length > 0 && c?.(y.dataTransfer.files);
-      },
-      sx: {
-        p: b.padding,
-        border: "2px dashed",
-        borderColor: u ? "primary.main" : "grey.300",
-        borderRadius: 3,
-        // 12px - consistent with cards
-        bgcolor: u ? "primary.50" : "grey.50",
-        textAlign: "center",
-        cursor: "pointer",
-        transition: "all 0.2s ease",
-        "&:hover": {
-          borderColor: "primary.main",
-          bgcolor: "primary.50"
+  "empty-documents": Ze,
+  "empty-insights": Oe,
+  "no-results": _e,
+  "error-generic": Ae,
+  "error-404": Ne,
+  "error-500": Ge,
+  "error-permission": Ue,
+  upload: X,
+  success: He,
+  "no-notifications": qe,
+  "no-data": Je,
+  offline: Ke
+}, Ii = D.forwardRef(
+  function({ illustration: i, title: t, description: o, primaryAction: n, secondaryAction: l, size: a = "medium", customIllustration: s, sx: g }, x) {
+    const p = K[a], v = Xe[i];
+    return /* @__PURE__ */ f(
+      C,
+      {
+        ref: x,
+        sx: {
+          textAlign: "center",
+          p: p.padding,
+          maxWidth: a === "small" ? 300 : a === "large" ? 500 : 400,
+          mx: "auto",
+          ...g
         },
-        ...g
-      },
-      onClick: a,
-      children: [
-        /* @__PURE__ */ e(v, { sx: { mb: 2 }, children: /* @__PURE__ */ e(K, { size: b.illustrationSize * 0.7 }) }),
-        /* @__PURE__ */ e(k, { variant: b.titleVariant, sx: { mb: 0.5, fontWeight: 600 }, children: t }),
-        /* @__PURE__ */ e(k, { variant: b.descriptionVariant, color: "text.secondary", sx: { mb: 2 }, children: r }),
-        /* @__PURE__ */ e(B, { variant: "outlined", size: d === "small" ? "small" : "medium", children: o }),
-        i && /* @__PURE__ */ e(k, { variant: "caption", color: "text.secondary", display: "block", sx: { mt: 2 }, children: i })
-      ]
-    }
-  );
-}, n = L.colors.indicator, W = {
+        children: [
+          /* @__PURE__ */ e(
+            C,
+            {
+              sx: {
+                mb: p.spacing,
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              role: "img",
+              "aria-hidden": "true",
+              children: s || /* @__PURE__ */ e(v, { size: p.illustrationSize })
+            }
+          ),
+          /* @__PURE__ */ e(
+            S,
+            {
+              variant: p.titleVariant,
+              sx: { mb: 1, fontWeight: 600 },
+              children: t
+            }
+          ),
+          o && /* @__PURE__ */ e(
+            S,
+            {
+              variant: p.descriptionVariant,
+              color: "text.secondary",
+              sx: { mb: p.spacing },
+              children: o
+            }
+          ),
+          (n || l) && /* @__PURE__ */ f(
+            P,
+            {
+              spacing: 1.5,
+              sx: { mt: p.spacing, alignItems: "center" },
+              children: [
+                n && (n.href ? /* @__PURE__ */ e(
+                  T,
+                  {
+                    variant: "contained",
+                    href: n.href,
+                    onClick: n.onClick,
+                    children: n.label
+                  }
+                ) : /* @__PURE__ */ e(
+                  T,
+                  {
+                    variant: "contained",
+                    onClick: n.onClick,
+                    children: n.label
+                  }
+                )),
+                l && (l.href ? /* @__PURE__ */ e(
+                  U,
+                  {
+                    href: l.href,
+                    onClick: l.onClick,
+                    underline: "hover",
+                    sx: { cursor: "pointer" },
+                    children: l.label
+                  }
+                ) : /* @__PURE__ */ e(
+                  U,
+                  {
+                    component: "button",
+                    onClick: l.onClick,
+                    underline: "hover",
+                    sx: { cursor: "pointer" },
+                    children: l.label
+                  }
+                ))
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+), zi = D.forwardRef(
+  function({
+    title: i = "Drag and drop your file",
+    description: t = "or click to browse from your computer",
+    acceptedTypes: o = "PNG, JPG, PDF up to 10MB",
+    browseLabel: n = "Browse Files",
+    onDrop: l,
+    onBrowse: a,
+    isDragging: s = !1,
+    size: g = "medium",
+    sx: x
+  }, p) {
+    const [v, w] = D.useState(s), h = K[g], L = (m) => {
+      m.preventDefault(), m.stopPropagation(), m.type === "dragenter" || m.type === "dragover" ? w(!0) : m.type === "dragleave" && w(!1);
+    };
+    return /* @__PURE__ */ f(
+      C,
+      {
+        ref: p,
+        onDragEnter: L,
+        onDragLeave: L,
+        onDragOver: L,
+        onDrop: (m) => {
+          m.preventDefault(), m.stopPropagation(), w(!1), m.dataTransfer.files && m.dataTransfer.files.length > 0 && l?.(m.dataTransfer.files);
+        },
+        sx: {
+          p: h.padding,
+          border: "2px dashed",
+          borderColor: v ? "primary.main" : "grey.300",
+          borderRadius: 3,
+          // 12px - consistent with cards
+          bgcolor: v ? "primary.50" : "grey.50",
+          textAlign: "center",
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          "&:hover": {
+            borderColor: "primary.main",
+            bgcolor: "primary.50"
+          },
+          ...x
+        },
+        onClick: a,
+        children: [
+          /* @__PURE__ */ e(C, { sx: { mb: 2 }, children: /* @__PURE__ */ e(X, { size: h.illustrationSize * 0.7 }) }),
+          /* @__PURE__ */ e(S, { variant: h.titleVariant, sx: { mb: 0.5, fontWeight: 600 }, children: i }),
+          /* @__PURE__ */ e(S, { variant: h.descriptionVariant, color: "text.secondary", sx: { mb: 2 }, children: t }),
+          /* @__PURE__ */ e(T, { variant: "outlined", size: g === "small" ? "small" : "medium", children: n }),
+          o && /* @__PURE__ */ e(S, { variant: "caption", color: "text.secondary", sx: { mt: 2, display: "block" }, children: o })
+        ]
+      }
+    );
+  }
+), c = I.colors.indicator, M = {
   // High Attention - Red
   error: {
-    color: n.error.fg,
-    backgroundColor: n.error.bg,
+    color: c.error.fg,
+    backgroundColor: c.error.bg,
     icon: "error",
     shape: "circle",
     severity: "high",
     label: "Error"
   },
   critical: {
-    color: n.critical.fg,
-    backgroundColor: n.critical.bg,
+    color: c.critical.fg,
+    backgroundColor: c.critical.bg,
     icon: "warning",
     shape: "hexagon",
     severity: "high",
     label: "Critical"
   },
   failed: {
-    color: n.failed.fg,
-    backgroundColor: n.failed.bg,
+    color: c.failed.fg,
+    backgroundColor: c.failed.bg,
     icon: "close",
     shape: "circle",
     severity: "high",
     label: "Failed"
   },
   rejected: {
-    color: n.rejected.fg,
-    backgroundColor: n.rejected.bg,
+    color: c.rejected.fg,
+    backgroundColor: c.rejected.bg,
     icon: "close",
     shape: "circle",
     severity: "high",
     label: "Rejected"
   },
   cancelled: {
-    color: n.cancelled.fg,
-    backgroundColor: n.cancelled.bg,
+    color: c.cancelled.fg,
+    backgroundColor: c.cancelled.bg,
     icon: "close",
     shape: "circle",
     severity: "neutral",
@@ -853,43 +851,43 @@ const Me = ({
   },
   // Medium Attention - Orange/Yellow
   warning: {
-    color: n.warning.fg,
-    backgroundColor: n.warning.bg,
-    outlineColor: n.warning.outline,
+    color: c.warning.fg,
+    backgroundColor: c.warning.bg,
+    outlineColor: c.warning.outline,
     icon: "warning",
     shape: "triangle",
     severity: "medium",
     label: "Warning"
   },
   caution: {
-    color: n.caution.fg,
-    backgroundColor: n.caution.bg,
-    outlineColor: n.caution.outline,
+    color: c.caution.fg,
+    backgroundColor: c.caution.bg,
+    outlineColor: c.caution.outline,
     icon: "warning",
     shape: "triangle",
     severity: "medium",
     label: "Caution"
   },
   pending: {
-    color: n.pending.fg,
-    backgroundColor: n.pending.bg,
-    outlineColor: n.pending.outline,
+    color: c.pending.fg,
+    backgroundColor: c.pending.bg,
+    outlineColor: c.pending.outline,
     icon: "clock",
     shape: "circle",
     severity: "medium",
     label: "Pending"
   },
   "in-progress": {
-    color: n.inProgress.fg,
-    backgroundColor: n.inProgress.bg,
+    color: c.inProgress.fg,
+    backgroundColor: c.inProgress.bg,
     icon: "refresh",
     shape: "circle",
     severity: "medium",
     label: "In Progress"
   },
   running: {
-    color: n.running.fg,
-    backgroundColor: n.running.bg,
+    color: c.running.fg,
+    backgroundColor: c.running.bg,
     icon: "play",
     shape: "circle",
     severity: "medium",
@@ -897,40 +895,40 @@ const Me = ({
   },
   // Low Attention - Green
   success: {
-    color: n.success.fg,
-    backgroundColor: n.success.bg,
+    color: c.success.fg,
+    backgroundColor: c.success.bg,
     icon: "check-circle",
     shape: "circle",
     severity: "low",
     label: "Success"
   },
   complete: {
-    color: n.complete.fg,
-    backgroundColor: n.complete.bg,
+    color: c.complete.fg,
+    backgroundColor: c.complete.bg,
     icon: "check",
     shape: "circle",
     severity: "low",
     label: "Complete"
   },
   approved: {
-    color: n.approved.fg,
-    backgroundColor: n.approved.bg,
+    color: c.approved.fg,
+    backgroundColor: c.approved.bg,
     icon: "check-circle",
     shape: "circle",
     severity: "low",
     label: "Approved"
   },
   active: {
-    color: n.active.fg,
-    backgroundColor: n.active.bg,
+    color: c.active.fg,
+    backgroundColor: c.active.bg,
     icon: "check",
     shape: "circle",
     severity: "low",
     label: "Active"
   },
   enabled: {
-    color: n.enabled.fg,
-    backgroundColor: n.enabled.bg,
+    color: c.enabled.fg,
+    backgroundColor: c.enabled.bg,
     icon: "check",
     shape: "circle",
     severity: "low",
@@ -938,24 +936,24 @@ const Me = ({
   },
   // Informational - Blue
   info: {
-    color: n.info.fg,
-    backgroundColor: n.info.bg,
+    color: c.info.fg,
+    backgroundColor: c.info.bg,
     icon: "info",
     shape: "circle",
     severity: "info",
     label: "Info"
   },
   new: {
-    color: n.new.fg,
-    backgroundColor: n.new.bg,
+    color: c.new.fg,
+    backgroundColor: c.new.bg,
     icon: "star",
     shape: "circle",
     severity: "info",
     label: "New"
   },
   updated: {
-    color: n.updated.fg,
-    backgroundColor: n.updated.bg,
+    color: c.updated.fg,
+    backgroundColor: c.updated.bg,
     icon: "refresh",
     shape: "circle",
     severity: "info",
@@ -963,32 +961,32 @@ const Me = ({
   },
   // Neutral - Gray
   draft: {
-    color: n.draft.fg,
-    backgroundColor: n.draft.bg,
+    color: c.draft.fg,
+    backgroundColor: c.draft.bg,
     icon: "edit",
     shape: "circle",
     severity: "neutral",
     label: "Draft"
   },
   inactive: {
-    color: n.inactive.fg,
-    backgroundColor: n.inactive.bg,
+    color: c.inactive.fg,
+    backgroundColor: c.inactive.bg,
     icon: "remove",
     shape: "circle",
     severity: "neutral",
     label: "Inactive"
   },
   disabled: {
-    color: n.disabled.fg,
-    backgroundColor: n.disabled.bg,
+    color: c.disabled.fg,
+    backgroundColor: c.disabled.bg,
     icon: "close",
     shape: "circle",
     severity: "neutral",
     label: "Disabled"
   },
   unknown: {
-    color: n.unknown.fg,
-    backgroundColor: n.unknown.bg,
+    color: c.unknown.fg,
+    backgroundColor: c.unknown.bg,
     icon: "help",
     shape: "circle",
     severity: "neutral",
@@ -996,26 +994,26 @@ const Me = ({
   },
   // Special - Purple
   beta: {
-    color: n.beta.fg,
-    backgroundColor: n.beta.bg,
+    color: c.beta.fg,
+    backgroundColor: c.beta.bg,
     icon: "zap",
     shape: "diamond",
     severity: "info",
     label: "Beta"
   },
   experimental: {
-    color: n.experimental.fg,
-    backgroundColor: n.experimental.bg,
+    color: c.experimental.fg,
+    backgroundColor: c.experimental.bg,
     icon: "code",
     shape: "diamond",
     severity: "info",
     label: "Experimental"
   }
-}, P = {
+}, B = {
   small: { icon: 16, shape: 8, fontSize: "0.75rem", dotSize: 8 },
   medium: { icon: 20, shape: 10, fontSize: "0.875rem", dotSize: 10 },
   large: { icon: 24, shape: 12, fontSize: "1rem", dotSize: 12 }
-}, Xe = ({ size: t, color: r, outline: i }) => /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 16 16", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "7", fill: r, stroke: i, strokeWidth: i ? 1.5 : 0 }) }), Ye = ({ size: t, color: r, outline: i }) => /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 16 16", children: /* @__PURE__ */ e("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", fill: r, stroke: i, strokeWidth: i ? 1.5 : 0 }) }), ei = ({ size: t, color: r, outline: i }) => /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
+}, Ye = ({ size: r, color: i, outline: t }) => /* @__PURE__ */ e("svg", { width: r, height: r, viewBox: "0 0 16 16", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "7", fill: i, stroke: t, strokeWidth: t ? 1.5 : 0 }) }), ei = ({ size: r, color: i, outline: t }) => /* @__PURE__ */ e("svg", { width: r, height: r, viewBox: "0 0 16 16", children: /* @__PURE__ */ e("rect", { x: "2", y: "2", width: "12", height: "12", rx: "2", fill: i, stroke: t, strokeWidth: t ? 1.5 : 0 }) }), ii = ({ size: r, color: i, outline: t }) => /* @__PURE__ */ e("svg", { width: r, height: r, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
   "rect",
   {
     x: "3",
@@ -1023,100 +1021,100 @@ const Me = ({
     width: "10",
     height: "10",
     rx: "1",
-    fill: r,
-    stroke: i,
-    strokeWidth: i ? 1.5 : 0,
+    fill: i,
+    stroke: t,
+    strokeWidth: t ? 1.5 : 0,
     transform: "rotate(45 8 8)"
   }
-) }), ii = ({ size: t, color: r, outline: i }) => /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
+) }), ti = ({ size: r, color: i, outline: t }) => /* @__PURE__ */ e("svg", { width: r, height: r, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
   "path",
   {
     d: "M8 2L14 14H2L8 2Z",
-    fill: r,
-    stroke: i,
-    strokeWidth: i ? 1.5 : 0,
+    fill: i,
+    stroke: t,
+    strokeWidth: t ? 1.5 : 0,
     strokeLinejoin: "round"
   }
-) }), ti = ({ size: t, color: r, outline: i }) => /* @__PURE__ */ e("svg", { width: t, height: t, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
+) }), ri = ({ size: r, color: i, outline: t }) => /* @__PURE__ */ e("svg", { width: r, height: r, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
   "polygon",
   {
     points: "8,1 14,4.5 14,11.5 8,15 2,11.5 2,4.5",
-    fill: r,
-    stroke: i,
-    strokeWidth: i ? 1.5 : 0
+    fill: i,
+    stroke: t,
+    strokeWidth: t ? 1.5 : 0
   }
-) }), X = {
-  circle: Xe,
-  square: Ye,
-  diamond: ei,
-  triangle: ii,
-  hexagon: ti
-}, ri = (t, r, i, o, c, a) => {
-  const l = W[t], d = P[r];
-  return c ? /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", spacing: 1, sx: a, role: "status", children: [
+) }), Y = {
+  circle: Ye,
+  square: ei,
+  diamond: ii,
+  triangle: ti,
+  hexagon: ri
+}, oi = (r, i, t, o, n, l) => {
+  const a = M[r], s = B[i];
+  return n ? /* @__PURE__ */ f(P, { direction: "row", spacing: 1, sx: { ...l, alignItems: "center" }, role: "status", children: [
     /* @__PURE__ */ e(
-      T,
+      E,
       {
-        name: l.icon,
-        size: r,
-        sx: { color: l.backgroundColor },
+        name: a.icon,
+        size: i,
+        sx: { color: a.backgroundColor },
         "aria-hidden": "true"
       }
     ),
-    o && /* @__PURE__ */ e(k, { variant: "body2", sx: { fontSize: d.fontSize }, children: i })
-  ] }) : /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", spacing: 1, sx: a, role: "status", children: [
+    o && /* @__PURE__ */ e(S, { variant: "body2", sx: { fontSize: s.fontSize }, children: t })
+  ] }) : /* @__PURE__ */ f(P, { direction: "row", spacing: 1, sx: { ...l, alignItems: "center" }, role: "status", children: [
     /* @__PURE__ */ e(
-      v,
+      C,
       {
         sx: {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          width: d.icon + 8,
-          height: d.icon + 8,
-          borderRadius: `${L.borders.radius.circle}px`,
+          width: s.icon + 8,
+          height: s.icon + 8,
+          borderRadius: `${I.borders.radius.circle}px`,
           // Perfect circle
-          backgroundColor: l.backgroundColor,
-          color: l.color
+          backgroundColor: a.backgroundColor,
+          color: a.color
         },
         "aria-hidden": "true",
-        children: /* @__PURE__ */ e(T, { name: l.icon, size: r === "large" ? "medium" : "small" })
+        children: /* @__PURE__ */ e(E, { name: a.icon, size: i === "large" ? "medium" : "small" })
       }
     ),
-    o && /* @__PURE__ */ e(k, { variant: "body2", sx: { fontSize: d.fontSize }, children: i })
+    o && /* @__PURE__ */ e(S, { variant: "body2", sx: { fontSize: s.fontSize }, children: t })
   ] });
-}, oi = (t, r, i, o, c, a, l) => {
-  const d = W[t], g = P[r], u = c || d.shape, s = X[u];
-  return /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", spacing: 1, sx: l, role: "status", children: [
-    /* @__PURE__ */ e(v, { "aria-hidden": "true", children: /* @__PURE__ */ e(
-      s,
+}, ni = (r, i, t, o, n, l, a) => {
+  const s = M[r], g = B[i], x = n || s.shape, p = Y[x];
+  return /* @__PURE__ */ f(P, { direction: "row", spacing: 1, sx: { ...a, alignItems: "center" }, role: "status", children: [
+    /* @__PURE__ */ e(C, { "aria-hidden": "true", children: /* @__PURE__ */ e(
+      p,
       {
         size: g.shape * 1.6,
-        color: d.backgroundColor,
-        outline: a ? d.outlineColor : void 0
+        color: s.backgroundColor,
+        outline: l ? s.outlineColor : void 0
       }
     ) }),
-    o && /* @__PURE__ */ e(k, { variant: "body2", sx: { fontSize: g.fontSize }, children: i })
+    o && /* @__PURE__ */ e(S, { variant: "body2", sx: { fontSize: g.fontSize }, children: t })
   ] });
-}, ni = (t, r, i, o) => {
-  const c = W[t], a = P[r];
+}, li = (r, i, t, o) => {
+  const n = M[r], l = B[i];
   return /* @__PURE__ */ e(
-    v,
+    C,
     {
       role: "status",
-      "aria-label": c.label,
+      "aria-label": n.label,
       sx: {
-        width: a.dotSize,
-        height: a.dotSize,
-        borderRadius: `${L.borders.radius.circle}px`,
+        width: l.dotSize,
+        height: l.dotSize,
+        borderRadius: `${I.borders.radius.circle}px`,
         // Perfect circle
-        backgroundColor: c.backgroundColor,
+        backgroundColor: n.backgroundColor,
         flexShrink: 0,
-        ...i && {
+        ...t && {
           animation: "statusPulse 2s infinite",
           "@keyframes statusPulse": {
-            "0%": { boxShadow: `0 0 0 0 ${c.backgroundColor}80` },
-            "70%": { boxShadow: `0 0 0 ${a.dotSize}px transparent` },
+            "0%": { boxShadow: `0 0 0 0 ${n.backgroundColor}80` },
+            "70%": { boxShadow: `0 0 0 ${l.dotSize}px transparent` },
             "100%": { boxShadow: "0 0 0 0 transparent" }
           }
         },
@@ -1124,243 +1122,248 @@ const Me = ({
       }
     }
   );
-}, li = (t, r, i, o, c, a, l) => {
-  const d = W[t];
+}, ci = (r, i, t, o, n, l, a) => {
+  const s = M[r];
   return /* @__PURE__ */ e(
-    ve,
+    Se,
     {
-      label: i,
-      size: r,
-      icon: o ? /* @__PURE__ */ e(T, { name: d.icon, size: "small", "aria-hidden": "true" }) : void 0,
-      onClick: c,
-      onDelete: a,
+      label: t,
+      size: i,
+      icon: o ? /* @__PURE__ */ e(E, { name: s.icon, size: "small", "aria-hidden": "true" }) : void 0,
+      onClick: n,
+      onDelete: l,
       role: "status",
       sx: {
-        backgroundColor: `${d.backgroundColor}20`,
-        color: d.backgroundColor,
-        borderColor: d.backgroundColor,
+        backgroundColor: `${s.backgroundColor}20`,
+        color: s.backgroundColor,
+        borderColor: s.backgroundColor,
         "& .MuiChip-icon": {
-          color: d.backgroundColor
+          color: s.backgroundColor
         },
         "& .MuiChip-deleteIcon": {
-          color: d.backgroundColor,
+          color: s.backgroundColor,
           "&:hover": {
-            color: d.backgroundColor
+            color: s.backgroundColor
           }
         },
-        ...l
+        ...a
       },
       variant: "outlined"
     }
   );
-}, ci = (t, r, i, o, c, a) => {
-  const l = W[t], d = P[r];
-  return /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", spacing: 1, sx: a, role: "status", children: [
+}, ai = (r, i, t, o, n, l) => {
+  const a = M[r], s = B[i];
+  return /* @__PURE__ */ f(P, { direction: "row", spacing: 1, sx: { ...l, alignItems: "center" }, role: "status", children: [
     o && /* @__PURE__ */ e(
-      v,
+      C,
       {
         "aria-hidden": "true",
         sx: {
-          width: d.dotSize,
-          height: d.dotSize,
-          borderRadius: `${L.borders.radius.circle}px`,
+          width: s.dotSize,
+          height: s.dotSize,
+          borderRadius: `${I.borders.radius.circle}px`,
           // Perfect circle
-          backgroundColor: l.backgroundColor,
+          backgroundColor: a.backgroundColor,
           flexShrink: 0
         }
       }
     ),
-    c && !o && /* @__PURE__ */ e(
-      T,
+    n && !o && /* @__PURE__ */ e(
+      E,
       {
-        name: l.icon,
-        size: r === "large" ? "medium" : "small",
-        sx: { color: l.backgroundColor },
+        name: a.icon,
+        size: i === "large" ? "medium" : "small",
+        sx: { color: a.backgroundColor },
         "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ e(
-      k,
+      S,
       {
         variant: "body2",
         sx: {
-          fontSize: d.fontSize,
-          color: l.backgroundColor,
+          fontSize: s.fontSize,
+          color: a.backgroundColor,
           fontWeight: 500
         },
-        children: i
+        children: t
       }
     )
   ] });
-}, ai = (t, r, i, o, c, a, l) => {
-  const d = W[t];
+}, si = (r, i, t, o, n, l, a) => {
+  const s = M[r];
   return /* @__PURE__ */ e(
-    ke,
+    ve,
     {
-      badgeContent: o ? void 0 : i,
-      max: c,
+      badgeContent: o ? void 0 : t,
+      max: n,
       variant: o ? "dot" : "standard",
-      invisible: a,
+      invisible: l,
       sx: {
         "& .MuiBadge-badge": {
-          backgroundColor: d.backgroundColor,
-          color: d.color,
+          backgroundColor: s.backgroundColor,
+          color: s.color,
           fontSize: "0.7rem",
           minWidth: o ? 8 : 18,
           height: o ? 8 : 18,
           padding: o ? 0 : "0 4px"
         },
-        ...l
+        ...a
       },
-      children: r
+      children: i
     }
   );
-}, si = (t, r, i, o, c, a, l, d, g) => {
-  const u = P[r], s = t >= 0, I = a !== !1 ? s ? l || "#24a148" : d || "#da1e28" : "inherit", y = () => {
-    const D = Math.abs(t), M = s ? "+" : "-";
-    return o ? `${M}${o}${D.toLocaleString()}` : i ? `${M}${D}%` : `${M}${D.toLocaleString()}`;
+}, di = (r, i, t, o, n, l, a, s, g) => {
+  const x = B[i], p = r >= 0, h = l !== !1 ? p ? a || "#24a148" : s || "#da1e28" : "inherit", L = () => {
+    const z = Math.abs(r), m = p ? "+" : "-";
+    return o ? `${m}${o}${z.toLocaleString()}` : t ? `${m}${z}%` : `${m}${z.toLocaleString()}`;
   };
   return /* @__PURE__ */ f(
-    z,
+    P,
     {
       direction: "row",
-      alignItems: "center",
       spacing: 0.5,
-      sx: { color: I, ...g },
+      sx: { color: h, ...g, alignItems: "center" },
       role: "status",
-      "aria-label": `${s ? "Increased" : "Decreased"} by ${y()}`,
+      "aria-label": `${p ? "Increased" : "Decreased"} by ${L()}`,
       children: [
-        c !== !1 && /* @__PURE__ */ e(
-          T,
+        n !== !1 && /* @__PURE__ */ e(
+          E,
           {
-            name: s ? "trending-up" : "trending-down",
-            size: r === "large" ? "medium" : "small",
+            name: p ? "trending-up" : "trending-down",
+            size: i === "large" ? "medium" : "small",
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ e(
-          k,
+          S,
           {
             variant: "body2",
             sx: {
-              fontSize: u.fontSize,
+              fontSize: x.fontSize,
               fontWeight: 500,
               fontFamily: "monospace"
             },
-            children: y()
+            children: L()
           }
         )
       ]
     }
   );
-}, Ii = (t) => {
-  const {
-    variant: r = "icon",
-    status: i = "info",
-    size: o = "medium",
-    label: c,
-    showLabel: a = !0,
-    sx: l,
-    "aria-label": d
-  } = t, g = W[i], u = c || g.label;
-  switch (r) {
-    case "icon":
-    case void 0:
-      return ri(
-        i,
-        o,
-        u,
-        a,
-        t.iconOnly || !1,
-        l
-      );
-    case "shape": {
-      const s = t;
-      return oi(
-        i,
-        o,
-        u,
-        a,
-        s.shape,
-        s.showOutline ?? !0,
-        l
-      );
-    }
-    case "dot":
-      return ni(i, o, t.pulse || !1, l);
-    case "chip": {
-      const s = t;
-      return li(
-        i,
-        o === "large" ? "medium" : o,
-        u,
-        s.showIcon ?? !0,
-        s.onClick,
-        s.onDelete,
-        l
-      );
-    }
-    case "inline": {
-      const s = t;
-      return ci(
-        i,
-        o,
-        u,
-        s.showDot ?? !0,
-        s.showIcon ?? !1,
-        l
-      );
-    }
-    case "badge": {
-      const s = t;
-      return ai(
-        i,
-        s.children,
-        s.count,
-        s.dot,
-        s.max ?? 999,
-        s.invisible,
-        l
-      );
-    }
-    case "differential": {
-      const s = t;
-      return si(
-        s.value,
-        o,
-        s.percentage || !1,
-        s.currency,
-        s.showIcon,
-        s.showColor,
-        s.positiveColor,
-        s.negativeColor,
-        l
-      );
-    }
-    default:
-      return null;
+}, Di = D.forwardRef(
+  function(i, t) {
+    const {
+      variant: o = "icon",
+      status: n = "info",
+      size: l = "medium",
+      label: a,
+      showLabel: s = !0,
+      sx: g,
+      "aria-label": x
+    } = i, p = M[n], v = a || p.label, w = (() => {
+      switch (o) {
+        case "icon":
+        case void 0:
+          return oi(
+            n,
+            l,
+            v,
+            s,
+            i.iconOnly || !1,
+            g
+          );
+        case "shape": {
+          const h = i;
+          return ni(
+            n,
+            l,
+            v,
+            s,
+            h.shape,
+            h.showOutline ?? !0,
+            g
+          );
+        }
+        case "dot":
+          return li(n, l, i.pulse || !1, g);
+        case "chip": {
+          const h = i;
+          return ci(
+            n,
+            l === "large" ? "medium" : l,
+            v,
+            h.showIcon ?? !0,
+            h.onClick,
+            h.onDelete,
+            g
+          );
+        }
+        case "inline": {
+          const h = i;
+          return ai(
+            n,
+            l,
+            v,
+            h.showDot ?? !0,
+            h.showIcon ?? !1,
+            g
+          );
+        }
+        case "badge": {
+          const h = i;
+          return si(
+            n,
+            h.children,
+            h.count,
+            h.dot,
+            h.max ?? 999,
+            h.invisible,
+            g
+          );
+        }
+        case "differential": {
+          const h = i;
+          return di(
+            h.value,
+            l,
+            h.percentage || !1,
+            h.currency,
+            h.showIcon,
+            h.showColor,
+            h.positiveColor,
+            h.negativeColor,
+            g
+          );
+        }
+        default:
+          return null;
+      }
+    })();
+    return !w || !D.isValidElement(w) ? w : D.cloneElement(w, {
+      ref: t
+    });
   }
-}, di = ({
-  status: t,
-  size: r = "medium",
-  pulse: i = !1,
+), hi = ({
+  status: r,
+  size: i = "medium",
+  pulse: t = !1,
   sx: o
 }) => {
-  const c = W[t], a = P[r];
+  const n = M[r], l = B[i];
   return /* @__PURE__ */ e(
-    v,
+    C,
     {
       sx: {
-        width: a.dotSize,
-        height: a.dotSize,
-        borderRadius: `${L.borders.radius.circle}px`,
+        width: l.dotSize,
+        height: l.dotSize,
+        borderRadius: `${I.borders.radius.circle}px`,
         // Perfect circle
-        backgroundColor: c.backgroundColor,
-        ...i && {
+        backgroundColor: n.backgroundColor,
+        ...t && {
           animation: "pulse 2s infinite",
           "@keyframes pulse": {
-            "0%": { boxShadow: `0 0 0 0 ${c.backgroundColor}80` },
-            "70%": { boxShadow: `0 0 0 ${a.dotSize}px transparent` },
+            "0%": { boxShadow: `0 0 0 0 ${n.backgroundColor}80` },
+            "70%": { boxShadow: `0 0 0 ${l.dotSize}px transparent` },
             "100%": { boxShadow: "0 0 0 0 transparent" }
           }
         },
@@ -1368,87 +1371,86 @@ const Me = ({
       }
     }
   );
-}, zi = ({
-  items: t,
-  variant: r = "dot",
-  direction: i = "row",
+}, Mi = ({
+  items: r,
+  variant: i = "dot",
+  direction: t = "row",
   size: o = "small",
-  sx: c
+  sx: n
 }) => {
-  const a = P[o];
+  const l = B[o];
   return /* @__PURE__ */ e(
-    z,
+    P,
     {
-      direction: i,
-      spacing: i === "row" ? 3 : 1,
-      flexWrap: "wrap",
+      direction: t,
+      spacing: t === "row" ? 3 : 1,
       useFlexGap: !0,
-      sx: c,
-      children: t.map((l, d) => {
-        const g = W[l.status], u = l.label || g.label;
-        return /* @__PURE__ */ f(z, { direction: "row", alignItems: "center", spacing: 1, children: [
-          r === "icon" && /* @__PURE__ */ e(
-            v,
+      sx: { ...n, flexWrap: "wrap" },
+      children: r.map((a, s) => {
+        const g = M[a.status], x = a.label || g.label;
+        return /* @__PURE__ */ f(P, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
+          i === "icon" && /* @__PURE__ */ e(
+            C,
             {
               sx: {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                width: a.icon + 4,
-                height: a.icon + 4,
-                borderRadius: `${L.borders.radius.circle}px`,
+                width: l.icon + 4,
+                height: l.icon + 4,
+                borderRadius: `${I.borders.radius.circle}px`,
                 // Perfect circle
                 backgroundColor: g.backgroundColor,
                 color: g.color
               },
-              children: /* @__PURE__ */ e(T, { name: g.icon, size: "small" })
+              children: /* @__PURE__ */ e(E, { name: g.icon, size: "small" })
             }
           ),
-          r === "shape" && (() => {
-            const s = X[g.shape];
+          i === "shape" && (() => {
+            const p = Y[g.shape];
             return /* @__PURE__ */ e(
-              s,
+              p,
               {
-                size: a.shape * 1.4,
+                size: l.shape * 1.4,
                 color: g.backgroundColor,
                 outline: g.outlineColor
               }
             );
           })(),
-          r === "dot" && /* @__PURE__ */ e(di, { status: l.status, size: o }),
-          /* @__PURE__ */ f(k, { variant: "body2", sx: { fontSize: a.fontSize }, children: [
-            u,
-            l.count !== void 0 && /* @__PURE__ */ f(
-              k,
+          i === "dot" && /* @__PURE__ */ e(hi, { status: a.status, size: o }),
+          /* @__PURE__ */ f(S, { variant: "body2", sx: { fontSize: l.fontSize }, children: [
+            x,
+            a.count !== void 0 && /* @__PURE__ */ f(
+              S,
               {
                 component: "span",
                 sx: {
                   ml: 0.5,
                   color: "text.secondary",
-                  fontSize: a.fontSize
+                  fontSize: l.fontSize
                 },
                 children: [
                   "(",
-                  l.count,
+                  a.count,
                   ")"
                 ]
               }
             )
           ] })
-        ] }, d);
+        ] }, s);
       })
     }
   );
 };
 export {
-  ki as C,
-  Ci as I,
-  Me as M,
-  Ii as S,
-  Si as T,
-  Wi as U,
-  zi as a,
-  Li as b,
-  $e as c,
-  vi as u
+  Si as C,
+  Ii as I,
+  Pe as M,
+  Di as S,
+  Ci as T,
+  zi as U,
+  Mi as a,
+  Wi as b,
+  Re as c,
+  Li as u
 };