@hybridcore/ui 1.6.28 → 1.6.30

package/dist/components/data-list/logic.js

@@ -1,224 +1,218 @@
-import { useThemeProps as de } from "@mui/material";
-import { useRef as f, useState as N, useMemo as S, useCallback as ge, useEffect as B } from "react";
-import { c as s } from "../../createReactComponent-C7L-DMHj.js";
-import { a as he, I as pe } from "../../IconCheck-BcUcbvno.js";
-import { I as ve } from "../../IconCircle-HcgE1lHy.js";
+import { useThemeProps as ae } from "@mui/material";
+import { useState as b, useMemo as N } from "react";
+import oe from "../../hooks/useInfinitePaging.js";
+import { c as a } from "../../createReactComponent-C7L-DMHj.js";
+import { a as ne, I as se } from "../../IconCheck-BcUcbvno.js";
+import { I as ie } from "../../IconCircle-HcgE1lHy.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 fe = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 8v4", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], Me = s("outline", "alert-circle", "AlertCircle", fe);
+const ce = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 8v4", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], re = a("outline", "alert-circle", "AlertCircle", ce);
 /**
  * @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 me = [["path", { d: "M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6", key: "svg-0" }], ["path", { d: "M9 17v1a3 3 0 0 0 6 0v-1", key: "svg-1" }]], ke = s("outline", "bell", "Bell", me);
+const le = [["path", { d: "M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6", key: "svg-0" }], ["path", { d: "M9 17v1a3 3 0 0 0 6 0v-1", key: "svg-1" }]], de = a("outline", "bell", "Bell", le);
 /**
  * @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 ye = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 7v5l3 3", key: "svg-1" }]], _e = s("outline", "clock", "Clock", ye);
+const ge = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 7v5l3 3", key: "svg-1" }]], he = a("outline", "clock", "Clock", ge);
 /**
  * @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 Ie = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2", key: "svg-1" }], ["path", { d: "M9 9l1 0", key: "svg-2" }], ["path", { d: "M9 13l6 0", key: "svg-3" }], ["path", { d: "M9 17l6 0", key: "svg-4" }]], Pe = s("outline", "file-text", "FileText", Ie);
+const pe = [["path", { d: "M14 3v4a1 1 0 0 0 1 1h4", key: "svg-0" }], ["path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2", key: "svg-1" }], ["path", { d: "M9 9l1 0", key: "svg-2" }], ["path", { d: "M9 13l6 0", key: "svg-3" }], ["path", { d: "M9 17l6 0", key: "svg-4" }]], ve = a("outline", "file-text", "FileText", pe);
 /**
  * @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 be = [["path", { d: "M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1 -7 0a5 5 0 0 0 -7 0v-9", key: "svg-0" }], ["path", { d: "M5 21v-7", key: "svg-1" }]], Ne = s("outline", "flag", "Flag", be);
+const ue = [["path", { d: "M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9a5 5 0 0 1 -7 0a5 5 0 0 0 -7 0v-9", key: "svg-0" }], ["path", { d: "M5 21v-7", key: "svg-1" }]], me = a("outline", "flag", "Flag", ue);
 /**
  * @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 Se = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 9h.01", key: "svg-1" }], ["path", { d: "M11 12h1v4h1", key: "svg-2" }]], we = s("outline", "info-circle", "InfoCircle", Se);
+const Me = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 9h.01", key: "svg-1" }], ["path", { d: "M11 12h1v4h1", key: "svg-2" }]], fe = a("outline", "info-circle", "InfoCircle", Me);
 /**
  * @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 Re = [["path", { d: "M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0", key: "svg-1" }]], $e = s("outline", "map-pin", "MapPin", Re);
+const ke = [["path", { d: "M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0", key: "svg-0" }], ["path", { d: "M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0", key: "svg-1" }]], ye = a("outline", "map-pin", "MapPin", ke);
 /**
  * @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 Ce = [["path", { d: "M8 9h8", key: "svg-0" }], ["path", { d: "M8 13h6", key: "svg-1" }], ["path", { d: "M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12", key: "svg-2" }]], Oe = s("outline", "message", "Message", Ce);
+const Pe = [["path", { d: "M8 9h8", key: "svg-0" }], ["path", { d: "M8 13h6", key: "svg-1" }], ["path", { d: "M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12", key: "svg-2" }]], _e = a("outline", "message", "Message", Pe);
 /**
  * @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 Le = [["path", { d: "M15.04 19.745c-.942 .551 -1.964 .976 -3.04 1.255a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 .195 6.015", key: "svg-0" }], ["path", { d: "M19 16v3", key: "svg-1" }], ["path", { d: "M19 22v.01", key: "svg-2" }]], xe = s("outline", "shield-exclamation", "ShieldExclamation", Le);
+const Ie = [["path", { d: "M15.04 19.745c-.942 .551 -1.964 .976 -3.04 1.255a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 .195 6.015", key: "svg-0" }], ["path", { d: "M19 16v3", key: "svg-1" }], ["path", { d: "M19 22v.01", key: "svg-2" }]], be = a("outline", "shield-exclamation", "ShieldExclamation", Ie);
 /**
  * @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 Te = [["path", { d: "M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3", key: "svg-0" }]], Ae = s("outline", "shield", "Shield", Te);
+const Ne = [["path", { d: "M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3", key: "svg-0" }]], Se = a("outline", "shield", "Shield", Ne);
 /**
  * @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 Ee = [["path", { d: "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", key: "svg-0" }]], Be = s("outline", "thumb-up", "ThumbUp", Ee);
+const we = [["path", { d: "M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3", key: "svg-0" }]], $e = a("outline", "thumb-up", "ThumbUp", we);
 /**
  * @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 Fe = [["path", { d: "M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }], ["path", { d: "M16 3.13a4 4 0 0 1 0 7.75", key: "svg-2" }], ["path", { d: "M21 21v-2a4 4 0 0 0 -3 -3.85", key: "svg-3" }]], Ve = s("outline", "users", "Users", Fe), De = {
-  shield: Ae,
-  "shield-alert": xe,
-  "alert-triangle": he,
-  "alert-circle": Me,
-  info: we,
-  bell: ke,
-  check: pe,
-  clock: _e,
-  flag: Ne,
-  file: Pe,
-  "map-pin": $e,
-  message: Oe,
-  "thumb-up": Be,
-  users: Ve,
-  circle: ve
-}, Ue = [5, 10, 25, 50], Ge = "120px", F = (g, d) => {
-  if (!(g != null && g.length) || d === void 0 || d === null) return;
-  const o = `${d}`.trim().toLowerCase();
-  if (o)
-    return g.find((k) => `${k.value}`.trim().toLowerCase() === o);
-}, qe = (g) => {
-  const d = de({ props: g, name: "HCDataList" }), {
-    data: o = [],
-    totalCount: k,
-    payload: i,
-    onChange: r,
-    onItemClick: M,
-    iconStates: V,
-    iconShape: D = "circle",
-    badgeStates: U,
-    endSlot: w = "badge",
-    metaSeparator: G = "•",
-    descriptionLines: j = 1,
-    dense: H = !1,
-    divider: J = !0,
-    headerGutter: K = !1,
-    paginationMode: y = "infinite",
-    rowsPerPage: W = 10,
-    resetKey: q,
-    loading: _ = !1,
-    loadingMore: z = !1
-  } = d, R = f(null), $ = f(null), [Q, C] = N(0), [X, Y] = N(W), l = (i == null ? void 0 : i.pageNumber) ?? Q, a = (i == null ? void 0 : i.rows) ?? X, c = !!r, u = y === "infinite", [O, L] = N(a), p = f(/* @__PURE__ */ new Map()), m = `${q ?? ""}`, x = f(m), h = f(null);
-  x.current !== m && (x.current = m, p.current.clear(), h.current = null), c && u && (l === 0 && p.current.clear(), p.current.set(l, o), h.current === l && (h.current = null));
-  const T = S(() => !c || !u ? o : Array.from(p.current.keys()).sort((e, t) => e - t).flatMap((e) => p.current.get(e) ?? []), [c, u, o, l]), I = c ? k ?? 0 : o.length, v = S(() => u ? c ? T : o.slice(0, O) : c ? o : o.slice(l * a, (l + 1) * a), [u, c, T, o, O, l, a]), P = u && v.length < I, Z = y === "buttons" && I > a, b = ge(() => {
-    if (!c) {
-      L((t) => t + a);
-      return;
-    }
-    const e = l + 1;
-    h.current === null && (h.current = e, r == null || r({ ...i, pageNumber: e, rows: a }));
-  }, [c, a, l, r, i]);
-  B(() => {
-    if (!u || !P || _) return;
-    const e = $.current;
-    if (!e || typeof IntersectionObserver > "u") return;
-    const t = new IntersectionObserver(
-      (n) => {
-        n.some((ue) => ue.isIntersecting) && b();
-      },
-      { root: R.current, rootMargin: Ge }
-    );
-    return t.observe(e), () => t.disconnect();
-  }, [u, P, _, b]), B(() => {
-    u && !c && L(a);
-  }, [u, c, a, m, o.length]);
-  const ee = (e, t) => {
-    C(t), r == null || r({ ...i, pageNumber: t, rows: a });
-  }, te = (e) => {
+const Ce = [["path", { d: "M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0", key: "svg-0" }], ["path", { d: "M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2", key: "svg-1" }], ["path", { d: "M16 3.13a4 4 0 0 1 0 7.75", key: "svg-2" }], ["path", { d: "M21 21v-2a4 4 0 0 0 -3 -3.85", key: "svg-3" }]], Le = a("outline", "users", "Users", Ce), Re = {
+  shield: Se,
+  "shield-alert": be,
+  "alert-triangle": ne,
+  "alert-circle": re,
+  info: fe,
+  bell: de,
+  check: se,
+  clock: he,
+  flag: me,
+  file: ve,
+  "map-pin": ye,
+  message: _e,
+  "thumb-up": $e,
+  users: Le,
+  circle: ie
+}, xe = [5, 10, 25, 50], S = (l, n) => {
+  if (!(l != null && l.length) || n === void 0 || n === null)
+    return;
+  const i = `${n}`.trim().toLowerCase();
+  if (i)
+    return l.find((g) => `${g.value}`.trim().toLowerCase() === i);
+}, Ae = (l) => {
+  const n = ae({ props: l, name: "HCDataList" }), {
+    data: i = [],
+    totalCount: g,
+    payload: s,
+    onChange: c,
+    onItemClick: h,
+    iconStates: w,
+    iconShape: $ = "circle",
+    badgeStates: C,
+    endSlot: M = "badge",
+    metaSeparator: L = "•",
+    descriptionLines: R = 1,
+    dense: x = !1,
+    divider: T = !0,
+    headerGutter: O = !1,
+    paginationMode: v = "infinite",
+    rowsPerPage: B = 10,
+    resetKey: D,
+    loading: f = !1,
+    loadingMore: E = !1
+  } = n, [F, k] = b(0), [A, U] = b(B), d = (s == null ? void 0 : s.pageNumber) ?? F, r = (s == null ? void 0 : s.rows) ?? A, u = !!c, m = v === "infinite", {
+    displayData: y,
+    hasMore: V,
+    isLoadingMore: G,
+    scrollRef: j,
+    sentinelRef: H
+  } = oe({
+    data: i,
+    totalCount: g,
+    page: d,
+    rowsPerPage: r,
+    payload: s,
+    onChange: c,
+    resetKey: D,
+    loading: f,
+    loadingMore: E,
+    enabled: m
+  }), P = u ? g ?? 0 : i.length, p = N(() => m ? y : u ? i : i.slice(d * r, (d + 1) * r), [m, y, u, i, d, r]), J = v === "buttons" && P > r, K = (e, t) => {
+    k(t), c == null || c({ ...s, pageNumber: t, rows: r });
+  }, W = (e) => {
     const t = parseInt(e.target.value, 10);
-    Y(t), C(0), r == null || r({ ...i, pageNumber: 0, rows: t });
-  }, ne = (e) => () => {
-    e.disabled || M == null || M(e);
-  }, oe = (e) => !!M && !e.disabled, ae = (e) => {
+    U(t), k(0), c == null || c({ ...s, pageNumber: 0, rows: t });
+  }, q = (e) => () => {
+    e.disabled || h == null || h(e);
+  }, z = (e) => !!h && !e.disabled, Q = (e) => {
     if (!e.meta) return e.description;
-    const t = e.meta.filter((n) => n != null && `${n}`.trim() !== "").map((n) => `${n}`.trim());
-    return t.length ? t.join(` ${G} `) : void 0;
-  }, A = (e) => F(V, e.iconValue), se = (e) => {
-    var n;
-    const t = (n = A(e)) == null ? void 0 : n.icon;
-    return t ? De[t] : void 0;
-  }, E = (e) => F(U, e.status), re = (e) => {
-    var n;
-    const t = E(e);
-    return t ? t.label ?? t.value : ((n = e.status) == null ? void 0 : n.trim()) || void 0;
-  }, ce = (e) => {
+    const t = e.meta.filter((o) => o != null && `${o}`.trim() !== "").map((o) => `${o}`.trim());
+    return t.length ? t.join(` ${L} `) : void 0;
+  }, _ = (e) => S(w, e.iconValue), X = (e) => {
+    var o;
+    const t = (o = _(e)) == null ? void 0 : o.icon;
+    return t ? Re[t] : void 0;
+  }, I = (e) => S(C, e.status), Y = (e) => {
+    var o;
+    const t = I(e);
+    return t ? t.label ?? t.value : ((o = e.status) == null ? void 0 : o.trim()) || void 0;
+  }, Z = (e) => {
     const t = typeof e.endValue == "string" ? Number(e.endValue) : e.endValue;
     return Number.isFinite(t) ? Math.min(100, Math.max(0, t)) : 0;
-  }, ie = S(
-    () => JSON.stringify({ title: d.title, data: v }),
-    [d.title, v]
-  ), le = {
-    ...d,
-    iconShape: D,
-    endSlot: w,
-    dense: H,
-    divider: J,
-    descriptionLines: j,
-    headerGutter: K,
-    paginationMode: y,
-    isEmpty: !_ && v.length === 0
+  }, ee = N(
+    () => JSON.stringify({ title: n.title, data: p }),
+    [n.title, p]
+  ), te = {
+    ...n,
+    iconShape: $,
+    endSlot: M,
+    dense: x,
+    divider: T,
+    descriptionLines: R,
+    headerGutter: O,
+    paginationMode: v,
+    isEmpty: !f && p.length === 0
   };
   return {
-    refs: { listRef: R, sentinelRef: $ },
+    refs: { listRef: j, sentinelRef: H },
     state: {
-      ownerState: le,
-      displayData: v,
-      count: I,
-      page: l,
-      rowsPerPage: a,
-      rowsPerPageOptions: d.rowsPerPageOptions ?? Ue,
-      showPagination: Z,
-      hasMore: P,
+      ownerState: te,
+      displayData: p,
+      count: P,
+      page: d,
+      rowsPerPage: r,
+      rowsPerPageOptions: n.rowsPerPageOptions ?? xe,
+      showPagination: J,
+      hasMore: V,
       // Either the caller says a request is running, or we know one is in flight.
-      isLoadingMore: z || h.current !== null,
-      snapshot: ie,
-      endSlot: w,
-      isItemClickable: oe,
-      getSecondaryText: ae,
-      getIconState: A,
-      getIcon: se,
-      getBadgeState: E,
-      getBadgeLabel: re,
-      getProgressValue: ce
+      isLoadingMore: G,
+      snapshot: ee,
+      endSlot: M,
+      isItemClickable: z,
+      getSecondaryText: Q,
+      getIconState: _,
+      getIcon: X,
+      getBadgeState: I,
+      getBadgeLabel: Y,
+      getProgressValue: Z
     },
     actions: {
-      handleChangePage: ee,
-      handleChangeRowsPerPage: te,
-      handleItemClick: ne,
-      loadMore: b
+      handleChangePage: K,
+      handleChangeRowsPerPage: W,
+      handleItemClick: q
     }
   };
 };
 export {
-  qe as useDataListLogic
+  Ae as useDataListLogic
 };

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

@@ -1,28 +1,28 @@
-import { jsx as h } from "react/jsx-runtime";
-import { R as u, A } from "../../AnimatedTheme-ktdO3Bel.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-BCQoUJw6.js";
-import { C as L } from "../../CategoryAxis-B6NqW8qd.js";
-import { A as T, a as b } from "../../AxisRendererY-AXWvGU6r.js";
-import { T as X } from "../../Tooltip-vyZRZWih.js";
-import { C } from "../../ColumnSeries-CtRTsn-E.js";
-import { c as a } from "../../Entity-BJCuhdq_.js";
+import { jsx as A } from "react/jsx-runtime";
+import { R as g, A as T } from "../../AnimatedTheme-ktdO3Bel.js";
+import { useTheme as w, alpha as x } from "@mui/material";
+import { useRef as R, useLayoutEffect as y } from "react";
+import { X as v, V as L } from "../../AxisRenderer-BCQoUJw6.js";
+import { C as X } from "../../CategoryAxis-B6NqW8qd.js";
+import { A as b, a as C } from "../../AxisRendererY-AXWvGU6r.js";
+import { T as F } from "../../Tooltip-vyZRZWih.js";
+import { C as S } from "../../ColumnSeries-CtRTsn-E.js";
+import { c as i } from "../../Entity-BJCuhdq_.js";
 import { L as Y } from "../../LineSeries-D_IL2qGF.js";
-import { L as F } from "../../LinearGradient-CxQyCSEB.js";
-const z = ({
-  data: o,
+import { L as G } from "../../LinearGradient-CxQyCSEB.js";
+const u = 10, k = 21, q = ({
+  data: a,
   type: p,
-  inset: d = !1,
-  gradient: m = !1
+  fill: n = "solid",
+  color: h
 }) => {
-  const l = w(null), t = g();
-  return x(() => {
+  const l = R(null), c = w(), r = h ?? c.palette.divider;
+  return y(() => {
     if (!l.current) return;
-    const e = u.new(l.current);
-    e.setThemes([A.new(e)]);
-    const i = e.container.children.push(
-      y.new(e, {
+    const e = g.new(l.current);
+    e.setThemes([T.new(e)]);
+    const s = e.container.children.push(
+      v.new(e, {
         panX: !1,
         panY: !1,
         wheelX: "none",
@@ -32,80 +32,82 @@ const z = ({
         paddingTop: 0,
         paddingBottom: 0
       })
-    ), s = i.xAxes.push(
-      L.new(e, {
+    ), o = s.xAxes.push(
+      X.new(e, {
         categoryField: "t",
-        renderer: T.new(e, {
+        renderer: b.new(e, {
           minGridDistance: 10
         }),
-        tooltip: X.new(e, {})
+        tooltip: F.new(e, {})
       })
-    ), c = s.get("renderer");
-    c.grid.template.set("visible", !1), c.labels.template.set("visible", !1), s.setAll({
+    ), d = o.get("renderer");
+    d.grid.template.set("visible", !1), d.labels.template.set("visible", !1), o.setAll({
       startLocation: 0.5,
       endLocation: 0.5
-    }), s.data.setAll(o);
-    const n = i.yAxes.push(
-      R.new(e, {
-        renderer: b.new(e, {})
+    }), o.data.setAll(a);
+    const m = s.yAxes.push(
+      L.new(e, {
+        renderer: C.new(e, {})
       })
-    ), f = n.get("renderer");
+    ), f = m.get("renderer");
     f.grid.template.set("visible", !1), f.labels.template.set("visible", !1);
-    let r;
-    return p === "column" ? (r = i.series.push(
-      C.new(e, {
+    let t;
+    return p === "column" ? (t = s.series.push(
+      S.new(e, {
         name: "Series",
-        xAxis: s,
-        yAxis: n,
+        xAxis: o,
+        yAxis: m,
         valueYField: "v",
         categoryXField: "t",
-        fill: a(t.palette.divider)
+        fill: i(r)
       })
-    ), r.columns.template.setAll({
+    ), t.columns.template.setAll({
       cornerRadiusTL: 2,
       cornerRadiusTR: 2,
       strokeOpacity: 0
-    })) : (r = i.series.push(
+    })) : (t = s.series.push(
       Y.new(e, {
         name: "Series",
-        xAxis: s,
-        yAxis: n,
+        xAxis: o,
+        yAxis: m,
         valueYField: "v",
         categoryXField: "t",
         // @ts-expect-error amcharts5 typing accepts string/Color; alpha returns rgba string
-        fill: v(t.palette.divider, 0.25),
-        stroke: a(t.palette.divider)
+        fill: x(r, 0.25),
+        stroke: i(r)
       })
-    ), r.strokes.template.setAll({
+    ), t.strokes.template.setAll({
       strokeWidth: 1
-    }), r.fills.template.setAll({
+    }), t.fills.template.setAll({
       fillOpacity: 1,
-      visible: !0,
-      ...m && {
-        fillGradient: F.new(e, {
+      // "none" leaves the stroke alone on the card surface, which is what the plain
+      // sparklines want; anything else paints the band beneath it.
+      visible: n !== "none",
+      ...n === "gradient" && {
+        fillGradient: G.new(e, {
           rotation: 90,
           stops: [
-            { color: a(t.palette.divider), opacity: 0.6 },
-            { color: a(t.palette.divider), opacity: 0 }
+            { color: i(r), opacity: 0.6 },
+            { color: i(r), opacity: 0 }
           ]
         })
       }
-    })), r.data.setAll(o), r.appear(1e3), i.appear(1e3, 100), () => {
+    })), t.data.setAll(a), t.appear(1e3), s.appear(1e3, 100), () => {
       e.dispose();
     };
-  }, [o, p, d, m, t.palette.mode, t.palette.divider]), /* @__PURE__ */ h(
+  }, [a, p, n, r, c.palette.mode]), /* @__PURE__ */ A(
     "div",
     {
       ref: l,
-      style: d ? { width: "100%", height: "100%" } : {
-        width: "calc(100% + 10px)",
+      style: {
+        width: `calc(100% + ${u}px)`,
         height: "100%",
-        marginBottom: -21,
-        marginLeft: -10
+        marginLeft: -u,
+        marginBottom: -k
       }
     }
   );
 };
 export {
-  z as MetricChart
+  q as MetricChart
 };