@patterninc/pattern-ui 0.0.0-main.202610072037.1ac1dcec665c → 0.0.0-main.202610080441.d12ae32dfdcb

package/dist/components/Metric/Metric.js

@@ -6,14 +6,16 @@ import ArrowUpIcon from "../icons/ArrowUpIcon.js";
 import DotIcon from "../icons/DotIcon.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 import { useLingui } from "@lingui/react";
 import { cn } from "cn";
 import { motion } from "motion/react";
 
 //#region src/components/Metric/Metric.tsx
 function Metric(props) {
-	const $ = c(120);
+	const $ = c(131);
 	const { _: _t } = useLingui();
+	const labelId = useId();
 	let children;
 	let className;
 	let deltaDirection;
@@ -22,9 +24,11 @@ function Metric(props) {
 	let onSuffixHoverChange;
 	let otherProps;
 	let prefixDotColor;
+	let prefixIcon;
 	let primaryMetricConfig;
 	let progressValue;
 	let secondaryMetricConfig;
+	let selected;
 	let subtext;
 	let suffix;
 	let t0;
@@ -38,7 +42,7 @@ function Metric(props) {
 	let targetLineAt;
 	let value;
 	if ($[0] !== props) {
-		({label, prefixDotColor, suffix, onSuffixHoverChange, targetLineAt, styleVariant: t0, pressFeedback: t1, children, className, variant: t2, value, subtext, deltaDirection, deltaSubtext, progressValue, progressColor: t3, progressColorIntensity: t4, targetLabel, emptyStateText: t5, primaryMetric: primaryMetricConfig, secondaryMetric: secondaryMetricConfig, qaTestId: t6, ...otherProps} = props);
+		({label, prefixDotColor, prefixIcon, selected, suffix, onSuffixHoverChange, targetLineAt, styleVariant: t0, pressFeedback: t1, children, className, variant: t2, value, subtext, deltaDirection, deltaSubtext, progressValue, progressColor: t3, progressColorIntensity: t4, targetLabel, emptyStateText: t5, primaryMetric: primaryMetricConfig, secondaryMetric: secondaryMetricConfig, qaTestId: t6, ...otherProps} = props);
 		$[0] = props;
 		$[1] = children;
 		$[2] = className;
@@ -48,21 +52,23 @@ function Metric(props) {
 		$[6] = onSuffixHoverChange;
 		$[7] = otherProps;
 		$[8] = prefixDotColor;
-		$[9] = primaryMetricConfig;
-		$[10] = progressValue;
-		$[11] = secondaryMetricConfig;
-		$[12] = subtext;
-		$[13] = suffix;
-		$[14] = t0;
-		$[15] = t1;
-		$[16] = t2;
-		$[17] = t3;
-		$[18] = t4;
-		$[19] = t5;
-		$[20] = t6;
-		$[21] = targetLabel;
-		$[22] = targetLineAt;
-		$[23] = value;
+		$[9] = prefixIcon;
+		$[10] = primaryMetricConfig;
+		$[11] = progressValue;
+		$[12] = secondaryMetricConfig;
+		$[13] = selected;
+		$[14] = subtext;
+		$[15] = suffix;
+		$[16] = t0;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = targetLabel;
+		$[24] = targetLineAt;
+		$[25] = value;
 	} else {
 		children = $[1];
 		className = $[2];
@@ -72,21 +78,23 @@ function Metric(props) {
 		onSuffixHoverChange = $[6];
 		otherProps = $[7];
 		prefixDotColor = $[8];
-		primaryMetricConfig = $[9];
-		progressValue = $[10];
-		secondaryMetricConfig = $[11];
-		subtext = $[12];
-		suffix = $[13];
-		t0 = $[14];
-		t1 = $[15];
-		t2 = $[16];
-		t3 = $[17];
-		t4 = $[18];
-		t5 = $[19];
-		t6 = $[20];
-		targetLabel = $[21];
-		targetLineAt = $[22];
-		value = $[23];
+		prefixIcon = $[9];
+		primaryMetricConfig = $[10];
+		progressValue = $[11];
+		secondaryMetricConfig = $[12];
+		selected = $[13];
+		subtext = $[14];
+		suffix = $[15];
+		t0 = $[16];
+		t1 = $[17];
+		t2 = $[18];
+		t3 = $[19];
+		t4 = $[20];
+		t5 = $[21];
+		t6 = $[22];
+		targetLabel = $[23];
+		targetLineAt = $[24];
+		value = $[25];
 	}
 	const styleVariant = t0 === void 0 ? "weak" : t0;
 	const pressFeedback = t1 === void 0 ? false : t1;
@@ -94,12 +102,12 @@ function Metric(props) {
 	const progressColor = t3 === void 0 ? "neutral" : t3;
 	const progressColorIntensity = t4 === void 0 ? "light" : t4;
 	let t7;
-	if ($[24] !== _t || $[25] !== t5) {
+	if ($[26] !== _t || $[27] !== t5) {
 		t7 = t5 === void 0 ? _t({ id: "tchf_I" }) : t5;
-		$[24] = _t;
-		$[25] = t5;
-		$[26] = t7;
-	} else t7 = $[26];
+		$[26] = _t;
+		$[27] = t5;
+		$[28] = t7;
+	} else t7 = $[28];
 	const emptyStateText = t7;
 	const qaTestId = t6 === void 0 ? "metric" : t6;
 	let renderMetricContent;
@@ -118,7 +126,7 @@ function Metric(props) {
 	let t20;
 	let t8;
 	let t9;
-	if ($[27] !== children || $[28] !== className || $[29] !== deltaDirection || $[30] !== deltaSubtext || $[31] !== emptyStateText || $[32] !== label || $[33] !== onSuffixHoverChange || $[34] !== otherProps || $[35] !== prefixDotColor || $[36] !== pressFeedback || $[37] !== primaryMetricConfig || $[38] !== progressColor || $[39] !== progressColorIntensity || $[40] !== progressValue || $[41] !== qaTestId || $[42] !== secondaryMetricConfig?.metric || $[43] !== styleVariant || $[44] !== subtext || $[45] !== suffix || $[46] !== targetLabel || $[47] !== targetLineAt || $[48] !== value || $[49] !== variant) {
+	if ($[29] !== _t || $[30] !== children || $[31] !== className || $[32] !== deltaDirection || $[33] !== deltaSubtext || $[34] !== emptyStateText || $[35] !== label || $[36] !== labelId || $[37] !== onSuffixHoverChange || $[38] !== otherProps || $[39] !== prefixDotColor || $[40] !== prefixIcon || $[41] !== pressFeedback || $[42] !== primaryMetricConfig || $[43] !== progressColor || $[44] !== progressColorIntensity || $[45] !== progressValue || $[46] !== qaTestId || $[47] !== secondaryMetricConfig?.metric || $[48] !== selected || $[49] !== styleVariant || $[50] !== subtext || $[51] !== suffix || $[52] !== targetLabel || $[53] !== targetLineAt || $[54] !== value || $[55] !== variant) {
 		const primaryMetric = {
 			variant,
 			value,
@@ -140,34 +148,94 @@ function Metric(props) {
 		const singleMetric = hasPrimaryData ? primaryMetric : secondaryMetric;
 		const isOverallEmpty = !hasPrimaryData && !hasSecondaryData;
 		const isPrimaryProgress = primaryMetric.variant === "progress" || primaryMetric.progressValue != null;
-		const safePrimaryProgressValue = primaryMetric.progressValue ?? 0;
+		const safePrimaryProgressValue = Math.min(Math.max(primaryMetric.progressValue ?? 0, 0), 100);
 		const isWeak = styleVariant === "weak";
 		const isInverse = styleVariant === "inverse" || isOverallEmpty;
+		const isSelected = selected === true && !isOverallEmpty;
 		const progressBgColor = getSemanticStateColor(primaryMetric.progressColor ?? "neutral", primaryMetric.progressColorIntensity ?? "light");
-		renderMetricContent = _temp2;
-		const t21 = pressFeedback && "active:scale-[0.98]";
-		const t22 = isWeak && !isOverallEmpty && "bg-depth-black-4 hover:bg-depth-black-8";
-		const t23 = isInverse && !isOverallEmpty && "border-inner-depth-black-4 bg-base-inverse hover:bg-depth-black-4 hover:shadow-none";
-		const t24 = isOverallEmpty && "dashed-border";
-		if ($[66] !== className || $[67] !== t21 || $[68] !== t22 || $[69] !== t23 || $[70] !== t24) {
-			t15 = cn("group relative flex min-h-29 w-full min-w-55 transform flex-col overflow-clip rounded-20 p-4 text-left transition-[transform,background-color] duration-200", t21, t22, t23, t24, className);
-			$[66] = className;
-			$[67] = t21;
-			$[68] = t22;
-			$[69] = t23;
-			$[70] = t24;
-			$[71] = t15;
-		} else t15 = $[71];
+		let t21;
+		if ($[72] !== _t) {
+			t21 = (metric_0) => {
+				const metricIsProgress_0 = metric_0.variant === "progress" || metric_0.progressValue != null;
+				const metricIsDelta = metric_0.variant === "delta";
+				const metricValue = metricIsProgress_0 ? metric_0.value ?? `${metric_0.progressValue ?? 0}%` : metric_0.value;
+				const deltaTextColor = metric_0.deltaDirection === "increase" ? "text-positive-base" : metric_0.deltaDirection === "decrease" ? "text-negative-base" : "text-neutral-base";
+				return /* @__PURE__ */ jsxs("div", {
+					className: "relative flex min-w-0 flex-1 flex-col justify-end overflow-hidden",
+					children: [
+						metric_0.label ? /* @__PURE__ */ jsx("span", {
+							className: "pui-text-body-medium-compact shrink-0 text-depth-black-56",
+							children: metric_0.label
+						}) : null,
+						/* @__PURE__ */ jsx("p", {
+							className: "pui-text-metric-large shrink-0 text-depth-black-80",
+							children: metricValue
+						}),
+						metric_0.variant === "default" && metric_0.subtext ? /* @__PURE__ */ jsx("p", {
+							className: "pui-text-mono-small shrink-0 text-depth-black-36",
+							children: metric_0.subtext
+						}) : null,
+						metricIsDelta && metric_0.subtext ? /* @__PURE__ */ jsxs("div", {
+							className: "flex w-full min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 items-center gap-0.5",
+								children: [metric_0.deltaDirection === "increase" || metric_0.deltaDirection === "decrease" ? /* @__PURE__ */ jsx("div", {
+									className: cn("flex size-4 shrink-0 items-center justify-center", deltaTextColor),
+									"aria-hidden": "true",
+									children: metric_0.deltaDirection === "increase" ? /* @__PURE__ */ jsx(ArrowUpIcon, { size: 16 }) : /* @__PURE__ */ jsx(ArrowDownIcon, { size: 16 })
+								}) : null, /* @__PURE__ */ jsxs("p", {
+									className: cn("pui-text-mono-small shrink-0", deltaTextColor),
+									children: [metric_0.deltaDirection === "increase" ? /* @__PURE__ */ jsxs("span", {
+										className: "sr-only",
+										children: [_t({ id: "xOrRQ5" }), " "]
+									}) : metric_0.deltaDirection === "decrease" ? /* @__PURE__ */ jsxs("span", {
+										className: "sr-only",
+										children: [_t({ id: "I97bfB" }), " "]
+									}) : null, metric_0.subtext]
+								})]
+							}), metric_0.deltaSubtext ? /* @__PURE__ */ jsx("p", {
+								className: "pui-text-mono-small min-w-0 text-depth-black-36",
+								children: metric_0.deltaSubtext
+							}) : null]
+						}) : null,
+						metricIsProgress_0 && metric_0.targetLabel ? /* @__PURE__ */ jsx("p", {
+							className: "pui-text-mono-small shrink-0 text-depth-black-36",
+							children: metric_0.targetLabel
+						}) : null
+					]
+				});
+			};
+			$[72] = _t;
+			$[73] = t21;
+		} else t21 = $[73];
+		renderMetricContent = t21;
+		const t22 = pressFeedback && "active:scale-95";
+		const t23 = isSelected && "border-inner-depth-black-4 bg-depth-black-4 hover:bg-depth-black-4";
+		const t24 = !isSelected && isWeak && !isOverallEmpty && "bg-depth-black-4 hover:inset-ring-1 hover:inset-ring-depth-black-4";
+		const t25 = !isSelected && isInverse && !isOverallEmpty && "border-inner-depth-black-4 bg-base-inverse hover:bg-depth-black-4 hover:shadow-none";
+		const t26 = isOverallEmpty && "dashed-border";
+		if ($[74] !== className || $[75] !== t22 || $[76] !== t23 || $[77] !== t24 || $[78] !== t25 || $[79] !== t26) {
+			t15 = cn("group relative flex min-h-29 w-full min-w-55 transform flex-col overflow-clip rounded-20 p-4 text-left transition-[transform,background-color,box-shadow] duration-200", t22, t23, t24, t25, t26, className);
+			$[74] = className;
+			$[75] = t22;
+			$[76] = t23;
+			$[77] = t24;
+			$[78] = t25;
+			$[79] = t26;
+			$[80] = t15;
+		} else t15 = $[80];
 		t16 = qaTestId;
-		t17 = otherProps;
-		t18 = isPrimaryProgress && hasPrimaryData && children == null ? /* @__PURE__ */ jsx(motion.div, {
-			className: cn("absolute inset-y-0 left-0 transition-[width] duration-300 ease-out", progressBgColor, "after:absolute after:inset-0 after:bg-depth-black-0 after:transition-colors after:duration-200 group-hover:after:bg-depth-black-8"),
-			style: {
-				width: `${safePrimaryProgressValue}%`,
-				transformOrigin: "left"
-			},
+		t17 = selected === void 0 ? void 0 : isSelected;
+		t18 = otherProps;
+		t19 = isPrimaryProgress && hasPrimaryData && children == null ? /* @__PURE__ */ jsx(motion.div, {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": safePrimaryProgressValue,
+			"aria-labelledby": labelId,
+			className: cn("absolute inset-0 origin-left", progressBgColor),
 			initial: { scaleX: 0 },
-			whileInView: { scaleX: 1 },
+			whileInView: { scaleX: safePrimaryProgressValue / 100 },
 			viewport: {
 				once: true,
 				amount: .1
@@ -177,85 +245,94 @@ function Metric(props) {
 				delay: .4
 			}
 		}) : null;
-		t19 = isPrimaryProgress && hasPrimaryData && children == null ? /* @__PURE__ */ jsx("div", {
-			className: cn("absolute inset-y-0 flex w-0 -translate-x-1/2 items-center justify-center transition-[width] duration-300 ease-out"),
-			style: { width: `${safePrimaryProgressValue}%` },
-			children: /* @__PURE__ */ jsx("div", { className: "h-full w-px border-depth-black-16" })
-		}) : null;
-		if ($[72] !== targetLineAt) {
-			t20 = targetLineAt ? /* @__PURE__ */ jsx("div", {
-				className: "pointer-events-none absolute inset-y-0 z-10 -translate-x-1/2",
-				style: { left: `${targetLineAt}%` },
-				children: /* @__PURE__ */ jsx("div", { className: "h-full w-px border-l border-dashed border-depth-black-16" })
+		if ($[81] !== targetLineAt) {
+			t20 = targetLineAt ? /* @__PURE__ */ jsx("svg", {
+				className: "pointer-events-none absolute inset-0 z-10 size-full text-depth-black-16",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("line", {
+					x1: `${targetLineAt}%`,
+					x2: `${targetLineAt}%`,
+					y1: 0,
+					y2: "100%",
+					stroke: "currentColor",
+					strokeDasharray: "3 3"
+				})
 			}) : null;
-			$[72] = targetLineAt;
-			$[73] = t20;
-		} else t20 = $[73];
+			$[81] = targetLineAt;
+			$[82] = t20;
+		} else t20 = $[82];
 		t12 = "relative z-10 flex min-h-px min-w-px flex-1 flex-col justify-between gap-3";
-		let t25;
-		if ($[74] !== prefixDotColor) {
-			t25 = prefixDotColor ? /* @__PURE__ */ jsx(DotIcon, {
+		let t27;
+		if ($[83] !== prefixDotColor || $[84] !== prefixIcon) {
+			t27 = prefixIcon ? /* @__PURE__ */ jsx("span", {
+				className: "flex size-5 shrink-0 items-center justify-center",
+				"aria-hidden": "true",
+				children: prefixIcon
+			}) : prefixDotColor ? /* @__PURE__ */ jsx(DotIcon, {
 				size: 24,
 				color: prefixDotColor,
 				"aria-hidden": "true"
 			}) : null;
-			$[74] = prefixDotColor;
-			$[75] = t25;
-		} else t25 = $[75];
-		let t26;
-		if ($[76] !== label) {
-			t26 = /* @__PURE__ */ jsx("p", {
+			$[83] = prefixDotColor;
+			$[84] = prefixIcon;
+			$[85] = t27;
+		} else t27 = $[85];
+		let t28;
+		if ($[86] !== label || $[87] !== labelId) {
+			t28 = /* @__PURE__ */ jsx("p", {
+				id: labelId,
 				className: "pui-text-body-medium-compact min-h-px min-w-px flex-1 text-depth-black-56",
 				children: label
 			});
-			$[76] = label;
-			$[77] = t26;
-		} else t26 = $[77];
-		let t27;
-		if ($[78] !== t25 || $[79] !== t26) {
-			t27 = /* @__PURE__ */ jsxs("div", {
+			$[86] = label;
+			$[87] = labelId;
+			$[88] = t28;
+		} else t28 = $[88];
+		let t29;
+		if ($[89] !== t27 || $[90] !== t28) {
+			t29 = /* @__PURE__ */ jsxs("div", {
 				className: "flex min-h-px min-w-px flex-1 items-center gap-1",
-				children: [t25, t26]
+				children: [t27, t28]
 			});
-			$[78] = t25;
-			$[79] = t26;
-			$[80] = t27;
-		} else t27 = $[80];
-		let t28;
-		if ($[81] !== onSuffixHoverChange || $[82] !== suffix) {
-			t28 = suffix ? /* @__PURE__ */ jsx("span", {
+			$[89] = t27;
+			$[90] = t28;
+			$[91] = t29;
+		} else t29 = $[91];
+		let t30;
+		if ($[92] !== onSuffixHoverChange || $[93] !== suffix) {
+			t30 = suffix ? /* @__PURE__ */ jsx("span", {
 				onMouseEnter: onSuffixHoverChange ? () => onSuffixHoverChange(true) : void 0,
 				onMouseLeave: onSuffixHoverChange ? () => onSuffixHoverChange(false) : void 0,
 				children: /* @__PURE__ */ jsx(Suffix, { ...suffix })
 			}) : null;
-			$[81] = onSuffixHoverChange;
-			$[82] = suffix;
-			$[83] = t28;
-		} else t28 = $[83];
-		if ($[84] !== t27 || $[85] !== t28) {
+			$[92] = onSuffixHoverChange;
+			$[93] = suffix;
+			$[94] = t30;
+		} else t30 = $[94];
+		if ($[95] !== t29 || $[96] !== t30) {
 			t13 = /* @__PURE__ */ jsxs("div", {
 				className: "flex w-full shrink-0 items-center justify-between gap-2",
-				children: [t27, t28]
+				children: [t29, t30]
 			});
-			$[84] = t27;
-			$[85] = t28;
-			$[86] = t13;
-		} else t13 = $[86];
-		if ($[87] !== children) {
+			$[95] = t29;
+			$[96] = t30;
+			$[97] = t13;
+		} else t13 = $[97];
+		if ($[98] !== children) {
 			t14 = children != null ? /* @__PURE__ */ jsx("div", {
 				className: "relative z-10 w-full shrink-0",
 				children
 			}) : null;
-			$[87] = children;
-			$[88] = t14;
-		} else t14 = $[88];
-		const t29 = showDualMetrics ? "flex-row items-end" : "flex-col items-start";
-		if ($[89] !== t29) {
-			t8 = cn("flex w-full flex-1 shrink-0 flex-col justify-between gap-1", t29);
-			$[89] = t29;
-			$[90] = t8;
-		} else t8 = $[90];
-		if ($[91] !== emptyStateText || $[92] !== isOverallEmpty) {
+			$[98] = children;
+			$[99] = t14;
+		} else t14 = $[99];
+		const t31 = showDualMetrics ? "flex-row items-end" : "flex-col items-start";
+		if ($[100] !== t31) {
+			t8 = cn("flex w-full flex-1 shrink-0 flex-col justify-between gap-1", t31);
+			$[100] = t31;
+			$[101] = t8;
+		} else t8 = $[101];
+		if ($[102] !== emptyStateText || $[103] !== isOverallEmpty) {
 			t9 = isOverallEmpty ? /* @__PURE__ */ jsx("div", {
 				className: "relative flex min-w-0 flex-1 flex-col justify-end overflow-hidden",
 				children: /* @__PURE__ */ jsx("p", {
@@ -263,71 +340,75 @@ function Metric(props) {
 					children: emptyStateText
 				})
 			}) : null;
-			$[91] = emptyStateText;
-			$[92] = isOverallEmpty;
-			$[93] = t9;
-		} else t9 = $[93];
+			$[102] = emptyStateText;
+			$[103] = isOverallEmpty;
+			$[104] = t9;
+		} else t9 = $[104];
 		t10 = hasSingleMetric && singleMetric ? renderMetricContent(singleMetric) : null;
 		t11 = showDualMetrics ? renderMetricContent(primaryMetric) : null;
-		$[27] = children;
-		$[28] = className;
-		$[29] = deltaDirection;
-		$[30] = deltaSubtext;
-		$[31] = emptyStateText;
-		$[32] = label;
-		$[33] = onSuffixHoverChange;
-		$[34] = otherProps;
-		$[35] = prefixDotColor;
-		$[36] = pressFeedback;
-		$[37] = primaryMetricConfig;
-		$[38] = progressColor;
-		$[39] = progressColorIntensity;
-		$[40] = progressValue;
-		$[41] = qaTestId;
-		$[42] = secondaryMetricConfig?.metric;
-		$[43] = styleVariant;
-		$[44] = subtext;
-		$[45] = suffix;
-		$[46] = targetLabel;
-		$[47] = targetLineAt;
-		$[48] = value;
-		$[49] = variant;
-		$[50] = renderMetricContent;
-		$[51] = secondaryMetric;
-		$[52] = showDualMetrics;
-		$[53] = t10;
-		$[54] = t11;
-		$[55] = t12;
-		$[56] = t13;
-		$[57] = t14;
-		$[58] = t15;
-		$[59] = t16;
-		$[60] = t17;
-		$[61] = t18;
-		$[62] = t19;
-		$[63] = t20;
-		$[64] = t8;
-		$[65] = t9;
+		$[29] = _t;
+		$[30] = children;
+		$[31] = className;
+		$[32] = deltaDirection;
+		$[33] = deltaSubtext;
+		$[34] = emptyStateText;
+		$[35] = label;
+		$[36] = labelId;
+		$[37] = onSuffixHoverChange;
+		$[38] = otherProps;
+		$[39] = prefixDotColor;
+		$[40] = prefixIcon;
+		$[41] = pressFeedback;
+		$[42] = primaryMetricConfig;
+		$[43] = progressColor;
+		$[44] = progressColorIntensity;
+		$[45] = progressValue;
+		$[46] = qaTestId;
+		$[47] = secondaryMetricConfig?.metric;
+		$[48] = selected;
+		$[49] = styleVariant;
+		$[50] = subtext;
+		$[51] = suffix;
+		$[52] = targetLabel;
+		$[53] = targetLineAt;
+		$[54] = value;
+		$[55] = variant;
+		$[56] = renderMetricContent;
+		$[57] = secondaryMetric;
+		$[58] = showDualMetrics;
+		$[59] = t10;
+		$[60] = t11;
+		$[61] = t12;
+		$[62] = t13;
+		$[63] = t14;
+		$[64] = t15;
+		$[65] = t16;
+		$[66] = t17;
+		$[67] = t18;
+		$[68] = t19;
+		$[69] = t20;
+		$[70] = t8;
+		$[71] = t9;
 	} else {
-		renderMetricContent = $[50];
-		secondaryMetric = $[51];
-		showDualMetrics = $[52];
-		t10 = $[53];
-		t11 = $[54];
-		t12 = $[55];
-		t13 = $[56];
-		t14 = $[57];
-		t15 = $[58];
-		t16 = $[59];
-		t17 = $[60];
-		t18 = $[61];
-		t19 = $[62];
-		t20 = $[63];
-		t8 = $[64];
-		t9 = $[65];
+		renderMetricContent = $[56];
+		secondaryMetric = $[57];
+		showDualMetrics = $[58];
+		t10 = $[59];
+		t11 = $[60];
+		t12 = $[61];
+		t13 = $[62];
+		t14 = $[63];
+		t15 = $[64];
+		t16 = $[65];
+		t17 = $[66];
+		t18 = $[67];
+		t19 = $[68];
+		t20 = $[69];
+		t8 = $[70];
+		t9 = $[71];
 	}
 	let t21;
-	if ($[94] !== showDualMetrics) {
+	if ($[105] !== showDualMetrics) {
 		t21 = showDualMetrics ? /* @__PURE__ */ jsx("div", {
 			className: "flex h-full min-h-0 shrink-0 flex-col self-stretch pr-1 pl-4 text-depth-black-8",
 			"aria-hidden": true,
@@ -361,19 +442,19 @@ function Metric(props) {
 				})
 			})
 		}) : null;
-		$[94] = showDualMetrics;
-		$[95] = t21;
-	} else t21 = $[95];
+		$[105] = showDualMetrics;
+		$[106] = t21;
+	} else t21 = $[106];
 	let t22;
-	if ($[96] !== renderMetricContent || $[97] !== secondaryMetric || $[98] !== showDualMetrics) {
+	if ($[107] !== renderMetricContent || $[108] !== secondaryMetric || $[109] !== showDualMetrics) {
 		t22 = showDualMetrics && secondaryMetric ? renderMetricContent(secondaryMetric) : null;
-		$[96] = renderMetricContent;
-		$[97] = secondaryMetric;
-		$[98] = showDualMetrics;
-		$[99] = t22;
-	} else t22 = $[99];
+		$[107] = renderMetricContent;
+		$[108] = secondaryMetric;
+		$[109] = showDualMetrics;
+		$[110] = t22;
+	} else t22 = $[110];
 	let t23;
-	if ($[100] !== t10 || $[101] !== t11 || $[102] !== t21 || $[103] !== t22 || $[104] !== t8 || $[105] !== t9) {
+	if ($[111] !== t10 || $[112] !== t11 || $[113] !== t21 || $[114] !== t22 || $[115] !== t8 || $[116] !== t9) {
 		t23 = /* @__PURE__ */ jsxs("div", {
 			className: t8,
 			children: [
@@ -384,16 +465,16 @@ function Metric(props) {
 				t22
 			]
 		});
-		$[100] = t10;
-		$[101] = t11;
-		$[102] = t21;
-		$[103] = t22;
-		$[104] = t8;
-		$[105] = t9;
-		$[106] = t23;
-	} else t23 = $[106];
+		$[111] = t10;
+		$[112] = t11;
+		$[113] = t21;
+		$[114] = t22;
+		$[115] = t8;
+		$[116] = t9;
+		$[117] = t23;
+	} else t23 = $[117];
 	let t24;
-	if ($[107] !== t12 || $[108] !== t13 || $[109] !== t14 || $[110] !== t23) {
+	if ($[118] !== t12 || $[119] !== t13 || $[120] !== t14 || $[121] !== t23) {
 		t24 = /* @__PURE__ */ jsxs("div", {
 			className: t12,
 			children: [
@@ -402,79 +483,36 @@ function Metric(props) {
 				t23
 			]
 		});
-		$[107] = t12;
-		$[108] = t13;
-		$[109] = t14;
-		$[110] = t23;
-		$[111] = t24;
-	} else t24 = $[111];
+		$[118] = t12;
+		$[119] = t13;
+		$[120] = t14;
+		$[121] = t23;
+		$[122] = t24;
+	} else t24 = $[122];
 	let t25;
-	if ($[112] !== t15 || $[113] !== t16 || $[114] !== t17 || $[115] !== t18 || $[116] !== t19 || $[117] !== t20 || $[118] !== t24) {
+	if ($[123] !== t15 || $[124] !== t16 || $[125] !== t17 || $[126] !== t18 || $[127] !== t19 || $[128] !== t20 || $[129] !== t24) {
 		t25 = /* @__PURE__ */ jsxs("div", {
 			className: t15,
 			"qa-test-id": t16,
-			...t17,
+			"aria-pressed": t17,
+			...t18,
 			children: [
-				t18,
 				t19,
 				t20,
 				t24
 			]
 		});
-		$[112] = t15;
-		$[113] = t16;
-		$[114] = t17;
-		$[115] = t18;
-		$[116] = t19;
-		$[117] = t20;
-		$[118] = t24;
-		$[119] = t25;
-	} else t25 = $[119];
+		$[123] = t15;
+		$[124] = t16;
+		$[125] = t17;
+		$[126] = t18;
+		$[127] = t19;
+		$[128] = t20;
+		$[129] = t24;
+		$[130] = t25;
+	} else t25 = $[130];
 	return t25;
 }
-function _temp2(metric_0) {
-	const metricIsProgress_0 = metric_0.variant === "progress" || metric_0.progressValue != null;
-	const metricIsDelta = metric_0.variant === "delta";
-	const metricValue = metricIsProgress_0 ? metric_0.value ?? `${metric_0.progressValue ?? 0}%` : metric_0.value;
-	const deltaTextColor = metric_0.deltaDirection === "increase" ? "text-positive-base" : metric_0.deltaDirection === "decrease" ? "text-negative-base" : "text-neutral-base";
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative flex min-w-0 flex-1 flex-col justify-end overflow-hidden",
-		children: [
-			metric_0.label ? /* @__PURE__ */ jsx("span", {
-				className: "pui-text-body-medium-compact shrink-0 text-depth-black-56",
-				children: metric_0.label
-			}) : null,
-			/* @__PURE__ */ jsx("p", {
-				className: "pui-text-metric-large shrink-0 text-depth-black-80",
-				children: metricValue
-			}),
-			metric_0.variant === "default" && metric_0.subtext ? /* @__PURE__ */ jsx("p", {
-				className: "pui-text-mono-small shrink-0 text-depth-black-36",
-				children: metric_0.subtext
-			}) : null,
-			metricIsDelta && metric_0.subtext ? /* @__PURE__ */ jsxs("div", {
-				className: "flex w-full min-w-0 shrink-0 flex-wrap items-center gap-x-2 gap-y-1",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex shrink-0 items-center gap-0.5",
-					children: [metric_0.deltaDirection === "increase" || metric_0.deltaDirection === "decrease" ? /* @__PURE__ */ jsx("div", {
-						className: cn("flex size-4 shrink-0 items-center justify-center", deltaTextColor),
-						children: metric_0.deltaDirection === "increase" ? /* @__PURE__ */ jsx(ArrowUpIcon, { size: 16 }) : /* @__PURE__ */ jsx(ArrowDownIcon, { size: 16 })
-					}) : null, /* @__PURE__ */ jsx("p", {
-						className: cn("pui-text-mono-small shrink-0", deltaTextColor),
-						children: metric_0.subtext
-					})]
-				}), metric_0.deltaSubtext ? /* @__PURE__ */ jsx("p", {
-					className: "pui-text-mono-small min-w-0 text-depth-black-36",
-					children: metric_0.deltaSubtext
-				}) : null]
-			}) : null,
-			metricIsProgress_0 && metric_0.targetLabel ? /* @__PURE__ */ jsx("p", {
-				className: "pui-text-mono-small shrink-0 text-depth-black-36",
-				children: metric_0.targetLabel
-			}) : null
-		]
-	});
-}
 function _temp(metric) {
 	if (metric == null) return true;
 	if (metric.variant === "progress" || metric.progressValue != null) return (metric.progressValue ?? 0) === 0;