@hybridcore/ui 1.6.19 → 1.6.21

package/dist/components/geometry-picker/styled.js

@@ -1,8 +1,8 @@
-import { styled as o, Box as n, FormLabel as i, Button as r, FormControl as a, InputLabel as c, Input as m, OutlinedInput as l, FilledInput as s, InputAdornment as d, IconButton as p, Dialog as y, DialogTitle as k, DialogContent as u } from "@mui/material";
-const G = (e) => e !== "ownerState", g = o(n, {
+import { styled as o, Box as n, FormLabel as a, Button as r, FormControl as c, InputLabel as m, Input as l, OutlinedInput as s, FilledInput as d, InputAdornment as p, IconButton as y, Dialog as k, DialogTitle as g, DialogContent as u } from "@mui/material";
+const i = (e) => e !== "ownerState", G = o(n, {
   name: "HCGeometryPicker",
   slot: "root"
-})({}), C = o(i, {
+})({}), C = o(a, {
   name: "HCGeometryPicker",
   slot: "topLabel"
 })(({ theme: e }) => ({
@@ -10,25 +10,46 @@ const G = (e) => e !== "ownerState", g = o(n, {
   marginBottom: e.spacing(0.5)
 })), b = o(n, {
   name: "HCGeometryPicker",
-  slot: "container"
+  slot: "header"
 })(({ theme: e }) => ({
-  position: "relative",
-  paddingTop: e.spacing(1),
-  width: "100%"
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: e.spacing(1),
+  marginBottom: e.spacing(0.5),
+  minHeight: 28,
+  "& > .MuiFormLabel-root": {
+    marginBottom: 0
+  }
 })), H = o(n, {
+  name: "HCGeometryPicker",
+  slot: "container",
+  shouldForwardProp: i
+})(({ ownerState: e, theme: t }) => ({
+  position: "relative",
+  width: "100%",
+  paddingTop: e.labelPosition === "top" ? 0 : t.spacing(1)
+})), f = o(n, {
   name: "HCGeometryPicker",
   slot: "actions",
-  shouldForwardProp: G
+  shouldForwardProp: i
 })(({ ownerState: e, theme: t }) => ({
-  position: "absolute",
-  top: 0,
-  right: 0,
-  zIndex: 9,
-  ...e.variant === "outlined" && {
-    padding: t.spacing(0.25),
-    top: t.spacing(-0.75),
-    right: t.spacing(1),
-    background: t.palette.background.default
+  display: "flex",
+  alignItems: "center",
+  ...e.labelPosition === "top" ? {
+    flexWrap: "wrap",
+    justifyContent: "flex-end"
+  } : {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    zIndex: 9,
+    ...e.variant === "outlined" && {
+      padding: t.spacing(0.25),
+      top: t.spacing(-0.75),
+      right: t.spacing(1),
+      background: t.palette.background.default
+    }
   }
 })), I = o(r, {
   name: "HCGeometryPicker",
@@ -53,31 +74,31 @@ const G = (e) => e !== "ownerState", g = o(n, {
       boxShadow: e.shadows[1]
     }
   }
-})), B = o(a, {
+})), x = o(c, {
   name: "HCGeometryPicker",
   slot: "formControl"
-})({}), f = o(c, {
+})({}), B = o(m, {
   name: "HCGeometryPicker",
   slot: "inputLabel"
-})({}), x = o(m, {
+})({}), h = o(l, {
   name: "HCGeometryPicker",
   slot: "input"
-})({}), S = o(l, {
+})({}), w = o(s, {
   name: "HCGeometryPicker",
   slot: "input"
-})({}), T = o(s, {
+})({}), L = o(d, {
   name: "HCGeometryPicker",
   slot: "input"
-})({}), h = o(d, {
+})({}), T = o(p, {
   name: "HCGeometryPicker",
   slot: "endAdornment"
-})({}), w = o(p, {
+})({}), A = o(y, {
   name: "HCGeometryPicker",
   slot: "endAdornmentButton"
-})({}), A = o(y, {
+})({}), F = o(k, {
   name: "HCGeometryPicker",
   slot: "dialog"
-})({}), L = o(k, {
+})({}), S = o(g, {
   name: "HCGeometryPicker",
   slot: "dialogTitle"
 })({}), v = o(u, {
@@ -89,7 +110,7 @@ const G = (e) => e !== "ownerState", g = o(n, {
 })(({ theme: e }) => ({
   textTransform: "none",
   marginTop: e.spacing(1)
-})), F = o(n, {
+})), M = o(n, {
   name: "HCGeometryPicker",
   slot: "geometryMapOverlay"
 })(({ theme: e }) => ({
@@ -97,20 +118,21 @@ const G = (e) => e !== "ownerState", g = o(n, {
 }));
 export {
   I as GeometryPickerActionButton,
-  H as GeometryPickerActions,
-  b as GeometryPickerContainer,
+  f as GeometryPickerActions,
+  H as GeometryPickerContainer,
   D as GeometryPickerCoordinateSubmit,
-  A as GeometryPickerDialog,
+  F as GeometryPickerDialog,
   v as GeometryPickerDialogContent,
-  L as GeometryPickerDialogTitle,
-  h as GeometryPickerEndAdornment,
-  w as GeometryPickerEndAdornmentButton,
-  B as GeometryPickerFormControl,
-  F as GeometryPickerGeometryMapOverlay,
-  T as GeometryPickerInputFilled,
-  f as GeometryPickerInputLabel,
-  S as GeometryPickerInputOutlined,
-  x as GeometryPickerInputStandard,
-  g as GeometryPickerRoot,
+  S as GeometryPickerDialogTitle,
+  T as GeometryPickerEndAdornment,
+  A as GeometryPickerEndAdornmentButton,
+  x as GeometryPickerFormControl,
+  M as GeometryPickerGeometryMapOverlay,
+  b as GeometryPickerHeader,
+  L as GeometryPickerInputFilled,
+  B as GeometryPickerInputLabel,
+  w as GeometryPickerInputOutlined,
+  h as GeometryPickerInputStandard,
+  G as GeometryPickerRoot,
   C as GeometryPickerTopLabel
 };

package/dist/components/metric-card/index.js

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as n, Fragment as u } from "react/jsx-runtime";
-import { Stack as r, Skeleton as c } from "@mui/material";
-import { MetricChart as x } from "./MetricChart.js";
-import { useMetricCardLogic as j } from "./logic.js";
-import { MetricCardRoot as m, MetricCardValue as z, MetricCardSecondValue as V, MetricCardTrendContainer as k, MetricCardLabel as w, MetricCardPanel as P, MetricCardDescription as f, MetricCardSideChart as L, MetricCardCornerIconContainer as A, MetricCardIconContainer as v, MetricCardContent as D, MetricCardChartContainer as F } from "./styled.js";
-const G = (t) => {
-  const { state: M } = j(t), {
-    ownerState: i,
+import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
+import { Stack as a, Skeleton as l, Tooltip as c } from "@mui/material";
+import { MetricChart as w } from "./MetricChart.js";
+import { useMetricCardLogic as z } from "./logic.js";
+import { MetricCardRoot as f, MetricCardValue as V, MetricCardSecondValue as k, MetricCardTrendContainer as P, MetricCardLabel as v, MetricCardPanel as W, MetricCardDescription as M, MetricCardSideChart as L, MetricCardCornerIconContainer as A, MetricCardIconContainer as y, MetricCardContent as D, MetricCardChartContainer as F } from "./styled.js";
+const H = (t) => {
+  const { state: S } = z(t), {
+    ownerState: n,
     layout: d,
-    calculatedValue: y,
-    calculatedSecondValue: l,
-    calculatedChange: h,
-    TrendIcon: S,
-    Icon: a,
+    calculatedValue: o,
+    calculatedSecondValue: h,
+    calculatedChange: s,
+    TrendIcon: b,
+    Icon: r,
     showCornerIcon: I,
-    showSideIcon: o,
-    iconPosition: s,
-    snapshotPayload: b
-  } = M, C = !!t.showChart && !!t.chartType && (t.value ?? []).length >= 2, T = (t.showChange || t.showTrend) && h !== "—";
+    showSideIcon: C,
+    iconPosition: x,
+    snapshotPayload: T
+  } = S, g = !!t.showChart && !!t.chartType && (t.value ?? []).length >= 2, j = (t.showChange || t.showTrend) && s !== "—";
   if (t.loading)
-    return /* @__PURE__ */ e(m, { ownerState: i, sx: t.sx, children: /* @__PURE__ */ n(r, { spacing: 1, children: [
-      /* @__PURE__ */ e(c, { variant: "text", width: "60%" }),
-      /* @__PURE__ */ e(c, { variant: "rectangular", height: 40, width: "40%" }),
-      /* @__PURE__ */ e(c, { variant: "text", width: "80%" }),
+    return /* @__PURE__ */ e(f, { ownerState: n, sx: t.sx, children: /* @__PURE__ */ i(a, { spacing: 1, children: [
+      /* @__PURE__ */ e(l, { variant: "text", width: "60%" }),
+      /* @__PURE__ */ e(l, { variant: "rectangular", height: 40, width: "40%" }),
+      /* @__PURE__ */ e(l, { variant: "text", width: "80%" }),
       t.showChart && /* @__PURE__ */ e(
-        c,
+        l,
         {
           variant: "rectangular",
           height: 40,
@@ -32,40 +32,50 @@ const G = (t) => {
         }
       )
     ] }) });
-  const g = /* @__PURE__ */ n(
-    r,
+  const u = /* @__PURE__ */ i(
+    a,
     {
       direction: "row",
       alignItems: "center",
       spacing: 1,
       flexWrap: d === "panel" ? "nowrap" : "wrap",
+      sx: { minWidth: 0 },
       children: [
-        /* @__PURE__ */ n(r, { direction: "row", alignItems: "baseline", spacing: 0.5, children: [
-          /* @__PURE__ */ e(z, { variant: "h4", ownerState: i, children: y }),
-          l && /* @__PURE__ */ e(V, { variant: "h5", ownerState: i, children: l })
-        ] }),
-        T && /* @__PURE__ */ n(k, { ownerState: i, children: [
-          d === "overlay" && t.showTrend && /* @__PURE__ */ e(S, { size: 16 }),
-          t.showChange && h
+        /* @__PURE__ */ i(
+          a,
+          {
+            direction: "row",
+            alignItems: "baseline",
+            spacing: 0.5,
+            sx: { minWidth: 0 },
+            children: [
+              /* @__PURE__ */ e(c, { title: o, children: /* @__PURE__ */ e(V, { variant: "h4", ownerState: n, children: o }) }),
+              h && /* @__PURE__ */ e(c, { title: h, children: /* @__PURE__ */ e(k, { variant: "h5", ownerState: n, children: h }) })
+            ]
+          }
+        ),
+        j && /* @__PURE__ */ i(P, { ownerState: n, children: [
+          d === "overlay" && t.showTrend && /* @__PURE__ */ e(b, { size: 16 }),
+          t.showChange && s
         ] })
       ]
     }
   );
   return /* @__PURE__ */ e(
-    m,
+    f,
     {
-      ownerState: i,
+      ownerState: n,
       sx: t.sx,
-      "data-snapshot": b,
-      children: d === "panel" ? /* @__PURE__ */ n(u, { children: [
-        /* @__PURE__ */ e(w, { variant: "body2", children: t.label }),
-        /* @__PURE__ */ n(P, { children: [
-          /* @__PURE__ */ n(r, { justifyContent: "center", spacing: 0.5, sx: { flexShrink: 0 }, children: [
-            g,
-            t.description && /* @__PURE__ */ e(f, { variant: "caption", children: t.description })
+      "data-snapshot": T,
+      children: d === "panel" ? /* @__PURE__ */ i(m, { children: [
+        /* @__PURE__ */ e(c, { title: t.label, children: /* @__PURE__ */ e(v, { variant: "body2", children: t.label }) }),
+        /* @__PURE__ */ i(W, { children: [
+          /* @__PURE__ */ i(a, { justifyContent: "center", spacing: 0.5, sx: { flexShrink: 0 }, children: [
+            u,
+            t.description && /* @__PURE__ */ e(c, { title: t.description, children: /* @__PURE__ */ e(M, { variant: "caption", children: t.description }) })
           ] }),
-          C && /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
-            x,
+          g && /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
+            w,
             {
               type: t.chartType,
               data: t.value,
@@ -74,41 +84,41 @@ const G = (t) => {
             }
           ) })
         ] })
-      ] }) : /* @__PURE__ */ n(u, { children: [
-        I && a && /* @__PURE__ */ e(A, { ownerState: i, children: /* @__PURE__ */ e(a, { size: 24 }) }),
-        /* @__PURE__ */ n(
-          r,
+      ] }) : /* @__PURE__ */ i(m, { children: [
+        I && r && /* @__PURE__ */ e(A, { ownerState: n, children: /* @__PURE__ */ e(r, { size: 24 }) }),
+        /* @__PURE__ */ i(
+          a,
           {
             direction: "row",
             justifyContent: "space-between",
             alignItems: "flex-start",
             sx: { flex: 1 },
             children: [
-              o && a && s === "left" && /* @__PURE__ */ e(v, { ownerState: i, children: /* @__PURE__ */ e(a, { sx: { fontSize: 24 } }) }),
-              /* @__PURE__ */ n(D, { children: [
-                /* @__PURE__ */ e(w, { variant: "body2", children: t.label }),
-                g
+              C && r && x === "left" && /* @__PURE__ */ e(y, { ownerState: n, children: /* @__PURE__ */ e(r, { sx: { fontSize: 24 } }) }),
+              /* @__PURE__ */ i(D, { children: [
+                /* @__PURE__ */ e(c, { title: t.label, children: /* @__PURE__ */ e(v, { variant: "body2", children: t.label }) }),
+                u
               ] }),
-              o && a && s === "right" && /* @__PURE__ */ e(v, { ownerState: i, children: /* @__PURE__ */ e(a, { sx: { fontSize: 24 } }) })
+              C && r && x === "right" && /* @__PURE__ */ e(y, { ownerState: n, children: /* @__PURE__ */ e(r, { sx: { fontSize: 24 } }) })
             ]
           }
         ),
-        /* @__PURE__ */ n(
-          r,
+        /* @__PURE__ */ i(
+          a,
           {
             direction: { xs: "column-reverse", sm: "column" },
             spacing: 1,
             sx: { width: "100%", mt: 2 },
             children: [
-              t.description && /* @__PURE__ */ e(
-                f,
+              t.description && /* @__PURE__ */ e(c, { title: t.description, children: /* @__PURE__ */ e(
+                M,
                 {
                   variant: "caption",
                   sx: { textAlign: { xs: "center", sm: "left" } },
                   children: t.description
                 }
-              ),
-              C && /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(x, { type: t.chartType, data: t.value }) })
+              ) }),
+              g && /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(w, { type: t.chartType, data: t.value }) })
             ]
           }
         )
@@ -117,5 +127,5 @@ const G = (t) => {
   );
 };
 export {
-  G as MetricCard
+  H as MetricCard
 };

package/dist/components/metric-card/styled.js

@@ -1,25 +1,25 @@
-import { styled as i, alpha as g, Stack as C, Typography as c } from "@mui/material";
-import { Widget as u } from "../widget/styled.js";
-import { variantColor as l, resolvePaletteColor as d, trendColor as f } from "./helpers.js";
+import { styled as t, alpha as g, Stack as C, Typography as l } from "@mui/material";
+import { Widget as f } from "../widget/styled.js";
+import { variantColor as s, resolvePaletteColor as d, trendColor as u } from "./helpers.js";
 const e = {
   shouldForwardProp: (o) => o !== "ownerState"
-}, v = i(u.Root, {
+}, M = t(f.Root, {
   name: "HCMetricCard",
   slot: "Root",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  const a = l(o, n.variant), r = n.layout === "panel";
-  let t;
-  return a ? t = g(a, 0.05) : r && (t = o.palette.background.default), {
+})(({ theme: o, ownerState: i }) => {
+  const n = s(o, i.variant), a = i.layout === "panel";
+  let r;
+  return n ? r = g(n, 0.05) : a && (r = o.palette.background.default), {
     position: "relative",
     overflow: "hidden",
     padding: o.spacing(1.5, 2),
-    ...t && { backgroundColor: t },
+    ...r && { backgroundColor: r },
     [o.breakpoints.down("md")]: {
       padding: o.spacing(1.5)
     }
   };
-}), y = i(C, {
+}), w = t(C, {
   name: "HCMetricCard",
   slot: "Content"
 })(() => ({
@@ -27,64 +27,79 @@ const e = {
   width: "100%",
   minWidth: 0,
   zIndex: 1
-})), k = i(c, {
+})), m = t(l, {
   name: "HCMetricCard",
   slot: "Label"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
   marginBottom: o.spacing(0.5),
-  fontWeight: 500
-})), m = i(c, {
+  fontWeight: 500,
+  // Widgets live in a resizable grid with no character limit — clip to one line
+  // so a long label never wraps into a messy multi-row block. Full text on hover.
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
+})), y = t(l, {
   name: "HCMetricCard",
   slot: "Value",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  const a = d(o, n.calculatedValueColor), r = d(o, n.calculatedValueBg);
+})(({ theme: o, ownerState: i }) => {
+  const n = d(o, i.calculatedValueColor), a = d(o, i.calculatedValueBg);
   return {
-    color: a ?? l(o, n.variant) ?? o.palette.text.primary,
+    color: n ?? s(o, i.variant) ?? o.palette.text.primary,
     fontWeight: 500,
     marginBottom: o.spacing(0.5),
     whiteSpace: "nowrap",
-    ...r && {
-      backgroundColor: r,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "100%",
+    minWidth: 0,
+    ...a && {
+      backgroundColor: a,
       borderRadius: o.shape.borderRadius,
       padding: o.spacing(0, 0.75)
     },
     [o.breakpoints.down("md")]: { fontSize: "1.35rem" },
     [o.breakpoints.up("md")]: { fontSize: "2rem" }
   };
-}), S = i(c, {
+}), W = t(l, {
   name: "HCMetricCard",
   slot: "SecondValue",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  const a = d(o, n.calculatedSecondValueColor), r = d(o, n.calculatedSecondValueBg);
+})(({ theme: o, ownerState: i }) => {
+  const n = d(o, i.calculatedSecondValueColor), a = d(o, i.calculatedSecondValueBg);
   return {
-    color: a ?? o.palette.text.secondary,
+    color: n ?? o.palette.text.secondary,
     fontWeight: 400,
     whiteSpace: "nowrap",
-    ...r && {
-      backgroundColor: r,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "100%",
+    minWidth: 0,
+    ...a && {
+      backgroundColor: a,
       borderRadius: o.shape.borderRadius,
       padding: o.spacing(0, 0.75)
     },
     [o.breakpoints.down("md")]: { fontSize: "0.95rem" },
     [o.breakpoints.up("md")]: { fontSize: "1.25rem" }
   };
-}), H = i("div", {
+}), S = t("div", {
   name: "HCMetricCard",
   slot: "TrendContainer",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  const a = f(o, n.calculatedTrend), r = n.layout === "panel";
+})(({ theme: o, ownerState: i }) => {
+  const n = u(o, i.calculatedTrend), a = i.layout === "panel";
   return {
     display: "inline-flex",
     alignItems: "center",
     gap: o.spacing(0.5),
     fontWeight: 500,
-    color: a,
-    ...r ? {
-      backgroundColor: g(a, 0.14),
+    color: n,
+    ...a ? {
+      backgroundColor: g(n, 0.14),
       borderRadius: 999,
       padding: o.spacing(0.25, 1),
       fontSize: "0.8125rem",
@@ -97,45 +112,49 @@ const e = {
       }
     }
   };
-}), I = i(c, {
+}), h = t(l, {
   name: "HCMetricCard",
   slot: "Description"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
-  display: "block",
   position: "relative",
-  zIndex: 1
-})), R = i("div", {
+  zIndex: 1,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
+})), k = t("div", {
   name: "HCMetricCard",
   slot: "Icon",
   ...e
-})(({ theme: o, ownerState: n }) => ({
+})(({ theme: o, ownerState: i }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  color: l(o, n.variant) ?? o.palette.text.secondary,
-  marginRight: n.iconPosition === "left" ? o.spacing(2) : 0,
-  marginLeft: n.iconPosition === "right" ? o.spacing(2) : 0,
+  color: s(o, i.variant) ?? o.palette.text.secondary,
+  marginRight: i.iconPosition === "left" ? o.spacing(2) : 0,
+  marginLeft: i.iconPosition === "right" ? o.spacing(2) : 0,
   [o.breakpoints.down("sm")]: {
     position: "absolute",
     top: o.spacing(2),
     left: o.spacing(2),
     margin: 0
   }
-})), w = i("div", {
+})), H = t("div", {
   name: "HCMetricCard",
   slot: "CornerIcon",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  var s, p;
-  const a = {}, r = (s = n.iconPosition) != null && s.startsWith("top") ? "top" : "bottom", t = (p = n.iconPosition) != null && p.endsWith("left") ? "left" : "right";
-  return a[r] = o.spacing(2), a[t] = o.spacing(2), {
+})(({ theme: o, ownerState: i }) => {
+  var c, p;
+  const n = {}, a = (c = i.iconPosition) != null && c.startsWith("top") ? "top" : "bottom", r = (p = i.iconPosition) != null && p.endsWith("left") ? "left" : "right";
+  return n[a] = o.spacing(2), n[r] = o.spacing(2), {
     position: "absolute",
-    ...a,
-    color: l(o, n.variant) ?? o.palette.text.secondary,
+    ...n,
+    color: s(o, i.variant) ?? o.palette.text.secondary,
     zIndex: 2
   };
-}), z = i("div", {
+}), I = t("div", {
   name: "HCMetricCard",
   slot: "Chart"
 })(({ theme: o }) => ({
@@ -148,7 +167,7 @@ const e = {
   alignItems: "flex-end",
   overflow: "hidden",
   borderRadius: o.shape.borderRadius
-})), P = i("div", {
+})), R = t("div", {
   name: "HCMetricCard",
   slot: "Panel"
 })(({ theme: o }) => ({
@@ -165,7 +184,7 @@ const e = {
   backgroundColor: o.palette.background.paper,
   boxShadow: o.shadows[1],
   overflow: "hidden"
-})), W = i("div", {
+})), z = t("div", {
   name: "HCMetricCard",
   slot: "SideChart"
 })(() => ({
@@ -178,16 +197,16 @@ const e = {
   alignItems: "flex-end"
 }));
 export {
-  z as MetricCardChartContainer,
-  y as MetricCardContent,
-  w as MetricCardCornerIconContainer,
-  I as MetricCardDescription,
-  R as MetricCardIconContainer,
-  k as MetricCardLabel,
-  P as MetricCardPanel,
-  v as MetricCardRoot,
-  S as MetricCardSecondValue,
-  W as MetricCardSideChart,
-  H as MetricCardTrendContainer,
-  m as MetricCardValue
+  I as MetricCardChartContainer,
+  w as MetricCardContent,
+  H as MetricCardCornerIconContainer,
+  h as MetricCardDescription,
+  k as MetricCardIconContainer,
+  m as MetricCardLabel,
+  R as MetricCardPanel,
+  M as MetricCardRoot,
+  W as MetricCardSecondValue,
+  z as MetricCardSideChart,
+  S as MetricCardTrendContainer,
+  y as MetricCardValue
 };