import { t as e } from "../../utils-B7XIe3qq.js";
import "react";
import { jsx as t, jsxs as n } from "react/jsx-runtime";
//#region src/react/primitives/metric-tile.tsx
function r({ className: r, label: i, value: a, icon: o, detail: s, sparkline: c, tone: l = "default", ...u }) {
	return /* @__PURE__ */ n("div", {
		"data-slot": "metric-tile",
		className: e("cmm-metric-tile", `cmm-metric-tile--tone-${l}`, r),
		...u,
		children: [
			/* @__PURE__ */ n("div", {
				className: "cmm-metric-tile__header",
				children: [o === void 0 ? null : /* @__PURE__ */ t("span", {
					className: "cmm-metric-tile__icon",
					"aria-hidden": "true",
					children: o
				}), /* @__PURE__ */ t("span", {
					className: "cmm-metric-tile__label",
					children: i
				})]
			}),
			/* @__PURE__ */ t("div", {
				className: "cmm-metric-tile__value",
				children: typeof a == "number" ? String(a) : a
			}),
			s === void 0 ? null : /* @__PURE__ */ t("div", {
				className: "cmm-metric-tile__detail",
				children: s
			}),
			c === void 0 ? null : /* @__PURE__ */ t("div", {
				className: "cmm-metric-tile__sparkline",
				children: c
			})
		]
	});
}
//#endregion
export { r as MetricTile };

//# sourceMappingURL=metric-tile.js.map