@automattic/charts 4.12.0 → 4.14.0

package/dist/index.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-//#region \0rolldown/runtime.js
+// \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,14 +21,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-//#endregion
 let _automattic_number_formatters = require("@automattic/number-formatters");
 let _visx_xychart = require("@visx/xychart");
 let _wordpress_i18n = require("@wordpress/i18n");
 let clsx = require("clsx");
 clsx = __toESM(clsx, 1);
 let react = require("react");
-react = __toESM(react);
 let date_fns = require("date-fns");
 let _date_fns_tz = require("@date-fns/tz");
 let _visx_text = require("@visx/text");
@@ -52,28 +50,24 @@ let _visx_pattern = require("@visx/pattern");
 let react_google_charts = require("react-google-charts");
 let dompurify = require("dompurify");
 dompurify = __toESM(dompurify, 1);
-require("@babel/runtime/helpers/esm/extends");
 let _wordpress_icons = require("@wordpress/icons");
 let _visx_shape = require("@visx/shape");
-//#region src/charts/private/chart-instance-context/chart-instance-context.ts
+// src/charts/private/chart-instance-context/chart-instance-context.ts
 const ChartInstanceContext = (0, react.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 = (0, react.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.
 *
@@ -87,8 +81,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.
@@ -101,8 +94,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
 *
@@ -197,8 +189,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();
@@ -230,8 +221,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`.
@@ -280,8 +270,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.
@@ -297,8 +286,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.
 *
@@ -322,8 +310,7 @@ const getEdgeTickWidths = (ticks, formatTick, labelStyle) => {
 		last: (0, _visx_text.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.
 *
@@ -337,8 +324,7 @@ const getLongestTickWidth = (ticks, formatTick, labelStyle) => {
 	const longestTick = formattedTicks.reduce((longest, current) => longest.length >= current.length ? longest : current, formattedTicks[0]);
 	return (0, _visx_text.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
@@ -391,19 +377,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 (0, deepmerge.default)(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
@@ -570,8 +553,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')
 */
@@ -668,8 +650,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
@@ -696,8 +677,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)}`;
@@ -796,8 +776,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.
 *
@@ -814,8 +793,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";
@@ -855,8 +833,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,
@@ -1262,16 +1239,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 || (0, _visx_vendor_d3_color.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.
 *
@@ -1314,8 +1289,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 = (0, react.createContext)(null);
 const GlobalChartsProvider = ({ children, theme, locale, timeZone }) => {
@@ -1496,21 +1470,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 = (0, react.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 = (0, react.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;
@@ -1551,16 +1522,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 = () => (0, react.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.
 *
@@ -1569,8 +1538,7 @@ const useChartScopeElement = () => (0, react.useContext)(ChartScopeContext);
 * @return The scope class name, or undefined when a provider is present.
 */
 const useStandaloneScopeClass = () => (0, react.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) => {
@@ -1626,8 +1594,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`.
@@ -1641,8 +1608,7 @@ const RUNTIME_FORMATTING = {};
 const useChartFormatting = () => {
 	return (0, react.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
 *
@@ -1677,8 +1643,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.
 */
@@ -1800,8 +1765,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.
@@ -1838,8 +1802,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.
@@ -1880,8 +1843,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.
@@ -1921,8 +1883,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).
@@ -1939,8 +1900,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.
 *
@@ -2012,8 +1972,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;
 /**
@@ -2034,11 +1993,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" ? react.useLayoutEffect : react.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);
@@ -2060,8 +2017,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
 *
@@ -2070,8 +2026,7 @@ const useChartRegistration = ({ chartId, legendItems, chartType, isDataValid, me
 const useGlobalChartsTheme = () => {
 	return (0, react.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.
@@ -2089,8 +2044,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",
@@ -2102,8 +2056,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",
@@ -2172,16 +2125,17 @@ const BaseLegend = (0, react.forwardRef)(({ items: allItems, className, orientat
 		chartId,
 		context
 	]);
-	const createClickHandler = (0, react.useCallback)((seriesLabels, itemInteractive) => {
+	const createClickHandler = (0, react.useCallback)((seriesLabels, itemInteractive, onToggle) => {
 		if (!itemInteractive) return;
-		return () => handleLegendClick(seriesLabels);
+		return onToggle ? () => onToggle() : () => handleLegendClick(seriesLabels);
 	}, [handleLegendClick]);
-	const createKeyDownHandler = (0, react.useCallback)((seriesLabels, itemInteractive) => {
+	const createKeyDownHandler = (0, react.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]);
@@ -2205,10 +2159,11 @@ const BaseLegend = (0, react.forwardRef)(({ items: allItems, className, orientat
 			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__ */ (0, react_jsx_runtime.jsxs)(_visx_legend.LegendItem, {
 					className: (0, clsx.default)("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,
@@ -2268,8 +2223,7 @@ const BaseLegend = (0, react.forwardRef)(({ items: allItems, className, orientat
 		})
 	});
 });
-//#endregion
-//#region src/components/legend/legend.tsx
+// src/components/legend/legend.tsx
 const defaultShapeByChartType = {
 	area: "rect",
 	line: "line",
@@ -2295,8 +2249,7 @@ const Legend = (0, react.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
@@ -2552,15 +2505,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 	data.label,
 	": ",
 	data.valueDisplay || (0, _automattic_number_formatters.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) => {
@@ -2583,11 +2534,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.
 *
@@ -2607,8 +2556,7 @@ const TooltipBox = (0, react.forwardRef)(({ unstyled = false, role = "tooltip",
 	return unstyled ? box : /* @__PURE__ */ (0, react_jsx_runtime.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`.
 *
@@ -2642,6 +2590,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) => {
@@ -2820,8 +2842,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",
@@ -3006,18 +3027,21 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 */
 const XyChartTooltipOverlay = (props) => {
 	const tooltipContext = (0, react.useContext)(_visx_xychart.TooltipContext);
+	const dataRegistry = (0, react.useContext)(_visx_xychart.DataContext)?.dataRegistry;
 	const [container, setContainer] = (0, react.useState)(null);
 	const anchorRef = (0, react.useCallback)((node) => {
 		setContainer(node?.ownerSVGElement?.parentElement ?? null);
 	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { ref: anchorRef }), tooltipContext?.tooltipOpen && /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useContext)(_visx_xychart.TooltipContext);
 	const scopeElement = useChartScopeElement();
@@ -3042,6 +3066,7 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 		}
 		return flattened;
 	}, [series, mode]);
+	const stops = (0, react.useMemo)(() => getKeyboardStops(series), [series]);
 	const hasKeyboardSelection = (0, react.useRef)(false);
 	const closeTooltipNow = (0, react.useCallback)(() => {
 		tooltipContext?.updateTooltip({
@@ -3075,19 +3100,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,
@@ -3098,7 +3124,7 @@ const XYChartTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardFocu
 	}, [
 		selectedIndex,
 		tooltipData,
-		series
+		stops
 	]);
 	const focusableRenderTooltip = (0, react.useMemo)(() => {
 		if (!renderTooltip) return void 0;
@@ -3248,8 +3274,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.
@@ -3284,8 +3309,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
@@ -3299,8 +3323,7 @@ const ChartSVG = ({ children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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
@@ -3314,8 +3337,7 @@ const ChartHTML = ({ children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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.
 *
@@ -3326,8 +3348,7 @@ ChartHTML.displayName = "Chart.HTML";
 function renderLegendSlot(legendChildren, position) {
 	return legendChildren.filter((l) => l.position === position).map((l, i) => (0, react.createElement)(react.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
@@ -3380,11 +3401,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";
@@ -3427,8 +3446,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 } = (0, react.useContext)(_visx_xychart.DataContext) || {};
 	props.position;
@@ -3443,8 +3461,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.
 *
@@ -3468,11 +3485,9 @@ const isInvalidReading = (value, { allowMissing }) => value === null ? !allowMis
 * @return The formatted value.
 */
 const formatReading = (value) => value == null ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.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.
 *
@@ -3494,11 +3509,9 @@ const Center = (0, react.forwardRef)(({ align = "center", justify = "center", cl
 	...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.
@@ -3525,8 +3538,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.
 *
@@ -3546,8 +3558,7 @@ const getAllHiddenMessage = (interactive, itemType) => {
 	if (interactive) return (0, _wordpress_i18n._x)("All series are hidden. Click legend items to show data.", "chart empty state: interactive series", "jetpack-charts");
 	return (0, _wordpress_i18n._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 ? _visx_curve.curveCatmullRom : _visx_curve.curveLinear;
@@ -3804,8 +3815,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.
@@ -3840,8 +3850,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.
 *
@@ -3888,15 +3897,13 @@ const WholeNumberTicks = ({ axis, numTicks, enabled, children }) => {
 	const tickValues = enabled ? getWholeNumberTickValues(axis === "x" ? xScale : yScale, numTicks) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { 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`.
@@ -3975,14 +3982,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
@@ -4165,11 +4170,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",
@@ -4271,8 +4274,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] = (0, react.useState)(null);
@@ -4355,8 +4357,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 }) => {
@@ -4549,8 +4550,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;
@@ -4580,8 +4580,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.
 *
@@ -4680,8 +4679,7 @@ function NearestPointerEvents({ onPointerDown, onPointerMove, onPointerUp }) {
 	(0, _visx_xychart.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__ */ (0, react.createElement)(DefaultGlyph, {
 		...props,
@@ -4863,21 +4861,22 @@ const LineChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		isSeriesVisible,
 		options?.yScale
 	]);
-	const activateSelectedPoint = (0, react.useCallback)((index) => {
-		const series = visibleSeries.find((candidate) => candidate.data[index]);
-		if (series) onDatumActivate?.({
-			datum: series.data[index],
-			index,
-			key: series.label
+	const stops = (0, react.useMemo)(() => getKeyboardStops(visibleSeries), [visibleSeries]);
+	const activateSelectedPoint = (0, react.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"
@@ -5211,15 +5210,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
@@ -5235,8 +5232,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 (0, _wordpress_i18n.__)("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 = (0, react.useContext)(_visx_xychart.DataContext);
 	(0, react.useImperativeHandle)(chartRef, () => ({
@@ -5301,8 +5297,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 = (0, react.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";
@@ -5348,19 +5343,22 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 		}));
 	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = (0, react.useMemo)(() => seriesWithVisibility.every(({ isVisible }) => !isVisible), [seriesWithVisibility]);
-	const hasWholeNumberValues = (0, react.useMemo)(() => (!stacked || stackOffset === "none") && hasOnlyWholeNumbers(dataSorted.filter((series) => isSeriesVisible(series.label))), [
-		dataSorted,
-		isSeriesVisible,
+	const visibleDataSeries = (0, react.useMemo)(() => dataSorted.filter((series) => isSeriesVisible(series.label)), [dataSorted, isSeriesVisible]);
+	const hasWholeNumberValues = (0, react.useMemo)(() => (!stacked || stackOffset === "none") && hasOnlyWholeNumbers(visibleDataSeries), [
+		visibleDataSeries,
 		stacked,
 		stackOffset
 	]);
+	const visibleSeriesKey = (0, react.useMemo)(() => JSON.stringify(visibleDataSeries.map((series) => series.label)), [visibleDataSeries]);
+	const stops = (0, react.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 = (0, react.useMemo)(() => {
 		if (rescaleYOnVisibilityChange || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
@@ -5648,7 +5646,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, ariaLabel, chartId: pro
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: area_chart_module_default["area-chart__tooltip--keyboard-focused"],
-									series: dataSorted
+									series: visibleDataSeries
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HoverGlyphs, {
 									visibleSeries,
 									stacked,
@@ -5684,8 +5682,7 @@ const AreaChartWithProvider = (0, react.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",
@@ -5693,8 +5690,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
 *
@@ -5808,8 +5804,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];
 /**
@@ -5860,8 +5855,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). */
@@ -6077,8 +6071,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.
@@ -6091,8 +6084,7 @@ const createGroupScale = (keys, bandwidth, padding) => (0, _visx_scale.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.
 *
@@ -6138,8 +6130,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 } = (0, react.useContext)(_visx_xychart.DataContext);
 	const bandScale = horizontal ? yScale : xScale;
@@ -6183,8 +6174,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 } = (0, react.useContext)(_visx_xychart.DataContext);
 	const bandScale = horizontal ? yScale : xScale;
@@ -6227,16 +6217,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"]
@@ -6283,8 +6271,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.
 *
@@ -6325,8 +6312,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.
 *
@@ -6394,8 +6380,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.
 *
@@ -6403,26 +6388,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 } = (0, react.useContext)(_visx_xychart.TooltipContext) ?? {};
 	(0, react.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];
@@ -6530,8 +6509,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.
 *
@@ -6540,7 +6518,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.
@@ -6585,7 +6563,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.
@@ -6623,6 +6601,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.
@@ -6632,25 +6629,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.
 *
@@ -6662,7 +6651,6 @@ function useBarStops(overlapSlots, primaryEntries) {
 	const series = (0, react.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: (0, react.useMemo)(() => JSON.stringify(overlapSlots?.keys ?? series.map((item) => item.label)), [overlapSlots, series]),
 		barAt: (0, react.useCallback)((stop) => {
 			if (overlapSlots) {
@@ -6705,8 +6693,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 = (0, react.useContext)(_visx_xychart.DataContext);
 	const xScale = context?.xScale;
@@ -6765,8 +6752,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.
@@ -6825,8 +6811,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.
@@ -6945,8 +6930,7 @@ function BandTooltip({ keys, slots, groupPadding, withTooltips, onPointerDown, o
 	(0, _visx_xychart.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.
 *
@@ -6986,8 +6970,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.
 *
@@ -7009,8 +6992,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.
@@ -7074,8 +7056,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 (0, _wordpress_i18n.__)("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 (0, _wordpress_i18n.__)("Invalid data", "jetpack-charts");
@@ -7266,10 +7247,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__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: bar_chart_module_default["bar-chart__tooltip"],
 			children: [
@@ -7339,6 +7317,17 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 		slotOf: overlapSlots.slotOf
 	}, [overlapSlots]);
 	const selectedSlot = (0, react.useMemo)(() => getSelectedSlot(overlapSlots, selectedIndex), [overlapSlots, selectedIndex]);
+	const selectedGroup = (0, react.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 = (0, react.useMemo)(() => {
 		if (overlapSlots) return selectedSlot;
 		const bar = selectedIndex === void 0 ? void 0 : barAt(selectedIndex);
@@ -7501,10 +7490,7 @@ const BarChartInternal = ({ data, ariaLabel, chartId: providedChartId, width, he
 										...!horizontal && valueTicks ? { tickValues: valueTicks } : {}
 									})] })
 								}),
-								withTooltips && selectedSlot && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotTooltipMembers, {
-									members: selectedSlot.members,
-									index: selectedSlot.index
-								}),
+								withTooltips && selectedMembers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SlotTooltipMembers, { members: selectedMembers }),
 								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XYChartTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
@@ -7516,7 +7502,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"
 								})
 							]
@@ -7534,8 +7519,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
@@ -7704,8 +7688,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",
@@ -7724,83 +7707,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] = (0, react.useState)(null);
+	const [selectedStepId, setSelectedStepId] = (0, react.useState)(null);
 	return {
-		clickedStep,
-		handleBarClick: (0, react.useCallback)((stepId) => {
-			if (clickedStep === stepId) {
-				setClickedStep(null);
-				hideTooltip?.();
-			} else setClickedStep(stepId);
-		}, [clickedStep, hideTooltip]),
-		handleBarKeyDown: (0, react.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: (0, react.useCallback)(() => {
-			setClickedStep(null);
+			setSelectedStepId(null);
 			hideTooltip?.();
 		}, [hideTooltip]),
 		getStepState: (0, react.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] = (0, react.useState)(null);
+	const stepElements = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const tabStopId = [focusedStepId, selectedStepId].find((id) => id !== null && stepIds.includes(id)) ?? stepIds[0];
+	return {
+		getTabIndex: (0, react.useCallback)((stepId) => stepId === tabStopId ? 0 : -1, [tabStopId]),
+		setStepElement: (0, react.useCallback)((stepId, element) => {
+			if (element) stepElements.current.set(stepId, element);
+			else stepElements.current.delete(stepId);
+		}, []),
+		handleStepFocus: (0, react.useCallback)((stepId) => {
+			setFocusedStepId(stepId);
+		}, []),
+		handleNavigationKey: (0, react.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) => (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._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: (0, _wordpress_i18n.__)("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 = (0, react.useRef)(null);
-	const selectedBarRef = (0, react.useRef)(null);
+	const isPointerFocusRef = (0, react.useRef)(false);
 	const [scopeNode, setScopeNode] = (0, react.useState)(null);
+	const tooltipId = (0, react.useId)();
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
-	const { handleBarClick, handleBarKeyDown, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
+	const { selectedStepId, selectStep, clearSelection, getStepState } = useFunnelSelection(hideTooltip);
+	const stepIds = (0, react.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";
@@ -7809,94 +7840,71 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		setScopeNode(node);
 		measureChartRef(node);
 	}, [measureChartRef]);
-	const clearSelectionAndRef = (0, react.useCallback)(() => {
-		clearSelection();
-		selectedBarRef.current = null;
-		hideTooltip();
-	}, [clearSelection, hideTooltip]);
-	const showTooltipAt = (0, react.useCallback)((step, x, y) => {
-		showTooltip({
+	const selectStepAt = (0, react.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 = (0, react.useCallback)((event) => {
-		const bounds = chartRef.current?.getBoundingClientRect();
-		if (!bounds) return null;
-		return {
-			x: event.clientX - bounds.left,
-			y: event.clientY - bounds.top
-		};
-	}, []);
-	const getKeyboardTooltipCoords = (0, react.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 = (0, react.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 = (0, react.useCallback)((step, element) => {
+		const rect = element.getBoundingClientRect();
+		selectStepAt(step, rect.left + rect.width / 2, rect.top);
+	}, [selectStepAt]);
 	const stepHandlers = (0, react.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
 	]);
-	(0, react.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 = (0, react.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("+");
@@ -7908,18 +7916,41 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 		className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
-		direction: "column",
-		align: "flex-start",
-		gap: "xs",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: conversion_funnel_chart_module_default["tooltip-title"],
-			children: step.label
-		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
+			direction: "column",
+			gap: "xs",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
+				direction: "row",
+				justify: "space-between",
+				align: "baseline",
+				gap: "sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: conversion_funnel_chart_module_default["tooltip-title"],
+					children: step.label
+				}), content.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: ids.value,
+					className: conversion_funnel_chart_module_default["tooltip-value"],
+					children: content.value
+				})]
+			}), content.rows?.map((row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
+				direction: "row",
+				justify: "space-between",
+				align: "baseline",
+				gap: "sm",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: ids.rows[index].label,
+					className: conversion_funnel_chart_module_default["tooltip-label"],
+					children: row.label
+				}), /* @__PURE__ */ (0, react_jsx_runtime.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 = (0, react.useMemo)(() => ({
 		mainRate,
@@ -7954,6 +7985,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__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 		direction: "column",
 		gap,
@@ -7982,10 +8033,16 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 				direction: "row",
 				align: "flex-end",
 				gap: "lg",
+				role: "listbox",
+				"aria-label": (0, _wordpress_i18n.__)("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__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 						direction: "column",
 						className: (0, clsx.default)(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"]),
@@ -7993,6 +8050,8 @@ const ConversionFunnelChartInternal = ({ mainRate, changeIndicator, steps, loadi
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
 							direction: "column",
 							gap: "xs",
+							className: conversion_funnel_chart_module_default["step-text"],
+							"aria-hidden": "true",
 							children: [renderStepLabel ? renderStepLabel({
 								step,
 								index,
@@ -8012,11 +8071,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": (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%1$s, %2$s", "jetpack-charts"), step.label, formatPercentage(step.rate)),
+							"aria-selected": isSelected,
+							"aria-describedby": isDescribedByTooltip ? tooltipDescriptionIds : void 0,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: (0, clsx.default)(conversion_funnel_chart_module_default["funnel-bar"], { [conversion_funnel_chart_module_default["funnel-bar--animated"]]: animation && !loading && !prefersReducedMotion }),
 								style: {
@@ -8028,25 +8092,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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
-				top: tooltipTop,
-				left: tooltipLeft,
-				className: standaloneScopeClass,
-				style: tooltipStyle,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					role: "tooltip",
-					children: tooltipContent
-				})
-			});
-		})()]
+		}), tooltipContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
+			top: tooltipTop,
+			left: tooltipLeft,
+			className: standaloneScopeClass,
+			style: tooltipStyle,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: tooltipId,
+				"aria-hidden": "true",
+				children: tooltipContent
+			})
+		})]
 	});
 };
 /**
@@ -8060,8 +8116,7 @@ const ConversionFunnelChartWithProvider = (props) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalChartsProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConversionFunnelChartInternal, { ...props }) });
 };
 ConversionFunnelChartWithProvider.displayName = "ConversionFunnelChart";
-//#endregion
-//#region src/utils/sanitize-html.ts
+// src/utils/sanitize-html.ts
 /**
 * External dependencies
 */
@@ -8109,11 +8164,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);
 /**
@@ -8197,8 +8250,7 @@ function useTooltipPosition(containerRef) {
 		};
 	}, [containerRef]);
 }
-//#endregion
-//#region src/charts/geo-chart/geo-chart.tsx
+// src/charts/geo-chart/geo-chart.tsx
 /**
 * External dependencies
 */
@@ -8418,8 +8470,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";
@@ -8499,8 +8550,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",
@@ -8531,8 +8581,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
@@ -8611,12 +8660,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 = (0, react.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 = (0, react.useContext)(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
@@ -8660,8 +8707,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.
@@ -8767,8 +8813,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.
 *
@@ -8806,8 +8851,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",
@@ -8937,8 +8981,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"],
@@ -9393,8 +9436,7 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ (0, react_jsx_run
 });
 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",
@@ -9543,8 +9585,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,
@@ -9646,8 +9687,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;
@@ -9729,8 +9769,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.
@@ -9765,8 +9804,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.
@@ -9795,8 +9833,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>
 *
@@ -9816,353 +9853,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/index.js
-var require_dist$14 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.lowerCase = exports.localeLowerCase = void 0;
-	/**
-	* Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
-	*/
-	var SUPPORTED_LOCALE = {
-		tr: {
-			regexp: /\u0130|\u0049|\u0049\u0307/g,
-			map: {
-				İ: "i",
-				I: "ı",
-				İ: "i"
-			}
-		},
-		az: {
-			regexp: /\u0130/g,
-			map: {
-				İ: "i",
-				I: "ı",
-				İ: "i"
-			}
-		},
-		lt: {
-			regexp: /\u0049|\u004A|\u012E|\u00CC|\u00CD|\u0128/g,
-			map: {
-				I: "i̇",
-				J: "j̇",
-				Į: "į̇",
-				Ì: "i̇̀",
-				Í: "i̇́",
-				Ĩ: "i̇̃"
-			}
-		}
-	};
-	/**
-	* Localized lower case.
-	*/
-	function localeLowerCase(str, locale) {
-		var lang = SUPPORTED_LOCALE[locale.toLowerCase()];
-		if (lang) return lowerCase(str.replace(lang.regexp, function(m) {
-			return lang.map[m];
-		}));
-		return lowerCase(str);
-	}
-	exports.localeLowerCase = localeLowerCase;
-	/**
-	* Lower case as a function.
-	*/
-	function lowerCase(str) {
-		return str.toLowerCase();
-	}
-	exports.lowerCase = lowerCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/no-case@3.0.4/node_modules/no-case/dist/index.js
-var require_dist$13 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.noCase = void 0;
-	var lower_case_1 = require_dist$14();
-	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 ? lower_case_1.lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
-		var result = replace(replace(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);
-	}
-	exports.noCase = noCase;
-	/**
-	* Replace `re` in the input string with the replacement value.
-	*/
-	function replace(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/pascal-case@3.1.2/node_modules/pascal-case/dist/index.js
-var require_dist$12 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.pascalCase = exports.pascalCaseTransformMerge = exports.pascalCaseTransform = void 0;
-	var tslib_1 = require("tslib");
-	var no_case_1 = require_dist$13();
-	function pascalCaseTransform(input, index) {
-		var firstChar = input.charAt(0);
-		var lowerChars = input.substr(1).toLowerCase();
-		if (index > 0 && firstChar >= "0" && firstChar <= "9") return "_" + firstChar + lowerChars;
-		return "" + firstChar.toUpperCase() + lowerChars;
-	}
-	exports.pascalCaseTransform = pascalCaseTransform;
-	function pascalCaseTransformMerge(input) {
-		return input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();
-	}
-	exports.pascalCaseTransformMerge = pascalCaseTransformMerge;
-	function pascalCase(input, options) {
-		if (options === void 0) options = {};
-		return no_case_1.noCase(input, tslib_1.__assign({
-			delimiter: "",
-			transform: pascalCaseTransform
-		}, options));
-	}
-	exports.pascalCase = pascalCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/camel-case@4.1.2/node_modules/camel-case/dist/index.js
-var require_dist$11 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.camelCase = exports.camelCaseTransformMerge = exports.camelCaseTransform = void 0;
-	var tslib_1 = require("tslib");
-	var pascal_case_1 = require_dist$12();
-	function camelCaseTransform(input, index) {
-		if (index === 0) return input.toLowerCase();
-		return pascal_case_1.pascalCaseTransform(input, index);
-	}
-	exports.camelCaseTransform = camelCaseTransform;
-	function camelCaseTransformMerge(input, index) {
-		if (index === 0) return input.toLowerCase();
-		return pascal_case_1.pascalCaseTransformMerge(input);
-	}
-	exports.camelCaseTransformMerge = camelCaseTransformMerge;
-	function camelCase(input, options) {
-		if (options === void 0) options = {};
-		return pascal_case_1.pascalCase(input, tslib_1.__assign({ transform: camelCaseTransform }, options));
-	}
-	exports.camelCase = camelCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/upper-case-first@2.0.2/node_modules/upper-case-first/dist/index.js
-var require_dist$10 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.upperCaseFirst = void 0;
-	/**
-	* Upper case the first character of an input string.
-	*/
-	function upperCaseFirst(input) {
-		return input.charAt(0).toUpperCase() + input.substr(1);
-	}
-	exports.upperCaseFirst = upperCaseFirst;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/capital-case@1.0.4/node_modules/capital-case/dist/index.js
-var require_dist$9 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.capitalCase = exports.capitalCaseTransform = void 0;
-	var tslib_1 = require("tslib");
-	var no_case_1 = require_dist$13();
-	var upper_case_first_1 = require_dist$10();
-	function capitalCaseTransform(input) {
-		return upper_case_first_1.upperCaseFirst(input.toLowerCase());
-	}
-	exports.capitalCaseTransform = capitalCaseTransform;
-	function capitalCase(input, options) {
-		if (options === void 0) options = {};
-		return no_case_1.noCase(input, tslib_1.__assign({
-			delimiter: " ",
-			transform: capitalCaseTransform
-		}, options));
-	}
-	exports.capitalCase = capitalCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/upper-case@2.0.2/node_modules/upper-case/dist/index.js
-var require_dist$8 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.upperCase = exports.localeUpperCase = void 0;
-	/**
-	* Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt
-	*/
-	var SUPPORTED_LOCALE = {
-		tr: {
-			regexp: /[\u0069]/g,
-			map: { i: "İ" }
-		},
-		az: {
-			regexp: /[\u0069]/g,
-			map: { i: "İ" }
-		},
-		lt: {
-			regexp: /[\u0069\u006A\u012F]\u0307|\u0069\u0307[\u0300\u0301\u0303]/g,
-			map: {
-				i̇: "I",
-				j̇: "J",
-				į̇: "Į",
-				i̇̀: "Ì",
-				i̇́: "Í",
-				i̇̃: "Ĩ"
-			}
-		}
-	};
-	/**
-	* Localized upper case.
-	*/
-	function localeUpperCase(str, locale) {
-		var lang = SUPPORTED_LOCALE[locale.toLowerCase()];
-		if (lang) return upperCase(str.replace(lang.regexp, function(m) {
-			return lang.map[m];
-		}));
-		return upperCase(str);
-	}
-	exports.localeUpperCase = localeUpperCase;
-	/**
-	* Upper case as a function.
-	*/
-	function upperCase(str) {
-		return str.toUpperCase();
-	}
-	exports.upperCase = upperCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/constant-case@3.0.4/node_modules/constant-case/dist/index.js
-var require_dist$7 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.constantCase = void 0;
-	var tslib_1 = require("tslib");
-	var no_case_1 = require_dist$13();
-	var upper_case_1 = require_dist$8();
-	function constantCase(input, options) {
-		if (options === void 0) options = {};
-		return no_case_1.noCase(input, tslib_1.__assign({
-			delimiter: "_",
-			transform: upper_case_1.upperCase
-		}, options));
-	}
-	exports.constantCase = constantCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/dot-case@3.0.4/node_modules/dot-case/dist/index.js
-var require_dist$6 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.dotCase = void 0;
-	var tslib_1 = require("tslib");
-	var no_case_1 = require_dist$13();
-	function dotCase(input, options) {
-		if (options === void 0) options = {};
-		return no_case_1.noCase(input, tslib_1.__assign({ delimiter: "." }, options));
-	}
-	exports.dotCase = dotCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/header-case@2.0.4/node_modules/header-case/dist/index.js
-var require_dist$5 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.headerCase = void 0;
-	var tslib_1 = require("tslib");
-	var capital_case_1 = require_dist$9();
-	function headerCase(input, options) {
-		if (options === void 0) options = {};
-		return capital_case_1.capitalCase(input, tslib_1.__assign({ delimiter: "-" }, options));
-	}
-	exports.headerCase = headerCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/param-case@3.0.4/node_modules/param-case/dist/index.js
-var require_dist$4 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.paramCase = void 0;
-	var tslib_1 = require("tslib");
-	var dot_case_1 = require_dist$6();
-	function paramCase(input, options) {
-		if (options === void 0) options = {};
-		return dot_case_1.dotCase(input, tslib_1.__assign({ delimiter: "-" }, options));
-	}
-	exports.paramCase = paramCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/path-case@3.0.4/node_modules/path-case/dist/index.js
-var require_dist$3 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.pathCase = void 0;
-	var tslib_1 = require("tslib");
-	var dot_case_1 = require_dist$6();
-	function pathCase(input, options) {
-		if (options === void 0) options = {};
-		return dot_case_1.dotCase(input, tslib_1.__assign({ delimiter: "/" }, options));
-	}
-	exports.pathCase = pathCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/sentence-case@3.0.4/node_modules/sentence-case/dist/index.js
-var require_dist$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.sentenceCase = exports.sentenceCaseTransform = void 0;
-	var tslib_1 = require("tslib");
-	var no_case_1 = require_dist$13();
-	var upper_case_first_1 = require_dist$10();
-	function sentenceCaseTransform(input, index) {
-		var result = input.toLowerCase();
-		if (index === 0) return upper_case_first_1.upperCaseFirst(result);
-		return result;
-	}
-	exports.sentenceCaseTransform = sentenceCaseTransform;
-	function sentenceCase(input, options) {
-		if (options === void 0) options = {};
-		return no_case_1.noCase(input, tslib_1.__assign({
-			delimiter: " ",
-			transform: sentenceCaseTransform
-		}, options));
-	}
-	exports.sentenceCase = sentenceCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/snake-case@3.0.4/node_modules/snake-case/dist/index.js
-var require_dist$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.snakeCase = void 0;
-	var tslib_1 = require("tslib");
-	var dot_case_1 = require_dist$6();
-	function snakeCase(input, options) {
-		if (options === void 0) options = {};
-		return dot_case_1.dotCase(input, tslib_1.__assign({ delimiter: "_" }, options));
-	}
-	exports.snakeCase = snakeCase;
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/change-case@4.1.2/node_modules/change-case/dist/index.js
-var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var tslib_1 = require("tslib");
-	tslib_1.__exportStar(require_dist$11(), exports);
-	tslib_1.__exportStar(require_dist$9(), exports);
-	tslib_1.__exportStar(require_dist$7(), exports);
-	tslib_1.__exportStar(require_dist$6(), exports);
-	tslib_1.__exportStar(require_dist$5(), exports);
-	tslib_1.__exportStar(require_dist$13(), exports);
-	tslib_1.__exportStar(require_dist$4(), exports);
-	tslib_1.__exportStar(require_dist$12(), exports);
-	tslib_1.__exportStar(require_dist$3(), exports);
-	tslib_1.__exportStar(require_dist$2(), exports);
-	tslib_1.__exportStar(require_dist$1(), exports);
-}));
-//#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;
 }
@@ -10175,8 +9868,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 = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
@@ -10188,1215 +9926,34 @@ 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;
+// ../../../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 = (0, react.createContext)({});
+ComponentsContext.displayName = "ComponentsContext";
+var useComponentsContext = () => (0, react.useContext)(ComponentsContext);
+function useContextSystemBridge({ value }) {
+	const parentContext = useComponentsContext();
+	const valueRef = (0, react.useRef)(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 (0, react.useMemo)(() => {
+		return (0, deepmerge.default)(parentContext ?? {}, value ?? {}, { isMergeableObject: isPlainObject });
+	}, [parentContext, value]);
 }
-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;
-}
-/**
-* @param {string} value
-* @param {(string|RegExp)} pattern
-* @param {string} replacement
-* @return {string}
-*/
-function replace(value, pattern, replacement) {
-	return value.replace(pattern, replacement);
-}
-/**
-* @param {string} value
-* @param {string} search
-* @return {number}
-*/
-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("", 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(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(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(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(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+weak-memoize@0.4.0/node_modules/@emotion/weak-memoize/dist/emotion-weak-memoize.esm.js
-var weakMemoize = function weakMemoize(func) {
-	var cache = /* @__PURE__ */ new WeakMap();
-	return function(arg) {
-		if (cache.has(arg)) return cache.get(arg);
-		var ret = func(arg);
-		cache.set(arg, ret);
-		return ret;
-	};
-};
-//#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.esm.js
-var isBrowser$2 = typeof document !== "undefined";
-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 prefixer = 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 getServerStylisCache = isBrowser$2 ? void 0 : weakMemoize(function() {
-	return memoize(function() {
-		return {};
+var BaseContextSystemProvider = ({ children, value }) => {
+	const contextValue = useContextSystemBridge({ value });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentsContext.Provider, {
+		value: contextValue,
+		children
 	});
-});
-var defaultStylisPlugins = [prefixer];
-var createCache = function createCache(options) {
-	var key = options.key;
-	if (isBrowser$2 && 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 = [];
-	if (isBrowser$2) {
-		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];
-	if (!getServerStylisCache) {
-		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;
-		};
-	} else {
-		var _finalizingPlugins = [stringify];
-		var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
-		var _stylis = function _stylis(styles) {
-			return serialize(compile(styles), _serializer);
-		};
-		var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
-		var getRules = function getRules(selector, serialized) {
-			var name = serialized.name;
-			if (serverStylisCache[name] === void 0) serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
-			return serverStylisCache[name];
-		};
-		_insert = function _insert(selector, serialized, sheet, shouldCache) {
-			var name = serialized.name;
-			var rules = getRules(selector, serialized);
-			if (cache.compat === void 0) {
-				if (shouldCache) cache.inserted[name] = true;
-				return rules;
-			} else if (shouldCache) cache.inserted[name] = rules;
-			else return rules;
-		};
-	}
-	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.esm.js
-var isBrowser$1 = typeof document !== "undefined";
-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 || isBrowser$1 === false && cache.compat !== void 0) && 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 stylesForSSR = "";
-		var current = serialized;
-		do {
-			var maybeStyles = cache.insert(serialized === current ? "." + className : "", current, cache.sheet, true);
-			if (!isBrowser$1 && maybeStyles !== void 0) stylesForSSR += maybeStyles;
-			current = current.next;
-		} while (current !== void 0);
-		if (!isBrowser$1 && stylesForSSR.length !== 0) return stylesForSSR;
-	}
-};
-//#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-d59e098f.esm.js
-var isBrowser = typeof document !== "undefined";
-var EmotionCacheContext = /* #__PURE__ */ react.createContext(typeof HTMLElement !== "undefined" ? /* #__PURE__ */ createCache({ key: "css" }) : null);
-EmotionCacheContext.Provider;
-var __unsafe_useEmotionCache = function useEmotionCache() {
-	return (0, react.useContext)(EmotionCacheContext);
-};
-if (!isBrowser);
-({}).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 (0, react.useCallback)((...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
+(0, react.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
 /**
 * Memize options object.
 *
@@ -11486,94 +10043,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 = (0, react.createContext)({});
-ComponentsContext.displayName = "ComponentsContext";
-var useComponentsContext = () => (0, react.useContext)(ComponentsContext);
-function useContextSystemBridge({ value }) {
-	const parentContext = useComponentsContext();
-	const valueRef = (0, react.useRef)(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 (0, react.useMemo)(() => {
-		return (0, deepmerge.default)(parentContext ?? {}, value ?? {}, { isMergeableObject: isPlainObject });
-	}, [parentContext, value]);
-}
-var BaseContextSystemProvider = ({ children, value }) => {
-	const contextValue = useContextSystemBridge({ value });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentsContext.Provider, {
-		value: contextValue,
-		children
-	});
-};
-(0, react.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
-var import_dist = require_dist();
+// ../../../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-${(0, import_dist.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 ? (0, react.forwardRef)(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];
@@ -11583,19 +10064,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(),
@@ -11605,7 +10084,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 = (0, clsx.default)(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];
@@ -11613,8 +10092,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)",
@@ -11629,8 +10107,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
@@ -11719,8 +10196,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 	});
 }
 var PolymorphicElement = (0, react.forwardRef)(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__ */ (0, react_jsx_runtime.jsx)(PolymorphicElement, {
 		ref,
@@ -11728,8 +10204,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 	});
 }
 var component_default$2 = Object.assign((0, react.forwardRef)(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__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -11743,8 +10218,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",
@@ -11782,16 +10256,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",
@@ -11830,8 +10303,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;
@@ -11975,8 +10447,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__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -11985,8 +10456,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.
@@ -12069,8 +10539,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
@@ -12118,11 +10587,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",
@@ -12149,8 +10619,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]. */
@@ -12210,27 +10714,43 @@ const BarLabel = ({ label }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react
 	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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isPrimaryVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+		share: entry.currentShare,
+		color: primaryColor,
+		animation,
+		divergingScale
+	}), showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Bar, {
+		share: entry.previousShare,
+		color: secondaryColor,
+		animation,
+		divergingScale
+	})] });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, clsx.default)(leaderboard_chart_module_default.barWithLabelContainer, { [leaderboard_chart_module_default["is-overlay"]]: withOverlayLabel }),
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarLabel, { label: entry.label }),
-			isPrimaryVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, clsx.default)(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
-				style: {
-					width: getBarWidth(entry.currentShare),
-					backgroundColor: primaryColor
-				}
-			}),
-			showComparisonBar && hasPreviousValue(entry) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, clsx.default)(leaderboard_chart_module_default.bar, { [leaderboard_chart_module_default["bar--animated"]]: animation }),
-				style: {
-					width: getBarWidth(entry.previousShare),
-					backgroundColor: secondaryColor
-				}
-			})
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarLabel, { label: entry.label }), bars]
 	});
 };
 /**
@@ -12244,6 +10764,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
@@ -12261,7 +10782,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);
@@ -12315,6 +10836,30 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		withComparison,
 		withOverlayLabel
 	]);
+	const withComparisonBars = withComparison && !withOverlayLabel;
+	const resolvedData = (0, react.useMemo)(() => resolveLeaderboardEntries(data ?? [], {
+		includePrevious: withComparisonBars,
+		clampNegative: negativeBars === "clamp"
+	}), [
+		data,
+		withComparisonBars,
+		negativeBars
+	]);
+	const divergingScale = (0, react.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 = (0, react.useMemo)(() => ({
 		withComparison,
@@ -12330,6 +10875,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__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
@@ -12394,13 +10941,12 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default, {
 					role: "list",
 					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("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;
@@ -12415,13 +10961,12 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 								withOverlayLabel,
 								primaryColor: resolvedPrimaryColor,
 								secondaryColor: resolvedSecondaryColor,
+								divergingScale,
 								isPrimaryVisible,
 								isComparisonVisible,
 								animation: animation && !loading && !prefersReducedMotion
 							})
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_wordpress_ui.Stack, {
-							direction: "row",
-							gap: "xs",
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: (0, clsx.default)(leaderboard_chart_module_default.valueContainer, { [leaderboard_chart_module_default.overlayLabel]: withOverlayLabel }),
 							children: [
 								isPrimaryVisible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.Text, { children: valueFormatter(entry.currentValue) }),
@@ -12502,8 +11047,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.
 *
@@ -12511,15 +11055,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__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.VisuallyHidden, {
 	role: "status",
 	"aria-atomic": "true",
 	children: data && /* @__PURE__ */ (0, react_jsx_runtime.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();
@@ -12541,8 +11083,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.
 *
@@ -12582,8 +11123,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 = (0, react.useRef)(null);
 	const svgRef = (0, react.useRef)(null);
@@ -12663,8 +11203,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.
 *
@@ -12701,8 +11240,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",
@@ -12713,8 +11251,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.
@@ -12997,8 +11534,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",
@@ -13006,8 +11542,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.
@@ -13250,14 +11785,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;
 /**
@@ -13399,8 +11932,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",
@@ -13409,8 +11941,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",
@@ -13453,7 +11984,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 		})]
 	});
 }
-//#endregion
 exports.AccessibleTooltip = AccessibleTooltip;
 exports.AreaChart = AreaChartResponsive;
 exports.AreaChartUnresponsive = AreaChart;