themelia-react-ui 2.0.6 → 3.0.0

package/dist/blocks/analytics.js

@@ -1,884 +1,19 @@
 "use client";
-import { f as e, m as t } from "../ui-provider-C-74NVLc.js";
-import { useStrings as n } from "../lib/strings.js";
-import { t as r } from "../utils-DhuoqFy4.js";
-import { n as i } from "../buttons-DeW0bQeK.js";
-import { c as a, o, s } from "../typography-C7-YMW1S.js";
-import { c } from "../text.styles-B64My8RZ.js";
-import { t as l } from "../focus-recipes-B653VaLq.js";
-import { r as u, t as d } from "../structure-DZJ2wbAU.js";
-import { i as f, r as p, t as m } from "../tone-recipes-BPsRAvhu.js";
-import { t as h } from "../smart-card-B6vLxqa_.js";
-import { t as g } from "../progress-DZFXXzPs.js";
-import { r as _ } from "../skeleton-DDgdhmu9.js";
-import { t as v } from "../interaction-recipes-4wZ2tvfb.js";
-import { a as y, i as b, o as x, r as S } from "../value-typography-uSzzG9Gf.js";
-import { _ as C, g as w } from "../primitives-BkkQjYl7.js";
-import { a as T } from "../number-CYqBcrSj.js";
-import { t as E } from "../icon-badge-npxF1SLX.js";
-import { t as D } from "../badge-wWauMgAt.js";
-import { t as O } from "../chart-I7ROnsl8.js";
-import { n as ee } from "../display-CT_N2a3w.js";
-import { n as te, t as ne } from "../usage-card-9s8hLDfn.js";
-import { useId as k, useMemo as A, useSyncExternalStore as re } from "react";
-import { Fragment as ie, jsx as j, jsxs as M } from "react/jsx-runtime";
-import { ArrowDown as N, ArrowRight as ae, ArrowUp as P, ArrowUpRight as oe, Calendar as se, Equal as ce, Minus as le } from "lucide-react";
-import { Area as F, AreaChart as I, ResponsiveContainer as L } from "recharts";
-//#region src/components/blocks/analytics/analytics.strings.ts
-var R = {
-	metricErrorLabel: "Unable to load metric",
-	comparisonTitle: "Comparison",
-	heatmapDayLabels: [
-		"Mon",
-		"",
-		"Wed",
-		"",
-		"Fri",
-		"",
-		""
-	],
-	heatmapMonthNames: [
-		"Jan",
-		"Feb",
-		"Mar",
-		"Apr",
-		"May",
-		"Jun",
-		"Jul",
-		"Aug",
-		"Sep",
-		"Oct",
-		"Nov",
-		"Dec"
-	],
-	heatmapLegendLess: "Less",
-	heatmapLegendMore: "More"
-};
-//#endregion
-//#region src/components/blocks/analytics/format-metric-value.ts
-function z(e, t = {}) {
-	if (e.value === null || e.value === void 0) return "—";
-	let n = e.value, r = typeof n == "number" ? n : null, { locale: i } = t;
-	switch (e.valueType) {
-		case "currency": return r === null ? String(n) : T({
-			amount: r,
-			currency: e.currency ?? t.defaultCurrency ?? "USD",
-			locale: i,
-			formatMode: t.moneyFormatMode ?? "with_code"
-		}) ?? "—";
-		case "percentage": return r === null ? String(n) : x(r, { locale: i });
-		case "duration": return r === null ? String(n) : S(r, { locale: i });
-		case "number": return r === null ? String(n) : b(r, { locale: i });
-		default: return String(n);
-	}
-}
-function ue(e) {
-	return e.trend ? e.trend : e.change?.direction === "up" ? "positive" : e.change?.direction === "down" ? "negative" : "neutral";
-}
-//#endregion
-//#region src/components/blocks/analytics/atoms/metric-trend-chip.tsx
-var de = {
-	positive: {
-		text: "text-success",
-		badge: `${f.success.tint} ${f.success.ink}`,
-		arrow: "text-success"
-	},
-	negative: {
-		text: "text-destructive",
-		badge: `${f.destructive.tint} ${f.destructive.ink}`,
-		arrow: "text-destructive"
-	},
-	neutral: {
-		text: "text-muted-foreground",
-		badge: "bg-muted text-muted-foreground",
-		arrow: "text-muted-foreground"
-	}
-}, B = {
-	sm: "size-icon-sm",
-	md: "size-icon-md",
-	lg: "size-icon"
-}, V = {
-	sm: "xxs",
-	md: "xs",
-	lg: "sm"
-}, fe = {
-	sm: "px-space-sm py-space-2xs",
-	md: "px-space-md py-space-2xs",
-	lg: "px-space-md py-space-xs"
-};
-function pe(e, t) {
-	return e || (t === "up" ? "positive" : t === "down" ? "negative" : "neutral");
-}
-function H({ change: e, trend: t, size: n = "md", variant: i = "default", className: o }) {
-	let s = pe(t, e.direction), c = e.direction === "up" ? P : e.direction === "down" ? N : le, l = de[s], u = String(e.value), d = e.direction === "up" ? "+" : (e.direction, "");
-	return i === "inline" ? /* @__PURE__ */ M(C, {
-		type: "inherit",
-		size: V[n],
-		weight: "medium",
-		className: r("metric-trend-chip--component", l.text, "tabular-nums", o),
-		children: [d, u]
-	}) : i === "compact" ? /* @__PURE__ */ M("span", {
-		className: r("inline-flex items-center gap-space-2xs", l.text, o),
-		children: [/* @__PURE__ */ j(c, {
-			className: B[n],
-			strokeWidth: 2.5,
-			"aria-hidden": "true"
-		}), /* @__PURE__ */ j(C, {
-			type: "inherit",
-			size: V[n],
-			weight: "semibold",
-			className: "tabular-nums",
-			children: u
-		})]
-	}) : i === "badge" ? /* @__PURE__ */ M("span", {
-		className: r("inline-flex items-center gap-space-xs rounded-radius", l.badge, fe[n], o),
-		children: [
-			/* @__PURE__ */ j(c, {
-				className: B[n],
-				strokeWidth: 2.5,
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ j(C, {
-				type: "inherit",
-				size: V[n],
-				weight: "semibold",
-				className: "tabular-nums",
-				children: u
-			}),
-			!!e.label && /* @__PURE__ */ j(a, {
-				type: "inherit",
-				tag: "span",
-				size: V[n],
-				children: e.label
-			})
-		]
-	}) : /* @__PURE__ */ M("span", {
-		className: r("inline-flex items-center gap-space-xs", l.text, o),
-		children: [
-			/* @__PURE__ */ j(c, {
-				className: B[n],
-				strokeWidth: 2.5,
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ j(C, {
-				type: "inherit",
-				size: V[n],
-				weight: "semibold",
-				className: "tabular-nums",
-				children: u
-			}),
-			!!e.label && /* @__PURE__ */ j(a, {
-				tag: "span",
-				size: V[n],
-				type: "secondary",
-				children: e.label
-			})
-		]
-	});
-}
-H.displayName = "MetricTrendChip";
-//#endregion
-//#region src/lib/use-prefers-reduced-motion.ts
-var U = "(prefers-reduced-motion: reduce)";
-function me(e) {
-	if (typeof window > "u" || typeof window.matchMedia != "function") return () => {};
-	let t = window.matchMedia(U);
-	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
-}
-function he() {
-	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia(U).matches;
-}
-function ge() {
-	return !0;
-}
-function W() {
-	return re(me, he, ge);
-}
-//#endregion
-//#region src/components/blocks/analytics/atoms/metric-sparkline.tsx
-var _e = {
-	positive: "var(--success)",
-	negative: "var(--destructive)",
-	neutral: "var(--muted-foreground)"
-};
-function G({ data: e, trend: t = "neutral", color: n, className: i, animated: a = !0, "aria-label": o = "Trend sparkline" }) {
-	let s = k(), c = W(), l = A(() => `metric-spark-${s.replaceAll(":", "")}`, [s]), u = n ?? _e[t], d = A(() => !Array.isArray(e) || e.length === 0 ? [] : e.map((e, t) => ({
-		i: t,
-		v: e
-	})), [e]);
-	return d.length === 0 ? /* @__PURE__ */ j("div", {
-		className: r("metric-sparkline--component", "h-full w-full", i),
-		"aria-hidden": "true"
-	}) : /* @__PURE__ */ j("div", {
-		className: r("metric-sparkline--component h-full w-full", i),
-		role: "img",
-		"aria-label": o,
-		children: /* @__PURE__ */ j(L, {
-			width: "100%",
-			height: "100%",
-			initialDimension: {
-				width: 1,
-				height: 1
-			},
-			children: /* @__PURE__ */ M(I, {
-				data: d,
-				margin: {
-					top: 2,
-					right: 0,
-					bottom: 0,
-					left: 0
-				},
-				children: [/* @__PURE__ */ j("defs", { children: /* @__PURE__ */ M("linearGradient", {
-					id: l,
-					x1: "0",
-					y1: "0",
-					x2: "0",
-					y2: "1",
-					children: [/* @__PURE__ */ j("stop", {
-						offset: "0%",
-						stopColor: u,
-						stopOpacity: .25
-					}), /* @__PURE__ */ j("stop", {
-						offset: "100%",
-						stopColor: u,
-						stopOpacity: 0
-					})]
-				}) }), /* @__PURE__ */ j(F, {
-					type: "monotone",
-					dataKey: "v",
-					stroke: u,
-					strokeWidth: 1.75,
-					fill: `url(#${l})`,
-					dot: !1,
-					activeDot: !1,
-					isAnimationActive: a && !c,
-					animationDuration: 600
-				})]
-			})
-		})
-	});
-}
-G.displayName = "MetricSparkline";
-//#endregion
-//#region src/components/blocks/analytics/atoms/metric-skeleton.tsx
-var K = ({ className: e }) => /* @__PURE__ */ j(_, { className: e });
-function q({ variant: e = "default", size: t = "md", className: n }) {
-	let i = /* @__PURE__ */ M(d, {
-		gap: "lg",
-		children: [
-			/* @__PURE__ */ j(K, { className: "h-3 w-24" }),
-			/* @__PURE__ */ M(d, {
-				gap: "md",
-				children: [/* @__PURE__ */ j(K, { className: t === "lg" ? "h-9 w-40" : "h-7 w-32" }), /* @__PURE__ */ j(K, { className: "h-3 w-20" })]
-			}),
-			/* @__PURE__ */ j(K, { className: "h-8 w-full" })
-		]
-	});
-	return e === "card" || e === "bordered" || e === "accent" || e === "colored" ? /* @__PURE__ */ j(h, {
-		surface: e === "card" ? void 0 : "card",
-		className: r("metric-skeleton--component", n),
-		"aria-busy": "true",
-		"aria-live": "polite",
-		children: i
-	}) : e === "compact" ? /* @__PURE__ */ M("div", {
-		className: r("flex items-center gap-space-lg", n),
-		"aria-busy": "true",
-		children: [
-			/* @__PURE__ */ j(K, { className: "size-avatar rounded-radius" }),
-			/* @__PURE__ */ M(d, {
-				gap: "sm",
-				className: "flex-1",
-				children: [/* @__PURE__ */ j(K, { className: "h-3 w-20" }), /* @__PURE__ */ j(K, { className: "h-4 w-28" })]
-			}),
-			/* @__PURE__ */ j(K, { className: "h-5 w-12 rounded-full" })
-		]
-	}) : e === "minimal" ? /* @__PURE__ */ M("div", {
-		className: r("inline-flex items-baseline gap-space-md", n),
-		"aria-busy": "true",
-		children: [/* @__PURE__ */ j(K, { className: "h-3 w-12" }), /* @__PURE__ */ j(K, { className: "h-3 w-16" })]
-	}) : /* @__PURE__ */ M("div", {
-		className: r("flex flex-col gap-space-sm p-surface", n),
-		"aria-busy": "true",
-		children: [
-			/* @__PURE__ */ j(K, { className: "h-3 w-20" }),
-			/* @__PURE__ */ j(K, { className: "h-5 w-28" }),
-			/* @__PURE__ */ j(K, { className: "mt-1 h-6 w-full" })
-		]
-	});
-}
-q.displayName = "MetricSkeleton";
-//#endregion
-//#region src/components/blocks/analytics/use-metric-format-options.ts
-function ve() {
-	let { locale: n } = e(), { defaultCurrency: r, formatMode: i } = t();
-	return A(() => ({
-		locale: n,
-		defaultCurrency: r,
-		moneyFormatMode: i
-	}), [
-		n,
-		r,
-		i
-	]);
-}
-//#endregion
-//#region src/components/blocks/analytics/metric/metric.tsx
-var ye = {
-	...f,
-	neutral: {
-		edge: "border-border",
-		wash: "bg-card",
-		solid: "bg-foreground"
-	},
-	secondary: {
-		edge: "border-border",
-		wash: "bg-secondary text-secondary-foreground",
-		solid: "bg-secondary-foreground"
-	}
-}, be = {
-	default: "neutral",
-	primary: "primary",
-	success: "success",
-	warning: "warning",
-	danger: "destructive",
-	info: "info"
-}, xe = {
-	sm: "sm",
-	md: "base",
-	lg: "base"
-}, J = {
-	sm: "2xl",
-	md: "2xl",
-	lg: "3xl"
-}, Se = {
-	sm: "@max-[11rem]/metric-card:text-xl",
-	md: "@max-[11rem]/metric-card:text-xl",
-	lg: "@max-[16rem]/metric-card:text-2xl @max-[11rem]/metric-card:text-xl"
-}, Ce = {
-	sm: "h-control-sm",
-	md: "h-control",
-	lg: "h-control-lg"
-}, we = 16;
-function Y(e) {
-	let { data: t, variant: n = "default", size: i = "md", tone: o, colorScheme: s = "default", showSparkline: c = !0, showChange: l = !0, showIcon: u = !0, loading: d = !1, error: f = !1, errorLabel: p, progress: m = 0, className: g, "aria-label": _ } = e, v = r("metric--component", g), y = ve(), b = A(() => z(t, y), [t, y]), x = A(() => ue(t), [t]);
-	if (d) return /* @__PURE__ */ j(q, {
-		variant: n,
-		size: i,
-		className: v
-	});
-	if (f) return /* @__PURE__ */ j(h, {
-		className: v,
-		contentClassName: "flex items-center justify-center",
-		children: /* @__PURE__ */ j(a, {
-			type: "inherit",
-			children: p ?? R.metricErrorLabel
-		})
-	});
-	let S = be[s], C = {
-		data: t,
-		formattedValue: b,
-		trend: x,
-		size: i,
-		showSparkline: c,
-		showChange: l,
-		showIcon: u,
-		tone: o ?? (n === "colored" && S === "neutral" ? "primary" : S),
-		ariaLabel: _ ?? t.label,
-		className: v
-	};
-	switch (n) {
-		case "card": return /* @__PURE__ */ j(Ee, { ...C });
-		case "compact": return /* @__PURE__ */ j(De, { ...C });
-		case "minimal": return /* @__PURE__ */ j(Oe, { ...C });
-		case "bordered": return /* @__PURE__ */ j(ke, { ...C });
-		case "accent": return /* @__PURE__ */ j(Ae, { ...C });
-		case "colored": return /* @__PURE__ */ j(je, {
-			...C,
-			progress: m
-		});
-		default: return /* @__PURE__ */ j(Te, { ...C });
-	}
-}
-Y.displayName = "Metric";
-function Te({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: l, ariaLabel: u, className: f }) {
-	let p = e.icon;
-	return /* @__PURE__ */ M(d, {
-		gap: "xs",
-		className: f,
-		"aria-label": u,
-		children: [
-			/* @__PURE__ */ M(d, {
-				direction: "horizontal",
-				align: "center",
-				gap: "sm",
-				className: "min-w-0 text-muted-foreground",
-				children: [!!l && !!p && /* @__PURE__ */ j(p, {
-					className: "size-icon-md shrink-0",
-					"aria-hidden": "true"
-				}), /* @__PURE__ */ j(a, {
-					size: "xs",
-					type: "secondary",
-					weight: "medium",
-					className: "truncate",
-					children: e.label
-				})]
-			}),
-			/* @__PURE__ */ j(s, {
-				tag: "h5",
-				size: xe[i],
-				className: "truncate tabular-nums text-inherit",
-				title: t,
-				children: t
-			}),
-			!!c && !!e.change && /* @__PURE__ */ j("div", {
-				className: "min-w-0",
-				children: /* @__PURE__ */ j(H, {
-					change: e.change,
-					trend: e.trend,
-					size: i,
-					variant: "compact"
-				})
-			}),
-			!!e.subtitle && /* @__PURE__ */ j(a, {
-				size: "xs",
-				type: "secondary",
-				className: "truncate",
-				children: e.subtitle
-			}),
-			!!o && !!e.sparkline?.length && /* @__PURE__ */ j(G, {
-				data: e.sparkline,
-				trend: n,
-				className: r("mt-auto", Ce[i])
-			}),
-			!!e.footer && /* @__PURE__ */ j(a, {
-				size: "xs",
-				type: "discrete",
-				className: "truncate",
-				children: e.footer
-			})
-		]
-	});
-}
-function Ee({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: u, ariaLabel: f, className: p }) {
-	let m = e.icon, g = !!(e.href || e.onClick);
-	return /* @__PURE__ */ M(h, {
-		title: /* @__PURE__ */ j(a, {
-			tag: "span",
-			size: "xs",
-			type: "secondary",
-			weight: "medium",
-			children: e.label
-		}),
-		icon: u && m ? /* @__PURE__ */ j(m, {
-			className: "size-icon",
-			"aria-hidden": "true"
-		}) : null,
-		tooltip: e.tooltip,
-		className: r("@container/metric-card", g && "relative transition-shadow hover:shadow-md [&_.card--tooltip-trigger]:relative [&_.card--tooltip-trigger]:z-10", p),
-		"aria-label": f,
-		children: [g && (e.href ? /* @__PURE__ */ j("a", {
-			href: e.href,
-			onClick: e.onClick,
-			"aria-label": f,
-			className: `metric--action absolute inset-0 z-0 rounded-surface focus-visible:outline-none ${l.inset}`
-		}) : /* @__PURE__ */ j("button", {
-			type: "button",
-			onClick: e.onClick,
-			"aria-label": f,
-			className: `metric--action ${v.nativeButtonReset} absolute inset-0 z-0 cursor-pointer rounded-surface focus-visible:outline-none ${l.inset}`
-		})), /* @__PURE__ */ M(d, {
-			gap: "normal",
-			children: [
-				/* @__PURE__ */ M(d, {
-					direction: "horizontal",
-					align: "baseline",
-					justify: "between",
-					gap: "sm",
-					children: [/* @__PURE__ */ j(s, {
-						tag: i === "sm" ? "h5" : i === "lg" ? "h3" : "h4",
-						size: J[i],
-						className: r("max-w-full break-words tabular-nums text-inherit", Se[i]),
-						children: t
-					}), !!c && !!e.change && /* @__PURE__ */ j(H, {
-						change: e.change,
-						trend: e.trend,
-						size: i,
-						variant: "badge",
-						className: "@max-[16rem]/metric-card:px-space-xs"
-					})]
-				}),
-				!!e.subtitle && /* @__PURE__ */ j(a, {
-					type: "secondary",
-					children: e.subtitle
-				}),
-				!!o && !!e.sparkline?.length && /* @__PURE__ */ j(G, {
-					data: e.sparkline,
-					trend: n,
-					className: i === "lg" ? "h-control-lg" : "h-control"
-				}),
-				!!e.footer && /* @__PURE__ */ j(a, {
-					size: "xs",
-					type: "secondary",
-					children: e.footer
-				})
-			]
-		})]
-	});
-}
-function De({ data: e, formattedValue: t, size: n, showChange: i, showIcon: o, ariaLabel: s, className: c }) {
-	let l = e.icon;
-	return /* @__PURE__ */ M("div", {
-		className: r("flex items-center gap-space-lg", c),
-		"aria-label": s,
-		children: [
-			!!o && !!l && /* @__PURE__ */ j(E, {
-				icon: l,
-				tone: "secondary",
-				shape: "square",
-				size: "md"
-			}),
-			/* @__PURE__ */ M("div", {
-				className: "min-w-0 flex-1",
-				children: [/* @__PURE__ */ j(a, {
-					size: "xs",
-					type: "secondary",
-					className: "truncate",
-					children: e.label
-				}), /* @__PURE__ */ j(C, {
-					type: "inherit",
-					size: n === "sm" ? "sm" : "base",
-					weight: "bold",
-					className: "block truncate tabular-nums",
-					children: t
-				})]
-			}),
-			!!i && !!e.change && /* @__PURE__ */ j(H, {
-				change: e.change,
-				trend: e.trend,
-				size: n,
-				variant: "badge",
-				className: "shrink-0"
-			})
-		]
-	});
-}
-function Oe({ data: e, formattedValue: t, size: n, showChange: i, ariaLabel: o, className: s }) {
-	return /* @__PURE__ */ M("span", {
-		className: r("inline-flex items-baseline gap-space-md", s),
-		"aria-label": o,
-		children: [
-			/* @__PURE__ */ M(a, {
-				tag: "span",
-				size: n === "lg" ? "sm" : "xs",
-				type: "secondary",
-				children: [e.label, ":"]
-			}),
-			/* @__PURE__ */ j(C, {
-				type: "inherit",
-				size: n === "lg" ? "sm" : "xs",
-				weight: "semibold",
-				className: "tabular-nums",
-				children: t
-			}),
-			!!i && !!e.change && /* @__PURE__ */ j(H, {
-				change: e.change,
-				trend: e.trend,
-				size: "sm",
-				variant: "inline"
-			})
-		]
-	});
-}
-function ke({ data: e, formattedValue: t, trend: n, size: i, showSparkline: o, showChange: c, showIcon: l, tone: u, ariaLabel: f, className: p }) {
-	let m = e.icon, g = ye[u];
-	return /* @__PURE__ */ j(h, {
-		surface: "card",
-		className: r(g.edge, g.wash, p),
-		"aria-label": f,
-		children: /* @__PURE__ */ M(d, {
-			gap: "lg",
-			children: [
-				/* @__PURE__ */ M(d, {
-					direction: "horizontal",
-					align: "center",
-					justify: "between",
-					gap: "md",
-					children: [/* @__PURE__ */ M("div", {
-						className: "flex items-center gap-space-md text-muted-foreground",
-						children: [!!l && !!m && /* @__PURE__ */ j(m, {
-							className: "size-icon shrink-0",
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							weight: "medium",
-							children: e.label
-						})]
-					}), !!c && !!e.change && /* @__PURE__ */ j(H, {
-						change: e.change,
-						trend: e.trend,
-						size: i,
-						variant: "badge"
-					})]
-				}),
-				/* @__PURE__ */ j(s, {
-					tag: i === "lg" ? "h3" : "h4",
-					size: J[i],
-					className: "tabular-nums text-inherit",
-					children: t
-				}),
-				!!e.subtitle && /* @__PURE__ */ j(a, {
-					size: "xs",
-					type: "secondary",
-					children: e.subtitle
-				}),
-				!!o && !!e.sparkline?.length && /* @__PURE__ */ j(G, {
-					data: e.sparkline,
-					trend: n,
-					className: Ce[i]
-				}),
-				!!e.footer && /* @__PURE__ */ j(a, {
-					size: "xs",
-					type: "discrete",
-					children: e.footer
-				})
-			]
-		})
-	});
-}
-function Ae({ data: e, formattedValue: t, trend: n, size: i, showSparkline: c, showChange: l, showIcon: u, ariaLabel: f, className: p }) {
-	let m = e.icon;
-	return /* @__PURE__ */ M(h, {
-		surface: "card",
-		padding: "none",
-		className: r("dark", p),
-		"aria-label": f,
-		children: [/* @__PURE__ */ M(d, {
-			gap: "md",
-			className: "p-surface",
-			children: [
-				/* @__PURE__ */ M(d, {
-					direction: "horizontal",
-					align: "center",
-					justify: "between",
-					gap: "lg",
-					children: [/* @__PURE__ */ j(o, {
-						className: "text-inherit",
-						children: e.label
-					}), !!u && !!m && /* @__PURE__ */ j(E, {
-						tone: "secondary",
-						shape: "square",
-						size: "sm",
-						children: /* @__PURE__ */ j(m, {
-							className: "size-icon-md",
-							"aria-hidden": "true"
-						})
-					})]
-				}),
-				/* @__PURE__ */ M("div", {
-					className: "flex items-baseline gap-space-md",
-					children: [/* @__PURE__ */ j(s, {
-						tag: "h3",
-						size: J[i],
-						className: "tabular-nums text-inherit",
-						children: t
-					}), !!l && !!e.change && /* @__PURE__ */ j(H, {
-						change: e.change,
-						trend: e.trend,
-						size: i,
-						variant: "compact"
-					})]
-				}),
-				!!e.subtitle && /* @__PURE__ */ j(a, {
-					size: "xs",
-					type: "secondary",
-					children: e.subtitle
-				})
-			]
-		}), !!c && !!e.sparkline?.length && /* @__PURE__ */ j(G, {
-			data: e.sparkline,
-			trend: n,
-			className: "h-control-lg w-full"
-		})]
-	});
-}
-function je({ data: e, formattedValue: t, size: n, showChange: i, tone: o, ariaLabel: c, className: l, progress: u = 0 }) {
-	let f = ye[o], p = Math.round(Math.min(Math.max(u, 0), 100) / 100 * we);
-	return /* @__PURE__ */ j(h, {
-		surface: "card",
-		className: l,
-		"aria-label": c,
-		children: /* @__PURE__ */ M(d, {
-			gap: "lg",
-			children: [
-				/* @__PURE__ */ M(d, {
-					gap: "md",
-					children: [/* @__PURE__ */ M("div", {
-						className: "flex items-center gap-space-md",
-						children: [/* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							weight: "medium",
-							className: "truncate",
-							children: e.label
-						}), /* @__PURE__ */ j("span", {
-							className: r(m.inline, f.solid),
-							"aria-hidden": "true"
-						})]
-					}), /* @__PURE__ */ M("div", {
-						className: "flex flex-wrap items-baseline gap-x-space-md",
-						children: [/* @__PURE__ */ j(s, {
-							tag: "h3",
-							size: J[n],
-							className: "whitespace-nowrap tabular-nums text-inherit",
-							children: t
-						}), !!e.subtitle && /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							children: e.subtitle
-						})]
-					})]
-				}),
-				/* @__PURE__ */ j("div", {
-					className: "flex items-center gap-space-2xs",
-					role: "progressbar",
-					"aria-label": `${e.label} progress`,
-					"aria-valuenow": u,
-					"aria-valuemin": 0,
-					"aria-valuemax": 100,
-					"aria-valuetext": `${u}%`,
-					children: Array.from({ length: we }, (e, t) => /* @__PURE__ */ j("div", { className: r("h-6 w-1.5 rounded-radius-sm transition-colors", t < p ? f.solid : "bg-muted") }, `seg-${t}`))
-				}),
-				(!!(i && e.change) || !!e.footer) && /* @__PURE__ */ M(d, {
-					gap: "md",
-					children: [!!i && !!e.change && /* @__PURE__ */ j("div", { children: /* @__PURE__ */ j(H, {
-						change: e.change,
-						trend: e.trend,
-						size: n,
-						variant: "default"
-					}) }), !!e.footer && /* @__PURE__ */ M("div", {
-						className: "inline-flex items-center gap-space-xs text-muted-foreground",
-						children: [/* @__PURE__ */ j(oe, {
-							className: "size-icon-sm",
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							children: e.footer
-						})]
-					})]
-				})
-			]
-		})
-	});
-}
-//#endregion
-//#region src/components/blocks/analytics/metric-bar/metric-bar.tsx
-function Me({ metrics: e, period: t, onPeriodChange: n, variant: o = "default", size: s = "sm", showSparklines: c = !0, showChanges: l = !0, footerText: u, className: d }) {
-	let f = /* @__PURE__ */ j("div", {
-		className: "grid min-w-0 flex-1 grid-cols-1 divide-y divide-border @xl/metric-bar:flex @xl/metric-bar:items-stretch @xl/metric-bar:divide-x @xl/metric-bar:divide-y-0",
-		children: e.map((e) => /* @__PURE__ */ j("div", {
-			className: "flex min-w-0 flex-col px-surface py-row-y @xl/metric-bar:min-w-36 @xl/metric-bar:flex-1",
-			children: /* @__PURE__ */ j(Y, {
-				data: e,
-				variant: "default",
-				size: s,
-				showSparkline: c,
-				showChange: l,
-				className: "flex-1"
-			})
-		}, e.id))
-	}), p = !!t && /* @__PURE__ */ j("div", {
-		className: "flex shrink-0 items-center border-b border-border px-row-x py-row-y @xl/metric-bar:border-b-0 @xl/metric-bar:py-0",
-		children: /* @__PURE__ */ M(i, {
-			tone: "secondary",
-			buttonStyle: "ghost",
-			className: "gap-space-sm",
-			onClick: n ? () => n(t.value) : void 0,
-			children: [/* @__PURE__ */ j(se, {
-				className: "size-icon-md",
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ j(a, {
-				type: "inherit",
-				size: "inherit",
-				weight: "medium",
-				children: t.label
-			})]
-		})
-	});
-	return o === "gradient" ? /* @__PURE__ */ M("div", {
-		className: r("metric-bar--component box-border @container/metric-bar", "w-full", "rounded-surface bg-gradient-to-r from-chart-3/8 via-chart-2/5 to-chart-1/8 p-px", d),
-		children: [/* @__PURE__ */ M("div", {
-			className: "flex min-w-0 flex-col overflow-hidden rounded-surface bg-card text-card-foreground @xl/metric-bar:flex-row",
-			children: [p && /* @__PURE__ */ M(ie, { children: [p, /* @__PURE__ */ j("div", {
-				className: "hidden w-px bg-border @xl/metric-bar:block",
-				"aria-hidden": "true"
-			})] }), f]
-		}), !!u && /* @__PURE__ */ j("div", {
-			className: "rounded-b-surface border-t border-border/60 bg-card text-card-foreground px-surface py-row-y",
-			children: /* @__PURE__ */ j(a, {
-				size: "xs",
-				type: "discrete",
-				children: u
-			})
-		})]
-	}) : /* @__PURE__ */ M("div", {
-		className: r("metric-bar--component box-border @container/metric-bar flex w-full flex-col overflow-hidden rounded-surface border border-border bg-card text-card-foreground shadow-sm", d),
-		children: [/* @__PURE__ */ M("div", {
-			className: "flex min-w-0 flex-col overflow-hidden @xl/metric-bar:flex-row",
-			children: [p && /* @__PURE__ */ M(ie, { children: [p, /* @__PURE__ */ j("div", {
-				className: "hidden w-px bg-border @xl/metric-bar:block",
-				"aria-hidden": "true"
-			})] }), f]
-		}), !!u && /* @__PURE__ */ j("div", {
-			className: "border-t border-border/60 px-surface py-row-y",
-			children: /* @__PURE__ */ j(a, {
-				size: "xs",
-				type: "discrete",
-				children: u
-			})
-		})]
-	});
-}
-Me.displayName = "MetricBar";
-//#endregion
-//#region src/components/blocks/analytics/metric-grid/metric-grid.tsx
-var Ne = {
-	1: "grid-cols-1",
-	2: "grid-cols-1 @md/metric-grid:grid-cols-2",
-	3: "grid-cols-1 @2xl/metric-grid:grid-cols-3",
-	4: "grid-cols-1 @md/metric-grid:grid-cols-2 @5xl/metric-grid:grid-cols-4",
-	6: "grid-cols-1 @md/metric-grid:grid-cols-2 @3xl/metric-grid:grid-cols-3 @7xl/metric-grid:grid-cols-6"
-};
-function Pe(e) {
-	return Ne[e <= 1 ? 1 : e === 2 ? 2 : e === 3 ? 3 : e <= 4 || e > 6 ? 4 : 6];
-}
-function Fe({ metrics: e, variant: t = "card", size: n = "md", tone: i, colorScheme: a = "default", columns: o = "auto", gap: s = "xl", showSparklines: c = !0, showChanges: l = !0, showIcons: d = !0, loading: f = !1, className: p }) {
-	let m = o === "auto" ? Pe(e.length) : Ne[o];
-	return /* @__PURE__ */ j("div", {
-		className: r("metric-grid--component @container/metric-grid", p),
-		children: /* @__PURE__ */ j(u, {
-			columns: 1,
-			gap: s,
-			className: r("metric-grid--grid", m),
-			children: e.map((e) => /* @__PURE__ */ j(Y, {
-				data: e,
-				variant: t,
-				size: n,
-				tone: i,
-				colorScheme: a,
-				showSparkline: c,
-				showChange: l,
-				showIcon: d,
-				loading: f
-			}, e.id))
-		})
-	});
-}
-Fe.displayName = "MetricGrid";
-//#endregion
+import { useStrings as e } from "../lib/strings.js";
+import { t } from "../utils-BVbAG2J6.js";
+import { c as n, o as r } from "../typography-C0dELqYV.js";
+import { c as i } from "../text.styles-B64My8RZ.js";
+import { t as a } from "../structure-DElaQwwN.js";
+import { r as o } from "../tone-recipes-BPsRAvhu.js";
+import { a as s, o as c } from "../value-typography-D15uwfj-.js";
+import { _ as l, g as u } from "../primitives-BlC1lXBr.js";
+import { t as d } from "../badge-oGiXblW7.js";
+import { a as f, i as p, n as m, o as h, r as g, s as _, t as v } from "../use-metric-format-options-Dk4rC1NO.js";
+import { n as y, t as b } from "../usage-card-DDPki5P1.js";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { ArrowDown as C, ArrowRight as w, ArrowUp as T, Equal as E } from "lucide-react";
 //#region src/components/blocks/analytics/metric-comparison/metric-comparison.tsx
-var X = {
+var D = {
 	title: "Comparison",
 	currentLabel: "This period",
 	previousLabel: "Previous period",
@@ -886,447 +21,140 @@ var X = {
 	noBaseline: "Relative change unavailable",
 	pointsUnit: "pp"
 };
-function Ie(e) {
+function O(e) {
 	if (e == null) return null;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : null;
 }
-function Le({ current: e, previous: t, title: i, currentPeriod: s, previousPeriod: c, className: l, strings: u }) {
-	let f = n(X, u), p = ve(), m = Ie(e.value), h = Ie(t.value), g = m !== null && h !== null ? m - h : null, _ = g !== null && Number.isFinite(g), v = g !== null && g > 0, x = g === 0, S = g !== null && h ? g / Math.abs(h) : null, w = S !== null && Number.isFinite(S) ? y(x ? 0 : S, p.locale, {
+function k({ current: i, previous: o, title: u, currentPeriod: p, previousPeriod: m, className: h, strings: g }) {
+	let _ = e(D, g), y = v(), b = O(i.value), k = O(o.value), A = b !== null && k !== null ? b - k : null, j = A !== null && Number.isFinite(A), M = A !== null && A > 0, N = A === 0, P = A !== null && k ? A / Math.abs(k) : null, F = P !== null && Number.isFinite(P) ? c(N ? 0 : P, y.locale, {
 		maximumFractionDigits: 0,
-		signDisplay: x ? "auto" : "always"
-	}) : null, T = x ? ce : v ? P : N, E = x ? "neutral" : e.trend ?? (v ? "positive" : "negative"), O = E === "positive" ? "success" : E === "negative" ? "destructive" : "secondary";
-	return /* @__PURE__ */ M(d, {
+		signDisplay: N ? "auto" : "always"
+	}) : null, I = N ? E : M ? T : C, L = N ? "neutral" : i.trend ?? (M ? "positive" : "negative"), R = L === "positive" ? "success" : L === "negative" ? "destructive" : "secondary";
+	return /* @__PURE__ */ S(a, {
 		"data-component": "metric-comparison",
 		"data-slot": "metric-comparison",
 		gap: "md",
-		className: r("metric-comparison--component @container/metric-comparison", l),
-		"aria-label": i ?? f.title,
-		children: [/* @__PURE__ */ M("div", {
+		className: t("metric-comparison--component @container/metric-comparison", h),
+		role: "group",
+		"aria-label": u ?? _.title,
+		children: [/* @__PURE__ */ S("div", {
 			className: "grid items-center gap-space-md grid-cols-1 @md/metric-comparison:grid-cols-[1fr_auto_1fr]",
 			children: [
-				/* @__PURE__ */ M(d, {
+				/* @__PURE__ */ S(a, {
 					gap: "dense",
 					className: "metric-comparison--current min-w-0",
-					children: [/* @__PURE__ */ M(d, {
+					children: [/* @__PURE__ */ S(a, {
 						direction: "horizontal",
 						wrap: !0,
 						align: "center",
 						gap: "sm",
-						children: [/* @__PURE__ */ j(o, {
+						children: [/* @__PURE__ */ x(r, {
 							className: "text-inherit",
-							children: f.currentLabel
-						}), !!s && /* @__PURE__ */ j(D, {
+							children: _.currentLabel
+						}), !!p && /* @__PURE__ */ x(d, {
 							tone: "secondary",
 							inline: !0,
 							className: "metric-comparison--period",
-							children: s
+							children: p
 						})]
-					}), /* @__PURE__ */ j(C, {
+					}), /* @__PURE__ */ x(l, {
 						type: "inherit",
 						size: "base",
 						weight: "semibold",
 						className: "tabular-nums",
-						children: z(e, p)
+						children: f(i, y)
 					})]
 				}),
-				/* @__PURE__ */ M("div", {
+				/* @__PURE__ */ S("div", {
 					className: "flex items-center text-muted-foreground @md/metric-comparison:justify-center",
-					children: [/* @__PURE__ */ j(ae, {
+					children: [/* @__PURE__ */ x(w, {
 						className: "hidden size-icon @md/metric-comparison:block",
 						"aria-hidden": "true"
-					}), /* @__PURE__ */ j(N, {
+					}), /* @__PURE__ */ x(C, {
 						className: "size-icon @md/metric-comparison:hidden",
 						"aria-hidden": "true"
 					})]
 				}),
-				/* @__PURE__ */ M(d, {
+				/* @__PURE__ */ S(a, {
 					gap: "dense",
 					className: "metric-comparison--previous min-w-0",
-					children: [/* @__PURE__ */ M(d, {
+					children: [/* @__PURE__ */ S(a, {
 						direction: "horizontal",
 						wrap: !0,
 						align: "center",
 						gap: "sm",
-						children: [/* @__PURE__ */ j(o, {
+						children: [/* @__PURE__ */ x(r, {
 							className: "text-inherit",
-							children: f.previousLabel
-						}), !!c && /* @__PURE__ */ j(D, {
+							children: _.previousLabel
+						}), !!m && /* @__PURE__ */ x(d, {
 							tone: "secondary",
 							inline: !0,
 							className: "metric-comparison--period",
-							children: c
+							children: m
 						})]
-					}), /* @__PURE__ */ j(C, {
+					}), /* @__PURE__ */ x(l, {
 						size: "base",
 						weight: "semibold",
 						type: "secondary",
 						className: "tabular-nums",
-						children: z(t, p)
+						children: f(o, y)
 					})]
 				})
 			]
-		}), !!_ && /* @__PURE__ */ M(d, {
+		}), !!j && /* @__PURE__ */ S(a, {
 			direction: "horizontal",
 			wrap: !0,
 			align: "center",
 			gap: "md",
 			className: "metric-comparison--delta",
-			children: [/* @__PURE__ */ M(D, {
-				tone: O,
+			children: [/* @__PURE__ */ S(d, {
+				tone: R,
 				size: "sm",
 				inline: !0,
-				children: [/* @__PURE__ */ j(T, {
+				children: [/* @__PURE__ */ x(I, {
 					className: "size-icon-sm",
 					strokeWidth: 2.5,
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ M(C, {
+				}), /* @__PURE__ */ S(l, {
 					size: "inherit",
 					weight: "semibold",
 					className: "tabular-nums text-inherit",
-					children: [v ? "+" : x ? "" : "−", ((t) => {
-						let n = Math.abs(t);
-						return e.valueType === "percentage" ? `${b(n * 100, {
-							locale: p.locale,
+					children: [M ? "+" : N ? "" : "−", ((e) => {
+						let t = Math.abs(e);
+						return i.valueType === "percentage" ? `${s(t * 100, {
+							locale: y.locale,
 							maximumFractionDigits: 1
-						})} ${f.pointsUnit ?? X.pointsUnit}` : z({
-							...e,
-							value: n
-						}, p);
-					})(g)]
+						})} ${_.pointsUnit ?? D.pointsUnit}` : f({
+							...i,
+							value: t
+						}, y);
+					})(A)]
 				})]
-			}), /* @__PURE__ */ j(a, {
+			}), /* @__PURE__ */ x(n, {
 				size: "xs",
 				type: "secondary",
 				className: "tabular-nums",
-				children: w ? `${w} ${f.suffix}` : f.noBaseline ?? X.noBaseline
+				children: F ? `${F} ${_.suffix}` : _.noBaseline ?? D.noBaseline
 			})]
 		})]
 	});
 }
-Le.displayName = "MetricComparison";
-//#endregion
-//#region src/components/blocks/analytics/metric-micro-grid/metric-micro-grid.tsx
-var Re = [
-	"bars",
-	"line",
-	"dots",
-	"progress",
-	"area",
-	"pie"
-], ze = {
-	bars: "var(--chart-1)",
-	line: "var(--chart-1)",
-	dots: "var(--chart-1)",
-	progress: "var(--chart-1)",
-	area: "var(--chart-1)",
-	pie: "var(--chart-1)"
-}, Be = [
-	"var(--chart-1)",
-	"var(--chart-2)",
-	"var(--chart-3)"
-], Z = "h-control-sm";
-function Ve({ data: e, color: t }) {
-	let n = Math.max(...e, 1);
-	return /* @__PURE__ */ j("div", {
-		className: r("flex items-end gap-space-2xs", Z),
-		children: e.slice(0, 6).map((e, r) => /* @__PURE__ */ j("div", {
-			className: "flex-1 rounded-t-radius-sm",
-			style: {
-				height: `${e / n * 100}%`,
-				backgroundColor: t
-			}
-		}, `bar-${r}`))
-	});
-}
-function He({ data: e, color: t }) {
-	let n = Math.max(...e, 1), i = Math.min(...e), a = n - i || 1, o = e.slice(0, 6);
-	return /* @__PURE__ */ j("svg", {
-		viewBox: "0 0 60 16",
-		className: r("w-full", Z),
-		preserveAspectRatio: "none",
-		children: /* @__PURE__ */ j("polyline", {
-			fill: "none",
-			stroke: t,
-			strokeWidth: "1.5",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			points: o.map((e, t) => `${t / Math.max(o.length - 1, 1) * 60},${16 - (e - i) / a * 14}`).join(" ")
-		})
-	});
-}
-function Ue({ data: e, color: t }) {
-	let n = e.slice(0, 5), i = Math.max(...n), a = Math.min(...n), o = i - a || 1;
-	return /* @__PURE__ */ j("div", {
-		className: r("flex justify-around", Z),
-		"data-intrinsic-geometry": !0,
-		children: n.map((e, n) => /* @__PURE__ */ j("div", {
-			className: "relative h-full w-1.5",
-			children: /* @__PURE__ */ j("div", {
-				className: "absolute inset-x-0 h-1.5 rounded-full",
-				style: {
-					bottom: `calc(${(e - a) / o} * (100% - 0.375rem))`,
-					backgroundColor: t
-				}
-			})
-		}, `dot-${n}`))
-	});
-}
-function We({ data: e, label: t }) {
-	return /* @__PURE__ */ j(g, {
-		value: e[0] ?? 0,
-		max: e[1] ?? 100,
-		size: "sm",
-		"aria-label": t,
-		indicatorProps: { className: "bg-chart-1" }
-	});
-}
-function Ge({ data: e, color: t }) {
-	let n = k(), i = W(), a = `micro-area-${n.replaceAll(":", "")}`, o = Math.min(...e), s = e.map((e, t) => ({
-		i: t,
-		v: e - o
-	}));
-	return /* @__PURE__ */ j("div", {
-		className: r("w-full", Z),
-		children: /* @__PURE__ */ j(L, {
-			width: "100%",
-			height: "100%",
-			initialDimension: {
-				width: 1,
-				height: 1
-			},
-			children: /* @__PURE__ */ M(I, {
-				data: s,
-				margin: {
-					top: 0,
-					right: 0,
-					bottom: 0,
-					left: 0
-				},
-				children: [/* @__PURE__ */ j("defs", { children: /* @__PURE__ */ M("linearGradient", {
-					id: a,
-					x1: "0",
-					y1: "0",
-					x2: "0",
-					y2: "1",
-					children: [/* @__PURE__ */ j("stop", {
-						offset: "0%",
-						stopColor: t,
-						stopOpacity: .3
-					}), /* @__PURE__ */ j("stop", {
-						offset: "100%",
-						stopColor: t,
-						stopOpacity: 0
-					})]
-				}) }), /* @__PURE__ */ j(F, {
-					type: "monotone",
-					dataKey: "v",
-					stroke: t,
-					strokeWidth: 1.25,
-					fill: `url(#${a})`,
-					isAnimationActive: !i
-				})]
-			})
-		})
-	});
-}
-function Ke({ data: e }) {
-	let t = e.reduce((e, t) => e + t, 0) || 1, n = 0;
-	return /* @__PURE__ */ j("svg", {
-		viewBox: "0 0 24 24",
-		className: "size-control-sm",
-		children: e.slice(0, 3).map((e, r) => {
-			let i = e / t * 360, a = n;
-			n += i;
-			let o = (a - 90) * Math.PI / 180, s = (a + i - 90) * Math.PI / 180, c = +(i > 180), l = 12 + 10 * Math.cos(o), u = 12 + 10 * Math.sin(o), d = 12 + 10 * Math.cos(s), f = 12 + 10 * Math.sin(s);
-			return /* @__PURE__ */ j("path", {
-				d: `M12,12 L${l},${u} A10,10 0 ${c},1 ${d},${f} Z`,
-				fill: Be[r % Be.length]
-			}, `slice-${r}`);
-		})
-	});
-}
-function qe({ kind: e, data: t, label: n }) {
-	let r = ze[e];
-	return e === "bars" ? /* @__PURE__ */ j(Ve, {
-		data: t,
-		color: r
-	}) : e === "line" ? /* @__PURE__ */ j(He, {
-		data: t,
-		color: r
-	}) : e === "dots" ? /* @__PURE__ */ j(Ue, {
-		data: t,
-		color: r
-	}) : e === "progress" ? /* @__PURE__ */ j(We, {
-		data: t,
-		label: n
-	}) : e === "area" ? /* @__PURE__ */ j(Ge, {
-		data: t,
-		color: r
-	}) : /* @__PURE__ */ j(Ke, { data: t });
-}
-var Je = {
-	1: "grid-cols-1",
-	2: "grid-cols-2",
-	3: "grid-cols-1 @md/metric-micro-grid:grid-cols-3",
-	4: "grid-cols-2 @3xl/metric-micro-grid:grid-cols-4",
-	5: "grid-cols-2 @xl/metric-micro-grid:grid-cols-3 @5xl/metric-micro-grid:grid-cols-5",
-	6: "grid-cols-2 @xl/metric-micro-grid:grid-cols-3 @5xl/metric-micro-grid:grid-cols-6"
-};
-function Ye({ title: e = "Overview", cells: t, className: n }) {
-	let i = t.slice(0, 6);
-	return /* @__PURE__ */ j("div", {
-		"data-component": "metric-micro-grid",
-		"data-slot": "metric-micro-grid",
-		className: r("metric-micro-grid--component @container/metric-micro-grid min-w-0 overflow-hidden", n),
-		"aria-label": e,
-		children: /* @__PURE__ */ j("div", {
-			className: r("-me-px -mb-px grid", Je[Math.max(i.length, 1)]),
-			children: i.map((e, t) => /* @__PURE__ */ j("div", {
-				className: "min-w-0 border-e border-b border-border/60 p-surface-xs",
-				children: /* @__PURE__ */ M(d, {
-					gap: "sm",
-					children: [
-						/* @__PURE__ */ j(o, {
-							className: "truncate text-inherit",
-							children: e.label
-						}),
-						/* @__PURE__ */ j(C, {
-							type: "inherit",
-							weight: "bold",
-							className: "truncate tabular-nums",
-							children: e.value
-						}),
-						/* @__PURE__ */ j("div", {
-							className: "mt-auto",
-							children: /* @__PURE__ */ j(qe, {
-								kind: e.chart ?? Re[t],
-								data: e.data,
-								label: e.label
-							})
-						})
-					]
-				})
-			}, e.id ?? e.label))
-		})
-	});
-}
-Ye.displayName = "MetricMicroGrid";
-//#endregion
-//#region src/components/blocks/analytics/metric-gradient/metric-gradient.tsx
-var Xe = {
-	green: "bg-gradient-to-br from-chart-1 via-chart-2 to-chart-1",
-	purple: "bg-gradient-to-br from-chart-3 via-chart-4 to-chart-3",
-	warm: "bg-gradient-to-br from-chart-5 via-chart-4 to-chart-5",
-	ocean: "bg-gradient-to-br from-chart-2 via-chart-1 to-chart-2"
-}, Q = "var(--inverse-foreground)", Ze = "var(--inverse-muted)";
-function Qe({ title: e, value: t, change: n, data: i, theme: c = "green", subtitle: l, className: u }) {
-	let f = k(), p = W(), m = `metric-grad-${f.replaceAll(":", "")}`;
-	return /* @__PURE__ */ j("div", {
-		className: r("metric-gradient--component", "relative overflow-hidden rounded-surface p-surface text-inverse-foreground shadow-sm ring-1 ring-inverse-border", Xe[c], u),
-		children: /* @__PURE__ */ M(d, {
-			gap: "md",
-			children: [/* @__PURE__ */ M(d, {
-				direction: "horizontal",
-				align: "start",
-				justify: "between",
-				wrap: !0,
-				className: "relative rounded-surface bg-inverse-background p-surface",
-				children: [/* @__PURE__ */ M(d, {
-					gap: "xs",
-					className: "min-w-0",
-					children: [
-						/* @__PURE__ */ j(o, {
-							tone: "inverse",
-							children: e
-						}),
-						!!t && /* @__PURE__ */ j(s, {
-							tag: "h3",
-							className: "tabular-nums text-inverse-foreground",
-							children: t
-						}),
-						!!l && /* @__PURE__ */ j(a, {
-							size: "xs",
-							className: "text-inverse-muted",
-							children: l
-						})
-					]
-				}), !!n && /* @__PURE__ */ j(H, {
-					change: n,
-					trend: n.direction === "up" ? "positive" : n.direction === "down" ? "negative" : "neutral",
-					size: "sm",
-					variant: "badge",
-					className: "shrink-0 !bg-inverse-surface-strong !text-inverse-foreground"
-				})]
-			}), /* @__PURE__ */ j("div", {
-				className: "relative -mx-1 h-24",
-				children: /* @__PURE__ */ j(L, {
-					width: "100%",
-					height: "100%",
-					initialDimension: {
-						width: 1,
-						height: 1
-					},
-					children: /* @__PURE__ */ M(I, {
-						data: i,
-						margin: {
-							top: 4,
-							right: 0,
-							bottom: 0,
-							left: 0
-						},
-						children: [/* @__PURE__ */ j("defs", { children: /* @__PURE__ */ M("linearGradient", {
-							id: m,
-							x1: "0",
-							y1: "0",
-							x2: "0",
-							y2: "1",
-							children: [/* @__PURE__ */ j("stop", {
-								offset: "0%",
-								stopColor: Q,
-								stopOpacity: .3
-							}), /* @__PURE__ */ j("stop", {
-								offset: "100%",
-								stopColor: Q,
-								stopOpacity: 0
-							})]
-						}) }), /* @__PURE__ */ j(F, {
-							type: "monotone",
-							dataKey: "value",
-							stroke: Ze,
-							strokeWidth: 2,
-							fill: `url(#${m})`,
-							dot: !1,
-							activeDot: {
-								r: 4,
-								strokeWidth: 2,
-								fill: Q,
-								stroke: Ze
-							},
-							isAnimationActive: !p,
-							animationDuration: 800
-						})]
-					})
-				})
-			})]
-		})
-	});
-}
-Qe.displayName = "MetricGradient";
+k.displayName = "MetricComparison";
 //#endregion
 //#region src/components/blocks/analytics/activity-heatmap/activity-heatmap.tsx
-var $e = {
-	0: p.activity[0],
-	1: p.activity[1],
-	2: p.activity[2],
-	3: p.activity[3],
-	4: p.activity[4]
-}, et = r("text--component fill-current", c({
+var A = {
+	0: o.activity[0],
+	1: o.activity[1],
+	2: o.activity[2],
+	3: o.activity[3],
+	4: o.activity[4]
+}, j = t("text--component fill-current", i({
 	size: "xs",
 	type: "secondary",
 	lineHeight: "none"
 }));
-function tt(e, t) {
+function M(e, t) {
 	if (e.length === 0) return {
 		weeks: [],
 		monthLabels: []
@@ -1362,59 +190,60 @@ function tt(e, t) {
 		monthLabels: u
 	};
 }
-function nt({ title: e, description: t, data: i, className: o, strings: s }) {
-	let c = n(R, s), { weeks: l, monthLabels: u } = tt(i, c.heatmapMonthNames);
-	return /* @__PURE__ */ M(d, {
+function N({ title: r, description: i, data: o, className: s, strings: c }) {
+	let l = e(_, c), { weeks: u, monthLabels: d } = M(o, l.heatmapMonthNames);
+	return /* @__PURE__ */ S(a, {
 		gap: "md",
 		"data-component": "activity-heatmap",
 		"data-slot": "activity-heatmap",
-		className: r("activity-heatmap--component", o),
-		"aria-label": e,
-		children: [!!t && /* @__PURE__ */ j(a, {
+		className: t("activity-heatmap--component", s),
+		role: "group",
+		"aria-label": r,
+		children: [!!i && /* @__PURE__ */ x(n, {
 			type: "secondary",
-			children: t
-		}), /* @__PURE__ */ j("div", {
+			children: i
+		}), /* @__PURE__ */ x("div", {
 			className: "overflow-x-auto",
 			"data-intrinsic-geometry": !0,
-			children: /* @__PURE__ */ M("div", {
+			children: /* @__PURE__ */ S("div", {
 				className: "inline-flex min-w-max flex-col gap-space-sm",
-				children: [/* @__PURE__ */ M("svg", {
-					width: 28 + l.length * 15,
+				children: [/* @__PURE__ */ S("svg", {
+					width: 28 + u.length * 15,
 					height: 124,
 					className: "block overflow-visible",
 					role: "img",
-					"aria-label": e,
-					children: [/* @__PURE__ */ M("g", { children: [u.filter((e, t, n) => t === 0 || e.weekIndex - n[t - 1].weekIndex >= 3).map((e) => /* @__PURE__ */ j("text", {
-						className: et,
+					"aria-label": r,
+					children: [/* @__PURE__ */ S("g", { children: [d.filter((e, t, n) => t === 0 || e.weekIndex - n[t - 1].weekIndex >= 3).map((e) => /* @__PURE__ */ x("text", {
+						className: j,
 						"data-typography": "text",
 						x: 28 + e.weekIndex * 15,
 						y: 0,
 						dominantBaseline: "text-before-edge",
 						children: e.label
-					}, `${e.label}-${e.weekIndex}`)), c.heatmapDayLabels.map((e, t) => e ? /* @__PURE__ */ j("text", {
-						className: et,
+					}, `${e.label}-${e.weekIndex}`)), l.heatmapDayLabels.map((e, t) => e ? /* @__PURE__ */ x("text", {
+						className: j,
 						"data-typography": "text",
 						x: 24,
 						y: 28 + t * 15,
 						dominantBaseline: "central",
 						textAnchor: "end",
 						children: e
-					}, `day-${t}`) : null)] }), l.map((e, t) => /* @__PURE__ */ j("g", { children: e.map((e, n) => /* @__PURE__ */ j("rect", {
+					}, `day-${t}`) : null)] }), u.map((e, t) => /* @__PURE__ */ x("g", { children: e.map((e, n) => /* @__PURE__ */ x("rect", {
 						x: 28 + t * 15,
 						y: 22 + n * 15,
 						width: 12,
 						height: 12,
 						rx: 2.5,
-						className: e ? $e[e.level] : "fill-transparent",
-						children: e && /* @__PURE__ */ j("title", { children: `${e.date}: Level ${e.level}` })
+						className: e ? A[e.level] : "fill-transparent",
+						children: e && /* @__PURE__ */ x("title", { children: l.heatmapFormatCell?.(e.date, e.level) ?? `${e.date}: Level ${e.level}` })
 					}, `d-${t}-${n}`)) }, `w-${t}`))]
-				}), /* @__PURE__ */ M("div", {
+				}), /* @__PURE__ */ S("div", {
 					className: "activity-heatmap--legend flex items-center justify-end gap-space-sm",
 					children: [
-						/* @__PURE__ */ j(a, {
+						/* @__PURE__ */ x(n, {
 							size: "xs",
 							type: "secondary",
-							children: c.heatmapLegendLess
+							children: l.heatmapLegendLess
 						}),
 						[
 							0,
@@ -1422,22 +251,22 @@ function nt({ title: e, description: t, data: i, className: o, strings: s }) {
 							2,
 							3,
 							4
-						].map((e) => /* @__PURE__ */ j("svg", {
+						].map((e) => /* @__PURE__ */ x("svg", {
 							width: 12,
 							height: 12,
 							"aria-hidden": "true",
 							className: "shrink-0",
-							children: /* @__PURE__ */ j("rect", {
+							children: /* @__PURE__ */ x("rect", {
 								width: 12,
 								height: 12,
 								rx: 2.5,
-								className: $e[e]
+								className: A[e]
 							})
 						}, `legend-${e}`)),
-						/* @__PURE__ */ j(a, {
+						/* @__PURE__ */ x(n, {
 							size: "xs",
 							type: "secondary",
-							children: c.heatmapLegendMore
+							children: l.heatmapLegendMore
 						})
 					]
 				})]
@@ -1445,32 +274,10 @@ function nt({ title: e, description: t, data: i, className: o, strings: s }) {
 		})]
 	});
 }
-nt.displayName = "ActivityHeatmap";
-//#endregion
-//#region src/components/blocks/analytics/chart-card/chart-card.tsx
-function rt({ title: e, description: t, headerEnd: n, titleSuffix: i, footer: a, config: o, children: s, initialDimension: c, surface: l, padding: u, className: d, contentClassName: f, chartClassName: p }) {
-	return /* @__PURE__ */ j(ee, {
-		title: e,
-		description: t,
-		headerEnd: n,
-		titleSuffix: i,
-		footerSlot: a,
-		surface: l,
-		padding: u,
-		className: r("chart-card--component", d),
-		contentClassName: r("chart-card--content", f),
-		children: /* @__PURE__ */ j(O, {
-			config: o,
-			initialDimension: c,
-			className: r("chart-card--chart min-h-[var(--chart-min-height)]", p),
-			children: s
-		})
-	});
-}
-rt.displayName = "ChartCard";
+N.displayName = "ActivityHeatmap";
 //#endregion
 //#region src/components/blocks/analytics/time-ruler/types.ts
-var it = {
+var P = {
 	legendNone: "None",
 	legendLow: "Low",
 	legendMedium: "Medium",
@@ -1481,96 +288,95 @@ var it = {
 };
 //#endregion
 //#region src/components/blocks/analytics/time-ruler/time-ruler.tsx
-function $({ hours: e, currentHour: t, className: i, strings: o }) {
-	let s = n(it, o), c = Math.max(...e, 1), l = e.indexOf(Math.max(...e));
-	function u(e) {
-		if (e === 0) return p.density[0];
-		let t = e / c;
-		return t < .33 ? p.density[1] : t < .66 ? p.density[2] : p.density[3];
+function F({ hours: r, currentHour: i, className: s, strings: c }) {
+	let l = e(P, c), d = Math.max(...r, 0), f = Math.max(d, 1), p = d > 0 ? r.indexOf(d) : -1, m = i !== void 0 && i >= 0 && i < 24;
+	function h(e) {
+		if (e === 0) return o.density[0];
+		let t = e / f;
+		return t < .33 ? o.density[1] : t < .66 ? o.density[2] : o.density[3];
 	}
-	return /* @__PURE__ */ M(d, {
+	return /* @__PURE__ */ S(a, {
 		gap: "sm",
-		className: r("time-ruler--component", i),
+		className: t("time-ruler--component", s),
 		children: [
-			/* @__PURE__ */ j("div", {
-				className: "relative flex h-8 gap-px overflow-hidden rounded-radius-md",
-				children: e.map((e, t) => /* @__PURE__ */ j("div", {
-					className: r("relative flex-1 transition-colors", u(e), t === l && "ring-1 ring-primary ring-inset"),
-					title: s.formatHourTitle(s.formatHourLabel(t), e)
-				}, t))
+			/* @__PURE__ */ S("div", {
+				"aria-hidden": "true",
+				className: "time-ruler--bar relative",
+				children: [/* @__PURE__ */ x("div", {
+					className: "flex h-8 gap-px overflow-hidden rounded-radius-md",
+					children: r.map((e, n) => /* @__PURE__ */ x("div", {
+						"data-hour": n,
+						"data-peak": n === p || void 0,
+						className: t("relative flex-1 transition-colors", h(e), n === p && "ring-1 ring-primary ring-inset"),
+						title: l.formatHourTitle(l.formatHourLabel(n), e)
+					}, n))
+				}), m && /* @__PURE__ */ x("div", {
+					className: "time-ruler--now absolute bottom-1 h-0 w-0 border-x-[4px] border-b-[5px] border-x-transparent border-b-destructive",
+					style: {
+						left: `${i / 24 * 100}%`,
+						transform: "translateX(-50%)"
+					}
+				})]
 			}),
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ x("div", {
+				"aria-hidden": "true",
 				className: "relative flex",
-				children: e.map((e, t) => /* @__PURE__ */ j("div", {
+				children: r.map((e, t) => /* @__PURE__ */ x("div", {
 					className: "flex-1 text-center",
-					children: t % 4 == 0 && /* @__PURE__ */ j(w, {
+					children: t % 4 == 0 && /* @__PURE__ */ x(u, {
 						size: "xs",
 						className: "tabular-nums",
-						children: s.formatHourLabel(t)
+						children: l.formatHourLabel(t)
 					})
 				}, t))
 			}),
-			t !== void 0 && t >= 0 && t < 24 && /* @__PURE__ */ j("div", {
-				className: "relative h-0",
-				children: /* @__PURE__ */ j("div", {
-					className: "absolute -top-[42px] flex flex-col items-center",
-					style: {
-						left: `${t / 24 * 100}%`,
-						transform: "translateX(-50%)"
-					},
-					children: /* @__PURE__ */ j("div", { className: "h-0 w-0 border-x-[4px] border-b-[5px] border-x-transparent border-b-destructive" })
-				})
+			/* @__PURE__ */ x("ul", {
+				className: "time-ruler--data sr-only",
+				children: r.map((e, t) => e > 0 && /* @__PURE__ */ S("li", { children: [l.formatHourTitle(l.formatHourLabel(t), e), t === i && ` (${l.legendNow})`] }, t))
 			}),
-			/* @__PURE__ */ M("div", {
-				className: "flex items-center gap-space-lg",
-				children: [
-					/* @__PURE__ */ M("div", {
-						className: "flex items-center gap-space-xs",
-						children: [/* @__PURE__ */ j("div", { className: r("h-2 w-3 rounded-radius-sm", p.density[0]) }), /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							children: s.legendNone
-						})]
-					}),
-					/* @__PURE__ */ M("div", {
-						className: "flex items-center gap-space-xs",
-						children: [/* @__PURE__ */ j("div", { className: r("h-2 w-3 rounded-radius-sm", p.density[1]) }), /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							children: s.legendLow
-						})]
-					}),
-					/* @__PURE__ */ M("div", {
-						className: "flex items-center gap-space-xs",
-						children: [/* @__PURE__ */ j("div", { className: r("h-2 w-3 rounded-radius-sm", p.density[2]) }), /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							children: s.legendMedium
-						})]
-					}),
-					/* @__PURE__ */ M("div", {
-						className: "flex items-center gap-space-xs",
-						children: [/* @__PURE__ */ j("div", { className: r("h-2 w-3 rounded-radius-sm", p.density[3]) }), /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							children: s.legendHigh
-						})]
-					}),
-					t !== void 0 && /* @__PURE__ */ M("div", {
-						className: "flex items-center gap-space-xs",
-						children: [/* @__PURE__ */ j("div", { className: "h-0 w-0 border-x-[3px] border-b-[4px] border-x-transparent border-b-destructive" }), /* @__PURE__ */ j(a, {
-							size: "xs",
-							type: "secondary",
-							children: s.legendNow
-						})]
-					})
-				]
+			/* @__PURE__ */ S(a, {
+				direction: "horizontal",
+				align: "center",
+				gap: "lg",
+				className: "time-ruler--legend",
+				children: [[
+					l.legendNone,
+					l.legendLow,
+					l.legendMedium,
+					l.legendHigh
+				].map((e, r) => /* @__PURE__ */ S(a, {
+					direction: "horizontal",
+					align: "center",
+					gap: "xs",
+					wrap: !1,
+					children: [/* @__PURE__ */ x("div", {
+						"aria-hidden": "true",
+						className: t("h-2 w-3 rounded-radius-sm", o.density[r])
+					}), /* @__PURE__ */ x(n, {
+						size: "xs",
+						type: "secondary",
+						children: e
+					})]
+				}, r)), i !== void 0 && /* @__PURE__ */ S(a, {
+					direction: "horizontal",
+					align: "center",
+					gap: "xs",
+					wrap: !1,
+					children: [/* @__PURE__ */ x("div", {
+						"aria-hidden": "true",
+						className: "h-0 w-0 border-x-[3px] border-b-[4px] border-x-transparent border-b-destructive"
+					}), /* @__PURE__ */ x(n, {
+						size: "xs",
+						type: "secondary",
+						children: l.legendNow
+					})]
+				})]
 			})
 		]
 	});
 }
-$.displayName = "TimeDistributionRuler";
+F.displayName = "TimeDistributionRuler";
 //#endregion
-export { nt as ActivityHeatmap, rt as ChartCard, Y as Metric, Me as MetricBar, Le as MetricComparison, Qe as MetricGradient, Fe as MetricGrid, Ye as MetricMicroGrid, q as MetricSkeleton, G as MetricSparkline, H as MetricTrendChip, $ as TimeDistributionRuler, ne as UsageCard, R as defaultAnalyticsStrings, X as defaultMetricComparisonStrings, it as defaultTimeDistributionRulerStrings, te as defaultUsageCardStrings, z as formatMetricValue, ue as resolveTrend };
+export { N as ActivityHeatmap, k as MetricComparison, m as MetricSkeleton, g as MetricTrendChip, F as TimeDistributionRuler, b as UsageCard, _ as defaultAnalyticsStrings, D as defaultMetricComparisonStrings, p as defaultMetricTrendChipStrings, P as defaultTimeDistributionRulerStrings, y as defaultUsageCardStrings, f as formatMetricValue, h as resolveTrend };
 
 //# sourceMappingURL=analytics.js.map