@trinityui/design-system 2.11.0 → 2.13.0

package/dist/IllustratedMessage.js

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