@trinitydesign/design-system 1.2.0

package/dist/data.js

@@ -0,0 +1,1516 @@
+import { jsx as e, jsxs as c, Fragment as We } from "react/jsx-runtime";
+import fr, { useState as H, 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 a, s as k } from "./ai.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: a.neutral.gray600,
+    headerBorder: "#D1D5DB",
+    background: a.neutral.white,
+    alternateRow: a.neutral.lightGray,
+    hover: a.neutral.gray100,
+    selected: `${a.primary.light}14`,
+    borderColor: a.neutral.gray100,
+    text: a.neutral.gray600,
+    textSecondary: a.neutral.gray500
+  },
+  dark: {
+    headerBg: "#3F3F46",
+    headerText: a.neutral.white,
+    headerBorder: "#52525B",
+    background: a.neutral.darkBg,
+    alternateRow: a.neutral.darkPaper,
+    hover: k.effects.onDark.tint,
+    // 4% white - subtle hover
+    selected: `${a.primary.light}24`,
+    borderColor: k.effects.onDark.divider,
+    // 12% white - divider lines
+    text: a.neutral.white,
+    textSecondary: a.neutral.gray400
+  }
+}, V = {
+  fontFamily: '"Montserrat", sans-serif',
+  headerWeight: 600,
+  cellSecondary: {
+    color: a.neutral.gray500
+  }
+}, Ar = {
+  hover: "background-color 0.15s ease"
+};
+a.neutral.gray100, a.neutral.gray600, a.neutral.gray400;
+a.neutral.white, a.neutral.lightGray, a.neutral.white, a.neutral.lightGray, a.neutral.gray100, `${a.primary.light}`, a.neutral.gray100, a.neutral.gray600, a.neutral.gray500, a.neutral.darkBg, a.neutral.darkPaper, a.neutral.darkBg, a.neutral.darkPaper, k.effects.onDark.tint, `${a.primary.light}`, k.effects.onDark.divider, a.neutral.white, a.neutral.gray400;
+const Lr = ({
+  columns: l,
+  config: n,
+  density: m,
+  onAdd: d,
+  onCancel: s,
+  isActive: v,
+  onActivate: C,
+  mode: g = "light"
+}) => {
+  const [f, y] = H({}), [D, h] = H({}), t = me[m], M = Ve[g], G = le(), _ = l.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] && h((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 h(o), Object.keys(o).length === 0;
+  }, [f, n]), w = z(() => {
+    if (T()) {
+      const o = n.defaultValues ? { ...n.defaultValues, ...f } : f;
+      d(o), y({}), h({});
+    }
+  }, [T, n.defaultValues, f, d]), u = z(() => {
+    y({}), h({}), s();
+  }, [s]), B = z((o) => {
+    o.key === "Enter" && (o.metaKey || o.ctrlKey) ? w() : o.key === "Escape" && u();
+  }, [w, u]);
+  return v ? /* @__PURE__ */ c(
+    x,
+    {
+      onKeyDown: B,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        px: 2,
+        py: 1,
+        borderBottom: `2px solid ${G.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__ */ c(
+                xr,
+                {
+                  value: $,
+                  onChange: (I) => P(o.field, I.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((I) => /* @__PURE__ */ e(Y, { value: I.value, children: I.label }, I.value))
+                  ]
+                }
+              )
+            },
+            o.field
+          ) : /* @__PURE__ */ e(
+            Ae,
+            {
+              size: "small",
+              placeholder: o.headerName,
+              value: $,
+              onChange: (I) => P(o.field, I.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__ */ c(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: u,
+              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__ */ c(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: l,
+  actions: n,
+  maxInline: m = 2
+}) => {
+  const [d, s] = fr.useState(null), v = !!d, 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(), s(t.currentTarget);
+  }, y = () => {
+    s(null);
+  }, D = (t) => {
+    y(), t.onClick(l);
+  }, h = (t) => typeof t.disabled == "function" ? t.disabled(l) : t.disabled;
+  return /* @__PURE__ */ c(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(l);
+        },
+        disabled: h(t),
+        sx: { p: 0.5 },
+        children: t.icon
+      }
+    ) }) }, t.id)),
+    g.length > 0 && /* @__PURE__ */ c(We, { children: [
+      /* @__PURE__ */ e(
+        W,
+        {
+          size: "small",
+          onClick: f,
+          sx: { p: 0.5 },
+          children: /* @__PURE__ */ e(Fr, { fontSize: "small" })
+        }
+      ),
+      /* @__PURE__ */ e(
+        Le,
+        {
+          anchorEl: d,
+          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__ */ c(
+            Y,
+            {
+              onClick: () => D(t),
+              disabled: h(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: l,
+  actions: n,
+  isHovered: m = !1
+}) => {
+  const d = (s) => typeof s.disabled == "function" ? s.disabled(l) : s.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((s) => /* @__PURE__ */ e(O, { title: s.label, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+        W,
+        {
+          size: "small",
+          color: s.color || "default",
+          onClick: (v) => {
+            v.stopPropagation(), s.onClick(l);
+          },
+          disabled: d(s),
+          sx: {
+            p: 0.5,
+            "&:hover": {
+              backgroundColor: "action.hover"
+            }
+          },
+          children: s.icon
+        }
+      ) }) }, s.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 = (l) => `${Ee[l % Ee.length]}%`, Nr = (l, n) => `${pe[l % pe.length][n % pe[0].length]}%`, Ur = ({
+  columns: l,
+  rows: n,
+  density: m,
+  showCheckbox: d = !1,
+  colors: s
+}) => {
+  const v = me[m];
+  return /* @__PURE__ */ c(x, { sx: { width: "100%", overflow: "hidden" }, children: [
+    /* @__PURE__ */ c(
+      x,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          height: v.headerHeight,
+          px: 2,
+          gap: 2,
+          backgroundColor: s.headerBg,
+          borderBottom: `2px solid ${s.headerBorder || s.borderColor}`
+        },
+        children: [
+          d && /* @__PURE__ */ e(
+            A,
+            {
+              variant: "rectangular",
+              width: 18,
+              height: 18,
+              sx: { borderRadius: "4px", flexShrink: 0 }
+            }
+          ),
+          Array.from({ length: l }).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__ */ c(
+      x,
+      {
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          height: v.rowHeight,
+          px: 2,
+          gap: 2,
+          borderBottom: `1px solid ${s.borderColor}`,
+          backgroundColor: s.background
+        },
+        children: [
+          d && /* @__PURE__ */ e(
+            A,
+            {
+              variant: "rectangular",
+              width: 18,
+              height: 18,
+              sx: { borderRadius: "4px", flexShrink: 0 }
+            }
+          ),
+          Array.from({ length: l }).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: l,
+  subtitle: n,
+  searchValue: m,
+  onSearchChange: d,
+  showSearch: s = !0,
+  selectedCount: v,
+  totalCount: C,
+  bulkActions: g,
+  onBulkAction: f,
+  onClearSelection: y,
+  onAddRow: D,
+  onRefresh: h,
+  onExport: t,
+  showExport: M = !0,
+  showRefresh: G = !0,
+  showColumnSelector: _ = !0,
+  showFilterButton: P = !0,
+  showDensitySelector: T = !0,
+  colors: w
+}) {
+  const u = le(), [B, o] = H(null), p = (F) => {
+    o(F.currentTarget);
+  }, R = () => {
+    o(null);
+  }, $ = (F) => {
+    t?.(F), R();
+  }, I = v > 0;
+  return /* @__PURE__ */ c(
+    Oe,
+    {
+      sx: {
+        pl: 2,
+        pr: 1.5,
+        py: 1.5,
+        borderBottom: `1px solid ${w.borderColor}`,
+        backgroundColor: I ? ae(u.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: I ? /* @__PURE__ */ c(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(u.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((F, Z) => /* @__PURE__ */ e(O, { title: F.label, children: /* @__PURE__ */ e(
+            W,
+            {
+              size: "small",
+              onClick: () => f?.(F),
+              color: F.color || "default",
+              sx: {
+                borderRadius: "8px",
+                "&:hover": {
+                  backgroundColor: ae(u.palette.primary.main, 0.1)
+                }
+              },
+              children: F.icon
+            }
+          ) }, Z)) })
+        ] }) : /* @__PURE__ */ c(x, { children: [
+          l && /* @__PURE__ */ e(
+            L,
+            {
+              variant: "subtitle1",
+              fontWeight: 600,
+              color: "text.primary",
+              sx: { lineHeight: 1.3 },
+              children: l
+            }
+          ),
+          n && /* @__PURE__ */ e(L, { variant: "caption", color: "text.secondary", children: n })
+        ] }) }),
+        /* @__PURE__ */ c(j, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+          s && /* @__PURE__ */ e(
+            Ae,
+            {
+              size: "small",
+              placeholder: "Search...",
+              value: m,
+              onChange: (F) => d(F.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__ */ c(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__ */ c(
+              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" }) })
+                ]
+              }
+            )
+          ] }),
+          G && h && /* @__PURE__ */ e(O, { title: "Refresh", children: /* @__PURE__ */ e(
+            W,
+            {
+              size: "small",
+              onClick: h,
+              sx: {
+                borderRadius: "8px",
+                "&:hover": { backgroundColor: w.hover }
+              },
+              children: /* @__PURE__ */ e(Br, { fontSize: "small" })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+const ft = ({
+  // Core props
+  rows: l,
+  columns: n,
+  loading: m = !1,
+  getRowId: d,
+  // Density
+  density: s = "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: h,
+  // Row Grouping
+  rowGrouping: t,
+  // Inline Add
+  inlineAdd: M,
+  // Column Pinning
+  columnPinning: G,
+  // Row Reordering
+  rowReorder: _,
+  // Actions
+  rowActions: P,
+  rowActionsConfig: T,
+  bulkActions: w,
+  // Toolbar
+  toolbar: u = {
+    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: I = !0,
+  stripedRows: F = !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, i = Ve[Me], N = kr(), [te, Qr] = H(s), [K, Re] = H({
+    type: "include",
+    ids: /* @__PURE__ */ new Set()
+  }), [Je, Qe] = H({
+    page: g.defaultPage || 0,
+    pageSize: g.pageSize || 25
+  }), [Xe, Ze] = H(
+    f.defaultSort ? [f.defaultSort] : []
+  ), [er, rr] = H({
+    items: y.defaultFilters || []
+  }), [tr, or] = H({}), [nr, oe] = H(!1), [q, ir] = H(""), [De, Te] = H(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 = d ? d(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, d]);
+  ne(() => {
+    if (G?.enabled)
+      return {
+        left: G.left || [],
+        right: G.right || (U.length > 0 && T?.pinned ? ["__actions__"] : [])
+      };
+  }, [G, U.length, T?.pinned]);
+  const Q = ne(() => {
+    if (!q.trim()) return l;
+    const r = q.toLowerCase();
+    return l.filter(
+      (b) => Object.values(b).some(
+        (S) => S != null && String(S).toLowerCase().includes(r)
+      )
+    );
+  }, [l, 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 = l.filter((S) => {
+        const E = d ? d(S) : S.id;
+        return K.ids.has(E);
+      });
+      r.onClick(b);
+    },
+    [l, K, d]
+  ), 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(() => h?.enabled ? {
+    treeData: !0,
+    getTreeDataPath: (r) => h.getTreeDataPath ? h.getTreeDataPath(r) : r.hierarchy || [String(r.id)],
+    groupingColDef: {
+      headerName: h.groupingColumnLabel || "Group",
+      width: h.groupingColumnWidth || 200
+    },
+    defaultGroupingExpansionDepth: h.defaultExpanded ? -1 : 0
+  } : {}, [h]), gr = z(
+    (r) => {
+      const b = [];
+      if (F && Q.findIndex((E) => (d ? d(E) : E.id) === r.id) % 2 === 1 && b.push("striped-row"), ce) {
+        const S = ce(r.row);
+        S && b.push(S);
+      }
+      return b.join(" ");
+    },
+    [F, ce, Q, d]
+  ), mr = z(
+    () => /* @__PURE__ */ e(
+      Yr,
+      {
+        title: B,
+        subtitle: o,
+        searchValue: q,
+        onSearchChange: Fe,
+        showSearch: u.showSearch,
+        selectedCount: K.ids.size,
+        totalCount: Q.length,
+        bulkActions: w,
+        onBulkAction: $e,
+        onClearSelection: Ie,
+        onAddRow: M?.enabled ? () => oe(!0) : void 0,
+        onRefresh: Ce,
+        onExport: u.showExport ? Ge : void 0,
+        showExport: u.showExport,
+        showRefresh: u.showRefresh,
+        showColumnSelector: u.showColumnVisibility,
+        showFilterButton: u.showFilter,
+        showDensitySelector: u.showDensitySelector && v,
+        colors: i
+      }
+    ),
+    [
+      B,
+      o,
+      q,
+      Fe,
+      u,
+      K.ids.size,
+      Q.length,
+      w,
+      $e,
+      Ie,
+      M?.enabled,
+      Ce,
+      Ge,
+      v,
+      i
+    ]
+  );
+  return m ? /* @__PURE__ */ c(
+    He,
+    {
+      elevation: fe,
+      sx: {
+        width: "100%",
+        height: p,
+        borderRadius: be,
+        overflow: "hidden",
+        border: Z ? `1px solid ${i.borderColor}` : "none",
+        backgroundColor: i.background,
+        ...ke
+      },
+      className: ve,
+      children: [
+        u.show && /* @__PURE__ */ c(
+          Oe,
+          {
+            sx: {
+              pl: 2,
+              pr: 1.5,
+              py: 1.5,
+              borderBottom: `1px solid ${i.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: i
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(x, { sx: { width: "100%", ...ke }, className: ve, children: /* @__PURE__ */ c(
+    He,
+    {
+      elevation: fe,
+      sx: {
+        width: "100%",
+        height: p,
+        maxHeight: R,
+        minHeight: $,
+        borderRadius: be,
+        overflow: "hidden",
+        border: Z ? `1px solid ${i.borderColor}` : "none",
+        backgroundColor: i.background,
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ e(
+          zr,
+          {
+            apiRef: N,
+            rows: Q,
+            columns: Be,
+            loading: !1,
+            getRowId: d,
+            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: u.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": i.headerBg,
+              "--DataGrid-t-color-border-base": i.headerBorder || i.borderColor,
+              "--DataGrid-t-color-background-base": i.background,
+              "--DataGrid-t-color-foreground-base": i.text,
+              "--DataGrid-t-color-foreground-muted": i.textSecondary,
+              "--DataGrid-t-cell-background-pinned": i.background,
+              "--DataGrid-t-radius-base": "0px",
+              // No internal border radius
+              // Header styles - with !important to override CSS variables
+              "& .MuiDataGrid-columnHeaders": {
+                backgroundColor: `${i.headerBg} !important`,
+                borderBottom: `2px solid ${i.headerBorder} !important`,
+                borderRadius: "0 !important"
+                // Remove any internal border radius
+              },
+              "& .MuiDataGrid-columnHeader": {
+                fontWeight: V.headerWeight,
+                fontSize: J.fontSize,
+                color: `${i.headerText} !important`,
+                backgroundColor: `${i.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: `${i.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: i.borderColor,
+                opacity: 0.5
+              },
+              // Cell styles
+              "& .MuiDataGrid-cell": {
+                fontSize: J.fontSize,
+                borderBottom: `1px solid ${i.borderColor}`,
+                color: i.text,
+                display: "flex",
+                alignItems: "center",
+                "&:focus, &:focus-within": {
+                  outline: "none"
+                }
+              },
+              // Row styles
+              "& .MuiDataGrid-row": {
+                transition: Ar.hover,
+                "&:hover": {
+                  backgroundColor: i.hover
+                },
+                "&.Mui-selected": {
+                  backgroundColor: i.selected,
+                  "&:hover": {
+                    backgroundColor: ae(ze.palette.primary.main, 0.12)
+                  }
+                }
+              },
+              "& .MuiDataGrid-row.striped-row": {
+                backgroundColor: i.alternateRow,
+                "&:hover": {
+                  backgroundColor: i.hover
+                }
+              },
+              // Footer styles
+              "& .MuiDataGrid-footerContainer": {
+                borderTop: `1px solid ${i.borderColor}`,
+                backgroundColor: i.background,
+                minHeight: 48
+              },
+              "& .MuiTablePagination-root": {
+                color: i.text
+              },
+              "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
+                fontSize: "0.8125rem",
+                color: i.textSecondary
+              },
+              // Checkbox styles
+              "& .MuiCheckbox-root": {
+                color: i.textSecondary,
+                padding: "6px",
+                "&.Mui-checked": {
+                  color: "primary.main"
+                }
+              },
+              // Empty/loading overlay
+              "& .MuiDataGrid-overlay": {
+                backgroundColor: "transparent"
+              },
+              // Virtual scroller
+              "& .MuiDataGrid-virtualScroller": {
+                backgroundColor: i.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: i.borderColor,
+                borderRadius: 4,
+                "&:hover": {
+                  backgroundColor: i.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: l, color: n, height: m = 40 }) => {
+  if (!l || l.length < 2) return null;
+  const d = Math.min(...l), v = Math.max(...l) - d || 1, C = 100, g = l.map((y, D) => {
+    const h = D / (l.length - 1) * C, t = m - (y - d) / v * m;
+    return `${h},${t}`;
+  }).join(" "), f = `0,${m} ${g} ${C},${m}`;
+  return /* @__PURE__ */ c("svg", { width: "100%", height: m, viewBox: `0 0 ${C} ${m}`, preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ c("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 })
+    ] }) }),
+    /* @__PURE__ */ e(
+      "polygon",
+      {
+        points: f,
+        fill: `url(#sparkline-gradient-${n})`
+      }
+    ),
+    /* @__PURE__ */ e(
+      "polyline",
+      {
+        points: g,
+        fill: "none",
+        stroke: n,
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}, qr = {
+  small: {
+    padding: k.density.standard.cellPadding,
+    titleSize: "caption",
+    valueSize: "h5",
+    iconSize: 32
+  },
+  medium: {
+    padding: k.density.comfortable.cellPadding,
+    titleSize: "body2",
+    valueSize: "h4",
+    iconSize: 40
+  },
+  large: {
+    padding: k.inline.relaxed,
+    // 20px - relaxed breathing room
+    titleSize: "body1",
+    valueSize: "h3",
+    iconSize: 48
+  }
+}, bt = ({
+  title: l,
+  value: n,
+  unit: m,
+  trend: d,
+  trendValue: s,
+  trendLabel: v = "vs last period",
+  sparklineData: C,
+  subtitle: g,
+  icon: f,
+  iconColor: y = "primary",
+  comparison: D,
+  loading: h = !1,
+  infoTooltip: t,
+  onMoreClick: M,
+  onClick: G,
+  footer: _,
+  size: P = "medium",
+  variant: T = "default",
+  fullHeight: w = !1
+}) => {
+  const u = le(), B = qr[P], o = () => {
+    switch (d) {
+      case "up":
+        return u.palette.success.main;
+      case "down":
+        return u.palette.error.main;
+      default:
+        return u.palette.text.secondary;
+    }
+  }, p = () => {
+    switch (d) {
+      case "up":
+        return /* @__PURE__ */ e(Wr, { sx: { fontSize: 18 } });
+      case "down":
+        return /* @__PURE__ */ e(Er, { sx: { fontSize: 18 } });
+      default:
+        return /* @__PURE__ */ e(Pr, { sx: { fontSize: 18 } });
+    }
+  }, R = () => ({
+    primary: k.effects.overlay.pressed,
+    // 12% - close to 10%
+    secondary: k.effects.overlay.pressed,
+    success: k.effects.state.successSubtle,
+    warning: k.effects.state.warningSubtle,
+    error: k.effects.state.errorSubtle,
+    info: k.effects.state.infoSubtle
+  })[y] || k.effects.overlay.pressed, $ = {
+    default: {},
+    outlined: {
+      border: `1px solid ${u.palette.divider}`,
+      boxShadow: "none"
+    },
+    filled: {
+      backgroundColor: k.effects.overlay.hoverSubtle,
+      // 4% black
+      boxShadow: "none"
+    }
+  };
+  return /* @__PURE__ */ e(
+    Sr,
+    {
+      elevation: T === "default" ? 1 : 0,
+      onClick: G,
+      sx: {
+        borderRadius: k.borders.radiusPx.lg,
+        // 12px to match AI StatCard
+        height: w ? "100%" : "auto",
+        cursor: G ? "pointer" : "default",
+        transition: `all ${k.motion.duration.fast} ${k.motion.easing.default}`,
+        "&:hover": G ? {
+          boxShadow: u.shadows[4],
+          transform: "translateY(-2px)"
+        } : {},
+        ...$[T]
+      },
+      children: /* @__PURE__ */ c(Cr, { sx: { p: `${B.padding}px !important` }, children: [
+        /* @__PURE__ */ c(
+          x,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              mb: 2
+            },
+            children: [
+              /* @__PURE__ */ c(x, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                f && /* @__PURE__ */ e(
+                  x,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: B.iconSize,
+                      height: B.iconSize,
+                      borderRadius: `${k.borders.radius.iconContainer}px`,
+                      backgroundColor: R(),
+                      color: u.palette[y].main
+                    },
+                    children: f
+                  }
+                ),
+                /* @__PURE__ */ c(x, { children: [
+                  /* @__PURE__ */ c(x, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                    h ? /* @__PURE__ */ e(A, { width: 80, height: 20 }) : /* @__PURE__ */ e(
+                      L,
+                      {
+                        variant: B.titleSize,
+                        color: "text.secondary",
+                        fontWeight: 500,
+                        children: l
+                      }
+                    ),
+                    t && /* @__PURE__ */ e(O, { title: t, arrow: !0, children: /* @__PURE__ */ e(
+                      Gr,
+                      {
+                        sx: {
+                          fontSize: 14,
+                          color: u.palette.text.disabled,
+                          cursor: "help"
+                        }
+                      }
+                    ) })
+                  ] }),
+                  g && !h && /* @__PURE__ */ e(L, { variant: "caption", color: "text.secondary", children: g })
+                ] })
+              ] }),
+              M && /* @__PURE__ */ e(
+                W,
+                {
+                  size: "small",
+                  onClick: (I) => {
+                    I.stopPropagation(), M(I);
+                  },
+                  sx: { mr: -1, mt: -0.5 },
+                  children: /* @__PURE__ */ e(Hr, { fontSize: "small" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(x, { sx: { mb: C ? 2 : d ? 1 : 0 }, children: h ? /* @__PURE__ */ e(A, { width: 120, height: 40 }) : /* @__PURE__ */ c(
+          L,
+          {
+            variant: B.valueSize,
+            fontWeight: 700,
+            sx: {
+              display: "flex",
+              alignItems: "baseline",
+              gap: 0.5
+            },
+            children: [
+              n,
+              m && /* @__PURE__ */ e(
+                L,
+                {
+                  component: "span",
+                  variant: "body2",
+                  color: "text.secondary",
+                  fontWeight: 400,
+                  children: m
+                }
+              )
+            ]
+          }
+        ) }),
+        C && C.length > 1 && !h && /* @__PURE__ */ e(x, { sx: { mb: 2, mx: -1 }, children: /* @__PURE__ */ e(
+          Kr,
+          {
+            data: C,
+            color: o(),
+            height: P === "small" ? 30 : P === "large" ? 50 : 40
+          }
+        ) }),
+        d && !h && /* @__PURE__ */ c(
+          x,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ c(
+                x,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    color: o()
+                  },
+                  children: [
+                    p(),
+                    s !== void 0 && /* @__PURE__ */ c(L, { variant: "body2", fontWeight: 600, children: [
+                      s > 0 ? "+" : "",
+                      s,
+                      "%"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(L, { variant: "caption", color: "text.secondary", children: v })
+            ]
+          }
+        ),
+        D && !h && /* @__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 ${u.palette.divider}` }, children: _ })
+      ] })
+    }
+  );
+};
+export {
+  ft as D,
+  bt as a
+};