@trinityui/design-system 1.0.6 → 1.0.8

package/dist/data.js

@@ -1,1382 +1,139 @@
-import { jsx as e, jsxs as h, Fragment as We } from "react/jsx-runtime";
-import fr, { useState as G, useCallback as z, useMemo as ne } from "react";
-import { useTheme as le, Box as x, Stack as j, FormControl as br, Select as xr, MenuItem as Y, TextField as Ae, InputAdornment as ge, Tooltip as O, IconButton as W, Menu as Le, ListItemIcon as yr, ListItemText as ie, Paper as He, Toolbar as Oe, Skeleton as A, alpha as ae, Chip as wr, Typography as L, Divider as Pe, Card as Sr, CardContent as Cr } from "@mui/material";
-import { useGridApiRef as kr, GridRowEditStopReasons as vr, DataGrid as zr, GridToolbarColumnsButton as Mr, GridToolbarFilterButton as Rr, GridToolbarDensitySelector as Dr } from "@mui/x-data-grid";
-import Tr from "@mui/icons-material/Search";
-import Br from "@mui/icons-material/Refresh";
-import Ir from "@mui/icons-material/FileDownload";
-import _e from "@mui/icons-material/Add";
-import je from "@mui/icons-material/Close";
-import $r from "@mui/icons-material/Check";
-import { b as l, s as H } from "./navigation.js";
-import Fr from "@mui/icons-material/MoreVert";
-import "@mui/icons-material/CheckCircle";
-import "@mui/icons-material/Error";
-import "@mui/icons-material/Warning";
-import "@mui/icons-material/Info";
-import "@mui/icons-material/DragIndicator";
-import { InfoOutlined as Gr, MoreVert as Hr, TrendingFlat as Pr, TrendingDown as Er, TrendingUp as Wr } from "@mui/icons-material";
-const me = {
-  compact: {
-    rowHeight: 48,
-    headerHeight: 44,
-    fontSize: 12,
-    padding: "6px 8px",
-    cellPaddingY: 6,
-    avatarSize: 28,
-    avatarFontSize: 11,
-    chipHeight: 22,
-    iconSize: 14,
-    progressWidth: 80
-  },
-  standard: {
-    rowHeight: 52,
-    headerHeight: 56,
-    fontSize: 14,
-    padding: "8px 16px",
-    cellPaddingY: 8,
-    avatarSize: 32,
-    avatarFontSize: 12,
-    chipHeight: 24,
-    iconSize: 16,
-    progressWidth: 100
-  },
-  comfortable: {
-    rowHeight: 68,
-    headerHeight: 64,
-    fontSize: 14,
-    padding: "12px 16px",
-    cellPaddingY: 12,
-    avatarSize: 40,
-    avatarFontSize: 14,
-    chipHeight: 28,
-    iconSize: 18,
-    progressWidth: 120
-  }
-}, Ve = {
-  light: {
-    headerBg: "#F3F4F6",
-    headerText: l.neutral.gray600,
-    headerBorder: "#D1D5DB",
-    background: l.neutral.white,
-    alternateRow: l.neutral.lightGray,
-    hover: l.neutral.gray100,
-    selected: `${l.primary.light}14`,
-    borderColor: l.neutral.gray100,
-    text: l.neutral.gray600,
-    textSecondary: l.neutral.gray500
-  },
-  dark: {
-    headerBg: "#3F3F46",
-    headerText: l.neutral.white,
-    headerBorder: "#52525B",
-    background: l.neutral.darkBg,
-    alternateRow: l.neutral.darkPaper,
-    hover: H.effects.onDark.tint,
-    // 4% white - subtle hover
-    selected: `${l.primary.light}24`,
-    borderColor: H.effects.onDark.divider,
-    // 12% white - divider lines
-    text: l.neutral.white,
-    textSecondary: l.neutral.gray400
-  }
-}, V = {
-  fontFamily: '"Montserrat", sans-serif',
-  headerWeight: 600,
-  cellSecondary: {
-    color: l.neutral.gray500
-  }
-}, Ar = {
-  hover: "background-color 0.15s ease"
-};
-l.neutral.gray100, l.neutral.gray600, l.neutral.gray400;
-l.neutral.white, l.neutral.lightGray, l.neutral.white, l.neutral.lightGray, l.neutral.gray100, `${l.primary.light}`, l.neutral.gray100, l.neutral.gray600, l.neutral.gray500, l.neutral.darkBg, l.neutral.darkPaper, l.neutral.darkBg, l.neutral.darkPaper, H.effects.onDark.tint, `${l.primary.light}`, H.effects.onDark.divider, l.neutral.white, l.neutral.gray400;
-const Lr = ({
-  columns: d,
-  config: n,
-  density: m,
-  onAdd: s,
-  onCancel: c,
-  isActive: v,
-  onActivate: C,
-  mode: g = "light"
-}) => {
-  const [f, y] = G({}), [D, u] = G({}), t = me[m], M = Ve[g], F = le(), _ = d.filter((o) => n.excludeFields?.includes(o.field) || n.editableFields && !n.editableFields.includes(o.field) ? !1 : o.editable !== !1), P = z((o, p) => {
-    y((R) => ({
-      ...R,
-      [o]: p
-    })), D[o] && u((R) => {
-      const $ = { ...R };
-      return delete $[o], $;
-    });
-  }, [D]), T = z(() => {
-    const o = {};
-    if (n.requiredFields?.forEach((p) => {
-      const R = f[p];
-      (R == null || R === "") && (o[p] = "Required");
-    }), n.validation) {
-      const p = n.validation(f);
-      Object.assign(o, p);
-    }
-    return u(o), Object.keys(o).length === 0;
-  }, [f, n]), w = z(() => {
-    if (T()) {
-      const o = n.defaultValues ? { ...n.defaultValues, ...f } : f;
-      s(o), y({}), u({});
-    }
-  }, [T, n.defaultValues, f, s]), i = z(() => {
-    y({}), u({}), c();
-  }, [c]), B = z((o) => {
-    o.key === "Enter" && (o.metaKey || o.ctrlKey) ? w() : o.key === "Escape" && i();
-  }, [w, i]);
-  return v ? /* @__PURE__ */ h(
-    x,
-    {
-      onKeyDown: B,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        px: 2,
-        py: 1,
-        borderBottom: `2px solid ${F.palette.primary.main}`,
-        backgroundColor: M.background,
-        gap: 1
-      },
-      children: [
-        _.map((o) => {
-          const p = n.fieldConfigs?.[o.field], R = !!D[o.field], $ = f[o.field] ?? "";
-          return p?.type === "select" && p.options ? /* @__PURE__ */ e(
-            br,
-            {
-              size: "small",
-              error: R,
-              sx: { minWidth: o.width || 150 },
-              children: /* @__PURE__ */ h(
-                xr,
-                {
-                  value: $,
-                  onChange: (k) => P(o.field, k.target.value),
-                  displayEmpty: !0,
-                  sx: {
-                    fontFamily: V.fontFamily,
-                    fontSize: t.fontSize,
-                    "& .MuiSelect-select": {
-                      py: 0.75
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ e(Y, { value: "", disabled: !0, children: /* @__PURE__ */ e("em", { children: o.headerName }) }),
-                    p.options.map((k) => /* @__PURE__ */ e(Y, { value: k.value, children: k.label }, k.value))
-                  ]
-                }
-              )
-            },
-            o.field
-          ) : /* @__PURE__ */ e(
-            Ae,
-            {
-              size: "small",
-              placeholder: o.headerName,
-              value: $,
-              onChange: (k) => P(o.field, k.target.value),
-              error: R,
-              helperText: D[o.field],
-              type: p?.type === "number" ? "number" : "text",
-              slotProps: {
-                input: {
-                  sx: {
-                    fontFamily: V.fontFamily,
-                    fontSize: t.fontSize
-                  },
-                  startAdornment: p?.prefix ? /* @__PURE__ */ e(ge, { position: "start", children: p.prefix }) : void 0,
-                  endAdornment: p?.suffix ? /* @__PURE__ */ e(ge, { position: "end", children: p.suffix }) : void 0
-                },
-                formHelperText: {
-                  sx: { mx: 0, fontSize: 10 }
-                }
-              },
-              sx: {
-                flex: o.flex || 1,
-                minWidth: o.width || 100,
-                maxWidth: o.maxWidth,
-                "& .MuiOutlinedInput-root": {
-                  "& input": {
-                    py: 0.75
-                  }
-                }
-              }
-            },
-            o.field
-          );
-        }),
-        /* @__PURE__ */ h(j, { direction: "row", spacing: 0.5, sx: { ml: "auto" }, children: [
-          /* @__PURE__ */ e(O, { title: "Save (⌘+Enter)", children: /* @__PURE__ */ e(
-            W,
-            {
-              size: "small",
-              color: "primary",
-              onClick: w,
-              sx: {
-                backgroundColor: "primary.main",
-                color: "common.white",
-                "&:hover": {
-                  backgroundColor: "primary.dark"
-                }
-              },
-              children: /* @__PURE__ */ e($r, { fontSize: "small" })
-            }
-          ) }),
-          /* @__PURE__ */ e(O, { title: "Cancel (Esc)", children: /* @__PURE__ */ e(
-            W,
-            {
-              size: "small",
-              onClick: i,
-              sx: {
-                "&:hover": {
-                  backgroundColor: M.hover
-                }
-              },
-              children: /* @__PURE__ */ e(je, { fontSize: "small" })
-            }
-          ) })
-        ] })
-      ]
-    }
-  ) : /* @__PURE__ */ e(
-    x,
-    {
-      onClick: C,
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        px: 2,
-        py: t.cellPaddingY,
-        borderBottom: `1px solid ${M.borderColor}`,
-        backgroundColor: M.hover,
-        cursor: "pointer",
-        transition: "background-color 0.15s ease",
-        "&:hover": {
-          backgroundColor: M.selected
-        }
-      },
-      children: /* @__PURE__ */ h(j, { direction: "row", spacing: 1, alignItems: "center", children: [
-        /* @__PURE__ */ e(_e, { sx: { fontSize: 18, color: "primary.main" } }),
-        /* @__PURE__ */ e(
-          x,
-          {
-            sx: {
-              fontFamily: V.fontFamily,
-              fontSize: t.fontSize,
-              color: "primary.main",
-              fontWeight: 500
-            },
-            children: n.placeholder || "Add new row..."
-          }
-        )
-      ] })
-    }
-  );
-}, Or = ({
-  row: d,
-  actions: n,
-  maxInline: m = 2
-}) => {
-  const [s, c] = fr.useState(null), v = !!s, C = n.filter((t) => !t.showInMenu).slice(0, m), g = [
-    ...n.filter((t) => t.showInMenu),
-    ...n.filter((t) => !t.showInMenu).slice(m)
-  ], f = (t) => {
-    t.stopPropagation(), c(t.currentTarget);
-  }, y = () => {
-    c(null);
-  }, D = (t) => {
-    y(), t.onClick(d);
-  }, u = (t) => typeof t.disabled == "function" ? t.disabled(d) : t.disabled;
-  return /* @__PURE__ */ h(j, { direction: "row", spacing: 0.5, alignItems: "center", children: [
-    C.map((t) => /* @__PURE__ */ e(O, { title: t.label, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-      W,
-      {
-        size: "small",
-        color: t.color || "default",
-        onClick: (M) => {
-          M.stopPropagation(), t.onClick(d);
-        },
-        disabled: u(t),
-        sx: { p: 0.5 },
-        children: t.icon
-      }
-    ) }) }, t.id)),
-    g.length > 0 && /* @__PURE__ */ h(We, { children: [
-      /* @__PURE__ */ e(
-        W,
-        {
-          size: "small",
-          onClick: f,
-          sx: { p: 0.5 },
-          children: /* @__PURE__ */ e(Fr, { fontSize: "small" })
-        }
-      ),
-      /* @__PURE__ */ e(
-        Le,
-        {
-          anchorEl: s,
-          open: v,
-          onClose: y,
-          onClick: (t) => t.stopPropagation(),
-          transformOrigin: { horizontal: "right", vertical: "top" },
-          anchorOrigin: { horizontal: "right", vertical: "bottom" },
-          slotProps: {
-            paper: {
-              sx: {
-                minWidth: 160,
-                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
-              }
-            }
-          },
-          children: g.map((t) => /* @__PURE__ */ h(
-            Y,
-            {
-              onClick: () => D(t),
-              disabled: u(t),
-              sx: {
-                fontFamily: V.fontFamily,
-                fontSize: 13
-              },
-              children: [
-                t.icon && /* @__PURE__ */ e(yr, { sx: { color: t.color ? `${t.color}.main` : void 0 }, children: t.icon }),
-                /* @__PURE__ */ e(ie, { children: t.label })
-              ]
-            },
-            t.id
-          ))
-        }
-      )
-    ] })
-  ] });
-}, _r = ({
-  row: d,
-  actions: n,
-  isHovered: m = !1
-}) => {
-  const s = (c) => typeof c.disabled == "function" ? c.disabled(d) : c.disabled;
-  return /* @__PURE__ */ e(
-    j,
-    {
-      direction: "row",
-      spacing: 0.5,
-      alignItems: "center",
-      sx: {
-        opacity: m ? 1 : 0,
-        transition: "opacity 0.15s ease-in-out",
-        visibility: m ? "visible" : "hidden"
-      },
-      children: n.map((c) => /* @__PURE__ */ e(O, { title: c.label, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
-        W,
-        {
-          size: "small",
-          color: c.color || "default",
-          onClick: (v) => {
-            v.stopPropagation(), c.onClick(d);
-          },
-          disabled: s(c),
-          sx: {
-            p: 0.5,
-            "&:hover": {
-              backgroundColor: "action.hover"
-            }
-          },
-          children: c.icon
-        }
-      ) }) }, c.id))
-    }
-  );
-}, jr = {
-  compact: "compact",
-  standard: "standard",
-  comfortable: "comfortable"
-}, Ee = [75, 68, 82, 71, 88, 65, 79, 85, 72, 78], pe = [
-  [62, 78, 55, 85, 70, 48, 92, 65, 73, 58],
-  [71, 45, 88, 63, 52, 79, 67, 90, 54, 82],
-  [58, 82, 68, 75, 45, 87, 60, 72, 93, 55],
-  [85, 55, 73, 42, 88, 65, 78, 50, 82, 68],
-  [68, 75, 52, 90, 58, 82, 47, 73, 88, 62],
-  [45, 88, 65, 72, 82, 55, 78, 68, 50, 85],
-  [78, 62, 88, 55, 70, 45, 82, 72, 65, 90],
-  [52, 78, 70, 88, 62, 75, 55, 85, 48, 72]
-], Vr = (d) => `${Ee[d % Ee.length]}%`, Nr = (d, n) => `${pe[d % pe.length][n % pe[0].length]}%`, Ur = ({
-  columns: d,
-  rows: n,
-  density: m,
-  showCheckbox: s = !1,
-  colors: c
-}) => {
-  const v = me[m];
-  return /* @__PURE__ */ h(x, { sx: { width: "100%", overflow: "hidden" }, children: [
-    /* @__PURE__ */ h(
-      x,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          height: v.headerHeight,
-          px: 2,
-          gap: 2,
-          backgroundColor: c.headerBg,
-          borderBottom: `2px solid ${c.headerBorder || c.borderColor}`
-        },
-        children: [
-          s && /* @__PURE__ */ e(
-            A,
-            {
-              variant: "rectangular",
-              width: 18,
-              height: 18,
-              sx: { borderRadius: "4px", flexShrink: 0 }
-            }
-          ),
-          Array.from({ length: d }).map((C, g) => /* @__PURE__ */ e(x, { sx: { flex: 1, px: 1 }, children: /* @__PURE__ */ e(A, { width: Vr(g), height: 14 }) }, g))
-        ]
-      }
-    ),
-    Array.from({ length: n }).map((C, g) => /* @__PURE__ */ h(
-      x,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          height: v.rowHeight,
-          px: 2,
-          gap: 2,
-          borderBottom: `1px solid ${c.borderColor}`,
-          backgroundColor: c.background
-        },
-        children: [
-          s && /* @__PURE__ */ e(
-            A,
-            {
-              variant: "rectangular",
-              width: 18,
-              height: 18,
-              sx: { borderRadius: "4px", flexShrink: 0 }
-            }
-          ),
-          Array.from({ length: d }).map((f, y) => /* @__PURE__ */ e(x, { sx: { flex: 1, px: 1 }, children: /* @__PURE__ */ e(
-            A,
-            {
-              width: Nr(g, y),
-              height: 12,
-              sx: { my: 0.5 }
-            }
-          ) }, y))
-        ]
-      },
-      g
-    ))
-  ] });
-};
-function Yr({
-  title: d,
-  subtitle: n,
-  searchValue: m,
-  onSearchChange: s,
-  showSearch: c = !0,
-  selectedCount: v,
-  totalCount: C,
-  bulkActions: g,
-  onBulkAction: f,
-  onClearSelection: y,
-  onAddRow: D,
-  onRefresh: u,
-  onExport: t,
-  showExport: M = !0,
-  showRefresh: F = !0,
-  showColumnSelector: _ = !0,
-  showFilterButton: P = !0,
-  showDensitySelector: T = !0,
-  colors: w
-}) {
-  const i = le(), [B, o] = G(null), p = (I) => {
-    o(I.currentTarget);
-  }, R = () => {
-    o(null);
-  }, $ = (I) => {
-    t?.(I), R();
-  }, k = v > 0;
-  return /* @__PURE__ */ h(
-    Oe,
-    {
-      sx: {
-        pl: 2,
-        pr: 1.5,
-        py: 1.5,
-        borderBottom: `1px solid ${w.borderColor}`,
-        backgroundColor: k ? ae(i.palette.primary.main, 0.06) : w.background,
-        minHeight: "auto !important",
-        flexWrap: "wrap",
-        gap: 1,
-        transition: "background-color 0.2s ease"
-      },
-      children: [
-        /* @__PURE__ */ e(x, { sx: { flex: "1 1 auto", minWidth: 180 }, children: k ? /* @__PURE__ */ h(j, { direction: "row", spacing: 1.5, alignItems: "center", children: [
-          /* @__PURE__ */ e(
-            wr,
-            {
-              label: `${v} selected`,
-              size: "small",
-              onDelete: y,
-              deleteIcon: /* @__PURE__ */ e(je, { fontSize: "small" }),
-              sx: {
-                backgroundColor: ae(i.palette.primary.main, 0.12),
-                color: "primary.main",
-                fontWeight: 600,
-                "& .MuiChip-deleteIcon": {
-                  color: "primary.main",
-                  "&:hover": {
-                    color: "primary.dark"
-                  }
-                }
-              }
-            }
-          ),
-          g && g.length > 0 && /* @__PURE__ */ e(j, { direction: "row", spacing: 0.5, children: g.map((I, Z) => /* @__PURE__ */ e(O, { title: I.label, children: /* @__PURE__ */ e(
-            W,
-            {
-              size: "small",
-              onClick: () => f?.(I),
-              color: I.color || "default",
-              sx: {
-                borderRadius: "8px",
-                "&:hover": {
-                  backgroundColor: ae(i.palette.primary.main, 0.1)
-                }
-              },
-              children: I.icon
-            }
-          ) }, Z)) })
-        ] }) : /* @__PURE__ */ h(x, { children: [
-          d && /* @__PURE__ */ e(
-            L,
-            {
-              variant: "subtitle1",
-              fontWeight: 600,
-              color: "text.primary",
-              sx: { lineHeight: 1.3 },
-              children: d
-            }
-          ),
-          n && /* @__PURE__ */ e(L, { variant: "caption", color: "text.secondary", children: n })
-        ] }) }),
-        /* @__PURE__ */ h(j, { direction: "row", spacing: 0.5, alignItems: "center", children: [
-          c && /* @__PURE__ */ e(
-            Ae,
-            {
-              size: "small",
-              placeholder: "Search...",
-              value: m,
-              onChange: (I) => s(I.target.value),
-              InputProps: {
-                startAdornment: /* @__PURE__ */ e(ge, { position: "start", children: /* @__PURE__ */ e(Tr, { fontSize: "small", sx: { color: w.textSecondary } }) })
-              },
-              sx: {
-                width: 200,
-                "& .MuiOutlinedInput-root": {
-                  borderRadius: "8px",
-                  backgroundColor: w.background,
-                  fontSize: "0.875rem",
-                  "& fieldset": {
-                    borderColor: w.borderColor
-                  },
-                  "&:hover fieldset": {
-                    borderColor: w.textSecondary
-                  }
-                }
-              }
-            }
-          ),
-          D && /* @__PURE__ */ e(O, { title: "Add row", children: /* @__PURE__ */ e(
-            W,
-            {
-              size: "small",
-              onClick: D,
-              sx: {
-                borderRadius: "8px",
-                border: `1px solid ${w.borderColor}`,
-                "&:hover": {
-                  backgroundColor: w.hover,
-                  borderColor: w.textSecondary
-                }
-              },
-              children: /* @__PURE__ */ e(_e, { fontSize: "small" })
-            }
-          ) }),
-          /* @__PURE__ */ e(Pe, { orientation: "vertical", flexItem: !0, sx: { mx: 0.5, height: 24, alignSelf: "center" } }),
-          _ && /* @__PURE__ */ e(
-            Mr,
-            {
-              slotProps: {
-                button: {
-                  size: "small",
-                  style: {
-                    borderRadius: "8px",
-                    minWidth: "auto",
-                    paddingLeft: 8,
-                    paddingRight: 8
-                  }
-                }
-              }
-            }
-          ),
-          P && /* @__PURE__ */ e(
-            Rr,
-            {
-              slotProps: {
-                button: {
-                  size: "small",
-                  style: {
-                    borderRadius: "8px",
-                    minWidth: "auto",
-                    paddingLeft: 8,
-                    paddingRight: 8
-                  }
-                }
-              }
-            }
-          ),
-          T && /* @__PURE__ */ e(
-            Dr,
-            {
-              slotProps: {
-                button: {
-                  size: "small",
-                  style: {
-                    borderRadius: "8px",
-                    minWidth: "auto",
-                    paddingLeft: 8,
-                    paddingRight: 8
-                  }
-                }
-              }
-            }
-          ),
-          M && t && /* @__PURE__ */ h(We, { children: [
-            /* @__PURE__ */ e(O, { title: "Export", children: /* @__PURE__ */ e(
-              W,
-              {
-                size: "small",
-                onClick: p,
-                sx: {
-                  borderRadius: "8px",
-                  "&:hover": { backgroundColor: w.hover }
-                },
-                children: /* @__PURE__ */ e(Ir, { fontSize: "small" })
-              }
-            ) }),
-            /* @__PURE__ */ h(
-              Le,
-              {
-                anchorEl: B,
-                open: !!B,
-                onClose: R,
-                anchorOrigin: { vertical: "bottom", horizontal: "right" },
-                transformOrigin: { vertical: "top", horizontal: "right" },
-                slotProps: {
-                  paper: {
-                    sx: { borderRadius: "8px", minWidth: 160 }
-                  }
-                },
-                children: [
-                  /* @__PURE__ */ e(Y, { onClick: () => $("csv"), children: /* @__PURE__ */ e(ie, { children: "Export as CSV" }) }),
-                  /* @__PURE__ */ e(Y, { onClick: () => $("json"), children: /* @__PURE__ */ e(ie, { children: "Export as JSON" }) }),
-                  /* @__PURE__ */ e(Pe, {}),
-                  /* @__PURE__ */ e(Y, { onClick: () => $("clipboard"), children: /* @__PURE__ */ e(ie, { children: "Copy to clipboard" }) })
-                ]
-              }
-            )
-          ] }),
-          F && u && /* @__PURE__ */ e(O, { title: "Refresh", children: /* @__PURE__ */ e(
-            W,
-            {
-              size: "small",
-              onClick: u,
-              sx: {
-                borderRadius: "8px",
-                "&:hover": { backgroundColor: w.hover }
-              },
-              children: /* @__PURE__ */ e(Br, { fontSize: "small" })
-            }
-          ) })
-        ] })
-      ]
-    }
-  );
-}
-const ft = ({
-  // Core props
-  rows: d,
-  columns: n,
-  loading: m = !1,
-  getRowId: s,
-  // Density
-  density: c = "standard",
-  allowDensityChange: v = !0,
-  // Selection
-  selection: C,
-  // Pagination
-  pagination: g = { enabled: !0, pageSize: 25 },
-  // Sorting & Filtering
-  sorting: f = { enabled: !0 },
-  filtering: y = { enabled: !0 },
-  // Editing
-  editing: D,
-  // Tree Data
-  treeData: u,
-  // Row Grouping
-  rowGrouping: t,
-  // Inline Add
-  inlineAdd: M,
-  // Column Pinning
-  columnPinning: F,
-  // Row Reordering
-  rowReorder: _,
-  // Actions
-  rowActions: P,
-  rowActionsConfig: T,
-  bulkActions: w,
-  // Toolbar
-  toolbar: i = {
-    show: !0,
-    showSearch: !0,
-    showDensitySelector: !0,
-    showColumnVisibility: !0,
-    showExport: !0,
-    showFilter: !0,
-    showRefresh: !0
-  },
-  // Appearance
-  title: B,
-  subtitle: o,
-  height: p = 500,
-  maxHeight: R,
-  minHeight: $ = 300,
-  stickyHeader: k = !0,
-  stripedRows: I = !1,
-  showBorders: Z = !0,
-  elevation: fe = 0,
-  borderRadius: be = "12px",
-  // Callbacks
-  onRowClick: Ne,
-  onRowDoubleClick: Ue,
-  onCellClick: Ye,
-  onSelectionChange: ee,
-  onSortChange: xe,
-  onFilterChange: ye,
-  onPageChange: we,
-  onRowUpdate: de,
-  onRowAdd: Se,
-  onRowDelete: Jr,
-  onRefresh: Ce,
-  onExport: se,
-  // Styling
-  sx: ke,
-  className: ve,
-  getRowClassName: ce,
-  getCellClassName: Ke,
-  // Slot overrides
-  slots: qe,
-  slotProps: re
-}) => {
-  const ze = le(), Me = ze.palette.mode, a = Ve[Me], N = kr(), [te, Qr] = G(c), [K, Re] = G({
-    type: "include",
-    ids: /* @__PURE__ */ new Set()
-  }), [Je, Qe] = G({
-    page: g.defaultPage || 0,
-    pageSize: g.pageSize || 25
-  }), [Xe, Ze] = G(
-    f.defaultSort ? [f.defaultSort] : []
-  ), [er, rr] = G({
-    items: y.defaultFilters || []
-  }), [tr, or] = G({}), [nr, oe] = G(!1), [q, ir] = G(""), [De, Te] = G(null), J = me[te], U = T?.actions || P || [], he = T?.mode || "menu", Be = ne(() => {
-    const r = [...n];
-    if (U.length > 0) {
-      const b = {
-        field: "__actions__",
-        headerName: "",
-        width: T?.width || (he === "hover" ? 180 : 60),
-        sortable: !1,
-        filterable: !1,
-        disableColumnMenu: !0,
-        align: "right",
-        headerAlign: "right",
-        renderCell: (S) => {
-          const E = s ? s(S.row) : S.row.id, X = String(De) === String(E);
-          return he === "hover" ? /* @__PURE__ */ e(
-            _r,
-            {
-              row: S.row,
-              actions: U,
-              isHovered: X
-            }
-          ) : /* @__PURE__ */ e(
-            Or,
-            {
-              row: S.row,
-              actions: U,
-              maxInline: T?.maxInline || 2
-            }
-          );
-        }
-      };
-      r.push(b);
-    }
-    return r;
-  }, [n, U, he, T, De, s]);
-  ne(() => {
-    if (F?.enabled)
-      return {
-        left: F.left || [],
-        right: F.right || (U.length > 0 && T?.pinned ? ["__actions__"] : [])
-      };
-  }, [F, U.length, T?.pinned]);
-  const Q = ne(() => {
-    if (!q.trim()) return d;
-    const r = q.toLowerCase();
-    return d.filter(
-      (b) => Object.values(b).some(
-        (S) => S != null && String(S).toLowerCase().includes(r)
-      )
-    );
-  }, [d, q]), ar = z(
-    (r) => {
-      Re(r), ee?.(Array.from(r.ids));
-    },
-    [ee]
-  ), Ie = z(() => {
-    Re({ type: "include", ids: /* @__PURE__ */ new Set() }), ee?.([]);
-  }, [ee]), lr = z(
-    (r) => {
-      Ze(r), r.length > 0 && xe?.(r[0].field, r[0].sort || "asc");
-    },
-    [xe]
-  ), dr = z(
-    (r) => {
-      rr(r), ye?.(r);
-    },
-    [ye]
-  ), sr = z(
-    (r) => {
-      Qe(r), we?.(r.page, r.pageSize);
-    },
-    [we]
-  ), cr = z((r, b) => {
-    r.reason === vr.rowFocusOut && (b.defaultMuiPrevented = !0);
-  }, []), hr = z(
-    async (r, b) => de ? await de(r, b) : r,
-    [de]
-  ), ur = z(
-    (r) => {
-      Se?.(r), oe(!1);
-    },
-    [Se]
-  ), $e = z(
-    (r) => {
-      const b = d.filter((S) => {
-        const E = s ? s(S) : S.id;
-        return K.ids.has(E);
-      });
-      r.onClick(b);
-    },
-    [d, K, s]
-  ), Fe = z((r) => {
-    ir(r);
-  }, []), Ge = z(
-    (r) => {
-      if (se)
-        se(r);
-      else if (N.current) {
-        if (r === "csv")
-          N.current.exportDataAsCsv();
-        else if (r === "json") {
-          const b = N.current.getRowModels(), S = JSON.stringify(Array.from(b.values()), null, 2), E = new Blob([S], { type: "application/json" }), X = URL.createObjectURL(E), ue = document.createElement("a");
-          ue.href = X, ue.download = `${B || "data"}.json`, ue.click(), URL.revokeObjectURL(X);
-        } else if (r === "clipboard") {
-          const b = N.current.getRowModels(), S = Array.from(b.values()).map((E) => Object.values(E).join("	")).join(`
-`);
-          navigator.clipboard.writeText(S);
-        }
-      }
-    },
-    [se, N, B]
-  ), pr = ne(() => u?.enabled ? {
-    treeData: !0,
-    getTreeDataPath: (r) => u.getTreeDataPath ? u.getTreeDataPath(r) : r.hierarchy || [String(r.id)],
-    groupingColDef: {
-      headerName: u.groupingColumnLabel || "Group",
-      width: u.groupingColumnWidth || 200
-    },
-    defaultGroupingExpansionDepth: u.defaultExpanded ? -1 : 0
-  } : {}, [u]), gr = z(
-    (r) => {
-      const b = [];
-      if (I && Q.findIndex((E) => (s ? s(E) : E.id) === r.id) % 2 === 1 && b.push("striped-row"), ce) {
-        const S = ce(r.row);
-        S && b.push(S);
-      }
-      return b.join(" ");
-    },
-    [I, ce, Q, s]
-  ), mr = z(
-    () => /* @__PURE__ */ e(
-      Yr,
-      {
-        title: B,
-        subtitle: o,
-        searchValue: q,
-        onSearchChange: Fe,
-        showSearch: i.showSearch,
-        selectedCount: K.ids.size,
-        totalCount: Q.length,
-        bulkActions: w,
-        onBulkAction: $e,
-        onClearSelection: Ie,
-        onAddRow: M?.enabled ? () => oe(!0) : void 0,
-        onRefresh: Ce,
-        onExport: i.showExport ? Ge : void 0,
-        showExport: i.showExport,
-        showRefresh: i.showRefresh,
-        showColumnSelector: i.showColumnVisibility,
-        showFilterButton: i.showFilter,
-        showDensitySelector: i.showDensitySelector && v,
-        colors: a
-      }
-    ),
-    [
-      B,
-      o,
-      q,
-      Fe,
-      i,
-      K.ids.size,
-      Q.length,
-      w,
-      $e,
-      Ie,
-      M?.enabled,
-      Ce,
-      Ge,
-      v,
-      a
-    ]
-  );
-  return m ? /* @__PURE__ */ h(
-    He,
-    {
-      elevation: fe,
-      sx: {
-        width: "100%",
-        height: p,
-        borderRadius: be,
-        overflow: "hidden",
-        border: Z ? `1px solid ${a.borderColor}` : "none",
-        backgroundColor: a.background,
-        ...ke
-      },
-      className: ve,
-      children: [
-        i.show && /* @__PURE__ */ h(
-          Oe,
-          {
-            sx: {
-              pl: 2,
-              pr: 1.5,
-              py: 1.5,
-              borderBottom: `1px solid ${a.borderColor}`,
-              minHeight: "auto !important",
-              gap: 2
-            },
-            children: [
-              /* @__PURE__ */ e(A, { width: 120, height: 24, sx: { borderRadius: "4px" } }),
-              /* @__PURE__ */ e(x, { sx: { flex: 1 } }),
-              /* @__PURE__ */ e(A, { width: 180, height: 36, sx: { borderRadius: "8px" } }),
-              /* @__PURE__ */ e(A, { width: 32, height: 32, sx: { borderRadius: "8px" } }),
-              /* @__PURE__ */ e(A, { width: 32, height: 32, sx: { borderRadius: "8px" } })
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(
-          Ur,
-          {
-            columns: Math.min(n.length, 5),
-            rows: Math.floor((p - 120) / J.rowHeight),
-            density: te,
-            showCheckbox: C?.enabled,
-            colors: a
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ e(x, { sx: { width: "100%", ...ke }, className: ve, children: /* @__PURE__ */ h(
-    He,
-    {
-      elevation: fe,
-      sx: {
-        width: "100%",
-        height: p,
-        maxHeight: R,
-        minHeight: $,
-        borderRadius: be,
-        overflow: "hidden",
-        border: Z ? `1px solid ${a.borderColor}` : "none",
-        backgroundColor: a.background,
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ e(
-          zr,
-          {
-            apiRef: N,
-            rows: Q,
-            columns: Be,
-            loading: !1,
-            getRowId: s,
-            density: jr[te],
-            checkboxSelection: C?.enabled,
-            rowSelectionModel: K,
-            onRowSelectionModelChange: ar,
-            disableRowSelectionOnClick: !C?.selectOnClick,
-            pagination: !0,
-            paginationModel: Je,
-            onPaginationModelChange: sr,
-            pageSizeOptions: g.pageSizeOptions || [10, 25, 50, 100],
-            sortingMode: f.serverSide ? "server" : "client",
-            sortModel: Xe,
-            onSortModelChange: lr,
-            disableColumnSorting: !f.enabled,
-            filterMode: y.serverSide ? "server" : "client",
-            filterModel: er,
-            onFilterModelChange: dr,
-            disableColumnFilter: !y.enabled,
-            editMode: D?.mode || "cell",
-            rowModesModel: tr,
-            onRowModesModelChange: or,
-            onRowEditStop: cr,
-            processRowUpdate: hr,
-            ...pr,
-            disableColumnMenu: !1,
-            columnHeaderHeight: J.headerHeight,
-            rowHeight: J.rowHeight,
-            onRowClick: Ne,
-            onRowDoubleClick: Ue,
-            onCellClick: Ye,
-            getRowClassName: gr,
-            getCellClassName: Ke,
-            slots: {
-              toolbar: i.show ? mr : void 0,
-              ...qe
-            },
-            slotProps: {
-              ...re,
-              row: {
-                ...re?.row,
-                onMouseEnter: (r) => {
-                  const b = r.currentTarget.getAttribute("data-id");
-                  b && Te(b), re?.row?.onMouseEnter?.(r);
-                },
-                onMouseLeave: (r) => {
-                  Te(null), re?.row?.onMouseLeave?.(r);
-                }
-              }
-            },
-            sx: {
-              border: "none",
-              borderRadius: 0,
-              // DataGrid itself should have no border radius (Paper handles it)
-              fontFamily: V.fontFamily,
-              flex: 1,
-              // MUI X DataGrid v8 CSS Variables - these control the theme
-              "--DataGrid-t-header-background-base": a.headerBg,
-              "--DataGrid-t-color-border-base": a.headerBorder || a.borderColor,
-              "--DataGrid-t-color-background-base": a.background,
-              "--DataGrid-t-color-foreground-base": a.text,
-              "--DataGrid-t-color-foreground-muted": a.textSecondary,
-              "--DataGrid-t-cell-background-pinned": a.background,
-              "--DataGrid-t-radius-base": "0px",
-              // No internal border radius
-              // Header styles - with !important to override CSS variables
-              "& .MuiDataGrid-columnHeaders": {
-                backgroundColor: `${a.headerBg} !important`,
-                borderBottom: `2px solid ${a.headerBorder} !important`,
-                borderRadius: "0 !important"
-                // Remove any internal border radius
-              },
-              "& .MuiDataGrid-columnHeader": {
-                fontWeight: V.headerWeight,
-                fontSize: J.fontSize,
-                color: `${a.headerText} !important`,
-                backgroundColor: `${a.headerBg} !important`,
-                borderRadius: "0 !important",
-                // No rounded corners on header cells
-                "&:focus, &:focus-within": {
-                  outline: "none"
-                },
-                // Remove rounded corners from first and last header cells
-                "&:first-of-type": {
-                  borderTopLeftRadius: "0 !important",
-                  borderBottomLeftRadius: "0 !important"
-                },
-                "&:last-of-type": {
-                  borderTopRightRadius: "0 !important",
-                  borderBottomRightRadius: "0 !important"
-                }
-              },
-              // Target the row containing headers
-              "& .MuiDataGrid-columnHeaderRow": {
-                backgroundColor: `${a.headerBg} !important`,
-                borderRadius: 0
-              },
-              // Target the scrollable header container
-              "& .MuiDataGrid-scrollableHeaders": {
-                borderRadius: 0
-              },
-              // Main container to clip properly
-              "& .MuiDataGrid-main": {
-                borderRadius: 0
-              },
-              "& .MuiDataGrid-columnHeaderTitle": {
-                fontWeight: V.headerWeight
-              },
-              "& .MuiDataGrid-columnSeparator": {
-                color: a.borderColor,
-                opacity: 0.5
-              },
-              // Cell styles
-              "& .MuiDataGrid-cell": {
-                fontSize: J.fontSize,
-                borderBottom: `1px solid ${a.borderColor}`,
-                color: a.text,
-                display: "flex",
-                alignItems: "center",
-                "&:focus, &:focus-within": {
-                  outline: "none"
-                }
-              },
-              // Row styles
-              "& .MuiDataGrid-row": {
-                transition: Ar.hover,
-                "&:hover": {
-                  backgroundColor: a.hover
-                },
-                "&.Mui-selected": {
-                  backgroundColor: a.selected,
-                  "&:hover": {
-                    backgroundColor: ae(ze.palette.primary.main, 0.12)
-                  }
-                }
-              },
-              "& .MuiDataGrid-row.striped-row": {
-                backgroundColor: a.alternateRow,
-                "&:hover": {
-                  backgroundColor: a.hover
-                }
-              },
-              // Footer styles
-              "& .MuiDataGrid-footerContainer": {
-                borderTop: `1px solid ${a.borderColor}`,
-                backgroundColor: a.background,
-                minHeight: 48
-              },
-              "& .MuiTablePagination-root": {
-                color: a.text
-              },
-              "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
-                fontSize: "0.8125rem",
-                color: a.textSecondary
-              },
-              // Checkbox styles
-              "& .MuiCheckbox-root": {
-                color: a.textSecondary,
-                padding: "6px",
-                "&.Mui-checked": {
-                  color: "primary.main"
-                }
-              },
-              // Empty/loading overlay
-              "& .MuiDataGrid-overlay": {
-                backgroundColor: "transparent"
-              },
-              // Virtual scroller
-              "& .MuiDataGrid-virtualScroller": {
-                backgroundColor: a.background
-              },
-              // Toolbar container
-              "& .MuiDataGrid-toolbarContainer": {
-                padding: 0
-              },
-              // Scrollbar styling
-              "& .MuiDataGrid-virtualScroller::-webkit-scrollbar": {
-                width: 8,
-                height: 8
-              },
-              "& .MuiDataGrid-virtualScroller::-webkit-scrollbar-track": {
-                backgroundColor: "transparent"
-              },
-              "& .MuiDataGrid-virtualScroller::-webkit-scrollbar-thumb": {
-                backgroundColor: a.borderColor,
-                borderRadius: 4,
-                "&:hover": {
-                  backgroundColor: a.textSecondary
-                }
-              }
-            }
-          }
-        ),
-        M?.enabled && /* @__PURE__ */ e(
-          Lr,
-          {
-            columns: Be,
-            config: M,
-            density: te,
-            onAdd: ur,
-            onCancel: () => oe(!1),
-            isActive: nr,
-            onActivate: () => oe(!0),
-            mode: Me
-          }
-        )
-      ]
-    }
-  ) });
-}, Kr = ({ data: d, color: n, height: m = 40 }) => {
-  if (!d || d.length < 2) return null;
-  const s = Math.min(...d), v = Math.max(...d) - s || 1, C = 100, g = d.map((y, D) => {
-    const u = D / (d.length - 1) * C, t = m - (y - s) / v * m;
-    return `${u},${t}`;
-  }).join(" "), f = `0,${m} ${g} ${C},${m}`;
-  return /* @__PURE__ */ h("svg", { width: "100%", height: m, viewBox: `0 0 ${C} ${m}`, preserveAspectRatio: "none", children: [
-    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ h("linearGradient", { id: `sparkline-gradient-${n}`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
-      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: n, stopOpacity: 0.3 }),
-      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: n, stopOpacity: 0 })
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useTheme as B, Card as M, CardContent as O, Box as i, Skeleton as C, Typography as p, Tooltip as R, IconButton as L } from "@mui/material";
+import { InfoOutlined as A, MoreVert as F, TrendingFlat as G, TrendingDown as U, TrendingUp as Y } from "@mui/icons-material";
+import { s as x } from "./navigation.js";
+const q = ({ data: r, color: l, height: o = 40 }) => {
+  if (!r || r.length < 2) return null;
+  const d = Math.min(...r), S = Math.max(...r) - d || 1, a = 100, h = r.map((g, y) => {
+    const s = y / (r.length - 1) * a, b = o - (g - d) / S * o;
+    return `${s},${b}`;
+  }).join(" "), f = `0,${o} ${h} ${a},${o}`;
+  return /* @__PURE__ */ n("svg", { width: "100%", height: o, viewBox: `0 0 ${a} ${o}`, preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: `sparkline-gradient-${l}`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: l, stopOpacity: 0.3 }),
+      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: l, stopOpacity: 0 })
     ] }) }),
     /* @__PURE__ */ e(
       "polygon",
       {
         points: f,
-        fill: `url(#sparkline-gradient-${n})`
+        fill: `url(#sparkline-gradient-${l})`
       }
     ),
     /* @__PURE__ */ e(
       "polyline",
       {
-        points: g,
+        points: h,
         fill: "none",
-        stroke: n,
+        stroke: l,
         strokeWidth: 2,
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
     )
   ] });
-}, qr = {
+}, D = {
   small: {
-    padding: H.density.standard.cellPadding,
+    padding: x.density.standard.cellPadding,
     titleSize: "caption",
     valueSize: "h5",
     iconSize: 32
   },
   medium: {
-    padding: H.density.comfortable.cellPadding,
+    padding: x.density.comfortable.cellPadding,
     titleSize: "body2",
     valueSize: "h4",
     iconSize: 40
   },
   large: {
-    padding: H.inline.relaxed,
+    padding: x.inline.relaxed,
     // 20px - relaxed breathing room
     titleSize: "body1",
     valueSize: "h3",
     iconSize: 48
   }
-}, bt = ({
-  title: d,
-  value: n,
-  unit: m,
-  trend: s,
-  trendValue: c,
-  trendLabel: v = "vs last period",
-  sparklineData: C,
-  subtitle: g,
+}, Q = ({
+  title: r,
+  value: l,
+  unit: o,
+  trend: d,
+  trendValue: m,
+  trendLabel: S = "vs last period",
+  sparklineData: a,
+  subtitle: h,
   icon: f,
-  iconColor: y = "primary",
-  comparison: D,
-  loading: u = !1,
-  infoTooltip: t,
-  onMoreClick: M,
-  onClick: F,
-  footer: _,
-  size: P = "medium",
-  variant: T = "default",
-  fullHeight: w = !1
+  iconColor: g = "primary",
+  comparison: y,
+  loading: s = !1,
+  infoTooltip: b,
+  onMoreClick: z,
+  onClick: v,
+  footer: $,
+  size: w = "medium",
+  variant: k = "default",
+  fullHeight: T = !1
 }) => {
-  const i = le(), B = qr[P], o = () => {
-    switch (s) {
+  const t = B(), u = D[w], I = () => {
+    switch (d) {
       case "up":
-        return i.palette.success.main;
+        return t.palette.success.main;
       case "down":
-        return i.palette.error.main;
+        return t.palette.error.main;
       default:
-        return i.palette.text.secondary;
+        return t.palette.text.secondary;
     }
-  }, p = () => {
-    switch (s) {
+  }, j = () => {
+    switch (d) {
       case "up":
-        return /* @__PURE__ */ e(Wr, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(Y, { sx: { fontSize: 18 } });
       case "down":
-        return /* @__PURE__ */ e(Er, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(U, { sx: { fontSize: 18 } });
       default:
-        return /* @__PURE__ */ e(Pr, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(G, { sx: { fontSize: 18 } });
     }
-  }, R = () => {
-    const k = i.palette.trinity?.status;
+  }, W = () => {
+    const c = t.palette.trinity?.status;
     return {
-      primary: i.palette.action.selected,
+      primary: t.palette.action.selected,
       // Theme-aware 12%
-      secondary: i.palette.action.selected,
-      success: k?.success?.background || i.palette.action.selected,
-      warning: k?.warning?.background || i.palette.action.selected,
-      error: k?.error?.background || i.palette.action.selected,
-      info: k?.info?.background || i.palette.action.selected
-    }[y] || i.palette.action.selected;
-  }, $ = {
+      secondary: t.palette.action.selected,
+      success: c?.success?.background || t.palette.action.selected,
+      warning: c?.warning?.background || t.palette.action.selected,
+      error: c?.error?.background || t.palette.action.selected,
+      info: c?.info?.background || t.palette.action.selected
+    }[g] || t.palette.action.selected;
+  }, P = {
     default: {},
     outlined: {
-      border: `1px solid ${i.palette.divider}`,
+      border: `1px solid ${t.palette.divider}`,
       boxShadow: "none"
     },
     filled: {
-      backgroundColor: i.palette.action.hover,
+      backgroundColor: t.palette.action.hover,
       // Theme-aware subtle background
       boxShadow: "none"
     }
   };
   return /* @__PURE__ */ e(
-    Sr,
+    M,
     {
-      elevation: T === "default" ? 1 : 0,
-      onClick: F,
+      elevation: k === "default" ? 1 : 0,
+      onClick: v,
       sx: {
-        borderRadius: H.borders.radiusPx.lg,
+        borderRadius: x.borders.radiusPx.lg,
         // 12px to match AI StatCard
-        height: w ? "100%" : "auto",
-        cursor: F ? "pointer" : "default",
-        transition: `all ${H.motion.duration.fast} ${H.motion.easing.default}`,
-        "&:hover": F ? {
-          boxShadow: i.shadows[4],
+        height: T ? "100%" : "auto",
+        cursor: v ? "pointer" : "default",
+        transition: `all ${x.motion.duration.fast} ${x.motion.easing.default}`,
+        "&:hover": v ? {
+          boxShadow: t.shadows[4],
           transform: "translateY(-2px)"
         } : {},
-        ...$[T]
+        ...P[k]
       },
-      children: /* @__PURE__ */ h(Cr, { sx: { p: `${B.padding}px !important` }, children: [
-        /* @__PURE__ */ h(
-          x,
+      children: /* @__PURE__ */ n(O, { sx: { p: `${u.padding}px !important` }, children: [
+        /* @__PURE__ */ n(
+          i,
           {
             sx: {
               display: "flex",
@@ -1385,66 +142,66 @@ const ft = ({
               mb: 2
             },
             children: [
-              /* @__PURE__ */ h(x, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+              /* @__PURE__ */ n(i, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
                 f && /* @__PURE__ */ e(
-                  x,
+                  i,
                   {
                     sx: {
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      width: B.iconSize,
-                      height: B.iconSize,
-                      borderRadius: `${H.borders.radius.iconContainer}px`,
-                      backgroundColor: R(),
-                      color: i.palette[y].main
+                      width: u.iconSize,
+                      height: u.iconSize,
+                      borderRadius: `${x.borders.radius.iconContainer}px`,
+                      backgroundColor: W(),
+                      color: t.palette[g].main
                     },
                     children: f
                   }
                 ),
-                /* @__PURE__ */ h(x, { children: [
-                  /* @__PURE__ */ h(x, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    u ? /* @__PURE__ */ e(A, { width: 80, height: 20 }) : /* @__PURE__ */ e(
-                      L,
+                /* @__PURE__ */ n(i, { children: [
+                  /* @__PURE__ */ n(i, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    s ? /* @__PURE__ */ e(C, { width: 80, height: 20 }) : /* @__PURE__ */ e(
+                      p,
                       {
-                        variant: B.titleSize,
+                        variant: u.titleSize,
                         color: "text.secondary",
                         fontWeight: 500,
-                        children: d
+                        children: r
                       }
                     ),
-                    t && /* @__PURE__ */ e(O, { title: t, arrow: !0, children: /* @__PURE__ */ e(
-                      Gr,
+                    b && /* @__PURE__ */ e(R, { title: b, arrow: !0, children: /* @__PURE__ */ e(
+                      A,
                       {
                         sx: {
                           fontSize: 14,
-                          color: i.palette.text.disabled,
+                          color: t.palette.text.disabled,
                           cursor: "help"
                         }
                       }
                     ) })
                   ] }),
-                  g && !u && /* @__PURE__ */ e(L, { variant: "caption", color: "text.secondary", children: g })
+                  h && !s && /* @__PURE__ */ e(p, { variant: "caption", color: "text.secondary", children: h })
                 ] })
               ] }),
-              M && /* @__PURE__ */ e(
-                W,
+              z && /* @__PURE__ */ e(
+                L,
                 {
                   size: "small",
-                  onClick: (k) => {
-                    k.stopPropagation(), M(k);
+                  onClick: (c) => {
+                    c.stopPropagation(), z(c);
                   },
                   sx: { mr: -1, mt: -0.5 },
-                  children: /* @__PURE__ */ e(Hr, { fontSize: "small" })
+                  children: /* @__PURE__ */ e(F, { fontSize: "small" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(x, { sx: { mb: C ? 2 : s ? 1 : 0 }, children: u ? /* @__PURE__ */ e(A, { width: 120, height: 40 }) : /* @__PURE__ */ h(
-          L,
+        /* @__PURE__ */ e(i, { sx: { mb: a ? 2 : d ? 1 : 0 }, children: s ? /* @__PURE__ */ e(C, { width: 120, height: 40 }) : /* @__PURE__ */ n(
+          p,
           {
-            variant: B.valueSize,
+            variant: u.valueSize,
             fontWeight: 700,
             sx: {
               display: "flex",
@@ -1452,30 +209,30 @@ const ft = ({
               gap: 0.5
             },
             children: [
-              n,
-              m && /* @__PURE__ */ e(
-                L,
+              l,
+              o && /* @__PURE__ */ e(
+                p,
                 {
                   component: "span",
                   variant: "body2",
                   color: "text.secondary",
                   fontWeight: 400,
-                  children: m
+                  children: o
                 }
               )
             ]
           }
         ) }),
-        C && C.length > 1 && !u && /* @__PURE__ */ e(x, { sx: { mb: 2, mx: -1 }, children: /* @__PURE__ */ e(
-          Kr,
+        a && a.length > 1 && !s && /* @__PURE__ */ e(i, { sx: { mb: 2, mx: -1 }, children: /* @__PURE__ */ e(
+          q,
           {
-            data: C,
-            color: o(),
-            height: P === "small" ? 30 : P === "large" ? 50 : 40
+            data: a,
+            color: I(),
+            height: w === "small" ? 30 : w === "large" ? 50 : 40
           }
         ) }),
-        s && !u && /* @__PURE__ */ h(
-          x,
+        d && !s && /* @__PURE__ */ n(
+          i,
           {
             sx: {
               display: "flex",
@@ -1484,36 +241,35 @@ const ft = ({
               flexWrap: "wrap"
             },
             children: [
-              /* @__PURE__ */ h(
-                x,
+              /* @__PURE__ */ n(
+                i,
                 {
                   sx: {
                     display: "flex",
                     alignItems: "center",
                     gap: 0.5,
-                    color: o()
+                    color: I()
                   },
                   children: [
-                    p(),
-                    c !== void 0 && /* @__PURE__ */ h(L, { variant: "body2", fontWeight: 600, children: [
-                      c > 0 ? "+" : "",
-                      c,
+                    j(),
+                    m !== void 0 && /* @__PURE__ */ n(p, { variant: "body2", fontWeight: 600, children: [
+                      m > 0 ? "+" : "",
+                      m,
                       "%"
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(L, { variant: "caption", color: "text.secondary", children: v })
+              /* @__PURE__ */ e(p, { variant: "caption", color: "text.secondary", children: S })
             ]
           }
         ),
-        D && !u && /* @__PURE__ */ e(L, { variant: "caption", color: "text.secondary", sx: { mt: 1, display: "block" }, children: D }),
-        _ && /* @__PURE__ */ e(x, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${i.palette.divider}` }, children: _ })
+        y && !s && /* @__PURE__ */ e(p, { variant: "caption", color: "text.secondary", sx: { mt: 1, display: "block" }, children: y }),
+        $ && /* @__PURE__ */ e(i, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${t.palette.divider}` }, children: $ })
       ] })
     }
   );
 };
 export {
-  ft as D,
-  bt as a
+  Q as D
 };