@automattic/charts 4.1.1 → 4.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { getStringWidth as getStringWidth$1 } from "./visx/text/index.js";
 import { formatNumber, formatNumberCompact } from "@automattic/number-formatters";
-import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
+import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, TooltipContext, XYChart, buildChartTheme, useEventEmitter } from "@visx/xychart";
 import { __, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
@@ -981,7 +981,8 @@ const defaultTheme = {
 	},
 	heatmapChart: {
 		compactCellGap: 2,
-		compactCellSize: 11
+		compactCellSize: 11,
+		groupGap: 24
 	}
 };
 //#endregion
@@ -2181,7 +2182,10 @@ function useChartLegendItems(data, options = {}, legendShape) {
 }
 //#endregion
 //#region src/components/tooltip/base-tooltip.module.scss
-var base_tooltip_module_default = { "tooltip": "a8ccharts--zY0xG-tooltip" };
+var base_tooltip_module_default = {
+	"surface": "a8ccharts--zY0xG-surface",
+	"tooltip": "a8ccharts--zY0xG-tooltip"
+};
 //#endregion
 //#region src/components/tooltip/base-tooltip.tsx
 const DefaultTooltipContent = ({ data }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -2231,7 +2235,8 @@ const findClippingAncestor = (wrapper) => {
 /**
 * Where the box goes, in wrapper coordinates. Automatic placement flips to
 * the side that clips less, then clamps inside `bounds`; below-axis placement
-* is centered on the anchor and clamped horizontally.
+* is centered on the anchor and clamped horizontally; beside placement preserves
+* the anchor's y and only flips horizontally before bounds clamping.
 *
 * The flip measures against the visible part of the wrapper, its intersection
 * with `bounds`. Only the clamp is bound by the page: a box that fits inside the
@@ -2245,7 +2250,7 @@ const findClippingAncestor = (wrapper) => {
 * @param params.offsetTop  - Gap between the anchor and the box, vertically.
 * @param params.box        - Rendered size of the box.
 * @param params.wrapper    - The wrapper's own edges, in wrapper coordinates.
-* @param params.placement  - Fixed below-axis placement or automatic flipping.
+* @param params.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
 * @param params.bounds     - Edges the box must keep inside, in wrapper coordinates.
 * @return The box's top-left corner; fixed placement preserves the axis's subpixel y.
 */
@@ -2269,7 +2274,8 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 	const upY = top - offsetTop - box.height;
 	const downOverflow = downY + box.height - fit.bottom;
 	const upOverflow = fit.top - upY;
-	let y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
+	let y = top;
+	if (placement !== "beside") y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
 	x = clamp(x, bounds.left, bounds.right, box.width);
 	y = clamp(y, bounds.top, bounds.bottom, box.height);
 	return {
@@ -2285,8 +2291,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 * alone would let the box spill into an `overflow: hidden` card and be cut off.
 *
 * Re-measures on every render, so a box whose content changes width between
-* two hovers is placed for its current size. See `getBoundedPosition` for the
-* below-axis exception.
+* two hovers is placed for its current size.
 *
 * @param props            - visx `Tooltip` props.
 * @param props.left       - Anchor x, in wrapper coordinates.
@@ -2296,7 +2301,7 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bo
 * @param props.style      - Box styles; visx's defaults unless `unstyled`.
 * @param props.unstyled   - Skip `style` and leave the box bare.
 * @param props.children   - Box content.
-* @param props.placement  - Fixed below-axis placement or automatic flipping.
+* @param props.placement  - Below-axis, beside without vertical flipping, or automatic flipping.
 * @return The tooltip box.
 */
 const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style = defaultStyles, unstyled = false, children, placement = "auto", ...rest }) => {
@@ -2399,7 +2404,6 @@ const crosshairPaintProps = (props = {}) => {
 };
 const DEFAULT_GLYPH_RADIUS = 4;
 const FALLBACK_COLOR = "#222";
-const DEFAULT_TOOLTIP_Z_INDEX = 3;
 const PORTAL_OPTIONS = /* @__PURE__ */ new Set([
 	"scroll",
 	"debounce",
@@ -2427,7 +2431,7 @@ const defaultRenderGlyph$1 = ({ key, ...props }) => /* @__PURE__ */ jsx(DefaultG
 	seriesKey: key,
 	...props
 }, key);
-const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, renderGlyph = defaultRenderGlyph$1, glyphStyle, snapTooltipToDatumX = false, snapTooltipToDatumY = false, showVerticalCrosshair = false, showHorizontalCrosshair = false, showDatumGlyph = false, showSeriesGlyphs = false, verticalCrosshairStyle, horizontalCrosshairStyle, detectBounds = true, tooltipPlacement = "auto", zIndex = DEFAULT_TOOLTIP_Z_INDEX, style, ...rest }) => {
+const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, renderGlyph = defaultRenderGlyph$1, glyphStyle, snapTooltipToDatumX = false, snapTooltipToDatumY = false, showVerticalCrosshair = false, showHorizontalCrosshair = false, showDatumGlyph = false, showSeriesGlyphs = false, verticalCrosshairStyle, horizontalCrosshairStyle, detectBounds = true, tooltipPlacement = "auto", tooltipAnchorTop, zIndex = 3, style, ...rest }) => {
 	const tooltipProps = Object.fromEntries(Object.entries(rest).filter(([key]) => !PORTAL_OPTIONS.has(key)));
 	const { colorScale, theme, innerHeight = 0, innerWidth = 0, margin, xScale, yScale, dataRegistry } = useContext(DataContext) || {};
 	const tooltipContent = renderTooltip ? renderTooltip({
@@ -2482,7 +2486,7 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 	const crosshairStroke = theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? FALLBACK_COLOR;
 	const marginTop = margin?.top ?? 0;
 	const marginLeft = margin?.left ?? 0;
-	const TooltipComponent = detectBounds || tooltipPlacement === "below-axis" ? BoundedTooltip : Tooltip;
+	const TooltipComponent = detectBounds || tooltipPlacement !== "auto" ? BoundedTooltip : Tooltip;
 	const boxStyle = {
 		...defaultStyles,
 		zIndex,
@@ -2519,11 +2523,11 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 		]
 	}), container && createPortal(/* @__PURE__ */ jsx(TooltipComponent, {
 		left: tooltipLeft,
-		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipTop,
+		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipAnchorTop ?? tooltipTop,
 		style: boxStyle,
 		applyPositionStyle: true,
 		...tooltipProps,
-		...tooltipPlacement === "below-axis" && { placement: tooltipPlacement },
+		...tooltipPlacement !== "auto" && { placement: tooltipPlacement },
 		children: tooltipContent
 	}), container)] });
 };
@@ -2589,11 +2593,32 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		return flattened;
 	}, [series, mode]);
 	const hasKeyboardSelection = useRef(false);
+	const closeTooltipNow = useCallback(() => {
+		tooltipContext?.updateTooltip({
+			tooltipOpen: false,
+			tooltipLeft: void 0,
+			tooltipTop: void 0,
+			tooltipData: void 0
+		});
+	}, []);
+	const chartId = useContext(ChartInstanceContext)?.chartId;
+	const { getHiddenSeries } = useGlobalChartsContext();
+	const hiddenSeriesKey = chartId ? JSON.stringify([...getHiddenSeries(chartId)].sort()) : void 0;
+	const lastHiddenSeriesKey = useRef(hiddenSeriesKey);
+	useEffect(() => {
+		const changed = lastHiddenSeriesKey.current !== hiddenSeriesKey;
+		lastHiddenSeriesKey.current = hiddenSeriesKey;
+		if (changed && selectedIndex === void 0) closeTooltipNow();
+	}, [
+		hiddenSeriesKey,
+		selectedIndex,
+		closeTooltipNow
+	]);
 	useEffect(() => {
 		if (selectedIndex === void 0) {
 			if (hasKeyboardSelection.current) {
 				hasKeyboardSelection.current = false;
-				tooltipContext?.hideTooltip();
+				closeTooltipNow();
 			}
 			return;
 		}
@@ -2662,14 +2687,43 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip: focusableRenderTooltip
 	});
 };
-const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate, preventTooltipScroll = false }) => {
+const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate, preventTooltipScroll = false, visibleSeriesKey }) => {
+	const getChartRoot = useCallback(() => chartRef.current?.closest("[role=\"grid\"]") ?? chartRef.current, [chartRef]);
+	const focusWithoutScrollIfNeeded = useCallback((element) => {
+		if (preventTooltipScroll) element?.focus({ preventScroll: true });
+		else element?.focus();
+	}, [preventTooltipScroll]);
+	const tooltipRef = useCallback((element) => {
+		if (element && selectedIndex !== void 0) focusWithoutScrollIfNeeded(element);
+	}, [focusWithoutScrollIfNeeded, selectedIndex]);
+	const previousTotalPoints = useRef(totalPoints);
+	const previousVisibleSeriesKey = useRef(visibleSeriesKey);
+	useEffect(() => {
+		const countChanged = previousTotalPoints.current !== totalPoints;
+		const seriesChanged = previousVisibleSeriesKey.current !== visibleSeriesKey;
+		previousTotalPoints.current = totalPoints;
+		previousVisibleSeriesKey.current = visibleSeriesKey;
+		if (!countChanged && !seriesChanged || selectedIndex === void 0) return;
+		const { activeElement } = document;
+		const focusIsInChart = activeElement !== null && !!getChartRoot()?.contains(activeElement);
+		if (totalPoints === 0 || !focusIsInChart || !countChanged) {
+			setSelectedIndex(void 0);
+			setIsNavigating(false);
+			if (focusIsInChart) focusWithoutScrollIfNeeded(getChartRoot());
+			return;
+		}
+		setSelectedIndex(Math.min(selectedIndex, totalPoints - 1));
+	}, [
+		selectedIndex,
+		totalPoints,
+		visibleSeriesKey,
+		setSelectedIndex,
+		setIsNavigating,
+		getChartRoot,
+		focusWithoutScrollIfNeeded
+	]);
 	return {
-		tooltipRef: useCallback((element) => {
-			if (element && selectedIndex !== void 0) {
-				if (preventTooltipScroll) element.focus({ preventScroll: true });
-				else element.focus();
-			}
-		}, [preventTooltipScroll, selectedIndex]),
+		tooltipRef,
 		onChartFocus: useCallback((event) => {
 			if (event.currentTarget.contains(event.relatedTarget)) return;
 			if (!isNavigating && selectedIndex !== void 0) setSelectedIndex(0);
@@ -2682,44 +2736,35 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 			setIsNavigating(false);
 		}, [setIsNavigating]),
 		onChartKeyDown: useCallback((event) => {
-			if (totalPoints === 0) return;
-			const focusChart = () => {
-				if (preventTooltipScroll) chartRef.current?.focus({ preventScroll: true });
-				else chartRef.current?.focus();
-			};
-			if (event.key === "Tab") {
-				focusChart();
+			if (event.key === "Tab" || event.key === "Escape") {
+				if (event.key === "Escape" && selectedIndex !== void 0) event.preventDefault();
+				focusWithoutScrollIfNeeded(getChartRoot());
 				setSelectedIndex(void 0);
 				setIsNavigating(false);
 				return;
 			}
+			if (totalPoints === 0) return;
 			const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
-			if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
-				focusChart();
-				setSelectedIndex(void 0);
-				setIsNavigating(false);
-				return;
-			}
-			event.preventDefault();
-			if (["ArrowRight"].includes(event.key)) {
+			if (event.key === "ArrowRight") {
+				event.preventDefault();
 				setIsNavigating(true);
-				setSelectedIndex((currentSelectedIndex + 1) % totalPoints);
-			} else if (["ArrowLeft"].includes(event.key)) {
+				setSelectedIndex(Math.min(currentSelectedIndex + 1, totalPoints - 1));
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
 				setIsNavigating(true);
-				setSelectedIndex((currentSelectedIndex - 1 + totalPoints) % totalPoints);
-			} else if (event.key === "Escape") {
-				setSelectedIndex(void 0);
-				setIsNavigating(false);
-				focusChart();
-			} else if ((event.key === "Enter" || event.key === " ") && selectedIndex !== void 0) onActivate?.(selectedIndex);
+				setSelectedIndex(Math.max(currentSelectedIndex - 1, 0));
+			} else if ((event.key === "Enter" || event.key === " ") && selectedIndex !== void 0) {
+				event.preventDefault();
+				onActivate?.(selectedIndex);
+			}
 		}, [
 			totalPoints,
 			selectedIndex,
 			setSelectedIndex,
 			setIsNavigating,
-			chartRef,
-			onActivate,
-			preventTooltipScroll
+			getChartRoot,
+			focusWithoutScrollIfNeeded,
+			onActivate
 		])
 	};
 };
@@ -5276,6 +5321,20 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 	]);
 }
 //#endregion
+//#region src/charts/bar-chart/private/band-scale.ts
+/**
+* Match the inner slot scale used by visx BarGroup.
+* @param keys      - Visible primary series keys.
+* @param bandwidth - Category band width.
+* @param padding   - Padding between slots.
+* @return The grouped bar scale.
+*/
+const createGroupScale = (keys, bandwidth, padding) => scaleBand({
+	domain: keys,
+	range: [0, bandwidth],
+	padding
+});
+//#endregion
 //#region src/charts/bar-chart/private/comparison-bars-geometry.ts
 /**
 * Output position of a value scale's baseline: zero if in-domain, else the
@@ -5348,11 +5407,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 	const valueScale = horizontal ? xScale : yScale;
 	const bandwidth = bandScale.bandwidth ? bandScale.bandwidth() : 0;
 	if (!bandwidth) return null;
-	const groupScale = scaleBand({
-		domain: primaryKeys,
-		range: [0, bandwidth],
-		padding: groupPadding
-	});
+	const groupScale = createGroupScale(primaryKeys, bandwidth, groupPadding);
 	const slotThickness = groupScale.bandwidth();
 	const baseline = getValueScaleBaseline(valueScale);
 	const bandAccessor = horizontal ? yAccessor : xAccessor;
@@ -5404,6 +5459,163 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 	});
 };
 //#endregion
+//#region src/charts/bar-chart/private/band-highlight.tsx
+/**
+* Render and report the active band using the chart’s registered scales.
+* @param root0            - Highlight options.
+* @param root0.visible    - Whether to paint the band.
+* @param root0.horizontal - Whether categories run vertically.
+* @param root0.onChange   - Receives selected band geometry.
+* @return The optional band highlight.
+*/
+function BandHighlight({ visible, horizontal, onChange }) {
+	const { xScale, yScale, dataRegistry, margin, innerWidth, innerHeight } = useContext(DataContext);
+	const { tooltipOpen, tooltipData } = useContext(TooltipContext);
+	const nearest = tooltipData?.nearestDatum;
+	const selection = useMemo(() => {
+		if (!tooltipOpen || !nearest) return null;
+		const scale = horizontal ? yScale : xScale;
+		const entry = dataRegistry?.get(nearest.key);
+		const accessor = horizontal ? entry?.yAccessor : entry?.xAccessor;
+		if (!scale?.bandwidth || !accessor) return null;
+		const position = scale(accessor(nearest.datum));
+		if (position === void 0 || !Number.isFinite(position)) return null;
+		return {
+			datum: nearest.datum,
+			x: horizontal ? margin?.left ?? 0 : position,
+			y: horizontal ? position : margin?.top ?? 0,
+			width: horizontal ? innerWidth : scale.bandwidth(),
+			height: horizontal ? scale.bandwidth() : innerHeight
+		};
+	}, [
+		tooltipOpen,
+		nearest,
+		horizontal,
+		xScale,
+		yScale,
+		dataRegistry,
+		margin,
+		innerWidth,
+		innerHeight
+	]);
+	const stableSelection = useDeepMemo(selection);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	useEffect(() => {
+		onChangeRef.current?.(stableSelection);
+	}, [stableSelection]);
+	useEffect(() => () => onChangeRef.current?.(null), []);
+	if (!visible || !selection) return null;
+	const { x, y, width, height } = selection;
+	return /* @__PURE__ */ jsx("rect", {
+		x,
+		y,
+		width,
+		height,
+		pointerEvents: "none",
+		fill: CATALOG_POINTERS.surfaceSecondary
+	});
+}
+//#endregion
+//#region 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.
+* @param accessor - Category accessor.
+* @param scale    - Rendered category band scale.
+* @param position - Pointer coordinate on the category axis.
+* @return Index of the nearest category, or -1 when none is registered.
+*/
+function nearestBandIndex(data, accessor, scale, position) {
+	let nearest = -1;
+	let distance = Infinity;
+	data.forEach((datum, index) => {
+		const start = scale(accessor(datum));
+		if (start === void 0) return;
+		const candidate = Math.abs(start + scale.bandwidth() / 2 - position);
+		if (candidate < distance) {
+			distance = candidate;
+			nearest = index;
+		}
+	});
+	return nearest;
+}
+/**
+* Correct visx's range-based band inversion, which omits outer padding.
+* @param root0               - Registered series selection.
+* @param root0.keys          - Visible series keys.
+* @param root0.groupPadding  - Padding between grouped bars.
+* @param root0.withTooltips  - Whether pointer events update the tooltip.
+* @param root0.onPointerDown - Receives the corrected pointer-down datum.
+* @param root0.onPointerUp   - Receives the corrected pointer-up datum.
+* @return No visual content.
+*/
+function BandTooltip({ keys, groupPadding, withTooltips, onPointerDown, onPointerUp }) {
+	const { xScale, yScale, dataRegistry, horizontal } = useContext(DataContext);
+	const { showTooltip } = useContext(TooltipContext);
+	const scale = horizontal ? yScale : xScale;
+	const bandwidth = scale?.bandwidth?.() ?? 0;
+	const groupScale = useMemo(() => createGroupScale(keys, bandwidth, groupPadding), [
+		keys,
+		bandwidth,
+		groupPadding
+	]);
+	const getSelections = useCallback((params) => {
+		const point = params?.svgPoint;
+		if (!point || !scale?.bandwidth) return [];
+		const selections = [];
+		for (const key of keys) {
+			const entry = dataRegistry?.get(key);
+			if (!entry) continue;
+			const accessor = horizontal ? entry.yAccessor : entry.xAccessor;
+			const index = nearestBandIndex(entry.data, accessor, scale, horizontal ? point.y : point.x);
+			if (index < 0) continue;
+			const datum = entry.data[index];
+			const start = Number(scale(accessor(datum))) + Number(groupScale(key));
+			const end = start + groupScale.step();
+			const position = horizontal ? point.y : point.x;
+			const distance = position >= start && position <= end ? 0 : Math.abs(position - (start + end) / 2);
+			selections.push({
+				event: params.event,
+				key,
+				datum,
+				index,
+				svgPoint: point,
+				distanceX: horizontal ? 0 : distance,
+				distanceY: horizontal ? distance : 0
+			});
+		}
+		return selections;
+	}, [
+		scale,
+		dataRegistry,
+		horizontal,
+		keys,
+		groupScale
+	]);
+	const handlePointer = useCallback((params) => {
+		const selections = getSelections(params);
+		if (withTooltips && params?.event.type !== "pointerup") selections.forEach(showTooltip);
+		const callback = params?.event.type === "pointerdown" ? onPointerDown : onPointerUp;
+		if (params?.event.type === "pointermove" || !callback) return;
+		const nearest = selections.reduce((best, selection) => {
+			const distance = (value) => Math.hypot(value.distanceX, value.distanceY);
+			return !best || distance(selection) <= distance(best) ? selection : best;
+		}, void 0);
+		if (nearest) callback(nearest);
+	}, [
+		getSelections,
+		withTooltips,
+		showTooltip,
+		onPointerDown,
+		onPointerUp
+	]);
+	useEventEmitter("pointermove", withTooltips ? handlePointer : void 0);
+	useEventEmitter("pointerdown", handlePointer);
+	useEventEmitter("pointerup", onPointerUp ? handlePointer : void 0);
+	return null;
+}
+//#endregion
 //#region src/charts/bar-chart/bar-chart.tsx
 const validateData$2 = (data) => {
 	if (!data?.length) return "No data available";
@@ -5415,7 +5627,7 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ jsx("div", {
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: sprintf(__("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const horizontal = orientation === "horizontal";
@@ -5441,8 +5653,6 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [height]);
 	const [selectedIndex, setSelectedIndex] = useState(void 0);
 	const [isNavigating, setIsNavigating] = useState(false);
-	const primarySeriesForNav = dataWithVisibleZeros.filter((s) => s.options?.type !== "comparison");
-	const totalPoints = Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length;
 	const seriesWithVisibility = useMemo(() => dataWithVisibleZeros.map((series, index) => ({
 		series,
 		index,
@@ -5452,6 +5662,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
 	const primaryEntries = useMemo(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
+	const totalPoints = Math.max(0, ...primaryEntries.map((e) => e.series.data.length)) * primaryEntries.length;
 	const primaryKeys = useMemo(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
 	const primarySeries = useMemo(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
 	const activateSelectedBar = useCallback((index) => {
@@ -5466,6 +5677,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			key: series.label
 		});
 	}, [primaryEntries, onDatumActivate]);
+	const visibleSeriesKey = useMemo(() => JSON.stringify(primaryKeys), [primaryKeys]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -5473,7 +5685,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		setIsNavigating,
 		chartRef,
 		totalPoints,
-		onActivate: activateSelectedBar
+		onActivate: activateSelectedBar,
+		visibleSeriesKey
 	});
 	const comparisonEntries = useMemo(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
@@ -5536,7 +5749,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartOptions.yScale,
 		horizontal
 	]);
-	const getBarBackground = useCallback((index) => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({
+	const getBarBackground = useCallback((index) => (datum) => withPatterns ? `url(#${getPatternId(chartId, index)})` : datum.color ?? getElementStyles({
 		data: dataSorted[index],
 		index
 	}).color, [
@@ -5706,13 +5919,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ jsx("div", {
 					role: "grid",
+					ref: chartRef,
 					"aria-label": __("Bar chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsx("div", {
-						ref: chartRef,
 						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ jsxs(XYChart, {
 							theme,
@@ -5725,15 +5938,24 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 							xScale,
 							yScale,
 							horizontal,
-							onPointerDown,
-							onPointerUp,
 							pointerEventsDataKey: "nearest",
 							children: [
-								!allSeriesHidden && /* @__PURE__ */ jsx(Grid, {
+								withTooltips && (withBandHighlight || onBandHighlightChange) && /* @__PURE__ */ jsx(BandHighlight, {
+									visible: withBandHighlight,
+									horizontal,
+									onChange: onBandHighlightChange
+								}),
+								!allSeriesHidden && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Grid, {
 									columns: gridVisibility.includes("y"),
+									rows: false,
+									numTicks: 4,
+									tickValues: chartOptions.axis.x.tickValues
+								}), /* @__PURE__ */ jsx(Grid, {
+									columns: false,
 									rows: gridVisibility.includes("x"),
-									numTicks: 4
-								}),
+									numTicks: 4,
+									tickValues: chartOptions.axis.y.tickValues
+								})] }),
 								withPatterns && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("defs", { children: dataSorted.map((seriesData, index) => renderPattern(index, getElementStyles({
 									data: seriesData,
 									index
@@ -5769,8 +5991,17 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 										colorAccessor: getBarBackground(index)
 									}, seriesData?.label))
 								}),
+								(withTooltips || onPointerDown || onPointerUp) && /* @__PURE__ */ jsx(BandTooltip, {
+									keys: primaryKeys,
+									groupPadding,
+									withTooltips,
+									onPointerDown,
+									onPointerUp
+								}),
 								!allSeriesHidden && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }), /* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.y })] }),
 								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
+									tooltipPlacement,
+									tooltipAnchorTop,
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,
@@ -6592,8 +6823,11 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__gap-start": "a8ccharts-O3YMOW-heatmap-chart__gap-start",
 	"heatmap-chart__grid": "a8ccharts-O3YMOW-heatmap-chart__grid",
 	"heatmap-chart__grid--compact": "a8ccharts-O3YMOW-heatmap-chart__grid--compact",
+	"heatmap-chart__grid--flex-gaps": "a8ccharts-O3YMOW-heatmap-chart__grid--flex-gaps",
 	"heatmap-chart__grid--height-capped": "a8ccharts-O3YMOW-heatmap-chart__grid--height-capped",
+	"heatmap-chart__group-label": "a8ccharts-O3YMOW-heatmap-chart__group-label",
 	"heatmap-chart__legend-label": "a8ccharts-O3YMOW-heatmap-chart__legend-label",
+	"heatmap-chart__legend-scale--bar": "a8ccharts-O3YMOW-heatmap-chart__legend-scale--bar",
 	"heatmap-chart__legend-swatch": "a8ccharts-O3YMOW-heatmap-chart__legend-swatch",
 	"heatmap-chart__row": "a8ccharts-O3YMOW-heatmap-chart__row",
 	"heatmap-chart__row-label": "a8ccharts-O3YMOW-heatmap-chart__row-label",
@@ -6643,7 +6877,7 @@ const getNormalizedValue = (value, extent) => {
 const HeatmapContext = createContext(null);
 //#endregion
 //#region src/charts/heatmap-chart/private/heatmap-legend.tsx
-const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
+const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }) => {
 	const context = useContext(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
@@ -6662,11 +6896,12 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 			}),
 			/* @__PURE__ */ jsx(Stack, {
 				direction: "row",
-				gap: "xs",
+				gap: variant === "bar" ? void 0 : "xs",
+				"aria-hidden": "true",
+				className: variant === "bar" ? heatmap_chart_module_default["heatmap-chart__legend-scale--bar"] : void 0,
 				children: Array.from({ length: steps }, (_, index) => {
 					const intensity = steps <= 1 ? 1 : index / (steps - 1);
 					return /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
 							"--a8c-charts-color-heatmap-primary": primaryColorHex,
@@ -6685,16 +6920,219 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 	});
 };
 //#endregion
+//#region 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.
+*
+* @param groups      - Groups as passed to the chart.
+* @param columnCount - Number of data columns.
+* @param firstLine   - Grid column line of the first data column.
+* @return Grid column lines for every column and group; no groups when the input was unusable.
+*/
+const resolveColumnGroups = (groups, columnCount, firstLine) => {
+	const ungrouped = () => ({
+		columns: Array.from({ length: columnCount }, (_, index) => ({
+			line: firstLine + index,
+			gapBefore: false
+		})),
+		groups: []
+	});
+	if (!groups || groups.length === 0 || columnCount === 0) return ungrouped();
+	const spans = groups.map((group) => group.span);
+	const total = spans.reduce((sum, span) => sum + span, 0);
+	if (!spans.every(isSpan) || total > columnCount) {
+		warnOnce(`heatmap:columnGroups:${JSON.stringify(spans)}:${columnCount}`, `columnGroups spans ${JSON.stringify(spans)} must be positive integers that fit the ${columnCount} columns, so no groups are drawn.`);
+		return ungrouped();
+	}
+	const columns = [];
+	const laidOut = [];
+	let line = firstLine;
+	groups.forEach((group, groupIndex) => {
+		if (groupIndex > 0) line += 1;
+		laidOut.push({
+			...group,
+			line
+		});
+		for (let offset = 0; offset < group.span; offset++) {
+			columns.push({
+				line,
+				gapBefore: groupIndex > 0 && offset === 0,
+				group: groupIndex
+			});
+			line += 1;
+		}
+	});
+	while (columns.length < columnCount) {
+		columns.push({
+			line,
+			gapBefore: false
+		});
+		line += 1;
+	}
+	return {
+		columns,
+		groups: laidOut
+	};
+};
+//#endregion
+//#region src/charts/heatmap-chart/private/keyboard-navigation.ts
+const ARROW_KEYS = [
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown"
+];
+const PAGE_KEYS = ["PageUp", "PageDown"];
+const isNavigationKey = (key, mode) => ARROW_KEYS.includes(key) || mode === "calendar" && PAGE_KEYS.includes(key);
+const inGrid = (grid, { column, row }) => column >= 0 && column < grid.columns && row >= 0 && row < grid.rows;
+const firstSelectable = (grid, cells) => cells.find((cell) => inGrid(grid, cell) && !grid.isInert(cell.column, cell.row));
+/**
+* Column-major scan for the first selectable cell.
+*
+* @param grid - The grid.
+* @return The cell, or undefined when every slot is inert.
+*/
+const firstGridCell = (grid) => {
+	for (let column = 0; column < grid.columns; column++) for (let row = 0; row < grid.rows; row++) if (!grid.isInert(column, row)) return {
+		column,
+		row
+	};
+};
+/**
+* Steps across the grid in the key's direction, past inert slots, staying put at the edge.
+*
+* @param grid - The grid.
+* @param from - The selected cell.
+* @param key  - The arrow key.
+* @return The next cell, or undefined to keep the selection.
+*/
+const stepGridCell = (grid, from, key) => {
+	const step = {
+		ArrowRight: [1, 0],
+		ArrowLeft: [-1, 0],
+		ArrowDown: [0, 1],
+		ArrowUp: [0, -1]
+	}[key];
+	if (!step) return;
+	const [stepColumn, stepRow] = step;
+	let cell = from;
+	do
+		cell = {
+			column: cell.column + stepColumn,
+			row: cell.row + stepRow
+		};
+	while (inGrid(grid, cell) && grid.isInert(cell.column, cell.row));
+	return inGrid(grid, cell) ? cell : void 0;
+};
+/**
+* Every slot of the blocks in reading order: block by block, each a row at a time.
+*
+* @param grid   - The grid.
+* @param blocks - The blocks, left to right.
+* @return The slots in order.
+*/
+const readingOrder = (grid, blocks) => blocks.flatMap((block) => Array.from({ length: grid.rows }, (_row, row) => Array.from({ length: block.end - block.start }, (_offset, offset) => ({
+	column: block.start + offset,
+	row
+}))).flat());
+const blockOf = (blocks, column) => blocks.findIndex((block) => column >= block.start && column < block.end);
+/**
+* The slots after a cell down its column (or before it, going up), continuing at the
+* same column offset of each following block.
+*
+* @param grid      - The grid.
+* @param blocks    - The blocks, left to right.
+* @param from      - The selected cell.
+* @param direction - 1 downwards, -1 upwards.
+* @return The slots in order.
+*/
+const columnOrderFrom = (grid, blocks, from, direction) => {
+	const blockIndex = blockOf(blocks, from.column);
+	if (blockIndex < 0) return [];
+	const offset = from.column - blocks[blockIndex].start;
+	const cells = [];
+	const pushRows = (column, startRow) => {
+		for (let row = startRow; row >= 0 && row < grid.rows; row += direction) cells.push({
+			column,
+			row
+		});
+	};
+	pushRows(from.column, from.row + direction);
+	for (let index = blockIndex + direction; index >= 0 && index < blocks.length; index += direction) {
+		const column = blocks[index].start + offset;
+		if (column < blocks[index].end) pushRows(column, direction === 1 ? 0 : grid.rows - 1);
+	}
+	return cells;
+};
+/**
+* The first selectable cell in calendar reading order.
+*
+* @param grid   - The grid.
+* @param blocks - The blocks, left to right.
+* @return The cell, or undefined when every slot is inert.
+*/
+const firstCalendarCell = (grid, blocks) => firstSelectable(grid, readingOrder(grid, blocks));
+/**
+* Steps through the blocks as pages of a calendar: Left/Right by one slot in reading
+* order, Up/Down by one row (into the neighboring block past the edge), Page Up/Down
+* to the same slot of the neighboring block or its nearest selectable cell.
+*
+* @param grid   - The grid.
+* @param blocks - The blocks, left to right.
+* @param from   - The selected cell.
+* @param key    - The navigation key.
+* @return The next cell, or undefined to keep the selection.
+*/
+const stepCalendarCell = (grid, blocks, from, key) => {
+	if (key === "ArrowRight" || key === "ArrowLeft") {
+		const order = readingOrder(grid, blocks);
+		const index = order.findIndex((cell) => cell.column === from.column && cell.row === from.row);
+		if (index < 0) return;
+		const ahead = key === "ArrowRight" ? order.slice(index + 1) : order.slice(0, index).reverse();
+		return firstSelectable(grid, ahead);
+	}
+	if (key === "ArrowDown" || key === "ArrowUp") return firstSelectable(grid, columnOrderFrom(grid, blocks, from, key === "ArrowDown" ? 1 : -1));
+	const blockIndex = blockOf(blocks, from.column);
+	const target = blocks[blockIndex + (key === "PageDown" ? 1 : -1)];
+	if (blockIndex < 0 || !target) return;
+	const same = {
+		column: target.start + (from.column - blocks[blockIndex].start),
+		row: from.row
+	};
+	const page = readingOrder(grid, [target]);
+	const at = page.findIndex((cell) => cell.row > same.row || cell.row === same.row && cell.column >= same.column);
+	const after = at === -1 ? [] : page.slice(at);
+	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
 const CELL_MIX_FLOOR = .15;
 const NO_ROW_LABELS = [];
-const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, primaryColor, gap = "md", withTooltips = false, renderTooltip, children }) => {
+const TOOLTIP_BOX_STYLES = {
+	light: {
+		...defaultStyles,
+		zIndex: 3
+	},
+	dark: { zIndex: 3 }
+};
+const cellName = (info) => info.cellLabel || [
+	info.groupLabel,
+	info.columnLabel,
+	info.rowLabel
+].filter(Boolean).join(" ");
+const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = NO_ROW_LABELS, columnGroups, keyboardNavigation = "grid", ariaLabel, primaryColor, gap = "md", withTooltips = false, renderTooltip, tooltipVariant = "light", tooltipStyle, children }) => {
 	const chartId = useChartId(providedChartId);
+	const tooltipBoxStyle = tooltipStyle ? {
+		...TOOLTIP_BOX_STYLES[tooltipVariant],
+		...tooltipStyle
+	} : TOOLTIP_BOX_STYLES[tooltipVariant];
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
 	const { nonLegendChildren } = useChartChildren(children, "HeatmapChart");
-	const [selectedIndex, setSelectedIndex] = useState();
+	const [selected, setSelected] = useState();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = useTooltip();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = useRef(null);
@@ -6713,69 +7151,75 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	}), [extent, primaryColorHex]);
 	const columns = data.length;
 	const rows = Math.max(0, ...data.map((column) => column.data.length));
-	const { compactCellGap, compactCellSize } = heatmapChartSettings;
+	const groupLayout = useMemo(() => resolveColumnGroups(columnGroups, columns, 2), [columnGroups, columns]);
+	const { compactCellGap, compactCellSize, groupGap } = heatmapChartSettings;
 	const drawValues = showValues ?? !compact;
 	const buildTooltipData = useCallback((columnIndex, rowIndex) => {
 		const cell = data[columnIndex]?.data[rowIndex];
+		const group = groupLayout.columns[columnIndex]?.group;
 		return {
 			value: cell?.value ?? null,
 			rowLabel: rowLabels[rowIndex],
 			columnLabel: data[columnIndex]?.label,
+			groupLabel: group === void 0 ? void 0 : groupLayout.groups[group]?.label,
 			cellLabel: cell?.label,
 			row: rowIndex,
 			column: columnIndex
 		};
-	}, [data, rowLabels]);
+	}, [
+		data,
+		rowLabels,
+		groupLayout
+	]);
 	const onChartBlur = useCallback(() => {
-		setSelectedIndex(void 0);
+		setSelected(void 0);
 		hideTooltip();
 	}, [hideTooltip]);
 	const isCellInert = useCallback((col, row) => {
 		const cell = data[col]?.data[row];
 		return cell?.hidden === true || cell?.placeholder === true;
 	}, [data]);
+	const blocks = useMemo(() => {
+		const grouped = groupLayout.groups.map((group, index) => {
+			const start = groupLayout.columns.findIndex((column) => column.group === index);
+			return {
+				start,
+				end: start + group.span
+			};
+		});
+		const groupedEnd = grouped.length ? grouped[grouped.length - 1].end : 0;
+		return groupedEnd < columns ? [...grouped, {
+			start: groupedEnd,
+			end: columns
+		}] : grouped;
+	}, [groupLayout, columns]);
 	const onChartKeyDown = useCallback((event) => {
-		if (![
-			"ArrowLeft",
-			"ArrowRight",
-			"ArrowUp",
-			"ArrowDown",
-			"Escape",
-			"Tab"
-		].includes(event.key)) return;
 		if (event.key === "Tab" || event.key === "Escape") {
-			setSelectedIndex(void 0);
+			setSelected(void 0);
 			hideTooltip();
 			return;
 		}
+		if (!isNavigationKey(event.key, keyboardNavigation)) return;
 		event.preventDefault();
-		if (selectedIndex === void 0) {
-			for (let index = 0; index < columns * rows; index++) if (!isCellInert(Math.floor(index / rows), index % rows)) {
-				setSelectedIndex(index);
-				return;
-			}
+		const grid = {
+			columns,
+			rows,
+			isInert: isCellInert
+		};
+		if (selected === void 0) {
+			setSelected(keyboardNavigation === "calendar" ? firstCalendarCell(grid, blocks) : firstGridCell(grid));
 			return;
 		}
-		let stepCol = 0;
-		let stepRow = 0;
-		if (event.key === "ArrowRight") stepCol = 1;
-		else if (event.key === "ArrowLeft") stepCol = -1;
-		else if (event.key === "ArrowDown") stepRow = 1;
-		else if (event.key === "ArrowUp") stepRow = -1;
-		let col = Math.floor(selectedIndex / rows);
-		let row = selectedIndex % rows;
-		do {
-			col += stepCol;
-			row += stepRow;
-		} while (col >= 0 && col < columns && row >= 0 && row < rows && isCellInert(col, row));
-		if (col < 0 || col >= columns || row < 0 || row >= rows) return;
-		setSelectedIndex(col * rows + row);
+		const next = keyboardNavigation === "calendar" ? stepCalendarCell(grid, blocks, selected, event.key) : stepGridCell(grid, selected, event.key);
+		if (next) setSelected(next);
 	}, [
 		rows,
 		columns,
-		selectedIndex,
+		selected,
 		hideTooltip,
-		isCellInert
+		isCellInert,
+		keyboardNavigation,
+		blocks
 	]);
 	const handleCellMouseMove = useCallback((event) => {
 		if (!withTooltips) return;
@@ -6795,35 +7239,47 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		buildTooltipData,
 		getTooltipOrigin
 	]);
+	const getCellElement = useCallback((col, row) => typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null, [chartId]);
 	const handleCellMouseLeave = useCallback(() => {
-		if (withTooltips && selectedIndex === void 0) hideTooltip();
+		if (withTooltips && selected === void 0) hideTooltip();
 	}, [
 		withTooltips,
-		selectedIndex,
+		selected,
 		hideTooltip
 	]);
 	useEffect(() => {
-		if (!withTooltips || selectedIndex === void 0) return;
+		if (selected && (selected.column >= columns || selected.row >= rows)) setSelected(void 0);
+	}, [
+		selected,
+		columns,
+		rows
+	]);
+	useEffect(() => {
+		if (selected === void 0) return;
+		getCellElement(selected.column, selected.row)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [selected, getCellElement]);
+	useEffect(() => {
+		if (!withTooltips || selected === void 0) return;
 		const origin = getTooltipOrigin();
 		if (!origin) return;
-		const col = Math.floor(selectedIndex / rows);
-		const row = selectedIndex % rows;
-		const rect = (typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null)?.getBoundingClientRect();
+		const rect = getCellElement(selected.column, selected.row)?.getBoundingClientRect();
 		showTooltip({
 			tooltipLeft: rect ? rect.left + rect.width / 2 - origin.left : 0,
 			tooltipTop: rect ? rect.top + rect.height / 2 - origin.top : 0,
-			tooltipData: buildTooltipData(col, row)
+			tooltipData: buildTooltipData(selected.column, selected.row)
 		});
 	}, [
-		selectedIndex,
+		selected,
 		withTooltips,
-		rows,
-		chartId,
+		getCellElement,
 		buildTooltipData,
 		showTooltip,
 		getTooltipOrigin
 	]);
-	const defaultRenderTooltip = useCallback((info) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ jsx("div", { children: info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value) })] }), []);
+	const defaultRenderTooltip = useCallback((info) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("strong", { children: cellName(info) }), /* @__PURE__ */ jsx("div", { children: info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value) })] }), []);
 	if (!columns || !rows) return /* @__PURE__ */ jsx(Center, {
 		className: clsx("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className),
 		style: {
@@ -6837,10 +7293,16 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	});
 	const columnTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellWidth ?? 0}px, ${maxCellWidth ? `${maxCellWidth}px` : "1fr"})`;
 	const rowTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
+	const hasColumnLabels = data.some((column) => Boolean(column.label));
+	const hasGroups = groupLayout.groups.length > 0;
+	const columnLine = (columnIndex) => groupLayout.columns[columnIndex].line;
+	const firstDataRow = hasColumnLabels ? 2 : 1;
+	const dataTrack = (column) => column.summary ? "minmax(auto, max-content)" : columnTrack;
+	const gapTrack = compact ? `minmax(${groupGap}px, 1fr)` : `${groupGap}px`;
 	const gridStyle = {
 		"--a8c-charts-color-heatmap-primary": primaryColorHex,
-		gridTemplateColumns: `auto ${data.some((column) => column.summary) ? data.map((column) => column.summary ? "minmax(auto, max-content)" : columnTrack).join(" ") : `repeat(${columns}, ${columnTrack})`}`,
-		gridTemplateRows: `auto repeat(${rows}, ${rowTrack})`
+		gridTemplateColumns: `auto ${data.map((column, columnIndex) => groupLayout.columns[columnIndex].gapBefore ? `${gapTrack} ${dataTrack(column)}` : dataTrack(column)).join(" ")}`,
+		gridTemplateRows: `${hasColumnLabels ? "auto " : ""}repeat(${rows}, ${rowTrack})${hasGroups ? " auto" : ""}`
 	};
 	if (compact) {
 		gridStyle["--a8c-charts-dimension-heatmap-cell-gap"] = `${compactCellGap}px`;
@@ -6853,7 +7315,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 			[heatmap_chart_module_default["heatmap-chart__gap-end"]]: columnIndex < columns - 1 && !data[columnIndex + 1]?.summary
 		};
 	};
-	const activeDescendant = selectedIndex !== void 0 ? `${chartId}-cell-${Math.floor(selectedIndex / rows)}-${selectedIndex % rows}` : void 0;
+	const activeDescendant = selected ? `${chartId}-cell-${selected.column}-${selected.row}` : void 0;
 	const heightCapped = !compact && Boolean(maxCellHeight);
 	return /* @__PURE__ */ jsx(HeatmapContext.Provider, {
 		value: heatmapContext,
@@ -6873,7 +7335,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				children: [/* @__PURE__ */ jsxs("div", {
 					ref: containerRef,
 					role: "grid",
-					"aria-label": __("Heatmap chart", "jetpack-charts"),
+					"aria-label": ariaLabel ?? __("Heatmap chart", "jetpack-charts"),
 					"aria-rowcount": rows,
 					"aria-colcount": columns,
 					"aria-activedescendant": activeDescendant,
@@ -6882,76 +7344,115 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 					onKeyDown: onChartKeyDown,
 					className: clsx(heatmap_chart_module_default["heatmap-chart__grid"], {
 						[heatmap_chart_module_default["heatmap-chart__grid--compact"]]: compact,
+						[heatmap_chart_module_default["heatmap-chart__grid--flex-gaps"]]: compact && hasGroups,
 						[heatmap_chart_module_default["heatmap-chart__grid--height-capped"]]: heightCapped
 					}),
 					style: gridStyle,
-					children: [/* @__PURE__ */ jsxs("div", {
-						role: "row",
-						"aria-hidden": "true",
-						className: heatmap_chart_module_default["heatmap-chart__row"],
-						children: [/* @__PURE__ */ jsx("span", {}), data.map((column, columnIndex) => /* @__PURE__ */ jsx("span", {
-							className: clsx(heatmap_chart_module_default["heatmap-chart__col-label"], {
-								[heatmap_chart_module_default["heatmap-chart__col-label--summary"]]: column.summary,
-								...summaryGaps(columnIndex)
-							}),
-							children: column.label
-						}, `col-${columnIndex}`))]
-					}), Array.from({ length: rows }).map((_row, rowIndex) => {
-						const labelVisible = !compact || rowIndex % 2 === 0;
-						return /* @__PURE__ */ jsxs("div", {
+					children: [
+						hasColumnLabels && /* @__PURE__ */ jsxs("div", {
 							role: "row",
-							"aria-rowindex": rowIndex + 1,
+							"aria-hidden": "true",
 							className: heatmap_chart_module_default["heatmap-chart__row"],
-							children: [/* @__PURE__ */ jsx("span", {
-								"aria-hidden": "true",
-								className: heatmap_chart_module_default["heatmap-chart__row-label"],
-								children: labelVisible ? rowLabels[rowIndex] ?? "" : ""
-							}), data.map((column, columnIndex) => {
-								const cell = column.data[rowIndex];
-								if (cell?.hidden) return /* @__PURE__ */ jsx("div", {
-									"aria-hidden": "true",
-									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
-								}, `cell-${columnIndex}-${rowIndex}`);
-								if (cell?.placeholder) return /* @__PURE__ */ jsx("div", {
+							children: [/* @__PURE__ */ jsx("span", { style: {
+								gridColumn: 1,
+								gridRow: 1
+							} }), data.map((column, columnIndex) => /* @__PURE__ */ jsx("span", {
+								style: {
+									gridColumn: columnLine(columnIndex),
+									gridRow: 1
+								},
+								className: clsx(heatmap_chart_module_default["heatmap-chart__col-label"], {
+									[heatmap_chart_module_default["heatmap-chart__col-label--summary"]]: column.summary,
+									...summaryGaps(columnIndex)
+								}),
+								children: column.label
+							}, `col-${columnIndex}`))]
+						}),
+						Array.from({ length: rows }).map((_row, rowIndex) => {
+							const labelVisible = !compact || rowIndex % 2 === 0;
+							const gridRow = firstDataRow + rowIndex;
+							return /* @__PURE__ */ jsxs("div", {
+								role: "row",
+								"aria-rowindex": rowIndex + 1,
+								className: heatmap_chart_module_default["heatmap-chart__row"],
+								children: [/* @__PURE__ */ jsx("span", {
 									"aria-hidden": "true",
-									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--placeholder"])
-								}, `cell-${columnIndex}-${rowIndex}`);
-								const value = cell?.value ?? null;
-								const present = isPresent(value);
-								const filled = present && !column.summary;
-								const normalized = filled ? getNormalizedValue(value, extent) : 0;
-								const flatIndex = columnIndex * rows + rowIndex;
-								const info = buildTooltipData(columnIndex, rowIndex);
-								const accessibleLabel = `${info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim()}: ${info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value)}`;
-								return /* @__PURE__ */ jsx("div", {
-									id: `${chartId}-cell-${columnIndex}-${rowIndex}`,
-									role: "gridcell",
-									tabIndex: -1,
-									"aria-colindex": columnIndex + 1,
-									"aria-label": accessibleLabel,
-									"data-column": columnIndex,
-									"data-row": rowIndex,
-									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], {
-										[heatmap_chart_module_default["heatmap-chart__cell--filled"]]: filled,
-										[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: filled && cellHasLightText(normalized),
-										[heatmap_chart_module_default["heatmap-chart__cell--summary"]]: column.summary,
-										...summaryGaps(columnIndex),
-										[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selectedIndex === flatIndex
-									}),
-									style: filled ? { "--a8c-charts-heatmap-cell-intensity": normalized } : void 0,
-									onMouseMove: handleCellMouseMove,
-									onMouseLeave: handleCellMouseLeave,
-									children: (drawValues || column.summary) && present && /* @__PURE__ */ jsx("span", {
-										className: heatmap_chart_module_default["heatmap-chart__cell-value"],
-										children: formatNumberCompact(value)
-									})
-								}, `cell-${columnIndex}-${rowIndex}`);
-							})]
-						}, `row-${rowIndex}`);
-					})]
+									className: heatmap_chart_module_default["heatmap-chart__row-label"],
+									style: {
+										gridColumn: 1,
+										gridRow
+									},
+									children: labelVisible ? rowLabels[rowIndex] ?? "" : ""
+								}), data.map((column, columnIndex) => {
+									const cell = column.data[rowIndex];
+									const placement = {
+										gridColumn: columnLine(columnIndex),
+										gridRow
+									};
+									if (cell?.hidden) return /* @__PURE__ */ jsx("div", {
+										"aria-hidden": "true",
+										style: placement,
+										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
+									}, `cell-${columnIndex}-${rowIndex}`);
+									if (cell?.placeholder) return /* @__PURE__ */ jsx("div", {
+										"aria-hidden": "true",
+										style: placement,
+										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--placeholder"])
+									}, `cell-${columnIndex}-${rowIndex}`);
+									const value = cell?.value ?? null;
+									const present = isPresent(value);
+									const filled = present && !column.summary;
+									const normalized = filled ? getNormalizedValue(value, extent) : 0;
+									const info = buildTooltipData(columnIndex, rowIndex);
+									const accessibleLabel = `${cellName(info)}: ${info.value === null ? __("No data", "jetpack-charts") : formatNumber(info.value)}`;
+									return /* @__PURE__ */ jsx("div", {
+										id: `${chartId}-cell-${columnIndex}-${rowIndex}`,
+										role: "gridcell",
+										tabIndex: -1,
+										"aria-colindex": columnIndex + 1,
+										"aria-label": accessibleLabel,
+										"data-column": columnIndex,
+										"data-row": rowIndex,
+										className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], {
+											[heatmap_chart_module_default["heatmap-chart__cell--filled"]]: filled,
+											[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: filled && cellHasLightText(normalized),
+											[heatmap_chart_module_default["heatmap-chart__cell--summary"]]: column.summary,
+											...summaryGaps(columnIndex),
+											[heatmap_chart_module_default["heatmap-chart__cell--selected"]]: selected?.column === columnIndex && selected?.row === rowIndex
+										}),
+										style: {
+											...placement,
+											...filled ? { "--a8c-charts-heatmap-cell-intensity": normalized } : {}
+										},
+										onMouseMove: handleCellMouseMove,
+										onMouseLeave: handleCellMouseLeave,
+										children: (drawValues || column.summary) && present && /* @__PURE__ */ jsx("span", {
+											className: heatmap_chart_module_default["heatmap-chart__cell-value"],
+											children: formatNumberCompact(value)
+										})
+									}, `cell-${columnIndex}-${rowIndex}`);
+								})]
+							}, `row-${rowIndex}`);
+						}),
+						hasGroups && /* @__PURE__ */ jsx("div", {
+							role: "row",
+							"aria-hidden": "true",
+							className: heatmap_chart_module_default["heatmap-chart__row"],
+							children: groupLayout.groups.map((group, groupIndex) => /* @__PURE__ */ jsx("span", {
+								className: heatmap_chart_module_default["heatmap-chart__group-label"],
+								style: {
+									gridColumn: `${group.line} / span ${group.span}`,
+									gridRow: firstDataRow + rows
+								},
+								children: group.label
+							}, `group-${groupIndex}`))
+						})
+					]
 				}), withTooltips && tooltipOpen && tooltipData && /* @__PURE__ */ jsx(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
+					className: tooltipVariant === "dark" ? base_tooltip_module_default.surface : void 0,
+					style: tooltipBoxStyle,
 					children: /* @__PURE__ */ jsx("div", {
 						className: standaloneScopeClass,
 						role: "tooltip",
@@ -6987,6 +7488,43 @@ const KEY_OPTIONS = {
 	day: "2-digit"
 };
 const DATE_PREFIX = /^(\d{4})-(\d{2})-(\d{2})/;
+/**
+* Label formatters for UTC proxies, so both calendar layouts name a day alike.
+*
+* `gregory` keeps a locale whose default calendar is not Gregorian (fa-IR) from
+* splitting one grid month across two names.
+*
+* @param locale - BCP 47 locale.
+* @return Weekday, month and full-day formatters.
+*/
+const civilLabelFormatters = (locale) => {
+	const formatting = {
+		locale,
+		timeZone: "UTC"
+	};
+	return {
+		formatWeekday: createDateFormatter({
+			weekday: "short",
+			calendar: "gregory"
+		}, formatting),
+		formatMonth: createDateFormatter({
+			month: "short",
+			calendar: "gregory"
+		}, formatting),
+		formatMonthYear: createDateFormatter({
+			month: "short",
+			year: "numeric",
+			calendar: "gregory"
+		}, formatting),
+		formatDay: createDateFormatter({
+			weekday: "short",
+			month: "short",
+			day: "numeric",
+			year: "numeric",
+			calendar: "gregory"
+		}, formatting)
+	};
+};
 const pad = (value, length) => String(value).padStart(length, "0");
 /**
 * The day a UTC proxy stands for.
@@ -7152,18 +7690,7 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 	const gridMaxDayKey = widenTo(options.gridSpan?.end, maxDayKey, "later");
 	const requestedMinDate = civilDate(requestedMinDayKey);
 	const gridMaxDate = civilDate(gridMaxDayKey);
-	const labelFormatting = {
-		locale,
-		timeZone: "UTC"
-	};
-	const formatWeekday = createDateFormatter({ weekday: "short" }, labelFormatting);
-	const formatMonth = createDateFormatter({ month: "short" }, labelFormatting);
-	const formatDay = createDateFormatter({
-		weekday: "short",
-		month: "short",
-		day: "numeric",
-		year: "numeric"
-	}, labelFormatting);
+	const { formatWeekday, formatMonth, formatDay } = civilLabelFormatters(locale);
 	const gridStart = startOfCivilWeek(requestedMinDate, weekStartsOn);
 	const gridMinDayKey = requestedMinDayKey < minDayKey ? civilKey(gridStart) : requestedMinDayKey;
 	const weekCount = civilWeekSpan(gridStart, gridMaxDate, weekStartsOn);
@@ -7204,6 +7731,89 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 	};
 };
 //#endregion
+//#region 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;
+const startOfCivilMonth = (date) => {
+	const first = new Date(date.getTime());
+	first.setUTCDate(1);
+	return first;
+};
+const startOfNextCivilMonth = (date) => {
+	const next = startOfCivilMonth(date);
+	next.setUTCMonth(next.getUTCMonth() + 1);
+	return next;
+};
+/**
+* Lay a day-keyed map out as one month calendar per month, weekdays across and
+* weeks down, for `HeatmapChart` with `columnGroups`.
+*
+* @param valueByDay - Value per `yyyy-MM-dd`. A missing day is `null`.
+* @param range      - The measured days; every month from `start`'s through `end`'s is drawn.
+* @param options    - Week start and label locale.
+* @return Columns and one group per month; empty for an invalid or reversed range.
+*/
+const buildMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
+	const start = civilDate(range.start);
+	const end = civilDate(range.end);
+	if (!start || !end || start.getTime() > end.getTime()) {
+		warnOnce(`heatmap:monthRange:${range.start}:${range.end}`, `range ${JSON.stringify(range)} must be two \`yyyy-MM-dd\` days with start on or before end, so the calendar is empty.`);
+		return {
+			data: [],
+			columnGroups: []
+		};
+	}
+	const startKey = civilKey(start);
+	const endKey = civilKey(end);
+	const weekStartsOn = options.weekStartsOn ?? 1;
+	const { locale } = sanitizeFormatting({ locale: options.locale });
+	for (const key of Object.keys(valueByDay)) if (!civilDate(key)) warnOnce(`heatmap:monthKey:${key}`, `${JSON.stringify(key)} is not a \`yyyy-MM-dd\` day, so its value is left out of the calendar.`);
+	const readValue = (key) => {
+		const value = valueByDay[key];
+		return isPresent(value) ? value : null;
+	};
+	const { formatMonth, formatMonthYear, formatDay } = civilLabelFormatters(locale);
+	const data = [];
+	const columnGroups = [];
+	const lastMonthStart = startOfCivilMonth(end);
+	const formatGroup = (lastMonthStart.getUTCFullYear() - start.getUTCFullYear()) * 12 + lastMonthStart.getUTCMonth() - start.getUTCMonth() + 1 > 12 ? formatMonthYear : formatMonth;
+	for (let monthStart = startOfCivilMonth(start); monthStart.getTime() <= lastMonthStart.getTime(); monthStart = startOfNextCivilMonth(monthStart)) {
+		const monthStartKey = civilKey(monthStart);
+		const monthEndKey = civilKey(addCivilDays(startOfNextCivilMonth(monthStart), -1));
+		const gridStart = startOfCivilWeek(monthStart, weekStartsOn);
+		for (let weekday = 0; weekday < DAYS_PER_WEEK; weekday++) {
+			const cells = [];
+			for (let week = 0; week < MONTH_ROWS; week++) {
+				const day = addCivilDays(gridStart, week * DAYS_PER_WEEK + weekday);
+				const key = civilKey(day);
+				if (key < monthStartKey || key > monthEndKey) cells.push({
+					value: null,
+					hidden: true
+				});
+				else if (key < startKey || key > endKey) cells.push({
+					label: formatDay(day),
+					value: null,
+					placeholder: true
+				});
+				else cells.push({
+					label: formatDay(day),
+					value: readValue(key)
+				});
+			}
+			data.push({ data: cells });
+		}
+		columnGroups.push({
+			label: formatGroup(monthStart),
+			span: DAYS_PER_WEEK
+		});
+	}
+	return {
+		data,
+		columnGroups
+	};
+};
+//#endregion
 //#region src/charts/heatmap-chart/use-calendar-heatmap-data.ts
 /**
 * `buildCalendarHeatmapData` with the locale and zone taken from
@@ -7240,6 +7850,36 @@ const useCalendarHeatmapData = (series, options = {}) => {
 	]);
 };
 //#endregion
+//#region src/charts/heatmap-chart/use-month-calendar-heatmap-data.ts
+/**
+* `buildMonthCalendarHeatmapData` with the locale taken from `GlobalChartsProvider`
+* where the caller names none.
+*
+* @param valueByDay - Value per `yyyy-MM-dd`. Held by reference, so a caller that rebuilds it each render defeats the memo.
+* @param range      - As for `buildMonthCalendarHeatmapData`.
+* @param options    - As for `buildMonthCalendarHeatmapData`; `locale` wins over the provider.
+* @return Columns and groups for `HeatmapChart`.
+*/
+const useMonthCalendarHeatmapData = (valueByDay, range, options = {}) => {
+	const formatting = useChartFormatting();
+	const locale = options.locale ?? formatting.locale;
+	const { weekStartsOn } = options;
+	const { start, end } = range;
+	return useMemo(() => buildMonthCalendarHeatmapData(valueByDay, {
+		start,
+		end
+	}, {
+		locale,
+		weekStartsOn
+	}), [
+		valueByDay,
+		start,
+		end,
+		locale,
+		weekStartsOn
+	]);
+};
+//#endregion
 //#region ../../../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>
@@ -7307,7 +7947,24 @@ function paramCase(input, options) {
 	return dotCase(input, __assign({ delimiter: "-" }, options));
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.55.0/node_modules/@wordpress/warning/build-module/utils.mjs
+var logged = /* @__PURE__ */ new Set();
+//#endregion
+//#region ../../../node_modules/.pnpm/@wordpress+warning@3.55.0/node_modules/@wordpress/warning/build-module/index.mjs
+function isDev() {
+	return globalThis.SCRIPT_DEBUG === true;
+}
+function warning(message) {
+	if (!isDev()) return;
+	if (logged.has(message)) return;
+	console.warn(message);
+	try {
+		throw Error(message);
+	} catch {}
+	logged.add(message);
+}
+//#endregion
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
 function useUpdateEffect(effect, deps) {
 	const mountedRef = useRef$1(false);
 	useEffect$1(() => {
@@ -8877,7 +9534,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/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();
@@ -8984,7 +9641,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
 var white = "#fff";
 var GRAY = {
 	900: "#1e1e1e",
@@ -9034,8 +9691,8 @@ var UI = {
 	border: THEME.gray[600],
 	borderHover: THEME.gray[700],
 	borderFocus: THEME.accent,
-	borderDisabled: THEME.gray[400],
-	textDisabled: THEME.gray[600],
+	borderDisabled: `var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb)`,
+	textDisabled: `var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)`,
 	darkGrayPlaceholder: `color-mix(in srgb, ${THEME.foreground}, transparent 38%)`,
 	lightGrayPlaceholder: `color-mix(in srgb, ${THEME.background}, transparent 35%)`
 };
@@ -9063,7 +9720,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/config-values.mjs
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
 	controlPaddingX: 12,
@@ -9117,8 +9774,8 @@ var config_values_default = Object.assign({}, CONTROL_PROPS, {
 	transitionTimingFunctionControl: "cubic-bezier(0.12, 0.8, 0.32, 1)"
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/fast-deep-equal@3.1.3/node_modules/fast-deep-equal/es6/index.js
-var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/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") {
@@ -9162,31 +9819,8 @@ var require_es6 = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 		}
 		return a !== a && b !== b;
 	};
-}));
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/utils.mjs
-var logged = /* @__PURE__ */ new Set();
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+warning@3.54.0/node_modules/@wordpress/warning/build-module/index.mjs
-function isDev() {
-	return globalThis.SCRIPT_DEBUG === true;
-}
-function warning(message) {
-	if (!isDev()) return;
-	if (logged.has(message)) return;
-	console.warn(message);
-	try {
-		throw Error(message);
-	} catch {}
-	logged.add(message);
-}
-//#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
-var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
-var ComponentsContext = createContext$1(
-	/** @type {Record<string, any>} */
-	{}
-);
+})))(), 1);
+var ComponentsContext = createContext$1({});
 ComponentsContext.displayName = "ComponentsContext";
 var useComponentsContext = () => useContext$1(ComponentsContext);
 function useContextSystemBridge({ value }) {
@@ -9208,18 +9842,18 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 memo(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/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@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
 function getStyledClassName(namespace) {
 	return `components-${paramCase(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/context-connect.mjs
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -9236,7 +9870,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/context/utils.mjs
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -9244,7 +9878,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/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");
@@ -9253,10 +9887,12 @@ function useContextSystem(props, namespace) {
 		...getConnectedNamespace(),
 		...getNamespace(namespace)
 	};
-	const { _overrides: overrideProps, ...otherContextProps } = contextProps;
+	const { _overrides, ...otherContextProps } = contextProps;
+	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 rendered = typeof initialMergedProps.renderChildren === "function" ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children;
+	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];
 	if (rendered !== void 0) finalComponentProps.children = rendered;
@@ -9264,7 +9900,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -9280,7 +9916,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/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
@@ -9370,7 +10006,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = forwardRef$1(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/view/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/view/component.mjs
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ jsx(PolymorphicElement, {
 		ref,
@@ -9379,7 +10015,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 }
 var component_default$2 = Object.assign(forwardRef$1(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -9394,7 +10030,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
 var breakpoints = [
 	"40em",
 	"52em",
@@ -9428,7 +10064,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/utils.mjs
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -9476,7 +10112,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/hook.mjs
 function useGrid(props) {
 	const { align, alignment, className, columnGap, columns = 2, gap = 3, isInline = false, justify, rowGap, rows, templateColumns, templateRows, ...otherProps } = useContextSystem(props, "Grid");
 	const column = useResponsiveValue(Array.isArray(columns) ? columns : [columns]);
@@ -9518,7 +10154,7 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.1.0_@date-fns+tz@1.5.0_@types+react-dom@18.3.7_@types+react@18_c300d25e93ed6b8d3659e83df7c1508a/node_modules/@wordpress/components/build-module/grid/component.mjs
 function UnconnectedGrid(props, forwardedRef) {
 	const gridProps = useGrid(props);
 	return /* @__PURE__ */ jsx(component_default$2, {
@@ -10774,6 +11410,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 	});
 }
 //#endregion
-export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, buildMonthCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getBucketInfo, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, prefersLightText, relativeLuminance, resolveCssVariable, useCalendarHeatmapData, useChartFormatting, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, useMonthCalendarHeatmapData, validateHexColor };
 
 //# sourceMappingURL=index.js.map