@hybridcore/ui 1.6.20 → 1.6.22

package/dist/components/charts/logaritmic-scale/logic.js

@@ -1,6 +1,6 @@
-import { R as Y, A as R } from "../../../AnimatedTheme-ktdO3Bel.js";
-import { useThemeProps as E, useTheme as I } from "@mui/material";
-import F from "lodash";
+import { R as T, A as Y } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useThemeProps as R, useTheme as E } from "@mui/material";
+import I from "lodash";
 import { useId as G, useRef as O, useEffect as P } from "react";
 import { humanizeLabel as V } from "../_common/format.js";
 import { attachCombinedAxisTooltip as q } from "../_common/tooltip.js";
@@ -8,32 +8,32 @@ import { colorSetFromPalette as z, applyDateAxisLabelFormat as B, applyValueForm
 import { c as i } from "../../../Entity-BJCuhdq_.js";
 import { X as N, V as U } from "../../../AxisRenderer-BCQoUJw6.js";
 import { X as W } from "../../../XYCursor-CVUSpqb9.js";
-import { A as X, a as Z } from "../../../AxisRendererY-AXWvGU6r.js";
+import { A as F, a as Z } from "../../../AxisRendererY-AXWvGU6r.js";
 import { C as _ } from "../../../CategoryAxis-B6NqW8qd.js";
 import { L as $ } from "../../../LineSeries-D_IL2qGF.js";
 import { D as j, G as J } from "../../../GaplessDateAxis-B2g2jgSG.js";
 import { S as K } from "../../../Scrollbar-CTI7_8Qw.js";
 import { D as M } from "../../../DateAxis-DEXKps1S.js";
-const xe = (k) => {
-  const f = E({ props: k, name: "HCLogaritmicScale" }), {
+const xe = (X) => {
+  const f = R({ props: X, name: "HCLogaritmicScale" }), {
     dimensions: t,
     values: s,
-    data: n,
-    initDelay: L = 0,
+    data: p,
+    initDelay: k = 0,
     baseInterval: h,
     colors: A,
     skipEmptyDates: x = !1,
-    sx: S,
-    ...C
-  } = f, a = I(), g = `hc-logaritmic-scale-${G().replace(/:/g, "")}`, d = O(null);
-  let m = null;
-  t.length < 1 ? m = "LogaritmicScale requires at least 1 dimension" : s.length < 1 && (m = "LogaritmicScale requires at least 1 value"), P(() => {
-    if (m) return;
-    let u;
-    return u = setTimeout(() => {
-      var v, w, D, b;
-      const e = Y.new(g);
-      d.current = e, e.setThemes([R.new(e)]), e.interfaceColors.setAll({
+    sx: L,
+    ...S
+  } = f, a = E(), g = `hc-logaritmic-scale-${G().replace(/:/g, "")}`, c = O(null);
+  let n = null;
+  t.length < 1 ? n = "LogaritmicScale requires at least 1 dimension" : s.length < 1 && (n = "LogaritmicScale requires at least 1 value"), P(() => {
+    if (n) return;
+    let d;
+    return d = setTimeout(() => {
+      var w, v, D, b;
+      const e = T.new(g);
+      c.current = e, e.setThemes([Y.new(e)]), e.interfaceColors.setAll({
         text: i(a.palette.text.primary),
         grid: i(a.palette.divider),
         stroke: i(a.palette.divider)
@@ -52,18 +52,18 @@ const xe = (k) => {
         "cursor",
         W.new(e, { behavior: "none" })
       ).lineY.set("visible", !1);
-      let o, p = n;
+      let o, u = p;
       if (t[0].type === "date") {
-        p = F.orderBy(n, [t[0].value]);
+        u = I.orderBy(p, [t[0].value]);
         const l = x ? J : M;
         o = r.xAxes.push(
           l.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
             baseInterval: h || { timeUnit: "day", count: 1 },
-            renderer: X.new(e, {})
+            renderer: F.new(e, {})
           })
-        ), (v = o.get("renderer")) == null || v.grid.template.setAll({
+        ), (w = o.get("renderer")) == null || w.grid.template.setAll({
           stroke: i(a.palette.divider),
           strokeOpacity: 1
         }), B(o, t[0]);
@@ -71,12 +71,12 @@ const xe = (k) => {
         o = r.xAxes.push(
           _.new(e, {
             categoryField: t[0].value,
-            renderer: X.new(e, {})
+            renderer: F.new(e, {})
           })
         ), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), p = F.orderBy(n, [t[0].value]), o.data.setAll(p), (w = o.get("renderer")) == null || w.grid.template.setAll({
+        }), o.data.setAll(u), (v = o.get("renderer")) == null || v.grid.template.setAll({
           stroke: i(a.palette.divider),
           strokeOpacity: 1
         });
@@ -90,7 +90,7 @@ const xe = (k) => {
         stroke: i(a.palette.divider),
         strokeOpacity: 1
       }), s.forEach((l) => {
-        const c = r.series.push(
+        const m = r.series.push(
           $.new(e, {
             name: l.label ?? V(l.name),
             xAxis: o,
@@ -99,10 +99,10 @@ const xe = (k) => {
             ...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value }
           })
         );
-        c.strokes.template.setAll({ strokeWidth: 3 }), t[0].type === "date" && (c.data.processor = j.new(e, {
+        m.strokes.template.setAll({ strokeWidth: 3 }), t[0].type === "date" && (m.data.processor = j.new(e, {
           dateFormat: "i",
           dateFields: [t[0].value]
-        })), c.data.setAll(p), c.appear(1e3);
+        })), m.data.setAll(u), m.appear(1e3);
       }), q({
         root: e,
         chart: r,
@@ -115,13 +115,13 @@ const xe = (k) => {
         "scrollbarX",
         K.new(e, { orientation: "horizontal" })
       ), H(e, (b = s == null ? void 0 : s[0]) == null ? void 0 : b.format), r.appear(1e3, 100);
-    }, L), () => {
+    }, k), () => {
       var e;
-      u && clearTimeout(u), (e = d.current) == null || e.dispose(), d.current = null;
+      d && clearTimeout(d), (e = c.current) == null || e.dispose(), c.current = null;
     };
-  }, [n, t, s, a.palette.mode, A, x]);
-  const T = { ...f };
-  return { chartId: g, ownerState: T, sx: S, error: m, other: C };
+  }, [p, t, s, a.palette.mode, A, x]);
+  const C = { ...f };
+  return { chartId: g, ownerState: C, sx: L, error: n, other: S };
 };
 export {
   xe as useLogaritmicScaleLogic

package/dist/components/charts/multiple-value-axes/logic.js

@@ -1,11 +1,11 @@
 import { R as j, A as q } from "../../../AnimatedTheme-ktdO3Bel.js";
 import { useThemeProps as z, useTheme as U } from "@mui/material";
-import v from "lodash";
+import N from "lodash";
 import { useId as H, useRef as $, useEffect as J } from "react";
 import { humanizeLabel as P } from "../_common/format.js";
 import { attachCombinedAxisTooltip as K } from "../_common/tooltip.js";
 import { colorSetFromPalette as Q, applyDateAxisLabelFormat as Z, applyValueFormat as ee } from "../_common/utils.js";
-import { c as C, a as A } from "../../../Entity-BJCuhdq_.js";
+import { c as v, a as g } from "../../../Entity-BJCuhdq_.js";
 import { X as te, V as re } from "../../../AxisRenderer-BCQoUJw6.js";
 import { L as se } from "../../../Legend-CFvQiIfn.js";
 import { A as X, a as ae } from "../../../AxisRendererY-AXWvGU6r.js";
@@ -14,10 +14,10 @@ import { X as oe } from "../../../XYCursor-CVUSpqb9.js";
 import { G as le, D as ne } from "../../../GaplessDateAxis-B2g2jgSG.js";
 import { D as ce } from "../../../DateAxis-DEXKps1S.js";
 import { L as me } from "../../../LineSeries-D_IL2qGF.js";
-import { G, R as ue } from "../../../Tooltip-vyZRZWih.js";
-import { C as pe } from "../../../Circle-BnfBNKBD.js";
+import { G, R as pe } from "../../../Tooltip-vyZRZWih.js";
+import { C as ue } from "../../../Circle-BnfBNKBD.js";
 import { B as de } from "../../../Bullet-Djj7Vs9T.js";
-class y extends G {
+class x extends G {
   _beforeChanged() {
     super._beforeChanged(), (this.isDirty("width") || this.isDirty("height") || this.isPrivateDirty("width") || this.isPrivateDirty("height")) && (this._clear = !0);
   }
@@ -32,41 +32,41 @@ class y extends G {
     this.markDirty(), this._clear = !0;
   }
 }
-Object.defineProperty(y, "className", {
+Object.defineProperty(x, "className", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
   value: "Triangle"
 });
-Object.defineProperty(y, "classNames", {
+Object.defineProperty(x, "classNames", {
   enumerable: !0,
   configurable: !0,
   writable: !0,
-  value: G.classNames.concat([y.className])
+  value: G.classNames.concat([x.className])
 });
-const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (T) => {
-  const c = z({ props: T, name: "HCMultipleValueAxes" }), {
+const A = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (C) => {
+  const c = z({ props: C, name: "HCMultipleValueAxes" }), {
     dimensions: s,
     values: t,
-    data: d,
+    data: y,
     initDelay: I = 0,
-    baseInterval: L,
-    colors: R,
-    skipEmptyDates: E = !1,
+    baseInterval: T,
+    colors: L,
+    skipEmptyDates: R = !1,
     sx: Y,
     ...V
-  } = c, u = U(), _ = `hc-multiple-value-axes-${H().replace(/:/g, "")}`, w = $(null);
-  let h = null;
-  s.length < 1 ? h = "MultipleValueAxes requires at least 1 dimension" : t.length < 1 && (h = "MultipleValueAxes requires at least 1 value"), J(() => {
-    if (h) return;
+  } = c, p = U(), E = `hc-multiple-value-axes-${H().replace(/:/g, "")}`, w = $(null);
+  let u = null;
+  s.length < 1 ? u = "MultipleValueAxes requires at least 1 dimension" : t.length < 1 && (u = "MultipleValueAxes requires at least 1 value"), J(() => {
+    if (u) return;
     let b;
     return b = setTimeout(() => {
-      var N;
-      const e = j.new(_);
+      var F;
+      const e = j.new(E);
       w.current = e, e.setThemes([q.new(e)]), e.interfaceColors.setAll({
-        text: C(u.palette.text.primary),
-        grid: C(u.palette.divider),
-        stroke: C(u.palette.divider)
+        text: v(p.palette.text.primary),
+        grid: v(p.palette.divider),
+        stroke: v(p.palette.divider)
       });
       const r = e.container.children.push(
         te.new(e, {
@@ -78,75 +78,75 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (T) => {
           layout: e.verticalLayout
         })
       );
-      r.set("colors", Q(e, R)), r.get("colors", {}).set("step", 3);
-      const O = r.children.push(
-        se.new(e, { centerX: A, x: A })
-      ), i = s[0];
-      let l, p = d;
-      if (i.type === "date") {
-        const a = E ? le : ce;
+      r.set("colors", Q(e, L)), r.get("colors", {}).set("step", 3);
+      const S = r.children.push(
+        se.new(e, { centerX: g, x: g })
+      ), o = s[0];
+      let l, d = y;
+      if (o.type === "date") {
+        const a = R ? le : ce;
         l = r.xAxes.push(
           a.new(e, {
             maxDeviation: 0.1,
             groupData: !1,
-            baseInterval: L || { timeUnit: "day", count: 1 },
+            baseInterval: T || { timeUnit: "day", count: 1 },
             renderer: X.new(e, {})
           })
-        ), Z(l, i), p = v.orderBy(d, [i.value]);
+        ), Z(l, o), d = N.orderBy(y, [o.value]);
       } else
         l = r.xAxes.push(
           ie.new(e, {
-            categoryField: i.value,
+            categoryField: o.value,
             renderer: X.new(e, {})
           })
         ), e.numberFormatter.setAll({
           numberFormat: "#",
           numericFields: ["valueX"]
-        }), p = v.orderBy(d, [i.value]), l.data.setAll(p);
-      function F(a, n, m, S, W, D, M) {
-        const f = ae.new(e, { opposite: W }), k = r.yAxes.push(
-          re.new(e, { maxDeviation: 1, renderer: f })
+        }), l.data.setAll(d);
+      function _(a, n, m, B, W, D, M) {
+        const h = ae.new(e, { opposite: W }), k = r.yAxes.push(
+          re.new(e, { maxDeviation: 1, renderer: h })
         );
         r.yAxes.indexOf(k) > 0 && k.set("syncWithAxis", r.yAxes.getIndex(0));
-        const o = r.series.push(
+        const i = r.series.push(
           me.new(e, {
             name: n,
             xAxis: l,
             yAxis: k,
-            valueYField: S,
-            ...i.type === "date" ? { valueXField: m } : { categoryXField: m }
+            valueYField: B,
+            ...o.type === "date" ? { valueXField: m } : { categoryXField: m }
           })
         );
-        o.strokes.template.setAll({ strokeWidth: 2 }), f.grid.template.set("strokeOpacity", 0.05), f.labels.template.set("fill", o.get("fill")), f.setAll({
-          stroke: o.get("fill"),
+        i.strokes.template.setAll({ strokeWidth: 2 }), h.grid.template.set("strokeOpacity", 0.05), h.labels.template.set("fill", i.get("fill")), h.setAll({
+          stroke: i.get("fill"),
           strokeOpacity: 1,
           opacity: 1
-        }), M === "date" && (o.data.processor = ne.new(e, {
+        }), M === "date" && (i.data.processor = ne.new(e, {
           dateFormat: "i",
           dateFields: [m]
-        })), D !== void 0 && o.bullets.push(function() {
-          let g;
-          return D === "RECTANGLE" ? g = ue.new(e, {
+        })), D !== void 0 && i.bullets.push(function() {
+          let f;
+          return D === "RECTANGLE" ? f = pe.new(e, {
             width: 10,
             height: 10,
-            centerX: A,
-            centerY: A,
+            centerX: g,
+            centerY: g,
             strokeWidth: 2,
-            stroke: o.get("stroke"),
+            stroke: i.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }) : D === "TRIANGLE" ? g = y.new(e, {
+          }) : D === "TRIANGLE" ? f = x.new(e, {
             width: 10,
             height: 10,
             strokeWidth: 2,
-            stroke: o.get("stroke"),
+            stroke: i.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }) : g = pe.new(e, {
+          }) : f = ue.new(e, {
             strokeWidth: 2,
             radius: 4,
-            stroke: o.get("stroke"),
+            stroke: i.get("stroke"),
             fill: e.interfaceColors.get("background")
-          }), de.new(e, { sprite: g });
-        }), o.data.setAll(a);
+          }), de.new(e, { sprite: f });
+        }), i.data.setAll(a);
       }
       if (r.set(
         "cursor",
@@ -155,42 +155,42 @@ const x = ["CIRCLE", "RECTANGLE", "TRIANGLE"], Ge = (T) => {
         root: e,
         chart: r,
         xAxis: l,
-        theme: u,
-        isDateAxis: i.type === "date",
-        baseInterval: L,
+        theme: p,
+        isDateAxis: o.type === "date",
+        baseInterval: T,
         follow: !0
       }), s.length > 1) {
-        const a = v.groupBy(p, s[1].value);
+        const a = N.groupBy(d, s[1].value);
         Object.keys(a).forEach((n, m) => {
-          F(
+          _(
             a[n],
             P(n),
             s[0].value,
             t[0].dataFieldName,
             m !== 0,
-            x[m % x.length]
+            A[m % A.length]
           );
         });
       } else
         t.forEach((a, n) => {
-          F(
-            p,
+          _(
+            d,
             a.label ?? P(a.name),
-            i.value,
+            o.value,
             a.dataFieldName,
             n !== 0,
-            x[n % x.length],
-            i.type
+            A[n % A.length],
+            o.type
           );
         });
-      O.data.setAll(r.series.values), ee(e, (N = t == null ? void 0 : t[0]) == null ? void 0 : N.format), r.appear(1e3, 100);
+      S.data.setAll(r.series.values), ee(e, (F = t == null ? void 0 : t[0]) == null ? void 0 : F.format), r.appear(1e3, 100);
     }, I), () => {
       var e;
       b && clearTimeout(b), (e = w.current) == null || e.dispose(), w.current = null;
     };
-  }, [d, s, t, u.palette.mode, R, E]);
-  const B = { ...c };
-  return { chartId: _, ownerState: B, sx: Y, error: h, other: V };
+  }, [y, s, t, p.palette.mode, L, R]);
+  const O = { ...c };
+  return { chartId: E, ownerState: O, sx: Y, error: u, other: V };
 };
 export {
   Ge as useMultipleValueAxesLogic

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

@@ -178,7 +178,15 @@ const Be = (I) => {
       var t;
       x && clearTimeout(x), (t = h.current) == null || t.dispose(), h.current = null;
     };
-  }, [f, l, c, n.palette.mode, w, b, D]);
+  }, [
+    f,
+    l,
+    c,
+    n.palette.mode,
+    w,
+    b,
+    D
+  ]);
   const j = { ...g };
   return { chartId: X, ownerState: j, sx: W, error: C, other: N };
 };

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
 };