@actioneer/ads 0.5.0 → 0.5.2

package/components/chart.js

@@ -1,132 +1,132 @@
 "use client";
-import { jsxs as y, jsx as e, Fragment as E } from "react/jsx-runtime";
-import * as N from "react";
-import { ResponsiveContainer as B, LineChart as te, Tooltip as F, Line as U, AreaChart as re, Area as ae, CartesianGrid as Y, XAxis as H, YAxis as I, BarChart as ne, Bar as Z, Cell as X, ComposedChart as ie, ScatterChart as oe, Scatter as le, PieChart as se, Pie as ce, RadarChart as de, PolarGrid as me, PolarAngleAxis as q, PolarRadiusAxis as fe, Radar as ue, RadialBarChart as he, RadialBar as xe, Treemap as ge, FunnelChart as ve, Funnel as be, LabelList as pe, ReferenceArea as ye, ReferenceLine as Ne, ReferenceDot as ke } from "recharts";
-import { MotionConfig as we, AnimatePresence as Ae, motion as Ce } from "motion/react";
-import { cn as C } from "../lib/cn.js";
-import { floatVariants as Re } from "../lib/motion.js";
-const W = (r) => `var(--color-chart-${r % 6 + 1})`, j = (r) => W(r), _ = "var(--color-ink-300)", S = {
+import { jsxs as y, jsx as e, Fragment as H } from "react/jsx-runtime";
+import * as k from "react";
+import { ResponsiveContainer as I, LineChart as me, Tooltip as O, Line as re, AreaChart as fe, Area as ue, CartesianGrid as X, XAxis as Z, YAxis as z, BarChart as he, Bar as ne, Cell as ie, ComposedChart as xe, ScatterChart as ve, Scatter as ge, PieChart as be, Pie as pe, RadarChart as ye, PolarGrid as Ne, PolarAngleAxis as oe, PolarRadiusAxis as ke, Radar as we, RadialBarChart as Ae, RadialBar as Ce, Treemap as Re, ReferenceArea as $e, ReferenceLine as Fe, ReferenceDot as Me } from "recharts";
+import { MotionConfig as Le, AnimatePresence as Oe, motion as Se } from "motion/react";
+import { cn as $ } from "../lib/cn.js";
+import { floatVariants as Te } from "../lib/motion.js";
+const E = (t) => `var(--color-chart-${t % 6 + 1})`, V = (t) => E(t), Q = "var(--color-ink-300)", T = {
   primary: { ref: "var(--brand)", pill: "bg-fill text-fill-foreground" },
   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" }
-}, L = (r) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(r), J = (r, n) => {
-  const a = [];
-  for (const i of r)
-    for (const t of Object.keys(i))
-      t !== n && typeof i[t] == "number" && !a.includes(t) && a.push(t);
-  return a;
+}, L = (t) => new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(t), le = (t, n) => {
+  const r = [];
+  for (const i of t)
+    for (const a of Object.keys(i))
+      a !== n && typeof i[a] == "number" && !r.includes(a) && r.push(a);
+  return r;
 };
-function T({ x: r, y: n, payload: a, anchor: i, dy: t, format: l }) {
-  const c = (a == null ? void 0 : a.value) ?? "", m = l ? l(c) : c;
-  return /* @__PURE__ */ e("text", { x: r, y: n, dy: t, textAnchor: i, className: "fill-tertiary text-xs tabular-nums", children: m });
+function B({ x: t, y: n, payload: r, anchor: i, dy: a, format: l }) {
+  const s = (r == null ? void 0 : r.value) ?? "", d = l ? l(s) : s;
+  return /* @__PURE__ */ e("text", { x: t, y: n, dy: a, textAnchor: i, className: "fill-tertiary text-xs tabular-nums", children: d });
 }
-function M({
-  active: r,
+function S({
+  active: t,
   payload: n,
-  label: a,
+  label: r,
   format: i,
-  labelKey: t,
+  labelKey: a,
   renderer: l
 }) {
-  var v, u;
-  const c = (n ?? []).map((d, p) => {
-    const x = d.payload && typeof d.payload == "object" ? d.payload : void 0;
+  var g, u;
+  const s = (n ?? []).map((m, N) => {
+    const v = m.payload && typeof m.payload == "object" ? m.payload : void 0;
     return {
-      key: d.dataKey ?? p,
-      name: d.name ?? d.dataKey ?? p,
-      value: d.value,
-      color: d.color,
-      datum: x
+      key: m.dataKey ?? N,
+      name: m.name ?? m.dataKey ?? N,
+      value: m.value,
+      color: m.color,
+      datum: v
     };
-  }), m = t ? (u = (v = c[0]) == null ? void 0 : v.datum) == null ? void 0 : u[t] : void 0, f = {
-    active: !!r,
-    label: typeof m == "string" || typeof m == "number" ? m : a,
-    items: c,
+  }), d = a ? (u = (g = s[0]) == null ? void 0 : g.datum) == null ? void 0 : u[a] : void 0, f = {
+    active: !!t,
+    label: typeof d == "string" || typeof d == "number" ? d : r,
+    items: s,
     formatValue: i
   };
-  if (l) return /* @__PURE__ */ e(E, { children: l(f) });
-  if (!f.active || !c.length) return null;
-  const o = c.length === 1, b = f.label ?? (o ? c[0].name : void 0);
+  if (l) return /* @__PURE__ */ e(H, { children: l(f) });
+  if (!f.active || !s.length) return null;
+  const o = s.length === 1, p = f.label ?? (o ? s[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: C("text-xs font-medium tracking-wide uppercase text-background/60", !o && "mb-1"), children: b }),
-    c.map((d) => /* @__PURE__ */ y("div", { className: "flex items-center gap-1.5", children: [
-      !o && /* @__PURE__ */ y(E, { children: [
-        /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-1.5 rounded-dot", style: { background: d.color } }),
-        /* @__PURE__ */ e("span", { className: "text-background/70", children: d.name })
+    /* @__PURE__ */ e("div", { className: $("text-xs font-medium tracking-wide uppercase text-background/60", !o && "mb-1"), children: p }),
+    s.map((m) => /* @__PURE__ */ y("div", { className: "flex items-center gap-1.5", children: [
+      !o && /* @__PURE__ */ y(H, { 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-medium tabular-nums", children: typeof d.value == "number" ? i(d.value) : String(d.value ?? "") })
-    ] }, d.key))
+      /* @__PURE__ */ e("span", { className: "ml-auto pl-3 font-medium tabular-nums", children: typeof m.value == "number" ? i(m.value) : String(m.value ?? "") })
+    ] }, m.key))
   ] });
 }
-const V = "pointer-events-none inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap";
-function Fe({ viewBox: r, label: n, color: a, axis: i }) {
-  const t = r ?? {};
-  return i === "y" ? /* @__PURE__ */ e("foreignObject", { x: t.x ?? 0, y: (t.y ?? 0) - 10, width: t.width ?? 0, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-end pr-1", children: /* @__PURE__ */ e("span", { className: C(V, S[a].pill), children: n }) }) }) : /* @__PURE__ */ e("foreignObject", { x: (t.x ?? 0) - 90, y: (t.y ?? 0) - 10, width: 180, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ e("span", { className: C(V, S[a].pill), children: n }) }) });
+const Y = "pointer-events-none inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap";
+function Be({ viewBox: t, label: n, color: r, axis: i }) {
+  const a = t ?? {};
+  return i === "y" ? /* @__PURE__ */ e("foreignObject", { x: a.x ?? 0, y: (a.y ?? 0) - 10, width: a.width ?? 0, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-end pr-1", children: /* @__PURE__ */ e("span", { className: $(Y, T[r].pill), children: n }) }) }) : /* @__PURE__ */ e("foreignObject", { x: (a.x ?? 0) - 90, y: (a.y ?? 0) - 10, width: 180, height: 20, className: "overflow-visible", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ e("span", { className: $(Y, T[r].pill), children: n }) }) });
 }
-function Me({ viewBox: r, label: n, color: a }) {
-  const i = r ?? {};
-  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: C(V, S[a].pill), children: n }) }) });
+function De({ 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: $(Y, T[r].pill), children: n }) }) });
 }
-function Le({
-  cx: r,
+function We({
+  cx: t,
   cy: n,
-  n: a,
+  n: r,
   ann: i,
-  onEnter: t,
+  onEnter: a,
   onLeave: l
 }) {
-  const [c, m] = N.useState(!1);
-  if (r == null || n == null || !Number.isFinite(r) || !Number.isFinite(n)) return /* @__PURE__ */ e("g", {});
-  const f = () => t({ ann: i, n: a, cx: r, cy: n }), o = () => l();
+  const [s, d] = k.useState(!1);
+  if (t == null || n == null || !Number.isFinite(t) || !Number.isFinite(n)) return /* @__PURE__ */ e("g", {});
+  const f = () => a({ ann: i, n: r, cx: t, cy: n }), o = () => l();
   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:var(--duration-fast)] hover:scale-110 focus-visible:scale-110",
       onMouseEnter: f,
       onMouseLeave: o,
       onFocus: () => {
-        m(!0), f();
+        d(!0), f();
       },
       onBlur: () => {
-        m(!1), o();
+        d(!1), o();
       },
       children: [
-        c && /* @__PURE__ */ e("circle", { cx: r, cy: n, r: 12, fill: "none", stroke: "var(--ring)", strokeWidth: 2 }),
-        /* @__PURE__ */ e("circle", { cx: r, cy: n, r: 10, fill: "var(--background)" }),
-        /* @__PURE__ */ e("circle", { cx: r, cy: n, r: 8, fill: S[i.color ?? "primary"].ref }),
+        s && /* @__PURE__ */ e("circle", { cx: t, cy: n, r: 12, fill: "none", stroke: "var(--ring)", strokeWidth: 2 }),
+        /* @__PURE__ */ e("circle", { cx: t, cy: n, r: 10, fill: "var(--background)" }),
+        /* @__PURE__ */ e("circle", { cx: t, cy: n, r: 8, fill: T[i.color ?? "primary"].ref }),
         /* @__PURE__ */ e(
           "text",
           {
-            x: r,
+            x: t,
             y: n,
             dy: "0.35em",
             textAnchor: "middle",
             className: "pointer-events-none fill-brand-foreground text-xs font-bold select-none",
-            children: a
+            children: r
           }
         )
       ]
     }
   );
 }
-function Oe({ hovered: r, frameWidth: n, format: a }) {
-  return /* @__PURE__ */ e(we, { reducedMotion: "user", children: /* @__PURE__ */ e(Ae, { children: r && /* @__PURE__ */ e(
+function Ie({ hovered: t, frameWidth: n, format: r }) {
+  return /* @__PURE__ */ e(Le, { reducedMotion: "user", children: /* @__PURE__ */ e(Oe, { children: t && /* @__PURE__ */ e(
     "div",
     {
       className: "pointer-events-none absolute z-10",
       style: {
-        left: Math.max(96, Math.min(r.cx, Math.max(n - 96, 96))),
-        top: r.cy - 16
+        left: Math.max(96, Math.min(t.cx, Math.max(n - 96, 96))),
+        top: t.cy - 16
       },
       children: /* @__PURE__ */ y(
-        Ce.div,
+        Se.div,
         {
-          variants: Re,
+          variants: Te,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
@@ -138,17 +138,17 @@ function Oe({ hovered: r, frameWidth: n, format: a }) {
                 {
                   "aria-hidden": !0,
                   className: "flex size-4.5 shrink-0 items-center justify-center rounded-full text-xs font-bold text-brand-foreground",
-                  style: { background: S[r.ann.color ?? "primary"].ref },
-                  children: r.n
+                  style: { background: T[t.ann.color ?? "primary"].ref },
+                  children: t.n
                 }
               ),
-              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-foreground", children: r.ann.label })
+              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-foreground", children: t.ann.label })
             ] }),
-            r.ann.description && /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs leading-relaxed text-secondary", children: r.ann.description }),
+            t.ann.description && /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs leading-relaxed text-secondary", children: t.ann.description }),
             /* @__PURE__ */ y("div", { className: "mt-1.5 text-xs font-medium tracking-wide uppercase text-tertiary tabular-nums", children: [
-              r.ann.x,
+              t.ann.x,
               " · ",
-              a(r.ann.y)
+              r(t.ann.y)
             ] })
           ]
         }
@@ -156,158 +156,158 @@ function Oe({ hovered: r, frameWidth: n, format: a }) {
     }
   ) }) });
 }
-function Q(r) {
-  const [n, a] = N.useState(null), i = N.useCallback(() => a(null), []), { back: t, front: l } = N.useMemo(() => {
-    const c = [], m = [];
+function se(t) {
+  const [n, r] = k.useState(null), i = k.useCallback(() => r(null), []), { back: a, front: l } = k.useMemo(() => {
+    const s = [], d = [];
     let f = 0;
-    return (r ?? []).forEach((o, b) => {
-      const v = o.color ?? "primary";
+    return (t ?? []).forEach((o, p) => {
+      const g = o.color ?? "primary";
       if (o.kind === "band") {
         const u = o.axis ?? "y";
-        c.push(
+        s.push(
           /* @__PURE__ */ e(
-            ye,
+            $e,
             {
               ...u === "y" ? { y1: o.from, y2: o.to } : { x1: o.from, x2: o.to },
-              fill: S[v].ref,
+              fill: T[g].ref,
               fillOpacity: 0.06,
               stroke: "none",
               ifOverflow: u === "y" ? "extendDomain" : "visible",
-              label: o.label ? /* @__PURE__ */ e(Me, { label: o.label, color: v }) : void 0
+              label: o.label ? /* @__PURE__ */ e(De, { label: o.label, color: g }) : void 0
             },
-            `ann-${b}`
+            `ann-${p}`
           )
         );
       } else if (o.kind === "line") {
         const u = o.axis ?? "y";
-        m.push(
+        d.push(
           /* @__PURE__ */ e(
-            Ne,
+            Fe,
             {
               ...u === "y" ? { y: o.value } : { x: o.value },
-              stroke: S[v].ref,
+              stroke: T[g].ref,
               strokeWidth: 1,
               strokeDasharray: "4 4",
               ifOverflow: u === "y" ? "extendDomain" : "visible",
-              label: o.label ? /* @__PURE__ */ e(Fe, { label: o.label, color: v, axis: u }) : void 0
+              label: o.label ? /* @__PURE__ */ e(Be, { label: o.label, color: g, axis: u }) : void 0
             },
-            `ann-${b}`
+            `ann-${p}`
           )
         );
       } else {
         f += 1;
         const u = f;
-        m.push(
+        d.push(
           /* @__PURE__ */ e(
-            ke,
+            Me,
             {
               x: o.x,
               y: o.y,
               ifOverflow: "visible",
-              shape: (d) => /* @__PURE__ */ e(Le, { cx: d.cx, cy: d.cy, n: u, ann: o, onEnter: a, onLeave: i })
+              shape: (m) => /* @__PURE__ */ e(We, { cx: m.cx, cy: m.cy, n: u, ann: o, onEnter: r, onLeave: i })
             },
-            `ann-${b}`
+            `ann-${p}`
           )
         );
       }
-    }), { back: c, front: m };
-  }, [r, i]);
-  return { back: t, front: l, hovered: n };
+    }), { back: s, front: d };
+  }, [t, i]);
+  return { back: a, front: l, hovered: n };
 }
-function z({
-  items: r,
+function _({
+  items: t,
   align: n = "end",
-  className: a
+  className: r
 }) {
   const i = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end"
   }[n];
-  return /* @__PURE__ */ e("div", { className: C("mb-3 flex flex-wrap items-center gap-x-4 gap-y-1", i, a), children: r.map((t) => /* @__PURE__ */ y("span", { className: "inline-flex items-center gap-1.5 text-xs text-secondary", children: [
-    /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-2 rounded-dot", style: { background: t.color } }),
-    t.label
-  ] }, t.label)) });
+  return /* @__PURE__ */ e("div", { className: $("mb-3 flex flex-wrap items-center gap-x-4 gap-y-1", i, r), children: t.map((a) => /* @__PURE__ */ y("span", { className: "inline-flex items-center gap-1.5 text-xs text-secondary", children: [
+    /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "size-2 rounded-dot", style: { background: a.color } }),
+    a.label
+  ] }, a.label)) });
 }
-const $ = N.forwardRef(
-  ({ className: r, height: n, legendItems: a, hovered: i, format: t, children: l, ...c }, m) => {
-    var b;
-    const f = N.useRef(null);
-    return /* @__PURE__ */ y("div", { ref: (v) => {
-      f.current = v, typeof m == "function" ? m(v) : m && (m.current = v);
-    }, className: C("relative w-full font-sans", r), ...c, children: [
-      a && /* @__PURE__ */ e(z, { items: a }),
-      /* @__PURE__ */ e(B, { width: "100%", height: n, children: l }),
-      /* @__PURE__ */ e(Oe, { hovered: i, frameWidth: ((b = f.current) == null ? void 0 : b.clientWidth) ?? 0, format: t })
+const W = k.forwardRef(
+  ({ className: t, height: n, legendItems: r, hovered: i, format: a, children: l, ...s }, d) => {
+    var p;
+    const f = k.useRef(null);
+    return /* @__PURE__ */ y("div", { ref: (g) => {
+      f.current = g, typeof d == "function" ? d(g) : d && (d.current = g);
+    }, className: $("relative w-full font-sans", t), ...s, children: [
+      r && /* @__PURE__ */ e(_, { items: r }),
+      /* @__PURE__ */ e(I, { width: "100%", height: n, children: l }),
+      /* @__PURE__ */ e(Ie, { hovered: i, frameWidth: ((p = f.current) == null ? void 0 : p.clientWidth) ?? 0, format: a })
     ] });
   }
 );
-$.displayName = "ChartFrame";
-function P(r) {
+W.displayName = "ChartFrame";
+function G(t) {
   const {
     data: n,
-    categoryKey: a,
+    categoryKey: r,
     series: i,
-    seriesLabels: t,
+    seriesLabels: a,
     highlight: l,
-    annotations: c,
-    grid: m = !0,
+    annotations: s,
+    grid: d = !0,
     legend: f,
     showYAxis: o = !0,
-    formatValue: b,
-    xScale: v = "category",
+    formatValue: p,
+    xScale: g = "category",
     xDomain: u,
-    yDomain: d,
-    xTickFormatter: p,
-    yTickFormatter: x,
-    yAxisWidth: s = 44
-  } = r, g = N.useMemo(() => i ?? J(n, a), [i, n, a]), h = b ?? L, k = x ?? ((R) => typeof R == "number" ? h(R) : R), O = Q(c), w = (R, G) => l && g.includes(l) ? R === l ? "var(--color-chart-1)" : _ : W(G), A = (R) => (t == null ? void 0 : t[R]) ?? R, ee = f ?? g.length > 1 ? g.map((R, G) => ({ label: A(R), color: w(R, G) })) : null;
-  return { names: g, format: h, layers: O, legendItems: ee, furniture: [
-    m ? /* @__PURE__ */ e(Y, { vertical: !1, stroke: "var(--border)" }, "grid") : null,
+    yDomain: m,
+    xTickFormatter: N,
+    yTickFormatter: v,
+    yAxisWidth: c = 44
+  } = t, x = k.useMemo(() => i ?? le(n, r), [i, n, r]), h = p ?? L, A = v ?? ((C) => typeof C == "number" ? h(C) : C), F = se(s), w = (C, D) => l && x.includes(l) ? C === l ? "var(--color-chart-1)" : Q : E(D), R = (C) => (a == null ? void 0 : a[C]) ?? C, b = f ?? x.length > 1 ? x.map((C, D) => ({ label: R(C), color: w(C, D) })) : null;
+  return { names: x, format: h, layers: F, legendItems: b, furniture: [
+    d ? /* @__PURE__ */ e(X, { vertical: !1, stroke: "var(--border)" }, "grid") : null,
     /* @__PURE__ */ e(
-      H,
+      Z,
       {
-        dataKey: a,
-        type: v === "time" ? "number" : "category",
-        scale: v === "time" ? "time" : "auto",
-        domain: v === "time" ? u ?? ["dataMin", "dataMax"] : u,
+        dataKey: r,
+        type: g === "time" ? "number" : "category",
+        scale: g === "time" ? "time" : "auto",
+        domain: g === "time" ? u ?? ["dataMin", "dataMax"] : u,
         allowDataOverflow: !!u,
         axisLine: !1,
         tickLine: !1,
         minTickGap: 28,
         tickMargin: 10,
-        tick: /* @__PURE__ */ e(T, { anchor: "middle", dy: 0, format: p })
+        tick: /* @__PURE__ */ e(B, { anchor: "middle", dy: 0, format: N })
       },
       "x"
     ),
     o ? /* @__PURE__ */ e(
-      I,
+      z,
       {
-        width: s,
-        domain: d,
-        allowDataOverflow: !!d,
+        width: c,
+        domain: m,
+        allowDataOverflow: !!m,
         axisLine: !1,
         tickLine: !1,
         tickMargin: 6,
-        tick: /* @__PURE__ */ e(T, { anchor: "end", dy: "0.32em", format: k })
+        tick: /* @__PURE__ */ e(B, { anchor: "end", dy: "0.32em", format: A })
       },
       "y"
     ) : null
-  ], colorFor: w, labelFor: A };
+  ], colorFor: w, labelFor: R };
 }
-const D = { top: 20, right: 12, bottom: 4, left: 0 }, Se = N.forwardRef(
-  ({ height: r = 280, curve: n = "natural", forecastKeys: a, className: i, ...t }, l) => {
-    const { names: c, format: m, layers: f, legendItems: o, furniture: b, colorFor: v, labelFor: u } = P(t);
-    return /* @__PURE__ */ e($, { ref: l, className: i, height: r, legendItems: o, hovered: f.hovered, format: m, children: /* @__PURE__ */ y(te, { data: t.data, margin: D, children: [
-      b,
-      t.tooltip !== !1 && /* @__PURE__ */ e(
-        F,
+const j = { top: 20, right: 12, bottom: 4, left: 0 }, je = k.forwardRef(
+  ({ height: t = 280, curve: n = "natural", forecastKeys: r, className: i, ...a }, l) => {
+    const { names: s, format: d, layers: f, legendItems: o, furniture: p, colorFor: g, labelFor: u } = G(a);
+    return /* @__PURE__ */ e(W, { ref: l, className: i, height: t, legendItems: o, hovered: f.hovered, format: d, children: /* @__PURE__ */ y(me, { data: a.data, margin: j, children: [
+      p,
+      a.tooltip !== !1 && /* @__PURE__ */ e(
+        O,
         {
           content: /* @__PURE__ */ e(
-            M,
+            S,
             {
-              format: m,
-              renderer: t.tooltip
+              format: d,
+              renderer: a.tooltip
             }
           ),
           cursor: { stroke: "var(--border-strong)" },
@@ -315,40 +315,40 @@ const D = { top: 20, right: 12, bottom: 4, left: 0 }, Se = N.forwardRef(
         }
       ),
       f.back,
-      c.map((d, p) => /* @__PURE__ */ e(
-        U,
+      s.map((m, N) => /* @__PURE__ */ e(
+        re,
         {
-          dataKey: d,
-          name: u(d),
+          dataKey: m,
+          name: u(m),
           type: n,
-          stroke: v(d, p),
+          stroke: g(m, N),
           strokeWidth: 2,
-          strokeDasharray: a != null && a.includes(d) ? "6 4" : void 0,
+          strokeDasharray: r != null && r.includes(m) ? "6 4" : void 0,
           dot: !1,
           activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
           isAnimationActive: !1
         },
-        d
+        m
       )),
       f.front
     ] }) });
   }
 );
-Se.displayName = "LineChart";
-const Te = N.forwardRef(
-  ({ height: r = 280, curve: n = "natural", stacked: a = !1, forecastKeys: i, className: t, ...l }, c) => {
-    const { names: m, format: f, layers: o, legendItems: b, furniture: v, colorFor: u, labelFor: d } = P(l), p = N.useId().replace(/[^a-zA-Z0-9]/g, "");
-    return /* @__PURE__ */ e($, { ref: c, className: t, height: r, legendItems: b, hovered: o.hovered, format: f, children: /* @__PURE__ */ y(re, { data: l.data, margin: D, children: [
-      /* @__PURE__ */ e("defs", { children: m.map((x, s) => /* @__PURE__ */ y("linearGradient", { id: `${p}-${s}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: u(x, s), stopOpacity: 0.18 }),
-        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: u(x, s), stopOpacity: 0.02 })
-      ] }, x)) }),
-      v,
+je.displayName = "LineChart";
+const Pe = k.forwardRef(
+  ({ height: t = 280, curve: n = "natural", stacked: r = !1, forecastKeys: i, className: a, ...l }, s) => {
+    const { names: d, format: f, layers: o, legendItems: p, furniture: g, colorFor: u, labelFor: m } = G(l), N = k.useId().replace(/[^a-zA-Z0-9]/g, "");
+    return /* @__PURE__ */ e(W, { ref: s, className: a, height: t, legendItems: p, hovered: o.hovered, format: f, children: /* @__PURE__ */ y(fe, { data: l.data, margin: j, children: [
+      /* @__PURE__ */ e("defs", { children: d.map((v, c) => /* @__PURE__ */ y("linearGradient", { id: `${N}-${c}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ e("stop", { offset: "0%", stopColor: u(v, c), stopOpacity: 0.18 }),
+        /* @__PURE__ */ e("stop", { offset: "100%", stopColor: u(v, c), stopOpacity: 0.02 })
+      ] }, v)) }),
+      g,
       l.tooltip !== !1 && /* @__PURE__ */ e(
-        F,
+        O,
         {
           content: /* @__PURE__ */ e(
-            M,
+            S,
             {
               format: f,
               renderer: l.tooltip
@@ -359,38 +359,38 @@ const Te = N.forwardRef(
         }
       ),
       o.back,
-      m.map((x, s) => /* @__PURE__ */ e(
-        ae,
+      d.map((v, c) => /* @__PURE__ */ e(
+        ue,
         {
-          dataKey: x,
-          name: d(x),
+          dataKey: v,
+          name: m(v),
           type: n,
-          stackId: a ? "stack" : void 0,
-          stroke: u(x, s),
+          stackId: r ? "stack" : void 0,
+          stroke: u(v, c),
           strokeWidth: 2,
-          strokeDasharray: i != null && i.includes(x) ? "6 4" : void 0,
-          fill: `url(#${p}-${s})`,
+          strokeDasharray: i != null && i.includes(v) ? "6 4" : void 0,
+          fill: `url(#${N}-${c})`,
           activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
           isAnimationActive: !1
         },
-        x
+        v
       )),
       o.front
     ] }) });
   }
 );
-Te.displayName = "AreaChart";
-const Be = N.forwardRef(
+Pe.displayName = "AreaChart";
+const ze = k.forwardRef(
   ({
-    height: r = 280,
+    height: t = 280,
     stacked: n = !1,
-    layout: a = "vertical",
+    layout: r = "vertical",
     className: i,
-    ...t
+    ...a
   }, l) => {
-    const { names: c, format: m, layers: f, legendItems: o, furniture: b, colorFor: v, labelFor: u } = P(t), d = a === "horizontal", p = t.xTickFormatter ?? ((g) => typeof g == "number" ? m(g) : g), x = [
-      t.grid !== !1 ? /* @__PURE__ */ e(
-        Y,
+    const { names: s, format: d, layers: f, legendItems: o, furniture: p, colorFor: g, labelFor: u } = G(a), m = r === "horizontal", N = a.xTickFormatter ?? ((x) => typeof x == "number" ? d(x) : x), v = [
+      a.grid !== !1 ? /* @__PURE__ */ e(
+        X,
         {
           horizontal: !1,
           vertical: !0,
@@ -399,57 +399,57 @@ const Be = N.forwardRef(
         "grid"
       ) : null,
       /* @__PURE__ */ e(
-        H,
+        Z,
         {
           type: "number",
-          domain: t.xDomain,
-          allowDataOverflow: !!t.xDomain,
+          domain: a.xDomain,
+          allowDataOverflow: !!a.xDomain,
           axisLine: !1,
           tickLine: !1,
           minTickGap: 28,
           tickMargin: 10,
-          tick: /* @__PURE__ */ e(T, { anchor: "middle", dy: 0, format: p })
+          tick: /* @__PURE__ */ e(B, { anchor: "middle", dy: 0, format: N })
         },
         "x"
       ),
-      t.showYAxis !== !1 ? /* @__PURE__ */ e(
-        I,
+      a.showYAxis !== !1 ? /* @__PURE__ */ e(
+        z,
         {
           type: "category",
-          dataKey: t.categoryKey,
-          width: t.yAxisWidth ?? 144,
+          dataKey: a.categoryKey,
+          width: a.yAxisWidth ?? 144,
           axisLine: !1,
           tickLine: !1,
           tickMargin: 6,
           tick: /* @__PURE__ */ e(
-            T,
+            B,
             {
               anchor: "end",
               dy: "0.32em",
-              format: t.yTickFormatter
+              format: a.yTickFormatter
             }
           )
         },
         "y"
       ) : null
-    ], s = t.highlight && c.length === 1 && !c.includes(t.highlight) ? t.highlight : null;
-    return /* @__PURE__ */ e($, { ref: l, className: i, height: r, legendItems: o, hovered: f.hovered, format: m, children: /* @__PURE__ */ y(
-      ne,
+    ], c = a.highlight && s.length === 1 && !s.includes(a.highlight) ? a.highlight : null;
+    return /* @__PURE__ */ e(W, { ref: l, className: i, height: t, legendItems: o, hovered: f.hovered, format: d, children: /* @__PURE__ */ y(
+      he,
       {
-        data: t.data,
-        layout: d ? "vertical" : "horizontal",
-        margin: D,
+        data: a.data,
+        layout: m ? "vertical" : "horizontal",
+        margin: j,
         barCategoryGap: "24%",
         children: [
-          d ? x : b,
-          t.tooltip !== !1 && /* @__PURE__ */ e(
-            F,
+          m ? v : p,
+          a.tooltip !== !1 && /* @__PURE__ */ e(
+            O,
             {
               content: /* @__PURE__ */ e(
-                M,
+                S,
                 {
-                  format: m,
-                  renderer: t.tooltip
+                  format: d,
+                  renderer: a.tooltip
                 }
               ),
               cursor: { fill: "var(--muted)" },
@@ -457,27 +457,27 @@ const Be = N.forwardRef(
             }
           ),
           f.back,
-          c.map((g, h) => {
-            const k = n ? h === c.length - 1 : !0, O = d ? [0, 4, 4, 0] : [4, 4, 0, 0];
+          s.map((x, h) => {
+            const A = n ? h === s.length - 1 : !0, F = m ? [0, 4, 4, 0] : [4, 4, 0, 0];
             return /* @__PURE__ */ e(
-              Z,
+              ne,
               {
-                dataKey: g,
-                name: u(g),
+                dataKey: x,
+                name: u(x),
                 stackId: n ? "stack" : void 0,
-                fill: v(g, h),
-                radius: k ? O : 0,
+                fill: g(x, h),
+                radius: A ? F : 0,
                 maxBarSize: 48,
                 isAnimationActive: !1,
-                children: s && t.data.map((w) => /* @__PURE__ */ e(
-                  X,
+                children: c && a.data.map((w) => /* @__PURE__ */ e(
+                  ie,
                   {
-                    fill: w[t.categoryKey] === s ? "var(--color-chart-1)" : _
+                    fill: w[a.categoryKey] === c ? "var(--color-chart-1)" : Q
                   },
-                  String(w[t.categoryKey])
+                  String(w[a.categoryKey])
                 ))
               },
-              g
+              x
             );
           }),
           f.front
@@ -486,14 +486,14 @@ const Be = N.forwardRef(
     ) });
   }
 );
-Be.displayName = "BarChart";
-const K = N.forwardRef(
-  ({ height: r = 280, lineKeys: n, dualAxis: a = !1, stacked: i = !1, forecastKeys: t, className: l, ...c }, m) => {
-    const { names: f, format: o, layers: b, legendItems: v, furniture: u, colorFor: d, labelFor: p } = P(c), x = f.filter((s) => !n.includes(s));
-    return /* @__PURE__ */ e($, { ref: m, className: l, height: r, legendItems: v, hovered: b.hovered, format: o, children: /* @__PURE__ */ y(ie, { data: c.data, margin: D, barCategoryGap: "24%", children: [
+ze.displayName = "BarChart";
+const ce = k.forwardRef(
+  ({ height: t = 280, lineKeys: n, dualAxis: r = !1, stacked: i = !1, forecastKeys: a, className: l, ...s }, d) => {
+    const { names: f, format: o, layers: p, legendItems: g, furniture: u, colorFor: m, labelFor: N } = G(s), v = f.filter((c) => !n.includes(c));
+    return /* @__PURE__ */ e(W, { ref: d, className: l, height: t, legendItems: g, hovered: p.hovered, format: o, children: /* @__PURE__ */ y(xe, { data: s.data, margin: j, barCategoryGap: "24%", children: [
       u,
-      a && /* @__PURE__ */ e(
-        I,
+      r && /* @__PURE__ */ e(
+        z,
         {
           yAxisId: "right",
           orientation: "right",
@@ -502,135 +502,135 @@ const K = N.forwardRef(
           tickLine: !1,
           tickMargin: 6,
           tick: /* @__PURE__ */ e(
-            T,
+            B,
             {
               anchor: "start",
               dy: "0.32em",
-              format: (s) => typeof s == "number" ? o(s) : s
+              format: (c) => typeof c == "number" ? o(c) : c
             }
           )
         }
       ),
-      c.tooltip !== !1 && /* @__PURE__ */ e(
-        F,
+      s.tooltip !== !1 && /* @__PURE__ */ e(
+        O,
         {
           content: /* @__PURE__ */ e(
-            M,
+            S,
             {
               format: o,
-              renderer: c.tooltip
+              renderer: s.tooltip
             }
           ),
           cursor: { fill: "var(--muted)" },
           isAnimationActive: !1
         }
       ),
-      b.back,
-      x.map((s) => {
-        const g = f.indexOf(s), h = i ? s === x[x.length - 1] : !0;
+      p.back,
+      v.map((c) => {
+        const x = f.indexOf(c), h = i ? c === v[v.length - 1] : !0;
         return /* @__PURE__ */ e(
-          Z,
+          ne,
           {
-            dataKey: s,
-            name: p(s),
+            dataKey: c,
+            name: N(c),
             stackId: i ? "stack" : void 0,
-            fill: d(s, g),
+            fill: m(c, x),
             radius: h ? [4, 4, 0, 0] : 0,
             maxBarSize: 48,
             isAnimationActive: !1
           },
-          s
+          c
         );
       }),
-      n.map((s) => {
-        const g = f.indexOf(s);
+      n.map((c) => {
+        const x = f.indexOf(c);
         return /* @__PURE__ */ e(
-          U,
+          re,
           {
-            dataKey: s,
-            name: p(s),
-            yAxisId: a ? "right" : void 0,
+            dataKey: c,
+            name: N(c),
+            yAxisId: r ? "right" : void 0,
             type: "natural",
-            stroke: d(s, g),
+            stroke: m(c, x),
             strokeWidth: 2,
-            strokeDasharray: t != null && t.includes(s) ? "6 4" : void 0,
+            strokeDasharray: a != null && a.includes(c) ? "6 4" : void 0,
             dot: !1,
             activeDot: { r: 4, strokeWidth: 2, stroke: "var(--background)" },
             isAnimationActive: !1
           },
-          s
+          c
         );
       }),
-      b.front
+      p.front
     ] }) });
   }
 );
-K.displayName = "ComboChart";
-const $e = N.forwardRef(
-  (r, n) => /* @__PURE__ */ e(K, { ref: n, ...r })
+ce.displayName = "ComboChart";
+const Ee = k.forwardRef(
+  (t, n) => /* @__PURE__ */ e(ce, { ref: n, ...t })
 );
-$e.displayName = "ComposedChart";
-const De = N.forwardRef(
+Ee.displayName = "ComposedChart";
+const _e = k.forwardRef(
   ({
-    data: r,
+    data: t,
     xKey: n,
-    yKey: a,
+    yKey: r,
     labelKey: i,
-    annotations: t,
+    annotations: a,
     height: l = 280,
-    grid: c = !0,
-    showYAxis: m = !0,
+    grid: s = !0,
+    showYAxis: d = !0,
     formatValue: f,
     xScale: o = "number",
-    xDomain: b,
-    yDomain: v,
+    xDomain: p,
+    yDomain: g,
     xTickFormatter: u,
-    yTickFormatter: d,
-    yAxisWidth: p = 44,
-    tooltip: x,
-    className: s
-  }, g) => {
-    const h = f ?? L, k = u ?? ((A) => typeof A == "number" ? L(A) : A), O = d ?? ((A) => typeof A == "number" ? h(A) : A), w = Q(t);
-    return /* @__PURE__ */ e($, { ref: g, className: s, height: l, legendItems: null, hovered: w.hovered, format: h, children: /* @__PURE__ */ y(oe, { margin: D, children: [
-      c && /* @__PURE__ */ e(Y, { vertical: !1, stroke: "var(--border)" }),
+    yTickFormatter: m,
+    yAxisWidth: N = 44,
+    tooltip: v,
+    className: c
+  }, x) => {
+    const h = f ?? L, A = u ?? ((R) => typeof R == "number" ? L(R) : R), F = m ?? ((R) => typeof R == "number" ? h(R) : R), w = se(a);
+    return /* @__PURE__ */ e(W, { ref: x, className: c, height: l, legendItems: null, hovered: w.hovered, format: h, children: /* @__PURE__ */ y(ve, { margin: j, children: [
+      s && /* @__PURE__ */ e(X, { vertical: !1, stroke: "var(--border)" }),
       /* @__PURE__ */ e(
-        H,
+        Z,
         {
           type: "number",
           dataKey: n,
           scale: o === "time" ? "time" : "auto",
-          domain: b ?? (o === "time" ? ["dataMin", "dataMax"] : ["auto", "auto"]),
-          allowDataOverflow: !!b,
+          domain: p ?? (o === "time" ? ["dataMin", "dataMax"] : ["auto", "auto"]),
+          allowDataOverflow: !!p,
           axisLine: !1,
           tickLine: !1,
           minTickGap: 28,
           tickMargin: 10,
-          tick: /* @__PURE__ */ e(T, { anchor: "middle", dy: 0, format: k })
+          tick: /* @__PURE__ */ e(B, { anchor: "middle", dy: 0, format: A })
         }
       ),
-      m && /* @__PURE__ */ e(
-        I,
+      d && /* @__PURE__ */ e(
+        z,
         {
           type: "number",
-          dataKey: a,
-          width: p,
-          domain: v,
-          allowDataOverflow: !!v,
+          dataKey: r,
+          width: N,
+          domain: g,
+          allowDataOverflow: !!g,
           axisLine: !1,
           tickLine: !1,
           tickMargin: 6,
-          tick: /* @__PURE__ */ e(T, { anchor: "end", dy: "0.32em", format: O })
+          tick: /* @__PURE__ */ e(B, { anchor: "end", dy: "0.32em", format: F })
         }
       ),
-      x !== !1 && /* @__PURE__ */ e(
-        F,
+      v !== !1 && /* @__PURE__ */ e(
+        O,
         {
           content: /* @__PURE__ */ e(
-            M,
+            S,
             {
               format: h,
               labelKey: i,
-              renderer: x
+              renderer: v
             }
           ),
           cursor: { stroke: "var(--border-strong)", strokeDasharray: "4 4" },
@@ -639,11 +639,11 @@ const De = N.forwardRef(
       ),
       w.back,
       /* @__PURE__ */ e(
-        le,
+        ge,
         {
-          data: r,
+          data: t,
           fill: "var(--color-chart-1)",
-          shape: (A) => /* @__PURE__ */ e("circle", { cx: A.cx, cy: A.cy, r: 4.5, fill: "var(--color-chart-1)", fillOpacity: 0.75 }),
+          shape: (R) => /* @__PURE__ */ e("circle", { cx: R.cx, cy: R.cy, r: 4.5, fill: "var(--color-chart-1)", fillOpacity: 0.75 }),
           isAnimationActive: !1
         }
       ),
@@ -651,34 +651,34 @@ const De = N.forwardRef(
     ] }) });
   }
 );
-De.displayName = "ScatterChart";
-const je = N.forwardRef(
+_e.displayName = "ScatterChart";
+const Ge = k.forwardRef(
   ({
-    data: r,
+    data: t,
     nameKey: n,
-    valueKey: a,
+    valueKey: r,
     donut: i = !0,
-    centerLabel: t,
+    centerLabel: a,
     highlight: l,
-    height: c = 260,
-    legend: m = !0,
+    height: s = 260,
+    legend: d = !0,
     formatValue: f,
     tooltip: o,
-    className: b
-  }, v) => {
-    const u = f ?? L, d = r.reduce((g, h) => g + (typeof h[a] == "number" ? h[a] : 0), 0), p = (g, h) => W(h), x = (g) => l && g !== l ? 0.3 : 1, s = m ? r.map((g, h) => ({
-      label: `${g[n]} · ${d ? Math.round(Number(g[a]) / d * 100) : 0}%`,
-      color: p(String(g[n]), h)
+    className: p
+  }, g) => {
+    const u = f ?? L, m = t.reduce((x, h) => x + (typeof h[r] == "number" ? h[r] : 0), 0), N = (x, h) => E(h), v = (x) => l && x !== l ? 0.3 : 1, c = d ? t.map((x, h) => ({
+      label: `${x[n]} · ${m ? Math.round(Number(x[r]) / m * 100) : 0}%`,
+      color: N(String(x[n]), h)
     })) : null;
-    return /* @__PURE__ */ y("div", { ref: v, className: C("relative w-full font-sans", b), children: [
-      s && /* @__PURE__ */ e(z, { items: s }),
+    return /* @__PURE__ */ y("div", { ref: g, className: $("relative w-full font-sans", p), children: [
+      c && /* @__PURE__ */ e(_, { items: c }),
       /* @__PURE__ */ y("div", { className: "relative", children: [
-        /* @__PURE__ */ e(B, { width: "100%", height: c, children: /* @__PURE__ */ y(se, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+        /* @__PURE__ */ e(I, { width: "100%", height: s, children: /* @__PURE__ */ y(be, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
           o !== !1 && /* @__PURE__ */ e(
-            F,
+            O,
             {
               content: /* @__PURE__ */ e(
-                M,
+                S,
                 {
                   format: u,
                   renderer: o
@@ -688,10 +688,10 @@ const je = N.forwardRef(
             }
           ),
           /* @__PURE__ */ e(
-            ce,
+            pe,
             {
-              data: r,
-              dataKey: a,
+              data: t,
+              dataKey: r,
               nameKey: n,
               innerRadius: i ? "62%" : 0,
               outerRadius: "88%",
@@ -699,103 +699,103 @@ const je = N.forwardRef(
               cornerRadius: i ? 4 : 2,
               stroke: "none",
               isAnimationActive: !1,
-              children: r.map((g, h) => /* @__PURE__ */ e(
-                X,
+              children: t.map((x, h) => /* @__PURE__ */ e(
+                ie,
                 {
-                  fill: p(String(g[n]), h),
-                  fillOpacity: x(String(g[n]))
+                  fill: N(String(x[n]), h),
+                  fillOpacity: v(String(x[n]))
                 },
-                String(g[n])
+                String(x[n])
               ))
             }
           )
         ] }) }),
         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-bold text-foreground tabular-nums", children: u(d) }),
-          t && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: t })
+          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: u(m) }),
+          a && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: a })
         ] })
       ] })
     ] });
   }
 );
-je.displayName = "PieChart";
-const Ie = N.forwardRef(
+Ge.displayName = "PieChart";
+const Ue = k.forwardRef(
   ({
-    data: r,
+    data: t,
     categoryKey: n,
-    series: a,
+    series: r,
     seriesLabels: i,
-    highlight: t,
+    highlight: a,
     maxValue: l,
-    height: c = 300,
-    legend: m,
+    height: s = 300,
+    legend: d,
     formatValue: f,
     tooltip: o,
-    className: b
-  }, v) => {
-    const u = N.useMemo(
-      () => a ?? J(r, n),
-      [n, r, a]
-    ), d = f ?? L, p = l ?? Math.max(
+    className: p
+  }, g) => {
+    const u = k.useMemo(
+      () => r ?? le(t, n),
+      [n, t, r]
+    ), m = f ?? L, N = l ?? Math.max(
       1,
-      ...r.flatMap(
+      ...t.flatMap(
         (h) => u.map(
-          (k) => typeof h[k] == "number" ? h[k] : 0
+          (A) => typeof h[A] == "number" ? h[A] : 0
         )
       )
-    ), x = (h) => (i == null ? void 0 : i[h]) ?? h, s = (h, k) => t && u.includes(t) ? h === t ? "var(--color-chart-1)" : _ : W(k), g = m ?? u.length > 1 ? u.map((h, k) => ({ label: x(h), color: s(h, k) })) : null;
-    return /* @__PURE__ */ y("div", { ref: v, className: C("relative w-full font-sans", b), children: [
-      g && /* @__PURE__ */ e(z, { items: g, align: "center" }),
-      /* @__PURE__ */ e("div", { className: "mx-auto w-full max-w-[520px]", children: /* @__PURE__ */ e(B, { width: "100%", height: c, children: /* @__PURE__ */ y(
-        de,
+    ), v = (h) => (i == null ? void 0 : i[h]) ?? h, c = (h, A) => a && u.includes(a) ? h === a ? "var(--color-chart-1)" : Q : E(A), x = d ?? u.length > 1 ? u.map((h, A) => ({ label: v(h), color: c(h, A) })) : null;
+    return /* @__PURE__ */ y("div", { ref: g, className: $("relative w-full font-sans", p), children: [
+      x && /* @__PURE__ */ e(_, { items: x, align: "center" }),
+      /* @__PURE__ */ e("div", { className: "mx-auto w-full max-w-[520px]", children: /* @__PURE__ */ e(I, { width: "100%", height: s, children: /* @__PURE__ */ y(
+        ye,
         {
-          data: r,
+          data: t,
           cx: "50%",
           cy: "52%",
           outerRadius: "68%",
           margin: { top: 10, right: 56, bottom: 16, left: 56 },
           children: [
-            /* @__PURE__ */ e(me, { stroke: "var(--border)", radialLines: !0 }),
+            /* @__PURE__ */ e(Ne, { stroke: "var(--border)", radialLines: !0 }),
             /* @__PURE__ */ e(
-              q,
+              oe,
               {
                 dataKey: n,
                 tick: { fill: "var(--text-secondary)", fontSize: 11, fontWeight: 500 }
               }
             ),
             /* @__PURE__ */ e(
-              fe,
+              ke,
               {
                 angle: 90,
-                domain: [0, p],
+                domain: [0, N],
                 tick: !1,
                 axisLine: !1,
                 tickLine: !1
               }
             ),
             o !== !1 && /* @__PURE__ */ e(
-              F,
+              O,
               {
                 content: /* @__PURE__ */ e(
-                  M,
+                  S,
                   {
-                    format: d,
+                    format: m,
                     renderer: o
                   }
                 ),
                 isAnimationActive: !1
               }
             ),
-            u.map((h, k) => /* @__PURE__ */ e(
-              ue,
+            u.map((h, A) => /* @__PURE__ */ e(
+              we,
               {
                 dataKey: h,
-                name: x(h),
-                stroke: s(h, k),
-                fill: s(h, k),
-                fillOpacity: t ? h === t ? 0.16 : 0.05 : 0.1,
+                name: v(h),
+                stroke: c(h, A),
+                fill: c(h, A),
+                fillOpacity: a ? h === a ? 0.16 : 0.05 : 0.1,
                 strokeWidth: 2,
-                dot: { r: 2.5, fill: s(h, k), strokeWidth: 0 },
+                dot: { r: 2.5, fill: c(h, A), strokeWidth: 0 },
                 isAnimationActive: !1
               },
               h
@@ -806,35 +806,35 @@ const Ie = N.forwardRef(
     ] });
   }
 );
-Ie.displayName = "RadarChart";
-const We = N.forwardRef(
+Ue.displayName = "RadarChart";
+const He = k.forwardRef(
   ({
-    data: r,
+    data: t,
     nameKey: n,
-    valueKey: a,
+    valueKey: r,
     maxValue: i = 100,
-    centerLabel: t,
+    centerLabel: a,
     height: l = 280,
-    legend: c = !0,
-    formatValue: m,
+    legend: s = !0,
+    formatValue: d,
     tooltip: f,
     className: o
-  }, b) => {
-    const v = m ?? L, u = r.map((x, s) => ({
-      ...x,
-      name: String(x[n]),
-      fill: j(s)
-    })), d = u.length ? u.reduce(
-      (x, s) => x + (typeof s[a] == "number" ? s[a] : 0),
+  }, p) => {
+    const g = d ?? L, u = t.map((v, c) => ({
+      ...v,
+      name: String(v[n]),
+      fill: V(c)
+    })), m = u.length ? u.reduce(
+      (v, c) => v + (typeof c[r] == "number" ? c[r] : 0),
       0
-    ) / u.length : 0, p = c ? u.map((x, s) => ({
-      label: String(x[n]),
-      color: j(s)
+    ) / u.length : 0, N = s ? u.map((v, c) => ({
+      label: String(v[n]),
+      color: V(c)
     })) : null;
-    return /* @__PURE__ */ y("div", { ref: b, className: C("relative w-full font-sans", o), children: [
+    return /* @__PURE__ */ y("div", { ref: p, className: $("relative w-full font-sans", o), children: [
       /* @__PURE__ */ y("div", { className: "relative mx-auto w-full max-w-[420px]", children: [
-        /* @__PURE__ */ e(B, { width: "100%", height: l, children: /* @__PURE__ */ y(
-          he,
+        /* @__PURE__ */ e(I, { width: "100%", height: l, children: /* @__PURE__ */ y(
+          Ae,
           {
             data: u,
             innerRadius: "48%",
@@ -843,14 +843,14 @@ const We = N.forwardRef(
             endAngle: -270,
             margin: { top: 6, right: 6, bottom: 6, left: 6 },
             children: [
-              /* @__PURE__ */ e(q, { type: "number", domain: [0, i], tick: !1 }),
+              /* @__PURE__ */ e(oe, { type: "number", domain: [0, i], tick: !1 }),
               f !== !1 && /* @__PURE__ */ e(
-                F,
+                O,
                 {
                   content: /* @__PURE__ */ e(
-                    M,
+                    S,
                     {
-                      format: v,
+                      format: g,
                       renderer: f
                     }
                   ),
@@ -858,9 +858,9 @@ const We = N.forwardRef(
                 }
               ),
               /* @__PURE__ */ e(
-                xe,
+                Ce,
                 {
-                  dataKey: a,
+                  dataKey: r,
                   background: { fill: "var(--muted)" },
                   cornerRadius: 999,
                   maxBarSize: 18,
@@ -871,35 +871,35 @@ const We = N.forwardRef(
           }
         ) }),
         /* @__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-bold text-foreground tabular-nums", children: v(Math.round(d)) }),
-          t && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: t })
+          /* @__PURE__ */ e("div", { className: "text-xl font-bold text-foreground tabular-nums", children: g(Math.round(m)) }),
+          a && /* @__PURE__ */ e("div", { className: "mt-0.5 text-xs font-medium tracking-wide uppercase text-tertiary", children: a })
         ] })
       ] }),
-      p && /* @__PURE__ */ e(z, { items: p, align: "center", className: "mb-0 mt-3" })
+      N && /* @__PURE__ */ e(_, { items: N, align: "center", className: "mb-0 mt-3" })
     ] });
   }
 );
-We.displayName = "RadialBarChart";
-function ze({
-  x: r = 0,
+He.displayName = "RadialBarChart";
+function Ve({
+  x: t = 0,
   y: n = 0,
-  width: a = 0,
+  width: r = 0,
   height: i = 0,
-  depth: t = 0,
+  depth: a = 0,
   index: l = 0,
-  name: c,
-  value: m,
+  name: s,
+  value: d,
   format: f = L
 }) {
-  if (t === 0) return /* @__PURE__ */ e("g", {});
-  const o = t === 0 ? "transparent" : j(l), b = t > 0 && l < 4, v = a > 72 && i > 38;
+  if (a === 0) return /* @__PURE__ */ e("g", {});
+  const o = a === 0 ? "transparent" : V(l), p = a > 0 && l < 4, g = r > 72 && i > 38;
   return /* @__PURE__ */ y("g", { children: [
     /* @__PURE__ */ e(
       "rect",
       {
-        x: r,
+        x: t,
         y: n,
-        width: a,
+        width: r,
         height: i,
         rx: 6,
         ry: 6,
@@ -908,33 +908,33 @@ function ze({
         strokeWidth: 4
       }
     ),
-    v && /* @__PURE__ */ e(
+    g && /* @__PURE__ */ e(
       "foreignObject",
       {
-        x: r + 8,
+        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__ */ y("div", { className: "flex h-full flex-col justify-between", children: [
           /* @__PURE__ */ e(
             "p",
             {
-              className: C(
+              className: $(
                 "truncate text-xs font-semibold",
-                b ? "text-background" : "text-foreground"
+                p ? "text-background" : "text-foreground"
               ),
-              children: c
+              children: s
             }
           ),
-          typeof m == "number" && i > 58 && /* @__PURE__ */ e(
+          typeof d == "number" && i > 58 && /* @__PURE__ */ e(
             "p",
             {
-              className: C(
+              className: $(
                 "text-xs tabular-nums",
-                b ? "text-background/70" : "text-tertiary"
+                p ? "text-background/70" : "text-tertiary"
               ),
-              children: f(m)
+              children: f(d)
             }
           )
         ] })
@@ -942,50 +942,50 @@ function ze({
     )
   ] });
 }
-function Pe(r, n, a) {
-  const i = [], t = (l) => {
-    const c = Array.isArray(l.children) ? l.children : void 0;
-    if (c != null && c.length) {
-      c.forEach(t);
+function Ye(t, n, r) {
+  const i = [], a = (l) => {
+    const s = Array.isArray(l.children) ? l.children : void 0;
+    if (s != null && s.length) {
+      s.forEach(a);
       return;
     }
-    typeof l[a] == "number" && i.push({
+    typeof l[r] == "number" && i.push({
       ...l,
       name: String(l[n] ?? ""),
-      value: l[a]
+      value: l[r]
     });
   };
-  return r.forEach(t), i.length ? i : r;
+  return t.forEach(a), i.length ? i : t;
 }
-const Ge = N.forwardRef(
+const Xe = k.forwardRef(
   ({
-    data: r,
+    data: t,
     nameKey: n,
-    valueKey: a,
+    valueKey: r,
     height: i = 280,
-    formatValue: t,
+    formatValue: a,
     tooltip: l,
-    className: c
-  }, m) => {
-    const f = t ?? L, o = N.useMemo(
-      () => Pe(r, n, a),
-      [r, n, a]
+    className: s
+  }, d) => {
+    const f = a ?? L, o = k.useMemo(
+      () => Ye(t, n, r),
+      [t, n, r]
     );
-    return /* @__PURE__ */ e("div", { ref: m, className: C("relative w-full font-sans", c), children: /* @__PURE__ */ e(B, { width: "100%", height: i, children: /* @__PURE__ */ e(
-      ge,
+    return /* @__PURE__ */ e("div", { ref: d, className: $("relative w-full font-sans", s), children: /* @__PURE__ */ e(I, { width: "100%", height: i, children: /* @__PURE__ */ e(
+      Re,
       {
         data: o,
         nameKey: n,
-        dataKey: a,
+        dataKey: r,
         type: "flat",
         aspectRatio: 1.6,
-        content: /* @__PURE__ */ e(ze, { format: f }),
+        content: /* @__PURE__ */ e(Ve, { format: f }),
         isAnimationActive: !1,
         children: l !== !1 && /* @__PURE__ */ e(
-          F,
+          O,
           {
             content: /* @__PURE__ */ e(
-              M,
+              S,
               {
                 format: f,
                 renderer: l
@@ -998,104 +998,187 @@ const Ge = N.forwardRef(
     ) }) });
   }
 );
-Ge.displayName = "TreemapChart";
-const Ee = N.forwardRef(
+Xe.displayName = "TreemapChart";
+const U = "var(--color-chart-1)", Ze = "var(--color-ink-100)", P = 24, Qe = 44, ee = 0.55, te = 4, ae = (t, n, r, i, a) => {
+  const l = Math.min(a, r / 2, i);
+  return `M ${t},${n + i} L ${t},${n + l} Q ${t},${n} ${t + l},${n} L ${t + r - l},${n} Q ${t + r},${n} ${t + r},${n + l} L ${t + r},${n + i} Z`;
+};
+function qe() {
+  const t = k.useRef(null), [n, r] = k.useState(0);
+  return k.useLayoutEffect(() => {
+    const i = t.current;
+    if (!i) return;
+    r(i.getBoundingClientRect().width);
+    const a = new ResizeObserver((l) => {
+      var d;
+      const s = ((d = l[0]) == null ? void 0 : d.contentRect.width) ?? 0;
+      r((f) => Math.abs(f - s) > 0.5 ? s : f);
+    });
+    return a.observe(i), () => a.disconnect();
+  }, []), { ref: t, width: n };
+}
+const Je = k.forwardRef(
   ({
-    data: r,
+    data: t,
     nameKey: n,
-    valueKey: a,
+    valueKey: r,
     height: i = 280,
-    formatValue: t,
+    formatValue: a,
     label: l,
-    labelWidth: c = 176,
-    tooltip: m,
-    className: f
-  }, o) => {
-    var d;
-    const b = t ?? L, v = Number(((d = r[0]) == null ? void 0 : d[a]) ?? 0), u = (p) => {
-      var A;
-      const x = p.index ?? 0, s = r[x];
-      if (!s) return /* @__PURE__ */ e("g", {});
-      const g = Number(s[a]), h = Number(((A = r[x - 1]) == null ? void 0 : A[a]) ?? g), k = v ? g / v * 100 : 0, O = h ? g / h * 100 : 0, w = {
-        datum: s,
-        index: x,
-        name: String(s[n]),
-        value: g,
-        conversionFromFirst: k,
-        conversionFromPrevious: O,
-        dropOffFromPrevious: x === 0 ? 0 : 100 - O,
-        x: Number(p.x ?? 0),
-        y: Number(p.y ?? 0),
-        width: Number(p.width ?? 0),
-        height: Number(p.height ?? 0),
-        formatValue: b
+    tooltip: s,
+    className: d
+  }, f) => {
+    var R;
+    const o = a ?? L, { ref: p, width: g } = qe(), [u, m] = k.useState(null), N = Number(((R = t[0]) == null ? void 0 : R[r]) ?? 0), v = t.length, c = Math.max(0, i - P - Qe), x = P + c, h = v > 0 ? g / (v + (v - 1) * ee) : 0, A = h * ee, F = t.map((b, M) => {
+      var K;
+      const C = Number(b[r]), D = Number(((K = t[M - 1]) == null ? void 0 : K[r]) ?? C), de = N ? C / N * 100 : 0, q = D ? C / D * 100 : 0, J = N && C > 0 ? Math.max(2, C / N * c) : 0;
+      return {
+        datum: b,
+        index: M,
+        name: String(b[n]),
+        value: C,
+        conversionFromFirst: de,
+        conversionFromPrevious: q,
+        dropOffFromPrevious: M === 0 ? 0 : 100 - q,
+        x: M * (h + A),
+        y: x - J,
+        width: h,
+        height: J,
+        formatValue: o
       };
-      return l === !1 ? /* @__PURE__ */ e("g", {}) : l ? /* @__PURE__ */ e(E, { children: l(w) }) : /* @__PURE__ */ y(
-        "text",
-        {
-          x: w.x + w.width + 12,
-          y: w.y + w.height / 2,
-          dy: "0.32em",
-          textAnchor: "start",
-          className: "text-xs",
-          children: [
-            /* @__PURE__ */ e("tspan", { className: "fill-primary font-medium", children: w.name }),
-            /* @__PURE__ */ y("tspan", { className: "fill-secondary", children: [
-              " · ",
-              b(g)
-            ] }),
-            /* @__PURE__ */ y("tspan", { className: "fill-tertiary", children: [
-              " · ",
-              Math.round(k),
-              "%"
-            ] })
-          ]
-        }
-      );
-    };
-    return /* @__PURE__ */ e("div", { ref: o, className: C("relative w-full font-sans", f), children: /* @__PURE__ */ e(B, { width: "100%", height: i, children: /* @__PURE__ */ y(
-      ve,
-      {
-        margin: {
-          top: 8,
-          right: l === !1 ? 8 : c,
-          bottom: 8,
-          left: 8
-        },
-        children: [
-          m !== !1 && /* @__PURE__ */ e(
-            F,
+    }), w = u != null ? F[u] : void 0;
+    return /* @__PURE__ */ e("div", { ref: f, className: $("relative w-full font-sans", d), children: /* @__PURE__ */ y("div", { ref: p, className: "relative w-full", style: { height: i }, children: [
+      g > 0 && v > 0 && /* @__PURE__ */ y("svg", { width: g, height: i, className: "block", children: [
+        F.slice(1).map((b) => {
+          const M = F[b.index - 1];
+          return /* @__PURE__ */ e(
+            "path",
             {
-              content: /* @__PURE__ */ e(
-                M,
+              d: `M ${M.x + M.width},${M.y} L ${b.x},${b.y} L ${b.x},${x} L ${M.x + M.width},${x} Z`,
+              fill: U,
+              opacity: 0.14
+            },
+            `connector-${b.index}`
+          );
+        }),
+        F.map((b) => /* @__PURE__ */ y(
+          "g",
+          {
+            role: "img",
+            "aria-label": `${b.name}: ${o(b.value)} (${Math.round(b.conversionFromFirst)}% of ${F[0].name})`,
+            children: [
+              /* @__PURE__ */ e(
+                "path",
                 {
-                  format: b,
-                  renderer: m
+                  d: ae(b.x, P, b.width, c, te),
+                  fill: Ze
                 }
               ),
-              isAnimationActive: !1
-            }
-          ),
-          /* @__PURE__ */ y(be, { data: r, dataKey: a, nameKey: n, isAnimationActive: !1, children: [
-            r.map((p, x) => /* @__PURE__ */ e(X, { fill: j(x) }, String(p[n]))),
-            /* @__PURE__ */ e(pe, { position: "right", content: u })
+              b.height > 0 && /* @__PURE__ */ e(
+                "path",
+                {
+                  d: ae(b.x, b.y, b.width, b.height, te),
+                  fill: U
+                }
+              ),
+              l !== !1 && (l ? l(b) : /* @__PURE__ */ y(
+                "text",
+                {
+                  x: b.x,
+                  y: b.y - 8,
+                  textAnchor: "start",
+                  className: "fill-secondary text-xs font-medium tabular-nums",
+                  children: [
+                    Math.round(b.conversionFromFirst),
+                    "%"
+                  ]
+                }
+              )),
+              /* @__PURE__ */ e(
+                "text",
+                {
+                  x: b.x,
+                  y: x + 18,
+                  textAnchor: "start",
+                  className: "fill-primary text-xs font-medium",
+                  children: b.name
+                }
+              ),
+              /* @__PURE__ */ e(
+                "text",
+                {
+                  x: b.x,
+                  y: x + 34,
+                  textAnchor: "start",
+                  className: "fill-tertiary text-xs tabular-nums",
+                  children: o(b.value)
+                }
+              ),
+              /* @__PURE__ */ e(
+                "rect",
+                {
+                  x: b.x,
+                  y: P,
+                  width: b.index === v - 1 ? h : h + A,
+                  height: c,
+                  fill: "transparent",
+                  onMouseEnter: () => m(b.index),
+                  onMouseLeave: () => m(null)
+                }
+              )
+            ]
+          },
+          `${b.name}-${b.index}`
+        ))
+      ] }),
+      s !== !1 && w && /* @__PURE__ */ e(
+        "div",
+        {
+          className: "pointer-events-none absolute z-10 -translate-x-1/2 -translate-y-full",
+          style: { left: w.x + w.width / 2, top: w.y - 10 },
+          children: s ? s({
+            active: !0,
+            label: w.name,
+            items: [
+              {
+                key: w.name,
+                name: w.name,
+                value: w.value,
+                color: U,
+                datum: w.datum
+              }
+            ],
+            formatValue: o
+          }) : /* @__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-medium tracking-wide uppercase text-background/60", children: w.name }),
+            /* @__PURE__ */ e("div", { className: "font-medium tabular-nums", children: o(w.value) }),
+            /* @__PURE__ */ y("div", { className: "text-background/70 tabular-nums", children: [
+              Math.round(w.conversionFromFirst),
+              "% of ",
+              F[0].name,
+              w.index > 0 && /* @__PURE__ */ y(H, { children: [
+                " · −",
+                Math.round(w.dropOffFromPrevious),
+                "% step"
+              ] })
+            ] })
           ] })
-        ]
-      }
-    ) }) });
+        }
+      )
+    ] }) });
   }
 );
-Ee.displayName = "FunnelChart";
+Je.displayName = "FunnelChart";
 export {
-  Te as AreaChart,
-  Be as BarChart,
-  K as ComboChart,
-  $e as ComposedChart,
-  Ee as FunnelChart,
-  Se as LineChart,
-  je as PieChart,
-  Ie as RadarChart,
-  We as RadialBarChart,
-  De as ScatterChart,
-  Ge as TreemapChart
+  Pe as AreaChart,
+  ze as BarChart,
+  ce as ComboChart,
+  Ee as ComposedChart,
+  Je as FunnelChart,
+  je as LineChart,
+  Ge as PieChart,
+  Ue as RadarChart,
+  He as RadialBarChart,
+  _e as ScatterChart,
+  Xe as TreemapChart
 };