@trinityui/design-system 2.4.0 → 2.10.2

package/dist/{Legend.js → IllustratedMessage.js}

@@ -1,849 +1,50 @@
-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 { 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";
-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: i.interactive.default,
-      primaryColor: "primary"
-    },
-    info: {
-      icon: /* @__PURE__ */ e(ze, {}),
-      color: i.status.info.text,
-      primaryColor: "info"
-    },
-    success: {
-      icon: /* @__PURE__ */ e(Ce, {}),
-      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 Pe = D.forwardRef(function({
-  open: i,
-  onClose: t,
-  title: o,
-  children: n,
-  variant: l = "default",
-  primaryAction: a,
-  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: 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 Z;
-        } finally {
-          _(!1);
-        }
-      }
-    }
-  }, te = () => {
-    x?.(), t();
-  }, V = p || $, A = D.useId(), N = D.useId();
-  return /* @__PURE__ */ f(
-    ae,
-    {
-      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: I.borders.radiusPx.lg,
-          // 12px
-          ...y
-        }
-      },
-      children: [
-        (o || w) && /* @__PURE__ */ f(
-          se,
-          {
-            id: A,
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1.5,
-              pr: w ? 6 : 3
-            },
-            children: [
-              R.icon && /* @__PURE__ */ e(
-                C,
-                {
-                  sx: {
-                    width: I.iconSize.display + 4,
-                    // 40px - prominent icon with frame
-                    height: I.iconSize.display + 4,
-                    borderRadius: `${I.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: I.iconSize.prominent
-                      // 24px
-                    }
-                  },
-                  children: R.icon
-                }
-              ),
-              /* @__PURE__ */ e(S, { variant: "h6", component: "span", sx: { fontWeight: 600 }, children: o }),
-              w && /* @__PURE__ */ e(
-                de,
-                {
-                  onClick: t,
-                  disabled: V,
-                  "aria-label": "Close dialog",
-                  sx: {
-                    position: "absolute",
-                    right: 8,
-                    top: 8,
-                    color: "text.secondary"
-                  },
-                  children: /* @__PURE__ */ e(Le, {})
-                }
-              )
-            ]
-          }
-        ),
-        /* @__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: te,
-              disabled: V,
-              color: "inherit",
-              children: g
-            }
-          ),
-          a && /* @__PURE__ */ e(
-            T,
-            {
-              onClick: ie,
-              disabled: v || V,
-              variant: "contained",
-              color: R.primaryColor,
-              startIcon: V ? /* @__PURE__ */ e(ue, { size: 16, color: "inherit" }) : void 0,
-              children: a
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
-}), Si = ({
-  open: r,
-  onClose: i,
-  onConfirm: t,
-  title: o = "Confirm Action",
-  message: n = "Are you sure you want to proceed?",
-  confirmLabel: l = "Confirm",
-  cancelLabel: a = "Cancel",
-  variant: s = "default",
-  loading: g = !1
-}) => /* @__PURE__ */ e(
-  Pe,
-  {
-    open: r,
-    onClose: i,
-    title: o,
-    variant: s === "default" ? "confirm" : s,
-    primaryAction: l,
-    onPrimaryAction: t,
-    secondaryAction: a,
-    loading: g,
-    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: () => {
-  }
-}, Li = () => {
-  const [r, i] = O(H), t = W(
-    (n) => {
-      i({
-        ...H,
-        ...n,
-        isOpen: !0
-      });
-    },
-    []
-  ), o = W(() => {
-    i((n) => ({ ...n, isOpen: !1 }));
-  }, []);
-  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 q;
-    case "grow":
-      return Be;
-    case "fade":
-      return Te;
-    default:
-      return q;
-  }
-}, Re = D.forwardRef(function({
-  id: i,
-  message: t,
-  title: o,
-  severity: n = "info",
-  duration: l = 5e3,
-  action: a,
-  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(
-    xe,
-    {
-      ref: h,
-      open: v,
-      autoHideDuration: l,
-      onClose: w,
-      anchorOrigin: L,
-      slots: { transition: z },
-      children: /* @__PURE__ */ f(
-        ye,
-        {
-          severity: n,
-          variant: "filled",
-          onClose: p ? w : void 0,
-          action: a ? /* @__PURE__ */ e(T, { color: "inherit", size: "small", onClick: () => {
-            s?.(), w();
-          }, children: a }) : void 0,
-          sx: {
-            width: "100%",
-            minWidth: 300,
-            maxWidth: 500,
-            boxShadow: 3,
-            "& .MuiAlert-message": {
-              flex: 1
-            }
-          },
-          children: [
-            o && /* @__PURE__ */ e(me, { children: o }),
-            t
-          ]
-        }
-      )
-    }
-  );
-}), Ci = ({
-  children: r,
-  defaultPosition: i = "top-right",
-  defaultDuration: t = 5e3,
-  maxToasts: o = 5,
-  defaultTransition: n = "slide"
-}) => {
-  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: u.position ?? i,
-        duration: u.duration ?? t,
-        transition: u.transition ?? n,
-        dismissible: u.dismissible ?? !0
-      };
-      return a((j) => {
-        const $ = [...j, b];
-        return $.length > o ? $.slice(-o) : $;
-      }), y;
-    },
-    [g, i, t, n, o]
-  ), p = W((u) => {
-    a(
-      (y) => y.map((b) => b.id === u ? { ...b, open: !1 } : b)
-    ), setTimeout(() => {
-      a((y) => y.filter((b) => b.id !== u));
-    }, 300);
-  }, []), v = W(() => {
-    a((u) => u.map((y) => ({ ...y, open: !1 }))), setTimeout(() => {
-      a([]);
-    }, 300);
-  }, []), 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(J.Provider, { value: F, children: [
-    r,
-    /* @__PURE__ */ e(pe, { children: Object.entries(Q).map(([u, y]) => /* @__PURE__ */ e(
-      C,
-      {
-        sx: {
-          position: "fixed",
-          zIndex: 9999,
-          ...Ve(u),
-          display: "flex",
-          flexDirection: "column",
-          gap: 1,
-          pointerEvents: "none",
-          "& > *": {
-            pointerEvents: "auto"
-          }
-        },
-        children: y.map((b) => /* @__PURE__ */ e(Re, { ...b, onClose: () => p(b.id) }, b.id))
-      },
-      u
-    )) })
-  ] });
-}, 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 r;
-}, k = {
-  // Error/danger - Tailwind red-500
-  error: {
-    main: "#EF4444",
-    light: "#FEE2E2"
-  },
-  // Warning/caution - Tailwind amber-500
-  warning: {
-    main: "#F59E0B",
-    light: "#FEF3C7"
-  },
-  // Success/positive - Tailwind emerald-500
-  success: {
-    main: "#10B981",
-    light: "#D1FAE5"
-  },
-  // Accent/highlight - Yellow for flames/sparks
-  accent: {
-    flame: "#FFD93D"
-  }
-}, K = {
-  small: {
-    illustrationSize: 120,
-    titleVariant: "subtitle1",
-    descriptionVariant: "body2",
-    spacing: 2,
-    padding: 3
-  },
-  medium: {
-    illustrationSize: 180,
-    titleVariant: "h6",
-    descriptionVariant: "body1",
-    spacing: 3,
-    padding: 4
-  },
-  large: {
-    illustrationSize: 240,
-    titleVariant: "h5",
-    descriptionVariant: "body1",
-    spacing: 4,
-    padding: 6
-  }
-}, 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: 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 })
-  ] })
-] }), je = ({
-  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" })
-] }), 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" })
-] }), 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: i })
-] }), _e = ({
-  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: 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: 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: 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" })
-  ] })
-] }), 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: 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: 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: 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" })
-] }), qe = ({
-  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: 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": 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
-        },
-        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 = {
+const a = W.colors.indicator, z = {
   // High Attention - Red
   error: {
-    color: c.error.fg,
-    backgroundColor: c.error.bg,
+    color: a.error.fg,
+    backgroundColor: a.error.bg,
     icon: "error",
     shape: "circle",
     severity: "high",
     label: "Error"
   },
   critical: {
-    color: c.critical.fg,
-    backgroundColor: c.critical.bg,
+    color: a.critical.fg,
+    backgroundColor: a.critical.bg,
     icon: "warning",
     shape: "hexagon",
     severity: "high",
     label: "Critical"
   },
   failed: {
-    color: c.failed.fg,
-    backgroundColor: c.failed.bg,
+    color: a.failed.fg,
+    backgroundColor: a.failed.bg,
     icon: "close",
     shape: "circle",
     severity: "high",
     label: "Failed"
   },
   rejected: {
-    color: c.rejected.fg,
-    backgroundColor: c.rejected.bg,
+    color: a.rejected.fg,
+    backgroundColor: a.rejected.bg,
     icon: "close",
     shape: "circle",
     severity: "high",
     label: "Rejected"
   },
   cancelled: {
-    color: c.cancelled.fg,
-    backgroundColor: c.cancelled.bg,
+    color: a.cancelled.fg,
+    backgroundColor: a.cancelled.bg,
     icon: "close",
     shape: "circle",
     severity: "neutral",
@@ -851,43 +52,43 @@ const Pe = D.forwardRef(function({
   },
   // Medium Attention - Orange/Yellow
   warning: {
-    color: c.warning.fg,
-    backgroundColor: c.warning.bg,
-    outlineColor: c.warning.outline,
+    color: a.warning.fg,
+    backgroundColor: a.warning.bg,
+    outlineColor: a.warning.outline,
     icon: "warning",
     shape: "triangle",
     severity: "medium",
     label: "Warning"
   },
   caution: {
-    color: c.caution.fg,
-    backgroundColor: c.caution.bg,
-    outlineColor: c.caution.outline,
+    color: a.caution.fg,
+    backgroundColor: a.caution.bg,
+    outlineColor: a.caution.outline,
     icon: "warning",
     shape: "triangle",
     severity: "medium",
     label: "Caution"
   },
   pending: {
-    color: c.pending.fg,
-    backgroundColor: c.pending.bg,
-    outlineColor: c.pending.outline,
+    color: a.pending.fg,
+    backgroundColor: a.pending.bg,
+    outlineColor: a.pending.outline,
     icon: "clock",
     shape: "circle",
     severity: "medium",
     label: "Pending"
   },
   "in-progress": {
-    color: c.inProgress.fg,
-    backgroundColor: c.inProgress.bg,
+    color: a.inProgress.fg,
+    backgroundColor: a.inProgress.bg,
     icon: "refresh",
     shape: "circle",
     severity: "medium",
     label: "In Progress"
   },
   running: {
-    color: c.running.fg,
-    backgroundColor: c.running.bg,
+    color: a.running.fg,
+    backgroundColor: a.running.bg,
     icon: "play",
     shape: "circle",
     severity: "medium",
@@ -895,40 +96,40 @@ const Pe = D.forwardRef(function({
   },
   // Low Attention - Green
   success: {
-    color: c.success.fg,
-    backgroundColor: c.success.bg,
+    color: a.success.fg,
+    backgroundColor: a.success.bg,
     icon: "check-circle",
     shape: "circle",
     severity: "low",
     label: "Success"
   },
   complete: {
-    color: c.complete.fg,
-    backgroundColor: c.complete.bg,
+    color: a.complete.fg,
+    backgroundColor: a.complete.bg,
     icon: "check",
     shape: "circle",
     severity: "low",
     label: "Complete"
   },
   approved: {
-    color: c.approved.fg,
-    backgroundColor: c.approved.bg,
+    color: a.approved.fg,
+    backgroundColor: a.approved.bg,
     icon: "check-circle",
     shape: "circle",
     severity: "low",
     label: "Approved"
   },
   active: {
-    color: c.active.fg,
-    backgroundColor: c.active.bg,
+    color: a.active.fg,
+    backgroundColor: a.active.bg,
     icon: "check",
     shape: "circle",
     severity: "low",
     label: "Active"
   },
   enabled: {
-    color: c.enabled.fg,
-    backgroundColor: c.enabled.bg,
+    color: a.enabled.fg,
+    backgroundColor: a.enabled.bg,
     icon: "check",
     shape: "circle",
     severity: "low",
@@ -936,24 +137,24 @@ const Pe = D.forwardRef(function({
   },
   // Informational - Blue
   info: {
-    color: c.info.fg,
-    backgroundColor: c.info.bg,
+    color: a.info.fg,
+    backgroundColor: a.info.bg,
     icon: "info",
     shape: "circle",
     severity: "info",
     label: "Info"
   },
   new: {
-    color: c.new.fg,
-    backgroundColor: c.new.bg,
+    color: a.new.fg,
+    backgroundColor: a.new.bg,
     icon: "star",
     shape: "circle",
     severity: "info",
     label: "New"
   },
   updated: {
-    color: c.updated.fg,
-    backgroundColor: c.updated.bg,
+    color: a.updated.fg,
+    backgroundColor: a.updated.bg,
     icon: "refresh",
     shape: "circle",
     severity: "info",
@@ -961,32 +162,32 @@ const Pe = D.forwardRef(function({
   },
   // Neutral - Gray
   draft: {
-    color: c.draft.fg,
-    backgroundColor: c.draft.bg,
+    color: a.draft.fg,
+    backgroundColor: a.draft.bg,
     icon: "edit",
     shape: "circle",
     severity: "neutral",
     label: "Draft"
   },
   inactive: {
-    color: c.inactive.fg,
-    backgroundColor: c.inactive.bg,
+    color: a.inactive.fg,
+    backgroundColor: a.inactive.bg,
     icon: "remove",
     shape: "circle",
     severity: "neutral",
     label: "Inactive"
   },
   disabled: {
-    color: c.disabled.fg,
-    backgroundColor: c.disabled.bg,
+    color: a.disabled.fg,
+    backgroundColor: a.disabled.bg,
     icon: "close",
     shape: "circle",
     severity: "neutral",
     label: "Disabled"
   },
   unknown: {
-    color: c.unknown.fg,
-    backgroundColor: c.unknown.bg,
+    color: a.unknown.fg,
+    backgroundColor: a.unknown.bg,
     icon: "help",
     shape: "circle",
     severity: "neutral",
@@ -994,26 +195,26 @@ const Pe = D.forwardRef(function({
   },
   // Special - Purple
   beta: {
-    color: c.beta.fg,
-    backgroundColor: c.beta.bg,
+    color: a.beta.fg,
+    backgroundColor: a.beta.bg,
     icon: "zap",
     shape: "diamond",
     severity: "info",
     label: "Beta"
   },
   experimental: {
-    color: c.experimental.fg,
-    backgroundColor: c.experimental.bg,
+    color: a.experimental.fg,
+    backgroundColor: a.experimental.bg,
     icon: "code",
     shape: "diamond",
     severity: "info",
     label: "Experimental"
   }
-}, B = {
+}, 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 }
-}, 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(
+}, 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",
@@ -1026,7 +227,7 @@ const Pe = D.forwardRef(function({
     strokeWidth: t ? 1.5 : 0,
     transform: "rotate(45 8 8)"
   }
-) }), ti = ({ size: r, color: i, outline: t }) => /* @__PURE__ */ e("svg", { width: r, height: r, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
+) }), 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",
@@ -1035,7 +236,7 @@ const Pe = D.forwardRef(function({
     strokeWidth: t ? 1.5 : 0,
     strokeLinejoin: "round"
   }
-) }), ri = ({ size: r, color: i, outline: t }) => /* @__PURE__ */ e("svg", { width: r, height: r, viewBox: "0 0 16 16", children: /* @__PURE__ */ e(
+) }), 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",
@@ -1043,26 +244,326 @@ const Pe = D.forwardRef(function({
     stroke: t,
     strokeWidth: t ? 1.5 : 0
   }
-) }), 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: [
+) }), 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(
-      E,
+      B,
       {
-        name: a.icon,
+        name: c.icon,
         size: i,
-        sx: { color: a.backgroundColor },
-        "aria-hidden": "true"
+        sx: { color: c.backgroundColor }
       }
     ),
-    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: [
+    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,
       {
@@ -1072,47 +573,35 @@ const Pe = D.forwardRef(function({
           justifyContent: "center",
           width: s.icon + 8,
           height: s.icon + 8,
-          borderRadius: `${I.borders.radius.circle}px`,
+          borderRadius: `${W.borders.radius.circle}px`,
           // Perfect circle
-          backgroundColor: a.backgroundColor,
-          color: a.color
+          backgroundColor: c.backgroundColor,
+          color: c.color
         },
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ e(E, { name: a.icon, size: i === "large" ? "medium" : "small" })
+        children: /* @__PURE__ */ e(B, { name: c.icon, size: i === "large" ? "medium" : "small" })
       }
     ),
-    o && /* @__PURE__ */ e(S, { variant: "body2", sx: { fontSize: s.fontSize }, children: t })
+    o && /* @__PURE__ */ e(S, { variant: "body2", sx: { fontSize: s.fontSize }, children: h })
   ] });
-}, 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: s.backgroundColor,
-        outline: l ? s.outlineColor : void 0
-      }
-    ) }),
-    o && /* @__PURE__ */ e(S, { variant: "body2", sx: { fontSize: g.fontSize }, children: t })
-  ] });
-}, li = (r, i, t, o) => {
-  const n = M[r], l = B[i];
+}, Oe = ({
+  status: r,
+  size: i = "medium",
+  pulse: t = !1,
+  sx: 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: `${I.borders.radius.circle}px`,
+        borderRadius: `${W.borders.radius.circle}px`,
         // Perfect circle
         backgroundColor: n.backgroundColor,
-        flexShrink: 0,
         ...t && {
-          animation: "statusPulse 2s infinite",
-          "@keyframes statusPulse": {
+          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" }
@@ -1122,335 +611,889 @@ const Pe = D.forwardRef(function({
       }
     }
   );
-}, ci = (r, i, t, o, n, l, a) => {
-  const s = M[r];
+}, Wi = ({
+  items: r,
+  variant: i = "dot",
+  direction: t = "row",
+  size: o = "small",
+  sx: n
+}) => {
+  const l = T[o];
   return /* @__PURE__ */ e(
-    Se,
+    P,
     {
-      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: `${s.backgroundColor}20`,
-        color: s.backgroundColor,
-        borderColor: s.backgroundColor,
-        "& .MuiChip-icon": {
-          color: s.backgroundColor
-        },
-        "& .MuiChip-deleteIcon": {
-          color: s.backgroundColor,
-          "&:hover": {
-            color: s.backgroundColor
-          }
-        },
-        ...a
-      },
-      variant: "outlined"
+      direction: t,
+      spacing: t === "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: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: l.icon + 4,
+                height: l.icon + 4,
+                borderRadius: `${W.borders.radius.circle}px`,
+                // Perfect circle
+                backgroundColor: h.backgroundColor,
+                color: h.color
+              },
+              children: /* @__PURE__ */ e(B, { name: h.icon, size: "small" })
+            }
+          ),
+          i === "shape" && (() => {
+            const p = J[h.shape];
+            return /* @__PURE__ */ e(
+              p,
+              {
+                size: l.shape * 1.4,
+                color: h.backgroundColor,
+                outline: h.outlineColor
+              }
+            );
+          })(),
+          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,
+              {
+                component: "span",
+                sx: {
+                  ml: 0.5,
+                  color: "text.secondary",
+                  fontSize: l.fontSize
+                },
+                children: [
+                  "(",
+                  c.count,
+                  ")"
+                ]
+              }
+            )
+          ] })
+        ] }, s);
+      })
     }
   );
-}, 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(
-      C,
-      {
-        "aria-hidden": "true",
-        sx: {
-          width: s.dotSize,
-          height: s.dotSize,
-          borderRadius: `${I.borders.radius.circle}px`,
-          // Perfect circle
-          backgroundColor: a.backgroundColor,
-          flexShrink: 0
+};
+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);
         }
       }
-    ),
-    n && !o && /* @__PURE__ */ e(
-      E,
-      {
-        name: a.icon,
-        size: i === "large" ? "medium" : "small",
-        sx: { color: a.backgroundColor },
-        "aria-hidden": "true"
-      }
-    ),
-    /* @__PURE__ */ e(
-      S,
-      {
-        variant: "body2",
-        sx: {
-          fontSize: s.fontSize,
-          color: a.backgroundColor,
-          fontWeight: 500
-        },
-        children: t
-      }
-    )
-  ] });
-}, si = (r, i, t, o, n, l, a) => {
-  const s = M[r];
-  return /* @__PURE__ */ e(
-    ve,
-    {
-      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"
-        },
-        ...a
-      },
-      children: i
     }
-  );
-}, 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()}`;
-  };
+  }, te = () => {
+    x?.(), t();
+  }, V = p || $, A = M.useId(), N = M.useId();
   return /* @__PURE__ */ f(
-    P,
+    de,
     {
-      direction: "row",
-      spacing: 0.5,
-      sx: { color: h, ...g, alignItems: "center" },
-      role: "status",
-      "aria-label": `${p ? "Increased" : "Decreased"} by ${L()}`,
+      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: [
-        n !== !1 && /* @__PURE__ */ e(
-          E,
-          {
-            name: p ? "trending-up" : "trending-down",
-            size: i === "large" ? "medium" : "small",
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ e(
-          S,
+        (o || w) && /* @__PURE__ */ f(
+          he,
           {
-            variant: "body2",
+            id: A,
             sx: {
-              fontSize: x.fontSize,
-              fontWeight: 500,
-              fontFamily: "monospace"
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              pr: w ? 6 : 3
             },
-            children: L()
+            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
+            }
+          )
+        ] }) })
       ]
     }
   );
-}, 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
-    });
+}), 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 })
   }
-), hi = ({
-  status: r,
-  size: i = "medium",
-  pulse: t = !1,
-  sx: o
+), 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) {
+    case "slide":
+      return q;
+    case "grow":
+      return Ne;
+    case "fade":
+      return Ge;
+    default:
+      return q;
+  }
+}, qe = M.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,
+    {
+      ref: g,
+      open: v,
+      autoHideDuration: l,
+      onClose: w,
+      anchorOrigin: L,
+      slots: { transition: D },
+      children: /* @__PURE__ */ f(
+        we,
+        {
+          severity: n,
+          variant: "filled",
+          onClose: p ? w : void 0,
+          action: c ? /* @__PURE__ */ e(E, { color: "inherit", size: "small", onClick: () => {
+            s?.(), w();
+          }, children: c }) : void 0,
+          sx: {
+            width: "100%",
+            minWidth: 300,
+            maxWidth: 500,
+            boxShadow: 3,
+            "& .MuiAlert-message": {
+              flex: 1
+            }
+          },
+          children: [
+            o && /* @__PURE__ */ e(be, { children: o }),
+            t
+          ]
+        }
+      )
+    }
+  );
+}), Di = ({
+  children: r,
+  defaultPosition: i = "top-right",
+  defaultDuration: t = 5e3,
+  maxToasts: o = 5,
+  defaultTransition: n = "slide"
 }) => {
-  const n = M[r], l = B[i];
-  return /* @__PURE__ */ e(
-    C,
-    {
-      sx: {
-        width: l.dotSize,
-        height: l.dotSize,
-        borderRadius: `${I.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" }
+  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,
+        open: !0,
+        position: u.position ?? i,
+        duration: u.duration ?? t,
+        transition: u.transition ?? n,
+        dismissible: u.dismissible ?? !0
+      };
+      return c((j) => {
+        const $ = [...j, b];
+        return $.length > o ? $.slice(-o) : $;
+      }), y;
+    },
+    [h, i, t, n, o]
+  ), p = I((u) => {
+    c(
+      (y) => y.map((b) => b.id === u ? { ...b, open: !1 } : b)
+    ), setTimeout(() => {
+      c((y) => y.filter((b) => b.id !== u));
+    }, 300);
+  }, []), v = I(() => {
+    c((u) => u.map((y) => ({ ...y, open: !1 }))), setTimeout(() => {
+      c([]);
+    }, 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;
+  }, {});
+  return /* @__PURE__ */ f(K.Provider, { value: F, children: [
+    r,
+    /* @__PURE__ */ e(ye, { children: Object.entries(Q).map(([u, y]) => /* @__PURE__ */ e(
+      C,
+      {
+        sx: {
+          position: "fixed",
+          zIndex: 9999,
+          ...Je(u),
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+          pointerEvents: "none",
+          "& > *": {
+            pointerEvents: "auto"
           }
         },
-        ...o
-      }
-    }
-  );
-}, Mi = ({
-  items: r,
-  variant: i = "dot",
-  direction: t = "row",
-  size: o = "small",
-  sx: n
-}) => {
-  const l = B[o];
-  return /* @__PURE__ */ e(
-    P,
-    {
-      direction: t,
-      spacing: t === "row" ? 3 : 1,
-      useFlexGap: !0,
-      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(
+        children: y.map((b) => /* @__PURE__ */ e(qe, { ...b, onClose: () => p(b.id) }, b.id))
+      },
+      u
+    )) })
+  ] });
+}, Je = (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;
+}, Mi = () => {
+  const r = le(K);
+  if (!r)
+    throw new Error("useToast must be used within a ToastProvider");
+  return r;
+}, k = {
+  // Error/danger - Tailwind red-500
+  error: {
+    main: "#EF4444",
+    light: "#FEE2E2"
+  },
+  // Warning/caution - Tailwind amber-500
+  warning: {
+    main: "#F59E0B",
+    light: "#FEF3C7"
+  },
+  // Success/positive - Tailwind emerald-500
+  success: {
+    main: "#10B981",
+    light: "#D1FAE5"
+  },
+  // Accent/highlight - Yellow for flames/sparks
+  accent: {
+    flame: "#FFD93D"
+  }
+}, X = {
+  small: {
+    illustrationSize: 120,
+    titleVariant: "subtitle1",
+    descriptionVariant: "body2",
+    spacing: 2,
+    padding: 3
+  },
+  medium: {
+    illustrationSize: 180,
+    titleVariant: "h6",
+    descriptionVariant: "body1",
+    spacing: 3,
+    padding: 4
+  },
+  large: {
+    illustrationSize: 240,
+    titleVariant: "h5",
+    descriptionVariant: "body1",
+    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,
+      {
+        ref: x,
+        sx: {
+          textAlign: "center",
+          p: p.padding,
+          maxWidth: c === "small" ? 300 : c === "large" ? 500 : 400,
+          mx: "auto",
+          ...h
+        },
+        children: [
+          /* @__PURE__ */ e(
             C,
             {
               sx: {
+                mb: p.spacing,
                 display: "flex",
-                alignItems: "center",
                 justifyContent: "center",
-                width: l.icon + 4,
-                height: l.icon + 4,
-                borderRadius: `${I.borders.radius.circle}px`,
-                // Perfect circle
-                backgroundColor: g.backgroundColor,
-                color: g.color
+                alignItems: "center"
               },
-              children: /* @__PURE__ */ e(E, { name: g.icon, size: "small" })
+              role: "img",
+              "aria-hidden": "true",
+              children: s || /* @__PURE__ */ e(v, { size: p.illustrationSize })
             }
           ),
-          i === "shape" && (() => {
-            const p = Y[g.shape];
-            return /* @__PURE__ */ e(
-              p,
-              {
-                size: l.shape * 1.4,
-                color: g.backgroundColor,
-                outline: g.outlineColor
-              }
-            );
-          })(),
-          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: l.fontSize
-                },
-                children: [
-                  "(",
-                  a.count,
-                  ")"
-                ]
-              }
-            )
-          ] })
-        ] }, s);
-      })
-    }
-  );
-};
+          /* @__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(
+                  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
+                  }
+                ))
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+), Bi = M.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);
+    };
+    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: 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"
+          },
+          ...x
+        },
+        onClick: c,
+        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 })
+        ]
+      }
+    );
+  }
+);
 export {
-  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
+  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
 };