@gearbox-protocol/ui-kit 3.1.0 → 3.2.0-next.1

package/dist/esm/components/graph/graph.js

@@ -1,24 +1,24 @@
 import { jsxs as Z, jsx as p } from "react/jsx-runtime";
-import { createChart as Et, CrosshairMode as Yt, AreaSeries as Gt } from "lightweight-charts";
-import * as ct from "react";
-import { useRef as z, useState as ut, useEffect as Y } from "react";
-import { useIsMobile as Ot } from "../../hooks/use-media-query.js";
-import { cn as dt } from "../../utils/cn.js";
-import { resolveCSSColor as yt, generateColorsFromBase as Q, hslToHex as Bt } from "../../utils/colors.js";
-import { getDefaultOptions as kt, getDefaultSeries as jt, getDefaultVerticalLine as Ht } from "./default-config.js";
-import { getXFormatters as Pt, createAdaptiveYAxisFormatter as _t, formatExactValue as ft } from "./formatters.js";
-import { GraphCurrentValue as Wt } from "./graph-current-value.js";
-import { GraphTooltip as Xt } from "./graph-tooltip.js";
-import { VertLine as qt } from "./plugins/vertical-line.js";
-function Zt(e, C, u) {
-  const M = e.labelText ?? "", d = e.value, N = d === void 0 ? "" : typeof d == "number" ? C === "$" ? `$${ft(d, void 0, u)}` : C === "%" ? `${ft(d, void 0, u)}%` : ft(
-    d,
+import { createChart as Ot, CrosshairMode as Yt, AreaSeries as Gt } from "lightweight-charts";
+import * as ut from "react";
+import { useRef as M, useState as ft, useEffect as O } from "react";
+import { useIsMobile as Bt } from "../../hooks/use-media-query.js";
+import { cn as mt } from "../../utils/cn.js";
+import { resolveCSSColor as kt, generateColorsFromBase as U, hslToHex as jt } from "../../utils/colors.js";
+import { getDefaultOptions as Pt, getDefaultSeries as Ht, getDefaultVerticalLine as _t } from "./default-config.js";
+import { getXFormatters as Lt, createAdaptiveYAxisFormatter as Wt, formatExactValue as dt } from "./formatters.js";
+import { GraphCurrentValue as Xt } from "./graph-current-value.js";
+import { GraphTooltip as qt } from "./graph-tooltip.js";
+import { VertLine as Zt } from "./plugins/vertical-line.js";
+function Kt(e, C, u) {
+  const T = e.labelText ?? "", g = e.value, N = g === void 0 ? "" : typeof g == "number" ? C === "$" ? `$${dt(g, void 0, u)}` : C === "%" ? `${dt(g, void 0, u)}%` : dt(
+    g,
     C !== "none" && C !== "%" && C !== "$" ? C : void 0,
     u
-  ) : String(d);
-  return { labelText: M, valueStr: N };
+  ) : String(g);
+  return { labelText: T, valueStr: N };
 }
-function Kt(e, C) {
+function Jt(e, C) {
   for (let u = e.length - 1; u >= 0; u--)
     if (Number(e[u].time) <= C)
       return e[u].value;
@@ -139,61 +139,64 @@ const gt = [
     top: "rgba(71, 85, 105, 0.56)",
     bottom: "rgba(71, 85, 105, 0.04)"
   }
-], Jt = 137.5;
-function Lt(e) {
+], Qt = 137.5;
+function It(e) {
   if (e < gt.length)
     return gt[e];
-  const u = (e - gt.length) * Jt % 360, M = Bt(u, 70, 50), { topColor: d, bottomColor: N } = Q(M);
-  return { line: M, top: d, bottom: N };
+  const u = (e - gt.length) * Qt % 360, T = jt(u, 70, 50), { topColor: g, bottomColor: N } = U(T);
+  return { line: T, top: g, bottom: N };
 }
-function de({
+function me({
   series: e,
   className: C,
   showLegend: u = !1,
-  onUnselectSeries: M,
-  xMeasureUnit: d = "time",
+  onUnselectSeries: T,
+  xMeasureUnit: g = "time",
   yMeasureUnit: N = "token",
   optionsOverrides: W,
   verticalLineOptions: x,
-  currentValueDecimals: U,
+  currentValueDecimals: tt,
   useSharedPriceScale: k = !1,
-  showCurrentValue: It = !0,
-  graphTitle: tt,
-  yScaleMin: mt,
-  yScaleMinMultiple: bt,
+  showCurrentValue: Mt = !0,
+  graphTitle: et,
+  yScaleMin: bt,
+  yScaleMinMultiple: ht,
   visibleTimeFrom: $
 }) {
-  const P = z(null), w = z(/* @__PURE__ */ new Map()), et = z(!1), ht = z(!0), ot = z(
+  const P = M(null), w = M(/* @__PURE__ */ new Map()), ot = M(!1), pt = M(!0), rt = M(
     null
-  ), Mt = z(null), E = z(null), rt = z(null), R = Ot(), T = ct.useMemo(() => e.flatMap((t) => t.data), [e]), Tt = ct.useMemo(() => {
+  ), Tt = M(null), E = M(null), nt = M(null), K = M(null), R = Bt(), A = ut.useMemo(() => e.flatMap((t) => t.data), [e]), At = ut.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [e]), [pt, nt] = ut(() => {
-    if (!Tt) return;
+  }, [e]), [Ct, at] = ft(() => {
+    if (!At) return;
     const t = /* @__PURE__ */ new Map();
     for (const a of e)
       a.data.length > 0 && t.set(a.label, a.data[a.data.length - 1]);
     return t;
-  }), [Ct, A] = ut(null), [vt, xt] = ut([]);
-  Y(() => {
+  }), [vt, F] = ft(null), [xt, St] = ft([]);
+  O(() => {
     const t = () => {
-      if (P.current && E.current) {
-        const l = E.current.clientWidth, s = E.current.clientHeight;
-        P.current.resize(l, s);
+      try {
+        if (P.current && E.current) {
+          const l = E.current.clientWidth, s = E.current.clientHeight;
+          P.current.resize(l, s);
+        }
+      } catch {
       }
     }, a = E.current, r = a ? new ResizeObserver(t) : null;
-    return a && r?.observe(a), () => {
-      a && r?.unobserve(a);
+    return K.current = r, a && r?.observe(a), () => {
+      a && r?.unobserve(a), r?.disconnect(), K.current = null;
     };
-  }, []), Y(() => {
-    if (!rt.current || et.current) return;
-    const t = kt(), a = yt(
+  }, []), O(() => {
+    if (!nt.current || ot.current) return;
+    const t = Pt(), a = kt(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
-    ), r = Et(rt.current, {
+    ), r = Ot(nt.current, {
       ...t,
       rightPriceScale: {
         ...t.rightPriceScale || {},
@@ -208,24 +211,24 @@ function de({
       },
       ...W
     });
-    return P.current = r, et.current = !0, () => {
-      r.remove(), P.current = null, et.current = !1, w.current.clear();
+    return P.current = r, ot.current = !0, () => {
+      K.current?.disconnect(), K.current = null, r.remove(), P.current = null, ot.current = !1, w.current.clear();
     };
-  }, [R, W]), Y(() => {
+  }, [R, W]), O(() => {
     const t = P.current;
     if (!t || e.length === 0) return;
-    const r = e.filter((o) => o.data.length > 0).length <= 1 ? mt : bt, l = d === "time" ? Pt(d, T) : Pt(d), s = T.map((o) => o.value), {
+    const r = e.filter((o) => o.data.length > 0).length <= 1 ? bt : ht, l = g === "time" ? Lt(g, A) : Lt(g), s = A.map((o) => o.value), {
       formatter: c,
       tickmarksFormatter: f,
       updateVisibleRange: L,
       updateLastValues: m
-    } = _t(s, N, {
+    } = Wt(s, N, {
       yScaleMin: r
     });
-    ot.current = L, Mt.current = m;
+    rt.current = L, Tt.current = m;
     const I = e.filter((o) => o.data.length > 0).map((o) => o.data[o.data.length - 1].value);
     m(I);
-    const V = kt();
+    const V = Pt();
     t.applyOptions({
       localization: {
         ...V.localization || {},
@@ -242,7 +245,7 @@ function de({
         minBarSpacing: 0
       }
     });
-    const g = (T.length > 0 ? Math.min(...T.map((o) => o.value)) : 0) < 0, S = T.some((o) => o.value === 0), b = !g && S, v = e.length > 1 && !k, h = e.length > 1 && !k || R, F = yt(
+    const d = (A.length > 0 ? Math.min(...A.map((o) => o.value)) : 0) < 0, S = A.some((o) => o.value === 0), b = !d && S, v = e.length > 1 && !k, h = e.length > 1 && !k || R, z = kt(
       "hsl(var(--foreground))",
       "rgb(0, 0, 0)"
     );
@@ -250,7 +253,7 @@ function de({
       rightPriceScale: {
         ...V.rightPriceScale || {},
         visible: !h,
-        textColor: F,
+        textColor: z,
         ...b && {
           scaleMargins: {
             top: 0.3,
@@ -259,57 +262,57 @@ function de({
         }
       }
     });
-    const X = new Set(w.current.keys()), at = new Set(e.map((o) => o.label));
+    const X = new Set(w.current.keys()), lt = new Set(e.map((o) => o.label));
     for (const o of X)
-      if (!at.has(o)) {
+      if (!lt.has(o)) {
         const n = w.current.get(o);
         n && (t.removeSeries(n), w.current.delete(o));
       }
-    const At = jt(), lt = [];
-    let J = 0;
+    const Ft = Ht(), it = [];
+    let Q = 0;
     for (let o = 0; o < e.length; o++) {
-      const n = e[o], q = Lt(o), G = n.lineColor ?? n.color ?? q.line;
-      let D, O;
+      const n = e[o], q = It(o), Y = n.lineColor ?? n.color ?? q.line;
+      let D, G;
       if (n.lineColor ?? n.color)
         if (n.topColor && n.bottomColor)
-          D = n.topColor, O = n.bottomColor;
+          D = n.topColor, G = n.bottomColor;
         else if (n.topColor) {
-          const i = Q(G);
-          D = n.topColor, O = i.bottomColor;
+          const i = U(Y);
+          D = n.topColor, G = i.bottomColor;
         } else if (n.bottomColor)
-          D = Q(G).topColor, O = n.bottomColor;
+          D = U(Y).topColor, G = n.bottomColor;
         else {
-          const i = Q(G);
-          D = i.topColor, O = i.bottomColor;
+          const i = U(Y);
+          D = i.topColor, G = i.bottomColor;
         }
       else
-        D = n.topColor || q.top, O = n.bottomColor || q.bottom;
+        D = n.topColor || q.top, G = n.bottomColor || q.bottom;
       if (n.data.length === 0) {
         const i = w.current.get(n.label);
         i && (t.removeSeries(i), w.current.delete(n.label));
         continue;
       }
-      const Ft = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Dt = n.data.some((i) => i.value === 0), zt = !Ft && Dt, Nt = k || !v || J === 0 ? "right" : `scale-${J}`;
-      v && lt.push({
-        priceScaleId: Nt || "right",
-        shouldPreventNegativeAxis: zt,
-        seriesIndex: J
+      const zt = (n.data.length > 0 ? Math.min(...n.data.map((i) => i.value)) : 0) < 0, Dt = n.data.some((i) => i.value === 0), $t = !zt && Dt, wt = k || !v || Q === 0 ? "right" : `scale-${Q}`;
+      v && it.push({
+        priceScaleId: wt || "right",
+        shouldPreventNegativeAxis: $t,
+        seriesIndex: Q
       });
-      const wt = (k || !v) && r !== void 0 && typeof r == "number", Rt = {
-        lineColor: G,
+      const Rt = (k || !v) && r !== void 0 && typeof r == "number", Vt = {
+        lineColor: Y,
         topColor: D,
-        bottomColor: O,
-        priceScaleId: Nt,
+        bottomColor: G,
+        priceScaleId: wt,
         priceFormat: {
           type: "custom",
           minMove: 0.01,
-          formatter: wt && typeof r == "number" ? (i) => c(
+          formatter: Rt && typeof r == "number" ? (i) => c(
             i < r ? r : i
           ) : c,
           tickmarksFormatter: f
         },
         autoscaleInfoProvider: (i) => {
-          if (!wt) return i();
+          if (!Rt) return i();
           const H = i();
           if (H?.priceRange) {
             const _ = r;
@@ -324,18 +327,18 @@ function de({
         time: i.time
       }));
       if ($ !== void 0 && j.length > 0 && Number(j[0].time) > $) {
-        const i = Number(j[0].time), H = i - $, _ = 86400, $t = H > 180 * _ ? 7 * _ : H > 30 * _ ? _ : 6 * 3600, Vt = [];
-        for (let st = $; st < i; st += $t)
-          Vt.push({ time: st });
-        j.unshift(...Vt);
+        const i = Number(j[0].time), H = i - $, _ = 86400, Et = H > 180 * _ ? 7 * _ : H > 30 * _ ? _ : 6 * 3600, yt = [];
+        for (let ct = $; ct < i; ct += Et)
+          yt.push({ time: ct });
+        j.unshift(...yt);
       }
-      B ? (B.applyOptions(Rt), B.setData(j)) : (B = t.addSeries(Gt, {
-        ...At,
-        ...Rt
-      }), B.setData(j), w.current.set(n.label, B)), J++;
+      B ? (B.applyOptions(Vt), B.setData(j)) : (B = t.addSeries(Gt, {
+        ...Ft,
+        ...Vt
+      }), B.setData(j), w.current.set(n.label, B)), Q++;
     }
-    if (v && lt.length > 0)
-      for (const o of lt)
+    if (v && it.length > 0)
+      for (const o of it)
         try {
           const n = t.priceScale(o.priceScaleId);
           n && n.applyOptions({
@@ -353,7 +356,7 @@ function de({
             borderVisible: !0,
             borderColor: "rgba(224, 227, 235, 0.1)",
             entireTextOnly: !1,
-            textColor: F
+            textColor: z
           });
         } catch (n) {
           console.warn(
@@ -379,7 +382,7 @@ function de({
           borderVisible: !0,
           borderColor: "rgba(224, 227, 235, 0.1)",
           entireTextOnly: !1,
-          textColor: F
+          textColor: z
         });
       } catch {
       }
@@ -387,26 +390,26 @@ function de({
       handleScroll: {
         vertTouchDrag: !1
       }
-    }), T.length > 0) {
-      const o = T.map((D) => Number(D.time)), n = Math.min(...o), q = $ !== void 0 ? Math.min($, n) : n, G = Math.max(...o);
-      t.timeScale().setVisibleRange({ from: q, to: G });
+    }), A.length > 0) {
+      const o = A.map((D) => Number(D.time)), n = Math.min(...o), q = $ !== void 0 ? Math.min($, n) : n, Y = Math.max(...o);
+      t.timeScale().setVisibleRange({ from: q, to: Y });
     }
-    ht.current && (ht.current = !1);
-    const it = /* @__PURE__ */ new Map();
+    pt.current && (pt.current = !1);
+    const st = /* @__PURE__ */ new Map();
     for (const o of e)
-      o.data.length > 0 && it.set(o.label, o.data[o.data.length - 1]);
-    nt(it.size > 0 ? it : void 0);
+      o.data.length > 0 && st.set(o.label, o.data[o.data.length - 1]);
+    at(st.size > 0 ? st : void 0);
   }, [
     e,
-    T,
-    d,
+    A,
+    g,
     N,
     R,
     k,
-    mt,
     bt,
+    ht,
     $
-  ]), Y(() => {
+  ]), O(() => {
     const t = P.current;
     if (!t || e.length === 0) return;
     const a = e.length === 1;
@@ -421,15 +424,15 @@ function de({
       const { time: c = r, seriesData: f, point: L } = s || {}, m = Array.from(w.current.values());
       if (!L || !c) {
         const y = /* @__PURE__ */ new Map();
-        for (const g of e)
-          g.data.length > 0 && y.set(g.label, g.data[g.data.length - 1]);
-        if (nt(y.size > 0 ? y : void 0), a || k)
-          A(null);
+        for (const d of e)
+          d.data.length > 0 && y.set(d.label, d.data[d.data.length - 1]);
+        if (at(y.size > 0 ? y : void 0), a || k)
+          F(null);
         else if (m[0] && r) {
           const S = t.timeScale().timeToCoordinate(r), b = e[0];
           if (b.data.length > 0) {
             const v = b.data[b.data.length - 1].value, h = m[0].priceToCoordinate(v);
-            S !== null && h !== null && A({ x: S, y: h });
+            S !== null && h !== null && F({ x: S, y: h });
           }
         }
         return;
@@ -437,53 +440,53 @@ function de({
       const I = /* @__PURE__ */ new Map();
       let V;
       for (let y = 0; y < e.length; y++) {
-        const g = e[y], S = m[y];
+        const d = e[y], S = m[y];
         if (!S) continue;
         const b = f?.get(S), v = b && "value" in b ? b.value : void 0;
         let h;
         if (v !== void 0)
           h = v;
         else if (a) {
-          const F = Number(c), X = g.data.length > 0 ? Number(g.data[0].time) : Number.POSITIVE_INFINITY;
-          F < X ? h = Number.NaN : h = g.data[g.data.length - 1]?.value ?? 0;
+          const z = Number(c), X = d.data.length > 0 ? Number(d.data[0].time) : Number.POSITIVE_INFINITY;
+          z < X ? h = Number.NaN : h = d.data[d.data.length - 1]?.value ?? 0;
         } else
-          h = Kt(g.data, Number(c));
-        Number.isNaN(h) || (V === void 0 && (V = h), I.set(g.label, { value: h, time: c }));
+          h = Jt(d.data, Number(c));
+        Number.isNaN(h) || (V === void 0 && (V = h), I.set(d.label, { value: h, time: c }));
       }
-      if (nt(I), V !== void 0 && m[0]) {
-        const g = t.timeScale().timeToCoordinate(c), S = m[0].priceToCoordinate(V);
-        if (g !== null && S !== null) {
+      if (at(I), V !== void 0 && m[0]) {
+        const d = t.timeScale().timeToCoordinate(c), S = m[0].priceToCoordinate(V);
+        if (d !== null && S !== null) {
           const b = E.current;
           if (b) {
             const v = b.querySelector(
               ".LightweightChart"
             );
             if (v) {
-              const h = v.getBoundingClientRect(), F = b.getBoundingClientRect(), X = g + (h.left - F.left), at = S + (h.top - F.top);
-              A({ x: X, y: at });
+              const h = v.getBoundingClientRect(), z = b.getBoundingClientRect(), X = d + (h.left - z.left), lt = S + (h.top - z.top);
+              F({ x: X, y: lt });
             } else
-              A({ x: g, y: S });
+              F({ x: d, y: S });
           } else
-            A({ x: g, y: S });
+            F({ x: d, y: S });
         } else
-          A(null);
+          F(null);
       } else
-        A(null);
+        F(null);
     };
     return t.subscribeCrosshairMove(l), R && t.subscribeClick(l), !a && !k && requestAnimationFrame(() => {
       const s = Array.from(w.current.values());
       if (s[0] && r && e[0]?.data.length > 0) {
         const f = t.timeScale().timeToCoordinate(r), L = e[0].data[e[0].data.length - 1].value, m = s[0].priceToCoordinate(L);
-        f !== null && m !== null && A({ x: f, y: m });
+        f !== null && m !== null && F({ x: f, y: m });
       }
     }), () => {
       t.unsubscribeCrosshairMove(l), R && t.unsubscribeClick(l);
     };
-  }, [e, k, R]), Y(() => {
+  }, [e, k, R]), O(() => {
     const t = P.current;
     if (!t || e.length === 0) return;
     const a = t.timeScale(), r = () => {
-      if (!ot.current) return;
+      if (!rt.current) return;
       const l = a.getVisibleRange();
       if (!l) return;
       const s = Number(l.from), c = Number(l.to), f = [];
@@ -492,19 +495,19 @@ function de({
           const I = Number(m.time);
           I >= s && I <= c && f.push(m.value);
         }
-      f.length > 0 && ot.current(f);
+      f.length > 0 && rt.current(f);
     };
     return a.subscribeVisibleLogicalRangeChange(r), () => {
       a.unsubscribeVisibleLogicalRangeChange(
         r
       );
     };
-  }, [e]), Y(() => {
+  }, [e]), O(() => {
     const t = P.current, a = Array.from(w.current.values()), r = [];
     if (t && a.length > 0 && x) {
-      const l = Ht(), s = a[0];
+      const l = _t(), s = a[0];
       for (const c of x) {
-        const f = new qt(t, s, c.xCoordinate, {
+        const f = new Zt(t, s, c.xCoordinate, {
           ...l,
           ...c.options || {}
         });
@@ -518,15 +521,15 @@ function de({
           l.detachPrimitive(s);
       }
     };
-  }, [x]), Y(() => {
+  }, [x]), O(() => {
     const t = P.current;
     if (!t || !x?.length) {
-      xt([]);
+      St([]);
       return;
     }
     const a = () => {
       const s = t.timeScale(), c = x.map((f) => s.timeToCoordinate(f.xCoordinate) ?? null);
-      xt(c);
+      St(c);
     };
     a();
     const r = t.timeScale(), l = () => {
@@ -536,56 +539,56 @@ function de({
       r.unsubscribeVisibleLogicalRangeChange(l);
     };
   }, [x]);
-  const K = e.length === 1, St = ct.useMemo(() => {
-    if (K && e.length > 0) {
+  const J = e.length === 1, Nt = ut.useMemo(() => {
+    if (J && e.length > 0) {
       const t = e[0];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [K, e]);
+  }, [J, e]);
   return /* @__PURE__ */ Z(
     "div",
     {
       ref: E,
-      className: dt(
+      className: mt(
         "relative z-[1] w-full h-full overflow-hidden p-0",
         C
       ),
       children: [
-        tt != null && tt !== !1 && K ? /* @__PURE__ */ p("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ p("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: tt }) }) : It && K && St && /* @__PURE__ */ p(
-          Wt,
+        et != null && et !== !1 && J ? /* @__PURE__ */ p("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ p("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: et }) }) : Mt && J && Nt && /* @__PURE__ */ p(
+          Xt,
           {
-            point: St,
-            xMeasureUnit: d,
+            point: Nt,
+            xMeasureUnit: g,
             yMeasureUnit: N,
-            decimals: U
+            decimals: tt
           }
         ),
-        pt && Ct && /* @__PURE__ */ p(
-          Xt,
+        Ct && vt && /* @__PURE__ */ p(
+          qt,
           {
-            points: pt,
-            xMeasureUnit: d,
+            points: Ct,
+            xMeasureUnit: g,
             yMeasureUnit: N,
             series: e,
-            position: Ct,
+            position: vt,
             containerRef: E,
-            decimals: U
+            decimals: tt
           }
         ),
-        u && /* @__PURE__ */ p(Qt, { series: e, onUnselect: M }),
-        x && x.length > 0 && vt.length === x.length && /* @__PURE__ */ p(
+        u && /* @__PURE__ */ p(Ut, { series: e, onUnselect: T }),
+        x && x.length > 0 && xt.length === x.length && /* @__PURE__ */ p(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
             children: x.map((t, a) => {
-              const r = vt[a], l = t.options ?? {}, s = l.showLabel !== !1;
+              const r = xt[a], l = t.options ?? {}, s = l.showLabel !== !1;
               if (r === null || !s) return null;
-              const { labelText: c, valueStr: f } = Zt(
+              const { labelText: c, valueStr: f } = Kt(
                 l,
                 N,
-                U
+                tt
               );
               if (!(c || f)) return null;
               const m = l.labelBackgroundColor ?? l.color ?? "hsl(var(--background))", I = l.labelTextColor ?? "hsl(var(--foreground))", V = `${String(t.xCoordinate)}-${c}`;
@@ -601,7 +604,7 @@ function de({
                   },
                   children: [
                     c && /* @__PURE__ */ p("span", { className: "block", children: c }),
-                    f && /* @__PURE__ */ p("span", { className: dt("block", c && "mt-0.5"), children: f })
+                    f && /* @__PURE__ */ p("span", { className: mt("block", c && "mt-0.5"), children: f })
                   ]
                 },
                 V
@@ -612,7 +615,7 @@ function de({
         /* @__PURE__ */ p(
           "div",
           {
-            ref: rt,
+            ref: nt,
             className: "LightweightChart w-full h-full overflow-hidden"
           }
         )
@@ -620,16 +623,16 @@ function de({
     }
   );
 }
-function Qt({
+function Ut({
   series: e,
   onUnselect: C
 }) {
-  return /* @__PURE__ */ p("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((u, M) => {
-    const d = Lt(M), N = (u.lineColor ?? u.color) || d.line, W = u.data.length === 0;
+  return /* @__PURE__ */ p("div", { className: "absolute top-0 left-2 z-[10] flex flex-wrap gap-2", children: e.map((u, T) => {
+    const g = It(T), N = (u.lineColor ?? u.color) || g.line, W = u.data.length === 0;
     return /* @__PURE__ */ Z(
       "div",
       {
-        className: dt(
+        className: mt(
           "flex items-center gap-1.5 px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
           W && "opacity-50"
         ),
@@ -685,8 +688,8 @@ function Qt({
 }
 export {
   gt as DEFAULT_SERIES_COLORS,
-  de as Graph,
-  Lt as getSeriesColorPalette,
-  Kt as getStepForwardValue,
-  Zt as getVerticalLineTooltipContent
+  me as Graph,
+  It as getSeriesColorPalette,
+  Jt as getStepForwardValue,
+  Kt as getVerticalLineTooltipContent
 };