@automattic/charts 4.1.1 → 4.2.0

package/dist/index.cjs

@@ -983,7 +983,8 @@ const defaultTheme = {
 	},
 	heatmapChart: {
 		compactCellGap: 2,
-		compactCellSize: 11
+		compactCellSize: 11,
+		groupGap: 24
 	}
 };
 //#endregion
@@ -2183,7 +2184,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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
@@ -2233,7 +2237,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
@@ -2247,7 +2252,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.
 */
@@ -2271,7 +2276,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 {
@@ -2287,8 +2293,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.
@@ -2298,7 +2303,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 = _visx_tooltip.defaultStyles, unstyled = false, children, placement = "auto", ...rest }) => {
@@ -2401,7 +2406,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",
@@ -2429,7 +2433,7 @@ const defaultRenderGlyph$1 = ({ key, ...props }) => /* @__PURE__ */ (0, react_js
 	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 } = (0, react.useContext)(_visx_xychart.DataContext) || {};
 	const tooltipContent = renderTooltip ? renderTooltip({
@@ -2484,7 +2488,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 : _visx_tooltip.Tooltip;
+	const TooltipComponent = detectBounds || tooltipPlacement !== "auto" ? BoundedTooltip : _visx_tooltip.Tooltip;
 	const boxStyle = {
 		..._visx_tooltip.defaultStyles,
 		zIndex,
@@ -2521,11 +2525,11 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 		]
 	}), container && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.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)] });
 };
@@ -2591,11 +2595,32 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		return flattened;
 	}, [series, mode]);
 	const hasKeyboardSelection = (0, react.useRef)(false);
+	const closeTooltipNow = (0, react.useCallback)(() => {
+		tooltipContext?.updateTooltip({
+			tooltipOpen: false,
+			tooltipLeft: void 0,
+			tooltipTop: void 0,
+			tooltipData: void 0
+		});
+	}, []);
+	const chartId = (0, react.useContext)(ChartInstanceContext)?.chartId;
+	const { getHiddenSeries } = useGlobalChartsContext();
+	const hiddenSeriesKey = chartId ? JSON.stringify([...getHiddenSeries(chartId)].sort()) : void 0;
+	const lastHiddenSeriesKey = (0, react.useRef)(hiddenSeriesKey);
+	(0, react.useEffect)(() => {
+		const changed = lastHiddenSeriesKey.current !== hiddenSeriesKey;
+		lastHiddenSeriesKey.current = hiddenSeriesKey;
+		if (changed && selectedIndex === void 0) closeTooltipNow();
+	}, [
+		hiddenSeriesKey,
+		selectedIndex,
+		closeTooltipNow
+	]);
 	(0, react.useEffect)(() => {
 		if (selectedIndex === void 0) {
 			if (hasKeyboardSelection.current) {
 				hasKeyboardSelection.current = false;
-				tooltipContext?.hideTooltip();
+				closeTooltipNow();
 			}
 			return;
 		}
@@ -2664,14 +2689,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 = (0, react.useCallback)(() => chartRef.current?.closest("[role=\"grid\"]") ?? chartRef.current, [chartRef]);
+	const focusWithoutScrollIfNeeded = (0, react.useCallback)((element) => {
+		if (preventTooltipScroll) element?.focus({ preventScroll: true });
+		else element?.focus();
+	}, [preventTooltipScroll]);
+	const tooltipRef = (0, react.useCallback)((element) => {
+		if (element && selectedIndex !== void 0) focusWithoutScrollIfNeeded(element);
+	}, [focusWithoutScrollIfNeeded, selectedIndex]);
+	const previousTotalPoints = (0, react.useRef)(totalPoints);
+	const previousVisibleSeriesKey = (0, react.useRef)(visibleSeriesKey);
+	(0, react.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: (0, react.useCallback)((element) => {
-			if (element && selectedIndex !== void 0) {
-				if (preventTooltipScroll) element.focus({ preventScroll: true });
-				else element.focus();
-			}
-		}, [preventTooltipScroll, selectedIndex]),
+		tooltipRef,
 		onChartFocus: (0, react.useCallback)((event) => {
 			if (event.currentTarget.contains(event.relatedTarget)) return;
 			if (!isNavigating && selectedIndex !== void 0) setSelectedIndex(0);
@@ -2684,44 +2738,35 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 			setIsNavigating(false);
 		}, [setIsNavigating]),
 		onChartKeyDown: (0, react.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
 		])
 	};
 };
@@ -5278,6 +5323,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) => (0, _visx_scale.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
@@ -5350,11 +5409,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 = (0, _visx_scale.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;
@@ -5406,6 +5461,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 } = (0, react.useContext)(_visx_xychart.DataContext);
+	const { tooltipOpen, tooltipData } = (0, react.useContext)(_visx_xychart.TooltipContext);
+	const nearest = tooltipData?.nearestDatum;
+	const selection = (0, react.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 = (0, react.useRef)(onChange);
+	onChangeRef.current = onChange;
+	(0, react.useEffect)(() => {
+		onChangeRef.current?.(stableSelection);
+	}, [stableSelection]);
+	(0, react.useEffect)(() => () => onChangeRef.current?.(null), []);
+	if (!visible || !selection) return null;
+	const { x, y, width, height } = selection;
+	return /* @__PURE__ */ (0, react_jsx_runtime.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 } = (0, react.useContext)(_visx_xychart.DataContext);
+	const { showTooltip } = (0, react.useContext)(_visx_xychart.TooltipContext);
+	const scale = horizontal ? yScale : xScale;
+	const bandwidth = scale?.bandwidth?.() ?? 0;
+	const groupScale = (0, react.useMemo)(() => createGroupScale(keys, bandwidth, groupPadding), [
+		keys,
+		bandwidth,
+		groupPadding
+	]);
+	const getSelections = (0, react.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 = (0, react.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
+	]);
+	(0, _visx_xychart.useEventEmitter)("pointermove", withTooltips ? handlePointer : void 0);
+	(0, _visx_xychart.useEventEmitter)("pointerdown", handlePointer);
+	(0, _visx_xychart.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";
@@ -5417,7 +5629,7 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%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";
@@ -5443,8 +5655,6 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [height]);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.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 = (0, react.useMemo)(() => dataWithVisibleZeros.map((series, index) => ({
 		series,
 		index,
@@ -5454,6 +5664,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
 	const primaryEntries = (0, react.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 = (0, react.useMemo)(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
 	const primarySeries = (0, react.useMemo)(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
 	const activateSelectedBar = (0, react.useCallback)((index) => {
@@ -5468,6 +5679,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			key: series.label
 		});
 	}, [primaryEntries, onDatumActivate]);
+	const visibleSeriesKey = (0, react.useMemo)(() => JSON.stringify(primaryKeys), [primaryKeys]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -5475,7 +5687,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		setIsNavigating,
 		chartRef,
 		totalPoints,
-		onActivate: activateSelectedBar
+		onActivate: activateSelectedBar,
+		visibleSeriesKey
 	});
 	const comparisonEntries = (0, react.useMemo)(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
@@ -5538,7 +5751,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartOptions.yScale,
 		horizontal
 	]);
-	const getBarBackground = (0, react.useCallback)((index) => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({
+	const getBarBackground = (0, react.useCallback)((index) => (datum) => withPatterns ? `url(#${getPatternId(chartId, index)})` : datum.color ?? getElementStyles({
 		data: dataSorted[index],
 		index
 	}).color, [
@@ -5708,13 +5921,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					role: "grid",
+					ref: chartRef,
 					"aria-label": (0, _wordpress_i18n.__)("Bar chart", "jetpack-charts"),
 					tabIndex: 0,
 					onKeyDown: onChartKeyDown,
 					onFocus: onChartFocus,
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						ref: chartRef,
 						className: xy_plot_module_default["xy-plot"],
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
 							theme,
@@ -5727,15 +5940,24 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 							xScale,
 							yScale,
 							horizontal,
-							onPointerDown,
-							onPointerUp,
 							pointerEventsDataKey: "nearest",
 							children: [
-								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+								withTooltips && (withBandHighlight || onBandHighlightChange) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BandHighlight, {
+									visible: withBandHighlight,
+									horizontal,
+									onChange: onBandHighlightChange
+								}),
+								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
 									columns: gridVisibility.includes("y"),
+									rows: false,
+									numTicks: 4,
+									tickValues: chartOptions.axis.x.tickValues
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Grid, {
+									columns: false,
 									rows: gridVisibility.includes("x"),
-									numTicks: 4
-								}),
+									numTicks: 4,
+									tickValues: chartOptions.axis.y.tickValues
+								})] }),
 								withPatterns && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: dataSorted.map((seriesData, index) => renderPattern(index, getElementStyles({
 									data: seriesData,
 									index
@@ -5771,8 +5993,17 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 										colorAccessor: getBarBackground(index)
 									}, seriesData?.label))
 								}),
+								(withTooltips || onPointerDown || onPointerUp) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BandTooltip, {
+									keys: primaryKeys,
+									groupPadding,
+									withTooltips,
+									onPointerDown,
+									onPointerUp
+								}),
 								!allSeriesHidden && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.x }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.Axis, { ...chartOptions.axis.y })] }),
 								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
+									tooltipPlacement,
+									tooltipAnchorTop,
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,
@@ -6594,8 +6825,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",
@@ -6645,7 +6879,7 @@ const getNormalizedValue = (value, extent) => {
 const HeatmapContext = (0, react.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 = (0, react.useContext)(HeatmapContext);
 	const { legend } = useGlobalChartsTheme();
 	if (!context) return null;
@@ -6664,11 +6898,12 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_wordpress_ui.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__ */ (0, react_jsx_runtime.jsx)("span", {
-						"aria-hidden": "true",
 						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
 						style: {
 							"--a8c-charts-color-heatmap-primary": primaryColorHex,
@@ -6687,16 +6922,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: {
+		..._visx_tooltip.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] = (0, react.useState)();
+	const [selected, setSelected] = (0, react.useState)();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } = (0, _visx_tooltip.useTooltip)();
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const containerRef = (0, react.useRef)(null);
@@ -6715,69 +7153,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 = (0, react.useMemo)(() => resolveColumnGroups(columnGroups, columns, 2), [columnGroups, columns]);
+	const { compactCellGap, compactCellSize, groupGap } = heatmapChartSettings;
 	const drawValues = showValues ?? !compact;
 	const buildTooltipData = (0, react.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 = (0, react.useCallback)(() => {
-		setSelectedIndex(void 0);
+		setSelected(void 0);
 		hideTooltip();
 	}, [hideTooltip]);
 	const isCellInert = (0, react.useCallback)((col, row) => {
 		const cell = data[col]?.data[row];
 		return cell?.hidden === true || cell?.placeholder === true;
 	}, [data]);
+	const blocks = (0, react.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 = (0, react.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 = (0, react.useCallback)((event) => {
 		if (!withTooltips) return;
@@ -6797,35 +7241,47 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		buildTooltipData,
 		getTooltipOrigin
 	]);
+	const getCellElement = (0, react.useCallback)((col, row) => typeof document !== "undefined" ? document.getElementById(`${chartId}-cell-${col}-${row}`) : null, [chartId]);
 	const handleCellMouseLeave = (0, react.useCallback)(() => {
-		if (withTooltips && selectedIndex === void 0) hideTooltip();
+		if (withTooltips && selected === void 0) hideTooltip();
 	}, [
 		withTooltips,
-		selectedIndex,
+		selected,
 		hideTooltip
 	]);
 	(0, react.useEffect)(() => {
-		if (!withTooltips || selectedIndex === void 0) return;
+		if (selected && (selected.column >= columns || selected.row >= rows)) setSelected(void 0);
+	}, [
+		selected,
+		columns,
+		rows
+	]);
+	(0, react.useEffect)(() => {
+		if (selected === void 0) return;
+		getCellElement(selected.column, selected.row)?.scrollIntoView?.({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [selected, getCellElement]);
+	(0, react.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 = (0, react.useCallback)((info) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: info.value === null ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value) })] }), []);
+	const defaultRenderTooltip = (0, react.useCallback)((info) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: cellName(info) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: info.value === null ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value) })] }), []);
 	if (!columns || !rows) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Center, {
 		className: (0, clsx.default)("heatmap-chart", heatmap_chart_module_default["heatmap-chart"], className),
 		style: {
@@ -6839,10 +7295,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`;
@@ -6855,7 +7317,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__ */ (0, react_jsx_runtime.jsx)(HeatmapContext.Provider, {
 		value: heatmapContext,
@@ -6875,7 +7337,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: containerRef,
 					role: "grid",
-					"aria-label": (0, _wordpress_i18n.__)("Heatmap chart", "jetpack-charts"),
+					"aria-label": ariaLabel ?? (0, _wordpress_i18n.__)("Heatmap chart", "jetpack-charts"),
 					"aria-rowcount": rows,
 					"aria-colcount": columns,
 					"aria-activedescendant": activeDescendant,
@@ -6884,76 +7346,115 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 					onKeyDown: onChartKeyDown,
 					className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsxs)("div", {
-						role: "row",
-						"aria-hidden": "true",
-						className: heatmap_chart_module_default["heatmap-chart__row"],
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), data.map((column, columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsxs)("div", {
+					children: [
+						hasColumnLabels && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							role: "row",
-							"aria-rowindex": rowIndex + 1,
+							"aria-hidden": "true",
 							className: heatmap_chart_module_default["heatmap-chart__row"],
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-									"aria-hidden": "true",
-									className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
-								}, `cell-${columnIndex}-${rowIndex}`);
-								if (cell?.placeholder) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+								gridColumn: 1,
+								gridRow: 1
+							} }), data.map((column, columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								style: {
+									gridColumn: columnLine(columnIndex),
+									gridRow: 1
+								},
+								className: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsxs)("div", {
+								role: "row",
+								"aria-rowindex": rowIndex + 1,
+								className: heatmap_chart_module_default["heatmap-chart__row"],
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									"aria-hidden": "true",
-									className: (0, clsx.default)(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 ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value)}`;
-								return /* @__PURE__ */ (0, react_jsx_runtime.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: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: heatmap_chart_module_default["heatmap-chart__cell-value"],
-										children: (0, _automattic_number_formatters.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__ */ (0, react_jsx_runtime.jsx)("div", {
+										"aria-hidden": "true",
+										style: placement,
+										className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
+									}, `cell-${columnIndex}-${rowIndex}`);
+									if (cell?.placeholder) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										"aria-hidden": "true",
+										style: placement,
+										className: (0, clsx.default)(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 ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value)}`;
+									return /* @__PURE__ */ (0, react_jsx_runtime.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: (0, clsx.default)(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__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: heatmap_chart_module_default["heatmap-chart__cell-value"],
+											children: (0, _automattic_number_formatters.formatNumberCompact)(value)
+										})
+									}, `cell-${columnIndex}-${rowIndex}`);
+								})]
+							}, `row-${rowIndex}`);
+						}),
+						hasGroups && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							role: "row",
+							"aria-hidden": "true",
+							className: heatmap_chart_module_default["heatmap-chart__row"],
+							children: groupLayout.groups.map((group, groupIndex) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(BoundedTooltip, {
 					top: tooltipTop,
 					left: tooltipLeft,
+					className: tooltipVariant === "dark" ? base_tooltip_module_default.surface : void 0,
+					style: tooltipBoxStyle,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: standaloneScopeClass,
 						role: "tooltip",
@@ -6989,6 +7490,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.
@@ -7154,18 +7692,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);
@@ -7206,6 +7733,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
@@ -7242,6 +7852,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 (0, react.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>
@@ -7605,7 +8245,24 @@ var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => {
 	tslib_1.__exportStar(require_dist$1(), exports);
 }));
 //#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 = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
@@ -9243,7 +9900,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();
@@ -9350,7 +10007,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",
@@ -9400,8 +10057,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%)`
 };
@@ -9429,7 +10086,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,
@@ -9483,8 +10140,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") {
@@ -9528,31 +10185,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 = (0, react.createContext)(
-	/** @type {Record<string, any>} */
-	{}
-);
+})))(), 1);
+var ComponentsContext = (0, react.createContext)({});
 ComponentsContext.displayName = "ComponentsContext";
 var useComponentsContext = () => (0, react.useContext)(ComponentsContext);
 function useContextSystemBridge({ value }) {
@@ -9574,19 +10208,19 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 (0, react.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
 var import_dist = require_dist();
 function getStyledClassName(namespace) {
 	return `components-${(0, import_dist.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 });
 }
@@ -9603,7 +10237,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 };
 }
@@ -9611,7 +10245,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");
@@ -9620,10 +10254,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;
@@ -9631,7 +10267,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)",
@@ -9647,7 +10283,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
@@ -9737,7 +10373,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = (0, react.forwardRef)(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__ */ (0, react_jsx_runtime.jsx)(PolymorphicElement, {
 		ref,
@@ -9746,7 +10382,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@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__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -9761,7 +10397,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",
@@ -9795,7 +10431,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",
@@ -9843,7 +10479,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]);
@@ -9885,7 +10521,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__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -11171,6 +11807,7 @@ exports.SparklineUnresponsive = SparklineUnresponsive;
 exports.ThemeProvider = GlobalChartsProvider;
 exports.TrendIndicator = TrendIndicator;
 exports.buildCalendarHeatmapData = buildCalendarHeatmapData;
+exports.buildMonthCalendarHeatmapData = buildMonthCalendarHeatmapData;
 exports.defaultTheme = defaultTheme;
 exports.formatMetricValue = formatMetricValue;
 exports.formatPercentage = formatPercentage;
@@ -11195,6 +11832,7 @@ exports.useChartScopeElement = useChartScopeElement;
 exports.useGlobalChartsContext = useGlobalChartsContext;
 exports.useGlobalChartsTheme = useGlobalChartsTheme;
 exports.useLeaderboardLegendItems = useLeaderboardLegendItems;
+exports.useMonthCalendarHeatmapData = useMonthCalendarHeatmapData;
 exports.validateHexColor = validateHexColor;
 
 //# sourceMappingURL=index.cjs.map