@actioneer/ads 1.0.6 → 1.0.8

package/components/chart.js

@@ -1,37 +1,76 @@
 "use client";
-import { jsxs as A, jsx as e, Fragment as K } from "react/jsx-runtime";
+import { jsxs as y, jsx as e, Fragment as ne } from "react/jsx-runtime";
 import * as R from "react";
-import { ResponsiveContainer as _, LineChart as pe, Tooltip as O, Line as se, AreaChart as Ne, Area as we, CartesianGrid as te, XAxis as re, YAxis as V, BarChart as Ae, Bar as ce, Cell as de, ComposedChart as Ce, ScatterChart as ye, Scatter as Re, PieChart as ke, Pie as Me, RadarChart as $e, PolarGrid as Se, PolarAngleAxis as ue, PolarRadiusAxis as Le, Radar as Fe, RadialBarChart as Oe, RadialBar as Te, Treemap as Ie, ReferenceArea as Be, ReferenceLine as De, ReferenceDot as Ee } from "recharts";
-import { MotionConfig as We, AnimatePresence as ze, motion as _e } from "motion/react";
-import { cn as $ } from "../lib/cn.js";
-import { floatVariants as je } from "../lib/motion.js";
-const U = (t) => `var(--color-chart-${t % 6 + 1})`, ee = (t) => U(t), ne = "var(--chart-context)", me = { fillOpacity: "var(--chart-active-bar-opacity)" }, Y = 2.5, He = 2.5, W = {
+import { ResponsiveContainer as V, LineChart as ye, Tooltip as T, Line as ue, AreaChart as Re, Area as Me, CartesianGrid as ae, XAxis as ie, YAxis as Z, BarChart as Se, Bar as me, Cell as Q, ComposedChart as $e, ScatterChart as Le, Scatter as Oe, PieChart as Fe, Pie as ke, RadarChart as Te, PolarGrid as Ie, PolarAngleAxis as fe, PolarRadiusAxis as De, Radar as Ee, RadialBarChart as Be, RadialBar as He, Treemap as _e, ReferenceArea as ze, ReferenceLine as We, ReferenceDot as je } from "recharts";
+import { MotionConfig as Pe, AnimatePresence as Ge, motion as Ve } from "motion/react";
+import { cn as O } from "../lib/cn.js";
+import { floatVariants as Ue } from "../lib/motion.js";
+const q = (t) => `var(--color-chart-${t % 6 + 1})`, re = (t) => q(t), oe = "var(--chart-context)", J = 2.5, Ye = 0.55, B = "transition-opacity duration-150 ease-out motion-reduce:transition-none", j = (t, n, r = Ye) => n == null || n === t ? 1 : r, he = (t) => t != null && t.isTooltipActive && t.activeTooltipIndex != null ? t.activeTooltipIndex : null;
+function xe() {
+  const [t, n] = R.useState(null), r = R.useMemo(
+    () => ({
+      onMouseMove: (i) => n(he(i)),
+      onMouseLeave: () => n(null)
+    }),
+    []
+  );
+  return { activeIndex: t, handlers: r };
+}
+function ve(t, n) {
+  const r = R.useRef(null), [i, o] = R.useState(null), [a, l] = R.useState(null);
+  return { frameRef: r, activeIndex: i, isDimmed: (c) => a != null && t(c) !== a, handlers: { onMouseMove: (c) => {
+    const b = he(c);
+    o(b);
+    const v = c == null ? void 0 : c.chartY;
+    if (b == null || !n || v == null || !r.current) {
+      l(null);
+      return;
+    }
+    let m = null, w = 1 / 0;
+    r.current.querySelectorAll(`circle[data-chart-index="${b}"]`).forEach((M) => {
+      const A = M.dataset.chartSeries, g = Number(M.getAttribute("cy"));
+      if (A == null || Number.isNaN(g)) return;
+      const f = Math.abs(g - v);
+      f < w && (w = f, m = t(A));
+    }), l(m);
+  }, onMouseLeave: () => {
+    o(null), l(null);
+  } } };
+}
+function ge(t, n) {
+  return (r) => {
+    if (!(n != null && n.includes(r))) return r;
+    const i = t.filter((o) => !n.includes(o));
+    return i[n.indexOf(r)] ?? i[0] ?? r;
+  };
+}
+const Xe = 2.5, W = {
   primary: { ref: "var(--brand)", pill: "bg-action-primary-soft text-brand-text" },
   success: { ref: "var(--color-success-600)", pill: "bg-success-50 text-success-700" },
   warning: { ref: "var(--color-warning-500)", pill: "bg-warning-50 text-warning-700" },
   danger: { ref: "var(--color-danger-500)", pill: "bg-danger-50 text-danger-700" },
   info: { ref: "var(--color-info-500)", pill: "bg-info-50 text-info-700" }
-}, F = (t) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(t), fe = (t, n) => {
-  const a = [];
+}, k = (t) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(t), be = (t, n) => {
+  const r = [];
   for (const i of t)
     for (const o of Object.keys(i))
-      o !== n && typeof i[o] == "number" && !a.includes(o) && a.push(o);
-  return a;
+      o !== n && typeof i[o] == "number" && !r.includes(o) && r.push(o);
+  return r;
 };
-function D({ x: t, y: n, payload: a, anchor: i, dy: o, format: r }) {
-  const l = (a == null ? void 0 : a.value) ?? "", x = r ? r(l) : l;
+function H({ x: t, y: n, payload: r, anchor: i, dy: o, format: a }) {
+  const l = (r == null ? void 0 : r.value) ?? "", x = a ? a(l) : l;
   return /* @__PURE__ */ e("text", { x: t, y: n, dy: o, textAnchor: i, className: "fill-tertiary text-xs tabular-nums", children: x });
 }
-function he({
+function pe({
   x: t,
   y: n,
-  value: a,
+  value: r,
   hidden: i,
   color: o,
-  format: r
+  format: a
 }) {
-  if (i || t == null || n == null || a == null || a === "") return null;
-  const l = Number(a);
+  if (i || t == null || n == null || r == null || r === "") return null;
+  const l = Number(r);
   return Number.isNaN(l) ? null : /* @__PURE__ */ e(
     "text",
     {
@@ -39,145 +78,151 @@ function he({
       y: Number(n) - 10,
       textAnchor: "middle",
       fill: o,
-      className: $(!o && "fill-secondary", "text-xs tabular-nums"),
-      children: r(l)
+      className: O(!o && "fill-secondary", "text-xs tabular-nums"),
+      children: a(l)
     }
   );
 }
-function E({
+function _({
   cx: t,
   cy: n,
-  color: a,
-  active: i = !1
+  color: r,
+  active: i = !1,
+  seriesKey: o,
+  index: a
 }) {
-  return t == null || n == null ? null : /* @__PURE__ */ e(
+  if (t == null || n == null) return null;
+  const l = o != null && !i;
+  return /* @__PURE__ */ e(
     "circle",
     {
       "aria-hidden": !0,
+      "data-chart-series": l ? o : void 0,
+      "data-chart-index": l ? a : void 0,
       cx: t,
       cy: n,
       r: i ? 5.5 : 4,
       fill: "var(--background)",
-      stroke: a,
-      strokeWidth: i ? 3 : He
+      stroke: r,
+      strokeWidth: i ? 3 : Xe
     }
   );
 }
-function Pe({
+function Ze({
   x: t,
   y: n,
-  width: a,
+  width: r,
   height: i,
   value: o,
-  format: r,
+  format: a,
   horizontal: l
 }) {
   if (t == null || n == null || o == null || o === "") return null;
   const x = Number(o);
   if (Number.isNaN(x)) return null;
-  const c = Number(t), m = Number(n), u = Number(a ?? 0), N = Number(i ?? 0);
+  const u = Number(t), h = Number(n), c = Number(r ?? 0), b = Number(i ?? 0);
   return l ? /* @__PURE__ */ e(
     "text",
     {
-      x: c + u + 8,
-      y: m + N / 2,
+      x: u + c + 8,
+      y: h + b / 2,
       dy: "0.32em",
       textAnchor: "start",
       className: "fill-secondary text-xs tabular-nums",
-      children: r(x)
+      children: a(x)
     }
   ) : /* @__PURE__ */ e(
     "text",
     {
-      x: c + u / 2,
-      y: m - 8,
+      x: u + c / 2,
+      y: h - 8,
       textAnchor: "middle",
       className: "fill-secondary text-xs tabular-nums",
-      children: r(x)
+      children: a(x)
     }
   );
 }
-function T({
+function I({
   active: t,
   payload: n,
-  label: a,
+  label: r,
   format: i,
   labelKey: o,
-  renderer: r
+  renderer: a
 }) {
-  var N, b;
-  const l = (n ?? []).map((f, y) => {
-    const C = f.payload && typeof f.payload == "object" ? f.payload : void 0;
+  var b, v;
+  const l = (n ?? []).map((m, w) => {
+    const M = m.payload && typeof m.payload == "object" ? m.payload : void 0;
     return {
-      key: f.dataKey ?? y,
-      name: f.name ?? f.dataKey ?? y,
-      value: f.value,
-      color: f.color,
-      datum: C
+      key: m.dataKey ?? w,
+      name: m.name ?? m.dataKey ?? w,
+      value: m.value,
+      color: m.color,
+      datum: M
     };
-  }), x = o ? (b = (N = l[0]) == null ? void 0 : N.datum) == null ? void 0 : b[o] : void 0, c = {
+  }), x = o ? (v = (b = l[0]) == null ? void 0 : b.datum) == null ? void 0 : v[o] : void 0, u = {
     active: !!t,
-    label: typeof x == "string" || typeof x == "number" ? x : a,
+    label: typeof x == "string" || typeof x == "number" ? x : r,
     items: l,
     formatValue: i
   };
-  if (r) return /* @__PURE__ */ e(K, { children: r(c) });
-  if (!c.active || !l.length) return null;
-  const m = l.length === 1, u = c.label ?? (m ? l[0].name : void 0);
-  return /* @__PURE__ */ A("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background", children: [
-    /* @__PURE__ */ e("div", { className: $("text-xs font-normal tracking-wide uppercase text-background/60", !m && "mb-1"), children: u }),
-    l.map((f) => /* @__PURE__ */ A("div", { className: "flex items-center gap-1.5", children: [
-      !m && /* @__PURE__ */ A(K, { children: [
-        /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-1.5 rounded-dot", style: { background: f.color } }),
-        /* @__PURE__ */ e("span", { className: "text-background/70", children: f.name })
+  if (a) return /* @__PURE__ */ e(ne, { children: a(u) });
+  if (!u.active || !l.length) return null;
+  const h = l.length === 1, c = u.label ?? (h ? l[0].name : void 0);
+  return /* @__PURE__ */ y("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background", children: [
+    /* @__PURE__ */ e("div", { className: O("text-xs font-normal tracking-wide uppercase text-background/60", !h && "mb-1"), children: c }),
+    l.map((m) => /* @__PURE__ */ y("div", { className: "flex items-center gap-1.5", children: [
+      !h && /* @__PURE__ */ y(ne, { children: [
+        /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-1.5 rounded-dot", style: { background: m.color } }),
+        /* @__PURE__ */ e("span", { className: "text-background/70", children: m.name })
       ] }),
-      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-normal tabular-nums", children: typeof f.value == "number" ? i(f.value) : String(f.value ?? "") })
-    ] }, f.key))
+      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-normal tabular-nums", children: typeof m.value == "number" ? i(m.value) : String(m.value ?? "") })
+    ] }, m.key))
   ] });
 }
-const xe = "pointer-events-none inline-flex min-h-4 items-center rounded-full px-2 py-0.5 text-xs font-normal whitespace-nowrap";
-function Ge({
+const Ne = "pointer-events-none inline-flex min-h-4 items-center rounded-full px-2 py-0.5 text-xs font-normal whitespace-nowrap";
+function Qe({
   viewBox: t,
   label: n,
-  value: a,
+  value: r,
   color: i,
   axis: o
 }) {
-  const r = t ?? {}, l = /* @__PURE__ */ A("span", { className: $(xe, W[i].pill), children: [
+  const a = t ?? {}, l = /* @__PURE__ */ y("span", { className: O(Ne, W[i].pill), children: [
     n,
-    a != null && /* @__PURE__ */ e("span", { className: "ml-1 tabular-nums", children: a })
+    r != null && /* @__PURE__ */ e("span", { className: "ml-1 tabular-nums", children: r })
   ] });
-  return o === "y" ? /* @__PURE__ */ e("foreignObject", { x: r.x ?? 0, y: (r.y ?? 0) - 12, width: r.width ?? 0, height: 24, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-end pr-1", children: l }) }) : /* @__PURE__ */ e("foreignObject", { x: (r.x ?? 0) - 90, y: (r.y ?? 0) - 12, width: 180, height: 24, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: l }) });
+  return o === "y" ? /* @__PURE__ */ e("foreignObject", { x: a.x ?? 0, y: (a.y ?? 0) - 12, width: a.width ?? 0, height: 24, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-end pr-1", children: l }) }) : /* @__PURE__ */ e("foreignObject", { x: (a.x ?? 0) - 90, y: (a.y ?? 0) - 12, width: 180, height: 24, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: l }) });
 }
-function Ve({ viewBox: t, label: n, color: a }) {
+function qe({ viewBox: t, label: n, color: r }) {
   const i = t ?? {};
-  return /* @__PURE__ */ e("foreignObject", { x: i.x ?? 0, y: i.y ?? 0, width: i.width ?? 0, height: 28, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center pl-1.5", children: /* @__PURE__ */ e("span", { className: $(xe, W[a].pill), children: n }) }) });
+  return /* @__PURE__ */ e("foreignObject", { x: i.x ?? 0, y: i.y ?? 0, width: i.width ?? 0, height: 28, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center pl-1.5", children: /* @__PURE__ */ e("span", { className: O(Ne, W[r].pill), children: n }) }) });
 }
-function Ue({
+function Je({
   cx: t,
   cy: n,
-  n: a,
+  n: r,
   ann: i,
   onEnter: o,
-  onLeave: r
+  onLeave: a
 }) {
   const [l, x] = R.useState(!1);
   if (t == null || n == null || !Number.isFinite(t) || !Number.isFinite(n)) return /* @__PURE__ */ e("g", {});
-  const c = () => o({ ann: i, n: a, cx: t, cy: n }), m = () => r();
-  return /* @__PURE__ */ A(
+  const u = () => o({ ann: i, n: r, cx: t, cy: n }), h = () => a();
+  return /* @__PURE__ */ y(
     "g",
     {
       tabIndex: 0,
       role: "img",
-      "aria-label": `Annotation ${a}: ${i.label}`,
+      "aria-label": `Annotation ${r}: ${i.label}`,
       className: "cursor-default outline-none [transform-box:fill-box] origin-center transition-transform ease-out [transition-duration:150ms] hover:scale-110 focus-visible:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:focus-visible:scale-100",
-      onMouseEnter: c,
-      onMouseLeave: m,
+      onMouseEnter: u,
+      onMouseLeave: h,
       onFocus: () => {
-        x(!0), c();
+        x(!0), u();
       },
       onBlur: () => {
-        x(!1), m();
+        x(!1), h();
       },
       children: [
         l && /* @__PURE__ */ e("circle", { cx: t, cy: n, r: 12, fill: "none", stroke: "var(--ring)", strokeWidth: 2 }),
@@ -191,15 +236,15 @@ function Ue({
             dy: "0.35em",
             textAnchor: "middle",
             className: "pointer-events-none fill-brand-foreground text-s font-medium select-none",
-            children: a
+            children: r
           }
         )
       ]
     }
   );
 }
-function Ye({ hovered: t, frameWidth: n, format: a }) {
-  return /* @__PURE__ */ e(We, { reducedMotion: "user", children: /* @__PURE__ */ e(ze, { children: t && /* @__PURE__ */ e(
+function Ke({ hovered: t, frameWidth: n, format: r }) {
+  return /* @__PURE__ */ e(Pe, { reducedMotion: "user", children: /* @__PURE__ */ e(Ge, { children: t && /* @__PURE__ */ e(
     "div",
     {
       className: "pointer-events-none absolute z-10",
@@ -207,16 +252,16 @@ function Ye({ hovered: t, frameWidth: n, format: a }) {
         left: Math.max(96, Math.min(t.cx, Math.max(n - 96, 96))),
         top: t.cy - 16
       },
-      children: /* @__PURE__ */ A(
-        _e.div,
+      children: /* @__PURE__ */ y(
+        Ve.div,
         {
-          variants: je,
+          variants: Ue,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
-          className: "w-max max-w-60 -translate-x-1/2 -translate-y-full origin-bottom rounded-lg bg-elevated p-3 shadow-elevation",
+          className: "w-max max-w-60 -translate-x-1/2 -translate-y-full origin-bottom rounded-lg bg-elevated p-3",
           children: [
-            /* @__PURE__ */ A("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ y("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ e(
                 "span",
                 {
@@ -229,10 +274,10 @@ function Ye({ hovered: t, frameWidth: n, format: a }) {
               /* @__PURE__ */ e("span", { className: "text-xs font-normal text-foreground", children: t.ann.label })
             ] }),
             t.ann.description && /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs leading-relaxed text-secondary", children: t.ann.description }),
-            /* @__PURE__ */ A("div", { className: "mt-1.5 text-xs font-normal tracking-wide uppercase text-tertiary tabular-nums", children: [
+            /* @__PURE__ */ y("div", { className: "mt-1.5 text-xs font-normal tracking-wide uppercase text-tertiary tabular-nums", children: [
               t.ann.x,
               " · ",
-              a(t.ann.y)
+              r(t.ann.y)
             ] })
           ]
         }
@@ -240,76 +285,76 @@ function Ye({ hovered: t, frameWidth: n, format: a }) {
     }
   ) }) });
 }
-function ve(t, n) {
-  const [a, i] = R.useState(null), o = R.useCallback(() => i(null), []), { back: r, front: l } = R.useMemo(() => {
-    const x = [], c = [];
-    let m = 0;
-    return (t ?? []).forEach((u, N) => {
-      const b = u.color ?? "primary";
-      if (u.kind === "band") {
-        const f = u.axis ?? "y";
+function we(t, n) {
+  const [r, i] = R.useState(null), o = R.useCallback(() => i(null), []), { back: a, front: l } = R.useMemo(() => {
+    const x = [], u = [];
+    let h = 0;
+    return (t ?? []).forEach((c, b) => {
+      const v = c.color ?? "primary";
+      if (c.kind === "band") {
+        const m = c.axis ?? "y";
         x.push(
           /* @__PURE__ */ e(
-            Be,
+            ze,
             {
-              ...f === "y" ? { y1: u.from, y2: u.to } : { x1: u.from, x2: u.to },
-              fill: W[b].ref,
+              ...m === "y" ? { y1: c.from, y2: c.to } : { x1: c.from, x2: c.to },
+              fill: W[v].ref,
               fillOpacity: 0.06,
               stroke: "none",
-              ifOverflow: f === "y" ? "extendDomain" : "visible",
-              label: u.label ? /* @__PURE__ */ e(Ve, { label: u.label, color: b }) : void 0
+              ifOverflow: m === "y" ? "extendDomain" : "visible",
+              label: c.label ? /* @__PURE__ */ e(qe, { label: c.label, color: v }) : void 0
             },
-            `ann-${N}`
+            `ann-${b}`
           )
         );
-      } else if (u.kind === "line") {
-        const f = u.axis ?? "y";
-        c.push(
+      } else if (c.kind === "line") {
+        const m = c.axis ?? "y";
+        u.push(
           /* @__PURE__ */ e(
-            De,
+            We,
             {
-              ...f === "y" ? { y: u.value } : { x: u.value },
-              stroke: W[b].ref,
+              ...m === "y" ? { y: c.value } : { x: c.value },
+              stroke: W[v].ref,
               strokeWidth: 1,
               strokeDasharray: "4 4",
-              ifOverflow: f === "y" ? "extendDomain" : "visible",
-              label: u.label ? /* @__PURE__ */ e(
-                Ge,
+              ifOverflow: m === "y" ? "extendDomain" : "visible",
+              label: c.label ? /* @__PURE__ */ e(
+                Qe,
                 {
-                  label: u.label,
-                  value: typeof u.value == "number" ? n(u.value) : String(u.value),
-                  color: b,
-                  axis: f
+                  label: c.label,
+                  value: typeof c.value == "number" ? n(c.value) : String(c.value),
+                  color: v,
+                  axis: m
                 }
               ) : void 0
             },
-            `ann-${N}`
+            `ann-${b}`
           )
         );
       } else {
-        m += 1;
-        const f = m;
-        c.push(
+        h += 1;
+        const m = h;
+        u.push(
           /* @__PURE__ */ e(
-            Ee,
+            je,
             {
-              x: u.x,
-              y: u.y,
+              x: c.x,
+              y: c.y,
               ifOverflow: "visible",
-              shape: (y) => /* @__PURE__ */ e(Ue, { cx: y.cx, cy: y.cy, n: f, ann: u, onEnter: i, onLeave: o })
+              shape: (w) => /* @__PURE__ */ e(Je, { cx: w.cx, cy: w.cy, n: m, ann: c, onEnter: i, onLeave: o })
             },
-            `ann-${N}`
+            `ann-${b}`
           )
         );
       }
-    }), { back: x, front: c };
+    }), { back: x, front: u };
   }, [t, n, o]);
-  return { back: r, front: l, hovered: a };
+  return { back: a, front: l, hovered: r };
 }
-function X({
+function K({
   items: t,
   align: n = "end",
-  className: a,
+  className: r,
   onToggle: i
 }) {
   const o = {
@@ -317,285 +362,269 @@ function X({
     center: "justify-center",
     end: "justify-end"
   }[n];
-  return /* @__PURE__ */ e("div", { className: $("mb-3 flex flex-wrap items-center gap-x-4 gap-y-1", o, a), children: t.map(
-    (r) => i && r.key !== void 0 ? /* @__PURE__ */ A(
+  return /* @__PURE__ */ e("div", { className: O("mb-3 flex flex-wrap items-center gap-x-4 gap-y-1", o, r), children: t.map(
+    (a) => i && a.key !== void 0 ? /* @__PURE__ */ y(
       "button",
       {
         type: "button",
-        "aria-pressed": !r.hidden,
-        "aria-label": `Toggle ${r.label} series`,
-        onClick: () => i(r.key),
-        className: $(
+        "aria-pressed": !a.hidden,
+        "aria-label": `Toggle ${a.label} series`,
+        onClick: () => i(a.key),
+        className: O(
           "inline-flex cursor-pointer items-center gap-1.5 rounded-sm text-s outline-none",
           "transition-colors duration-150 ease-out motion-reduce:transition-none",
           "focus-visible:ring-2 focus-visible:ring-ring",
-          r.hidden ? "text-tertiary" : "text-secondary hover:text-foreground"
+          a.hidden ? "text-tertiary" : "text-secondary hover:text-foreground"
         ),
         children: [
           /* @__PURE__ */ e(
             "span",
             {
               "aria-hidden": !0,
-              className: $(
+              className: O(
                 "size-2 rounded-dot transition-opacity duration-150 ease-out motion-reduce:transition-none",
-                r.hidden && "opacity-25"
+                a.hidden && "opacity-25"
               ),
-              style: { background: r.color }
+              style: { background: a.color }
             }
           ),
-          r.label
+          a.label
         ]
       },
-      r.label
-    ) : /* @__PURE__ */ A("span", { className: "inline-flex items-center gap-1.5 text-s text-secondary", children: [
-      /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-2 rounded-dot", style: { background: r.color } }),
-      r.label
-    ] }, r.label)
+      a.label
+    ) : /* @__PURE__ */ y("span", { className: "inline-flex items-center gap-1.5 text-s text-secondary", children: [
+      /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-2 rounded-dot", style: { background: a.color } }),
+      a.label
+    ] }, a.label)
   ) });
 }
-const z = R.forwardRef(
-  ({ className: t, height: n, legendItems: a, hovered: i, format: o, onLegendToggle: r, children: l, ...x }, c) => {
-    var N;
-    const m = R.useRef(null);
-    return /* @__PURE__ */ A("div", { ref: (b) => {
-      m.current = b, typeof c == "function" ? c(b) : c && (c.current = b);
-    }, className: $("relative w-full font-sans", t), ...x, children: [
-      a && /* @__PURE__ */ e(X, { items: a, onToggle: r }),
-      /* @__PURE__ */ e(_, { width: "100%", height: Math.max(n, I), children: l }),
-      /* @__PURE__ */ e(Ye, { hovered: i, frameWidth: ((N = m.current) == null ? void 0 : N.clientWidth) ?? 0, format: o })
+const P = R.forwardRef(
+  ({ className: t, height: n, legendItems: r, hovered: i, format: o, onLegendToggle: a, hoverRef: l, children: x, ...u }, h) => {
+    var v;
+    const c = R.useRef(null);
+    return /* @__PURE__ */ y("div", { ref: (m) => {
+      c.current = m, l && (l.current = m), typeof h == "function" ? h(m) : h && (h.current = m);
+    }, className: O("relative w-full font-sans", t), ...u, children: [
+      r && /* @__PURE__ */ e(K, { items: r, onToggle: a }),
+      /* @__PURE__ */ e(V, { width: "100%", height: Math.max(n, D), children: x }),
+      /* @__PURE__ */ e(Ke, { hovered: i, frameWidth: ((v = c.current) == null ? void 0 : v.clientWidth) ?? 0, format: o })
     ] });
   }
 );
-z.displayName = "ChartFrame";
-function Z(t) {
+P.displayName = "ChartFrame";
+function ee(t) {
   const {
     data: n,
-    categoryKey: a,
+    categoryKey: r,
     series: i,
     seriesLabels: o,
-    highlight: r,
+    highlight: a,
     annotations: l,
     grid: x = !1,
-    legend: c,
-    showYAxis: m = !0,
-    formatValue: u,
-    xScale: N = "category",
-    xDomain: b,
-    yDomain: f,
-    xTickFormatter: y,
-    yTickFormatter: C,
-    yAxisWidth: w = 44
-  } = t, p = R.useMemo(() => i ?? fe(n, a), [i, n, a]), h = u ?? F, k = C ?? ((M) => typeof M == "number" ? h(M) : M), d = ve(l, h), s = (M, B) => r && p.includes(r) ? M === r ? "var(--color-chart-1)" : ne : U(B), g = (M) => (o == null ? void 0 : o[M]) ?? M, [v, S] = R.useState(
+    legend: u,
+    showYAxis: h = !0,
+    formatValue: c,
+    xScale: b = "category",
+    xDomain: v,
+    yDomain: m,
+    xTickFormatter: w,
+    yTickFormatter: M,
+    yAxisWidth: A = 44
+  } = t, g = R.useMemo(() => i ?? be(n, r), [i, n, r]), f = c ?? k, N = M ?? (($) => typeof $ == "number" ? f($) : $), S = we(l, f), C = ($, E) => a && g.includes(a) ? $ === a ? "var(--color-chart-1)" : oe : q(E), d = ($) => (o == null ? void 0 : o[$]) ?? $, [s, p] = R.useState(
     () => /* @__PURE__ */ new Set()
-  ), L = R.useCallback((M) => {
-    S((B) => {
-      const P = new Set(B);
-      return P.has(M) ? P.delete(M) : P.add(M), P;
+  ), L = R.useCallback(($) => {
+    p((E) => {
+      const Y = new Set(E);
+      return Y.has($) ? Y.delete($) : Y.add($), Y;
     });
-  }, []), H = (M) => v.has(M), Q = c ?? p.length > 1 ? p.map((M, B) => ({
-    key: M,
-    label: g(M),
-    color: s(M, B),
-    hidden: v.has(M)
+  }, []), F = ($) => s.has($), G = u ?? g.length > 1 ? g.map(($, E) => ({
+    key: $,
+    label: d($),
+    color: C($, E),
+    hidden: s.has($)
   })) : null;
   return {
-    names: p,
-    format: h,
-    layers: d,
-    legendItems: Q,
+    names: g,
+    format: f,
+    layers: S,
+    legendItems: G,
     furniture: [
       /* Gridlines one step below the border token — guides, not content. */
-      x ? /* @__PURE__ */ e(te, { vertical: !1, stroke: "var(--chart-grid)" }, "grid") : null,
+      x ? /* @__PURE__ */ e(ae, { vertical: !1, stroke: "var(--chart-grid)" }, "grid") : null,
       /* @__PURE__ */ e(
-        re,
+        ie,
         {
-          dataKey: a,
-          type: N === "time" ? "number" : "category",
-          scale: N === "time" ? "time" : "auto",
-          domain: N === "time" ? b ?? ["dataMin", "dataMax"] : b,
-          allowDataOverflow: !!b,
+          dataKey: r,
+          type: b === "time" ? "number" : "category",
+          scale: b === "time" ? "time" : "auto",
+          domain: b === "time" ? v ?? ["dataMin", "dataMax"] : v,
+          allowDataOverflow: !!v,
           axisLine: { stroke: "var(--chart-axis)" },
           tickLine: !1,
           minTickGap: 28,
           tickMargin: 24,
           padding: { left: 16, right: 16 },
           height: 40,
-          tick: /* @__PURE__ */ e(D, { anchor: "middle", dy: 0, format: y })
+          tick: /* @__PURE__ */ e(H, { anchor: "middle", dy: 0, format: w })
         },
         "x"
       ),
-      m ? /* @__PURE__ */ e(
-        V,
+      h ? /* @__PURE__ */ e(
+        Z,
         {
-          width: w,
-          domain: f,
-          allowDataOverflow: !!f,
+          width: A,
+          domain: m,
+          allowDataOverflow: !!m,
           axisLine: { stroke: "var(--chart-axis)" },
           tickLine: !1,
           tickMargin: 12,
-          tick: /* @__PURE__ */ e(D, { anchor: "end", dy: "0.32em", format: k })
+          tick: /* @__PURE__ */ e(H, { anchor: "end", dy: "0.32em", format: N })
         },
         "y"
       ) : null
     ],
-    colorFor: s,
-    labelFor: g,
+    colorFor: C,
+    labelFor: d,
     toggleSeries: L,
-    isHidden: H
+    isHidden: F
   };
 }
-const I = 300, j = { top: 24, right: 12, bottom: 8, left: 0 };
-function ae(t, n, a, i) {
+const D = 300, U = { top: 24, right: 12, bottom: 8, left: 0 };
+function le(t, n, r, i) {
   if (i === !0) return new Set(t);
   if (i === !1) return /* @__PURE__ */ new Set();
-  if (a && t.includes(a)) {
-    const r = (n ?? []).filter((l) => l !== a);
-    return /* @__PURE__ */ new Set([a, ...r]);
+  if (r && t.includes(r)) {
+    const a = (n ?? []).filter((l) => l !== r);
+    return /* @__PURE__ */ new Set([r, ...a]);
   }
-  return t.filter((r) => !(n != null && n.includes(r))).length === 1 ? new Set(t) : /* @__PURE__ */ new Set();
+  return t.filter((a) => !(n != null && n.includes(a))).length === 1 ? new Set(t) : /* @__PURE__ */ new Set();
 }
-function ge(t, n, a) {
+function Ae(t, n, r) {
   return R.useCallback(
     (i, o) => {
-      if (!(n != null && n.includes(i))) return a(i, o);
-      const r = t.filter((x) => !n.includes(x)), l = r[n.indexOf(i)] ?? r[0];
-      return l ? a(l, t.indexOf(l)) : a(i, o);
+      if (!(n != null && n.includes(i))) return r(i, o);
+      const a = t.filter((x) => !n.includes(x)), l = a[n.indexOf(i)] ?? a[0];
+      return l ? r(l, t.indexOf(l)) : r(i, o);
     },
-    [t, n, a]
+    [t, n, r]
   );
 }
-const Xe = R.forwardRef(
+const et = R.forwardRef(
   // Straight segments by default: the house line is a solid stroke with a DOT
   // at every observation — the data points are visible, the path connects them
   // without inventing values between them.
   // A smooth curve invents values between observations; opt back in with
   // `curve="natural"` when the interpolation is the point.
-  ({ height: t = I, curve: n = "linear", forecastKeys: a, animatedSeriesKeys: i, showValues: o, className: r, ...l }, x) => {
-    const { names: c, format: m, layers: u, legendItems: N, furniture: b, colorFor: f, labelFor: y, toggleSeries: C, isHidden: w } = Z(l), p = ge(c, a, f), h = ae(c, a, l.highlight, o), [k, d] = R.useState(null);
-    return /* @__PURE__ */ e(z, { ref: x, className: r, height: t, legendItems: N, hovered: u.hovered, format: m, onLegendToggle: C, children: /* @__PURE__ */ A(
-      pe,
-      {
-        data: l.data,
-        margin: j,
-        onMouseMove: (s) => d((s == null ? void 0 : s.activeTooltipIndex) ?? null),
-        onMouseLeave: () => d(null),
-        children: [
-          b,
-          l.tooltip !== !1 && /* @__PURE__ */ e(
-            O,
+  ({ height: t = D, curve: n = "linear", forecastKeys: r, animatedSeriesKeys: i, showValues: o, className: a, ...l }, x) => {
+    const { names: u, format: h, layers: c, legendItems: b, furniture: v, colorFor: m, labelFor: w, toggleSeries: M, isHidden: A } = ee(l), g = Ae(u, r, m), f = le(u, r, l.highlight, o), N = ge(u, r), S = new Set(u.filter((s) => !A(s)).map(N)), C = ve(N, S.size > 1), { activeIndex: d } = C;
+    return /* @__PURE__ */ e(P, { ref: x, className: a, height: t, legendItems: b, hovered: c.hovered, format: h, onLegendToggle: M, hoverRef: C.frameRef, children: /* @__PURE__ */ y(ye, { data: l.data, margin: U, ...C.handlers, children: [
+      v,
+      l.tooltip !== !1 && /* @__PURE__ */ e(
+        T,
+        {
+          content: /* @__PURE__ */ e(
+            I,
             {
-              content: /* @__PURE__ */ e(
-                T,
-                {
-                  format: m,
-                  renderer: l.tooltip
-                }
-              ),
-              cursor: { stroke: "var(--border-strong)" },
-              isAnimationActive: !1
+              format: h,
+              renderer: l.tooltip
             }
           ),
-          u.back,
-          c.map((s, g) => /* @__PURE__ */ e(
-            se,
+          cursor: !1,
+          isAnimationActive: !1
+        }
+      ),
+      c.back,
+      u.map((s, p) => /* @__PURE__ */ e(
+        ue,
+        {
+          dataKey: s,
+          name: w(s),
+          type: n,
+          className: O(B, C.isDimmed(s) && "opacity-30"),
+          stroke: g(s, p),
+          strokeWidth: J,
+          strokeDasharray: r != null && r.includes(s) ? "6 4" : void 0,
+          dot: /* @__PURE__ */ e(_, { color: g(s, p), seriesKey: s }),
+          activeDot: C.isDimmed(s) ? !1 : /* @__PURE__ */ e(_, { color: g(s, p), active: !0 }),
+          label: f.has(s) ? /* @__PURE__ */ e(
+            pe,
             {
-              dataKey: s,
-              name: y(s),
-              type: n,
-              stroke: p(s, g),
-              strokeWidth: Y,
-              strokeDasharray: a != null && a.includes(s) ? "6 4" : void 0,
-              dot: /* @__PURE__ */ e(E, { color: p(s, g) }),
-              activeDot: /* @__PURE__ */ e(E, { color: p(s, g), active: !0 }),
-              label: h.has(s) ? /* @__PURE__ */ e(
-                he,
-                {
-                  color: p(s, g),
-                  format: m,
-                  hidden: k != null
-                }
-              ) : void 0,
-              hide: w(s),
-              isAnimationActive: (i == null ? void 0 : i.includes(s)) ?? !1
-            },
-            s
-          )),
-          u.front
-        ]
-      }
-    ) });
+              color: g(s, p),
+              format: h,
+              hidden: d != null
+            }
+          ) : void 0,
+          hide: A(s),
+          isAnimationActive: (i == null ? void 0 : i.includes(s)) ?? !1
+        },
+        s
+      )),
+      c.front
+    ] }) });
   }
 );
-Xe.displayName = "LineChart";
-const Ze = R.forwardRef(
-  ({ height: t = I, curve: n = "linear", stacked: a = !1, forecastKeys: i, showValues: o, className: r, ...l }, x) => {
-    const { names: c, format: m, layers: u, legendItems: N, furniture: b, colorFor: f, labelFor: y, toggleSeries: C, isHidden: w } = Z(l), p = ge(c, i, f), h = a ? /* @__PURE__ */ new Set() : ae(c, i, l.highlight, o), [k, d] = R.useState(null), s = R.useId().replace(/[^a-zA-Z0-9]/g, "");
-    return /* @__PURE__ */ e(z, { ref: x, className: r, height: t, legendItems: N, hovered: u.hovered, format: m, onLegendToggle: C, children: /* @__PURE__ */ A(
-      Ne,
-      {
-        data: l.data,
-        margin: j,
-        onMouseMove: (g) => d((g == null ? void 0 : g.activeTooltipIndex) ?? null),
-        onMouseLeave: () => d(null),
-        children: [
-          /* @__PURE__ */ e("defs", { children: c.map((g, v) => /* @__PURE__ */ A("linearGradient", { id: `${s}-${v}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ e("stop", { offset: "0%", stopColor: f(g, v), stopOpacity: 0.18 }),
-            /* @__PURE__ */ e("stop", { offset: "100%", stopColor: f(g, v), stopOpacity: 0.02 })
-          ] }, g)) }),
-          b,
-          l.tooltip !== !1 && /* @__PURE__ */ e(
-            O,
+et.displayName = "LineChart";
+const tt = R.forwardRef(
+  ({ height: t = D, curve: n = "linear", stacked: r = !1, forecastKeys: i, showValues: o, className: a, ...l }, x) => {
+    const { names: u, format: h, layers: c, legendItems: b, furniture: v, colorFor: m, labelFor: w, toggleSeries: M, isHidden: A } = ee(l), g = Ae(u, i, m), f = r ? /* @__PURE__ */ new Set() : le(u, i, l.highlight, o), N = ge(u, i), S = new Set(u.filter((p) => !A(p)).map(N)), C = ve(N, S.size > 1), { activeIndex: d } = C, s = R.useId().replace(/[^a-zA-Z0-9]/g, "");
+    return /* @__PURE__ */ e(P, { ref: x, className: a, height: t, legendItems: b, hovered: c.hovered, format: h, onLegendToggle: M, hoverRef: C.frameRef, children: /* @__PURE__ */ y(Re, { data: l.data, margin: U, ...C.handlers, children: [
+      /* @__PURE__ */ e("defs", { children: u.map((p, L) => /* @__PURE__ */ y("linearGradient", { id: `${s}-${L}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: m(p, L), stopOpacity: 0.18 }),
+        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: m(p, L), stopOpacity: 0.02 })
+      ] }, p)) }),
+      v,
+      l.tooltip !== !1 && /* @__PURE__ */ e(
+        T,
+        {
+          content: /* @__PURE__ */ e(
+            I,
             {
-              content: /* @__PURE__ */ e(
-                T,
-                {
-                  format: m,
-                  renderer: l.tooltip
-                }
-              ),
-              cursor: { stroke: "var(--border-strong)" },
-              isAnimationActive: !1
+              format: h,
+              renderer: l.tooltip
             }
           ),
-          u.back,
-          c.map((g, v) => /* @__PURE__ */ e(
-            we,
-            {
-              dataKey: g,
-              name: y(g),
-              type: n,
-              stackId: a ? "stack" : void 0,
-              stroke: p(g, v),
-              strokeWidth: Y,
-              strokeDasharray: i != null && i.includes(g) ? "6 4" : void 0,
-              fill: `url(#${s}-${v})`,
-              dot: /* @__PURE__ */ e(E, { color: p(g, v) }),
-              activeDot: /* @__PURE__ */ e(E, { color: p(g, v), active: !0 }),
-              label: h.has(g) ? /* @__PURE__ */ e(he, { color: p(g, v), format: m, hidden: k != null }) : void 0,
-              hide: w(g),
-              isAnimationActive: !1
-            },
-            g
-          )),
-          u.front
-        ]
-      }
-    ) });
+          cursor: !1,
+          isAnimationActive: !1
+        }
+      ),
+      c.back,
+      u.map((p, L) => /* @__PURE__ */ e(
+        Me,
+        {
+          dataKey: p,
+          name: w(p),
+          type: n,
+          className: O(B, C.isDimmed(p) && "opacity-30"),
+          stackId: r ? "stack" : void 0,
+          stroke: g(p, L),
+          strokeWidth: J,
+          strokeDasharray: i != null && i.includes(p) ? "6 4" : void 0,
+          fill: `url(#${s}-${L})`,
+          dot: /* @__PURE__ */ e(_, { color: g(p, L), seriesKey: p }),
+          activeDot: C.isDimmed(p) ? !1 : /* @__PURE__ */ e(_, { color: g(p, L), active: !0 }),
+          label: f.has(p) ? /* @__PURE__ */ e(pe, { color: g(p, L), format: h, hidden: d != null }) : void 0,
+          hide: A(p),
+          isAnimationActive: !1
+        },
+        p
+      )),
+      c.front
+    ] }) });
   }
 );
-Ze.displayName = "AreaChart";
-const Qe = R.forwardRef(
+tt.displayName = "AreaChart";
+const nt = R.forwardRef(
   ({
-    height: t = I,
+    height: t = D,
     stacked: n = !1,
-    layout: a = "vertical",
+    layout: r = "vertical",
     showValues: i,
     className: o,
-    ...r
+    ...a
   }, l) => {
-    const { names: x, format: c, layers: m, legendItems: u, furniture: N, colorFor: b, labelFor: f, toggleSeries: y, isHidden: C } = Z(r), w = a === "horizontal", p = n ? /* @__PURE__ */ new Set() : ae(x, void 0, r.highlight, i), h = r.xTickFormatter ?? ((s) => typeof s == "number" ? c(s) : s), k = [
-      r.grid !== !1 ? /* @__PURE__ */ e(
-        te,
+    const { names: x, format: u, layers: h, legendItems: c, furniture: b, colorFor: v, labelFor: m, toggleSeries: w, isHidden: M } = ee(a), A = r === "horizontal", g = n ? /* @__PURE__ */ new Set() : le(x, void 0, a.highlight, i), f = a.xTickFormatter ?? ((s) => typeof s == "number" ? u(s) : s), N = [
+      a.grid !== !1 ? /* @__PURE__ */ e(
+        ae,
         {
           horizontal: !1,
           vertical: !0,
@@ -604,117 +633,119 @@ const Qe = R.forwardRef(
         "grid"
       ) : null,
       /* @__PURE__ */ e(
-        re,
+        ie,
         {
           type: "number",
-          domain: r.xDomain,
-          allowDataOverflow: !!r.xDomain,
+          domain: a.xDomain,
+          allowDataOverflow: !!a.xDomain,
           axisLine: !1,
           tickLine: !1,
           minTickGap: 28,
           tickMargin: 10,
-          tick: /* @__PURE__ */ e(D, { anchor: "middle", dy: 0, format: h })
+          tick: /* @__PURE__ */ e(H, { anchor: "middle", dy: 0, format: f })
         },
         "x"
       ),
-      r.showYAxis !== !1 ? /* @__PURE__ */ e(
-        V,
+      a.showYAxis !== !1 ? /* @__PURE__ */ e(
+        Z,
         {
           type: "category",
-          dataKey: r.categoryKey,
-          width: r.yAxisWidth ?? 144,
+          dataKey: a.categoryKey,
+          width: a.yAxisWidth ?? 144,
           axisLine: !1,
           tickLine: !1,
           tickMargin: 6,
           tick: /* @__PURE__ */ e(
-            D,
+            H,
             {
               anchor: "end",
               dy: "0.32em",
-              format: r.yTickFormatter
+              format: a.yTickFormatter
             }
           )
         },
         "y"
       ) : null
-    ], d = r.highlight && x.length === 1 && !x.includes(r.highlight) ? r.highlight : null;
-    return /* @__PURE__ */ e(z, { ref: l, className: o, height: t, legendItems: u, hovered: m.hovered, format: c, onLegendToggle: y, children: /* @__PURE__ */ A(
-      Ae,
+    ], S = a.highlight && x.length === 1 && !x.includes(a.highlight) ? a.highlight : null, { activeIndex: C, handlers: d } = xe();
+    return /* @__PURE__ */ e(P, { ref: l, className: o, height: t, legendItems: c, hovered: h.hovered, format: u, onLegendToggle: w, children: /* @__PURE__ */ y(
+      Se,
       {
-        data: r.data,
-        layout: w ? "vertical" : "horizontal",
-        margin: j,
+        data: a.data,
+        layout: A ? "vertical" : "horizontal",
+        margin: U,
         barCategoryGap: "24%",
+        ...d,
         children: [
-          w ? k : N,
-          r.tooltip !== !1 && /* @__PURE__ */ e(
-            O,
+          A ? N : b,
+          a.tooltip !== !1 && /* @__PURE__ */ e(
+            T,
             {
               content: /* @__PURE__ */ e(
-                T,
+                I,
                 {
-                  format: c,
-                  renderer: r.tooltip
+                  format: u,
+                  renderer: a.tooltip
                 }
               ),
-              cursor: { fill: "var(--muted)" },
+              cursor: !1,
               isAnimationActive: !1
             }
           ),
-          m.back,
-          x.map((s, g) => {
-            const v = n ? g === x.length - 1 : !0, S = w ? [0, 4, 4, 0] : [4, 4, 0, 0];
+          h.back,
+          x.map((s, p) => {
+            const L = n ? p === x.length - 1 : !0, F = A ? [0, 4, 4, 0] : [4, 4, 0, 0];
             return /* @__PURE__ */ e(
-              ce,
+              me,
               {
                 dataKey: s,
-                name: f(s),
+                name: m(s),
                 stackId: n ? "stack" : void 0,
-                fill: b(s, g),
-                activeBar: me,
-                radius: v ? S : 0,
+                fill: v(s, p),
+                radius: L ? F : 0,
                 maxBarSize: 48,
-                label: p.has(s) ? /* @__PURE__ */ e(Pe, { format: c, horizontal: w }) : void 0,
-                hide: C(s),
+                label: g.has(s) ? /* @__PURE__ */ e(Ze, { format: u, horizontal: A }) : void 0,
+                hide: M(s),
                 isAnimationActive: !1,
-                children: d && r.data.map((L) => /* @__PURE__ */ e(
-                  de,
+                children: a.data.map((G, z) => /* @__PURE__ */ e(
+                  Q,
                   {
-                    fill: L[r.categoryKey] === d ? "var(--color-chart-1)" : ne
+                    fill: S ? G[a.categoryKey] === S ? "var(--color-chart-1)" : oe : v(s, p),
+                    className: B,
+                    opacity: j(z, C)
                   },
-                  String(L[r.categoryKey])
+                  z
                 ))
               },
               s
             );
           }),
-          m.front
+          h.front
         ]
       }
     ) });
   }
 );
-Qe.displayName = "BarChart";
-const be = R.forwardRef(
-  ({ height: t = I, lineKeys: n, dualAxis: a = !1, stacked: i = !1, forecastKeys: o, className: r, ...l }, x) => {
-    const { names: c, format: m, layers: u, furniture: N, colorFor: b, labelFor: f, toggleSeries: y, isHidden: C } = Z(l), w = c.filter((d) => !n.includes(d)), p = (d, s) => n.length ? "var(--chart-axis)" : b(d, s), h = (d, s) => n.length ? "var(--color-chart-1)" : b(d, s), k = c.length > 1 ? [
-      ...w.map((d) => ({
+nt.displayName = "BarChart";
+const Ce = R.forwardRef(
+  ({ height: t = D, lineKeys: n, dualAxis: r = !1, stacked: i = !1, forecastKeys: o, className: a, ...l }, x) => {
+    const { names: u, format: h, layers: c, furniture: b, colorFor: v, labelFor: m, toggleSeries: w, isHidden: M } = ee(l), A = u.filter((d) => !n.includes(d)), g = (d, s) => n.length ? "var(--chart-axis)" : v(d, s), f = (d, s) => n.length ? "var(--color-chart-1)" : v(d, s), N = u.length > 1 ? [
+      ...A.map((d) => ({
         key: d,
-        label: f(d),
-        color: p(d, c.indexOf(d)),
-        hidden: C(d)
+        label: m(d),
+        color: g(d, u.indexOf(d)),
+        hidden: M(d)
       })),
       ...n.map((d) => ({
         key: d,
-        label: f(d),
-        color: h(d, c.indexOf(d)),
-        hidden: C(d)
+        label: m(d),
+        color: f(d, u.indexOf(d)),
+        hidden: M(d)
       }))
-    ] : null;
-    return /* @__PURE__ */ e(z, { ref: x, className: r, height: t, legendItems: k, hovered: u.hovered, format: m, onLegendToggle: y, children: /* @__PURE__ */ A(Ce, { data: l.data, margin: j, barCategoryGap: "24%", children: [
-      N,
-      a && /* @__PURE__ */ e(
-        V,
+    ] : null, { activeIndex: S, handlers: C } = xe();
+    return /* @__PURE__ */ e(P, { ref: x, className: a, height: t, legendItems: N, hovered: c.hovered, format: h, onLegendToggle: w, children: /* @__PURE__ */ y($e, { data: l.data, margin: U, barCategoryGap: "24%", ...C, children: [
+      b,
+      r && /* @__PURE__ */ e(
+        Z,
         {
           yAxisId: "right",
           orientation: "right",
@@ -723,199 +754,207 @@ const be = R.forwardRef(
           tickLine: !1,
           tickMargin: 6,
           tick: /* @__PURE__ */ e(
-            D,
+            H,
             {
               anchor: "start",
               dy: "0.32em",
-              format: (d) => typeof d == "number" ? m(d) : d
+              format: (d) => typeof d == "number" ? h(d) : d
             }
           )
         }
       ),
       l.tooltip !== !1 && /* @__PURE__ */ e(
-        O,
+        T,
         {
           content: /* @__PURE__ */ e(
-            T,
+            I,
             {
-              format: m,
+              format: h,
               renderer: l.tooltip
             }
           ),
-          cursor: { fill: "var(--muted)" },
+          cursor: !1,
           isAnimationActive: !1
         }
       ),
-      u.back,
-      w.map((d) => {
-        const s = c.indexOf(d), g = i ? d === w[w.length - 1] : !0;
+      c.back,
+      A.map((d) => {
+        const s = u.indexOf(d), p = i ? d === A[A.length - 1] : !0;
         return /* @__PURE__ */ e(
-          ce,
+          me,
           {
             dataKey: d,
-            name: f(d),
+            name: m(d),
             stackId: i ? "stack" : void 0,
-            fill: p(d, s),
-            activeBar: me,
-            radius: g ? [4, 4, 0, 0] : 0,
+            fill: g(d, s),
+            radius: p ? [4, 4, 0, 0] : 0,
             maxBarSize: 48,
-            hide: C(d),
-            isAnimationActive: !1
+            hide: M(d),
+            isAnimationActive: !1,
+            children: l.data.map((L, F) => /* @__PURE__ */ e(
+              Q,
+              {
+                fill: g(d, s),
+                className: B,
+                opacity: j(F, S)
+              },
+              F
+            ))
           },
           d
         );
       }),
       n.map((d) => {
-        const s = c.indexOf(d);
+        const s = u.indexOf(d);
         return /* @__PURE__ */ e(
-          se,
+          ue,
           {
             dataKey: d,
-            name: f(d),
-            yAxisId: a ? "right" : void 0,
+            name: m(d),
+            yAxisId: r ? "right" : void 0,
             type: "linear",
-            stroke: h(d, s),
-            strokeWidth: Y,
+            stroke: f(d, s),
+            strokeWidth: J,
             strokeDasharray: o != null && o.includes(d) ? "6 4" : void 0,
-            dot: /* @__PURE__ */ e(E, { color: h(d, s) }),
-            activeDot: /* @__PURE__ */ e(E, { color: h(d, s), active: !0 }),
-            hide: C(d),
+            dot: /* @__PURE__ */ e(_, { color: f(d, s) }),
+            activeDot: /* @__PURE__ */ e(_, { color: f(d, s), active: !0 }),
+            hide: M(d),
             isAnimationActive: !1
           },
           d
         );
       }),
-      u.front
+      c.front
     ] }) });
   }
 );
-be.displayName = "ComboChart";
-const qe = R.forwardRef(
-  (t, n) => /* @__PURE__ */ e(be, { ref: n, ...t })
+Ce.displayName = "ComboChart";
+const rt = R.forwardRef(
+  (t, n) => /* @__PURE__ */ e(Ce, { ref: n, ...t })
 );
-qe.displayName = "ComposedChart";
-const Je = R.forwardRef(
+rt.displayName = "ComposedChart";
+const at = R.forwardRef(
   ({
     data: t,
     xKey: n,
-    yKey: a,
+    yKey: r,
     labelKey: i,
     annotations: o,
-    height: r = I,
+    height: a = D,
     grid: l = !1,
     showYAxis: x = !0,
-    formatValue: c,
-    xScale: m = "number",
-    xDomain: u,
-    yDomain: N,
-    xTickFormatter: b,
-    yTickFormatter: f,
-    yAxisWidth: y = 44,
-    tooltip: C,
-    className: w
-  }, p) => {
-    const h = c ?? F, k = b ?? ((g) => typeof g == "number" ? F(g) : g), d = f ?? ((g) => typeof g == "number" ? h(g) : g), s = ve(o, h);
-    return /* @__PURE__ */ e(z, { ref: p, className: w, height: r, legendItems: null, hovered: s.hovered, format: h, children: /* @__PURE__ */ A(ye, { margin: j, children: [
-      l && /* @__PURE__ */ e(te, { vertical: !1, stroke: "var(--chart-grid)" }),
+    formatValue: u,
+    xScale: h = "number",
+    xDomain: c,
+    yDomain: b,
+    xTickFormatter: v,
+    yTickFormatter: m,
+    yAxisWidth: w = 44,
+    tooltip: M,
+    className: A
+  }, g) => {
+    const f = u ?? k, N = v ?? ((d) => typeof d == "number" ? k(d) : d), S = m ?? ((d) => typeof d == "number" ? f(d) : d), C = we(o, f);
+    return /* @__PURE__ */ e(P, { ref: g, className: A, height: a, legendItems: null, hovered: C.hovered, format: f, children: /* @__PURE__ */ y(Le, { margin: U, children: [
+      l && /* @__PURE__ */ e(ae, { vertical: !1, stroke: "var(--chart-grid)" }),
       /* @__PURE__ */ e(
-        re,
+        ie,
         {
           type: "number",
           dataKey: n,
-          scale: m === "time" ? "time" : "auto",
-          domain: u ?? (m === "time" ? ["dataMin", "dataMax"] : ["auto", "auto"]),
-          allowDataOverflow: !!u,
+          scale: h === "time" ? "time" : "auto",
+          domain: c ?? (h === "time" ? ["dataMin", "dataMax"] : ["auto", "auto"]),
+          allowDataOverflow: !!c,
           axisLine: !1,
           tickLine: !1,
           minTickGap: 28,
           tickMargin: 10,
-          tick: /* @__PURE__ */ e(D, { anchor: "middle", dy: 0, format: k })
+          tick: /* @__PURE__ */ e(H, { anchor: "middle", dy: 0, format: N })
         }
       ),
       x && /* @__PURE__ */ e(
-        V,
+        Z,
         {
           type: "number",
-          dataKey: a,
-          width: y,
-          domain: N,
-          allowDataOverflow: !!N,
+          dataKey: r,
+          width: w,
+          domain: b,
+          allowDataOverflow: !!b,
           axisLine: !1,
           tickLine: !1,
           tickMargin: 6,
-          tick: /* @__PURE__ */ e(D, { anchor: "end", dy: "0.32em", format: d })
+          tick: /* @__PURE__ */ e(H, { anchor: "end", dy: "0.32em", format: S })
         }
       ),
-      C !== !1 && /* @__PURE__ */ e(
-        O,
+      M !== !1 && /* @__PURE__ */ e(
+        T,
         {
           content: /* @__PURE__ */ e(
-            T,
+            I,
             {
-              format: h,
+              format: f,
               labelKey: i,
-              renderer: C
+              renderer: M
             }
           ),
           cursor: { stroke: "var(--border-strong)", strokeDasharray: "4 4" },
           isAnimationActive: !1
         }
       ),
-      s.back,
+      C.back,
       /* @__PURE__ */ e(
-        Re,
+        Oe,
         {
           data: t,
           fill: "var(--color-chart-1)",
-          shape: (g) => /* @__PURE__ */ e("circle", { cx: g.cx, cy: g.cy, r: 4.5, fill: "var(--color-chart-1)", fillOpacity: 0.75 }),
+          shape: (d) => /* @__PURE__ */ e("circle", { cx: d.cx, cy: d.cy, r: 4.5, fill: "var(--color-chart-1)", fillOpacity: 0.75 }),
           isAnimationActive: !1
         }
       ),
-      s.front
+      C.front
     ] }) });
   }
 );
-Je.displayName = "ScatterChart";
-const Ke = R.forwardRef(
+at.displayName = "ScatterChart";
+const it = R.forwardRef(
   ({
     data: t,
     nameKey: n,
-    valueKey: a,
+    valueKey: r,
     donut: i = !0,
     centerLabel: o,
-    highlight: r,
+    highlight: a,
     height: l = 260,
     legend: x = !0,
-    formatValue: c,
-    tooltip: m,
-    className: u
-  }, N) => {
-    const b = c ?? F, f = t.reduce((p, h) => p + (typeof h[a] == "number" ? h[a] : 0), 0), y = (p, h) => U(h), C = (p) => r && p !== r ? 0.3 : 1, w = x ? t.map((p, h) => ({
-      label: `${p[n]} · ${f ? Math.round(Number(p[a]) / f * 100) : 0}%`,
-      color: y(String(p[n]), h)
+    formatValue: u,
+    tooltip: h,
+    className: c
+  }, b) => {
+    const v = u ?? k, m = t.reduce((N, S) => N + (typeof S[r] == "number" ? S[r] : 0), 0), w = (N, S) => q(S), M = (N) => a && N !== a ? 0.3 : 1, [A, g] = R.useState(null), f = x ? t.map((N, S) => ({
+      label: `${N[n]} · ${m ? Math.round(Number(N[r]) / m * 100) : 0}%`,
+      color: w(String(N[n]), S)
     })) : null;
-    return /* @__PURE__ */ A("div", { ref: N, className: $("relative w-full font-sans", u), children: [
-      w && /* @__PURE__ */ e(X, { items: w }),
-      /* @__PURE__ */ A("div", { className: "relative", children: [
-        /* @__PURE__ */ e(_, { width: "100%", height: l, children: /* @__PURE__ */ A(ke, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
-          m !== !1 && /* @__PURE__ */ e(
-            O,
+    return /* @__PURE__ */ y("div", { ref: b, className: O("relative w-full font-sans", c), children: [
+      f && /* @__PURE__ */ e(K, { items: f }),
+      /* @__PURE__ */ y("div", { className: "relative", children: [
+        /* @__PURE__ */ e(V, { width: "100%", height: l, children: /* @__PURE__ */ y(Fe, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+          h !== !1 && /* @__PURE__ */ e(
+            T,
             {
               content: /* @__PURE__ */ e(
-                T,
+                I,
                 {
-                  format: b,
-                  renderer: m
+                  format: v,
+                  renderer: h
                 }
               ),
               isAnimationActive: !1
             }
           ),
           /* @__PURE__ */ e(
-            Me,
+            ke,
             {
               data: t,
-              dataKey: a,
+              dataKey: r,
               nameKey: n,
               innerRadius: i ? "62%" : 0,
               outerRadius: "88%",
@@ -923,57 +962,61 @@ const Ke = R.forwardRef(
               cornerRadius: i ? 4 : 2,
               stroke: "none",
               isAnimationActive: !1,
-              children: t.map((p, h) => /* @__PURE__ */ e(
-                de,
+              onMouseEnter: (N, S) => g(S),
+              onMouseLeave: () => g(null),
+              children: t.map((N, S) => /* @__PURE__ */ e(
+                Q,
                 {
                   role: "presentation",
                   "aria-hidden": "true",
-                  fill: y(String(p[n]), h),
-                  fillOpacity: C(String(p[n]))
+                  className: B,
+                  fill: w(String(N[n]), S),
+                  fillOpacity: M(String(N[n])),
+                  opacity: j(S, A)
                 },
-                String(p[n])
+                String(N[n])
               ))
             }
           )
         ] }) }),
-        i && /* @__PURE__ */ A("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ e("div", { className: "text-xl font-medium text-foreground tabular-nums", children: b(f) }),
+        i && /* @__PURE__ */ y("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ e("div", { className: "text-xl font-medium text-foreground tabular-nums", children: v(m) }),
           o && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-normal tracking-wide uppercase text-tertiary", children: o })
         ] })
       ] })
     ] });
   }
 );
-Ke.displayName = "PieChart";
-const et = R.forwardRef(
+it.displayName = "PieChart";
+const ot = R.forwardRef(
   ({
     data: t,
     categoryKey: n,
-    series: a,
+    series: r,
     seriesLabels: i,
     highlight: o,
-    maxValue: r,
+    maxValue: a,
     height: l = 300,
     legend: x,
-    formatValue: c,
-    tooltip: m,
-    className: u
-  }, N) => {
-    const b = R.useMemo(
-      () => a ?? fe(t, n),
-      [n, t, a]
-    ), f = c ?? F, y = r ?? Math.max(
+    formatValue: u,
+    tooltip: h,
+    className: c
+  }, b) => {
+    const v = R.useMemo(
+      () => r ?? be(t, n),
+      [n, t, r]
+    ), m = u ?? k, w = a ?? Math.max(
       1,
       ...t.flatMap(
-        (h) => b.map(
-          (k) => typeof h[k] == "number" ? h[k] : 0
+        (f) => v.map(
+          (N) => typeof f[N] == "number" ? f[N] : 0
         )
       )
-    ), C = (h) => (i == null ? void 0 : i[h]) ?? h, w = (h, k) => o && b.includes(o) ? h === o ? "var(--color-chart-1)" : ne : U(k), p = x ?? b.length > 1 ? b.map((h, k) => ({ label: C(h), color: w(h, k) })) : null;
-    return /* @__PURE__ */ A("div", { ref: N, className: $("relative w-full font-sans", u), children: [
-      p && /* @__PURE__ */ e(X, { items: p, align: "center" }),
-      /* @__PURE__ */ e("div", { className: "mx-auto w-full max-w-[520px]", children: /* @__PURE__ */ e(_, { width: "100%", height: l, children: /* @__PURE__ */ A(
-        $e,
+    ), M = (f) => (i == null ? void 0 : i[f]) ?? f, A = (f, N) => o && v.includes(o) ? f === o ? "var(--color-chart-1)" : oe : q(N), g = x ?? v.length > 1 ? v.map((f, N) => ({ label: M(f), color: A(f, N) })) : null;
+    return /* @__PURE__ */ y("div", { ref: b, className: O("relative w-full font-sans", c), children: [
+      g && /* @__PURE__ */ e(K, { items: g, align: "center" }),
+      /* @__PURE__ */ e("div", { className: "mx-auto w-full max-w-[520px]", children: /* @__PURE__ */ e(V, { width: "100%", height: l, children: /* @__PURE__ */ y(
+        Te,
         {
           data: t,
           cx: "50%",
@@ -981,50 +1024,50 @@ const et = R.forwardRef(
           outerRadius: "68%",
           margin: { top: 10, right: 56, bottom: 16, left: 56 },
           children: [
-            /* @__PURE__ */ e(Se, { stroke: "var(--border)", radialLines: !0 }),
+            /* @__PURE__ */ e(Ie, { stroke: "var(--border)", radialLines: !0 }),
             /* @__PURE__ */ e(
-              ue,
+              fe,
               {
                 dataKey: n,
                 tick: { fill: "var(--text-secondary)", fontSize: "var(--text-s)", fontWeight: 500 }
               }
             ),
             /* @__PURE__ */ e(
-              Le,
+              De,
               {
                 angle: 90,
-                domain: [0, y],
+                domain: [0, w],
                 tick: !1,
                 axisLine: !1,
                 tickLine: !1
               }
             ),
-            m !== !1 && /* @__PURE__ */ e(
-              O,
+            h !== !1 && /* @__PURE__ */ e(
+              T,
               {
                 content: /* @__PURE__ */ e(
-                  T,
+                  I,
                   {
-                    format: f,
-                    renderer: m
+                    format: m,
+                    renderer: h
                   }
                 ),
                 isAnimationActive: !1
               }
             ),
-            b.map((h, k) => /* @__PURE__ */ e(
-              Fe,
+            v.map((f, N) => /* @__PURE__ */ e(
+              Ee,
               {
-                dataKey: h,
-                name: C(h),
-                stroke: w(h, k),
-                fill: w(h, k),
-                fillOpacity: o ? h === o ? 0.16 : 0.05 : 0.1,
-                strokeWidth: Y,
-                dot: /* @__PURE__ */ e(E, { color: w(h, k) }),
+                dataKey: f,
+                name: M(f),
+                stroke: A(f, N),
+                fill: A(f, N),
+                fillOpacity: o ? f === o ? 0.16 : 0.05 : 0.1,
+                strokeWidth: J,
+                dot: /* @__PURE__ */ e(_, { color: A(f, N) }),
                 isAnimationActive: !1
               },
-              h
+              f
             ))
           ]
         }
@@ -1032,123 +1075,135 @@ const et = R.forwardRef(
     ] });
   }
 );
-et.displayName = "RadarChart";
-const tt = R.forwardRef(
+ot.displayName = "RadarChart";
+const lt = R.forwardRef(
   ({
     data: t,
     nameKey: n,
-    valueKey: a,
+    valueKey: r,
     maxValue: i = 100,
     centerLabel: o,
-    height: r = I,
+    height: a = D,
     legend: l = !0,
     formatValue: x,
-    tooltip: c,
-    className: m
-  }, u) => {
-    const N = x ?? F, b = t.map((C, w) => ({
-      ...C,
-      name: String(C[n]),
-      fill: ee(w)
-    })), f = b.length ? b.reduce(
-      (C, w) => C + (typeof w[a] == "number" ? w[a] : 0),
+    tooltip: u,
+    className: h
+  }, c) => {
+    const b = x ?? k, [v, m] = R.useState(null), w = t.map((g, f) => ({
+      ...g,
+      name: String(g[n]),
+      fill: re(f)
+    })), M = w.length ? w.reduce(
+      (g, f) => g + (typeof f[r] == "number" ? f[r] : 0),
       0
-    ) / b.length : 0, y = l ? b.map((C, w) => ({
-      label: String(C[n]),
-      color: ee(w)
+    ) / w.length : 0, A = l ? w.map((g, f) => ({
+      label: String(g[n]),
+      color: re(f)
     })) : null;
-    return /* @__PURE__ */ A("div", { ref: u, className: $("relative w-full font-sans", m), children: [
-      /* @__PURE__ */ A("div", { className: "relative mx-auto w-full max-w-[420px]", children: [
-        /* @__PURE__ */ e(_, { width: "100%", height: r, children: /* @__PURE__ */ A(
-          Oe,
+    return /* @__PURE__ */ y("div", { ref: c, className: O("relative w-full font-sans", h), children: [
+      /* @__PURE__ */ y("div", { className: "relative mx-auto w-full max-w-[420px]", children: [
+        /* @__PURE__ */ e(V, { width: "100%", height: a, children: /* @__PURE__ */ y(
+          Be,
           {
-            data: b,
+            data: w,
             innerRadius: "48%",
             outerRadius: "82%",
             startAngle: 90,
             endAngle: -270,
             margin: { top: 6, right: 6, bottom: 6, left: 6 },
             children: [
-              /* @__PURE__ */ e(ue, { type: "number", domain: [0, i], tick: !1 }),
-              c !== !1 && /* @__PURE__ */ e(
-                O,
+              /* @__PURE__ */ e(fe, { type: "number", domain: [0, i], tick: !1 }),
+              u !== !1 && /* @__PURE__ */ e(
+                T,
                 {
                   content: /* @__PURE__ */ e(
-                    T,
+                    I,
                     {
-                      format: N,
-                      renderer: c
+                      format: b,
+                      renderer: u
                     }
                   ),
                   isAnimationActive: !1
                 }
               ),
               /* @__PURE__ */ e(
-                Te,
+                He,
                 {
-                  dataKey: a,
+                  dataKey: r,
                   background: { fill: "var(--muted)" },
                   cornerRadius: 999,
                   maxBarSize: 18,
-                  isAnimationActive: !1
+                  isAnimationActive: !1,
+                  onMouseEnter: (g, f) => m(f),
+                  onMouseLeave: () => m(null),
+                  children: w.map((g, f) => /* @__PURE__ */ e(
+                    Q,
+                    {
+                      fill: g.fill,
+                      className: B,
+                      opacity: j(f, v)
+                    },
+                    `${g.name}-${f}`
+                  ))
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ A("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ e("div", { className: "text-xl font-medium text-foreground tabular-nums", children: N(Math.round(f)) }),
+        /* @__PURE__ */ y("div", { className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ e("div", { className: "text-xl font-medium text-foreground tabular-nums", children: b(Math.round(M)) }),
           o && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-normal tracking-wide uppercase text-tertiary", children: o })
         ] })
       ] }),
-      y && /* @__PURE__ */ e(X, { items: y, align: "center", className: "mb-0 mt-3" })
+      A && /* @__PURE__ */ e(K, { items: A, align: "center", className: "mb-0 mt-3" })
     ] });
   }
 );
-tt.displayName = "RadialBarChart";
-function rt({
+lt.displayName = "RadialBarChart";
+function st({
   x: t = 0,
   y: n = 0,
-  width: a = 0,
+  width: r = 0,
   height: i = 0,
   depth: o = 0,
-  index: r = 0,
+  index: a = 0,
   name: l,
   value: x,
-  format: c = F
+  format: u = k,
+  activeIndex: h = null
 }) {
   if (o === 0) return /* @__PURE__ */ e("g", {});
-  const m = o === 0 ? "transparent" : ee(r), u = o > 0 && r < 4, N = a > 72 && i > 38;
-  return /* @__PURE__ */ A("g", { children: [
+  const c = o === 0 ? "transparent" : re(a), b = o > 0 && a < 4, v = r > 72 && i > 38;
+  return /* @__PURE__ */ y("g", { className: B, opacity: j(a, h), children: [
     /* @__PURE__ */ e(
       "rect",
       {
         x: t,
         y: n,
-        width: a,
+        width: r,
         height: i,
         rx: 6,
         ry: 6,
-        fill: m,
+        fill: c,
         stroke: "var(--background)",
         strokeWidth: 4
       }
     ),
-    N && /* @__PURE__ */ e(
+    v && /* @__PURE__ */ e(
       "foreignObject",
       {
         x: t + 8,
         y: n + 8,
-        width: Math.max(0, a - 16),
+        width: Math.max(0, r - 16),
         height: Math.max(0, i - 16),
         className: "pointer-events-none overflow-hidden",
-        children: /* @__PURE__ */ A("div", { className: "flex h-full flex-col justify-between", children: [
+        children: /* @__PURE__ */ y("div", { className: "flex h-full flex-col justify-between", children: [
           /* @__PURE__ */ e(
             "p",
             {
-              className: $(
+              className: O(
                 "truncate text-xs font-medium",
-                u ? "text-background" : "text-foreground"
+                b ? "text-background" : "text-foreground"
               ),
               children: l
             }
@@ -1156,11 +1211,11 @@ function rt({
           typeof x == "number" && i > 58 && /* @__PURE__ */ e(
             "p",
             {
-              className: $(
+              className: O(
                 "text-xs tabular-nums",
-                u ? "text-background/70" : "text-tertiary"
+                b ? "text-background/70" : "text-tertiary"
               ),
-              children: c(x)
+              children: u(x)
             }
           )
         ] })
@@ -1168,53 +1223,55 @@ function rt({
     )
   ] });
 }
-function nt(t, n, a) {
-  const i = [], o = (r) => {
-    const l = Array.isArray(r.children) ? r.children : void 0;
+function ct(t, n, r) {
+  const i = [], o = (a) => {
+    const l = Array.isArray(a.children) ? a.children : void 0;
     if (l != null && l.length) {
       l.forEach(o);
       return;
     }
-    typeof r[a] == "number" && i.push({
-      ...r,
-      name: String(r[n] ?? ""),
-      value: r[a]
+    typeof a[r] == "number" && i.push({
+      ...a,
+      name: String(a[n] ?? ""),
+      value: a[r]
     });
   };
   return t.forEach(o), i.length ? i : t;
 }
-const at = R.forwardRef(
+const dt = R.forwardRef(
   ({
     data: t,
     nameKey: n,
-    valueKey: a,
-    height: i = I,
+    valueKey: r,
+    height: i = D,
     formatValue: o,
-    tooltip: r,
+    tooltip: a,
     className: l
   }, x) => {
-    const c = o ?? F, m = R.useMemo(
-      () => nt(t, n, a),
-      [t, n, a]
-    );
-    return /* @__PURE__ */ e("div", { ref: x, className: $("relative w-full font-sans", l), children: /* @__PURE__ */ e(_, { width: "100%", height: i, children: /* @__PURE__ */ e(
-      Ie,
+    const u = o ?? k, h = R.useMemo(
+      () => ct(t, n, r),
+      [t, n, r]
+    ), [c, b] = R.useState(null);
+    return /* @__PURE__ */ e("div", { ref: x, className: O("relative w-full font-sans", l), children: /* @__PURE__ */ e(V, { width: "100%", height: i, children: /* @__PURE__ */ e(
+      _e,
       {
-        data: m,
+        data: h,
         nameKey: n,
-        dataKey: a,
+        dataKey: r,
         type: "flat",
         aspectRatio: 1.6,
-        content: /* @__PURE__ */ e(rt, { format: c }),
+        content: /* @__PURE__ */ e(st, { format: u, activeIndex: c }),
         isAnimationActive: !1,
-        children: r !== !1 && /* @__PURE__ */ e(
-          O,
+        onMouseEnter: (v) => b(v.depth ? v.index ?? null : null),
+        onMouseLeave: () => b(null),
+        children: a !== !1 && /* @__PURE__ */ e(
+          T,
           {
             content: /* @__PURE__ */ e(
-              T,
+              I,
               {
-                format: c,
-                renderer: r
+                format: u,
+                renderer: a
               }
             ),
             isAnimationActive: !1
@@ -1224,98 +1281,100 @@ const at = R.forwardRef(
     ) }) });
   }
 );
-at.displayName = "TreemapChart";
-const J = "var(--color-chart-1)", it = "var(--chart-track)", G = 24, ot = 44, ie = 0.55, oe = 4, le = (t, n, a, i, o) => {
-  const r = Math.min(o, a / 2, i);
-  return `M ${t},${n + i} L ${t},${n + r} Q ${t},${n} ${t + r},${n} L ${t + a - r},${n} Q ${t + a},${n} ${t + a},${n + r} L ${t + a},${n + i} Z`;
+dt.displayName = "TreemapChart";
+const te = "var(--color-chart-1)", ut = "var(--chart-track)", X = 24, mt = 44, se = 0.55, ce = 4, de = (t, n, r, i, o) => {
+  const a = Math.min(o, r / 2, i);
+  return `M ${t},${n + i} L ${t},${n + a} Q ${t},${n} ${t + a},${n} L ${t + r - a},${n} Q ${t + r},${n} ${t + r},${n + a} L ${t + r},${n + i} Z`;
 };
-function lt() {
-  const t = R.useRef(null), [n, a] = R.useState(0);
+function ft() {
+  const t = R.useRef(null), [n, r] = R.useState(0);
   return R.useLayoutEffect(() => {
     const i = t.current;
     if (!i) return;
-    a(i.getBoundingClientRect().width);
-    const o = new ResizeObserver((r) => {
+    r(i.getBoundingClientRect().width);
+    const o = new ResizeObserver((a) => {
       var x;
-      const l = ((x = r[0]) == null ? void 0 : x.contentRect.width) ?? 0;
-      a((c) => Math.abs(c - l) > 0.5 ? l : c);
+      const l = ((x = a[0]) == null ? void 0 : x.contentRect.width) ?? 0;
+      r((u) => Math.abs(u - l) > 0.5 ? l : u);
     });
     return o.observe(i), () => o.disconnect();
   }, []), { ref: t, width: n };
 }
-const st = R.forwardRef(
+const ht = R.forwardRef(
   ({
     data: t,
     nameKey: n,
-    valueKey: a,
-    height: i = I,
+    valueKey: r,
+    height: i = D,
     formatValue: o,
-    label: r,
+    label: a,
     tooltip: l,
     className: x
-  }, c) => {
-    var g;
-    const m = o ?? F, { ref: u, width: N } = lt(), [b, f] = R.useState(null), y = Number(((g = t[0]) == null ? void 0 : g[a]) ?? 0), C = t.length, w = Math.max(0, i - G - ot), p = G + w, h = C > 0 ? N / (C + (C - 1) * ie) : 0, k = h * ie, d = t.map((v, S) => {
-      var B;
-      const L = Number(v[a]), H = Number(((B = t[S - 1]) == null ? void 0 : B[a]) ?? L), Q = y ? L / y * 100 : 0, q = H ? L / H * 100 : 0, M = y && L > 0 ? Math.max(2, L / y * w) : 0;
+  }, u) => {
+    var d;
+    const h = o ?? k, { ref: c, width: b } = ft(), [v, m] = R.useState(null), w = Number(((d = t[0]) == null ? void 0 : d[r]) ?? 0), M = t.length, A = Math.max(0, i - X - mt), g = X + A, f = M > 0 ? b / (M + (M - 1) * se) : 0, N = f * se, S = t.map((s, p) => {
+      var E;
+      const L = Number(s[r]), F = Number(((E = t[p - 1]) == null ? void 0 : E[r]) ?? L), G = w ? L / w * 100 : 0, z = F ? L / F * 100 : 0, $ = w && L > 0 ? Math.max(2, L / w * A) : 0;
       return {
-        datum: v,
-        index: S,
-        name: String(v[n]),
+        datum: s,
+        index: p,
+        name: String(s[n]),
         value: L,
-        conversionFromFirst: Q,
-        conversionFromPrevious: q,
-        dropOffFromPrevious: S === 0 ? 0 : 100 - q,
-        x: S * (h + k),
-        y: p - M,
-        width: h,
-        height: M,
-        formatValue: m
+        conversionFromFirst: G,
+        conversionFromPrevious: z,
+        dropOffFromPrevious: p === 0 ? 0 : 100 - z,
+        x: p * (f + N),
+        y: g - $,
+        width: f,
+        height: $,
+        formatValue: h
       };
-    }), s = b != null ? d[b] : void 0;
-    return /* @__PURE__ */ e("div", { ref: c, className: $("relative w-full font-sans", x), children: /* @__PURE__ */ A("div", { ref: u, className: "relative w-full", style: { height: i }, children: [
-      N > 0 && C > 0 && /* @__PURE__ */ A("svg", { width: N, height: i, className: "block", children: [
-        d.slice(1).map((v) => {
-          const S = d[v.index - 1];
+    }), C = v != null ? S[v] : void 0;
+    return /* @__PURE__ */ e("div", { ref: u, className: O("relative w-full font-sans", x), children: /* @__PURE__ */ y("div", { ref: c, className: "relative w-full", style: { height: i }, children: [
+      b > 0 && M > 0 && /* @__PURE__ */ y("svg", { width: b, height: i, className: "block", children: [
+        S.slice(1).map((s) => {
+          const p = S[s.index - 1];
           return /* @__PURE__ */ e(
             "path",
             {
-              d: `M ${S.x + S.width},${S.y} L ${v.x},${v.y} L ${v.x},${p} L ${S.x + S.width},${p} Z`,
-              fill: J,
+              d: `M ${p.x + p.width},${p.y} L ${s.x},${s.y} L ${s.x},${g} L ${p.x + p.width},${g} Z`,
+              fill: te,
               opacity: 0.14
             },
-            `connector-${v.index}`
+            `connector-${s.index}`
           );
         }),
-        d.map((v) => /* @__PURE__ */ A(
+        S.map((s) => /* @__PURE__ */ y(
           "g",
           {
             role: "img",
-            "aria-label": `${v.name}: ${m(v.value)} (${Math.round(v.conversionFromFirst)}% of ${d[0].name})`,
+            "aria-label": `${s.name}: ${h(s.value)} (${Math.round(s.conversionFromFirst)}% of ${S[0].name})`,
             children: [
               /* @__PURE__ */ e(
                 "path",
                 {
-                  d: le(v.x, G, v.width, w, oe),
-                  fill: it
+                  d: de(s.x, X, s.width, A, ce),
+                  fill: ut
                 }
               ),
-              v.height > 0 && /* @__PURE__ */ e(
+              s.height > 0 && /* @__PURE__ */ e(
                 "path",
                 {
-                  d: le(v.x, v.y, v.width, v.height, oe),
-                  fill: J
+                  d: de(s.x, s.y, s.width, s.height, ce),
+                  fill: te,
+                  className: B,
+                  opacity: j(s.index, v)
                 }
               ),
-              r !== !1 && (r ? r(v) : /* @__PURE__ */ A(
+              a !== !1 && (a ? a(s) : /* @__PURE__ */ y(
                 "text",
                 {
-                  x: v.x,
-                  y: v.y - 8,
+                  x: s.x,
+                  y: s.y - 8,
                   textAnchor: "start",
                   className: "fill-secondary text-xs font-normal tabular-nums",
                   children: [
-                    Math.round(v.conversionFromFirst),
+                    Math.round(s.conversionFromFirst),
                     "%"
                   ]
                 }
@@ -1323,68 +1382,68 @@ const st = R.forwardRef(
               /* @__PURE__ */ e(
                 "text",
                 {
-                  x: v.x,
-                  y: p + 18,
+                  x: s.x,
+                  y: g + 18,
                   textAnchor: "start",
                   className: "fill-primary text-xs font-normal",
-                  children: v.name
+                  children: s.name
                 }
               ),
               /* @__PURE__ */ e(
                 "text",
                 {
-                  x: v.x,
-                  y: p + 34,
+                  x: s.x,
+                  y: g + 34,
                   textAnchor: "start",
                   className: "fill-tertiary text-xs tabular-nums",
-                  children: m(v.value)
+                  children: h(s.value)
                 }
               ),
               /* @__PURE__ */ e(
                 "rect",
                 {
-                  x: v.x,
-                  y: G,
-                  width: v.index === C - 1 ? h : h + k,
-                  height: w,
+                  x: s.x,
+                  y: X,
+                  width: s.index === M - 1 ? f : f + N,
+                  height: A,
                   fill: "transparent",
-                  onMouseEnter: () => f(v.index),
-                  onMouseLeave: () => f(null)
+                  onMouseEnter: () => m(s.index),
+                  onMouseLeave: () => m(null)
                 }
               )
             ]
           },
-          `${v.name}-${v.index}`
+          `${s.name}-${s.index}`
         ))
       ] }),
-      l !== !1 && s && /* @__PURE__ */ e(
+      l !== !1 && C && /* @__PURE__ */ e(
         "div",
         {
           className: "pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full",
-          style: { left: s.x + s.width / 2, top: s.y - 10 },
+          style: { left: C.x + C.width / 2, top: C.y - 10 },
           children: l ? l({
             active: !0,
-            label: s.name,
+            label: C.name,
             items: [
               {
-                key: s.name,
-                name: s.name,
-                value: s.value,
-                color: J,
-                datum: s.datum
+                key: C.name,
+                name: C.name,
+                value: C.value,
+                color: te,
+                datum: C.datum
               }
             ],
-            formatValue: m
-          }) : /* @__PURE__ */ A("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs whitespace-nowrap text-background", children: [
-            /* @__PURE__ */ e("div", { className: "text-xs font-normal tracking-wide uppercase text-background/60", children: s.name }),
-            /* @__PURE__ */ e("div", { className: "font-normal tabular-nums", children: m(s.value) }),
-            /* @__PURE__ */ A("div", { className: "text-background/70 tabular-nums", children: [
-              Math.round(s.conversionFromFirst),
+            formatValue: h
+          }) : /* @__PURE__ */ y("div", { className: "rounded-md bg-foreground px-2.5 py-1.5 text-xs whitespace-nowrap text-background", children: [
+            /* @__PURE__ */ e("div", { className: "text-xs font-normal tracking-wide uppercase text-background/60", children: C.name }),
+            /* @__PURE__ */ e("div", { className: "font-normal tabular-nums", children: h(C.value) }),
+            /* @__PURE__ */ y("div", { className: "text-background/70 tabular-nums", children: [
+              Math.round(C.conversionFromFirst),
               "% of ",
-              d[0].name,
-              s.index > 0 && /* @__PURE__ */ A(K, { children: [
+              S[0].name,
+              C.index > 0 && /* @__PURE__ */ y(ne, { children: [
                 " · −",
-                Math.round(s.dropOffFromPrevious),
+                Math.round(C.dropOffFromPrevious),
                 "% step"
               ] })
             ] })
@@ -1394,18 +1453,18 @@ const st = R.forwardRef(
     ] }) });
   }
 );
-st.displayName = "FunnelChart";
+ht.displayName = "FunnelChart";
 export {
-  Ze as AreaChart,
-  Qe as BarChart,
-  be as ComboChart,
-  qe as ComposedChart,
-  st as FunnelChart,
-  Xe as LineChart,
-  I as MIN_HEIGHT,
-  Ke as PieChart,
-  et as RadarChart,
-  tt as RadialBarChart,
-  Je as ScatterChart,
-  at as TreemapChart
+  tt as AreaChart,
+  nt as BarChart,
+  Ce as ComboChart,
+  rt as ComposedChart,
+  ht as FunnelChart,
+  et as LineChart,
+  D as MIN_HEIGHT,
+  it as PieChart,
+  ot as RadarChart,
+  lt as RadialBarChart,
+  at as ScatterChart,
+  dt as TreemapChart
 };