@automattic/charts 4.1.0 → 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,12 +2486,12 @@ 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,
 		backgroundColor: theme?.backgroundColor ?? "white",
-		boxShadow: `0 1px 2px ${theme?.htmlLabel?.color ? `${theme.htmlLabel.color}55` : "#22222255"}`,
+		boxShadow: `0 1px 2px ${isValidHexColor(theme?.htmlLabel?.color) ? `${theme.htmlLabel.color}55` : "#22222255"}`,
 		...theme?.htmlLabel,
 		...style
 	};
@@ -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,15 +2687,45 @@ 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]),
-		onChartFocus: useCallback(() => {
+		tooltipRef,
+		onChartFocus: useCallback((event) => {
+			if (event.currentTarget.contains(event.relatedTarget)) return;
 			if (!isNavigating && selectedIndex !== void 0) setSelectedIndex(0);
 		}, [
 			isNavigating,
@@ -2681,38 +2736,34 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 			setIsNavigating(false);
 		}, [setIsNavigating]),
 		onChartKeyDown: useCallback((event) => {
-			if (totalPoints === 0) return;
-			if (event.key === "Tab") {
-				chartRef.current?.focus();
+			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)) {
-				chartRef.current?.focus();
-				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);
-				chartRef.current?.focus();
-			} 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,
+			getChartRoot,
+			focusWithoutScrollIfNeeded,
 			onActivate
 		])
 	};
@@ -4316,6 +4367,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 			children: ({ contentHeight }) => {
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ jsx("div", {
+					ref: chartRef,
 					role: "grid",
 					"aria-label": __("Line chart", "jetpack-charts"),
 					tabIndex: 0,
@@ -4323,7 +4375,6 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					onFocus: onChartFocus,
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
-						ref: chartRef,
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
 							theme,
@@ -4821,6 +4872,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 			children: ({ contentHeight }) => {
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ jsx("div", {
+					ref: chartRef,
 					role: "grid",
 					"aria-label": __("Area chart", "jetpack-charts"),
 					tabIndex: 0,
@@ -4828,7 +4880,6 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 					onFocus: onChartFocus,
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ jsxs("div", {
-						ref: chartRef,
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ jsx(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ jsxs(XYChart, {
 							theme,
@@ -5270,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
@@ -5342,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;
@@ -5398,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";
@@ -5409,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";
@@ -5435,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,
@@ -5446,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) => {
@@ -5460,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,
@@ -5467,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, {
@@ -5530,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, [
@@ -5700,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,
@@ -5719,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
@@ -5763,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,
@@ -6586,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",
@@ -6632,290 +6872,267 @@ const getNormalizedValue = (value, extent) => {
 	return Math.min(1, Math.max(0, (value - min) / (max - min)));
 };
 //#endregion
-//#region src/charts/heatmap-chart/private/civil-day.ts
-const DAY_MS = 864e5;
-const KEY_OPTIONS = {
-	calendar: "gregory",
-	numberingSystem: "latn",
-	year: "numeric",
-	month: "2-digit",
-	day: "2-digit"
-};
-const DATE_PREFIX = /^(\d{4})-(\d{2})-(\d{2})/;
-const pad = (value, length) => String(value).padStart(length, "0");
-/**
-* The day a UTC proxy stands for.
-*
-* @param date - UTC proxy.
-* @return Its day key.
-*/
-const civilKey = (date) => `${pad(date.getUTCFullYear(), 4)}-${pad(date.getUTCMonth() + 1, 2)}-${pad(date.getUTCDate(), 2)}`;
-/**
-* A day key as a UTC-midnight proxy. UTC has no DST, so every step below is exactly
-* `DAY_MS`.
-*
-* @param key - Day key.
-* @return The proxy, or null when the key names no real day.
-*/
-const civilDate = (key) => {
-	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(key);
-	if (!match) return null;
-	const date = /* @__PURE__ */ new Date(0);
-	date.setUTCFullYear(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
-	date.setUTCHours(0, 0, 0, 0);
-	return civilKey(date) === key ? date : null;
+//#region src/charts/heatmap-chart/private/heatmap-context.ts
+/** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */
+const HeatmapContext = createContext(null);
+//#endregion
+//#region src/charts/heatmap-chart/private/heatmap-legend.tsx
+const HeatmapLegend = ({ steps = 5, variant = "swatches", lessLabel, moreLabel }) => {
+	const context = useContext(HeatmapContext);
+	const { legend } = useGlobalChartsTheme();
+	if (!context) return null;
+	const { primaryColorHex } = context;
+	const labelStyle = legend.labelStyles;
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		gap: "xs",
+		align: "center",
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
+				style: labelStyle,
+				children: lessLabel ?? __("Less", "jetpack-charts")
+			}),
+			/* @__PURE__ */ jsx(Stack, {
+				direction: "row",
+				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", {
+						className: heatmap_chart_module_default["heatmap-chart__legend-swatch"],
+						style: {
+							"--a8c-charts-color-heatmap-primary": primaryColorHex,
+							"--a8c-charts-heatmap-cell-intensity": intensity
+						}
+					}, index);
+				})
+			}),
+			/* @__PURE__ */ jsx(Text$1, {
+				variant: "body-sm",
+				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
+				style: labelStyle,
+				children: moreLabel ?? __("More", "jetpack-charts")
+			})
+		]
+	});
 };
+//#endregion
+//#region src/charts/heatmap-chart/private/column-groups.ts
+const isSpan = (span) => Number.isInteger(span) && span > 0;
 /**
-* The day a written date names, ignoring any time and zone it carries.
+* Validates column groups and lays them over the columns.
 *
-* @param text - `yyyy-MM-dd`, optionally followed by a time.
-* @return Its day key, or null.
+* @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 writtenDayKey = (text) => {
-	const match = DATE_PREFIX.exec(text);
-	if (!match) return null;
-	const key = `${match[1]}-${match[2]}-${match[3]}`;
-	return civilDate(key) ? key : null;
+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));
 /**
-* Reads the day an instant falls on in a zone.
+* Column-major scan for the first selectable cell.
 *
-* @param timeZone - IANA zone name; absent leaves the runtime's own.
-* @return Reader taking a `Date`, null for a day no key can hold.
+* @param grid - The grid.
+* @return The cell, or undefined when every slot is inert.
 */
-const instantDayReader = (timeZone) => {
-	const formatter = new Intl.DateTimeFormat("en-US", {
-		...KEY_OPTIONS,
-		timeZone
-	});
-	return (date) => {
-		const parts = formatter.formatToParts(date);
-		const read = (type) => parts.find((part) => part.type === type)?.value ?? "";
-		const key = `${pad(Number(read("year")), 4)}-${read("month")}-${read("day")}`;
-		return civilDate(key) ? key : null;
+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
 	};
 };
 /**
-* The day a series point belongs to.
-*
-* A `Date`, or a string carrying `Z` or an offset, is an instant read in the host's
-* zone. Anything else is a wall clock the host wrote, so its date part is the day.
+* Steps across the grid in the key's direction, past inert slots, staying put at the edge.
 *
-* @param point       - Series point.
-* @param readInstant - Reader from `instantDayReader`.
-* @return Its day key, or null when the point carries no usable date.
+* @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 pointDayKey = (point, readInstant) => {
-	if (point.date instanceof Date && !isNaN(point.date.getTime())) {
-		const key = readInstant(point.date);
-		if (key) return key;
+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);
 	}
-	const text = point.dateString;
-	if (!text) return null;
-	if (!hasTimezone(text)) return writtenDayKey(text);
-	const parsed = parseISO(text);
-	return isNaN(parsed.getTime()) ? null : readInstant(parsed);
+	return cells;
 };
 /**
-* Steps a proxy by whole days.
+* The first selectable cell in calendar reading order.
 *
-* @param date - UTC proxy.
-* @param days - Days to add; may be negative.
-* @return The shifted proxy.
+* @param grid   - The grid.
+* @param blocks - The blocks, left to right.
+* @return The cell, or undefined when every slot is inert.
 */
-const addCivilDays = (date, days) => new Date(date.getTime() + days * DAY_MS);
+const firstCalendarCell = (grid, blocks) => firstSelectable(grid, readingOrder(grid, blocks));
 /**
-* Rounds a proxy down to its week.
+* 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 date         - UTC proxy.
-* @param weekStartsOn - 0 for Sunday, 1 for Monday.
-* @return The proxy for that week's first day.
+* @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 startOfCivilWeek = (date, weekStartsOn) => {
-	const daysSinceWeekStart = (date.getUTCDay() - weekStartsOn + 7) % 7;
-	return addCivilDays(date, -daysSinceWeekStart);
-};
-/**
-* Counts the columns a span needs.
-*
-* @param from         - Earlier UTC proxy.
-* @param to           - Later UTC proxy.
-* @param weekStartsOn - 0 for Sunday, 1 for Monday.
-* @return Columns needed to cover the span, inclusive.
-*/
-const civilWeekSpan = (from, to, weekStartsOn) => Math.floor((startOfCivilWeek(to, weekStartsOn).getTime() - startOfCivilWeek(from, weekStartsOn).getTime()) / (7 * DAY_MS)) + 1;
-//#endregion
-//#region src/charts/heatmap-chart/private/build-calendar-data.ts
-/** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
-const LABELLED_ROWS = [
-	0,
-	2,
-	4
-];
-/**
-* Resolve one grid bound: an unparseable or narrowing value falls back to the
-* series' own bound, so the grid can only ever be widened.
-*
-* @param bound     - Requested bound as `yyyy-MM-dd`, if any.
-* @param fallback  - The series' own bound on this side.
-* @param direction - Which way the bound is allowed to move.
-* @return The day key to draw to.
-*/
-const widenTo = (bound, fallback, direction) => {
-	const key = bound ? writtenDayKey(bound) : null;
-	if (!key) {
-		if (bound) warnOnce(`heatmap:gridSpan:${bound}`, `gridSpan.${direction === "earlier" ? "start" : "end"} ${JSON.stringify(bound)} is not a \`yyyy-MM-dd\` day, so the grid is drawn over the series' own span.`);
-		return fallback;
-	}
-	if (direction === "earlier") return key < fallback ? key : fallback;
-	return key > fallback ? key : fallback;
-};
-/**
-* Lay a day-bucketed series out as calendar columns.
-*
-* @param series  - Points to bucket.
-* @param options - Grid shape, plus the locale and zone to read days in.
-* @return Columns and row labels for `HeatmapChart`.
-*/
-const buildCalendarHeatmapData = (series, options = {}) => {
-	const weekStartsOn = options.weekStartsOn ?? 1;
-	const hideOutOfRangeDays = options.hideOutOfRangeDays ?? true;
-	const { locale, timeZone } = sanitizeFormatting({
-		locale: options.locale,
-		timeZone: options.timeZone
-	});
-	const readInstant = instantDayReader(timeZone);
-	const valueByDay = /* @__PURE__ */ new Map();
-	let minDayKey;
-	let maxDayKey;
-	for (const point of series) {
-		const key = pointDayKey(point, readInstant);
-		if (!key) {
-			const offending = point.dateString ?? (point.date && String(point.date));
-			warnOnce(`heatmap:unreadableDate:${offending}`, offending ? `${JSON.stringify(offending)} is not a day this can read, so its point is left out of the calendar. A \`dateString\` must start \`yyyy-MM-dd\`.` : "A point carries neither `date` nor `dateString`, so it is left out of the calendar.");
-			continue;
-		}
-		valueByDay.set(key, point.value);
-		if (!minDayKey || key < minDayKey) minDayKey = key;
-		if (!maxDayKey || key > maxDayKey) maxDayKey = key;
-	}
-	if (!minDayKey || !maxDayKey) return {
-		data: [],
-		rowLabels: []
-	};
-	const requestedMinDayKey = widenTo(options.gridSpan?.start, minDayKey, "earlier");
-	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 gridStart = startOfCivilWeek(requestedMinDate, weekStartsOn);
-	const gridMinDayKey = requestedMinDayKey < minDayKey ? civilKey(gridStart) : requestedMinDayKey;
-	const weekCount = civilWeekSpan(gridStart, gridMaxDate, weekStartsOn);
-	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? formatWeekday(addCivilDays(gridStart, row)) : "");
-	const MIN_FIRST_MONTH_WEEKS = 2;
-	const firstMonth = gridStart.getUTCMonth();
-	let firstMonthWeeks = 0;
-	while (firstMonthWeeks < weekCount && addCivilDays(gridStart, firstMonthWeeks * 7).getUTCMonth() === firstMonth) firstMonthWeeks++;
-	const showFirstMonthLabel = !(firstMonthWeeks < weekCount) || firstMonthWeeks >= MIN_FIRST_MONTH_WEEKS;
-	const data = [];
-	let previousMonth = -1;
-	for (let week = 0; week < weekCount; week++) {
-		const columnStart = addCivilDays(gridStart, week * 7);
-		const month = columnStart.getUTCMonth();
-		const label = month !== previousMonth && (week !== 0 || showFirstMonthLabel) ? formatMonth(columnStart) : "";
-		previousMonth = month;
-		const cells = [];
-		for (let row = 0; row < 7; row++) {
-			const day = addCivilDays(gridStart, week * 7 + row);
-			const key = civilKey(day);
-			const cell = {
-				label: formatDay(day),
-				value: valueByDay.has(key) ? valueByDay.get(key) : null
-			};
-			if (key < gridMinDayKey || key > gridMaxDayKey) {
-				if (hideOutOfRangeDays) cell.hidden = true;
-			} else if (key < minDayKey || key > maxDayKey) cell.placeholder = true;
-			cells.push(cell);
-		}
-		data.push({
-			label,
-			data: cells
-		});
-	}
-	return {
-		data,
-		rowLabels
-	};
-};
-//#endregion
-//#region src/charts/heatmap-chart/private/heatmap-context.ts
-/** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */
-const HeatmapContext = createContext(null);
-//#endregion
-//#region src/charts/heatmap-chart/private/heatmap-legend.tsx
-const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
-	const context = useContext(HeatmapContext);
-	const { legend } = useGlobalChartsTheme();
-	if (!context) return null;
-	const { primaryColorHex } = context;
-	const labelStyle = legend.labelStyles;
-	return /* @__PURE__ */ jsxs(Stack, {
-		direction: "row",
-		gap: "xs",
-		align: "center",
-		children: [
-			/* @__PURE__ */ jsx(Text$1, {
-				variant: "body-sm",
-				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
-				style: labelStyle,
-				children: lessLabel ?? __("Less", "jetpack-charts")
-			}),
-			/* @__PURE__ */ jsx(Stack, {
-				direction: "row",
-				gap: "xs",
-				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,
-							"--a8c-charts-heatmap-cell-intensity": intensity
-						}
-					}, index);
-				})
-			}),
-			/* @__PURE__ */ jsx(Text$1, {
-				variant: "body-sm",
-				className: heatmap_chart_module_default["heatmap-chart__legend-label"],
-				style: labelStyle,
-				children: moreLabel ?? __("More", "jetpack-charts")
-			})
-		]
-	});
+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);
@@ -6934,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;
@@ -7016,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: {
@@ -7058,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`;
@@ -7074,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,
@@ -7094,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,
@@ -7103,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",
@@ -7198,6 +7478,342 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ jsx(HeatmapChartW
 HeatmapChartResponsiveInner.displayName = "HeatmapChart";
 const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
 //#endregion
+//#region src/charts/heatmap-chart/private/civil-day.ts
+const DAY_MS = 864e5;
+const KEY_OPTIONS = {
+	calendar: "gregory",
+	numberingSystem: "latn",
+	year: "numeric",
+	month: "2-digit",
+	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.
+*
+* @param date - UTC proxy.
+* @return Its day key.
+*/
+const civilKey = (date) => `${pad(date.getUTCFullYear(), 4)}-${pad(date.getUTCMonth() + 1, 2)}-${pad(date.getUTCDate(), 2)}`;
+/**
+* A day key as a UTC-midnight proxy. UTC has no DST, so every step below is exactly
+* `DAY_MS`.
+*
+* @param key - Day key.
+* @return The proxy, or null when the key names no real day.
+*/
+const civilDate = (key) => {
+	const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(key);
+	if (!match) return null;
+	const date = /* @__PURE__ */ new Date(0);
+	date.setUTCFullYear(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+	date.setUTCHours(0, 0, 0, 0);
+	return civilKey(date) === key ? date : null;
+};
+/**
+* The day a written date names, ignoring any time and zone it carries.
+*
+* @param text - `yyyy-MM-dd`, optionally followed by a time.
+* @return Its day key, or null.
+*/
+const writtenDayKey = (text) => {
+	const match = DATE_PREFIX.exec(text);
+	if (!match) return null;
+	const key = `${match[1]}-${match[2]}-${match[3]}`;
+	return civilDate(key) ? key : null;
+};
+/**
+* Reads the day an instant falls on in a zone.
+*
+* @param timeZone - IANA zone name; absent leaves the runtime's own.
+* @return Reader taking a `Date`, null for a day no key can hold.
+*/
+const instantDayReader = (timeZone) => {
+	const formatter = new Intl.DateTimeFormat("en-US", {
+		...KEY_OPTIONS,
+		timeZone
+	});
+	return (date) => {
+		const parts = formatter.formatToParts(date);
+		const read = (type) => parts.find((part) => part.type === type)?.value ?? "";
+		const key = `${pad(Number(read("year")), 4)}-${read("month")}-${read("day")}`;
+		return civilDate(key) ? key : null;
+	};
+};
+/**
+* The day a series point belongs to.
+*
+* A `Date`, or a string carrying `Z` or an offset, is an instant read in the host's
+* zone. Anything else is a wall clock the host wrote, so its date part is the day.
+*
+* @param point       - Series point.
+* @param readInstant - Reader from `instantDayReader`.
+* @return Its day key, or null when the point carries no usable date.
+*/
+const pointDayKey = (point, readInstant) => {
+	if (point.date instanceof Date && !isNaN(point.date.getTime())) {
+		const key = readInstant(point.date);
+		if (key) return key;
+	}
+	const text = point.dateString;
+	if (!text) return null;
+	if (!hasTimezone(text)) return writtenDayKey(text);
+	const parsed = parseISO(text);
+	return isNaN(parsed.getTime()) ? null : readInstant(parsed);
+};
+/**
+* Steps a proxy by whole days.
+*
+* @param date - UTC proxy.
+* @param days - Days to add; may be negative.
+* @return The shifted proxy.
+*/
+const addCivilDays = (date, days) => new Date(date.getTime() + days * DAY_MS);
+/**
+* Rounds a proxy down to its week.
+*
+* @param date         - UTC proxy.
+* @param weekStartsOn - 0 for Sunday, 1 for Monday.
+* @return The proxy for that week's first day.
+*/
+const startOfCivilWeek = (date, weekStartsOn) => {
+	const daysSinceWeekStart = (date.getUTCDay() - weekStartsOn + 7) % 7;
+	return addCivilDays(date, -daysSinceWeekStart);
+};
+/**
+* Counts the columns a span needs.
+*
+* @param from         - Earlier UTC proxy.
+* @param to           - Later UTC proxy.
+* @param weekStartsOn - 0 for Sunday, 1 for Monday.
+* @return Columns needed to cover the span, inclusive.
+*/
+const civilWeekSpan = (from, to, weekStartsOn) => Math.floor((startOfCivilWeek(to, weekStartsOn).getTime() - startOfCivilWeek(from, weekStartsOn).getTime()) / (7 * DAY_MS)) + 1;
+//#endregion
+//#region src/charts/heatmap-chart/build-calendar-data.ts
+/** Rows that get a weekday label (Mon, Wed, Fri with a Monday week start). */
+const LABELLED_ROWS = [
+	0,
+	2,
+	4
+];
+/**
+* Resolve one grid bound: an unparseable or narrowing value falls back to the
+* series' own bound, so the grid can only ever be widened.
+*
+* @param bound     - Requested bound as `yyyy-MM-dd`, if any.
+* @param fallback  - The series' own bound on this side.
+* @param direction - Which way the bound is allowed to move.
+* @return The day key to draw to.
+*/
+const widenTo = (bound, fallback, direction) => {
+	const key = bound ? writtenDayKey(bound) : null;
+	if (!key) {
+		if (bound) warnOnce(`heatmap:gridSpan:${bound}`, `gridSpan.${direction === "earlier" ? "start" : "end"} ${JSON.stringify(bound)} is not a \`yyyy-MM-dd\` day, so the grid is drawn over the series' own span.`);
+		return fallback;
+	}
+	if (direction === "earlier") return key < fallback ? key : fallback;
+	return key > fallback ? key : fallback;
+};
+/**
+* Lay a day-bucketed series out as calendar columns.
+*
+* @param series  - Points to bucket.
+* @param options - Grid shape, plus the locale and zone to read days in.
+* @return Columns and row labels for `HeatmapChart`.
+*/
+const buildCalendarHeatmapData = (series, options = {}) => {
+	const weekStartsOn = options.weekStartsOn ?? 1;
+	const hideOutOfRangeDays = options.hideOutOfRangeDays ?? true;
+	const { locale, timeZone } = sanitizeFormatting({
+		locale: options.locale,
+		timeZone: options.timeZone
+	});
+	const readInstant = instantDayReader(timeZone);
+	const valueByDay = /* @__PURE__ */ new Map();
+	let minDayKey;
+	let maxDayKey;
+	for (const point of series) {
+		const key = pointDayKey(point, readInstant);
+		if (!key) {
+			const offending = point.dateString ?? (point.date && String(point.date));
+			warnOnce(`heatmap:unreadableDate:${offending}`, offending ? `${JSON.stringify(offending)} is not a day this can read, so its point is left out of the calendar. A \`dateString\` must start \`yyyy-MM-dd\`.` : "A point carries neither `date` nor `dateString`, so it is left out of the calendar.");
+			continue;
+		}
+		valueByDay.set(key, point.value);
+		if (!minDayKey || key < minDayKey) minDayKey = key;
+		if (!maxDayKey || key > maxDayKey) maxDayKey = key;
+	}
+	if (!minDayKey || !maxDayKey) return {
+		data: [],
+		rowLabels: []
+	};
+	const requestedMinDayKey = widenTo(options.gridSpan?.start, minDayKey, "earlier");
+	const gridMaxDayKey = widenTo(options.gridSpan?.end, maxDayKey, "later");
+	const requestedMinDate = civilDate(requestedMinDayKey);
+	const gridMaxDate = civilDate(gridMaxDayKey);
+	const { formatWeekday, formatMonth, formatDay } = civilLabelFormatters(locale);
+	const gridStart = startOfCivilWeek(requestedMinDate, weekStartsOn);
+	const gridMinDayKey = requestedMinDayKey < minDayKey ? civilKey(gridStart) : requestedMinDayKey;
+	const weekCount = civilWeekSpan(gridStart, gridMaxDate, weekStartsOn);
+	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? formatWeekday(addCivilDays(gridStart, row)) : "");
+	const MIN_FIRST_MONTH_WEEKS = 2;
+	const firstMonth = gridStart.getUTCMonth();
+	let firstMonthWeeks = 0;
+	while (firstMonthWeeks < weekCount && addCivilDays(gridStart, firstMonthWeeks * 7).getUTCMonth() === firstMonth) firstMonthWeeks++;
+	const showFirstMonthLabel = !(firstMonthWeeks < weekCount) || firstMonthWeeks >= MIN_FIRST_MONTH_WEEKS;
+	const data = [];
+	let previousMonth = -1;
+	for (let week = 0; week < weekCount; week++) {
+		const columnStart = addCivilDays(gridStart, week * 7);
+		const month = columnStart.getUTCMonth();
+		const label = month !== previousMonth && (week !== 0 || showFirstMonthLabel) ? formatMonth(columnStart) : "";
+		previousMonth = month;
+		const cells = [];
+		for (let row = 0; row < 7; row++) {
+			const day = addCivilDays(gridStart, week * 7 + row);
+			const key = civilKey(day);
+			const cell = {
+				label: formatDay(day),
+				value: valueByDay.has(key) ? valueByDay.get(key) : null
+			};
+			if (key < gridMinDayKey || key > gridMaxDayKey) {
+				if (hideOutOfRangeDays) cell.hidden = true;
+			} else if (key < minDayKey || key > maxDayKey) cell.placeholder = true;
+			cells.push(cell);
+		}
+		data.push({
+			label,
+			data: cells
+		});
+	}
+	return {
+		data,
+		rowLabels
+	};
+};
+//#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
@@ -7234,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>
@@ -7301,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(() => {
@@ -8871,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();
@@ -8978,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",
@@ -9028,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%)`
 };
@@ -9057,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,
@@ -9111,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") {
@@ -9156,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 }) {
@@ -9202,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 });
 }
@@ -9230,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 };
 }
@@ -9238,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");
@@ -9247,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;
@@ -9258,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)",
@@ -9274,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
@@ -9364,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,
@@ -9373,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, {
@@ -9388,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",
@@ -9422,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",
@@ -9470,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]);
@@ -9512,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, {
@@ -10768,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