@trinitydesign/design-system 1.2.0

package/dist/charts.js

@@ -0,0 +1,2650 @@
+import { jsxs as s, jsx as t, Fragment as bt } from "react/jsx-runtime";
+import $t, { useId as Ft, useMemo as Q, useState as It, useCallback as pt } from "react";
+import { ResponsiveContainer as Z, LineChart as xt, CartesianGrid as lt, XAxis as at, YAxis as et, Tooltip as nt, Legend as st, ReferenceLine as tt, Area as dt, Line as yt, BarChart as vt, Bar as kt, AreaChart as St, PieChart as Kt, Pie as Rt, Cell as gt, Sector as Dt, ScatterChart as Tt, ZAxis as Ot, Scatter as Bt, RadialBarChart as Ct, RadialBar as zt, PolarAngleAxis as Et, ComposedChart as jt } from "recharts";
+import { Box as l, Skeleton as ut, Typography as z, useTheme as _t } from "@mui/material";
+import { b as K, a as wt, s as G } from "./ai.js";
+const V = wt.colors.gray, M = [
+  K.primary.light,
+  // Purple (#7841C9)
+  K.secondary.main,
+  // Coral (#FF6150)
+  K.primary.main,
+  // Navy (#0A2540)
+  "#24A148",
+  // Green (success)
+  "#F59E0B",
+  // Amber (warning)
+  "#3B82F6",
+  // Blue
+  "#8B5CF6",
+  // Violet
+  "#EC4899",
+  // Pink
+  "#14B8A6",
+  // Teal
+  "#F97316"
+  // Orange
+], J = wt.colors.indigo;
+J[50], // #EDE7FD
+J[100], // #D2C3FA
+J[200], // #B49CF6
+J[300], // #9574F2
+J[400], // #7E57F0
+J[500], // #6739ED
+J[600], // #5F33EB
+J[700], // #542CE8
+J[800], // #4A24E5
+J[900];
+const ft = {
+  success: "#24A148",
+  error: "#DA1E28",
+  neutral: K.neutral.gray500
+}, o = {
+  fontFamily: '"Montserrat", sans-serif',
+  title: {
+    fontSize: 16,
+    fontWeight: 600,
+    fill: V[900]
+  },
+  subtitle: {
+    fontSize: 13,
+    fontWeight: 400,
+    fill: K.neutral.gray500
+  },
+  axisLabel: {
+    fontSize: 12,
+    fontWeight: 500,
+    fill: K.neutral.gray600
+  },
+  axisTick: {
+    fontSize: 11,
+    fontWeight: 400,
+    fill: K.neutral.gray500
+  },
+  legend: {
+    fontSize: 12,
+    fontWeight: 500,
+    fill: V[700]
+  },
+  tooltip: {
+    fontSize: 12,
+    fontWeight: 400,
+    fill: V[700]
+  },
+  tooltipLabel: {
+    fontSize: 13,
+    fontWeight: 600,
+    fill: V[900]
+  },
+  dataLabel: {
+    fontSize: 11,
+    fontWeight: 500,
+    fill: V[700]
+  }
+}, At = {
+  md: 12
+}, N = {
+  defaultHeight: 300,
+  // Stroke widths
+  strokeWidth: {
+    default: 2
+  },
+  // Dot/point sizes
+  dotSize: {
+    small: 4,
+    default: 6
+  },
+  // Bar sizing
+  barRadius: 4,
+  barMaxWidth: 60
+}, X = {
+  // Flat properties for simple access
+  stroke: V[200],
+  strokeDasharray: "3 3",
+  strokeWidth: 1,
+  // Theme-specific properties
+  light: {
+    stroke: V[200],
+    strokeOpacity: 1
+  },
+  dark: {
+    stroke: V[700],
+    strokeOpacity: 0.5
+  }
+}, v = {
+  // Flat properties for simple access
+  stroke: V[300],
+  strokeWidth: 1,
+  tickSize: 6,
+  tickPadding: 8,
+  tickFontSize: 11,
+  labelFontSize: 12,
+  // Theme-specific properties
+  light: {
+    lineColor: V[300],
+    lineOpacity: 1,
+    tickColor: K.neutral.gray500
+  },
+  dark: {
+    lineColor: K.neutral.gray600,
+    lineOpacity: 0.5,
+    tickColor: K.neutral.gray400
+  }
+}, _ = {
+  backgroundColor: "#FFFFFF",
+  borderColor: V[200],
+  borderRadius: 8,
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  padding: "12px 16px"
+}, it = {
+  iconSize: 12
+}, Y = {
+  duration: 400,
+  easing: "ease-out"
+};
+K.primary.light;
+V[900], K.neutral.gray500, V[200], V[300], V[200], V[700], K.neutral.darkPaper, K.neutral.white, K.neutral.gray400, G.effects.onDark.emphasis, G.effects.onDark.divider, K.neutral.darkPaper, G.effects.onDark.emphasis, V[300];
+const P = (e) => M[e % M.length], U = ({
+  title: e,
+  subtitle: r,
+  height: d = 300,
+  loading: c = !1,
+  error: f,
+  empty: i = !1,
+  emptyMessage: b = "No data available",
+  children: n,
+  sx: g,
+  variant: m = "default"
+}) => {
+  const a = {
+    width: "100%",
+    ...m === "outlined" && {
+      border: "1px solid",
+      borderColor: "divider",
+      // Use MUI theme
+      borderRadius: `${G.borders.radius.card}px`,
+      p: 2
+    },
+    ...m === "elevated" && {
+      boxShadow: G.effects.shadow.surface,
+      borderRadius: `${G.borders.radius.card}px`,
+      p: 2,
+      backgroundColor: "background.paper"
+      // Use MUI theme
+    },
+    ...g
+  };
+  return c ? /* @__PURE__ */ s(l, { sx: a, children: [
+    e && /* @__PURE__ */ s(l, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ t(ut, { variant: "text", width: 200, height: 24 }),
+      r && /* @__PURE__ */ t(ut, { variant: "text", width: 300, height: 18, sx: { mt: 0.5 } })
+    ] }),
+    /* @__PURE__ */ t(
+      ut,
+      {
+        variant: "rectangular",
+        height: d,
+        sx: { borderRadius: 1 }
+      }
+    )
+  ] }) : f ? /* @__PURE__ */ s(l, { sx: a, children: [
+    e && /* @__PURE__ */ s(l, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ t(
+        z,
+        {
+          sx: {
+            ...o.title,
+            fontFamily: o.fontFamily
+          },
+          children: e
+        }
+      ),
+      r && /* @__PURE__ */ t(
+        z,
+        {
+          sx: {
+            ...o.subtitle,
+            fontFamily: o.fontFamily,
+            mt: 0.5
+          },
+          children: r
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      l,
+      {
+        sx: {
+          height: d,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(218, 30, 40, 0.05)",
+          borderRadius: 1,
+          border: "1px dashed rgba(218, 30, 40, 0.3)"
+        },
+        children: /* @__PURE__ */ s(l, { sx: { textAlign: "center", p: 3 }, children: [
+          /* @__PURE__ */ t(
+            z,
+            {
+              sx: {
+                color: G.colors.status.error.text,
+                fontWeight: 500,
+                mb: 0.5
+              },
+              children: "Error loading chart"
+            }
+          ),
+          /* @__PURE__ */ t(
+            z,
+            {
+              variant: "body2",
+              sx: { color: "text.secondary" },
+              children: f
+            }
+          )
+        ] })
+      }
+    )
+  ] }) : i ? /* @__PURE__ */ s(l, { sx: a, children: [
+    e && /* @__PURE__ */ s(l, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ t(
+        z,
+        {
+          sx: {
+            ...o.title,
+            fontFamily: o.fontFamily
+          },
+          children: e
+        }
+      ),
+      r && /* @__PURE__ */ t(
+        z,
+        {
+          sx: {
+            ...o.subtitle,
+            fontFamily: o.fontFamily,
+            mt: 0.5
+          },
+          children: r
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(
+      l,
+      {
+        sx: {
+          height: d,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "action.hover",
+          // Use MUI theme for subtle bg
+          borderRadius: `${G.borders.radius.card}px`,
+          border: "1px dashed",
+          borderColor: "divider"
+          // Use MUI theme
+        },
+        children: /* @__PURE__ */ s(l, { sx: { textAlign: "center", p: 3 }, children: [
+          /* @__PURE__ */ s(
+            l,
+            {
+              component: "svg",
+              sx: {
+                width: 48,
+                height: 48,
+                color: "text.disabled",
+                // Use MUI theme
+                mb: 1
+              },
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 1.5,
+              children: [
+                /* @__PURE__ */ t("path", { d: "M3 3v18h18", strokeLinecap: "round", strokeLinejoin: "round" }),
+                /* @__PURE__ */ t("path", { d: "M7 16l4-4 4 4 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            z,
+            {
+              sx: {
+                color: "text.secondary",
+                // Use MUI theme
+                fontWeight: 500
+              },
+              children: b
+            }
+          )
+        ] })
+      }
+    )
+  ] }) : /* @__PURE__ */ s(l, { sx: a, children: [
+    (e || r) && /* @__PURE__ */ s(l, { sx: { mb: At.md }, children: [
+      e && /* @__PURE__ */ t(
+        z,
+        {
+          sx: {
+            ...o.title,
+            fontFamily: o.fontFamily
+          },
+          children: e
+        }
+      ),
+      r && /* @__PURE__ */ t(
+        z,
+        {
+          sx: {
+            ...o.subtitle,
+            fontFamily: o.fontFamily,
+            mt: 0.5
+          },
+          children: r
+        }
+      )
+    ] }),
+    n
+  ] });
+}, ht = ({
+  active: e,
+  payload: r,
+  label: d,
+  valueFormatter: c,
+  labelFormatter: f,
+  showTotal: i = !1,
+  unit: b = ""
+}) => {
+  if (!e || !r || r.length === 0)
+    return null;
+  const n = f ? f(String(d)) : d, g = (a) => c ? c(a) : typeof a == "number" ? a.toLocaleString() : a, m = i ? r.reduce((a, u) => a + (Number(u.value) || 0), 0) : null;
+  return /* @__PURE__ */ s(
+    l,
+    {
+      sx: {
+        backgroundColor: _.backgroundColor,
+        border: `1px solid ${_.borderColor}`,
+        borderRadius: `${_.borderRadius}px`,
+        boxShadow: _.boxShadow,
+        padding: _.padding,
+        minWidth: 140
+      },
+      children: [
+        n && /* @__PURE__ */ t(
+          z,
+          {
+            sx: {
+              ...o.tooltipLabel,
+              fontFamily: o.fontFamily,
+              mb: 1,
+              pb: 1,
+              borderBottom: `1px solid ${K.neutral.gray100}`
+            },
+            children: n
+          }
+        ),
+        /* @__PURE__ */ t(l, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: r.map((a, u) => /* @__PURE__ */ s(
+          l,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 2
+            },
+            children: [
+              /* @__PURE__ */ s(l, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                /* @__PURE__ */ t(
+                  l,
+                  {
+                    sx: {
+                      width: 10,
+                      height: 10,
+                      borderRadius: `${G.borders.radius.circle}px`,
+                      // Perfect circle
+                      backgroundColor: a.color,
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  z,
+                  {
+                    sx: {
+                      ...o.tooltip,
+                      fontFamily: o.fontFamily,
+                      color: K.neutral.gray600
+                    },
+                    children: a.name
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s(
+                z,
+                {
+                  sx: {
+                    ...o.tooltip,
+                    fontFamily: o.fontFamily,
+                    fontWeight: 600,
+                    color: K.neutral.gray900
+                  },
+                  children: [
+                    g(a.value),
+                    b
+                  ]
+                }
+              )
+            ]
+          },
+          u
+        )) }),
+        i && m !== null && /* @__PURE__ */ s(
+          l,
+          {
+            sx: {
+              mt: 1,
+              pt: 1,
+              borderTop: `1px solid ${K.neutral.gray100}`,
+              display: "flex",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ t(
+                z,
+                {
+                  sx: {
+                    ...o.tooltip,
+                    fontFamily: o.fontFamily,
+                    fontWeight: 600
+                  },
+                  children: "Total"
+                }
+              ),
+              /* @__PURE__ */ s(
+                z,
+                {
+                  sx: {
+                    ...o.tooltip,
+                    fontFamily: o.fontFamily,
+                    fontWeight: 600
+                  },
+                  children: [
+                    g(m),
+                    b
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Qt = ({ active: e, payload: r, valueFormatter: d, unit: c = "" }) => {
+  if (!e || !r || r.length === 0)
+    return null;
+  const f = r[0], i = d ? d(f.value) : f.value.toLocaleString();
+  return /* @__PURE__ */ s(
+    l,
+    {
+      sx: {
+        backgroundColor: _.backgroundColor,
+        border: `1px solid ${_.borderColor}`,
+        borderRadius: `${_.borderRadius}px`,
+        boxShadow: _.boxShadow,
+        px: 1.5,
+        py: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ t(
+          l,
+          {
+            sx: {
+              width: 8,
+              height: 8,
+              borderRadius: `${G.borders.radius.circle}px`,
+              // Perfect circle
+              backgroundColor: f.color
+            }
+          }
+        ),
+        /* @__PURE__ */ s(
+          z,
+          {
+            sx: {
+              ...o.tooltip,
+              fontFamily: o.fontFamily,
+              fontWeight: 600
+            },
+            children: [
+              i,
+              c
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, ct = ({
+  payload: e,
+  direction: r = "horizontal",
+  formatter: d,
+  onClick: c,
+  disabledKeys: f = []
+}) => !e || e.length === 0 ? null : /* @__PURE__ */ t(
+  l,
+  {
+    sx: {
+      display: "flex",
+      flexDirection: r === "horizontal" ? "row" : "column",
+      flexWrap: "wrap",
+      justifyContent: "center",
+      gap: r === "horizontal" ? 3 : 1,
+      pt: 2
+    },
+    children: e.map((i, b) => {
+      const n = f.includes(i.dataKey || i.value), g = d ? d(i.value) : i.value;
+      return /* @__PURE__ */ s(
+        l,
+        {
+          onClick: () => c?.(i.dataKey || i.value),
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            cursor: c ? "pointer" : "default",
+            opacity: n ? 0.4 : 1,
+            transition: "opacity 0.2s ease",
+            "&:hover": c ? {
+              opacity: n ? 0.4 : 0.7
+            } : {}
+          },
+          children: [
+            /* @__PURE__ */ t(
+              l,
+              {
+                sx: {
+                  width: it.iconSize,
+                  height: it.iconSize,
+                  borderRadius: G.borders.radius.circle,
+                  backgroundColor: i.color,
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.legend,
+                  fontFamily: o.fontFamily,
+                  textDecoration: n ? "line-through" : "none"
+                },
+                children: g
+              }
+            )
+          ]
+        },
+        `legend-${b}`
+      );
+    })
+  }
+), Ut = ({ payload: e, direction: r = "horizontal", formatter: d, onToggle: c, hiddenKeys: f }) => !e || e.length === 0 ? null : /* @__PURE__ */ t(
+  l,
+  {
+    sx: {
+      display: "flex",
+      flexDirection: r === "horizontal" ? "row" : "column",
+      flexWrap: "wrap",
+      justifyContent: "center",
+      gap: r === "horizontal" ? 3 : 1,
+      pt: 2
+    },
+    children: e.map((i, b) => {
+      const n = i.dataKey || i.value, g = f.includes(n), m = d ? d(i.value) : i.value;
+      return /* @__PURE__ */ s(
+        l,
+        {
+          onClick: () => c(n),
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            cursor: "pointer",
+            opacity: g ? 0.4 : 1,
+            transition: `all ${G.motion.duration.fast}`,
+            px: 1.5,
+            py: 0.5,
+            borderRadius: 1,
+            "&:hover": {
+              backgroundColor: G.effects.overlay.hover
+              // 8%
+            }
+          },
+          children: [
+            /* @__PURE__ */ t(
+              l,
+              {
+                sx: {
+                  width: it.iconSize,
+                  height: it.iconSize,
+                  borderRadius: G.borders.radius.circle,
+                  backgroundColor: g ? "action.disabled" : i.color,
+                  // @intentional-color: chart series color
+                  flexShrink: 0,
+                  transition: `background-color ${G.motion.duration.fast}`
+                }
+              }
+            ),
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.legend,
+                  fontFamily: o.fontFamily,
+                  textDecoration: g ? "line-through" : "none",
+                  color: g ? "text.disabled" : o.legend.fill
+                  // @intentional-color: chart text
+                },
+                children: m
+              }
+            )
+          ]
+        },
+        `legend-${b}`
+      );
+    })
+  }
+), mt = ({
+  payload: e,
+  data: r,
+  direction: d = "vertical",
+  showValues: c = !0,
+  showPercent: f = !0,
+  valueFormatter: i
+}) => {
+  if (!e || e.length === 0)
+    return null;
+  const b = r?.reduce((n, g) => n + g.value, 0) || 0;
+  return /* @__PURE__ */ t(
+    l,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: d === "horizontal" ? "row" : "column",
+        flexWrap: "wrap",
+        gap: d === "horizontal" ? 3 : 1.5,
+        py: 1
+      },
+      children: e.map((n, g) => {
+        const a = r?.find((x) => x.name === n.value)?.value || 0, u = b > 0 ? (a / b * 100).toFixed(1) : "0", F = i ? i(a) : a.toLocaleString();
+        return /* @__PURE__ */ s(
+          l,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              minWidth: d === "horizontal" ? "auto" : 160
+            },
+            children: [
+              /* @__PURE__ */ t(
+                l,
+                {
+                  sx: {
+                    width: it.iconSize,
+                    height: it.iconSize,
+                    borderRadius: `${G.borders.radius.circle}px`,
+                    // Perfect circle
+                    backgroundColor: n.color,
+                    flexShrink: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ s(l, { sx: { display: "flex", flexDirection: "column" }, children: [
+                /* @__PURE__ */ t(
+                  z,
+                  {
+                    sx: {
+                      ...o.legend,
+                      fontFamily: o.fontFamily
+                    },
+                    children: n.value
+                  }
+                ),
+                (c || f) && /* @__PURE__ */ s(
+                  z,
+                  {
+                    sx: {
+                      fontSize: 11,
+                      color: "text.secondary",
+                      // Use MUI theme
+                      fontFamily: o.fontFamily
+                    },
+                    children: [
+                      c && F,
+                      c && f && " • ",
+                      f && `${u}%`
+                    ]
+                  }
+                )
+              ] })
+            ]
+          },
+          `legend-${g}`
+        );
+      })
+    }
+  );
+}, te = ({
+  data: e,
+  series: r,
+  height: d = N.defaultHeight,
+  width: c = "100%",
+  title: f,
+  subtitle: i,
+  margin: b = { top: 20, right: 30, left: 20, bottom: 20 },
+  colors: n = M,
+  showGrid: g = !0,
+  gridDirection: m = "horizontal",
+  xAxis: a = {},
+  yAxis: u = {},
+  legend: F = { show: !0, position: "bottom" },
+  tooltip: x = { show: !0 },
+  animate: j = !0,
+  animationDuration: R = Y.duration,
+  loading: A = !1,
+  emptyMessage: L,
+  error: y,
+  sx: C,
+  curveType: W = "monotone",
+  showArea: w = !1,
+  connectNulls: T = !1,
+  referenceLines: O = [],
+  onDataPointClick: B,
+  ariaLabel: H
+}) => {
+  const p = Ft(), $ = Q(
+    () => r.map((S, h) => `line-gradient-${h}-${p.replace(/:/g, "-")}`),
+    [r, p]
+  ), E = !e || e.length === 0;
+  return /* @__PURE__ */ t(
+    U,
+    {
+      title: f,
+      subtitle: i,
+      height: d,
+      loading: A,
+      error: y,
+      empty: E,
+      emptyMessage: L,
+      sx: C,
+      children: /* @__PURE__ */ t(Z, { width: c, height: d, children: /* @__PURE__ */ s(
+        xt,
+        {
+          data: e,
+          margin: b,
+          "aria-label": H || f || "Line chart",
+          children: [
+            w && /* @__PURE__ */ t("defs", { children: r.map((S, h) => {
+              const D = S.color || n[h % n.length] || P(h);
+              return /* @__PURE__ */ s(
+                "linearGradient",
+                {
+                  id: $[h],
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ t("stop", { offset: "5%", stopColor: D, stopOpacity: 0.3 }),
+                    /* @__PURE__ */ t("stop", { offset: "95%", stopColor: D, stopOpacity: 0 })
+                  ]
+                },
+                $[h]
+              );
+            }) }),
+            g && /* @__PURE__ */ t(
+              lt,
+              {
+                strokeDasharray: X.strokeDasharray,
+                stroke: X.stroke,
+                vertical: m === "vertical" || m === "both",
+                horizontal: m === "horizontal" || m === "both"
+              }
+            ),
+            /* @__PURE__ */ t(
+              at,
+              {
+                dataKey: a.dataKey || "name",
+                hide: a.hide,
+                tickFormatter: a.tickFormatter,
+                tick: {
+                  ...o.axisTick,
+                  fontFamily: o.fontFamily
+                },
+                axisLine: { stroke: v.stroke },
+                tickLine: { stroke: v.stroke },
+                angle: a.angle,
+                textAnchor: a.angle ? "end" : "middle",
+                height: a.angle ? 60 : 30
+              }
+            ),
+            /* @__PURE__ */ t(
+              et,
+              {
+                hide: u.hide,
+                domain: u.domain,
+                tickFormatter: u.tickFormatter,
+                tick: {
+                  ...o.axisTick,
+                  fontFamily: o.fontFamily
+                },
+                axisLine: { stroke: v.stroke },
+                tickLine: { stroke: v.stroke },
+                tickCount: u.tickCount,
+                unit: u.unit,
+                width: u.label ? 60 : 50,
+                label: u.label ? {
+                  value: u.label,
+                  angle: -90,
+                  position: "insideLeft",
+                  style: {
+                    ...o.axisLabel,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0
+              }
+            ),
+            x.show !== !1 && /* @__PURE__ */ t(
+              nt,
+              {
+                content: /* @__PURE__ */ t(
+                  ht,
+                  {
+                    labelFormatter: x.labelFormatter,
+                    valueFormatter: x.formatter
+                  }
+                ),
+                cursor: x.cursor !== !1 ? { stroke: X.stroke } : !1
+              }
+            ),
+            F.show !== !1 && /* @__PURE__ */ t(
+              st,
+              {
+                content: /* @__PURE__ */ t(ct, { formatter: F.formatter }),
+                verticalAlign: F.position === "top" ? "top" : "bottom",
+                align: F.align || "center"
+              }
+            ),
+            O.map((S, h) => /* @__PURE__ */ t(
+              tt,
+              {
+                y: S.axis === "y" ? S.value : void 0,
+                x: S.axis === "x" ? S.value : void 0,
+                stroke: S.color || M[0],
+                strokeDasharray: S.strokeDasharray || "5 5",
+                label: S.label ? {
+                  value: S.label,
+                  position: "insideTopRight",
+                  style: {
+                    ...o.dataLabel,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0
+              },
+              `ref-${h}`
+            )),
+            w && r.map((S, h) => (S.color || n[h % n.length] || P(h), /* @__PURE__ */ t(
+              dt,
+              {
+                type: W,
+                dataKey: S.dataKey,
+                "aria-label": `${S.name || S.dataKey} area fill`,
+                fill: `url(#${$[h]})`,
+                stroke: "none",
+                fillOpacity: 1,
+                isAnimationActive: j,
+                animationDuration: R,
+                connectNulls: T
+              },
+              `area-${S.dataKey}`
+            ))),
+            r.map((S, h) => {
+              const D = S.color || n[h % n.length] || P(h);
+              return /* @__PURE__ */ t(
+                yt,
+                {
+                  type: W,
+                  dataKey: S.dataKey,
+                  name: S.name || S.dataKey,
+                  stroke: D,
+                  strokeWidth: N.strokeWidth.default,
+                  strokeDasharray: S.strokeDasharray,
+                  dot: S.showDots !== !1 ? {
+                    r: N.dotSize.small,
+                    fill: D,
+                    strokeWidth: 2,
+                    // eslint-disable-next-line no-restricted-syntax
+                    stroke: "#FFFFFF"
+                    // @intentional-color: white outline for visual emphasis
+                  } : !1,
+                  activeDot: {
+                    r: N.dotSize.default,
+                    fill: D,
+                    strokeWidth: 2,
+                    // eslint-disable-next-line no-restricted-syntax
+                    stroke: "#FFFFFF",
+                    // @intentional-color: white outline for visual emphasis
+                    onClick: B ? (I, k) => {
+                      k && k.payload && B(k.payload, k.index || 0);
+                    } : void 0,
+                    style: B ? { cursor: "pointer" } : void 0
+                  },
+                  isAnimationActive: j,
+                  animationDuration: R,
+                  connectNulls: T
+                },
+                S.dataKey
+              );
+            })
+          ]
+        }
+      ) })
+    }
+  );
+}, ee = ({
+  data: e,
+  series: r,
+  height: d = N.defaultHeight,
+  width: c = "100%",
+  title: f,
+  subtitle: i,
+  margin: b = { top: 20, right: 30, left: 20, bottom: 20 },
+  colors: n = M,
+  showGrid: g = !0,
+  gridDirection: m = "horizontal",
+  xAxis: a = {},
+  yAxis: u = {},
+  legend: F = { show: !0, position: "bottom" },
+  tooltip: x = { show: !0 },
+  animate: j = !0,
+  animationDuration: R = Y.duration,
+  loading: A = !1,
+  emptyMessage: L,
+  error: y,
+  sx: C,
+  layout: W = "vertical",
+  variant: w = "grouped",
+  barRadius: T = N.barRadius,
+  maxBarWidth: O = N.barMaxWidth,
+  barGap: B,
+  barCategoryGap: H,
+  referenceLines: p = [],
+  onDataPointClick: $,
+  ariaLabel: E
+}) => {
+  const S = !e || e.length === 0, h = W === "horizontal", D = (k, q) => {
+    if (w === "stacked" || w === "stacked-percent")
+      return k.stackId || "stack";
+  }, I = (k, q) => w === "grouped" || q === 1 ? T : k === q - 1 ? h ? [0, T, T, 0] : [T, T, 0, 0] : 0;
+  return /* @__PURE__ */ t(
+    U,
+    {
+      title: f,
+      subtitle: i,
+      height: d,
+      loading: A,
+      error: y,
+      empty: S,
+      emptyMessage: L,
+      sx: C,
+      children: /* @__PURE__ */ t(Z, { width: c, height: d, children: /* @__PURE__ */ s(
+        vt,
+        {
+          data: e,
+          margin: b,
+          layout: h ? "vertical" : "horizontal",
+          barGap: B,
+          barCategoryGap: H,
+          "aria-label": E || f || "Bar chart",
+          children: [
+            g && /* @__PURE__ */ t(
+              lt,
+              {
+                strokeDasharray: X.strokeDasharray,
+                stroke: X.stroke,
+                vertical: h ? m === "horizontal" || m === "both" : m === "vertical" || m === "both",
+                horizontal: h ? m === "vertical" || m === "both" : m === "horizontal" || m === "both"
+              }
+            ),
+            h ? /* @__PURE__ */ s(bt, { children: [
+              /* @__PURE__ */ t(
+                at,
+                {
+                  type: "number",
+                  hide: a.hide,
+                  domain: a.domain,
+                  tickFormatter: a.tickFormatter,
+                  tick: {
+                    ...o.axisTick,
+                    fontFamily: o.fontFamily
+                  },
+                  axisLine: { stroke: v.stroke },
+                  tickLine: { stroke: v.stroke }
+                }
+              ),
+              /* @__PURE__ */ t(
+                et,
+                {
+                  type: "category",
+                  dataKey: u.dataKey || a.dataKey || "name",
+                  hide: u.hide,
+                  tick: {
+                    ...o.axisTick,
+                    fontFamily: o.fontFamily
+                  },
+                  axisLine: { stroke: v.stroke },
+                  tickLine: { stroke: v.stroke },
+                  width: 80
+                }
+              )
+            ] }) : /* @__PURE__ */ s(bt, { children: [
+              /* @__PURE__ */ t(
+                at,
+                {
+                  dataKey: a.dataKey || "name",
+                  hide: a.hide,
+                  tickFormatter: a.tickFormatter,
+                  tick: {
+                    ...o.axisTick,
+                    fontFamily: o.fontFamily
+                  },
+                  axisLine: { stroke: v.stroke },
+                  tickLine: { stroke: v.stroke },
+                  angle: a.angle,
+                  textAnchor: a.angle ? "end" : "middle",
+                  height: a.angle ? 60 : 30
+                }
+              ),
+              /* @__PURE__ */ t(
+                et,
+                {
+                  hide: u.hide,
+                  domain: u.domain,
+                  tickFormatter: u.tickFormatter,
+                  tick: {
+                    ...o.axisTick,
+                    fontFamily: o.fontFamily
+                  },
+                  axisLine: { stroke: v.stroke },
+                  tickLine: { stroke: v.stroke },
+                  tickCount: u.tickCount,
+                  unit: u.unit
+                }
+              )
+            ] }),
+            x.show !== !1 && /* @__PURE__ */ t(
+              nt,
+              {
+                content: /* @__PURE__ */ t(
+                  ht,
+                  {
+                    labelFormatter: x.labelFormatter,
+                    valueFormatter: x.formatter,
+                    showTotal: w === "stacked" || w === "stacked-percent"
+                  }
+                ),
+                cursor: { fill: "rgba(0, 0, 0, 0.04)" }
+              }
+            ),
+            F.show !== !1 && /* @__PURE__ */ t(
+              st,
+              {
+                content: /* @__PURE__ */ t(ct, { formatter: F.formatter }),
+                verticalAlign: F.position === "top" ? "top" : "bottom",
+                align: F.align || "center"
+              }
+            ),
+            p.map((k, q) => /* @__PURE__ */ t(
+              tt,
+              {
+                y: k.axis === "y" && !h ? k.value : void 0,
+                x: k.axis === "x" || k.axis === "y" && h ? k.value : void 0,
+                stroke: k.color || M[0],
+                strokeDasharray: k.strokeDasharray || "5 5",
+                label: k.label ? {
+                  value: k.label,
+                  position: "insideTopRight",
+                  style: {
+                    ...o.dataLabel,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0
+              },
+              `ref-${q}`
+            )),
+            r.map((k, q) => {
+              const ot = k.color || n[q % n.length] || P(q);
+              return /* @__PURE__ */ t(
+                kt,
+                {
+                  dataKey: k.dataKey,
+                  name: k.name || k.dataKey,
+                  fill: ot,
+                  stackId: D(k),
+                  radius: I(q, r.length),
+                  maxBarSize: O,
+                  isAnimationActive: j,
+                  animationDuration: R,
+                  onClick: $ ? (Lt, Wt) => $(Lt, Wt) : void 0,
+                  style: $ ? { cursor: "pointer" } : void 0
+                },
+                k.dataKey
+              );
+            })
+          ]
+        }
+      ) })
+    }
+  );
+}, oe = ({
+  data: e,
+  series: r,
+  height: d = N.defaultHeight,
+  width: c = "100%",
+  title: f,
+  subtitle: i,
+  margin: b = { top: 20, right: 30, left: 20, bottom: 20 },
+  colors: n = M,
+  showGrid: g = !0,
+  gridDirection: m = "horizontal",
+  xAxis: a = {},
+  yAxis: u = {},
+  legend: F = { show: !0, position: "bottom" },
+  tooltip: x = { show: !0 },
+  animate: j = !0,
+  animationDuration: R = Y.duration,
+  loading: A = !1,
+  emptyMessage: L,
+  error: y,
+  sx: C,
+  curveType: W = "monotone",
+  gradient: w = !0,
+  stacked: T = !1,
+  connectNulls: O = !1,
+  referenceLines: B = [],
+  onDataPointClick: H,
+  ariaLabel: p
+}) => {
+  const $ = Ft(), E = Q(
+    () => r.map((h, D) => `area-gradient-${D}-${$.replace(/:/g, "-")}`),
+    [r, $]
+  ), S = !e || e.length === 0;
+  return /* @__PURE__ */ t(
+    U,
+    {
+      title: f,
+      subtitle: i,
+      height: d,
+      loading: A,
+      error: y,
+      empty: S,
+      emptyMessage: L,
+      sx: C,
+      children: /* @__PURE__ */ t(Z, { width: c, height: d, children: /* @__PURE__ */ s(
+        St,
+        {
+          data: e,
+          margin: b,
+          "aria-label": p || f || "Area chart",
+          children: [
+            w && /* @__PURE__ */ t("defs", { children: r.map((h, D) => {
+              const I = h.color || n[D % n.length] || P(D);
+              return /* @__PURE__ */ s(
+                "linearGradient",
+                {
+                  id: E[D],
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ t("stop", { offset: "5%", stopColor: I, stopOpacity: 0.4 }),
+                    /* @__PURE__ */ t("stop", { offset: "95%", stopColor: I, stopOpacity: 0.05 })
+                  ]
+                },
+                E[D]
+              );
+            }) }),
+            g && /* @__PURE__ */ t(
+              lt,
+              {
+                strokeDasharray: X.strokeDasharray,
+                stroke: X.stroke,
+                vertical: m === "vertical" || m === "both",
+                horizontal: m === "horizontal" || m === "both"
+              }
+            ),
+            /* @__PURE__ */ t(
+              at,
+              {
+                dataKey: a.dataKey || "name",
+                hide: a.hide,
+                tickFormatter: a.tickFormatter,
+                tick: {
+                  ...o.axisTick,
+                  fontFamily: o.fontFamily
+                },
+                axisLine: { stroke: v.stroke },
+                tickLine: { stroke: v.stroke },
+                angle: a.angle,
+                textAnchor: a.angle ? "end" : "middle",
+                height: a.angle ? 60 : 30
+              }
+            ),
+            /* @__PURE__ */ t(
+              et,
+              {
+                hide: u.hide,
+                domain: u.domain,
+                tickFormatter: u.tickFormatter,
+                tick: {
+                  ...o.axisTick,
+                  fontFamily: o.fontFamily
+                },
+                axisLine: { stroke: v.stroke },
+                tickLine: { stroke: v.stroke },
+                tickCount: u.tickCount,
+                unit: u.unit,
+                width: u.label ? 60 : 50,
+                label: u.label ? {
+                  value: u.label,
+                  angle: -90,
+                  position: "insideLeft",
+                  style: {
+                    ...o.axisLabel,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0
+              }
+            ),
+            x.show !== !1 && /* @__PURE__ */ t(
+              nt,
+              {
+                content: /* @__PURE__ */ t(
+                  ht,
+                  {
+                    labelFormatter: x.labelFormatter,
+                    valueFormatter: x.formatter,
+                    showTotal: T
+                  }
+                ),
+                cursor: { stroke: X.stroke }
+              }
+            ),
+            F.show !== !1 && /* @__PURE__ */ t(
+              st,
+              {
+                content: /* @__PURE__ */ t(ct, { formatter: F.formatter }),
+                verticalAlign: F.position === "top" ? "top" : "bottom",
+                align: F.align || "center"
+              }
+            ),
+            B.map((h, D) => /* @__PURE__ */ t(
+              tt,
+              {
+                y: h.axis === "y" ? h.value : void 0,
+                x: h.axis === "x" ? h.value : void 0,
+                stroke: h.color || M[0],
+                strokeDasharray: h.strokeDasharray || "5 5",
+                label: h.label ? {
+                  value: h.label,
+                  position: "insideTopRight",
+                  style: {
+                    ...o.dataLabel,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0
+              },
+              `ref-${D}`
+            )),
+            r.map((h, D) => {
+              const I = h.color || n[D % n.length] || P(D), k = h.fillOpacity ?? (w ? 1 : 0.3);
+              return /* @__PURE__ */ t(
+                dt,
+                {
+                  type: W,
+                  dataKey: h.dataKey,
+                  name: h.name || h.dataKey,
+                  "aria-label": `${h.name || h.dataKey} data series`,
+                  stroke: I,
+                  strokeWidth: N.strokeWidth.default,
+                  fill: w ? `url(#${E[D]})` : I,
+                  fillOpacity: k,
+                  stackId: T ? "stack" : void 0,
+                  isAnimationActive: j,
+                  animationDuration: R,
+                  connectNulls: O,
+                  activeDot: {
+                    r: N.dotSize.default,
+                    fill: I,
+                    strokeWidth: 2,
+                    // eslint-disable-next-line no-restricted-syntax
+                    stroke: "#FFFFFF",
+                    // @intentional-color: white outline for visual emphasis
+                    onClick: H ? (q, ot) => {
+                      ot && ot.payload && H(ot.payload, ot.index || 0);
+                    } : void 0,
+                    style: H ? { cursor: "pointer" } : void 0
+                  }
+                },
+                h.dataKey
+              );
+            })
+          ]
+        }
+      ) })
+    }
+  );
+}, Gt = (e) => {
+  const {
+    cx: r,
+    cy: d,
+    innerRadius: c,
+    outerRadius: f,
+    startAngle: i,
+    endAngle: b,
+    fill: n
+  } = e;
+  return /* @__PURE__ */ t("g", { children: /* @__PURE__ */ t(
+    Dt,
+    {
+      cx: r,
+      cy: d,
+      innerRadius: c,
+      outerRadius: f + 8,
+      startAngle: i,
+      endAngle: b,
+      fill: n,
+      style: { filter: "drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15))" }
+    }
+  ) });
+}, Ht = ({
+  active: e,
+  payload: r,
+  total: d
+}) => {
+  if (!e || !r || r.length === 0)
+    return null;
+  const c = r[0], f = d > 0 ? (c.value / d * 100).toFixed(1) : "0";
+  return /* @__PURE__ */ s(
+    l,
+    {
+      sx: {
+        backgroundColor: _.backgroundColor,
+        border: `1px solid ${_.borderColor}`,
+        borderRadius: `${_.borderRadius}px`,
+        boxShadow: _.boxShadow,
+        padding: _.padding,
+        minWidth: 120
+      },
+      children: [
+        /* @__PURE__ */ s(l, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              sx: {
+                width: 10,
+                height: 10,
+                borderRadius: `${G.borders.radius.circle}px`,
+                // Perfect circle
+                backgroundColor: c.payload?.fill || c.color
+              }
+            }
+          ),
+          /* @__PURE__ */ t(
+            z,
+            {
+              sx: {
+                ...o.tooltipLabel,
+                fontFamily: o.fontFamily
+              },
+              children: c.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s(
+          z,
+          {
+            sx: {
+              ...o.tooltip,
+              fontFamily: o.fontFamily,
+              fontWeight: 600
+            },
+            children: [
+              c.value.toLocaleString(),
+              " (",
+              f,
+              "%)"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Vt = (e, r, d, c) => {
+  if (!d) return null;
+  const f = r > 0 ? (e.value / r * 100).toFixed(0) : "0";
+  switch (c) {
+    case "value":
+      return e.value.toLocaleString();
+    case "name":
+      return e.name;
+    default:
+      return `${f}%`;
+  }
+}, Pt = ({
+  data: e,
+  height: r = 300,
+  width: d = "100%",
+  title: c,
+  subtitle: f,
+  innerRadius: i = 0,
+  paddingAngle: b = 2,
+  cornerRadius: n = 4,
+  startAngle: g = 90,
+  endAngle: m = -270,
+  showLabels: a = !1,
+  labelType: u = "percent",
+  colors: F = M,
+  legend: x = { show: !0, position: "right" },
+  tooltip: j = { show: !0 },
+  animate: R = !0,
+  animationDuration: A = Y.duration,
+  loading: L = !1,
+  emptyMessage: y,
+  error: C,
+  centerContent: W,
+  sx: w,
+  onSegmentClick: T,
+  ariaLabel: O
+}) => {
+  const [B, H] = It(null), p = !e || e.length === 0, $ = Q(
+    () => e?.reduce((I, k) => I + k.value, 0) || 0,
+    [e]
+  ), E = pt(
+    (I) => /* @__PURE__ */ t(Ht, { ...I, total: $ }),
+    [$]
+  ), S = pt(
+    (I) => Vt(I, $, a, u),
+    [$, a, u]
+  ), h = i > 0, D = x.position === "left" || x.position === "right";
+  return /* @__PURE__ */ t(
+    U,
+    {
+      title: c,
+      subtitle: f,
+      height: r,
+      loading: L,
+      error: C,
+      empty: p,
+      emptyMessage: y,
+      sx: w,
+      children: /* @__PURE__ */ s(
+        l,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: D ? "row" : "column",
+            alignItems: "center",
+            height: "100%"
+          },
+          children: [
+            x.show !== !1 && x.position === "left" && /* @__PURE__ */ t(l, { sx: { flexShrink: 0, pr: 2 }, children: /* @__PURE__ */ t(
+              mt,
+              {
+                payload: e?.map((I, k) => ({
+                  value: I.name,
+                  color: I.color || F[k % F.length] || P(k)
+                })),
+                data: e,
+                direction: "vertical",
+                showValues: !0,
+                showPercent: !0
+              }
+            ) }),
+            /* @__PURE__ */ s(l, { sx: { flex: 1, position: "relative", minWidth: 0, height: "100%" }, children: [
+              /* @__PURE__ */ t(Z, { width: "100%", height: r, children: /* @__PURE__ */ s(Kt, { "aria-label": O || c || "Pie chart", children: [
+                /* @__PURE__ */ t(
+                  Rt,
+                  {
+                    data: e,
+                    cx: "50%",
+                    cy: "50%",
+                    innerRadius: h ? `${i * 100}%` : 0,
+                    outerRadius: "80%",
+                    paddingAngle: b,
+                    cornerRadius: n,
+                    startAngle: g,
+                    endAngle: m,
+                    dataKey: "value",
+                    nameKey: "name",
+                    label: a ? S : !1,
+                    labelLine: a ? { stroke: "#9CA3AF" } : !1,
+                    activeIndex: B ?? void 0,
+                    activeShape: Gt,
+                    onMouseEnter: (I, k) => H(k),
+                    onMouseLeave: () => H(null),
+                    onClick: T ? (I, k) => T(I, k) : void 0,
+                    isAnimationActive: R,
+                    animationDuration: A,
+                    style: T ? { cursor: "pointer" } : void 0,
+                    children: e?.map((I, k) => /* @__PURE__ */ t(
+                      gt,
+                      {
+                        fill: I.color || F[k % F.length] || P(k)
+                      },
+                      `cell-${k}`
+                    ))
+                  }
+                ),
+                j.show !== !1 && /* @__PURE__ */ t(nt, { content: E })
+              ] }) }),
+              h && W && /* @__PURE__ */ t(
+                l,
+                {
+                  sx: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    textAlign: "center",
+                    pointerEvents: "none"
+                  },
+                  children: W
+                }
+              )
+            ] }),
+            x.show !== !1 && x.position === "right" && /* @__PURE__ */ t(l, { sx: { flexShrink: 0, pl: 2 }, children: /* @__PURE__ */ t(
+              mt,
+              {
+                payload: e?.map((I, k) => ({
+                  value: I.name,
+                  color: I.color || F[k % F.length] || P(k)
+                })),
+                data: e,
+                direction: "vertical",
+                showValues: !0,
+                showPercent: !0
+              }
+            ) }),
+            x.show !== !1 && x.position === "bottom" && /* @__PURE__ */ t(l, { sx: { pt: 2, width: "100%" }, children: /* @__PURE__ */ t(
+              mt,
+              {
+                payload: e?.map((I, k) => ({
+                  value: I.name,
+                  color: I.color || F[k % F.length] || P(k)
+                })),
+                data: e,
+                direction: "horizontal",
+                showValues: !1,
+                showPercent: !0
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}, re = (e) => /* @__PURE__ */ t(Pt, { ...e, innerRadius: e.innerRadius || 0.6 }), Mt = ({
+  active: e,
+  payload: r,
+  xAxisLabel: d = "X",
+  yAxisLabel: c = "Y",
+  hasBubble: f
+}) => {
+  if (!e || !r || r.length === 0)
+    return null;
+  const i = r[0].payload;
+  return /* @__PURE__ */ s(
+    l,
+    {
+      sx: {
+        backgroundColor: _.backgroundColor,
+        border: `1px solid ${_.borderColor}`,
+        borderRadius: `${_.borderRadius}px`,
+        boxShadow: _.boxShadow,
+        padding: _.padding,
+        minWidth: 140
+      },
+      children: [
+        i.name && /* @__PURE__ */ t(
+          z,
+          {
+            sx: {
+              ...o.tooltipLabel,
+              fontFamily: o.fontFamily,
+              mb: 1
+            },
+            children: i.name
+          }
+        ),
+        /* @__PURE__ */ s(l, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: [
+          /* @__PURE__ */ s(l, { sx: { display: "flex", justifyContent: "space-between", gap: 2 }, children: [
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.tooltip,
+                  fontFamily: o.fontFamily,
+                  color: "text.secondary"
+                  // @intentional: Use MUI theme for tooltip labels
+                },
+                children: d
+              }
+            ),
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.tooltip,
+                  fontFamily: o.fontFamily,
+                  fontWeight: 600
+                },
+                children: i.x?.toLocaleString()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ s(l, { sx: { display: "flex", justifyContent: "space-between", gap: 2 }, children: [
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.tooltip,
+                  fontFamily: o.fontFamily,
+                  color: "text.secondary"
+                  // @intentional: Use MUI theme for tooltip labels
+                },
+                children: c
+              }
+            ),
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.tooltip,
+                  fontFamily: o.fontFamily,
+                  fontWeight: 600
+                },
+                children: i.y?.toLocaleString()
+              }
+            )
+          ] }),
+          f && i.z !== void 0 && /* @__PURE__ */ s(l, { sx: { display: "flex", justifyContent: "space-between", gap: 2 }, children: [
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.tooltip,
+                  fontFamily: o.fontFamily,
+                  color: "text.secondary"
+                  // @intentional: Use MUI theme for tooltip labels
+                },
+                children: "Size"
+              }
+            ),
+            /* @__PURE__ */ t(
+              z,
+              {
+                sx: {
+                  ...o.tooltip,
+                  fontFamily: o.fontFamily,
+                  fontWeight: 600
+                },
+                children: i.z?.toLocaleString()
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}, Xt = ({
+  data: e,
+  height: r = N.defaultHeight,
+  width: d = "100%",
+  title: c,
+  subtitle: f,
+  xAxis: i = {},
+  yAxis: b = {},
+  zAxis: n = {},
+  colors: g = M,
+  showGrid: m = !0,
+  legend: a = { show: !0, position: "bottom" },
+  tooltip: u = { show: !0 },
+  animate: F = !0,
+  animationDuration: x = Y.duration,
+  loading: j = !1,
+  emptyMessage: R,
+  error: A,
+  sx: L,
+  onPointClick: y,
+  ariaLabel: C
+}) => {
+  const W = $t.useMemo(() => !e || e.length === 0 ? [] : "data" in e[0] ? e : [{
+    name: "Data",
+    data: e,
+    color: g[0]
+  }], [e, g]), w = !e || e.length === 0, T = W.some((B) => B.data.some((H) => H.z !== void 0)), O = pt(
+    (B) => /* @__PURE__ */ t(
+      Mt,
+      {
+        ...B,
+        xAxisLabel: i.label || "X",
+        yAxisLabel: b.label || "Y",
+        hasBubble: T
+      }
+    ),
+    [i.label, b.label, T]
+  );
+  return /* @__PURE__ */ t(
+    U,
+    {
+      title: c,
+      subtitle: f,
+      height: r,
+      loading: j,
+      error: A,
+      empty: w,
+      emptyMessage: R,
+      sx: L,
+      children: /* @__PURE__ */ t(Z, { width: d, height: r, children: /* @__PURE__ */ s(
+        Tt,
+        {
+          margin: { top: 20, right: 30, bottom: 20, left: 20 },
+          "aria-label": C || c || "Scatter chart",
+          children: [
+            m && /* @__PURE__ */ t(
+              lt,
+              {
+                strokeDasharray: X.strokeDasharray,
+                stroke: X.stroke
+              }
+            ),
+            /* @__PURE__ */ t(
+              at,
+              {
+                type: "number",
+                dataKey: "x",
+                name: i.label || "X",
+                hide: i.hide,
+                domain: i.domain,
+                tickFormatter: i.tickFormatter,
+                tick: {
+                  ...o.axisTick,
+                  fontFamily: o.fontFamily
+                },
+                axisLine: { stroke: v.stroke },
+                tickLine: { stroke: v.stroke },
+                label: i.label ? {
+                  value: i.label,
+                  position: "insideBottom",
+                  offset: -10,
+                  style: {
+                    ...o.axisLabel,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0
+              }
+            ),
+            /* @__PURE__ */ t(
+              et,
+              {
+                type: "number",
+                dataKey: "y",
+                name: b.label || "Y",
+                hide: b.hide,
+                domain: b.domain,
+                tickFormatter: b.tickFormatter,
+                tick: {
+                  ...o.axisTick,
+                  fontFamily: o.fontFamily
+                },
+                axisLine: { stroke: v.stroke },
+                tickLine: { stroke: v.stroke },
+                label: b.label ? {
+                  value: b.label,
+                  angle: -90,
+                  position: "insideLeft",
+                  style: {
+                    ...o.axisLabel,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0
+              }
+            ),
+            T && /* @__PURE__ */ t(
+              Ot,
+              {
+                type: "number",
+                dataKey: "z",
+                domain: n.domain || [0, "auto"],
+                range: n.range || [50, 400]
+              }
+            ),
+            u.show !== !1 && /* @__PURE__ */ t(nt, { content: O }),
+            a.show !== !1 && W.length > 1 && /* @__PURE__ */ t(
+              st,
+              {
+                content: /* @__PURE__ */ t(ct, { formatter: a.formatter }),
+                verticalAlign: a.position === "top" ? "top" : "bottom",
+                align: a.align || "center"
+              }
+            ),
+            W.map((B, H) => {
+              const p = B.color || g[H % g.length] || P(H);
+              return /* @__PURE__ */ t(
+                Bt,
+                {
+                  name: B.name,
+                  data: B.data,
+                  fill: p,
+                  isAnimationActive: F,
+                  animationDuration: x,
+                  onClick: y ? ($) => y($, 0) : void 0,
+                  style: y ? { cursor: "pointer" } : void 0,
+                  children: B.data.map(($, E) => /* @__PURE__ */ t(
+                    gt,
+                    {
+                      fill: p,
+                      fillOpacity: 0.8
+                    },
+                    `cell-${E}`
+                  ))
+                },
+                B.name
+              );
+            })
+          ]
+        }
+      ) })
+    }
+  );
+}, ae = (e) => /* @__PURE__ */ t(
+  Xt,
+  {
+    ...e,
+    zAxis: e.zAxis || { range: [50, 400] }
+  }
+), ie = ({
+  data: e,
+  height: r = 300,
+  width: d = "100%",
+  title: c,
+  subtitle: f,
+  innerRadius: i = "30%",
+  outerRadius: b = "90%",
+  startAngle: n = 90,
+  endAngle: g = -270,
+  colors: m = M,
+  showLabels: a = !0,
+  legend: u = { show: !0, position: "right" },
+  animate: F = !0,
+  sx: x,
+  ariaLabel: j
+}) => {
+  const R = Q(
+    () => e.map((y, C) => ({
+      ...y,
+      fill: m[C % m.length] || P(C)
+    })),
+    [e, m]
+  ), A = !e || e.length === 0, L = () => u.show ? /* @__PURE__ */ t(
+    l,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 1.5,
+        py: 1
+      },
+      children: R.map((y, C) => /* @__PURE__ */ s(
+        l,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5
+          },
+          children: [
+            /* @__PURE__ */ t(
+              l,
+              {
+                sx: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: `${G.borders.radius.circle}px`,
+                  // Perfect circle
+                  backgroundColor: y.fill,
+                  flexShrink: 0
+                }
+              }
+            ),
+            /* @__PURE__ */ s(l, { sx: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ t(
+                z,
+                {
+                  sx: {
+                    ...o.legend,
+                    fontFamily: o.fontFamily
+                  },
+                  children: y.name
+                }
+              ),
+              /* @__PURE__ */ t(
+                z,
+                {
+                  sx: {
+                    fontSize: 11,
+                    color: K.neutral.gray500,
+                    fontFamily: o.fontFamily
+                  },
+                  children: y.value.toLocaleString()
+                }
+              )
+            ] })
+          ]
+        },
+        C
+      ))
+    }
+  ) : null;
+  return /* @__PURE__ */ t(
+    U,
+    {
+      title: c,
+      subtitle: f,
+      height: r,
+      empty: A,
+      sx: x,
+      children: /* @__PURE__ */ s(
+        l,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            height: "100%"
+          },
+          children: [
+            /* @__PURE__ */ t(l, { sx: { flex: 1, height: "100%" }, children: /* @__PURE__ */ t(Z, { width: "100%", height: r, children: /* @__PURE__ */ t(
+              Ct,
+              {
+                cx: "50%",
+                cy: "50%",
+                innerRadius: i,
+                outerRadius: b,
+                barSize: 20,
+                data: R,
+                startAngle: n,
+                endAngle: g,
+                "aria-label": j || c || "Radial bar chart",
+                children: /* @__PURE__ */ t(
+                  zt,
+                  {
+                    background: { fill: K.neutral.gray100 },
+                    dataKey: "value",
+                    cornerRadius: 10,
+                    isAnimationActive: F,
+                    animationDuration: Y.duration,
+                    label: a ? {
+                      position: "insideStart",
+                      // eslint-disable-next-line no-restricted-syntax
+                      fill: "#FFFFFF",
+                      // @intentional-color: white text for contrast on colored bars
+                      fontFamily: o.fontFamily,
+                      fontSize: 11,
+                      fontWeight: 600
+                    } : !1
+                  }
+                )
+              }
+            ) }) }),
+            u.show && /* @__PURE__ */ t(l, { sx: { flexShrink: 0, pl: 2, minWidth: 120 }, children: L() })
+          ]
+        }
+      )
+    }
+  );
+}, ne = ({
+  value: e,
+  min: r = 0,
+  max: d = 100,
+  height: c = 200,
+  width: f = "100%",
+  title: i,
+  valueLabel: b,
+  unit: n = "",
+  thresholds: g,
+  color: m = M[0],
+  showValue: a = !0,
+  valueFormatter: u,
+  animate: F = !0,
+  sx: x,
+  ariaLabel: j
+}) => {
+  const R = Q(() => {
+    if (!g || g.length === 0) return m;
+    const C = [...g].sort((W, w) => W.value - w.value);
+    for (const W of C)
+      if (e <= W.value)
+        return W.color;
+    return C[C.length - 1].color;
+  }, [e, g, m]), L = [
+    { name: "Value", value: Math.min(100, Math.max(0, (e - r) / (d - r) * 100)), fill: R }
+  ], y = u ? u(e) : e.toLocaleString();
+  return /* @__PURE__ */ t(U, { title: i, height: c, sx: x, children: /* @__PURE__ */ s(l, { sx: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ t(Z, { width: "100%", height: c, children: /* @__PURE__ */ s(
+      Ct,
+      {
+        cx: "50%",
+        cy: "50%",
+        innerRadius: "60%",
+        outerRadius: "90%",
+        barSize: 16,
+        data: L,
+        startAngle: 180,
+        endAngle: 0,
+        "aria-label": j || i || `Gauge showing ${e}${n}`,
+        children: [
+          /* @__PURE__ */ t(
+            Et,
+            {
+              type: "number",
+              domain: [0, 100],
+              angleAxisId: 0,
+              tick: !1
+            }
+          ),
+          /* @__PURE__ */ t(
+            zt,
+            {
+              background: { fill: K.neutral.gray100 },
+              dataKey: "value",
+              cornerRadius: 8,
+              isAnimationActive: F,
+              animationDuration: Y.duration
+            }
+          )
+        ]
+      }
+    ) }),
+    a && /* @__PURE__ */ s(
+      l,
+      {
+        sx: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -30%)",
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ s(
+            z,
+            {
+              sx: {
+                fontSize: c / 6,
+                fontWeight: 700,
+                fontFamily: o.fontFamily,
+                color: R,
+                lineHeight: 1
+              },
+              children: [
+                y,
+                n && /* @__PURE__ */ t(
+                  l,
+                  {
+                    component: "span",
+                    sx: {
+                      fontSize: "0.5em",
+                      fontWeight: 500,
+                      color: K.neutral.gray500
+                    },
+                    children: n
+                  }
+                )
+              ]
+            }
+          ),
+          b && /* @__PURE__ */ t(
+            z,
+            {
+              sx: {
+                fontSize: 12,
+                fontFamily: o.fontFamily,
+                color: K.neutral.gray500,
+                mt: 0.5
+              },
+              children: b
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ s(
+      l,
+      {
+        sx: {
+          position: "absolute",
+          bottom: c * 0.25,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "space-between",
+          px: 3
+        },
+        children: [
+          /* @__PURE__ */ t(
+            z,
+            {
+              sx: {
+                fontSize: 11,
+                fontFamily: o.fontFamily,
+                color: K.neutral.gray400
+              },
+              children: r
+            }
+          ),
+          /* @__PURE__ */ t(
+            z,
+            {
+              sx: {
+                fontSize: 11,
+                fontFamily: o.fontFamily,
+                color: K.neutral.gray400
+              },
+              children: d
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}, rt = {
+  light: "#FFFFFF",
+  dark: "#1F2937",
+  // gray-800
+  refLine: "#9CA3AF",
+  // gray-400
+  refLineLabel: "#6B7280"
+  // gray-500
+}, le = ({
+  data: e,
+  xAxisKey: r,
+  series: d,
+  height: c = 400,
+  width: f = "100%",
+  title: i,
+  subtitle: b,
+  xAxis: n,
+  yAxis: g,
+  yAxisRight: m,
+  grid: a = { show: !0 },
+  legend: u = { show: !0, position: "bottom" },
+  tooltip: F = { show: !0 },
+  animate: x = !0,
+  referenceLines: j,
+  colors: R = M,
+  barGap: A = 4,
+  barCategoryGap: L = "20%",
+  sx: y,
+  ariaLabel: C
+}) => {
+  const w = _t().palette.mode === "dark", T = !e || e.length === 0, O = w ? "dark" : "light", B = Q(() => d.map((p, $) => `composed-gradient-${p.key}-${$}`), [d]), H = (p, $) => {
+    const E = p.color || R[$ % R.length] || P($), S = B[$], h = {
+      key: p.key,
+      name: p.name || p.key,
+      dataKey: p.key,
+      isAnimationActive: x,
+      animationDuration: Y.duration,
+      animationEasing: Y.easing,
+      yAxisId: p.yAxisId || "left"
+    };
+    switch (p.type) {
+      case "line":
+        return /* @__PURE__ */ t(
+          yt,
+          {
+            ...h,
+            type: p.curve || "monotone",
+            stroke: E,
+            strokeWidth: p.strokeWidth || 2,
+            dot: p.showDots !== !1 ? {
+              fill: w ? rt.dark : rt.light,
+              // @intentional-color: white/dark fill for mode contrast
+              stroke: E,
+              strokeWidth: 2,
+              r: 4
+            } : !1,
+            activeDot: {
+              r: 6,
+              fill: E,
+              stroke: w ? rt.dark : rt.light,
+              // @intentional-color: white/dark stroke for mode contrast
+              strokeWidth: 2
+            },
+            strokeDasharray: p.strokeDasharray
+          }
+        );
+      case "bar":
+        return /* @__PURE__ */ t(
+          kt,
+          {
+            ...h,
+            fill: E,
+            radius: [4, 4, 0, 0],
+            maxBarSize: p.maxBarSize || 40
+          }
+        );
+      case "area":
+        return /* @__PURE__ */ t(
+          dt,
+          {
+            ...h,
+            "aria-label": `${p.name || p.key} area series`,
+            type: p.curve || "monotone",
+            fill: `url(#${S})`,
+            stroke: E,
+            strokeWidth: p.strokeWidth || 2,
+            fillOpacity: p.fillOpacity || 0.6
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ t(
+    U,
+    {
+      title: i,
+      subtitle: b,
+      height: c,
+      empty: T,
+      sx: y,
+      children: /* @__PURE__ */ t(Z, { width: f, height: c, children: /* @__PURE__ */ s(
+        jt,
+        {
+          data: e,
+          margin: {
+            top: 10,
+            right: m ? 20 : 10,
+            left: 10,
+            bottom: n?.angle ? 40 : 20
+          },
+          barGap: A,
+          barCategoryGap: L,
+          "aria-label": C || i || "Composed chart",
+          children: [
+            /* @__PURE__ */ t("defs", { children: d.filter((p) => p.type === "area").map((p, $) => {
+              const E = d.findIndex((D) => D.key === p.key), S = p.color || R[E % R.length] || P(E), h = B[E];
+              return /* @__PURE__ */ s(
+                "linearGradient",
+                {
+                  id: h,
+                  x1: "0",
+                  y1: "0",
+                  x2: "0",
+                  y2: "1",
+                  children: [
+                    /* @__PURE__ */ t(
+                      "stop",
+                      {
+                        offset: "5%",
+                        stopColor: S,
+                        stopOpacity: w ? 0.4 : 0.8
+                      }
+                    ),
+                    /* @__PURE__ */ t(
+                      "stop",
+                      {
+                        offset: "95%",
+                        stopColor: S,
+                        stopOpacity: w ? 0.05 : 0.1
+                      }
+                    )
+                  ]
+                },
+                h
+              );
+            }) }),
+            a.show && /* @__PURE__ */ t(
+              lt,
+              {
+                strokeDasharray: X.strokeDasharray,
+                stroke: X[O].stroke,
+                strokeOpacity: X[O].strokeOpacity,
+                horizontal: a.horizontal !== !1,
+                vertical: a.vertical !== !1
+              }
+            ),
+            /* @__PURE__ */ t(
+              at,
+              {
+                dataKey: r,
+                axisLine: {
+                  stroke: v[O].lineColor,
+                  strokeOpacity: v[O].lineOpacity
+                },
+                tickLine: !1,
+                tick: {
+                  fill: v[O].tickColor,
+                  fontSize: v.tickFontSize,
+                  fontFamily: o.fontFamily
+                },
+                label: n?.label ? {
+                  value: n.label,
+                  position: "bottom",
+                  offset: 0,
+                  style: {
+                    fill: v[O].tickColor,
+                    fontSize: v.labelFontSize,
+                    fontFamily: o.fontFamily
+                  }
+                } : void 0,
+                angle: n?.angle,
+                textAnchor: n?.angle ? "end" : "middle",
+                tickFormatter: n?.tickFormatter,
+                interval: n?.interval
+              }
+            ),
+            /* @__PURE__ */ t(
+              et,
+              {
+                yAxisId: "left",
+                axisLine: {
+                  stroke: v[O].lineColor,
+                  strokeOpacity: v[O].lineOpacity
+                },
+                tickLine: !1,
+                tick: {
+                  fill: v[O].tickColor,
+                  fontSize: v.tickFontSize,
+                  fontFamily: o.fontFamily
+                },
+                label: g?.label ? {
+                  value: g.label,
+                  angle: -90,
+                  position: "insideLeft",
+                  style: {
+                    fill: v[O].tickColor,
+                    fontSize: v.labelFontSize,
+                    fontFamily: o.fontFamily,
+                    textAnchor: "middle"
+                  }
+                } : void 0,
+                tickFormatter: g?.tickFormatter,
+                domain: g?.domain
+              }
+            ),
+            m && /* @__PURE__ */ t(
+              et,
+              {
+                yAxisId: "right",
+                orientation: "right",
+                axisLine: {
+                  stroke: v[O].lineColor,
+                  strokeOpacity: v[O].lineOpacity
+                },
+                tickLine: !1,
+                tick: {
+                  fill: v[O].tickColor,
+                  fontSize: v.tickFontSize,
+                  fontFamily: o.fontFamily
+                },
+                label: m.label ? {
+                  value: m.label,
+                  angle: 90,
+                  position: "insideRight",
+                  style: {
+                    fill: v[O].tickColor,
+                    fontSize: v.labelFontSize,
+                    fontFamily: o.fontFamily,
+                    textAnchor: "middle"
+                  }
+                } : void 0,
+                tickFormatter: m.tickFormatter,
+                domain: m.domain
+              }
+            ),
+            j?.map((p, $) => /* @__PURE__ */ t(
+              tt,
+              {
+                y: p.y,
+                x: p.x,
+                stroke: p.color || rt.refLine,
+                strokeDasharray: p.strokeDasharray || "4 4",
+                strokeWidth: p.strokeWidth || 1,
+                yAxisId: p.yAxisId || "left",
+                label: p.label ? {
+                  value: p.label,
+                  position: p.labelPosition || "right",
+                  fill: p.color || rt.refLineLabel,
+                  // @intentional-color: reference line label
+                  fontSize: 11,
+                  fontFamily: o.fontFamily
+                } : void 0
+              },
+              $
+            )),
+            F.show && /* @__PURE__ */ t(
+              nt,
+              {
+                content: /* @__PURE__ */ t(ht, {}),
+                cursor: {
+                  fill: w ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)"
+                }
+              }
+            ),
+            u.show && /* @__PURE__ */ t(
+              st,
+              {
+                content: /* @__PURE__ */ t(ct, {}),
+                verticalAlign: u.position === "top" ? "top" : u.position === "bottom" ? "bottom" : "middle",
+                align: u.position === "left" ? "left" : u.position === "right" ? "right" : "center"
+              }
+            ),
+            d.map((p, $) => H(p, $))
+          ]
+        }
+      ) })
+    }
+  );
+}, se = ({
+  data: e,
+  type: r = "line",
+  width: d = 100,
+  height: c = 32,
+  color: f = M[0],
+  referenceLine: i,
+  referenceLineColor: b = ft.neutral,
+  showMinMax: n = !1,
+  minColor: g = ft.error,
+  maxColor: m = ft.success,
+  animate: a = !0,
+  sx: u
+}) => {
+  const F = Q(
+    () => e.map((L, y) => ({ index: y, value: L })),
+    [e]
+  ), x = Q(() => {
+    if (i === void 0) return null;
+    if (typeof i == "number") return i;
+    const L = e.filter((y) => y != null);
+    if (L.length === 0) return null;
+    if (i === "average")
+      return L.reduce((y, C) => y + C, 0) / L.length;
+    if (i === "median") {
+      const y = [...L].sort((W, w) => W - w), C = Math.floor(y.length / 2);
+      return y.length % 2 !== 0 ? y[C] : (y[C - 1] + y[C]) / 2;
+    }
+    return null;
+  }, [e, i]), { minIndex: j, maxIndex: R } = Q(() => {
+    if (!n || e.length === 0)
+      return { minIndex: -1, maxIndex: -1 };
+    let L = e[0], y = e[0], C = 0, W = 0;
+    return e.forEach((w, T) => {
+      w < L && (L = w, C = T), w > y && (y = w, W = T);
+    }), { minIndex: C, maxIndex: W };
+  }, [e, n]), A = {
+    display: "inline-flex",
+    alignItems: "center",
+    ...u
+  };
+  return r === "line" ? /* @__PURE__ */ t(l, { sx: A, children: /* @__PURE__ */ t(Z, { width: d, height: c, children: /* @__PURE__ */ s(xt, { data: F, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+    x !== null && /* @__PURE__ */ t(
+      tt,
+      {
+        y: x,
+        stroke: b,
+        strokeDasharray: "2 2",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ t(
+      yt,
+      {
+        type: "monotone",
+        dataKey: "value",
+        stroke: f,
+        strokeWidth: 1.5,
+        dot: n ? (L) => {
+          const { cx: y, cy: C, index: W } = L;
+          return W === j ? /* @__PURE__ */ t(
+            "circle",
+            {
+              cx: y,
+              cy: C,
+              r: 3,
+              fill: g,
+              stroke: "#FFFFFF",
+              strokeWidth: 1
+            }
+          ) : W === R ? /* @__PURE__ */ t(
+            "circle",
+            {
+              cx: y,
+              cy: C,
+              r: 3,
+              fill: m,
+              stroke: "#FFFFFF",
+              strokeWidth: 1
+            }
+          ) : null;
+        } : !1,
+        isAnimationActive: a,
+        animationDuration: Y.duration
+      }
+    )
+  ] }) }) }) : r === "bar" ? /* @__PURE__ */ t(l, { sx: A, children: /* @__PURE__ */ t(Z, { width: d, height: c, children: /* @__PURE__ */ s(vt, { data: F, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+    x !== null && /* @__PURE__ */ t(
+      tt,
+      {
+        y: x,
+        stroke: b,
+        strokeDasharray: "2 2",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ t(
+      kt,
+      {
+        dataKey: "value",
+        radius: [1, 1, 0, 0],
+        isAnimationActive: a,
+        animationDuration: Y.duration,
+        children: F.map((L, y) => /* @__PURE__ */ t(
+          gt,
+          {
+            fill: n && y === j ? g : n && y === R ? m : f
+          },
+          `cell-${y}`
+        ))
+      }
+    )
+  ] }) }) }) : /* @__PURE__ */ t(l, { sx: A, children: /* @__PURE__ */ t(Z, { width: d, height: c, children: /* @__PURE__ */ s(St, { data: F, margin: { top: 2, right: 2, bottom: 2, left: 2 }, children: [
+    /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ s("linearGradient", { id: "sparkline-gradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ t("stop", { offset: "5%", stopColor: f, stopOpacity: 0.3 }),
+      /* @__PURE__ */ t("stop", { offset: "95%", stopColor: f, stopOpacity: 0 })
+    ] }) }),
+    x !== null && /* @__PURE__ */ t(
+      tt,
+      {
+        y: x,
+        stroke: b,
+        strokeDasharray: "2 2",
+        strokeWidth: 1
+      }
+    ),
+    /* @__PURE__ */ t(
+      dt,
+      {
+        type: "monotone",
+        dataKey: "value",
+        "aria-label": "Sparkline area data visualization",
+        stroke: f,
+        strokeWidth: 1.5,
+        fill: "url(#sparkline-gradient)",
+        dot: n ? (L) => {
+          const { cx: y, cy: C, index: W } = L;
+          return W === j ? /* @__PURE__ */ t(
+            "circle",
+            {
+              cx: y,
+              cy: C,
+              r: 3,
+              fill: g,
+              stroke: "#FFFFFF",
+              strokeWidth: 1
+            }
+          ) : W === R ? /* @__PURE__ */ t(
+            "circle",
+            {
+              cx: y,
+              cy: C,
+              r: 3,
+              fill: m,
+              stroke: "#FFFFFF",
+              strokeWidth: 1
+            }
+          ) : null;
+        } : !1,
+        isAnimationActive: a,
+        animationDuration: Y.duration
+      }
+    )
+  ] }) }) });
+};
+export {
+  oe as A,
+  ee as B,
+  le as C,
+  re as D,
+  ne as G,
+  Ut as I,
+  te as L,
+  Pt as P,
+  ie as R,
+  Xt as S,
+  ae as a,
+  se as b,
+  U as c,
+  ht as d,
+  Qt as e,
+  ct as f,
+  mt as g
+};