@hybridcore/ui 1.6.5 → 1.6.7

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

@@ -1,5 +1,5 @@
-const e = (r, a = "default") => {
-  switch (a) {
+const n = (r, t = "default") => {
+  switch (t) {
     case "primary":
       return r.palette.primary.main;
     case "success":
@@ -11,8 +11,15 @@ const e = (r, a = "default") => {
     default:
       return;
   }
-}, t = (r, a) => a === "up" ? r.palette.success.main : a === "down" ? r.palette.error.main : r.palette.text.secondary;
+}, o = (r, t) => {
+  if (!t) return;
+  let e = r.palette;
+  for (const a of t.split("."))
+    e = e && typeof e == "object" ? e[a] : void 0;
+  return typeof e == "string" ? e : t;
+}, s = (r, t) => t === "up" ? r.palette.success.main : t === "down" ? r.palette.error.main : r.palette.text.secondary;
 export {
-  t as trendColor,
-  e as variantColor
+  o as resolvePaletteColor,
+  s as trendColor,
+  n as variantColor
 };

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

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

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

@@ -1,95 +1,112 @@
-import { useThemeProps as U } from "@mui/material";
-import { c as p } from "../../createReactComponent-C7L-DMHj.js";
+import { useThemeProps as q } from "@mui/material";
+import { formatValue as V, resolveConditionalStyle as z } from "../charts/_common/format.js";
+import { c as N } from "../../createReactComponent-C7L-DMHj.js";
 /**
  * @license @tabler/icons-react v3.44.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const A = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], B = p("outline", "arrow-right", "ArrowRight", A);
+const E = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], G = N("outline", "arrow-right", "ArrowRight", E);
 /**
  * @license @tabler/icons-react v3.44.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const O = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], V = p("outline", "trending-down", "TrendingDown", O);
+const K = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], Q = N("outline", "trending-down", "TrendingDown", K);
 /**
  * @license @tabler/icons-react v3.44.0 - MIT
  *
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Z = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], H = p("outline", "trending-up", "TrendingUp", Z), j = (I) => {
-  const r = U({ props: I, name: "HCMetricCard" }), {
-    value: o = [],
-    variant: M = "default",
-    layout: u = "overlay",
-    valuePrefix: T,
-    valueSuffix: b,
-    showChange: C = !1,
-    changeType: s = "percentage",
-    showTrend: $ = !1,
-    showIcon: f = !1,
-    icon: i,
-    iconPosition: l = "right"
-  } = r, k = o.length > 0, d = o[o.length - 1], m = o[o.length - 2], e = d ? Number(d.v) : NaN, t = m ? Number(m.v) : NaN, v = !isNaN(e) && !isNaN(t);
-  let c = "—", N = "";
-  if (!isNaN(e)) {
-    const y = new Intl.NumberFormat("en-US", {
-      maximumFractionDigits: 2
-    }).format(e);
-    c = `${T ?? ""}${y}${b ?? ""}`, N = d.t;
+const W = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], X = N("outline", "trending-up", "TrendingUp", W), ne = (_) => {
+  const i = q({ props: _, name: "HCMetricCard" }), {
+    value: l = [],
+    secondValue: y = [],
+    secondValueFormat: R,
+    variant: $ = "default",
+    layout: w = "overlay",
+    valuePrefix: D,
+    valueSuffix: P,
+    format: e,
+    showChange: B = !1,
+    changeType: c = "percentage",
+    showTrend: F = !1,
+    showIcon: C = !1,
+    icon: r,
+    iconPosition: d = "right"
+  } = i, A = l.length > 0, u = l[l.length - 1], b = l[l.length - 2], o = u ? Number(u.v) : NaN, n = b ? Number(b.v) : NaN, k = !isNaN(o) && !isNaN(n), g = {
+    prefix: (e == null ? void 0 : e.prefix) ?? D,
+    suffix: (e == null ? void 0 : e.suffix) ?? P,
+    decimals: e == null ? void 0 : e.decimals,
+    color: e == null ? void 0 : e.color,
+    backgroundColor: e == null ? void 0 : e.backgroundColor,
+    conditionalRules: e == null ? void 0 : e.conditionalRules
+  };
+  let a = "—", m = "", M, I;
+  if (!isNaN(o)) {
+    a = V(o, g), m = u.t;
+    const f = z(o, g);
+    M = f.color, I = f.backgroundColor;
   }
-  let a;
-  if (C)
-    if (v && !(t === 0 && s === "percentage")) {
-      const h = s === "absolute" ? e - t : (e - t) / t * 100, P = h > 0 ? "+" : h < 0 ? "−" : "", F = s === "percentage" ? 1 : 2, R = s === "percentage" ? "%" : "";
-      a = `${P}${Math.abs(h).toFixed(F)}${R}`;
+  let p;
+  const T = y[y.length - 1], x = T ? Number(T.v) : NaN;
+  isNaN(x) || (p = V(x, R ?? g));
+  let s;
+  if (B)
+    if (k && !(n === 0 && c === "percentage")) {
+      const v = c === "absolute" ? o - n : (o - n) / n * 100, J = v > 0 ? "+" : v < 0 ? "−" : "", L = c === "percentage" ? 1 : 2, j = c === "percentage" ? "%" : "";
+      s = `${J}${Math.abs(v).toFixed(L)}${j}`;
     } else
-      a = "—";
-  let n;
-  $ && v && (e > t ? n = "up" : e < t ? n = "down" : n = "neutral");
-  let g = B;
-  n === "up" ? g = H : n === "down" && (g = V);
-  const w = [
+      s = "—";
+  let t;
+  F && k && (o > n ? t = "up" : o < n ? t = "down" : t = "neutral");
+  let h = G;
+  t === "up" ? h = X : t === "down" && (h = Q);
+  const S = [
     "top-left",
     "top-right",
     "bottom-left",
     "bottom-right"
-  ].includes(l), _ = f && !!i && w, x = f && !!i && !w, D = JSON.stringify({
-    metric: r.label,
-    value: c,
-    change: a,
-    asOf: N
-  }), S = {
-    ...r,
-    variant: M,
-    layout: u,
-    changeType: s,
-    iconPosition: l,
-    calculatedValue: c,
-    calculatedChange: a,
-    calculatedTrend: n,
-    hasData: k
+  ].includes(d), O = C && !!r && S, U = C && !!r && !S, Z = JSON.stringify({
+    metric: i.label,
+    value: a,
+    change: s,
+    asOf: m
+  }), H = {
+    ...i,
+    variant: $,
+    layout: w,
+    changeType: c,
+    iconPosition: d,
+    calculatedValue: a,
+    calculatedSecondValue: p,
+    calculatedChange: s,
+    calculatedTrend: t,
+    calculatedValueColor: M,
+    calculatedValueBg: I,
+    hasData: A
   };
   return {
     refs: {},
     state: {
-      ownerState: S,
-      layout: u,
-      calculatedValue: c,
-      calculatedChange: a,
-      TrendIcon: g,
-      Icon: i,
-      showCornerIcon: _,
-      showSideIcon: x,
-      iconPosition: l,
-      snapshotPayload: D
+      ownerState: H,
+      layout: w,
+      calculatedValue: a,
+      calculatedSecondValue: p,
+      calculatedChange: s,
+      TrendIcon: h,
+      Icon: r,
+      showCornerIcon: O,
+      showSideIcon: U,
+      iconPosition: d,
+      snapshotPayload: Z
     },
     actions: {}
   };
 };
 export {
-  j as useMetricCardLogic
+  ne as useMetricCardLogic
 };

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

@@ -1,16 +1,16 @@
-import { styled as i, alpha as p, Stack as C, Typography as d } from "@mui/material";
-import { Widget as g } from "../widget/styled.js";
-import { variantColor as s, trendColor as f } from "./helpers.js";
+import { styled as i, alpha as C, Stack as g, Typography as d } from "@mui/material";
+import { Widget as f } from "../widget/styled.js";
+import { variantColor as s, resolvePaletteColor as p, trendColor as u } from "./helpers.js";
 const e = {
   shouldForwardProp: (o) => o !== "ownerState"
-}, x = i(g.Root, {
+}, v = i(f.Root, {
   name: "HCMetricCard",
   slot: "Root",
   ...e
-})(({ theme: o, ownerState: t }) => {
-  const n = s(o, t.variant), a = t.layout === "panel";
+})(({ theme: o, ownerState: n }) => {
+  const t = s(o, n.variant), a = n.layout === "panel";
   let r;
-  return n ? r = p(n, 0.05) : a && (r = o.palette.background.default), {
+  return t ? r = C(t, 0.05) : a && (r = o.palette.background.default), {
     position: "relative",
     overflow: "hidden",
     padding: o.spacing(1.5, 2),
@@ -19,7 +19,7 @@ const e = {
       padding: o.spacing(1.5)
     }
   };
-}), m = i(C, {
+}), y = i(g, {
   name: "HCMetricCard",
   slot: "Content"
 })(() => ({
@@ -27,38 +27,55 @@ const e = {
   width: "100%",
   minWidth: 0,
   zIndex: 1
-})), v = i(d, {
+})), m = i(d, {
   name: "HCMetricCard",
   slot: "Label"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
   marginBottom: o.spacing(0.5),
   fontWeight: 500
-})), y = i(d, {
+})), k = i(d, {
   name: "HCMetricCard",
   slot: "Value",
   ...e
-})(({ theme: o, ownerState: t }) => ({
-  color: s(o, t.variant) ?? o.palette.text.primary,
-  fontWeight: 500,
-  marginBottom: o.spacing(0.5),
+})(({ theme: o, ownerState: n }) => {
+  const t = p(o, n.calculatedValueColor), a = p(o, n.calculatedValueBg);
+  return {
+    color: t ?? s(o, n.variant) ?? o.palette.text.primary,
+    fontWeight: 500,
+    marginBottom: o.spacing(0.5),
+    whiteSpace: "nowrap",
+    ...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" }
+  };
+}), w = i(d, {
+  name: "HCMetricCard",
+  slot: "SecondValue"
+})(({ theme: o }) => ({
+  color: o.palette.text.secondary,
+  fontWeight: 400,
   whiteSpace: "nowrap",
-  [o.breakpoints.down("md")]: { fontSize: "1.35rem" },
-  [o.breakpoints.up("md")]: { fontSize: "2rem" }
-})), I = i("div", {
+  [o.breakpoints.down("md")]: { fontSize: "0.95rem" },
+  [o.breakpoints.up("md")]: { fontSize: "1.25rem" }
+})), H = i("div", {
   name: "HCMetricCard",
   slot: "TrendContainer",
   ...e
-})(({ theme: o, ownerState: t }) => {
-  const n = f(o, t.calculatedTrend), a = t.layout === "panel";
+})(({ theme: o, ownerState: n }) => {
+  const t = u(o, n.calculatedTrend), a = n.layout === "panel";
   return {
     display: "inline-flex",
     alignItems: "center",
     gap: o.spacing(0.5),
     fontWeight: 500,
-    color: n,
+    color: t,
     ...a ? {
-      backgroundColor: p(n, 0.14),
+      backgroundColor: C(t, 0.14),
       borderRadius: 999,
       padding: o.spacing(0.25, 1),
       fontSize: "0.8125rem",
@@ -71,7 +88,7 @@ const e = {
       }
     }
   };
-}), k = i(d, {
+}), I = i(d, {
   name: "HCMetricCard",
   slot: "Description"
 })(({ theme: o }) => ({
@@ -79,34 +96,34 @@ const e = {
   display: "block",
   position: "relative",
   zIndex: 1
-})), w = i("div", {
+})), S = i("div", {
   name: "HCMetricCard",
   slot: "Icon",
   ...e
-})(({ theme: o, ownerState: t }) => ({
+})(({ theme: o, ownerState: n }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  color: s(o, t.variant) ?? o.palette.text.secondary,
-  marginRight: t.iconPosition === "left" ? o.spacing(2) : 0,
-  marginLeft: t.iconPosition === "right" ? o.spacing(2) : 0,
+  color: s(o, n.variant) ?? o.palette.text.secondary,
+  marginRight: n.iconPosition === "left" ? o.spacing(2) : 0,
+  marginLeft: n.iconPosition === "right" ? o.spacing(2) : 0,
   [o.breakpoints.down("sm")]: {
     position: "absolute",
     top: o.spacing(2),
     left: o.spacing(2),
     margin: 0
   }
-})), H = i("div", {
+})), z = i("div", {
   name: "HCMetricCard",
   slot: "CornerIcon",
   ...e
-})(({ theme: o, ownerState: t }) => {
+})(({ theme: o, ownerState: n }) => {
   var c, l;
-  const n = {}, a = (c = t.iconPosition) != null && c.startsWith("top") ? "top" : "bottom", r = (l = t.iconPosition) != null && l.endsWith("left") ? "left" : "right";
-  return n[a] = o.spacing(2), n[r] = o.spacing(2), {
+  const t = {}, a = (c = n.iconPosition) != null && c.startsWith("top") ? "top" : "bottom", r = (l = n.iconPosition) != null && l.endsWith("left") ? "left" : "right";
+  return t[a] = o.spacing(2), t[r] = o.spacing(2), {
     position: "absolute",
-    ...n,
-    color: s(o, t.variant) ?? o.palette.text.secondary,
+    ...t,
+    color: s(o, n.variant) ?? o.palette.text.secondary,
     zIndex: 2
   };
 }), P = i("div", {
@@ -122,7 +139,7 @@ const e = {
   alignItems: "flex-end",
   overflow: "hidden",
   borderRadius: o.shape.borderRadius
-})), S = i("div", {
+})), R = i("div", {
   name: "HCMetricCard",
   slot: "Panel"
 })(({ theme: o }) => ({
@@ -139,7 +156,7 @@ const e = {
   backgroundColor: o.palette.background.paper,
   boxShadow: o.shadows[1],
   overflow: "hidden"
-})), z = i("div", {
+})), W = i("div", {
   name: "HCMetricCard",
   slot: "SideChart"
 })(() => ({
@@ -153,14 +170,15 @@ const e = {
 }));
 export {
   P as MetricCardChartContainer,
-  m as MetricCardContent,
-  H as MetricCardCornerIconContainer,
-  k as MetricCardDescription,
-  w as MetricCardIconContainer,
-  v as MetricCardLabel,
-  S as MetricCardPanel,
-  x as MetricCardRoot,
-  z as MetricCardSideChart,
-  I as MetricCardTrendContainer,
-  y as MetricCardValue
+  y as MetricCardContent,
+  z as MetricCardCornerIconContainer,
+  I as MetricCardDescription,
+  S as MetricCardIconContainer,
+  m as MetricCardLabel,
+  R as MetricCardPanel,
+  v as MetricCardRoot,
+  w as MetricCardSecondValue,
+  W as MetricCardSideChart,
+  H as MetricCardTrendContainer,
+  k as MetricCardValue
 };