impact-nova 2.1.0-alpha.7 → 2.1.0-alpha.8

package/dist/components/data-display/chart/chart.js

@@ -1,38 +1,41 @@
-import { jsx as r, jsxs as F } from "react/jsx-runtime";
+import { jsx as s, jsxs as b } from "react/jsx-runtime";
 import * as t from "react";
-import x from "highcharts-react-official";
-import { cn as h } from "../../../lib/utils.js";
-import { Skeleton as k } from "../skeleton/skeleton.js";
-import { Collapse as A, Expand as I } from "impact-nova-icons";
-import { Button as H } from "../../primitives/button/button.js";
-import { getInitializedHighcharts as j } from "./initializeHighcharts.js";
-import { getBaseChartOptions as B } from "./chart.utils.js";
-import { useImpactNovaI18n as P } from "../../../i18n/use-impact-nova-i18n.js";
-const v = j(), E = t.createContext(null), z = () => {
-  const n = t.useContext(E);
+import N from "highcharts-react-official";
+import { cn as f } from "../../../lib/utils.js";
+import { Skeleton as q } from "../skeleton/skeleton.js";
+import { Collapse as j, Expand as B } from "impact-nova-icons";
+import { Button as P } from "../../primitives/button/button.js";
+import { getInitializedHighcharts as T } from "./initializeHighcharts.js";
+import { getBaseChartOptions as O } from "./chart.utils.js";
+import { resolveHighchartsOptions as M } from "./resolve-highcharts-options.js";
+import { useImpactNovaI18n as V } from "../../../i18n/use-impact-nova-i18n.js";
+const R = T(), S = t.createContext(null), A = () => {
+  const n = t.useContext(S);
   if (!n)
     throw new Error("Chart components must be used within a ChartContainer");
   return n;
-}, S = t.forwardRef(
-  ({ className: n, children: s, isLoading: l = !1, ...i }, m) => {
-    const a = t.useRef(null), o = t.useRef(null), [c, u] = t.useState(!1), [R, d] = t.useState(!1);
-    t.useImperativeHandle(m, () => a.current);
-    const w = () => {
+}, H = t.forwardRef(
+  ({ className: n, children: r, isLoading: l = !1, ...c }, u) => {
+    const a = t.useRef(null), o = t.useRef(null), [m, h] = t.useState(null), [d, p] = t.useState(!1), [g, C] = t.useState(!1), w = t.useCallback((e) => {
+      a.current = e, h(e);
+    }, []);
+    t.useImperativeHandle(u, () => a.current);
+    const x = () => {
       const e = a.current;
-      e && (d(!0), e.classList.add("fullscreen-animating"), setTimeout(() => {
-        e.requestFullscreen ? e.requestFullscreen() : "webkitRequestFullscreen" in e ? e.webkitRequestFullscreen() : "msRequestFullscreen" in e && e.msRequestFullscreen(), u(!0), e.classList.remove("fullscreen-animating");
+      e && (C(!0), e.classList.add("fullscreen-animating"), setTimeout(() => {
+        e.requestFullscreen ? e.requestFullscreen() : "webkitRequestFullscreen" in e ? e.webkitRequestFullscreen() : "msRequestFullscreen" in e && e.msRequestFullscreen(), p(!0), e.classList.remove("fullscreen-animating");
       }, 200));
-    }, g = () => {
+    }, v = () => {
       const e = a.current;
-      e && (d(!0), e.classList.add("fullscreen-animating-out"), setTimeout(() => {
-        document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), u(!1), e.classList.remove("fullscreen-animating-out");
+      e && (C(!0), e.classList.add("fullscreen-animating-out"), setTimeout(() => {
+        document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen ? document.webkitExitFullscreen() : document.msExitFullscreen && document.msExitFullscreen(), p(!1), e.classList.remove("fullscreen-animating-out");
       }, 200));
-    }, p = () => {
-      c ? g() : w();
+    }, E = () => {
+      d ? v() : x();
     };
     return t.useEffect(() => {
       const e = () => {
-        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || u(!1);
+        document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || p(!1);
       };
       return document.addEventListener("fullscreenchange", e), document.addEventListener("webkitfullscreenchange", e), () => {
         document.removeEventListener("fullscreenchange", e), document.removeEventListener(
@@ -43,157 +46,160 @@ const v = j(), E = t.createContext(null), z = () => {
     }, []), t.useEffect(() => {
       if (!o?.current?.chart) return;
       const e = o.current.chart;
-      let f = null;
-      const N = () => {
-        c && a.current ? (f && cancelAnimationFrame(f), f = requestAnimationFrame(() => {
-          const C = a.current;
-          if (!C) return;
-          const b = C.getBoundingClientRect(), y = C.querySelector('[class*="ChartContent"]');
-          if (y) {
-            const L = y.getBoundingClientRect();
-            e.setSize(L.width, L.height, !1);
+      let i = null;
+      const L = () => {
+        d && a.current ? (i && cancelAnimationFrame(i), i = requestAnimationFrame(() => {
+          const F = a.current;
+          if (!F) return;
+          const y = F.getBoundingClientRect(), k = F.querySelector('[class*="ChartContent"]');
+          if (k) {
+            const z = k.getBoundingClientRect();
+            e.setSize(z.width, z.height, !1);
           } else
-            e.setSize(b.width, b.height, !1);
-          f = null;
+            e.setSize(y.width, y.height, !1);
+          i = null;
         })) : (e.setSize(null, null, !1), e.reflow());
       };
-      return window.addEventListener("resize", N), () => {
-        f && cancelAnimationFrame(f), window.removeEventListener("resize", N);
+      return window.addEventListener("resize", L), () => {
+        i && cancelAnimationFrame(i), window.removeEventListener("resize", L);
       };
-    }, [c]), /* @__PURE__ */ r(
-      E.Provider,
+    }, [d]), /* @__PURE__ */ s(
+      S.Provider,
       {
         value: {
-          isExpanded: c,
-          toggleFullscreen: p,
+          isExpanded: d,
+          toggleFullscreen: E,
           isLoading: l,
           containerRef: a,
+          containerElement: m,
           chartComponentRef: o
         },
-        children: /* @__PURE__ */ r(
+        children: /* @__PURE__ */ s(
           "div",
           {
-            ref: a,
+            ref: w,
             "data-component": "chart",
-            className: h(
+            className: f(
               n,
               "w-full relative bg-canvas-elevated transition-all duration-200 ease-in-out",
-              c && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
-              R && "overflow-hidden"
+              d && "fixed inset-0 z-50 h-screen w-screen p-4 bg-canvas flex flex-col",
+              g && "overflow-hidden"
             ),
-            ...i,
-            children: s
+            ...c,
+            children: r
           }
         )
       }
     );
   }
 );
-S.displayName = "ChartContainer";
-const T = t.forwardRef(
-  ({ className: n, children: s, ...l }, i) => /* @__PURE__ */ r("div", { ref: i, className: h("flex items-center justify-between mb-4", n), ...l, children: s })
+H.displayName = "ChartContainer";
+const W = t.forwardRef(
+  ({ className: n, children: r, ...l }, c) => /* @__PURE__ */ s("div", { ref: c, className: f("flex items-center justify-between mb-4", n), ...l, children: r })
 );
-T.displayName = "ChartHeader";
-const M = t.forwardRef(
-  ({ className: n, ...s }, l) => /* @__PURE__ */ r("h3", { ref: l, className: h("text-lg font-semibold leading-none tracking-tight", n), ...s })
+W.displayName = "ChartHeader";
+const D = t.forwardRef(
+  ({ className: n, ...r }, l) => /* @__PURE__ */ s("h3", { ref: l, className: f("text-lg font-semibold leading-none tracking-tight", n), ...r })
 );
-M.displayName = "ChartTitle";
-const O = t.forwardRef(
-  ({ className: n, ...s }, l) => /* @__PURE__ */ r("div", { ref: l, className: h("flex items-center gap-2", n), ...s })
+D.displayName = "ChartTitle";
+const G = t.forwardRef(
+  ({ className: n, ...r }, l) => /* @__PURE__ */ s("div", { ref: l, className: f("flex items-center gap-2", n), ...r })
 );
-O.displayName = "ChartActions";
-const V = t.forwardRef(
-  ({ className: n, ...s }, l) => {
-    const { t: i } = P(), { toggleFullscreen: m, isExpanded: a } = z(), o = i("aria.toggleFullscreen");
-    return /* @__PURE__ */ F(
-      H,
+G.displayName = "ChartActions";
+const J = t.forwardRef(
+  ({ className: n, ...r }, l) => {
+    const { t: c } = V(), { toggleFullscreen: u, isExpanded: a } = A(), o = c("aria.toggleFullscreen");
+    return /* @__PURE__ */ b(
+      P,
       {
         variant: "ghost",
         size: "icon",
-        onClick: m,
+        onClick: u,
         ref: l,
-        className: h("h-8 w-8", n),
+        className: f("h-8 w-8", n),
         "aria-label": o,
-        ...s,
+        ...r,
         children: [
-          a ? /* @__PURE__ */ r(A, { className: "h-4 w-4" }) : /* @__PURE__ */ r(I, { className: "h-4 w-4" }),
-          /* @__PURE__ */ r("span", { className: "sr-only", children: o })
+          a ? /* @__PURE__ */ s(j, { className: "h-4 w-4" }) : /* @__PURE__ */ s(B, { className: "h-4 w-4" }),
+          /* @__PURE__ */ s("span", { className: "sr-only", children: o })
         ]
       }
     );
   }
 );
-V.displayName = "ChartFullScreen";
-const q = t.forwardRef(
-  ({ className: n, children: s, loader: l, ...i }, m) => {
-    const { isLoading: a, chartComponentRef: o, isExpanded: c } = z();
-    return a && l ? /* @__PURE__ */ r("div", { ref: m, className: h(n, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", c && "min-h-0"), ...i, children: l }) : /* @__PURE__ */ F("div", { ref: m, className: h(n, "w-full relative flex-1 min-h-[300px]", c && "min-h-0"), ...i, children: [
-      a && /* @__PURE__ */ F("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
-        /* @__PURE__ */ r(k, { className: "h-8 w-1/3" }),
-        /* @__PURE__ */ r(k, { className: "flex-1 w-full" })
+J.displayName = "ChartFullScreen";
+const I = t.forwardRef(
+  ({ className: n, children: r, loader: l, ...c }, u) => {
+    const { isLoading: a, chartComponentRef: o, isExpanded: m } = A();
+    return a && l ? /* @__PURE__ */ s("div", { ref: u, className: f(n, "w-full relative flex items-center justify-center flex-1 min-h-[300px]", m && "min-h-0"), ...c, children: l }) : /* @__PURE__ */ b("div", { ref: u, className: f(n, "w-full relative flex-1 min-h-[300px]", m && "min-h-0"), ...c, children: [
+      a && /* @__PURE__ */ b("div", { className: "absolute inset-0 z-10 bg-canvas/50 flex flex-col gap-2 p-4", children: [
+        /* @__PURE__ */ s(q, { className: "h-8 w-1/3" }),
+        /* @__PURE__ */ s(q, { className: "flex-1 w-full" })
       ] }),
-      t.Children.map(s, (u) => t.isValidElement(u) ? t.cloneElement(u, { ref: o }) : u)
+      t.Children.map(r, (h) => t.isValidElement(h) ? t.cloneElement(h, { ref: o }) : h)
     ] });
   }
 );
-q.displayName = "ChartContent";
-const W = t.forwardRef(
-  (n, s) => {
+I.displayName = "ChartContent";
+const K = t.forwardRef(
+  (n, r) => {
     const {
       height: l,
-      width: i,
-      className: m,
+      width: c,
+      className: u,
       isLoading: a,
       loader: o,
-      title: c,
-      noWrapper: u,
-      children: R,
-      ...d
-    } = n, w = t.useContext(E), g = t.useMemo(() => {
-      const p = B({ title: c, ...d });
+      title: m,
+      noWrapper: h,
+      children: d,
+      ...p
+    } = n, g = t.useContext(S), [C, w] = t.useState(null), x = t.useCallback((i) => {
+      w(i);
+    }, []), v = t.useMemo(() => {
+      const i = O({ title: m, ...p });
       return {
-        ...p,
+        ...i,
         chart: {
-          ...p.chart,
+          ...i.chart,
           height: l ?? null,
-          width: i ?? null
+          width: c ?? null
         }
       };
-    }, [c, l, i, d]);
-    return u ? /* @__PURE__ */ r(
-      x,
+    }, [m, l, c, p]), E = g?.containerElement ?? C, e = M(v, E);
+    return h ? /* @__PURE__ */ s("div", { ref: x, className: "h-full w-full", children: /* @__PURE__ */ s(
+      N,
       {
-        highcharts: v,
-        options: g,
-        ref: s,
+        highcharts: R,
+        options: e,
+        ref: r,
         containerProps: { style: { height: "100%", width: "100%" } }
       }
-    ) : w ? /* @__PURE__ */ r(
-      x,
+    ) }) : g ? /* @__PURE__ */ s(
+      N,
       {
-        highcharts: v,
-        options: g,
-        ref: s,
+        highcharts: R,
+        options: e,
+        ref: r,
         containerProps: { style: { height: "100%", width: "100%" } }
       }
-    ) : /* @__PURE__ */ r(S, { className: m, isLoading: a, children: /* @__PURE__ */ r(q, { loader: o, children: /* @__PURE__ */ r(
-      x,
+    ) : /* @__PURE__ */ s(H, { className: u, isLoading: a, children: /* @__PURE__ */ s(I, { loader: o, children: /* @__PURE__ */ s(
+      N,
       {
-        highcharts: v,
-        options: g,
-        ref: s,
+        highcharts: R,
+        options: e,
+        ref: r,
         containerProps: { style: { height: "100%", width: "100%" } }
       }
     ) }) });
   }
 );
-W.displayName = "Chart";
+K.displayName = "Chart";
 export {
-  W as Chart,
-  O as ChartActions,
-  S as ChartContainer,
-  q as ChartContent,
-  V as ChartFullScreen,
-  T as ChartHeader,
-  M as ChartTitle
+  K as Chart,
+  G as ChartActions,
+  H as ChartContainer,
+  I as ChartContent,
+  J as ChartFullScreen,
+  W as ChartHeader,
+  D as ChartTitle
 };

package/dist/components/data-display/chart/chart.utils.js

@@ -1,9 +1,10 @@
-const g = (i) => {
+import { CHART_PALETTE_CSS_VARS as g } from "./chart-palette.js";
+const u = (i) => {
   const {
     type: l = "column",
     title: a,
-    subtitle: n,
-    xAxisCategories: s,
+    subtitle: s,
+    xAxisCategories: n,
     xAxisTitle: e,
     yAxisTitle: d,
     series: c,
@@ -37,7 +38,7 @@ const g = (i) => {
       }
     },
     subtitle: {
-      text: n,
+      text: s,
       align: "left"
     },
     credits: {
@@ -53,7 +54,7 @@ const g = (i) => {
       }
     },
     xAxis: {
-      categories: s,
+      categories: n,
       title: e ? {
         text: e,
         style: {
@@ -125,6 +126,7 @@ const g = (i) => {
       },
       shadow: !0
     },
+    colors: [...g],
     plotOptions: {
       column: {
         borderRadius: 4,
@@ -156,6 +158,7 @@ const g = (i) => {
   return {
     ...r,
     ...o,
+    colors: o?.colors ?? r.colors,
     chart: {
       ...r.chart,
       ...o?.chart
@@ -194,5 +197,5 @@ const g = (i) => {
   };
 };
 export {
-  g as getBaseChartOptions
+  u as getBaseChartOptions
 };

package/dist/components/data-display/chart/index.d.ts

@@ -1,3 +1,4 @@
 export * from './chart';
 export * from './chart.types';
 export * from './chart.utils';
+export * from './chart-palette';

package/dist/components/data-display/chart/index.js

@@ -1,12 +1,18 @@
-import { Chart as a, ChartActions as e, ChartContainer as C, ChartContent as h, ChartFullScreen as o, ChartHeader as n, ChartTitle as i } from "./chart.js";
-import { getBaseChartOptions as p } from "./chart.utils.js";
+import { Chart as C, ChartActions as e, ChartContainer as a, ChartContent as o, ChartFullScreen as h, ChartHeader as A, ChartTitle as S } from "./chart.js";
+import { getBaseChartOptions as _ } from "./chart.utils.js";
+import { CHART_CANONICAL_CSS_VARS as l, CHART_PALETTE_CSS_VARS as s, CHART_PALETTE_SIZE as E, chartPaletteCssVar as R, resolveChartPalette as i } from "./chart-palette.js";
 export {
-  a as Chart,
+  l as CHART_CANONICAL_CSS_VARS,
+  s as CHART_PALETTE_CSS_VARS,
+  E as CHART_PALETTE_SIZE,
+  C as Chart,
   e as ChartActions,
-  C as ChartContainer,
-  h as ChartContent,
-  o as ChartFullScreen,
-  n as ChartHeader,
-  i as ChartTitle,
-  p as getBaseChartOptions
+  a as ChartContainer,
+  o as ChartContent,
+  h as ChartFullScreen,
+  A as ChartHeader,
+  S as ChartTitle,
+  R as chartPaletteCssVar,
+  _ as getBaseChartOptions,
+  i as resolveChartPalette
 };

package/dist/components/data-display/chart/resolve-highcharts-options.d.ts

@@ -0,0 +1,3 @@
+import { default as Highcharts } from 'highcharts';
+/** Deep-resolve design-token color strings before passing options to Highcharts. */
+export declare function resolveHighchartsOptions<T extends Highcharts.Options>(options: T, scope?: HTMLElement | null): T;

package/dist/components/data-display/chart/resolve-highcharts-options.js

@@ -0,0 +1,35 @@
+import { resolveDesignTokenColor as l } from "../../../lib/resolve-design-token-color.js";
+const s = /* @__PURE__ */ new Set([
+  "color",
+  "fillColor",
+  "lineColor",
+  "borderColor",
+  "backgroundColor",
+  "upColor",
+  "upLineColor",
+  "minColor",
+  "maxColor",
+  "negativeColor",
+  "medianColor"
+]);
+function C(o) {
+  return o === "colors" || o !== void 0 && s.has(o);
+}
+function t(o, r, i) {
+  if (typeof o == "string")
+    return C(i) ? l(o, r) : o;
+  if (Array.isArray(o))
+    return o.map((n) => t(n, r, i));
+  if (!o || typeof o != "object")
+    return o;
+  const e = {};
+  for (const [n, f] of Object.entries(o))
+    e[n] = t(f, r, n);
+  return e;
+}
+function d(o, r) {
+  return typeof document > "u" || !r ? o : t(o, r);
+}
+export {
+  d as resolveHighchartsOptions
+};

package/dist/components/data-display/statistics-card/statistics-card.color.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Fade a slice fill without shifting hue.
+ * Hex: legacy rgba(…, opacity) — unchanged visual for existing consumers.
+ * var(--color-*): color-mix — same apparent 40% wash on chart background.
+ */
+export declare function fadeSliceColor(color: string, opacity?: number): string;

package/dist/components/data-display/statistics-card/statistics-card.color.js

@@ -0,0 +1,19 @@
+function c(a, n = 0.4) {
+  const t = a.trim();
+  if (t.startsWith("var(")) {
+    const r = Math.round(n * 100);
+    return `color-mix(in srgb, ${t} ${r}%, transparent)`;
+  }
+  if (t.startsWith("#")) {
+    let r = t.slice(1);
+    if (r.length === 3 && (r = r.split("").map((e) => e + e).join("")), r.length === 6) {
+      const e = Number.parseInt(r.slice(0, 2), 16), s = Number.parseInt(r.slice(2, 4), 16), i = Number.parseInt(r.slice(4, 6), 16);
+      if (!Number.isNaN(e) && !Number.isNaN(s) && !Number.isNaN(i))
+        return `rgba(${e}, ${s}, ${i}, ${n})`;
+    }
+  }
+  return t;
+}
+export {
+  c as fadeSliceColor
+};

package/dist/components/data-display/statistics-card/statistics-card.hooks.js

@@ -1,35 +1,37 @@
-import * as n from "react";
-import { statisticsTooltipFormatter as i, createStatisticsSliceClickHandler as d } from "./statistics-card.highcharts.js";
-const C = (t) => {
-  const r = n.useMemo(
-    () => t.reduce((o, a) => o + a.value, 0),
-    [t]
-  ), e = n.useMemo(
-    () => t.reduce((o, a) => o + (a.checked ? a.value : 0), 0),
-    [t]
-  ), s = t.some((o) => o.checked);
-  return { total: r, checkedTotal: e, hasChecked: s };
-}, b = (t, r = 0.4) => {
-  const e = t.replace("#", ""), s = parseInt(e.substring(0, 2), 16), o = parseInt(e.substring(2, 4), 16), a = parseInt(e.substring(4, 6), 16);
-  return `rgba(${s}, ${o}, ${a}, ${r})`;
-}, M = (t, r) => n.useMemo(
+import * as a from "react";
+import { fadeSliceColor as u } from "./statistics-card.color.js";
+import { resolveDesignTokenColor as d } from "../../../lib/resolve-design-token-color.js";
+import { statisticsTooltipFormatter as b, createStatisticsSliceClickHandler as p } from "./statistics-card.highcharts.js";
+const k = (o) => {
+  const s = a.useMemo(
+    () => o.reduce((t, n) => t + n.value, 0),
+    [o]
+  ), e = a.useMemo(
+    () => o.reduce((t, n) => t + (n.checked ? n.value : 0), 0),
+    [o]
+  ), r = o.some((t) => t.checked);
+  return { total: s, checkedTotal: e, hasChecked: r };
+}, v = (o, s) => a.useMemo(
   () => [
     {
       type: "pie",
       name: "Statistics",
       innerSize: "72%",
-      data: t.map((e) => ({
-        name: e.label,
-        y: e.value,
-        color: r ? e.checked ? e.borderColor : b(e.borderColor, 0.4) : e.borderColor
-      }))
+      data: o.map((e) => {
+        const r = s ? e.checked ? e.borderColor : u(e.borderColor, 0.4) : e.borderColor, t = typeof document < "u" ? d(r) : r;
+        return {
+          name: e.label,
+          y: e.value,
+          color: t
+        };
+      })
     }
   ],
-  [t, r]
-), k = (t, r, e, s) => n.useMemo(
-  () => t ?? String(r ? e : s),
-  [t, r, e, s]
-), p = () => n.useMemo(
+  [o, s]
+), M = (o, s, e, r) => a.useMemo(
+  () => o ?? String(s ? e : r),
+  [o, s, e, r]
+), S = () => a.useMemo(
   () => ({
     enabled: !0,
     useHTML: !0,
@@ -42,20 +44,20 @@ const C = (t) => {
       fontFamily: "Manrope, sans-serif",
       fontSize: "12px"
     },
-    formatter: i
+    formatter: b
   }),
   []
-), S = (t, r, e) => {
-  const s = e?.borderWidth ?? 2, o = e?.borderColor ?? "var(--color-disabled-surface)", a = e?.borderRadius ?? 4, c = e?.enableHover ?? !0, l = e?.enableClick ?? !0, u = n.useMemo(
-    () => d(t, r, l),
-    [t, r, l]
+), C = (o, s, e) => {
+  const r = e?.borderWidth ?? 2, t = e?.borderColor ?? "var(--color-disabled-surface)", n = e?.borderRadius ?? 4, c = e?.enableHover ?? !0, l = e?.enableClick ?? !0, i = a.useMemo(
+    () => p(o, s, l),
+    [o, s, l]
   );
-  return n.useMemo(
+  return a.useMemo(
     () => ({
       pie: {
-        borderWidth: s,
-        borderColor: o,
-        borderRadius: a,
+        borderWidth: r,
+        borderColor: t,
+        borderRadius: n,
         dataLabels: { enabled: !1 },
         showInLegend: !1,
         allowPointSelect: !1,
@@ -63,32 +65,32 @@ const C = (t) => {
         states: { hover: { enabled: c, brightness: 0.05 } },
         point: {
           events: {
-            click: u
+            click: i
           }
         }
       }
     }),
-    [u, s, o, a, c]
+    [i, r, t, n, c]
   );
-}, v = (t, r, e) => {
-  const s = p(), o = S(t, r, e);
-  return n.useMemo(
+}, y = (o, s, e) => {
+  const r = S(), t = C(o, s, e);
+  return a.useMemo(
     () => ({
       chart: {
         margin: [0, 0, 0, 0],
         spacing: [0, 0, 0, 0]
       },
-      tooltip: s,
-      plotOptions: o
+      tooltip: r,
+      plotOptions: t
     }),
-    [s, o]
+    [r, t]
   );
 };
 export {
-  C as useStatisticsChartData,
-  k as useStatisticsChartLabel,
-  v as useStatisticsChartOptions,
-  S as useStatisticsChartPlotOptions,
-  M as useStatisticsChartSeries,
-  p as useStatisticsChartTooltip
+  k as useStatisticsChartData,
+  M as useStatisticsChartLabel,
+  y as useStatisticsChartOptions,
+  C as useStatisticsChartPlotOptions,
+  v as useStatisticsChartSeries,
+  S as useStatisticsChartTooltip
 };