@graphysdk/react-renderer 2.0.0-beta.1788529798467 → 2.0.0-beta.1788534616557

package/dist/{history-chords-BCaeGipa.js → history-chords-WjboHZs5.js}

@@ -1,11 +1,11 @@
-import { a as Vr, c as oa, f as x, i as aa, l as Ur, n as Qr, o as ia, r as sa, s as Yr, t as la, u as Kr } from "./dev.utils-CzXWvwtn.js";
-import { ANNOTATION_TOOLTIP_MARKER_GAP as ca, AXIS_KEYS as Vt, CachedTextMeasurer as ur, DATA_LABEL_POSITIONS as da, DATA_LABEL_ROLES as ua, DEFAULT_GEOM_COLOR as zr, DEFAULT_HOVER_AFFORDANCE_COLOR as vt, GROUP_VARIABLES as ce, HeuristicTextMeasurer as ha, HoverEngine as va, InternalError as ga, LayoutCompiler as fa, POLAR_RIM_LABEL_GAP_PX as pa, RESTING_HOVER_STATE as st, TAU as hr, alignUnitFractions as jr, areAnchorsEqual as ma, areEditMenuTriggersEqual as Aa, areEndpointsComparable as vr, arePointerRegionListsEqual as ya, buildAverageLineSymbols as xa, buildCalloutHitRegions as ba, buildColumnKey as Ut, buildDataLabelsContent as wa, buildFontString as Sa, buildLayerIntroPlan as ka, buildLayerYValueFormatter as Ra, buildPinnedNumberValueFormatter as Ca, buildPolarBarArcPath as ge, buildSliceGroupKey as Qt, buildTooltipContent as Ea, compositeColor as Pa, computeArrow as Ba, computeDifferenceArrow as Ia, computeDirectLabelsLayout as Ta, computeLineBoxHeight as fe, computePanelBorderPaths as La, computePanelBorderSizes as Na, countLayerGeoms as Ma, createAreaPathGenerators as Xr, createHeadlineItemRows as qr, createLineFillAreaGenerator as Fa, createLinePathGenerator as Jr, createSegmentYReader as Da, createStableCellKeyGenerator as Ha, createStableKeyGenerator as oe, createStyleResolver as gt, findAnnotation as Oa, findPointerRegion as gr, formatHeadline as Ga, formatLegends as Wa, formatRuleValue as Va, getAestheticFromScaleAestheticKey as Ce, getAlpha as Zr, getAngleExtent as Yt, getBarRectBounds as Ke, getBoundingRect as $r, getChromeDashArray as ft, getColor as _r, getDashArray as Ee, getDifferenceArrowLabelBox as Ua, getGroup as pt, getHoverGuideLineProps as Qa, getHoverGuideRectProps as Ya, getInsetTileRect as en, getPolarHoverGuideArcProps as Ka, getRadiusExtent as mt, getRuleDashPattern as za, getShapeAnnotationStroke as ja, getSize as Xa, getStackRole as qa, getUnionExtent as Ja, getX as q, getXMax as Za, getY as te, getYMax as tn, isAnnotationMovable as $a, isDefined as rn, isFullTurnSweep as nn, isSafeUrl as Kt, orderPointerRegions as _a, paintsInDonutHole as ei, pickReadableTextColor as on, placeCallouts as ti, polarToUnit as ri, positionToAngle as ni, prepareAreaObservations as an, prepareLineObservations as sn, projectAnchorToPanel as Qe, projectRegionToPanel as zt, readAnchoredObservation as oi, resolveArrowAnnotationStyle as ai, resolveArrowColor as ii, resolveAxisLabelStyle as si, resolveBarBorderRadiusPx as ln, resolveBarBorderTreatment as ze, resolveBarCornerRadiiPx as li, resolveCalloutAnnotationStyle as ci, resolveDataLabelStyle as di, resolveDeferredAnchors as ui, resolveDifferenceArrowAnnotationStyle as hi, resolveDirectLabelStyle as vi, resolveGraphChromeStyle as cn, resolveGridLineStyle as Lt, resolveHeadlineFigure as dn, resolveHeadlineItemStyle as at, resolveHeadlinePlacement as gi, resolveHeadlineStyle as un, resolveImageAnnotationStyle as fi, resolveLegendItemStyle as pi, resolveLegendStyle as mi, resolvePanelBorderStyle as hn, resolvePolarBarCornerRadiusUnit as vn, resolveRuleLabelStyle as Ai, resolveShapeAnnotationStyle as gn, resolveTextAnnotationStyle as yi, resolveTickLabelStyle as xi, resolveTickLineStyle as bi, resolveTooltipStyle as wi, toFontSpec as K, toPanelCursor as Si, toPercent as S, toViewBoxX as fn, toViewBoxY as pn, truncateToWidth as ki } from "@graphysdk/viz-engine";
-import { Fragment as jt, createContext as U, memo as Z, useCallback as se, useContext as D, useEffect as F, useId as V, useMemo as A, useRef as I, useState as G, useSyncExternalStore as Ri } from "react";
-import { Fragment as B, jsx as s, jsxs as b } from "react/jsx-runtime";
+import { a as Vr, c as oa, f as y, i as aa, l as Ur, n as Qr, o as ia, r as sa, s as Yr, t as la, u as Kr } from "./dev.utils-CzXWvwtn.js";
+import { ANNOTATION_TOOLTIP_MARKER_GAP as ca, AXIS_KEYS as Vt, CachedTextMeasurer as ur, DATA_LABEL_POSITIONS as da, DATA_LABEL_ROLES as ua, DEFAULT_GEOM_COLOR as zr, DEFAULT_HOVER_AFFORDANCE_COLOR as vt, GROUP_VARIABLES as ce, HeuristicTextMeasurer as ha, HoverEngine as va, InternalError as ga, LayoutCompiler as fa, POLAR_RIM_LABEL_GAP_PX as pa, RESTING_HOVER_STATE as st, TAU as hr, alignUnitFractions as jr, areAnchorsEqual as ma, areEditMenuTriggersEqual as Aa, areEndpointsComparable as vr, arePointerRegionListsEqual as ya, buildAverageLineSymbols as xa, buildCalloutHitRegions as ba, buildColumnKey as Ut, buildDataLabelsContent as wa, buildFontString as Sa, buildLayerIntroPlan as ka, buildLayerYValueFormatter as Ra, buildPinnedNumberValueFormatter as Ca, buildPolarBarArcPath as ge, buildSliceGroupKey as Qt, buildTooltipContent as Ea, compositeColor as Pa, computeArrow as Ba, computeDifferenceArrow as Ia, computeDirectLabelsLayout as Ta, computeLineBoxHeight as fe, computePanelBorderPaths as La, computePanelBorderSizes as Na, countLayerGeoms as Ma, createAreaPathGenerators as Xr, createHeadlineItemRows as qr, createLineFillAreaGenerator as Fa, createLinePathGenerator as Jr, createSegmentYReader as Da, createStableCellKeyGenerator as Ha, createStableKeyGenerator as oe, createStyleResolver as gt, findAnnotation as Oa, findPointerRegion as gr, formatHeadline as Ga, formatLegends as Wa, formatRuleValue as Va, getAestheticFromScaleAestheticKey as Ce, getAlpha as Zr, getAngleExtent as Yt, getBarRectBounds as Ke, getBoundingRect as $r, getChromeDashArray as ft, getColor as _r, getDashArray as Ee, getDifferenceArrowLabelBox as Ua, getGroup as pt, getHoverGuideLineProps as Qa, getHoverGuideRectProps as Ya, getInsetTileRect as en, getPolarHoverGuideArcProps as Ka, getRadiusExtent as mt, getRuleDashPattern as za, getShapeAnnotationStroke as ja, getSize as Xa, getStackRole as qa, getUnionExtent as Ja, getX as q, getXMax as Za, getY as te, getYMax as tn, isAnnotationMovable as $a, isDefined as rn, isFullTurnSweep as nn, isSafeUrl as Kt, orderPointerRegions as _a, paintsInDonutHole as ei, pickReadableTextColor as on, placeCallouts as ti, polarToUnit as ri, positionToAngle as ni, prepareAreaObservations as an, prepareLineObservations as sn, projectAnchorToPanel as Qe, projectRegionToPanel as zt, readAnchoredObservation as oi, resolveArrowAnnotationStyle as ai, resolveArrowColor as ii, resolveAxisLabelStyle as si, resolveBarBorderRadiusPx as ln, resolveBarBorderTreatment as ze, resolveBarCornerRadiiPx as li, resolveCalloutAnnotationStyle as ci, resolveDataLabelStyle as di, resolveDeferredAnchors as ui, resolveDifferenceArrowAnnotationStyle as hi, resolveDirectLabelStyle as vi, resolveGraphChromeStyle as cn, resolveGridLineStyle as Lt, resolveHeadlineFigure as dn, resolveHeadlineItemStyle as at, resolveHeadlinePlacement as gi, resolveHeadlineStyle as un, resolveImageAnnotationStyle as fi, resolveLegendItemStyle as pi, resolveLegendStyle as mi, resolvePanelBorderStyle as hn, resolvePolarBarCornerRadiusUnit as vn, resolveRuleLabelStyle as Ai, resolveShapeAnnotationStyle as gn, resolveTextAnnotationStyle as yi, resolveTickLabelStyle as xi, resolveTickLineStyle as bi, resolveTooltipStyle as wi, toFontSpec as z, toPanelCursor as Si, toPercent as k, toViewBoxX as fn, toViewBoxY as pn, truncateToWidth as ki } from "@graphysdk/viz-engine";
+import { Fragment as jt, createContext as Q, memo as Z, useCallback as se, useContext as D, useEffect as F, useId as U, useMemo as A, useRef as T, useState as G, useSyncExternalStore as Ri } from "react";
+import { Fragment as B, jsx as s, jsxs as w } from "react/jsx-runtime";
 import { useStore as je } from "zustand";
 import { animate as ie, motion as H, useMotionValue as _, useReducedMotion as Ci, useTransform as tt } from "motion/react";
 import { interpolatePath as Ei } from "d3-interpolate-path";
-import { useShallow as z } from "zustand/react/shallow";
+import { useShallow as j } from "zustand/react/shallow";
 import { parseFontLength as Pi, parseFontWeight as Bi, parseUnitlessLineHeight as Ii } from "@graphysdk/viz-engine/graph-config";
 import { createStore as mn } from "zustand/vanilla";
 import { createPortal as An } from "react-dom";
@@ -24,21 +24,21 @@ import './history-chords.css';var fr = Object.defineProperty, Mi = (e, t) => {
     });
   return t || fr(r, Symbol.toStringTag, { value: "Module" }), r;
 };
-typeof window < "u" && (window.__GRAPHY_SDK__ ??= {}, window.__GRAPHY_SDK__.reactRenderer = "2.0.0-beta.1788529798467");
-var bn = U(null), j = () => {
+typeof window < "u" && (window.__GRAPHY_SDK__ ??= {}, window.__GRAPHY_SDK__.reactRenderer = "2.0.0-beta.1788534616557");
+var bn = Q(null), W = () => {
   const e = D(bn);
   if (!e) throw new Error("useGraph* hooks must be used inside a <GraphProvider>");
   return e;
 }, C = (e) => {
-  const { store: t } = j();
+  const { store: t } = W();
   return je(t, (r) => e(r.compiled));
 };
-function N(e) {
-  const { colorScheme: t } = j();
+function I(e) {
+  const { colorScheme: t } = W();
   return A(() => gt({ colorScheme: t }).geomReaders(e), [e, t]);
 }
 var wn = (e) => {
-  const { colorScheme: t } = j(), r = C((n) => n.layers);
+  const { colorScheme: t } = W(), r = C((n) => n.layers);
   return A(() => {
     const n = r.find((o) => o.id === e);
     return n === void 0 ? null : gt({ colorScheme: t }).geomReaders(n);
@@ -48,7 +48,7 @@ var wn = (e) => {
     t
   ]);
 }, Sn = () => {
-  const { colorScheme: e } = j(), t = C((r) => r.layers);
+  const { colorScheme: e } = W(), t = C((r) => r.layers);
   return A(() => {
     const r = gt({ colorScheme: e });
     return (n) => {
@@ -88,8 +88,8 @@ var wn = (e) => {
   if (!e.anchored) return null;
   const n = r?.get("color", e.observation) ?? zr, o = (Zr(e.observation) ?? 1) * Hi, a = (r?.get("size", e.observation) ?? 8) / 2, i = r?.get("borderColor", e.observation, "hovered") ?? vt, l = t(e.x, e.y);
   return /* @__PURE__ */ s("circle", {
-    cx: S(l.x),
-    cy: S(l.y),
+    cx: k(l.x),
+    cy: k(l.y),
     r: a,
     fill: n,
     opacity: o,
@@ -118,7 +118,7 @@ var wn = (e) => {
     e,
     r
   ]), r;
-}, Rn = ({ shouldAnimateTransitions: e, ...t }) => e ? /* @__PURE__ */ s(Wi, { ...t }) : /* @__PURE__ */ s(Gi, { ...t }), Gi = ({ fillPath: e, linePath: t, fill: r, fillOpacity: n, stroke: o, strokeWidth: a, strokeOpacity: i, strokeDasharray: l }) => /* @__PURE__ */ b("g", { children: [/* @__PURE__ */ s("path", {
+}, Rn = ({ shouldAnimateTransitions: e, ...t }) => e ? /* @__PURE__ */ s(Wi, { ...t }) : /* @__PURE__ */ s(Gi, { ...t }), Gi = ({ fillPath: e, linePath: t, fill: r, fillOpacity: n, stroke: o, strokeWidth: a, strokeOpacity: i, strokeDasharray: l }) => /* @__PURE__ */ w("g", { children: [/* @__PURE__ */ s("path", {
   d: e,
   fill: r,
   fillOpacity: n,
@@ -133,7 +133,7 @@ var wn = (e) => {
   vectorEffect: "non-scaling-stroke"
 })] }), Wi = ({ fillPath: e, linePath: t, fill: r, fillOpacity: n, stroke: o, strokeWidth: a, strokeOpacity: i, strokeDasharray: l }) => {
   const c = Dt(e, ne), u = Dt(t, ne);
-  return /* @__PURE__ */ b("g", { children: [/* @__PURE__ */ s(H.path, {
+  return /* @__PURE__ */ w("g", { children: [/* @__PURE__ */ s(H.path, {
     d: c,
     fill: r,
     fillOpacity: n,
@@ -169,8 +169,8 @@ var wn = (e) => {
       return 0;
   }
 }, pr = 1.1, mr = 1.5, Cn = ({ intro: e, children: t }) => {
-  const r = V();
-  return /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("clipPath", {
+  const r = U();
+  return /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("clipPath", {
     id: r,
     children: /* @__PURE__ */ s(H.rect, {
       ...Ki(e.axis),
@@ -193,23 +193,23 @@ var wn = (e) => {
   initial: { height: 0 },
   animate: { height: pr }
 }, zi = Z(function({ layer: t, coordSystem: r, shouldAnimateTransitions: n, intro: o }) {
-  const a = o?.type === "wipe" ? o : null, { lineGenerator: i, areaGenerator: l } = A(() => Xr(r, t.params), [t.params, r]), c = N(t), u = A(() => {
+  const a = o?.type === "wipe" ? o : null, { lineGenerator: i, areaGenerator: l } = A(() => Xr(r, t.params), [t.params, r]), c = I(t), u = A(() => {
     const d = oe(t.data, t.mapping, t.id), v = [];
     return t.data.groupBy(ce.group).forEach((g) => {
       const h = an([...g], t.params.missingValues), f = l(h), m = i(h);
       if (!f || !m) return;
       const p = h[0];
       if (!p) return;
-      const y = c.get("color", p), w = c.get("strokeWidth", p), k = Ee(c.get("lineType", p));
+      const x = c.get("color", p), b = c.get("strokeWidth", p), R = Ee(c.get("lineType", p));
       v.push({
         key: d(p),
         areaPath: f,
         linePath: m,
-        color: y,
+        color: x,
         fillOpacity: c.get("alpha", p),
-        strokeWidth: w,
+        strokeWidth: b,
         strokeOpacity: c.get("strokeAlpha", p),
-        strokeDasharray: k
+        strokeDasharray: R
       });
     }), v;
   }, [
@@ -255,8 +255,8 @@ var wn = (e) => {
 }), Xi = "_324dw20", Rt = 1, qi = 2, Ji = 1, Zi = 12 / 2, $i = 2.25, Pe = ({ hit: e, project: t = Xt, ...r }) => {
   const n = wn(e.layerId);
   if (!e.anchored) return null;
-  const o = n?.get("color", e.observation) ?? zr, a = Zr(e.observation) ?? 1, i = n?.get("borderColor", e.observation, "hovered") ?? vt, l = t(e.x, e.y), c = S(l.x), u = S(l.y), d = _i(e.observation), v = d + Rt / 2 + Ji + Rt / 2;
-  return /* @__PURE__ */ b("g", {
+  const o = n?.get("color", e.observation) ?? zr, a = Zr(e.observation) ?? 1, i = n?.get("borderColor", e.observation, "hovered") ?? vt, l = t(e.x, e.y), c = k(l.x), u = k(l.y), d = _i(e.observation), v = d + Rt / 2 + Ji + Rt / 2;
+  return /* @__PURE__ */ w("g", {
     ...r,
     className: Xi,
     children: [/* @__PURE__ */ s("circle", {
@@ -280,7 +280,7 @@ var wn = (e) => {
   const t = Xa(e);
   return rn(t) ? t / $i : Zi;
 }, es = ({ layer: e, coordSystem: t, primary: r, companions: n }) => {
-  const o = N(e), a = pt(r.observation), i = A(() => an([...e.data.filter(ce.group, "eq", a)], e.params.missingValues), [
+  const o = I(e), a = pt(r.observation), i = A(() => an([...e.data.filter(ce.group, "eq", a)], e.params.missingValues), [
     e.data,
     e.params.missingValues,
     a
@@ -297,10 +297,10 @@ var wn = (e) => {
   ]);
   if (!l || !c) return null;
   const u = o.get("color", r.observation), d = o.get("alpha", r.observation), v = o.get("strokeWidth", r.observation), g = Ee(o.get("lineType", r.observation));
-  return /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w("g", {
     "data-testid": "hovered-area",
     children: [
-      /* @__PURE__ */ b("svg", {
+      /* @__PURE__ */ w("svg", {
         viewBox: "0 0 1 1",
         preserveAspectRatio: "none",
         width: "100%",
@@ -364,13 +364,13 @@ var wn = (e) => {
     };
   }
 }, Ht = (e, t, r) => {
-  const n = r === void 0 ? e.activeIntro : r, o = I(n ? Jt(n, t) : null), a = I(e.shouldAnimateTransitions);
+  const n = r === void 0 ? e.activeIntro : r, o = T(n ? Jt(n, t) : null), a = T(e.shouldAnimateTransitions);
   return a.current = e.shouldAnimateTransitions, se(() => {
     const i = o.current;
     return o.current = null, i ?? qt(a.current);
   }, []);
 }, At = (e, t) => {
-  const r = I(!0);
+  const r = T(!0);
   F(() => {
     r.current = !1;
   }, []);
@@ -401,7 +401,7 @@ var wn = (e) => {
   width: e.width,
   height: 0
 }, rs = Z(function({ layer: t, coordSystem: r, shouldAnimateTransitions: n, intro: o }) {
-  const a = V(), i = N(t), l = At(o?.type === "grow" && (o.growAxis === "x" || o.growAxis === "y") ? o : null, n);
+  const a = U(), i = I(t), l = At(o?.type === "grow" && (o.growAxis === "x" || o.growAxis === "y") ? o : null, n);
   return /* @__PURE__ */ s(B, { children: A(() => {
     const c = oe(t.data, t.mapping, t.id), u = /* @__PURE__ */ new Map();
     for (const d of t.data) {
@@ -473,7 +473,7 @@ var wn = (e) => {
     const [v] = n;
     if (!v) return null;
     const { key: g, ...h } = v;
-    return /* @__PURE__ */ b(B, { children: [d, /* @__PURE__ */ s("g", {
+    return /* @__PURE__ */ w(B, { children: [d, /* @__PURE__ */ s("g", {
       clipPath: `url(#${r})`,
       children: /* @__PURE__ */ s(lt, {
         ...h,
@@ -484,7 +484,7 @@ var wn = (e) => {
       }, g)
     })] });
   }
-  return /* @__PURE__ */ b(B, { children: [d, /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w(B, { children: [d, /* @__PURE__ */ w("g", {
     clipPath: `url(#${r})`,
     children: [n.map((v) => {
       const { key: g, ...h } = v;
@@ -520,7 +520,7 @@ var wn = (e) => {
   });
   if (n.length === 1) {
     const [h] = n;
-    return /* @__PURE__ */ b(B, { children: [g, /* @__PURE__ */ s("g", {
+    return /* @__PURE__ */ w(B, { children: [g, /* @__PURE__ */ s("g", {
       clipPath: `url(#${r})`,
       children: /* @__PURE__ */ s(H.rect, {
         ...v,
@@ -531,7 +531,7 @@ var wn = (e) => {
       })
     })] });
   }
-  return /* @__PURE__ */ b(B, { children: [g, /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w(B, { children: [g, /* @__PURE__ */ w("g", {
     clipPath: `url(#${r})`,
     children: [n.map((h) => {
       const { key: f, ...m } = h;
@@ -556,10 +556,10 @@ var wn = (e) => {
     const d = c ? En(i, c) : null;
     return /* @__PURE__ */ s(H.rect, {
       initial: d ? {
-        x: S(d.x),
-        y: S(d.y),
-        width: S(d.width),
-        height: S(d.height),
+        x: k(d.x),
+        y: k(d.y),
+        width: k(d.width),
+        height: k(d.height),
         opacity: i.opacity
       } : !1,
       style: { transformBox: "view-box" },
@@ -571,20 +571,20 @@ var wn = (e) => {
       stroke: o,
       strokeWidth: a,
       animate: {
-        x: S(i.x),
-        y: S(i.y),
-        width: S(i.width),
-        height: S(i.height),
+        x: k(i.x),
+        y: k(i.y),
+        width: k(i.width),
+        height: k(i.height),
         opacity: i.opacity
       }
     });
   }
   return /* @__PURE__ */ s("rect", {
     style: { transformBox: "view-box" },
-    x: S(i.x),
-    y: S(i.y),
-    width: S(i.width),
-    height: S(i.height),
+    x: k(i.x),
+    y: k(i.y),
+    width: k(i.width),
+    height: k(i.height),
     fill: i.fill,
     opacity: i.opacity,
     rx: r,
@@ -593,10 +593,10 @@ var wn = (e) => {
     strokeWidth: a
   });
 }, Ar = ({ bounds: e, radii: t, fill: r, stroke: n, strokeWidth: o, opacity: a }) => /* @__PURE__ */ s("rect", {
-  x: S(e.x),
-  y: S(e.y),
-  width: S(e.width),
-  height: S(e.height),
+  x: k(e.x),
+  y: k(e.y),
+  width: k(e.width),
+  height: k(e.height),
   rx: t.rx,
   ry: t.ry,
   fill: r,
@@ -626,17 +626,17 @@ var wn = (e) => {
     e.height,
     c
   ]), {
-    x: tt(o, S),
-    y: tt(a, S),
-    width: tt(i, S),
-    height: tt(l, S)
+    x: tt(o, k),
+    y: tt(a, k),
+    width: tt(i, k),
+    height: tt(l, k)
   };
 };
 function is(e) {
   const t = li(e);
   if (e.borderRadius !== "full") return t;
   const r = {};
-  return t.rx !== void 0 && (r.rx = S(t.rx)), t.ry !== void 0 && (r.ry = S(t.ry)), r;
+  return t.rx !== void 0 && (r.rx = k(t.rx)), t.ry !== void 0 && (r.ry = k(t.ry)), r;
 }
 var ss = "_1suo8ub0", Pn = (e, t, r) => {
   const n = /* @__PURE__ */ new Map();
@@ -686,14 +686,14 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
     "Z"
   ].join("");
 }, ls = ({ observation: e, mainAxis: t, styleReaders: r, column: n, panelRect: o }) => {
-  const a = V(), i = V(), l = Ke(t, e);
+  const a = U(), i = U(), l = Ke(t, e);
   if (!l) return null;
   const c = ct(l, o), u = ct(n.bounds, o), { borderColor: d, borderWidth: v, borderRadius: g, borderAlpha: h } = n.style, f = ln({
     borderRadius: g,
     mainAxis: t,
     bounds: u
-  }), m = ke(c, 0), p = ke(u, f), y = r.get("color", e), w = r.get("alpha", e), k = ze(v);
-  return /* @__PURE__ */ b("g", {
+  }), m = ke(c, 0), p = ke(u, f), x = r.get("color", e), b = r.get("alpha", e), R = ze(v);
+  return /* @__PURE__ */ w("g", {
     clipPath: `url(#${a})`,
     children: [
       /* @__PURE__ */ s("clipPath", {
@@ -704,32 +704,32 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
         id: i,
         children: /* @__PURE__ */ s("path", { d: p })
       }),
-      /* @__PURE__ */ b("g", {
+      /* @__PURE__ */ w("g", {
         clipPath: `url(#${i})`,
         children: [/* @__PURE__ */ s("path", {
           d: m,
-          fill: y,
-          opacity: w,
+          fill: x,
+          opacity: b,
           "data-testid": "highlight-bar-segment"
-        }), d !== void 0 && /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("path", {
+        }), d !== void 0 && /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("path", {
           d: m,
           fill: "none",
           stroke: d,
-          strokeWidth: k.separatorWidth,
-          opacity: w,
+          strokeWidth: R.separatorWidth,
+          opacity: b,
           "data-testid": "highlight-bar-segment-border"
         }), /* @__PURE__ */ s("path", {
           d: p,
           fill: "none",
           stroke: d,
-          strokeWidth: k.outlineWidth,
+          strokeWidth: R.outlineWidth,
           opacity: h
         })] })]
       })
     ]
   });
 }, cs = ({ layer: e, sourceLayer: t, coordSystem: r, panelRect: n }) => {
-  const o = N(t), a = A(() => Pn(t, r.mainAxis, o), [
+  const o = I(t), a = A(() => Pn(t, r.mainAxis, o), [
     t,
     r.mainAxis,
     o
@@ -746,18 +746,18 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
   }
   return l;
 }, Ct = 3, ds = ({ layer: e, coordSystem: t, primary: r, panelRect: n }) => {
-  const o = N(e), a = V(), i = V(), l = V(), c = A(() => Pn(e, t.mainAxis, o), [
+  const o = I(e), a = U(), i = U(), l = U(), c = A(() => Pn(e, t.mainAxis, o), [
     e,
     t.mainAxis,
     o
   ]), u = Ke(t.mainAxis, r.observation), d = Bn(c, t.mainAxis, o, r.observation);
   if (!u || d === null) return null;
-  const v = ct(u, n), g = ct(d.bounds, n), { borderColor: h, borderWidth: f, borderRadius: m, borderAlpha: p } = d.style, y = ln({
+  const v = ct(u, n), g = ct(d.bounds, n), { borderColor: h, borderWidth: f, borderRadius: m, borderAlpha: p } = d.style, x = ln({
     borderRadius: m,
     mainAxis: t.mainAxis,
     bounds: g
-  }), w = ke(v, 0), k = ke(g, y), R = ke(yr(v, Ct), 0), P = ke(yr(g, Ct), y > 0 ? y + Ct : 0), E = o.get("color", r.observation), L = o.get("alpha", r.observation), M = o.get("borderColor", r.observation, "hovered") ?? vt, W = ze(f);
-  return /* @__PURE__ */ b("g", {
+  }), b = ke(v, 0), R = ke(g, x), S = ke(yr(v, Ct), 0), P = ke(yr(g, Ct), x > 0 ? x + Ct : 0), E = o.get("color", r.observation), N = o.get("alpha", r.observation), M = o.get("borderColor", r.observation, "hovered") ?? vt, V = ze(f);
+  return /* @__PURE__ */ w("g", {
     "data-testid": "hovered-bar",
     children: [
       /* @__PURE__ */ s("clipPath", {
@@ -766,18 +766,18 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
       }),
       /* @__PURE__ */ s("clipPath", {
         id: i,
-        children: /* @__PURE__ */ s("path", { d: w })
+        children: /* @__PURE__ */ s("path", { d: b })
       }),
       /* @__PURE__ */ s("clipPath", {
         id: l,
-        children: /* @__PURE__ */ s("path", { d: k })
+        children: /* @__PURE__ */ s("path", { d: R })
       }),
       /* @__PURE__ */ s("g", {
         className: ss,
         children: /* @__PURE__ */ s("g", {
           clipPath: `url(#${a})`,
           children: /* @__PURE__ */ s("path", {
-            d: R,
+            d: S,
             fill: M,
             "data-testid": "hovered-bar-border"
           })
@@ -785,25 +785,25 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
       }),
       /* @__PURE__ */ s("g", {
         clipPath: `url(#${i})`,
-        children: /* @__PURE__ */ b("g", {
+        children: /* @__PURE__ */ w("g", {
           clipPath: `url(#${l})`,
           children: [/* @__PURE__ */ s("path", {
-            d: w,
+            d: b,
             fill: E,
-            opacity: L,
+            opacity: N,
             "data-testid": "hovered-bar-fill"
-          }), h !== void 0 && /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("path", {
-            d: w,
+          }), h !== void 0 && /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("path", {
+            d: b,
             fill: "none",
             stroke: h,
-            strokeWidth: W.separatorWidth,
-            opacity: L,
+            strokeWidth: V.separatorWidth,
+            opacity: N,
             "data-testid": "hovered-bar-inner-border"
           }), /* @__PURE__ */ s("path", {
-            d: k,
+            d: R,
             fill: "none",
             stroke: h,
-            strokeWidth: W.outlineWidth,
+            strokeWidth: V.outlineWidth,
             opacity: p
           })] })]
         })
@@ -835,23 +835,23 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
   }),
   renderHoverCompanions: () => null
 }, hs = Z(function({ layer: t, shouldAnimateTransitions: r, intro: n }) {
-  const o = n?.type === "wipe" ? n : null, a = A(() => Jr(t.params), [t.params]), i = A(() => Fa(t.params), [t.params]), l = N(t), c = A(() => {
+  const o = n?.type === "wipe" ? n : null, a = A(() => Jr(t.params), [t.params]), i = A(() => Fa(t.params), [t.params]), l = I(t), c = A(() => {
     const u = oe(t.data, t.mapping, t.id), d = [];
     return t.data.groupBy(ce.group).forEach((v) => {
       const g = sn([...v], t.params.missingValues), h = a(g);
       if (!h) return;
       const f = g[0];
       if (!f) return;
-      const m = l.get("fillAlpha", f), p = m === void 0 ? void 0 : i(g) ?? void 0, y = l.get("color", f), w = l.get("strokeWidth", f), k = Ee(l.get("lineType", f));
+      const m = l.get("fillAlpha", f), p = m === void 0 ? void 0 : i(g) ?? void 0, x = l.get("color", f), b = l.get("strokeWidth", f), R = Ee(l.get("lineType", f));
       d.push({
         key: u(f),
         pathData: h,
         fillPath: p,
         fillAlpha: m,
-        color: y,
+        color: x,
         opacity: l.get("alpha", f),
-        strokeWidth: w,
-        strokeDasharray: k
+        strokeWidth: b,
+        strokeDasharray: R
       });
     }), d;
   }, [
@@ -908,8 +908,8 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
   strokeDasharray: i,
   vectorEffect: "non-scaling-stroke"
 }), gs = ({ fillPath: e, fillAlpha: t, linePath: r, color: n, strokeWidth: o, opacity: a, strokeDasharray: i, shouldAnimateTransitions: l }) => {
-  const c = `line_fill_gradient_${V()}`;
-  return /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("defs", { children: /* @__PURE__ */ b("linearGradient", {
+  const c = `line_fill_gradient_${U()}`;
+  return /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("defs", { children: /* @__PURE__ */ w("linearGradient", {
     id: c,
     gradientTransform: "rotate(90 0.5 0.5)",
     children: [
@@ -951,14 +951,14 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
     vectorEffect: "non-scaling-stroke"
   });
 }, ps = ({ layer: e, primary: t, companions: r }) => {
-  const n = N(e), o = pt(t.observation), a = A(() => sn([...e.data.filter(ce.group, "eq", o)], e.params.missingValues), [
+  const n = I(e), o = pt(t.observation), a = A(() => sn([...e.data.filter(ce.group, "eq", o)], e.params.missingValues), [
     e.data,
     e.params.missingValues,
     o
   ]), i = A(() => Jr(e.params)(a), [e.params, a]);
   if (!i) return null;
   const l = n.get("color", t.observation), c = n.get("alpha", t.observation), u = n.get("strokeWidth", t.observation), d = Ee(n.get("lineType", t.observation));
-  return /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w("g", {
     "data-testid": "hovered-line",
     children: [
       /* @__PURE__ */ s("svg", {
@@ -1012,7 +1012,7 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
 }, In = ({ observation: e, project: t, styleReaders: r, animation: n, introKey: o }) => {
   const a = q(e), i = te(e);
   if (a === null || i === null) return null;
-  const l = t(a, i), c = S(l.x), u = S(l.y), d = r.get("size", e) / 2, v = r.get("color", e), g = r.get("alpha", e), h = r.get("borderColor", e), f = r.get("borderWidth", e), { isAnimated: m, activeIntro: p, shouldAnimateTransitions: y } = n;
+  const l = t(a, i), c = k(l.x), u = k(l.y), d = r.get("size", e) / 2, v = r.get("color", e), g = r.get("alpha", e), h = r.get("borderColor", e), f = r.get("borderWidth", e), { isAnimated: m, activeIntro: p, shouldAnimateTransitions: x } = n;
   return m ? /* @__PURE__ */ s(H.circle, {
     initial: p ? {
       cx: c,
@@ -1020,7 +1020,7 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
       r: 0,
       opacity: 0
     } : !1,
-    transition: p ? Jt(p, o) : qt(y),
+    transition: p ? Jt(p, o) : qt(x),
     fill: v,
     stroke: h,
     strokeWidth: f,
@@ -1040,7 +1040,7 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
     strokeWidth: f
   });
 }, As = Z(function({ layer: t, shouldAnimateTransitions: r, intro: n }) {
-  const o = N(t), a = At(n?.type === "grow" && n.growAxis === "size" ? n : null, r);
+  const o = I(t), a = At(n?.type === "grow" && n.growAxis === "size" ? n : null, r);
   return A(() => {
     const i = a.activeIntro ? oe(t.data, t.mapping, t.id) : null, l = [];
     let c = 0;
@@ -1060,7 +1060,7 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
     a
   ]);
 }), xr = ({ primary: e, companions: t }) => {
-  const r = /* @__PURE__ */ b(B, { children: [t.map((n) => /* @__PURE__ */ s(he, { hit: n }, `companion-${n.layerId}-${n.pointIndex}`)), e ? /* @__PURE__ */ s(Pe, { hit: e }) : null] });
+  const r = /* @__PURE__ */ w(B, { children: [t.map((n) => /* @__PURE__ */ s(he, { hit: n }, `companion-${n.layerId}-${n.pointIndex}`)), e ? /* @__PURE__ */ s(Pe, { hit: e }) : null] });
   return e ? /* @__PURE__ */ s("g", {
     "data-testid": "hovered-point",
     children: r
@@ -1158,45 +1158,45 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
   purple30: "#E093FE",
   greyGradient80: "linear-gradient(to top, #F0F0F1, #F9F9FF)"
 }, ks = {
-  textPrimary: x.black,
-  textSecondary: O(x.textPrimary, 0.6),
-  textDisabled: O(x.textPrimary, 0.5),
+  textPrimary: y.black,
+  textSecondary: O(y.textPrimary, 0.6),
+  textDisabled: O(y.textPrimary, 0.5),
   iconPrimary: "currentColor",
-  iconSecondary: O(x.textPrimary, 0.6),
-  iconStickerBackground: x.grey100,
-  brand: x.purple50,
-  success: x.green50,
-  warning: x.amber50,
-  alert: x.red50,
-  border100: x.grey0,
-  border50: O(x.grey0, 0.5),
-  border10: O(x.grey0, 0.1),
-  sunkenBackground: x.grey90,
-  defaultBackground: x.grey100,
-  raisedBackground: x.grey85,
-  overlayBackground: x.grey100,
-  overlayBorderGradient: x.border10
+  iconSecondary: O(y.textPrimary, 0.6),
+  iconStickerBackground: y.grey100,
+  brand: y.purple50,
+  success: y.green50,
+  warning: y.amber50,
+  alert: y.red50,
+  border100: y.grey0,
+  border50: O(y.grey0, 0.5),
+  border10: O(y.grey0, 0.1),
+  sunkenBackground: y.grey90,
+  defaultBackground: y.grey100,
+  raisedBackground: y.grey85,
+  overlayBackground: y.grey100,
+  overlayBorderGradient: y.border10
 }, Rs = {
-  graphBackground: x.grey100,
-  gridLineColor: x.border10,
-  axisTickColor: x.border10,
-  originLineColor: x.grey0,
-  legendBackground: x.defaultBackground,
-  legendBorderColor: x.border10,
-  legendFocusOutlineColor: x.border50,
-  legendTextColor: x.textPrimary,
-  toolbarBackgroundColor: x.overlayBackground,
+  graphBackground: y.grey100,
+  gridLineColor: y.border10,
+  axisTickColor: y.border10,
+  originLineColor: y.grey0,
+  legendBackground: y.defaultBackground,
+  legendBorderColor: y.border10,
+  legendFocusOutlineColor: y.border50,
+  legendTextColor: y.textPrimary,
+  toolbarBackgroundColor: y.overlayBackground,
   toolbarButtonBackgroundColor: "transparent",
-  toolbarButtonBackgroundColorHovered: x.grey80,
-  toolbarButtonBackgroundColorSelected: x.grey60,
-  toolbarSeparatorColor: x.grey60,
-  tooltipBackground: x.white,
-  tooltipBorderColor: x.border10,
-  tooltipValueTextColor: x.textPrimary,
-  hoverGuideLineColor: O(x.black, 0.2),
-  hoverGuideFillColor: O(x.black, 0.04),
-  heatmapEmptyTileBackground: x.grey80,
-  annotationFrameBorderColor: x.blue60,
+  toolbarButtonBackgroundColorHovered: y.grey80,
+  toolbarButtonBackgroundColorSelected: y.grey60,
+  toolbarSeparatorColor: y.grey60,
+  tooltipBackground: y.white,
+  tooltipBorderColor: y.border10,
+  tooltipValueTextColor: y.textPrimary,
+  hoverGuideLineColor: O(y.black, 0.2),
+  hoverGuideFillColor: O(y.black, 0.04),
+  heatmapEmptyTileBackground: y.grey80,
+  annotationFrameBorderColor: y.blue60,
   editMenuTriggerIconColor: "#3d414c"
 }, Cs = {
   canvasDefault: "#000000",
@@ -1286,46 +1286,46 @@ var ss = "_1suo8ub0", Pn = (e, t, r) => {
   purple30: "#E093FE",
   greyGradient80: "linear-gradient(to top, #222429, #31353f)"
 }, Ts = {
-  textPrimary: x.grey0,
-  textSecondary: O(x.textPrimary, 0.8),
-  textDisabled: O(x.textPrimary, 0.5),
+  textPrimary: y.grey0,
+  textSecondary: O(y.textPrimary, 0.8),
+  textDisabled: O(y.textPrimary, 0.5),
   iconPrimary: "currentColor",
-  iconSecondary: O(x.textPrimary, 0.6),
-  iconStickerBackground: x.grey70,
-  border100: x.grey0,
-  border50: O(x.grey0, 0.5),
-  border10: O(x.grey0, 0.1),
-  brand: x.purple50,
-  success: x.green50,
-  warning: x.amber50,
-  alert: x.red50,
-  sunkenBackground: x.grey100,
-  defaultBackground: x.grey90,
-  raisedBackground: x.grey80,
-  overlayBackground: x.grey90,
-  overlayBorderGradient: x.greyGradient80
+  iconSecondary: O(y.textPrimary, 0.6),
+  iconStickerBackground: y.grey70,
+  border100: y.grey0,
+  border50: O(y.grey0, 0.5),
+  border10: O(y.grey0, 0.1),
+  brand: y.purple50,
+  success: y.green50,
+  warning: y.amber50,
+  alert: y.red50,
+  sunkenBackground: y.grey100,
+  defaultBackground: y.grey90,
+  raisedBackground: y.grey80,
+  overlayBackground: y.grey90,
+  overlayBorderGradient: y.greyGradient80
 }, Ls = {
-  graphBackground: x.grey90,
-  gridLineColor: x.border10,
-  axisTickColor: x.border10,
-  originLineColor: x.grey0,
-  legendBackground: x.defaultBackground,
-  legendBorderColor: x.border10,
-  legendFocusOutlineColor: x.border50,
-  legendTextColor: x.textPrimary,
-  toolbarBackgroundColor: x.overlayBackground,
+  graphBackground: y.grey90,
+  gridLineColor: y.border10,
+  axisTickColor: y.border10,
+  originLineColor: y.grey0,
+  legendBackground: y.defaultBackground,
+  legendBorderColor: y.border10,
+  legendFocusOutlineColor: y.border50,
+  legendTextColor: y.textPrimary,
+  toolbarBackgroundColor: y.overlayBackground,
   toolbarButtonBackgroundColor: "transparent",
-  toolbarButtonBackgroundColorHovered: x.grey80,
-  toolbarButtonBackgroundColorSelected: x.grey60,
-  toolbarSeparatorColor: x.grey60,
-  tooltipBackground: x.grey70,
-  tooltipBorderColor: x.grey60,
-  tooltipValueTextColor: x.textPrimary,
-  hoverGuideLineColor: O(x.white, 0.2),
-  hoverGuideFillColor: O(x.white, 0.06),
-  heatmapEmptyTileBackground: x.grey80,
-  annotationFrameBorderColor: x.blue60,
-  editMenuTriggerIconColor: x.white
+  toolbarButtonBackgroundColorHovered: y.grey80,
+  toolbarButtonBackgroundColorSelected: y.grey60,
+  toolbarSeparatorColor: y.grey60,
+  tooltipBackground: y.grey70,
+  tooltipBorderColor: y.grey60,
+  tooltipValueTextColor: y.textPrimary,
+  hoverGuideLineColor: O(y.white, 0.2),
+  hoverGuideFillColor: O(y.white, 0.06),
+  heatmapEmptyTileBackground: y.grey80,
+  annotationFrameBorderColor: y.blue60,
+  editMenuTriggerIconColor: y.white
 }, Ns = {
   canvasDefault: "#FFFFFF",
   canvasBlue: "#60a5fa",
@@ -1385,14 +1385,14 @@ function Fe(e, t) {
   const n = Number.parseFloat(r);
   return Number.isFinite(n) ? n : t;
 }
-var Qn = U(Fs), Ds = ({ metrics: e, children: t }) => /* @__PURE__ */ s(Qn.Provider, {
+var Qn = Q(Fs), Ds = ({ metrics: e, children: t }) => /* @__PURE__ */ s(Qn.Provider, {
   value: e,
   children: t
-}), Ie = () => D(Qn), T = () => {
-  const { colorScheme: e } = j(), t = C((r) => r.chrome);
+}), Ie = () => D(Qn), L = () => {
+  const { colorScheme: e } = W(), t = C((r) => r.chrome);
   return A(() => gt({ colorScheme: e }).chromeReaders(t), [t, e]);
 }, Hs = (e) => {
-  const t = T(), r = C((n) => n.config.appearance.textScale);
+  const t = L(), r = C((n) => n.config.appearance.textScale);
   return A(() => Ai(t, e, r), [
     t,
     e,
@@ -1446,7 +1446,7 @@ var Qn = U(Fs), Ds = ({ metrics: e, children: t }) => /* @__PURE__ */ s(Qn.Provi
 }, Vs = (e) => {
   const t = Us();
   return t ? (t.style.font = e, t.getBoundingClientRect().width) : null;
-}, Us = () => typeof document > "u" ? null : (ae || (ae = document.createElement("span"), ae.style.position = "absolute", ae.style.visibility = "hidden", ae.style.whiteSpace = "nowrap", ae.style.left = "-9999px", ae.textContent = Yn, document.body.appendChild(ae)), ae), zn = U(null), Qs = ({ children: e, measurer: t }) => {
+}, Us = () => typeof document > "u" ? null : (ae || (ae = document.createElement("span"), ae.style.position = "absolute", ae.style.visibility = "hidden", ae.style.whiteSpace = "nowrap", ae.style.left = "-9999px", ae.textContent = Yn, document.body.appendChild(ae)), ae), zn = Q(null), Qs = ({ children: e, measurer: t }) => {
   const [r, n] = G(null);
   F(() => {
     if (t !== void 0) return;
@@ -1473,8 +1473,8 @@ var Qn = U(Fs), Ds = ({ metrics: e, children: t }) => /* @__PURE__ */ s(Qn.Provi
   } catch {
     return new ur(new ha());
   }
-}, jn = U(null), mf = jn.Provider, Ks = null, de = () => D(jn) ?? (Ks ??= Wl()), zs = "_16vokpr0", js = (e, t) => e.mapping.y !== void 0 != (t.mainAxis === "y"), Xs = (e, t) => {
-  const r = S(e ? 1 - t : t);
+}, jn = Q(null), mf = jn.Provider, Ks = null, de = () => D(jn) ?? (Ks ??= Wl()), zs = "_16vokpr0", js = (e, t) => e.mapping.y !== void 0 != (t.mainAxis === "y"), Xs = (e, t) => {
+  const r = k(e ? 1 - t : t);
   return e ? {
     x1: "0%",
     y1: r,
@@ -1493,7 +1493,7 @@ var Qn = U(Fs), Ds = ({ metrics: e, children: t }) => /* @__PURE__ */ s(Qn.Provi
     strokeLinecap: "round",
     ...e === "dashed" ? { strokeMiterlimit: 16 } : {}
   };
-}, Js = (e, t) => rt(e) && rt(t) ? `${e}: ${t}` : rt(e) ? e : rt(t) ? t : null, rt = (e) => e != null && e.trim() !== "", Xn = Object.freeze({}), Zt = U(Xn), Zs = ({ slots: e, children: t }) => /* @__PURE__ */ s(Zt.Provider, {
+}, Js = (e, t) => rt(e) && rt(t) ? `${e}: ${t}` : rt(e) ? e : rt(t) ? t : null, rt = (e) => e != null && e.trim() !== "", Xn = Object.freeze({}), Zt = Q(Xn), Zs = ({ slots: e, children: t }) => /* @__PURE__ */ s(Zt.Provider, {
   value: e ?? Xn,
   children: t
 });
@@ -1564,7 +1564,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     }
     case "area": {
       const l = o / 2 - 1;
-      return /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("rect", {
+      return /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("rect", {
         x: 1,
         y: l,
         width: n - 2,
@@ -1614,7 +1614,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   lineHeight: e.lineHeight,
   color: e.textColor
 }), ll = 11.7, Sr = 21.6, cl = "0 0 10 18", dl = "M2.48935 16.9323L9.07098 9.82964C9.51595 9.34944 9.51504 8.60728 9.0689 8.12818L2.48866 1.06172C1.85811 0.384586 0.974477 0 0.049217 0H0V18H0.0443689C0.972463 18 1.85854 17.6131 2.48935 16.9323Z", ul = ({ labelPosition: e, linePosition: t, color: r, pillWidth: n, pillHeight: o, text: a, shouldAnimateTransitions: i }) => {
-  const l = e === "start", c = l ? -13 : -(n - 13), u = l ? c + n - 5 : c + 5 - 12, d = l ? void 0 : `rotate(180 ${u + 12 / 2} ${o / 2})`, v = l ? "0%" : "100%", g = S(1 - t), h = /* @__PURE__ */ b("g", {
+  const l = e === "start", c = l ? -13 : -(n - 13), u = l ? c + n - 5 : c + 5 - 12, d = l ? void 0 : `rotate(180 ${u + 12 / 2} ${o / 2})`, v = l ? "0%" : "100%", g = k(1 - t), h = /* @__PURE__ */ w("g", {
     transform: `translate(0, ${-o / 2})`,
     pointerEvents: "none",
     children: [
@@ -1661,7 +1661,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     children: h
   });
 }, hl = ({ labelPosition: e, linePosition: t, color: r, pillWidth: n, pillHeight: o, text: a, shouldAnimateTransitions: i }) => {
-  const l = e === "start", c = l ? -13 : -(o - 13), u = S(t), d = l ? "100%" : "0%", v = /* @__PURE__ */ b("g", {
+  const l = e === "start", c = l ? -13 : -(o - 13), u = k(t), d = l ? "100%" : "0%", v = /* @__PURE__ */ w("g", {
     transform: `translate(${-n / 2}, 0)`,
     pointerEvents: "none",
     children: [/* @__PURE__ */ s("rect", {
@@ -1690,7 +1690,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     children: v
   });
 }, vl = ({ label: e, textStyle: t, textWidth: r, labelPosition: n, isHorizontalLine: o, position: a, color: i, textColor: l, symbolShape: c, symbolColor: u, shouldAnimateTransitions: d }) => {
-  const v = c === null ? 0 : 14, g = r + v + 10, h = Math.max(ll, fe(t)) + 10, f = /* @__PURE__ */ b(B, { children: [c !== null && u !== null && /* @__PURE__ */ s("g", {
+  const v = c === null ? 0 : 14, g = r + v + 10, h = Math.max(ll, fe(t)) + 10, f = /* @__PURE__ */ w(B, { children: [c !== null && u !== null && /* @__PURE__ */ s("g", {
     transform: `translate(0, ${-10 / 2})`,
     children: /* @__PURE__ */ s(Xe, {
       shape: c,
@@ -1747,7 +1747,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     vectorEffect: "non-scaling-stroke"
   });
 }, fl = Z(function({ layer: t, coordSystem: r, formattingLocale: n, shouldAnimateTransitions: o }) {
-  const a = pe(), i = de(), { guides: l, numberFormat: c, layers: u, colorScale: d } = C(z((M) => ({
+  const a = pe(), i = de(), { guides: l, numberFormat: c, layers: u, colorScale: d } = C(j((M) => ({
     guides: M.guides,
     numberFormat: M.config.numberFormat,
     layers: M.spec.layers,
@@ -1766,31 +1766,31 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     c,
     n,
     t
-  ]), { fonts: f } = Ie(), m = Hs(t.id), p = A(() => K(m, f.familyDefault), [m, f.familyDefault]), y = A(() => h === null ? 0 : a.measureText(h, p).width, [
+  ]), { fonts: f } = Ie(), m = Hs(t.id), p = A(() => z(m, f.familyDefault), [m, f.familyDefault]), x = A(() => h === null ? 0 : a.measureText(h, p).width, [
     h,
     p,
     a
-  ]), w = N(t), k = t.data.getFirst();
-  if (!k) return null;
-  const R = w.get("color", k), P = on(R), E = js(t, r), L = E ? te(k) : q(k);
-  return L === null ? null : /* @__PURE__ */ b("g", {
+  ]), b = I(t), R = t.data.getFirst();
+  if (!R) return null;
+  const S = b.get("color", R), P = on(S), E = js(t, r), N = E ? te(R) : q(R);
+  return N === null ? null : /* @__PURE__ */ w("g", {
     "data-geom": "rule",
     className: zs,
     children: [/* @__PURE__ */ s(gl, {
-      strokeWidth: w.get("strokeWidth", k),
-      lineType: w.get("lineType", k),
+      strokeWidth: b.get("strokeWidth", R),
+      lineType: b.get("lineType", R),
       isHorizontalLine: E,
-      position: L,
-      lineColor: R,
+      position: N,
+      lineColor: S,
       shouldAnimateTransitions: o
     }), h !== null && /* @__PURE__ */ s(vl, {
       label: h,
       textStyle: m,
-      textWidth: y,
+      textWidth: x,
       labelPosition: t.params.labelPosition,
       isHorizontalLine: E,
-      position: L,
-      color: R,
+      position: N,
+      color: S,
       textColor: P,
       symbolShape: g,
       symbolColor: v?.color ?? null,
@@ -1809,7 +1809,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   renderHover: () => null,
   renderHoverCompanions: () => null
 }, ml = Z(function({ layer: t, shouldAnimateTransitions: r, intro: n }) {
-  const o = n?.type === "fade" ? n : null, a = N(t), i = A(() => {
+  const o = n?.type === "fade" ? n : null, a = I(t), i = A(() => {
     const l = Ha(t.data, t.mapping, t.id), c = [];
     for (const u of t.data) {
       const d = en(u);
@@ -1843,25 +1843,25 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   opacity: t.opacity,
   rx: 8,
   animate: {
-    x: S(t.x),
-    y: S(t.y),
-    width: S(t.width),
-    height: S(t.height)
+    x: k(t.x),
+    y: k(t.y),
+    width: k(t.width),
+    height: k(t.height)
   }
 }) : /* @__PURE__ */ s("rect", {
   style: { transformBox: "view-box" },
-  x: S(t.x),
-  y: S(t.y),
-  width: S(t.width),
-  height: S(t.height),
+  x: k(t.x),
+  y: k(t.y),
+  width: k(t.width),
+  height: k(t.height),
   fill: t.fill,
   opacity: t.opacity,
   rx: 8
 }), De = 2, yl = ({ layer: e, primary: t, panelRect: r }) => {
-  const n = N(e), o = en(t.observation);
+  const n = I(e), o = en(t.observation);
   if (!o || !_r(t.observation)) return null;
   const a = n.get("color", t.observation), i = n.get("alpha", t.observation), l = n.get("borderColor", t.observation, "hovered") ?? vt, c = o.x * r.width, u = o.y * r.height, d = o.width * r.width, v = o.height * r.height;
-  return /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w("g", {
     "data-testid": "hovered-tile",
     children: [/* @__PURE__ */ s("rect", {
       x: c - De,
@@ -1872,10 +1872,10 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
       fill: l,
       "data-testid": "hovered-tile-border"
     }), /* @__PURE__ */ s("rect", {
-      x: S(o.x),
-      y: S(o.y),
-      width: S(o.width),
-      height: S(o.height),
+      x: k(o.x),
+      y: k(o.y),
+      width: k(o.width),
+      height: k(o.height),
       rx: 8,
       fill: a,
       opacity: i,
@@ -1899,7 +1899,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   }),
   renderHoverCompanions: () => null
 }, dt = ({ primary: e, companions: t }) => {
-  const r = /* @__PURE__ */ b(B, { children: [t.map((n) => /* @__PURE__ */ s(he, {
+  const r = /* @__PURE__ */ w(B, { children: [t.map((n) => /* @__PURE__ */ s(he, {
     hit: n,
     project: re
   }, `companion-${n.layerId}-${n.pointIndex}`)), e ? /* @__PURE__ */ s(Pe, {
@@ -1916,7 +1916,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   const n = r.map((o) => `L ${o.x} ${o.y}`).join(" ");
   return `M ${t.x} ${t.y} ${n} Z`;
 }, bl = Z(function({ layer: t }) {
-  const r = N(t), n = A(() => {
+  const r = I(t), n = A(() => {
     const o = oe(t.data, t.mapping, t.id), a = [];
     return t.data.groupBy(ce.group).forEach((i) => {
       const l = [...i], c = qn(l);
@@ -1945,7 +1945,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     height: "100%",
     "data-geom": "area",
     className: $,
-    children: n.map((o) => /* @__PURE__ */ b("g", { children: [/* @__PURE__ */ s("path", {
+    children: n.map((o) => /* @__PURE__ */ w("g", { children: [/* @__PURE__ */ s("path", {
       d: o.fillPath,
       fill: o.color,
       fillOpacity: o.fillOpacity,
@@ -1977,11 +1977,11 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     outlinePath: o
   };
 }, wl = ({ layer: e, primary: t, companions: r }) => {
-  const n = N(e), o = pt(t.observation), a = A(() => qn([...e.data.filter(ce.group, "eq", o)]), [e.data, o]);
+  const n = I(e), o = pt(t.observation), a = A(() => qn([...e.data.filter(ce.group, "eq", o)]), [e.data, o]);
   if (!a) return null;
   const i = n.get("color", t.observation), l = n.get("alpha", t.observation), c = n.get("strokeAlpha", t.observation), u = n.get("strokeWidth", t.observation);
-  return /* @__PURE__ */ b(B, { children: [
-    /* @__PURE__ */ b("svg", {
+  return /* @__PURE__ */ w(B, { children: [
+    /* @__PURE__ */ w("svg", {
       viewBox: "-1 -1 2 2",
       preserveAspectRatio: "xMidYMid meet",
       width: "100%",
@@ -2041,22 +2041,22 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   strokeWidth: t,
   vectorEffect: "non-scaling-stroke"
 }), kl = Z(function({ layer: t, coordSystem: r, shouldAnimateTransitions: n, intro: o }) {
-  const a = V(), i = At(o?.type === "grow" && (o.growAxis === "angle" || o.growAxis === "radius") ? o : null, n), l = r.bandAxis !== "x", c = N(t), u = A(() => {
+  const a = U(), i = At(o?.type === "grow" && (o.growAxis === "angle" || o.growAxis === "radius") ? o : null, n), l = r.bandAxis !== "x", c = I(t), u = A(() => {
     const d = oe(t.data, t.mapping, t.id), v = /* @__PURE__ */ new Map();
     for (const g of t.data) {
-      const h = d(g), { startAngle: f, endAngle: m } = Yt(g), { innerRadius: p, outerRadius: y } = mt(g);
-      if (f === null || m === null || p === null || y === null) continue;
-      const w = {
+      const h = d(g), { startAngle: f, endAngle: m } = Yt(g), { innerRadius: p, outerRadius: x } = mt(g);
+      if (f === null || m === null || p === null || x === null) continue;
+      const b = {
         key: h,
         startAngle: f,
         endAngle: m,
         innerRadius: p,
-        outerRadius: y,
+        outerRadius: x,
         fill: c.get("color", g),
         opacity: c.get("alpha", g)
-      }, k = Qt(r.bandAxis, w), R = v.get(k);
-      R ? R.items.push(w) : v.set(k, {
-        items: [w],
+      }, R = Qt(r.bandAxis, b), S = v.get(R);
+      S ? S.items.push(b) : v.set(R, {
+        items: [b],
         style: Be(c, g)
       });
     }
@@ -2081,26 +2081,26 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     "data-geom": "bar",
     className: $,
     children: u.map((d, v) => {
-      const { borderColor: g, borderWidth: h, borderRadius: f, borderAlpha: m } = d.style, p = g !== void 0, y = ze(h), w = g === void 0 ? {} : Ge(g, y.separatorWidth), k = g === void 0 ? void 0 : Ge(g, y.outlineWidth), R = d.items.map((M) => {
-        const { key: W, ...Y } = M;
+      const { borderColor: g, borderWidth: h, borderRadius: f, borderAlpha: m } = d.style, p = g !== void 0, x = ze(h), b = g === void 0 ? {} : Ge(g, x.separatorWidth), R = g === void 0 ? void 0 : Ge(g, x.outlineWidth), S = d.items.map((M) => {
+        const { key: V, ...K } = M;
         return i.isAnimated ? /* @__PURE__ */ s(Rl, {
-          ...Y,
+          ...K,
           animation: i,
           sweepsInOnLateMount: l,
-          introKey: W,
+          introKey: V,
           pathProps: {
-            fill: Y.fill,
-            opacity: Y.opacity,
-            ...w
+            fill: K.fill,
+            opacity: K.opacity,
+            ...b
           }
-        }, W) : /* @__PURE__ */ s("path", {
-          d: ge(Y) ?? void 0,
-          fill: Y.fill,
-          opacity: Y.opacity,
-          ...w
-        }, W);
+        }, V) : /* @__PURE__ */ s("path", {
+          d: ge(K) ?? void 0,
+          fill: K.fill,
+          opacity: K.opacity,
+          ...b
+        }, V);
       }), P = vn(f, d.union.outerRadius - d.union.innerRadius);
-      if (!p && P <= 0) return /* @__PURE__ */ s(jt, { children: R }, d.key);
+      if (!p && P <= 0) return /* @__PURE__ */ s(jt, { children: S }, d.key);
       const E = `${a}${v}`;
       if (i.isAnimated) return /* @__PURE__ */ s("g", {
         clipPath: `url(#${E})`,
@@ -2111,93 +2111,93 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
           sweepsInOnLateMount: l,
           introKey: d.items[0]?.key,
           clipId: E,
-          outlineProps: k,
+          outlineProps: R,
           outlineOpacity: m,
-          children: R
+          children: S
         })
       }, d.key);
-      const L = ge({
+      const N = ge({
         ...d.union,
         cornerRadius: P
       });
-      return /* @__PURE__ */ b("g", {
+      return /* @__PURE__ */ w("g", {
         clipPath: `url(#${E})`,
         children: [
           /* @__PURE__ */ s("clipPath", {
             id: E,
-            children: /* @__PURE__ */ s("path", { d: L })
+            children: /* @__PURE__ */ s("path", { d: N })
           }),
-          R,
-          k !== void 0 && /* @__PURE__ */ s("path", {
-            d: L,
+          S,
+          R !== void 0 && /* @__PURE__ */ s("path", {
+            d: N,
             fill: "none",
             opacity: m,
-            ...k
+            ...R
           })
         ]
       }, d.key);
     })
   });
 }), Jn = ({ startAngle: e, endAngle: t, innerRadius: r, outerRadius: n, cornerRadius: o, animation: a, sweepsInOnLateMount: i, introKey: l }) => {
-  const c = a.activeIntro?.growAxis === "angle" ? a.activeIntro : null, u = a.activeIntro?.growAxis === "radius" ? a.activeIntro : null, d = i && !a.isLayerEntrance, v = c?.baseline ?? (d ? hr : e), g = c?.baseline ?? (d ? hr : t), h = u ? u.baseline : r, f = u ? u.baseline : n, m = _(v), p = _(g), y = _(h), w = _(f), k = _(ge({
+  const c = a.activeIntro?.growAxis === "angle" ? a.activeIntro : null, u = a.activeIntro?.growAxis === "radius" ? a.activeIntro : null, d = i && !a.isLayerEntrance, v = c?.baseline ?? (d ? hr : e), g = c?.baseline ?? (d ? hr : t), h = u ? u.baseline : r, f = u ? u.baseline : n, m = _(v), p = _(g), x = _(h), b = _(f), R = _(ge({
     startAngle: v,
     endAngle: g,
     innerRadius: h,
     outerRadius: f,
     cornerRadius: o
-  }) ?? ""), R = Ht(a, l, c);
+  }) ?? ""), S = Ht(a, l, c);
   F(() => {
-    const E = R(), L = [ie(m, e, E), ie(p, t, E)];
+    const E = S(), N = [ie(m, e, E), ie(p, t, E)];
     return () => {
-      for (const M of L) M.stop();
+      for (const M of N) M.stop();
     };
   }, [
     m,
     p,
     e,
     t,
-    R
+    S
   ]);
   const P = Ht(a, l, u);
   return F(() => {
-    const E = P(), L = [ie(y, r, E), ie(w, n, E)];
+    const E = P(), N = [ie(x, r, E), ie(b, n, E)];
     return () => {
-      for (const M of L) M.stop();
+      for (const M of N) M.stop();
     };
   }, [
-    y,
-    w,
+    x,
+    b,
     r,
     n,
     P
   ]), F(() => {
     const E = () => {
-      k.set(ge({
+      R.set(ge({
         startAngle: m.get(),
         endAngle: p.get(),
-        innerRadius: y.get(),
-        outerRadius: w.get(),
+        innerRadius: x.get(),
+        outerRadius: b.get(),
         cornerRadius: o
       }) ?? "");
     };
     E();
-    const L = [
+    const N = [
       m,
       p,
-      y,
-      w
+      x,
+      b
     ].map((M) => M.on("change", E));
     return () => {
-      for (const M of L) M();
+      for (const M of N) M();
     };
   }, [
     m,
     p,
-    y,
-    w,
+    x,
+    b,
     o,
-    k
-  ]), k;
+    R
+  ]), R;
 }, Rl = ({ pathProps: e, ...t }) => {
   const r = Jn(t);
   return /* @__PURE__ */ s(H.path, {
@@ -2207,7 +2207,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   });
 }, Cl = ({ clipId: e, outlineProps: t, outlineOpacity: r, children: n, ...o }) => {
   const a = Jn(o);
-  return /* @__PURE__ */ b(B, { children: [
+  return /* @__PURE__ */ w(B, { children: [
     /* @__PURE__ */ s("clipPath", {
       id: e,
       children: /* @__PURE__ */ s(H.path, { d: a })
@@ -2259,7 +2259,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     radialSpan: o === null ? 0 : o.outerRadius - o.innerRadius
   };
 }, _n = ({ observation: e, bandAxis: t, styleReaders: r, group: n }) => {
-  const o = V(), a = V(), { startAngle: i, endAngle: l } = Yt(e), { innerRadius: c, outerRadius: u } = mt(e);
+  const o = U(), a = U(), { startAngle: i, endAngle: l } = Yt(e), { innerRadius: c, outerRadius: u } = mt(e);
   if (i === null || l === null || c === null || u === null) return null;
   const d = {
     startAngle: i,
@@ -2268,21 +2268,21 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     outerRadius: u
   }, v = ge(d);
   if (v === void 0) return null;
-  const g = r.get("color", e), h = r.get("alpha", e), { borderColor: f, borderWidth: m, borderRadius: p, borderAlpha: y } = n.style, w = vn(p, n.radialSpan), k = w > 0;
-  if (f === void 0 && !k) return /* @__PURE__ */ s("path", {
+  const g = r.get("color", e), h = r.get("alpha", e), { borderColor: f, borderWidth: m, borderRadius: p, borderAlpha: x } = n.style, b = vn(p, n.radialSpan), R = b > 0;
+  if (f === void 0 && !R) return /* @__PURE__ */ s("path", {
     d: v,
     fill: g,
     opacity: h,
     "data-testid": "arc-segment"
   });
-  const R = El(qa(e), t), P = k ? ge({
-    ...Bl(d, R, w),
-    cornerRadius: w
+  const S = El(qa(e), t), P = R ? ge({
+    ...Bl(d, S, b),
+    cornerRadius: b
   }) ?? v : v, E = f === void 0 ? null : {
     color: f,
     ...ze(m)
-  }, L = E === null ? "" : Cr(d, Il(R));
-  return /* @__PURE__ */ b("g", {
+  }, N = E === null ? "" : Cr(d, Il(S));
+  return /* @__PURE__ */ w("g", {
     clipPath: `url(#${o})`,
     "data-testid": "arc-segment",
     children: [
@@ -2295,13 +2295,13 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
         fill: g,
         opacity: h
       }),
-      E !== null && L !== "" && /* @__PURE__ */ s("path", {
-        d: L,
+      E !== null && N !== "" && /* @__PURE__ */ s("path", {
+        d: N,
         fill: "none",
         opacity: h,
         ...Ge(E.color, E.separatorWidth)
       }),
-      E !== null && (k ? /* @__PURE__ */ b("g", {
+      E !== null && (R ? /* @__PURE__ */ w("g", {
         clipPath: `url(#${a})`,
         children: [/* @__PURE__ */ s("clipPath", {
           id: a,
@@ -2309,19 +2309,19 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
         }), /* @__PURE__ */ s("path", {
           d: P,
           fill: "none",
-          opacity: y,
+          opacity: x,
           ...Ge(E.color, E.outlineWidth)
         })]
       }) : /* @__PURE__ */ s("path", {
-        d: Cr(d, R),
+        d: Cr(d, S),
         fill: "none",
-        opacity: y,
+        opacity: x,
         ...Ge(E.color, E.outlineWidth)
       }))
     ]
   });
 }, Pl = ({ layer: e, sourceLayer: t, coordSystem: r }) => {
-  const n = N(t), o = A(() => Zn(t, r.bandAxis, n), [
+  const n = I(t), o = A(() => Zn(t, r.bandAxis, n), [
     t,
     r.bandAxis,
     n
@@ -2382,7 +2382,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   startSpoke: !e.startSpoke,
   endSpoke: !e.endSpoke
 }), Tl = ({ layer: e, coordSystem: t, primary: r }) => {
-  const n = N(e), o = $n(A(() => Zn(e, t.bandAxis, n), [
+  const n = I(e), o = $n(A(() => Zn(e, t.bandAxis, n), [
     e,
     t.bandAxis,
     n
@@ -2425,7 +2425,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   }),
   renderHoverCompanions: () => null
 }, Nl = Z(function({ layer: t }) {
-  const r = N(t), n = A(() => {
+  const r = I(t), n = A(() => {
     const o = oe(t.data, t.mapping, t.id), a = [];
     return t.data.groupBy(ce.group).forEach((i) => {
       const l = [...i], c = to(l);
@@ -2474,10 +2474,10 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
   }
   return t.length === 0 ? null : (t.sort((r, n) => r.angle - n.angle), Ot(t.map((r) => r.point)));
 }, Ml = ({ layer: e, primary: t, companions: r }) => {
-  const n = N(e), o = pt(t.observation), a = A(() => to([...e.data.filter(ce.group, "eq", o)]), [e.data, o]);
+  const n = I(e), o = pt(t.observation), a = A(() => to([...e.data.filter(ce.group, "eq", o)]), [e.data, o]);
   if (!a) return null;
   const i = n.get("color", t.observation), l = n.get("alpha", t.observation), c = n.get("strokeWidth", t.observation), u = Ee(n.get("lineType", t.observation));
-  return /* @__PURE__ */ b(B, { children: [
+  return /* @__PURE__ */ w(B, { children: [
     /* @__PURE__ */ s("svg", {
       viewBox: "-1 -1 2 2",
       preserveAspectRatio: "xMidYMid meet",
@@ -2529,7 +2529,7 @@ var el = "_2qyyu60", tl = 2, rl = 12, nl = 12, br = 1, wr = 2, ol = 4, Xe = (e)
     };
   }
 }, Dl = Z(function({ layer: t, shouldAnimateTransitions: r, intro: n }) {
-  const o = N(t), a = At(n?.type === "grow" && n.growAxis === "size" ? n : null, r);
+  const o = I(t), a = At(n?.type === "grow" && n.growAxis === "size" ? n : null, r);
   return A(() => {
     const i = a.activeIntro ? oe(t.data, t.mapping, t.id) : null, l = [];
     let c = 0;
@@ -2620,7 +2620,7 @@ function Wl(e = []) {
   return (r, n) => t[r]?.[n] ?? null;
 }
 var Gt = (e) => {
-  const t = I(e);
+  const t = T(e);
   return t.current = e, t;
 }, Vl = () => {
   const e = /* @__PURE__ */ new Map();
@@ -2642,9 +2642,9 @@ var Gt = (e) => {
   const r = A(() => ({
     layers: e,
     coordSystem: t
-  }), [e, t]), n = I(null);
+  }), [e, t]), n = T(null);
   n.current === null && (n.current = new va(r));
-  const o = n.current, a = I(!1);
+  const o = n.current, a = T(!1);
   return F(() => {
     if (!a.current) {
       a.current = !0;
@@ -2652,11 +2652,11 @@ var Gt = (e) => {
     }
     o.update(r);
   }, [o, r]), o;
-}, ro = U(null), Yl = ({ children: e }) => {
-  const { layers: t, coordSystem: r } = C(z((l) => ({
+}, ro = Q(null), Yl = ({ children: e }) => {
+  const { layers: t, coordSystem: r } = C(j((l) => ({
     layers: l.layers,
     coordSystem: l.coordSystem
-  }))), n = Ql(t, r), [o] = G(() => Vl()), a = I(null), i = I(null);
+  }))), n = Ql(t, r), [o] = G(() => Vl()), a = T(null), i = T(null);
   return i.current === null && (i.current = {
     engine: n,
     store: o,
@@ -2671,7 +2671,7 @@ var Gt = (e) => {
   return e;
 };
 function Kl(e, t) {
-  const { engine: r } = me(), n = I(t);
+  const { engine: r } = me(), n = T(t);
   F(() => {
     n.current = t;
   }, [t]), F(() => (r.registerHitTester(e, (o) => n.current(o)), () => r.unregisterHitTester(e)), [r, e]);
@@ -2699,7 +2699,7 @@ var zl = ({ hitTest: e, input: t }) => {
     children: t
   });
 }, Zl = (e, t) => {
-  const r = Gt(e), n = Gt(t), o = I(null), a = I(null), i = A(() => {
+  const r = Gt(e), n = Gt(t), o = T(null), a = T(null), i = A(() => {
     const l = () => {
       a.current !== null && (clearTimeout(a.current), a.current = null), o.current = null;
     }, c = () => {
@@ -2727,13 +2727,13 @@ var zl = ({ hitTest: e, input: t }) => {
   height: 0,
   isDefault: !0
 }, oo = ({ debounce: e = 0, onResize: t } = {}) => {
-  const [r, n] = G($l), o = I(null), a = Zl((u) => {
+  const [r, n] = G($l), o = T(null), a = Zl((u) => {
     const d = o.current;
     d && d.width === u.width && d.height === u.height || (o.current = {
       width: u.width,
       height: u.height
     }, t?.(u), n(u));
-  }, e), i = I(null), l = I(null), c = se((u) => {
+  }, e), i = T(null), l = T(null), c = se((u) => {
     i.current !== u && (i.current && l.current?.unobserve(i.current), i.current = u, u && (l.current ??= new ResizeObserver(([d]) => {
       if (!d) return;
       const v = Math.round(d.contentBoxSize[0]?.inlineSize ?? d.contentRect.width), g = Math.round(d.contentBoxSize[0]?.blockSize ?? d.contentRect.height);
@@ -2750,7 +2750,7 @@ var zl = ({ hitTest: e, input: t }) => {
   };
 };
 function _l() {
-  const [e, t] = G(null), r = I(null), n = I(null), o = I(null), a = se(() => {
+  const [e, t] = G(null), r = T(null), n = T(null), o = T(null), a = se(() => {
     o.current = null;
     const u = n.current;
     if (!u) return;
@@ -2799,7 +2799,7 @@ function ec(e) {
 }
 var tc = ({ render: e, input: t }) => {
   const r = ec(t.layer.id), { measureRef: n, screenRect: o } = _l();
-  return F(() => () => r(null), [r]), /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("rect", {
+  return F(() => () => r(null), [r]), /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("rect", {
     ref: n,
     x: 0,
     y: 0,
@@ -3037,7 +3037,7 @@ var tc = ({ render: e, input: t }) => {
   if (!e) return t;
   const r = e.trim().replace("_", "-").toLowerCase();
   return Object.keys($t).find((n) => n.toLowerCase() === r) ?? t;
-}, ao = U(null), pc = [$t], io = () => Ac().translator, mc = ({ locale: e, children: t, i18nOverrides: r, dictionaries: n = pc }) => {
+}, ao = Q(null), pc = [$t], io = () => Ac().translator, mc = ({ locale: e, children: t, i18nOverrides: r, dictionaries: n = pc }) => {
   const o = fc(e), a = A(() => ({
     translator: hc({
       locale: o,
@@ -3070,21 +3070,21 @@ var tc = ({ render: e, input: t }) => {
   if (e !== "none")
     return `drop-shadow(${e.offsetX}px ${e.offsetY}px ${e.blur}px ${e.color})`;
 }, xc = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => wi(e, t), [e, t]);
-}, bc = "bow4tg0", wc = "bow4tg1", Sc = "bow4tg2", kc = "bow4tg3", Rc = "bow4tg4", lo = "_1ii3bsb0", Cc = "_1ii3bsb1", co = U({
+}, bc = "bow4tg0", wc = "bow4tg1", Sc = "bow4tg2", kc = "bow4tg3", Rc = "bow4tg4", lo = "_1ii3bsb0", Cc = "_1ii3bsb1", co = Q({
   colorScheme: "light",
   themeClass: lo,
   inlineVarsStyle: {},
   themeValues: Vn("light", {})
 }), _t = () => D(co), Ec = ({ colorScheme: e, themeOverrides: t = {}, textScale: r = 1, graphBackground: n, children: o }) => {
   const a = A(() => Vn(e, t), [e, t]), i = A(() => {
-    const c = { [x.textScale]: String(r) };
+    const c = { [y.textScale]: String(r) };
     for (const u of Object.keys(t)) {
-      const d = x[u];
+      const d = y[u];
       typeof d == "string" && (c[d] = a[u]);
     }
-    return n !== void 0 && (c[x.graphBackground] = n), xn(c);
+    return n !== void 0 && (c[y.graphBackground] = n), xn(c);
   }, [
     r,
     n,
@@ -3235,7 +3235,7 @@ function Ve(e) {
 }
 var Gc = "_19519k80";
 var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc = "_19519k87", Kc = "_19519k88", zc = (e) => {
-  const { overlayRef: t } = me(), r = I(null), [n, o] = G(!1), a = Gt(e);
+  const { overlayRef: t } = me(), r = T(null), [n, o] = G(!1), a = Gt(e);
   return F(() => {
     const i = t.current;
     if (!i) return;
@@ -3268,15 +3268,15 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
   boundary: [],
   padding: Xc
 }, Jc = () => {
-  const e = C(z((w) => ({
-    layers: w.layers,
-    coordSystem: w.coordSystem,
-    scales: w.scales,
-    guides: w.guides,
-    numberFormat: w.config.numberFormat,
-    parsingLocale: w.config.parsingLocale,
-    comments: w.annotations.comments
-  }))), { formattingLocale: t, colorScheme: r } = j(), n = Ve((w) => w.hover), o = Ve((w) => w.tooltipAnchor), a = Ve((w) => w.isPointerSuspended), i = ee("Tooltip", Zc), l = I(() => {
+  const e = C(j((b) => ({
+    layers: b.layers,
+    coordSystem: b.coordSystem,
+    scales: b.scales,
+    guides: b.guides,
+    numberFormat: b.config.numberFormat,
+    parsingLocale: b.config.parsingLocale,
+    comments: b.annotations.comments
+  }))), { formattingLocale: t, colorScheme: r } = W(), n = Ve((b) => b.hover), o = Ve((b) => b.tooltipAnchor), a = Ve((b) => b.isPointerSuspended), i = ee("Tooltip", Zc), l = T(() => {
   }), { cursorRef: c, isInside: u } = zc(() => l.current()), d = A(() => Ea({
     ...e,
     hover: n,
@@ -3291,8 +3291,8 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     o
   ]), v = !a && d !== null && (u || o !== null), g = A(() => ({ getBoundingClientRect: () => {
     if (o !== null) return ed(o);
-    const w = c.current;
-    return w === null ? qc : _c(w);
+    const b = c.current;
+    return b === null ? qc : _c(b);
   } }), [c, o]), { refs: h, floatingStyles: f, update: m } = yn(td({
     isOpen: v,
     tooltipAnchor: o,
@@ -3306,11 +3306,11 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     style: f,
     "data-testid": "chart-tooltip",
     children: /* @__PURE__ */ s(i, { content: d })
-  }), y = no();
-  return y ? An(/* @__PURE__ */ s(Pc, { children: p }), y) : p;
+  }), x = no();
+  return x ? An(/* @__PURE__ */ s(Pc, { children: p }), x) : p;
 }, Zc = ({ content: e }) => {
   const t = de(), r = C((c) => c.coordSystem), n = xc(), o = Pt(n.heading), a = Pt(n.label), i = Pt(n.value), l = { paddingInline: n.box.paddingInline };
-  return /* @__PURE__ */ b("div", {
+  return /* @__PURE__ */ w("div", {
     className: Gc,
     style: $c(n.box),
     "data-testid": "chart-tooltip-body",
@@ -3393,7 +3393,7 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     Ft(nt)
   ],
   elements: { reference: r }
-}), rd = ({ row: e, swatchShape: t, shouldHighlight: r, labelStyle: n, valueStyle: o, paddingInline: a, highlightBackground: i }) => /* @__PURE__ */ b("div", {
+}), rd = ({ row: e, swatchShape: t, shouldHighlight: r, labelStyle: n, valueStyle: o, paddingInline: a, highlightBackground: i }) => /* @__PURE__ */ w("div", {
   className: Vc,
   style: {
     paddingInline: a,
@@ -3428,8 +3428,8 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
   plansByLayerId: null,
   coordKey: null,
   introEndsAtMs: 0
-}, er = U(it), nd = ({ intro: e, children: t }) => {
-  const { layers: r, coordSystem: n, scales: o } = C(z((i) => ({
+}, er = Q(it), nd = ({ intro: e, children: t }) => {
+  const { layers: r, coordSystem: n, scales: o } = C(j((i) => ({
     layers: i.layers,
     coordSystem: i.coordSystem,
     scales: i.scales
@@ -3473,14 +3473,14 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     introEndsAtMs: performance.now() + i * 1e3
   };
 }, sd = (e) => Math.max(0, e - performance.now()), vo = (e) => e.type === "cartesian" ? `cartesian-${e.mainAxis}` : e.type, go = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => {
     const r = {};
     for (const n of Vt) r[n] = si(e, n, t);
     return r;
   }, [e, t]);
 }, bt = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => {
     const r = {};
     for (const n of ua) {
@@ -3491,30 +3491,30 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     return r;
   }, [e, t]);
 }, fo = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => (r) => hi(e, r, t), [e, t]);
 }, po = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => vi(e, t), [e, t]);
 }, tr = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => pi(e, t), [e, t]);
 }, rr = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => {
     const r = {};
     for (const n of Vt) r[n] = xi(e, n, t);
     return r;
   }, [e, t]);
 }, mo = () => {
-  const e = T();
+  const e = L();
   return A(() => {
     const t = {};
     for (const r of Vt) t[r] = bi(e, r);
     return t;
   }, [e]);
 }, ld = ({ textMeasurer: e, tickLabelStyles: t, tickLineStyles: r, familyDefault: n }) => (o) => {
-  const a = o.position === "top" || o.position === "bottom", i = Ce(o.scaleAestheticKey), { offset: l, ...c } = t[i], u = o.ticksVisible ? Math.max(l, r[i].length) : l, d = K(c, n), v = o.ticks.map((h) => e.measureText(h.formattedLabel, d)), g = o.labelMaxWidthPx ?? Number.POSITIVE_INFINITY;
+  const a = o.position === "top" || o.position === "bottom", i = Ce(o.scaleAestheticKey), { offset: l, ...c } = t[i], u = o.ticksVisible ? Math.max(l, r[i].length) : l, d = z(c, n), v = o.ticks.map((h) => e.measureText(h.formattedLabel, d)), g = o.labelMaxWidthPx ?? Number.POSITIVE_INFINITY;
   if (a) {
     if (o.labelRotation !== 0) {
       const h = v.map((f) => f.width);
@@ -3524,13 +3524,13 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
   }
   return Br(v.map((h) => h.width), g) + u;
 }, Br = (e, t) => Math.min(Math.max(...e), t), cd = ({ axisLabelStyles: e }) => (t) => fe(e[Ce(t.scaleAestheticKey)]), Ao = ({ textMeasurer: e, dataLabelStyles: t, familyDefault: r }) => (n, o, a) => {
-  const i = t[n][o], l = e.measureText(a, K(i, r));
+  const i = t[n][o], l = e.measureText(a, z(i, r));
   return {
     ...l,
     width: l.width + i.paddingInline * 2,
     height: l.height + i.paddingBlock * 2
   };
-}, dd = ({ textMeasurer: e, familyDefault: t }) => (r, n) => e.measureText(r, K(n, t)), ud = ({ textMeasurer: e, familyDefault: t, headlineRowGap: r, itemGap: n, headlineItemStyles: o }) => (a, i) => {
+}, dd = ({ textMeasurer: e, familyDefault: t }) => (r, n) => e.measureText(r, z(n, t)), ud = ({ textMeasurer: e, familyDefault: t, headlineRowGap: r, itemGap: n, headlineItemStyles: o }) => (a, i) => {
   const l = yo(a, o[i], e, t, r);
   return {
     width: xo(l.map((c) => c.width)) + Math.max(0, l.length - 1) * n,
@@ -3539,7 +3539,7 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
 }, hd = ({ textMeasurer: e, familyDefault: t, headlineRowGap: r, headlineItemStyles: n }) => (o, a) => yo(o, n[a], e, t, r).map((i) => i.width), vd = ({ textMeasurer: e, familyDefault: t, headlineItemStyles: r }) => (n, o, a = !1) => {
   const i = dn(r[o], a);
   return {
-    width: e.measureText(n, K(i, t)).width,
+    width: e.measureText(n, z(i, t)).width,
     height: fe(i)
   };
 }, gd = (e) => {
@@ -3558,7 +3558,7 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
   let o = 0, a = 0;
   for (const i of e.segments) if (i.kind === "text") {
     const l = pd(t, i.textRole);
-    o += r.measureText(i.text, K(l, n)).width, a = Math.max(a, md(l));
+    o += r.measureText(i.text, z(l, n)).width, a = Math.max(a, md(l));
   } else
     o += i.size, a = Math.max(a, i.size);
   return {
@@ -3590,21 +3590,21 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
   if (a.display === "direct") {
     const m = fe(n);
     if (i) return m;
-    const p = K(n, t), y = a.items.map((w) => e.measureText(w.formattedLabel, p).width);
-    return Math.max(...y);
+    const p = z(n, t), x = a.items.map((b) => e.measureText(b.formattedLabel, p).width);
+    return Math.max(...x);
   }
-  const { item: l, swatch: c } = r, u = fe(l), d = K(l, t), v = 2 * (l.paddingBlock + l.borderWidth), g = 2 * (l.paddingInline + l.borderWidth), h = a.aesthetics.includes("size");
+  const { item: l, swatch: c } = r, u = fe(l), d = z(l, t), v = 2 * (l.paddingBlock + l.borderWidth), g = 2 * (l.paddingInline + l.borderWidth), h = a.aesthetics.includes("size");
   if (i) {
     const m = h ? Math.max(0, ...a.items.map((p) => ht(p.visual, c.size, !0))) : c.size;
     return Math.max(u, m) + v;
   }
   const f = a.items.map((m) => {
-    const p = e.measureText(m.formattedLabel, d).width, y = ht(m.visual, c.size, h);
-    return y + (y > 0 ? o : 0) + p;
+    const p = e.measureText(m.formattedLabel, d).width, x = ht(m.visual, c.size, h);
+    return x + (x > 0 ? o : 0) + p;
   });
   return Math.max(...f) + g;
-}, bd = ({ textMeasurer: e, tickLabelStyles: t, familyDefault: r }) => (n, o) => e.measureText(n, K(t[o], r)), wd = Object.freeze({}), Sd = ({ textMeasurer: e, textScale: t, metrics: r, overrides: n = wd }) => {
-  const o = go(), a = bt(), i = po(), l = tr(), c = rr(), u = mo(), d = T(), v = I(n);
+}, bd = ({ textMeasurer: e, tickLabelStyles: t, familyDefault: r }) => (n, o) => e.measureText(n, z(t[o], r)), wd = Object.freeze({}), Sd = ({ textMeasurer: e, textScale: t, metrics: r, overrides: n = wd }) => {
+  const o = go(), a = bt(), i = po(), l = tr(), c = rr(), u = mo(), d = L(), v = T(n);
   return v.current = n, A(() => {
     if (!e) return null;
     const g = r.fonts.familyDefault, h = {
@@ -3628,27 +3628,27 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
       legendItemStyle: l,
       directLabelStyle: i,
       legendSwatchGap: r.legendSwatchGap
-    }), y = gd(h), w = hd(h), k = {
-      measureText: (R, P) => e.measureText(R, P),
+    }), x = gd(h), b = hd(h), R = {
+      measureText: (S, P) => e.measureText(S, P),
       textScale: t
     };
     return {
-      measureAxis: (R) => {
-        if (Rd(R)) return 0;
+      measureAxis: (S) => {
+        if (Rd(S)) return 0;
         const P = v.current.measureAxis;
-        return P ? P(R, k) : f(R);
+        return P ? P(S, R) : f(S);
       },
-      measureAxisLabel: (R) => {
+      measureAxisLabel: (S) => {
         const P = v.current.measureAxisLabel;
-        return P ? P(R, k) : m(R);
+        return P ? P(S, R) : m(S);
       },
-      measureLegend: (R) => {
-        if (Cd(R)) return 0;
+      measureLegend: (S) => {
+        if (Cd(S)) return 0;
         const P = v.current.measureLegend;
-        return P ? P(R, k) : p(R);
+        return P ? P(S, R) : p(S);
       },
-      measureHeadline: (R, P, E) => (v.current.measureHeadline ?? y)(R, P, E),
-      measureHeadlineItemWidths: (R, P) => (v.current.measureHeadlineItemWidths ?? w)(R, P),
+      measureHeadline: (S, P, E) => (v.current.measureHeadline ?? x)(S, P, E),
+      measureHeadlineItemWidths: (S, P) => (v.current.measureHeadlineItemWidths ?? b)(S, P),
       measureTickLabel: bd({
         textMeasurer: e,
         tickLabelStyles: c,
@@ -3715,11 +3715,11 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     e
   ]);
 }, Rd = (e) => !e.isVisible || e.ticks.length === 0, Cd = (e) => e.items.length === 0, Ed = () => {
-  const { formattingLocale: e } = j(), t = C((r) => r.config.parsingLocale);
+  const { formattingLocale: e } = W(), t = C((r) => r.config.parsingLocale);
   return e ?? t;
-}, Ir = 0.5, bo = U(/* @__PURE__ */ new Map()), wo = U(() => {
-}), So = U(/* @__PURE__ */ new Set()), Pd = ({ children: e }) => {
-  const [t, r] = G(() => /* @__PURE__ */ new Map()), [n] = G(() => /* @__PURE__ */ new Set()), o = I(/* @__PURE__ */ new Map()), a = se((i, l, c) => {
+}, Ir = 0.5, bo = Q(/* @__PURE__ */ new Map()), wo = Q(() => {
+}), So = Q(/* @__PURE__ */ new Set()), Pd = ({ children: e }) => {
+  const [t, r] = G(() => /* @__PURE__ */ new Map()), [n] = G(() => /* @__PURE__ */ new Set()), o = T(/* @__PURE__ */ new Map()), a = se((i, l, c) => {
     const u = o.current.get(i) ?? /* @__PURE__ */ new Set();
     if (c !== null) {
       u.add(l), o.current.set(i, u), r((d) => Nd(d, i, c));
@@ -3738,7 +3738,7 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     })
   });
 }, Bd = () => D(bo), Id = () => D(wo), Td = (e) => {
-  const t = Id(), r = V(), n = I(null);
+  const t = Id(), r = U(), n = T(null);
   return F(() => {
     if (typeof ResizeObserver > "u") return;
     const o = n.current;
@@ -3806,7 +3806,7 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
     ...r.caret,
     editor: t
   } })
-})), nr = U(null), jd = Ro(), kf = ({ children: e }) => {
+})), nr = Q(null), jd = Ro(), kf = ({ children: e }) => {
   const [t] = G(() => Ro());
   return /* @__PURE__ */ s(nr.Provider, {
     value: t,
@@ -3820,7 +3820,7 @@ var Wc = "_19519k82", Vc = "_19519k83", Uc = "_19519k85", Qc = "_19519k86", Yc =
 function ue(e) {
   return je(D(nr) ?? jd, e);
 }
-var Co = U(null), Xd = ({ panelRect: e, children: t }) => {
+var Co = Q(null), Xd = ({ panelRect: e, children: t }) => {
   const r = Jd(e);
   return /* @__PURE__ */ s(Co.Provider, {
     value: r,
@@ -3834,7 +3834,7 @@ var Co = U(null), Xd = ({ panelRect: e, children: t }) => {
   start: r(e.start),
   end: r(e.end)
 }) ?? t.color, Jd = (e) => {
-  const { formattingLocale: t } = j(), r = pe(), { fonts: n } = Ie(), o = ue((p) => Ue(p, "difference-arrow-endpoint-drag")), a = Sn(), i = fo(), { differenceArrows: l, mainAxis: c, parsingLocale: u } = C(z((p) => ({
+  const { formattingLocale: t } = W(), r = pe(), { fonts: n } = Ie(), o = ue((p) => Ue(p, "difference-arrow-endpoint-drag")), a = Sn(), i = fo(), { differenceArrows: l, mainAxis: c, parsingLocale: u } = C(j((p) => ({
     differenceArrows: p.annotations.differenceArrows,
     mainAxis: p.coordSystem.type === "cartesian" ? p.coordSystem.mainAxis : "x",
     parsingLocale: p.config.parsingLocale
@@ -3849,15 +3849,15 @@ var Co = U(null), Xd = ({ panelRect: e, children: t }) => {
     g,
     d
   ]), f = A(() => Zd(r, n.familyDefault), [r, n.familyDefault]), m = A(() => l.map((p) => {
-    const y = i(p.id), w = Lr(p, y, h, f);
+    const x = i(p.id), b = Lr(p, x, h, f);
     return {
-      ...w,
+      ...b,
       arrow: p,
-      style: y,
-      color: Tr(p, y, a),
+      style: x,
+      color: Tr(p, x, a),
       committedArrow: p,
-      committedLabelBox: w.labelBox,
-      committedLabelText: w.labelText,
+      committedLabelBox: b.labelBox,
+      committedLabelText: b.labelText,
       isDragged: !1,
       hasComparableEndpoints: vr(p.start, p.end)
     };
@@ -3870,17 +3870,17 @@ var Co = U(null), Xd = ({ panelRect: e, children: t }) => {
   ]);
   return A(() => o === null ? m : m.map((p) => {
     if (p.id !== o.annotationId) return p;
-    const y = $d(p.committedArrow, o);
+    const x = $d(p.committedArrow, o);
     return {
-      ...Lr(y, p.style, h, f),
+      ...Lr(x, p.style, h, f),
       style: p.style,
-      color: Tr(y, p.style, a),
-      arrow: y,
+      color: Tr(x, p.style, a),
+      arrow: x,
       committedArrow: p.committedArrow,
       committedLabelBox: p.committedLabelBox,
       committedLabelText: p.committedLabelText,
       isDragged: !0,
-      hasComparableEndpoints: vr(y.start, y.end)
+      hasComparableEndpoints: vr(x.start, x.end)
     };
   }), [
     m,
@@ -3906,7 +3906,7 @@ var Co = U(null), Xd = ({ panelRect: e, children: t }) => {
 }, Zd = (e, t) => {
   const r = /* @__PURE__ */ new Map();
   return (n, o) => {
-    const a = K(o, t), i = `${a.family}|${a.size}|${a.weight}|${n}`, l = r.get(i);
+    const a = z(o, t), i = `${a.family}|${a.size}|${a.weight}|${n}`, l = r.get(i);
     if (l !== void 0) return l;
     const { width: c } = e.measureText(n, a);
     return r.set(i, c), c;
@@ -3951,8 +3951,8 @@ var ou = "vultop2", au = "vultop3", iu = "vultop4", su = "vultop5", lu = "vultop
   };
   return 0.2126 * n(e) + 0.7152 * n(t) + 0.0722 * n(r);
 }, vu = (e, t, r = "full") => !e || t.width < 120 || t.height < 80 ? "hidden" : t.width < 200 || r === "mini" ? "mini" : "full", Eo = ({ visual: e, placement: t }) => {
-  const { background: r } = cn(T()), n = du(r);
-  return /* @__PURE__ */ b("a", {
+  const { background: r } = cn(L()), n = du(r);
+  return /* @__PURE__ */ w("a", {
     className: Ye(nu, e === "mini" && "vultop1", t === "footer" ? lu : cu),
     href: tu,
     target: "_blank",
@@ -3963,7 +3963,7 @@ var ou = "vultop2", au = "vultop3", iu = "vultop4", su = "vultop5", lu = "vultop
     children: [/* @__PURE__ */ s("span", {
       className: ou,
       children: /* @__PURE__ */ s(eu, { className: au })
-    }), /* @__PURE__ */ b("span", {
+    }), /* @__PURE__ */ w("span", {
       className: iu,
       children: [/* @__PURE__ */ s("span", { children: "Made with" }), /* @__PURE__ */ s("span", {
         className: su,
@@ -3971,7 +3971,7 @@ var ou = "vultop2", au = "vultop3", iu = "vultop4", su = "vultop5", lu = "vultop
       })]
     })]
   });
-}, Po = U({
+}, Po = Q({
   Title: null,
   Caption: null,
   TextAnnotation: null
@@ -3982,7 +3982,7 @@ var ou = "vultop2", au = "vultop3", iu = "vultop4", su = "vultop5", lu = "vultop
 var gu = "_4dlrid1", fu = "xfz7dq0";
 var pu = "xfz7dq2", mu = "xfz7dq3", Au = "xfz7dq4", yu = "xfz7dq5", xu = ({ ref: e, footerRect: t, mode: r = "readonly", caption: n, isCaptionVisible: o, source: a, isSourceVisible: i, brandMark: l }) => {
   const { Caption: c } = or(), u = r === "editable" ? c : null, d = o && (u !== null || n !== null), v = i && a !== null && ku(a), g = l !== "hidden";
-  return !d && !v && !g ? null : /* @__PURE__ */ b("div", {
+  return !d && !v && !g ? null : /* @__PURE__ */ w("div", {
     ref: e,
     className: fu,
     style: {
@@ -3990,7 +3990,7 @@ var pu = "xfz7dq2", mu = "xfz7dq3", Au = "xfz7dq4", yu = "xfz7dq5", xu = ({ ref:
       top: t.y,
       width: t.width
     },
-    children: [d ? u ? /* @__PURE__ */ s(u, { caption: n }) : /* @__PURE__ */ s(bu, { caption: n }) : null, (v || g) && /* @__PURE__ */ b("div", {
+    children: [d ? u ? /* @__PURE__ */ s(u, { caption: n }) : /* @__PURE__ */ s(bu, { caption: n }) : null, (v || g) && /* @__PURE__ */ w("div", {
       className: "xfz7dq1",
       children: [v && /* @__PURE__ */ s(wu, { source: a }), l !== "hidden" ? /* @__PURE__ */ s(Eo, {
         visual: l,
@@ -4003,7 +4003,7 @@ var pu = "xfz7dq2", mu = "xfz7dq3", Au = "xfz7dq4", yu = "xfz7dq5", xu = ({ ref:
   children: e
 }) : /* @__PURE__ */ s(Re, { content: e }), wu = ({ source: e }) => {
   const t = Kt(e.url) ? e.url : void 0, r = e.label ?? (t !== void 0 ? Su(t) : "");
-  return r === "" && t === void 0 ? null : /* @__PURE__ */ b("span", {
+  return r === "" && t === void 0 ? null : /* @__PURE__ */ w("span", {
     className: pu,
     children: [/* @__PURE__ */ s("span", {
       className: Au,
@@ -4028,7 +4028,7 @@ var pu = "xfz7dq2", mu = "xfz7dq3", Au = "xfz7dq4", yu = "xfz7dq5", xu = ({ ref:
 }, ku = (e) => e.label !== void 0 && e.label !== "" || e.url !== void 0 && e.url !== "" && Kt(e.url), Ru = "_1k4qtbg0";
 var Cu = 22, Eu = ({ ref: e, headerRect: t, mode: r = "readonly", title: n, isTitleVisible: o, subtitle: a, isSubtitleVisible: i, brandMark: l }) => {
   const { Title: c } = or(), u = r === "editable" ? c : null, d = u !== null, v = o && (d || n !== null), g = i && (d || a !== null), h = l !== "hidden";
-  return !v && !g && !h ? null : /* @__PURE__ */ b("div", {
+  return !v && !g && !h ? null : /* @__PURE__ */ w("div", {
     ref: e,
     className: Ye(Ru, h && "_1k4qtbg1"),
     style: {
@@ -4052,21 +4052,21 @@ var Cu = 22, Eu = ({ ref: e, headerRect: t, mode: r = "readonly", title: n, isTi
       placement: "header"
     }) : null]
   });
-}, Pu = ({ title: e, isTitleVisible: t, isSubtitleVisible: r, subtitle: n }) => /* @__PURE__ */ b(B, { children: [t && e !== null && (typeof e == "string" ? /* @__PURE__ */ s("h1", {
+}, Pu = ({ title: e, isTitleVisible: t, isSubtitleVisible: r, subtitle: n }) => /* @__PURE__ */ w(B, { children: [t && e !== null && (typeof e == "string" ? /* @__PURE__ */ s("h1", {
   className: "_4dlrid0",
   children: e
 }) : /* @__PURE__ */ s(Re, { content: e })), r && n !== null && (typeof n == "string" ? /* @__PURE__ */ s("p", {
   className: "_4dlrid1",
   children: n
 }) : /* @__PURE__ */ s(Re, { content: n }))] }), Bu = (e) => {
-  const t = T(), r = C((n) => n.config.appearance.textScale);
+  const t = L(), r = C((n) => n.config.appearance.textScale);
   return A(() => at(t, r, e), [
     t,
     r,
     e
   ]);
 }, Bo = () => {
-  const e = T();
+  const e = L();
   return A(() => un(e), [e]);
 }, Iu = "_1u9qprb0", Tu = "_1u9qprb1", Lu = /* @__PURE__ */ Mi({
   groupRow: () => Fu,
@@ -4084,8 +4084,8 @@ var Cu = 22, Eu = ({ ref: e, headerRect: t, mode: r = "readonly", title: n, isTi
   primary: "asohov1 asohov0",
   secondary: "asohov2 asohov0"
 }, To = ({ children: e, title: t, variant: r = "primary", size: n = "sm", ...o }) => {
-  const a = V(), i = Du[n];
-  return /* @__PURE__ */ b("svg", {
+  const a = U(), i = Du[n];
+  return /* @__PURE__ */ w("svg", {
     className: Hu[r],
     "aria-labelledby": t ? a : void 0,
     height: i,
@@ -4101,7 +4101,7 @@ var Cu = 22, Eu = ({ ref: e, headerRect: t, mode: r = "readonly", title: n, isTi
   });
 }, Ou = (e) => /* @__PURE__ */ s(To, {
   ...e,
-  children: /* @__PURE__ */ b("g", {
+  children: /* @__PURE__ */ w("g", {
     stroke: "currentColor",
     strokeWidth: 2,
     strokeLinecap: "round",
@@ -4133,7 +4133,7 @@ var Yu = ({ segment: e, itemStyle: t }) => {
       className: Oe(Qu, e.direction === "down" && "n7clvo4"),
       style: {
         color: a,
-        backgroundColor: e.direction === "flat" ? O(x.textPrimary, 0.1) : O(a, 0.2)
+        backgroundColor: e.direction === "flat" ? O(y.textPrimary, 0.1) : O(a, 0.2)
       },
       children: e.direction === "flat" ? /* @__PURE__ */ s(Gu, {
         size: "xs",
@@ -4247,7 +4247,7 @@ var $u = "_1oj6yix2", _u = 8, eh = 16, th = 2, rh = ({ legends: e, containerRect
   const r = po(), n = fe(r), { placements: o, hasOverlap: a } = nh(e, t, n), i = ah(r);
   if (o.length === 0) return null;
   const l = a ? eh : _u, c = l - th, u = ft(r.lineType);
-  return /* @__PURE__ */ b("div", {
+  return /* @__PURE__ */ w("div", {
     className: Zu,
     children: [a && /* @__PURE__ */ s("svg", {
       className: "_1oj6yix1",
@@ -4311,7 +4311,7 @@ var $u = "_1oj6yix2", _u = 8, eh = 16, th = 2, rh = ({ legends: e, containerRect
   ...le(e),
   lineHeight: e.lineHeight
 }), ih = "_6a636s0", sh = () => {
-  const e = T();
+  const e = L();
   return A(() => mi(e), [e]);
 }, lh = "_1kjk02r0", ch = "_1kjk02r1", dh = "_1kjk02r2", uh = "_1kjk02r3", hh = "_1kjk02r4", vh = "_1kjk02r5", gh = "_1kjk02r6", fh = "_1kjk02r7", ph = "_1kjk02r8";
 var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
@@ -4346,14 +4346,14 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     height: o.size,
     strokeWidth: o.strokeWidth
   }) : null;
-}, bh = ({ pill: e }) => /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s(xh, {
+}, bh = ({ pill: e }) => /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s(xh, {
   color: e.visual.color,
   lineType: e.primaryLineType,
   shape: e.swatchShape,
   label: e.formattedLabel
 }), /* @__PURE__ */ s("span", { children: e.formattedLabel })] }), wh = ({ pill: e }) => {
   const t = Number(e.visual.size);
-  return /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("span", {
+  return /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("span", {
     className: mh,
     style: {
       width: t,
@@ -4390,7 +4390,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     a.reference
   ]);
   const l = t === "left" || t === "right", c = Math.min(e.length - 1, 2), u = Array.from({ length: c }, (d, v) => c - v);
-  return /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ b("div", {
+  return /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ w("div", {
     ref: a.setReference,
     className: Oe(lh, {
       [dh]: l,
@@ -4410,7 +4410,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
       "aria-haspopup": "dialog",
       "aria-expanded": n,
       "aria-label": `Show ${e.length} hidden legend ${e.length === 1 ? "item" : "items"}`,
-      children: /* @__PURE__ */ b("span", {
+      children: /* @__PURE__ */ w("span", {
         className: ph,
         children: ["+", e.length]
       })
@@ -4440,7 +4440,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
   right: "_1cecisi6",
   left: "_1cecisi7"
 }, Ih = "_1cecisi8", Th = ({ edge: e, formattedLegends: t, containerWidth: r, containerHeight: n, textScale: o }) => {
-  const a = pe(), i = Ie(), l = sh(), c = tr(), u = de(), d = C((R) => R.coordSystem.type), v = A(() => yh(t, (R) => u(R, d)?.swatchShape ?? "square"), [
+  const a = pe(), i = Ie(), l = sh(), c = tr(), u = de(), d = C((S) => S.coordSystem.type), v = A(() => yh(t, (S) => u(S, d)?.swatchShape ?? "square"), [
     t,
     u,
     d
@@ -4453,23 +4453,23 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
       visibleCount: v.length,
       hasOverflow: !1
     };
-    const R = K(c.item, i.fonts.familyDefault), P = fe(c.item), E = 2 * (c.item.paddingInline + c.item.borderWidth), L = 2 * (c.item.paddingBlock + c.item.borderWidth), M = (ye) => g ? Lh(ye, P, c.swatch.size, L) : Nr({
+    const S = z(c.item, i.fonts.familyDefault), P = fe(c.item), E = 2 * (c.item.paddingInline + c.item.borderWidth), N = 2 * (c.item.paddingBlock + c.item.borderWidth), M = (ye) => g ? Lh(ye, P, c.swatch.size, N) : Nr({
       label: ye.formattedLabel,
       swatchInlineSize: Nh(ye, c.swatch.size),
       textMeasurer: a,
-      font: R,
+      font: S,
       swatchGap: i.legendSwatchGap,
       horizontalChrome: E
-    }), W = v.map(M), Y = On(i.fonts.legendLabel, o), Te = Ad(i.fonts.legendLabel, o), Ae = (g ? Te + i.legendPillVerticalChrome : Nr({
+    }), V = v.map(M), K = On(i.fonts.legendLabel, o), Te = Ad(i.fonts.legendLabel, o), Ae = (g ? Te + i.legendPillVerticalChrome : Nr({
       label: `+${v.length}`,
       swatchInlineSize: 0,
       textMeasurer: a,
-      font: Y,
+      font: K,
       swatchGap: i.legendSwatchGap,
       horizontalChrome: i.legendPillHorizontalChrome
     })) + 8;
     return Fh({
-      pillSizes: W,
+      pillSizes: V,
       overflowPillSize: Ae,
       containerSize: h,
       gap: l.gap
@@ -4485,20 +4485,20 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     c
   ]);
   if (v.length === 0) return null;
-  const p = v.slice(0, m.visibleCount), y = v.slice(m.visibleCount), w = m.hasOverflow && y.length > 0, k = Hh(c.item);
-  return /* @__PURE__ */ b("div", {
+  const p = v.slice(0, m.visibleCount), x = v.slice(m.visibleCount), b = m.hasOverflow && x.length > 0, R = Hh(c.item);
+  return /* @__PURE__ */ w("div", {
     className: Oe(Ph[f], Rh, {
       [Eh]: g,
       [Ch]: !g,
       [Bh[e === "left" ? "left" : "right"]]: g
     }),
     style: { gap: l.gap },
-    children: [p.map((R) => /* @__PURE__ */ s("div", {
+    children: [p.map((S) => /* @__PURE__ */ s("div", {
       className: Ih,
-      style: k,
-      children: /* @__PURE__ */ s(No, { pill: R })
-    }, R.key)), w && /* @__PURE__ */ s(Sh, {
-      hiddenPills: y,
+      style: R,
+      children: /* @__PURE__ */ s(No, { pill: S })
+    }, S.key)), b && /* @__PURE__ */ s(Sh, {
+      hiddenPills: x,
       placement: Dh(e)
     })]
   });
@@ -4564,7 +4564,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
   }, [t]);
   return /* @__PURE__ */ s(B, { children: Array.from(o, ([a, i]) => {
     const l = r[a];
-    return l === void 0 ? null : /* @__PURE__ */ b("div", {
+    return l === void 0 ? null : /* @__PURE__ */ w("div", {
       className: ih,
       style: {
         left: l.x,
@@ -4590,7 +4590,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
   const a = n(o.geom, r.type);
   return a ? a.guideMode ?? null : null;
 }, Mo = 1, Fo = "4 3", Wh = ({ panelRect: e }) => {
-  const { coordSystem: t, layers: r, scales: n } = C(z((l) => ({
+  const { coordSystem: t, layers: r, scales: n } = C(j((l) => ({
     coordSystem: l.coordSystem,
     layers: l.layers,
     scales: l.scales
@@ -4626,7 +4626,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     panelRect: r,
     children: /* @__PURE__ */ s("line", {
       ...n,
-      stroke: x.hoverGuideLineColor,
+      stroke: y.hoverGuideLineColor,
       strokeWidth: Mo,
       strokeDasharray: Fo,
       strokeLinecap: "round",
@@ -4639,7 +4639,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     panelRect: n,
     children: /* @__PURE__ */ s("rect", {
       ...o,
-      fill: x.hoverGuideFillColor,
+      fill: y.hoverGuideFillColor,
       "data-testid": "hover-guide-rect"
     })
   });
@@ -4652,7 +4652,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
       y1: o.y,
       x2: a.x,
       y2: a.y,
-      stroke: x.hoverGuideLineColor,
+      stroke: y.hoverGuideLineColor,
       strokeWidth: Mo,
       strokeDasharray: Fo,
       strokeLinecap: "round",
@@ -4673,7 +4673,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
       style: { overflow: "visible" },
       children: /* @__PURE__ */ s("path", {
         d: o,
-        fill: x.hoverGuideFillColor,
+        fill: y.hoverGuideFillColor,
         "data-testid": "hover-guide-arc"
       })
     })
@@ -4788,13 +4788,13 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     if (f === null) return;
     const m = i(h, f), p = r.getState();
     if (p.isPointerSuspended) return;
-    const y = gr(m, p.pointerRegions);
-    if (y !== null) {
-      p.setHoverState(t.query(y.cursor)), p.setTooltipAnchor(_h(y.tooltip, f));
+    const x = gr(m, p.pointerRegions);
+    if (x !== null) {
+      p.setHoverState(t.query(x.cursor)), p.setTooltipAnchor(_h(x.tooltip, f));
       return;
     }
-    const w = Si(m, f);
-    p.setHoverState(t.query(w)), p.setTooltipAnchor(null);
+    const b = Si(m, f);
+    p.setHoverState(t.query(b)), p.setTooltipAnchor(null);
   }, c = () => {
     const h = r.getState();
     h.hover.primary === null && h.tooltipAnchor === null || (h.setHoverState(st), h.setTooltipAnchor(null));
@@ -4854,7 +4854,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
       };
   }, [e, r]);
 }, ov = () => {
-  const e = T();
+  const e = L();
   return A(() => (t) => ai(e, t), [e]);
 }, St = () => ue((e) => Ue(e, "move-drag")?.annotationId ?? Ue(e, "shape-resize-drag")?.annotationId ?? Ue(e, "arrow-endpoint-drag")?.annotationId ?? null), Je = (e) => {
   const t = C((i) => i.annotations), r = Bd(), n = Ld(), o = se((i) => Mr(n, "cycle", i, `Annotation reference cycle detected; dropping annotation(s): ${i.join(", ")}`), [n]), a = se((i) => Mr(n, "missing-ref", i, `Annotation reference target(s) no longer exist (dropped during compilation); dropping annotations referencing: ${i.join(", ")}`), [n]);
@@ -4890,11 +4890,11 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     inverse: "#1D2129"
   }
 }, lv = ({ computed: e, style: t, isAddressable: r }) => {
-  const n = V(), { colorScheme: o } = _t(), a = e.dashArray ? {
+  const n = U(), { colorScheme: o } = _t(), a = e.dashArray ? {
     strokeDasharray: e.dashArray,
     strokeDashoffset: e.dashOffset
   } : {}, i = t.shadow === "none" ? null : t.shadow, l = t.borderWidth > 0, c = sv[o], u = t.borderColor ?? uv(t.color, c.primary, c.inverse), d = i === null ? null : dv(e, t.borderWidth, i.blur);
-  return /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w("g", {
     pointerEvents: r ? void 0 : "none",
     children: [
       r && /* @__PURE__ */ s(Oo, {
@@ -4912,7 +4912,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
           floodColor: i.color
         })
       }) }),
-      /* @__PURE__ */ b("g", {
+      /* @__PURE__ */ w("g", {
         filter: i === null ? void 0 : `url(#${n})`,
         children: [
           l && /* @__PURE__ */ s("path", {
@@ -5001,7 +5001,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     }, i.id))
   });
 }, vv = () => {
-  const { selectionStore: e } = j();
+  const { selectionStore: e } = W();
   return je(e, (t) => t.selection);
 }, gv = ({ linePath: e, arrowheadPath: t, stroke: r, strokeWidth: n, isAddressable: o }) => {
   const a = {
@@ -5010,7 +5010,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     strokeLinecap: "round",
     fill: "none"
   };
-  return /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w("g", {
     pointerEvents: o ? void 0 : "none",
     children: [
       o && /* @__PURE__ */ s(Oo, {
@@ -5030,7 +5030,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
   });
 }, fv = ({ x: e, y: t, text: r, box: n, label: o, arrowColor: a, isAddressable: i }) => {
   const { fonts: l } = Ie();
-  return /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w("g", {
     pointerEvents: i ? void 0 : "none",
     children: [/* @__PURE__ */ s("rect", {
       x: n.x,
@@ -5064,10 +5064,10 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     transform: `translate(${e.x}, ${e.y})`,
     "data-testid": "difference-arrows",
     children: r.map(({ color: i, style: l, id: c, linePath: u, arrowheadPath: d, labelPosition: v, labelBox: g, labelText: h, isDragged: f, hasComparableEndpoints: m }) => {
-      const p = n === c || a.has(c), y = f && !m, w = y ? x.alert : i, k = p && !y ? yv(w) : w;
-      return /* @__PURE__ */ b("g", {
+      const p = n === c || a.has(c), x = f && !m, b = x ? y.alert : i, R = p && !x ? yv(b) : b;
+      return /* @__PURE__ */ w("g", {
         className: n === c ? pv : void 0,
-        "data-warning": y || void 0,
+        "data-warning": x || void 0,
         ...qe({
           kind: "annotation",
           id: c
@@ -5075,7 +5075,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
         children: [/* @__PURE__ */ s(gv, {
           linePath: u,
           arrowheadPath: d,
-          stroke: k,
+          stroke: R,
           strokeWidth: l.strokeWidth,
           isAddressable: t
         }), /* @__PURE__ */ s(fv, {
@@ -5084,22 +5084,22 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
           text: h,
           box: g,
           label: l.label,
-          arrowColor: k,
+          arrowColor: R,
           isAddressable: t
         })]
       }, c);
     })
   });
-}, yv = (e) => `color-mix(in srgb, ${e} ${mv}, ${x.textPrimary})`, xv = () => {
-  const e = T();
+}, yv = (e) => `color-mix(in srgb, ${e} ${mv}, ${y.textPrimary})`, xv = () => {
+  const e = L();
   return A(() => (t) => fi(e, t), [e]);
 }, bv = {
   fill: "none",
   contain: "xMidYMid meet",
   cover: "xMidYMid slice"
 }, wv = ({ image: e, panel: t, style: r }) => {
-  const n = V(), { src: o, region: a, fit: i } = e, l = zt(a, t), c = r.borderRadius > 0;
-  return /* @__PURE__ */ b("g", { children: [c && /* @__PURE__ */ s("clipPath", {
+  const n = U(), { src: o, region: a, fit: i } = e, l = zt(a, t), c = r.borderRadius > 0;
+  return /* @__PURE__ */ w("g", { children: [c && /* @__PURE__ */ s("clipPath", {
     id: n,
     children: /* @__PURE__ */ s("rect", {
       ...l,
@@ -5134,7 +5134,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     }, i.id))
   });
 }, Sv = () => {
-  const e = T();
+  const e = L();
   return A(() => (t) => gn(e, t), [e]);
 }, kv = ({ shape: e, style: t, panel: r }) => {
   const n = zt(e.region, r);
@@ -5170,7 +5170,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     }, i.id))
   });
 }, Rv = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => (r) => yi(e, r, t), [e, t]);
 }, Cv = "_1aj6s5s0", Pf = "_1aj6s5s1", Ev = 0.1, Bf = ({ annotation: e, panel: t, style: r, blockRef: n }) => /* @__PURE__ */ s(Go, {
   annotation: e,
@@ -5183,7 +5183,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
   return /* @__PURE__ */ s("foreignObject", {
     x: a.x,
     y: a.y,
-    width: S(e.width),
+    width: k(e.width),
     height: t.height,
     overflow: "visible",
     pointerEvents: "none",
@@ -5259,7 +5259,7 @@ var mh = "_1dw9dgx0", Ah = "#9ca3af", Bt = "\0", yh = (e, t) => {
     })
   });
 }, Wo = () => {
-  const e = T(), t = C((r) => r.config.appearance.textScale);
+  const e = L(), t = C((r) => r.config.appearance.textScale);
   return A(() => (r, n) => ci(e, r, n, t), [e, t]);
 }, Fv = "ph8bdc0";
 var Dv = "ph8bdc2", Hr = {
@@ -5280,7 +5280,7 @@ var Dv = "ph8bdc2", Hr = {
   });
 };
 function Ov(e) {
-  const t = pe(), { formattingLocale: r } = j(), n = Wo(), o = C(z((c) => ({
+  const t = pe(), { formattingLocale: r } = W(), n = Wo(), o = C(j((c) => ({
     pinnedNumbers: c.annotations.pinnedNumbers,
     comments: c.annotations.comments,
     coordSystem: c.coordSystem,
@@ -5318,7 +5318,7 @@ function Ov(e) {
   ]);
 }
 var Gv = (e, t, r, n) => t !== "comment" ? r : ki(r, 140, (o) => e.measureText(o, n).width), Or = "callouts", Wv = ({ panelRect: e }) => {
-  const { pinnedNumbers: t, comments: r } = C(z((h) => ({
+  const { pinnedNumbers: t, comments: r } = C(j((h) => ({
     pinnedNumbers: h.annotations.pinnedNumbers,
     comments: h.annotations.comments
   }))), n = C((h) => h.coordSystem), o = de(), a = Sn(), i = Wo(), l = Ov(e), { store: c } = me(), u = A(() => {
@@ -5357,8 +5357,8 @@ var Gv = (e, t, r, n) => t !== "comment" ? r : ki(r, 140, (o) => e.measureText(o
       if (!h.inView) return null;
       const f = u.get(h.id), m = v.get(h.id);
       if (f === void 0 || m === void 0) return null;
-      const p = d.get(h.id), y = h.miniRect.width <= e.width && h.miniRect.height <= e.height;
-      return /* @__PURE__ */ b("g", {
+      const p = d.get(h.id), x = h.miniRect.width <= e.width && h.miniRect.height <= e.height;
+      return /* @__PURE__ */ w("g", {
         "data-testid": h.kind,
         children: [/* @__PURE__ */ s("foreignObject", {
           x: h.miniRect.x,
@@ -5366,8 +5366,8 @@ var Gv = (e, t, r, n) => t !== "comment" ? r : ki(r, 140, (o) => e.measureText(o
           width: h.miniRect.width,
           height: h.miniRect.height,
           overflow: "visible",
-          children: /* @__PURE__ */ b("div", {
-            className: y ? Hr.hittable : Hr.inert,
+          children: /* @__PURE__ */ w("div", {
+            className: x ? Hr.hittable : Hr.inert,
             style: Uv(m.label),
             children: [h.kind === "pinned-number" && /* @__PURE__ */ s("span", {
               className: "ph8bdc1",
@@ -5483,7 +5483,7 @@ var Gv = (e, t, r, n) => t !== "comment" ? r : ki(r, 140, (o) => e.measureText(o
 }, Jv = "_1agclyl0";
 var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotated: a, target: i, position: l, coordType: c, backdropColor: u }) => {
   const d = bt(), v = a ? `rotate(-90 ${e} ${t})` : void 0, g = d[i][l], h = g.borderColor !== void 0 && (g.borderWidth ?? 0) > 0, f = eg(i, c, g), m = _v(g, f, u);
-  return /* @__PURE__ */ b("g", {
+  return /* @__PURE__ */ w("g", {
     transform: v,
     children: [f && /* @__PURE__ */ s("rect", {
       className: "_1agclyl1",
@@ -5515,7 +5515,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
   if (r !== void 0)
     return Pa(t ? e.background : void 0, r);
 }, eg = (e, t, r) => r.background === void 0 ? !1 : e === "aggregate" || t === "cartesian", tg = ({ panelRect: e, formattingLocale: t, plotBottomY: r, isFooterChromeReserved: n }) => {
-  const o = pe(), a = Ie(), i = C(z((d) => ({
+  const o = pe(), a = Ie(), i = C(j((d) => ({
     layers: d.layers,
     coordSystem: d.coordSystem,
     axes: d.guides.axes,
@@ -5563,7 +5563,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
     children: u
   });
 }, rg = ({ edge: e, position: t, labelRotation: r, label: n, tickLabelStyle: o }) => {
-  const { offset: a, textColor: i } = o, l = S(t), c = {
+  const { offset: a, textColor: i } = o, l = k(t), c = {
     style: le(o),
     fill: i
   }, u = r !== 0 && (e === "top" || e === "bottom"), d = e === "top";
@@ -5625,7 +5625,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
   };
 }, ag = ({ formattedAxis: e, rect: t }) => {
   const r = e.position === "bottom" || e.position === "top", n = Ce(e.scaleAestheticKey), o = rr()[n], a = mo()[n];
-  return /* @__PURE__ */ b("svg", {
+  return /* @__PURE__ */ w("svg", {
     x: t.x,
     y: t.y,
     width: t.width,
@@ -5633,7 +5633,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
     style: { overflow: "visible" },
     children: [!1, e.ticks.map((i, l) => {
       const c = i.formattedLabel, u = r ? i.position : 1 - i.position, d = ig(e.position, u, t, a.length);
-      return /* @__PURE__ */ b("g", { children: [e.ticksVisible && /* @__PURE__ */ s("line", {
+      return /* @__PURE__ */ w("g", { children: [e.ticksVisible && /* @__PURE__ */ s("line", {
         ...d,
         stroke: a.color,
         strokeWidth: a.strokeWidth,
@@ -5648,7 +5648,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
     })]
   });
 }, ig = (e, t, r, n) => {
-  const o = S(t);
+  const o = k(t);
   switch (e) {
     case "bottom":
       return {
@@ -5685,7 +5685,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
     const o = t[n.position];
     if (!o || !n.isVisible) return null;
     const a = lg(n.position, o), i = r[Ce(n.scaleAestheticKey)];
-    return /* @__PURE__ */ b("g", {
+    return /* @__PURE__ */ w("g", {
       transform: `translate(${o.x}, ${o.y})`,
       children: [!1, /* @__PURE__ */ s("text", {
         style: le(i),
@@ -5717,7 +5717,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
   strokeDashoffset: "0",
   strokeLinecap: "round"
 }, ug = ({ axes: e, panelBorderSizes: t, panelFrameRect: r, panelRect: n }) => {
-  const o = T(), a = n.x - r.x, i = n.y - r.y;
+  const o = L(), a = n.x - r.x, i = n.y - r.y;
   return /* @__PURE__ */ s("svg", {
     "data-testid": "grid",
     x: r.x,
@@ -5761,7 +5761,7 @@ var Zv = "_1agclyl2", Uo = ({ x: e, y: t, width: r, height: n, text: o, isRotate
     })
   });
 }, hg = (e, t) => t <= 0 ? e ? "left" : "bottom" : t >= 1 ? e ? "right" : "top" : null, vg = ({ sizes: e, panelFrameRect: t }) => {
-  const r = C((i) => i.coordSystem.type === "polar"), n = T(), o = A(() => hn(n), [n]);
+  const r = C((i) => i.coordSystem.type === "polar"), n = L(), o = A(() => hn(n), [n]);
   if (r) return null;
   const a = La(o, {
     x: e.left / 2,
@@ -5818,7 +5818,7 @@ var Yo = (e, t) => {
   const r = rr(), n = Yo(t, e);
   if (!n) return null;
   const { circle: o, circularAxis: a, radialAxis: i, startAngle: l, angleFor: c, radiusNormFor: u } = n, d = Ag(i, u, o.radius), v = (g) => r[Ce(g.scaleAestheticKey)];
-  return /* @__PURE__ */ b("svg", {
+  return /* @__PURE__ */ w("svg", {
     x: t.x,
     y: t.y,
     width: t.width,
@@ -5836,7 +5836,7 @@ var Yo = (e, t) => {
           ...le(v(i)),
           paintOrder: "stroke"
         },
-        stroke: x.graphBackground,
+        stroke: y.graphBackground,
         strokeWidth: fg,
         fill: v(i).textColor,
         children: g.formattedLabel
@@ -5873,10 +5873,10 @@ var Yo = (e, t) => {
   const t = Math.sin(e);
   return Math.abs(t) < 0.01 ? "middle" : t > 0 ? "start" : "end";
 }, xg = ({ formattedAxes: e, panelRect: t }) => {
-  const r = T(), n = Yo(t, e);
+  const r = L(), n = Yo(t, e);
   if (!n) return null;
   const { circle: o, circularAxis: a, radialAxis: i, innerRadius: l, angleFor: c, radiusNormFor: u } = n, d = Lt(r, "y"), v = Lt(r, "x");
-  return /* @__PURE__ */ b("svg", {
+  return /* @__PURE__ */ w("svg", {
     x: t.x,
     y: t.y,
     width: t.width,
@@ -5918,20 +5918,22 @@ var Yo = (e, t) => {
     ]
   });
 }, bg = ({ layer: e, coordSystem: t, shouldAnimateTransitions: r, isDimmed: n, dimStyle: o, formattingLocale: a }) => {
-  const i = de(), l = ad(e.id), c = i(e.geom, t.type);
-  if (c === null) return null;
-  const u = yt(c.render);
-  return u.overlay ? null : /* @__PURE__ */ s("g", {
+  const i = de(), l = ad(e.id), { colorScheme: c } = W(), u = I(e), d = i(e.geom, t.type);
+  if (d === null) return null;
+  const v = yt(d.render);
+  return v.overlay ? null : /* @__PURE__ */ s("g", {
     style: n ? {
       opacity: o.opacity,
       ...o.saturation === void 0 ? {} : { filter: `saturate(${o.saturation})` }
     } : void 0,
-    children: u.fn({
+    children: v.fn({
       layer: e,
       coordSystem: t,
       shouldAnimateTransitions: r,
       formattingLocale: a,
-      intro: l
+      intro: l,
+      colorScheme: c,
+      styleReaders: u
     })
   });
 };
@@ -5953,7 +5955,7 @@ function wg({ renderer: e, layer: t, coordSystem: r, candidates: n }) {
   return o;
 }
 var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n, coordSystem: o, shouldAnimateTransitions: a, panelRect: i, formattingLocale: l }) => {
-  const c = C((y) => y.config.numberFormat), u = A(() => wg({
+  const c = C((b) => b.config.numberFormat), u = A(() => wg({
     renderer: e,
     layer: t,
     coordSystem: o,
@@ -5963,7 +5965,7 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     t,
     o,
     n
-  ]), d = N(t), v = A(() => Da(t), [t]), g = A(() => Ra({
+  ]), { colorScheme: d } = W(), v = I(t), g = A(() => Da(t), [t]), h = A(() => Ra({
     layer: t,
     numberFormat: c,
     locale: l
@@ -5971,36 +5973,38 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     c,
     t,
     l
-  ]), { fonts: h } = Ie(), f = bt();
+  ]), { fonts: f } = Ie(), m = bt();
   if (e === null || r === null && u.length === 0) return null;
-  const m = yt(e.render);
-  let p = null;
-  if (r && !m.overlay) {
-    const y = {
+  const p = yt(e.render);
+  let x = null;
+  if (r && !p.overlay) {
+    const b = {
       layer: r,
       sourceLayer: t,
       coordSystem: o,
       shouldAnimateTransitions: a,
       formattingLocale: l,
-      panelRect: i
+      panelRect: i,
+      colorScheme: d,
+      styleReaders: v
     };
-    p = e.renderHighlight ? e.renderHighlight(y) : m.fn(y);
+    x = e.renderHighlight ? e.renderHighlight(b) : p.fn(b);
   }
-  return /* @__PURE__ */ b(Vo, { children: [p, u.map(({ observation: y, observationIndex: w, anchor: k }) => /* @__PURE__ */ s(Rg, {
-    observation: y,
-    anchor: k,
+  return /* @__PURE__ */ w(Vo, { children: [x, u.map(({ observation: b, observationIndex: R, anchor: S }) => /* @__PURE__ */ s(Rg, {
+    observation: b,
+    anchor: S,
     panelRect: i,
-    fill: d.get("color", y),
-    dotRadius: (d.get("size", y) ?? 8) / 2,
-    readSegmentY: v,
-    formatYValue: g,
-    labelStyle: f.observation.outside,
-    familyDefault: h.familyDefault
-  }, Cg(y, w)))] });
+    fill: v.get("color", b),
+    dotRadius: (v.get("size", b) ?? 8) / 2,
+    readSegmentY: g,
+    formatYValue: h,
+    labelStyle: m.observation.outside,
+    familyDefault: f.familyDefault
+  }, Cg(b, R)))] });
 }, Rg = ({ observation: e, anchor: t, panelRect: r, fill: n, dotRadius: o, readSegmentY: a, formatYValue: i, labelStyle: l, familyDefault: c }) => {
   const u = pe(), d = fn(t.x), v = pn(t.y), g = a(e), h = rn(g) ? i(g, e) : null, f = A(() => {
     if (h === null) return null;
-    const m = u.measureText(h, K(l, c));
+    const m = u.measureText(h, z(l, c));
     return {
       width: m.width + l.paddingInline * 2,
       height: m.height + l.paddingBlock * 2
@@ -6011,10 +6015,10 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     l,
     c
   ]);
-  return /* @__PURE__ */ b(B, { children: [/* @__PURE__ */ s("circle", {
+  return /* @__PURE__ */ w(B, { children: [/* @__PURE__ */ s("circle", {
     "data-testid": "highlight-overlay-dot",
-    cx: S(d),
-    cy: S(v),
+    cx: k(d),
+    cy: k(v),
     r: o,
     fill: n
   }), h !== null && f !== null && /* @__PURE__ */ s(Uo, {
@@ -6032,29 +6036,33 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
   const r = e[ce.group];
   return `${String(r ?? "")}\0${t}`;
 }, Eg = ({ layer: e, coordSystem: t, panelRect: r }) => {
-  const { primary: n, group: o, related: a } = Ve(z((u) => ({
-    primary: u.hover.primary,
-    group: u.hover.group,
-    related: u.hover.related
-  }))), i = de();
+  const { primary: n, group: o, related: a } = Ve(j((v) => ({
+    primary: v.hover.primary,
+    group: v.hover.group,
+    related: v.hover.related
+  }))), i = de(), { colorScheme: l } = W(), c = I(e);
   if (n === null) return null;
-  const l = i(e.geom, t.type);
-  if (l === null || Gl(l)) return null;
-  const c = a.get(e.id) ?? [];
-  return n.layerId === e.id ? l.renderHover({
+  const u = i(e.geom, t.type);
+  if (u === null || Gl(u)) return null;
+  const d = a.get(e.id) ?? [];
+  return n.layerId === e.id ? u.renderHover({
     layer: e,
     coordSystem: t,
     primary: n,
     group: o,
-    related: c,
-    panelRect: r
-  }) : c.length === 0 ? null : l.renderHoverCompanions({
+    related: d,
+    panelRect: r,
+    colorScheme: l,
+    styleReaders: c
+  }) : d.length === 0 ? null : u.renderHoverCompanions({
     layer: e,
     primary: n,
-    related: c
+    related: d,
+    colorScheme: l,
+    styleReaders: c
   });
 }, Pg = (e) => {
-  const t = N(e);
+  const t = I(e);
   return A(() => {
     const [r] = e.data;
     return r === void 0 ? {
@@ -6066,7 +6074,7 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     };
   }, [e, t]);
 }, Bg = "var(--to1jkx0)", Ig = "var(--to1jkx1)", Tg = "to1jkx2", Lg = "to1jkx3", Ng = ({ shouldAnimateTransitions: e, panelRect: t, formattingLocale: r }) => {
-  const { layers: n, coordSystem: o } = C(z((a) => ({
+  const { layers: n, coordSystem: o } = C(j((a) => ({
     layers: a.layers,
     coordSystem: a.coordSystem
   })));
@@ -6078,7 +6086,7 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     className: Tg,
     "data-testid": "geom-layers",
     ...Wd(),
-    children: n.map((a) => /* @__PURE__ */ b(jt, { children: [/* @__PURE__ */ s(Hg, {
+    children: n.map((a) => /* @__PURE__ */ w(jt, { children: [/* @__PURE__ */ s(Hg, {
       layer: a,
       coordSystem: o,
       shouldAnimateTransitions: e,
@@ -6101,15 +6109,17 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     a,
     e,
     t
-  ]), l = e.highlight, c = Pg(e), u = {
+  ]), l = e.highlight, c = Pg(e), { colorScheme: u } = W(), d = {
     layer: e,
     coordSystem: t,
     shouldAnimateTransitions: r,
-    formattingLocale: o
-  }, d = i ? yt(i.render) : null, v = e.spatialKind === "render-hit-test", g = Fg(e);
-  return /* @__PURE__ */ b("g", {
-    className: g,
-    style: g === void 0 ? void 0 : Dg(c),
+    formattingLocale: o,
+    colorScheme: u,
+    styleReaders: I(e)
+  }, v = i ? yt(i.render) : null, g = e.spatialKind === "render-hit-test", h = Fg(e);
+  return /* @__PURE__ */ w("g", {
+    className: h,
+    style: h === void 0 ? void 0 : Dg(c),
     children: [
       /* @__PURE__ */ s(bg, {
         layer: e,
@@ -6119,13 +6129,13 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
         dimStyle: c,
         formattingLocale: o
       }),
-      v && !d?.overlay && i?.hitTest && /* @__PURE__ */ s(zl, {
+      g && !v?.overlay && i?.hitTest && /* @__PURE__ */ s(zl, {
         hitTest: i.hitTest,
-        input: u
+        input: d
       }),
-      v && d?.overlay && /* @__PURE__ */ s(tc, {
-        render: d.fn,
-        input: u
+      g && v?.overlay && /* @__PURE__ */ s(tc, {
+        render: v.fn,
+        input: d
       }),
       l !== null && /* @__PURE__ */ s(kg, {
         renderer: i,
@@ -6140,10 +6150,10 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     ]
   });
 }, Og = "_17uhij30", Gg = ({ formattedAxes: e, plotRect: t, panelBorder: r, panelFrameRect: n, panelRect: o, axisRects: a, axisLabelRects: i, shouldAnimateTransitions: l, formattingLocale: c, plotBottomY: u, isFooterChromeReserved: d, isEditable: v }) => {
-  const g = I(null);
+  const g = T(null);
   nv(g);
-  const h = ee("Grid", ug), f = ee("AxisTicks", cg), m = ee("AxisLabel", dg), p = A(() => Wt(n, t), [n, t]), y = A(() => Wt(o, t), [o, t]), w = A(() => Gr(a, t), [a, t]), k = A(() => Gr(i, t), [i, t]);
-  return /* @__PURE__ */ b("svg", {
+  const h = ee("Grid", ug), f = ee("AxisTicks", cg), m = ee("AxisLabel", dg), p = A(() => Wt(n, t), [n, t]), x = A(() => Wt(o, t), [o, t]), b = A(() => Gr(a, t), [a, t]), R = A(() => Gr(i, t), [i, t]);
+  return /* @__PURE__ */ w("svg", {
     ref: g,
     className: Og,
     width: t.width,
@@ -6155,27 +6165,27 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
         axes: e,
         panelBorderSizes: r,
         panelFrameRect: p,
-        panelRect: y
+        panelRect: x
       }),
       /* @__PURE__ */ s(f, {
         formattedAxes: e,
-        tickRects: w
+        tickRects: b
       }),
       /* @__PURE__ */ s(m, {
         formattedAxes: e,
-        labelRects: k
+        labelRects: R
       }),
       /* @__PURE__ */ s(xg, {
         formattedAxes: e,
-        panelRect: y
+        panelRect: x
       }),
-      /* @__PURE__ */ s(Wh, { panelRect: y }),
+      /* @__PURE__ */ s(Wh, { panelRect: x }),
       /* @__PURE__ */ s(Dr, {
-        panelRect: y,
+        panelRect: x,
         zOrder: "background"
       }),
       /* @__PURE__ */ s(Fr, {
-        panelRect: y,
+        panelRect: x,
         zOrder: "background"
       }),
       /* @__PURE__ */ s(vg, {
@@ -6184,39 +6194,39 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
       }),
       /* @__PURE__ */ s(Ng, {
         shouldAnimateTransitions: l,
-        panelRect: y,
+        panelRect: x,
         formattingLocale: c
       }),
       /* @__PURE__ */ s(mg, {
         formattedAxes: e,
-        panelRect: y
+        panelRect: x
       }),
       /* @__PURE__ */ s(tg, {
-        panelRect: y,
+        panelRect: x,
         formattingLocale: c,
         plotBottomY: u,
         isFooterChromeReserved: d
       }),
       /* @__PURE__ */ s(Av, {
-        panelRect: y,
+        panelRect: x,
         isEditable: v
       }),
       /* @__PURE__ */ s(Dr, {
-        panelRect: y,
+        panelRect: x,
         zOrder: "foreground"
       }),
       /* @__PURE__ */ s(Fr, {
-        panelRect: y,
+        panelRect: x,
         zOrder: "foreground"
       }),
       /* @__PURE__ */ s(hv, {
-        panelRect: y,
+        panelRect: x,
         isEditable: v
       }),
-      /* @__PURE__ */ s(Nv, { panelRect: y }),
-      /* @__PURE__ */ s(zv, { panelRect: y }),
-      /* @__PURE__ */ s(Wv, { panelRect: y }),
-      /* @__PURE__ */ s(tv, { panelRect: y })
+      /* @__PURE__ */ s(Nv, { panelRect: x }),
+      /* @__PURE__ */ s(zv, { panelRect: x }),
+      /* @__PURE__ */ s(Wv, { panelRect: x }),
+      /* @__PURE__ */ s(tv, { panelRect: x })
     ]
   });
 }, Wt = (e, t) => ({
@@ -6374,45 +6384,45 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     })
   })
 }) }) }), qg = ({ width: e, height: t, animation: r, showTooltips: n = !0, mode: o = "readonly" }) => {
-  const a = io(), { axes: i, legends: l, layers: c, numberFormat: u, parsingLocale: d, appearance: v, annotations: g, coordSystem: h, headline: f, headlineConfig: m, content: p, overflowStrategy: y, layoutConfig: w } = C(z((Q) => ({
-    axes: Q.guides.axes,
-    legends: Q.guides.legends.drawn,
-    layers: Q.layers,
-    numberFormat: Q.config.numberFormat,
-    parsingLocale: Q.config.parsingLocale,
-    appearance: Q.config.appearance,
-    annotations: Q.annotations,
-    coordSystem: Q.coordSystem,
-    headline: Q.guides.headline,
-    headlineConfig: Q.config.headline,
-    content: Q.config.content,
-    overflowStrategy: Q.config.panel.overflow,
-    layoutConfig: Q.config.layout
-  }))), k = Ci(), { intro: R, transitions: P } = A(() => nc(r, k ?? !1), [r, k]), { headerRef: E, footerRef: L, measurements: M } = Yg(), { formattingLocale: W, colorScheme: Y, themeOverrides: Te } = j(), Ae = o === "editable", [ye, Ko] = G(null), ar = A(() => Un(Y, Te), [Y, Te]), zo = ee("Header", Eu), jo = ee("Footer", xu), Xo = ee("Legend", Oh), qo = ee("Headline", qu), Jo = ee("EditorSurface", zg), ir = A(() => Wa({
+  const a = io(), { axes: i, legends: l, layers: c, numberFormat: u, parsingLocale: d, appearance: v, annotations: g, coordSystem: h, headline: f, headlineConfig: m, content: p, overflowStrategy: x, layoutConfig: b } = C(j((Y) => ({
+    axes: Y.guides.axes,
+    legends: Y.guides.legends.drawn,
+    layers: Y.layers,
+    numberFormat: Y.config.numberFormat,
+    parsingLocale: Y.config.parsingLocale,
+    appearance: Y.config.appearance,
+    annotations: Y.annotations,
+    coordSystem: Y.coordSystem,
+    headline: Y.guides.headline,
+    headlineConfig: Y.config.headline,
+    content: Y.config.content,
+    overflowStrategy: Y.config.panel.overflow,
+    layoutConfig: Y.config.layout
+  }))), R = Ci(), { intro: S, transitions: P } = A(() => nc(r, R ?? !1), [r, R]), { headerRef: E, footerRef: N, measurements: M } = Yg(), { formattingLocale: V, colorScheme: K, themeOverrides: Te } = W(), Ae = o === "editable", [ye, Ko] = G(null), ar = A(() => Un(K, Te), [K, Te]), zo = ee("Header", Eu), jo = ee("Footer", xu), Xo = ee("Legend", Oh), qo = ee("Headline", qu), Jo = ee("EditorSurface", zg), ir = A(() => Wa({
     legends: l,
     numberFormat: u,
     parsingLocale: d,
-    formattingLocale: W
+    formattingLocale: V
   }), [
     l,
     u,
     d,
-    W
+    V
   ]), Le = A(() => Ga({
     headline: f,
     show: m.show,
     numberFormat: u,
     parsingLocale: d,
-    formattingLocale: W,
+    formattingLocale: V,
     t: a
   }), [
     f,
     m.show,
     u,
     d,
-    W,
+    V,
     a
-  ]), Zo = pe(), Ze = T(), $e = A(() => cn(Ze), [Ze]), sr = A(() => hn(Ze), [Ze]), lr = Bo(), kt = $e.borderColor === void 0 ? 0 : $e.borderWidth, Ne = A(() => ({
+  ]), Zo = pe(), Ze = L(), $e = A(() => cn(Ze), [Ze]), sr = A(() => hn(Ze), [Ze]), lr = Bo(), kt = $e.borderColor === void 0 ? 0 : $e.borderWidth, Ne = A(() => ({
     width: Math.max(0, e - 2 * kt),
     height: Math.max(0, t - 2 * kt)
   }), [
@@ -6447,13 +6457,13 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     containerSize: Ne,
     externalMeasurements: M,
     headline: xe,
-    formattingLocale: W,
+    formattingLocale: V,
     annotations: g,
     layers: c,
     coordSystem: h,
     textScale: v.textScale,
-    overflowStrategy: y,
-    layout: w,
+    overflowStrategy: x,
+    layout: b,
     panelBorder: dr
   }), et = A(() => !Me || !xe || !_e ? null : gi({
     headline: xe,
@@ -6471,7 +6481,7 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
   if (!Me) return null;
   const { layout: X, formattedAxes: ta, plotBottomY: ra } = Me, na = X.footer.height > 0;
   return /* @__PURE__ */ s(Ec, {
-    colorScheme: Y,
+    colorScheme: K,
     themeOverrides: Te,
     textScale: v.textScale,
     graphBackground: $e.background,
@@ -6487,8 +6497,8 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
             width: "100%",
             height: "100%"
           },
-          children: /* @__PURE__ */ b(nd, {
-            intro: R,
+          children: /* @__PURE__ */ w(nd, {
+            intro: S,
             children: [
               /* @__PURE__ */ s(zo, {
                 ref: E,
@@ -6509,13 +6519,13 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
                 axisRects: X.axes,
                 axisLabelRects: X.axisLabels,
                 shouldAnimateTransitions: P,
-                formattingLocale: W ?? d,
+                formattingLocale: V ?? d,
                 plotBottomY: ra,
                 isFooterChromeReserved: na,
                 isEditable: Ae
               }),
               /* @__PURE__ */ s(jo, {
-                ref: L,
+                ref: N,
                 footerRect: X.footer,
                 mode: o,
                 caption: p.caption,
@@ -6560,7 +6570,7 @@ var Sg = 4, kg = ({ renderer: e, layer: t, matchedLayer: r, overlayCandidates: n
     subscribeSelection: t.selectionStore.subscribe
   } : null), [e, t]);
 }, Lf = (e) => Ri(e.subscribe, e.getCompiled, e.getCompiled), Nf = () => {
-  const { commands: e } = j();
+  const { commands: e } = W();
   return e;
 }, Mf = (e) => {
   if (e.altKey || !e.metaKey && !e.ctrlKey) return null;
@@ -6577,8 +6587,9 @@ export {
   To as D,
   He as Dt,
   Gu as E,
-  T as Et,
+  L as Et,
   ue as F,
+  W as Ft,
   Td as G,
   yf as H,
   Rf as I,
@@ -6586,13 +6597,13 @@ export {
   Bd as K,
   Ue as L,
   vu as M,
-  C as Mt,
+  I as Mt,
   qd as N,
-  bn as Nt,
+  C as Nt,
   Eu as O,
   bs as Ot,
   kf as P,
-  j as Pt,
+  bn as Pt,
   Ic as Q,
   Sf as R,
   jh as S,