@automattic/charts 4.12.0 → 4.14.0

package/dist/index.js

@@ -1,10 +1,9 @@
 import { getStringWidth as getStringWidth$1 } from "./visx/text/index.js";
 import { formatNumber, formatNumberCompact } from "@automattic/number-formatters";
 import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, GlyphSeries, Grid, TooltipContext, XYChart, buildChartTheme, useEventEmitter } from "@visx/xychart";
-import { __, _x, sprintf } from "@wordpress/i18n";
+import { __, _n, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
-import * as React from "react";
-import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1, version } from "react";
+import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1, version } from "react";
 import { differenceInHours, differenceInYears, isValid, parse, parseISO } from "date-fns";
 import { tzOffset } from "@date-fns/tz";
 import { Text, getStringWidth } from "@visx/text";
@@ -26,11 +25,9 @@ import { bisector } from "@visx/vendor/d3-array";
 import { PatternCircles, PatternHexagons, PatternLines, PatternWaves } from "@visx/pattern";
 import { Chart } from "react-google-charts";
 import DOMPurify from "dompurify";
-import { __assign } from "tslib";
-import "@babel/runtime/helpers/esm/extends";
 import { Icon, chevronRight } from "@wordpress/icons";
 import { arc, pie } from "@visx/shape";
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -52,26 +49,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-//#endregion
-//#region src/charts/private/chart-instance-context/chart-instance-context.ts
+// src/charts/private/chart-instance-context/chart-instance-context.ts
 const ChartInstanceContext = createContext(null);
-//#endregion
-//#region src/charts/private/chart-instance-context/use-chart-instance-context.ts
+// src/charts/private/chart-instance-context/use-chart-instance-context.ts
 const useChartInstanceContext = () => {
 	const context = useContext(ChartInstanceContext);
 	if (!context) throw new Error("useChartInstanceContext must be used within a Chart component");
 	return context;
 };
-//#endregion
-//#region src/styles/chart-scope-class.ts
+// src/styles/chart-scope-class.ts
 /**
 * Stable class that carries the `--a8c-charts-*` catalog. Applied to the `GlobalChartsProvider` wrapper, to portal-rendered surfaces (which sit outside the provider tree), and to standalone components when no provider is above them.
 *
 * Deliberately unhashed: consumers are documented as being able to target it to override a token on the provider element.
 */
 const CHART_SCOPE_CLASS = "a8c-charts-scope";
-//#endregion
-//#region src/utils/create-composition.ts
+// src/utils/create-composition.ts
 /**
 * Utility function to create chart components with composition API.
 *
@@ -85,8 +78,7 @@ const CHART_SCOPE_CLASS = "a8c-charts-scope";
 function attachSubComponents(Chart, subComponents) {
 	return Object.assign(Chart, subComponents);
 }
-//#endregion
-//#region src/utils/warn-once.ts
+// src/utils/warn-once.ts
 const warned = /* @__PURE__ */ new Set();
 /**
 * Warns about a host-supplied value once per process, and never in production.
@@ -99,8 +91,7 @@ const warnOnce = (key, message) => {
 	warned.add(key);
 	console.warn(`[Charts] ${message}`);
 };
-//#endregion
-//#region src/utils/date-parsing.ts
+// src/utils/date-parsing.ts
 /**
 * @file Date parsing: a naive string is dated in a supplied IANA zone, or the runtime's own
 *
@@ -195,8 +186,7 @@ const parseAsLocalDate = (dateString, timeZone) => {
 	}
 	return /* @__PURE__ */ new Date(NaN);
 };
-//#endregion
-//#region src/utils/bucket-info.ts
+// src/utils/bucket-info.ts
 const getInstant = (point) => {
 	if (!point) return;
 	if ("date" in point && point.date) return point.date.getTime();
@@ -228,8 +218,7 @@ const getBucketInfo = (data, tickResolution) => ({
 	bucket: tickResolution ?? getBucketResolution(data),
 	displayResolution: getBucketResolution(data, tickResolution)
 });
-//#endregion
-//#region src/utils/format-metric-value.ts
+// src/utils/format-metric-value.ts
 /**
 * Format a numeric metric value based on type, precision and scale.
 * Supports currency, number and percentage, using `@automattic/number-formatters`.
@@ -278,8 +267,7 @@ const formatMetricValue = (value, type = "number", { decimals, useMultipliers =
 		});
 	}
 };
-//#endregion
-//#region src/utils/format-percentage.ts
+// src/utils/format-percentage.ts
 /**
 * Format a percentage value with smart decimal handling.
 * Uses `@automattic/number-formatters` for consistent formatting.
@@ -295,8 +283,7 @@ const formatPercentage = (value) => {
 		maximumFractionDigits: 2
 	} });
 };
-//#endregion
-//#region src/utils/get-edge-tick-widths.ts
+// src/utils/get-edge-tick-widths.ts
 /**
 * Rendered widths of the first and last tick labels on an axis.
 *
@@ -320,8 +307,7 @@ const getEdgeTickWidths = (ticks, formatTick, labelStyle) => {
 		last: getStringWidth(label(ticks[lastIndex], lastIndex), labelStyle) ?? 0
 	};
 };
-//#endregion
-//#region src/utils/get-longest-tick-width.ts
+// src/utils/get-longest-tick-width.ts
 /**
 * Returns the width of the longest tick.
 *
@@ -335,8 +321,7 @@ const getLongestTickWidth = (ticks, formatTick, labelStyle) => {
 	const longestTick = formattedTicks.reduce((longest, current) => longest.length >= current.length ? longest : current, formattedTicks[0]);
 	return getStringWidth(longestTick, labelStyle);
 };
-//#endregion
-//#region src/utils/get-styles.ts
+// src/utils/get-styles.ts
 /**
 * Utility function to get consolidated line styles for a series
 * This consolidates the logic used by both LineChart and Legend components
@@ -389,19 +374,16 @@ function getItemShapeStyles(series, index, theme, legendShape) {
 		...barShapeStyles
 	};
 }
-//#endregion
-//#region src/utils/is-safari.ts
+// src/utils/is-safari.ts
 const isSafari = () => {
 	if (typeof navigator !== "undefined" && navigator.userAgent) return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 	return false;
 };
-//#endregion
-//#region src/utils/merge-themes.ts
+// src/utils/merge-themes.ts
 function mergeThemes(baseTheme, overrideTheme) {
 	return deepmerge(baseTheme, overrideTheme, { arrayMerge: (_destinationArray, sourceArray) => sourceArray });
 }
-//#endregion
-//#region src/utils/color-utils.ts
+// src/utils/color-utils.ts
 /**
 * Check if a value is a valid 6-digit hex color
 * @param hex - The value to check
@@ -568,8 +550,7 @@ const prefersLightText = (backgroundHex) => {
 	if (!isValidHexColor(backgroundHex)) return false;
 	return relativeLuminance(backgroundHex) <= .179;
 };
-//#endregion
-//#region src/utils/resolve-css-var.ts
+// src/utils/resolve-css-var.ts
 /**
 * Pattern for valid CSS custom property names (e.g., '--my-color', '--jp-gray-10')
 */
@@ -666,8 +647,7 @@ function readCustomProperty(varName, styles) {
 		return null;
 	}
 }
-//#endregion
-//#region src/utils/resolve-font-size.ts
+// src/utils/resolve-font-size.ts
 const toFontSize = (size) => Number.isFinite(size) && size >= 0 ? size : void 0;
 /**
 * Resolve a theme `fontSize` value into a plain number suitable for
@@ -694,8 +674,7 @@ const resolveFontSize = (val) => {
 		return match ? toFontSize(parseFloat(match[1])) : void 0;
 	}
 };
-//#endregion
-//#region src/utils/date-formatting.ts
+// src/utils/date-formatting.ts
 const formatters = /* @__PURE__ */ new Map();
 const getFormatter$1 = (options, { locale, timeZone }) => {
 	const key = `${locale ?? ""}|${timeZone ?? ""}|${JSON.stringify(options)}`;
@@ -794,8 +773,7 @@ const createZonedClock = (timeZone) => {
 		};
 	};
 };
-//#endregion
-//#region src/providers/chart-scope/chart-scope-context.ts
+// src/providers/chart-scope/chart-scope-context.ts
 /**
 * The nearest chart element, published so JS token resolution reads the same CSS cascade that paints the chart's own colours.
 *
@@ -812,8 +790,7 @@ const seriesRole = (slot) => `--a8c-charts-color-series-${slot}`;
 const SERIES_SLOT_1_FALLBACK = "#3858e9";
 /** The catalog pointer for every slot, in slot order. */
 const SERIES_PALETTE_POINTERS = Array.from({ length: 5 }, (_, index) => index === 0 ? `var(${seriesRole(1)}, ${SERIES_SLOT_1_FALLBACK})` : `var(${seriesRole(index + 1)})`);
-//#endregion
-//#region src/providers/chart-context/private/catalog-pointers.ts
+// src/providers/chart-context/private/catalog-pointers.ts
 /** Terminal literals the provider also generates from before its first read, so SSR and the first client render agree. */
 const BACKGROUND_FALLBACK = "#ffffff";
 const LABEL_FALLBACK = "#1e1e1e";
@@ -853,8 +830,7 @@ const ANNOTATION_POINTERS = {
 		radius: 5
 	}
 };
-//#endregion
-//#region src/providers/chart-context/private/perceptual-color.ts
+// src/providers/chart-context/private/perceptual-color.ts
 const DEUTERANOPIA = [
 	.367322,
 	.860646,
@@ -1260,16 +1236,14 @@ const buildPaletteGenerator = (normalizedSeeds, background, labelColors) => {
 		return palette[index].hex;
 	};
 };
-//#endregion
-//#region src/providers/chart-context/private/resolve-opaque-hex.ts
+// src/providers/chart-context/private/resolve-opaque-hex.ts
 const resolveOpaqueHex = (pointer, resolve) => {
 	const raw = resolve(pointer);
 	if (!raw || color(raw)?.opacity !== 1) return null;
 	const hex = normalizeColorToHex(raw);
 	return isValidHexColor(hex) ? hex : null;
 };
-//#endregion
-//#region src/providers/chart-context/themes.ts
+// src/providers/chart-context/themes.ts
 /**
 * Default theme configuration: the shape and spacing a consumer can override.
 *
@@ -1312,8 +1286,7 @@ const defaultTheme = {
 		groupGap: 24
 	}
 };
-//#endregion
-//#region src/providers/chart-context/global-charts-provider.tsx
+// src/providers/chart-context/global-charts-provider.tsx
 const PLACEHOLDER_LABEL_COLORS = [LABEL_FALLBACK, LABEL_INVERSE_FALLBACK];
 const GlobalChartsContext = createContext(null);
 const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
@@ -1494,21 +1467,18 @@ const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
 		})
 	});
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-global-charts-context.ts
+// src/providers/chart-context/hooks/use-global-charts-context.ts
 const useGlobalChartsContext = () => {
 	const context = useContext(GlobalChartsContext);
 	if (!context) throw new Error("useGlobalChartsContext must be used within a GlobalChartsProvider");
 	return context;
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-chart-id.ts
+// src/providers/chart-context/hooks/use-chart-id.ts
 const useChartId = (providedId) => {
 	const generatedId = useId();
 	return providedId || generatedId;
 };
-//#endregion
-//#region src/hooks/use-deep-memo.ts
+// src/hooks/use-deep-memo.ts
 var import_fast_deep_equal = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports, module) => {
 	module.exports = function equal(a, b) {
 		if (a === b) return true;
@@ -1549,16 +1519,14 @@ const useDeepMemo = (value) => {
 	if (!(0, import_fast_deep_equal.default)(ref.current, value)) ref.current = value;
 	return ref.current;
 };
-//#endregion
-//#region src/providers/chart-scope/use-chart-scope-element.ts
+// src/providers/chart-scope/use-chart-scope-element.ts
 /**
 * Returns the nearest chart scope element, or `null` when rendered outside any scope (and during SSR, before the ref is attached).
 *
 * @return {HTMLElement | null} The nearest chart scope element, or `null`.
 */
 const useChartScopeElement = () => useContext(ChartScopeContext);
-//#endregion
-//#region src/providers/chart-scope/use-standalone-scope-class.ts
+// src/providers/chart-scope/use-standalone-scope-class.ts
 /**
 * Returns the catalog class when there is no `GlobalChartsProvider` above this component, and `undefined` when there is.
 *
@@ -1567,8 +1535,7 @@ const useChartScopeElement = () => useContext(ChartScopeContext);
 * @return The scope class name, or undefined when a provider is present.
 */
 const useStandaloneScopeClass = () => useContext(GlobalChartsContext) ? void 0 : CHART_SCOPE_CLASS;
-//#endregion
-//#region src/hooks/use-xychart-theme.ts
+// src/hooks/use-xychart-theme.ts
 const STARTS_LIKE_A_NUMBER = /^[+-]?[\d.]/;
 const NON_NEGATIVE_CSS_NUMBER = /^\+?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?:[a-z]+|%)?$/i;
 const isRenderableFontSize = (fontSize) => {
@@ -1624,8 +1591,7 @@ const useXYChartTheme = (data) => {
 		scopeElement
 	]);
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-chart-formatting.ts
+// src/providers/chart-context/hooks/use-chart-formatting.ts
 const RUNTIME_FORMATTING = {};
 /**
 * The locale and time zone dates are rendered in, as set on `GlobalChartsProvider`.
@@ -1639,8 +1605,7 @@ const RUNTIME_FORMATTING = {};
 const useChartFormatting = () => {
 	return useContext(GlobalChartsContext)?.formatting ?? RUNTIME_FORMATTING;
 };
-//#endregion
-//#region src/hooks/use-chart-data-transform.ts
+// src/hooks/use-chart-data-transform.ts
 /**
 * Hook that transforms and sorts chart data, handling date parsing and sorting
 *
@@ -1675,8 +1640,7 @@ const useChartDataTransform = (data) => {
 		}));
 	}, [data, timeZone]);
 };
-//#endregion
-//#region src/hooks/use-chart-margin.tsx
+// src/hooks/use-chart-margin.tsx
 /**
 * Base top margin used when no dynamic adjustments are necessary.
 */
@@ -1798,8 +1762,7 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		yTicks
 	]);
 };
-//#endregion
-//#region src/hooks/use-element-size.ts
+// src/hooks/use-element-size.ts
 /**
 * Hook to measure the width and height of a DOM element.
 * Returns a ref callback to attach to the element and the current dimensions in pixels.
@@ -1836,8 +1799,7 @@ function useElementSize({ initialWidth = 0, initialHeight = 0 } = {}) {
 		height
 	];
 }
-//#endregion
-//#region src/hooks/use-text-truncation.ts
+// src/hooks/use-text-truncation.ts
 /**
 * Hook to detect if text content is truncated within its container.
 * Uses ResizeObserver to dynamically track changes in element size.
@@ -1878,8 +1840,7 @@ function useTextTruncation(enabled = true) {
 		} else setIsTruncated(false);
 	}, [enabled]), isTruncated];
 }
-//#endregion
-//#region src/hooks/use-zero-value-display.ts
+// src/hooks/use-zero-value-display.ts
 /**
 * Minimum pixel size for near-zero bars (non-zero values that would render too small).
 * Using 3px to be visible but not misleading - larger values might look like actual data.
@@ -1919,8 +1880,7 @@ const useZeroValueDisplay = (data, options = { enabled: false }) => {
 		valueAxisLength
 	]);
 };
-//#endregion
-//#region src/hooks/use-data-with-percentages.ts
+// src/hooks/use-data-with-percentages.ts
 /**
 * Hook to calculate percentages from values for chart data.
 * Ensures percentages are always derived from values (single source of truth).
@@ -1937,8 +1897,7 @@ const useDataWithPercentages = (data) => {
 		}));
 	}, [data]);
 };
-//#endregion
-//#region src/hooks/use-legend-visibility-data.ts
+// src/hooks/use-legend-visibility-data.ts
 /**
 * Custom hook to filter and recalculate chart data based on series visibility.
 *
@@ -2010,8 +1969,7 @@ const useLegendVisibilityData = ({ data, chartId, isSeriesVisible }) => {
 		])
 	};
 };
-//#endregion
-//#region src/hooks/use-prefers-reduced-motion.ts
+// src/hooks/use-prefers-reduced-motion.ts
 const QUERY = "(prefers-reduced-motion: no-preference)";
 const getInitialState = () => !window.matchMedia(QUERY).matches;
 /**
@@ -2032,11 +1990,9 @@ function usePrefersReducedMotion() {
 	}, []);
 	return prefersReducedMotion;
 }
-//#endregion
-//#region src/hooks/use-isomorphic-layout-effect.ts
+// src/hooks/use-isomorphic-layout-effect.ts
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-//#endregion
-//#region src/providers/chart-context/hooks/use-chart-registration.ts
+// src/providers/chart-context/hooks/use-chart-registration.ts
 const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, metadata }) => {
 	const { registerChart, unregisterChart } = useGlobalChartsContext();
 	const stableLegendItems = useDeepMemo(legendItems);
@@ -2058,8 +2014,7 @@ const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, me
 		isDataValid
 	]);
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-global-charts-theme.ts
+// src/providers/chart-context/hooks/use-global-charts-theme.ts
 /**
 * Hook to get the global chart theme from GlobalChartsProvider
 *
@@ -2068,8 +2023,7 @@ const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, me
 const useGlobalChartsTheme = () => {
 	return useContext(GlobalChartsContext)?.theme ?? defaultTheme;
 };
-//#endregion
-//#region src/components/legend/utils/value-or-identity.ts
+// src/components/legend/utils/value-or-identity.ts
 /**
 * Returns an object's value if defined, or the object.
 * @param _ - The object to return the value of.
@@ -2087,8 +2041,7 @@ function valueOrIdentity(_) {
 function valueOrIdentityString(_) {
 	return String(valueOrIdentity(_));
 }
-//#endregion
-//#region src/components/legend/private/base-legend.module.scss
+// src/components/legend/private/base-legend.module.scss
 var base_legend_module_default = {
 	"legend": "a8ccharts-04TogW-legend",
 	"legend--horizontal": "a8ccharts-04TogW-legend--horizontal",
@@ -2100,8 +2053,7 @@ var base_legend_module_default = {
 	"legend-item-text--wrap": "a8ccharts-04TogW-legend-item-text--wrap",
 	"legend-item-value": "a8ccharts-04TogW-legend-item-value"
 };
-//#endregion
-//#region src/components/legend/private/base-legend.tsx
+// src/components/legend/private/base-legend.tsx
 const ALIGNMENT_TO_FLEX = {
 	start: "flex-start",
 	center: "center",
@@ -2170,16 +2122,17 @@ const BaseLegend = forwardRef(({ items: allItems, className, orientation = "hori
 		chartId,
 		context
 	]);
-	const createClickHandler = useCallback((seriesLabels, itemInteractive) => {
+	const createClickHandler = useCallback((seriesLabels, itemInteractive, onToggle) => {
 		if (!itemInteractive) return;
-		return () => handleLegendClick(seriesLabels);
+		return onToggle ? () => onToggle() : () => handleLegendClick(seriesLabels);
 	}, [handleLegendClick]);
-	const createKeyDownHandler = useCallback((seriesLabels, itemInteractive) => {
+	const createKeyDownHandler = useCallback((seriesLabels, itemInteractive, onToggle) => {
 		if (!itemInteractive) return;
+		const toggle = onToggle ?? (() => handleLegendClick(seriesLabels));
 		return (event) => {
 			if (event.key === "Enter" || event.key === " ") {
 				event.preventDefault();
-				handleLegendClick(seriesLabels);
+				if (!event.repeat) toggle();
 			}
 		};
 	}, [handleLegendClick]);
@@ -2203,10 +2156,11 @@ const BaseLegend = forwardRef(({ items: allItems, className, orientation = "hori
 			children: labels.map((label, i) => {
 				const matchedItem = items[i];
 				const seriesLabels = matchedItem?.seriesLabels?.length ? matchedItem.seriesLabels : [label.text];
-				const visible = matchedItem?.interactive === false || isSeriesVisible(seriesLabels[0]);
 				const itemInteractive = interactive && matchedItem?.interactive !== false;
-				const handleClick = createClickHandler(seriesLabels, itemInteractive);
-				const handleKeyDown = createKeyDownHandler(seriesLabels, itemInteractive);
+				const onToggle = itemInteractive ? matchedItem?.onToggle : void 0;
+				const visible = matchedItem?.onToggle ? matchedItem.pressed : matchedItem?.interactive === false || isSeriesVisible(seriesLabels[0]);
+				const handleClick = createClickHandler(seriesLabels, itemInteractive, onToggle);
+				const handleKeyDown = createKeyDownHandler(seriesLabels, itemInteractive, onToggle);
 				return /* @__PURE__ */ jsxs(LegendItem, {
 					className: clsx("visx-legend-item", base_legend_module_default["legend-item"], itemInteractive && base_legend_module_default["legend-item--interactive"], !visible && base_legend_module_default["legend-item--inactive"], itemClassName),
 					margin: itemMargin,
@@ -2266,8 +2220,7 @@ const BaseLegend = forwardRef(({ items: allItems, className, orientation = "hori
 		})
 	});
 });
-//#endregion
-//#region src/components/legend/legend.tsx
+// src/components/legend/legend.tsx
 const defaultShapeByChartType = {
 	area: "rect",
 	line: "line",
@@ -2293,8 +2246,7 @@ const Legend = forwardRef(({ chartId, items, shape, ...props }, ref) => {
 		chartId: contextChartId
 	});
 });
-//#endregion
-//#region src/components/legend/hooks/use-chart-legend-items.ts
+// src/components/legend/hooks/use-chart-legend-items.ts
 /**
 * Wraps `getElementStyles` so a swatch takes the color given for its series.
 * @param getElementStyles - Function to get element styles
@@ -2550,15 +2502,13 @@ function useChartLegendItems(data, options = {}, legendShape) {
 		legendShape
 	]);
 }
-//#endregion
-//#region src/components/tooltip/private/label-value-content.tsx
+// src/components/tooltip/private/label-value-content.tsx
 const LabelValueContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 	data.label,
 	": ",
 	data.valueDisplay || formatNumber(data.value)
 ] });
-//#endregion
-//#region src/components/tooltip/private/tooltip-theme.tsx
+// src/components/tooltip/private/tooltip-theme.tsx
 const DEFAULT_SURFACE = "#1e1e1e";
 const TOOLTIP_SURFACE = `var(--a8c-charts-color-tooltip-surface, ${DEFAULT_SURFACE})`;
 const toSeed = (value) => {
@@ -2581,11 +2531,9 @@ const TooltipTheme = ({ children }) => {
 		children
 	});
 };
-//#endregion
-//#region src/components/tooltip/tooltip-box.module.scss
+// src/components/tooltip/tooltip-box.module.scss
 var tooltip_box_module_default = { "surface": "a8ccharts-ddpU1W-surface" };
-//#endregion
-//#region src/components/tooltip/tooltip-box.tsx
+// src/components/tooltip/tooltip-box.tsx
 /**
 * The chart tooltip box: the dark surface every chart tooltip draws. It does not position itself; place it with `style` or a wrapper.
 *
@@ -2605,8 +2553,7 @@ const TooltipBox = forwardRef(({ unstyled = false, role = "tooltip", className,
 	return unstyled ? box : /* @__PURE__ */ jsx(TooltipTheme, { children: box });
 });
 TooltipBox.displayName = "TooltipBox";
-//#endregion
-//#region src/components/tooltip/base-tooltip.tsx
+// src/components/tooltip/base-tooltip.tsx
 /**
 * A tooltip box with children or `label: value` content. Prefer `TooltipBox`.
 *
@@ -2640,6 +2587,80 @@ const BaseTooltip = ({ data, top, left, component: Component = LabelValueContent
 		children: content
 	});
 };
+// src/components/tooltip/private/keyboard-stops.ts
+const timeOf$1 = (point) => point?.date?.getTime();
+const getXPositions = (series) => {
+	const positions = /* @__PURE__ */ new Set();
+	for (const { data } of series) for (const point of data) {
+		const time = timeOf$1(point);
+		if (time !== void 0) positions.add(time);
+	}
+	return [...positions].sort((a, b) => a - b);
+};
+/**
+* Keyboard stops over the series: the sorted union of their dates, or array indexes when no point has a date.
+*
+* Once any point has a date, a series of undated points has no stop.
+*
+* @param series - The series to step through.
+* @return The stop count, and each series' point at a stop.
+*/
+const getKeyboardStops = (series) => {
+	const positions = getXPositions(series);
+	if (positions.length === 0) return {
+		count: Math.max(0, ...series.map(({ data }) => data.length)),
+		membersAt: (stop) => series.flatMap((s) => stop < s.data.length ? [{
+			series: s,
+			datum: s.data[stop],
+			index: stop
+		}] : [])
+	};
+	return {
+		count: positions.length,
+		membersAt: (stop) => {
+			const time = positions[stop];
+			if (time === void 0) return [];
+			return series.flatMap((s) => {
+				const index = s.data.findIndex((point) => timeOf$1(point) === time);
+				return index === -1 ? [] : [{
+					series: s,
+					datum: s.data[index],
+					index
+				}];
+			});
+		}
+	};
+};
+// src/components/tooltip/private/at-nearest-date.ts
+const timeOf = (datum) => datum.date?.getTime();
+/**
+* Lists every registered series at the nearest datum's date, each with its own point there.
+*
+* The pointer hands each series its own nearest point, which for a series that skips that date, or that the pointer sits nearer another date of, is a neighbor's.
+*
+* @param tooltipData - The tooltip data visx collected.
+* @param registry    - The chart's data registry.
+* @return The tooltip data, unchanged when the nearest datum has no date.
+*/
+const atNearestDate = (tooltipData, registry) => {
+	const nearest = tooltipData?.nearestDatum?.datum;
+	const time = nearest ? timeOf(nearest) : void 0;
+	if (!tooltipData || time === void 0) return tooltipData;
+	const datumByKey = {};
+	for (const { key, data } of registry?.entries() ?? []) {
+		const index = data.findIndex((datum) => timeOf(datum) === time);
+		if (index !== -1) datumByKey[key] = {
+			key,
+			index,
+			datum: data[index]
+		};
+	}
+	for (const [key, entry] of Object.entries(tooltipData.datumByKey)) if (!datumByKey[key] && timeOf(entry.datum) === time) datumByKey[key] = entry;
+	return {
+		...tooltipData,
+		datumByKey
+	};
+};
 const POINTER_HEIGHT = 6;
 const clamp = (position, min, max, size) => Math.min(Math.max(position, min), Math.max(min, max - size));
 const isClipping = (element) => {
@@ -2818,8 +2839,7 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = 10, offsetTop = 10, st
 		}), children]
 	});
 };
-//#endregion
-//#region src/components/tooltip/private/xy-chart-tooltip-overlay.tsx
+// src/components/tooltip/private/xy-chart-tooltip-overlay.tsx
 const CROSSHAIR_STROKE_WIDTH = 1.5;
 const CROSSHAIR_PAINT_PROPERTIES = /* @__PURE__ */ new Set([
 	"stroke",
@@ -3004,18 +3024,21 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 */
 const XyChartTooltipOverlay = (props) => {
 	const tooltipContext = useContext(TooltipContext);
+	const dataRegistry = useContext(DataContext)?.dataRegistry;
 	const [container, setContainer] = useState(null);
 	const anchorRef = useCallback((node) => {
 		setContainer(node?.ownerSVGElement?.parentElement ?? null);
 	}, []);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("g", { ref: anchorRef }), tooltipContext?.tooltipOpen && /* @__PURE__ */ jsx(XyChartTooltipContent, {
 		...props,
-		tooltipContext,
+		tooltipContext: {
+			...tooltipContext,
+			tooltipData: atNearestDate(tooltipContext.tooltipData, dataRegistry)
+		},
 		container
 	})] });
 };
-//#endregion
-//#region src/components/tooltip/xy-chart-tooltip.tsx
+// src/components/tooltip/xy-chart-tooltip.tsx
 const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocusedClassName, series = [], mode = "group", verticalCrosshairStyle, horizontalCrosshairStyle, ...props }) => {
 	const tooltipContext = useContext(TooltipContext);
 	const scopeElement = useChartScopeElement();
@@ -3040,6 +3063,7 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 		}
 		return flattened;
 	}, [series, mode]);
+	const stops = useMemo(() => getKeyboardStops(series), [series]);
 	const hasKeyboardSelection = useRef(false);
 	const closeTooltipNow = useCallback(() => {
 		tooltipContext?.updateTooltip({
@@ -3073,19 +3097,20 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 		hasKeyboardSelection.current = true;
 		if (mode === "group") {
 			closeTooltipNow();
-			series.forEach((s, index) => {
-				if (selectedIndex < s.data.length) {
-					const datum = s.data[selectedIndex];
-					tooltipContext?.showTooltip({
-						datum,
-						key: s.label,
-						index
-					});
-				}
+			stops.membersAt(selectedIndex).forEach(({ series: member, datum, index }) => {
+				tooltipContext?.showTooltip({
+					datum,
+					key: member.label,
+					index
+				});
 			});
 		} else if (mode === "individual") {
 			if (selectedIndex < tooltipData.length) {
 				const tooltipItem = tooltipData[selectedIndex];
+				tooltipContext?.updateTooltip((state) => ({
+					...state,
+					tooltipData: void 0
+				}));
 				tooltipContext?.showTooltip({
 					datum: tooltipItem.datum,
 					key: tooltipItem.seriesLabel,
@@ -3096,7 +3121,7 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 	}, [
 		selectedIndex,
 		tooltipData,
-		series
+		stops
 	]);
 	const focusableRenderTooltip = useMemo(() => {
 		if (!renderTooltip) return void 0;
@@ -3246,8 +3271,7 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 		onChartPointerMove
 	};
 };
-//#endregion
-//#region src/providers/chart-context/hooks/use-default-hidden-series.ts
+// src/providers/chart-context/hooks/use-default-hidden-series.ts
 /**
 * Seeds a chart's hidden series once per chart ID, the first time the provider
 * sees that ID.
@@ -3282,8 +3306,7 @@ const useDefaultHiddenSeries = (chartId, seriesLabels) => {
 		chartId
 	]);
 };
-//#endregion
-//#region src/charts/private/chart-composition/chart-svg.tsx
+// src/charts/private/chart-composition/chart-svg.tsx
 /**
 * Compound component for SVG children in charts.
 * This component serves as a marker for SVG content that should be rendered
@@ -3297,8 +3320,7 @@ const ChartSVG = ({ children }) => {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 };
 ChartSVG.displayName = "Chart.SVG";
-//#endregion
-//#region src/charts/private/chart-composition/chart-html.tsx
+// src/charts/private/chart-composition/chart-html.tsx
 /**
 * Compound component for HTML children in charts.
 * This component serves as a marker for HTML content that should be rendered
@@ -3312,8 +3334,7 @@ const ChartHTML = ({ children }) => {
 	return /* @__PURE__ */ jsx(Fragment$1, { children });
 };
 ChartHTML.displayName = "Chart.HTML";
-//#endregion
-//#region src/charts/private/chart-composition/render-legend-slot.ts
+// src/charts/private/chart-composition/render-legend-slot.ts
 /**
 * Renders legend children filtered by position slot.
 *
@@ -3324,8 +3345,7 @@ ChartHTML.displayName = "Chart.HTML";
 function renderLegendSlot(legendChildren, position) {
 	return legendChildren.filter((l) => l.position === position).map((l, i) => createElement(Fragment, { key: `legend-${position}-${i}` }, l.element));
 }
-//#endregion
-//#region src/charts/private/chart-composition/use-chart-children.ts
+// src/charts/private/chart-composition/use-chart-children.ts
 /**
 * Custom hook to process and categorize chart children for composition API.
 * Extracts children from compound components (Chart.SVG, Chart.HTML) and
@@ -3378,11 +3398,9 @@ function useChartChildren(children, chartType) {
 		};
 	}, [children, chartType]);
 }
-//#endregion
-//#region src/charts/private/chart-layout/chart-layout.module.scss
+// src/charts/private/chart-layout/chart-layout.module.scss
 var chart_layout_module_default = { "chart-layout__content": "a8ccharts-fpNVAq-chart-layout__content" };
-//#endregion
-//#region src/charts/private/chart-layout/chart-layout.tsx
+// src/charts/private/chart-layout/chart-layout.tsx
 const ChartLayout = ({ legendPosition, legendElement, legendChildren, children, trailingContent, onContentHeightChange, gap, className, rootRef, style, "data-testid": dataTestId, "data-chart-id": dataChartId }) => {
 	const [contentRef, contentWidth, contentHeight] = useElementSize();
 	const isRenderProp = typeof children === "function";
@@ -3425,8 +3443,7 @@ const ChartLayout = ({ legendPosition, legendElement, legendChildren, children,
 		]
 	});
 };
-//#endregion
-//#region src/charts/private/default-glyph/default-glyph.tsx
+// src/charts/private/default-glyph/default-glyph.tsx
 const DefaultGlyph = (props) => {
 	const { theme } = useContext(DataContext) || {};
 	props.position;
@@ -3441,8 +3458,7 @@ const DefaultGlyph = (props) => {
 		...props.glyphStyle
 	});
 };
-//#endregion
-//#region src/charts/private/readings.ts
+// src/charts/private/readings.ts
 /**
 * Whether a value is a reading a scale can place.
 *
@@ -3466,11 +3482,9 @@ const isInvalidReading = (value, { allowMissing }) => value === null ? !allowMis
 * @return The formatted value.
 */
 const formatReading = (value) => value == null ? __("No data", "jetpack-charts") : formatNumber(value);
-//#endregion
-//#region src/charts/private/center/center.module.scss
+// src/charts/private/center/center.module.scss
 var center_module_default = { "center": "a8ccharts-w3qxlG-center" };
-//#endregion
-//#region src/charts/private/center/center.tsx
+// src/charts/private/center/center.tsx
 /**
 * Centers its children on both axes and fills its parent.
 *
@@ -3492,11 +3506,9 @@ const Center = forwardRef(({ align = "center", justify = "center", className, ..
 	...props
 }));
 Center.displayName = "Center";
-//#endregion
-//#region src/charts/private/svg-empty-state/svg-empty-state.module.scss
+// src/charts/private/svg-empty-state/svg-empty-state.module.scss
 var svg_empty_state_module_default = { "svg-empty-state": "a8ccharts-udGPVq-svg-empty-state" };
-//#endregion
-//#region src/charts/private/svg-empty-state/svg-empty-state.tsx
+// src/charts/private/svg-empty-state/svg-empty-state.tsx
 /**
 * Renders empty-state text inside an SVG using foreignObject so that the
 * message wraps onto multiple lines instead of being clipped.
@@ -3523,8 +3535,7 @@ const SvgEmptyState = ({ x, y, width, height, children }) => {
 		})
 	});
 };
-//#endregion
-//#region src/charts/private/svg-empty-state/get-all-hidden-message.ts
+// src/charts/private/svg-empty-state/get-all-hidden-message.ts
 /**
 * Return the empty-state message for a chart whose items are all hidden.
 *
@@ -3544,8 +3555,7 @@ const getAllHiddenMessage = (interactive, itemType) => {
 	if (interactive) return _x("All series are hidden. Click legend items to show data.", "chart empty state: interactive series", "jetpack-charts");
 	return _x("All series are hidden.", "chart empty state: series", "jetpack-charts");
 };
-//#endregion
-//#region src/charts/private/time-axis.ts
+// src/charts/private/time-axis.ts
 const X_TICK_WIDTH = 60;
 const getCurveType = (type, smoothing) => {
 	if (!type) return smoothing ? curveCatmullRom : curveLinear;
@@ -3802,8 +3812,7 @@ const guessOptimalNumTicks = (data, chartWidth, tickFormatter) => {
 	}
 	return Math.max(1, secondBestGuess);
 };
-//#endregion
-//#region src/charts/private/time-axis-options.ts
+// src/charts/private/time-axis-options.ts
 const toDateDomain = (domain) => domain ? [new Date(domain[0]), new Date(domain[1])] : void 0;
 /**
 * The x-axis options for a continuous time chart, shared by LineChart and AreaChart.
@@ -3838,8 +3847,7 @@ const buildTimeAxisOptions = ({ dataSorted, width, axisOptions, scaleDomain, zoo
 		...numTicks === void 0 ? {} : { numTicks }
 	};
 };
-//#endregion
-//#region src/charts/private/whole-number-ticks.tsx
+// src/charts/private/whole-number-ticks.tsx
 /**
 * Whether every reading in the series is a whole number.
 *
@@ -3886,15 +3894,13 @@ const WholeNumberTicks = ({ axis, numTicks, enabled, children }) => {
 	const tickValues = enabled ? getWholeNumberTickValues(axis === "x" ? xScale : yScale, numTicks) : void 0;
 	return /* @__PURE__ */ jsx(Fragment$1, { children: children(tickValues) });
 };
-//#endregion
-//#region src/charts/private/with-responsive/with-responsive.module.scss
+// src/charts/private/with-responsive/with-responsive.module.scss
 var with_responsive_module_default = {
 	"container": "a8ccharts-sP1gHa-container",
 	"content": "a8ccharts-sP1gHa-content",
 	"isContained": "a8ccharts-sP1gHa-isContained"
 };
-//#endregion
-//#region src/charts/private/with-responsive/with-responsive.tsx
+// src/charts/private/with-responsive/with-responsive.tsx
 /**
 * A higher-order component that provides responsive dimensions
 * to the wrapped chart component using useParentSize from `@visx/responsive`.
@@ -3973,14 +3979,12 @@ function withResponsive(WrappedComponent) {
 		});
 	};
 }
-//#endregion
-//#region src/charts/private/x-zoom/x-zoom.module.scss
+// src/charts/private/x-zoom/x-zoom.module.scss
 var x_zoom_module_default = {
 	"x-zoom__reset": "a8ccharts-ur9dWW-x-zoom__reset",
 	"x-zoom__selection": "a8ccharts-ur9dWW-x-zoom__selection"
 };
-//#endregion
-//#region src/charts/private/x-zoom/x-zoom.tsx
+// src/charts/private/x-zoom/x-zoom.tsx
 const MIN_DRAG_PIXELS = 6;
 /**
 * Drag-to-zoom state + pointer handlers for an XY chart. Designed to be
@@ -4163,11 +4167,9 @@ function ZoomResetButton({ onClick }) {
 		})
 	});
 }
-//#endregion
-//#region src/charts/private/xy-plot/xy-plot.module.scss
+// src/charts/private/xy-plot/xy-plot.module.scss
 var xy_plot_module_default = { "xy-plot": "a8ccharts-bIyhgG-xy-plot" };
-//#endregion
-//#region src/charts/line-chart/line-chart.module.scss
+// src/charts/line-chart/line-chart.module.scss
 var line_chart_module_default = {
 	"line-chart": "a8ccharts-inuQka-line-chart",
 	"line-chart__annotation-label": "a8ccharts-inuQka-line-chart__annotation-label",
@@ -4269,8 +4271,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 		})]
 	});
 };
-//#endregion
-//#region src/charts/line-chart/private/line-chart-annotations-overlay.tsx
+// src/charts/line-chart/private/line-chart-annotations-overlay.tsx
 const LineChartAnnotationsOverlay = ({ children }) => {
 	const { chartRef, chartWidth, chartHeight } = useChartInstanceContext();
 	const [scales, setScales] = useState(null);
@@ -4353,8 +4354,7 @@ const LineChartAnnotationsOverlay = ({ children }) => {
 		})
 	});
 };
-//#endregion
-//#region src/charts/line-chart/private/line-chart-annotation.tsx
+// src/charts/line-chart/private/line-chart-annotation.tsx
 const ANNOTATION_MAX_WIDTH = 125;
 const ANNOTATION_INIT_HEIGHT = 100;
 const getLabelPosition = ({ subjectType, x, xMax, y, yMin, yMax, maxWidth, height }) => {
@@ -4547,8 +4547,7 @@ const LineChartAnnotation = ({ datum, title, subtitle, subjectType = "circle", s
 		]
 	}) });
 };
-//#endregion
-//#region src/charts/line-chart/private/line-chart-glyph.tsx
+// src/charts/line-chart/private/line-chart-glyph.tsx
 const toNumber$1 = (val) => {
 	const num = typeof val === "number" ? val : parseFloat(val);
 	return isNaN(num) ? void 0 : num;
@@ -4578,8 +4577,7 @@ const LineChartGlyph = ({ data, index, color, glyphStyle, renderGlyph, accessors
 		position
 	});
 };
-//#endregion
-//#region src/charts/line-chart/private/nearest-pointer-events.tsx
+// src/charts/line-chart/private/nearest-pointer-events.tsx
 /**
 * Find the datum nearest a pointer along x, in one series sorted by x.
 *
@@ -4678,8 +4676,7 @@ function NearestPointerEvents({ onPointerDown, onPointerMove, onPointerUp }) {
 	useEventEmitter("pointerup", handlers.pointerup);
 	return null;
 }
-//#endregion
-//#region src/charts/line-chart/line-chart.tsx
+// src/charts/line-chart/line-chart.tsx
 const defaultRenderGlyph = (props) => {
 	return /* @__PURE__ */ createElement(DefaultGlyph, {
 		...props,
@@ -4861,21 +4858,22 @@ const LineChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		isSeriesVisible,
 		options?.yScale
 	]);
-	const activateSelectedPoint = useCallback((index) => {
-		const series = visibleSeries.find((candidate) => candidate.data[index]);
-		if (series) onDatumActivate?.({
-			datum: series.data[index],
-			index,
-			key: series.label
+	const stops = useMemo(() => getKeyboardStops(visibleSeries), [visibleSeries]);
+	const activateSelectedPoint = useCallback((stop) => {
+		const match = stops.membersAt(stop)[0];
+		if (match) onDatumActivate?.({
+			datum: match.datum,
+			index: match.index,
+			key: match.series.label
 		});
-	}, [visibleSeries, onDatumActivate]);
+	}, [stops, onDatumActivate]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: Math.max(0, ...visibleSeries.map((series) => series.data.length)),
+		totalPoints: stops.count,
 		visibleSeriesKey,
 		onActivate: activateSelectedPoint,
 		preventTooltipScroll: tooltipPlacement === "below-axis"
@@ -5209,15 +5207,13 @@ const LineChartResponsive = attachSubComponents(withResponsive(LineChartWithProv
 	AnnotationsOverlay: LineChartAnnotationsOverlay,
 	Annotation: LineChartAnnotation
 });
-//#endregion
-//#region src/charts/area-chart/area-chart.module.scss
+// src/charts/area-chart/area-chart.module.scss
 var area_chart_module_default = {
 	"area-chart": "a8ccharts-jlynaq-area-chart",
 	"area-chart--animated": "a8ccharts-jlynaq-area-chart--animated",
 	"rise": "a8ccharts-jlynaq-rise"
 };
-//#endregion
-//#region src/charts/area-chart/private/validate-data.ts
+// src/charts/area-chart/private/validate-data.ts
 /**
 * Up-front data validation. Returns a localised error message when the chart
 * cannot safely render, otherwise `null`. Catches the cases that would
@@ -5233,8 +5229,7 @@ const validateData$3 = (data) => {
 	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: false }) || "date" in point && point.date && isNaN(point.date.getTime())))) return __("Invalid data", "jetpack-charts");
 	return null;
 };
-//#endregion
-//#region src/charts/area-chart/private/overlays.tsx
+// src/charts/area-chart/private/overlays.tsx
 const AreaChartScalesRef = ({ chartRef, width, height, margin }) => {
 	const context = useContext(DataContext);
 	useImperativeHandle(chartRef, () => ({
@@ -5299,8 +5294,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 		children: circles
 	});
 };
-//#endregion
-//#region src/charts/area-chart/area-chart.tsx
+// src/charts/area-chart/area-chart.tsx
 const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
@@ -5346,19 +5340,22 @@ const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 		}));
 	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = useMemo(() => seriesWithVisibility.every(({ isVisible }) => !isVisible), [seriesWithVisibility]);
-	const hasWholeNumberValues = useMemo(() => (!stacked || stackOffset === "none") && hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [
-		dataSorted,
-		isSeriesVisible,
+	const visibleDataSeries = useMemo(() => dataSorted.filter((series) => isSeriesVisible(series.label)), [dataSorted, isSeriesVisible]);
+	const hasWholeNumberValues = useMemo(() => (!stacked || stackOffset === "none") && hasOnlyWholeNumbers(visibleDataSeries), [
+		visibleDataSeries,
 		stacked,
 		stackOffset
 	]);
+	const visibleSeriesKey = useMemo(() => JSON.stringify(visibleDataSeries.map((series) => series.label)), [visibleDataSeries]);
+	const stops = useMemo(() => getKeyboardStops(visibleDataSeries), [visibleDataSeries]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: dataSorted[0]?.data.length || 0
+		totalPoints: stops.count,
+		visibleSeriesKey
 	});
 	const fixedYDomain = useMemo(() => {
 		if (rescaleYOnVisibilityChange || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
@@ -5646,7 +5643,7 @@ const AreaChartInternal = forwardRef(({ data, ariaLabel, chartId: providedChartI
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: area_chart_module_default["area-chart__tooltip--keyboard-focused"],
-									series: dataSorted
+									series: visibleDataSeries
 								}), /* @__PURE__ */ jsx(HoverGlyphs, {
 									visibleSeries,
 									stacked,
@@ -5682,8 +5679,7 @@ const AreaChartWithProvider = forwardRef((props, ref) => {
 AreaChartWithProvider.displayName = "AreaChart";
 const AreaChart = attachSubComponents(AreaChartWithProvider, { Legend });
 const AreaChartResponsive = attachSubComponents(withResponsive(AreaChartWithProvider), { Legend });
-//#endregion
-//#region src/charts/bar-chart/bar-chart.module.scss
+// src/charts/bar-chart/bar-chart.module.scss
 var bar_chart_module_default = {
 	"bar-chart": "a8ccharts-97yN9W-bar-chart",
 	"bar-chart--animated": "a8ccharts-97yN9W-bar-chart--animated",
@@ -5691,8 +5687,7 @@ var bar_chart_module_default = {
 	"rise": "a8ccharts-97yN9W-rise",
 	"stretch": "a8ccharts-97yN9W-stretch"
 };
-//#endregion
-//#region src/charts/bar-chart/private/truncated-tick-component.tsx
+// src/charts/bar-chart/private/truncated-tick-component.tsx
 /**
 * Get the bandwidth of a scale
 *
@@ -5806,8 +5801,7 @@ const createTruncatedTickComponent = (axis) => (props) => {
 */
 const TruncatedXTickComponent = createTruncatedTickComponent("x");
 const TruncatedYTickComponent = createTruncatedTickComponent("y");
-//#endregion
-//#region src/charts/bar-chart/private/value-domain.ts
+// src/charts/bar-chart/private/value-domain.ts
 /** Domain for a value axis that has nothing to scale, so its ticks still read 0 to 1. */
 const EMPTY_DOMAIN = [0, 1];
 /**
@@ -5858,8 +5852,7 @@ const getValueScaleDomain = (data, includeZero, isSeriesRendered) => {
 	if (includeZero) return [Math.min(0, min), Math.max(0, max)];
 	return null;
 };
-//#endregion
-//#region src/charts/bar-chart/private/use-bar-chart-options.ts
+// src/charts/bar-chart/private/use-bar-chart-options.ts
 /** Outer padding of the category band scale (space at the chart edges). */
 const BASE_BAND_PADDING = .2;
 /** Inner padding of the category band scale (the base gap between ticks). */
@@ -6075,8 +6068,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		isSeriesRendered
 	]);
 }
-//#endregion
-//#region src/charts/bar-chart/private/band-scale.ts
+// src/charts/bar-chart/private/band-scale.ts
 /**
 * Match the inner slot scale used by visx BarGroup.
 * @param keys      - Visible primary series keys.
@@ -6089,8 +6081,7 @@ const createGroupScale = (keys, bandwidth, padding) => scaleBand({
 	range: [0, bandwidth],
 	padding
 });
-//#endregion
-//#region src/charts/bar-chart/private/comparison-bars-geometry.ts
+// src/charts/bar-chart/private/comparison-bars-geometry.ts
 /**
 * Mirrors visx's getScaleBaseline so bars drawn outside visx share the baseline of its bars, including out-of-domain zero values.
 *
@@ -6136,8 +6127,7 @@ function computeSlotRect(params) {
 		height: valueLength
 	};
 }
-//#endregion
-//#region src/charts/bar-chart/private/classified-bar-series.tsx
+// src/charts/bar-chart/private/classified-bar-series.tsx
 const ClassifiedBarSeries = ({ barClassName, primaryKeys, groupPadding, ...props }) => {
 	const { xScale, yScale, horizontal } = useContext(DataContext);
 	const bandScale = horizontal ? yScale : xScale;
@@ -6181,8 +6171,7 @@ const ClassifiedBarSeries = ({ barClassName, primaryKeys, groupPadding, ...props
 		renderGlyph
 	});
 };
-//#endregion
-//#region src/charts/bar-chart/private/slotted-bar-series.tsx
+// src/charts/bar-chart/private/slotted-bar-series.tsx
 const SlottedBarSeries = ({ barClassName, slotKeys, slotKey, thickness, groupPadding, ...props }) => {
 	const { xScale, yScale, horizontal } = useContext(DataContext);
 	const bandScale = horizontal ? yScale : xScale;
@@ -6225,16 +6214,14 @@ const SlottedBarSeries = ({ barClassName, slotKeys, slotKey, thickness, groupPad
 		renderGlyph
 	});
 };
-//#endregion
-//#region src/charts/private/selected-ring/selected-ring.module.scss
+// src/charts/private/selected-ring/selected-ring.module.scss
 var selected_ring_module_default = {
 	"selected-ring__contrast": "a8ccharts-gx1_AW-selected-ring__contrast",
 	"selected-ring__edge": "a8ccharts-gx1_AW-selected-ring__edge",
 	"selected-ring__far": "a8ccharts-gx1_AW-selected-ring__far",
 	"selected-ring__focus": "a8ccharts-gx1_AW-selected-ring__focus"
 };
-//#endregion
-//#region src/charts/private/selected-ring/selected-ring.tsx
+// src/charts/private/selected-ring/selected-ring.tsx
 const TONES = {
 	inside: ["contrast", "focus"],
 	outside: ["focus", "contrast"]
@@ -6281,8 +6268,7 @@ const SelectedRing = ({ chartId, d, side, testId }) => {
 		]
 	});
 };
-//#endregion
-//#region src/charts/bar-chart/private/selected-bar-ring.tsx
+// src/charts/bar-chart/private/selected-bar-ring.tsx
 /**
 * Marks the keyboard-selected slot with a two-tone ring outside its edge, so the ring reads against any bar color.
 *
@@ -6323,8 +6309,7 @@ const SelectedBarRing = ({ chartId, selected, slotKeys, groupPadding, horizontal
 		testId: "bar-chart-selected-ring"
 	});
 };
-//#endregion
-//#region src/charts/bar-chart/private/bar-layer.tsx
+// src/charts/bar-chart/private/bar-layer.tsx
 /**
 * Draws the bars in front of any comparison shadows, slotted for an overlap layout and grouped by visx otherwise, then the selected bar's ring.
 *
@@ -6392,8 +6377,7 @@ const BarLayer = ({ chartId, overlapSlots, selectedBar, primaryEntries, primaryK
 		yAccessor
 	})] });
 };
-//#endregion
-//#region src/charts/bar-chart/private/slot-tooltip-members.tsx
+// src/charts/bar-chart/private/slot-tooltip-members.tsx
 /**
 * Fills the tooltip with every bar of the keyboard-selected category, and only those.
 *
@@ -6401,26 +6385,20 @@ const BarLayer = ({ chartId, overlapSlots, selectedBar, primaryEntries, primaryK
 *
 * @param props         - Component props.
 * @param props.members - The category's bars, the keyboard stop last.
-* @param props.index   - The selected data point.
 * @return No visual content.
 */
-function SlotTooltipMembers({ members, index }) {
+function SlotTooltipMembers({ members }) {
 	const { showTooltip, updateTooltip } = useContext(TooltipContext) ?? {};
 	useEffect(() => {
 		updateTooltip?.((state) => ({
 			...state,
 			tooltipData: void 0
 		}));
-		members.forEach(({ key, datum }) => showTooltip?.({
-			key,
-			datum,
-			index
-		}));
-	}, [members, index]);
+		members.forEach((member) => showTooltip?.(member));
+	}, [members]);
 	return null;
 }
-//#endregion
-//#region src/charts/bar-chart/private/overlap-bars.ts
+// src/charts/bar-chart/private/overlap-bars.ts
 const PRIMARY_SLOT = "primary";
 const COMPARISON_SLOT = "comparison";
 const OVERLAP_SLOTS = [PRIMARY_SLOT, COMPARISON_SLOT];
@@ -6528,8 +6506,7 @@ function getOverlapBarColors(series, colors, slotColors, background) {
 	});
 	return barColors;
 }
-//#endregion
-//#region src/charts/bar-chart/private/use-overlap-slots.ts
+// src/charts/bar-chart/private/use-overlap-slots.ts
 /**
 * Whether two data points sit at the same category: the same label, or the same date.
 *
@@ -6538,7 +6515,7 @@ function getOverlapBarColors(series, colors, slotColors, background) {
 * @return Whether `point` is at `category`.
 */
 function isSameCategory(point, category) {
-	return category.label != null ? point.label === category.label : !!category.date && !!point.date && point.date.getTime() === category.date.getTime();
+	return category.label ? point.label === category.label : !!category.date && !!point.date && point.date.getTime() === category.date.getTime();
 }
 /**
 * Lays out the visible series of an overlap layout in slots and layers.
@@ -6583,7 +6560,7 @@ function useOverlapSlots(enabled, seriesWithVisibility) {
 * @return The category key.
 */
 function categoryKey(point) {
-	return point.label != null ? `label:${point.label}` : `date:${point.date?.getTime()}`;
+	return point.label ? `label:${point.label}` : `date:${point.date?.getTime()}`;
 }
 /**
 * Lists a stop for every slot at every category that slot draws a bar at, category by category.
@@ -6621,6 +6598,25 @@ function getStopPositions(entries, slotKeys, slotOf) {
 	}));
 }
 /**
+* Every bar at a category, each with its own data point index, the keyboard stop last.
+*
+* @param entries  - The visible series.
+* @param category - The data point naming the category.
+* @param stopKey  - The series the keyboard stop is on.
+* @return The category's bars; the last one shown becomes the tooltip's nearest datum.
+*/
+function membersAt(entries, category, stopKey) {
+	const members = entries.flatMap(({ series }) => {
+		const index = series.data.findIndex((point) => isSameCategory(point, category));
+		return index === -1 ? [] : [{
+			key: series.label,
+			datum: series.data[index],
+			index
+		}];
+	});
+	return [...members.filter(({ key }) => key !== stopKey), ...members.filter(({ key }) => key === stopKey)];
+}
+/**
 * The slot a keyboard index selects, and every bar at its category.
 *
 * @param slots         - The overlap layout.
@@ -6630,25 +6626,17 @@ function getStopPositions(entries, slotKeys, slotOf) {
 function getSelectedSlot(slots, selectedIndex) {
 	const position = selectedIndex === void 0 ? void 0 : slots?.positions[selectedIndex];
 	if (!slots || !position) return;
-	const { slotKey, key: stopKey, datum: category, dataPointIndex } = position;
-	const members = slots.entries.flatMap(({ series }) => {
-		const datum = series.data.find((point) => isSameCategory(point, category));
-		return datum ? [{
-			key: series.label,
-			datum
-		}] : [];
-	});
+	const { slotKey, key: stopKey, datum: category } = position;
+	const members = membersAt(slots.entries, category, stopKey);
 	const slotBars = members.filter(({ key, datum }) => isBarRendered(datum) && slots.slotOf(key) === slotKey);
 	return {
 		data: slotBars.map(({ datum }) => datum),
 		slotKey,
 		thickness: Math.max(...slotBars.map(({ key }) => slots.thicknessOf(key))),
-		index: dataPointIndex,
-		members: [...members.filter(({ key }) => key !== stopKey), ...members.filter(({ key }) => key === stopKey)]
+		members
 	};
 }
-//#endregion
-//#region src/charts/bar-chart/private/use-bar-stops.ts
+// src/charts/bar-chart/private/use-bar-stops.ts
 /**
 * Lays out the keyboard stops: one per slot and category in an overlap layout, else one per primary bar, series-major within each category.
 *
@@ -6660,7 +6648,6 @@ function useBarStops(overlapSlots, primaryEntries) {
 	const series = useMemo(() => overlapSlots ? [] : primaryEntries.map((entry) => entry.series), [overlapSlots, primaryEntries]);
 	return {
 		count: overlapSlots?.positions.length ?? Math.max(0, ...series.map((item) => item.data.length)) * series.length,
-		series,
 		key: useMemo(() => JSON.stringify(overlapSlots?.keys ?? series.map((item) => item.label)), [overlapSlots, series]),
 		barAt: useCallback((stop) => {
 			if (overlapSlots) {
@@ -6703,8 +6690,7 @@ const MAX_GROUP_PADDING = .9;
 * gap between ticks. `0.75` = a 25% reduction of the tick-gap padding.
 */
 const COMPARISON_TICK_GAP_FACTOR = .75;
-//#endregion
-//#region src/charts/bar-chart/private/comparison-bars.tsx
+// src/charts/bar-chart/private/comparison-bars.tsx
 const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizontal, xAccessor, yAccessor, getElementStyles, resolveFill }) => {
 	const context = useContext(DataContext);
 	const xScale = context?.xScale;
@@ -6763,8 +6749,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 		children: rects
 	});
 };
-//#endregion
-//#region src/charts/bar-chart/private/band-highlight.tsx
+// src/charts/bar-chart/private/band-highlight.tsx
 /**
 * Render and report the active band using the chart’s registered scales.
 * @param root0            - Highlight options.
@@ -6823,8 +6808,7 @@ function BandHighlight({ visible, horizontal, onChange }) {
 		fill: CATALOG_POINTERS.surfaceSecondary
 	});
 }
-//#endregion
-//#region src/charts/bar-chart/private/band-tooltip.tsx
+// src/charts/bar-chart/private/band-tooltip.tsx
 /**
 * Find a category by its painted center, including outer padding and reversed ranges.
 * @param data     - Registered series points.
@@ -6943,8 +6927,7 @@ function BandTooltip({ keys, slots, groupPadding, withTooltips, onPointerDown, o
 	useEventEmitter("pointerup", onPointerUp ? handlePointer : void 0);
 	return null;
 }
-//#endregion
-//#region src/charts/bar-chart/private/grouped-bars.ts
+// src/charts/bar-chart/private/grouped-bars.ts
 /**
 * Pairs each comparison series with the primary of its `group`, or with the only primary.
 *
@@ -6984,8 +6967,7 @@ function getGroupedBarColors(series, colors, background) {
 	});
 	return barColors;
 }
-//#endregion
-//#region src/charts/bar-chart/use-bar-colors.ts
+// src/charts/bar-chart/use-bar-colors.ts
 /**
 * Reads the colors `BarChart` fills series with, so a custom tooltip or legend can match the bars.
 *
@@ -7007,8 +6989,7 @@ function useBarColors() {
 		comparisonOpacity
 	]);
 }
-//#endregion
-//#region src/charts/bar-chart/use-bar-legend-items.ts
+// src/charts/bar-chart/use-bar-legend-items.ts
 const isComparison = (data, label) => data.some((series) => series.label === label && series.options?.type === "comparison");
 /**
 * Applies what a bar layout changes about a legend: overlap lists every primary before every comparison, as it draws their slots, with every swatch opaque like its bar; a collapsed grouped item takes its comparison's tint, the wider bar that frames the group.
@@ -7072,8 +7053,7 @@ function useBarLegendItems(data, options = {}, legendShape) {
 		seriesColors
 	]);
 }
-//#endregion
-//#region src/charts/bar-chart/bar-chart.tsx
+// src/charts/bar-chart/bar-chart.tsx
 const validateData$2 = (data) => {
 	if (!data?.length) return __("No data available", "jetpack-charts");
 	if (data.some((series) => series.data.some((point) => isInvalidReading(point.value, { allowMissing: true }) || !point.label && (!("date" in point && point.date) || isNaN(point.date.getTime()))))) return __("Invalid data", "jetpack-charts");
@@ -7264,10 +7244,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		const primaryKey = tooltipData?.nearestDatum?.key;
 		const categoryLabel = chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []);
 		const comparisonEntry = comparisonEntries.find((entry) => entry.primaryKey === primaryKey);
-		const comparisonDatum = comparisonEntry?.series.data.find((point) => {
-			const p = point;
-			return nearestDatum.label != null ? p.label === nearestDatum.label : !!nearestDatum.date && !!p.date && p.date.getTime() === nearestDatum.date.getTime();
-		});
+		const comparisonDatum = comparisonEntry?.series.data.find((point) => isSameCategory(point, nearestDatum));
 		if (comparisonEntry && comparisonDatum) return /* @__PURE__ */ jsxs("div", {
 			className: bar_chart_module_default["bar-chart__tooltip"],
 			children: [
@@ -7337,6 +7314,17 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		slotOf: overlapSlots.slotOf
 	}, [overlapSlots]);
 	const selectedSlot = useMemo(() => getSelectedSlot(overlapSlots, selectedIndex), [overlapSlots, selectedIndex]);
+	const selectedGroup = useMemo(() => {
+		const stop = overlapSlots || selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
+		if (!stop) return;
+		return membersAt(primaryEntries, stop.datum, stop.key);
+	}, [
+		overlapSlots,
+		selectedIndex,
+		barAt,
+		primaryEntries
+	]);
+	const selectedMembers = selectedSlot?.members ?? selectedGroup;
 	const selectedBar = useMemo(() => {
 		if (overlapSlots) return selectedSlot;
 		const bar = selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
@@ -7499,10 +7487,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
-								withTooltips && selectedSlot && /* @__PURE__ */ jsx(SlotTooltipMembers, {
-									members: selectedSlot.members,
-									index: selectedSlot.index
-								}),
+								withTooltips && selectedMembers && /* @__PURE__ */ jsx(SlotTooltipMembers, { members: selectedMembers }),
 								withTooltips && /* @__PURE__ */ jsx(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
@@ -7514,7 +7499,6 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: bar_chart_module_default["bar-chart__tooltip--keyboard-focused"],
-									series: stops.series,
 									mode: "individual"
 								})
 							]
@@ -7532,8 +7516,7 @@ const BarChartWithProvider = (props) => {
 BarChartWithProvider.displayName = "BarChart";
 const BarChart = attachSubComponents(BarChartWithProvider, { Legend });
 const BarChartResponsive = attachSubComponents(withResponsive(BarChartWithProvider), { Legend });
-//#endregion
-//#region src/charts/bar-list-chart/bar-list-chart.tsx
+// src/charts/bar-list-chart/bar-list-chart.tsx
 /**
 * Get the bandwidth of a scale
 * @param scale - The scale to get the bandwidth of
@@ -7702,8 +7685,7 @@ const BarListChart = (props) => {
 };
 BarListChart.displayName = "BarListChart";
 const BarListChartResponsive = withResponsive(BarListChart);
-//#endregion
-//#region src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
 var conversion_funnel_chart_module_default = {
 	"bar-container": "a8ccharts-mGEVca-bar-container",
 	"change-indicator": "a8ccharts-mGEVca-change-indicator",
@@ -7722,83 +7704,131 @@ var conversion_funnel_chart_module_default = {
 	"main-rate": "a8ccharts-mGEVca-main-rate",
 	"step-label": "a8ccharts-mGEVca-step-label",
 	"step-rate": "a8ccharts-mGEVca-step-rate",
+	"step-text": "a8ccharts-mGEVca-step-text",
 	"stretch": "a8ccharts-mGEVca-stretch",
-	"tooltip-content": "a8ccharts-mGEVca-tooltip-content",
-	"tooltip-title": "a8ccharts-mGEVca-tooltip-title"
+	"tooltip-label": "a8ccharts-mGEVca-tooltip-label",
+	"tooltip-title": "a8ccharts-mGEVca-tooltip-title",
+	"tooltip-value": "a8ccharts-mGEVca-tooltip-value"
 };
-//#endregion
-//#region src/charts/conversion-funnel-chart/private/use-funnel-selection.ts
+// src/charts/conversion-funnel-chart/private/use-funnel-selection.ts
 /**
-* Custom hook to manage funnel bar selection state and interactions
+* Custom hook to manage funnel step selection state
 * @param hideTooltip - Function to hide tooltip when selection is cleared
-* @return Object containing selection state and event handlers
+* @return Object containing selection state and its setters
 */
 const useFunnelSelection = (hideTooltip) => {
-	const [clickedStep, setClickedStep] = useState(null);
+	const [selectedStepId, setSelectedStepId] = useState(null);
 	return {
-		clickedStep,
-		handleBarClick: useCallback((stepId) => {
-			if (clickedStep === stepId) {
-				setClickedStep(null);
-				hideTooltip?.();
-			} else setClickedStep(stepId);
-		}, [clickedStep, hideTooltip]),
-		handleBarKeyDown: useCallback((stepId, event) => {
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				if (clickedStep === stepId) {
-					setClickedStep(null);
-					hideTooltip?.();
-				} else setClickedStep(stepId);
-			} else if (event.key === "Escape") {
-				event.preventDefault();
-				setClickedStep(null);
-				hideTooltip?.();
-			}
-		}, [clickedStep, hideTooltip]),
+		selectedStepId,
+		selectStep: setSelectedStepId,
 		clearSelection: useCallback(() => {
-			setClickedStep(null);
+			setSelectedStepId(null);
 			hideTooltip?.();
 		}, [hideTooltip]),
 		getStepState: useCallback((stepId) => ({
-			isClicked: clickedStep === stepId,
-			isBlurred: clickedStep !== null && clickedStep !== stepId
-		}), [clickedStep])
+			isSelected: selectedStepId === stepId,
+			isBlurred: selectedStepId !== null && selectedStepId !== stepId
+		}), [selectedStepId])
+	};
+};
+// src/charts/conversion-funnel-chart/private/use-roving-step-focus.ts
+const getTargetIndex = (key, index, count, isRtl) => {
+	const nextKey = isRtl ? "ArrowLeft" : "ArrowRight";
+	const previousKey = isRtl ? "ArrowRight" : "ArrowLeft";
+	switch (key) {
+		case nextKey: return Math.min(index + 1, count - 1);
+		case previousKey: return Math.max(index - 1, 0);
+		case "Home": return 0;
+		case "End": return count - 1;
+		default: return;
+	}
+};
+/**
+* Roving tabindex for the funnel steps: one Tab stop, and arrow keys, Home and End move focus between steps.
+*
+* @param stepIds        - Step ids in visual order.
+* @param selectedStepId - The selected step, which holds the Tab stop until any step has taken focus.
+* @return Tab index, element registration, focus and key handlers for each step.
+*/
+const useRovingStepFocus = (stepIds, selectedStepId) => {
+	const [focusedStepId, setFocusedStepId] = useState(null);
+	const stepElements = useRef(/* @__PURE__ */ new Map());
+	const tabStopId = [focusedStepId, selectedStepId].find((id) => id !== null && stepIds.includes(id)) ?? stepIds[0];
+	return {
+		getTabIndex: useCallback((stepId) => stepId === tabStopId ? 0 : -1, [tabStopId]),
+		setStepElement: useCallback((stepId, element) => {
+			if (element) stepElements.current.set(stepId, element);
+			else stepElements.current.delete(stepId);
+		}, []),
+		handleStepFocus: useCallback((stepId) => {
+			setFocusedStepId(stepId);
+		}, []),
+		handleNavigationKey: useCallback((stepId, event) => {
+			if (event.altKey || event.ctrlKey || event.metaKey) return false;
+			const isRtl = getComputedStyle(event.currentTarget).direction === "rtl";
+			const targetIndex = getTargetIndex(event.key, stepIds.indexOf(stepId), stepIds.length, isRtl);
+			if (targetIndex === void 0) return false;
+			event.preventDefault();
+			stepElements.current.get(stepIds[targetIndex])?.focus();
+			return true;
+		}, [stepIds])
 	};
 };
-//#endregion
-//#region src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+// src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
 /** Chart height (px) below which the funnel tightens its gaps so the bars keep their room. */
 const SHORT_CHART_HEIGHT = 180;
+const formatStepCount = (count) => sprintf(_n("%s item", "%s items", count, "jetpack-charts"), formatMetricValue(count));
+const getDefaultTooltipContent = (step) => ({
+	value: step.count === void 0 ? void 0 : formatStepCount(step.count),
+	rows: [{
+		label: __("Conversion rate", "jetpack-charts"),
+		value: formatPercentage(step.rate)
+	}]
+});
+const getDefaultTooltipIds = (tooltipId, { rows = [] }) => ({
+	value: `${tooltipId}-value`,
+	rows: rows.map((_, index) => ({
+		label: `${tooltipId}-row-${index}-label`,
+		value: `${tooltipId}-row-${index}-value`
+	}))
+});
+const getDefaultTooltipDescriptionIds = (tooltipId, content) => {
+	const ids = getDefaultTooltipIds(tooltipId, content);
+	return [...content.value ? [ids.value] : [], ...ids.rows.flatMap((row) => [row.label, row.value])].join(" ");
+};
 /**
 * Internal ConversionFunnelChart component with chart registration
 *
-* @param props                  - Component props
-* @param props.chartId          - Optional unique identifier for the chart
-* @param props.mainRate         - Main conversion rate to highlight
-* @param props.changeIndicator  - Change indicator (e.g., +2%, -1.5%)
-* @param props.steps            - Array of funnel steps
-* @param props.loading          - Whether the chart is in loading state
-* @param props.animation        - Whether to show chart animation on initial render or not
-* @param props.className        - Additional CSS class name
-* @param props.ariaLabel        - Accessible name for the chart group
-* @param props.height           - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
-* @param props.style            - Custom styling
-* @param props.renderStepLabel  - Custom render function for step labels
-* @param props.renderStepRate   - Custom render function for step rates
-* @param props.renderMainMetric - Custom render function for the entire main metric section
-* @param props.renderTooltip    - Custom render function for tooltip content
-* @param props.tooltipStyle     - Inline styles merged over the tooltip box defaults
+* @param props                   - Component props
+* @param props.chartId           - Optional unique identifier for the chart
+* @param props.mainRate          - Main conversion rate to highlight
+* @param props.changeIndicator   - Change indicator (e.g., +2%, -1.5%)
+* @param props.steps             - Array of funnel steps
+* @param props.loading           - Whether the chart is in loading state
+* @param props.animation         - Whether to show chart animation on initial render or not
+* @param props.className         - Additional CSS class name
+* @param props.ariaLabel         - Accessible name for the chart group
+* @param props.height            - Height of the chart container. Falls back to style.height if set, otherwise defaults to "100%".
+* @param props.style             - Custom styling
+* @param props.renderStepLabel   - Custom render function for step labels
+* @param props.renderStepRate    - Custom render function for step rates
+* @param props.renderMainMetric  - Custom render function for the entire main metric section
+* @param props.renderTooltip     - Custom render function for tooltip content
+* @param props.tooltipStyle      - Inline styles merged over the tooltip box defaults
+* @param props.getTooltipContent - What each step's tooltip shows, which screen readers also read
 * @return JSX element representing the conversion funnel chart
 */
-const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, ariaLabel, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle }) => {
+const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loading = false, animation, className, ariaLabel, chartId: providedChartId, height, style, renderStepLabel, renderStepRate, renderMainMetric, renderTooltip, tooltipStyle, getTooltipContent = getDefaultTooltipContent }) => {
 	const chartId = useChartId(providedChartId);
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef(null);
-	const selectedBarRef = useRef(null);
+	const isPointerFocusRef = useRef(false);
 	const [scopeNode, setScopeNode] = useState(null);
+	const tooltipId = useId();
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = useTooltip();
-	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
+	const { selectedStepId, selectStep, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
+	const stepIds = useMemo(() => steps?.map((step) => step.id) ?? [], [steps]);
+	const { getTabIndex, setStepElement, handleStepFocus, handleNavigationKey } = useRovingStepFocus(stepIds, selectedStepId);
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const [measureChartRef, , chartHeight] = useElementSize();
 	const gap = chartHeight > 0 && chartHeight < SHORT_CHART_HEIGHT ? "sm" : "xl";
@@ -7807,94 +7837,71 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		setScopeNode(node);
 		measureChartRef(node);
 	}, [measureChartRef]);
-	const clearSelectionAndRef = useCallback(() => {
-		clearSelection();
-		selectedBarRef.current = null;
-		hideTooltip();
-	}, [clearSelection, hideTooltip]);
-	const showTooltipAt = useCallback((step, x, y) => {
-		showTooltip({
+	const selectStepAt = useCallback((step, x, y) => {
+		selectStep(step.id);
+		const bounds = chartRef.current?.getBoundingClientRect();
+		if (bounds) showTooltip({
 			tooltipData: step,
-			tooltipLeft: x,
-			tooltipTop: y - 10
+			tooltipLeft: x - bounds.left,
+			tooltipTop: y - bounds.top - 10
 		});
-	}, [showTooltip]);
-	const getMouseTooltipCoords = useCallback((event) => {
-		const bounds = chartRef.current?.getBoundingClientRect();
-		if (!bounds) return null;
-		return {
-			x: event.clientX - bounds.left,
-			y: event.clientY - bounds.top
-		};
-	}, []);
-	const getKeyboardTooltipCoords = useCallback((event) => {
-		const bounds = chartRef.current?.getBoundingClientRect();
-		if (!bounds) return null;
-		const rect = event.currentTarget.getBoundingClientRect();
-		return {
-			x: rect.left + rect.width / 2 - bounds.left,
-			y: rect.top - bounds.top
-		};
-	}, []);
-	const handleStepInteraction = useCallback((step, event, interactionType) => {
-		selectedBarRef.current = event.currentTarget;
-		const { isClicked } = getStepState(step.id);
-		if (isClicked) {
-			if (interactionType === "click") handleBarClick(step.id);
-			else handleBarKeyDown(step.id, event);
-			return;
-		}
-		if (interactionType === "click") {
-			handleBarClick(step.id);
-			const coords = getMouseTooltipCoords(event);
-			if (coords) showTooltipAt(step, coords.x, coords.y);
-		} else {
-			handleBarKeyDown(step.id, event);
-			const coords = getKeyboardTooltipCoords(event);
-			if (coords) showTooltipAt(step, coords.x, coords.y);
-		}
-	}, [
-		getStepState,
-		handleBarClick,
-		handleBarKeyDown,
-		showTooltipAt,
-		getMouseTooltipCoords,
-		getKeyboardTooltipCoords
-	]);
+	}, [selectStep, showTooltip]);
+	const selectStepAtElement = useCallback((step, element) => {
+		const rect = element.getBoundingClientRect();
+		selectStepAt(step, rect.left + rect.width / 2, rect.top);
+	}, [selectStepAt]);
 	const stepHandlers = useMemo(() => {
 		const handlers = /* @__PURE__ */ new Map();
 		steps.forEach((step) => {
+			const onPointerDown = () => {
+				isPointerFocusRef.current = true;
+			};
 			const onClick = (event) => {
-				event.stopPropagation();
-				handleStepInteraction(step, event, "click");
+				isPointerFocusRef.current = false;
+				selectStepAt(step, event.clientX, event.clientY);
+			};
+			const onFocus = (event) => {
+				handleStepFocus(step.id);
+				if (isPointerFocusRef.current) isPointerFocusRef.current = false;
+				else if (step.id !== selectedStepId) selectStepAtElement(step, event.currentTarget);
 			};
 			const onKeyDown = (event) => {
-				if (event.key === "Enter" || event.key === " ") handleStepInteraction(step, event, "keyboard");
-				else {
-					selectedBarRef.current = event.currentTarget;
-					handleBarKeyDown(step.id, event);
+				isPointerFocusRef.current = false;
+				if (handleNavigationKey(step.id, event)) return;
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					selectStepAtElement(step, event.currentTarget);
+				} else if (event.key === "Escape" && selectedStepId !== null) {
+					event.preventDefault();
+					clearSelection();
 				}
 			};
+			const ref = (element) => setStepElement(step.id, element);
 			handlers.set(step.id, {
+				onPointerDown,
 				onClick,
-				onKeyDown
+				onKeyDown,
+				onFocus,
+				ref
 			});
 		});
 		return handlers;
 	}, [
 		steps,
-		handleStepInteraction,
-		handleBarKeyDown
+		selectedStepId,
+		selectStepAt,
+		selectStepAtElement,
+		clearSelection,
+		handleNavigationKey,
+		handleStepFocus,
+		setStepElement
 	]);
-	useEffect(() => {
-		const handleDocumentClick = (event) => {
-			if (selectedBarRef.current && !selectedBarRef.current.contains(event.target)) clearSelectionAndRef();
-		};
-		document.addEventListener("mousedown", handleDocumentClick);
-		return () => {
-			document.removeEventListener("mousedown", handleDocumentClick);
-		};
-	}, [clearSelectionAndRef]);
+	const handleStepsBlur = useCallback((event) => {
+		if (!event.currentTarget.contains(event.relatedTarget) && document.hasFocus()) {
+			isPointerFocusRef.current = false;
+			clearSelection();
+		}
+	}, [clearSelection]);
 	const resolvedHeight = height ?? style?.height ?? "100%";
 	const { color: barColor } = getElementStyles ? getElementStyles({ index: 0 }) : { color: "#000000" };
 	const isPositiveChange = changeIndicator?.startsWith("+");
@@ -7906,18 +7913,41 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		className: clsx(conversion_funnel_chart_module_default["change-indicator"], conversion_funnel_chart_module_default[isPositiveChange ? "change-indicator--positive" : "change-indicator--negative"]),
 		children: changeIndicator
 	})] });
-	const renderDefaultTooltip = (step) => /* @__PURE__ */ jsxs(Stack, {
-		direction: "column",
-		align: "flex-start",
-		gap: "xs",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: conversion_funnel_chart_module_default["tooltip-title"],
-			children: step.label
-		}), /* @__PURE__ */ jsxs("div", {
-			className: conversion_funnel_chart_module_default["tooltip-content"],
-			children: [formatPercentage(step.rate), ` • ${step.count ?? "no"} items`]
-		})]
-	});
+	const renderDefaultTooltip = (step, content) => {
+		const ids = getDefaultTooltipIds(tooltipId, content);
+		return /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			gap: "xs",
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				justify: "space-between",
+				align: "baseline",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: conversion_funnel_chart_module_default["tooltip-title"],
+					children: step.label
+				}), content.value && /* @__PURE__ */ jsx("span", {
+					id: ids.value,
+					className: conversion_funnel_chart_module_default["tooltip-value"],
+					children: content.value
+				})]
+			}), content.rows?.map((row, index) => /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				justify: "space-between",
+				align: "baseline",
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: ids.rows[index].label,
+					className: conversion_funnel_chart_module_default["tooltip-label"],
+					children: row.label
+				}), /* @__PURE__ */ jsx("span", {
+					id: ids.rows[index].value,
+					className: conversion_funnel_chart_module_default["tooltip-value"],
+					children: row.value
+				})]
+			}, row.label))]
+		});
+	};
 	const isDataValid = Boolean(steps && steps.length > 0);
 	const chartMetadata = useMemo(() => ({
 		mainRate,
@@ -7952,6 +7982,26 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		})
 	});
 	const maxRate = Math.max(...steps.map((step) => step.rate));
+	const tooltipStep = tooltipOpen ? tooltipData : void 0;
+	let tooltipContent = null;
+	let tooltipDescriptionIds = "";
+	if (tooltipStep) {
+		const index = steps.findIndex((s) => s.id === tooltipStep.id);
+		const content = getTooltipContent(tooltipStep, index);
+		if (renderTooltip) {
+			tooltipContent = renderTooltip({
+				step: tooltipStep,
+				index,
+				content,
+				top: tooltipTop,
+				left: tooltipLeft
+			});
+			tooltipDescriptionIds = tooltipId;
+		} else {
+			tooltipContent = renderDefaultTooltip(tooltipStep, content);
+			tooltipDescriptionIds = getDefaultTooltipDescriptionIds(tooltipId, content);
+		}
+	}
 	return /* @__PURE__ */ jsxs(Stack, {
 		direction: "column",
 		gap,
@@ -7980,10 +8030,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 				direction: "row",
 				align: "flex-end",
 				gap: "lg",
+				role: "listbox",
+				"aria-label": __("Funnel steps", "jetpack-charts"),
+				"aria-orientation": "horizontal",
+				onBlur: handleStepsBlur,
 				className: conversion_funnel_chart_module_default["funnel-container"],
 				children: steps.map((step, index) => {
 					const barHeight = step.rate / maxRate * 100;
-					const { isBlurred } = getStepState(step.id);
+					const { isSelected, isBlurred } = getStepState(step.id);
+					const handlers = stepHandlers.get(step.id);
+					const isDescribedByTooltip = Boolean(tooltipContent && tooltipDescriptionIds) && tooltipStep?.id === step.id;
 					return /* @__PURE__ */ jsxs(Stack, {
 						direction: "column",
 						className: clsx(conversion_funnel_chart_module_default["funnel-step"], isColorPaletteResolved && conversion_funnel_chart_module_default["funnel-step--animated"], isBlurred && conversion_funnel_chart_module_default["funnel-step--blurred"]),
@@ -7991,6 +8047,8 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 						children: [/* @__PURE__ */ jsxs(Stack, {
 							direction: "column",
 							gap: "xs",
+							className: conversion_funnel_chart_module_default["step-text"],
+							"aria-hidden": "true",
 							children: [renderStepLabel ? renderStepLabel({
 								step,
 								index,
@@ -8010,11 +8068,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 							direction: "column",
 							justify: "flex-end",
 							className: conversion_funnel_chart_module_default["bar-container"],
-							onClick: stepHandlers.get(step.id)?.onClick,
-							onKeyDown: stepHandlers.get(step.id)?.onKeyDown,
-							role: "button",
-							tabIndex: isBlurred ? -1 : 0,
-							"aria-label": step.label,
+							ref: handlers?.ref,
+							onPointerDown: handlers?.onPointerDown,
+							onClick: handlers?.onClick,
+							onKeyDown: handlers?.onKeyDown,
+							onFocus: handlers?.onFocus,
+							role: "option",
+							tabIndex: getTabIndex(step.id),
+							"aria-label": sprintf(__("%1$s, %2$s", "jetpack-charts"), step.label, formatPercentage(step.rate)),
+							"aria-selected": isSelected,
+							"aria-describedby": isDescribedByTooltip ? tooltipDescriptionIds : void 0,
 							children: /* @__PURE__ */ jsx("div", {
 								className: clsx(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
 								style: {
@@ -8026,25 +8089,17 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 					}, step.id);
 				})
 			})]
-		}), tooltipOpen && tooltipData && (() => {
-			const tooltipContent = renderTooltip ? renderTooltip({
-				step: tooltipData,
-				index: steps.findIndex((s) => s.id === tooltipData.id),
-				top: tooltipTop,
-				left: tooltipLeft
-			}) : renderDefaultTooltip(tooltipData);
-			if (!tooltipContent) return null;
-			return /* @__PURE__ */ jsx(BoundedTooltip, {
-				top: tooltipTop,
-				left: tooltipLeft,
-				className: standaloneScopeClass,
-				style: tooltipStyle,
-				children: /* @__PURE__ */ jsx("div", {
-					role: "tooltip",
-					children: tooltipContent
-				})
-			});
-		})()]
+		}), tooltipContent && /* @__PURE__ */ jsx(BoundedTooltip, {
+			top: tooltipTop,
+			left: tooltipLeft,
+			className: standaloneScopeClass,
+			style: tooltipStyle,
+			children: /* @__PURE__ */ jsx("div", {
+				id: tooltipId,
+				"aria-hidden": "true",
+				children: tooltipContent
+			})
+		})]
 	});
 };
 /**
@@ -8058,8 +8113,7 @@ const ConversionFunnelChartWithProvider = (props) => {
 	return /* @__PURE__ */ jsx(GlobalChartsProvider, { children: /* @__PURE__ */ jsx(ConversionFunnelChartInternal, { ...props }) });
 };
 ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
-//#endregion
-//#region src/utils/sanitize-html.ts
+// src/utils/sanitize-html.ts
 /**
 * External dependencies
 */
@@ -8107,11 +8161,9 @@ function sanitizeHtml(html) {
 		]
 	});
 }
-//#endregion
-//#region src/charts/geo-chart/geo-chart.module.scss
+// src/charts/geo-chart/geo-chart.module.scss
 var geo_chart_module_default = { "container": "a8ccharts-8hS2IW-container" };
-//#endregion
-//#region src/charts/geo-chart/private/use-tooltip-position.ts
+// src/charts/geo-chart/private/use-tooltip-position.ts
 const TOOLTIP_CLASS = "google-visualization-tooltip";
 const isTooltip = (node) => node instanceof HTMLElement && node.classList.contains(TOOLTIP_CLASS);
 /**
@@ -8195,8 +8247,7 @@ function useTooltipPosition(containerRef) {
 		};
 	}, [containerRef]);
 }
-//#endregion
-//#region src/charts/geo-chart/geo-chart.tsx
+// src/charts/geo-chart/geo-chart.tsx
 /**
 * External dependencies
 */
@@ -8416,8 +8467,7 @@ const GeoChartWithProvider = (props) => {
 };
 GeoChartWithProvider.displayName = "GeoChart";
 const GeoChartResponsive = withResponsive(GeoChartWithProvider);
-//#endregion
-//#region src/types.ts
+// src/types.ts
 let GoogleDataTableColumnRoleType = /* @__PURE__ */ function(GoogleDataTableColumnRoleType) {
 	GoogleDataTableColumnRoleType["annotation"] = "annotation";
 	GoogleDataTableColumnRoleType["annotationText"] = "annotationText";
@@ -8497,8 +8547,7 @@ const pickLabelTextColor = (fill, roles, defaultRole) => {
 	if (!isValidHexColor(fillHex)) return defaultRole;
 	return pickLabelTextColorForFill(hexToRgb(fillHex), roles, defaultRole);
 };
-//#endregion
-//#region src/charts/heatmap-chart/heatmap-chart.module.scss
+// src/charts/heatmap-chart/heatmap-chart.module.scss
 var heatmap_chart_module_default = {
 	"heatmap-chart": "a8ccharts-O3YMOW-heatmap-chart",
 	"heatmap-chart__cell": "a8ccharts-O3YMOW-heatmap-chart__cell",
@@ -8529,8 +8578,7 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label",
 	"heatmap-chart--height-capped": "a8ccharts-O3YMOW-heatmap-chart--height-capped"
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/use-heatmap-colors.ts
+// src/charts/heatmap-chart/private/use-heatmap-colors.ts
 const isPresent = (value) => value !== null && value !== void 0 && !isNaN(value);
 /**
 * Get the min and max values from heatmap data, ignoring null/NaN and the zeros
@@ -8609,12 +8657,10 @@ const getHeatmapScale = (primary, background, emptyCell) => {
 		high
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/heatmap-context.ts
+// src/charts/heatmap-chart/private/heatmap-context.ts
 /** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */
 const HeatmapContext = createContext(null);
-//#endregion
-//#region src/charts/heatmap-chart/private/heatmap-legend.tsx
+// src/charts/heatmap-chart/private/heatmap-legend.tsx
 const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }) => {
 	const context = useContext(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
@@ -8658,8 +8704,7 @@ const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }
 		]
 	});
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/column-groups.ts
+// src/charts/heatmap-chart/private/column-groups.ts
 const isSpan = (span) => Number.isInteger(span) && span > 0;
 /**
 * Validates column groups and lays them over the columns.
@@ -8765,8 +8810,7 @@ const wrapColumnGroups = (layout, bands) => {
 		slotSpans
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/fit-compact-cells.ts
+// src/charts/heatmap-chart/private/fit-compact-cells.ts
 /**
 * Largest whole-pixel square cell, and the band count giving it, for a compact grid in a box.
 *
@@ -8804,8 +8848,7 @@ const fitCompactCells = (input) => {
 		cellSize: minCellSize
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/private/keyboard-navigation.ts
+// src/charts/heatmap-chart/private/keyboard-navigation.ts
 const ARROW_KEYS = [
 	"ArrowLeft",
 	"ArrowRight",
@@ -8935,8 +8978,7 @@ const stepCalendarCell = (grid, blocks, from, key) => {
 	const before = page.slice(0, at === -1 ? page.length : at).reverse();
 	return firstSelectable(grid, after) ?? firstSelectable(grid, before);
 };
-//#endregion
-//#region src/charts/heatmap-chart/heatmap-chart.tsx
+// src/charts/heatmap-chart/heatmap-chart.tsx
 const CELL_VALUE_MODIFIER = {
 	label: void 0,
 	"label-inverse": heatmap_chart_module_default["heatmap-chart__cell-value--inverse"],
@@ -9391,8 +9433,7 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ jsx(HeatmapChartW
 });
 HeatmapChartResponsiveInner.displayName = "HeatmapChart";
 const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
-//#endregion
-//#region src/charts/heatmap-chart/private/civil-day.ts
+// src/charts/heatmap-chart/private/civil-day.ts
 const DAY_MS = 864e5;
 const KEY_OPTIONS = {
 	calendar: "gregory",
@@ -9541,8 +9582,7 @@ const startOfCivilWeek = (date, weekStartsOn) => {
 * @return Columns needed to cover the span, inclusive.
 */
 const civilWeekSpan = (from, to, weekStartsOn) => Math.floor((startOfCivilWeek(to, weekStartsOn).getTime() - startOfCivilWeek(from, weekStartsOn).getTime()) / (7 * DAY_MS)) + 1;
-//#endregion
-//#region src/charts/heatmap-chart/build-calendar-data.ts
+// src/charts/heatmap-chart/build-calendar-data.ts
 /** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
 const LABELLED_ROWS = [
 	0,
@@ -9644,8 +9684,7 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 		rowLabels
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/build-month-calendar-data.ts
+// src/charts/heatmap-chart/build-month-calendar-data.ts
 /** Week rows per month, fixed so every month block is the same height. */
 const MONTH_ROWS = 6;
 const DAYS_PER_WEEK = 7;
@@ -9727,8 +9766,7 @@ const buildMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
 		columnGroups
 	};
 };
-//#endregion
-//#region src/charts/heatmap-chart/use-calendar-heatmap-data.ts
+// src/charts/heatmap-chart/use-calendar-heatmap-data.ts
 /**
 * `buildCalendarHeatmapData` with the locale and zone taken from
 * `GlobalChartsProvider` where the caller names neither.
@@ -9763,8 +9801,7 @@ const useCalendarHeatmapData = (series, options = {}) => {
 		gridEnd
 	]);
 };
-//#endregion
-//#region src/charts/heatmap-chart/use-month-calendar-heatmap-data.ts
+// src/charts/heatmap-chart/use-month-calendar-heatmap-data.ts
 /**
 * `buildMonthCalendarHeatmapData` with the locale taken from `GlobalChartsProvider`
 * where the caller names none.
@@ -9793,8 +9830,7 @@ const useMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
 		weekStartsOn
 	]);
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/is-plain-object@5.1.0/node_modules/is-plain-object/dist/is-plain-object.mjs
+// ../../../node_modules/.pnpm/is-plain-object@5.1.0/node_modules/is-plain-object/dist/is-plain-object.mjs
 /*!
 * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
 *
@@ -9814,57 +9850,9 @@ function isPlainObject(o) {
 	if (prot.hasOwnProperty("isPrototypeOf") === false) return false;
 	return true;
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/lower-case@2.0.2/node_modules/lower-case/dist.es2015/index.js
-/**
-* Lower case as a function.
-*/
-function lowerCase(str) {
-	return str.toLowerCase();
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist.es2015/index.js
-var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
-var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
-/**
-* Normalize the string into something other libraries can manipulate easier.
-*/
-function noCase(input, options) {
-	if (options === void 0) options = {};
-	var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
-	var result = replace$1(replace$1(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
-	var start = 0;
-	var end = result.length;
-	while (result.charAt(start) === "\0") start++;
-	while (result.charAt(end - 1) === "\0") end--;
-	return result.slice(start, end).split("\0").map(transform).join(delimiter);
-}
-/**
-* Replace `re` in the input string with the replacement value.
-*/
-function replace$1(input, re, value) {
-	if (re instanceof RegExp) return input.replace(re, value);
-	return re.reduce(function(input, re) {
-		return input.replace(re, value);
-	}, input);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist.es2015/index.js
-function dotCase(input, options) {
-	if (options === void 0) options = {};
-	return noCase(input, __assign({ delimiter: "." }, options));
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist.es2015/index.js
-function paramCase(input, options) {
-	if (options === void 0) options = {};
-	return dotCase(input, __assign({ delimiter: "-" }, options));
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@4.0.0/node_modules/@wordpress/warning/build-module/utils.mjs
 var logged = /* @__PURE__ */ new Set();
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.57.0/node_modules/@wordpress/warning/build-module/index.mjs
+// ../../../node_modules/.pnpm/@wordpress+warning@4.0.0/node_modules/@wordpress/warning/build-module/index.mjs
 function isDev() {
 	return globalThis.SCRIPT_DEBUG === true;
 }
@@ -9877,8 +9865,53 @@ function warning(message) {
 	} catch {}
 	logged.add(message);
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+// ../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/es6/index.js
+var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = function equal(a, b) {
+		if (a === b) return true;
+		if (a && b && typeof a == "object" && typeof b == "object") {
+			if (a.constructor !== b.constructor) return false;
+			var length, i, keys;
+			if (Array.isArray(a)) {
+				length = a.length;
+				if (length != b.length) return false;
+				for (i = length; i-- !== 0;) if (!equal(a[i], b[i])) return false;
+				return true;
+			}
+			if (a instanceof Map && b instanceof Map) {
+				if (a.size !== b.size) return false;
+				for (i of a.entries()) if (!b.has(i[0])) return false;
+				for (i of a.entries()) if (!equal(i[1], b.get(i[0]))) return false;
+				return true;
+			}
+			if (a instanceof Set && b instanceof Set) {
+				if (a.size !== b.size) return false;
+				for (i of a.entries()) if (!b.has(i[0])) return false;
+				return true;
+			}
+			if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+				length = a.length;
+				if (length != b.length) return false;
+				for (i = length; i-- !== 0;) if (a[i] !== b[i]) return false;
+				return true;
+			}
+			if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+			if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+			if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+			keys = Object.keys(a);
+			length = keys.length;
+			if (length !== Object.keys(b).length) return false;
+			for (i = length; i-- !== 0;) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+			for (i = length; i-- !== 0;) {
+				var key = keys[i];
+				if (!equal(a[key], b[key])) return false;
+			}
+			return true;
+		}
+		return a !== a && b !== b;
+	};
+}));
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
 	useEffect$1(() => {
@@ -9890,1190 +9923,58 @@ function useUpdateEffect(effect, deps) {
 	}, []);
 }
 var use_update_effect_default = useUpdateEffect;
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
-function sheetForTag(tag) {
-	if (tag.sheet) return tag.sheet;
-	/* istanbul ignore next */
-	for (var i = 0; i < document.styleSheets.length; i++) if (document.styleSheets[i].ownerNode === tag) return document.styleSheets[i];
-}
-function createStyleElement(options) {
-	var tag = document.createElement("style");
-	tag.setAttribute("data-emotion", options.key);
-	if (options.nonce !== void 0) tag.setAttribute("nonce", options.nonce);
-	tag.appendChild(document.createTextNode(""));
-	tag.setAttribute("data-s", "");
-	return tag;
-}
-var StyleSheet = /*#__PURE__*/ function() {
-	function StyleSheet(options) {
-		var _this = this;
-		this._insertTag = function(tag) {
-			var before;
-			if (_this.tags.length === 0) {
-				if (_this.insertionPoint) before = _this.insertionPoint.nextSibling;
-				else if (_this.prepend) before = _this.container.firstChild;
-				else before = _this.before;
-			} else before = _this.tags[_this.tags.length - 1].nextSibling;
-			_this.container.insertBefore(tag, before);
-			_this.tags.push(tag);
-		};
-		this.isSpeedy = options.speedy === void 0 ? true : options.speedy;
-		this.tags = [];
-		this.ctr = 0;
-		this.nonce = options.nonce;
-		this.key = options.key;
-		this.container = options.container;
-		this.prepend = options.prepend;
-		this.insertionPoint = options.insertionPoint;
-		this.before = null;
-	}
-	var _proto = StyleSheet.prototype;
-	_proto.hydrate = function hydrate(nodes) {
-		nodes.forEach(this._insertTag);
-	};
-	_proto.insert = function insert(rule) {
-		if (this.ctr % (this.isSpeedy ? 65e3 : 1) === 0) this._insertTag(createStyleElement(this));
-		var tag = this.tags[this.tags.length - 1];
-		if (this.isSpeedy) {
-			var sheet = sheetForTag(tag);
-			try {
-				sheet.insertRule(rule, sheet.cssRules.length);
-			} catch (e) {}
-		} else tag.appendChild(document.createTextNode(rule));
-		this.ctr++;
-	};
-	_proto.flush = function flush() {
-		this.tags.forEach(function(tag) {
-			var _tag$parentNode;
-			return (_tag$parentNode = tag.parentNode) == null ? void 0 : _tag$parentNode.removeChild(tag);
-		});
-		this.tags = [];
-		this.ctr = 0;
-	};
-	return StyleSheet;
-}();
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Enum.js
-var MS = "-ms-";
-var MOZ = "-moz-";
-var WEBKIT = "-webkit-";
-var COMMENT = "comm";
-var RULESET = "rule";
-var DECLARATION = "decl";
-var IMPORT = "@import";
-var KEYFRAMES = "@keyframes";
-var LAYER = "@layer";
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Utility.js
-/**
-* @param {number}
-* @return {number}
-*/
-var abs = Math.abs;
-/**
-* @param {number}
-* @return {string}
-*/
-var from = String.fromCharCode;
-/**
-* @param {object}
-* @return {object}
-*/
-var assign = Object.assign;
-/**
-* @param {string} value
-* @param {number} length
-* @return {number}
-*/
-function hash(value, length) {
-	return charat(value, 0) ^ 45 ? (((length << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
-}
-/**
-* @param {string} value
-* @return {string}
-*/
-function trim(value) {
-	return value.trim();
-}
-/**
-* @param {string} value
-* @param {RegExp} pattern
-* @return {string?}
-*/
-function match(value, pattern) {
-	return (value = pattern.exec(value)) ? value[0] : value;
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
+var ComponentsContext = createContext$1({});
+ComponentsContext.displayName = "ComponentsContext";
+var useComponentsContext = () => useContext$1(ComponentsContext);
+function useContextSystemBridge({ value }) {
+	const parentContext = useComponentsContext();
+	const valueRef = useRef$1(value);
+	use_update_effect_default(() => {
+		if ((0, import_es6.default)(valueRef.current, value) && valueRef.current !== value) warning(`Please memoize your context: ${JSON.stringify(value)}`);
+	}, [value]);
+	return useMemo$1(() => {
+		return deepmerge(parentContext ?? {}, value ?? {}, { isMergeableObject: isPlainObject });
+	}, [parentContext, value]);
 }
+var BaseContextSystemProvider = ({ children, value }) => {
+	const contextValue = useContextSystemBridge({ value });
+	return /* @__PURE__ */ jsx(ComponentsContext.Provider, {
+		value: contextValue,
+		children
+	});
+};
+memo(BaseContextSystemProvider);
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/context/constants.mjs
+var COMPONENT_NAMESPACE = "data-wp-component";
+var CONNECTED_NAMESPACE = "data-wp-c16t";
+var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
+// ../../../node_modules/.pnpm/memize@2.1.1/node_modules/memize/dist/index.js
 /**
-* @param {string} value
-* @param {(string|RegExp)} pattern
-* @param {string} replacement
-* @return {string}
+* Memize options object.
+*
+* @typedef MemizeOptions
+*
+* @property {number} [maxSize] Maximum size of the cache.
 */
-function replace(value, pattern, replacement) {
-	return value.replace(pattern, replacement);
-}
 /**
-* @param {string} value
-* @param {string} search
-* @return {number}
+* Internal cache entry.
+*
+* @typedef MemizeCacheNode
+*
+* @property {?MemizeCacheNode|undefined} [prev] Previous node.
+* @property {?MemizeCacheNode|undefined} [next] Next node.
+* @property {Array<*>}                   args   Function arguments for cache
+*                                               entry.
+* @property {*}                          val    Function result.
 */
-function indexof(value, search) {
-	return value.indexOf(search);
-}
 /**
-* @param {string} value
-* @param {number} index
-* @return {number}
-*/
-function charat(value, index) {
-	return value.charCodeAt(index) | 0;
-}
-/**
-* @param {string} value
-* @param {number} begin
-* @param {number} end
-* @return {string}
-*/
-function substr(value, begin, end) {
-	return value.slice(begin, end);
-}
-/**
-* @param {string} value
-* @return {number}
-*/
-function strlen(value) {
-	return value.length;
-}
-/**
-* @param {any[]} value
-* @return {number}
-*/
-function sizeof(value) {
-	return value.length;
-}
-/**
-* @param {any} value
-* @param {any[]} array
-* @return {any}
-*/
-function append(value, array) {
-	return array.push(value), value;
-}
-/**
-* @param {string[]} array
-* @param {function} callback
-* @return {string}
-*/
-function combine(array, callback) {
-	return array.map(callback).join("");
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Tokenizer.js
-var line = 1;
-var column = 1;
-var length = 0;
-var position = 0;
-var character = 0;
-var characters = "";
-/**
-* @param {string} value
-* @param {object | null} root
-* @param {object | null} parent
-* @param {string} type
-* @param {string[] | string} props
-* @param {object[] | string} children
-* @param {number} length
-*/
-function node(value, root, parent, type, props, children, length) {
-	return {
-		value,
-		root,
-		parent,
-		type,
-		props,
-		children,
-		line,
-		column,
-		length,
-		return: ""
-	};
-}
-/**
-* @param {object} root
-* @param {object} props
-* @return {object}
-*/
-function copy(root, props) {
-	return assign(node("", null, null, "", null, null, 0), root, { length: -root.length }, props);
-}
-/**
-* @return {number}
-*/
-function char() {
-	return character;
-}
-/**
-* @return {number}
-*/
-function prev() {
-	character = position > 0 ? charat(characters, --position) : 0;
-	if (column--, character === 10) column = 1, line--;
-	return character;
-}
-/**
-* @return {number}
-*/
-function next() {
-	character = position < length ? charat(characters, position++) : 0;
-	if (column++, character === 10) column = 1, line++;
-	return character;
-}
-/**
-* @return {number}
-*/
-function peek() {
-	return charat(characters, position);
-}
-/**
-* @return {number}
-*/
-function caret() {
-	return position;
-}
-/**
-* @param {number} begin
-* @param {number} end
-* @return {string}
-*/
-function slice(begin, end) {
-	return substr(characters, begin, end);
-}
-/**
-* @param {number} type
-* @return {number}
-*/
-function token(type) {
-	switch (type) {
-		case 0:
-		case 9:
-		case 10:
-		case 13:
-		case 32: return 5;
-		case 33:
-		case 43:
-		case 44:
-		case 47:
-		case 62:
-		case 64:
-		case 126:
-		case 59:
-		case 123:
-		case 125: return 4;
-		case 58: return 3;
-		case 34:
-		case 39:
-		case 40:
-		case 91: return 2;
-		case 41:
-		case 93: return 1;
-	}
-	return 0;
-}
-/**
-* @param {string} value
-* @return {any[]}
-*/
-function alloc(value) {
-	return line = column = 1, length = strlen(characters = value), position = 0, [];
-}
-/**
-* @param {any} value
-* @return {any}
-*/
-function dealloc(value) {
-	return characters = "", value;
-}
-/**
-* @param {number} type
-* @return {string}
-*/
-function delimit(type) {
-	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
-}
-/**
-* @param {number} type
-* @return {string}
-*/
-function whitespace(type) {
-	while (character = peek()) if (character < 33) next();
-	else break;
-	return token(type) > 2 || token(character) > 3 ? "" : " ";
-}
-/**
-* @param {number} index
-* @param {number} count
-* @return {string}
-*/
-function escaping(index, count) {
-	while (--count && next()) if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97) break;
-	return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
-}
-/**
-* @param {number} type
-* @return {number}
-*/
-function delimiter(type) {
-	while (next()) switch (character) {
-		case type: return position;
-		case 34:
-		case 39:
-			if (type !== 34 && type !== 39) delimiter(character);
-			break;
-		case 40:
-			if (type === 41) delimiter(type);
-			break;
-		case 92: next();
-	}
-	return position;
-}
-/**
-* @param {number} type
-* @param {number} index
-* @return {number}
-*/
-function commenter(type, index) {
-	while (next()) if (type + character === 57) break;
-	else if (type + character === 84 && peek() === 47) break;
-	return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
-}
-/**
-* @param {number} index
-* @return {string}
-*/
-function identifier(index) {
-	while (!token(peek())) next();
-	return slice(index, position);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Parser.js
-/**
-* @param {string} value
-* @return {object[]}
-*/
-function compile(value) {
-	return dealloc(parse$1("", null, null, null, [""], value = alloc(value), 0, [0], value));
-}
-/**
-* @param {string} value
-* @param {object} root
-* @param {object?} parent
-* @param {string[]} rule
-* @param {string[]} rules
-* @param {string[]} rulesets
-* @param {number[]} pseudo
-* @param {number[]} points
-* @param {string[]} declarations
-* @return {object}
-*/
-function parse$1(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
-	var index = 0;
-	var offset = 0;
-	var length = pseudo;
-	var atrule = 0;
-	var property = 0;
-	var previous = 0;
-	var variable = 1;
-	var scanning = 1;
-	var ampersand = 1;
-	var character = 0;
-	var type = "";
-	var props = rules;
-	var children = rulesets;
-	var reference = rule;
-	var characters = type;
-	while (scanning) switch (previous = character, character = next()) {
-		case 40: if (previous != 108 && charat(characters, length - 1) == 58) {
-			if (indexof(characters += replace(delimit(character), "&", "&\f"), "&\f") != -1) ampersand = -1;
-			break;
-		}
-		case 34:
-		case 39:
-		case 91:
-			characters += delimit(character);
-			break;
-		case 9:
-		case 10:
-		case 13:
-		case 32:
-			characters += whitespace(previous);
-			break;
-		case 92:
-			characters += escaping(caret() - 1, 7);
-			continue;
-		case 47:
-			switch (peek()) {
-				case 42:
-				case 47:
-					append(comment(commenter(next(), caret()), root, parent), declarations);
-					break;
-				default: characters += "/";
-			}
-			break;
-		case 123 * variable: points[index++] = strlen(characters) * ampersand;
-		case 125 * variable:
-		case 59:
-		case 0:
-			switch (character) {
-				case 0:
-				case 125: scanning = 0;
-				case 59 + offset:
-					if (ampersand == -1) characters = replace(characters, /\f/g, "");
-					if (property > 0 && strlen(characters) - length) append(property > 32 ? declaration(characters + ";", rule, parent, length - 1) : declaration(replace(characters, " ", "") + ";", rule, parent, length - 2), declarations);
-					break;
-				case 59: characters += ";";
-				default:
-					append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets);
-					if (character === 123) if (offset === 0) parse$1(characters, root, reference, reference, props, rulesets, length, points, children);
-					else switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
-						case 100:
-						case 108:
-						case 109:
-						case 115:
-							parse$1(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
-							break;
-						default: parse$1(characters, reference, reference, reference, [""], children, 0, points, children);
-					}
-			}
-			index = offset = property = 0, variable = ampersand = 1, type = characters = "", length = pseudo;
-			break;
-		case 58: length = 1 + strlen(characters), property = previous;
-		default:
-			if (variable < 1) {
-				if (character == 123) --variable;
-				else if (character == 125 && variable++ == 0 && prev() == 125) continue;
-			}
-			switch (characters += from(character), character * variable) {
-				case 38:
-					ampersand = offset > 0 ? 1 : (characters += "\f", -1);
-					break;
-				case 44:
-					points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1;
-					break;
-				case 64:
-					if (peek() === 45) characters += delimit(next());
-					atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
-					break;
-				case 45: if (previous === 45 && strlen(characters) == 2) variable = 0;
-			}
-	}
-	return rulesets;
-}
-/**
-* @param {string} value
-* @param {object} root
-* @param {object?} parent
-* @param {number} index
-* @param {number} offset
-* @param {string[]} rules
-* @param {number[]} points
-* @param {string} type
-* @param {string[]} props
-* @param {string[]} children
-* @param {number} length
-* @return {object}
-*/
-function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length) {
-	var post = offset - 1;
-	var rule = offset === 0 ? rules : [""];
-	var size = sizeof(rule);
-	for (var i = 0, j = 0, k = 0; i < index; ++i) for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x) if (z = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x]))) props[k++] = z;
-	return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length);
-}
-/**
-* @param {number} value
-* @param {object} root
-* @param {object?} parent
-* @return {object}
-*/
-function comment(value, root, parent) {
-	return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0);
-}
-/**
-* @param {string} value
-* @param {object} root
-* @param {object?} parent
-* @param {number} length
-* @return {object}
-*/
-function declaration(value, root, parent, length) {
-	return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Serializer.js
-/**
-* @param {object[]} children
-* @param {function} callback
-* @return {string}
-*/
-function serialize(children, callback) {
-	var output = "";
-	var length = sizeof(children);
-	for (var i = 0; i < length; i++) output += callback(children[i], i, children, callback) || "";
-	return output;
-}
-/**
-* @param {object} element
-* @param {number} index
-* @param {object[]} children
-* @param {function} callback
-* @return {string}
-*/
-function stringify(element, index, children, callback) {
-	switch (element.type) {
-		case LAYER: if (element.children.length) break;
-		case IMPORT:
-		case DECLARATION: return element.return = element.return || element.value;
-		case COMMENT: return "";
-		case KEYFRAMES: return element.return = element.value + "{" + serialize(element.children, callback) + "}";
-		case RULESET: element.value = element.props.join(",");
-	}
-	return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/stylis@4.2.0/node_modules/stylis/src/Middleware.js
-/**
-* @param {function[]} collection
-* @return {function}
-*/
-function middleware(collection) {
-	var length = sizeof(collection);
-	return function(element, index, children, callback) {
-		var output = "";
-		for (var i = 0; i < length; i++) output += collection[i](element, index, children, callback) || "";
-		return output;
-	};
-}
-/**
-* @param {function} callback
-* @return {function}
-*/
-function rulesheet(callback) {
-	return function(element) {
-		if (!element.root) {
-			if (element = element.return) callback(element);
-		}
-	};
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+memoize@0.9.0/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
-function memoize(fn) {
-	var cache = Object.create(null);
-	return function(arg) {
-		if (cache[arg] === void 0) cache[arg] = fn(arg);
-		return cache[arg];
-	};
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+cache@11.14.0/node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js
-var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
-	var previous = 0;
-	var character = 0;
-	while (true) {
-		previous = character;
-		character = peek();
-		if (previous === 38 && character === 12) points[index] = 1;
-		if (token(character)) break;
-		next();
-	}
-	return slice(begin, position);
-};
-var toRules = function toRules(parsed, points) {
-	var index = -1;
-	var character = 44;
-	do
-		switch (token(character)) {
-			case 0:
-				if (character === 38 && peek() === 12) points[index] = 1;
-				parsed[index] += identifierWithPointTracking(position - 1, points, index);
-				break;
-			case 2:
-				parsed[index] += delimit(character);
-				break;
-			case 4: if (character === 44) {
-				parsed[++index] = peek() === 58 ? "&\f" : "";
-				points[index] = parsed[index].length;
-				break;
-			}
-			default: parsed[index] += from(character);
-		}
-	while (character = next());
-	return parsed;
-};
-var getRules = function getRules(value, points) {
-	return dealloc(toRules(alloc(value), points));
-};
-var fixedElements = /* #__PURE__ */ new WeakMap();
-var compat = function compat(element) {
-	if (element.type !== "rule" || !element.parent || element.length < 1) return;
-	var value = element.value;
-	var parent = element.parent;
-	var isImplicitRule = element.column === parent.column && element.line === parent.line;
-	while (parent.type !== "rule") {
-		parent = parent.parent;
-		if (!parent) return;
-	}
-	if (element.props.length === 1 && value.charCodeAt(0) !== 58 && !fixedElements.get(parent)) return;
-	if (isImplicitRule) return;
-	fixedElements.set(element, true);
-	var points = [];
-	var rules = getRules(value, points);
-	var parentRules = parent.props;
-	for (var i = 0, k = 0; i < rules.length; i++) for (var j = 0; j < parentRules.length; j++, k++) element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
-};
-var removeLabel = function removeLabel(element) {
-	if (element.type === "decl") {
-		var value = element.value;
-		if (value.charCodeAt(0) === 108 && value.charCodeAt(2) === 98) {
-			element["return"] = "";
-			element.value = "";
-		}
-	}
-};
-function prefix(value, length) {
-	switch (hash(value, length)) {
-		case 5103: return WEBKIT + "print-" + value + value;
-		case 5737:
-		case 4201:
-		case 3177:
-		case 3433:
-		case 1641:
-		case 4457:
-		case 2921:
-		case 5572:
-		case 6356:
-		case 5844:
-		case 3191:
-		case 6645:
-		case 3005:
-		case 6391:
-		case 5879:
-		case 5623:
-		case 6135:
-		case 4599:
-		case 4855:
-		case 4215:
-		case 6389:
-		case 5109:
-		case 5365:
-		case 5621:
-		case 3829: return WEBKIT + value + value;
-		case 5349:
-		case 4246:
-		case 4810:
-		case 6968:
-		case 2756: return WEBKIT + value + MOZ + value + MS + value + value;
-		case 6828:
-		case 4268: return WEBKIT + value + MS + value + value;
-		case 6165: return WEBKIT + value + MS + "flex-" + value + value;
-		case 5187: return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
-		case 5443: return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/, "") + value;
-		case 4675: return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/, "") + value;
-		case 5548: return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
-		case 5292: return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
-		case 6060: return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
-		case 4554: return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
-		case 6187: return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
-		case 5495:
-		case 3959: return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
-		case 4968: return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + WEBKIT + value + value;
-		case 4095:
-		case 3583:
-		case 4068:
-		case 2532: return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
-		case 8116:
-		case 7059:
-		case 5753:
-		case 5535:
-		case 5445:
-		case 5701:
-		case 4933:
-		case 4677:
-		case 5533:
-		case 5789:
-		case 5021:
-		case 4765:
-			if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
-				case 109: if (charat(value, length + 4) !== 45) break;
-				case 102: return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length + 3) == 108 ? "$3" : "$2-$3")) + value;
-				case 115: return ~indexof(value, "stretch") ? prefix(replace(value, "stretch", "fill-available"), length) + value : value;
-			}
-			break;
-		case 4949: if (charat(value, length + 1) !== 115) break;
-		case 6444:
-			switch (charat(value, strlen(value) - 3 - (~indexof(value, "!important") && 10))) {
-				case 107: return replace(value, ":", ":" + WEBKIT) + value;
-				case 101: return replace(value, /(.+:)([^;!]+)(;|!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
-			}
-			break;
-		case 5936:
-			switch (charat(value, length + 11)) {
-				case 114: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
-				case 108: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
-				case 45: return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
-			}
-			return WEBKIT + value + MS + value + value;
-	}
-	return value;
-}
-var defaultStylisPlugins = [function prefixer(element, index, children, callback) {
-	if (element.length > -1) {
-		if (!element["return"]) switch (element.type) {
-			case DECLARATION:
-				element["return"] = prefix(element.value, element.length);
-				break;
-			case KEYFRAMES: return serialize([copy(element, { value: replace(element.value, "@", "@" + WEBKIT) })], callback);
-			case RULESET: if (element.length) return combine(element.props, function(value) {
-				switch (match(value, /(::plac\w+|:read-\w+)/)) {
-					case ":read-only":
-					case ":read-write": return serialize([copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] })], callback);
-					case "::placeholder": return serialize([
-						copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }),
-						copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }),
-						copy(element, { props: [replace(value, /:(plac\w+)/, MS + "input-$1")] })
-					], callback);
-				}
-				return "";
-			});
-		}
-	}
-}];
-var createCache = function createCache(options) {
-	var key = options.key;
-	if (key === "css") {
-		var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
-		Array.prototype.forEach.call(ssrStyles, function(node) {
-			if (node.getAttribute("data-emotion").indexOf(" ") === -1) return;
-			document.head.appendChild(node);
-			node.setAttribute("data-s", "");
-		});
-	}
-	var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
-	var inserted = {};
-	var container;
-	var nodesToHydrate = [];
-	container = options.container || document.head;
-	Array.prototype.forEach.call(document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function(node) {
-		var attrib = node.getAttribute("data-emotion").split(" ");
-		for (var i = 1; i < attrib.length; i++) inserted[attrib[i]] = true;
-		nodesToHydrate.push(node);
-	});
-	var _insert;
-	var omnipresentPlugins = [compat, removeLabel];
-	var currentSheet;
-	var finalizingPlugins = [stringify, rulesheet(function(rule) {
-		currentSheet.insert(rule);
-	})];
-	var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
-	var stylis = function stylis(styles) {
-		return serialize(compile(styles), serializer);
-	};
-	_insert = function insert(selector, serialized, sheet, shouldCache) {
-		currentSheet = sheet;
-		stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-		if (shouldCache) cache.inserted[serialized.name] = true;
-	};
-	var cache = {
-		key,
-		sheet: new StyleSheet({
-			key,
-			container,
-			nonce: options.nonce,
-			speedy: options.speedy,
-			prepend: options.prepend,
-			insertionPoint: options.insertionPoint
-		}),
-		nonce: options.nonce,
-		inserted,
-		registered: {},
-		insert: _insert
-	};
-	cache.sheet.hydrate(nodesToHydrate);
-	return cache;
-};
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+utils@1.4.2/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
-function getRegisteredStyles$1(registered, registeredStyles, classNames) {
-	var rawClassName = "";
-	classNames.split(" ").forEach(function(className) {
-		if (registered[className] !== void 0) registeredStyles.push(registered[className] + ";");
-		else if (className) rawClassName += className + " ";
-	});
-	return rawClassName;
-}
-var registerStyles = function registerStyles(cache, serialized, isStringTag) {
-	var className = cache.key + "-" + serialized.name;
-	if ((isStringTag === false || false) && cache.registered[className] === void 0) cache.registered[className] = serialized.styles;
-};
-var insertStyles = function insertStyles(cache, serialized, isStringTag) {
-	registerStyles(cache, serialized, isStringTag);
-	var className = cache.key + "-" + serialized.name;
-	if (cache.inserted[serialized.name] === void 0) {
-		var current = serialized;
-		do {
-			cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
-			current = current.next;
-		} while (current !== void 0);
-	}
-};
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+hash@0.9.2/node_modules/@emotion/hash/dist/emotion-hash.esm.js
-function murmur2(str) {
-	var h = 0;
-	var k, i = 0, len = str.length;
-	for (; len >= 4; ++i, len -= 4) {
-		k = str.charCodeAt(i) & 255 | (str.charCodeAt(++i) & 255) << 8 | (str.charCodeAt(++i) & 255) << 16 | (str.charCodeAt(++i) & 255) << 24;
-		k = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
-		k ^= k >>> 24;
-		h = (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-	}
-	switch (len) {
-		case 3: h ^= (str.charCodeAt(i + 2) & 255) << 16;
-		case 2: h ^= (str.charCodeAt(i + 1) & 255) << 8;
-		case 1:
-			h ^= str.charCodeAt(i) & 255;
-			h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-	}
-	h ^= h >>> 13;
-	h = (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-	return ((h ^ h >>> 15) >>> 0).toString(36);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+unitless@0.10.0/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
-var unitlessKeys = {
-	animationIterationCount: 1,
-	aspectRatio: 1,
-	borderImageOutset: 1,
-	borderImageSlice: 1,
-	borderImageWidth: 1,
-	boxFlex: 1,
-	boxFlexGroup: 1,
-	boxOrdinalGroup: 1,
-	columnCount: 1,
-	columns: 1,
-	flex: 1,
-	flexGrow: 1,
-	flexPositive: 1,
-	flexShrink: 1,
-	flexNegative: 1,
-	flexOrder: 1,
-	gridRow: 1,
-	gridRowEnd: 1,
-	gridRowSpan: 1,
-	gridRowStart: 1,
-	gridColumn: 1,
-	gridColumnEnd: 1,
-	gridColumnSpan: 1,
-	gridColumnStart: 1,
-	msGridRow: 1,
-	msGridRowSpan: 1,
-	msGridColumn: 1,
-	msGridColumnSpan: 1,
-	fontWeight: 1,
-	lineHeight: 1,
-	opacity: 1,
-	order: 1,
-	orphans: 1,
-	scale: 1,
-	tabSize: 1,
-	widows: 1,
-	zIndex: 1,
-	zoom: 1,
-	WebkitLineClamp: 1,
-	fillOpacity: 1,
-	floodOpacity: 1,
-	stopOpacity: 1,
-	strokeDasharray: 1,
-	strokeDashoffset: 1,
-	strokeMiterlimit: 1,
-	strokeOpacity: 1,
-	strokeWidth: 1
-};
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+serialize@1.3.3/node_modules/@emotion/serialize/dist/emotion-serialize.esm.js
-var isDevelopment = false;
-var hyphenateRegex = /[A-Z]|^ms/g;
-var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-var isCustomProperty = function isCustomProperty(property) {
-	return property.charCodeAt(1) === 45;
-};
-var isProcessableValue = function isProcessableValue(value) {
-	return value != null && typeof value !== "boolean";
-};
-var processStyleName = /* #__PURE__ */ memoize(function(styleName) {
-	return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, "-$&").toLowerCase();
-});
-var processStyleValue = function processStyleValue(key, value) {
-	switch (key) {
-		case "animation":
-		case "animationName": if (typeof value === "string") return value.replace(animationRegex, function(match, p1, p2) {
-			cursor = {
-				name: p1,
-				styles: p2,
-				next: cursor
-			};
-			return p1;
-		});
-	}
-	if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === "number" && value !== 0) return value + "px";
-	return value;
-};
-var noComponentSelectorMessage = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
-function handleInterpolation(mergedProps, registered, interpolation) {
-	if (interpolation == null) return "";
-	var componentSelector = interpolation;
-	if (componentSelector.__emotion_styles !== void 0) return componentSelector;
-	switch (typeof interpolation) {
-		case "boolean": return "";
-		case "object":
-			var keyframes = interpolation;
-			if (keyframes.anim === 1) {
-				cursor = {
-					name: keyframes.name,
-					styles: keyframes.styles,
-					next: cursor
-				};
-				return keyframes.name;
-			}
-			var serializedStyles = interpolation;
-			if (serializedStyles.styles !== void 0) {
-				var next = serializedStyles.next;
-				if (next !== void 0) while (next !== void 0) {
-					cursor = {
-						name: next.name,
-						styles: next.styles,
-						next: cursor
-					};
-					next = next.next;
-				}
-				return serializedStyles.styles + ";";
-			}
-			return createStringFromObject(mergedProps, registered, interpolation);
-		case "function": if (mergedProps !== void 0) {
-			var previousCursor = cursor;
-			var result = interpolation(mergedProps);
-			cursor = previousCursor;
-			return handleInterpolation(mergedProps, registered, result);
-		}
-	}
-	var asString = interpolation;
-	if (registered == null) return asString;
-	var cached = registered[asString];
-	return cached !== void 0 ? cached : asString;
-}
-function createStringFromObject(mergedProps, registered, obj) {
-	var string = "";
-	if (Array.isArray(obj)) for (var i = 0; i < obj.length; i++) string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
-	else for (var key in obj) {
-		var value = obj[key];
-		if (typeof value !== "object") {
-			var asString = value;
-			if (registered != null && registered[asString] !== void 0) string += key + "{" + registered[asString] + "}";
-			else if (isProcessableValue(asString)) string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
-		} else {
-			if (key === "NO_COMPONENT_SELECTOR" && isDevelopment) throw new Error(noComponentSelectorMessage);
-			if (Array.isArray(value) && typeof value[0] === "string" && (registered == null || registered[value[0]] === void 0)) {
-				for (var _i = 0; _i < value.length; _i++) if (isProcessableValue(value[_i])) string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
-			} else {
-				var interpolated = handleInterpolation(mergedProps, registered, value);
-				switch (key) {
-					case "animation":
-					case "animationName":
-						string += processStyleName(key) + ":" + interpolated + ";";
-						break;
-					default: string += key + "{" + interpolated + "}";
-				}
-			}
-		}
-	}
-	return string;
-}
-var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g;
-var cursor;
-function serializeStyles(args, registered, mergedProps) {
-	if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) return args[0];
-	var stringMode = true;
-	var styles = "";
-	cursor = void 0;
-	var strings = args[0];
-	if (strings == null || strings.raw === void 0) {
-		stringMode = false;
-		styles += handleInterpolation(mergedProps, registered, strings);
-	} else styles += strings[0];
-	for (var i = 1; i < args.length; i++) {
-		styles += handleInterpolation(mergedProps, registered, args[i]);
-		if (stringMode) styles += strings[i];
-	}
-	labelPattern.lastIndex = 0;
-	var identifierName = "";
-	var match;
-	while ((match = labelPattern.exec(styles)) !== null) identifierName += "-" + match[1];
-	return {
-		name: murmur2(styles) + identifierName,
-		styles,
-		next: cursor
-	};
-}
-React["useInsertionEffect"] && React["useInsertionEffect"] || React.useLayoutEffect;
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.3.0_react@19.3.0/node_modules/@emotion/react/dist/emotion-element-f0de968e.browser.esm.js
-var EmotionCacheContext = /* #__PURE__ */ React.createContext(typeof HTMLElement !== "undefined" ? /* #__PURE__ */ createCache({ key: "css" }) : null);
-EmotionCacheContext.Provider;
-var __unsafe_useEmotionCache = function useEmotionCache() {
-	return useContext(EmotionCacheContext);
-};
-({}).hasOwnProperty;
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-function insertWithoutScoping(cache, serialized) {
-	if (cache.inserted[serialized.name] === void 0) return cache.insert("", serialized, cache.sheet, true);
-}
-function merge$1(registered, css, className) {
-	var registeredStyles = [];
-	var rawClassName = getRegisteredStyles$1(registered, registeredStyles, className);
-	if (registeredStyles.length < 2) return className;
-	return rawClassName + css(registeredStyles);
-}
-var createEmotion = function createEmotion(options) {
-	var cache = createCache(options);
-	cache.sheet.speedy = function(value) {
-		this.isSpeedy = value;
-	};
-	cache.compat = true;
-	var css = function css() {
-		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-		var serialized = serializeStyles(args, cache.registered, void 0);
-		insertStyles(cache, serialized, false);
-		return cache.key + "-" + serialized.name;
-	};
-	return {
-		css,
-		cx: function cx() {
-			for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) args[_key4] = arguments[_key4];
-			return merge$1(cache.registered, css, classnames(args));
-		},
-		injectGlobal: function injectGlobal() {
-			for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) args[_key3] = arguments[_key3];
-			insertWithoutScoping(cache, serializeStyles(args, cache.registered));
-		},
-		keyframes: function keyframes() {
-			for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) args[_key2] = arguments[_key2];
-			var serialized = serializeStyles(args, cache.registered);
-			var animation = "animation-" + serialized.name;
-			insertWithoutScoping(cache, {
-				name: serialized.name,
-				styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-			});
-			return animation;
-		},
-		hydrate: function hydrate(ids) {
-			ids.forEach(function(key) {
-				cache.inserted[key] = true;
-			});
-		},
-		flush: function flush() {
-			cache.registered = {};
-			cache.inserted = {};
-			cache.sheet.flush();
-		},
-		sheet: cache.sheet,
-		cache,
-		getRegisteredStyles: getRegisteredStyles$1.bind(null, cache.registered),
-		merge: merge$1.bind(null, cache.registered, css)
-	};
-};
-var classnames = function classnames(args) {
-	var cls = "";
-	for (var i = 0; i < args.length; i++) {
-		var arg = args[i];
-		if (arg == null) continue;
-		var toAdd = void 0;
-		switch (typeof arg) {
-			case "boolean": break;
-			case "object":
-				if (Array.isArray(arg)) toAdd = classnames(arg);
-				else {
-					toAdd = "";
-					for (var k in arg) if (arg[k] && k) {
-						toAdd && (toAdd += " ");
-						toAdd += k;
-					}
-				}
-				break;
-			default: toAdd = arg;
-		}
-		if (toAdd) {
-			cls && (cls += " ");
-			cls += toAdd;
-		}
-	}
-	return cls;
-};
-//#endregion
-//#region ../../../node_modules/.pnpm/@emotion+css@11.13.5/node_modules/@emotion/css/dist/emotion-css.esm.js
-var _createEmotion = createEmotion({ key: "css" });
-_createEmotion.flush;
-_createEmotion.hydrate;
-var cx = _createEmotion.cx;
-_createEmotion.merge;
-_createEmotion.getRegisteredStyles;
-_createEmotion.injectGlobal;
-_createEmotion.keyframes;
-_createEmotion.css;
-_createEmotion.sheet;
-_createEmotion.cache;
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
-var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
-var useCx = () => {
-	const cache = __unsafe_useEmotionCache();
-	return useCallback$1((...classNames) => {
-		if (cache === null) throw new Error("The `useCx` hook should be only used within a valid Emotion Cache Context");
-		return cx(...classNames.map((arg) => {
-			if (isSerializedStyles(arg)) {
-				insertStyles(cache, arg, false);
-				return `${cache.key}-${arg.name}`;
-			}
-			return arg;
-		}));
-	}, [cache]);
-};
-//#endregion
-//#region ../../../node_modules/.pnpm/memize@2.1.1/node_modules/memize/dist/index.js
-/**
-* Memize options object.
-*
-* @typedef MemizeOptions
-*
-* @property {number} [maxSize] Maximum size of the cache.
-*/
-/**
-* Internal cache entry.
-*
-* @typedef MemizeCacheNode
-*
-* @property {?MemizeCacheNode|undefined} [prev] Previous node.
-* @property {?MemizeCacheNode|undefined} [next] Next node.
-* @property {Array<*>}                   args   Function arguments for cache
-*                                               entry.
-* @property {*}                          val    Function result.
-*/
-/**
-* Properties of the enhanced function for controlling cache.
-*
-* @typedef MemizeMemoizedFunction
-*
-* @property {()=>void} clear Clear the cache.
+* Properties of the enhanced function for controlling cache.
+*
+* @typedef MemizeMemoizedFunction
+*
+* @property {()=>void} clear Clear the cache.
 */
 /**
 * Accepts a function to be memoized, and returns a new memoized function, with
@@ -11139,93 +10040,18 @@ function memize(fn, options) {
 	};
 	return memoized;
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
-var import_es6 = /* @__PURE__ */ __toESM((/* @__PURE__ */ __commonJSMin(((exports, module) => {
-	module.exports = function equal(a, b) {
-		if (a === b) return true;
-		if (a && b && typeof a == "object" && typeof b == "object") {
-			if (a.constructor !== b.constructor) return false;
-			var length, i, keys;
-			if (Array.isArray(a)) {
-				length = a.length;
-				if (length != b.length) return false;
-				for (i = length; i-- !== 0;) if (!equal(a[i], b[i])) return false;
-				return true;
-			}
-			if (a instanceof Map && b instanceof Map) {
-				if (a.size !== b.size) return false;
-				for (i of a.entries()) if (!b.has(i[0])) return false;
-				for (i of a.entries()) if (!equal(i[1], b.get(i[0]))) return false;
-				return true;
-			}
-			if (a instanceof Set && b instanceof Set) {
-				if (a.size !== b.size) return false;
-				for (i of a.entries()) if (!b.has(i[0])) return false;
-				return true;
-			}
-			if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-				length = a.length;
-				if (length != b.length) return false;
-				for (i = length; i-- !== 0;) if (a[i] !== b[i]) return false;
-				return true;
-			}
-			if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-			if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-			if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
-			keys = Object.keys(a);
-			length = keys.length;
-			if (length !== Object.keys(b).length) return false;
-			for (i = length; i-- !== 0;) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-			for (i = length; i-- !== 0;) {
-				var key = keys[i];
-				if (!equal(a[key], b[key])) return false;
-			}
-			return true;
-		}
-		return a !== a && b !== b;
-	};
-})))(), 1);
-var ComponentsContext = createContext$1({});
-ComponentsContext.displayName = "ComponentsContext";
-var useComponentsContext = () => useContext$1(ComponentsContext);
-function useContextSystemBridge({ value }) {
-	const parentContext = useComponentsContext();
-	const valueRef = useRef$1(value);
-	use_update_effect_default(() => {
-		if ((0, import_es6.default)(valueRef.current, value) && valueRef.current !== value) globalThis.SCRIPT_DEBUG === true && warning(`Please memoize your context: ${JSON.stringify(value)}`);
-	}, [value]);
-	return useMemo$1(() => {
-		return deepmerge(parentContext ?? {}, value ?? {}, { isMergeableObject: isPlainObject });
-	}, [parentContext, value]);
-}
-var BaseContextSystemProvider = ({ children, value }) => {
-	const contextValue = useContextSystemBridge({ value });
-	return /* @__PURE__ */ jsx(ComponentsContext.Provider, {
-		value: contextValue,
-		children
-	});
-};
-memo(BaseContextSystemProvider);
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/constants.mjs
-var COMPONENT_NAMESPACE = "data-wp-component";
-var CONNECTED_NAMESPACE = "data-wp-c16t";
-var CONNECT_STATIC_NAMESPACE = "__contextSystemKey__";
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 function getStyledClassName(namespace) {
-	return `components-${paramCase(namespace)}`;
+	return `components-${namespace.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/[^A-Z0-9]+/gi, "-").replace(/^-|-$/g, "").toLowerCase()}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
 function _contextConnect(Component, namespace, options) {
 	const WrappedComponent = options?.forwardsRef ? forwardRef$1(Component) : Component;
-	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("contextConnect: Please provide a namespace");
+	if (typeof namespace === "undefined") warning("contextConnect: Please provide a namespace");
 	let mergedNamespace = WrappedComponent["__contextSystemKey__"] || [namespace];
 	if (Array.isArray(namespace)) mergedNamespace = [...mergedNamespace, ...namespace];
 	if (typeof namespace === "string") mergedNamespace = [...mergedNamespace, namespace];
@@ -11235,19 +10061,17 @@ function _contextConnect(Component, namespace, options) {
 		selector: `.${getStyledClassNameFromKey(namespace)}`
 	});
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
 function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
-	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
+	if (typeof namespace === "undefined") warning("useContextSystem: Please provide a namespace");
 	const contextProps = contextSystemProps?.[namespace] || {};
 	const finalComponentProps = {
 		...getConnectedNamespace(),
@@ -11257,7 +10081,7 @@ function useContextSystem(props, namespace) {
 	const overrideProps = _overrides;
 	const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props;
 	const propsWithChildren = initialMergedProps;
-	const classes = useCx()(getStyledClassNameFromKey(namespace), props.className);
+	const classes = clsx(getStyledClassNameFromKey(namespace), props.className);
 	const rendered = typeof propsWithChildren.renderChildren === "function" ? propsWithChildren.renderChildren(initialMergedProps) : propsWithChildren.children;
 	for (const key in initialMergedProps) finalComponentProps[key] = initialMergedProps[key];
 	for (const key in overrideProps) finalComponentProps[key] = overrideProps[key];
@@ -11265,8 +10089,7 @@ function useContextSystem(props, namespace) {
 	finalComponentProps.className = classes;
 	return finalComponentProps;
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -11281,8 +10104,7 @@ var visuallyHidden = {
 	wordWrap: "normal",
 	wordBreak: "normal"
 };
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
 var customAttributeRegExp = /^(data|aria|x)-/i;
 var eventHandlerRegExp = /^on[A-Z]/;
 var svgElementNames = new Set(`animate animateMotion animateTransform circle clipPath defs desc ellipse
@@ -11371,8 +10193,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 	});
 }
 var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/view/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ jsx(PolymorphicElement, {
 		ref,
@@ -11380,8 +10201,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 	});
 }
 var component_default$2 = Object.assign(forwardRef$1(UnforwardedView), { selector: ".components-view" });
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -11395,8 +10215,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 	});
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
@@ -11434,16 +10253,15 @@ function useResponsiveValue(values, options = {}) {
 	const array = values || [];
 	return array[index >= array.length ? array.length - 1 : index];
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/utils.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
 		justifyContent: "center"
 	},
 	bottomLeft: {
-		alignItems: "flex-start",
-		justifyContent: "flex-end"
+		alignItems: "flex-end",
+		justifyContent: "flex-start"
 	},
 	bottomRight: {
 		alignItems: "flex-end",
@@ -11482,8 +10300,7 @@ var ALIGNMENTS = {
 function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] ?? {} : {};
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/hook.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/grid/hook.mjs
 var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
 function getRuntime() {
 	const globalScope = globalThis;
@@ -11627,8 +10444,7 @@ function useGrid(props) {
 		}
 	};
 }
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@42.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_6d0393a58a031b78f608040e2ecbe6e0/node_modules/@wordpress/components/build-module/grid/component.mjs
+// ../../../node_modules/.pnpm/@wordpress+components@43.0.0_@date-fns+tz@1.5.0_@types+react-dom@19.3.0_@types+react@19_401cb4bad47bd1f7b56615ff574f0485/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
 	const gridProps = useGrid(props);
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -11637,8 +10453,7 @@ function UnconnectedGrid(props, forwardedRef) {
 	});
 }
 var component_default = contextConnect(UnconnectedGrid, "Grid");
-//#endregion
-//#region src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts
+// src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts
 /**
 * Fractional layout rounding can put a row's bottom a hair past the container's
 * without any visible clipping. Allow that much slack before hiding a row.
@@ -11721,8 +10536,7 @@ function useFittedRowCount(enabled, rowCount, data) {
 		isMeasurable
 	};
 }
-//#endregion
-//#region src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts
+// src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts
 /**
 * Hook to create legend items from leaderboard data
 * @param root0                         - Configuration object
@@ -11770,11 +10584,12 @@ function useLeaderboardLegendItems({ data, primaryColor, secondaryColor, withCom
 		withOverlayLabel
 	]);
 }
-//#endregion
-//#region src/charts/leaderboard-chart/leaderboard-chart.module.scss
+// src/charts/leaderboard-chart/leaderboard-chart.module.scss
 var leaderboard_chart_module_default = {
 	"bar": "a8ccharts-GovfoW-bar",
 	"bar--animated": "a8ccharts-GovfoW-bar--animated",
+	"bar--negative": "a8ccharts-GovfoW-bar--negative",
+	"barTrack": "a8ccharts-GovfoW-barTrack",
 	"barWithLabelContainer": "a8ccharts-GovfoW-barWithLabelContainer",
 	"chevron": "a8ccharts-GovfoW-chevron",
 	"deltaPlaceholder": "a8ccharts-GovfoW-deltaPlaceholder",
@@ -11801,8 +10616,42 @@ var leaderboard_chart_module_default = {
 	"stretch": "a8ccharts-GovfoW-stretch",
 	"valueContainer": "a8ccharts-GovfoW-valueContainer"
 };
-//#endregion
-//#region src/charts/leaderboard-chart/leaderboard-chart.tsx
+// src/charts/leaderboard-chart/private/resolve-leaderboard-entries.ts
+const toShare = (value, max) => max === 0 ? 0 : value / max * 100;
+const toDelta = (currentValue, previousValue) => {
+	if (previousValue == null) return;
+	if (previousValue === 0) return currentValue === 0 ? 0 : void 0;
+	return (currentValue - previousValue) / Math.abs(previousValue) * 100;
+};
+/**
+* Fills in the shares and delta an entry omits, derived from its values.
+*
+* @param data                    - Leaderboard entries; passed shares and delta win over derived ones.
+* @param options                 - Resolver options.
+* @param options.includePrevious - Whether previous values count toward the shared max.
+* @param options.clampNegative   - Whether a negative share draws as an empty bar instead of below zero.
+* @return Entries with `currentShare` always set.
+*/
+function resolveLeaderboardEntries(data, { includePrevious, clampNegative = false }) {
+	const magnitude = clampNegative ? (value) => Math.max(value, 0) : Math.abs;
+	const clamp = (share) => clampNegative ? Math.max(share, 0) : share;
+	const max = data.reduce((largest, { currentValue, previousValue }) => {
+		const previous = includePrevious && previousValue != null ? magnitude(previousValue) : 0;
+		return Math.max(largest, magnitude(currentValue), previous);
+	}, 0);
+	return data.map((entry) => {
+		const passedOrDerivedPrevious = entry.previousShare ?? (entry.previousValue != null ? toShare(entry.previousValue, max) : void 0);
+		const previousShare = passedOrDerivedPrevious !== void 0 ? clamp(passedOrDerivedPrevious) : void 0;
+		const delta = entry.delta ?? toDelta(entry.currentValue, entry.previousValue);
+		return {
+			...entry,
+			currentShare: clamp(entry.currentShare ?? toShare(entry.currentValue, max)),
+			...previousShare !== void 0 && { previousShare },
+			...delta !== void 0 && { delta }
+		};
+	});
+}
+// src/charts/leaderboard-chart/leaderboard-chart.tsx
 const ROW_GAP = "var(--a8c-charts-dimension-leaderboard-row-gap, 12px)";
 const COLUMN_GAP = "var(--a8c-charts-dimension-leaderboard-column-gap, 4px)";
 /** Indexed by `Math.sign( delta ) + 1`, so [negative, neutral, positive]. */
@@ -11862,27 +10711,43 @@ const BarLabel = ({ label }) => /* @__PURE__ */ jsx(Fragment$1, { children: type
 	className: leaderboard_chart_module_default.label,
 	children: label
 }) : label });
-const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, secondaryColor, animation, isPrimaryVisible = true, isComparisonVisible = true }) => {
+const Bar = ({ share, color, animation, divergingScale }) => {
+	const isNegative = share < 0;
+	const sideMax = divergingScale?.[isNegative ? "negative" : "positive"];
+	const width = sideMax ? Math.abs(share) / sideMax * 100 : Math.abs(share);
+	const bar = /* @__PURE__ */ jsx("div", {
+		className: clsx(leaderboard_chart_module_default.bar, {
+			[leaderboard_chart_module_default["bar--animated"]]: animation,
+			[leaderboard_chart_module_default["bar--negative"]]: divergingScale && isNegative
+		}),
+		style: {
+			width: getBarWidth(width),
+			backgroundColor: color
+		}
+	});
+	if (!divergingScale) return bar;
+	return /* @__PURE__ */ jsx("div", {
+		className: leaderboard_chart_module_default.barTrack,
+		style: { gridTemplateColumns: `${divergingScale.negative}fr ${divergingScale.positive}fr` },
+		children: bar
+	});
+};
+const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, secondaryColor, animation, divergingScale, isPrimaryVisible = true, isComparisonVisible = true }) => {
 	const showComparisonBar = withComparison && !withOverlayLabel && isComparisonVisible;
+	const bars = /* @__PURE__ */ jsxs(Fragment$1, { children: [isPrimaryVisible && /* @__PURE__ */ jsx(Bar, {
+		share: entry.currentShare,
+		color: primaryColor,
+		animation,
+		divergingScale
+	}), showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ jsx(Bar, {
+		share: entry.previousShare,
+		color: secondaryColor,
+		animation,
+		divergingScale
+	})] });
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx(leaderboard_chart_module_default.barWithLabelContainer, { [leaderboard_chart_module_default["is-overlay"]]: withOverlayLabel }),
-		children: [
-			/* @__PURE__ */ jsx(BarLabel, { label: entry.label }),
-			isPrimaryVisible && /* @__PURE__ */ jsx("div", {
-				className: clsx(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
-				style: {
-					width: getBarWidth(entry.currentShare),
-					backgroundColor: primaryColor
-				}
-			}),
-			showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ jsx("div", {
-				className: clsx(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
-				style: {
-					width: getBarWidth(entry.previousShare),
-					backgroundColor: secondaryColor
-				}
-			})
-		]
+		children: [/* @__PURE__ */ jsx(BarLabel, { label: entry.label }), bars]
 	});
 };
 /**
@@ -11896,6 +10761,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.height           - Optional height of the chart container in pixels
 * @param props.withComparison   - Whether to show comparison data
 * @param props.withOverlayLabel - Whether to overlay the label on top of the bar
+* @param props.negativeBars     - How a negative value draws: from a shared zero point, or as an empty bar
 * @param props.primaryColor     - Primary color for current period bars
 * @param props.secondaryColor   - Secondary color for comparison period bars
 * @param props.valueFormatter   - Custom formatter for values
@@ -11913,7 +10779,7 @@ const BarWithLabel = ({ entry, withComparison, withOverlayLabel, primaryColor, s
 * @param props.ariaLabel        - Accessible name for the list, defaulting to "Leaderboard chart"
 * @return JSX element representing the leaderboard chart
 */
-const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", ariaLabel, className, style, children }) => {
+const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propWidth, height: propHeight, withComparison = false, withOverlayLabel = false, negativeBars = "diverge", primaryColor, secondaryColor, valueFormatter = defaultValueFormatter, deltaFormatter = defaultDeltaFormatter, animation, loading = false, fitRows = false, showLegend = false, legend = {}, legendLabels, gap = "md", ariaLabel, className, style, children }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendPosition = legend.position ?? "bottom";
 	const chartId = useChartId(providedChartId);
@@ -11967,6 +10833,30 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		withComparison,
 		withOverlayLabel
 	]);
+	const withComparisonBars = withComparison && !withOverlayLabel;
+	const resolvedData = useMemo(() => resolveLeaderboardEntries(data ?? [], {
+		includePrevious: withComparisonBars,
+		clampNegative: negativeBars === "clamp"
+	}), [
+		data,
+		withComparisonBars,
+		negativeBars
+	]);
+	const divergingScale = useMemo(() => {
+		const scale = {
+			negative: 0,
+			positive: 0
+		};
+		for (const entry of resolvedData) {
+			const shares = [entry.currentShare];
+			if (withComparisonBars && hasPreviousValue(entry)) shares.push(entry.previousShare);
+			for (const share of shares) {
+				const side = share < 0 ? "negative" : "positive";
+				scale[side] = Math.max(scale[side], Math.abs(share));
+			}
+		}
+		return scale.negative > 0 ? scale : void 0;
+	}, [resolvedData, withComparisonBars]);
 	const isDataValid = Boolean(data && data.length > 0);
 	const chartMetadata = useMemo(() => ({
 		withComparison,
@@ -11982,6 +10872,8 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
 	const shouldFitRows = fitRows && isMeasurable;
+	const showComparisonColumn = withComparison && isComparisonVisible;
+	const templateColumns = showComparisonColumn && isPrimaryVisible ? "minmax(0, 1fr) auto auto" : "minmax(0, 1fr) auto";
 	if (!data || data.length === 0) return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ jsx(ChartLayout, {
@@ -12046,13 +10938,12 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 				}) : /* @__PURE__ */ jsx(component_default, {
 					role: "list",
 					"aria-label": ariaLabel ?? __("Leaderboard chart", "jetpack-charts"),
-					templateColumns: "minmax(0, 1fr) auto",
+					templateColumns,
 					rowGap: ROW_GAP,
 					columnGap: COLUMN_GAP,
 					"data-leaderboard-grid": true,
-					children: data.map((entry, rowIndex) => {
+					children: resolvedData.map((entry, rowIndex) => {
 						const rowStyle = shouldFitRows && rowIndex >= fittedCount ? { visibility: "hidden" } : void 0;
-						const showComparisonColumn = withComparison && isComparisonVisible;
 						const hasPreviousPeriodValue = hasPreviousValue(entry);
 						const hasDelta = hasDeltaValue(entry);
 						const showComparisonValue = showComparisonColumn && hasDelta;
@@ -12067,13 +10958,12 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								withOverlayLabel,
 								primaryColor: resolvedPrimaryColor,
 								secondaryColor: resolvedSecondaryColor,
+								divergingScale,
 								isPrimaryVisible,
 								isComparisonVisible,
 								animation: animation && !loading && !prefersReducedMotion
 							})
-						}), /* @__PURE__ */ jsxs(Stack, {
-							direction: "row",
-							gap: "xs",
+						}), /* @__PURE__ */ jsxs("div", {
 							className: clsx(leaderboard_chart_module_default.valueContainer, { [leaderboard_chart_module_default.overlayLabel]: withOverlayLabel }),
 							children: [
 								isPrimaryVisible && /* @__PURE__ */ jsx(Text$1, { children: valueFormatter(entry.currentValue) }),
@@ -12154,8 +11044,7 @@ const LeaderboardChartWithProvider = (props) => {
 LeaderboardChartWithProvider.displayName = "LeaderboardChart";
 const LeaderboardChart = attachSubComponents(LeaderboardChartWithProvider, { Legend });
 const LeaderboardChartResponsive = attachSubComponents(withResponsive(LeaderboardChartWithProvider), { Legend });
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/order-arcs-for-navigation.ts
+// src/charts/private/pie-keyboard-navigation/order-arcs-for-navigation.ts
 /**
 * Orders arcs the way they appear: clockwise from 12 o'clock, which for a semi-circle is left to right.
 *
@@ -12163,15 +11052,13 @@ const LeaderboardChartResponsive = attachSubComponents(withResponsive(Leaderboar
 * @return A copy of `arcs` sorted by angular midpoint.
 */
 const orderArcsForNavigation = (arcs) => [...arcs].sort((a, b) => a.startAngle + a.endAngle - (b.startAngle + b.endAngle));
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/pie-selection-announcement.tsx
+// src/charts/private/pie-keyboard-navigation/pie-selection-announcement.tsx
 const PieSelectionAnnouncement = ({ data }) => /* @__PURE__ */ jsx(VisuallyHidden, {
 	role: "status",
 	"aria-atomic": "true",
 	children: data && /* @__PURE__ */ jsx(LabelValueContent, { data })
 });
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
+// src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx
 const TOOLTIP_BOX_STYLE = { zIndex: 3 };
 const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
 	const standaloneScopeClass = useStandaloneScopeClass();
@@ -12193,8 +11080,7 @@ const PieTooltip = ({ top, left, selectedIndex, tooltipRef, children }) => {
 		}, `chart-tooltip-${selectedIndex}`)
 	});
 };
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/pie-selection-output.tsx
+// src/charts/private/pie-keyboard-navigation/pie-selection-output.tsx
 /**
 * Reports the selected segment: a focused tooltip for a keyboard selection, a pointer tooltip on hover, or a screen reader announcement without tooltips.
 *
@@ -12234,8 +11120,7 @@ const PieSelectionOutput = ({ withTooltips, selectedIndex, selectedData, keyboar
 		})
 	] });
 };
-//#endregion
-//#region src/charts/private/pie-keyboard-navigation/use-pie-keyboard-navigation.ts
+// src/charts/private/pie-keyboard-navigation/use-pie-keyboard-navigation.ts
 const usePieKeyboardNavigation = ({ navigationArcs, withTooltips, tooltipOffsetX, tooltipOffsetY }) => {
 	const chartRef = useRef(null);
 	const svgRef = useRef(null);
@@ -12315,8 +11200,7 @@ const usePieKeyboardNavigation = ({ navigationArcs, withTooltips, tooltipOffsetX
 		}
 	};
 };
-//#endregion
-//#region src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
+// src/charts/private/radial-wipe-animation/radial-wipe-animation.tsx
 /**
 * Renders a SVG mask that creates a radial wipe animation effect.
 *
@@ -12353,8 +11237,7 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 		})
 	});
 }
-//#endregion
-//#region src/charts/pie-chart/pie-chart.module.scss
+// src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
 	"pie-chart": "a8ccharts-gnszbG-pie-chart",
 	"pie-chart__label-plate": "a8ccharts-gnszbG-pie-chart__label-plate",
@@ -12365,8 +11248,7 @@ var pie_chart_module_default = {
 	"pie-chart__plot": "a8ccharts-gnszbG-pie-chart__plot",
 	"pie-chart--responsive": "a8ccharts-gnszbG-pie-chart--responsive"
 };
-//#endregion
-//#region src/charts/pie-chart/pie-chart.tsx
+// src/charts/pie-chart/pie-chart.tsx
 /**
 * Default tooltip renderer for pie charts.
 * Renders the default `label: value` tooltip content for the hovered segment.
@@ -12649,8 +11531,7 @@ const PieChartResponsive = attachSubComponents(withResponsive(PieChartWithProvid
 	SVG: ChartSVG,
 	HTML: ChartHTML
 });
-//#endregion
-//#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
+// src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
 var pie_semi_circle_chart_module_default = {
 	"label": "a8ccharts-YtTOxW-label",
 	"note": "a8ccharts-YtTOxW-note",
@@ -12658,8 +11539,7 @@ var pie_semi_circle_chart_module_default = {
 	"pie-semi-circle-chart__plot": "a8ccharts-YtTOxW-pie-semi-circle-chart__plot",
 	"pie-semi-circle-chart--responsive": "a8ccharts-YtTOxW-pie-semi-circle-chart--responsive"
 };
-//#endregion
-//#region src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
+// src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx
 /**
 * Default tooltip renderer for semi-circle pie charts.
 * Renders the default `label: value` tooltip content for the hovered segment.
@@ -12902,14 +11782,12 @@ const PieSemiCircleChartResponsive = attachSubComponents(withResponsive(PieSemiC
 	SVG: ChartSVG,
 	HTML: ChartHTML
 });
-//#endregion
-//#region src/charts/sparkline/sparkline.module.scss
+// src/charts/sparkline/sparkline.module.scss
 var sparkline_module_default = {
 	"sparkline": "a8ccharts-GtgAVa-sparkline",
 	"sparkline--empty": "a8ccharts-GtgAVa-sparkline--empty"
 };
-//#endregion
-//#region src/charts/sparkline/sparkline.tsx
+// src/charts/sparkline/sparkline.tsx
 const DEFAULT_WIDTH = 100;
 const DEFAULT_HEIGHT = 40;
 /**
@@ -13051,8 +11929,7 @@ SparklineUnresponsive.displayName = "SparklineUnresponsive";
 * Responsive Sparkline chart component
 */
 const Sparkline = withResponsive(SparklineUnresponsive);
-//#endregion
-//#region src/components/trend-indicator/trend-indicator.module.scss
+// src/components/trend-indicator/trend-indicator.module.scss
 var trend_indicator_module_default = {
 	"trend-indicator": "a8ccharts-zR7F7G-trend-indicator",
 	"trend-indicator__icon": "a8ccharts-zR7F7G-trend-indicator__icon",
@@ -13061,8 +11938,7 @@ var trend_indicator_module_default = {
 	"trend-indicator--neutral": "a8ccharts-zR7F7G-trend-indicator--neutral",
 	"trend-indicator--up": "a8ccharts-zR7F7G-trend-indicator--up"
 };
-//#endregion
-//#region src/components/trend-indicator/trend-indicator.tsx
+// src/components/trend-indicator/trend-indicator.tsx
 const DIRECTION_LABELS = {
 	up: "Increase",
 	down: "Decrease",
@@ -13105,7 +11981,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 		})]
 	});
 }
-//#endregion
 export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TooltipBox, TrendIndicator, XYChartTooltip, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useBarColors, useBarLegendItems, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 
 //# sourceMappingURL=index.js.map