@gravitee/graphene-charts 2.56.0 → 2.57.0

package/dist/index.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-CvSeRmfY.js";
 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-CBHhjCs9.js";
-import { Badge as O, Card as k, CardContent as A, CardDescription as j, CardHeader as M, CardTitle as N, Collapsible as P, CollapsibleContent as F, CollapsibleTrigger as I, Command as L, CommandEmpty as R, CommandGroup as ee, CommandItem as te, CommandList as z, HoverCard as ne, HoverCardContent as B, HoverCardTrigger as re, ScrollArea as ie, Separator as ae, Tooltip as oe, TooltipContent as se, TooltipProvider as ce, TooltipTrigger as le } from "@gravitee/graphene-core";
-import * as V from "react";
-import { createContext as ue, createElement as de, forwardRef as H, useCallback as U, useContext as fe, useEffect as pe, useId as W, useMemo as me, useRef as G, useState as K } from "react";
+import { Badge as O, Card as k, CardContent as A, CardDescription as j, CardHeader as M, CardTitle as N, Collapsible as P, CollapsibleContent as F, CollapsibleTrigger as I, Command as L, CommandEmpty as R, CommandGroup as z, CommandItem as ee, CommandList as B, HoverCard as te, HoverCardContent as V, HoverCardTrigger as ne, ScrollArea as re, Separator as ie, Tooltip as ae, TooltipContent as oe, TooltipProvider as se, TooltipTrigger as ce } from "@gravitee/graphene-core";
+import * as H from "react";
+import { createContext as le, createElement as ue, forwardRef as U, useCallback as W, useContext as de, useEffect as fe, useId as G, useLayoutEffect as pe, useMemo as me, useRef as he, useState as K } from "react";
 import { Fragment as q, jsx as J, jsxs as Y } from "react/jsx-runtime";
-import { scaleLinear as he } from "d3-scale";
-import { arc as ge, area as _e, curveLinear as ve, curveMonotoneX as ye, curveStep as be, line as xe, pie as Se } from "d3-shape";
-import { createPortal as Ce } from "react-dom";
+import { scaleLinear as ge } from "d3-scale";
+import { arc as _e, area as ve, curveLinear as ye, curveMonotoneX as be, curveStep as xe, line as Se, pie as Ce } from "d3-shape";
+import { createPortal as we } from "react-dom";
 //#region src/base/ChartCard/ChartCard.tsx
-function we({ title: t, description: n, children: r, className: i, ...a }) {
+function Te({ title: t, description: n, children: r, className: i, ...a }) {
 	return /* @__PURE__ */ Y(k, {
 		className: e("flex h-full flex-col gap-0", i),
 		...a,
@@ -30,25 +30,25 @@ function we({ title: t, description: n, children: r, className: i, ...a }) {
 }
 //#endregion
 //#region src/base/ChartTooltip/ChartTooltip.tsx
-function Te(e) {
+function Ee(e) {
 	return typeof e == "number" ? e.toLocaleString() : e;
 }
-function Ee(e, t, n) {
+function De(e, t, n) {
 	return t && e[t] ? e[t] : e[n];
 }
-function De(e) {
+function Oe(e) {
 	return e.toLocaleString();
 }
-function Oe(e) {
+function ke(e) {
 	return `${e.toFixed(1)}%`;
 }
-function ke(e) {
+function Ae(e) {
 	return e.reduce((e, t) => e + (typeof t.value == "number" ? t.value : 0), 0);
 }
-function Ae({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIndicator: o, indicator: s = "dot", labelKey: c, nameKey: l, labelIndicator: u, labelColor: d, labelFormatter: f, labelClassName: p, valueFormatter: m, showTotal: h = !1, totalLabel: g = "Total", totalFormatter: _ = De, showPercent: v = !1, percentFormatter: y = Oe, className: b, ...x }) {
-	let { config: S } = t(), C = m ?? Te, w = !m;
+function je({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIndicator: o, indicator: s = "dot", labelKey: c, nameKey: l, labelIndicator: u, labelColor: d, labelFormatter: f, labelClassName: p, valueFormatter: m, showTotal: h = !1, totalLabel: g = "Total", totalFormatter: _ = Oe, showPercent: v = !1, percentFormatter: y = ke, className: b, ...x }) {
+	let { config: S } = t(), C = m ?? Ee, w = !m;
 	if (!i || r.length === 0) return null;
-	let E = o ?? (u === "line" || u === "dashed"), D = ke(r), O = r.length === 1 && s !== "dot", k = c ? Ee(S, c, c)?.label ?? n : typeof n == "string" ? S[n]?.label ?? n : n, A = f ? f(n ?? "", r) : k, j = (() => {
+	let E = o ?? (u === "line" || u === "dashed"), D = Ae(r), O = r.length === 1 && s !== "dot", k = c ? De(S, c, c)?.label ?? n : typeof n == "string" ? S[n]?.label ?? n : n, A = f ? f(n ?? "", r) : k, j = (() => {
 		if (d) return d;
 		if (c && S[c]?.color) return S[c].color;
 		let e = r[0];
@@ -65,7 +65,7 @@ function Ae({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIn
 	}), P = /* @__PURE__ */ J("div", {
 		className: "grid gap-1.5",
 		children: r.map((t, n) => {
-			let r = Ee(S, `${l ?? t.dataKey ?? t.name ?? "value"}`, t.name), i = t.color ?? `var(--color-${T(t.dataKey ?? t.name)})`;
+			let r = De(S, `${l ?? t.dataKey ?? t.name ?? "value"}`, t.name), i = t.color ?? `var(--color-${T(t.dataKey ?? t.name)})`;
 			return /* @__PURE__ */ Y("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__ */ J(r.icon, {}) : !E && /* @__PURE__ */ J("div", {
@@ -133,22 +133,22 @@ function Ae({ label: n, items: r = [], active: i = !0, hideLabel: a = !1, hideIn
 		})]
 	});
 }
-function je({ content: e }) {
+function Me({ content: e }) {
 	let { setTooltip: t } = d();
-	return V.useLayoutEffect(() => (t({ content: e }), () => t(null)), [e, t]), null;
+	return H.useLayoutEffect(() => (t({ content: e }), () => t(null)), [e, t]), null;
 }
 //#endregion
 //#region src/base/ChartLegend/ChartLegend.tsx
-var Me = {
+var Ne = {
 	start: "justify-start",
 	center: "justify-center",
 	end: "justify-end"
 };
-function Ne({ items: n = [], hideIcon: r = !1, nameKey: i, verticalAlign: a, align: o = "start", onItemHover: s, onItemLeave: c, hoveredLegendKey: l, className: u, ...d }) {
+function Pe({ 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__ */ J("div", {
 		"data-slot": "chart-legend-content",
-		className: e("flex items-center gap-4 overflow-hidden px-4 py-1", Me[o], u),
+		className: e("flex items-center gap-4 overflow-hidden px-4 py-1", Ne[o], u),
 		...d,
 		children: n.map((t) => {
 			let n = f[`${i ?? t.dataKey ?? t.value}`], a = t.color ?? `var(--color-${T(t.dataKey ?? t.value)})`, o = t.dataKey ?? t.value;
@@ -168,9 +168,9 @@ function Ne({ items: n = [], hideIcon: r = !1, nameKey: i, verticalAlign: a, ali
 		})
 	});
 }
-function Pe({ content: e, verticalAlign: t = "bottom" }) {
+function Fe({ content: e, verticalAlign: t = "bottom" }) {
 	let { setLegend: n } = d();
-	return V.useLayoutEffect(() => (n({
+	return H.useLayoutEffect(() => (n({
 		content: e,
 		verticalAlign: t
 	}), () => n(null)), [
@@ -181,14 +181,14 @@ function Pe({ content: e, verticalAlign: t = "bottom" }) {
 }
 //#endregion
 //#region src/series/curves.ts
-var Fe = {
-	monotone: ye,
-	linear: ve,
-	step: be
-}, Ie = "\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 Le({ 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 = V.useRef(null), [_, v] = V.useState(0), y = `var(--color-${T(e)})`;
-	V.useLayoutEffect(() => {
+var Ie = {
+	monotone: be,
+	linear: ye,
+	step: xe
+}, Le = "\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 Re({ 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 = H.useRef(null), [_, v] = H.useState(0), y = `var(--color-${T(e)})`;
+	H.useLayoutEffect(() => {
 		g.current && v(g.current.getTotalLength());
 	}, [
 		a,
@@ -198,7 +198,7 @@ function Le({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 		n,
 		i
 	]);
-	let b = Fe[n], x = typeof d[e]?.label == "string" ? d[e]?.label : e, S = [];
+	let b = Ie[n], x = typeof d[e]?.label == "string" ? d[e]?.label : e, S = [];
 	for (let t of a) {
 		let n = t[e];
 		if (n == null) {
@@ -222,7 +222,7 @@ function Le({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 			value: r
 		});
 	}
-	let C = xe().x((e) => e.x).y((e) => e.y).curve(b).defined((e) => e.defined)(S) ?? "";
+	let C = Se().x((e) => e.x).y((e) => e.y).curve(b).defined((e) => e.defined)(S) ?? "";
 	return /* @__PURE__ */ Y("g", {
 		style: {
 			opacity: u !== null && u !== e ? .15 : 1,
@@ -231,7 +231,7 @@ function Le({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 		children: [
 			/* @__PURE__ */ J("style", {
 				precedence: "graphene-charts",
-				children: Ie
+				children: Le
 			}),
 			/* @__PURE__ */ J("path", {
 				ref: g,
@@ -283,16 +283,16 @@ function Le({ dataKey: e, axisId: t, curveType: n = "monotone", showDots: r = !1
 		]
 	});
 }
-Le.seriesType = "LineSeries";
+Re.seriesType = "LineSeries";
 //#endregion
 //#region src/series/BarSeries.tsx
-var Re = "\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 ze({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
-	let { data: i, categoryScale: a, resolveValueScale: o, innerHeight: s, layout: c, colorMode: l, animated: u, hoveredLegendKey: d, config: f, stackedLayers: p, barGroupScale: m, valueTickFormatter: h, chartWrapperRef: g, chartId: _, showTooltipAt: v, hideTooltip: b } = w(), x = o(t), S = c === "vertical", E = l === "category", D = `var(--color-${T(e)})`, O = typeof f[e]?.label == "string" ? f[e]?.label : e, [k, A] = C("var(--chart-bar-radius, 3px)", 3), j = r ?? k, [M, N] = V.useState(null);
-	V.useEffect(() => {
+var ze = "\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 Be({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
+	let { data: i, categoryScale: a, resolveValueScale: o, innerHeight: s, layout: c, colorMode: l, animated: u, hoveredLegendKey: d, config: f, stackedLayers: p, barGroupScale: m, valueTickFormatter: h, chartWrapperRef: g, chartId: _, showTooltipAt: v, hideTooltip: b } = w(), x = o(t), S = c === "vertical", E = l === "category", D = `var(--color-${T(e)})`, O = typeof f[e]?.label == "string" ? f[e]?.label : e, [k, A] = C("var(--chart-bar-radius, 3px)", 3), j = r ?? k, [M, N] = H.useState(null);
+	H.useEffect(() => {
 		N(g.current);
 	}, [g]);
-	let P = n ? p.get(n)?.find((t) => t.key === e) : void 0, F = n ? p.get(n) ?? null : null, I = V.useMemo(() => !F || F.length === 0 ? !1 : F[0].key === e, [F, e]), L = V.useMemo(() => {
+	let P = n ? p.get(n)?.find((t) => t.key === e) : void 0, F = n ? p.get(n) ?? null : null, I = H.useMemo(() => !F || F.length === 0 ? !1 : F[0].key === e, [F, e]), L = H.useMemo(() => {
 		if (!I || !F || F.length === 0) return null;
 		let e = F[F.length - 1];
 		return i.map((t, r) => {
@@ -336,9 +336,9 @@ function ze({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
 		children: [
 			/* @__PURE__ */ J("style", {
 				precedence: "graphene-charts",
-				children: Re
+				children: ze
 			}),
-			M && Ce(A, M),
+			M && we(A, M),
 			L && /* @__PURE__ */ J("defs", { children: L.map(({ clipId: e, path: t }) => /* @__PURE__ */ J("clipPath", {
 				id: e,
 				children: /* @__PURE__ */ J("path", { d: t })
@@ -398,13 +398,13 @@ function ze({ dataKey: e, axisId: t, stackId: n, barRadius: r }) {
 		]
 	});
 }
-ze.seriesType = "BarSeries";
+Be.seriesType = "BarSeries";
 //#endregion
 //#region src/series/AreaSeries.tsx
-var Be = "\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 Ve({ 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), _ = V.useRef(null), [v, y] = V.useState(0), b = `var(--color-${T(e)})`, x = Fe[r];
-	V.useLayoutEffect(() => {
+var Ve = "\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 He({ 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), _ = H.useRef(null), [v, y] = H.useState(0), b = `var(--color-${T(e)})`, x = Ie[r];
+	H.useLayoutEffect(() => {
 		_.current && y(_.current.getTotalLength());
 	}, [
 		s,
@@ -417,7 +417,7 @@ function Ve({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 	]);
 	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 = _e().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 = xe().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);
+		let t = (t) => o ? !0 : s[t]?.[e] != null, n = ve().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 = Se().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]));
@@ -445,7 +445,7 @@ function Ve({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 				category: n.category
 			});
 		}
-		let n = (e) => e.defined, r = xe().x((e) => e.x).y((e) => e.y).curve(x).defined(n), i = _e().x((e) => e.x).y0(u).y1((e) => e.y).curve(x).defined(n);
+		let n = (e) => e.defined, r = Se().x((e) => e.x).y((e) => e.y).curve(x).defined(n), i = ve().x((e) => e.x).y0(u).y1((e) => e.y).curve(x).defined(n);
 		if (k = r(t) ?? "", O = i(t) ?? "", f !== null) {
 			let e = t.find((e) => e.category === f && e.defined);
 			e && (A = e.x, j = e.y);
@@ -459,7 +459,7 @@ function Ve({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 		children: [
 			/* @__PURE__ */ J("style", {
 				precedence: "graphene-charts",
-				children: Be
+				children: Ve
 			}),
 			a && /* @__PURE__ */ J("defs", { children: /* @__PURE__ */ Y("linearGradient", {
 				id: C,
@@ -512,10 +512,10 @@ function Ve({ dataKey: e, axisId: t, stackId: n, curveType: r = "monotone", fill
 		]
 	});
 }
-Ve.seriesType = "AreaSeries";
+He.seriesType = "AreaSeries";
 //#endregion
 //#region src/lib/inferDataKeys.ts
-function He(e, t, n = "series") {
+function Ue(e, t, n = "series") {
 	if (e.length === 0) return [];
 	let r = /* @__PURE__ */ new Set(), i = [];
 	for (let t of e) for (let e of Object.keys(t)) {
@@ -529,10 +529,10 @@ function He(e, t, n = "series") {
 }
 //#endregion
 //#region src/charts/BarChart/BarChart.tsx
-var Ue = 120;
-function We({ data: e, dataKeys: n, colorMode: r = "series", state: i, layout: a = "vertical", variant: s = "grouped", margin: c, barRadius: u, showGrid: d = !0, showCategoryAxis: f = !0, showValueAxis: h = !0, valueTickFormatter: _, ariaLabel: v, animated: y = !0, onBarHover: b, onBarLeave: x, className: S, children: C, ...w }) {
-	let { config: T } = t(), E = n ?? He(e, Object.keys(T), r), D = a === "vertical", O = s === "stacked" ? "default" : void 0, k = D ? c : {
-		left: Ue,
+var We = 120;
+function Ge({ data: e, dataKeys: n, colorMode: r = "series", state: i, layout: a = "vertical", variant: s = "grouped", margin: c, barRadius: u, showGrid: d = !0, showCategoryAxis: f = !0, showValueAxis: h = !0, valueTickFormatter: _, ariaLabel: v, animated: y = !0, onBarHover: b, onBarLeave: x, className: S, children: C, ...w }) {
+	let { config: T } = t(), E = n ?? Ue(e, Object.keys(T), r), D = a === "vertical", O = s === "stacked" ? "default" : void 0, k = D ? c : {
+		left: We,
 		...c
 	};
 	return i === "loading" ? /* @__PURE__ */ J(l, {
@@ -555,7 +555,7 @@ function We({ data: e, dataKeys: n, colorMode: r = "series", state: i, layout: a
 		...w,
 		children: [
 			d && /* @__PURE__ */ J(o, { orientation: D ? "horizontal" : "vertical" }),
-			E.map((e) => /* @__PURE__ */ J(ze, {
+			E.map((e) => /* @__PURE__ */ J(Be, {
 				dataKey: e,
 				stackId: O,
 				barRadius: u
@@ -568,18 +568,18 @@ function We({ data: e, dataKeys: n, colorMode: r = "series", state: i, layout: a
 }
 //#endregion
 //#region src/charts/DoughnutChart/DoughnutChart.tsx
-var Ge = {
+var Ke = {
 	top: 10,
 	right: 10,
 	bottom: 10,
 	left: 10
-}, Ke = {
+}, qe = {
 	top: 30,
 	right: 60,
 	bottom: 30,
 	left: 60
-}, qe = 50, Je = "\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 Ye({ 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 }) {
+}, Je = 50, Ye = "\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 Xe({ 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__ */ J(S, {
 		ariaLabel: p,
@@ -589,7 +589,7 @@ function Ye({ state: e, data: t, innerRadius: n, padAngle: r, cornerRadius: i, l
 		ariaLabel: p ?? "Doughnut chart with 0 segments",
 		className: g,
 		...y
-	}) : /* @__PURE__ */ J(u, { children: /* @__PURE__ */ J(Xe, {
+	}) : /* @__PURE__ */ J(u, { children: /* @__PURE__ */ J(Ze, {
 		data: t,
 		innerRadius: n,
 		padAngle: r,
@@ -608,30 +608,30 @@ function Ye({ state: e, data: t, innerRadius: n, padAngle: r, cornerRadius: i, l
 		children: _
 	}) });
 }
-function Xe({ 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 }) {
+function Ze({ 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 ? Ke : Ge,
+		...E ? qe : Ke,
 		..._
-	}, k = V.useRef(null), A = V.useRef(null), j = c(A), M = D(), [N, P] = V.useState(null), F = V.useCallback((e) => P(e), []), I = V.useCallback(() => P(null), []), [L, R] = V.useState(null), ee = Math.max(0, j.width - O.left - O.right), te = Math.max(0, j.height - O.top - O.bottom), z = Math.min(ee, te) / 2, ne = z * r, B = V.useMemo(() => n.reduce((e, t) => e + t.value, 0), [n]), re = V.useMemo(() => Se().value((e) => e.value).sort(null).startAngle(u).endAngle(u + Math.PI * 2), [u]), ie = V.useMemo(() => n.length > 0 ? re(n) : [], [re, n]), ae = V.useMemo(() => ge().innerRadius(ne).outerRadius(z).padAngle(i).cornerRadius(a), [
-		ne,
-		z,
+	}, k = H.useRef(null), A = H.useRef(null), j = c(A), M = D(), [N, P] = H.useState(null), F = H.useCallback((e) => P(e), []), I = H.useCallback(() => P(null), []), [L, R] = H.useState(null), z = Math.max(0, j.width - O.left - O.right), ee = Math.max(0, j.height - O.top - O.bottom), B = Math.min(z, ee) / 2, te = B * r, V = H.useMemo(() => n.reduce((e, t) => e + t.value, 0), [n]), ne = H.useMemo(() => Ce().value((e) => e.value).sort(null).startAngle(u).endAngle(u + Math.PI * 2), [u]), re = H.useMemo(() => n.length > 0 ? ne(n) : [], [ne, n]), ie = H.useMemo(() => _e().innerRadius(te).outerRadius(B).padAngle(i).cornerRadius(a), [
+		te,
+		B,
 		i,
 		a
-	]), oe = V.useMemo(() => ge().innerRadius(z * 1.05).outerRadius(z * 1.05), [z]), se = V.useMemo(() => ge().innerRadius(z * 1.2).outerRadius(z * 1.2), [z]), ce = n.map((e) => ({
+	]), ae = H.useMemo(() => _e().innerRadius(B * 1.05).outerRadius(B * 1.05), [B]), oe = H.useMemo(() => _e().innerRadius(B * 1.2).outerRadius(B * 1.2), [B]), se = n.map((e) => ({
 		dataKey: e.category,
 		value: e.category
 	}));
-	function le(e) {
+	function ce(e) {
 		if (!o) return "";
-		if (typeof o == "function") return o(e, B);
+		if (typeof o == "function") return o(e, V);
 		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 B > 0 ? `${(e.value / B * 100).toFixed(1)}%` : "0%";
+			case "percent": return V > 0 ? `${(e.value / V * 100).toFixed(1)}%` : "0%";
 		}
 	}
-	function ue(e) {
-		let t = B > 0 ? (e.value / B * 100).toFixed(1) : "0";
+	function le(e) {
+		let t = V > 0 ? (e.value / V * 100).toFixed(1) : "0";
 		return [{
 			dataKey: e.category,
 			name: e.category,
@@ -639,48 +639,48 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 			payload: { percentage: t }
 		}];
 	}
-	function de(e, t) {
-		let n = ue(e);
+	function ue(e, t) {
+		let n = le(e);
 		if (C) {
 			let e = k.current?.getBoundingClientRect();
 			e && M.show(n, p ?? "", t, e);
 		}
 		m?.(e, t);
 	}
-	function H(e) {
+	function U(e) {
 		if (!C) return;
 		let t = k.current?.getBoundingClientRect();
 		t && M.move(e, t);
 	}
-	function U() {
+	function W() {
 		M.hide(), h?.();
 	}
-	function fe(e, t, n) {
+	function de(e, t, n) {
 		if (!C) return;
 		let r = k.current?.getBoundingClientRect();
 		if (!r) return;
-		let i = ae.centroid(t), a = j.width / 2 + i[0], o = j.height / 2 + i[1], s = ue(e), c = {
+		let i = ie.centroid(t), a = j.width / 2 + i[0], o = j.height / 2 + i[1], s = le(e), c = {
 			clientX: r.left + a,
 			clientY: r.top + o
 		};
 		M.show(s, p ?? "", c, r);
 	}
-	function pe() {
+	function fe() {
 		M.hide();
 	}
-	let W = w?.verticalAlign ?? "bottom", me = g ?? `Doughnut chart with ${n.length} segment${n.length === 1 ? "" : "s"}`;
+	let G = w?.verticalAlign ?? "bottom", pe = g ?? `Doughnut chart with ${n.length} segment${n.length === 1 ? "" : "s"}`;
 	return /* @__PURE__ */ Y(q, { children: [
 		/* @__PURE__ */ J("style", {
 			precedence: "graphene-charts",
-			children: Je
+			children: Ye
 		}),
 		y,
 		/* @__PURE__ */ Y("div", {
 			className: e("flex h-full w-full flex-col", v),
 			...b,
 			children: [
-				w && W === "top" && V.cloneElement(w.content, {
-					items: ce,
+				w && G === "top" && H.cloneElement(w.content, {
+					items: se,
 					verticalAlign: "top",
 					onItemHover: F,
 					onItemLeave: I,
@@ -693,14 +693,14 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 						/* @__PURE__ */ J("svg", {
 							ref: A,
 							role: "img",
-							"aria-label": me,
+							"aria-label": pe,
 							className: "h-full w-full",
 							children: j.width > 0 && j.height > 0 && /* @__PURE__ */ J("g", {
 								transform: `translate(${j.width / 2},${j.height / 2})`,
-								children: ie.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}%)`;
+								children: re.map((e) => {
+									let t = e.data, n = x[t.category], r = n?.color ?? `var(--color-${T(t.category)})`, i = V > 0 ? (t.value / V * 100).toFixed(1) : "0", a = `${typeof n?.label == "string" ? n.label : t.category}: ${t.value.toLocaleString()} (${i}%)`;
 									return /* @__PURE__ */ Y("g", { children: [/* @__PURE__ */ J("path", {
-										d: ae(e) ?? "",
+										d: ie(e) ?? "",
 										fill: r,
 										tabIndex: 0,
 										role: "img",
@@ -709,13 +709,13 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 										"data-animated": f ? "true" : "false",
 										className: "transition-opacity duration-150 hover:opacity-80 focus:outline-none",
 										style: N === null ? void 0 : { opacity: N === t.category ? 1 : .15 },
-										onMouseEnter: (e) => de(t, e),
-										onMouseMove: H,
-										onMouseLeave: U,
-										onFocus: (n) => fe(t, e, n),
-										onBlur: pe
+										onMouseEnter: (e) => ue(t, e),
+										onMouseMove: U,
+										onMouseLeave: W,
+										onFocus: (n) => de(t, e, n),
+										onBlur: fe
 									}), E && (() => {
-										let n = (e.startAngle + e.endAngle) / 2, r = n < Math.PI / 2 || n > 3 * Math.PI / 2, i = oe.centroid(e), a = se.centroid(e), o = a[0] + (r ? 8 : -8), s = a[1], c = o + (r ? 4 : -4), l = le(t), u = l.length > 7, d = u ? `${l.slice(0, 6)}…` : l, f = j.width / 2, p = j.height / 2;
+										let n = (e.startAngle + e.endAngle) / 2, r = n < Math.PI / 2 || n > 3 * Math.PI / 2, i = ae.centroid(e), a = oe.centroid(e), o = a[0] + (r ? 8 : -8), s = a[1], c = o + (r ? 4 : -4), l = ce(t), u = l.length > 7, d = u ? `${l.slice(0, 6)}…` : l, f = j.width / 2, p = j.height / 2;
 										return /* @__PURE__ */ Y("g", {
 											"aria-hidden": "true",
 											className: "cursor-default",
@@ -741,9 +741,9 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 													children: d
 												}),
 												u && /* @__PURE__ */ J("rect", {
-													x: r ? c : c - qe,
+													x: r ? c : c - Je,
 													y: s - 8,
-													width: qe,
+													width: Je,
 													height: 16,
 													fill: "transparent"
 												})
@@ -773,7 +773,7 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 						/* @__PURE__ */ J("div", {
 							className: "sr-only",
 							children: /* @__PURE__ */ Y("table", { children: [
-								/* @__PURE__ */ J("caption", { children: me }),
+								/* @__PURE__ */ J("caption", { children: pe }),
 								/* @__PURE__ */ J("thead", { children: /* @__PURE__ */ Y("tr", { children: [
 									/* @__PURE__ */ J("th", {
 										scope: "col",
@@ -789,7 +789,7 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 									})
 								] }) }),
 								/* @__PURE__ */ J("tbody", { children: n.map((e) => {
-									let t = B > 0 ? (e.value / B * 100).toFixed(1) : "0";
+									let t = V > 0 ? (e.value / V * 100).toFixed(1) : "0";
 									return /* @__PURE__ */ Y("tr", { children: [
 										/* @__PURE__ */ J("th", {
 											scope: "row",
@@ -805,7 +805,7 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 							state: M.state,
 							containerRef: k,
 							chartId: S,
-							children: V.cloneElement(C.content, {
+							children: H.cloneElement(C.content, {
 								label: M.state.label,
 								items: M.state.items,
 								active: !0
@@ -813,8 +813,8 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 						})
 					]
 				}),
-				w && W === "bottom" && V.cloneElement(w.content, {
-					items: ce,
+				w && G === "bottom" && H.cloneElement(w.content, {
+					items: se,
 					verticalAlign: "bottom",
 					onItemHover: F,
 					onItemLeave: I,
@@ -826,10 +826,10 @@ function Xe({ data: n, innerRadius: r = .6, padAngle: i = .02, cornerRadius: a =
 }
 //#endregion
 //#region ../../node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.mjs
-var Ze = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), Qe = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), $e = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), et = (e) => {
-	let t = $e(e);
+var Qe = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e) === t).join(" ").trim(), $e = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), et = (e) => e.replace(/^([A-Z])|[\s-_]+(\w)/g, (e, t, n) => n ? n.toUpperCase() : t.toLowerCase()), tt = (e) => {
+	let t = et(e);
 	return t.charAt(0).toUpperCase() + t.slice(1);
-}, tt = {
+}, nt = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -839,43 +839,43 @@ var Ze = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, nt = (e) => {
+}, rt = (e) => {
 	for (let t in e) if (t.startsWith("aria-") || t === "role" || t === "title") return !0;
 	return !1;
-}, rt = ue({}), it = () => fe(rt), at = 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 = "" } = it() ?? {}, m = r ?? d ? Number(n ?? u) * 24 / Number(t ?? l) : n ?? u;
-	return de("svg", {
+}, it = le({}), at = () => de(it), ot = U(({ 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 = "" } = at() ?? {}, m = r ?? d ? Number(n ?? u) * 24 / Number(t ?? l) : n ?? u;
+	return ue("svg", {
 		ref: c,
-		...tt,
-		width: t ?? l ?? tt.width,
-		height: t ?? l ?? tt.height,
+		...nt,
+		width: t ?? l ?? nt.width,
+		height: t ?? l ?? nt.height,
 		stroke: e ?? f,
 		strokeWidth: m,
-		className: Ze("lucide", p, i),
-		...!a && !nt(s) && { "aria-hidden": "true" },
+		className: Qe("lucide", p, i),
+		...!a && !rt(s) && { "aria-hidden": "true" },
 		...s
-	}, [...o.map(([e, t]) => de(e, t)), ...Array.isArray(a) ? a : [a]]);
+	}, [...o.map(([e, t]) => ue(e, t)), ...Array.isArray(a) ? a : [a]]);
 }), X = (e, t) => {
-	let n = H(({ className: n, ...r }, i) => de(at, {
+	let n = U(({ className: n, ...r }, i) => ue(ot, {
 		ref: i,
 		iconNode: t,
-		className: Ze(`lucide-${Qe(et(e))}`, `lucide-${e}`, n),
+		className: Qe(`lucide-${$e(tt(e))}`, `lucide-${e}`, n),
 		...r
 	}));
-	return n.displayName = et(e), n;
-}, ot = X("activity", [["path", {
+	return n.displayName = tt(e), n;
+}, st = 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"
 }]]), Z = X("chevron-down", [["path", {
 	d: "m6 9 6 6 6-6",
 	key: "qrunsl"
-}]]), st = X("chevron-right", [["path", {
+}]]), ct = X("chevron-right", [["path", {
 	d: "m9 18 6-6-6-6",
 	key: "mthhwq"
-}]]), ct = X("chevron-up", [["path", {
+}]]), lt = X("chevron-up", [["path", {
 	d: "m18 15-6-6-6 6",
 	key: "153udz"
-}]]), lt = X("circle-x", [
+}]]), ut = X("circle-x", [
 	["circle", {
 		cx: "12",
 		cy: "12",
@@ -890,7 +890,7 @@ var Ze = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 		d: "m9 9 6 6",
 		key: "z0biqf"
 	}]
-]), ut = X("clock", [["circle", {
+]), dt = X("clock", [["circle", {
 	cx: "12",
 	cy: "12",
 	r: "10",
@@ -898,7 +898,7 @@ var Ze = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 }], ["path", {
 	d: "M12 6v6l4 2",
 	key: "mmk7yg"
-}]]), dt = X("search", [["path", {
+}]]), ft = X("search", [["path", {
 	d: "m21 21-4.34-4.34",
 	key: "14j7rj"
 }], ["circle", {
@@ -906,7 +906,7 @@ var Ze = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 	cy: "11",
 	r: "8",
 	key: "4ej97u"
-}]]), ft = X("server", [
+}]]), pt = X("server", [
 	["rect", {
 		width: "20",
 		height: "8",
@@ -939,13 +939,13 @@ var Ze = (...e) => e.filter((e, t, n) => !!e && e.trim() !== "" && n.indexOf(e)
 		y2: "18",
 		key: "nzw8ys"
 	}]
-]), pt = X("x", [["path", {
+]), mt = X("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"
 }], ["path", {
 	d: "m6 6 12 12",
 	key: "d8bk6v"
-}]]), mt = H((e, t) => /* @__PURE__ */ J("svg", {
+}]]), ht = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -958,8 +958,8 @@ var Ze = (...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"
 	})
 }));
-mt.displayName = "AnthropicIcon";
-var ht = H((e, t) => /* @__PURE__ */ Y("svg", {
+ht.displayName = "AnthropicIcon";
+var gt = U((e, t) => /* @__PURE__ */ Y("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -979,8 +979,8 @@ var ht = H((e, t) => /* @__PURE__ */ Y("svg", {
 		clipRule: "evenodd"
 	})]
 }));
-ht.displayName = "ApigeeIcon";
-var gt = H((e, t) => /* @__PURE__ */ Y("svg", {
+gt.displayName = "ApigeeIcon";
+var _t = U((e, t) => /* @__PURE__ */ Y("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1007,8 +1007,8 @@ var gt = H((e, t) => /* @__PURE__ */ Y("svg", {
 		})
 	]
 }));
-gt.displayName = "AwsIcon";
-var _t = H((e, t) => /* @__PURE__ */ J("svg", {
+_t.displayName = "AwsIcon";
+var vt = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1021,8 +1021,8 @@ var _t = H((e, t) => /* @__PURE__ */ J("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"
 	})
 }));
-_t.displayName = "AzureIcon";
-var vt = H((e, t) => /* @__PURE__ */ J("svg", {
+vt.displayName = "AzureIcon";
+var yt = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1037,8 +1037,8 @@ var vt = H((e, t) => /* @__PURE__ */ J("svg", {
 		clipRule: "evenodd"
 	})
 }));
-vt.displayName = "BitbucketIcon";
-var yt = H((e, t) => /* @__PURE__ */ Y("svg", {
+yt.displayName = "BitbucketIcon";
+var bt = U((e, t) => /* @__PURE__ */ Y("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1065,8 +1065,8 @@ var yt = H((e, t) => /* @__PURE__ */ Y("svg", {
 		})
 	]
 }));
-yt.displayName = "CohereIcon";
-var bt = H((e, t) => /* @__PURE__ */ J("svg", {
+bt.displayName = "CohereIcon";
+var xt = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1076,8 +1076,8 @@ var bt = H((e, t) => /* @__PURE__ */ J("svg", {
 	...e,
 	children: /* @__PURE__ */ J("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" })
 }));
-bt.displayName = "GcpIcon";
-var xt = H((e, t) => /* @__PURE__ */ J("svg", {
+xt.displayName = "GcpIcon";
+var St = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1093,8 +1093,8 @@ var xt = H((e, t) => /* @__PURE__ */ J("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"
 	})
 }));
-xt.displayName = "GithubIcon";
-var St = H((e, t) => /* @__PURE__ */ J("svg", {
+St.displayName = "GithubIcon";
+var Ct = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1110,8 +1110,8 @@ var St = H((e, t) => /* @__PURE__ */ J("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"
 	})
 }));
-St.displayName = "GitlabIcon";
-var Ct = H((e, t) => /* @__PURE__ */ J("svg", {
+Ct.displayName = "GitlabIcon";
+var wt = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1124,8 +1124,8 @@ var Ct = H((e, t) => /* @__PURE__ */ J("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"
 	})
 }));
-Ct.displayName = "KafkaIcon";
-var wt = H((e, t) => /* @__PURE__ */ J("svg", {
+wt.displayName = "KafkaIcon";
+var Tt = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1138,8 +1138,8 @@ var wt = H((e, t) => /* @__PURE__ */ J("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"
 	})
 }));
-wt.displayName = "KubernetesIcon";
-var Tt = H((e, t) => /* @__PURE__ */ Y("svg", {
+Tt.displayName = "KubernetesIcon";
+var Et = U((e, t) => /* @__PURE__ */ Y("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1190,8 +1190,8 @@ var Tt = H((e, t) => /* @__PURE__ */ Y("svg", {
 		})
 	]
 }));
-Tt.displayName = "MistralIcon";
-var Et = H((e, t) => /* @__PURE__ */ J("svg", {
+Et.displayName = "MistralIcon";
+var Dt = U((e, t) => /* @__PURE__ */ J("svg", {
 	ref: t,
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
@@ -1204,9 +1204,9 @@ var Et = H((e, t) => /* @__PURE__ */ J("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"
 	})
 }));
-Et.displayName = "OpenAIIcon";
-var Dt = H((e, t) => {
-	let n = W();
+Dt.displayName = "OpenAIIcon";
+var Ot = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1430,9 +1430,9 @@ var Dt = H((e, t) => {
 		})]
 	});
 });
-Dt.displayName = "GioAgentManagementIcon";
-var Ot = H((e, t) => {
-	let n = W();
+Ot.displayName = "GioAgentManagementIcon";
+var kt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1669,9 +1669,9 @@ var Ot = H((e, t) => {
 		})]
 	});
 });
-Ot.displayName = "GioApiManagementIcon";
-var kt = H((e, t) => {
-	let n = W();
+kt.displayName = "GioApiManagementIcon";
+var At = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1797,9 +1797,9 @@ var kt = H((e, t) => {
 		})]
 	});
 });
-kt.displayName = "GioAuthorizationIcon";
-var At = H((e, t) => {
-	let n = W();
+At.displayName = "GioAuthorizationIcon";
+var jt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -1985,9 +1985,9 @@ var At = H((e, t) => {
 		})]
 	});
 });
-At.displayName = "GioCatalogIcon";
-var jt = H((e, t) => {
-	let n = W();
+jt.displayName = "GioCatalogIcon";
+var Mt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2211,9 +2211,9 @@ var jt = H((e, t) => {
 		})]
 	});
 });
-jt.displayName = "GioDeveloperPortalIcon";
-var Mt = H((e, t) => {
-	let n = W();
+Mt.displayName = "GioDeveloperPortalIcon";
+var Nt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2487,9 +2487,9 @@ var Mt = H((e, t) => {
 		})]
 	});
 });
-Mt.displayName = "GioEdgeManagementIcon";
-var Nt = H((e, t) => {
-	let n = W();
+Nt.displayName = "GioEdgeManagementIcon";
+var Pt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2675,9 +2675,9 @@ var Nt = H((e, t) => {
 		})]
 	});
 });
-Nt.displayName = "GioEventApiManagementIcon";
-var Pt = H((e, t) => {
-	let n = W();
+Pt.displayName = "GioEventApiManagementIcon";
+var Ft = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -2917,9 +2917,9 @@ var Pt = H((e, t) => {
 		})]
 	});
 });
-Pt.displayName = "GioGammaIcon";
-var Ft = H((e, t) => {
-	let n = W();
+Ft.displayName = "GioGammaIcon";
+var It = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3159,9 +3159,9 @@ var Ft = H((e, t) => {
 		})]
 	});
 });
-Ft.displayName = "GioHomeIcon";
-var It = H((e, t) => {
-	let n = W();
+It.displayName = "GioHomeIcon";
+var Lt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3455,9 +3455,9 @@ var It = H((e, t) => {
 		})]
 	});
 });
-It.displayName = "GioIamIcon";
-var Lt = H((e, t) => {
-	let n = W();
+Lt.displayName = "GioIamIcon";
+var Rt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3681,9 +3681,9 @@ var Lt = H((e, t) => {
 		})]
 	});
 });
-Lt.displayName = "GioObservabilityIcon";
-var Rt = H((e, t) => {
-	let n = W();
+Rt.displayName = "GioObservabilityIcon";
+var zt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -3801,9 +3801,9 @@ var Rt = H((e, t) => {
 		})]
 	});
 });
-Rt.displayName = "GioObserveIcon";
-var zt = H((e, t) => {
-	let n = W();
+zt.displayName = "GioObserveIcon";
+var Bt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -4133,9 +4133,9 @@ var zt = H((e, t) => {
 		})]
 	});
 });
-zt.displayName = "GioPlatformIcon";
-var Bt = H((e, t) => {
-	let n = W();
+Bt.displayName = "GioPlatformIcon";
+var Vt = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -4253,9 +4253,9 @@ var Bt = H((e, t) => {
 		})]
 	});
 });
-Bt.displayName = "GioProductizeIcon";
-var Vt = H((e, t) => {
-	let n = W();
+Vt.displayName = "GioProductizeIcon";
+var Ht = U((e, t) => {
+	let n = G();
 	return /* @__PURE__ */ Y("svg", {
 		ref: t,
 		xmlns: "http://www.w3.org/2000/svg",
@@ -4381,16 +4381,16 @@ var Vt = H((e, t) => {
 		})]
 	});
 });
-Vt.displayName = "GioSecureIcon";
+Ht.displayName = "GioSecureIcon";
 //#endregion
 //#region src/lib/useContainerSize.ts
-function Ht() {
+function Ut() {
 	let [e, t] = K({
 		width: 0,
 		height: 0
-	}), n = G(null);
+	}), n = he(null);
 	return {
-		ref: U((e) => {
+		ref: W((e) => {
 			if (n.current?.disconnect(), n.current = null, !e) return;
 			let r = new ResizeObserver(([e]) => {
 				let { width: n, height: r } = e.contentRect;
@@ -4409,29 +4409,29 @@ function Ht() {
 }
 //#endregion
 //#region src/charts/Metric/Metric.tsx
-var Ut = {
+var Wt = {
 	positive: "text-success",
 	negative: "text-destructive",
 	neutral: "text-muted-foreground"
 };
-function Wt(e, t) {
+function Gt(e, t) {
 	return e === "neutral" || t === "neutral" ? "neutral" : t === "higher-is-better" ? e === "up" ? "positive" : "negative" : e === "up" ? "negative" : "positive";
 }
-var Gt = 56;
-function Kt(e, t) {
+var Kt = 56;
+function qt(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 qt(e) {
+function Jt(e) {
 	return Math.max(10, Math.round(e * .22));
 }
-function Jt(e) {
+function Yt(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 Yt(e) {
+function Xt(e) {
 	return e < 50 ? "text-[9px]" : e < 80 ? "text-[10px]" : e < 120 ? "text-xs" : "text-sm";
 }
-function Xt(e) {
+function Zt(e) {
 	return e < 60 ? {
 		text: "text-[9px]",
 		icon: "size-2 stroke-[2.5]"
@@ -4446,12 +4446,12 @@ function Xt(e) {
 		icon: "size-3.5 stroke-[2.5]"
 	};
 }
-function Zt({ data: t, color: n, colorClass: r }) {
-	let i = V.useRef(null), [a, o] = V.useState({
+function Qt({ data: t, color: n, colorClass: r }) {
+	let i = H.useRef(null), [a, o] = H.useState({
 		width: 0,
 		height: 0
-	}), s = V.useId();
-	if (V.useEffect(() => {
+	}), s = H.useId();
+	if (H.useEffect(() => {
 		let e = i.current;
 		if (!e) return;
 		let t = new ResizeObserver(([e]) => {
@@ -4463,7 +4463,7 @@ function Zt({ data: t, color: n, colorClass: r }) {
 		});
 		return t.observe(e), () => t.disconnect();
 	}, []), t.length < 2) return null;
-	let { width: c, height: l } = a, u = he().domain([0, t.length - 1]).range([0, c]), d = Math.min(...t), f = Math.max(...t), p = he().domain([d, f === d ? d + 1 : f]).range([l - 2, 2]), m = xe().x((e, t) => u(t)).y((e) => p(e)).curve(ye), h = _e().x((e, t) => u(t)).y0(l).y1((e) => p(e)).curve(ye), g = m(t), _ = h(t), v = n ?? "currentColor";
+	let { width: c, height: l } = a, u = ge().domain([0, t.length - 1]).range([0, c]), d = Math.min(...t), f = Math.max(...t), p = ge().domain([d, f === d ? d + 1 : f]).range([l - 2, 2]), m = Se().x((e, t) => u(t)).y((e) => p(e)).curve(be), h = ve().x((e, t) => u(t)).y0(l).y1((e) => p(e)).curve(be), g = m(t), _ = h(t), v = n ?? "currentColor";
 	return /* @__PURE__ */ J("svg", {
 		ref: i,
 		className: e("h-full w-full", r),
@@ -4498,14 +4498,14 @@ function Zt({ data: t, color: n, colorClass: r }) {
 		] })
 	});
 }
-function Qt({ trend: t, sentiment: n, trendClass: r }) {
-	let i = t.direction === "down" ? Z : ct;
+function $t({ trend: t, sentiment: n, trendClass: r }) {
+	let i = t.direction === "down" ? Z : lt;
 	return /* @__PURE__ */ Y("span", {
-		className: e("inline-flex items-center gap-1 font-medium", r.text, Ut[n]),
+		className: e("inline-flex items-center gap-1 font-medium", r.text, Wt[n]),
 		children: [t.direction !== "neutral" && /* @__PURE__ */ J(i, { className: r.icon }), t.isNew ? "New" : `${t.value}%`]
 	});
 }
-function $t({ className: t, ...n }) {
+function en({ className: t, ...n }) {
 	return /* @__PURE__ */ Y("div", {
 		role: "img",
 		"aria-busy": "true",
@@ -4524,15 +4524,15 @@ function $t({ className: t, ...n }) {
 		}), /* @__PURE__ */ J(_, { className: "min-h-5 w-full flex-1" })]
 	});
 }
-function en({ 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 } = Ht();
-	if (r === "loading") return /* @__PURE__ */ J($t, {
+function tn({ 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 } = Ut();
+	if (r === "loading") return /* @__PURE__ */ J(en, {
 		className: d,
 		...f
 	});
-	let g = r === "empty" ? "—" : t, _ = r === "empty" ? void 0 : o, v = r === "empty" ? void 0 : l, y = _ ? Wt(_.direction, s) : void 0, b = !u && y ? Ut[y] : void 0, x = u ?? (y ? void 0 : "var(--chart-1)"), S = v != null && v.length >= 2 && h >= Gt && !c, C = c || !S, w = Jt(h), T = Yt(h), E = Xt(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 = _ ? Gt(_.direction, s) : void 0, b = !u && y ? Wt[y] : void 0, x = u ?? (y ? void 0 : "var(--chart-1)"), S = v != null && v.length >= 2 && h >= Kt && !c, C = c || !S, w = Yt(h), T = Xt(h), E = Zt(h), D = n && h > 50, O = !!(_ && y && (S || h > 40));
 	if (C) {
-		let t = Kt(m, h), r = qt(t);
+		let t = qt(m, h), r = Jt(t);
 		return /* @__PURE__ */ Y("div", {
 			ref: p,
 			className: e("flex h-full flex-col items-center justify-center gap-1 text-center", d),
@@ -4548,7 +4548,7 @@ function en({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 					style: { fontSize: r },
 					children: n
 				}),
-				O && _ && y && /* @__PURE__ */ J(Qt, {
+				O && _ && y && /* @__PURE__ */ J($t, {
 					trend: _,
 					sentiment: y,
 					trendClass: E
@@ -4572,7 +4572,7 @@ function en({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 						}),
 						O && _ && y && /* @__PURE__ */ Y("span", {
 							className: "flex shrink-0 items-center gap-1",
-							children: [/* @__PURE__ */ J(Qt, {
+							children: [/* @__PURE__ */ J($t, {
 								trend: _,
 								sentiment: y,
 								trendClass: E
@@ -4592,7 +4592,7 @@ function en({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 			]
 		}), /* @__PURE__ */ J("div", {
 			className: "min-h-0 flex-1 pt-1",
-			children: /* @__PURE__ */ J(Zt, {
+			children: /* @__PURE__ */ J(Qt, {
 				data: v,
 				color: x,
 				colorClass: b
@@ -4602,43 +4602,43 @@ function en({ value: t, label: n, state: r, description: i, icon: a, trend: o, t
 }
 //#endregion
 //#region src/charts/MetricGroup/MetricGroup.tsx
-function tn(e) {
+function nn(e) {
 	return "category" in e && "metrics" in e;
 }
-var nn = {
+var rn = {
 	positive: "text-success",
 	negative: "text-destructive",
 	neutral: "text-muted-foreground"
 };
-function rn(e) {
+function an(e) {
 	let t = 0;
-	for (let n of e) t += tn(n) ? n.metrics.length : 1;
+	for (let n of e) t += nn(n) ? n.metrics.length : 1;
 	return t;
 }
-function an(e) {
-	return tn(e) ? e.metrics.length : 1;
+function on(e) {
+	return nn(e) ? e.metrics.length : 1;
 }
-var on = [
+var sn = [
 	"xs",
 	"sm",
 	"md",
 	"lg"
 ];
-function sn(e, t, n) {
+function cn(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 on[Math.min(on.indexOf(i), on.indexOf(a))];
+	return sn[Math.min(sn.indexOf(i), sn.indexOf(a))];
 }
-var cn = {
+var ln = {
 	xs: 40,
 	sm: 55,
 	md: 75,
 	lg: 100
-}, ln = 40, un = 80;
-function dn(e, t, n) {
-	if (e < un) return 0;
-	let r = cn[n], i = 0, a = 0;
+}, un = 40, dn = 80;
+function fn(e, t, n) {
+	if (e < dn) return 0;
+	let r = ln[n], i = 0, a = 0;
 	for (let n = 0; n < t.length; n++) {
-		let o = r * an(t[n]), s = t.length - (n + 1) > 0 ? ln : 0;
+		let o = r * on(t[n]), s = t.length - (n + 1) > 0 ? un : 0;
 		if (a + o + s > e) break;
 		a += o, i++;
 	}
@@ -4682,15 +4682,15 @@ var Q = {
 		lg: "px-5"
 	}
 };
-function fn({ trend: t, sentiment: n, size: r }) {
-	let i = t.direction === "down" ? Z : ct, a = r === "xs" || r === "sm";
+function pn({ trend: t, sentiment: n, size: r }) {
+	let i = t.direction === "down" ? Z : lt, a = r === "xs" || r === "sm";
 	return a && t.direction === "neutral" ? null : /* @__PURE__ */ Y("span", {
-		className: e("inline-flex items-center gap-px font-medium", Q.trend[r], nn[n]),
+		className: e("inline-flex items-center gap-px font-medium", Q.trend[r], rn[n]),
 		children: [t.direction !== "neutral" && /* @__PURE__ */ J(i, { className: Q.trendIcon[r] }), !a && (t.isNew ? "New" : `${t.value}%`)]
 	});
 }
-function pn({ item: t, size: n, labelVisible: r }) {
-	let i = t.trend ? Wt(t.trend.direction, t.trendSentiment ?? "higher-is-better") : void 0, a = r && t.label, o = /* @__PURE__ */ Y("div", {
+function mn({ item: t, size: n, labelVisible: r }) {
+	let i = t.trend ? Gt(t.trend.direction, t.trendSentiment ?? "higher-is-better") : void 0, a = r && t.label, o = /* @__PURE__ */ Y("div", {
 		className: "flex w-full min-w-0 flex-col",
 		children: [/* @__PURE__ */ Y("div", {
 			className: "flex items-baseline justify-between gap-1",
@@ -4699,7 +4699,7 @@ function pn({ item: t, size: n, labelVisible: r }) {
 				children: t.value
 			}), t.trend && i && !(t.trend.direction === "neutral" && (n === "xs" || n === "sm")) && /* @__PURE__ */ J("span", {
 				className: "shrink-0",
-				children: /* @__PURE__ */ J(fn, {
+				children: /* @__PURE__ */ J(pn, {
 					trend: t.trend,
 					sentiment: i,
 					size: n
@@ -4710,20 +4710,20 @@ function pn({ item: t, size: n, labelVisible: r }) {
 			children: t.label
 		})]
 	});
-	return !a && t.label ? /* @__PURE__ */ Y(oe, { children: [/* @__PURE__ */ J(le, {
+	return !a && t.label ? /* @__PURE__ */ Y(ae, { children: [/* @__PURE__ */ J(ce, {
 		asChild: !0,
 		children: /* @__PURE__ */ J("div", {
 			className: "flex min-w-0 flex-1 cursor-default",
 			children: o
 		})
-	}), /* @__PURE__ */ J(se, { children: t.label })] }) : /* @__PURE__ */ J("div", {
+	}), /* @__PURE__ */ J(oe, { children: t.label })] }) : /* @__PURE__ */ J("div", {
 		className: "flex min-w-0 flex-1",
 		children: o
 	});
 }
-function mn({ count: t, size: n }) {
+function hn({ count: t, size: n }) {
 	let r = `${t} more ${t === 1 ? "metric" : "metrics"} hidden`;
-	return /* @__PURE__ */ Y(oe, { children: [/* @__PURE__ */ J(le, {
+	return /* @__PURE__ */ Y(ae, { children: [/* @__PURE__ */ J(ce, {
 		asChild: !0,
 		children: /* @__PURE__ */ Y("div", {
 			role: "status",
@@ -4731,9 +4731,9 @@ function mn({ count: t, size: n }) {
 			className: e("flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", n === "xs" || n === "sm" ? "px-1.5 py-0.5 text-[9px]" : "px-2 py-0.5 text-xs"),
 			children: ["+", t]
 		})
-	}), /* @__PURE__ */ J(se, { children: r })] });
+	}), /* @__PURE__ */ J(oe, { children: r })] });
 }
-function hn({ count: t, className: n, ...r }) {
+function gn({ count: t, className: n, ...r }) {
 	return /* @__PURE__ */ J("div", {
 		role: "img",
 		"aria-busy": "true",
@@ -4746,14 +4746,14 @@ function hn({ count: t, className: n, ...r }) {
 		}, t))
 	});
 }
-function gn({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
-	let { ref: o, width: s, height: c } = Ht();
-	if (n === "loading") return /* @__PURE__ */ J(hn, {
-		count: t.length > 0 ? rn(t) : r ?? 5,
+function _n({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
+	let { ref: o, width: s, height: c } = Ut();
+	if (n === "loading") return /* @__PURE__ */ J(gn, {
+		count: t.length > 0 ? an(t) : r ?? 5,
 		className: i,
 		...a
 	});
-	let l = n === "empty" ? t.map((e) => tn(e) ? {
+	let l = n === "empty" ? t.map((e) => nn(e) ? {
 		...e,
 		metrics: e.metrics.map((e) => ({
 			...e,
@@ -4764,8 +4764,8 @@ function gn({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 		...e,
 		value: "—",
 		trend: void 0
-	}) : t, u = rn(l), d = s > 0 ? sn(s, c, u) : "md", f = c >= 50, p = s > 0 ? dn(s, l, d) : l.length, m = l.slice(0, p), h = l.length - p, g = p === 0;
-	return /* @__PURE__ */ J(ce, {
+	}) : t, u = an(l), d = s > 0 ? cn(s, c, u) : "md", f = c >= 50, p = s > 0 ? fn(s, l, d) : l.length, m = l.slice(0, p), h = l.length - p, g = p === 0;
+	return /* @__PURE__ */ J(se, {
 		delayDuration: 300,
 		children: /* @__PURE__ */ Y("div", {
 			ref: o,
@@ -4774,21 +4774,21 @@ function gn({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 			className: e("flex h-full items-center overflow-hidden", g ? "justify-center" : "divide-x divide-border/30 dark:divide-white/[0.06]", i),
 			...a,
 			children: [s > 0 && !g && m.map((t) => {
-				let n = tn(t) ? t.category : `${t.value}-${t.label ?? ""}`;
+				let n = nn(t) ? t.category : `${t.value}-${t.label ?? ""}`;
 				return /* @__PURE__ */ J("div", {
-					style: { flex: an(t) },
+					style: { flex: on(t) },
 					className: e("flex min-w-0 flex-col justify-center overflow-x-hidden", Q.cellPadding[d]),
-					children: tn(t) ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J("span", {
+					children: nn(t) ? /* @__PURE__ */ Y(q, { children: [/* @__PURE__ */ J("span", {
 						className: e("mb-0.5 font-medium tracking-wider text-muted-foreground uppercase", Q.category[d]),
 						children: t.category
 					}), /* @__PURE__ */ J("div", {
 						className: "flex w-full min-w-0 items-stretch gap-3",
-						children: t.metrics.map((e) => /* @__PURE__ */ J(pn, {
+						children: t.metrics.map((e) => /* @__PURE__ */ J(mn, {
 							item: e,
 							size: d,
 							labelVisible: f
 						}, `${e.value}-${e.label ?? ""}`))
-					})] }) : /* @__PURE__ */ J(pn, {
+					})] }) : /* @__PURE__ */ J(mn, {
 						item: t,
 						size: d,
 						labelVisible: f
@@ -4796,7 +4796,7 @@ function gn({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 				}, n);
 			}), s > 0 && h > 0 && /* @__PURE__ */ J("div", {
 				className: e("flex shrink-0 items-center", g ? "" : "px-2"),
-				children: /* @__PURE__ */ J(mn, {
+				children: /* @__PURE__ */ J(hn, {
 					count: h,
 					size: d
 				})
@@ -4806,8 +4806,8 @@ function gn({ items: t, state: n, skeletonCount: r, className: i, ...a }) {
 }
 //#endregion
 //#region src/charts/LineChart/LineChart.tsx
-function _n({ 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 ?? He(e, Object.keys(T));
+function vn({ 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 ?? Ue(e, Object.keys(T));
 	return r === "loading" ? /* @__PURE__ */ J(x, {
 		ariaLabel: y,
 		className: S,
@@ -4827,7 +4827,7 @@ function _n({ data: e, dataKeys: n, state: r, curveType: i = "monotone", showDot
 		...w,
 		children: [
 			s && /* @__PURE__ */ J(o, {}),
-			E.map((e) => /* @__PURE__ */ J(Le, {
+			E.map((e) => /* @__PURE__ */ J(Re, {
 				dataKey: e,
 				curveType: i,
 				showDots: a,
@@ -4841,8 +4841,8 @@ function _n({ data: e, dataKeys: n, state: r, curveType: i = "monotone", showDot
 }
 //#endregion
 //#region src/charts/AreaChart/AreaChart.tsx
-function vn({ 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 ?? He(e, Object.keys(D)), k = a ? "default" : void 0;
+function yn({ 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 ?? Ue(e, Object.keys(D)), k = a ? "default" : void 0;
 	return r === "loading" ? /* @__PURE__ */ J(b, {
 		ariaLabel: _,
 		className: w,
@@ -4862,7 +4862,7 @@ function vn({ data: e, dataKeys: n, state: r, curveType: i = "monotone", stacked
 		...E,
 		children: [
 			l && /* @__PURE__ */ J(o, {}),
-			O.map((e) => /* @__PURE__ */ J(Ve, {
+			O.map((e) => /* @__PURE__ */ J(He, {
 				dataKey: e,
 				stackId: k,
 				curveType: i,
@@ -4876,7 +4876,7 @@ function vn({ data: e, dataKeys: n, state: r, curveType: i = "monotone", stacked
 		]
 	});
 }
-function yn(e) {
+function bn(e) {
 	if (e === 0) return "0ns";
 	if (e < 1e3) return `${Math.round(e)}ns`;
 	let t = e / 1e3;
@@ -4888,7 +4888,7 @@ function yn(e) {
 	let i = Math.floor(r / 60), a = r % 60;
 	return `${i}m ${Math.round(a)}s`;
 }
-function bn(e) {
+function xn(e) {
 	let t = 0;
 	for (let n of e) {
 		let e = n.startOffsetNs + n.durationNs;
@@ -4896,7 +4896,7 @@ function bn(e) {
 	}
 	return t > 0 ? t : 1;
 }
-function xn(e, t, n, r) {
+function Sn(e, t, n, r) {
 	if (r <= 0 || n <= 0) return {
 		x: 0,
 		width: 0
@@ -4907,18 +4907,18 @@ function xn(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, wn = 80;
-function Tn(e) {
+var wn = 6, Tn = 80;
+function En(e) {
 	if (e <= 0) return 0;
-	let t = Math.floor(e / wn) + 1;
-	return Math.max(2, Math.min(t, Cn));
+	let t = Math.floor(e / Tn) + 1;
+	return Math.max(2, Math.min(t, wn));
 }
-function En(e, t = 5) {
+function Dn(e, t = 5) {
 	if (e <= 0) return [0];
 	if (t <= 1) return [0, e];
 	let n = e / (t - 1);
@@ -4926,13 +4926,13 @@ function En(e, t = 5) {
 }
 //#endregion
 //#region src/charts/TraceWaterfall/TraceWaterfall.tsx
-var Dn = 280, On = .45, kn = 36, An = 20, jn = 20, Mn = 4, $ = 12, Nn = 48, Pn = 32, Fn = 3, In = {
+var On = 280, kn = .45, An = 36, jn = 20, Mn = 20, Nn = 4, $ = 12, Pn = 48, Fn = 32, In = 3, Ln = {
 	internal: "INTERNAL",
 	server: "SERVER",
 	client: "CLIENT",
 	producer: "PRODUCER",
 	consumer: "CONSUMER"
-}, Ln = [
+}, Rn = [
 	"bg-chart-1",
 	"bg-chart-2",
 	"bg-chart-3",
@@ -4942,21 +4942,21 @@ var Dn = 280, On = .45, kn = 36, An = 20, jn = 20, Mn = 4, $ = 12, Nn = 48, Pn =
 	"bg-chart-7",
 	"bg-chart-8"
 ];
-function Rn(e) {
+function zn(e) {
 	let t = /* @__PURE__ */ new Map(), n = 0;
-	for (let r of e) t.has(r.serviceName) || (t.set(r.serviceName, Ln[n % Ln.length]), n++);
+	for (let r of e) t.has(r.serviceName) || (t.set(r.serviceName, Rn[n % Rn.length]), n++);
 	return t;
 }
-var zn = { error: "bg-destructive" }, Bn = {
+var Bn = { error: "bg-destructive" }, Vn = {
 	ok: "success",
 	error: "destructive",
 	unset: "secondary"
-}, Vn = {
+}, Hn = {
 	ok: "OK",
 	error: "Error",
 	unset: "Unset"
 };
-function Hn({ icon: e, label: t, children: n }) {
+function Un({ icon: e, label: t, children: n }) {
 	return /* @__PURE__ */ Y("div", {
 		className: "flex items-center justify-between gap-4",
 		children: [/* @__PURE__ */ Y("div", {
@@ -4968,7 +4968,7 @@ function Hn({ icon: e, label: t, children: n }) {
 		})]
 	});
 }
-function Un({ span: t, serviceColor: n, traceDurationNs: r }) {
+function Wn({ span: t, serviceColor: n, traceDurationNs: r }) {
 	return /* @__PURE__ */ Y(q, { children: [
 		/* @__PURE__ */ Y("div", {
 			className: "space-y-1 px-2.5 pt-2 pb-1.5",
@@ -4981,39 +4981,39 @@ function Un({ span: t, serviceColor: n, traceDurationNs: r }) {
 			}), /* @__PURE__ */ Y("div", {
 				className: "flex items-center gap-1.5 pl-[14px]",
 				children: [/* @__PURE__ */ J(O, {
-					variant: Bn[t.status],
+					variant: Vn[t.status],
 					className: "h-4 text-[9px]",
-					children: Vn[t.status]
+					children: Hn[t.status]
 				}), /* @__PURE__ */ J(O, {
 					variant: "outline",
 					className: "h-4 text-[9px]",
-					children: In[t.kind]
+					children: Ln[t.kind]
 				})]
 			})]
 		}),
-		/* @__PURE__ */ J(ae, {}),
+		/* @__PURE__ */ J(ie, {}),
 		/* @__PURE__ */ Y("div", {
 			className: "space-y-1 px-2.5 py-1.5 text-[11px]",
 			children: [
-				/* @__PURE__ */ J(Hn, {
-					icon: ft,
+				/* @__PURE__ */ J(Un, {
+					icon: pt,
 					label: "Service",
 					children: t.serviceName
 				}),
-				/* @__PURE__ */ J(Hn, {
-					icon: ut,
+				/* @__PURE__ */ J(Un, {
+					icon: dt,
 					label: "Duration",
 					children: /* @__PURE__ */ J("span", {
 						className: "font-mono tabular-nums",
-						children: yn(t.durationNs)
+						children: bn(t.durationNs)
 					})
 				}),
-				/* @__PURE__ */ J(Hn, {
-					icon: ot,
+				/* @__PURE__ */ J(Un, {
+					icon: st,
 					label: "% of trace",
 					children: /* @__PURE__ */ J("span", {
 						className: "font-mono tabular-nums",
-						children: Sn(t.durationNs, r)
+						children: Cn(t.durationNs, r)
 					})
 				})
 			]
@@ -5027,19 +5027,19 @@ function Un({ span: t, serviceColor: n, traceDurationNs: r }) {
 		})
 	] });
 }
-function Wn({ span: e, serviceColor: t, traceDurationNs: n, renderTooltip: r, children: i }) {
-	return /* @__PURE__ */ Y(ne, {
+function Gn({ span: e, serviceColor: t, traceDurationNs: n, renderTooltip: r, children: i }) {
+	return /* @__PURE__ */ Y(te, {
 		openDelay: 250,
 		closeDelay: 0,
-		children: [/* @__PURE__ */ J(re, {
+		children: [/* @__PURE__ */ J(ne, {
 			asChild: !0,
 			children: i
-		}), /* @__PURE__ */ J(B, {
+		}), /* @__PURE__ */ J(V, {
 			side: "right",
 			align: "start",
 			sideOffset: 4,
 			className: "w-56 p-0",
-			children: r ? r(e) : /* @__PURE__ */ J(Un, {
+			children: r ? r(e) : /* @__PURE__ */ J(Wn, {
 				span: e,
 				serviceColor: t,
 				traceDurationNs: n
@@ -5047,13 +5047,13 @@ function Wn({ span: e, serviceColor: t, traceDurationNs: n, renderTooltip: r, ch
 		})]
 	});
 }
-function Gn({ depth: e }) {
+function Kn({ depth: e }) {
 	return e === 0 ? null : /* @__PURE__ */ J("span", {
 		className: "pointer-events-none relative shrink-0",
-		style: { width: e * An },
+		style: { width: e * jn },
 		"aria-hidden": "true",
 		children: Array.from({ length: e }, (t, n) => {
-			let r = n === e - 1, i = n * An + An / 2;
+			let r = n === e - 1, i = n * jn + jn / 2;
 			return r ? /* @__PURE__ */ J("span", {
 				className: "absolute top-0 border-l border-border/30",
 				style: {
@@ -5062,7 +5062,7 @@ function Gn({ depth: e }) {
 				},
 				children: /* @__PURE__ */ J("span", {
 					className: "absolute bottom-0 left-0 border-b border-border/30",
-					style: { width: An / 2 - 2 }
+					style: { width: jn / 2 - 2 }
 				})
 			}, n) : /* @__PURE__ */ J("span", {
 				className: "absolute top-0 h-full border-l border-border/30",
@@ -5071,12 +5071,12 @@ function Gn({ depth: e }) {
 		})
 	});
 }
-function Kn(e) {
+function qn(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 qn(e, t) {
+function Jn(e, t) {
 	if (t.size === 0) return e;
 	let n = /* @__PURE__ */ new Set();
 	for (let r = 0; r < e.length; r++) {
@@ -5088,7 +5088,7 @@ function qn(e, t) {
 	}
 	return e.filter((e) => !n.has(e.spanId));
 }
-function Jn(e) {
+function Yn(e) {
 	let t = /* @__PURE__ */ new Map(), n = [];
 	for (let r = e.length - 1; r >= 0; r--) {
 		let i = e[r].depth;
@@ -5098,11 +5098,11 @@ function Jn(e) {
 	}
 	return t;
 }
-function Yn({ 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 } = xn(t.startOffsetNs, t.durationNs, n, i), _ = t.status === "error" ? zn.error : a, v = yn(t.durationNs), y = g >= 56, b = !y;
+function Xn({ 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" ? Bn.error : a, v = bn(t.durationNs), y = g >= 56, b = !y;
 	return /* @__PURE__ */ Y("div", {
 		className: e("group flex w-full cursor-pointer transition-colors", o ? "bg-accent/50" : "hover:bg-muted/30"),
-		style: { height: kn },
+		style: { height: An },
 		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));
@@ -5117,7 +5117,7 @@ function Yn({ 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__ */ J(Wn, {
+			/* @__PURE__ */ J(Gn, {
 				span: t,
 				serviceColor: a,
 				traceDurationNs: n,
@@ -5126,7 +5126,7 @@ function Yn({ 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__ */ J(Gn, { depth: t.depth }),
+						/* @__PURE__ */ J(Kn, { depth: t.depth }),
 						s ? /* @__PURE__ */ J("button", {
 							type: "button",
 							tabIndex: -1,
@@ -5136,7 +5136,7 @@ function Yn({ 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: J(c ? st : Z, { className: "size-3.5" })
+							children: J(c ? ct : Z, { className: "size-3.5" })
 						}) : /* @__PURE__ */ J("span", {
 							className: "flex size-4 shrink-0 items-center justify-center",
 							children: /* @__PURE__ */ J("span", { className: e("size-2 rounded-full", a) })
@@ -5148,7 +5148,7 @@ function Yn({ 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__ */ J(lt, { className: "size-3.5 shrink-0 text-destructive" }),
+								t.status === "error" && /* @__PURE__ */ J(ut, { className: "size-3.5 shrink-0 text-destructive" }),
 								c && /* @__PURE__ */ J(O, {
 									variant: "secondary",
 									className: "h-4 shrink-0 text-[9px]",
@@ -5167,7 +5167,7 @@ function Yn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 				className: "relative flex-1 overflow-hidden",
 				style: {
 					paddingLeft: $,
-					paddingRight: Nn
+					paddingRight: Pn
 				},
 				"aria-label": `${t.name}: ${v}`,
 				children: [
@@ -5176,8 +5176,8 @@ function Yn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 						style: {
 							left: $ + h,
 							width: Math.max(g, 3),
-							height: jn,
-							borderRadius: Mn
+							height: Mn,
+							borderRadius: Nn
 						}
 					}),
 					y && /* @__PURE__ */ J("span", {
@@ -5198,14 +5198,14 @@ function Yn({ span: t, traceDurationNs: n, labelWidth: r, usableWidth: i, servic
 		]
 	});
 }
-function Xn({ traceDurationNs: e, labelWidth: t, usableWidth: n, hasCollapsible: r, isAllCollapsed: i, onExpandAll: a, onCollapseAll: o }) {
-	let s = En(e, Tn(n)), c = he().domain([0, e]).range([0, n]);
+function Zn({ traceDurationNs: e, labelWidth: t, usableWidth: n, hasCollapsible: r, isAllCollapsed: i, onExpandAll: a, onCollapseAll: o }) {
+	let s = Dn(e, En(n)), c = ge().domain([0, e]).range([0, n]);
 	return /* @__PURE__ */ Y("div", {
 		className: "flex shrink-0 items-end border-b border-border bg-muted/30",
-		style: { height: Pn },
+		style: { height: Fn },
 		children: [/* @__PURE__ */ Y("div", {
 			className: "flex shrink-0 items-center justify-between border-r border-border/30 px-3 pb-2",
-			style: { width: t + Fn },
+			style: { width: t + In },
 			children: [/* @__PURE__ */ J("span", {
 				className: "truncate text-[11px] font-semibold tracking-wider text-muted-foreground uppercase",
 				children: "Service & Operation"
@@ -5214,13 +5214,13 @@ function Xn({ 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: J(i ? Z : st, { className: "size-3.5" })
+				children: J(i ? Z : ct, { className: "size-3.5" })
 			})]
 		}), /* @__PURE__ */ J("div", {
 			className: "relative flex-1 pb-2",
 			style: {
 				paddingLeft: $,
-				paddingRight: Nn
+				paddingRight: Pn
 			},
 			children: s.map((e, t) => {
 				let n = t === 0, r = t === s.length - 1;
@@ -5230,18 +5230,18 @@ function Xn({ traceDurationNs: e, labelWidth: t, usableWidth: n, hasCollapsible:
 						left: $ + c(e),
 						transform: n ? "none" : r ? "translateX(-100%)" : "translateX(-50%)"
 					},
-					children: yn(e)
+					children: bn(e)
 				}, e);
 			})
 		})]
 	});
 }
-function Zn({ traceDurationNs: e, labelWidth: t, usableWidth: n, rowCount: r }) {
-	let i = En(e, Tn(n)), a = he().domain([0, e]).range([0, n]), o = r * kn;
+function Qn({ traceDurationNs: e, labelWidth: t, usableWidth: n, rowCount: r }) {
+	let i = Dn(e, En(n)), a = ge().domain([0, e]).range([0, n]), o = r * An;
 	return /* @__PURE__ */ J("svg", {
 		className: "pointer-events-none absolute top-0",
 		style: {
-			left: t + Fn + $,
+			left: t + In + $,
 			width: n,
 			height: o
 		},
@@ -5257,7 +5257,7 @@ function Zn({ traceDurationNs: e, labelWidth: t, usableWidth: n, rowCount: r })
 		}, e))
 	});
 }
-var Qn = [
+var $n = [
 	{
 		indent: 0,
 		labelPct: 60,
@@ -5289,7 +5289,7 @@ var Qn = [
 		barPct: 65
 	}
 ];
-function $n({ ariaLabel: t, className: n, ...r }) {
+function er({ ariaLabel: t, className: n, ...r }) {
 	return /* @__PURE__ */ Y("div", {
 		role: "img",
 		"aria-busy": "true",
@@ -5298,13 +5298,13 @@ function $n({ ariaLabel: t, className: n, ...r }) {
 		...r,
 		children: [/* @__PURE__ */ J("div", {
 			className: "flex shrink-0 items-center border-b border-border bg-muted/30 px-3",
-			style: { height: Pn },
+			style: { height: Fn },
 			children: /* @__PURE__ */ J(_, { className: "h-3 w-1/3 max-w-32" })
 		}), /* @__PURE__ */ J("div", {
 			className: "flex-1",
-			children: Qn.map((e, t) => /* @__PURE__ */ Y("div", {
+			children: $n.map((e, t) => /* @__PURE__ */ Y("div", {
 				className: "flex items-center gap-2 px-2",
-				style: { height: kn },
+				style: { height: An },
 				children: [/* @__PURE__ */ Y("div", {
 					className: "flex shrink-0 items-center gap-1.5",
 					style: { paddingLeft: e.indent * 12 },
@@ -5322,7 +5322,7 @@ function $n({ ariaLabel: t, className: n, ...r }) {
 						className: "rounded-sm",
 						style: {
 							width: `${e.barPct}%`,
-							height: jn
+							height: Mn
 						}
 					})
 				})]
@@ -5330,14 +5330,14 @@ function $n({ ariaLabel: t, className: n, ...r }) {
 		})]
 	});
 }
-function er({ 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] = V.useState({
-		labelWidth: Dn,
+function tr({ 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] = H.useState({
+		labelWidth: On,
 		timelineWidth: 0
-	}), g = V.useRef(null), _ = V.useMemo(() => Kn(t), [t]), [y, b] = V.useState(() => s ? new Set(Kn(t)) : /* @__PURE__ */ new Set()), x = V.useCallback((e) => {
+	}), g = H.useRef(null), _ = H.useMemo(() => qn(t), [t]), [y, b] = H.useState(() => s ? new Set(qn(t)) : /* @__PURE__ */ new Set()), x = H.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(Dn, Math.round(t * On)), r = t - n - Fn - $ - Nn;
+				let t = Math.round(e.contentRect.width), n = Math.min(On, Math.round(t * kn)), r = t - n - In - $ - Pn;
 				m({
 					labelWidth: n,
 					timelineWidth: Math.max(r, 0)
@@ -5345,13 +5345,13 @@ function er({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHove
 			});
 			t.observe(e), g.current = t;
 		}
-	}, []), S = V.useMemo(() => bn(t), [t]), C = V.useMemo(() => Rn(t), [t]), w = V.useMemo(() => Jn(t), [t]), T = V.useMemo(() => qn(t, y), [t, y]), E = V.useCallback((e) => {
+	}, []), S = H.useMemo(() => xn(t), [t]), C = H.useMemo(() => zn(t), [t]), w = H.useMemo(() => Yn(t), [t]), T = H.useMemo(() => Jn(t, y), [t, y]), E = H.useCallback((e) => {
 		b((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, []), D = V.useCallback(() => b(/* @__PURE__ */ new Set()), []), O = V.useCallback(() => b(new Set(_)), [_]), k = y.size > 0;
-	return f === "loading" ? /* @__PURE__ */ J($n, {
+	}, []), D = H.useCallback(() => b(/* @__PURE__ */ new Set()), []), O = H.useCallback(() => b(new Set(_)), [_]), k = y.size > 0;
+	return f === "loading" ? /* @__PURE__ */ J(er, {
 		ariaLabel: l,
 		className: u,
 		...d
@@ -5365,7 +5365,7 @@ function er({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHove
 		role: "treegrid",
 		"aria-label": l,
 		...d,
-		children: [/* @__PURE__ */ J(Xn, {
+		children: [/* @__PURE__ */ J(Zn, {
 			traceDurationNs: S,
 			labelWidth: p.labelWidth,
 			usableWidth: p.timelineWidth,
@@ -5373,21 +5373,21 @@ function er({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHove
 			isAllCollapsed: k,
 			onExpandAll: D,
 			onCollapseAll: O
-		}), /* @__PURE__ */ J(ie, {
+		}), /* @__PURE__ */ J(re, {
 			className: "min-h-0 flex-1",
 			children: /* @__PURE__ */ Y("div", {
 				className: "relative",
-				children: [/* @__PURE__ */ J(Zn, {
+				children: [/* @__PURE__ */ J(Qn, {
 					traceDurationNs: S,
 					labelWidth: p.labelWidth,
 					usableWidth: p.timelineWidth,
 					rowCount: T.length
-				}), T.map((e) => /* @__PURE__ */ J(Yn, {
+				}), T.map((e) => /* @__PURE__ */ J(Xn, {
 					span: e,
 					traceDurationNs: S,
 					labelWidth: p.labelWidth,
 					usableWidth: p.timelineWidth,
-					serviceColor: C.get(e.serviceName) ?? Ln[0],
+					serviceColor: C.get(e.serviceName) ?? Rn[0],
 					selected: e.spanId === r,
 					hasChildren: _.has(e.spanId),
 					collapsed: y.has(e.spanId),
@@ -5404,27 +5404,27 @@ function er({ spans: t, state: n, selectedSpanId: r, onSpanSelect: i, onSpanHove
 }
 //#endregion
 //#region src/charts/BreakdownChart/BarMeter.tsx
-var tr = {
+var nr = {
 	positive: "text-success",
 	negative: "text-destructive",
 	neutral: "text-muted-foreground"
 };
-function nr({ trend: t, sentiment: n }) {
-	let r = t.direction === "down" ? Z : ct;
+function rr({ trend: t, sentiment: n }) {
+	let r = t.direction === "down" ? Z : lt;
 	return /* @__PURE__ */ Y("span", {
-		className: e("inline-flex items-center gap-0.5 text-xs font-medium", tr[n]),
+		className: e("inline-flex items-center gap-0.5 text-xs font-medium", nr[n]),
 		children: [t.direction !== "neutral" && /* @__PURE__ */ J(r, { className: "size-3 stroke-[2.5]" }), t.isNew ? "New" : `${t.value}%`]
 	});
 }
-function rr({ rank: e }) {
+function ir({ rank: e }) {
 	return /* @__PURE__ */ J("span", {
 		"aria-hidden": "true",
 		className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-md bg-muted px-1 text-[11px] font-semibold text-muted-foreground tabular-nums",
 		children: e
 	});
 }
-function ir({ label: t, formattedValue: n, ratio: r, color: i, detail: a, icon: o, trend: s, trendSentiment: c = "higher-is-better", threshold: l, rank: u, compact: d = !1, animated: f = !0, highlighted: p = !1, dimmed: m = !1, interactive: h = !1, className: g, ..._ }) {
-	let v = Math.max(0, Math.min(1, r)), y = l === void 0 ? void 0 : Math.max(0, Math.min(1, l)), b = p ? `0 1px 8px -1px color-mix(in oklab, ${i} 55%, transparent)` : void 0, x = s ? Wt(s.direction, c) : void 0;
+function ar({ label: t, formattedValue: n, ratio: r, color: i, detail: a, icon: o, trend: s, trendSentiment: c = "higher-is-better", threshold: l, rank: u, compact: d = !1, animated: f = !0, highlighted: p = !1, dimmed: m = !1, interactive: h = !1, className: g, ..._ }) {
+	let v = Math.max(0, Math.min(1, r)), y = l === void 0 ? void 0 : Math.max(0, Math.min(1, l)), b = p ? `0 1px 8px -1px color-mix(in oklab, ${i} 55%, transparent)` : void 0, x = s ? Gt(s.direction, c) : void 0;
 	return /* @__PURE__ */ Y("div", {
 		"data-slot": "bar-meter",
 		role: h ? "button" : void 0,
@@ -5440,7 +5440,7 @@ function ir({ label: t, formattedValue: n, ratio: r, color: i, detail: a, icon:
 				children: [/* @__PURE__ */ Y("span", {
 					className: "flex min-w-0 items-center gap-2",
 					children: [
-						u !== void 0 && /* @__PURE__ */ J(rr, { rank: u }),
+						u !== void 0 && /* @__PURE__ */ J(ir, { rank: u }),
 						o && /* @__PURE__ */ J(o, { className: e("size-4 shrink-0 transition-colors", p ? "text-foreground" : "text-muted-foreground") }),
 						/* @__PURE__ */ J("span", {
 							className: e("truncate text-sm transition-colors", p ? "font-semibold text-foreground" : "font-medium text-foreground"),
@@ -5449,7 +5449,7 @@ function ir({ label: t, formattedValue: n, ratio: r, color: i, detail: a, icon:
 					]
 				}), /* @__PURE__ */ Y("span", {
 					className: "flex shrink-0 items-center gap-2",
-					children: [s && x && /* @__PURE__ */ J(nr, {
+					children: [s && x && /* @__PURE__ */ J(rr, {
 						trend: s,
 						sentiment: x
 					}), /* @__PURE__ */ J("span", {
@@ -5487,9 +5487,9 @@ function ir({ label: t, formattedValue: n, ratio: r, color: i, detail: a, icon:
 }
 //#endregion
 //#region src/charts/BreakdownChart/BreakdownContext.tsx
-var ar = V.createContext(null);
-function or() {
-	return V.useContext(ar) || {
+var or = H.createContext(null);
+function sr() {
+	return H.useContext(or) || {
 		tooltip: null,
 		legend: null,
 		summary: null,
@@ -5498,8 +5498,8 @@ function or() {
 		setSummary: () => void 0
 	};
 }
-function sr({ children: e }) {
-	let [t, n] = V.useState(null), [r, i] = V.useState(null), [a, o] = V.useState(null), s = V.useMemo(() => ({
+function cr({ children: e }) {
+	let [t, n] = H.useState(null), [r, i] = H.useState(null), [a, o] = H.useState(null), s = H.useMemo(() => ({
 		tooltip: t,
 		legend: r,
 		summary: a,
@@ -5511,28 +5511,28 @@ function sr({ children: e }) {
 		r,
 		a
 	]);
-	return /* @__PURE__ */ J(ar.Provider, {
+	return /* @__PURE__ */ J(or.Provider, {
 		value: s,
 		children: e
 	});
 }
 //#endregion
 //#region src/charts/BreakdownChart/BreakdownTooltip.tsx
-function cr({ content: e }) {
-	let { setTooltip: t } = or();
-	return V.useLayoutEffect(() => (t({ content: typeof e == "function" ? e : (t, n) => V.cloneElement(e, {
+function lr({ content: e }) {
+	let { setTooltip: t } = sr();
+	return H.useLayoutEffect(() => (t({ content: typeof e == "function" ? e : (t, n) => H.cloneElement(e, {
 		item: t,
 		meta: n
 	}) }), () => t(null)), [e, t]), null;
 }
-function lr({ pos: e, containerRef: t, children: n }) {
-	let r = V.useRef(null), [i, a] = V.useState({
+function ur({ pos: e, containerRef: t, children: n }) {
+	let r = H.useRef(null), [i, a] = H.useState({
 		x: 0,
 		y: 0,
 		visible: !1,
 		settled: !1
 	});
-	return V.useLayoutEffect(() => {
+	return H.useLayoutEffect(() => {
 		let n = t.current, i = r.current;
 		if (!n || !i) {
 			a((e) => e.visible ? {
@@ -5554,7 +5554,7 @@ function lr({ pos: e, containerRef: t, children: n }) {
 		e.x,
 		e.y,
 		t
-	]), Ce(/* @__PURE__ */ J("div", {
+	]), we(/* @__PURE__ */ J("div", {
 		ref: r,
 		role: "tooltip",
 		className: "pointer-events-none fixed z-50",
@@ -5567,10 +5567,10 @@ function lr({ pos: e, containerRef: t, children: n }) {
 		children: n
 	}), document.body);
 }
-function ur(e) {
+function dr(e) {
 	return typeof e == "number" ? e.toLocaleString() : e;
 }
-function dr({ item: t, meta: n, label: r, items: i, hideLabel: a, hideIndicator: o = !1, indicator: s = "dot", valueFormatter: c = ur, showTotal: l = !1, totalLabel: u = "Total", className: d, ...f }) {
+function fr({ item: t, meta: n, label: r, items: i, hideLabel: a, hideIndicator: o = !1, indicator: s = "dot", valueFormatter: c = dr, showTotal: l = !1, totalLabel: u = "Total", className: d, ...f }) {
 	let p = i === void 0 && t !== void 0 && n !== void 0, m = r ?? t?.label, h = i ?? (p ? [{
 		name: n.formattedValue,
 		value: `${(n.ratio * 100).toFixed(1)}%`,
@@ -5624,15 +5624,15 @@ function dr({ item: t, meta: n, label: r, items: i, hideLabel: a, hideIndicator:
 }
 //#endregion
 //#region src/charts/BreakdownChart/BreakdownChart.tsx
-function fr(e) {
-	let [t, n] = V.useState(!e);
-	return V.useEffect(() => {
+function pr(e) {
+	let [t, n] = H.useState(!e);
+	return H.useEffect(() => {
 		if (!e) return;
 		let t = requestAnimationFrame(() => n(!0));
 		return () => cancelAnimationFrame(t);
 	}, [e]), t;
 }
-var pr = [
+var mr = [
 	"var(--chart-1)",
 	"var(--chart-2)",
 	"var(--chart-3)",
@@ -5644,10 +5644,10 @@ var pr = [
 	"var(--chart-9)",
 	"var(--chart-10)"
 ];
-function mr(e, t) {
-	return e.color ?? pr[t % pr.length];
-}
 function hr(e, t) {
+	return e.color ?? mr[t % mr.length];
+}
+function gr(e, t) {
 	switch (t) {
 		case "total": {
 			let t = e.reduce((e, t) => e + t.value, 0);
@@ -5661,7 +5661,7 @@ function hr(e, t) {
 		default: return t;
 	}
 }
-var gr = [
+var _r = [
 	.7,
 	.45,
 	.25,
@@ -5669,7 +5669,7 @@ var gr = [
 	.35,
 	.2
 ];
-function _r({ rows: t = 3, compact: n = !1, className: r, ...i }) {
+function vr({ rows: t = 3, compact: n = !1, className: r, ...i }) {
 	return /* @__PURE__ */ J("div", {
 		role: "img",
 		"aria-busy": "true",
@@ -5685,15 +5685,15 @@ function _r({ rows: t = 3, compact: n = !1, className: r, ...i }) {
 				}),
 				/* @__PURE__ */ J(_, {
 					className: "h-2 rounded-full",
-					style: { width: `${gr[r % gr.length] * 100}%` }
+					style: { width: `${_r[r % _r.length] * 100}%` }
 				}),
 				/* @__PURE__ */ J(_, { className: "h-3 w-20" })
 			]
 		}, r))
 	});
 }
-var vr = 12, yr = -12;
-function br({ items: t, formatValue: n, animated: r = !0, mounted: i, hoveredKey: a, highlightOnHover: o, interactive: s, legendSlot: c, onSegmentHover: l, onSegmentClick: u }) {
+var yr = 12, br = -12;
+function xr({ items: t, formatValue: n, animated: r = !0, mounted: i, hoveredKey: a, highlightOnHover: o, interactive: s, legendSlot: c, onSegmentHover: l, onSegmentClick: u }) {
 	let d = t.reduce((e, t) => e + t.value, 0);
 	return /* @__PURE__ */ Y("div", {
 		className: "flex flex-col gap-3",
@@ -5708,7 +5708,7 @@ function br({ items: t, formatValue: n, animated: r = !0, mounted: i, hoveredKey
 					className: e("h-full ease-out", r ? "transition-[width,opacity] duration-700" : "transition-opacity duration-200", f === 0 && "rounded-l-full", f === t.length - 1 && "rounded-r-full", h && "opacity-55", m && o && "opacity-100", s && "cursor-pointer"),
 					style: {
 						width: i ? `${p}%` : "0%",
-						backgroundColor: mr(c, f)
+						backgroundColor: hr(c, f)
 					},
 					onMouseEnter: () => l(c),
 					onMouseLeave: () => l(null),
@@ -5726,7 +5726,7 @@ function br({ items: t, formatValue: n, animated: r = !0, mounted: i, hoveredKey
 				children: [
 					/* @__PURE__ */ J("span", {
 						className: "inline-block size-2.5 shrink-0 rounded-full",
-						style: { backgroundColor: mr(e, t) },
+						style: { backgroundColor: hr(e, t) },
 						"aria-hidden": "true"
 					}),
 					/* @__PURE__ */ J("span", {
@@ -5742,8 +5742,8 @@ function br({ items: t, formatValue: n, animated: r = !0, mounted: i, hoveredKey
 		})]
 	});
 }
-function xr(e, t) {
-	let [n, r] = V.useState(!1);
+function Sr(e, t) {
+	let [n, r] = H.useState(!1);
 	return t === void 0 || e.length <= t ? {
 		visibleItems: e,
 		collapsedCount: 0,
@@ -5756,21 +5756,21 @@ function xr(e, t) {
 		setExpanded: r
 	};
 }
-function Sr({ children: e, ...t }) {
-	return /* @__PURE__ */ Y(sr, { children: [e, /* @__PURE__ */ J(Cr, { ...t })] });
+function Cr({ children: e, ...t }) {
+	return /* @__PURE__ */ Y(cr, { children: [e, /* @__PURE__ */ J(wr, { ...t })] });
 }
-function Cr({ items: t, variant: n = "list", ratioMode: r = "total", formatValue: i, trendSentiment: a = "higher-is-better", sortByValue: o, showRank: s = !1, summary: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f = !0, state: p, skeletonRows: m = 3, ariaLabel: h = "Breakdown chart", onItemClick: g, onItemHover: _, className: y, ...b }) {
-	let { tooltip: x, legend: S, summary: C } = or(), w = p ?? (t.length === 0 ? "empty" : "ready"), [T, E] = V.useState(null), D = g !== void 0, O = fr(u), k = V.useRef(null), [A, j] = V.useState(null), M = V.useMemo(() => o ? [...t].sort((e, t) => o === "asc" ? e.value - t.value : t.value - e.value) : t, [t, o]), N = V.useMemo(() => hr(M, r), [M, r]), P = V.useCallback((e) => {
+function wr({ items: t, variant: n = "list", ratioMode: r = "total", formatValue: i, trendSentiment: a = "higher-is-better", sortByValue: o, showRank: s = !1, summary: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f = !0, state: p, skeletonRows: m = 3, ariaLabel: h = "Breakdown chart", onItemClick: g, onItemHover: _, className: y, ...b }) {
+	let { tooltip: x, legend: S, summary: C } = sr(), w = p ?? (t.length === 0 ? "empty" : "ready"), [T, E] = H.useState(null), D = g !== void 0, O = pr(u), k = H.useRef(null), [A, j] = H.useState(null), M = H.useMemo(() => o ? [...t].sort((e, t) => o === "asc" ? e.value - t.value : t.value - e.value) : t, [t, o]), N = H.useMemo(() => gr(M, r), [M, r]), P = H.useCallback((e) => {
 		E(e?.key ?? null), e || j(null), _?.(e);
-	}, [_]), F = V.useCallback((e) => {
+	}, [_]), F = H.useCallback((e) => {
 		if (!x || !k.current) return;
 		let t = k.current.getBoundingClientRect();
 		j({
-			x: e.clientX - t.left + vr,
-			y: e.clientY - t.top + yr
+			x: e.clientX - t.left + yr,
+			y: e.clientY - t.top + br
 		});
 	}, [x]);
-	if (w === "loading") return /* @__PURE__ */ J(_r, {
+	if (w === "loading") return /* @__PURE__ */ J(vr, {
 		rows: m,
 		compact: d,
 		className: y,
@@ -5782,11 +5782,11 @@ function Cr({ items: t, variant: n = "list", ratioMode: r = "total", formatValue
 		children: /* @__PURE__ */ J(v, { ariaLabel: h })
 	});
 	let I = T ? M.findIndex((e) => e.key === T) : -1, L = I >= 0 ? M[I] : null, R = L ? {
-		color: mr(L, I),
+		color: hr(L, I),
 		index: I,
 		ratio: N[I],
 		formattedValue: i ? i(L.value) : String(L.value)
-	} : null, ee = x && L && R && A ? /* @__PURE__ */ J(lr, {
+	} : null, z = x && L && R && A ? /* @__PURE__ */ J(ur, {
 		pos: A,
 		containerRef: k,
 		children: x.content(L, R)
@@ -5798,7 +5798,7 @@ function Cr({ items: t, variant: n = "list", ratioMode: r = "total", formatValue
 		onMouseMove: F,
 		...b,
 		ref: k,
-		children: [/* @__PURE__ */ J(br, {
+		children: [/* @__PURE__ */ J(xr, {
 			items: M,
 			formatValue: i,
 			animated: u,
@@ -5809,8 +5809,8 @@ function Cr({ items: t, variant: n = "list", ratioMode: r = "total", formatValue
 			legendSlot: S,
 			onSegmentHover: P,
 			onSegmentClick: g
-		}), ee]
-	}) : /* @__PURE__ */ J(wr, {
+		}), z]
+	}) : /* @__PURE__ */ J(Tr, {
 		containerRef: k,
 		items: M,
 		ratios: N,
@@ -5830,13 +5830,13 @@ function Cr({ items: t, variant: n = "list", ratioMode: r = "total", formatValue
 		onItemHover: P,
 		onItemClick: g,
 		onMouseMove: F,
-		tooltipPortal: ee,
+		tooltipPortal: z,
 		className: y,
 		...b
 	});
 }
-function wr({ containerRef: t, items: n, ratios: r, formatValue: i, trendSentiment: a = "higher-is-better", showRank: o = !1, summary: s, summarySlot: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f, mounted: p, ariaLabel: m = "Breakdown chart", hoveredKey: h, interactive: g, onItemHover: _, onItemClick: v, tooltipPortal: y, className: b, ...x }) {
-	let { visibleItems: S, collapsedCount: C, setExpanded: w } = xr(n, l);
+function Tr({ containerRef: t, items: n, ratios: r, formatValue: i, trendSentiment: a = "higher-is-better", showRank: o = !1, summary: s, summarySlot: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f, mounted: p, ariaLabel: m = "Breakdown chart", hoveredKey: h, interactive: g, onItemHover: _, onItemClick: v, tooltipPortal: y, className: b, ...x }) {
+	let { visibleItems: S, collapsedCount: C, setExpanded: w } = Sr(n, l);
 	return /* @__PURE__ */ Y("div", {
 		role: "group",
 		"aria-label": m,
@@ -5844,11 +5844,11 @@ function wr({ containerRef: t, items: n, ratios: r, formatValue: i, trendSentime
 		...x,
 		ref: t,
 		children: [
-			S.map((e, t) => /* @__PURE__ */ J(ir, {
+			S.map((e, t) => /* @__PURE__ */ J(ar, {
 				label: e.label,
 				formattedValue: i ? i(e.value) : String(e.value),
 				ratio: p ? r[t] : 0,
-				color: mr(e, t),
+				color: hr(e, t),
 				detail: e.detail,
 				icon: e.icon,
 				trend: e.trend,
@@ -5891,11 +5891,11 @@ function wr({ containerRef: t, items: n, ratios: r, formatValue: i, trendSentime
 }
 //#endregion
 //#region src/charts/BreakdownChart/BreakdownLegend.tsx
-function Tr({ children: e }) {
-	let { setLegend: t } = or();
-	return V.useLayoutEffect(() => (t(e), () => t(null)), [e, t]), null;
+function Er({ children: e }) {
+	let { setLegend: t } = sr();
+	return H.useLayoutEffect(() => (t(e), () => t(null)), [e, t]), null;
 }
-function Er({ items: t, colors: n, formatValue: r, className: i, ...a }) {
+function Dr({ items: t, colors: n, formatValue: r, className: i, ...a }) {
 	return /* @__PURE__ */ J("div", {
 		className: e("flex flex-wrap items-center gap-x-4 gap-y-1", i),
 		...a,
@@ -5921,30 +5921,30 @@ function Er({ items: t, colors: n, formatValue: r, className: i, ...a }) {
 }
 //#endregion
 //#region src/charts/BreakdownChart/BreakdownSummary.tsx
-function Dr({ children: e }) {
-	let { setSummary: t } = or();
-	return V.useLayoutEffect(() => (t(e), () => t(null)), [e, t]), null;
+function Or({ children: e }) {
+	let { setSummary: t } = sr();
+	return H.useLayoutEffect(() => (t(e), () => t(null)), [e, t]), null;
 }
 //#endregion
 //#region src/charts/FilterCombobox/DataTypeIcon.tsx
-function Or({ icon: t, tooltipContent: n, colorClass: r }) {
-	return /* @__PURE__ */ Y(oe, { children: [/* @__PURE__ */ J(le, {
+function kr({ icon: t, tooltipContent: n, colorClass: r }) {
+	return /* @__PURE__ */ Y(ae, { children: [/* @__PURE__ */ J(ce, {
 		asChild: !0,
 		children: /* @__PURE__ */ J("span", {
 			className: "flex shrink-0 items-center justify-center p-1",
 			children: /* @__PURE__ */ J(t, { className: e("size-3.5 transition-colors", r ?? "text-muted-foreground") })
 		})
-	}), /* @__PURE__ */ J(se, {
+	}), /* @__PURE__ */ J(oe, {
 		side: "left",
 		children: n
 	})] });
 }
 //#endregion
 //#region src/charts/FilterCombobox/DataTypeIcons.tsx
-function kr({ dataTypes: e }) {
+function Ar({ dataTypes: e }) {
 	return e.length === 0 ? null : /* @__PURE__ */ J("span", {
 		className: "ml-2 flex shrink-0 items-center",
-		children: e.map((e) => /* @__PURE__ */ J(Or, {
+		children: e.map((e) => /* @__PURE__ */ J(kr, {
 			icon: e.icon,
 			tooltipContent: e.tooltipContent,
 			colorClass: e.colorClass
@@ -5952,20 +5952,55 @@ function kr({ dataTypes: e }) {
 	});
 }
 //#endregion
+//#region src/charts/FilterCombobox/filter-combobox-options.ts
+function jr(e, t) {
+	return `${e}-${t}`;
+}
+function Mr(e) {
+	return e;
+}
+function Nr(e, t) {
+	return `${e}-option-${t}`;
+}
+function Pr(e, t, n, r) {
+	if (!e) return t.map((e) => ({
+		item: e,
+		optionValue: Mr(e.id)
+	}));
+	let i = [];
+	for (let e of n) {
+		if (!r[e.id]) continue;
+		let n = t.filter((t) => t.scopes.includes(e.id));
+		for (let t of n) i.push({
+			item: t,
+			optionValue: jr(e.id, t.id)
+		});
+	}
+	return i;
+}
+function Fr(e, t, n) {
+	if (e.length === 0) return;
+	let r = t ? e.findIndex((e) => e.optionValue === t) : -1;
+	return r === -1 ? n === "next" ? e[0].optionValue : e[e.length - 1].optionValue : n === "next" ? e[r < e.length - 1 ? r + 1 : 0].optionValue : e[r > 0 ? r - 1 : e.length - 1].optionValue;
+}
+function Ir(e, t) {
+	if (t) return e.some((e) => e.optionValue === t) ? t : void 0;
+}
+//#endregion
 //#region src/charts/FilterCombobox/resolve-item-data-types.ts
-function Ar(e) {
+function Lr(e) {
 	return e.dataTypeIds ?? [];
 }
-function jr(e, t) {
-	return Array.from(new Set(Ar(e))).map((e) => t.find((t) => t.id === e)).filter((e) => e !== void 0);
+function Rr(e, t) {
+	return Array.from(new Set(Lr(e))).map((e) => t.find((t) => t.id === e)).filter((e) => e !== void 0);
 }
 //#endregion
 //#region src/charts/FilterCombobox/FilterGroupedList.tsx
-function Mr({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScope: a, onSelect: o }) {
+function zr({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScope: a, onSelect: o, onHighlightOption: s }) {
 	return /* @__PURE__ */ J(q, { children: t.map((t) => {
-		let s = r.filter((e) => e.scopes.includes(t.id));
-		if (s.length === 0) return null;
-		let c = t.icon;
+		let c = r.filter((e) => e.scopes.includes(t.id));
+		if (c.length === 0) return null;
+		let l = t.icon;
 		return /* @__PURE__ */ Y(P, {
 			open: i[t.id] ?? !0,
 			onOpenChange: (e) => a(t.id, e),
@@ -5979,28 +6014,30 @@ function Mr({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScop
 					children: [/* @__PURE__ */ Y("div", {
 						className: e("flex items-center gap-2 text-xs font-bold tracking-wider uppercase", t.colorClass),
 						children: [
-							/* @__PURE__ */ J(c, { className: "size-4" }),
+							/* @__PURE__ */ J(l, { className: "size-4" }),
 							t.title,
 							/* @__PURE__ */ J(O, {
 								variant: "secondary",
 								className: "ml-1 h-4 px-1.5 text-[10px] font-normal",
-								children: s.length
+								children: c.length
 							})
 						]
 					}), /* @__PURE__ */ J(Z, { className: e("size-4 text-muted-foreground transition-transform duration-200", i[t.id] && "rotate-180") })]
 				})
-			}), /* @__PURE__ */ J(F, { children: /* @__PURE__ */ J(ee, {
+			}), /* @__PURE__ */ J(F, { children: /* @__PURE__ */ J(z, {
 				className: "mt-1 ml-3 pl-1",
-				children: (i[t.id] ?? !0) && s.map((e) => {
-					let r = jr(e, n);
-					return /* @__PURE__ */ Y(te, {
-						value: `${t.id}-${e.id}`,
+				children: (i[t.id] ?? !0) && c.map((e) => {
+					let r = Rr(e, n), i = jr(t.id, e.id);
+					return /* @__PURE__ */ Y(ee, {
+						"data-filter-option-value": i,
+						value: i,
 						onSelect: () => o(e),
+						onMouseEnter: () => s(i),
 						className: "group/item rounded-md [&>svg.lucide-check]:hidden",
 						children: [/* @__PURE__ */ J("span", {
 							className: "min-w-0 flex-1 truncate font-medium text-foreground",
 							children: e.name
-						}), /* @__PURE__ */ J(kr, { dataTypes: r })]
+						}), /* @__PURE__ */ J(Ar, { dataTypes: r })]
 					}, `${t.id}-${e.id}`);
 				})
 			}) })]
@@ -6009,12 +6046,12 @@ function Mr({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScop
 }
 //#endregion
 //#region src/charts/FilterCombobox/HighlightMatch.tsx
-function Nr(e) {
+function Br(e) {
 	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function Pr(e, t) {
+function Vr(e, t) {
 	if (!t.trim()) return [e];
-	let n = Nr(t);
+	let n = Br(t);
 	return e.split(RegExp(`(${n})`, "gi")).map((e, n) => e.toLowerCase() === t.toLowerCase() ? /* @__PURE__ */ J("mark", {
 		className: "rounded-sm bg-warning/10 text-warning-foreground",
 		children: e
@@ -6022,21 +6059,23 @@ function Pr(e, t) {
 }
 //#endregion
 //#region src/charts/FilterCombobox/FilterSearchList.tsx
-function Fr({ scopes: t, dataTypes: n, items: r, searchQuery: i, onSelect: a }) {
-	return /* @__PURE__ */ J(ee, {
+function Hr({ scopes: t, dataTypes: n, items: r, searchQuery: i, onSelect: a, onHighlightOption: o }) {
+	return /* @__PURE__ */ J(z, {
 		heading: `Results (${r.length})`,
 		className: "mt-1",
 		children: r.map((r) => {
-			let o = jr(r, n);
-			return /* @__PURE__ */ Y(te, {
-				value: r.id,
+			let s = Rr(r, n), c = Mr(r.id);
+			return /* @__PURE__ */ Y(ee, {
+				"data-filter-option-value": c,
+				value: c,
 				onSelect: () => a(r),
+				onMouseEnter: () => o(c),
 				className: "group/item mb-1 rounded-lg p-2 [&>svg.lucide-check]:hidden",
 				children: [/* @__PURE__ */ Y("div", {
 					className: "flex min-w-0 flex-1 flex-col gap-1.5 overflow-hidden",
 					children: [/* @__PURE__ */ J("span", {
 						className: "truncate text-sm font-medium text-foreground",
-						children: Pr(r.name, i)
+						children: Vr(r.name, i)
 					}), /* @__PURE__ */ J("div", {
 						className: "flex flex-wrap items-center gap-1.5",
 						children: r.scopes.map((n) => {
@@ -6050,94 +6089,162 @@ function Fr({ scopes: t, dataTypes: n, items: r, searchQuery: i, onSelect: a })
 							}, n);
 						})
 					})]
-				}), /* @__PURE__ */ J(kr, { dataTypes: o })]
+				}), /* @__PURE__ */ J(Ar, { dataTypes: s })]
 			}, r.id);
 		})
 	});
 }
 //#endregion
 //#region src/charts/FilterCombobox/use-filter-combobox.ts
-function Ir({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open: a, onOpenChange: o }) {
-	let s = W(), c = G(null), l = G(null), u = G(null), d = G(!1), f = a !== void 0, p = r !== void 0, [m, h] = K(!1), [g, _] = K(null), [v, y] = K(""), b = f ? a : m, x = p ? r : g, S = U((e) => {
+function Ur({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open: a, onOpenChange: o }) {
+	let s = G(), c = he(null), l = he(null), u = he(null), d = he(!1), f = a !== void 0, p = r !== void 0, [m, h] = K(!1), [g, _] = K(null), [v, y] = K(""), [b, x] = K(void 0), S = f ? a : m, C = p ? r : g, w = W((e) => {
 		f ? o?.(e) : h(e);
-	}, [f, o]), C = U((e) => {
+	}, [f, o]), T = W((e) => {
 		p ? i?.(e) : _(e);
-	}, [p, i]), [w, T] = K(me(() => Object.fromEntries(t.map((e) => [e.id, !0])), [t])), E = U((e, t) => {
-		T((n) => ({
+	}, [p, i]), [E, D] = K(me(() => Object.fromEntries(t.map((e) => [e.id, !0])), [t])), O = W((e, t) => {
+		D((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), D = me(() => {
+	}, []), k = me(() => {
 		let t = v.trim().toLowerCase();
 		return t ? e.filter((e) => e.name.toLowerCase().includes(t) || e.id.toLowerCase().includes(t)) : e;
-	}, [e, v]), O = v.trim() === "", k = U((e) => {
-		d.current = !1, u.current = e, C(e), y(e.name), S(!1), n(e);
+	}, [e, v]), A = v.trim() === "", j = me(() => Pr(A, k, t, E), [
+		A,
+		k,
+		t,
+		E
+	]), M = me(() => Ir(j, b), [j, b]), N = M ? Nr(s, M) : void 0, P = W(() => {
+		x(void 0);
+	}, []), F = W((e) => {
+		x((t) => Fr(j, t, e));
+	}, [j]), I = W((e) => {
+		d.current = !1, u.current = e, T(e), y(e.name), P(), w(!1), n(e);
 	}, [
-		C,
-		S,
+		P,
+		T,
+		w,
 		n
-	]), A = U(() => {
-		d.current = !1, u.current = null, C(null), y(""), S(!0), n(null), l.current?.focus();
+	]), L = W(() => {
+		d.current = !1, u.current = null, T(null), y(""), P(), w(!0), n(null), l.current?.focus();
 	}, [
-		C,
-		S,
+		P,
+		T,
+		w,
 		n
-	]), j = U((e) => {
-		d.current = !0, y(e.target.value), S(!0), x && C(null);
+	]), R = W((e) => {
+		d.current = !0, y(e.target.value), P(), w(!0), C && T(null);
 	}, [
-		x,
+		P,
 		C,
-		S
-	]), M = U((e) => {
-		S(!0), e.target.select();
-	}, [S]), N = U((e) => {
-		if (e.key === "Escape" && b) {
-			e.preventDefault(), d.current = !1, S(!1);
+		T,
+		w
+	]), z = W(() => {
+		w(!0);
+	}, [w]), ee = W((e) => {
+		x(e);
+	}, []), B = W((e) => {
+		e.target.select();
+	}, []), te = W((e) => {
+		if (e.key === "ArrowDown") {
+			if (e.preventDefault(), !S) {
+				w(!0), j.length > 0 && x(j[0].optionValue);
+				return;
+			}
+			F("next");
+			return;
+		}
+		if (e.key === "ArrowUp" && S) {
+			e.preventDefault(), F("prev");
+			return;
+		}
+		if (e.key === "Enter" && S && M) {
+			let t = j.find((e) => e.optionValue === M);
+			t && (e.preventDefault(), I(t.item));
+			return;
+		}
+		if (e.key === "Escape" && S) {
+			e.preventDefault(), d.current = !1, P(), w(!1);
 			let t = u.current;
 			y(t ? t.name : "");
 		}
-	}, [b, S]);
-	return pe(() => {
+	}, [
+		P,
+		I,
+		M,
+		S,
+		F,
+		j,
+		w
+	]);
+	return fe(() => {
 		function e(e) {
 			if (c.current && !c.current.contains(e.target)) {
-				d.current = !1, S(!1);
+				d.current = !1, P(), w(!1);
 				let e = u.current;
 				y(e ? e.name : "");
 			}
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [S]), pe(() => {
+	}, [P, w]), fe(() => {
+		!S || !M || document.getElementById(Nr(s, M))?.scrollIntoView({ block: "nearest" });
+	}, [
+		M,
+		S,
+		s
+	]), pe(() => {
+		if (!S || !c.current) return;
+		let e = c.current.querySelector("[cmdk-list]");
+		e instanceof HTMLElement && (e.id = s);
+		let t = c.current.querySelectorAll("[data-filter-option-value]");
+		for (let e of t) {
+			if (!(e instanceof HTMLElement)) continue;
+			let t = e.getAttribute("data-filter-option-value");
+			t && (e.id = Nr(s, t));
+		}
+	}, [
+		S,
+		s,
+		k,
+		A,
+		E,
+		b
+	]), fe(() => {
 		!p || d.current || (r ? (u.current = r, y(r.name)) : (u.current = null, y("")));
 	}, [p, r]), {
 		listboxId: s,
 		containerRef: c,
 		inputRef: l,
-		isOpen: b,
-		isIdle: O,
+		isOpen: S,
+		isIdle: A,
 		inputValue: v,
-		expandedScopes: w,
-		filteredItems: D,
-		toggleScope: E,
-		handleSelect: k,
-		handleClear: A,
-		handleInputChange: j,
-		handleFocus: M,
-		handleKeyDown: N
+		highlightedOptionValue: M,
+		activeDescendantId: N,
+		expandedScopes: E,
+		filteredItems: k,
+		toggleScope: O,
+		handleSelect: I,
+		handleClear: L,
+		handleInputChange: R,
+		handleClick: z,
+		handleHighlightOption: ee,
+		handleFocus: B,
+		handleKeyDown: te
 	};
 }
 //#endregion
 //#region src/charts/FilterCombobox/FilterCombobox.tsx
-function Lr({ scopes: t, dataTypes: n, items: r, onSelect: i, placeholder: a = "Search a property...", emptyMessage: o = "No results found.", listLabel: s = "Filter options", value: c, onValueChange: l, open: u, onOpenChange: d }) {
-	let { listboxId: f, containerRef: p, inputRef: m, isOpen: h, isIdle: g, inputValue: _, expandedScopes: v, filteredItems: y, toggleScope: b, handleSelect: x, handleClear: S, handleInputChange: C, handleFocus: w, handleKeyDown: T } = Ir({
-		items: r,
-		scopes: t,
-		onSelect: i,
+function Wr({ scopes: e, dataTypes: t, items: n, onSelect: r, placeholder: i = "Search a property...", emptyMessage: a = "No results found.", listLabel: o = "Filter options", inputId: s, value: c, onValueChange: l, open: u, onOpenChange: d }) {
+	let { listboxId: f, containerRef: p, inputRef: m, isOpen: h, isIdle: g, inputValue: _, highlightedOptionValue: v, activeDescendantId: y, expandedScopes: b, filteredItems: x, toggleScope: S, handleSelect: C, handleClear: w, handleInputChange: T, handleClick: E, handleHighlightOption: D, handleFocus: O, handleKeyDown: k } = Ur({
+		items: n,
+		scopes: e,
+		onSelect: r,
 		value: c,
 		onValueChange: l,
 		open: u,
 		onOpenChange: d
 	});
-	return /* @__PURE__ */ J(ce, {
+	return /* @__PURE__ */ J(se, {
 		delayDuration: 200,
 		children: /* @__PURE__ */ Y("div", {
 			"data-slot": "filter-combobox",
@@ -6146,68 +6253,66 @@ function Lr({ scopes: t, dataTypes: n, items: r, onSelect: i, placeholder: a = "
 			children: [/* @__PURE__ */ Y("div", {
 				"data-slot": "filter-combobox-input",
 				className: "group relative",
-				children: [
-					/* @__PURE__ */ J(dt, {
+				children: [/* @__PURE__ */ J("input", {
+					ref: m,
+					id: s,
+					type: "text",
+					role: "combobox",
+					"aria-expanded": h,
+					"aria-controls": f,
+					"aria-autocomplete": "list",
+					"aria-activedescendant": y,
+					value: _,
+					onChange: T,
+					onClick: E,
+					onFocus: O,
+					onKeyDown: k,
+					placeholder: i,
+					className: "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-base text-foreground transition-colors outline-none placeholder:text-muted-foreground placeholder:italic focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 md:text-sm dark:bg-input/30"
+				}), _.length > 0 && /* @__PURE__ */ J("button", {
+					type: "button",
+					"aria-label": "Clear",
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: w,
+					className: "absolute top-1/2 right-3 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground",
+					children: /* @__PURE__ */ J(mt, {
 						"aria-hidden": "true",
-						className: e("pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 transition-colors", h || _ ? "text-primary" : "text-muted-foreground")
-					}),
-					/* @__PURE__ */ J("input", {
-						ref: m,
-						type: "text",
-						role: "combobox",
-						"aria-expanded": h,
-						"aria-controls": f,
-						"aria-autocomplete": "list",
-						value: _,
-						onChange: C,
-						onFocus: w,
-						onKeyDown: T,
-						placeholder: a,
-						className: "flex h-10 w-full rounded-lg border border-input bg-background py-3 pr-10 pl-9 text-sm text-foreground shadow-sm transition-all outline-none hover:border-muted-foreground/30 focus:border-ring focus:ring-3 focus:ring-ring/50"
-					}),
-					_.length > 0 && /* @__PURE__ */ J("button", {
-						type: "button",
-						"aria-label": "Clear",
-						onMouseDown: (e) => e.preventDefault(),
-						onClick: S,
-						className: "absolute top-1/2 right-3 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground",
-						children: /* @__PURE__ */ J(pt, {
-							"aria-hidden": "true",
-							className: "size-4"
-						})
+						className: "size-4"
 					})
-				]
+				})]
 			}), h && /* @__PURE__ */ J("div", {
-				id: f,
 				"data-slot": "filter-combobox-content",
 				className: "absolute top-full left-0 z-50 mt-1.5 w-full animate-in overflow-hidden rounded-xl border border-border bg-popover shadow-lg duration-200 fade-in-0 slide-in-from-top-2",
 				children: /* @__PURE__ */ J(L, {
 					shouldFilter: !1,
+					value: v ?? "",
 					className: "rounded-xl",
-					children: /* @__PURE__ */ Y(z, {
-						"aria-label": s,
-						children: [y.length === 0 && /* @__PURE__ */ J(R, { children: /* @__PURE__ */ Y("div", {
+					children: /* @__PURE__ */ Y(B, {
+						"aria-label": o,
+						children: [x.length === 0 && /* @__PURE__ */ J(R, { children: /* @__PURE__ */ Y("div", {
 							className: "flex flex-col items-center justify-center space-y-2 py-4 text-muted-foreground",
-							children: [/* @__PURE__ */ J(dt, {
+							children: [/* @__PURE__ */ J(ft, {
 								"aria-hidden": "true",
 								className: "size-6 opacity-20"
 							}), /* @__PURE__ */ J("p", {
 								className: "text-xs",
-								children: o
+								children: a
 							})]
-						}) }), g ? /* @__PURE__ */ J(Mr, {
-							scopes: t,
-							dataTypes: n,
-							items: y,
-							expandedScopes: v,
-							onToggleScope: b,
-							onSelect: x
-						}) : /* @__PURE__ */ J(Fr, {
-							scopes: t,
-							dataTypes: n,
-							items: y,
+						}) }), g ? /* @__PURE__ */ J(zr, {
+							scopes: e,
+							dataTypes: t,
+							items: x,
+							expandedScopes: b,
+							onToggleScope: S,
+							onSelect: C,
+							onHighlightOption: D
+						}) : /* @__PURE__ */ J(Hr, {
+							scopes: e,
+							dataTypes: t,
+							items: x,
 							searchQuery: _,
-							onSelect: x
+							onSelect: C,
+							onHighlightOption: D
 						})]
 					})
 				})
@@ -6216,4 +6321,4 @@ function Lr({ scopes: t, dataTypes: n, items: r, onSelect: i, placeholder: a = "
 	});
 }
 //#endregion
-export { vn as AreaChart, Ve as AreaSeries, We as BarChart, ir as BarMeter, ze as BarSeries, Sr as BreakdownChart, _r as BreakdownChartSkeleton, Tr as BreakdownLegend, Er as BreakdownLegendContent, Dr as BreakdownSummary, cr as BreakdownTooltip, dr as BreakdownTooltipContent, a as CHART_THEMES, m as CartesianChart, g as CategoryAxis, g as XAxis, we as ChartCard, E as ChartContainer, Pe as ChartLegend, Ne as ChartLegendContent, i as ChartStyle, je as ChartTooltip, Ae as ChartTooltipContent, r as DEFAULT_MARGIN, Ye as DoughnutChart, Lr as FilterCombobox, o as Grid, _n as LineChart, Le as LineSeries, en as Metric, gn as MetricGroup, f as ReferenceLine, er as TraceWaterfall, p as ValueAxis, p as YAxis, En as buildTimeAxisTicks, e as cn, n as compactTick, xn as computeBarGeometry, bn as computeTraceDurationNs, yn as formatDurationNs, Sn as formatTracePercent, Wt as resolveSentiment, t as useChartConfig };
+export { yn as AreaChart, He as AreaSeries, Ge as BarChart, ar as BarMeter, Be as BarSeries, Cr as BreakdownChart, vr as BreakdownChartSkeleton, Er as BreakdownLegend, Dr as BreakdownLegendContent, Or as BreakdownSummary, lr as BreakdownTooltip, fr as BreakdownTooltipContent, a as CHART_THEMES, m as CartesianChart, g as CategoryAxis, g as XAxis, Te as ChartCard, E as ChartContainer, Fe as ChartLegend, Pe as ChartLegendContent, i as ChartStyle, Me as ChartTooltip, je as ChartTooltipContent, r as DEFAULT_MARGIN, Xe as DoughnutChart, Wr as FilterCombobox, o as Grid, vn as LineChart, Re as LineSeries, tn as Metric, _n as MetricGroup, f as ReferenceLine, tr as TraceWaterfall, p as ValueAxis, p as YAxis, Dn as buildTimeAxisTicks, e as cn, n as compactTick, Sn as computeBarGeometry, xn as computeTraceDurationNs, bn as formatDurationNs, Cn as formatTracePercent, Gt as resolveSentiment, t as useChartConfig };