@graphysdk/react 0.0.1 → 1.8.1-beta.1786025839240

package/dist/index.mjs

@@ -1,836 +1,22 @@
-import './index.css';
-import { jsx as s, jsxs as p, Fragment as C } from "react/jsx-runtime";
-import { useMotionValue as X, animate as ut, motion as _, useSpring as $, useReducedMotion as gt } from "motion/react";
-import { useState as Z, useEffect as w, useMemo as y, memo as k, useRef as O, useLayoutEffect as ht } from "react";
-import { DEFAULT_FONT_STYLE as pt, DEFAULT_FONT_WEIGHT as ft, CachedTextMeasurer as V, HeuristicTextMeasurer as yt, LayoutCompiler as mt, DEFAULT_COLOR_PALETTE as I, getStrokeWidth as J, createXValueReader as vt, getGroup as xt, getX as L, getYMin as q, GROUP_VARIABLES as Q, getY as T, getColor as R, getAlpha as F, getYMax as tt, getXMin as bt, getXMax as Lt, getSize as Tt, getStartAngle as Et, getEndAngle as At, getInnerRadius as _t, getOuterRadius as kt, compile as wt } from "@graphysdk/viz-engine";
-import St, { clsx as Ct } from "clsx";
-import { curveCatmullRom as It, curveLinear as Rt, area as Ft, line as et, arc as Dt } from "d3-shape";
-import { interpolatePath as Nt } from "d3-interpolate-path";
-import { assignInlineVars as Bt } from "@vanilla-extract/dynamic";
-typeof window < "u" && (window.__GRAPHY_SDK__ ??= {}, window.__GRAPHY_SDK__.reactRenderer = "0.0.1");
-const Pt = /\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu, rt = "😀";
-class H {
-  constructor() {
-    this.emojiCorrections = /* @__PURE__ */ new Map(), this.currentFont = "";
-    const r = new OffscreenCanvas(1, 1).getContext("2d");
-    if (!r)
-      throw new Error("Failed to create OffscreenCanvas 2D context");
-    this.ctx = r;
-  }
-  /**
-   * Creates a CanvasTextMeasurer after all declared `@font-face` fonts
-   * have finished loading. This ensures measurements use the correct font
-   * glyphs from the first call, avoiding stale cache entries.
-   *
-   * Falls back to immediate construction if `document.fonts` is unavailable
-   * (e.g. non-browser environment).
-   *
-   * Note: document.fonts.ready still resolves even if some fonts fail to load.
-   */
-  static async create() {
-    return typeof document < "u" && document.fonts && await document.fonts.ready, new H();
-  }
-  measureText(t, r) {
-    const o = Gt(r);
-    this.setFont(o);
-    const { width: n, fontBoundingBoxAscent: a, fontBoundingBoxDescent: i } = this.ctx.measureText(t);
-    let l = n;
-    const c = Mt(t);
-    if (c > 0) {
-      const d = this.getEmojiCorrection(o);
-      l -= d * c;
-    }
-    return {
-      width: l,
-      height: a + i,
-      ascent: a,
-      descent: i
-    };
-  }
-  /**
-   * Skip redundant `ctx.font` assignments
-   * Setting the property triggers CSS font string parsing and font resolution.
-   */
-  setFont(t) {
-    this.currentFont !== t && (this.ctx.font = t, this.currentFont = t);
-  }
-  /**
-   * Computes the per-emoji width correction for a given font.
-   * Measures the reference emoji in both Canvas and DOM, caches the difference.
-   * Returns 0 if DOM is unavailable or the difference is negligible (< 0.5px).
-   */
-  getEmojiCorrection(t) {
-    const r = this.emojiCorrections.get(t);
-    if (r !== void 0) return r;
-    this.setFont(t);
-    const o = this.ctx.measureText(rt).width, n = Ot(t);
-    let a = 0;
-    if (n !== null) {
-      const i = o - n;
-      a = i > 0.5 ? i : 0;
-    }
-    return this.emojiCorrections.set(t, a), a;
-  }
+import { useMemo as e } from "react";
+import { GraphProvider as n } from "@graphysdk/react-renderer";
+import { updateSpec as i } from "@graphysdk/viz-engine";
+import { jsx as o } from "react/jsx-runtime";
+export * from "@graphysdk/react-renderer";
+function a(r) {
+  const t = r.config.content;
+  return t?.isBrandMarkVisible !== void 0 || t?.brandMark?.enabled !== void 0 ? r : i(r, { config: { content: {
+    isBrandMarkVisible: !0,
+    brandMark: { enabled: !0 }
+  } } });
 }
-const Mt = (e) => {
-  const t = e.match(Pt);
-  return t ? t.length : 0;
-}, Ot = (e) => {
-  const t = zt();
-  return t ? (t.style.font = e, t.getBoundingClientRect().width) : null;
-};
-function Gt(e) {
-  const t = e.style ?? pt, r = e.weight ?? ft;
-  return `${t} ${r} ${e.size}px '${e.family}'`;
-}
-let b = null;
-const zt = () => typeof document > "u" ? null : (b || (b = document.createElement("span"), b.style.position = "absolute", b.style.visibility = "hidden", b.style.whiteSpace = "nowrap", b.style.left = "-9999px", b.textContent = rt, document.body.appendChild(b)), b), Wt = () => {
-  const [e, t] = Z(null);
-  return w(() => {
-    let r = !1;
-    const o = () => {
-      r || t(Ht());
-    };
-    return (async () => {
-      typeof document < "u" && document.fonts && await document.fonts.ready, o();
-    })(), typeof document < "u" && document.fonts && document.fonts.addEventListener("loadingdone", o), () => {
-      r = !0, typeof document < "u" && document.fonts && document.fonts.removeEventListener("loadingdone", o);
-    };
-  }, []), e;
-}, Ht = () => {
-  try {
-    return new V(new H());
-  } catch {
-    return new V(new yt());
-  }
-}, Ut = 12, $t = "sans-serif", Vt = {
-  family: $t,
-  size: Ut
-}, jt = (e) => (t) => {
-  if (!t.isVisible || t.ticks.length === 0) return 0;
-  const r = t.position === "top" || t.position === "bottom", o = t.ticks.map((n) => e.measureText(String(n.value), Vt));
-  return Math.max(...r ? o.map((n) => n.height) : o.map((n) => n.width));
-}, Yt = 20, Kt = () => () => Yt, Xt = 12, Zt = 8, Jt = 12, qt = "Inter", Qt = {
-  family: qt,
-  size: Jt
-}, te = Zt + Xt, ee = (e) => (t) => {
-  if (t.items.length === 0) return 0;
-  const r = t.position === "top" || t.position === "bottom", o = t.items.map((n) => e.measureText(String(n.value), Qt));
-  return r ? Math.max(...o.map((n) => n.height)) : Math.max(...o.map((n) => n.width)) + te;
-}, re = ({ spec: e, containerSize: t, externalMeasurements: r }) => {
-  const o = Wt(), n = y(() => o ? {
-    measureAxis: jt(o),
-    measureAxisLabel: Kt(),
-    measureLegend: ee(o)
-  } : null, [o]);
-  return y(() => n ? new mt(n).compile({ guides: e.guides, containerSize: t, externalMeasurements: r }) : null, [e, t, r, n]);
-}, nt = !1, P = (e) => e.text !== void 0 ? e.text : e.content ? e.content.map(P).join("") : "";
-var ne = "_12eci1n0", G = "_1mf2q6u0";
-const oe = ({ ref: e, compiled: t, captionRect: r }) => {
-  const { caption: o } = t.config.content;
-  return o === null ? null : /* @__PURE__ */ s(
-    "div",
-    {
-      ref: e,
-      className: ne,
-      style: {
-        width: r.width
-      },
-      children: /* @__PURE__ */ s("p", { className: G, children: typeof o == "string" ? o : P(o) })
-    }
-  );
-};
-var ae = "_1q25vjj0";
-const ie = ({ ref: e, compiled: t, titleRect: r }) => {
-  const { title: o, subtitle: n } = t.config.content;
-  if (o === null && n === null) return null;
-  const a = typeof o == "string" ? o : o !== null ? P(o) : "", i = typeof n == "string" ? n : n !== null ? P(n) : "";
-  return /* @__PURE__ */ p(
-    "div",
-    {
-      ref: e,
-      className: ae,
-      style: {
-        width: r.width
-      },
-      children: [
-        o !== null && /* @__PURE__ */ s("h1", { className: G, children: a }),
-        n !== null && /* @__PURE__ */ s("p", { className: G, children: i })
-      ]
-    }
-  );
-}, f = (e) => `${e * 100}%`;
-function S(e) {
-  return 1 - e;
-}
-var se = "pr8m7u0", le = "pr8m7u1";
-const ce = 8, de = ({ legends: e }) => {
-  const t = y(() => {
-    const r = [];
-    for (const o of e)
-      for (const n of o.items) {
-        if (n.normalizedY === null) continue;
-        const a = typeof n.visual.color == "string" ? n.visual.color : void 0;
-        r.push({
-          key: `${String(n.value)}${a ? `-${a}` : ""}`,
-          label: String(n.value),
-          color: a,
-          x: ce,
-          y: f(S(n.normalizedY))
-        });
-      }
-    return r;
-  }, [e]);
-  return t.length === 0 ? null : /* @__PURE__ */ s("div", { className: se, children: t.map((r) => /* @__PURE__ */ s("span", { className: le, style: { left: r.x, top: r.y, color: r.color }, children: r.label }, r.key)) });
-};
-var ue = "_2hq2f70", ge = "x9xdzb0", he = "x9xdzb1", pe = "x9xdzb2", fe = "x9xdzb3", ot = "x9xdzb4", ye = "x9xdzb5", me = "x9xdzb6";
-const ve = "#9ca3af", xe = ({ legends: e }) => e.length === 0 ? null : /* @__PURE__ */ s("div", { className: ge, children: e.map((t, r) => {
-  const o = t.position === "left" || t.position === "right", n = t.aesthetics.includes("size");
-  return /* @__PURE__ */ s(
-    "div",
-    {
-      className: Ct(he, { [fe]: o, [pe]: !o }),
-      children: n ? /* @__PURE__ */ s(Le, { legend: t }) : /* @__PURE__ */ s(be, { legend: t })
-    },
-    r
-  );
-}) }), be = ({ legend: e }) => e.items.map((t) => /* @__PURE__ */ p("div", { className: ot, children: [
-  /* @__PURE__ */ s("span", { className: ye, style: { backgroundColor: t.visual.color } }),
-  /* @__PURE__ */ s("span", { children: String(t.value) })
-] }, `${String(t.value)}${t.visual.color ? `-${t.visual.color}` : ""}`)), Le = ({ legend: e }) => {
-  const t = e.items.map((r) => {
-    const o = Number(r.visual.size);
-    return {
-      key: `${String(r.value)}-${o}`,
-      label: String(r.value),
-      color: typeof r.visual.color == "string" ? r.visual.color : void 0,
-      sizeValue: o
-    };
-  }).filter((r) => Number.isFinite(r.sizeValue) && r.sizeValue > 0);
-  return t.length === 0 ? null : t.map((r) => /* @__PURE__ */ p("div", { className: ot, children: [
-    /* @__PURE__ */ s(
-      "span",
-      {
-        className: me,
-        style: {
-          width: r.sizeValue,
-          height: r.sizeValue,
-          backgroundColor: r.color ?? ve
-        }
-      }
-    ),
-    /* @__PURE__ */ s("span", { children: r.label })
-  ] }, r.key));
-}, Te = k(function({ legends: t, rects: r }) {
-  const o = y(() => {
-    const n = /* @__PURE__ */ new Map();
-    for (const a of t) {
-      const i = n.get(a.position);
-      i ? i.push(a) : n.set(a.position, [a]);
-    }
-    return n;
-  }, [t]);
-  return /* @__PURE__ */ s(C, { children: Array.from(o, ([n, a]) => {
-    const i = r[n];
-    if (i == null) return null;
-    const l = a.filter((d) => d.display === "pill"), c = a.filter((d) => d.display === "direct");
-    return /* @__PURE__ */ p(
-      "div",
-      {
-        className: ue,
-        style: {
-          left: i.x,
-          top: i.y,
-          width: i.width,
-          height: i.height
-        },
-        children: [
-          /* @__PURE__ */ s(xe, { legends: l }),
-          /* @__PURE__ */ s(de, { legends: c })
-        ]
-      },
-      n
-    );
-  }) });
-});
-var at = "wyi2w10";
-const Ee = ({ axisRects: e }) => /* @__PURE__ */ p(C, { children: [
-  N("top", e.top),
-  N("right", e.right),
-  N("bottom", e.bottom),
-  N("left", e.left)
-] }), N = (e, t) => t ? /* @__PURE__ */ p("g", { transform: `translate(${t.x}, ${t.y})`, children: [
-  nt,
-  /* @__PURE__ */ p(
-    "text",
-    {
-      className: at,
-      x: t.width / 2,
-      y: t.height / 2,
-      textAnchor: "middle",
-      dominantBaseline: "middle",
-      children: [
-        e,
-        " axis"
-      ]
-    }
-  )
-] }, `axis-${e}`) : null, Ae = ({ axisLabelRects: e }) => /* @__PURE__ */ p(C, { children: [
-  B("top", e.top),
-  B("right", e.right),
-  B("bottom", e.bottom),
-  B("left", e.left)
-] }), B = (e, t) => {
-  if (!t) return null;
-  const r = _e(e, t);
-  return /* @__PURE__ */ p("g", { transform: `translate(${t.x}, ${t.y})`, children: [
-    nt,
-    /* @__PURE__ */ p("text", { className: at, ...r, children: [
-      e,
-      " axis label"
-    ] })
-  ] }, `axis-label-${e}`);
-}, _e = (e, t) => {
-  const r = {
-    x: t.width / 2,
-    y: t.height / 2,
-    textAnchor: "middle",
-    dominantBaseline: "middle"
-  };
-  return e === "left" ? (r.x = 0, r.textAnchor = "start") : e === "right" && (r.x = t.width, r.textAnchor = "end"), r;
-}, ke = I[0], we = 0.3, Se = 1, E = {
-  type: "spring",
-  stiffness: 500,
-  damping: 60,
-  mass: 1
-}, Ce = I[0], Ie = 1, Re = 2, it = (e) => e === "catmull-rom" ? It : Rt, st = (e) => {
-  switch (e) {
-    case "dashed":
-      return "8 4";
-    case "dotted":
-      return "2 2";
-    case "solid":
-      return;
-  }
-}, lt = (e, t) => t.lineWidth !== "auto" ? t.lineWidth : J(e) ?? Re, D = (e, t, r) => {
-  const o = vt(e, t);
-  return (n) => {
-    const a = xt(n) ?? "default", i = o(n);
-    return `${r}-${a}${i !== null && i !== "" ? `-${i}` : ""}`;
-  };
-}, z = (e, t) => {
-  const r = X(e);
-  return w(() => {
-    const o = Nt(r.get(), e);
-    ut(0, 1, {
-      ...t,
-      onUpdate: (n) => {
-        const a = o(n);
-        return r.set(a);
-      }
-    });
-  }, [t, e, r]), r;
-};
-var M = "_1wf5x370";
-const Fe = k(function({ layer: t, isAnimated: r }) {
-  const o = t.params, n = st(o.lineType), [a, i] = y(() => {
-    const c = it(o.interpolate), d = (u) => S(tt(u) ?? T(u) ?? 0), g = Ft().x((u) => L(u) ?? 0).y0((u) => S(q(u) ?? 0)).y1(d).curve(c), h = et().x((u) => L(u) ?? 0).y(d).curve(c);
-    if (o.missingValues === "gap") {
-      const u = (v) => L(v) !== null && T(v) !== null;
-      g.defined(u), h.defined(u);
-    }
-    return [h, g];
-  }, [o.interpolate, o.missingValues]), l = y(() => {
-    const c = D(t.data, t.mapping, t.index), d = [];
-    return t.data.groupBy(Q.group).forEach((g) => {
-      let h = [...g];
-      o.missingValues === "connect" && (h = h.filter(
-        (U) => L(U) !== null && T(U) !== null
-      ));
-      const u = i(h), v = a(h);
-      if (!u || !v) return;
-      const m = h[0];
-      if (!m) return;
-      const x = R(m) ?? ke, A = F(m), dt = lt(m, o);
-      d.push({
-        key: c(m),
-        areaPath: u,
-        linePath: v,
-        color: x,
-        fillOpacity: A ?? we,
-        strokeWidth: dt,
-        strokeOpacity: Se,
-        strokeDasharray: n
-      });
-    }), d;
-  }, [i, a, t.data, t.index, t.mapping, o, n]);
-  return /* @__PURE__ */ s(
-    "svg",
-    {
-      viewBox: "0 0 1 1",
-      preserveAspectRatio: "none",
-      width: "100%",
-      height: "100%",
-      "data-geom": "area",
-      className: M,
-      children: l.map((c) => /* @__PURE__ */ s(
-        De,
-        {
-          areaPath: c.areaPath,
-          linePath: c.linePath,
-          color: c.color,
-          fillOpacity: c.fillOpacity,
-          strokeWidth: c.strokeWidth,
-          strokeOpacity: c.strokeOpacity,
-          strokeDasharray: c.strokeDasharray,
-          isAnimated: r
-        },
-        c.key
-      ))
-    }
-  );
-}), De = ({
-  areaPath: e,
-  linePath: t,
-  color: r,
-  fillOpacity: o,
-  strokeWidth: n,
-  strokeOpacity: a,
-  strokeDasharray: i,
-  isAnimated: l
-}) => l ? /* @__PURE__ */ s(
-  Ne,
-  {
-    areaPath: e,
-    linePath: t,
-    color: r,
-    fillOpacity: o,
-    strokeWidth: n,
-    strokeOpacity: a,
-    strokeDasharray: i
-  }
-) : /* @__PURE__ */ p("g", { children: [
-  /* @__PURE__ */ s("path", { d: e, fill: r, fillOpacity: o, stroke: "none" }),
-  /* @__PURE__ */ s(
-    "path",
-    {
-      d: t,
-      fill: "none",
-      stroke: r,
-      strokeWidth: n,
-      strokeOpacity: a,
-      strokeDasharray: i,
-      vectorEffect: "non-scaling-stroke"
-    }
-  )
-] }), Ne = ({
-  areaPath: e,
-  linePath: t,
-  color: r,
-  fillOpacity: o,
-  strokeWidth: n,
-  strokeOpacity: a,
-  strokeDasharray: i
-}) => {
-  const l = z(e, E), c = z(t, E);
-  return /* @__PURE__ */ p("g", { children: [
-    /* @__PURE__ */ s(_.path, { d: l, fill: r, fillOpacity: o, stroke: "none" }),
-    /* @__PURE__ */ s(
-      _.path,
-      {
-        d: c,
-        fill: "none",
-        stroke: r,
-        strokeWidth: n,
-        strokeOpacity: a,
-        strokeDasharray: i,
-        vectorEffect: "non-scaling-stroke"
-      }
-    )
-  ] });
-}, Be = I[0], Pe = 1, j = 4, Me = k(function({ layer: t, isAnimated: r }) {
-  const o = y(() => {
-    const n = D(t.data, t.mapping, t.index), a = [];
-    for (const i of t.data) {
-      const l = n(i), c = bt(i), d = Lt(i), g = q(i), h = tt(i) ?? T(i);
-      if (c === null || d === null || g === null || h === null)
-        continue;
-      const u = R(i), v = F(i);
-      let m = 1 - h, x = h - g;
-      x < 0 && (m += x, x = -x), a.push({
-        key: l,
-        x: c,
-        y: m,
-        width: d - c,
-        height: x,
-        fill: u ?? Be,
-        opacity: v ?? Pe
-      });
-    }
-    return a;
-  }, [t.data, t.index, t.mapping]);
-  return /* @__PURE__ */ s(C, { children: o.map((n) => {
-    const { key: a, ...i } = n;
-    return /* @__PURE__ */ s(Oe, { ...i, isAnimated: r }, a);
-  }) });
-}), Oe = ({ isAnimated: e, ...t }) => e ? /* @__PURE__ */ s(
-  _.rect,
-  {
-    initial: !1,
-    style: { transformBox: "view-box" },
-    transition: E,
-    fill: t.fill,
-    opacity: t.opacity,
-    rx: j,
-    animate: {
-      x: f(t.x),
-      y: f(t.y),
-      width: f(t.width),
-      height: f(t.height),
-      opacity: t.opacity
-    }
-  }
-) : /* @__PURE__ */ s(
-  "rect",
-  {
-    style: { transformBox: "view-box" },
-    x: f(t.x),
-    y: f(t.y),
-    width: f(t.width),
-    height: f(t.height),
-    fill: t.fill,
-    opacity: t.opacity,
-    rx: j
-  }
-), Ge = k(function({ layer: t, isAnimated: r }) {
-  const o = t.params, n = st(o.lineType), a = y(() => {
-    const l = et().x((c) => L(c) ?? 0).y((c) => S(T(c) ?? 0)).curve(it(o.interpolate));
-    return o.missingValues === "gap" && l.defined((c) => L(c) !== null && T(c) !== null), l;
-  }, [o.interpolate, o.missingValues]), i = y(() => {
-    const l = D(t.data, t.mapping, t.index), c = [];
-    return t.data.groupBy(Q.group).forEach((d) => {
-      let g = [...d];
-      o.missingValues === "connect" && (g = g.filter(
-        (A) => L(A) !== null && T(A) !== null
-      ));
-      const h = a(g);
-      if (!h) return;
-      const u = g[0];
-      if (!u) return;
-      const v = R(u) ?? Ce, m = F(u), x = lt(u, o);
-      c.push({
-        key: l(u),
-        pathData: h,
-        color: v,
-        opacity: m ?? Ie,
-        strokeWidth: x,
-        strokeDasharray: n
-      });
-    }), c;
-  }, [a, t.data, t.index, t.mapping, o, n]);
-  return /* @__PURE__ */ s(
-    "svg",
-    {
-      viewBox: "0 0 1 1",
-      preserveAspectRatio: "none",
-      width: "100%",
-      height: "100%",
-      "data-geom": "line",
-      className: M,
-      children: i.map((l) => /* @__PURE__ */ s(
-        ze,
-        {
-          pathData: l.pathData,
-          color: l.color,
-          strokeWidth: l.strokeWidth,
-          opacity: l.opacity,
-          strokeDasharray: l.strokeDasharray,
-          isAnimated: r
-        },
-        l.key
-      ))
-    }
-  );
-}), ze = ({ pathData: e, color: t, strokeWidth: r, opacity: o, strokeDasharray: n, isAnimated: a }) => a ? /* @__PURE__ */ s(
-  We,
-  {
-    pathData: e,
-    color: t,
-    strokeWidth: r,
-    opacity: o,
-    strokeDasharray: n
-  }
-) : /* @__PURE__ */ s(
-  "path",
-  {
-    d: e,
-    fill: "none",
-    stroke: t,
-    strokeWidth: r,
-    opacity: o,
-    strokeDasharray: n,
-    vectorEffect: "non-scaling-stroke"
-  }
-), We = ({
-  pathData: e,
-  color: t,
-  strokeWidth: r,
-  opacity: o,
-  strokeDasharray: n
-}) => {
-  const a = z(e, E);
-  return /* @__PURE__ */ s(
-    _.path,
-    {
-      d: a,
-      fill: "none",
-      stroke: t,
-      strokeWidth: r,
-      opacity: o,
-      strokeDasharray: n,
-      vectorEffect: "non-scaling-stroke"
-    }
-  );
-}, He = I[0], Ue = 1, $e = 8, Ve = "#000000", je = 1, Ye = k(function({ layer: t, isAnimated: r }) {
-  const o = y(() => {
-    const n = D(t.data, t.mapping, t.index), a = [];
-    for (const i of t.data) {
-      const l = L(i), c = T(i);
-      if (l === null || c === null)
-        continue;
-      const d = R(i), g = F(i), h = Tt(i), u = J(i);
-      a.push({
-        key: n(i),
-        cx: l,
-        cy: S(c),
-        radius: (h ?? $e) / 2,
-        fill: d ?? He,
-        stroke: Ve,
-        opacity: g ?? Ue,
-        strokeWidth: u ?? je
-      });
-    }
-    return a;
-  }, [t.data, t.index, t.mapping]);
-  return /* @__PURE__ */ s(C, { children: o.map((n) => r ? /* @__PURE__ */ s(
-    _.circle,
-    {
-      initial: !1,
-      transition: E,
-      fill: n.fill,
-      stroke: n.stroke,
-      strokeWidth: n.strokeWidth,
-      animate: {
-        cx: f(n.cx),
-        cy: f(n.cy),
-        r: n.radius,
-        opacity: n.opacity
-      }
-    },
-    n.key
-  ) : /* @__PURE__ */ s(
-    "circle",
-    {
-      cx: f(n.cx),
-      cy: f(n.cy),
-      r: n.radius,
-      fill: n.fill,
-      opacity: n.opacity,
-      stroke: n.stroke,
-      strokeWidth: n.strokeWidth
-    },
-    n.key
-  )) });
-}), Ke = I[0], Xe = 1, W = Dt(), Y = Math.PI * 2, Ze = k(function({
-  layer: t,
-  isAnimated: r
-}) {
-  const o = O(!1);
-  w(() => {
-    o.current = !0;
-  }, []);
-  const n = y(() => {
-    const a = D(t.data, t.mapping, t.index), i = [];
-    for (const l of t.data) {
-      const c = a(l), d = Et(l), g = At(l), h = _t(l), u = kt(l);
-      d === null || g === null || h === null || u === null || i.push({
-        key: c,
-        startAngle: d,
-        endAngle: g,
-        innerRadius: h,
-        outerRadius: u,
-        fill: R(l) ?? Ke,
-        opacity: F(l) ?? Xe
-      });
-    }
-    return i;
-  }, [t.data, t.index, t.mapping]);
-  return /* @__PURE__ */ s(
-    "svg",
-    {
-      viewBox: "-1 -1 2 2",
-      preserveAspectRatio: "xMidYMid meet",
-      width: "100%",
-      height: "100%",
-      "data-geom": "bar",
-      className: M,
-      children: n.map((a) => {
-        if (r) {
-          const { key: i, ...l } = a;
-          return /* @__PURE__ */ s(Je, { isInitialRender: !o.current, ...l }, i);
-        }
-        return /* @__PURE__ */ s(
-          "path",
-          {
-            d: W({
-              startAngle: a.startAngle,
-              endAngle: a.endAngle,
-              innerRadius: a.innerRadius,
-              outerRadius: a.outerRadius
-            }) ?? void 0,
-            fill: a.fill,
-            opacity: a.opacity
-          },
-          a.key
-        );
-      })
-    }
-  );
-}), Je = ({
-  startAngle: e,
-  endAngle: t,
-  innerRadius: r,
-  outerRadius: o,
-  fill: n,
-  opacity: a,
-  isInitialRender: i
-}) => {
-  const l = i ? e : Y, c = i ? t : Y, d = $(l, E), g = $(c, E), h = X(
-    W({ startAngle: l, endAngle: c, innerRadius: r, outerRadius: o }) ?? ""
-  );
-  return w(() => {
-    d.set(e), g.set(t);
-  }, [d, g, e, t]), w(() => {
-    const u = () => {
-      const x = d.get(), A = g.get();
-      h.set(
-        W({ startAngle: x, endAngle: A, innerRadius: r, outerRadius: o }) ?? ""
-      );
-    }, v = d.on("change", u), m = g.on("change", u);
-    return () => {
-      v(), m();
-    };
-  }, [d, g, r, o, h]), /* @__PURE__ */ s(_.path, { d: h, fill: n, opacity: a, transition: E });
-}, qe = ({ compiled: e, shouldAnimate: t, panelRect: r }) => /* @__PURE__ */ s("svg", { x: r.x, y: r.y, width: r.width, height: r.height, className: M, children: e.layers.map((o, n) => {
-  const a = `layer-${n}`;
-  switch (o.geom) {
-    case "bar":
-      return e.coordSystem.type === "polar" ? /* @__PURE__ */ s(Ze, { layer: o, isAnimated: t }, a) : /* @__PURE__ */ s(Me, { layer: o, isAnimated: t }, a);
-    case "line":
-      return /* @__PURE__ */ s(Ge, { layer: o, isAnimated: t }, a);
-    case "area":
-      return /* @__PURE__ */ s(Fe, { layer: o, isAnimated: t }, a);
-    case "point":
-      return /* @__PURE__ */ s(Ye, { layer: o, isAnimated: t }, a);
-    default:
-      return /* @__PURE__ */ p("text", { children: [
-        o.geom,
-        " not implemented"
-      ] }, a);
-  }
-}) });
-var Qe = "_1ymbsoj0";
-const ct = (e, t) => ({
-  x: e.x - t.x,
-  y: e.y - t.y,
-  width: e.width,
-  height: e.height
-}), K = (e, t) => {
-  const r = {};
-  for (const [o, n] of Object.entries(e))
-    r[o] = ct(n, t);
-  return r;
-}, tr = ({
-  compiled: e,
-  plotRect: t,
-  panelRect: r,
-  axisRects: o,
-  axisLabelRects: n,
-  shouldAnimate: a
-}) => {
-  const i = ct(r, t), l = K(o, t), c = K(n, t);
-  return /* @__PURE__ */ p(
-    "svg",
-    {
-      className: Qe,
-      width: t.width,
-      height: t.height,
-      style: { transform: `translate(${t.x}px, ${t.y}px)` },
-      children: [
-        /* @__PURE__ */ s(Ee, { axisRects: l }),
-        /* @__PURE__ */ s(qe, { compiled: e, shouldAnimate: a, panelRect: i }),
-        /* @__PURE__ */ s(Ae, { axisLabelRects: c })
-      ]
-    }
-  );
-}, er = {
-  titleSize: { width: 0, height: 0 },
-  captionSize: { width: 0, height: 0 }
-}, rr = () => {
-  const e = O(null), t = O(null), [r, o] = Z(er);
-  return ht(() => {
-    const n = () => {
-      const i = e.current?.offsetHeight ?? 0, l = t.current?.offsetHeight ?? 0, c = e.current?.offsetWidth ?? 0, d = t.current?.offsetWidth ?? 0;
-      o((g) => g.titleSize.height === i && g.captionSize.height === l && g.titleSize.width === c && g.captionSize.width === d ? g : {
-        titleSize: { width: c, height: i },
-        captionSize: { width: d, height: l }
-      });
-    };
-    n();
-    const a = new ResizeObserver(n);
-    return e.current && a.observe(e.current), t.current && a.observe(t.current), () => a.disconnect();
-  }, []), { titleRef: e, captionRef: t, measurements: r };
-};
-var nr = "znp3wr0";
-const pr = ({ spec: e, width: t, height: r, isAnimated: o }) => {
-  const n = gt(), a = y(() => wt(e), [e]), { titleRef: i, captionRef: l, measurements: c } = rr(), d = re({
-    spec: a,
-    containerSize: { width: t, height: r },
-    externalMeasurements: c
+var c = (r) => {
+  const t = e(() => a(r.input), [r.input]);
+  return /* @__PURE__ */ o(n, {
+    ...r,
+    input: t
   });
-  return d ? /* @__PURE__ */ p("div", { className: nr, style: { width: t, height: r }, children: [
-    /* @__PURE__ */ s(ie, { ref: i, compiled: a, titleRect: d.title }),
-    /* @__PURE__ */ s(
-      tr,
-      {
-        compiled: a,
-        plotRect: d.plot,
-        panelRect: d.panel,
-        axisRects: d.axes,
-        axisLabelRects: d.axisLabels,
-        shouldAnimate: o ?? !n
-      }
-    ),
-    /* @__PURE__ */ s(oe, { ref: l, compiled: a, captionRect: d.caption }),
-    /* @__PURE__ */ s(Te, { legends: a.guides.legends, rects: d.legends })
-  ] }) : null;
-};
-var or = { white: "var(--graphy-white)", black: "var(--graphy-black)", transparent: "var(--graphy-transparent)", grey100: "var(--graphy-grey-100)", grey95: "var(--graphy-grey-95)", grey90: "var(--graphy-grey-90)", grey85: "var(--graphy-grey-85)", grey80: "var(--graphy-grey-80)", grey75: "var(--graphy-grey-75)", grey70: "var(--graphy-grey-70)", grey60: "var(--graphy-grey-60)", grey50: "var(--graphy-grey-50)", grey0: "var(--graphy-grey-0)", greyGradient80: "var(--graphy-grey-gradient-80)", green60: "var(--graphy-green-60)", green50: "var(--graphy-green-50)", red60: "var(--graphy-red-60)", red50: "var(--graphy-red-50)", amber70: "var(--graphy-amber-70)", amber50: "var(--graphy-amber-50)", amber40: "var(--graphy-amber-40)", amber30: "var(--graphy-amber-30)", blue80: "var(--graphy-blue-80)", blue60: "var(--graphy-blue-60)", purple50: "var(--graphy-purple-50)", purple30: "var(--graphy-purple-30)", brand: "var(--graphy-brand)", success: "var(--graphy-success)", warning: "var(--graphy-warning)", alert: "var(--graphy-alert)", textPrimary: "var(--graphy-text-primary)", textSecondary: "var(--graphy-text-secondary)", textDisabled: "var(--graphy-text-disabled)", iconPrimary: "var(--graphy-icon-primary)", iconSecondary: "var(--graphy-icon-secondary)", iconStickerBackground: "var(--graphy-icon-sticker-background)", border100: "var(--graphy-border-100)", border10: "var(--graphy-border-10)", sunkenBackground: "var(--graphy-sunken-background)", defaultBackground: "var(--graphy-default-background)", raisedBackground: "var(--graphy-raised-background)", overlayBackground: "var(--graphy-overlay-background)", overlayBorderGradient: "var(--graphy-overlay-border-gradient)", graphBackground: "var(--graphy-graph-background)", gridLineColor: "var(--graphy-grid-line-color)", hoverGuideLineColor: "var(--graphy-hover-guide-line-color)", originLineColor: "var(--graphy-origin-line-color)", targetLineColor: "var(--graphy-target-line-color)", targetLineMarkerColor: "var(--graphy-target-line-marker-color)", legendBackground: "var(--graphy-legend-background)", legendBorderColor: "var(--graphy-legend-border-color)", legendTextColor: "var(--graphy-legend-text-color)", dimmedSeriesLabelTextColor: "var(--graphy-dimmed-series-label-text-color)", dimmedSeriesLabelLineColor: "var(--graphy-dimmed-series-label-line-color)", trendNegativeColor: "var(--graphy-trend-negative-color)", trendPositiveColor: "var(--graphy-trend-positive-color)", tooltipBackground: "var(--graphy-tooltip-background)", tooltipBorderColor: "var(--graphy-tooltip-border-color)", tooltipHeadingTextColor: "var(--graphy-tooltip-heading-text-color)", tooltipLabelTextColor: "var(--graphy-tooltip-label-text-color)", tooltipValueTextColor: "var(--graphy-tooltip-value-text-color)", heatmapEmptyTileBackground: "var(--graphy-heatmap-empty-tile-background)", stackedBarHoverBorderColor: "var(--graphy-stacked-bar-hover-border-color)", defaultArrowAnnotationColor: "var(--graphy-default-arrow-annotation-color)", annotationFrameBorderColor: "var(--graphy-annotation-frame-border-color)", annotationMenuTriggerIconColor: "var(--graphy-annotation-menu-trigger-icon-color)", fontFamilyDefault: "var(--graphy-font-family-default)", fontFamilyHeading: "var(--graphy-font-family-heading)", fontWeightRegular: "var(--graphy-font-weight-regular)", fontWeightMedium: "var(--graphy-font-weight-medium)", fontWeightSemibold: "var(--graphy-font-weight-semibold)", fontWeightBold: "var(--graphy-font-weight-bold)", fontXxs: "var(--graphy-font-xxs)", fontXs: "var(--graphy-font-xs)", fontSm: "var(--graphy-font-sm)", fontMd: "var(--graphy-font-md)", fontLg: "var(--graphy-font-lg)", fontXl: "var(--graphy-font-xl)", fontEditorBody: "var(--graphy-font-editor-body)", fontHeadingSm: "var(--graphy-font-heading-sm)", fontHeadingMd: "var(--graphy-font-heading-md)", fontHeadingLg: "var(--graphy-font-heading-lg)", fontTickLabel: "var(--graphy-font-tick-label)", fontAxisLabel: "var(--graphy-font-axis-label)", fontDataLabel: "var(--graphy-font-data-label)", fontStackTotal: "var(--graphy-font-stack-total)", fontLegendLabel: "var(--graphy-font-legend-label)", fontSeriesLabel: "var(--graphy-font-series-label)", fontTooltipLabel: "var(--graphy-font-tooltip-label)", fontTooltipHeading: "var(--graphy-font-tooltip-heading)", fontTooltipFooter: "var(--graphy-font-tooltip-footer)", fontJumboTooltipLabel: "var(--graphy-font-jumbo-tooltip-label)", fontJumboTooltip: "var(--graphy-font-jumbo-tooltip)", fontMiniTooltipLabel: "var(--graphy-font-mini-tooltip-label)", fontMiniTooltipFooter: "var(--graphy-font-mini-tooltip-footer)", fontTooltipCaption: "var(--graphy-font-tooltip-caption)", fontTooltipCaptionSmall: "var(--graphy-font-tooltip-caption-small)", fontTrendTag: "var(--graphy-font-trend-tag)", fontTrendTagSmall: "var(--graphy-font-trend-tag-small)", fontGoalLineLabel: "var(--graphy-font-goal-line-label)", fontPieLabel: "var(--graphy-font-pie-label)", fontPieChartTotal: "var(--graphy-font-pie-chart-total)", fontDifferenceArrowSmall: "var(--graphy-font-difference-arrow-small)", fontDifferenceArrowMedium: "var(--graphy-font-difference-arrow-medium)", fontDifferenceArrowLarge: "var(--graphy-font-difference-arrow-large)", fontButton: "var(--graphy-font-button)", fontInput: "var(--graphy-font-input)", fontInputLabel: "var(--graphy-font-input-label)", fontSelectLabel: "var(--graphy-font-select-label)", fontSelectDescription: "var(--graphy-font-select-description)", fontColorSelectLabel: "var(--graphy-font-color-select-label)", fontMenuTitle: "var(--graphy-font-menu-title)", fontMenuGroupTitle: "var(--graphy-font-menu-group-title)", fontMenuItemLabel: "var(--graphy-font-menu-item-label)", fontMenuItemLabelSecondary: "var(--graphy-font-menu-item-label-secondary)", fontUITooltip: "var(--graphy-font-uitooltip)", fontUITooltipSecondary: "var(--graphy-font-uitooltip-secondary)", fontErrorBoundaryTitle: "var(--graphy-font-error-boundary-title)", fontErrorBoundaryMessage: "var(--graphy-font-error-boundary-message)", fontTableCell: "var(--graphy-font-table-cell)", fontTableHeaderCell: "var(--graphy-font-table-header-cell)", fontSourceLabel: "var(--graphy-font-source-label)", fontSourceLink: "var(--graphy-font-source-link)", fontTextEditorH1: "var(--graphy-font-text-editor-h1)", fontTextEditorH2: "var(--graphy-font-text-editor-h2)", fontTextEditorH3: "var(--graphy-font-text-editor-h3)", fontTextEditorH6: "var(--graphy-font-text-editor-h6)", fontTextEditorBody: "var(--graphy-font-text-editor-body)", fontTextEditorLink: "var(--graphy-font-text-editor-link)", fontHighlightModeTitle: "var(--graphy-font-highlight-mode-title)", fontHighlightModeSubtitle: "var(--graphy-font-highlight-mode-subtitle)" }, ar = "_1rkj4kp0", fr = "_1rkj4kp1";
-const yr = ({ theme: e, children: t, className: r, style: o }) => {
-  const n = y(() => {
-    if (!e) return o;
-    const a = {};
-    for (const [i, l] of Object.entries(e))
-      l !== void 0 && (a[or[i]] = l);
-    return { ...o, ...Bt(a) };
-  }, [e, o]);
-  return /* @__PURE__ */ s("div", { className: St(ar, r), style: n, children: t });
 };
 export {
-  H as CanvasTextMeasurer,
-  pr as GraphRenderer,
-  yr as ThemeProvider,
-  fr as darkTheme,
-  Wt as useTextMeasurer,
-  or as vars
+  c as GraphProvider
 };