@gravitee/graphene-charts 2.36.2 → 2.36.3

package/dist/index.js

@@ -1,28 +1,28 @@
 import { t as e } from "./utils-ySutDPYb.js";
-import { C as t, E as n, S as r, T as i, _ as a, a as o, b as s, c, d as l, f as u, g as d, h as f, i as p, l as m, m as h, n as g, o as _, p as v, r as y, s as b, t as x, u as S, v as C, w, x as T, y as E } from "./primitives-Bp_ciIfm.js";
-import { Badge as D, Card as O, CardContent as k, CardDescription as A, CardHeader as j, CardTitle as M, HoverCard as N, HoverCardContent as P, HoverCardTrigger as ee, ScrollArea as F, Separator as te, Tooltip as ne, TooltipContent as re, TooltipProvider as I, TooltipTrigger as L } from "@gravitee/graphene-core";
-import * as R from "react";
-import { createContext as z, createElement as B, forwardRef as V, useCallback as ie, useContext as ae, useId as H, useRef as oe, useState as se } from "react";
-import { Fragment as U, jsx as W, jsxs as G } from "react/jsx-runtime";
+import { C as t, D as n, E as r, S as i, T as a, _ as o, a as s, b as c, c as l, d as u, f as d, g as f, h as p, i as m, l as h, m as g, n as _, o as v, p as y, r as b, s as x, t as S, u as C, v as w, w as T, x as E, y as D } from "./primitives-BnaI6bnw.js";
+import { Badge as O, Card as k, CardContent as A, CardDescription as j, CardHeader as M, CardTitle as N, HoverCard as P, HoverCardContent as F, HoverCardTrigger as ee, ScrollArea as I, Separator as te, Tooltip as ne, TooltipContent as re, TooltipProvider as L, TooltipTrigger as R } from "@gravitee/graphene-core";
+import * as z from "react";
+import { createContext as B, createElement as V, forwardRef as H, useCallback as ie, useContext as ae, useId as U, useRef as oe, useState as se } from "react";
+import { Fragment as ce, jsx as W, jsxs as G } from "react/jsx-runtime";
 import { scaleLinear as K } from "d3-scale";
-import { arc as ce, area as q, curveLinear as le, curveMonotoneX as J, curveStep as ue, line as Y, pie as de } from "d3-shape";
-import { createPortal as fe } from "react-dom";
+import { arc as le, area as q, curveLinear as ue, curveMonotoneX as J, curveStep as de, line as Y, pie as fe } from "d3-shape";
+import { createPortal as pe } from "react-dom";
 //#region src/base/ChartCard/ChartCard.tsx
-function pe({ title: t, description: n, children: r, className: i, ...a }) {
-	return /* @__PURE__ */ G(O, {
+function me({ title: t, description: n, children: r, className: i, ...a }) {
+	return /* @__PURE__ */ G(k, {
 		className: e("flex h-full flex-col gap-0", i),
 		...a,
-		children: [/* @__PURE__ */ G(j, {
+		children: [/* @__PURE__ */ G(M, {
 			className: "min-h-[3.5rem]",
-			children: [/* @__PURE__ */ W(M, {
+			children: [/* @__PURE__ */ W(N, {
 				className: "text-lg font-semibold",
 				children: t
-			}), n && /* @__PURE__ */ W(A, {
+			}), n && /* @__PURE__ */ W(j, {
 				className: "truncate text-sm",
 				title: n,
 				children: n
 			})]
-		}), /* @__PURE__ */ W(k, {
+		}), /* @__PURE__ */ W(A, {
 			className: "flex-1",
 			children: r
 		})]
@@ -30,19 +30,19 @@ function pe({ title: t, description: n, children: r, className: i, ...a }) {
 }
 //#endregion
 //#region src/base/ChartTooltip/ChartTooltip.tsx
-function me(e) {
+function he(e) {
 	return typeof e == "number" ? e.toLocaleString() : e;
 }
-function he(e, t, n) {
+function ge(e, t, n) {
 	return t && e[t] ? e[t] : e[n];
 }
-function ge(e) {
+function _e(e) {
 	return e.toLocaleString();
 }
-function _e({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIndicator: o = !1, indicator: s = "dot", labelKey: c, nameKey: l, labelFormatter: u, labelClassName: d, valueFormatter: f, showTotal: p = !1, totalLabel: m = "Total", totalFormatter: h = ge, className: g, ..._ }) {
-	let { config: v } = t(), y = f ?? me, b = !f;
+function ve({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIndicator: o = !1, indicator: s = "dot", labelKey: c, nameKey: l, labelFormatter: u, labelClassName: d, valueFormatter: f, showTotal: p = !1, totalLabel: m = "Total", totalFormatter: h = _e, className: g, ..._ }) {
+	let { config: v } = t(), y = f ?? he, b = !f;
 	if (!i || r.length === 0) return null;
-	let x = r.length === 1 && s !== "dot", S = c ? he(v, c, c)?.label ?? n : typeof n == "string" ? v[n]?.label ?? n : n, C = u ? u(n ?? "", r) : S, w = a || !C && !u ? null : /* @__PURE__ */ W("div", {
+	let x = r.length === 1 && s !== "dot", S = c ? ge(v, c, c)?.label ?? n : typeof n == "string" ? v[n]?.label ?? n : n, C = u ? u(n ?? "", r) : S, w = a || !C && !u ? null : /* @__PURE__ */ W("div", {
 		className: e("font-medium", d),
 		children: C
 	});
@@ -55,7 +55,7 @@ function _e({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIn
 			/* @__PURE__ */ W("div", {
 				className: "grid gap-1.5",
 				children: r.map((t, n) => {
-					let r = he(v, `${l ?? t.dataKey ?? t.name ?? "value"}`, t.name), i = t.color ?? `var(--color-${t.dataKey ?? t.name})`;
+					let r = ge(v, `${l ?? t.dataKey ?? t.name ?? "value"}`, t.name), i = t.color ?? `var(--color-${T(t.dataKey ?? t.name)})`;
 					return /* @__PURE__ */ G("div", {
 						className: e("flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", s === "dot" && "items-center"),
 						children: [r?.icon ? /* @__PURE__ */ W(r.icon, {}) : !o && /* @__PURE__ */ W("div", {
@@ -99,25 +99,25 @@ function _e({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIn
 		]
 	});
 }
-function ve({ content: e }) {
-	let { setTooltip: t } = u();
-	return R.useLayoutEffect(() => (t({ content: e }), () => t(null)), [e, t]), null;
+function ye({ content: e }) {
+	let { setTooltip: t } = d();
+	return z.useLayoutEffect(() => (t({ content: e }), () => t(null)), [e, t]), null;
 }
 //#endregion
 //#region src/base/ChartLegend/ChartLegend.tsx
-var ye = {
+var be = {
 	start: "justify-start",
 	center: "justify-center",
 	end: "justify-end"
 };
-function be({ items: n = [], hideIcon: r = !1, nameKey: i, verticalAlign: a, align: o = "start", onItemHover: s, onItemLeave: c, hoveredLegendKey: l, className: u, ...d }) {
+function xe({ items: n = [], hideIcon: r = !1, nameKey: i, verticalAlign: a, align: o = "start", onItemHover: s, onItemLeave: c, hoveredLegendKey: l, className: u, ...d }) {
 	let { config: f } = t();
 	return n.length === 0 ? null : /* @__PURE__ */ W("div", {
 		"data-slot": "chart-legend-content",
-		className: e("flex items-center gap-4 overflow-hidden px-4 py-1", ye[o], u),
+		className: e("flex items-center gap-4 overflow-hidden px-4 py-1", be[o], u),
 		...d,
 		children: n.map((t) => {
-			let n = f[`${i ?? t.dataKey ?? t.value}`], a = t.color ?? `var(--color-${t.dataKey ?? t.value})`, o = t.dataKey ?? t.value;
+			let n = f[`${i ?? t.dataKey ?? t.value}`], a = t.color ?? `var(--color-${T(t.dataKey ?? t.value)})`, o = t.dataKey ?? t.value;
 			return /* @__PURE__ */ G("div", {
 				className: e("flex min-w-0 shrink items-center gap-1.5 text-xs transition-opacity duration-150 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground", s && "cursor-default rounded-sm px-1 py-0.5 hover:bg-muted/50", l != null && l !== o && "opacity-40"),
 				onPointerEnter: s ? () => s(o) : void 0,
@@ -134,9 +134,9 @@ function be({ items: n = [], hideIcon: r = !1, nameKey: i, verticalAlign: a, ali
 		})
 	});
 }
-function xe({ content: e, verticalAlign: t = "bottom" }) {
-	let { setLegend: n } = u();
-	return R.useLayoutEffect(() => (n({
+function Se({ content: e, verticalAlign: t = "bottom" }) {
+	let { setLegend: n } = d();
+	return z.useLayoutEffect(() => (n({
 		content: e,
 		verticalAlign: t
 	}), () => n(null)), [
@@ -147,14 +147,14 @@ function xe({ content: e, verticalAlign: t = "bottom" }) {
 }
 //#endregion
 //#region src/series/curves.ts
-var Se = {
+var Ce = {
 	monotone: J,
-	linear: le,
-	step: ue
-}, Ce = "\n@keyframes graphene-line-draw {\n  from { stroke-dashoffset: var(--path-length); }\n  to { stroke-dashoffset: 0; }\n}\n[data-graphene-chart-line][data-animated='true'] {\n  animation: graphene-line-draw 800ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-line][data-animated='true'] {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n}\n[data-graphene-chart-dot]:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n";
-function we({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1, connectNulls: i = !1 }) {
-	let { data: a, categoryScale: o, resolveValueScale: s, animated: c, hoveredCategory: l, hoveredLegendKey: u, config: d, valueTickFormatter: f, showTooltipAt: p, hideTooltip: m } = C(), h = s(t), g = R.useRef(null), [_, v] = R.useState(0), y = `var(--color-${e})`;
-	R.useLayoutEffect(() => {
+	linear: ue,
+	step: de
+}, we = "\n@keyframes graphene-line-draw {\n  from { stroke-dashoffset: var(--path-length); }\n  to { stroke-dashoffset: 0; }\n}\n[data-graphene-chart-line][data-animated='true'] {\n  animation: graphene-line-draw 800ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-line][data-animated='true'] {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n}\n[data-graphene-chart-dot]:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n";
+function Te({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1, connectNulls: i = !1 }) {
+	let { data: a, categoryScale: o, resolveValueScale: s, animated: c, hoveredCategory: l, hoveredLegendKey: u, config: d, valueTickFormatter: f, showTooltipAt: p, hideTooltip: m } = w(), h = s(t), g = z.useRef(null), [_, v] = z.useState(0), y = `var(--color-${T(e)})`;
+	z.useLayoutEffect(() => {
 		g.current && v(g.current.getTotalLength());
 	}, [
 		a,
@@ -164,7 +164,7 @@ function we({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 		n,
 		i
 	]);
-	let b = Se[n], x = typeof d[e]?.label == "string" ? d[e]?.label : e, S = [];
+	let b = Ce[n], x = typeof d[e]?.label == "string" ? d[e]?.label : e, S = [];
 	for (let t of a) {
 		let n = t[e];
 		if (n == null) {
@@ -188,7 +188,7 @@ function we({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 			value: r
 		});
 	}
-	let w = Y().x((e) => e.x).y((e) => e.y).curve(b).defined((e) => e.defined)(S) ?? "";
+	let C = Y().x((e) => e.x).y((e) => e.y).curve(b).defined((e) => e.defined)(S) ?? "";
 	return /* @__PURE__ */ G("g", {
 		style: {
 			opacity: u !== null && u !== e ? .15 : 1,
@@ -197,11 +197,11 @@ function we({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 		children: [
 			/* @__PURE__ */ W("style", {
 				precedence: "graphene-charts",
-				children: Ce
+				children: we
 			}),
 			/* @__PURE__ */ W("path", {
 				ref: g,
-				d: w,
+				d: C,
 				fill: "none",
 				stroke: y,
 				strokeWidth: 2.5,
@@ -249,32 +249,32 @@ function we({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 		]
 	});
 }
-we.seriesType = "LineSeries";
+Te.seriesType = "LineSeries";
 //#endregion
 //#region src/series/BarSeries.tsx
-var Te = "\n[data-graphene-chart-bar] {\n  fill-opacity: 0.7;\n}\n[data-graphene-chart-bar][data-animated='true'] {\n  transform-box: fill-box;\n  transform-origin: center bottom;\n  transition:\n    transform 450ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 250ms ease-out;\n}\n[data-graphene-chart-bar][data-animated='true'][data-layout='horizontal'] {\n  transform-origin: left center;\n}\n@starting-style {\n  [data-graphene-chart-bar][data-animated='true'] {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n  [data-graphene-chart-bar][data-animated='true'][data-layout='horizontal'] {\n    transform: scaleX(0);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-bar][data-animated='true'] {\n    transition: none;\n  }\n  @starting-style {\n    [data-graphene-chart-bar][data-animated='true'] {\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n[data-graphene-chart-bar]:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n";
-function Ee({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
-	let { data: i, categoryScale: a, resolveValueScale: o, innerHeight: s, layout: c, animated: l, hoveredLegendKey: u, config: d, stackedLayers: f, barGroupScale: p, valueTickFormatter: m, chartWrapperRef: h, chartId: g, showTooltipAt: _, hideTooltip: y } = C(), b = o(t), x = c === "vertical", w = `var(--color-${e})`, T = typeof d[e]?.label == "string" ? d[e]?.label : e, [E, D] = S("var(--chart-bar-radius, 3px)", 3), O = r ?? E, [k, A] = R.useState(null);
-	R.useEffect(() => {
-		A(h.current);
+var Ee = "\n[data-graphene-chart-bar] {\n  fill-opacity: 0.7;\n}\n[data-graphene-chart-bar][data-animated='true'] {\n  transform-box: fill-box;\n  transform-origin: center bottom;\n  transition:\n    transform 450ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 250ms ease-out;\n}\n[data-graphene-chart-bar][data-animated='true'][data-layout='horizontal'] {\n  transform-origin: left center;\n}\n@starting-style {\n  [data-graphene-chart-bar][data-animated='true'] {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n  [data-graphene-chart-bar][data-animated='true'][data-layout='horizontal'] {\n    transform: scaleX(0);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-bar][data-animated='true'] {\n    transition: none;\n  }\n  @starting-style {\n    [data-graphene-chart-bar][data-animated='true'] {\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n[data-graphene-chart-bar]:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n";
+function De({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
+	let { data: i, categoryScale: a, resolveValueScale: o, innerHeight: s, layout: c, animated: l, hoveredLegendKey: u, config: d, stackedLayers: f, barGroupScale: p, valueTickFormatter: m, chartWrapperRef: h, chartId: g, showTooltipAt: _, hideTooltip: v } = w(), b = o(t), x = c === "vertical", S = `var(--color-${T(e)})`, E = typeof d[e]?.label == "string" ? d[e]?.label : e, [D, O] = C("var(--chart-bar-radius, 3px)", 3), k = r ?? D, [A, j] = z.useState(null);
+	z.useEffect(() => {
+		j(h.current);
 	}, [h]);
-	let j = n ? f.get(n)?.find((t) => t.key === e) : void 0, M = n ? f.get(n) ?? null : null, N = R.useMemo(() => !M || M.length === 0 ? !1 : M[0].key === e, [M, e]), P = R.useMemo(() => {
-		if (!N || !M || M.length === 0) return null;
-		let e = M[M.length - 1];
+	let M = n ? f.get(n)?.find((t) => t.key === e) : void 0, N = n ? f.get(n) ?? null : null, P = z.useMemo(() => !N || N.length === 0 ? !1 : N[0].key === e, [N, e]), F = z.useMemo(() => {
+		if (!P || !N || N.length === 0) return null;
+		let e = N[N.length - 1];
 		return i.map((t, r) => {
 			let i = e[r][1], o = `stack-clip-${g}-${n}-${r}`, c;
 			if (x) {
 				let e = a(t.category) ?? 0, n = b(i);
-				c = v(e, n, a.bandwidth(), s - n, {
-					tl: O,
-					tr: O,
+				c = y(e, n, a.bandwidth(), s - n, {
+					tl: k,
+					tr: k,
 					br: 0,
 					bl: 0
 				});
-			} else c = v(0, a(t.category) ?? 0, b(i), a.bandwidth(), {
+			} else c = y(0, a(t.category) ?? 0, b(i), a.bandwidth(), {
 				tl: 0,
-				tr: O,
-				br: O,
+				tr: k,
+				br: k,
 				bl: 0
 			});
 			return {
@@ -283,15 +283,15 @@ function Ee({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
 			};
 		});
 	}, [
+		P,
 		N,
-		M,
 		i,
 		g,
 		n,
 		a,
 		b,
 		s,
-		O,
+		k,
 		x
 	]);
 	return /* @__PURE__ */ G("g", {
@@ -302,52 +302,52 @@ function Ee({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
 		children: [
 			/* @__PURE__ */ W("style", {
 				precedence: "graphene-charts",
-				children: Te
+				children: Ee
 			}),
-			k && fe(D, k),
-			P && /* @__PURE__ */ W("defs", { children: P.map(({ clipId: e, path: t }) => /* @__PURE__ */ W("clipPath", {
+			A && pe(O, A),
+			F && /* @__PURE__ */ W("defs", { children: F.map(({ clipId: e, path: t }) => /* @__PURE__ */ W("clipPath", {
 				id: e,
 				children: /* @__PURE__ */ W("path", { d: t })
 			}, e)) }),
 			i.map((t, r) => {
-				let i = Number(t[e]) || 0, o = `${t.category} — ${T}: ${m(i)}`, c = "";
-				if (x && !j) {
+				let i = Number(t[e]) || 0, o = `${t.category} — ${E}: ${m(i)}`, c = "";
+				if (x && !M) {
 					let n = p ? p(e) ?? 0 : 0, r = p ? p.bandwidth() : a.bandwidth();
-					c = v((a(t.category) ?? 0) + n, b(i), r, s - b(i), {
-						tl: O,
-						tr: O,
+					c = y((a(t.category) ?? 0) + n, b(i), r, s - b(i), {
+						tl: k,
+						tr: k,
 						br: 0,
 						bl: 0
 					});
-				} else if (x && j) {
-					let e = j[r], n = b(e[1]), i = b(e[0]) - n;
-					c = v(a(t.category) ?? 0, n, a.bandwidth(), i, {
+				} else if (x && M) {
+					let e = M[r], n = b(e[1]), i = b(e[0]) - n;
+					c = y(a(t.category) ?? 0, n, a.bandwidth(), i, {
 						tl: 0,
 						tr: 0,
 						br: 0,
 						bl: 0
 					});
-				} else if (!x && !j) {
+				} else if (!x && !M) {
 					let n = p ? p(e) ?? 0 : 0, r = p ? p.bandwidth() : a.bandwidth();
-					c = v(0, (a(t.category) ?? 0) + n, b(i), r, {
+					c = y(0, (a(t.category) ?? 0) + n, b(i), r, {
 						tl: 0,
-						tr: O,
-						br: O,
+						tr: k,
+						br: k,
 						bl: 0
 					});
-				} else if (!x && j) {
-					let e = j[r], n = b(e[0]), i = b(e[1]) - n;
-					c = v(n, a(t.category) ?? 0, i, a.bandwidth(), {
+				} else if (!x && M) {
+					let e = M[r], n = b(e[0]), i = b(e[1]) - n;
+					c = y(n, a(t.category) ?? 0, i, a.bandwidth(), {
 						tl: 0,
 						tr: 0,
 						br: 0,
 						bl: 0
 					});
 				}
-				let u = j ? `url(#stack-clip-${g}-${n}-${r})` : void 0;
+				let u = M ? `url(#stack-clip-${g}-${n}-${r})` : void 0;
 				return /* @__PURE__ */ W("path", {
 					d: c,
-					fill: w,
+					fill: S,
 					tabIndex: 0,
 					role: "img",
 					"aria-label": o,
@@ -357,19 +357,19 @@ function Ee({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
 					className: "transition-opacity hover:opacity-80 focus:outline-none",
 					clipPath: u,
 					onFocus: (e) => _(t.category, e.currentTarget.getBoundingClientRect()),
-					onBlur: y
+					onBlur: v
 				}, `${e}-${t.category}`);
 			})
 		]
 	});
 }
-Ee.seriesType = "BarSeries";
+De.seriesType = "BarSeries";
 //#endregion
 //#region src/series/AreaSeries.tsx
-var De = "\n@keyframes graphene-line-draw {\n  from { stroke-dashoffset: var(--path-length); }\n  to { stroke-dashoffset: 0; }\n}\n[data-graphene-chart-line][data-animated='true'] {\n  animation: graphene-line-draw 800ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n@keyframes graphene-area-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n[data-graphene-chart-area][data-animated='true'] {\n  animation: graphene-area-fade-in 600ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-line][data-animated='true'] {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n  [data-graphene-chart-area][data-animated='true'] {\n    animation: none;\n    opacity: 1;\n  }\n}\n";
-function Oe({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fillOpacity: i = .2, gradient: a = !0, connectNulls: o = !1 }) {
-	let { data: s, categoryScale: c, resolveValueScale: l, innerHeight: u, animated: d, hoveredCategory: f, hoveredLegendKey: p, stackedLayers: m, chartId: h } = C(), g = l(t), _ = R.useRef(null), [v, y] = R.useState(0), b = `var(--color-${e})`, x = Se[r];
-	R.useLayoutEffect(() => {
+var Oe = "\n@keyframes graphene-line-draw {\n  from { stroke-dashoffset: var(--path-length); }\n  to { stroke-dashoffset: 0; }\n}\n[data-graphene-chart-line][data-animated='true'] {\n  animation: graphene-line-draw 800ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n@keyframes graphene-area-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n[data-graphene-chart-area][data-animated='true'] {\n  animation: graphene-area-fade-in 600ms cubic-bezier(0.32, 0.72, 0, 1) forwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-line][data-animated='true'] {\n    animation: none;\n    stroke-dashoffset: 0;\n  }\n  [data-graphene-chart-area][data-animated='true'] {\n    animation: none;\n    opacity: 1;\n  }\n}\n";
+function ke({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fillOpacity: i = .2, gradient: a = !0, connectNulls: o = !1 }) {
+	let { data: s, categoryScale: c, resolveValueScale: l, innerHeight: u, animated: d, hoveredCategory: f, hoveredLegendKey: p, stackedLayers: m, chartId: h } = w(), g = l(t), _ = z.useRef(null), [v, y] = z.useState(0), b = `var(--color-${T(e)})`, x = Ce[r];
+	z.useLayoutEffect(() => {
 		_.current && y(_.current.getTotalLength());
 	}, [
 		s,
@@ -380,12 +380,12 @@ function Oe({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 		o,
 		n
 	]);
-	let S = n ? m.get(n)?.find((t) => t.key === e) : void 0, w = `area-gradient-${h}-${e}`, T = a ? `url(#${w})` : b, E = c.domain(), D = "", O = "", k = null, A = null;
+	let S = n ? m.get(n)?.find((t) => t.key === e) : void 0, C = `area-gradient-${h}-${e}`, E = a ? `url(#${C})` : b, D = c.domain(), O = "", k = "", A = null, j = null;
 	if (S) {
-		let t = (t) => o ? !0 : s[t]?.[e] != null, n = q().x((e) => (c(E[e]) ?? 0) + c.bandwidth() / 2).y0((e) => g(S[e][0])).y1((e) => g(S[e][1])).defined(t).curve(x), r = Y().x((e) => (c(E[e]) ?? 0) + c.bandwidth() / 2).y((e) => g(S[e][1])).defined(t).curve(x), i = E.map((e, t) => t);
-		if (D = n(i) ?? "", O = r(i) ?? "", f !== null) {
-			let e = E.indexOf(f);
-			e !== -1 && t(e) && (k = (c(f) ?? 0) + c.bandwidth() / 2, A = g(S[e][1]));
+		let t = (t) => o ? !0 : s[t]?.[e] != null, n = q().x((e) => (c(D[e]) ?? 0) + c.bandwidth() / 2).y0((e) => g(S[e][0])).y1((e) => g(S[e][1])).defined(t).curve(x), r = Y().x((e) => (c(D[e]) ?? 0) + c.bandwidth() / 2).y((e) => g(S[e][1])).defined(t).curve(x), i = D.map((e, t) => t);
+		if (O = n(i) ?? "", k = r(i) ?? "", f !== null) {
+			let e = D.indexOf(f);
+			e !== -1 && t(e) && (A = (c(f) ?? 0) + c.bandwidth() / 2, j = g(S[e][1]));
 		}
 	} else {
 		let t = [];
@@ -411,9 +411,9 @@ function Oe({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 			});
 		}
 		let n = (e) => e.defined, r = Y().x((e) => e.x).y((e) => e.y).curve(x).defined(n), i = q().x((e) => e.x).y0(u).y1((e) => e.y).curve(x).defined(n);
-		if (O = r(t) ?? "", D = i(t) ?? "", f !== null) {
+		if (k = r(t) ?? "", O = i(t) ?? "", f !== null) {
 			let e = t.find((e) => e.category === f && e.defined);
-			e && (k = e.x, A = e.y);
+			e && (A = e.x, j = e.y);
 		}
 	}
 	return /* @__PURE__ */ G("g", {
@@ -424,10 +424,10 @@ function Oe({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 		children: [
 			/* @__PURE__ */ W("style", {
 				precedence: "graphene-charts",
-				children: De
+				children: Oe
 			}),
 			a && /* @__PURE__ */ W("defs", { children: /* @__PURE__ */ G("linearGradient", {
-				id: w,
+				id: C,
 				x1: "0",
 				y1: "0",
 				x2: "0",
@@ -443,15 +443,15 @@ function Oe({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 				})]
 			}) }),
 			/* @__PURE__ */ W("path", {
-				d: D,
-				fill: T,
+				d: O,
+				fill: E,
 				fillOpacity: a ? 1 : i,
 				"data-graphene-chart-area": !0,
 				"data-animated": d ? "true" : "false"
 			}),
 			/* @__PURE__ */ W("path", {
 				ref: _,
-				d: O,
+				d: k,
 				fill: "none",
 				stroke: b,
 				strokeWidth: 2,
@@ -465,9 +465,9 @@ function Oe({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 					strokeDashoffset: v
 				} : void 0
 			}),
-			k !== null && A !== null && /* @__PURE__ */ W("circle", {
-				cx: k,
-				cy: A,
+			A !== null && j !== null && /* @__PURE__ */ W("circle", {
+				cx: A,
+				cy: j,
 				r: 5,
 				fill: b,
 				stroke: "var(--background)",
@@ -477,10 +477,10 @@ function Oe({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 		]
 	});
 }
-Oe.seriesType = "AreaSeries";
+ke.seriesType = "AreaSeries";
 //#endregion
 //#region src/lib/inferDataKeys.ts
-function ke(e, t) {
+function Ae(e, t) {
 	if (e.length === 0) return [];
 	let n = /* @__PURE__ */ new Set(), r = [];
 	for (let t of e) for (let e of Object.keys(t)) {
@@ -493,66 +493,66 @@ function ke(e, t) {
 }
 //#endregion
 //#region src/charts/BarChart/BarChart.tsx
-var Ae = 120;
-function je({ data: e, dataKeys: n, state: r, layout: i = "vertical", variant: o = "grouped", margin: s, barRadius: l, showGrid: u = !0, showCategoryAxis: d = !0, showValueAxis: m = !0, valueTickFormatter: g, ariaLabel: _, animated: v = !0, onBarHover: y, onBarLeave: b, className: x, children: S, ...C }) {
-	let { config: w } = t(), T = n ?? ke(e, Object.keys(w)), E = i === "vertical", D = o === "stacked" ? "default" : void 0, O = E ? s : {
-		left: Ae,
+var je = 120;
+function Me({ data: e, dataKeys: n, state: r, layout: i = "vertical", variant: a = "grouped", margin: s, barRadius: c, showGrid: u = !0, showCategoryAxis: d = !0, showValueAxis: f = !0, valueTickFormatter: h, ariaLabel: _, animated: v = !0, onBarHover: y, onBarLeave: b, className: x, children: S, ...C }) {
+	let { config: w } = t(), T = n ?? Ae(e, Object.keys(w)), E = i === "vertical", D = a === "stacked" ? "default" : void 0, O = E ? s : {
+		left: je,
 		...s
 	};
-	return r === "loading" ? /* @__PURE__ */ W(c, {
+	return r === "loading" ? /* @__PURE__ */ W(l, {
 		ariaLabel: _,
 		className: x,
 		...C
-	}) : /* @__PURE__ */ G(p, {
+	}) : /* @__PURE__ */ G(m, {
 		data: e,
 		state: r,
 		categoryPadding: .1,
 		layout: i,
 		animated: v,
 		ariaLabel: _,
-		valueTickFormatter: g,
+		valueTickFormatter: h,
 		margin: O,
 		onPointHover: y,
 		onPointLeave: b,
 		className: x,
 		...C,
 		children: [
-			u && /* @__PURE__ */ W(a, { orientation: E ? "horizontal" : "vertical" }),
-			T.map((e) => /* @__PURE__ */ W(Ee, {
+			u && /* @__PURE__ */ W(o, { orientation: E ? "horizontal" : "vertical" }),
+			T.map((e) => /* @__PURE__ */ W(De, {
 				dataKey: e,
 				stackId: D,
-				barRadius: l
+				barRadius: c
 			}, e)),
-			d && /* @__PURE__ */ W(h, { orientation: E ? "bottom" : "left" }),
-			m && /* @__PURE__ */ W(f, { orientation: E ? "left" : "bottom" }),
+			d && /* @__PURE__ */ W(g, { orientation: E ? "bottom" : "left" }),
+			f && /* @__PURE__ */ W(p, { orientation: E ? "left" : "bottom" }),
 			S
 		]
 	});
 }
 //#endregion
 //#region src/charts/DoughnutChart/DoughnutChart.tsx
-var Me = {
+var Ne = {
 	top: 10,
 	right: 10,
 	bottom: 10,
 	left: 10
-}, Ne = {
+}, Pe = {
 	top: 30,
 	right: 60,
 	bottom: 30,
 	left: 60
-}, Pe = 50, Fe = "\n[data-graphene-chart-doughnut-segment][data-animated='true'] {\n  transform-box: fill-box;\n  transform-origin: center center;\n  transition:\n    transform 500ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 300ms ease-out;\n}\n@starting-style {\n  [data-graphene-chart-doughnut-segment][data-animated='true'] {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-doughnut-segment][data-animated='true'] {\n    transition: none;\n  }\n  @starting-style {\n    [data-graphene-chart-doughnut-segment][data-animated='true'] {\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n[data-graphene-chart-doughnut-segment]:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n";
-function Ie({ state: e, data: t, innerRadius: n, padAngle: r, cornerRadius: i, labels: a, centerContent: o, startAngle: s, animated: c, tooltipLabel: u, onSegmentHover: d, onSegmentLeave: f, ariaLabel: p, margin: h, className: g, children: v, ...y }) {
-	let b = m(e, t.length);
-	return b === "loading" ? /* @__PURE__ */ W(x, {
+}, Fe = 50, Ie = "\n[data-graphene-chart-doughnut-segment][data-animated='true'] {\n  transform-box: fill-box;\n  transform-origin: center center;\n  transition:\n    transform 500ms cubic-bezier(0.32, 0.72, 0, 1),\n    opacity 300ms ease-out;\n}\n@starting-style {\n  [data-graphene-chart-doughnut-segment][data-animated='true'] {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-graphene-chart-doughnut-segment][data-animated='true'] {\n    transition: none;\n  }\n  @starting-style {\n    [data-graphene-chart-doughnut-segment][data-animated='true'] {\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n[data-graphene-chart-doughnut-segment]:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n";
+function Le({ state: e, data: t, innerRadius: n, padAngle: r, cornerRadius: i, labels: a, centerContent: o, startAngle: s, animated: c, tooltipLabel: l, onSegmentHover: d, onSegmentLeave: f, ariaLabel: p, margin: m, className: g, children: _, ...y }) {
+	let b = h(e, t.length);
+	return b === "loading" ? /* @__PURE__ */ W(S, {
 		ariaLabel: p,
 		className: g,
 		...y
-	}) : b === "empty" ? /* @__PURE__ */ W(_, {
+	}) : b === "empty" ? /* @__PURE__ */ W(v, {
 		ariaLabel: p ?? "Doughnut chart with 0 segments",
 		className: g,
 		...y
-	}) : /* @__PURE__ */ W(l, { children: /* @__PURE__ */ W(Le, {
+	}) : /* @__PURE__ */ W(u, { children: /* @__PURE__ */ W(Re, {
 		data: t,
 		innerRadius: n,
 		padAngle: r,
@@ -561,40 +561,40 @@ function Ie({ state: e, data: t, innerRadius: n, padAngle: r, cornerRadius: i, l
 		centerContent: o,
 		startAngle: s,
 		animated: c,
-		tooltipLabel: u,
+		tooltipLabel: l,
 		onSegmentHover: d,
 		onSegmentLeave: f,
 		ariaLabel: p,
-		margin: h,
+		margin: m,
 		className: g,
 		...y,
-		children: v
+		children: _
 	}) });
 }
-function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a = 8, labels: c, centerContent: l, startAngle: d = -Math.PI / 2, animated: f = !0, tooltipLabel: p, onSegmentHover: m, onSegmentLeave: h, ariaLabel: g, margin: _, className: v, children: y, ...b }) {
-	let { config: x, id: S } = t(), { tooltip: C, legend: w } = u(), T = c !== void 0, D = {
-		...T ? Ne : Me,
+function Re({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a = 8, labels: o, centerContent: l, startAngle: u = -Math.PI / 2, animated: f = !0, tooltipLabel: p, onSegmentHover: m, onSegmentLeave: h, ariaLabel: g, margin: _, className: v, children: y, ...b }) {
+	let { config: x, id: S } = t(), { tooltip: C, legend: w } = d(), E = o !== void 0, O = {
+		...E ? Pe : Ne,
 		..._
-	}, O = R.useRef(null), k = R.useRef(null), A = s(k), j = E(), [M, N] = R.useState(null), P = R.useCallback((e) => N(e), []), ee = R.useCallback(() => N(null), []), [F, te] = R.useState(null), ne = Math.max(0, A.width - D.left - D.right), re = Math.max(0, A.height - D.top - D.bottom), I = Math.min(ne, re) / 2, L = I * r, z = R.useMemo(() => n.reduce((e, t) => e + t.value, 0), [n]), B = R.useMemo(() => de().value((e) => e.value).sort(null).startAngle(d).endAngle(d + Math.PI * 2), [d]), V = R.useMemo(() => n.length > 0 ? B(n) : [], [B, n]), ie = R.useMemo(() => ce().innerRadius(L).outerRadius(I).padAngle(i).cornerRadius(a), [
+	}, k = z.useRef(null), A = z.useRef(null), j = c(A), M = D(), [N, P] = z.useState(null), F = z.useCallback((e) => P(e), []), ee = z.useCallback(() => P(null), []), [I, te] = z.useState(null), ne = Math.max(0, j.width - O.left - O.right), re = Math.max(0, j.height - O.top - O.bottom), L = Math.min(ne, re) / 2, R = L * r, B = z.useMemo(() => n.reduce((e, t) => e + t.value, 0), [n]), V = z.useMemo(() => fe().value((e) => e.value).sort(null).startAngle(u).endAngle(u + Math.PI * 2), [u]), H = z.useMemo(() => n.length > 0 ? V(n) : [], [V, n]), ie = z.useMemo(() => le().innerRadius(R).outerRadius(L).padAngle(i).cornerRadius(a), [
+		R,
 		L,
-		I,
 		i,
 		a
-	]), ae = R.useMemo(() => ce().innerRadius(I * 1.05).outerRadius(I * 1.05), [I]), H = R.useMemo(() => ce().innerRadius(I * 1.2).outerRadius(I * 1.2), [I]), oe = n.map((e) => ({
+	]), ae = z.useMemo(() => le().innerRadius(L * 1.05).outerRadius(L * 1.05), [L]), U = z.useMemo(() => le().innerRadius(L * 1.2).outerRadius(L * 1.2), [L]), oe = n.map((e) => ({
 		dataKey: e.category,
 		value: e.category
 	}));
 	function se(e) {
-		if (!c) return "";
-		if (typeof c == "function") return c(e, z);
-		switch (c) {
+		if (!o) return "";
+		if (typeof o == "function") return o(e, B);
+		switch (o) {
 			case "category": return typeof x[e.category]?.label == "string" ? x[e.category]?.label : e.category;
 			case "value": return e.value.toLocaleString();
-			case "percent": return z > 0 ? `${(e.value / z * 100).toFixed(1)}%` : "0%";
+			case "percent": return B > 0 ? `${(e.value / B * 100).toFixed(1)}%` : "0%";
 		}
 	}
 	function K(e) {
-		let t = z > 0 ? (e.value / z * 100).toFixed(1) : "0";
+		let t = B > 0 ? (e.value / B * 100).toFixed(1) : "0";
 		return [{
 			dataKey: e.category,
 			name: e.category,
@@ -605,80 +605,80 @@ function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 	function q(e, t) {
 		let n = K(e);
 		if (C) {
-			let e = O.current?.getBoundingClientRect();
-			e && j.show(n, p ?? "", t, e);
+			let e = k.current?.getBoundingClientRect();
+			e && M.show(n, p ?? "", t, e);
 		}
 		m?.(e, t);
 	}
-	function le(e) {
+	function ue(e) {
 		if (!C) return;
-		let t = O.current?.getBoundingClientRect();
-		t && j.move(e, t);
+		let t = k.current?.getBoundingClientRect();
+		t && M.move(e, t);
 	}
 	function J() {
-		j.hide(), h?.();
+		M.hide(), h?.();
 	}
-	function ue(e, t, n) {
+	function de(e, t, n) {
 		if (!C) return;
-		let r = O.current?.getBoundingClientRect();
+		let r = k.current?.getBoundingClientRect();
 		if (!r) return;
-		let i = ie.centroid(t), a = A.width / 2 + i[0], o = A.height / 2 + i[1], s = K(e), c = {
+		let i = ie.centroid(t), a = j.width / 2 + i[0], o = j.height / 2 + i[1], s = K(e), c = {
 			clientX: r.left + a,
 			clientY: r.top + o
 		};
-		j.show(s, p ?? "", c, r);
+		M.show(s, p ?? "", c, r);
 	}
 	function Y() {
-		j.hide();
+		M.hide();
 	}
-	let fe = w?.verticalAlign ?? "bottom", pe = g ?? `Doughnut chart with ${n.length} segment${n.length === 1 ? "" : "s"}`;
-	return /* @__PURE__ */ G(U, { children: [
+	let pe = w?.verticalAlign ?? "bottom", me = g ?? `Doughnut chart with ${n.length} segment${n.length === 1 ? "" : "s"}`;
+	return /* @__PURE__ */ G(ce, { children: [
 		/* @__PURE__ */ W("style", {
 			precedence: "graphene-charts",
-			children: Fe
+			children: Ie
 		}),
 		y,
 		/* @__PURE__ */ G("div", {
 			className: e("flex h-full w-full flex-col", v),
 			...b,
 			children: [
-				w && fe === "top" && R.cloneElement(w.content, {
+				w && pe === "top" && z.cloneElement(w.content, {
 					items: oe,
 					verticalAlign: "top",
-					onItemHover: P,
+					onItemHover: F,
 					onItemLeave: ee,
-					hoveredLegendKey: M
+					hoveredLegendKey: N
 				}),
 				/* @__PURE__ */ G("div", {
-					ref: O,
+					ref: k,
 					className: "relative min-h-0 flex-1",
 					children: [
 						/* @__PURE__ */ W("svg", {
-							ref: k,
+							ref: A,
 							role: "img",
-							"aria-label": pe,
+							"aria-label": me,
 							className: "h-full w-full",
-							children: A.width > 0 && A.height > 0 && /* @__PURE__ */ W("g", {
-								transform: `translate(${A.width / 2},${A.height / 2})`,
-								children: V.map((e) => {
-									let t = e.data, n = `var(--color-${t.category})`, r = z > 0 ? (t.value / z * 100).toFixed(1) : "0", i = `${typeof x[t.category]?.label == "string" ? x[t.category]?.label : t.category}: ${t.value.toLocaleString()} (${r}%)`;
+							children: j.width > 0 && j.height > 0 && /* @__PURE__ */ W("g", {
+								transform: `translate(${j.width / 2},${j.height / 2})`,
+								children: H.map((e) => {
+									let t = e.data, n = x[t.category], r = n?.color ?? `var(--color-${T(t.category)})`, i = B > 0 ? (t.value / B * 100).toFixed(1) : "0", a = `${typeof n?.label == "string" ? n.label : t.category}: ${t.value.toLocaleString()} (${i}%)`;
 									return /* @__PURE__ */ G("g", { children: [/* @__PURE__ */ W("path", {
 										d: ie(e) ?? "",
-										fill: n,
+										fill: r,
 										tabIndex: 0,
 										role: "img",
-										"aria-label": i,
+										"aria-label": a,
 										"data-graphene-chart-doughnut-segment": !0,
 										"data-animated": f ? "true" : "false",
 										className: "transition-opacity duration-150 hover:opacity-80 focus:outline-none",
-										style: M === null ? void 0 : { opacity: M === t.category ? 1 : .15 },
+										style: N === null ? void 0 : { opacity: N === t.category ? 1 : .15 },
 										onMouseEnter: (e) => q(t, e),
-										onMouseMove: le,
+										onMouseMove: ue,
 										onMouseLeave: J,
-										onFocus: (n) => ue(t, e, n),
+										onFocus: (n) => de(t, e, n),
 										onBlur: Y
-									}), T && (() => {
-										let n = (e.startAngle + e.endAngle) / 2, r = n < Math.PI / 2 || n > 3 * Math.PI / 2, i = ae.centroid(e), a = H.centroid(e), o = a[0] + (r ? 8 : -8), s = a[1], c = o + (r ? 4 : -4), l = se(t), u = l.length > 7, d = u ? `${l.slice(0, 6)}…` : l, f = A.width / 2, p = A.height / 2;
+									}), E && (() => {
+										let n = (e.startAngle + e.endAngle) / 2, r = n < Math.PI / 2 || n > 3 * Math.PI / 2, i = ae.centroid(e), a = U.centroid(e), o = a[0] + (r ? 8 : -8), s = a[1], c = o + (r ? 4 : -4), l = se(t), u = l.length > 7, d = u ? `${l.slice(0, 6)}…` : l, f = j.width / 2, p = j.height / 2;
 										return /* @__PURE__ */ G("g", {
 											"aria-hidden": "true",
 											className: "cursor-default",
@@ -704,9 +704,9 @@ function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 													children: d
 												}),
 												u && /* @__PURE__ */ W("rect", {
-													x: r ? c : c - Pe,
+													x: r ? c : c - Fe,
 													y: s - 8,
-													width: Pe,
+													width: Fe,
 													height: 16,
 													fill: "transparent"
 												})
@@ -716,7 +716,7 @@ function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 								})
 							})
 						}),
-						l && A.width > 0 && A.height > 0 && /* @__PURE__ */ W("div", {
+						l && j.width > 0 && j.height > 0 && /* @__PURE__ */ W("div", {
 							className: "pointer-events-none absolute inset-0 flex items-center justify-center",
 							"aria-hidden": "true",
 							children: /* @__PURE__ */ W("div", {
@@ -724,19 +724,19 @@ function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 								children: l
 							})
 						}),
-						F && /* @__PURE__ */ W("div", {
+						I && /* @__PURE__ */ W("div", {
 							className: "pointer-events-none absolute z-10 rounded-md border border-border/50 bg-background px-2 py-1 text-xs shadow-md",
 							style: {
-								left: F.x,
-								top: F.y,
+								left: I.x,
+								top: I.y,
 								transform: "translate(-50%, -130%)"
 							},
-							children: F.text
+							children: I.text
 						}),
 						/* @__PURE__ */ W("div", {
 							className: "sr-only",
 							children: /* @__PURE__ */ G("table", { children: [
-								/* @__PURE__ */ W("caption", { children: pe }),
+								/* @__PURE__ */ W("caption", { children: me }),
 								/* @__PURE__ */ W("thead", { children: /* @__PURE__ */ G("tr", { children: [
 									/* @__PURE__ */ W("th", {
 										scope: "col",
@@ -752,7 +752,7 @@ function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 									})
 								] }) }),
 								/* @__PURE__ */ W("tbody", { children: n.map((e) => {
-									let t = z > 0 ? (e.value / z * 100).toFixed(1) : "0";
+									let t = B > 0 ? (e.value / B * 100).toFixed(1) : "0";
 									return /* @__PURE__ */ G("tr", { children: [
 										/* @__PURE__ */ W("th", {
 											scope: "row",
@@ -764,24 +764,24 @@ function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 								}) })
 							] })
 						}),
-						C && j.state && /* @__PURE__ */ W(o, {
-							state: j.state,
-							containerRef: O,
+						C && M.state && /* @__PURE__ */ W(s, {
+							state: M.state,
+							containerRef: k,
 							chartId: S,
-							children: R.cloneElement(C.content, {
-								label: j.state.label,
-								items: j.state.items,
+							children: z.cloneElement(C.content, {
+								label: M.state.label,
+								items: M.state.items,
 								active: !0
 							})
 						})
 					]
 				}),
-				w && fe === "bottom" && R.cloneElement(w.content, {
+				w && pe === "bottom" && z.cloneElement(w.content, {
 					items: oe,
 					verticalAlign: "bottom",
-					onItemHover: P,
+					onItemHover: F,
 					onItemLeave: ee,
-					hoveredLegendKey: M
+					hoveredLegendKey: N
 				})
 			]
 		})
@@ -789,10 +789,10 @@ function Le({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 }
 //#endregion
 //#region ../../node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
-var Re = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), ze = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Be = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), Ve = (e) => {
-	let t = Be(e);
+var ze = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), Be = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Ve = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), He = (e) => {
+	let t = Ve(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, He = {
+}, Ue = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -802,40 +802,40 @@ var Re = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, Ue = (e) => {
+}, We = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, We = z({}), Ge = () => ae(We), Ke = V(({ color: e, size: t, strokeWidth: n, absoluteStrokeWidth: r, className: i = "", children: a, iconNode: o, ...s }, c) => {
-	let { size: l = 24, strokeWidth: u = 2, absoluteStrokeWidth: d = !1, color: f = "currentColor", className: p = "" } = Ge() ?? {}, m = r ?? d ? Number(n ?? u) * 24 / Number(t ?? l) : n ?? u;
-	return B("svg", {
+}, Ge = B({}), Ke = () => ae(Ge), qe = H(({ color: e, size: t, strokeWidth: n, absoluteStrokeWidth: r, className: i = "", children: a, iconNode: o, ...s }, c) => {
+	let { size: l = 24, strokeWidth: u = 2, absoluteStrokeWidth: d = !1, color: f = "currentColor", className: p = "" } = Ke() ?? {}, m = r ?? d ? Number(n ?? u) * 24 / Number(t ?? l) : n ?? u;
+	return V("svg", {
 		ref: c,
-		...He,
-		width: t ?? l ?? He.width,
-		height: t ?? l ?? He.height,
+		...Ue,
+		width: t ?? l ?? Ue.width,
+		height: t ?? l ?? Ue.height,
 		stroke: e ?? f,
 		strokeWidth: m,
-		className: Re("lucide", p, i),
-		...!a && !Ue(s) && { "aria-hidden": "true" },
+		className: ze("lucide", p, i),
+		...!a && !We(s) && { "aria-hidden": "true" },
 		...s
-	}, [...o.map(([e, t]) => B(e, t)), ...Array.isArray(a) ? a : [a]]);
+	}, [...o.map(([e, t]) => V(e, t)), ...Array.isArray(a) ? a : [a]]);
 }), X = (e, t) => {
-	let n = V(({ className: n, ...r }, i) => B(Ke, {
+	let n = H(({ className: n, ...r }, i) => V(qe, {
 		ref: i,
 		iconNode: t,
-		className: Re(`lucide-${ze(Ve(e))}`, `lucide-${e}`, n),
+		className: ze(`lucide-${Be(He(e))}`, `lucide-${e}`, n),
 		...r
 	}));
-	return n.displayName = Ve(e), n;
-}, qe = X("activity", [["path", {
+	return n.displayName = He(e), n;
+}, Je = X("activity", [["path", {
 	d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
 	key: "169zse"
-}]]), Je = X("chevron-down", [["path", {
+}]]), Ye = X("chevron-down", [["path", {
 	d: "m6 9 6 6 6-6",
 	key: "qrunsl"
-}]]), Ye = X("chevron-right", [["path", {
+}]]), Xe = X("chevron-right", [["path", {
 	d: "m9 18 6-6-6-6",
 	key: "mthhwq"
-}]]), Xe = X("circle-x", [
+}]]), Ze = X("circle-x", [
 	["circle", {
 		cx: "12",
 		cy: "12",
@@ -850,7 +850,7 @@ var Re = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 		d: "m9 9 6 6",
 		key: "z0biqf"
 	}]
-]), Ze = X("clock", [["circle", {
+]), Qe = X("clock", [["circle", {
 	cx: "12",
 	cy: "12",
 	r: "10",
@@ -858,7 +858,7 @@ var Re = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 }], ["path", {
 	d: "M12 6v6l4 2",
 	key: "mmk7yg"
-}]]), Qe = X("server", [
+}]]), $e = X("server", [
 	["rect", {
 		width: "20",
 		height: "8",
@@ -891,19 +891,19 @@ var Re = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 		y2: "18",
 		key: "nzw8ys"
 	}]
-]), $e = X("trending-down", [["path", {
+]), et = X("trending-down", [["path", {
 	d: "M16 17h6v-6",
 	key: "t6n2it"
 }], ["path", {
 	d: "m22 17-8.5-8.5-5 5L2 7",
 	key: "x473p"
-}]]), et = X("trending-up", [["path", {
+}]]), tt = X("trending-up", [["path", {
 	d: "M16 7h6v6",
 	key: "box55l"
 }], ["path", {
 	d: "m22 7-8.5 8.5-5-5L2 17",
 	key: "1t1m79"
-}]]), tt = V((e, t) => /* @__PURE__ */ W("svg", {
+}]]), nt = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -916,8 +916,8 @@ var Re = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 		d: "M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"
 	})
 }));
-tt.displayName = "AnthropicIcon";
-var nt = V((e, t) => /* @__PURE__ */ G("svg", {
+nt.displayName = "AnthropicIcon";
+var rt = H((e, t) => /* @__PURE__ */ G("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -937,8 +937,8 @@ var nt = V((e, t) => /* @__PURE__ */ G("svg", {
 		clipRule: "evenodd"
 	})]
 }));
-nt.displayName = "ApigeeIcon";
-var rt = V((e, t) => /* @__PURE__ */ G("svg", {
+rt.displayName = "ApigeeIcon";
+var it = H((e, t) => /* @__PURE__ */ G("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -965,8 +965,8 @@ var rt = V((e, t) => /* @__PURE__ */ G("svg", {
 		})
 	]
 }));
-rt.displayName = "AwsIcon";
-var it = V((e, t) => /* @__PURE__ */ W("svg", {
+it.displayName = "AwsIcon";
+var at = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -979,8 +979,8 @@ var it = V((e, t) => /* @__PURE__ */ W("svg", {
 		d: "M16.043 20.561a1.391 1.391 0 0 0 .003-.92l.003.01L10.405 2.93h5.184c.203 0 .376.13.439.311v.004l5.638 16.705a.463.463 0 0 1-.287.586l-.004.001-5.332.025Zm-3.988-9.838 3.114 9.226a.464.464 0 0 1-.438.613h-.026a.46.46 0 0 1-.277-.093h.001l-7.978-5.928h4.17l1.434-3.818Zm9.172 10.766h.001a1.391 1.391 0 0 0 1.315-1.848l.003.01v.002l-5.64-16.706A1.394 1.394 0 0 0 15.588 2H9.03c-.61 0-1.127.393-1.315.938l-.003.01-5.64 16.704A1.391 1.391 0 0 0 3.39 21.49h4.075a1.39 1.39 0 0 0 1.315-.938l.003-.01.84-2.484 4.25 3.157c.229.172.517.275.83.275h6.523Z"
 	})
 }));
-it.displayName = "AzureIcon";
-var at = V((e, t) => /* @__PURE__ */ W("svg", {
+at.displayName = "AzureIcon";
+var ot = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -995,8 +995,8 @@ var at = V((e, t) => /* @__PURE__ */ W("svg", {
 		clipRule: "evenodd"
 	})
 }));
-at.displayName = "BitbucketIcon";
-var ot = V((e, t) => /* @__PURE__ */ G("svg", {
+ot.displayName = "BitbucketIcon";
+var st = H((e, t) => /* @__PURE__ */ G("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1023,8 +1023,8 @@ var ot = V((e, t) => /* @__PURE__ */ G("svg", {
 		})
 	]
 }));
-ot.displayName = "CohereIcon";
-var st = V((e, t) => /* @__PURE__ */ W("svg", {
+st.displayName = "CohereIcon";
+var ct = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1034,8 +1034,8 @@ var st = V((e, t) => /* @__PURE__ */ W("svg", {
 	...e,
 	children: /* @__PURE__ */ W("path", { d: "M6.973 3 4.098 8.188l1.469 2.624L8.442 6h10.25l-1.688-3H6.973Zm8.75 4 2.969 4.906L13.629 21h3.375l5-9-2.781-5h-3.5Zm-3.719 1c-2.207 0-4 1.793-4 4s1.793 4 4 4 4-1.793 4-4-1.793-4-4-4ZM3.535 9.219 2.005 12l4.968 9h5.531l1.656-3H8.41L3.535 9.219Zm8.47.781c1.1 0 2 .898 2 2 0 1.102-.9 2-2 2-1.102 0-2-.898-2-2 0-1.102.898-2 2-2Z" })
 }));
-st.displayName = "GcpIcon";
-var ct = V((e, t) => /* @__PURE__ */ W("svg", {
+ct.displayName = "GcpIcon";
+var lt = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1051,8 +1051,8 @@ var ct = V((e, t) => /* @__PURE__ */ W("svg", {
 		d: "M9.357 19.48c-4.553 1.484-4.553-2.65-6.353-3.18m12.706 5.3v-3.71c0-1.06.106-1.485-.53-2.12 2.965-.319 5.824-1.485 5.824-6.361a4.88 4.88 0 0 0-1.376-3.393 4.46 4.46 0 0 0-.106-3.392s-1.165-.318-3.706 1.378a13.008 13.008 0 0 0-6.565 0C6.71 2.306 5.545 2.624 5.545 2.624a4.458 4.458 0 0 0-.106 3.392A4.88 4.88 0 0 0 4.063 9.41c0 4.876 2.859 6.042 5.824 6.36-.636.636-.636 1.272-.53 2.12v3.71"
 	})
 }));
-ct.displayName = "GithubIcon";
-var lt = V((e, t) => /* @__PURE__ */ W("svg", {
+lt.displayName = "GithubIcon";
+var ut = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1068,8 +1068,8 @@ var lt = V((e, t) => /* @__PURE__ */ W("svg", {
 		d: "m22.004 13.29-3.33-10a.42.42 0 0 0-.14-.18.38.38 0 0 0-.22-.11.39.39 0 0 0-.37.25l-2.26 6.67h-7.36l-2.22-6.66a.42.42 0 0 0-.1-.18.38.38 0 0 0-.26-.08.39.39 0 0 0-.37.25l-3.37 10.04a.74.74 0 0 0 .27.83l9.73 6.88 9.69-6.88a.71.71 0 0 0 .31-.83v0Z"
 	})
 }));
-lt.displayName = "GitlabIcon";
-var ut = V((e, t) => /* @__PURE__ */ W("svg", {
+ut.displayName = "GitlabIcon";
+var dt = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1082,8 +1082,8 @@ var ut = V((e, t) => /* @__PURE__ */ W("svg", {
 		d: "M15.748 13.131c-.821 0-1.558.363-2.063.933l-1.293-.91a3.51 3.51 0 0 0 .216-1.203c0-.415-.076-.812-.209-1.183l1.29-.9a2.75 2.75 0 0 0 2.06.927A2.748 2.748 0 0 0 18.5 8.058a2.748 2.748 0 0 0-2.752-2.738 2.748 2.748 0 0 0-2.751 2.738c0 .27.041.53.115.777l-1.291.902a3.556 3.556 0 0 0-2.2-1.273V6.916a2.745 2.745 0 0 0 2.185-2.678A2.748 2.748 0 0 0 9.054 1.5a2.748 2.748 0 0 0-2.752 2.738c0 1.298.915 2.387 2.137 2.666v1.568C6.772 8.762 5.5 10.21 5.5 11.95c0 1.75 1.284 3.202 2.963 3.483v1.656a2.744 2.744 0 0 0-2.16 2.672 2.748 2.748 0 0 0 2.75 2.739 2.748 2.748 0 0 0 2.752-2.738 2.745 2.745 0 0 0-2.161-2.672v-1.656c.867-.145 1.63-.6 2.163-1.252l1.302.917a2.71 2.71 0 0 0-.113.77 2.748 2.748 0 0 0 2.752 2.738 2.748 2.748 0 0 0 2.751-2.738 2.748 2.748 0 0 0-2.752-2.738Zm0-6.4c.736 0 1.335.595 1.335 1.327 0 .731-.599 1.327-1.334 1.327a1.332 1.332 0 0 1-1.335-1.327c0-.732.599-1.328 1.335-1.328ZM7.72 4.237c0-.732.598-1.328 1.334-1.328.736 0 1.334.596 1.334 1.328 0 .731-.598 1.327-1.334 1.327A1.332 1.332 0 0 1 7.72 4.238Zm2.668 15.524c0 .732-.598 1.328-1.334 1.328a1.332 1.332 0 0 1-1.334-1.328c0-.731.598-1.327 1.334-1.327.736 0 1.334.596 1.334 1.327Zm-1.334-5.96c-1.026 0-1.86-.83-1.86-1.851 0-1.02.834-1.851 1.86-1.851 1.026 0 1.86.83 1.86 1.851 0 1.02-.834 1.851-1.86 1.851Zm6.694 3.394a1.332 1.332 0 0 1-1.334-1.327c0-.732.599-1.327 1.335-1.327.735 0 1.333.595 1.333 1.327s-.598 1.327-1.334 1.327Z"
 	})
 }));
-ut.displayName = "KafkaIcon";
-var dt = V((e, t) => /* @__PURE__ */ W("svg", {
+dt.displayName = "KafkaIcon";
+var ft = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1096,8 +1096,8 @@ var dt = V((e, t) => /* @__PURE__ */ W("svg", {
 		d: "m23 14.095-2.748-.63a8.18 8.18 0 0 0-1.269-5.53l2.113-1.692-1.037-1.306-2.112 1.69a8.282 8.282 0 0 0-5.115-2.48V1.6h-1.664v2.548a8.282 8.282 0 0 0-5.115 2.48L3.941 4.937 2.903 6.243l2.114 1.691a8.194 8.194 0 0 0-1.269 5.532L1 14.096l.37 1.627 2.744-.629a8.374 8.374 0 0 0 3.55 4.474l-1.106 2.308 1.5.724 1.105-2.306a8.134 8.134 0 0 0 5.675 0l1.105 2.306 1.5-.725-1.107-2.307a8.374 8.374 0 0 0 3.55-4.474l2.744.629.37-1.628Zm-4.345-1.64c0 .215-.012.427-.032.637l-4.16-.953a2.482 2.482 0 0 0-.114-.496l3.325-2.661a6.648 6.648 0 0 1 .981 3.473Zm-7.487 0a.837.837 0 0 1 .514-.771.829.829 0 0 1 1.134.608.839.839 0 0 1-.354.857.83.83 0 0 1-1.05-.104.837.837 0 0 1-.244-.59Zm5.47-4.78-3.324 2.66a2.49 2.49 0 0 0-.482-.231V5.833a6.625 6.625 0 0 1 3.806 1.841Zm-5.47-1.842v4.27a2.49 2.49 0 0 0-.482.232l-3.324-2.66a6.626 6.626 0 0 1 3.806-1.842Zm-5.823 6.622c0-1.226.34-2.429.981-3.473l3.325 2.66a2.485 2.485 0 0 0-.115.497l-4.16.953a6.763 6.763 0 0 1-.031-.637Zm.402 2.265 4.139-.949c.098.162.213.313.345.448l-1.842 3.84a6.701 6.701 0 0 1-2.642-3.339ZM12 19.135a6.607 6.607 0 0 1-2.113-.35l1.847-3.852c.088.014.177.023.266.027.089-.004.178-.013.265-.027l1.848 3.852c-.68.23-1.394.35-2.113.35Zm3.611-1.077-1.842-3.839c.132-.136.247-.286.345-.448l4.139.949a6.701 6.701 0 0 1-2.642 3.338Z"
 	})
 }));
-dt.displayName = "KubernetesIcon";
-var ft = V((e, t) => /* @__PURE__ */ G("svg", {
+ft.displayName = "KubernetesIcon";
+var pt = H((e, t) => /* @__PURE__ */ G("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1148,8 +1148,8 @@ var ft = V((e, t) => /* @__PURE__ */ G("svg", {
 		})
 	]
 }));
-ft.displayName = "MistralIcon";
-var pt = V((e, t) => /* @__PURE__ */ W("svg", {
+pt.displayName = "MistralIcon";
+var mt = H((e, t) => /* @__PURE__ */ W("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1162,9 +1162,9 @@ var pt = V((e, t) => /* @__PURE__ */ W("svg", {
 		d: "M304.246 294.611V249.028c0-3.839 1.441-6.719 4.798-8.636l91.648-52.78c12.475-7.197 27.35-10.554 42.702-10.554 57.577 0 94.046 44.624 94.046 92.124 0 3.358 0 7.197-.481 11.036l-95.005-55.66c-5.757-3.357-11.517-3.357-17.274 0l-120.434 70.053ZM518.245 472.145V363.224c0-6.719-2.881-11.517-8.637-14.875l-120.434-70.053 39.345-22.553c3.358-1.917 6.238-1.917 9.596 0l91.647 52.78c26.392 15.356 44.143 47.982 44.143 79.648 0 36.465-21.59 70.054-55.66 83.97v.004ZM275.937 376.182l-39.345-23.03c-3.357-1.917-4.798-4.798-4.798-8.637V238.956c0-51.339 39.345-90.207 92.606-90.207 20.155 0 38.864 6.719 54.702 18.714l-94.524 54.701c-5.756 3.357-8.636 8.155-8.636 14.875v139.147l-.005-.004ZM360.626 425.122 304.246 393.455v-67.172l56.38-31.667 56.376 31.667v67.172l-56.376 31.667ZM396.852 570.989c-20.154 0-38.863-6.719-54.701-18.713l94.523-54.702c5.757-3.357 8.637-8.155 8.637-14.875V343.552l39.827 23.03c3.357 1.917 4.798 4.797 4.798 8.637v105.559c0 51.339-39.827 90.207-93.084 90.207v.004ZM283.134 463.99l-91.648-52.779c-26.392-15.357-44.143-47.982-44.143-79.649 0-36.946 22.072-70.053 56.137-83.969v109.398c0 6.719 2.881 11.517 8.637 14.875l119.957 69.571-39.345 22.553c-3.357 1.917-6.238 1.917-9.595 0ZM277.859 542.68c-54.22 0-94.046-40.785-94.046-91.166 0-3.839.481-7.678.958-11.517l94.524 54.701c5.756 3.358 11.517 3.358 17.273 0L417.002 425.127v45.583c0 3.839-1.44 6.719-4.798 8.636l-91.647 52.78c-12.476 7.197-27.351 10.554-42.703 10.554h.005ZM396.852 599.776c58.059 0 106.518-41.263 117.558-95.964 53.739-13.916 88.286-64.297 88.286-115.636 0-33.589-14.393-66.214-40.304-89.726 2.399-10.077 3.839-20.154 3.839-30.226 0-68.613-55.66-119.957-119.957-119.957-12.952 0-25.428 1.917-37.904 6.238-21.595-21.113-51.344-34.547-83.97-34.547-58.058 0-106.517 41.262-117.557 95.963-53.739 13.916-88.286 64.297-88.286 115.636 0 33.589 14.393 66.214 40.304 89.726-2.399 10.077-3.839 20.154-3.839 30.227 0 68.613 55.66 119.956 119.956 119.956 12.953 0 25.429-1.917 37.905-6.238 21.59 21.113 51.339 34.548 83.969 34.548Z"
 	})
 }));
-pt.displayName = "OpenAIIcon";
-var mt = V((e, t) => {
-	let n = H();
+mt.displayName = "OpenAIIcon";
+var ht = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1388,9 +1388,9 @@ var mt = V((e, t) => {
 		})]
 	});
 });
-mt.displayName = "GioAgentManagementIcon";
-var ht = V((e, t) => {
-	let n = H();
+ht.displayName = "GioAgentManagementIcon";
+var gt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1627,9 +1627,9 @@ var ht = V((e, t) => {
 		})]
 	});
 });
-ht.displayName = "GioApiManagementIcon";
-var gt = V((e, t) => {
-	let n = H();
+gt.displayName = "GioApiManagementIcon";
+var _t = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1755,9 +1755,9 @@ var gt = V((e, t) => {
 		})]
 	});
 });
-gt.displayName = "GioAuthorizationIcon";
-var _t = V((e, t) => {
-	let n = H();
+_t.displayName = "GioAuthorizationIcon";
+var vt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1943,9 +1943,9 @@ var _t = V((e, t) => {
 		})]
 	});
 });
-_t.displayName = "GioCatalogIcon";
-var vt = V((e, t) => {
-	let n = H();
+vt.displayName = "GioCatalogIcon";
+var yt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2169,9 +2169,9 @@ var vt = V((e, t) => {
 		})]
 	});
 });
-vt.displayName = "GioDeveloperPortalIcon";
-var yt = V((e, t) => {
-	let n = H();
+yt.displayName = "GioDeveloperPortalIcon";
+var bt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2357,9 +2357,9 @@ var yt = V((e, t) => {
 		})]
 	});
 });
-yt.displayName = "GioEventApiManagementIcon";
-var bt = V((e, t) => {
-	let n = H();
+bt.displayName = "GioEventApiManagementIcon";
+var xt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2599,9 +2599,9 @@ var bt = V((e, t) => {
 		})]
 	});
 });
-bt.displayName = "GioGammaIcon";
-var xt = V((e, t) => {
-	let n = H();
+xt.displayName = "GioGammaIcon";
+var St = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2841,9 +2841,9 @@ var xt = V((e, t) => {
 		})]
 	});
 });
-xt.displayName = "GioHomeIcon";
-var St = V((e, t) => {
-	let n = H();
+St.displayName = "GioHomeIcon";
+var Ct = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3137,9 +3137,9 @@ var St = V((e, t) => {
 		})]
 	});
 });
-St.displayName = "GioIamIcon";
-var Ct = V((e, t) => {
-	let n = H();
+Ct.displayName = "GioIamIcon";
+var wt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3363,9 +3363,9 @@ var Ct = V((e, t) => {
 		})]
 	});
 });
-Ct.displayName = "GioObservabilityIcon";
-var wt = V((e, t) => {
-	let n = H();
+wt.displayName = "GioObservabilityIcon";
+var Tt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3483,9 +3483,9 @@ var wt = V((e, t) => {
 		})]
 	});
 });
-wt.displayName = "GioObserveIcon";
-var Tt = V((e, t) => {
-	let n = H();
+Tt.displayName = "GioObserveIcon";
+var Et = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3815,9 +3815,9 @@ var Tt = V((e, t) => {
 		})]
 	});
 });
-Tt.displayName = "GioPlatformIcon";
-var Et = V((e, t) => {
-	let n = H();
+Et.displayName = "GioPlatformIcon";
+var Dt = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3935,9 +3935,9 @@ var Et = V((e, t) => {
 		})]
 	});
 });
-Et.displayName = "GioProductizeIcon";
-var Dt = V((e, t) => {
-	let n = H();
+Dt.displayName = "GioProductizeIcon";
+var Ot = H((e, t) => {
+	let n = U();
 	return /* @__PURE__ */ G("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -4063,10 +4063,10 @@ var Dt = V((e, t) => {
 		})]
 	});
 });
-Dt.displayName = "GioSecureIcon";
+Ot.displayName = "GioSecureIcon";
 //#endregion
 //#region src/lib/useContainerSize.ts
-function Ot() {
+function kt() {
 	let [e, t] = se({
 		width: 0,
 		height: 0
@@ -4091,29 +4091,29 @@ function Ot() {
 }
 //#endregion
 //#region src/charts/Metric/Metric.tsx
-var kt = {
+var At = {
 	positive: "text-success",
 	negative: "text-destructive",
 	neutral: "text-muted-foreground"
 };
-function At(e, t) {
+function jt(e, t) {
 	return e === "neutral" || t === "neutral" ? "neutral" : t === "higher-is-better" ? e === "up" ? "positive" : "negative" : e === "up" ? "negative" : "positive";
 }
-var jt = 56;
-function Mt(e, t) {
+var Mt = 56;
+function Nt(e, t) {
 	let n = Math.min(t > 0 ? t : 100, (e > 0 ? e : 200) * .65);
 	return Math.max(18, Math.min(96, Math.round(n * .22)));
 }
-function Nt(e) {
+function Pt(e) {
 	return Math.max(10, Math.round(e * .22));
 }
-function Pt(e) {
+function Ft(e) {
 	return e < 80 ? "text-sm font-semibold leading-tight" : e < 110 ? "text-base font-semibold leading-tight" : e < 150 ? "text-lg font-semibold leading-tight" : "text-xl font-semibold leading-tight";
 }
-function Ft(e) {
+function It(e) {
 	return e < 50 ? "text-[9px]" : e < 80 ? "text-[10px]" : e < 120 ? "text-xs" : "text-sm";
 }
-function It(e) {
+function Lt(e) {
 	return e < 60 ? {
 		text: "text-[9px]",
 		icon: "size-2"
@@ -4128,12 +4128,12 @@ function It(e) {
 		icon: "size-3.5"
 	};
 }
-function Lt({ data: t, color: n, colorClass: r }) {
-	let i = R.useRef(null), [a, o] = R.useState({
+function Rt({ data: t, color: n, colorClass: r }) {
+	let i = z.useRef(null), [a, o] = z.useState({
 		width: 0,
 		height: 0
-	}), s = R.useId();
-	if (R.useEffect(() => {
+	}), s = z.useId();
+	if (z.useEffect(() => {
 		let e = i.current;
 		if (!e) return;
 		let t = new ResizeObserver(([e]) => {
@@ -4150,7 +4150,7 @@ function Lt({ data: t, color: n, colorClass: r }) {
 		ref: i,
 		className: e("h-full w-full", r),
 		"aria-hidden": "true",
-		children: c > 0 && l > 0 && g && _ && /* @__PURE__ */ G(U, { children: [
+		children: c > 0 && l > 0 && g && _ && /* @__PURE__ */ G(ce, { children: [
 			/* @__PURE__ */ W("defs", { children: /* @__PURE__ */ G("linearGradient", {
 				id: s,
 				x1: "0",
@@ -4180,10 +4180,10 @@ function Lt({ data: t, color: n, colorClass: r }) {
 		] })
 	});
 }
-function Rt({ trend: t, sentiment: n, trendClass: r }) {
-	let i = t.direction === "down" ? $e : et;
+function zt({ trend: t, sentiment: n, trendClass: r }) {
+	let i = t.direction === "down" ? et : tt;
 	return /* @__PURE__ */ G("span", {
-		className: e("inline-flex items-center gap-1 font-medium", r.text, kt[n]),
+		className: e("inline-flex items-center gap-1 font-medium", r.text, At[n]),
 		children: [
 			t.direction !== "neutral" && /* @__PURE__ */ W(i, { className: r.icon }),
 			t.value,
@@ -4191,7 +4191,7 @@ function Rt({ trend: t, sentiment: n, trendClass: r }) {
 		]
 	});
 }
-function zt({ className: t, ...n }) {
+function Bt({ className: t, ...n }) {
 	return /* @__PURE__ */ G("div", {
 		role: "img",
 		"aria-busy": "true",
@@ -4202,23 +4202,23 @@ function zt({ className: t, ...n }) {
 			className: "flex flex-col gap-1.5",
 			children: [/* @__PURE__ */ G("div", {
 				className: "flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ W(g, { className: "h-7 w-20 shrink-0" }), /* @__PURE__ */ W(g, { className: "size-5 shrink-0 rounded-full" })]
+				children: [/* @__PURE__ */ W(_, { className: "h-7 w-20 shrink-0" }), /* @__PURE__ */ W(_, { className: "size-5 shrink-0 rounded-full" })]
 			}), /* @__PURE__ */ G("div", {
 				className: "flex items-center justify-between gap-2",
-				children: [/* @__PURE__ */ W(g, { className: "h-4 min-w-0 flex-1" }), /* @__PURE__ */ W(g, { className: "h-4 w-16 shrink-0" })]
+				children: [/* @__PURE__ */ W(_, { className: "h-4 min-w-0 flex-1" }), /* @__PURE__ */ W(_, { className: "h-4 w-16 shrink-0" })]
 			})]
-		}), /* @__PURE__ */ W(g, { className: "min-h-5 w-full flex-1" })]
+		}), /* @__PURE__ */ W(_, { className: "min-h-5 w-full flex-1" })]
 	});
 }
-function Bt({ value: t, label: n, state: r, description: i, icon: a, trend: o, trendSentiment: s = "higher-is-better", centered: c = !1, sparklineData: l, sparklineColor: u, className: d, ...f }) {
-	let { ref: p, width: m, height: h } = Ot();
-	if (r === "loading") return /* @__PURE__ */ W(zt, {
+function Vt({ value: t, label: n, state: r, description: i, icon: a, trend: o, trendSentiment: s = "higher-is-better", centered: c = !1, sparklineData: l, sparklineColor: u, className: d, ...f }) {
+	let { ref: p, width: m, height: h } = kt();
+	if (r === "loading") return /* @__PURE__ */ W(Bt, {
 		className: d,
 		...f
 	});
-	let g = r === "empty" ? "—" : t, _ = r === "empty" ? void 0 : o, v = r === "empty" ? void 0 : l, y = _ ? At(_.direction, s) : void 0, b = !u && y ? kt[y] : void 0, x = u ?? (y ? void 0 : "var(--chart-1)"), S = v != null && v.length >= 2 && h >= jt && !c, C = c || !S, w = Pt(h), T = Ft(h), E = It(h), D = n && h > 50, O = !!(_ && y && (S || h > 40));
+	let g = r === "empty" ? "—" : t, _ = r === "empty" ? void 0 : o, v = r === "empty" ? void 0 : l, y = _ ? jt(_.direction, s) : void 0, b = !u && y ? At[y] : void 0, x = u ?? (y ? void 0 : "var(--chart-1)"), S = v != null && v.length >= 2 && h >= Mt && !c, C = c || !S, w = Ft(h), T = It(h), E = Lt(h), D = n && h > 50, O = !!(_ && y && (S || h > 40));
 	if (C) {
-		let t = Mt(m, h), r = Nt(t);
+		let t = Nt(m, h), r = Pt(t);
 		return /* @__PURE__ */ G("div", {
 			ref: p,
 			className: e("flex h-full flex-col items-center justify-center gap-1 text-center", d),
@@ -4234,7 +4234,7 @@ function Bt({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 					style: { fontSize: r },
 					children: n
 				}),
-				O && _ && y && /* @__PURE__ */ W(Rt, {
+				O && _ && y && /* @__PURE__ */ W(zt, {
 					trend: _,
 					sentiment: y,
 					trendClass: E
@@ -4258,7 +4258,7 @@ function Bt({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 						}),
 						O && _ && y && /* @__PURE__ */ G("span", {
 							className: "flex shrink-0 items-center gap-1",
-							children: [/* @__PURE__ */ W(Rt, {
+							children: [/* @__PURE__ */ W(zt, {
 								trend: _,
 								sentiment: y,
 								trendClass: E
@@ -4278,7 +4278,7 @@ function Bt({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 			]
 		}), /* @__PURE__ */ W("div", {
 			className: "min-h-0 flex-1 pt-1",
-			children: /* @__PURE__ */ W(Lt, {
+			children: /* @__PURE__ */ W(Rt, {
 				data: v,
 				color: x,
 				colorClass: b
@@ -4291,40 +4291,40 @@ function Bt({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 function Z(e) {
 	return "category" in e && "metrics" in e;
 }
-var Vt = {
+var Ht = {
 	positive: "text-success",
 	negative: "text-destructive",
 	neutral: "text-muted-foreground"
 };
-function Ht(e) {
+function Ut(e) {
 	let t = 0;
 	for (let n of e) t += Z(n) ? n.metrics.length : 1;
 	return t;
 }
-function Ut(e) {
+function Wt(e) {
 	return Z(e) ? e.metrics.length : 1;
 }
-var Wt = [
+var Gt = [
 	"xs",
 	"sm",
 	"md",
 	"lg"
 ];
-function Gt(e, t, n) {
+function Kt(e, t, n) {
 	let r = e / Math.max(n, 1), i = r < 40 ? "xs" : r < 70 ? "sm" : r < 110 ? "md" : "lg", a = t < 25 ? "xs" : t < 40 ? "sm" : t < 60 ? "md" : "lg";
-	return Wt[Math.min(Wt.indexOf(i), Wt.indexOf(a))];
+	return Gt[Math.min(Gt.indexOf(i), Gt.indexOf(a))];
 }
-var Kt = {
+var qt = {
 	xs: 40,
 	sm: 55,
 	md: 75,
 	lg: 100
-}, qt = 40, Jt = 80;
-function Yt(e, t, n) {
-	if (e < Jt) return 0;
-	let r = Kt[n], i = 0, a = 0;
+}, Jt = 40, Yt = 80;
+function Xt(e, t, n) {
+	if (e < Yt) return 0;
+	let r = qt[n], i = 0, a = 0;
 	for (let n = 0; n < t.length; n++) {
-		let o = r * Ut(t[n]), s = t.length - (n + 1) > 0 ? qt : 0;
+		let o = r * Wt(t[n]), s = t.length - (n + 1) > 0 ? Jt : 0;
 		if (a + o + s > e) break;
 		a += o, i++;
 	}
@@ -4368,10 +4368,10 @@ var Q = {
 		lg: "px-5"
 	}
 };
-function Xt({ trend: t, sentiment: n, size: r }) {
-	let i = t.direction === "down" ? $e : et;
+function Zt({ trend: t, sentiment: n, size: r }) {
+	let i = t.direction === "down" ? et : tt;
 	return /* @__PURE__ */ G("span", {
-		className: e("inline-flex items-center gap-px font-medium", Q.trend[r], Vt[n]),
+		className: e("inline-flex items-center gap-px font-medium", Q.trend[r], Ht[n]),
 		children: [
 			t.direction !== "neutral" && /* @__PURE__ */ W(i, { className: Q.trendIcon[r] }),
 			t.value,
@@ -4379,15 +4379,15 @@ function Xt({ trend: t, sentiment: n, size: r }) {
 		]
 	});
 }
-function Zt({ item: t, size: n, labelVisible: r }) {
-	let i = t.trend ? At(t.trend.direction, t.trendSentiment ?? "higher-is-better") : void 0, a = r && t.label, o = /* @__PURE__ */ G("div", {
+function Qt({ item: t, size: n, labelVisible: r }) {
+	let i = t.trend ? jt(t.trend.direction, t.trendSentiment ?? "higher-is-better") : void 0, a = r && t.label, o = /* @__PURE__ */ G("div", {
 		className: "flex min-w-0 flex-col items-center text-center",
 		children: [/* @__PURE__ */ G("div", {
 			className: "flex items-baseline gap-0.5",
 			children: [/* @__PURE__ */ W("span", {
 				className: e("truncate tracking-tight text-foreground", Q.value[n]),
 				children: t.value
-			}), t.trend && i && /* @__PURE__ */ W(Xt, {
+			}), t.trend && i && /* @__PURE__ */ W(Zt, {
 				trend: t.trend,
 				sentiment: i,
 				size: n
@@ -4397,7 +4397,7 @@ function Zt({ item: t, size: n, labelVisible: r }) {
 			children: t.label
 		})]
 	});
-	return !a && t.label ? /* @__PURE__ */ G(ne, { children: [/* @__PURE__ */ W(L, {
+	return !a && t.label ? /* @__PURE__ */ G(ne, { children: [/* @__PURE__ */ W(R, {
 		asChild: !0,
 		children: /* @__PURE__ */ W("div", {
 			className: "flex min-w-0 flex-1 cursor-default justify-center",
@@ -4408,9 +4408,9 @@ function Zt({ item: t, size: n, labelVisible: r }) {
 		children: o
 	});
 }
-function Qt({ count: t, size: n }) {
+function $t({ count: t, size: n }) {
 	let r = `${t} more ${t === 1 ? "metric" : "metrics"} hidden`;
-	return /* @__PURE__ */ G(ne, { children: [/* @__PURE__ */ W(L, {
+	return /* @__PURE__ */ G(ne, { children: [/* @__PURE__ */ W(R, {
 		asChild: !0,
 		children: /* @__PURE__ */ G("div", {
 			role: "status",
@@ -4420,7 +4420,7 @@ function Qt({ count: t, size: n }) {
 		})
 	}), /* @__PURE__ */ W(re, { children: r })] });
 }
-function $t({ count: t, className: n, ...r }) {
+function en({ count: t, className: n, ...r }) {
 	return /* @__PURE__ */ W("div", {
 		role: "img",
 		"aria-busy": "true",
@@ -4429,14 +4429,14 @@ function $t({ count: t, className: n, ...r }) {
 		...r,
 		children: Array.from({ length: t }, (e, t) => /* @__PURE__ */ G("div", {
 			className: "flex flex-1 flex-col items-center justify-center gap-2 px-3",
-			children: [/* @__PURE__ */ W(g, { className: "h-8 w-16" }), /* @__PURE__ */ W(g, { className: "h-5 w-24" })]
+			children: [/* @__PURE__ */ W(_, { className: "h-8 w-16" }), /* @__PURE__ */ W(_, { className: "h-5 w-24" })]
 		}, t))
 	});
 }
-function en({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
-	let { ref: o, width: s, height: c } = Ot();
-	if (n === "loading") return /* @__PURE__ */ W($t, {
-		count: t.length > 0 ? Ht(t) : r ?? 5,
+function tn({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
+	let { ref: o, width: s, height: c } = kt();
+	if (n === "loading") return /* @__PURE__ */ W(en, {
+		count: t.length > 0 ? Ut(t) : r ?? 5,
 		className: i,
 		...a
 	});
@@ -4451,8 +4451,8 @@ function en({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 		...e,
 		value: "—",
 		trend: void 0
-	}) : t, u = Ht(l), d = s > 0 ? Gt(s, c, u) : "md", f = c >= 50, p = s > 0 ? Yt(s, l, d) : l.length, m = l.slice(0, p), h = l.length - p, g = p === 0;
-	return /* @__PURE__ */ W(I, {
+	}) : t, u = Ut(l), d = s > 0 ? Kt(s, c, u) : "md", f = c >= 50, p = s > 0 ? Xt(s, l, d) : l.length, m = l.slice(0, p), h = l.length - p, g = p === 0;
+	return /* @__PURE__ */ W(L, {
 		delayDuration: 300,
 		children: /* @__PURE__ */ G("div", {
 			ref: o,
@@ -4463,19 +4463,19 @@ function en({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 			children: [s > 0 && !g && m.map((t) => {
 				let n = Z(t) ? t.category : `${t.value}-${t.label ?? ""}`;
 				return /* @__PURE__ */ W("div", {
-					style: { flex: Ut(t) },
+					style: { flex: Wt(t) },
 					className: e("flex min-w-0 flex-col items-center justify-center overflow-x-hidden", Q.cellPadding[d]),
-					children: Z(t) ? /* @__PURE__ */ G(U, { children: [/* @__PURE__ */ W("span", {
+					children: Z(t) ? /* @__PURE__ */ G(ce, { children: [/* @__PURE__ */ W("span", {
 						className: e("mb-0.5 font-medium tracking-wider text-muted-foreground uppercase", Q.category[d]),
 						children: t.category
 					}), /* @__PURE__ */ W("div", {
 						className: "flex w-full min-w-0 items-end justify-evenly",
-						children: t.metrics.map((e) => /* @__PURE__ */ W(Zt, {
+						children: t.metrics.map((e) => /* @__PURE__ */ W(Qt, {
 							item: e,
 							size: d,
 							labelVisible: f
 						}, `${e.value}-${e.label ?? ""}`))
-					})] }) : /* @__PURE__ */ W(Zt, {
+					})] }) : /* @__PURE__ */ W(Qt, {
 						item: t,
 						size: d,
 						labelVisible: f
@@ -4483,7 +4483,7 @@ function en({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 				}, n);
 			}), s > 0 && h > 0 && /* @__PURE__ */ W("div", {
 				className: e("flex shrink-0 items-center", g ? "" : "px-2"),
-				children: /* @__PURE__ */ W(Qt, {
+				children: /* @__PURE__ */ W($t, {
 					count: h,
 					size: d
 				})
@@ -4493,54 +4493,54 @@ function en({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 }
 //#endregion
 //#region src/charts/LineChart/LineChart.tsx
-function tn({ data: e, dataKeys: n, state: r, curveType: i = "monotone", showDots: o = !1, showGrid: s = !0, showCategoryAxis: c = !0, showValueAxis: l = !0, connectNulls: u = !1, valueTickFormatter: d, categoryTickFormatter: m, animated: g = !0, onPointHover: _, onPointLeave: v, ariaLabel: y, margin: x, className: S, children: C, ...w }) {
-	let { config: T } = t(), E = n ?? ke(e, Object.keys(T));
-	return r === "loading" ? /* @__PURE__ */ W(b, {
+function nn({ data: e, dataKeys: n, state: r, curveType: i = "monotone", showDots: a = !1, showGrid: s = !0, showCategoryAxis: c = !0, showValueAxis: l = !0, connectNulls: u = !1, valueTickFormatter: d, categoryTickFormatter: f, animated: h = !0, onPointHover: _, onPointLeave: v, ariaLabel: y, margin: b, className: S, children: C, ...w }) {
+	let { config: T } = t(), E = n ?? Ae(e, Object.keys(T));
+	return r === "loading" ? /* @__PURE__ */ W(x, {
 		ariaLabel: y,
 		className: S,
 		...w
-	}) : /* @__PURE__ */ G(p, {
+	}) : /* @__PURE__ */ G(m, {
 		data: e,
 		state: r,
 		categoryScaleType: "point",
-		animated: g,
+		animated: h,
 		ariaLabel: y,
 		valueTickFormatter: d,
-		categoryTickFormatter: m,
-		margin: x,
+		categoryTickFormatter: f,
+		margin: b,
 		onPointHover: _,
 		onPointLeave: v,
 		className: S,
 		...w,
 		children: [
-			s && /* @__PURE__ */ W(a, {}),
-			E.map((e) => /* @__PURE__ */ W(we, {
+			s && /* @__PURE__ */ W(o, {}),
+			E.map((e) => /* @__PURE__ */ W(Te, {
 				dataKey: e,
 				curveType: i,
-				showDots: o,
+				showDots: a,
 				connectNulls: u
 			}, e)),
-			c && /* @__PURE__ */ W(h, {}),
-			l && /* @__PURE__ */ W(f, {}),
+			c && /* @__PURE__ */ W(g, {}),
+			l && /* @__PURE__ */ W(p, {}),
 			C
 		]
 	});
 }
 //#endregion
 //#region src/charts/AreaChart/AreaChart.tsx
-function nn({ data: e, dataKeys: n, state: r, curveType: i = "monotone", stacked: o = !0, gradient: s = !0, fillOpacity: c = .2, showGrid: l = !0, showCategoryAxis: u = !0, showValueAxis: d = !0, connectNulls: m = !1, animated: g = !0, ariaLabel: _, margin: v, valueTickFormatter: b, categoryTickFormatter: x, onPointHover: S, onPointLeave: C, className: w, children: T, ...E }) {
-	let { config: D } = t(), O = n ?? ke(e, Object.keys(D)), k = o ? "default" : void 0;
-	return r === "loading" ? /* @__PURE__ */ W(y, {
+function rn({ data: e, dataKeys: n, state: r, curveType: i = "monotone", stacked: a = !0, gradient: s = !0, fillOpacity: c = .2, showGrid: l = !0, showCategoryAxis: u = !0, showValueAxis: d = !0, connectNulls: f = !1, animated: h = !0, ariaLabel: _, margin: v, valueTickFormatter: y, categoryTickFormatter: x, onPointHover: S, onPointLeave: C, className: w, children: T, ...E }) {
+	let { config: D } = t(), O = n ?? Ae(e, Object.keys(D)), k = a ? "default" : void 0;
+	return r === "loading" ? /* @__PURE__ */ W(b, {
 		ariaLabel: _,
 		className: w,
 		...E
-	}) : /* @__PURE__ */ G(p, {
+	}) : /* @__PURE__ */ G(m, {
 		data: e,
 		state: r,
 		categoryScaleType: "point",
-		animated: g,
+		animated: h,
 		ariaLabel: _,
-		valueTickFormatter: b,
+		valueTickFormatter: y,
 		categoryTickFormatter: x,
 		margin: v,
 		onPointHover: S,
@@ -4548,22 +4548,22 @@ function nn({ data: e, dataKeys: n, state: r, curveType: i = "monotone", stacked
 		className: w,
 		...E,
 		children: [
-			l && /* @__PURE__ */ W(a, {}),
-			O.map((e) => /* @__PURE__ */ W(Oe, {
+			l && /* @__PURE__ */ W(o, {}),
+			O.map((e) => /* @__PURE__ */ W(ke, {
 				dataKey: e,
 				stackId: k,
 				curveType: i,
 				gradient: s,
 				fillOpacity: c,
-				connectNulls: m
+				connectNulls: f
 			}, e)),
-			u && /* @__PURE__ */ W(h, {}),
-			d && /* @__PURE__ */ W(f, {}),
+			u && /* @__PURE__ */ W(g, {}),
+			d && /* @__PURE__ */ W(p, {}),
 			T
 		]
 	});
 }
-function rn(e) {
+function an(e) {
 	if (e === 0) return "0ns";
 	if (e < 1e3) return `${Math.round(e)}ns`;
 	let t = e / 1e3;
@@ -4575,7 +4575,7 @@ function rn(e) {
 	let i = Math.floor(r / 60), a = r % 60;
 	return `${i}m ${Math.round(a)}s`;
 }
-function an(e) {
+function on(e) {
 	let t = 0;
 	for (let n of e) {
 		let e = n.startOffsetNs + n.durationNs;
@@ -4583,7 +4583,7 @@ function an(e) {
 	}
 	return t > 0 ? t : 1;
 }
-function on(e, t, n, r) {
+function sn(e, t, n, r) {
 	if (r <= 0 || n <= 0) return {
 		x: 0,
 		width: 0
@@ -4594,18 +4594,18 @@ function on(e, t, n, r) {
 		width: a
 	};
 }
-function sn(e, t) {
+function cn(e, t) {
 	if (t === 0 || e === 0) return "0%";
 	let n = e / t * 100;
 	return n < .1 ? "<0.1%" : n >= 100 ? "100%" : `${n < 1 ? n.toFixed(1) : Math.round(n)}%`;
 }
-var cn = 6, ln = 80;
-function un(e) {
+var ln = 6, un = 80;
+function dn(e) {
 	if (e <= 0) return 0;
-	let t = Math.floor(e / ln) + 1;
-	return Math.max(2, Math.min(t, cn));
+	let t = Math.floor(e / un) + 1;
+	return Math.max(2, Math.min(t, ln));
 }
-function dn(e, t = 5) {
+function fn(e, t = 5) {
 	if (e <= 0) return [0];
 	if (t <= 1) return [0, e];
 	let n = e / (t - 1);
@@ -4613,13 +4613,13 @@ function dn(e, t = 5) {
 }
 //#endregion
 //#region src/charts/TraceWaterfall/TraceWaterfall.tsx
-var fn = 280, pn = .45, mn = 36, hn = 20, gn = 20, _n = 4, $ = 12, vn = 48, yn = 32, bn = 3, xn = {
+var pn = 280, mn = .45, hn = 36, gn = 20, _n = 20, vn = 4, $ = 12, yn = 48, bn = 32, xn = 3, Sn = {
 	internal: "INTERNAL",
 	server: "SERVER",
 	client: "CLIENT",
 	producer: "PRODUCER",
 	consumer: "CONSUMER"
-}, Sn = [
+}, Cn = [
 	"bg-chart-1",
 	"bg-chart-2",
 	"bg-chart-3",
@@ -4629,21 +4629,21 @@ var fn = 280, pn = .45, mn = 36, hn = 20, gn = 20, _n = 4, $ = 12, vn = 48, yn =
 	"bg-chart-7",
 	"bg-chart-8"
 ];
-function Cn(e) {
+function wn(e) {
 	let t = /* @__PURE__ */ new Map(), n = 0;
-	for (let r of e) t.has(r.serviceName) || (t.set(r.serviceName, Sn[n % Sn.length]), n++);
+	for (let r of e) t.has(r.serviceName) || (t.set(r.serviceName, Cn[n % Cn.length]), n++);
 	return t;
 }
-var wn = { error: "bg-destructive" }, Tn = {
+var Tn = { error: "bg-destructive" }, En = {
 	ok: "success",
 	error: "destructive",
 	unset: "secondary"
-}, En = {
+}, Dn = {
 	ok: "OK",
 	error: "Error",
 	unset: "Unset"
 };
-function Dn({ icon: e, label: t, children: n }) {
+function On({ icon: e, label: t, children: n }) {
 	return /* @__PURE__ */ G("div", {
 		className: "flex items-center justify-between gap-4",
 		children: [/* @__PURE__ */ G("div", {
@@ -4655,8 +4655,8 @@ function Dn({ icon: e, label: t, children: n }) {
 		})]
 	});
 }
-function On({ span: t, serviceColor: n, traceDurationNs: r }) {
-	return /* @__PURE__ */ G(U, { children: [
+function kn({ span: t, serviceColor: n, traceDurationNs: r }) {
+	return /* @__PURE__ */ G(ce, { children: [
 		/* @__PURE__ */ G("div", {
 			className: "space-y-1 px-2.5 pt-2 pb-1.5",
 			children: [/* @__PURE__ */ G("div", {
@@ -4667,14 +4667,14 @@ function On({ span: t, serviceColor: n, traceDurationNs: r }) {
 				})]
 			}), /* @__PURE__ */ G("div", {
 				className: "flex items-center gap-1.5 pl-[14px]",
-				children: [/* @__PURE__ */ W(D, {
-					variant: Tn[t.status],
+				children: [/* @__PURE__ */ W(O, {
+					variant: En[t.status],
 					className: "h-4 text-[9px]",
-					children: En[t.status]
-				}), /* @__PURE__ */ W(D, {
+					children: Dn[t.status]
+				}), /* @__PURE__ */ W(O, {
 					variant: "outline",
 					className: "h-4 text-[9px]",
-					children: xn[t.kind]
+					children: Sn[t.kind]
 				})]
 			})]
 		}),
@@ -4682,25 +4682,25 @@ function On({ span: t, serviceColor: n, traceDurationNs: r }) {
 		/* @__PURE__ */ G("div", {
 			className: "space-y-1 px-2.5 py-1.5 text-[11px]",
 			children: [
-				/* @__PURE__ */ W(Dn, {
-					icon: Qe,
+				/* @__PURE__ */ W(On, {
+					icon: $e,
 					label: "Service",
 					children: t.serviceName
 				}),
-				/* @__PURE__ */ W(Dn, {
-					icon: Ze,
+				/* @__PURE__ */ W(On, {
+					icon: Qe,
 					label: "Duration",
 					children: /* @__PURE__ */ W("span", {
 						className: "font-mono tabular-nums",
-						children: rn(t.durationNs)
+						children: an(t.durationNs)
 					})
 				}),
-				/* @__PURE__ */ W(Dn, {
-					icon: qe,
+				/* @__PURE__ */ W(On, {
+					icon: Je,
 					label: "% of trace",
 					children: /* @__PURE__ */ W("span", {
 						className: "font-mono tabular-nums",
-						children: sn(t.durationNs, r)
+						children: cn(t.durationNs, r)
 					})
 				})
 			]
@@ -4714,19 +4714,19 @@ function On({ span: t, serviceColor: n, traceDurationNs: r }) {
 		})
 	] });
 }
-function kn({ span: e, serviceColor: t, traceDurationNs: n, renderTooltip: r, children: i }) {
-	return /* @__PURE__ */ G(N, {
+function An({ span: e, serviceColor: t, traceDurationNs: n, renderTooltip: r, children: i }) {
+	return /* @__PURE__ */ G(P, {
 		openDelay: 250,
 		closeDelay: 0,
 		children: [/* @__PURE__ */ W(ee, {
 			asChild: !0,
 			children: i
-		}), /* @__PURE__ */ W(P, {
+		}), /* @__PURE__ */ W(F, {
 			side: "right",
 			align: "start",
 			sideOffset: 4,
 			className: "w-56 p-0",
-			children: r ? r(e) : /* @__PURE__ */ W(On, {
+			children: r ? r(e) : /* @__PURE__ */ W(kn, {
 				span: e,
 				serviceColor: t,
 				traceDurationNs: n
@@ -4734,13 +4734,13 @@ function kn({ span: e, serviceColor: t, traceDurationNs: n, renderTooltip: r, ch
 		})]
 	});
 }
-function An({ depth: e }) {
+function jn({ depth: e }) {
 	return e === 0 ? null : /* @__PURE__ */ W("span", {
 		className: "pointer-events-none relative shrink-0",
-		style: { width: e * hn },
+		style: { width: e * gn },
 		"aria-hidden": "true",
 		children: Array.from({ length: e }, (t, n) => {
-			let r = n === e - 1, i = n * hn + hn / 2;
+			let r = n === e - 1, i = n * gn + gn / 2;
 			return r ? /* @__PURE__ */ W("span", {
 				className: "absolute top-0 border-l border-border/30",
 				style: {
@@ -4749,7 +4749,7 @@ function An({ depth: e }) {
 				},
 				children: /* @__PURE__ */ W("span", {
 					className: "absolute bottom-0 left-0 border-b border-border/30",
-					style: { width: hn / 2 - 2 }
+					style: { width: gn / 2 - 2 }
 				})
 			}, n) : /* @__PURE__ */ W("span", {
 				className: "absolute top-0 h-full border-l border-border/30",
@@ -4758,12 +4758,12 @@ function An({ depth: e }) {
 		})
 	});
 }
-function jn(e) {
+function Mn(e) {
 	let t = /* @__PURE__ */ new Set(), n = new Set(e.map((e) => e.spanId));
 	for (let r of e) r.parentSpanId && n.has(r.parentSpanId) && t.add(r.parentSpanId);
 	return t;
 }
-function Mn(e, t) {
+function Nn(e, t) {
 	if (t.size === 0) return e;
 	let n = /* @__PURE__ */ new Set();
 	for (let r = 0; r < e.length; r++) {
@@ -4775,7 +4775,7 @@ function Mn(e, t) {
 	}
 	return e.filter((e) => !n.has(e.spanId));
 }
-function Nn(e) {
+function Pn(e) {
 	let t = /* @__PURE__ */ new Map(), n = [];
 	for (let r = e.length - 1; r >= 0; r--) {
 		let i = e[r].depth;
@@ -4785,11 +4785,11 @@ function Nn(e) {
 	}
 	return t;
 }
-function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, serviceColor: a, selected: o, hasChildren: s, collapsed: c, collapsedCount: l, onSelect: u, onToggle: d, onHover: f, onLeave: p, renderTooltip: m }) {
-	let { x: h, width: g } = on(t.startOffsetNs, t.durationNs, n, i), _ = t.status === "error" ? wn.error : a, v = rn(t.durationNs), y = g >= 56, b = !y;
+function Fn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, serviceColor: a, selected: o, hasChildren: s, collapsed: c, collapsedCount: l, onSelect: u, onToggle: d, onHover: f, onLeave: p, renderTooltip: m }) {
+	let { x: h, width: g } = sn(t.startOffsetNs, t.durationNs, n, i), _ = t.status === "error" ? Tn.error : a, v = an(t.durationNs), y = g >= 56, b = !y;
 	return /* @__PURE__ */ G("div", {
 		className: e("group flex w-full cursor-pointer transition-colors", o ? "bg-accent/50" : "hover:bg-muted/30"),
-		style: { height: mn },
+		style: { height: hn },
 		onClick: () => u?.(t),
 		onKeyDown: (e) => {
 			e.key === "Enter" || e.key === " " ? (e.preventDefault(), u?.(t)) : (e.key === "ArrowRight" && s && c || e.key === "ArrowLeft" && s && !c) && (e.preventDefault(), d?.(t.spanId));
@@ -4804,7 +4804,7 @@ function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 				className: e("w-[3px] shrink-0 transition-colors", o ? "bg-primary" : "bg-transparent"),
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ W(kn, {
+			/* @__PURE__ */ W(An, {
 				span: t,
 				serviceColor: a,
 				traceDurationNs: n,
@@ -4813,7 +4813,7 @@ function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 					className: "flex shrink-0 items-center gap-1 overflow-hidden border-r border-border/30 px-1.5",
 					style: { width: r },
 					children: [
-						/* @__PURE__ */ W(An, { depth: t.depth }),
+						/* @__PURE__ */ W(jn, { depth: t.depth }),
 						s ? /* @__PURE__ */ W("button", {
 							type: "button",
 							tabIndex: -1,
@@ -4823,7 +4823,7 @@ function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 							className: "flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
 							"aria-label": c ? `Expand ${t.name}` : `Collapse ${t.name}`,
 							"aria-expanded": !c,
-							children: W(c ? Ye : Je, { className: "size-3.5" })
+							children: W(c ? Xe : Ye, { className: "size-3.5" })
 						}) : /* @__PURE__ */ W("span", {
 							className: "flex size-4 shrink-0 items-center justify-center",
 							children: /* @__PURE__ */ W("span", { className: e("size-2 rounded-full", a) })
@@ -4835,8 +4835,8 @@ function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 									className: "truncate text-[13px] leading-tight font-medium text-foreground",
 									children: t.name
 								}),
-								t.status === "error" && /* @__PURE__ */ W(Xe, { className: "size-3.5 shrink-0 text-destructive" }),
-								c && /* @__PURE__ */ W(D, {
+								t.status === "error" && /* @__PURE__ */ W(Ze, { className: "size-3.5 shrink-0 text-destructive" }),
+								c && /* @__PURE__ */ W(O, {
 									variant: "secondary",
 									className: "h-4 shrink-0 text-[9px]",
 									children: l
@@ -4854,7 +4854,7 @@ function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 				className: "relative flex-1 overflow-hidden",
 				style: {
 					paddingLeft: $,
-					paddingRight: vn
+					paddingRight: yn
 				},
 				"aria-label": `${t.name}: ${v}`,
 				children: [
@@ -4863,8 +4863,8 @@ function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 						style: {
 							left: $ + h,
 							width: Math.max(g, 3),
-							height: gn,
-							borderRadius: _n
+							height: _n,
+							borderRadius: vn
 						}
 					}),
 					y && /* @__PURE__ */ W("span", {
@@ -4885,14 +4885,14 @@ function Pn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 		]
 	});
 }
-function Fn({ traceDurationNs: e, labelWidth: t, usableWidth: n, hasCollapsible: r, isAllCollapsed: i, onExpandAll: a, onCollapseAll: o }) {
-	let s = dn(e, un(n)), c = K().domain([0, e]).range([0, n]);
+function In({ traceDurationNs: e, labelWidth: t, usableWidth: n, hasCollapsible: r, isAllCollapsed: i, onExpandAll: a, onCollapseAll: o }) {
+	let s = fn(e, dn(n)), c = K().domain([0, e]).range([0, n]);
 	return /* @__PURE__ */ G("div", {
 		className: "flex shrink-0 items-end border-b border-border bg-muted/30",
-		style: { height: yn },
+		style: { height: bn },
 		children: [/* @__PURE__ */ G("div", {
 			className: "flex shrink-0 items-center justify-between border-r border-border/30 px-3 pb-2",
-			style: { width: t + bn },
+			style: { width: t + xn },
 			children: [/* @__PURE__ */ W("span", {
 				className: "truncate text-[11px] font-semibold tracking-wider text-muted-foreground uppercase",
 				children: "Service & Operation"
@@ -4901,13 +4901,13 @@ function Fn({ traceDurationNs: e, labelWidth: t, usableWidth: n, hasCollapsible:
 				onClick: i ? a : o,
 				className: "flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
 				"aria-label": i ? "Expand all spans" : "Collapse all spans",
-				children: W(i ? Je : Ye, { className: "size-3.5" })
+				children: W(i ? Ye : Xe, { className: "size-3.5" })
 			})]
 		}), /* @__PURE__ */ W("div", {
 			className: "relative flex-1 pb-2",
 			style: {
 				paddingLeft: $,
-				paddingRight: vn
+				paddingRight: yn
 			},
 			children: s.map((e, t) => {
 				let n = t === 0, r = t === s.length - 1;
@@ -4917,18 +4917,18 @@ function Fn({ traceDurationNs: e, labelWidth: t, usableWidth: n, hasCollapsible:
 						left: $ + c(e),
 						transform: n ? "none" : r ? "translateX(-100%)" : "translateX(-50%)"
 					},
-					children: rn(e)
+					children: an(e)
 				}, e);
 			})
 		})]
 	});
 }
-function In({ traceDurationNs: e, labelWidth: t, usableWidth: n, rowCount: r }) {
-	let i = dn(e, un(n)), a = K().domain([0, e]).range([0, n]), o = r * mn;
+function Ln({ traceDurationNs: e, labelWidth: t, usableWidth: n, rowCount: r }) {
+	let i = fn(e, dn(n)), a = K().domain([0, e]).range([0, n]), o = r * hn;
 	return /* @__PURE__ */ W("svg", {
 		className: "pointer-events-none absolute top-0",
 		style: {
-			left: t + bn + $,
+			left: t + xn + $,
 			width: n,
 			height: o
 		},
@@ -4944,7 +4944,7 @@ function In({ traceDurationNs: e, labelWidth: t, usableWidth: n, rowCount: r })
 		}, e))
 	});
 }
-var Ln = [
+var Rn = [
 	{
 		indent: 0,
 		labelPct: 60,
@@ -4976,7 +4976,7 @@ var Ln = [
 		barPct: 65
 	}
 ];
-function Rn({ ariaLabel: t, className: n, ...r }) {
+function zn({ ariaLabel: t, className: n, ...r }) {
 	return /* @__PURE__ */ G("div", {
 		role: "img",
 		"aria-busy": "true",
@@ -4985,17 +4985,17 @@ function Rn({ ariaLabel: t, className: n, ...r }) {
 		...r,
 		children: [/* @__PURE__ */ W("div", {
 			className: "flex shrink-0 items-center border-b border-border bg-muted/30 px-3",
-			style: { height: yn },
-			children: /* @__PURE__ */ W(g, { className: "h-3 w-1/3 max-w-32" })
+			style: { height: bn },
+			children: /* @__PURE__ */ W(_, { className: "h-3 w-1/3 max-w-32" })
 		}), /* @__PURE__ */ W("div", {
 			className: "flex-1",
-			children: Ln.map((e, t) => /* @__PURE__ */ G("div", {
+			children: Rn.map((e, t) => /* @__PURE__ */ G("div", {
 				className: "flex items-center gap-2 px-2",
-				style: { height: mn },
+				style: { height: hn },
 				children: [/* @__PURE__ */ G("div", {
 					className: "flex shrink-0 items-center gap-1.5",
 					style: { paddingLeft: e.indent * 12 },
-					children: [/* @__PURE__ */ W(g, { className: "size-2.5 rounded-full" }), /* @__PURE__ */ W(g, {
+					children: [/* @__PURE__ */ W(_, { className: "size-2.5 rounded-full" }), /* @__PURE__ */ W(_, {
 						className: "h-3",
 						style: {
 							width: `${e.labelPct}%`,
@@ -5005,11 +5005,11 @@ function Rn({ ariaLabel: t, className: n, ...r }) {
 					})]
 				}), /* @__PURE__ */ W("div", {
 					className: "relative min-w-0 flex-1",
-					children: /* @__PURE__ */ W(g, {
+					children: /* @__PURE__ */ W(_, {
 						className: "rounded-sm",
 						style: {
 							width: `${e.barPct}%`,
-							height: gn
+							height: _n
 						}
 					})
 				})]
@@ -5017,32 +5017,32 @@ function Rn({ ariaLabel: t, className: n, ...r }) {
 		})]
 	});
 }
-function zn({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHover: a, onSpanLeave: o, defaultCollapsed: s = !1, renderTooltip: c, ariaLabel: l = "Trace waterfall timeline", className: u, ...d }) {
-	let f = m(n, t.length), [p, h] = R.useState({
-		labelWidth: fn,
+function Bn({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHover: a, onSpanLeave: o, defaultCollapsed: s = !1, renderTooltip: c, ariaLabel: l = "Trace waterfall timeline", className: u, ...d }) {
+	let f = h(n, t.length), [p, m] = z.useState({
+		labelWidth: pn,
 		timelineWidth: 0
-	}), g = R.useRef(null), v = R.useMemo(() => jn(t), [t]), [y, b] = R.useState(() => s ? new Set(jn(t)) : /* @__PURE__ */ new Set()), x = R.useCallback((e) => {
+	}), g = z.useRef(null), _ = z.useMemo(() => Mn(t), [t]), [y, b] = z.useState(() => s ? new Set(Mn(t)) : /* @__PURE__ */ new Set()), x = z.useCallback((e) => {
 		if (g.current &&= (g.current.disconnect(), null), e) {
 			let t = new ResizeObserver(([e]) => {
-				let t = Math.round(e.contentRect.width), n = Math.min(fn, Math.round(t * pn)), r = t - n - bn - $ - vn;
-				h({
+				let t = Math.round(e.contentRect.width), n = Math.min(pn, Math.round(t * mn)), r = t - n - xn - $ - yn;
+				m({
 					labelWidth: n,
 					timelineWidth: Math.max(r, 0)
 				});
 			});
 			t.observe(e), g.current = t;
 		}
-	}, []), S = R.useMemo(() => an(t), [t]), C = R.useMemo(() => Cn(t), [t]), w = R.useMemo(() => Nn(t), [t]), T = R.useMemo(() => Mn(t, y), [t, y]), E = R.useCallback((e) => {
+	}, []), S = z.useMemo(() => on(t), [t]), C = z.useMemo(() => wn(t), [t]), w = z.useMemo(() => Pn(t), [t]), T = z.useMemo(() => Nn(t, y), [t, y]), E = z.useCallback((e) => {
 		b((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, []), D = R.useCallback(() => b(/* @__PURE__ */ new Set()), []), O = R.useCallback(() => b(new Set(v)), [v]), k = y.size > 0;
-	return f === "loading" ? /* @__PURE__ */ W(Rn, {
+	}, []), D = z.useCallback(() => b(/* @__PURE__ */ new Set()), []), O = z.useCallback(() => b(new Set(_)), [_]), k = y.size > 0;
+	return f === "loading" ? /* @__PURE__ */ W(zn, {
 		ariaLabel: l,
 		className: u,
 		...d
-	}) : f === "empty" ? /* @__PURE__ */ W(_, {
+	}) : f === "empty" ? /* @__PURE__ */ W(v, {
 		ariaLabel: l,
 		className: e("min-h-0 rounded-lg border border-border bg-card", u),
 		...d
@@ -5052,31 +5052,31 @@ function zn({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHove
 		role: "treegrid",
 		"aria-label": l,
 		...d,
-		children: [/* @__PURE__ */ W(Fn, {
+		children: [/* @__PURE__ */ W(In, {
 			traceDurationNs: S,
 			labelWidth: p.labelWidth,
 			usableWidth: p.timelineWidth,
-			hasCollapsible: v.size > 0,
+			hasCollapsible: _.size > 0,
 			isAllCollapsed: k,
 			onExpandAll: D,
 			onCollapseAll: O
-		}), /* @__PURE__ */ W(F, {
+		}), /* @__PURE__ */ W(I, {
 			className: "min-h-0 flex-1",
 			children: /* @__PURE__ */ G("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ W(In, {
+				children: [/* @__PURE__ */ W(Ln, {
 					traceDurationNs: S,
 					labelWidth: p.labelWidth,
 					usableWidth: p.timelineWidth,
 					rowCount: T.length
-				}), T.map((e) => /* @__PURE__ */ W(Pn, {
+				}), T.map((e) => /* @__PURE__ */ W(Fn, {
 					span: e,
 					traceDurationNs: S,
 					labelWidth: p.labelWidth,
 					usableWidth: p.timelineWidth,
-					serviceColor: C.get(e.serviceName) ?? Sn[0],
+					serviceColor: C.get(e.serviceName) ?? Cn[0],
 					selected: e.spanId === r,
-					hasChildren: v.has(e.spanId),
+					hasChildren: _.has(e.spanId),
 					collapsed: y.has(e.spanId),
 					collapsedCount: w.get(e.spanId) ?? 0,
 					onSelect: i,
@@ -5090,4 +5090,4 @@ function zn({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHove
 	});
 }
 //#endregion
-export { nn as AreaChart, Oe as AreaSeries, je as BarChart, Ee as BarSeries, w as CHART_THEMES, p as CartesianChart, h as CategoryAxis, h as XAxis, pe as ChartCard, T as ChartContainer, xe as ChartLegend, be as ChartLegendContent, r as ChartStyle, ve as ChartTooltip, _e as ChartTooltipContent, i as DEFAULT_MARGIN, Ie as DoughnutChart, a as Grid, tn as LineChart, we as LineSeries, Bt as Metric, en as MetricGroup, d as ReferenceLine, zn as TraceWaterfall, f as ValueAxis, f as YAxis, dn as buildTimeAxisTicks, e as cn, n as compactTick, on as computeBarGeometry, an as computeTraceDurationNs, rn as formatDurationNs, sn as formatTracePercent, At as resolveSentiment, t as useChartConfig };
+export { rn as AreaChart, ke as AreaSeries, Me as BarChart, De as BarSeries, a as CHART_THEMES, m as CartesianChart, g as CategoryAxis, g as XAxis, me as ChartCard, E as ChartContainer, Se as ChartLegend, xe as ChartLegendContent, i as ChartStyle, ye as ChartTooltip, ve as ChartTooltipContent, r as DEFAULT_MARGIN, Le as DoughnutChart, o as Grid, nn as LineChart, Te as LineSeries, Vt as Metric, tn as MetricGroup, f as ReferenceLine, Bn as TraceWaterfall, p as ValueAxis, p as YAxis, fn as buildTimeAxisTicks, e as cn, n as compactTick, sn as computeBarGeometry, on as computeTraceDurationNs, an as formatDurationNs, cn as formatTracePercent, jt as resolveSentiment, t as useChartConfig };