@gearbox-protocol/ui-kit 4.0.0-next.36 → 4.0.0-next.38

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

@@ -1,38 +1,38 @@
-import { jsxs as ge, jsx as V } from "react/jsx-runtime";
-import { createChart as ht, CrosshairMode as gt, LineStyle as ae, LineSeries as mt, AreaSeries as pt } from "lightweight-charts";
+import { jsxs as te, jsx as w } from "react/jsx-runtime";
+import { createChart as ht, CrosshairMode as dt, LineStyle as le, LineSeries as mt, AreaSeries as gt } from "lightweight-charts";
 import * as Ve from "react";
-import { useRef as K, useState as re, useEffect as A, useLayoutEffect as dt } from "react";
+import { useRef as K, useState as ne, useEffect as G, useLayoutEffect as pt } from "react";
 import { useIsMobile as bt } from "../../hooks/use-media-query.js";
-import { cn as ee } from "../../utils/cn.js";
-import { resolveCSSColor as ne, generateColorsFromBase as ve, hslToHex as St } from "../../utils/colors.js";
-import { getDefaultOptions as Je, getDefaultSeries as vt, AXIS_TICK_MARK_DENSITY as Se, getDefaultVerticalLine as Ct, AXIS_FONT_SIZE as yt, AXIS_EDGE_LABEL_PADDING_PX as Qe, AXIS_TOP_LABEL_PADDING_PX as Ye, AXIS_TIME_EDGE_PADDING_PX as xt } from "./default-config.js";
+import { cn as Z } from "../../utils/cn.js";
+import { resolveCSSColor as ie, generateColorsFromBase as Ce, hslToHex as St } from "../../utils/colors.js";
+import { getDefaultOptions as Je, getDefaultSeries as vt, AXIS_TICK_MARK_DENSITY as ve, getDefaultVerticalLine as Ct, AXIS_FONT_SIZE as xt, AXIS_EDGE_LABEL_PADDING_PX as Qe, AXIS_TOP_LABEL_PADDING_PX as Ye, AXIS_TIME_EDGE_PADDING_PX as yt } from "./default-config.js";
 import { getXFormatters as Ue, formatExactValue as Le, isRatioUnit as _t, createAdaptiveYAxisFormatter as wt } from "./formatters.js";
 import { GraphCurrentValue as Pt } from "./graph-current-value.js";
-import { GraphTooltip as Rt } from "./graph-tooltip.js";
-import { VertLine as Tt } from "./plugins/vertical-line.js";
-import { pickMinMove as Nt, niceAxisRange as Vt } from "./y-axis-scale.js";
-function ie(e) {
+import { GraphTooltip as Nt } from "./graph-tooltip.js";
+import { VertLine as Rt } from "./plugins/vertical-line.js";
+import { pickMinMove as Tt, niceAxisRange as Vt } from "./y-axis-scale.js";
+function ae(e) {
   return e.id ?? e.label;
 }
-function et(e, i, u) {
-  if (!u)
+function et(e, i, c) {
+  if (!c)
     return e.values().next().value;
-  const f = e.get(u);
-  if (f) return f;
-  const s = i.find((d) => d.id === u || d.label === u);
-  return s ? e.get(ie(s)) : void 0;
+  const u = e.get(c);
+  if (u) return u;
+  const h = i.find((f) => f.id === c || f.label === c);
+  return h ? e.get(ae(h)) : void 0;
 }
 class Lt {
   _yTop;
   _yBottom;
   _color;
-  constructor(i, u, f) {
-    this._yTop = i, this._yBottom = u, this._color = f;
+  constructor(i, c, u) {
+    this._yTop = i, this._yBottom = c, this._color = u;
   }
   draw(i) {
-    i.useBitmapCoordinateSpace((u) => {
-      const f = u.context, s = u.verticalPixelRatio, d = this._yTop === null ? 0 : this._yTop * s, S = this._yBottom === null ? u.bitmapSize.height : this._yBottom * s, w = Math.min(d, S), k = Math.max(d, S);
-      f.fillStyle = this._color, f.fillRect(0, w, u.bitmapSize.width, k - w);
+    i.useBitmapCoordinateSpace((c) => {
+      const u = c.context, h = c.verticalPixelRatio, f = this._yTop === null ? 0 : this._yTop * h, S = this._yBottom === null ? c.bitmapSize.height : this._yBottom * h, P = Math.min(f, S), I = Math.max(f, S);
+      u.fillStyle = this._color, u.fillRect(0, P, c.bitmapSize.width, I - P);
     });
   }
 }
@@ -61,8 +61,8 @@ class kt {
   priceBottom;
   color;
   _paneViews;
-  constructor(i, u, f, s) {
-    this.series = i, this.priceTop = u, this.priceBottom = f, this.color = s, this._paneViews = [new Mt(this)];
+  constructor(i, c, u, h) {
+    this.series = i, this.priceTop = c, this.priceBottom = u, this.color = h, this._paneViews = [new Mt(this)];
   }
   updateAllViews() {
     for (const i of this._paneViews) i.update();
@@ -73,13 +73,13 @@ class kt {
 }
 function It(e, i) {
   switch (e) {
-    case ae.Dotted:
+    case le.Dotted:
       return [i, i];
-    case ae.Dashed:
+    case le.Dashed:
       return [2 * i, 2 * i];
-    case ae.LargeDashed:
+    case le.LargeDashed:
       return [6 * i, 6 * i];
-    case ae.SparseDotted:
+    case le.SparseDotted:
       return [i, 4 * i];
     default:
       return [];
@@ -90,14 +90,14 @@ class Dt {
   _color;
   _lineWidth;
   _lineStyle;
-  constructor(i, u, f, s) {
-    this._y = i, this._color = u, this._lineWidth = f, this._lineStyle = s;
+  constructor(i, c, u, h) {
+    this._y = i, this._color = c, this._lineWidth = u, this._lineStyle = h;
   }
   draw(i) {
-    i.useBitmapCoordinateSpace((u) => {
+    i.useBitmapCoordinateSpace((c) => {
       if (this._y === null) return;
-      const f = u.context, s = u.verticalPixelRatio, d = Math.max(1, Math.round(this._lineWidth * s)), S = Math.round(this._y * s);
-      f.save(), f.strokeStyle = this._color, f.lineWidth = d, f.setLineDash(It(this._lineStyle, d)), f.beginPath(), f.moveTo(0, S), f.lineTo(u.bitmapSize.width, S), f.stroke(), f.restore();
+      const u = c.context, h = c.verticalPixelRatio, f = Math.max(1, Math.round(this._lineWidth * h)), S = Math.round(this._y * h);
+      u.save(), u.strokeStyle = this._color, u.lineWidth = f, u.setLineDash(It(this._lineStyle, f)), u.beginPath(), u.moveTo(0, S), u.lineTo(c.bitmapSize.width, S), u.stroke(), u.restore();
     });
   }
 }
@@ -135,8 +135,8 @@ class Bt {
   lineWidth;
   lineStyle;
   _paneViews;
-  constructor(i, u, f, s, d) {
-    this.series = i, this.price = u, this.color = f, this.lineWidth = s, this.lineStyle = d, this._paneViews = [new Et(this)];
+  constructor(i, c, u, h, f) {
+    this.series = i, this.price = c, this.color = u, this.lineWidth = h, this.lineStyle = f, this._paneViews = [new Et(this)];
   }
   updateAllViews() {
     for (const i of this._paneViews) i.update();
@@ -145,26 +145,26 @@ class Bt {
     return this._paneViews;
   }
 }
-function Ft(e, i, u) {
-  const f = e.labelText ?? "", s = e.value, d = s === void 0 ? "" : typeof s == "number" ? i === "$" ? `$${Le(s, void 0, u)}` : i === "%" ? `${Le(s, void 0, u)}%` : Le(
-    s,
+function Ft(e, i, c) {
+  const u = e.labelText ?? "", h = e.value, f = h === void 0 ? "" : typeof h == "number" ? i === "$" ? `$${Le(h, void 0, c)}` : i === "%" ? `${Le(h, void 0, c)}%` : Le(
+    h,
     i !== "none" && i !== "%" && i !== "$" && !_t(i) ? i : void 0,
-    u
-  ) : String(s);
-  return { labelText: f, valueStr: d };
+    c
+  ) : String(h);
+  return { labelText: u, valueStr: f };
 }
 const tt = 4;
-function zt(e, i, u) {
-  const f = { left: e, transform: "translateX(-50%)" };
-  if (i <= 0 || !u || u <= 0)
-    return f;
-  const s = u / 2, d = tt + s, S = i - tt - s;
-  return S < d ? { left: i / 2, transform: "translateX(-50%)" } : { left: Math.min(Math.max(e, d), S), transform: "translateX(-50%)" };
+function zt(e, i, c) {
+  const u = { left: e, transform: "translateX(-50%)" };
+  if (i <= 0 || !c || c <= 0)
+    return u;
+  const h = c / 2, f = tt + h, S = i - tt - h;
+  return S < f ? { left: i / 2, transform: "translateX(-50%)" } : { left: Math.min(Math.max(e, f), S), transform: "translateX(-50%)" };
 }
 function At(e, i) {
-  for (let u = e.length - 1; u >= 0; u--)
-    if (Number(e[u].time) <= i)
-      return e[u].value;
+  for (let c = e.length - 1; c >= 0; c--)
+    if (Number(e[c].time) <= i)
+      return e[c].value;
   return 0;
 }
 const Me = [
@@ -286,55 +286,55 @@ const Me = [
 function ot(e) {
   if (e < Me.length)
     return Me[e];
-  const u = (e - Me.length) * Gt % 360, f = St(u, 70, 50), { topColor: s, bottomColor: d } = ve(f);
-  return { line: f, top: s, bottom: d };
+  const c = (e - Me.length) * Gt % 360, u = St(c, 70, 50), { topColor: h, bottomColor: f } = Ce(u);
+  return { line: u, top: h, bottom: f };
 }
 function oo({
   series: e,
   className: i,
-  showLegend: u = !1,
-  onUnselectSeries: f,
-  xMeasureUnit: s = "time",
-  yMeasureUnit: d = "token",
+  showLegend: c = !1,
+  onUnselectSeries: u,
+  xMeasureUnit: h = "time",
+  yMeasureUnit: f = "token",
   optionsOverrides: S,
-  verticalLineOptions: w,
-  priceLineOptions: k,
-  zoneOptions: G,
-  currentValueDecimals: Ce,
-  useSharedPriceScale: Z = !1,
+  verticalLineOptions: P,
+  priceLineOptions: I,
+  zoneOptions: F,
+  currentValueDecimals: se,
+  useSharedPriceScale: q = !1,
   dualYAxis: D = !1,
   defaultVisiblePriceScaleId: ke = "right",
   leftPriceScaleTitle: Ie,
   rightPriceScaleTitle: Xt,
   showCurrentValue: rt = !0,
-  graphTitle: ye,
+  graphTitle: xe,
   yScaleMin: De,
   yScaleMinMultiple: Ee,
-  visibleTimeFrom: Q,
+  visibleTimeFrom: Y,
   disableZoom: Be = !1,
-  hideDefaultTooltip: xe = !1
+  hideDefaultTooltip: ye = !1
 }) {
-  const E = K(null), L = K(/* @__PURE__ */ new Map()), _e = K(!1), Fe = K(!0), ze = K([]), le = K(0), B = K(null), we = K(null), Ae = K(null), P = bt(), se = Ve.useMemo(() => e.flatMap((t) => t.data), [e]), nt = Ve.useMemo(() => {
+  const E = K(null), L = K(/* @__PURE__ */ new Map()), _e = K(!1), Fe = K(!0), ze = K([]), ce = K(0), B = K(null), we = K(null), Ae = K(null), N = bt(), ue = Ve.useMemo(() => e.flatMap((t) => t.data), [e]), nt = Ve.useMemo(() => {
     if (e.length > 0) {
       const t = e[e.length - 1];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [e]), [Ge, Pe] = re(() => {
+  }, [e]), [Ge, Pe] = ne(() => {
     if (!nt) return;
     const t = /* @__PURE__ */ new Map();
     for (const l of e)
       l.data.length > 0 && t.set(l.label, l.data[l.data.length - 1]);
     return t;
-  }), [We, O] = re(null), [Xe, $e] = re([]), [it, He] = re(0), je = K(/* @__PURE__ */ new Map()), [at, lt] = re({}), [Y, st] = re(0);
-  A(() => {
+  }), [We, J] = ne(null), [Xe, $e] = ne([]), [it, He] = ne(0), je = K(/* @__PURE__ */ new Map()), [at, lt] = ne({}), [U, st] = ne(0);
+  G(() => {
     const t = () => {
       try {
         if (B.current && He(B.current.clientWidth), E.current && B.current) {
-          const a = B.current.clientWidth, c = B.current.clientHeight;
-          E.current.resize(a, c);
+          const a = B.current.clientWidth, s = B.current.clientHeight;
+          E.current.resize(a, s);
           try {
-            le.current = E.current.paneSize().height;
+            ce.current = E.current.paneSize().height;
           } catch {
           }
         }
@@ -344,9 +344,9 @@ function oo({
     return Ae.current = n, l && n?.observe(l), () => {
       l && n?.unobserve(l), n?.disconnect(), Ae.current = null;
     };
-  }, []), A(() => {
+  }, []), G(() => {
     if (!we.current || _e.current) return;
-    const t = Je(), l = ne(
+    const t = Je(), l = ie(
       "hsl(var(--muted-foreground))",
       "rgb(163, 163, 163)"
     ), n = ht(we.current, {
@@ -358,26 +358,26 @@ function oo({
       },
       rightPriceScale: {
         ...t.rightPriceScale || {},
-        visible: !P,
+        visible: !N,
         textColor: l
       },
-      ...P && {
+      ...N && {
         crosshair: {
           ...t.crosshair,
-          mode: gt.Magnet
+          mode: dt.Magnet
         }
       }
     });
     E.current = n, _e.current = !0;
     try {
-      le.current = n.paneSize().height;
+      ce.current = n.paneSize().height;
     } catch {
-      le.current = 0;
+      ce.current = 0;
     }
     return st((a) => a + 1), () => {
       n.remove(), E.current = null, _e.current = !1, L.current.clear();
     };
-  }, [P]), A(() => {
+  }, [N]), G(() => {
     const t = E.current;
     t && t.applyOptions(
       Be ? {
@@ -408,53 +408,53 @@ function oo({
         }
       }
     );
-  }, [Y, Be]), A(() => {
+  }, [U, Be]), G(() => {
     const t = E.current;
     !t || !S || t.applyOptions(S);
-  }, [Y, S]), A(() => {
+  }, [U, S]), G(() => {
     const t = E.current;
     if (!t || e.length === 0) return;
-    const n = e.filter((r) => r.data.length > 0).length <= 1 ? De : Ee, a = s === "time" ? Ue(s, se) : Ue(s), c = /* @__PURE__ */ new Map();
+    const n = e.filter((r) => r.data.length > 0).length <= 1 ? De : Ee, a = h === "time" ? Ue(h, ue) : Ue(h), s = /* @__PURE__ */ new Map();
     {
       let r = 0;
       for (const o of e)
-        o.data.length !== 0 && (c.set(
+        o.data.length !== 0 && (s.set(
           o.label,
           o.priceScaleId ?? (r === 0 ? "left" : "right")
         ), r++);
     }
-    const h = (r, o, g) => {
-      const { formatter: F, tickmarksFormatter: T, updateVisibleRange: N } = wt(r, o, {
+    const d = (r, o, m) => {
+      const { formatter: z, tickmarksFormatter: T, updateVisibleRange: V } = wt(r, o, {
         yScaleMin: n
       });
-      return { formatter: F, tickmarksFormatter: T, updateVisibleRange: N, labels: g };
-    }, m = [];
+      return { formatter: z, tickmarksFormatter: T, updateVisibleRange: V, labels: m };
+    }, g = [];
     if (D)
       for (const r of ["left", "right"]) {
-        const o = /* @__PURE__ */ new Set(), g = [];
-        let F = d;
+        const o = /* @__PURE__ */ new Set(), m = [];
+        let z = f;
         for (const T of e)
-          if (T.data.length !== 0 && c.get(T.label) === r) {
-            o.size === 0 && T.yMeasureUnit && (F = T.yMeasureUnit), o.add(T.label);
-            for (const N of T.data) g.push(N.value);
+          if (T.data.length !== 0 && s.get(T.label) === r) {
+            o.size === 0 && T.yMeasureUnit && (z = T.yMeasureUnit), o.add(T.label);
+            for (const V of T.data) m.push(V.value);
           }
-        o.size > 0 && m.push(h(g, F, o));
+        o.size > 0 && g.push(d(m, z, o));
       }
     else {
-      const r = se.map((g) => g.value), o = new Set(
-        e.filter((g) => g.data.length > 0).map((g) => g.label)
+      const r = ue.map((m) => m.value), o = new Set(
+        e.filter((m) => m.data.length > 0).map((m) => m.label)
       );
-      m.push(h(r, d, o));
+      g.push(d(r, f, o));
     }
-    ze.current = m;
-    const y = /* @__PURE__ */ new Map();
-    for (const r of m)
+    ze.current = g;
+    const x = /* @__PURE__ */ new Map();
+    for (const r of g)
       for (const o of r.labels)
-        y.set(o, r);
-    const x = Je();
+        x.set(o, r);
+    const y = Je();
     t.applyOptions({
       localization: {
-        ...x.localization || {},
+        ...y.localization || {},
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         timeFormatter: (r) => (
           // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
@@ -462,14 +462,14 @@ function oo({
         )
       },
       timeScale: {
-        ...x.timeScale || {},
+        ...y.timeScale || {},
         ...S?.timeScale,
         // biome-ignore lint/suspicious/noExplicitAny: External library type compatibility
         tickMarkFormatter: a.tickMarkFormatter,
         minBarSpacing: 0
       }
     });
-    const v = !D && e.length > 1 && !Z, W = D ? P : e.length > 1 && !Z || P, M = ne(
+    const v = !D && e.length > 1 && !q, W = D ? N : e.length > 1 && !q || N, M = ie(
       "hsl(var(--muted-foreground))",
       "rgb(163, 163, 163)"
     );
@@ -478,88 +478,88 @@ function oo({
         defaultVisiblePriceScaleId: ke
       },
       leftPriceScale: {
-        ...x.leftPriceScale || {},
+        ...y.leftPriceScale || {},
         ...S?.leftPriceScale,
-        visible: D && !P,
+        visible: D && !N,
         textColor: M,
         ...D && Ie && {
           // lightweight-charts uses scale margins; title shown via localization if needed
         }
       },
       rightPriceScale: {
-        ...x.rightPriceScale || {},
+        ...y.rightPriceScale || {},
         ...S?.rightPriceScale,
-        visible: D ? !P : !W,
+        visible: D ? !N : !W,
         textColor: M
       }
     });
-    const U = new Set(L.current.keys()), X = new Set(e.map(ie));
-    for (const r of U)
+    const ee = new Set(L.current.keys()), X = new Set(e.map(ae));
+    for (const r of ee)
       if (!X.has(r)) {
         const o = L.current.get(r);
         o && (t.removeSeries(o), L.current.delete(r));
       }
-    const p = vt(), I = [];
+    const p = vt(), k = [];
     let R = 0;
     const $ = e.find((r) => r.data.length > 0), C = /* @__PURE__ */ new Map();
-    if (k && k.length > 0)
-      for (const r of k) {
+    if (I && I.length > 0)
+      for (const r of I) {
         if (!Number.isFinite(r.price)) continue;
         const o = r.seriesLabel ?? $?.label;
         if (!o) continue;
-        const g = C.get(o) ?? [];
-        g.push(r.price), C.set(o, g);
+        const m = C.get(o) ?? [];
+        m.push(r.price), C.set(o, m);
       }
-    if (G && G.length > 0)
-      for (const r of G) {
+    if (F && F.length > 0)
+      for (const r of F) {
         const o = r.seriesLabel ?? $?.label;
         if (!o) continue;
-        const g = C.get(o) ?? [];
-        Number.isFinite(r.priceTop) && g.push(r.priceTop), Number.isFinite(r.priceBottom) && g.push(r.priceBottom), C.set(o, g);
+        const m = C.get(o) ?? [];
+        Number.isFinite(r.priceTop) && m.push(r.priceTop), Number.isFinite(r.priceBottom) && m.push(r.priceBottom), C.set(o, m);
       }
     for (let r = 0; r < e.length; r++) {
-      const o = e[r], g = ie(o), F = ot(r), T = o.lineColor ?? o.color ?? F.line;
-      let N, J;
+      const o = e[r], m = ae(o), z = ot(r), T = o.lineColor ?? o.color ?? z.line;
+      let V, Q;
       if (o.lineColor ?? o.color)
         if (o.topColor && o.bottomColor)
-          N = o.topColor, J = o.bottomColor;
+          V = o.topColor, Q = o.bottomColor;
         else if (o.topColor) {
-          const b = ve(T);
-          N = o.topColor, J = b.bottomColor;
+          const b = Ce(T);
+          V = o.topColor, Q = b.bottomColor;
         } else if (o.bottomColor)
-          N = ve(T).topColor, J = o.bottomColor;
+          V = Ce(T).topColor, Q = o.bottomColor;
         else {
-          const b = ve(T);
-          N = b.topColor, J = b.bottomColor;
+          const b = Ce(T);
+          V = b.topColor, Q = b.bottomColor;
         }
       else
-        N = o.topColor || F.top, J = o.bottomColor || F.bottom;
+        V = o.topColor || z.top, Q = o.bottomColor || z.bottom;
       if (o.data.length === 0) {
-        const b = L.current.get(g);
-        b && (t.removeSeries(b), L.current.delete(g));
+        const b = L.current.get(m);
+        b && (t.removeSeries(b), L.current.delete(m));
         continue;
       }
-      const pe = o.data.length > 0 ? Math.min(...o.data.map((b) => b.value)) : 0, ce = o.data.length > 0 ? Math.max(...o.data.map((b) => b.value)) : 0, ue = pe < 0, q = o.data.some((b) => b.value === 0), de = !ue && q, fe = Nt(ce - pe), he = D ? o.priceScaleId ?? (R === 0 ? "left" : "right") : Z || !v || R === 0 ? "right" : `scale-${R}`;
-      v && I.push({
-        priceScaleId: he || "right",
+      const pe = o.data.length > 0 ? Math.min(...o.data.map((b) => b.value)) : 0, fe = o.data.length > 0 ? Math.max(...o.data.map((b) => b.value)) : 0, he = pe < 0, O = o.data.some((b) => b.value === 0), be = !he && O, de = Tt(fe - pe), me = D ? o.priceScaleId ?? (R === 0 ? "left" : "right") : q || !v || R === 0 ? "right" : `scale-${R}`;
+      v && k.push({
+        priceScaleId: me || "right",
         seriesIndex: R
       });
-      const Re = (Z || !v) && n !== void 0 && typeof n == "number", ct = C.get(o.label) ?? [], ut = (b) => {
+      const Ne = (q || !v) && n !== void 0 && typeof n == "number", ct = C.get(o.label) ?? [], ut = (b) => {
         const _ = b();
         if (_?.priceRange) {
-          Re && (_.priceRange.minValue = n);
+          Ne && (_.priceRange.minValue = n);
           for (const j of ct)
             j < _.priceRange.minValue && (_.priceRange.minValue = j), j > _.priceRange.maxValue && (_.priceRange.maxValue = j);
-          const oe = Re ? n : de && _.priceRange.minValue >= 0 ? 0 : void 0, be = le.current > 0 ? le.current : B.current?.clientHeight ?? 0;
-          if (be > 0) {
+          const re = Ne ? n : be && _.priceRange.minValue >= 0 ? 0 : void 0, Se = ce.current > 0 ? ce.current : B.current?.clientHeight ?? 0;
+          if (Se > 0) {
             const j = Vt({
               min: _.priceRange.minValue,
               max: _.priceRange.maxValue,
-              floor: oe,
-              scaleHeightPx: be,
-              fontSizePx: yt,
-              tickMarkDensity: Se,
-              minMove: fe,
+              floor: re,
+              scaleHeightPx: Se,
+              fontSizePx: xt,
+              tickMarkDensity: ve,
+              minMove: de,
               edgePaddingPx: Qe,
               edgePaddingTopPx: Ye
             });
@@ -571,60 +571,60 @@ function oo({
           };
         }
         return _;
-      }, Ze = y.get(o.label) ?? m[0], qe = Ze.formatter, ft = Ze.tickmarksFormatter, Te = {
+      }, Ze = x.get(o.label) ?? g[0], qe = Ze.formatter, ft = Ze.tickmarksFormatter, Re = {
         lineColor: T,
-        topColor: N,
-        bottomColor: J,
-        priceScaleId: he,
+        topColor: V,
+        bottomColor: Q,
+        priceScaleId: me,
         ...o.seriesType === "line" && {
-          lineStyle: o.lineStyle ?? ae.Solid
+          lineStyle: o.lineStyle ?? le.Solid
         },
         priceFormat: {
           type: "custom",
-          minMove: fe,
-          formatter: Re && typeof n == "number" ? (b) => qe(
+          minMove: de,
+          formatter: Ne && typeof n == "number" ? (b) => qe(
             b < n ? n : b
           ) : qe,
           tickmarksFormatter: ft
         },
         autoscaleInfoProvider: ut
       }, Oe = o.seriesType === "line";
-      let z = L.current.get(g);
-      const te = o.data.map((b) => ({
+      let A = L.current.get(m);
+      const oe = o.data.map((b) => ({
         ...b,
         time: b.time
       }));
-      if (Q !== void 0 && te.length > 0 && Number(te[0].time) > Q) {
-        const b = Number(te[0].time), _ = b - Q, oe = 86400, be = _ > 180 * oe ? 7 * oe : _ > 30 * oe ? oe : 6 * 3600, j = [];
-        for (let Ne = Q; Ne < b; Ne += be)
-          j.push({ time: Ne });
-        te.unshift(...j);
+      if (Y !== void 0 && oe.length > 0 && Number(oe[0].time) > Y) {
+        const b = Number(oe[0].time), _ = b - Y, re = 86400, Se = _ > 180 * re ? 7 * re : _ > 30 * re ? re : 6 * 3600, j = [];
+        for (let Te = Y; Te < b; Te += Se)
+          j.push({ time: Te });
+        oe.unshift(...j);
       }
-      z && z.seriesType() !== (Oe ? "Line" : "Area") && (t.removeSeries(z), L.current.delete(g), z = void 0), z ? (z.applyOptions(Te), z.setData(te)) : (Oe ? z = t.addSeries(mt, {
+      A && A.seriesType() !== (Oe ? "Line" : "Area") && (t.removeSeries(A), L.current.delete(m), A = void 0), A ? (A.applyOptions(Re), A.setData(oe)) : (Oe ? A = t.addSeries(mt, {
         ...p,
-        ...Te
-      }) : z = t.addSeries(pt, {
+        ...Re
+      }) : A = t.addSeries(gt, {
         ...p,
-        ...Te
-      }), z.setData(te), L.current.set(g, z)), R++;
+        ...Re
+      }), A.setData(oe), L.current.set(m, A)), R++;
     }
     if (D)
       try {
-        const r = t.priceScale("left"), o = t.priceScale("right"), g = {
-          visible: !P,
+        const r = t.priceScale("left"), o = t.priceScale("right"), m = {
+          visible: !N,
           autoScale: !0,
           scaleMargins: { top: 0, bottom: 0 },
           alignLabels: !0,
           entireTextOnly: !1,
-          tickMarkDensity: Se,
+          tickMarkDensity: ve,
           textColor: M,
           ...S?.rightPriceScale
         };
-        r?.applyOptions(g), o?.applyOptions(g);
+        r?.applyOptions(m), o?.applyOptions(m);
       } catch {
       }
-    else if (v && I.length > 0)
-      for (const r of I)
+    else if (v && k.length > 0)
+      for (const r of k)
         try {
           const o = t.priceScale(r.priceScaleId);
           o && o.applyOptions({
@@ -636,7 +636,7 @@ function oo({
             },
             alignLabels: !0,
             entireTextOnly: !1,
-            tickMarkDensity: Se,
+            tickMarkDensity: ve,
             textColor: M
           });
         } catch (o) {
@@ -649,7 +649,7 @@ function oo({
       try {
         const r = t.priceScale("right");
         r && r.applyOptions({
-          visible: !P,
+          visible: !N,
           autoScale: !0,
           scaleMargins: {
             top: 0,
@@ -657,47 +657,47 @@ function oo({
           },
           alignLabels: !0,
           entireTextOnly: !1,
-          tickMarkDensity: Se,
+          tickMarkDensity: ve,
           textColor: M,
           ...S?.rightPriceScale
         });
       } catch {
       }
-    if (n !== void 0 && !P && (Z || !v) && t.applyOptions({
+    if (n !== void 0 && !N && (q || !v) && t.applyOptions({
       handleScroll: {
         vertTouchDrag: !1
       }
-    }), se.length > 0) {
-      const r = se.map((o) => Number(o.time)).filter((o) => Number.isFinite(o));
+    }), ue.length > 0) {
+      const r = ue.map((o) => Number(o.time)).filter((o) => Number.isFinite(o));
       if (r.length > 0) {
-        const o = Math.min(...r), g = Q !== void 0 ? Math.min(Q, o) : o, F = Math.max(...r);
-        if (Number(g) <= Number(F)) {
+        const o = Math.min(...r), m = Y !== void 0 ? Math.min(Y, o) : o, z = Math.max(...r);
+        if (Number(m) <= Number(z)) {
           const T = () => {
-            const N = t.timeScale();
-            if (s !== "time") {
-              N.applyOptions({
+            const V = t.timeScale();
+            if (h !== "time") {
+              V.applyOptions({
                 fixLeftEdge: !0,
                 fixRightEdge: !0
               });
               return;
             }
-            const J = D && !P, pe = D ? !P : !W, ce = !J, ue = !pe;
-            if (N.applyOptions({
-              fixLeftEdge: !ce,
-              fixRightEdge: !ue
-            }), !ce && !ue) return;
-            const q = N.getVisibleLogicalRange(), de = N.width();
-            if (!q || !(de > 0)) return;
-            const fe = q.to - q.from;
-            if (!(fe > 0)) return;
-            const he = xt * fe / de;
-            N.setVisibleLogicalRange({
-              from: ce ? q.from - he : q.from,
-              to: ue ? q.to + he : q.to
+            const Q = D && !N, pe = D ? !N : !W, fe = !Q, he = !pe;
+            if (V.applyOptions({
+              fixLeftEdge: !fe,
+              fixRightEdge: !he
+            }), !fe && !he) return;
+            const O = V.getVisibleLogicalRange(), be = V.width();
+            if (!O || !(be > 0)) return;
+            const de = O.to - O.from;
+            if (!(de > 0)) return;
+            const me = yt * de / be;
+            V.setVisibleLogicalRange({
+              from: fe ? O.from - me : O.from,
+              to: he ? O.to + me : O.to
             });
           };
           try {
-            t.timeScale().setVisibleRange({ from: g, to: F }), T();
+            t.timeScale().setVisibleRange({ from: m, to: z }), T();
           } catch {
             try {
               t.timeScale().fitContent(), T();
@@ -713,116 +713,116 @@ function oo({
       r.data.length > 0 && H.set(r.label, r.data[r.data.length - 1]);
     Pe(H.size > 0 ? H : void 0);
   }, [
-    Y,
+    U,
     e,
-    se,
-    s,
-    d,
-    P,
-    Z,
+    ue,
+    h,
+    f,
+    N,
+    q,
     D,
     ke,
     Ie,
     De,
     Ee,
-    Q,
-    k,
-    G,
+    Y,
+    I,
+    F,
     S
-  ]), A(() => {
+  ]), G(() => {
     const t = E.current;
     if (!t || e.length === 0) return;
     const l = e.length === 1;
     let n;
-    for (const c of e)
-      if (c.data.length > 0) {
-        n = c.data[c.data.length - 1].time;
+    for (const s of e)
+      if (s.data.length > 0) {
+        n = s.data[s.data.length - 1].time;
         break;
       }
     if (!n) return;
-    const a = (c) => {
-      const { time: h = n, seriesData: m, point: y } = c || {}, x = e[0], v = x ? L.current.get(ie(x)) : void 0;
-      if (!y || !h) {
+    const a = (s) => {
+      const { time: d = n, seriesData: g, point: x } = s || {}, y = e[0], v = y ? L.current.get(ae(y)) : void 0;
+      if (!x || !d) {
         const X = /* @__PURE__ */ new Map();
         for (const p of e)
           p.data.length > 0 && X.set(p.label, p.data[p.data.length - 1]);
-        if (Pe(X.size > 0 ? X : void 0), l || Z || xe)
-          O(null);
+        if (Pe(X.size > 0 ? X : void 0), l || q || ye)
+          J(null);
         else if (v && n) {
           const p = e[0];
           if (p && p.data.length > 0) {
             const R = t.timeScale().timeToCoordinate(n), $ = p.data[p.data.length - 1].value, C = v.priceToCoordinate($);
-            R !== null && C !== null && O({ x: R, y: C });
+            R !== null && C !== null && J({ x: R, y: C });
           }
         }
         return;
       }
       const W = /* @__PURE__ */ new Map();
-      let M, U = v;
+      let M, ee = v;
       for (let X = 0; X < e.length; X++) {
-        const p = e[X], I = L.current.get(ie(p));
-        if (!I) continue;
-        const R = m?.get(I), $ = R && "value" in R ? R.value : void 0;
+        const p = e[X], k = L.current.get(ae(p));
+        if (!k) continue;
+        const R = g?.get(k), $ = R && "value" in R ? R.value : void 0;
         let C;
         if ($ !== void 0)
           C = $;
         else if (l) {
-          const H = Number(h), r = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
+          const H = Number(d), r = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
           H < r ? C = Number.NaN : C = p.data[p.data.length - 1]?.value ?? 0;
         } else {
           const H = p.data.length > 0 ? Number(p.data[0].time) : Number.POSITIVE_INFINITY;
-          if (Number(h) < H) continue;
-          C = At(p.data, Number(h));
+          if (Number(d) < H) continue;
+          C = At(p.data, Number(d));
         }
-        Number.isNaN(C) || (M === void 0 && (M = C, U = I), W.set(p.label, { value: C, time: h }));
+        Number.isNaN(C) || (M === void 0 && (M = C, ee = k), W.set(p.label, { value: C, time: d }));
       }
-      if (Pe(W), M !== void 0 && U) {
-        const p = t.timeScale().timeToCoordinate(h), I = U.priceToCoordinate(M);
-        if (p !== null && I !== null) {
+      if (Pe(W), M !== void 0 && ee) {
+        const p = t.timeScale().timeToCoordinate(d), k = ee.priceToCoordinate(M);
+        if (p !== null && k !== null) {
           const R = B.current;
           if (R) {
             const $ = R.querySelector(
               ".LightweightChart"
             );
             if ($) {
-              const C = $.getBoundingClientRect(), H = R.getBoundingClientRect(), r = p + (C.left - H.left), o = I + (C.top - H.top);
-              O({ x: r, y: o });
+              const C = $.getBoundingClientRect(), H = R.getBoundingClientRect(), r = p + (C.left - H.left), o = k + (C.top - H.top);
+              J({ x: r, y: o });
             } else
-              O({ x: p, y: I });
+              J({ x: p, y: k });
           } else
-            O({ x: p, y: I });
+            J({ x: p, y: k });
         } else
-          O(null);
+          J(null);
       } else
-        O(null);
+        J(null);
     };
-    return t.subscribeCrosshairMove(a), P && t.subscribeClick(a), !l && !Z && !xe && requestAnimationFrame(() => {
-      const c = e[0], h = c ? L.current.get(ie(c)) : void 0;
-      if (h && n && c.data.length > 0) {
-        const y = t.timeScale().timeToCoordinate(n), x = c.data[c.data.length - 1].value, v = h.priceToCoordinate(x);
-        y !== null && v !== null && O({ x: y, y: v });
+    return t.subscribeCrosshairMove(a), N && t.subscribeClick(a), !l && !q && !ye && requestAnimationFrame(() => {
+      const s = e[0], d = s ? L.current.get(ae(s)) : void 0;
+      if (d && n && s.data.length > 0) {
+        const x = t.timeScale().timeToCoordinate(n), y = s.data[s.data.length - 1].value, v = d.priceToCoordinate(y);
+        x !== null && v !== null && J({ x, y: v });
       }
     }), () => {
-      t.unsubscribeCrosshairMove(a), P && t.unsubscribeClick(a);
+      t.unsubscribeCrosshairMove(a), N && t.unsubscribeClick(a);
     };
-  }, [e, Z, P, xe]), A(() => {
+  }, [e, q, N, ye]), G(() => {
     const t = E.current;
     if (!t || e.length === 0) return;
     const l = t.timeScale(), n = () => {
       const a = ze.current;
       if (a.length === 0) return;
-      const c = l.getVisibleRange();
-      if (!c) return;
-      const h = Number(c.from), m = Number(c.to);
-      for (const y of a) {
-        const x = [];
+      const s = l.getVisibleRange();
+      if (!s) return;
+      const d = Number(s.from), g = Number(s.to);
+      for (const x of a) {
+        const y = [];
         for (const v of e)
-          if (y.labels.has(v.label))
+          if (x.labels.has(v.label))
             for (const W of v.data) {
               const M = Number(W.time);
-              M >= h && M <= m && x.push(W.value);
+              M >= d && M <= g && y.push(W.value);
             }
-        x.length > 0 && y.updateVisibleRange(x);
+        y.length > 0 && x.updateVisibleRange(y);
       }
     };
     return l.subscribeVisibleLogicalRangeChange(n), () => {
@@ -830,62 +830,62 @@ function oo({
         n
       );
     };
-  }, [e]), A(() => {
+  }, [e]), G(() => {
     const t = E.current, l = Array.from(L.current.values()), n = [];
-    if (t && l.length > 0 && w) {
-      const a = Ct(), c = l[0];
-      for (const h of w) {
-        const m = {
+    if (t && l.length > 0 && P) {
+      const a = Ct(), s = l[0];
+      for (const d of P) {
+        const g = {
           ...a,
-          ...h.options || {}
+          ...d.options || {}
         };
-        m.color && (m.color = ne(m.color, m.color));
-        const y = new Tt(t, c, h.xCoordinate, m);
-        c.attachPrimitive(y), n.push(y);
+        g.color && (g.color = ie(g.color, g.color));
+        const x = new Rt(t, s, d.xCoordinate, g);
+        s.attachPrimitive(x), n.push(x);
       }
     }
     return () => {
       if (l.length > 0) {
         const a = l[0];
-        for (const c of n)
+        for (const s of n)
           try {
-            a.detachPrimitive(c);
+            a.detachPrimitive(s);
           } catch {
           }
       }
     };
-  }, [w, e, Y]), A(() => {
+  }, [P, e, U]), G(() => {
     const t = [], l = [];
-    if (k && k.length > 0) {
-      const n = ne(
+    if (I && I.length > 0) {
+      const n = ie(
         "hsl(var(--destructive))",
         "rgb(239, 68, 68)"
       );
-      for (const a of k) {
+      for (const a of I) {
         if (!Number.isFinite(a.price)) continue;
-        const c = et(
+        const s = et(
           L.current,
           e,
           a.seriesLabel
         );
-        if (!c) continue;
-        const h = a.color ? ne(a.color, a.color) : n, m = a.lineWidth ?? 1, y = a.lineStyle ?? ae.Dashed, x = c.createPriceLine({
+        if (!s) continue;
+        const d = a.color ? ie(a.color, a.color) : n, g = a.lineWidth ?? 1, x = a.lineStyle ?? le.Dashed, y = s.createPriceLine({
           price: a.price,
-          color: h,
-          lineWidth: m,
-          lineStyle: y,
+          color: d,
+          lineWidth: g,
+          lineStyle: x,
           axisLabelVisible: a.axisLabelVisible ?? !0,
           title: a.title ?? ""
         });
-        t.push({ series: c, line: x });
+        t.push({ series: s, line: y });
         const v = new Bt(
-          c,
+          s,
           a.price,
-          h,
-          m,
-          y
+          d,
+          g,
+          x
         );
-        c.attachPrimitive(v), l.push({ series: c, primitive: v });
+        s.attachPrimitive(v), l.push({ series: s, primitive: v });
       }
     }
     return () => {
@@ -900,24 +900,24 @@ function oo({
         } catch {
         }
     };
-  }, [k, e, Y]), A(() => {
+  }, [I, e, U]), G(() => {
     const t = [];
-    if (G && G.length > 0) {
+    if (F && F.length > 0) {
       const l = "rgba(239, 68, 68, 0.12)";
-      for (const n of G) {
+      for (const n of F) {
         const a = et(
           L.current,
           e,
           n.seriesLabel
         );
         if (!a) continue;
-        const c = n.color ? ne(n.color, l) : l, h = new kt(
+        const s = n.color ? ie(n.color, l) : l, d = new kt(
           a,
           n.priceTop,
           n.priceBottom,
-          c
+          s
         );
-        a.attachPrimitive(h), t.push({ series: a, zone: h });
+        a.attachPrimitive(d), t.push({ series: a, zone: d });
       }
     }
     return () => {
@@ -927,15 +927,15 @@ function oo({
         } catch {
         }
     };
-  }, [G, e, Y]), A(() => {
+  }, [F, e, U]), G(() => {
     const t = E.current;
-    if (!t || !w?.length) {
+    if (!t || !P?.length) {
       $e([]);
       return;
     }
     const l = () => {
-      const c = t.timeScale(), h = w.map((m) => c.timeToCoordinate(m.xCoordinate) ?? null);
-      $e(h), B.current && He(B.current.clientWidth);
+      const s = t.timeScale(), d = P.map((g) => s.timeToCoordinate(g.xCoordinate) ?? null);
+      $e(d), B.current && He(B.current.clientWidth);
     };
     l();
     const n = t.timeScale(), a = () => {
@@ -944,99 +944,99 @@ function oo({
     return n.subscribeVisibleLogicalRangeChange(a), () => {
       n.unsubscribeVisibleLogicalRangeChange(a);
     };
-  }, [w, e, Y]), dt(() => {
+  }, [P, e, U]), pt(() => {
     lt((t) => {
       const l = {};
       let n = !1;
-      for (const [a, c] of je.current) {
-        if (!c) continue;
-        const h = c.offsetWidth;
-        l[a] = h, t[a] !== h && (n = !0);
+      for (const [a, s] of je.current) {
+        if (!s) continue;
+        const d = s.offsetWidth;
+        l[a] = d, t[a] !== d && (n = !0);
       }
       return Object.keys(t).length !== Object.keys(l).length && (n = !0), n ? l : t;
     });
   });
-  const me = e.length === 1, Ke = Ve.useMemo(() => {
-    if (me && e.length > 0) {
+  const ge = e.length === 1, Ke = Ve.useMemo(() => {
+    if (ge && e.length > 0) {
       const t = e[0];
       if (t.data.length > 0)
         return t.data[t.data.length - 1];
     }
-  }, [me, e]);
-  return /* @__PURE__ */ ge(
+  }, [ge, e]);
+  return /* @__PURE__ */ te(
     "div",
     {
       ref: B,
-      className: ee(
+      className: Z(
         "relative z-[1] w-full h-full overflow-hidden p-0",
         i
       ),
       children: [
-        ye != null && ye !== !1 && me ? /* @__PURE__ */ V("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ V("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: ye }) }) : rt && me && Ke && /* @__PURE__ */ V(
+        xe != null && xe !== !1 && ge ? /* @__PURE__ */ w("div", { className: "absolute top-2 left-2 right-2 z-[100] pointer-events-none", children: /* @__PURE__ */ w("div", { className: "text-xl sm:text-2xl font-semibold text-foreground whitespace-nowrap overflow-hidden text-ellipsis", children: xe }) }) : rt && ge && Ke && /* @__PURE__ */ w(
           Pt,
           {
             point: Ke,
-            xMeasureUnit: s,
-            yMeasureUnit: d,
-            decimals: Ce
+            xMeasureUnit: h,
+            yMeasureUnit: f,
+            decimals: se
           }
         ),
-        Ge && We && /* @__PURE__ */ V(
-          Rt,
+        Ge && We && /* @__PURE__ */ w(
+          Nt,
           {
             points: Ge,
-            xMeasureUnit: s,
-            yMeasureUnit: d,
+            xMeasureUnit: h,
+            yMeasureUnit: f,
             series: e,
             position: We,
             containerRef: B,
-            decimals: Ce
+            decimals: se
           }
         ),
-        u && /* @__PURE__ */ V(Wt, { series: e, onUnselect: f }),
-        w && w.length > 0 && Xe.length === w.length && /* @__PURE__ */ V(
+        c && /* @__PURE__ */ w(Wt, { series: e, onUnselect: u }),
+        P && P.length > 0 && Xe.length === P.length && /* @__PURE__ */ w(
           "div",
           {
             className: "absolute inset-0 z-[5] pointer-events-none",
             "aria-hidden": !0,
-            children: w.map((t, l) => {
+            children: P.map((t, l) => {
               const n = Xe[l], a = t.options ?? {};
               if (n === null) return null;
-              const { labelText: c, valueStr: h } = Ft(
+              const { labelText: s, valueStr: d } = Ft(
                 a,
-                d,
-                Ce
-              ), m = a.tooltipText ?? "";
-              if (!(c || h || m)) return null;
-              const x = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", v = a.labelTextColor ?? "hsl(var(--foreground))", W = `${String(t.xCoordinate)}-${c}-${m}`, M = zt(
+                f,
+                se
+              ), g = a.tooltipText ?? "";
+              if (!(s || d || g)) return null;
+              const y = a.labelBackgroundColor ?? a.color ?? "hsl(var(--background))", v = a.labelTextColor ?? "hsl(var(--foreground))", W = `${String(t.xCoordinate)}-${s}-${g}`, M = zt(
                 n,
                 it,
                 at[l]
               );
-              return /* @__PURE__ */ ge(
+              return /* @__PURE__ */ te(
                 "div",
                 {
-                  ref: (U) => {
-                    je.current.set(l, U);
+                  ref: (ee) => {
+                    je.current.set(l, ee);
                   },
-                  className: ee(
+                  className: Z(
                     "group absolute top-2 px-2 py-1 rounded text-xs font-medium whitespace-nowrap shadow-sm border border-border",
-                    m && "pointer-events-auto cursor-default"
+                    g && "pointer-events-auto cursor-default"
                   ),
                   style: {
                     ...M,
-                    backgroundColor: x,
+                    backgroundColor: y,
                     color: v
                   },
                   children: [
-                    c && /* @__PURE__ */ V("span", { className: "block", children: c }),
-                    h && /* @__PURE__ */ V("span", { className: ee("block", c && "mt-0.5"), children: h }),
-                    m && /* @__PURE__ */ V(
+                    s && /* @__PURE__ */ w("span", { className: "block", children: s }),
+                    d && /* @__PURE__ */ w("span", { className: Z("block", s && "mt-0.5"), children: d }),
+                    g && /* @__PURE__ */ w(
                       "span",
                       {
                         className: "pointer-events-none absolute right-0 top-full z-10 mt-1 hidden w-[280px] whitespace-normal rounded border border-border bg-popover px-2.5 py-1.5 text-left leading-snug text-popover-foreground shadow-md group-hover:block",
                         role: "tooltip",
-                        children: m
+                        children: g
                       }
                     )
                   ]
@@ -1046,7 +1046,7 @@ function oo({
             })
           }
         ),
-        /* @__PURE__ */ V(
+        /* @__PURE__ */ w(
           "div",
           {
             ref: we,
@@ -1059,87 +1059,119 @@ function oo({
 }
 function Wt({
   series: e,
-  onUnselect: i,
+  markers: i,
+  onUnselect: c,
   inline: u = !1
 }) {
-  const f = e.every((s) => s.data.length === 0);
-  return /* @__PURE__ */ V(
+  const h = e.every((f) => f.data.length === 0);
+  return /* @__PURE__ */ te(
     "div",
     {
-      className: ee(
+      className: Z(
         "flex flex-wrap",
         u ? "items-center justify-center gap-6" : "absolute top-0 left-2 z-[10] gap-2"
       ),
-      children: e.map((s, d) => {
-        const S = ot(d), w = (s.lineColor ?? s.color) || S.line, k = !f && s.data.length === 0;
-        return /* @__PURE__ */ ge(
+      children: [
+        e.map((f, S) => {
+          const P = ot(S), I = (f.lineColor ?? f.color) || P.line, F = !h && f.data.length === 0;
+          return /* @__PURE__ */ te(
+            "div",
+            {
+              className: Z(
+                "flex items-center gap-1.5",
+                !u && "px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
+                F && "opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ w(
+                  "div",
+                  {
+                    className: Z(
+                      u ? "size-2 rounded-full" : "h-3 w-3 rounded-sm"
+                    ),
+                    style: { backgroundColor: I }
+                  }
+                ),
+                /* @__PURE__ */ te(
+                  "span",
+                  {
+                    className: Z(
+                      "font-medium text-foreground",
+                      u ? "text-sm" : "text-[10px] sm:text-xs"
+                    ),
+                    children: [
+                      f.label,
+                      F && " (no data)"
+                    ]
+                  }
+                ),
+                c && /* @__PURE__ */ w(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (se) => {
+                      se.stopPropagation(), c(f.label);
+                    },
+                    className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
+                    "aria-label": `Remove ${f.label}`,
+                    children: /* @__PURE__ */ te(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "12",
+                        height: "12",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "text-muted-foreground hover:text-foreground",
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ w("title", { children: "Close" }),
+                          /* @__PURE__ */ w("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                          /* @__PURE__ */ w("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            f.id ?? f.label
+          );
+        }),
+        i?.map((f) => /* @__PURE__ */ te(
           "div",
           {
-            className: ee(
+            className: Z(
               "flex items-center gap-1.5",
-              !u && "px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border",
-              k && "opacity-50"
+              !u && "px-2 py-1 bg-background/80 backdrop-blur-sm rounded border border-border"
             ),
             children: [
-              /* @__PURE__ */ V(
+              /* @__PURE__ */ w(
                 "div",
                 {
-                  className: ee(
-                    u ? "size-2 rounded-full" : "h-3 w-3 rounded-sm"
-                  ),
-                  style: { backgroundColor: w }
+                  className: Z("w-0.5", "h-3"),
+                  style: { backgroundColor: f.color }
                 }
               ),
-              /* @__PURE__ */ ge(
+              /* @__PURE__ */ w(
                 "span",
                 {
-                  className: ee(
+                  className: Z(
                     "font-medium text-foreground",
                     u ? "text-sm" : "text-[10px] sm:text-xs"
                   ),
-                  children: [
-                    s.label,
-                    k && " (no data)"
-                  ]
-                }
-              ),
-              i && /* @__PURE__ */ V(
-                "button",
-                {
-                  type: "button",
-                  onClick: (G) => {
-                    G.stopPropagation(), i(s.label);
-                  },
-                  className: "ml-1 flex items-center justify-center w-4 h-4 rounded-sm hover:bg-muted transition-colors cursor-pointer",
-                  "aria-label": `Remove ${s.label}`,
-                  children: /* @__PURE__ */ ge(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "12",
-                      height: "12",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: "text-muted-foreground hover:text-foreground",
-                      "aria-hidden": "true",
-                      children: [
-                        /* @__PURE__ */ V("title", { children: "Close" }),
-                        /* @__PURE__ */ V("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                        /* @__PURE__ */ V("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                      ]
-                    }
-                  )
+                  children: f.label
                 }
               )
             ]
           },
-          s.id ?? s.label
-        );
-      })
+          f.id
+        ))
+      ]
     }
   );
 }
@@ -1152,5 +1184,5 @@ export {
   At as getStepForwardValue,
   zt as getVerticalLineLabelStyle,
   Ft as getVerticalLineTooltipContent,
-  ie as seriesIdentity
+  ae as seriesIdentity
 };