@canplot/react 0.1.12 → 0.1.14

package/dist/canplot.mjs

@@ -1,5 +1,5 @@
 import { jsxs as lt, jsx as _, Fragment as _t } from "react/jsx-runtime";
-import Z, { createContext as vt, useContext as J, useRef as D, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as At, useMemo as Q, useState as V, useId as Ut } from "react";
+import Z, { createContext as vt, useContext as J, useRef as U, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as At, useMemo as Q, useState as V, useId as Ut } from "react";
 import { createStore as bt, useStore as St } from "zustand";
 const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e) => s + (e ?? 0), 0), ue = (t, s) => {
   let e = 0;
@@ -7,7 +7,7 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     Math.abs(t[o] - s) < Math.abs(t[e] - s) && (e = o);
   return e;
 }, Dt = (t, s, e, o) => {
-  const { min: n, max: c, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (a === "x" ? r.width : r.height) / (c - n);
+  const { min: n, max: i, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (a === "x" ? r.width : r.height) / (i - n);
   return s / d;
 }, I = (t, s) => {
   const e = t.scales.find((o) => o.id === s);
@@ -18,11 +18,11 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
   const e = window.devicePixelRatio || 1;
   t.lineCap = s?.lineCap ?? "butt", t.lineDashOffset = e * (s?.lineDashOffset ?? 0), t.lineJoin = s?.lineJoin ?? "miter", t.lineWidth = e * (s?.lineWidth ?? 1), t.miterLimit = e * (s?.miterLimit ?? 10), t.strokeStyle = s?.strokeStyle ?? "black", t.fillStyle = s?.fillStyle ?? t.strokeStyle, t.font = s?.font ?? `${10 * e}px sans-serif`, t.textAlign = s?.textAlign ?? "start", t.direction = s?.direction ?? "inherit", t.textBaseline = s?.textBaseline ?? "alphabetic", t.fontKerning = s?.fontKerning ?? "auto";
 }, ut = (t, s, e, o) => {
-  const n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: c, max: a, origin: r } = I(t, e), d = (r === "x" ? n.width : n.height) / (a - c);
+  const n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: i, max: a, origin: r } = I(t, e), d = (r === "x" ? n.width : n.height) / (a - i);
   return s * d;
 }, H = (t, s, e, o) => {
-  const { min: n, origin: c } = I(t, e), a = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - n, e, o);
-  return c === "x" ? j(
+  const { min: n, origin: i } = I(t, e), a = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - n, e, o);
+  return i === "x" ? j(
     a.x + r,
     a.x - 10 * a.width,
     a.x + 11 * a.width
@@ -34,19 +34,19 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
 }, de = (t, s, e) => {
   const { min: o, max: n } = I(t, e);
   return j(s, o, n);
-}, O = (t, s, e) => {
+}, Y = (t, s, e) => {
   const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return j(s, o.x, o.x + o.width);
-}, B = (t, s, e) => {
+}, O = (t, s, e) => {
   const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return j(s, o.y, o.y + o.height);
 }, rt = (t, s, e) => {
   const { min: o, max: n } = I(t, e);
   return s >= o && s <= n;
-}, L = (t, s, e, o) => {
-  const { min: n, max: c, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = a === "x" ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
-  return n + d * (c - n);
-}, Lt = (t) => {
+}, D = (t, s, e, o) => {
+  const { min: n, max: i, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = a === "x" ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
+  return n + d * (i - n);
+}, It = (t) => {
   const { ctx: s, scales: e } = t;
   for (const o of e) {
     if (!o.axis) continue;
@@ -61,16 +61,16 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
       if (o.axis.position === "bottom")
         s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x + n.width, n.y), s.stroke();
       else if (o.axis.position === "top") {
-        const c = n.y + n.height;
-        s.beginPath(), s.moveTo(n.x, c), s.lineTo(n.x + n.width, c), s.stroke();
+        const i = n.y + n.height;
+        s.beginPath(), s.moveTo(n.x, i), s.lineTo(n.x + n.width, i), s.stroke();
       }
     } else if (o.axis.position === "left") {
-      const c = n.x + n.width;
-      s.beginPath(), s.moveTo(c, n.y), s.lineTo(c, n.y + n.height), s.stroke();
+      const i = n.x + n.width;
+      s.beginPath(), s.moveTo(i, n.y), s.lineTo(i, n.y + n.height), s.stroke();
     } else o.axis.position === "right" && (s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x, n.y + n.height), s.stroke());
     s.restore();
   }
-}, It = () => bt((t, s) => {
+}, Lt = () => bt((t, s) => {
   const e = () => {
     const o = s()._frame;
     if (!o) throw new Error("No frame set in frame store");
@@ -80,14 +80,14 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (o, n) => O(e(), o, n ?? "canvas"),
-    clampYPosToChartArea: (o, n) => B(e(), o, n ?? "canvas"),
-    valToPos: (o, n, c) => H(e(), o, n, c ?? "canvas"),
-    valToPxDistance: (o, n, c) => ut(
+    clampXPosToChartArea: (o, n) => Y(e(), o, n ?? "canvas"),
+    clampYPosToChartArea: (o, n) => O(e(), o, n ?? "canvas"),
+    valToPos: (o, n, i) => H(e(), o, n, i ?? "canvas"),
+    valToPxDistance: (o, n, i) => ut(
       e(),
       o,
       n,
-      c ?? "canvas"
+      i ?? "canvas"
     ),
     valFits: (o, n) => rt(e(), o, n),
     getScale: (o) => I(e(), o)
@@ -97,14 +97,14 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     t((s) => ({ version: s.version + 1 }));
   },
   version: 0
-})), dt = vt(null), Ct = vt(null), Y = (t, s) => {
+})), dt = vt(null), Ct = vt(null), z = (t, s) => {
   const e = J(dt), o = J(Ct);
   if (!e || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const n = D(t);
+  const n = U(t);
   n.current = t, N(() => {
-    n.current(e.getState()), e.subscribe((c) => {
-      c._frame && n.current(c);
+    n.current(e.getState()), e.subscribe((i) => {
+      i._frame && n.current(i);
     });
   }, [e]), wt(() => {
     o.getState().notify();
@@ -127,8 +127,8 @@ function Ft(t) {
   return (s) => {
     const e = [];
     for (const o of t) {
-      const n = at(o, s), c = typeof n == "function";
-      e.push(c ? n : () => at(o, null));
+      const n = at(o, s), i = typeof n == "function";
+      e.push(i ? n : () => at(o, null));
     }
     return () => {
       for (const o of e) o();
@@ -142,12 +142,12 @@ function at(t, s) {
 }
 var zt = parseInt(Rt.split(".")[0], 10) >= 19 ? Ft : Kt;
 const he = At(({ configuration: t, children: s, style: e, className: o }, n) => {
-  const c = D(null), a = D(null), r = Ot(a), d = Q(It, []), u = Q(Xt, []);
+  const i = U(null), a = U(null), r = Ot(a), d = Q(Lt, []), u = Q(Xt, []);
   N(() => {
     d.setState({
-      _frame: Bt(t, r, c.current)
+      _frame: Bt(t, r, i.current)
     });
-  }, [t, r, c, d]), N(() => d.subscribe((p) => {
+  }, [t, r, i, d]), N(() => d.subscribe((p) => {
     p._frame && $t(p._frame);
   }), [d]), N(() => {
     let p = !1;
@@ -175,7 +175,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         /* @__PURE__ */ _(
           "canvas",
           {
-            ref: c,
+            ref: i,
             width: r.width * l,
             height: r.height * l,
             style: {
@@ -202,8 +202,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     width: 0,
     height: 0
   }), [o] = V(() => new ResizeObserver((n) => {
-    for (const c of n) {
-      const a = Math.round(c.contentRect.width), r = Math.round(c.contentRect.height);
+    for (const i of n) {
+      const a = Math.round(i.contentRect.width), r = Math.round(i.contentRect.height);
       e(
         (d) => d.width !== a || d.height !== r ? { ...d, width: a, height: r } : d
       );
@@ -211,9 +211,9 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   }));
   return N(() => {
     if (!t.current) return;
-    const n = t.current.clientWidth, c = t.current.clientHeight;
+    const n = t.current.clientWidth, i = t.current.clientHeight;
     return e(
-      (a) => a.width !== n || a.height !== c ? { ...a, width: n, height: c } : a
+      (a) => a.width !== n || a.height !== i ? { ...a, width: n, height: i } : a
     ), o.observe(t.current, { box: "border-box" }), () => o.disconnect();
   }, [o, t]), s;
 }, Bt = (t, s, e) => {
@@ -222,22 +222,22 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   const n = window.devicePixelRatio || 1;
   if (s.width === 0 || s.height === 0)
     return null;
-  const c = {
+  const i = {
     x: t.padding.left,
     y: t.padding.top,
     width: s.width - t.padding.left - t.padding.right,
     height: s.height - t.padding.top - t.padding.bottom
   };
   for (const f of t.scales)
-    f.axis && (f.origin === "x" ? (f.axis.position === "bottom" || f.axis.position === "top") && (c.height = Math.max(
+    f.axis && (f.origin === "x" ? (f.axis.position === "bottom" || f.axis.position === "top") && (i.height = Math.max(
       0,
-      c.height - f.axis.size
-    ), f.axis.position === "top" && (c.y += f.axis.size)) : (f.axis.position === "left" || f.axis.position === "right") && (c.width = Math.max(0, c.width - f.axis.size), f.axis.position === "left" && (c.x += f.axis.size)));
+      i.height - f.axis.size
+    ), f.axis.position === "top" && (i.y += f.axis.size)) : (f.axis.position === "left" || f.axis.position === "right") && (i.width = Math.max(0, i.width - f.axis.size), f.axis.position === "left" && (i.x += f.axis.size)));
   const a = {
-    x: c.x * n,
-    y: c.y * n,
-    width: c.width * n,
-    height: c.height * n
+    x: i.x * n,
+    y: i.y * n,
+    width: i.width * n,
+    height: i.height * n
   }, r = [];
   let d = t.padding.left * n, u = o.canvas.width - t.padding.right * n, l = o.canvas.height - t.padding.bottom * n, p = t.padding.top * n;
   for (const f of t.scales) {
@@ -245,22 +245,22 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       r.push({ ...f, axis: null });
       continue;
     }
-    let i;
+    let c;
     if (f.origin === "x")
       switch (f.axis.position) {
         case "bottom":
-          l -= f.axis.size * n, i = {
-            x: c.x,
+          l -= f.axis.size * n, c = {
+            x: i.x,
             y: l / n,
-            width: c.width,
+            width: i.width,
             height: f.axis.size
           };
           break;
         case "top":
-          p += f.axis.size * n, i = {
-            x: c.x,
+          p += f.axis.size * n, c = {
+            x: i.x,
             y: p / n - f.axis.size,
-            width: c.width,
+            width: i.width,
             height: f.axis.size
           };
           break;
@@ -271,19 +271,19 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     else
       switch (f.axis.position) {
         case "left":
-          d += f.axis.size * n, i = {
+          d += f.axis.size * n, c = {
             x: d / n - f.axis.size,
-            y: c.y,
+            y: i.y,
             width: f.axis.size,
-            height: c.height
+            height: i.height
           };
           break;
         case "right":
-          u -= f.axis.size * n, i = {
+          u -= f.axis.size * n, c = {
             x: u / n,
-            y: c.y,
+            y: i.y,
             width: f.axis.size,
-            height: c.height
+            height: i.height
           };
           break;
         case "top":
@@ -291,16 +291,16 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
           throw new Error("Invalid axis position for y origin");
       }
     const h = {
-      x: i.x * n,
-      y: i.y * n,
-      width: i.width * n,
-      height: i.height * n
+      x: c.x * n,
+      y: c.y * n,
+      width: c.width * n,
+      height: c.height * n
     };
     r.push({
       ...f,
       axis: {
         ...f.axis,
-        cssRect: i,
+        cssRect: c,
         canvasRect: h
       }
     });
@@ -310,24 +310,24 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     dpr: n,
     padding: t.padding,
     scales: r,
-    chartAreaCSS: c,
+    chartAreaCSS: i,
     chartAreaCanvasPX: a
   };
 }, $t = (t) => {
-  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Lt(t);
-}, fe = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(
-  ({ getCtx: n, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: r }) => {
+  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), It(t);
+}, fe = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (z(
+  ({ getCtx: n, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: r }) => {
     const d = n();
     d.save(), d.beginPath(), R(d, o);
     for (const u of t) {
-      const l = c(r(u.x, s)), p = a(r(u.y, e));
+      const l = i(r(u.x, s)), p = a(r(u.y, e));
       d.lineTo(l, p);
     }
     d.stroke(), d.restore();
   },
   [t, s, e, o]
-), null), me = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: n }) => (Y(({ getCtx: c, valToPos: a, valFits: r }) => {
-  const d = c();
+), null), me = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: n }) => (z(({ getCtx: i, valToPos: a, valFits: r }) => {
+  const d = i();
   d.save(), d.beginPath(), R(d, n);
   for (const u of t) {
     if (!r(u.x, s) || !r(u.y, e))
@@ -342,9 +342,9 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   yScaleId: e,
   style: o,
   barWidth: n,
-  xPositionOffset: c,
+  xPositionOffset: i,
   radius: a
-}) => (Y(
+}) => (z(
   ({
     getCtx: r,
     valToPxDistance: d,
@@ -357,8 +357,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     m.save(), R(m, o);
     const f = d(n, s);
     m.beginPath();
-    for (const i of t) {
-      const y = u(i.x, s) - f / 2 + c * f, x = p(u(0, e)), w = p(u(i.y, e)), g = x - w, v = l(y), T = l(y + f) - v;
+    for (const c of t) {
+      const y = u(c.x, s) - f / 2 + i * f, x = p(u(0, e)), w = p(u(c.y, e)), g = x - w, v = l(y), T = l(y + f) - v;
       a ? m.roundRect(
         v,
         w,
@@ -369,11 +369,11 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
     m.closePath(), m.fill(), o?.strokeStyle && m.stroke(), m.restore();
   },
-  [t, s, e, o, n, c, a]
-), null), ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(({ getCtx: n, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: r }) => {
+  [t, s, e, o, n, i, a]
+), null), ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (z(({ getCtx: n, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: r }) => {
   const d = [];
   for (const l of t) {
-    const p = c(r(l.x, s)), m = a(r(l.y[0], e)), f = a(r(l.y[1], e));
+    const p = i(r(l.x, s)), m = a(r(l.y[0], e)), f = a(r(l.y[1], e));
     d.push({ x: p, y: m }), d.unshift({ x: p, y: f });
   }
   const u = n();
@@ -383,11 +383,11 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       u.lineTo(l.x, l.y);
     u.closePath(), u.fill(), u.restore();
   }
-}, [t, s, e, o]), null), xe = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: n }) => (Y(
-  ({ getCtx: c, clampXPosToChartArea: a, clampYPosToChartArea: r, valToPos: d }) => {
-    const u = [], l = c();
-    for (const i of t) {
-      const h = a(d(i.x, e)), y = r(d(i.y, o));
+}, [t, s, e, o]), null), xe = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: n }) => (z(
+  ({ getCtx: i, clampXPosToChartArea: a, clampYPosToChartArea: r, valToPos: d }) => {
+    const u = [], l = i();
+    for (const c of t) {
+      const h = a(d(c.x, e)), y = r(d(c.y, o));
       u.push({ x: h, y });
     }
     const p = u.at(0), m = u.at(-1);
@@ -395,12 +395,12 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       return;
     const f = r(d(0, o));
     l.save(), l.beginPath(), R(l, n), l.moveTo(p.x, f);
-    for (const i of u)
-      l.lineTo(i.x, i.y);
+    for (const c of u)
+      l.lineTo(c.x, c.y);
     if (l.lineTo(m.x, f), l.closePath(), l.fill(), s) {
       l.beginPath(), l.moveTo(p.x, p.y);
-      for (const i of u)
-        l.lineTo(i.x, i.y);
+      for (const c of u)
+        l.lineTo(c.x, c.y);
       l.stroke();
     }
     l.restore();
@@ -411,7 +411,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     clampXPosToChartArea: e,
     clampYPosToChartArea: o,
     getScale: n,
-    valToPos: c,
+    valToPos: i,
     valFits: a
   }) => {
     const r = {};
@@ -420,13 +420,13 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       switch (u.exceeding) {
         case "discard": {
           if (a(u.value, u.scaleId)) {
-            const l = c(u.value, u.scaleId, s);
+            const l = i(u.value, u.scaleId, s);
             r[d] = l;
           }
           break;
         }
         case "clamp": {
-          const l = c(u.value, u.scaleId, s);
+          const l = i(u.value, u.scaleId, s);
           r[d] = n(u.scaleId)?.origin === "x" ? e(l, s) : o(l, s);
           break;
         }
@@ -434,15 +434,15 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
     return r;
   }
-), ve = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (Y(
+), ve = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: i }) => (z(
   ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
     const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "x") return;
-    const m = p.axis, f = m.position === "top" ? m.canvasRect.y + m.canvasRect.height : m.canvasRect.y, i = window.devicePixelRatio || 1, h = f, y = (n ?? 6) * i, x = m.position === "top" ? f - y : f + y, w = (o ?? 12) * i;
+    const m = p.axis, f = m.position === "top" ? m.canvasRect.y + m.canvasRect.height : m.canvasRect.y, c = window.devicePixelRatio || 1, h = f, y = (n ?? 6) * c, x = m.position === "top" ? f - y : f + y, w = (o ?? 12) * c;
     l.save(), l.fontKerning = "auto", R(l, {
       ...s
     }), l.beginPath();
-    const g = Array.isArray(c) ? c : c({ ...p, axis: m }, u());
+    const g = Array.isArray(i) ? i : i({ ...p, axis: m }, u());
     for (const { value: v } of g) {
       const T = r(v, t, "canvas");
       l.moveTo(T, h), l.lineTo(T, x);
@@ -457,20 +457,20 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       const b = r(v, t, "canvas"), C = T.split(`
 `);
       for (let k = 0; k < C.length; k++)
-        l.fillText(C[k], b, x + i * 2 + k * w);
+        l.fillText(C[k], b, x + c * 2 + k * w);
     }
     l.restore();
   },
-  [c, t, s, e]
-), null), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (Y(
+  [i, t, s, e]
+), null), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: i }) => (z(
   ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
     const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "y") return;
-    const m = p.axis, f = m.position === "left" ? m.canvasRect.x + m.canvasRect.width : m.canvasRect.x, i = f, h = n ?? 6, y = m.position === "left" ? f - h : f + h, x = o ?? 12, w = Array.isArray(c) ? c : c({ ...p, axis: m }, u());
+    const m = p.axis, f = m.position === "left" ? m.canvasRect.x + m.canvasRect.width : m.canvasRect.x, c = f, h = n ?? 6, y = m.position === "left" ? f - h : f + h, x = o ?? 12, w = Array.isArray(i) ? i : i({ ...p, axis: m }, u());
     l.save(), l.fontKerning = "auto", R(l, { ...s }), l.beginPath();
     for (const { value: g } of w) {
       const v = r(g, t, "canvas");
-      l.moveTo(i, v), l.lineTo(y, v);
+      l.moveTo(c, v), l.lineTo(y, v);
     }
     l.stroke(), l.restore(), l.save(), R(l, {
       textBaseline: "middle",
@@ -486,7 +486,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
     l.restore();
   },
-  [c, t, s, e]
+  [i, t, s, e]
 ), null), E = () => {
   const t = [];
   return {
@@ -524,8 +524,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   const o = Z.useRef(e);
   o.current = e, Z.useEffect(() => S[t].addEventListener(
     s,
-    (c, a) => {
-      o.current(a, c);
+    (i, a) => {
+      o.current(a, i);
     }
   ), [s, t, o]);
 }, ft = Z.createContext(""), mt = (t, s) => {
@@ -533,18 +533,18 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   return M(t, e, s);
 }, Nt = (t, s, e, o, n) => {
   if (!s) return;
-  const c = o ?? e.scales.find((p) => p.origin === "x")?.id, a = n ?? e.scales.find((p) => p.origin === "y")?.id;
-  if (!c || !a)
+  const i = o ?? e.scales.find((p) => p.origin === "x")?.id, a = n ?? e.scales.find((p) => p.origin === "y")?.id;
+  if (!i || !a)
     return;
   const r = t.clientX - s.left, d = {
-    scaleId: c,
-    value: L(e, r, c, "css")
+    scaleId: i,
+    value: D(e, r, i, "css")
   }, u = t.clientY - s.top, l = {
     scaleId: a,
-    value: L(e, u, a, "css")
+    value: D(e, u, a, "css")
   };
   return { pointerSyncPosition: { x: d, y: l }, cssX: r, cssY: u };
-}, z = (t, s) => {
+}, F = (t, s) => {
   const e = t.x ? H(
     s,
     t.x.value,
@@ -561,8 +561,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     cssY: o,
     scaled: Object.fromEntries(
       s.scales.map((n) => {
-        const c = n.origin === "y" ? o : e;
-        return [n.id, L(s, c, n.id, "css")];
+        const i = n.origin === "y" ? o : e;
+        return [n.id, D(s, i, n.id, "css")];
       })
     )
   };
@@ -577,11 +577,11 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     s.to,
     s.scaleId,
     "css"
-  ), c = e.scales.flatMap(
+  ), i = e.scales.flatMap(
     (a) => {
       if (a.origin !== t)
         return [];
-      const r = L(e, o, a.id, "css"), d = L(e, n, a.id, "css");
+      const r = D(e, o, a.id, "css"), d = D(e, n, a.id, "css");
       return [
         {
           scaleId: a.id,
@@ -594,7 +594,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   return {
     fromCSS: o,
     toCSS: n,
-    scaled: c
+    scaled: i
   };
 }, be = ({
   id: t,
@@ -602,7 +602,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   onDblClick: e,
   onMouseMove: o,
   onMouseDown: n,
-  onMouseUp: c,
+  onMouseUp: i,
   onDocumentMouseUp: a,
   onSpanSelect: r,
   onContextMenu: d,
@@ -611,24 +611,24 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   sync: p,
   children: m
 }) => {
-  const f = Ut(), i = t || f;
-  return M("dblclick", i, (h) => {
+  const f = Ut(), c = t || f;
+  return M("dblclick", c, (h) => {
     e?.(h);
-  }), M("click", i, (h) => {
+  }), M("click", c, (h) => {
     s?.(h);
-  }), M("move", i, (h) => {
+  }), M("move", c, (h) => {
     o?.(h);
-  }), M("mousedown", i, (h) => {
+  }), M("mousedown", c, (h) => {
     n?.(h);
-  }), M("mouseup", i, (h) => {
-    c?.(h);
-  }), M("documentmouseup", i, (h) => {
+  }), M("mouseup", c, (h) => {
+    i?.(h);
+  }), M("documentmouseup", c, (h) => {
     a?.(h);
-  }), M("spanselect", i, (h) => {
+  }), M("spanselect", c, (h) => {
     r?.(h);
-  }), M("contextmenu", i, (h) => {
+  }), M("contextmenu", c, (h) => {
     d?.(h);
-  }), /* @__PURE__ */ lt(ft.Provider, { value: i, children: [
+  }), /* @__PURE__ */ lt(ft.Provider, { value: c, children: [
     /* @__PURE__ */ _(
       Vt,
       {
@@ -640,22 +640,22 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     m
   ] });
 }, Vt = ({ className: t, style: s, sync: e }) => {
-  const o = D(null), n = ht(), c = D(n);
-  c.current = n;
-  const a = J(ft), r = e?.key || a, d = D(null), u = D(null), l = D(null), p = () => {
-    const i = o.current?.parentElement;
-    if (i) {
-      if (i.dataset.canplotroot === void 0)
+  const o = U(null), n = ht(), i = U(n);
+  i.current = n;
+  const a = J(ft), r = e?.key || a, d = U(null), u = U(null), l = U(null), p = () => {
+    const c = o.current?.parentElement;
+    if (c) {
+      if (c.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return i.getBoundingClientRect();
+      return c.getBoundingClientRect();
     }
-  }, m = (i, h) => {
+  }, m = (c, h) => {
     const y = Nt(
-      i,
+      c,
       p(),
-      c.current,
+      i.current,
       e?.xViaScaleId,
       e?.yViaScaleId
     );
@@ -663,21 +663,21 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       y.pointerSyncPosition,
       { cssX: y.cssX, cssY: y.cssY },
       {
-        ctrlKey: i.ctrlKey,
-        altKey: i.altKey,
-        shiftKey: i.shiftKey,
-        metaKey: i.metaKey
+        ctrlKey: c.ctrlKey,
+        altKey: c.altKey,
+        shiftKey: c.shiftKey,
+        metaKey: c.metaKey
       }
     );
-  }, f = D(m);
+  }, f = U(m);
   return f.current = m, wt(() => {
-    const i = (g) => {
+    const c = (g) => {
       const v = u.current;
       v && S.sync_spanselect.dispatchEvent(r, {
         ...v,
         completed: !0
       }), S.documentmouseup.dispatchEvent(r, {
-        frame: c.current,
+        frame: i.current,
         keys: {
           ctrlKey: g.ctrlKey,
           altKey: g.altKey,
@@ -715,44 +715,44 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         (v, { cssX: T, cssY: b }, C) => {
           const k = d.current;
           if (!k || !v.x || !v.y) return;
-          const A = c.current, P = k.xRangeCss.start, $ = T, F = k.yRangeCss.start, st = b, nt = I(A, v.x.scaleId), ot = I(A, v.y.scaleId);
+          const A = i.current, P = k.xRangeCss.start, B = T, K = k.yRangeCss.start, st = b, nt = I(A, v.x.scaleId), ot = I(A, v.y.scaleId);
           d.current = {
-            xRangeCss: { start: P, end: $ },
-            yRangeCss: { start: F, end: st }
+            xRangeCss: { start: P, end: B },
+            yRangeCss: { start: K, end: st }
           };
-          let U = "below_threshold";
-          const ct = Math.abs(F - st), it = Math.abs(P - $);
-          ct < 10 && it < 10 ? U = "below_threshold" : ct > 30 && it > 30 ? U = "box" : ct > it ? U = "y" : U = "x";
-          const Mt = U === "x" || U === "box" ? {
+          let $ = "below_threshold";
+          const it = Math.abs(K - st), ct = Math.abs(P - B);
+          it < 10 && ct < 10 ? $ = "below_threshold" : it > 30 && ct > 30 ? $ = "box" : it > ct ? $ = "y" : $ = "x";
+          const Mt = {
             scaleId: nt.id,
-            from: L(
+            from: D(
               A,
-              O(c.current, P, "css"),
+              Y(i.current, P, "css"),
               nt.id,
               "css"
             ),
-            to: L(
+            to: D(
               A,
-              O(c.current, $, "css"),
+              Y(i.current, B, "css"),
               nt.id,
               "css"
             )
-          } : void 0, Pt = U === "y" || U === "box" ? {
+          }, Pt = {
             scaleId: ot.id,
-            from: L(
+            from: D(
               A,
-              B(c.current, F, "css"),
+              O(i.current, K, "css"),
               ot.id,
               "css"
             ),
-            to: L(
+            to: D(
               A,
-              B(c.current, st, "css"),
+              O(i.current, st, "css"),
               ot.id,
               "css"
             )
-          } : void 0, yt = {
-            mode: U,
+          }, yt = {
+            mode: $,
             xRange: Mt,
             yRange: Pt,
             completed: !1,
@@ -779,96 +779,96 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         }
       });
     };
-    document.addEventListener("mouseup", i), document.addEventListener("keydown", h), document.addEventListener("keyup", h), document.addEventListener("mousemove", y);
+    document.addEventListener("mouseup", c), document.addEventListener("keydown", h), document.addEventListener("keyup", h), document.addEventListener("mousemove", y);
     const w = o.current;
     return w?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", i), document.removeEventListener("keydown", h), document.removeEventListener("keyup", h), document.removeEventListener("mousemove", y), w?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", c), document.removeEventListener("keydown", h), document.removeEventListener("keyup", h), document.removeEventListener("mousemove", y), w?.removeEventListener("wheel", x);
     };
-  }, [c, r, f]), M("sync_dblclick", r, (i) => {
-    const h = z(
-      i.positions,
-      c.current
+  }, [i, r, f]), M("sync_dblclick", r, (c) => {
+    const h = F(
+      c.positions,
+      i.current
     );
     h && S.dblclick.dispatchEvent(a, {
-      frame: c.current,
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_click", r, (i) => {
-    const h = z(
-      i.positions,
-      c.current
+  }), M("sync_click", r, (c) => {
+    const h = F(
+      c.positions,
+      i.current
     );
     h && S.click.dispatchEvent(a, {
-      frame: c.current,
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_contextmenu", r, (i) => {
-    const h = z(
-      i.positions,
-      c.current
+  }), M("sync_contextmenu", r, (c) => {
+    const h = F(
+      c.positions,
+      i.current
     );
     h && S.contextmenu.dispatchEvent(a, {
-      frame: c.current,
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_move", r, (i) => {
-    const h = i.positions ? z(
-      i.positions,
-      c.current
+  }), M("sync_move", r, (c) => {
+    const h = c.positions ? F(
+      c.positions,
+      i.current
     ) : null;
-    l.current = i, S.move.dispatchEvent(a, {
-      frame: c.current,
+    l.current = c, S.move.dispatchEvent(a, {
+      frame: i.current,
       pointer: h ?? null,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_mousedown", r, (i) => {
-    const h = z(
-      i.positions,
-      c.current
+  }), M("sync_mousedown", r, (c) => {
+    const h = F(
+      c.positions,
+      i.current
     );
     h && S.mousedown.dispatchEvent(a, {
-      frame: c.current,
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_mouseup", r, (i) => {
-    const h = z(
-      i.positions,
-      c.current
+  }), M("sync_mouseup", r, (c) => {
+    const h = F(
+      c.positions,
+      i.current
     );
     h && S.mouseup.dispatchEvent(a, {
-      frame: c.current,
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
   }), M(
     "sync_pressandwheel",
     r,
-    (i) => {
-      const h = z(
-        i.positions,
-        c.current
+    (c) => {
+      const h = F(
+        c.positions,
+        i.current
       );
       h && S.pressandwheel.dispatchEvent(a, {
-        frame: c.current,
+        frame: i.current,
         pointer: h,
-        keys: i.keys,
-        deltaX: i.deltaX,
-        deltaY: i.deltaY,
-        deltaAbs: i.deltaAbs
+        keys: c.keys,
+        deltaX: c.deltaX,
+        deltaY: c.deltaY,
+        deltaAbs: c.deltaAbs
       });
     }
-  ), M("sync_spanselect", r, (i) => {
-    const h = i.xRange && xt("x", i.xRange, c.current), y = i.yRange && xt("y", i.yRange, c.current), x = h?.scaled, w = y?.scaled;
-    i.completed && (d.current = null), S.spanselect.dispatchEvent(a, {
-      mode: i.mode,
-      frame: c.current,
-      completed: i.completed,
+  ), M("sync_spanselect", r, (c) => {
+    const h = c.xRange && xt("x", c.xRange, i.current), y = c.yRange && xt("y", c.yRange, i.current), x = h?.scaled, w = y?.scaled;
+    c.completed && (d.current = null), S.spanselect.dispatchEvent(a, {
+      mode: c.mode,
+      frame: i.current,
+      completed: c.completed,
       x: {
         css: h && {
           from: h.fromCSS,
@@ -883,7 +883,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         },
         scaled: w ?? []
       },
-      keys: i.keys
+      keys: c.keys
     });
   }), /* @__PURE__ */ _(
     "div",
@@ -900,35 +900,35 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         zIndex: 25,
         ...s
       },
-      onDragStart: (i) => {
-        i.preventDefault();
+      onDragStart: (c) => {
+        c.preventDefault();
       },
-      onClick: (i) => {
-        m(i, (h, y, x) => {
+      onClick: (c) => {
+        m(c, (h, y, x) => {
           S.sync_click.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onMouseLeave: (i) => {
-        m(i, (h, y, x) => {
+      onMouseLeave: (c) => {
+        m(c, (h, y, x) => {
           S.sync_move.dispatchEvent(r, {
             positions: null,
             keys: x
           });
         });
       },
-      onMouseMove: (i) => {
-        m(i, (h, y, x) => {
+      onMouseMove: (c) => {
+        m(c, (h, y, x) => {
           S.sync_move.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onMouseDown: (i) => {
-        m(i, (h, { cssX: y, cssY: x }, w) => {
+      onMouseDown: (c) => {
+        m(c, (h, { cssX: y, cssY: x }, w) => {
           S.sync_mousedown.dispatchEvent(r, {
             positions: h,
             keys: w
@@ -938,8 +938,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
           };
         });
       },
-      onMouseUp: (i) => {
-        m(i, (h, y, x) => {
+      onMouseUp: (c) => {
+        m(c, (h, y, x) => {
           S.sync_mouseup.dispatchEvent(r, {
             positions: h,
             keys: x
@@ -960,16 +960,16 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
           }
         });
       },
-      onContextMenu: (i) => {
-        i.preventDefault(), m(i, (h, y, x) => {
+      onContextMenu: (c) => {
+        c.preventDefault(), m(c, (h, y, x) => {
           S.sync_contextmenu.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onDoubleClick: (i) => {
-        m(i, (h, y, x) => {
+      onDoubleClick: (c) => {
+        m(c, (h, y, x) => {
           S.sync_dblclick.dispatchEvent(r, {
             positions: h,
             keys: x
@@ -983,7 +983,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   mt("move", (a) => {
     n(a);
   });
-  const c = Q(() => {
+  const i = Q(() => {
     if (!o)
       return null;
     const { frame: a, pointer: r } = o, d = r?.scaled[e];
@@ -999,14 +999,14 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         const x = Math.abs(y.x - d);
         x < f && (f = x, m = h);
       }
-      const i = p.points[m ?? -1];
-      if (!i || ut(a, f, e, "css") > 30) {
+      const c = p.points[m ?? -1];
+      if (!c || ut(a, f, e, "css") > 30) {
         u.push({ seriesId: p.seriesId, y: null });
         continue;
       }
-      l = i.x, u.push({
+      l = c.x, u.push({
         seriesId: p.seriesId,
-        y: i.y
+        y: c.y
       });
     }
     return {
@@ -1015,14 +1015,14 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       points: u
     };
   }, [t, o, e]);
-  return s(c);
+  return s(i);
 }, Ce = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: o }) => {
-  const [n, c] = V(null);
+  const [n, i] = V(null);
   if (mt("move", (l) => {
-    c(l);
+    i(l);
   }), !n)
     return null;
-  const { frame: a, pointer: r } = n, d = O(a, r?.cssX ?? 0, "css"), u = B(a, r?.cssY ?? 0, "css");
+  const { frame: a, pointer: r } = n, d = Y(a, r?.cssX ?? 0, "css"), u = O(a, r?.cssY ?? 0, "css");
   return /* @__PURE__ */ lt(_t, { children: [
     /* @__PURE__ */ _(
       "div",
@@ -1066,30 +1066,16 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   ] });
 }, Te = ({ makeClassName: t, makeStyle: s }) => {
   const [e, o] = V(null);
-  mt("spanselect", (c) => {
-    o(c.mode === "below_threshold" || c.completed ? null : c);
+  mt("spanselect", (i) => {
+    o(
+      i.mode === "below_threshold" || i.completed ? null : i
+    );
   });
   const n = Q(() => {
     if (!e || e.mode === "below_threshold")
       return null;
-    const c = O(
-      e.frame,
-      e.x.css?.from ?? -1 / 0,
-      "css"
-    ), a = O(
-      e.frame,
-      e.x.css?.to ?? 1 / 0,
-      "css"
-    ), r = B(
-      e.frame,
-      e.y.css?.from ?? -1 / 0,
-      "css"
-    ), d = B(
-      e.frame,
-      e.y.css?.to ?? 1 / 0,
-      "css"
-    ), u = Math.min(c, a), l = Math.min(r, d), p = Math.abs(a - c), m = Math.abs(d - r);
-    return { leftPx: u, topPx: l, widthPx: p, heightPx: m };
+    const i = e.mode === "y" ? -1 / 0 : e.x.css?.from ?? -1 / 0, a = e.mode === "y" ? 1 / 0 : e.x.css?.to ?? 1 / 0, r = e.mode === "x" ? -1 / 0 : e.y.css?.from ?? -1 / 0, d = e.mode === "x" ? 1 / 0 : e.y.css?.from ?? 1 / 0, u = Y(e.frame, i, "css"), l = Y(e.frame, a, "css"), p = O(e.frame, r, "css"), m = O(e.frame, d, "css"), f = Math.min(u, l), c = Math.min(p, m), h = Math.abs(l - u), y = Math.abs(m - p);
+    return { leftPx: f, topPx: c, widthPx: h, heightPx: y };
   }, [e]);
   return /* @__PURE__ */ _(
     "div",
@@ -1108,7 +1094,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
   );
 }, ke = ({ style: t, children: s, scaleId: e, ...o }) => {
-  const n = ht((c) => c.getScale(e)?.axis);
+  const n = ht((i) => i.getScale(e)?.axis);
   return n ? /* @__PURE__ */ _(
     "div",
     {
@@ -1130,16 +1116,16 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   formatter: s,
   acceptableIncrements: e
 } = {}) => (o, n) => {
-  const { min: c, max: a } = o, r = [], d = window.devicePixelRatio || 1, u = (t ?? (o.origin === "x" ? Tt : jt)) * d, l = Dt(
+  const { min: i, max: a } = o, r = [], d = window.devicePixelRatio || 1, u = (t ?? (o.origin === "x" ? Tt : jt)) * d, l = Dt(
     n,
     u,
     o.id,
     "canvas"
-  ), p = e ?? W, m = p.find((i) => i > l) ?? p.at(-1) ?? 1;
-  let f = c;
+  ), p = e ?? W, m = p.find((c) => c > l) ?? p.at(-1) ?? 1;
+  let f = i;
   if (Math.abs(f % m) > Number.EPSILON) {
-    const i = (m - f % m) % m;
-    f += i;
+    const c = (m - f % m) % m;
+    f += c;
   }
   for (; f <= a && r.length < 1e3; )
     r.push(f), f += m;
@@ -1238,7 +1224,7 @@ const qt = 1, Et = 1e3 * qt, pt = 60 * Et, tt = 60 * pt, et = 24 * tt, Gt = 30 *
 }, gt = (t, s) => {
   const e = new Date(t);
   return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
-}, K = (t, s) => {
+}, X = (t, s) => {
   const [e, o] = s;
   switch (o) {
     case "milliseconds":
@@ -1263,32 +1249,32 @@ function G(t, s) {
 }
 const oe = (t, s, e = "UTC") => {
   const [o, n] = s;
-  let c = new Date(t);
+  let i = new Date(t);
   const a = () => {
-    c.setUTCHours(-G(c, e), 0, 0, 0);
+    i.setUTCHours(-G(i, e), 0, 0, 0);
   };
   switch (n) {
     case "milliseconds":
-      c.setUTCMilliseconds(
-        Math.ceil(c.getUTCMilliseconds() / o) * o
+      i.setUTCMilliseconds(
+        Math.ceil(i.getUTCMilliseconds() / o) * o
       );
       break;
     case "seconds":
-      c.setUTCSeconds(
-        Math.ceil(c.getUTCSeconds() / o) * o,
+      i.setUTCSeconds(
+        Math.ceil(i.getUTCSeconds() / o) * o,
         0
       );
       break;
     case "minutes":
-      c.setUTCMinutes(
-        Math.ceil(c.getTime() % tt / pt / o) * o,
+      i.setUTCMinutes(
+        Math.ceil(i.getTime() % tt / pt / o) * o,
         0,
         0
       );
       break;
     case "hours":
-      c.setUTCHours(
-        Math.ceil(c.getTime() % et / tt / o) * o,
+      i.setUTCHours(
+        Math.ceil(i.getTime() % et / tt / o) * o,
         0,
         0,
         0
@@ -1297,20 +1283,20 @@ const oe = (t, s, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      n === "months" ? c.setUTCDate(1) : n === "years" && c.setUTCMonth(0, 1), a(), c.getTime() < t && (c = new Date(K(c, [1, n])));
+      n === "months" ? i.setUTCDate(1) : n === "years" && i.setUTCMonth(0, 1), a(), i.getTime() < t && (i = new Date(X(i, [1, n])));
       break;
   }
-  return c.getTime();
+  return i.getTime();
 }, Me = ({
   timeZone: t = kt,
   space: s = Tt,
   formatter: e,
   locale: o,
   showTimezone: n
-} = {}) => (c, a) => {
-  const { min: r, max: d } = c, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - r) / u, [m, f] = Jt.find(
+} = {}) => (i, a) => {
+  const { min: r, max: d } = i, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - r) / u, [m, f] = Jt.find(
     (w) => q(w) >= p
-  ) ?? [1, "milliseconds"], i = oe(r, [m, f], t), h = G(i, t), y = [i];
+  ) ?? [1, "milliseconds"], c = oe(r, [m, f], t), h = G(c, t), y = [c];
   let x;
   for (; ; ) {
     switch (f) {
@@ -1318,15 +1304,15 @@ const oe = (t, s, e = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        x = K(i, [y.length * m, f]);
+        x = X(c, [y.length * m, f]);
         break;
       }
       case "days": {
-        const w = K(i, [
+        const w = X(c, [
           y.length * m,
           f
         ]);
-        x = K(w, [
+        x = X(w, [
           h - G(w, t),
           "hours"
         ]);
@@ -1334,14 +1320,14 @@ const oe = (t, s, e = "UTC") => {
       }
       case "months":
       case "years": {
-        const w = K(
-          K(K(i, [h, "hours"]), [
+        const w = X(
+          X(X(c, [h, "hours"]), [
             y.length * m,
             f
           ]),
           [-h, "hours"]
         );
-        x = K(w, [
+        x = X(w, [
           h - G(w, t),
           "hours"
         ]);
@@ -1352,12 +1338,12 @@ const oe = (t, s, e = "UTC") => {
       break;
     y.push(x);
   }
-  return (e ?? ce({
+  return (e ?? ie({
     locale: o,
     showTimezone: n,
     timeZone: t
   }))(y);
-}, X = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, ce = ({
+}, L = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, ie = ({
   timeZone: t = kt,
   locale: s = Ht,
   showTimezone: e = !0
@@ -1375,26 +1361,26 @@ const oe = (t, s, e = "UTC") => {
     timeZone: t
   });
   return (n) => {
-    const c = n[1] - n[0], a = c < q([1, "days"]), r = c < q([1, "minutes"]), d = c < q([1, "seconds"]);
+    const i = n[1] - n[0], a = i < q([1, "days"]), r = i < q([1, "minutes"]), d = i < q([1, "seconds"]);
     return n.map((u) => ({ value: u, label: o.formatToParts(new Date(u)) })).map((u, l, p) => {
-      const m = p[l - 1], f = l === 0 || X(u.label, m.label, "year"), i = l === 0 || X(u.label, m.label, "day"), h = l === 0 || X(u.label, m.label, "month"), y = l === 0 || X(u.label, m.label, "hour"), x = l === 0 || X(u.label, m.label, "timeZoneName"), w = l === 0 || X(u.label, m.label, "minute"), g = l === 0 || X(u.label, m.label, "second"), v = l === 0 || X(u.label, m.label, "fractionalSecond"), T = [];
+      const m = p[l - 1], f = l === 0 || L(u.label, m.label, "year"), c = l === 0 || L(u.label, m.label, "day"), h = l === 0 || L(u.label, m.label, "month"), y = l === 0 || L(u.label, m.label, "hour"), x = l === 0 || L(u.label, m.label, "timeZoneName"), w = l === 0 || L(u.label, m.label, "minute"), g = l === 0 || L(u.label, m.label, "second"), v = l === 0 || L(u.label, m.label, "fractionalSecond"), T = [];
       if (a && (y || w || x || g || v)) {
         const b = u.label.find((P) => P.type === "hour")?.value, C = u.label.find((P) => P.type === "minute")?.value, k = u.label.find((P) => P.type === "timeZoneName")?.value;
         let A = "";
         if (r) {
-          const P = u.label.find((F) => F.type === "second")?.value, $ = u.label.find(
-            (F) => F.type === "fractionalSecond"
+          const P = u.label.find((K) => K.type === "second")?.value, B = u.label.find(
+            (K) => K.type === "fractionalSecond"
           )?.value;
-          A = `:${P}` + (d ? `.${$}` : "");
+          A = `:${P}` + (d ? `.${B}` : "");
         }
         T.push(
           `${b}:${C}${A}` + (e && x ? ` ${k}` : "")
         );
       }
-      return (i || h) && T.push(
+      return (c || h) && T.push(
         [
           u.label.find((b) => b.type === "month")?.value,
-          i && u.label.find((b) => b.type === "day")?.value
+          c && u.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
       ), f && T.push(u.label.find((b) => b.type === "year")?.value), {
         value: u.value,
@@ -1421,18 +1407,18 @@ export {
   R as applyStyles,
   j as clamp,
   de as clampUnfit,
-  O as clampXPosToChartArea,
-  B as clampYPosToChartArea,
+  Y as clampXPosToChartArea,
+  O as clampYPosToChartArea,
   Wt as defaultNumericalTicksFormatter,
   ue as findClosestIndex,
   I as getScale,
   Ee as makeLinearTicks,
-  ce as makeTimeTickFormat,
+  ie as makeTimeTickFormat,
   Me as makeTimeTicks,
-  L as posToVal,
+  D as posToVal,
   Dt as pxToValDistance,
   le as sum,
-  Y as useDrawEffect,
+  z as useDrawEffect,
   ht as useFrameState,
   mt as useInteractionsEvent,
   ge as useXPositioned,