@graphysdk/react-renderer 0.0.1-experimental.7 → 0.0.1-experimental.8

package/dist/index.mjs

@@ -1,9 +1,9 @@
 import './index.css';
 import { jsx as a, jsxs as m, Fragment as C } from "react/jsx-runtime";
 import re, { clsx as ce } from "clsx";
-import To, { useMemo as y, useState as E, useRef as w, useEffect as T, useCallback as Ge, useContext as ee, createContext as fe, useId as we, Fragment as gn, memo as oe, useReducer as Ao } from "react";
+import To, { useMemo as y, useState as E, useRef as w, useEffect as T, useCallback as Ge, useContext as ee, createContext as pe, useId as we, Fragment as gn, memo as oe, useReducer as Ao } from "react";
 import { useStore as Te } from "zustand";
-import { isGraphConfig as Eo, createCompiler as _o, convertSpecToInput as Po, isCompilerCachingEnabled as Ho, setCompilerCachingEnabled as Fo, COMPILER_STAGE_KEYS as yt, RESTING_HOVER_STATE as pn, HoverEngine as Bo, buildTooltipContent as No, LAYOUT_PADDING as fn, getDifferenceArrowDimensions as Io, createHeadlineItemRows as mn, LayoutCompiler as Do, BORDER_PRESET_GRADIENTS as Mo, isSafeUrl as vn, SetContentCaptionCommand as Ro, SetContentTitleCommand as Oo, SetContentSubtitleCommand as Go, computeDirectLabelsLayout as zo, buildFontString as Wo, CachedTextMeasurer as It, HeuristicTextMeasurer as $o, getColor as G, getAlpha as X, getSize as ze, toPercent as S, toViewBoxY as We, toViewBoxX as $e, createAreaPathGenerators as yn, createStableKeyGenerator as Xe, GROUP_VARIABLES as Ee, prepareAreaObservations as bn, resolveStrokeWidth as Ue, getDashArray as Ve, getLineType as Ye, isDefined as xn, getGroup as Sn, getX as ue, getYMax as Xo, getY as he, getXMax as Uo, getBarBaselineClip as Vo, getBarRectBounds as kn, createLinePathGenerator as Ln, prepareLineObservations as Cn, getStrokeWidth as Yo, buildAverageLineSymbols as jo, formatRuleValue as qo, getAngleExtent as wn, getRadiusExtent as Tn, buildPolarBarArcPath as De, getHoverGuideRectProps as Ko, getHoverGuideLineProps as Jo, buildDataLabelsContent as Zo, computeDifferenceArrow as Qo, computeFreeformArrow as ea, createSegmentYReader as ta, buildLayerYValueFormatter as na, formatLegends as ra, formatHeadline as oa, resolveHeadlinePlacement as aa } from "@graphysdk/viz-engine";
+import { isGraphConfig as Eo, createCompiler as _o, convertSpecToInput as Po, isCompilerCachingEnabled as Ho, setCompilerCachingEnabled as Fo, COMPILER_STAGE_KEYS as yt, RESTING_HOVER_STATE as fn, HoverEngine as Bo, buildTooltipContent as No, LAYOUT_PADDING as pn, getDifferenceArrowDimensions as Io, createHeadlineItemRows as mn, LayoutCompiler as Do, BORDER_PRESET_GRADIENTS as Mo, isSafeUrl as vn, SetContentCaptionCommand as Ro, SetContentTitleCommand as Oo, SetContentSubtitleCommand as Go, computeDirectLabelsLayout as zo, buildFontString as Wo, CachedTextMeasurer as It, HeuristicTextMeasurer as $o, getColor as G, getAlpha as X, getSize as ze, toPercent as S, toViewBoxY as We, toViewBoxX as $e, createAreaPathGenerators as yn, createStableKeyGenerator as Xe, GROUP_VARIABLES as Ee, prepareAreaObservations as bn, resolveStrokeWidth as Ue, getDashArray as Ve, getLineType as Ye, isDefined as xn, getGroup as Sn, getX as ue, getYMax as Xo, getY as he, getXMax as Uo, getBarBaselineClip as Vo, getBarRectBounds as kn, createLinePathGenerator as Ln, prepareLineObservations as Cn, getStrokeWidth as Yo, buildAverageLineSymbols as jo, formatRuleValue as qo, getAngleExtent as wn, getRadiusExtent as Tn, buildPolarBarArcPath as De, getHoverGuideRectProps as Ko, getHoverGuideLineProps as Jo, buildDataLabelsContent as Zo, computeDifferenceArrow as Qo, computeFreeformArrow as ea, createSegmentYReader as ta, buildLayerYValueFormatter as na, formatLegends as ra, formatHeadline as oa, resolveHeadlinePlacement as aa } from "@graphysdk/viz-engine";
 import { createStore as bt } from "zustand/vanilla";
 import { useMotionValue as An, animate as ia, motion as j, useSpring as Dt, useReducedMotion as sa } from "motion/react";
 import { useShallow as U } from "zustand/react/shallow";
@@ -22,10 +22,10 @@ import { TextStyle as In, Color as Dn, FontFamily as Mn } from "@tiptap/extensio
 import { Underline as Rn } from "@tiptap/extension-underline";
 import { UndoRedo as On, Placeholder as Gn } from "@tiptap/extensions";
 import { Paragraph as ua } from "@tiptap/extension-paragraph";
-import { useEditorState as ha, EditorContent as ga, useEditor as pa } from "@tiptap/react";
+import { useEditorState as ha, EditorContent as ga, useEditor as fa } from "@tiptap/react";
 import { Toolbar as H } from "@base-ui/react/toolbar";
 import { Tooltip as le } from "@base-ui/react/tooltip";
-import { createPortal as fa } from "react-dom";
+import { createPortal as pa } from "react-dom";
 import { assignInlineVars as ma } from "@vanilla-extract/dynamic";
 import { Popover as F } from "@base-ui/react/popover";
 import { HexColorPicker as va, HexColorInput as ya } from "react-colorful";
@@ -33,7 +33,7 @@ import { Menu as D } from "@base-ui/react/menu";
 import { Toggle as ba } from "@base-ui/react/toggle";
 import { interpolatePath as xa } from "d3-interpolate-path";
 import { getContrast as ut } from "color2k";
-typeof window < "u" && (window.__GRAPHY_SDK__ ??= {}, window.__GRAPHY_SDK__.reactRenderer = "0.0.1-experimental.7");
+typeof window < "u" && (window.__GRAPHY_SDK__ ??= {}, window.__GRAPHY_SDK__.reactRenderer = "0.0.1-experimental.8");
 const Sa = 5, ka = (e) => {
   if (process.env.NODE_ENV === "production")
     return {
@@ -104,7 +104,7 @@ function Ea(e, t) {
   const n = Eo(e) ? e.themeOverrides : void 0;
   return y(() => ({ ...t, ...n }), [t, n]);
 }
-const zn = fe(null), vg = ({
+const zn = pe(null), vg = ({
   data: e,
   input: t,
   formattingLocale: n,
@@ -114,29 +114,29 @@ const zn = fe(null), vg = ({
   themeOverrides: l,
   children: c
 }) => {
-  const [d] = E(() => _o()), [u] = E(() => ka(d)), h = Ea(t, l), g = y(() => ({ customPalettes: o, theme: i }), [o, i]), [p] = E(() => {
+  const [d] = E(() => _o()), [u] = E(() => ka(d)), h = Ea(t, l), g = y(() => ({ customPalettes: o, theme: i }), [o, i]), [f] = E(() => {
     const k = d.compile({ input: t, data: e, ctx: g });
     return u.emit({ kind: "init" }), Aa(k);
-  }), f = w({ input: t, data: e, ctx: g });
+  }), p = w({ input: t, data: e, ctx: g });
   T(() => {
-    const k = t !== f.current.input, L = e !== f.current.data, A = g !== f.current.ctx;
+    const k = t !== p.current.input, L = e !== p.current.data, A = g !== p.current.ctx;
     if (!k && !L && !A) return;
-    const I = p.getState(), _ = k || A ? d.compile({ input: t, data: e, ctx: g }) : d.recompile({ spec: I.compiled.spec, data: e });
-    f.current = { input: t, data: e, ctx: g }, I.setCompiled(_), u.emit({ kind: k ? "input" : "data" });
-  }, [t, e, g, d, p, u]);
+    const I = f.getState(), _ = k || A ? d.compile({ input: t, data: e, ctx: g }) : d.recompile({ spec: I.compiled.spec, data: e });
+    p.current = { input: t, data: e, ctx: g }, I.setCompiled(_), u.emit({ kind: k ? "input" : "data" });
+  }, [t, e, g, d, f, u]);
   const v = Ge(
     (k) => {
-      const L = p.getState(), A = k.apply(L.compiled.spec);
+      const L = f.getState(), A = k.apply(L.compiled.spec);
       if (!A) return;
       const I = d.recompile({ spec: A.spec });
       if (L.setCompiled(I), u.emit({ kind: "command", command: k }), !r) return;
       const _ = Po(A.spec);
-      f.current = { input: _, data: f.current.data, ctx: f.current.ctx }, r(_);
+      p.current = { input: _, data: p.current.data, ctx: p.current.ctx }, r(_);
     },
-    [r, d, u, p]
+    [r, d, u, f]
   ), x = y(
-    () => ({ store: p, dispatch: v, formattingLocale: n, compileBus: u, theme: i, themeOverrides: h }),
-    [p, v, n, u, i, h]
+    () => ({ store: f, dispatch: v, formattingLocale: n, compileBus: u, theme: i, themeOverrides: h }),
+    [f, v, n, u, i, h]
   );
   return /* @__PURE__ */ a(zn.Provider, { value: x, children: c });
 }, me = () => {
@@ -157,7 +157,7 @@ const yg = ({ width: e = 380, style: t, className: n } = {}) => {
     const { recordCompile: v } = o.getState(), x = r.getLastTrigger(), k = r.getLastCompile();
     return x && k && v(x, k), r.subscribe(v);
   }, [o, r]);
-  const u = Te(o, (v) => v.lastCompile), h = Te(o, (v) => v.history), g = r.getCacheStats(), p = u === null && h.length === 0, f = () => {
+  const u = Te(o, (v) => v.lastCompile), h = Te(o, (v) => v.history), g = r.getCacheStats(), f = u === null && h.length === 0, p = () => {
     d((v) => {
       const x = !v;
       return Fo(x), x;
@@ -167,7 +167,7 @@ const yg = ({ width: e = 380, style: t, className: n } = {}) => {
     /* @__PURE__ */ m("div", { className: _a, children: [
       /* @__PURE__ */ m("div", { children: [
         /* @__PURE__ */ a("div", { className: Pa, children: "compile cache" }),
-        /* @__PURE__ */ a("div", { className: za, children: p ? "production: stats disabled" : u ? `last: ${u.label} · ${Xn(u.durationMs)}` : "awaiting first compile…" })
+        /* @__PURE__ */ a("div", { className: za, children: f ? "production: stats disabled" : u ? `last: ${u.label} · ${Xn(u.durationMs)}` : "awaiting first compile…" })
       ] }),
       /* @__PURE__ */ a("button", { type: "button", onClick: () => l((v) => !v), className: Wa, children: i ? "▾" : "▴" })
     ] }),
@@ -176,7 +176,7 @@ const yg = ({ width: e = 380, style: t, className: n } = {}) => {
         "button",
         {
           type: "button",
-          onClick: f,
+          onClick: p,
           className: c ? Mt.enabled : Mt.disabled,
           "aria-pressed": c,
           children: [
@@ -187,7 +187,7 @@ const yg = ({ width: e = 380, style: t, className: n } = {}) => {
       ),
       /* @__PURE__ */ a("span", { className: $a, children: "next compile reflects this toggle" })
     ] }),
-    !i && !p && /* @__PURE__ */ m(C, { children: [
+    !i && !f && /* @__PURE__ */ m(C, { children: [
       /* @__PURE__ */ a(Va, { delta: u?.stages, cumulative: g }),
       /* @__PURE__ */ a(Ya, { entries: h })
     ] })
@@ -236,7 +236,7 @@ const yg = ({ width: e = 380, style: t, className: n } = {}) => {
     t(e[r]) && (n += 1);
   return n;
 }, Xn = (e) => e >= 10 ? `${e.toFixed(0)}ms` : `${e.toFixed(2)}ms`, Ka = () => bt((e) => ({
-  hover: pn,
+  hover: fn,
   setHoverState: (t) => e((n) => n.hover === t ? n : { hover: t })
 })), Ja = (e, t) => {
   const n = y(() => ({ layers: e, coordSystem: t }), [e, t]), r = w(null);
@@ -249,7 +249,7 @@ const yg = ({ width: e = 380, style: t, className: n } = {}) => {
     }
     o.update(n);
   }, [o, n]), o;
-}, Un = fe(null), Za = ({ children: e }) => {
+}, Un = pe(null), Za = ({ children: e }) => {
   const { layers: t, coordSystem: n } = B(
     U((c) => ({ layers: c.layers, coordSystem: c.coordSystem }))
   ), r = Ja(t, n), [o] = E(() => Ka()), i = w(null), l = w(null);
@@ -333,7 +333,7 @@ const Ot = 2, ei = 12, ti = 12, Gt = 1, zt = 2, ni = 4, qe = ({
   }
   const n = t / (ni - 1);
   return { x1: 0, x2: t, dashArray: `1 ${n}`, linecap: "round" };
-}, Vn = Object.freeze({}), Ct = fe(Vn), ai = ({ slots: e, children: t }) => /* @__PURE__ */ a(Ct.Provider, { value: e ?? Vn, children: t });
+}, Vn = Object.freeze({}), Ct = pe(Vn), ai = ({ slots: e, children: t }) => /* @__PURE__ */ a(Ct.Provider, { value: e ?? Vn, children: t });
 function Q(e, t) {
   const n = ee(Ct)[e];
   return n === void 0 ? t : typeof n == "object" && si(n) ? n.render : n;
@@ -355,7 +355,7 @@ function wt(e) {
   const { store: t } = je();
   return Te(t, e);
 }
-var li = "_19519k80", ci = "_19519k81", di = "_19519k82", ui = "_19519k83", hi = "_19519k85", gi = "_19519k86", pi = "_19519k87", fi = "_19519k88", mi = "_19519k89";
+var li = "_19519k80", ci = "_19519k81", di = "_19519k82", ui = "_19519k83", hi = "_19519k85", gi = "_19519k86", fi = "_19519k87", pi = "_19519k88", mi = "_19519k89";
 const vi = (e) => {
   const { overlayRef: t } = je(), n = w(null), [r, o] = E(!1), i = w(e);
   return i.current = e, T(() => {
@@ -382,38 +382,38 @@ const vi = (e) => {
   toJSON: () => ({})
 }, Si = () => {
   const e = B(
-    U((f) => ({
-      layers: f.layers,
-      coordSystem: f.coordSystem,
-      scales: f.scales,
-      guides: f.guides,
-      numberFormat: f.config.numberFormat,
-      parsingLocale: f.config.parsingLocale
+    U((p) => ({
+      layers: p.layers,
+      coordSystem: p.coordSystem,
+      scales: p.scales,
+      guides: p.guides,
+      numberFormat: p.config.numberFormat,
+      parsingLocale: p.config.parsingLocale
     }))
-  ), { formattingLocale: t } = me(), n = wt((f) => f.hover), r = Q("Tooltip", ki), o = w(() => {
+  ), { formattingLocale: t } = me(), n = wt((p) => p.hover), r = Q("Tooltip", ki), o = w(() => {
   }), { cursorRef: i, isInside: l } = vi(() => o.current()), c = y(
     () => No({ ...e, hover: n, formattingLocale: t }),
     [e, n, t]
   ), d = c !== null && l, u = y(
     () => ({
       getBoundingClientRect: () => {
-        const f = i.current;
-        return f === null ? xi : Li(f);
+        const p = i.current;
+        return p === null ? xi : Li(p);
       }
     }),
     [i]
-  ), { refs: h, floatingStyles: g, update: p } = xt({
+  ), { refs: h, floatingStyles: g, update: f } = xt({
     open: d,
     placement: "right",
     middleware: [St(yi), kt(), Lt({ padding: bi })],
     elements: { reference: u }
   });
-  return o.current = p, d ? /* @__PURE__ */ a(
+  return o.current = f, d ? /* @__PURE__ */ a(
     "div",
     {
       ref: h.setFloating,
       role: "tooltip",
-      className: fi,
+      className: pi,
       style: g,
       "data-testid": "chart-tooltip",
       children: /* @__PURE__ */ a(r, { content: c, isVisible: d })
@@ -435,7 +435,7 @@ const vi = (e) => {
 }), Ci = ({ row: e, shouldHighlight: t }) => /* @__PURE__ */ m("div", { className: re(di, { [ui]: t }), "data-testid": "chart-tooltip-row", children: [
   e.swatchColor === null ? /* @__PURE__ */ a("span", { className: hi, "aria-hidden": !0 }) : /* @__PURE__ */ a(qe, { shape: e.swatchShape, color: e.swatchColor, lineType: e.swatchLineType }),
   /* @__PURE__ */ a("span", { className: gi, children: e.label }),
-  /* @__PURE__ */ a("span", { className: pi, children: e.value })
+  /* @__PURE__ */ a("span", { className: fi, children: e.value })
 ] });
 var Yn = ["canvasDefault", "canvasBlue", "canvasCyan", "canvasGreen", "canvasYellow", "canvasOrange", "canvasRed", "canvasPink", "canvasPurple", "canvasGray", "canvasInverse"], s = { white: "var(--graphy-white)", black: "var(--graphy-black)", transparent: "var(--graphy-transparent)", grey100: "var(--graphy-grey-100)", grey95: "var(--graphy-grey-95)", grey90: "var(--graphy-grey-90)", grey85: "var(--graphy-grey-85)", grey80: "var(--graphy-grey-80)", grey75: "var(--graphy-grey-75)", grey70: "var(--graphy-grey-70)", grey60: "var(--graphy-grey-60)", grey50: "var(--graphy-grey-50)", grey0: "var(--graphy-grey-0)", greyGradient80: "var(--graphy-grey-gradient-80)", green60: "var(--graphy-green-60)", green50: "var(--graphy-green-50)", red60: "var(--graphy-red-60)", red50: "var(--graphy-red-50)", amber70: "var(--graphy-amber-70)", amber50: "var(--graphy-amber-50)", amber40: "var(--graphy-amber-40)", amber30: "var(--graphy-amber-30)", blue80: "var(--graphy-blue-80)", blue60: "var(--graphy-blue-60)", purple50: "var(--graphy-purple-50)", purple30: "var(--graphy-purple-30)", brand: "var(--graphy-brand)", success: "var(--graphy-success)", warning: "var(--graphy-warning)", alert: "var(--graphy-alert)", textPrimary: "var(--graphy-text-primary)", textSecondary: "var(--graphy-text-secondary)", textDisabled: "var(--graphy-text-disabled)", iconPrimary: "var(--graphy-icon-primary)", iconSecondary: "var(--graphy-icon-secondary)", iconStickerBackground: "var(--graphy-icon-sticker-background)", border100: "var(--graphy-border-100)", border50: "var(--graphy-border-50)", border10: "var(--graphy-border-10)", sunkenBackground: "var(--graphy-sunken-background)", defaultBackground: "var(--graphy-default-background)", raisedBackground: "var(--graphy-raised-background)", overlayBackground: "var(--graphy-overlay-background)", overlayBorderGradient: "var(--graphy-overlay-border-gradient)", graphBackground: "var(--graphy-graph-background)", gridLineColor: "var(--graphy-grid-line-color)", originLineColor: "var(--graphy-origin-line-color)", targetLineColor: "var(--graphy-target-line-color)", targetLineMarkerColor: "var(--graphy-target-line-marker-color)", targetLineLabelTextColor: "var(--graphy-target-line-label-text-color)", legendBackground: "var(--graphy-legend-background)", legendBorderColor: "var(--graphy-legend-border-color)", legendFocusOutlineColor: "var(--graphy-legend-focus-outline-color)", legendTextColor: "var(--graphy-legend-text-color)", dimmedSeriesLabelTextColor: "var(--graphy-dimmed-series-label-text-color)", dimmedSeriesLabelLineColor: "var(--graphy-dimmed-series-label-line-color)", trendNegativeColor: "var(--graphy-trend-negative-color)", trendPositiveColor: "var(--graphy-trend-positive-color)", trendNeutralColor: "var(--graphy-trend-neutral-color)", defaultAnnotationArrowStroke: "var(--graphy-default-annotation-arrow-stroke)", defaultAnnotationShapeStroke: "var(--graphy-default-annotation-shape-stroke)", defaultAnnotationShapeFill: "var(--graphy-default-annotation-shape-fill)", arrowAnnotationStickerOutlineColor: "var(--graphy-arrow-annotation-sticker-outline-color)", arrowAnnotationStickerOutlineColorInverse: "var(--graphy-arrow-annotation-sticker-outline-color-inverse)", annotationFrameBorderColor: "var(--graphy-annotation-frame-border-color)", annotationMenuTriggerIconColor: "var(--graphy-annotation-menu-trigger-icon-color)", heatmapEmptyTileBackground: "var(--graphy-heatmap-empty-tile-background)", dataLabelOutsideBackground: "var(--graphy-data-label-outside-background)", graphPadding: "var(--graphy-graph-padding)", gridLineWidth: "var(--graphy-grid-line-width)", gridLineDash: "var(--graphy-grid-line-dash)", tooltipBorderRadius: "var(--graphy-tooltip-border-radius)", tooltipBorderWidth: "var(--graphy-tooltip-border-width)", tooltipPaddingBlock: "var(--graphy-tooltip-padding-block)", tooltipPaddingInline: "var(--graphy-tooltip-padding-inline)", tooltipRowGap: "var(--graphy-tooltip-row-gap)", tooltipShadow: "var(--graphy-tooltip-shadow)", tickLabelOffset: "var(--graphy-tick-label-offset)", legendItemGap: "var(--graphy-legend-item-gap)", legendSwatchGap: "var(--graphy-legend-swatch-gap)", legendSwatchWidth: "var(--graphy-legend-swatch-width)", legendSwatchHeight: "var(--graphy-legend-swatch-height)", legendPillPaddingInline: "var(--graphy-legend-pill-padding-inline)", legendPillPaddingBlock: "var(--graphy-legend-pill-padding-block)", legendPillBorderWidth: "var(--graphy-legend-pill-border-width)", headlineRowGap: "var(--graphy-headline-row-gap)", headlineItemGap: "var(--graphy-headline-item-gap)", canvasDefault: "var(--graphy-canvas-default)", canvasBlue: "var(--graphy-canvas-blue)", canvasCyan: "var(--graphy-canvas-cyan)", canvasGreen: "var(--graphy-canvas-green)", canvasYellow: "var(--graphy-canvas-yellow)", canvasOrange: "var(--graphy-canvas-orange)", canvasRed: "var(--graphy-canvas-red)", canvasPink: "var(--graphy-canvas-pink)", canvasPurple: "var(--graphy-canvas-purple)", canvasGray: "var(--graphy-canvas-gray)", canvasInverse: "var(--graphy-canvas-inverse)", elevationXs: "var(--graphy-elevation-xs)", elevationSm: "var(--graphy-elevation-sm)", elevationMd: "var(--graphy-elevation-md)", elevationLg: "var(--graphy-elevation-lg)", radiiXs: "var(--graphy-radii-xs)", radiiSm: "var(--graphy-radii-sm)", radiiMd: "var(--graphy-radii-md)", radiiLg: "var(--graphy-radii-lg)", spaceXxs: "var(--graphy-space-xxs)", spaceXs: "var(--graphy-space-xs)", spaceSm: "var(--graphy-space-sm)", spaceMd: "var(--graphy-space-md)", spaceLg: "var(--graphy-space-lg)", spaceXl: "var(--graphy-space-xl)", zIndexToolbar: "var(--graphy-z-index-toolbar)", zIndexToolbarTooltip: "var(--graphy-z-index-toolbar-tooltip)", zIndexToolbarPopover: "var(--graphy-z-index-toolbar-popover)", toolbarBackgroundColor: "var(--graphy-toolbar-background-color)", toolbarButtonBackgroundColor: "var(--graphy-toolbar-button-background-color)", toolbarButtonBackgroundColorHovered: "var(--graphy-toolbar-button-background-color-hovered)", toolbarButtonBackgroundColorSelected: "var(--graphy-toolbar-button-background-color-selected)", toolbarSeparatorColor: "var(--graphy-toolbar-separator-color)", tooltipBackground: "var(--graphy-tooltip-background)", tooltipBorderColor: "var(--graphy-tooltip-border-color)", tooltipHeadingTextColor: "var(--graphy-tooltip-heading-text-color)", tooltipLabelTextColor: "var(--graphy-tooltip-label-text-color)", tooltipValueTextColor: "var(--graphy-tooltip-value-text-color)", tooltipPrimaryRowColor: "var(--graphy-tooltip-primary-row-color)", hoverGuideLineColor: "var(--graphy-hover-guide-line-color)", hoverGuideFillColor: "var(--graphy-hover-guide-fill-color)", hoveredBarBorderColor: "var(--graphy-hovered-bar-border-color)", hoveredPointRingColor: "var(--graphy-hovered-point-ring-color)", pointStrokeColor: "var(--graphy-point-stroke-color)", stackedBarHoverBorderColor: "var(--graphy-stacked-bar-hover-border-color)", fontFamilyDefault: "var(--graphy-font-family-default)", fontFamilyHeading: "var(--graphy-font-family-heading)", fontWeightRegular: "var(--graphy-font-weight-regular)", fontWeightMedium: "var(--graphy-font-weight-medium)", fontWeightSemibold: "var(--graphy-font-weight-semibold)", fontWeightBold: "var(--graphy-font-weight-bold)", fontWeightExtraBold: "var(--graphy-font-weight-extra-bold)", fontWeightBlack: "var(--graphy-font-weight-black)", textScale: "var(--graphy-text-scale)", fontSizeXxs: "var(--graphy-font-size-xxs)", fontSizeXs: "var(--graphy-font-size-xs)", fontSizeSm: "var(--graphy-font-size-sm)", fontSizeMd: "var(--graphy-font-size-md)", fontSizeLg: "var(--graphy-font-size-lg)", fontSizeXl: "var(--graphy-font-size-xl)", fontLineHeightXxs: "var(--graphy-font-line-height-xxs)", fontLineHeightXs: "var(--graphy-font-line-height-xs)", fontLineHeightSm: "var(--graphy-font-line-height-sm)", fontLineHeightMd: "var(--graphy-font-line-height-md)", fontLineHeightLg: "var(--graphy-font-line-height-lg)", fontLineHeightXl: "var(--graphy-font-line-height-xl)", fontSizeEditorBody: "var(--graphy-font-size-editor-body)", fontSizeHeadingSm: "var(--graphy-font-size-heading-sm)", fontSizeHeadingMd: "var(--graphy-font-size-heading-md)", fontSizeHeadingLg: "var(--graphy-font-size-heading-lg)", fontLineHeightEditorBody: "var(--graphy-font-line-height-editor-body)", fontLineHeightHeadingSm: "var(--graphy-font-line-height-heading-sm)", fontLineHeightHeadingMd: "var(--graphy-font-line-height-heading-md)", fontLineHeightHeadingLg: "var(--graphy-font-line-height-heading-lg)", fontTickLabel: "var(--graphy-font-tick-label)", fontAxisLabel: "var(--graphy-font-axis-label)", fontDataLabel: "var(--graphy-font-data-label)", fontStackTotal: "var(--graphy-font-stack-total)", fontLegendLabel: "var(--graphy-font-legend-label)", fontSeriesLabel: "var(--graphy-font-series-label)", fontTooltipLabel: "var(--graphy-font-tooltip-label)", fontTooltipHeading: "var(--graphy-font-tooltip-heading)", fontTooltipFooter: "var(--graphy-font-tooltip-footer)", fontJumboTooltipLabel: "var(--graphy-font-jumbo-tooltip-label)", fontJumboTooltip: "var(--graphy-font-jumbo-tooltip)", fontMiniTooltipLabel: "var(--graphy-font-mini-tooltip-label)", fontMiniTooltipFooter: "var(--graphy-font-mini-tooltip-footer)", fontTooltipCaption: "var(--graphy-font-tooltip-caption)", fontTooltipCaptionSmall: "var(--graphy-font-tooltip-caption-small)", fontTrendTag: "var(--graphy-font-trend-tag)", fontTrendTagSmall: "var(--graphy-font-trend-tag-small)", fontGoalLineLabel: "var(--graphy-font-goal-line-label)", fontPieLabel: "var(--graphy-font-pie-label)", fontPieChartTotal: "var(--graphy-font-pie-chart-total)", fontDifferenceArrowSmall: "var(--graphy-font-difference-arrow-small)", fontDifferenceArrowMedium: "var(--graphy-font-difference-arrow-medium)", fontDifferenceArrowLarge: "var(--graphy-font-difference-arrow-large)", fontButton: "var(--graphy-font-button)", fontInput: "var(--graphy-font-input)", fontInputLabel: "var(--graphy-font-input-label)", fontSelectLabel: "var(--graphy-font-select-label)", fontSelectDescription: "var(--graphy-font-select-description)", fontColorSelectLabel: "var(--graphy-font-color-select-label)", fontMenuTitle: "var(--graphy-font-menu-title)", fontMenuGroupTitle: "var(--graphy-font-menu-group-title)", fontMenuItemLabel: "var(--graphy-font-menu-item-label)", fontMenuItemLabelSecondary: "var(--graphy-font-menu-item-label-secondary)", fontUITooltip: "var(--graphy-font-uitooltip)", fontUITooltipSecondary: "var(--graphy-font-uitooltip-secondary)", fontErrorBoundaryTitle: "var(--graphy-font-error-boundary-title)", fontErrorBoundaryMessage: "var(--graphy-font-error-boundary-message)", fontTableCell: "var(--graphy-font-table-cell)", fontTableHeaderCell: "var(--graphy-font-table-header-cell)", fontSourceLabel: "var(--graphy-font-source-label)", fontSourceLink: "var(--graphy-font-source-link)", fontTextEditorH1: "var(--graphy-font-text-editor-h1)", fontTextEditorH2: "var(--graphy-font-text-editor-h2)", fontTextEditorH3: "var(--graphy-font-text-editor-h3)", fontTextEditorH6: "var(--graphy-font-text-editor-h6)", fontTextEditorBody: "var(--graphy-font-text-editor-body)", fontTextEditorLink: "var(--graphy-font-text-editor-link)", fontHighlightModeTitle: "var(--graphy-font-highlight-mode-title)", fontHighlightModeSubtitle: "var(--graphy-font-highlight-mode-subtitle)" };
 const O = `'Inter', -apple-system, BlinkMacSystemFont, 'Open Sans', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu',
@@ -579,8 +579,8 @@ const O = `'Inter', -apple-system, BlinkMacSystemFont, 'Open Sans', 'Segoe UI',
   small: 1,
   medium: 1,
   large: 1.2
-}, _i = O, Jn = M.sm, Zn = 2, Qn = 24, er = 12, tr = 10, nr = 8, rr = 8, or = 8, ar = 2, ir = 1, sr = 2, lr = 4, cr = N.sm, dr = M.sm, ur = O, Pi = sr * lr, hr = !1, Be = 6, gr = 10, P = (e, t) => `color-mix(in srgb, transparent, ${e} ${t * 100}%)`, Ke = (e, t) => `hsl(from ${e} h s calc(l * ${1 - t}))`, pr = (e, t) => `hsl(from ${e} h s calc(l * ${1 + t}))`, ht = (e, t, n) => `color-mix(in srgb, ${e}, ${t} ${n * 100}%)`, Hi = (e) => /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(e), Fi = (e) => e.length === 0 ? !1 : typeof CSS < "u" && typeof CSS.supports == "function" ? CSS.supports("color", e) : /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(e), W = (e) => `${e}px`, fr = {
-  graphPadding: W(fn),
+}, _i = O, Jn = M.sm, Zn = 2, Qn = 24, er = 12, tr = 10, nr = 8, rr = 8, or = 8, ar = 2, ir = 1, sr = 2, lr = 4, cr = N.sm, dr = M.sm, ur = O, Pi = sr * lr, hr = !1, Be = 6, gr = 10, P = (e, t) => `color-mix(in srgb, transparent, ${e} ${t * 100}%)`, Ke = (e, t) => `hsl(from ${e} h s calc(l * ${1 - t}))`, fr = (e, t) => `hsl(from ${e} h s calc(l * ${1 + t}))`, ht = (e, t, n) => `color-mix(in srgb, ${e}, ${t} ${n * 100}%)`, Hi = (e) => /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(e), Fi = (e) => e.length === 0 ? !1 : typeof CSS < "u" && typeof CSS.supports == "function" ? CSS.supports("color", e) : /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(e), W = (e) => `${e}px`, pr = {
+  graphPadding: W(pn),
   gridLineWidth: "1px",
   gridLineDash: "2 3",
   tooltipBorderRadius: "6px",
@@ -738,7 +738,7 @@ const O = `'Inter', -apple-system, BlinkMacSystemFont, 'Open Sans', 'Segoe UI',
   ...yr,
   ...Di,
   ...Mi,
-  ...fr,
+  ...pr,
   ...jn,
   ...qn,
   ...Kn
@@ -854,7 +854,7 @@ const O = `'Inter', -apple-system, BlinkMacSystemFont, 'Open Sans', 'Segoe UI',
   ...yr,
   ...zi,
   ...Wi,
-  ...fr,
+  ...pr,
   ...jn,
   ...qn,
   ...Kn
@@ -864,7 +864,7 @@ const O = `'Inter', -apple-system, BlinkMacSystemFont, 'Open Sans', 'Segoe UI',
 }), Sr = (e, t) => {
   const n = xr(e, t), r = $(n.legendPillPaddingInline, or), o = $(n.legendPillPaddingBlock, ar), i = $(n.legendPillBorderWidth, ir);
   return {
-    graphPadding: $(n.graphPadding, fn),
+    graphPadding: $(n.graphPadding, pn),
     tickLabelOffset: $(n.tickLabelOffset, gr),
     legendSwatchWidth: $(n.legendSwatchWidth, tr),
     legendSwatchHeight: $(n.legendSwatchHeight, er),
@@ -885,7 +885,7 @@ function $(e, t) {
   const r = Number.parseFloat(n);
   return Number.isFinite(r) ? r : t;
 }
-const kr = fe(Xi), Ui = ({ metrics: e, children: t }) => /* @__PURE__ */ a(kr.Provider, { value: e, children: t }), Tt = () => ee(kr), At = N.sm, Lr = O, Cr = 10, te = (e, t) => e * Cr * t, Vi = (e, t, n) => {
+const kr = pe(Xi), Ui = ({ metrics: e, children: t }) => /* @__PURE__ */ a(kr.Provider, { value: e, children: t }), Tt = () => ee(kr), At = N.sm, Lr = O, Cr = 10, te = (e, t) => e * Cr * t, Vi = (e, t, n) => {
   const { tickLabelOffset: r } = n;
   return (o) => {
     const i = o.position === "top" || o.position === "bottom", l = o.ticks.map(
@@ -971,26 +971,26 @@ const kr = fe(Xi), Ui = ({ metrics: e, children: t }) => /* @__PURE__ */ a(kr.Pr
   return o.current = r, y(() => {
     if (!e) return null;
     const i = Vi(e, t, n), l = Yi(t), c = es(e, t, n), d = Zi(e, t, n), u = Ki(e, t, n), h = {
-      measureText: (g, p) => e.measureText(g, p),
+      measureText: (g, f) => e.measureText(g, f),
       textScale: t
     };
     return {
       measureAxis: (g) => {
         if (as(g)) return 0;
-        const p = o.current.measureAxis;
-        return p ? p(g, h) : i(g);
+        const f = o.current.measureAxis;
+        return f ? f(g, h) : i(g);
       },
       measureAxisLabel: (g) => {
-        const p = o.current.measureAxisLabel;
-        return p ? p(g, h) : l();
+        const f = o.current.measureAxisLabel;
+        return f ? f(g, h) : l();
       },
       measureLegend: (g) => {
         if (is(g)) return 0;
-        const p = o.current.measureLegend;
-        return p ? p(g, h) : c(g);
+        const f = o.current.measureLegend;
+        return f ? f(g, h) : c(g);
       },
-      measureHeadline: (g, p) => (o.current.measureHeadline ?? d)(g, p),
-      measureHeadlineItemWidths: (g, p) => (o.current.measureHeadlineItemWidths ?? u)(g, p),
+      measureHeadline: (g, f) => (o.current.measureHeadline ?? d)(g, f),
+      measureHeadlineItemWidths: (g, f) => (o.current.measureHeadlineItemWidths ?? u)(g, f),
       measureTickLabel: ts(e, t),
       measureDifferenceArrowLabel: ji(e, t)
     };
@@ -1008,7 +1008,7 @@ const kr = fe(Xi), Ui = ({ metrics: e, children: t }) => /* @__PURE__ */ a(kr.Pr
   annotations: u,
   coordSystem: h,
   textScale: g,
-  graphPadding: p
+  graphPadding: f
 }) => y(() => e ? new Do(e).compile({
   axes: t,
   numberFormat: n,
@@ -1021,7 +1021,7 @@ const kr = fe(Xi), Ui = ({ metrics: e, children: t }) => /* @__PURE__ */ a(kr.Pr
   annotations: u,
   coordSystem: h,
   textScale: g,
-  padding: p
+  padding: f
 }) : null, [
   t,
   n,
@@ -1034,7 +1034,7 @@ const kr = fe(Xi), Ui = ({ metrics: e, children: t }) => /* @__PURE__ */ a(kr.Pr
   u,
   h,
   g,
-  p,
+  f,
   e
 ]), as = (e) => !e.isVisible || e.ticks.length === 0, is = (e) => e.items.length === 0, $t = "data-variant", _r = ua.extend({
   addAttributes() {
@@ -1120,23 +1120,23 @@ const kr = fe(Xi), Ui = ({ metrics: e, children: t }) => /* @__PURE__ */ a(kr.Pr
     case "solid":
       return e.color;
     case "tinted":
-      return fs(e.color, t);
+      return ps(e.color, t);
     case "gradient":
       return ms(e.color, t);
     case "preset":
       return Mo[e.preset];
   }
-}, gs = (e) => e.type === "none" ? 0 : e.width, ps = (e, t, n) => {
+}, gs = (e) => e.type === "none" ? 0 : e.width, fs = (e, t, n) => {
   if (e.type === "solid")
     return e.color;
   if (e.type === "tinted")
     return ht(n, e.color, us[t]);
-}, fs = (e, t) => t === "dark" ? Ke(e, Me) : pr(e, Me), ms = (e, t, n = 90) => {
-  const r = e, o = t === "dark" ? Ke(e, Me) : pr(e, Me);
+}, ps = (e, t) => t === "dark" ? Ke(e, Me) : fr(e, Me), ms = (e, t, n = 90) => {
+  const r = e, o = t === "dark" ? Ke(e, Me) : fr(e, Me);
   return `linear-gradient(${n}deg, ${r} 0%, ${o} 100%)`;
 };
 var vs = "bow4tg0", ys = "bow4tg1", bs = "bow4tg2", xs = "bow4tg3", Ss = "_1ii3bsb0", ks = "_1ii3bsb1";
-const Et = fe(null), _t = () => {
+const Et = pe(null), _t = () => {
   const e = ee(Et);
   if (!e) throw new Error("useThemeContext must be used inside a <ThemeProvider>.");
   return e;
@@ -1147,7 +1147,7 @@ const Et = fe(null), _t = () => {
     };
     for (const [u, h] of Object.entries(t))
       c[s[u]] = h;
-    const d = ps(n.background, e, o.graphBackground);
+    const d = fs(n.background, e, o.graphBackground);
     return d !== void 0 && (c[s.graphBackground] = d), ma(c);
   }, [n.textScale, n.background, e, o.graphBackground, t]), l = y(
     () => ({
@@ -1163,7 +1163,7 @@ const Et = fe(null), _t = () => {
   const r = ee(Et), o = r ? re(r.themeClass, ys) : void 0, i = r ? { ...r.inlineVarsStyle, ...n } : n;
   return /* @__PURE__ */ a("div", { className: re(o, t), style: i, children: e });
 }, Cs = "graphy_root", ie = () => typeof document > "u" ? null : document.getElementById(Cs) ?? document.body;
-var ws = "yp3g0k0", Ts = "yp3g0k1", Pr = "yp3g0k3", As = "yp3g0k4", Hr = "yp3g0k5", pt = "yp3g0k6", Es = "yp3g0k7", _s = "yp3g0k8", Fr = "yp3g0k9", Ps = "yp3g0ka", Hs = "yp3g0kb", Fs = "yp3g0kc", Bs = "yp3g0kd", Ns = "yp3g0ke";
+var ws = "yp3g0k0", Ts = "yp3g0k1", Pr = "yp3g0k3", As = "yp3g0k4", Hr = "yp3g0k5", ft = "yp3g0k6", Es = "yp3g0k7", _s = "yp3g0k8", Fr = "yp3g0k9", Ps = "yp3g0ka", Hs = "yp3g0kb", Fs = "yp3g0kc", Bs = "yp3g0kd", Ns = "yp3g0ke";
 const Is = Yn.map((e) => s[e]), Ds = Object.fromEntries(
   Yn.map((e) => [s[e], e])
 ), Ms = ({ editor: e, currentColor: t, isOpen: n, onOpenChange: r }) => {
@@ -1209,7 +1209,7 @@ const Is = Yn.map((e) => s[e]), Ds = Object.fromEntries(
     ] }) }) }) })
   ] });
 }, Xt = ({ title: e, colors: t, currentColor: n, onPick: r }) => /* @__PURE__ */ m("div", { className: Hr, children: [
-  /* @__PURE__ */ a("div", { className: pt, children: e }),
+  /* @__PURE__ */ a("div", { className: ft, children: e }),
   /* @__PURE__ */ a("div", { className: Es, children: t.map((o) => /* @__PURE__ */ a(
     "button",
     {
@@ -1227,7 +1227,7 @@ const Is = Yn.map((e) => s[e]), Ds = Object.fromEntries(
   const n = J(), [r, o] = E(!1), i = Fi(e) ? e : "#000000", l = Gs(i);
   return /* @__PURE__ */ m(F.Root, { open: r, onOpenChange: o, children: [
     /* @__PURE__ */ m("div", { className: Hr, children: [
-      /* @__PURE__ */ a("div", { className: pt, children: n("graph.colorDropdown.custom") }),
+      /* @__PURE__ */ a("div", { className: ft, children: n("graph.colorDropdown.custom") }),
       /* @__PURE__ */ m(
         F.Trigger,
         {
@@ -1242,7 +1242,7 @@ const Is = Yn.map((e) => s[e]), Ds = Object.fromEntries(
       )
     ] }),
     /* @__PURE__ */ a(F.Portal, { container: ie(), children: /* @__PURE__ */ a(ae, { children: /* @__PURE__ */ a(F.Positioner, { side: "right", align: "start", sideOffset: 18, className: Pr, children: /* @__PURE__ */ m(F.Popup, { className: Fs, onMouseDown: (c) => c.preventDefault(), children: [
-      /* @__PURE__ */ a("div", { className: pt, children: n("graph.colorDropdown.pickColor") }),
+      /* @__PURE__ */ a("div", { className: ft, children: n("graph.colorDropdown.pickColor") }),
       /* @__PURE__ */ a(va, { color: l, onChange: t, className: Bs }),
       /* @__PURE__ */ a(
         ya,
@@ -1303,17 +1303,17 @@ const Z = ({ children: e, title: t, variant: n = "primary", size: r = "sm", ...o
       ]
     }
   );
-}, Nr = (e) => /* @__PURE__ */ a(Z, { ...e, children: /* @__PURE__ */ a("g", { stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ a("path", { d: "m6 9 6 6 6-6" }) }) }), Xs = "'Noto Serif', Georgia, 'Times New Roman', serif, 'Apple Color Emoji', 'NotoColorEmoji'", Ir = `'Aeonik', 'Aeonik Fallback', ${O}`, Us = "'PT Mono', 'Courier New', monospace, 'Apple Color Emoji', 'NotoColorEmoji'", Vs = "'Intruding Cat', cursive, 'Apple Color Emoji', 'NotoColorEmoji'", Ys = `var(--brand-font-family), ${Ir}`, ft = [
+}, Nr = (e) => /* @__PURE__ */ a(Z, { ...e, children: /* @__PURE__ */ a("g", { stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ a("path", { d: "m6 9 6 6 6-6" }) }) }), Xs = "'Noto Serif', Georgia, 'Times New Roman', serif, 'Apple Color Emoji', 'NotoColorEmoji'", Ir = `'Aeonik', 'Aeonik Fallback', ${O}`, Us = "'PT Mono', 'Courier New', monospace, 'Apple Color Emoji', 'NotoColorEmoji'", Vs = "'Intruding Cat', cursive, 'Apple Color Emoji', 'NotoColorEmoji'", Ys = `var(--brand-font-family), ${Ir}`, pt = [
   { id: "modern", label: "Modern", preview: "Aa", fontFamily: O },
   { id: "fresh", label: "Fresh", preview: "Aa", fontFamily: Ir },
   { id: "timeless", label: "Timeless", preview: "Aa", fontFamily: Xs },
   { id: "technical", label: "Technical", preview: "00", fontFamily: Us },
   { id: "fineliner", label: "Fineliner", preview: "Aa", fontFamily: Vs },
   { id: "brand", label: "Brand", preview: "Aa", fontFamily: Ys }
-], js = (e) => e ? ft.find((t) => t.fontFamily === e) ?? null : null;
+], js = (e) => e ? pt.find((t) => t.fontFamily === e) ?? null : null;
 var Dr = "_1qkyw7q0", Mr = "_1qkyw7q1", Rr = "_1qkyw7q3", Or = "_1qkyw7q4", Gr = "_1qkyw7q5";
 const qs = ({ editor: e, currentFontFamily: t, isOpen: n, onOpenChange: r }) => {
-  const o = J(), i = js(t) ?? ft[0], l = (c) => {
+  const o = J(), i = js(t) ?? pt[0], l = (c) => {
     e.chain().focus().setFontFamily(c.fontFamily).run();
   };
   return /* @__PURE__ */ m(D.Root, { open: n, onOpenChange: r, children: [
@@ -1330,7 +1330,7 @@ const qs = ({ editor: e, currentFontFamily: t, isOpen: n, onOpenChange: r }) =>
         ]
       }
     ),
-    /* @__PURE__ */ a(D.Portal, { container: ie(), children: /* @__PURE__ */ a(ae, { children: /* @__PURE__ */ a(D.Positioner, { side: "bottom", align: "start", sideOffset: 6, className: Rr, children: /* @__PURE__ */ a(D.Popup, { className: Or, onMouseDown: (c) => c.preventDefault(), children: ft.map((c) => /* @__PURE__ */ a(
+    /* @__PURE__ */ a(D.Portal, { container: ie(), children: /* @__PURE__ */ a(ae, { children: /* @__PURE__ */ a(D.Positioner, { side: "bottom", align: "start", sideOffset: 6, className: Rr, children: /* @__PURE__ */ a(D.Popup, { className: Or, onMouseDown: (c) => c.preventDefault(), children: pt.map((c) => /* @__PURE__ */ a(
       D.Item,
       {
         className: Gr,
@@ -1421,10 +1421,10 @@ const ll = ({ editor: e, currentUrl: t, isActive: n, isOpen: r, onOpenChange: o
     cl(e, l), o(!1);
   }, h = () => {
     c(""), o(!1);
-  }, g = (f) => {
-    c(f.target.value);
-  }, p = (f) => {
-    f.key === "Enter" && (f.preventDefault(), u());
+  }, g = (p) => {
+    c(p.target.value);
+  }, f = (p) => {
+    p.key === "Enter" && (p.preventDefault(), u());
   };
   return /* @__PURE__ */ m(F.Root, { open: r, onOpenChange: o, children: [
     /* @__PURE__ */ a(
@@ -1434,7 +1434,7 @@ const ll = ({ editor: e, currentUrl: t, isActive: n, isOpen: r, onOpenChange: o
         "aria-label": i("graph.toolbar.formatting.link"),
         "data-active": n,
         className: ol,
-        onMouseDown: (f) => f.preventDefault(),
+        onMouseDown: (p) => p.preventDefault(),
         children: /* @__PURE__ */ a(el, {})
       }
     ),
@@ -1443,7 +1443,7 @@ const ll = ({ editor: e, currentUrl: t, isActive: n, isOpen: r, onOpenChange: o
       {
         className: il,
         initialFocus: d,
-        onMouseDown: (f) => f.preventDefault(),
+        onMouseDown: (p) => p.preventDefault(),
         children: [
           /* @__PURE__ */ a(
             "input",
@@ -1454,9 +1454,9 @@ const ll = ({ editor: e, currentUrl: t, isActive: n, isOpen: r, onOpenChange: o
               placeholder: i("graph.toolbar.link.placeholder"),
               "aria-label": i("graph.toolbar.link.urlLabel"),
               className: sl,
-              onMouseDown: (f) => f.stopPropagation(),
+              onMouseDown: (p) => p.stopPropagation(),
               onChange: g,
-              onKeyDown: p
+              onKeyDown: f
             }
           ),
           /* @__PURE__ */ a("button", { type: "button", "aria-label": i("common.cancel"), className: Yt, onClick: h, children: /* @__PURE__ */ a(tl, {}) }),
@@ -1503,8 +1503,8 @@ const ll = ({ editor: e, currentUrl: t, isActive: n, isOpen: r, onOpenChange: o
   /* @__PURE__ */ a("path", { d: "M15 12H3" }),
   /* @__PURE__ */ a("path", { d: "M17 19H3" })
 ] }) });
-var gl = "k91gos0", pl = "k91gos1";
-const fl = 6, de = ({ label: e, isActive: t, onToggle: n, children: r }) => {
+var gl = "k91gos0", fl = "k91gos1";
+const pl = 6, de = ({ label: e, isActive: t, onToggle: n, children: r }) => {
   const o = (i) => i.preventDefault();
   return /* @__PURE__ */ m(le.Root, { children: [
     /* @__PURE__ */ a(
@@ -1517,7 +1517,7 @@ const fl = 6, de = ({ label: e, isActive: t, onToggle: n, children: r }) => {
         children: r
       }
     ),
-    /* @__PURE__ */ a(le.Portal, { container: ie(), children: /* @__PURE__ */ a(ae, { children: /* @__PURE__ */ a(le.Positioner, { sideOffset: fl, children: /* @__PURE__ */ a(le.Popup, { className: pl, children: e }) }) }) })
+    /* @__PURE__ */ a(le.Portal, { container: ie(), children: /* @__PURE__ */ a(ae, { children: /* @__PURE__ */ a(le.Positioner, { sideOffset: pl, children: /* @__PURE__ */ a(le.Popup, { className: fl, children: e }) }) }) })
   ] });
 }, ml = ({ editor: e, activeAlignment: t = "left" }) => {
   const n = J();
@@ -1573,7 +1573,7 @@ const yl = ({ editor: e }) => ({
   }), h = w(null), g = ha({
     editor: e,
     selector: yl
-  }), p = Ge(
+  }), f = Ge(
     (v) => {
       h.current = v, d.setFloating(v);
     },
@@ -1591,9 +1591,9 @@ const yl = ({ editor: e }) => ({
       e.off("focus", v), e.off("blur", x);
     };
   }, [e]), !e || !n && !l) return null;
-  const f = ie();
-  return f ? fa(
-    /* @__PURE__ */ a(ae, { children: /* @__PURE__ */ a(le.Provider, { children: /* @__PURE__ */ m(H.Root, { ref: p, className: vl, style: u, children: [
+  const p = ie();
+  return p ? pa(
+    /* @__PURE__ */ a(ae, { children: /* @__PURE__ */ a(le.Provider, { children: /* @__PURE__ */ m(H.Root, { ref: f, className: vl, style: u, children: [
       /* @__PURE__ */ m(H.Group, { className: ke, children: [
         /* @__PURE__ */ a(
           Ms,
@@ -1668,7 +1668,7 @@ const yl = ({ editor: e }) => ({
         }
       ) })
     ] }) }) }),
-    f
+    p
   ) : null;
 };
 var Cl = "_2ngohc0";
@@ -1708,7 +1708,7 @@ const Wr = ({ editor: e, ariaLabel: t }) => /* @__PURE__ */ m("div", { className
 }) => {
   const i = w(jt(e)), l = w(!1), c = $r((u) => {
     l.current = !0, r?.(u);
-  }, o), d = pa({
+  }, o), d = fa({
     extensions: t,
     content: i.current,
     editable: n,
@@ -1996,7 +1996,7 @@ const dc = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   /* @__PURE__ */ a("path", { d: "m5 12 7-7 7 7" }),
   /* @__PURE__ */ a("path", { d: "M12 19V5" })
 ] }) }), hc = (e) => /* @__PURE__ */ a(Z, { ...e, children: /* @__PURE__ */ a("g", { stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ a("path", { d: "M5 12h14" }) }) });
-var qr = "n7clvo0", gc = "n7clvo1", pc = "n7clvo2", fc = "n7clvo3", Kr = { small: "n7clvo4", medium: "n7clvo5", large: "n7clvo6" }, mc = { small: "n7clvo7", medium: "n7clvo8", large: "n7clvo9" }, vc = { up: "n7clvoa", down: "n7clvob", flat: "n7clvoc" }, yc = { up: "n7clvoe n7clvod", down: "n7clvof n7clvod", flat: "n7clvog n7clvod" };
+var qr = "n7clvo0", gc = "n7clvo1", fc = "n7clvo2", pc = "n7clvo3", Kr = { small: "n7clvo4", medium: "n7clvo5", large: "n7clvo6" }, mc = { small: "n7clvo7", medium: "n7clvo8", large: "n7clvo9" }, vc = { up: "n7clvoa", down: "n7clvob", flat: "n7clvoc" }, yc = { up: "n7clvoe n7clvod", down: "n7clvof n7clvod", flat: "n7clvog n7clvod" };
 const bc = ({ segment: e, resolvedSize: t }) => {
   if (e.kind === "swatch")
     return /* @__PURE__ */ a(qe, { shape: e.swatch.shape, color: e.swatch.color, width: e.size, height: e.size });
@@ -2013,9 +2013,9 @@ const bc = ({ segment: e, resolvedSize: t }) => {
     case "trendPercentage":
       return vc[e.trendDirection ?? "up"];
     case "trendReference":
-      return pc;
-    case "label":
       return fc;
+    case "label":
+      return pc;
   }
 }, Sc = ({ item: e, resolvedSize: t }) => /* @__PURE__ */ a("div", { className: jr, children: mn(e).map((n) => /* @__PURE__ */ a(kc, { row: n, resolvedSize: t }, n.role)) }), kc = ({ row: e, resolvedSize: t }) => {
   const n = e.role === "trendRow";
@@ -2169,7 +2169,7 @@ const Dc = (e) => {
 }, Mc = (e) => {
   const t = Rc();
   return t ? (t.style.font = e, t.getBoundingClientRect().width) : null;
-}, Rc = () => typeof document > "u" ? null : (q || (q = document.createElement("span"), q.style.position = "absolute", q.style.visibility = "hidden", q.style.whiteSpace = "nowrap", q.style.left = "-9999px", q.textContent = Jr, document.body.appendChild(q)), q), Zr = fe(null), Oc = ({ children: e, measurer: t }) => {
+}, Rc = () => typeof document > "u" ? null : (q || (q = document.createElement("span"), q.style.position = "absolute", q.style.visibility = "hidden", q.style.whiteSpace = "nowrap", q.style.left = "-9999px", q.textContent = Jr, document.body.appendChild(q)), q), Zr = pe(null), Oc = ({ children: e, measurer: t }) => {
   const [n, r] = E(null);
   T(() => {
     if (t !== void 0) return;
@@ -2248,13 +2248,13 @@ const ed = "#9ca3af", ot = "\0", td = (e) => {
   });
   T(() => {
     if (!r) return;
-    const h = (p) => {
-      const f = p.target;
-      if (!f) return;
+    const h = (f) => {
+      const p = f.target;
+      if (!p) return;
       const v = i.reference.current, x = i.floating.current;
-      v instanceof Element && v.contains(f) || x instanceof Element && x.contains(f) || o(!1);
-    }, g = (p) => {
-      p.key === "Escape" && o(!1);
+      v instanceof Element && v.contains(p) || x instanceof Element && x.contains(p) || o(!1);
+    }, g = (f) => {
+      f.key === "Escape" && o(!1);
     };
     return document.addEventListener("pointerdown", h), document.addEventListener("keydown", g), () => {
       document.removeEventListener("pointerdown", h), document.removeEventListener("keydown", g);
@@ -2343,7 +2343,7 @@ const ud = ({
       swatchGap: l.legendSwatchGap,
       horizontalChrome: l.legendPillHorizontalChrome
     })) + Pi;
-    return fd({
+    return pd({
       pillSizes: A,
       overflowPillSize: _,
       containerSize: u,
@@ -2351,7 +2351,7 @@ const ud = ({
     });
   }, [c, u, d, i, o, l]);
   if (c.length === 0) return null;
-  const g = c.slice(0, h.visibleCount), p = c.slice(h.visibleCount), f = h.hasOverflow && p.length > 0;
+  const g = c.slice(0, h.visibleCount), f = c.slice(h.visibleCount), p = h.hasOverflow && f.length > 0;
   return /* @__PURE__ */ m(
     "div",
     {
@@ -2361,7 +2361,7 @@ const ud = ({
       }),
       children: [
         g.map((v) => /* @__PURE__ */ a("div", { className: dd, children: /* @__PURE__ */ a(Qr, { pill: v }) }, v.key)),
-        f && /* @__PURE__ */ a(ad, { hiddenPills: p, placement: md(e) })
+        p && /* @__PURE__ */ a(ad, { hiddenPills: f, placement: md(e) })
       ]
     }
   );
@@ -2376,9 +2376,9 @@ const ud = ({
   const l = n.measureText(e, r).width, c = t > 0 ? o : 0;
   return t + c + l + i;
 }, hd = (e, t, n) => {
-  const r = pd(e, n.legendSwatchHeight);
+  const r = fd(e, n.legendSwatchHeight);
   return Math.max(t, r) + n.legendPillVerticalChrome;
-}, gd = (e, t) => e.isBubble ? Number(e.visual.size) : Er(e.visual.color, t), pd = (e, t) => e.isBubble ? Number(e.visual.size) : t, fd = ({
+}, gd = (e, t) => e.isBubble ? Number(e.visual.size) : Er(e.visual.color, t), fd = (e, t) => e.isBubble ? Number(e.visual.size) : t, pd = ({
   pillSizes: e,
   overflowPillSize: t,
   containerSize: n,
@@ -2449,7 +2449,7 @@ const ud = ({
 });
 const Ft = 1, eo = 8, yd = 12;
 s.pointStrokeColor;
-const bd = 1, xd = 2, Sd = 0.7, pe = ({ hit: e }) => {
+const bd = 1, xd = 2, Sd = 0.7, fe = ({ hit: e }) => {
   const t = G(e.observation), n = (X(e.observation) ?? Ft) * Sd, r = (ze(e.observation) ?? eo) / 2;
   return /* @__PURE__ */ a(
     "circle",
@@ -2494,15 +2494,15 @@ const kd = oe(function({
   ), l = y(() => {
     const c = Xe(t.data, t.mapping, t.id), d = [];
     return t.data.groupBy(Ee.group).forEach((u) => {
-      const h = bn([...u], t.params.missingValues), g = i(h), p = o(h);
-      if (!g || !p) return;
-      const f = h[0];
-      if (!f) return;
-      const v = G(f), x = X(f), k = Ue(f, t.params), L = Ve(Ye(f));
+      const h = bn([...u], t.params.missingValues), g = i(h), f = o(h);
+      if (!g || !f) return;
+      const p = h[0];
+      if (!p) return;
+      const v = G(p), x = X(p), k = Ue(p, t.params), L = Ve(Ye(p));
       d.push({
-        key: c(f),
+        key: c(p),
         areaPath: g,
-        linePath: p,
+        linePath: f,
         color: v,
         fillOpacity: x ?? to,
         strokeWidth: k,
@@ -2629,13 +2629,13 @@ const at = 1, Td = 2, Ad = 1, Ed = yd / 2, _d = 2.25, Bt = ({ hit: e, ...t }) =>
   return xn(t) ? t / _d : Ed;
 }, Hd = ({ layer: e, coordSystem: t, primary: n, companions: r }) => {
   const o = Sn(n.observation), i = y(() => {
-    const p = e.data.filter(Ee.group, "eq", o);
-    return bn([...p], e.params.missingValues);
+    const f = e.data.filter(Ee.group, "eq", o);
+    return bn([...f], e.params.missingValues);
   }, [e.data, e.params.missingValues, o]), { areaPath: l, linePath: c } = y(() => {
-    const { lineGenerator: p, areaGenerator: f } = yn(t, e.params);
+    const { lineGenerator: f, areaGenerator: p } = yn(t, e.params);
     return {
-      areaPath: f(i) ?? "",
-      linePath: p(i) ?? ""
+      areaPath: p(i) ?? "",
+      linePath: f(i) ?? ""
     };
   }, [t, e.params, i]);
   if (!l || !c) return null;
@@ -2668,7 +2668,7 @@ const at = 1, Td = 2, Ad = 1, Ed = yd / 2, _d = 2.25, Bt = ({ hit: e, ...t }) =>
         ]
       }
     ),
-    r.map((p) => /* @__PURE__ */ a(pe, { hit: p }, `companion-${p.layerId}-${p.pointIndex}`)),
+    r.map((f) => /* @__PURE__ */ a(fe, { hit: f }, `companion-${f.layerId}-${f.pointIndex}`)),
     /* @__PURE__ */ a(Bt, { hit: n, "data-testid": "hovered-area-point" })
   ] });
 }, Fd = {
@@ -2677,7 +2677,7 @@ const at = 1, Td = 2, Ad = 1, Ed = yd / 2, _d = 2.25, Bt = ({ hit: e, ...t }) =>
   guideMode: "continuous",
   render: ({ layer: e, coordSystem: t, isAnimated: n }) => /* @__PURE__ */ a(kd, { layer: e, coordSystem: t, isAnimated: n }),
   renderHover: ({ layer: e, coordSystem: t, primary: n, group: r, related: o }) => /* @__PURE__ */ a(Hd, { layer: e, coordSystem: t, primary: n, companions: [...r, ...o] }),
-  renderHoverCompanions: ({ related: e }) => /* @__PURE__ */ a(C, { children: e.map((t) => /* @__PURE__ */ a(pe, { hit: t }, `companion-${t.layerId}-${t.pointIndex}`)) }),
+  renderHoverCompanions: ({ related: e }) => /* @__PURE__ */ a(C, { children: e.map((t) => /* @__PURE__ */ a(fe, { hit: t }, `companion-${t.layerId}-${t.pointIndex}`)) }),
   getOverlayAnchor: ({ observation: e, coordSystem: t }) => {
     if (t.mainAxis === "x") {
       const o = ue(e), i = Xo(e) ?? he(e);
@@ -2720,20 +2720,20 @@ const at = 1, Td = 2, Ad = 1, Ed = yd / 2, _d = 2.25, Bt = ({ hit: e, ...t }) =>
   isAnimated: r
 }) {
   const o = we(), i = we(), l = oo(n.mainAxis), c = y(() => {
-    const g = Xe(t.data, t.mapping, t.id), p = /* @__PURE__ */ new Map();
-    for (const f of t.data) {
-      const v = kn(n.mainAxis, f);
+    const g = Xe(t.data, t.mapping, t.id), f = /* @__PURE__ */ new Map();
+    for (const p of t.data) {
+      const v = kn(n.mainAxis, p);
       if (!v) continue;
-      const x = Md(n.mainAxis, v), k = p.get(x), L = {
-        key: g(f),
+      const x = Md(n.mainAxis, v), k = f.get(x), L = {
+        key: g(p),
         ...v,
-        fill: G(f),
-        opacity: X(f) ?? ro
+        fill: G(p),
+        opacity: X(p) ?? ro
       };
-      k ? k.push(L) : p.set(x, [L]);
+      k ? k.push(L) : f.set(x, [L]);
     }
-    return [...p.entries()].map(([f, v]) => ({
-      id: `${o}${f}`,
+    return [...f.entries()].map(([p, v]) => ({
+      id: `${o}${p}`,
       bars: v,
       ...Rd(v)
     }));
@@ -2744,13 +2744,13 @@ const at = 1, Td = 2, Ad = 1, Ed = yd / 2, _d = 2.25, Bt = ({ hit: e, ...t }) =>
       u !== void 0 && l && /* @__PURE__ */ a(ao, { maskId: u, gradientId: h, direction: l })
     ] }),
     /* @__PURE__ */ a("g", { mask: u !== void 0 ? `url(#${u})` : void 0, children: c.map((g) => {
-      const [p] = g.bars;
-      if (g.bars.length === 1 && p !== void 0) {
-        const { key: f, ...v } = p;
-        return /* @__PURE__ */ a(en, { ...v, rx: Ae, isAnimated: r }, f);
+      const [f] = g.bars;
+      if (g.bars.length === 1 && f !== void 0) {
+        const { key: p, ...v } = f;
+        return /* @__PURE__ */ a(en, { ...v, rx: Ae, isAnimated: r }, p);
       }
-      return /* @__PURE__ */ a("g", { clipPath: `url(#${g.id})`, children: g.bars.map((f) => {
-        const { key: v, ...x } = f;
+      return /* @__PURE__ */ a("g", { clipPath: `url(#${g.id})`, children: g.bars.map((p) => {
+        const { key: v, ...x } = p;
         return /* @__PURE__ */ a(en, { ...x, isAnimated: r }, v);
       }) }, g.id);
     }) })
@@ -2817,7 +2817,7 @@ var Od = "_1suo8ub0";
 const Le = 3, Gd = ({ coordSystem: e, primary: t, panelRect: n }) => {
   const r = we(), o = oo(e.mainAxis), i = kn(e.mainAxis, t.observation);
   if (!i) return null;
-  const l = i.x * n.width, c = i.y * n.height, d = i.width * n.width, u = i.height * n.height, h = l - Le, g = c - Le, p = d + Le * 2, f = u + Le * 2, v = Ae + Le, x = G(t.observation), k = X(t.observation) ?? ro, L = o ? `${r}mask` : void 0;
+  const l = i.x * n.width, c = i.y * n.height, d = i.width * n.width, u = i.height * n.height, h = l - Le, g = c - Le, f = d + Le * 2, p = u + Le * 2, v = Ae + Le, x = G(t.observation), k = X(t.observation) ?? ro, L = o ? `${r}mask` : void 0;
   return /* @__PURE__ */ m("g", { "data-testid": "hovered-bar", children: [
     L !== void 0 && o && /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ a(ao, { maskId: L, gradientId: `${r}grad`, direction: o }) }),
     /* @__PURE__ */ m("g", { mask: L !== void 0 ? `url(#${L})` : void 0, children: [
@@ -2826,8 +2826,8 @@ const Le = 3, Gd = ({ coordSystem: e, primary: t, panelRect: n }) => {
         {
           x: h,
           y: g,
-          width: p,
-          height: f,
+          width: f,
+          height: p,
           rx: v,
           fill: s.hoveredBarBorderColor,
           className: Od,
@@ -2867,13 +2867,13 @@ const Le = 3, Gd = ({ coordSystem: e, primary: t, panelRect: n }) => {
       if (!u) return;
       const h = d[0];
       if (!h) return;
-      const g = G(h), p = X(h), f = Ue(h, t.params), v = Ve(Ye(h));
+      const g = G(h), f = X(h), p = Ue(h, t.params), v = Ve(Ye(h));
       l.push({
         key: i(h),
         pathData: u,
         color: g,
-        opacity: p ?? io,
-        strokeWidth: f,
+        opacity: f ?? io,
+        strokeWidth: p,
         strokeDasharray: v
       });
     }), l;
@@ -2973,7 +2973,7 @@ const Le = 3, Gd = ({ coordSystem: e, primary: t, panelRect: n }) => {
         )
       }
     ),
-    n.map((h) => /* @__PURE__ */ a(pe, { hit: h }, `companion-${h.layerId}-${h.pointIndex}`)),
+    n.map((h) => /* @__PURE__ */ a(fe, { hit: h }, `companion-${h.layerId}-${h.pointIndex}`)),
     /* @__PURE__ */ a(Bt, { hit: t, "data-testid": "hovered-line-point" })
   ] });
 }, Vd = {
@@ -2982,7 +2982,7 @@ const Le = 3, Gd = ({ coordSystem: e, primary: t, panelRect: n }) => {
   guideMode: "continuous",
   render: ({ layer: e, isAnimated: t }) => /* @__PURE__ */ a(Wd, { layer: e, isAnimated: t }),
   renderHover: ({ layer: e, primary: t, group: n, related: r }) => /* @__PURE__ */ a(Ud, { layer: e, primary: t, companions: [...n, ...r] }),
-  renderHoverCompanions: ({ related: e }) => /* @__PURE__ */ a(C, { children: e.map((t) => /* @__PURE__ */ a(pe, { hit: t }, `companion-${t.layerId}-${t.pointIndex}`)) }),
+  renderHoverCompanions: ({ related: e }) => /* @__PURE__ */ a(C, { children: e.map((t) => /* @__PURE__ */ a(fe, { hit: t }, `companion-${t.layerId}-${t.pointIndex}`)) }),
   getOverlayAnchor: ({ observation: e }) => {
     const t = ue(e), n = he(e);
     return t === null || n === null ? null : { x: t, y: n };
@@ -2996,19 +2996,19 @@ const Le = 3, Gd = ({ coordSystem: e, primary: t, panelRect: n }) => {
     let i = 0;
     for (const l of t.data) {
       const c = i++, d = ue(l), u = he(l);
-      if (d === null || u === null)
+      if (d === null || u === null || d < 0 || d > 1 || u < 0 || u > 1)
         continue;
-      const h = G(l), g = X(l), p = ze(l), f = Yo(l);
+      const h = G(l), g = X(l), f = ze(l), p = Yo(l);
       o.push({
         key: String(c),
         // using the observation index as key for points leads to nicer transitions
         cx: $e(d),
         cy: We(u),
-        radius: (p ?? t.params.size) / 2,
+        radius: (f ?? t.params.size) / 2,
         fill: h,
         stroke: s.pointStrokeColor,
         opacity: g ?? Ft,
-        strokeWidth: f ?? bd
+        strokeWidth: p ?? bd
       });
     }
     return o;
@@ -3048,10 +3048,10 @@ const Le = 3, Gd = ({ coordSystem: e, primary: t, panelRect: n }) => {
   guideMode: null,
   render: ({ layer: e, isAnimated: t }) => /* @__PURE__ */ a(Yd, { layer: e, isAnimated: t }),
   renderHover: ({ primary: e, group: t, related: n }) => /* @__PURE__ */ m("g", { "data-testid": "hovered-point", children: [
-    [...t, ...n].map((r) => /* @__PURE__ */ a(pe, { hit: r }, `companion-${r.layerId}-${r.pointIndex}`)),
+    [...t, ...n].map((r) => /* @__PURE__ */ a(fe, { hit: r }, `companion-${r.layerId}-${r.pointIndex}`)),
     /* @__PURE__ */ a(Bt, { hit: e })
   ] }),
-  renderHoverCompanions: ({ related: e }) => /* @__PURE__ */ a(C, { children: e.map((t) => /* @__PURE__ */ a(pe, { hit: t }, `companion-${t.layerId}-${t.pointIndex}`)) }),
+  renderHoverCompanions: ({ related: e }) => /* @__PURE__ */ a(C, { children: e.map((t) => /* @__PURE__ */ a(fe, { hit: t }, `companion-${t.layerId}-${t.pointIndex}`)) }),
   getOverlayAnchor: ({ observation: e }) => {
     const t = ue(e), n = he(e);
     return t === null || n === null ? null : { x: t, y: n };
@@ -3087,7 +3087,7 @@ const ou = (e, t) => {
   text: i,
   isAnimated: l
 }) => {
-  const c = e === "start", d = c ? -Oe : -(r - Oe), u = c ? d + r - Ce : d + Ce - it, h = c ? void 0 : `rotate(180 ${u + it / 2} ${o / 2})`, g = c ? "0%" : "100%", p = S(1 - t), f = /* @__PURE__ */ m("g", { transform: `translate(0, ${-o / 2})`, pointerEvents: "none", children: [
+  const c = e === "start", d = c ? -Oe : -(r - Oe), u = c ? d + r - Ce : d + Ce - it, h = c ? void 0 : `rotate(180 ${u + it / 2} ${o / 2})`, g = c ? "0%" : "100%", f = S(1 - t), p = /* @__PURE__ */ m("g", { transform: `translate(0, ${-o / 2})`, pointerEvents: "none", children: [
     /* @__PURE__ */ a("rect", { x: d, y: 0, width: r, height: o, rx: so, fill: n }),
     /* @__PURE__ */ a("g", { transform: h, children: /* @__PURE__ */ a(
       "svg",
@@ -3109,11 +3109,11 @@ const ou = (e, t) => {
       initial: !1,
       transition: R,
       x: g,
-      animate: { y: p },
+      animate: { y: f },
       overflow: "visible",
-      children: f
+      children: p
     }
-  ) : /* @__PURE__ */ a("svg", { x: g, y: p, overflow: "visible", children: f });
+  ) : /* @__PURE__ */ a("svg", { x: g, y: f, overflow: "visible", children: p });
 }, du = ({
   labelPosition: e,
   linePosition: t,
@@ -3150,7 +3150,7 @@ const ou = (e, t) => {
   symbolColor: d,
   isAnimated: u
 }) => {
-  const h = c === null ? 0 : tn + eu, g = t + h + Ce * 2, p = qd + Qd * 2, f = /* @__PURE__ */ m(C, { children: [
+  const h = c === null ? 0 : tn + eu, g = t + h + Ce * 2, f = qd + Qd * 2, p = /* @__PURE__ */ m(C, { children: [
     c !== null && d !== null && /* @__PURE__ */ a("g", { transform: `translate(0, ${-nn / 2})`, children: /* @__PURE__ */ a(qe, { shape: c, color: d, width: tn, height: nn }) }),
     /* @__PURE__ */ a(
       "text",
@@ -3171,8 +3171,8 @@ const ou = (e, t) => {
       linePosition: o,
       color: i,
       pillWidth: g,
-      pillHeight: p,
-      text: f,
+      pillHeight: f,
+      text: p,
       isAnimated: u
     }
   ) : /* @__PURE__ */ a(
@@ -3182,8 +3182,8 @@ const ou = (e, t) => {
       linePosition: o,
       color: i,
       pillWidth: g,
-      pillHeight: p,
-      text: f,
+      pillHeight: f,
+      text: p,
       isAnimated: u
     }
   );
@@ -3227,10 +3227,10 @@ const ou = (e, t) => {
   ), g = y(
     () => jo(u, h, n).get(t.id) ?? null,
     [u, h, n, t.id]
-  ), p = y(
+  ), f = y(
     () => lu(t.params.label, qo({ guides: l, numberFormat: c, layer: t, locale: r })),
     [l, c, r, t]
-  ), f = y(
+  ), p = y(
     () => ({
       family: Jd,
       size: te(Kd, d),
@@ -3238,8 +3238,8 @@ const ou = (e, t) => {
     }),
     [d]
   ), v = y(
-    () => p === null ? 0 : i.measureText(p, f).width,
-    [p, f, i]
+    () => f === null ? 0 : i.measureText(f, p).width,
+    [f, p, i]
   ), x = t.data.getFirst();
   if (!x) return null;
   const { lineColor: k, labelTextColor: L } = su(t), A = ou(t, n), I = A ? he(x) : ue(x);
@@ -3254,10 +3254,10 @@ const ou = (e, t) => {
         isAnimated: o
       }
     ),
-    p !== null && /* @__PURE__ */ a(
+    f !== null && /* @__PURE__ */ a(
       uu,
       {
-        label: p,
+        label: f,
         textWidth: v,
         labelPosition: t.params.labelPosition,
         isHorizontalLine: A,
@@ -3270,7 +3270,7 @@ const ou = (e, t) => {
       }
     )
   ] });
-}), pu = {
+}), fu = {
   geom: "rule",
   coord: "cartesian",
   guideMode: null,
@@ -3285,7 +3285,7 @@ const ou = (e, t) => {
   ),
   renderHover: () => null,
   renderHoverCompanions: () => null
-}, lo = 1, an = Math.PI * 2, fu = oe(function({
+}, lo = 1, an = Math.PI * 2, pu = oe(function({
   layer: t,
   isAnimated: n
 }) {
@@ -3296,13 +3296,13 @@ const ou = (e, t) => {
   const o = y(() => {
     const i = Xe(t.data, t.mapping, t.id), l = [];
     for (const c of t.data) {
-      const d = i(c), { startAngle: u, endAngle: h } = wn(c), { innerRadius: g, outerRadius: p } = Tn(c);
-      u === null || h === null || g === null || p === null || l.push({
+      const d = i(c), { startAngle: u, endAngle: h } = wn(c), { innerRadius: g, outerRadius: f } = Tn(c);
+      u === null || h === null || g === null || f === null || l.push({
         key: d,
         startAngle: u,
         endAngle: h,
         innerRadius: g,
-        outerRadius: p,
+        outerRadius: f,
         fill: G(c),
         opacity: X(c) ?? lo
       });
@@ -3355,14 +3355,14 @@ const ou = (e, t) => {
   return T(() => {
     u.set(e), h.set(t);
   }, [u, h, e, t]), T(() => {
-    const p = () => {
+    const f = () => {
       const x = u.get(), k = h.get();
       g.set(
         De({ startAngle: x, endAngle: k, innerRadius: n, outerRadius: r }) ?? ""
       );
-    }, f = u.on("change", p), v = h.on("change", p);
+    }, p = u.on("change", f), v = h.on("change", f);
     return () => {
-      f(), v();
+      p(), v();
     };
   }, [u, h, n, r, g]), /* @__PURE__ */ a(j.path, { d: g, fill: o, opacity: i, transition: R });
 }, vu = ({ primary: e }) => {
@@ -3389,7 +3389,7 @@ const ou = (e, t) => {
   geom: "bar",
   coord: "polar",
   guideMode: null,
-  render: ({ layer: e, isAnimated: t }) => /* @__PURE__ */ a(fu, { layer: e, isAnimated: t }),
+  render: ({ layer: e, isAnimated: t }) => /* @__PURE__ */ a(pu, { layer: e, isAnimated: t }),
   renderHover: ({ primary: e }) => /* @__PURE__ */ a(vu, { primary: e }),
   renderHoverCompanions: () => null
 }, bu = {
@@ -3407,7 +3407,7 @@ const ou = (e, t) => {
     cartesian: jd
   },
   rule: {
-    cartesian: pu
+    cartesian: fu
   }
 }, Je = (e, t) => bu[e.geom]?.[t.type] ?? null, xu = (e, t) => {
   const n = e.filter((o) => o.interactive);
@@ -3489,7 +3489,7 @@ const ou = (e, t) => {
   }, c = () => {
     r = null, o !== null && (cancelAnimationFrame(o), o = null);
     const d = n.getState();
-    d.hover.primary !== null && d.setHoverState(pn);
+    d.hover.primary !== null && d.setHoverState(fn);
   };
   return e.addEventListener("pointermove", l), e.addEventListener("pointerleave", c), () => {
     e.removeEventListener("pointermove", l), e.removeEventListener("pointerleave", c), o !== null && cancelAnimationFrame(o), r = null;
@@ -3518,9 +3518,9 @@ const ou = (e, t) => {
         r.removeAttribute(lt);
       };
   }, [e, n]);
-}, uo = N.xs, vt = O, ho = K.medium, Fu = K.semibold, go = 6, po = 2, Bu = 4, Nu = 2, sn = 4;
+}, uo = N.xs, vt = O, ho = K.medium, Fu = K.semibold, go = 6, fo = 2, Bu = 4, Nu = 2, sn = 4;
 var Iu = "_1agclyl0", Du = "_1agclyl1", Mu = "_1agclyl2", Ru = { inside: "_1agclyl4 _1agclyl3", outside: "_1agclyl5 _1agclyl3" }, Ou = "_1agclyl6 _1agclyl3";
-const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l, position: c, coordType: d }) => {
+const po = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l, position: c, coordType: d }) => {
   const u = i ? `rotate(-90 ${e} ${t})` : void 0, h = l === "aggregate" ? Ou : Ru[c], g = Gu(l, c, d);
   return /* @__PURE__ */ m("g", { transform: u, children: [
     g && /* @__PURE__ */ a(
@@ -3541,7 +3541,7 @@ const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l,
   if (e === "aggregate") return Mu;
   if (t === "outside" && n === "cartesian") return Du;
 }, zu = {
-  dataLabel: { x: go, y: po },
+  dataLabel: { x: go, y: fo },
   stackTotal: { x: Bu, y: Nu }
 }, Wu = ({ panelRect: e, formattingLocale: t }) => {
   const n = ve(), r = B(
@@ -3574,7 +3574,7 @@ const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l,
     [r, e, i, t]
   );
   return /* @__PURE__ */ a("g", { className: Iu, transform: `translate(${e.x}, ${e.y})`, "data-testid": "data-labels", children: l.labels.map((c) => /* @__PURE__ */ a(
-    fo,
+    po,
     {
       x: c.x,
       y: c.y,
@@ -3608,15 +3608,15 @@ const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l,
   const u = ve(), g = y(
     () => u.measureText(n, { family: O, size: r, weight: d }),
     [u, n, r, d]
-  ).width + o * 2, p = r + i * 2;
+  ).width + o * 2, f = r + i * 2;
   return /* @__PURE__ */ m("g", { style: { pointerEvents: "none" }, children: [
     /* @__PURE__ */ a(
       "rect",
       {
         x: e - g / 2,
-        y: t - p / 2,
+        y: t - f / 2,
         width: g,
-        height: p,
+        height: f,
         rx: 4,
         fill: s.graphBackground,
         stroke: c,
@@ -3666,8 +3666,8 @@ const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l,
       labelPosition: u,
       labelText: h,
       labelLineHeight: g,
-      labelPaddingX: p,
-      labelPaddingY: f,
+      labelPaddingX: f,
+      labelPaddingY: p,
       labelStrokeWidth: v,
       labelFontWeight: x
     }) => {
@@ -3689,8 +3689,8 @@ const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l,
             y: u.y,
             text: h,
             lineHeight: g,
-            paddingX: p,
-            paddingY: f,
+            paddingX: f,
+            paddingY: p,
             strokeWidth: v,
             strokeColor: k,
             fontWeight: x
@@ -3934,7 +3934,7 @@ const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l,
       height: e.height,
       overflow: "visible",
       "data-testid": `shapes-${t}`,
-      children: r.map(({ id: o, x: i, y: l, width: c, height: d, fillColor: u, fillOpacity: h, strokeWidth: g, strokeColor: p }) => /* @__PURE__ */ a(
+      children: r.map(({ id: o, x: i, y: l, width: c, height: d, fillColor: u, fillOpacity: h, strokeWidth: g, strokeColor: f }) => /* @__PURE__ */ a(
         "rect",
         {
           x: S(i),
@@ -3943,7 +3943,7 @@ const fo = ({ x: e, y: t, width: n, height: r, text: o, isRotated: i, target: l,
           height: S(d),
           fill: u,
           fillOpacity: h,
-          stroke: g > 0 ? p ?? s.defaultAnnotationShapeStroke : "none",
+          stroke: g > 0 ? f ?? s.defaultAnnotationShapeStroke : "none",
           strokeWidth: g
         },
         o
@@ -3994,7 +3994,7 @@ const dh = ({ panelRect: e }) => {
   boxShadow: `0 0 0 1.5px ${Ke(e, 0.1)}`
 };
 var hh = "usd3ea0", gh = "usd3ea1";
-const ph = ({
+const fh = ({
   layer: e,
   coordSystem: t,
   isAnimated: n,
@@ -4017,7 +4017,7 @@ const ph = ({
     }
   );
 };
-function fh({
+function ph({
   plugin: e,
   layer: t,
   coordSystem: n,
@@ -4047,12 +4047,12 @@ const mh = 4, vh = ({
       textScale: v.config.appearance.textScale
     }))
   ), h = y(
-    () => fh({ plugin: e, layer: t, coordSystem: o, candidates: r }),
+    () => ph({ plugin: e, layer: t, coordSystem: o, candidates: r }),
     [e, t, o, r]
-  ), g = y(() => ta(t), [t]), p = y(
+  ), g = y(() => ta(t), [t]), f = y(
     () => na({ layer: t, numberFormat: d, locale: c }),
     [d, t, c]
-  ), f = uo * Cr * u;
+  ), p = uo * Cr * u;
   return e === null || n === null && h.length === 0 ? null : /* @__PURE__ */ m(C, { children: [
     n ? e.render({ layer: n, coordSystem: o, isAnimated: i, formattingLocale: c }) : null,
     h.map(({ observation: v, observationIndex: x, anchor: k }) => /* @__PURE__ */ a(
@@ -4062,8 +4062,8 @@ const mh = 4, vh = ({
         anchor: k,
         panelRect: l,
         readSegmentY: g,
-        formatYValue: p,
-        labelFontSizePx: f
+        formatYValue: f,
+        labelFontSizePx: p
       },
       bh(v, x)
     ))
@@ -4076,16 +4076,16 @@ const mh = 4, vh = ({
   formatYValue: o,
   labelFontSizePx: i
 }) => {
-  const l = ve(), c = $e(t.x), d = We(t.y), u = (ze(e) ?? eo) / 2, h = r(e), g = xn(h) ? o(h, e) : null, p = y(() => {
+  const l = ve(), c = $e(t.x), d = We(t.y), u = (ze(e) ?? eo) / 2, h = r(e), g = xn(h) ? o(h, e) : null, f = y(() => {
     if (g === null) return null;
-    const f = l.measureText(g, {
+    const p = l.measureText(g, {
       family: vt,
       size: i,
       weight: ho
     });
     return {
-      width: f.width + go * 2,
-      height: f.height + po * 2
+      width: p.width + go * 2,
+      height: p.height + fo * 2
     };
   }, [g, l, i]);
   return /* @__PURE__ */ m(C, { children: [
@@ -4099,13 +4099,13 @@ const mh = 4, vh = ({
         fill: G(e)
       }
     ),
-    g !== null && p !== null && /* @__PURE__ */ a(
-      fo,
+    g !== null && f !== null && /* @__PURE__ */ a(
+      po,
       {
         x: c * n.width,
-        y: d * n.height - u - mh - p.height / 2,
-        width: p.width,
-        height: p.height,
+        y: d * n.height - u - mh - f.height / 2,
+        width: f.width,
+        height: f.height,
         text: g,
         isRotated: !1,
         target: "observation",
@@ -4186,7 +4186,7 @@ const Lh = ({ shouldAnimate: e, panelRect: t, formattingLocale: n }) => {
   const l = y(() => Je(e, t), [e, t]), c = e.highlight;
   return /* @__PURE__ */ m("g", { className: wh(e), children: [
     /* @__PURE__ */ a(
-      ph,
+      fh,
       {
         layer: e,
         coordSystem: t,
@@ -4224,7 +4224,7 @@ const Eh = ({
 }) => {
   const d = w(null);
   Hu(d);
-  const u = Q("Grid", lh), h = Q("AxisTicks", ih), g = Q("AxisLabel", sh), p = y(() => mo(r, n), [r, n]), f = y(() => hn(o, n), [o, n]), v = y(() => hn(i, n), [i, n]);
+  const u = Q("Grid", lh), h = Q("AxisTicks", ih), g = Q("AxisLabel", sh), f = y(() => mo(r, n), [r, n]), p = y(() => hn(o, n), [o, n]), v = y(() => hn(i, n), [i, n]);
   return /* @__PURE__ */ m(
     "svg",
     {
@@ -4235,18 +4235,18 @@ const Eh = ({
       style: { transform: `translate(${n.x}px, ${n.y}px)` },
       "data-testid": "plot",
       children: [
-        /* @__PURE__ */ a(u, { axes: e, panel: t, panelRect: p }),
-        /* @__PURE__ */ a(Lu, { panelRect: p }),
-        /* @__PURE__ */ a(h, { formattedAxes: e, tickRects: f }),
+        /* @__PURE__ */ a(u, { axes: e, panel: t, panelRect: f }),
+        /* @__PURE__ */ a(Lu, { panelRect: f }),
+        /* @__PURE__ */ a(h, { formattedAxes: e, tickRects: p }),
         /* @__PURE__ */ a(g, { formattedAxes: e, labelRects: v }),
-        /* @__PURE__ */ a(un, { panelRect: p, zOrder: "background" }),
-        /* @__PURE__ */ a(Lh, { shouldAnimate: l, panelRect: p, formattingLocale: c }),
-        /* @__PURE__ */ a(Wu, { panelRect: p, formattingLocale: c }),
-        /* @__PURE__ */ a(Uu, { panelRect: p, formattingLocale: c }),
-        /* @__PURE__ */ a(un, { panelRect: p, zOrder: "foreground" }),
-        /* @__PURE__ */ a(Zu, { panelRect: p }),
-        /* @__PURE__ */ a(dh, { panelRect: p }),
-        /* @__PURE__ */ a(Pu, { panelRect: p })
+        /* @__PURE__ */ a(un, { panelRect: f, zOrder: "background" }),
+        /* @__PURE__ */ a(Lh, { shouldAnimate: l, panelRect: f, formattingLocale: c }),
+        /* @__PURE__ */ a(Wu, { panelRect: f, formattingLocale: c }),
+        /* @__PURE__ */ a(Uu, { panelRect: f, formattingLocale: c }),
+        /* @__PURE__ */ a(un, { panelRect: f, zOrder: "foreground" }),
+        /* @__PURE__ */ a(Zu, { panelRect: f }),
+        /* @__PURE__ */ a(dh, { panelRect: f }),
+        /* @__PURE__ */ a(Pu, { panelRect: f })
       ]
     }
   );
@@ -4333,20 +4333,20 @@ const Eh = ({
   }, [e, n]), { headerRef: t, footerRef: r, measurements: o };
 }, Nh = (e, t) => e.headerSize.width !== t.headerSize.width || e.headerSize.height !== t.headerSize.height || e.footerSize.width !== t.footerSize.width || e.footerSize.height !== t.footerSize.height, Ih = ({ appearance: e, isEditable: t, style: n, children: r }) => {
   const { theme: o, themeClass: i, inlineVarsStyle: l } = _t(), c = gs(e.border), d = Math.max(0, e.cornerRadius), u = d === 0 ? 0 : d + c, h = y(() => {
-    const f = { ...n, borderRadius: `${u}px`, ...l }, v = hs(e.border, o);
-    return v !== null && (f.background = v), f;
+    const p = { ...n, borderRadius: `${u}px`, ...l }, v = hs(e.border, o);
+    return v !== null && (p.background = v), p;
   }, [n, u, l, e.border, o]), g = y(
     () => ({
       inset: `${c}px`,
       borderRadius: `${d}px`
     }),
     [c, d]
-  ), p = t && e.background.type === "solid" && e.background.color === "transparent";
+  ), f = t && e.background.type === "solid" && e.background.color === "transparent";
   return /* @__PURE__ */ a("div", { "data-testid": "graph-wrapper", className: re(vs, i), style: h, children: /* @__PURE__ */ a(
     "div",
     {
       "data-testid": "graph-inner",
-      className: re(bs, { [xs]: p }),
+      className: re(bs, { [xs]: f }),
       style: g,
       children: r
     }
@@ -4368,8 +4368,8 @@ const Eh = ({
     numberFormat: u,
     parsingLocale: h,
     appearance: g,
-    annotations: p,
-    coordSystem: f,
+    annotations: f,
+    coordSystem: p,
     headline: v,
     headlineConfig: x,
     content: k
@@ -4404,9 +4404,9 @@ const Eh = ({
       formatted: xe,
       size: x.size,
       position: x.position,
-      innerRadius: f.type === "polar" ? f.innerRadius : 0
+      innerRadius: p.type === "polar" ? p.innerRadius : 0
     } : void 0,
-    [xe, x.size, x.position, f]
+    [xe, x.size, x.position, p]
   ), Co = ii(), Pe = rs(Lo, g.textScale, be, Co), Se = os({
     measurer: Pe,
     axes: l,
@@ -4417,8 +4417,8 @@ const Eh = ({
     externalMeasurements: _,
     headline: _e,
     formattingLocale: V,
-    annotations: p,
-    coordSystem: f,
+    annotations: f,
+    coordSystem: p,
     textScale: g.textScale,
     graphPadding: be.graphPadding
   }), He = y(() => !Se || !_e || !Pe ? null : aa({