@trinityui/design-system 1.0.3 → 1.0.5

package/dist/Legend.js

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