@hybridcore/ui 1.6.7 → 1.6.9

package/dist/components/charts/stacked-column-chart/logic.js

@@ -1,143 +1,155 @@
-import { R as q, A as I, T as R, L as N } from "../../../AnimatedTheme-jnasw6rT.js";
-import { useThemeProps as P, useTheme as z } from "@mui/material";
-import H from "dayjs";
+import { R as V, A as q } from "../../../AnimatedTheme-BOKdw2Oy.js";
+import { useThemeProps as I, useTheme as N } from "@mui/material";
+import P from "dayjs";
 import v from "lodash";
-import { useId as _, useRef as $, useEffect as G } from "react";
-import { humanizeLabel as J } from "../_common/format.js";
-import { applyValueFormat as K, colorSetFromPalette as Q } from "../_common/utils.js";
-import { c as p, a as f, p as W } from "../../../ColorSet-C7vpNXhM.js";
-import { X as Z, V as ee } from "../../../AxisRenderer-DTyLLA6c.js";
-import { A as te, a as re } from "../../../AxisRendererY-C_ItLPNV.js";
-import { C as D } from "../../../CategoryAxis-CwnfaGc8.js";
-import { L as oe } from "../../../Legend-Dp_MKfS4.js";
-import { C as ae } from "../../../ColumnSeries-CjgdJ2QL.js";
-import { B as se } from "../../../Bullet-DVczI2TD.js";
-const ve = (O) => {
-  const w = P({
-    props: O,
+import { useId as z, useRef as H, useEffect as _ } from "react";
+import { humanizeLabel as $ } from "../_common/format.js";
+import { attachCombinedAxisTooltip as G } from "../_common/tooltip.js";
+import { applyValueFormat as J, colorSetFromPalette as K } from "../_common/utils.js";
+import { c as p, a as h, p as Q } from "../../../Entity-CCUIdRAr.js";
+import { X as W, V as Z } from "../../../AxisRenderer-lUbezuh7.js";
+import { A as ee, a as te } from "../../../AxisRendererY-DbSiyb45.js";
+import { C as D } from "../../../CategoryAxis-B8KQp1pE.js";
+import { L as re } from "../../../Legend-kbCFjJAW.js";
+import { X as oe } from "../../../XYCursor-gHAo40xC.js";
+import { C as ae } from "../../../ColumnSeries-rgnGm-Bg.js";
+import { B as se } from "../../../Bullet-PgoNb3Jv.js";
+import { L as ne } from "../../../Tooltip-A_HlttXp.js";
+const Xe = (L) => {
+  const C = I({
+    props: L,
     name: "HCStackedColumnChart"
   }), {
-    dimensions: d,
+    dimensions: u,
     values: n,
-    data: C,
-    initDelay: b = 0,
-    baseInterval: h,
+    data: w,
+    initDelay: R = 0,
+    baseInterval: d,
     colors: k,
-    sx: B,
-    ...E
-  } = w, l = z(), T = `hc-stacked-column-chart-${_().replace(/:/g, "")}`, x = $(null);
-  let u = null;
-  d.length < 2 ? u = "StackedColumnChart requires at least 2 dimensions" : n.length < 1 && (u = "StackedColumnChart requires at least 1 value"), G(() => {
-    if (u) return;
-    let y;
-    return y = setTimeout(() => {
-      var X, S, L;
-      const e = q.new(T);
-      x.current = e, K(e, (X = n == null ? void 0 : n[0]) == null ? void 0 : X.format), e.setThemes([I.new(e)]), e.interfaceColors.setAll({
-        text: p(l.palette.text.primary),
-        grid: p(l.palette.divider),
-        stroke: p(l.palette.divider)
+    sx: O,
+    ...B
+  } = C, i = N(), T = `hc-stacked-column-chart-${z().replace(/:/g, "")}`, x = H(null);
+  let f = null;
+  u.length < 2 ? f = "StackedColumnChart requires at least 2 dimensions" : n.length < 1 && (f = "StackedColumnChart requires at least 1 value"), _(() => {
+    if (f) return;
+    let A;
+    return A = setTimeout(() => {
+      var F, S, b;
+      const e = V.new(T);
+      x.current = e, J(e, (F = n == null ? void 0 : n[0]) == null ? void 0 : F.format), e.setThemes([q.new(e)]), e.interfaceColors.setAll({
+        text: p(i.palette.text.primary),
+        grid: p(i.palette.divider),
+        stroke: p(i.palette.divider)
       });
-      const s = e.container.children.push(
-        Z.new(e, {
+      const o = e.container.children.push(
+        W.new(e, {
           panX: !1,
           panY: !1,
           wheelX: "none",
           wheelY: "none",
+          maxTooltipDistance: -1,
           layout: e.verticalLayout
         })
       );
-      s.set("colors", Q(e, k)), s.get("colors", {}).set("step", 2);
-      const Y = te.new(e, {});
+      o.set("colors", K(e, k)), o.get("colors", {}).set("step", 2);
+      const Y = ee.new(e, {});
       Y.grid.template.setAll({ location: 1 });
-      const o = d[0], j = d[1];
-      let c, m = C;
-      if (o.type === "date") {
-        const t = (h == null ? void 0 : h.timeUnit) || "day";
-        let a = "DD/MM/YYYY";
-        t === "month" ? a = "MM YYYY" : t === "year" && (a = "YYYY"), c = s.xAxes.push(
+      const a = u[0], M = u[1];
+      let l, c = w;
+      if (a.type === "date") {
+        const t = (d == null ? void 0 : d.timeUnit) || "day";
+        let s = "DD/MM/YYYY";
+        t === "month" ? s = "MM YYYY" : t === "year" && (s = "YYYY"), l = o.xAxes.push(
           D.new(e, {
-            categoryField: o.value,
-            renderer: Y,
-            tooltip: R.new(e, {})
+            categoryField: a.value,
+            renderer: Y
           })
-        ), m = v.orderBy(m, [o.value]), m = m.map((r) => ({
+        ), c = v.orderBy(c, [a.value]), c = c.map((r) => ({
           ...r,
-          [o.value]: H(r[o.value]).format(a)
+          [a.value]: P(r[a.value]).format(s)
         }));
       } else
-        c = s.xAxes.push(
+        l = o.xAxes.push(
           D.new(e, {
-            categoryField: o.value,
-            renderer: Y,
-            tooltip: R.new(e, {})
+            categoryField: a.value,
+            renderer: Y
           })
         );
-      const i = [], g = v.groupBy(m, j.value);
-      Object.keys(g).forEach((t) => {
-        g[t].forEach((a) => {
-          const r = a[o.value], A = v.findIndex(i, { [o.value]: r });
-          A === -1 ? i.push({
-            [o.value]: r,
-            [t]: a[n[0].dataFieldName]
-          }) : i[A] = {
-            ...i[A],
-            [t]: a[n[0].dataFieldName]
+      const m = [], y = v.groupBy(c, M.value);
+      Object.keys(y).forEach((t) => {
+        y[t].forEach((s) => {
+          const r = s[a.value], g = v.findIndex(m, { [a.value]: r });
+          g === -1 ? m.push({
+            [a.value]: r,
+            [t]: s[n[0].dataFieldName]
+          }) : m[g] = {
+            ...m[g],
+            [t]: s[n[0].dataFieldName]
           };
         });
-      }), c.data.setAll(i);
-      const F = s.yAxes.push(
-        ee.new(e, {
+      }), l.data.setAll(m);
+      const X = o.yAxes.push(
+        Z.new(e, {
           min: 0,
-          renderer: re.new(e, { strokeOpacity: 0.1 })
+          renderer: te.new(e, { strokeOpacity: 0.1 })
         })
-      ), U = s.children.push(
-        oe.new(e, {
-          centerX: f,
-          x: f
+      ), j = o.children.push(
+        re.new(e, {
+          centerX: h,
+          x: h
         })
       );
-      (S = c.get("renderer")) == null || S.grid.template.setAll({
-        stroke: p(l.palette.divider),
+      (S = l.get("renderer")) == null || S.grid.template.setAll({
+        stroke: p(i.palette.divider),
         strokeOpacity: 1
-      }), (L = F.get("renderer")) == null || L.grid.template.setAll({
-        stroke: p(l.palette.divider),
+      }), (b = X.get("renderer")) == null || b.grid.template.setAll({
+        stroke: p(i.palette.divider),
         strokeOpacity: 1
       });
-      function V(t, a) {
-        const r = s.series.push(
+      function U(t, s) {
+        const r = o.series.push(
           ae.new(e, {
             name: t,
             stacked: !0,
-            xAxis: c,
-            yAxis: F,
-            valueYField: a,
-            categoryXField: o.value
+            xAxis: l,
+            yAxis: X,
+            valueYField: s,
+            categoryXField: a.value
           })
         );
         r.columns.template.setAll({
-          tooltipText: "{name}, {categoryX}: {valueY}",
-          tooltipY: W(10)
-        }), r.data.setAll(i), r.appear(), r.bullets.push(function() {
+          tooltipY: Q(10)
+        }), r.data.setAll(m), r.appear(), r.bullets.push(function() {
           return se.new(e, {
-            sprite: N.new(e, {
+            sprite: ne.new(e, {
               fill: e.interfaceColors.get("alternativeText"),
-              centerY: f,
-              centerX: f,
+              centerY: h,
+              centerX: h,
               populateText: !0
             })
           });
-        }), U.data.push(r);
+        }), j.data.push(r);
       }
-      Object.keys(g).forEach((t) => V(J(t), t)), s.appear(1e3, 100);
-    }, b), () => {
+      Object.keys(y).forEach((t) => U($(t), t)), o.set(
+        "cursor",
+        oe.new(e, { xAxis: l, behavior: "none" })
+      ).lineY.set("visible", !1), G({
+        root: e,
+        chart: o,
+        xAxis: l,
+        theme: i,
+        isDateAxis: !1,
+        baseInterval: d,
+        follow: !0
+      }), o.appear(1e3, 100);
+    }, R), () => {
       var e;
-      y && clearTimeout(y), (e = x.current) == null || e.dispose(), x.current = null;
+      A && clearTimeout(A), (e = x.current) == null || e.dispose(), x.current = null;
     };
-  }, [C, d, n, l.palette.mode, k]);
-  const M = { ...w };
-  return { chartId: T, ownerState: M, sx: B, error: u, other: E };
+  }, [w, u, n, i.palette.mode, k]);
+  const E = { ...C };
+  return { chartId: T, ownerState: E, sx: O, error: f, other: B };
 };
 export {
-  ve as useStackedColumnChartLogic
+  Xe as useStackedColumnChartLogic
 };

package/dist/components/charts/xy-chart/logic.js

@@ -1,172 +1,184 @@
-import { R as V, A as W, T as x, b as z, L as G } from "../../../AnimatedTheme-jnasw6rT.js";
-import { useThemeProps as N, useTheme as j } from "@mui/material";
-import X from "lodash";
-import { useId as H, useRef as M, useEffect as U } from "react";
+import { R as P, A as V } from "../../../AnimatedTheme-BOKdw2Oy.js";
+import { useThemeProps as W, useTheme as z } from "@mui/material";
+import Y from "lodash";
+import { useId as G, useRef as N, useEffect as j } from "react";
 import { humanizeLabel as k } from "../_common/format.js";
-import { colorSetFromPalette as _, applyValueFormat as $ } from "../_common/utils.js";
-import { c as p, a as g, p as q } from "../../../ColorSet-C7vpNXhM.js";
-import { X as J, V as K } from "../../../AxisRenderer-DTyLLA6c.js";
-import { L as Q } from "../../../Legend-Dp_MKfS4.js";
-import { D as Z } from "../../../DateAxis-YX3QNIB-.js";
-import { A as F, a as ee } from "../../../AxisRendererY-C_ItLPNV.js";
-import { C as te } from "../../../CategoryAxis-CwnfaGc8.js";
-import { C as re } from "../../../ColumnSeries-CjgdJ2QL.js";
-import { D as oe } from "../../../DataProcessor-CHDO51q4.js";
-import { B as ae } from "../../../Bullet-DVczI2TD.js";
-const be = (L) => {
-  const y = N({ props: L, name: "HCXYChart" }), {
-    dimensions: c,
+import { attachCombinedAxisTooltip as H } from "../_common/tooltip.js";
+import { colorSetFromPalette as M, applyValueFormat as U } from "../_common/utils.js";
+import { c, a as x, p as _ } from "../../../Entity-CCUIdRAr.js";
+import { X as $, V as q } from "../../../AxisRenderer-lUbezuh7.js";
+import { L as J } from "../../../Legend-kbCFjJAW.js";
+import { D as K } from "../../../DateAxis-zNtbSVjW.js";
+import { A as F, a as Q } from "../../../AxisRendererY-DbSiyb45.js";
+import { C as Z } from "../../../CategoryAxis-B8KQp1pE.js";
+import { T as ee, R as te, L as re } from "../../../Tooltip-A_HlttXp.js";
+import { X as oe } from "../../../XYCursor-gHAo40xC.js";
+import { C as ae } from "../../../ColumnSeries-rgnGm-Bg.js";
+import { D as se } from "../../../DataProcessor-CvIe9BVn.js";
+import { B as ie } from "../../../Bullet-PgoNb3Jv.js";
+const Ye = (L) => {
+  const y = W({ props: L, name: "HCXYChart" }), {
+    dimensions: m,
     values: n,
     data: d,
     initDelay: R = 0,
-    baseInterval: O,
-    colors: w,
-    sx: B,
-    ...S
-  } = y, i = j(), A = `hc-xy-chart-${H().replace(/:/g, "")}`, u = M(null), b = c.length < 1 ? "Missing dimensions config!" : null;
-  U(() => {
+    baseInterval: A,
+    colors: g,
+    sx: O,
+    ...B
+  } = y, i = z(), w = `hc-xy-chart-${G().replace(/:/g, "")}`, u = N(null), b = m.length < 1 ? "Missing dimensions config!" : null;
+  j(() => {
     if (b) return;
     let f;
     return f = setTimeout(() => {
-      var C, Y, D;
-      const e = V.new(A);
-      u.current = e, e.setThemes([W.new(e)]), e.interfaceColors.setAll({
-        text: p(i.palette.text.primary),
-        grid: p(i.palette.divider),
-        stroke: p(i.palette.divider)
+      var T, D, X;
+      const e = P.new(w);
+      u.current = e, e.setThemes([V.new(e)]), e.interfaceColors.setAll({
+        text: c(i.palette.text.primary),
+        grid: c(i.palette.divider),
+        stroke: c(i.palette.divider)
       });
-      const o = e.container.children.push(
-        J.new(e, {
+      const r = e.container.children.push(
+        $.new(e, {
           panX: !1,
           panY: !1,
           wheelX: "none",
           wheelY: "none",
+          // Let the cursor surface the combined tooltip anywhere in the plot.
+          maxTooltipDistance: -1,
           layout: e.verticalLayout
         })
       );
-      o.set("colors", _(e, w));
-      const I = o.children.push(
-        Q.new(e, {
-          centerX: g,
-          x: g
+      r.set("colors", M(e, g));
+      const E = r.children.push(
+        J.new(e, {
+          centerX: x,
+          x
         })
-      ), a = c[0];
-      let s, m = d;
+      ), a = m[0];
+      let o, p = d;
       if (a.type === "date")
-        s = o.xAxes.push(
-          Z.new(e, {
+        o = r.xAxes.push(
+          K.new(e, {
             maxDeviation: 0,
-            baseInterval: O || { timeUnit: "day", count: 1 },
-            renderer: F.new(e, { minGridDistance: 60 }),
-            tooltip: x.new(e, {})
+            baseInterval: A || { timeUnit: "day", count: 1 },
+            renderer: F.new(e, { minGridDistance: 60 })
           })
-        ), m = X.orderBy(d, [a.value]);
+        ), p = Y.orderBy(d, [a.value]);
       else {
         const t = F.new(e, {
           cellStartLocation: 0.1,
           cellEndLocation: 0.9,
           minGridDistance: 30
         });
-        s = o.xAxes.push(
-          te.new(e, {
+        o = r.xAxes.push(
+          Z.new(e, {
             categoryField: a.value,
-            renderer: t,
-            tooltip: x.new(e, {})
+            renderer: t
           })
-        ), t.grid.template.setAll({ location: 1 }), s.labelsContainer.set(
+        ), t.grid.template.setAll({ location: 1 }), o.labelsContainer.set(
           "tooltip",
-          x.new(e, { pointerOrientation: "down" })
+          ee.new(e, { pointerOrientation: "down" })
         ), t.labels.template.setAll({
           oversizedBehavior: "truncate",
           maxWidth: 150,
           tooltipText: "{category}"
-        }), t.labels.template.setup = function(r) {
-          r.set(
+        }), t.labels.template.setup = function(s) {
+          s.set(
             "background",
-            z.new(e, {
-              fill: p(0),
+            te.new(e, {
+              fill: c(0),
               fillOpacity: 0
             })
           );
-        }, s.onPrivate("cellWidth", function(r) {
-          t.labels.template.set("maxWidth", r);
+        }, o.onPrivate("cellWidth", function(s) {
+          t.labels.template.set("maxWidth", s);
         }), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), s.data.setAll(m);
+        }), o.data.setAll(p);
       }
-      const v = o.yAxes.push(
-        K.new(e, {
-          renderer: ee.new(e, { strokeOpacity: 0.1 })
+      const v = r.yAxes.push(
+        q.new(e, {
+          renderer: Q.new(e, { strokeOpacity: 0.1 })
         })
       );
-      (C = s.get("renderer")) == null || C.grid.template.setAll({
-        stroke: p(i.palette.divider),
+      (T = o.get("renderer")) == null || T.grid.template.setAll({
+        stroke: c(i.palette.divider),
         strokeOpacity: 1
-      }), (Y = v.get("renderer")) == null || Y.grid.template.setAll({
-        stroke: p(i.palette.divider),
+      }), (D = v.get("renderer")) == null || D.grid.template.setAll({
+        stroke: c(i.palette.divider),
         strokeOpacity: 1
       });
-      function T(t, r, h, P) {
-        const l = o.series.push(
-          re.new(e, {
+      function C(t, s, h, I) {
+        const l = r.series.push(
+          ae.new(e, {
             name: t,
-            xAxis: s,
+            xAxis: o,
             yAxis: v,
-            valueYField: P,
+            valueYField: I,
             ...a.type === "date" ? { valueXField: h } : { categoryXField: h }
           })
         );
         l.columns.template.setAll({
-          tooltipText: "{name}, {categoryX}:{valueY}",
-          width: q(90),
-          tooltipY: 0,
+          width: _(90),
           strokeOpacity: 0
-        }), a.type === "date" && (l.data.processor = oe.new(e, {
+        }), a.type === "date" && (l.data.processor = se.new(e, {
           dateFormat: "i",
           dateFields: [h]
-        })), l.data.setAll(r), l.appear(), l.bullets.push(function() {
-          return ae.new(e, {
+        })), l.data.setAll(s), l.appear(), l.bullets.push(function() {
+          return ie.new(e, {
             locationY: 0,
-            sprite: G.new(e, {
+            sprite: re.new(e, {
               text: "{valueY}",
               fill: e.interfaceColors.get("alternativeText"),
               centerY: 0,
-              centerX: g,
+              centerX: x,
               populateText: !0
             })
           });
-        }), I.data.push(l);
+        }), E.data.push(l);
       }
-      if (c.length === 1)
+      if (m.length === 1)
         n.forEach((t) => {
-          T(
+          C(
             t.label ?? k(t.name),
-            m,
+            p,
             a.value,
             t.dataFieldName
           );
         });
       else {
-        const t = X.groupBy(m, c[1].value);
-        Object.keys(t).forEach((r) => {
-          T(
-            k(r),
-            t[r],
+        const t = Y.groupBy(p, m[1].value);
+        Object.keys(t).forEach((s) => {
+          C(
+            k(s),
+            t[s],
             a.value,
             n[0].dataFieldName
           );
         });
       }
-      $(e, (D = n == null ? void 0 : n[0]) == null ? void 0 : D.format), o.appear(1e3, 100);
+      r.set(
+        "cursor",
+        oe.new(e, { xAxis: o, behavior: "none" })
+      ).lineY.set("visible", !1), H({
+        root: e,
+        chart: r,
+        xAxis: o,
+        theme: i,
+        isDateAxis: a.type === "date",
+        baseInterval: A,
+        follow: !0
+      }), U(e, (X = n == null ? void 0 : n[0]) == null ? void 0 : X.format), r.appear(1e3, 100);
     }, R), () => {
       var e;
       f && clearTimeout(f), (e = u.current) == null || e.dispose(), u.current = null;
     };
-  }, [d, c, n, i.palette.mode, w]);
-  const E = { ...y };
-  return { chartId: A, ownerState: E, sx: B, error: b, other: S };
+  }, [d, m, n, i.palette.mode, g]);
+  const S = { ...y };
+  return { chartId: w, ownerState: S, sx: O, error: b, other: B };
 };
 export {
-  be as useXYChartLogic
+  Ye as useXYChartLogic
 };

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

@@ -1,27 +1,28 @@
 import { jsx as h } from "react/jsx-runtime";
-import { R as u, A, T as g } from "../../AnimatedTheme-jnasw6rT.js";
-import { useTheme as v, alpha as w } from "@mui/material";
-import { useRef as x, useLayoutEffect as y } from "react";
-import { X as R, V as L } from "../../AxisRenderer-DTyLLA6c.js";
-import { C as T } from "../../CategoryAxis-CwnfaGc8.js";
-import { A as b, a as X } from "../../AxisRendererY-C_ItLPNV.js";
-import { C } from "../../ColumnSeries-CjgdJ2QL.js";
-import { c as a } from "../../ColorSet-C7vpNXhM.js";
-import { L as Y } from "../../LineSeries-Uiv5o56b.js";
-import { L as F } from "../../LinearGradient-DiRq5YcI.js";
-const q = ({
-  data: l,
+import { R as u, A } from "../../AnimatedTheme-BOKdw2Oy.js";
+import { useTheme as g, alpha as v } from "@mui/material";
+import { useRef as w, useLayoutEffect as x } from "react";
+import { X as y, V as R } from "../../AxisRenderer-lUbezuh7.js";
+import { C as L } from "../../CategoryAxis-B8KQp1pE.js";
+import { A as T, a as b } from "../../AxisRendererY-DbSiyb45.js";
+import { T as X } from "../../Tooltip-A_HlttXp.js";
+import { C } from "../../ColumnSeries-rgnGm-Bg.js";
+import { c as a } from "../../Entity-CCUIdRAr.js";
+import { L as Y } from "../../LineSeries-BLFvwrLT.js";
+import { L as F } from "../../LinearGradient-C7rnipF7.js";
+const z = ({
+  data: o,
   type: p,
   inset: d = !1,
   gradient: m = !1
 }) => {
-  const o = x(null), t = v();
-  return y(() => {
-    if (!o.current) return;
-    const e = u.new(o.current);
+  const l = w(null), t = g();
+  return x(() => {
+    if (!l.current) return;
+    const e = u.new(l.current);
     e.setThemes([A.new(e)]);
     const i = e.container.children.push(
-      R.new(e, {
+      y.new(e, {
         panX: !1,
         panY: !1,
         wheelX: "none",
@@ -32,21 +33,21 @@ const q = ({
         paddingBottom: 0
       })
     ), s = i.xAxes.push(
-      T.new(e, {
+      L.new(e, {
         categoryField: "t",
-        renderer: b.new(e, {
+        renderer: T.new(e, {
           minGridDistance: 10
         }),
-        tooltip: g.new(e, {})
+        tooltip: X.new(e, {})
       })
     ), c = s.get("renderer");
     c.grid.template.set("visible", !1), c.labels.template.set("visible", !1), s.setAll({
       startLocation: 0.5,
       endLocation: 0.5
-    }), s.data.setAll(l);
+    }), s.data.setAll(o);
     const n = i.yAxes.push(
-      L.new(e, {
-        renderer: X.new(e, {})
+      R.new(e, {
+        renderer: b.new(e, {})
       })
     ), f = n.get("renderer");
     f.grid.template.set("visible", !1), f.labels.template.set("visible", !1);
@@ -72,7 +73,7 @@ const q = ({
         valueYField: "v",
         categoryXField: "t",
         // @ts-expect-error amcharts5 typing accepts string/Color; alpha returns rgba string
-        fill: w(t.palette.divider, 0.25),
+        fill: v(t.palette.divider, 0.25),
         stroke: a(t.palette.divider)
       })
     ), r.strokes.template.setAll({
@@ -89,13 +90,13 @@ const q = ({
           ]
         })
       }
-    })), r.data.setAll(l), r.appear(1e3), i.appear(1e3, 100), () => {
+    })), r.data.setAll(o), r.appear(1e3), i.appear(1e3, 100), () => {
       e.dispose();
     };
-  }, [l, p, d, m, t.palette.mode, t.palette.divider]), /* @__PURE__ */ h(
+  }, [o, p, d, m, t.palette.mode, t.palette.divider]), /* @__PURE__ */ h(
     "div",
     {
-      ref: o,
+      ref: l,
       style: d ? { width: "100%", height: "100%" } : {
         width: "calc(100% + 10px)",
         height: "100%",
@@ -106,5 +107,5 @@ const q = ({
   );
 };
 export {
-  q as MetricChart
+  z as MetricChart
 };

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

@@ -42,7 +42,7 @@ const G = (t) => {
       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", children: l })
+          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 }),