@automattic/charts 4.0.0 → 4.1.1

package/dist/index.cjs

@@ -31,6 +31,7 @@ let react = require("react");
 react = __toESM(react);
 let _visx_vendor_d3_color = require("@visx/vendor/d3-color");
 let date_fns = require("date-fns");
+let _date_fns_tz = require("@date-fns/tz");
 let _visx_text = require("@visx/text");
 let deepmerge = require("deepmerge");
 deepmerge = __toESM(deepmerge, 1);
@@ -86,46 +87,35 @@ function attachSubComponents(Chart, subComponents) {
 	return Object.assign(Chart, subComponents);
 }
 //#endregion
-//#region src/utils/date-parsing.ts
+//#region src/utils/warn-once.ts
+const warned = /* @__PURE__ */ new Set();
 /**
-* @file Date parsing utilities using date-fns for local timezone handling
-*
-* This module provides utilities for parsing various date string formats and converting
-* them to local timezone dates using the battle-tested date-fns library. For formats
-* without timezone info, they're treated as local. For formats with timezone info,
-* they're converted to the equivalent local time.
+* Warns about a host-supplied value once per process, and never in production.
 *
-* Note: And specifically it prevents format `YYYY-MM-DD` being parsed as UTC date.
-*
-* Key Features:
-* - All parsed dates are in local timezone
-* - Converts timezone-aware strings to local equivalent
-* - Robust input validation and error handling using date-fns
-* - TypeScript type safety
-* - Much smaller codebase than custom parsing
+* @param key     - Identifies the value, so a bad prop on every point warns once.
+* @param message - What the host got wrong and what happens instead.
+*/
+const warnOnce = (key, message) => {
+	if (warned.has(key) || process.env.NODE_ENV === "production") return;
+	warned.add(key);
+	console.warn(`[Charts] ${message}`);
+};
+//#endregion
+//#region src/utils/date-parsing.ts
+/**
+* @file Date parsing: a naive string is dated in a supplied IANA zone, or the runtime's own
 *
-* Supported Formats:
-* - YYYY-MM-DD (treated as local)
-* - YYYY-MM-DD HH:mm:ss (treated as local)
-* - YYYY-MM-DD HH:mm (treated as local)
-* - YYYY-MM-DDTHH:mm:ss (treated as local)
-* - YYYY-MM-DDTHH:mm:ss.SSS (treated as local)
-* - YYYY-MM-DDTHH:mm (treated as local)
-* - YYYY-MM-DDTHH:mm:ssZ (converted to local)
-* - YYYY-MM-DDTHH:mm:ss±HH:mm (converted to local)
+* A string carrying an offset is already an instant and parses the same everywhere. A string
+* without one is only a wall-clock reading, so it means nothing until a zone is named. See
+* `parseAsLocalDate` for the supported formats.
 *
-* @example
-* ```typescript
-* parseAsLocalDate("2025-01-01");                     // Local timezone
-* parseAsLocalDate("2025-01-01 14:30:00");            // Local timezone
-* parseAsLocalDate("2025-01-01 14:30");               // Local timezone
-* parseAsLocalDate("2025-01-01T14:30:45.123");        // Local timezone
-* parseAsLocalDate("2025-01-01T14:30:00Z");           // UTC 14:30 → Local equivalent
-* parseAsLocalDate("2025-01-01T14:30:00+05:00");      // +05:00 14:30 → Local equivalent
-* ```
+* Note: this specifically avoids date-fns's default of parsing `YYYY-MM-DD` as a UTC date.
 */
 /**
 * Checks if a date string contains timezone information
+*
+* The minutes are optional because ISO 8601 allows a bare `±hh`, which `parseISO` reads.
+*
 * @param {string} dateString - The date string to check for timezone information
 * @return {boolean} True if the date string contains timezone information, false otherwise
 */
@@ -133,28 +123,57 @@ const hasTimezone = (dateString) => {
 	const tIndex = dateString.indexOf("T");
 	if (tIndex === -1) return false;
 	if (dateString.endsWith("Z")) return true;
-	return /[+-]\d{2}:?\d{2}$/.test(dateString.slice(tIndex + 1));
+	return /[+-]\d{2}(?::?\d{2})?$/.test(dateString.slice(tIndex + 1));
+};
+const NAIVE = /^(\d{1,4})-(\d{1,2})-(\d{1,2})(?:[T ](\d{1,2}):(\d{1,2})(?::(\d{1,2})(?:\.(\d{1,3}))?)?)?$/;
+const asUtcMs = ([, ...fields]) => {
+	const [year, month, day, hour, minute, second, ms] = fields.map((field) => Number(field ?? 0));
+	const date = /* @__PURE__ */ new Date(0);
+	date.setUTCFullYear(year, month - 1, day);
+	date.setUTCHours(hour, minute, second, ms);
+	return date.getTime();
 };
 /**
-* Parses any supported date string format and returns a local timezone date
+* The instant a wall-clock reading names in a given zone.
 *
-* Uses date-fns for robust parsing and validation. For strings without timezone
-* info, treats as local timezone. For strings with timezone info, converts to
-* local timezone equivalent.
+* A reading a spring-forward gap deleted moves forward past the gap, and one a fall-back
+* repeated resolves to a single instant. Neither is configurable: see CHARTS-268.
 *
-* Supports:
-* - YYYY-MM-DD (local)
-* - YYYY-MM-DD HH:mm:ss (local)
-* - YYYY-MM-DD HH:mm (local)
-* - YYYY-MM-DDTHH:mm:ss (local)
-* - YYYY-MM-DDTHH:mm:ss.SSS (local)
-* - YYYY-MM-DDTHH:mm (local)
-* - YYYY-MM-DDTHH:mm:ssZ (UTC → local)
-* - YYYY-MM-DDTHH:mm:ss±HH:mm (offset → local)
-* @param {string} dateString - The date string to parse into a local timezone date
-* @return {Date} A Date object representing the parsed date in local timezone, or an invalid Date if parsing fails
+* @param wallClock - The reading, as the milliseconds it would be if it were UTC.
+* @param timeZone  - IANA zone the reading is dated in.
+* @return The instant, or `null` where `timeZone` is not a zone Intl accepts.
 */
-const parseAsLocalDate = (dateString) => {
+const wallClockToInstant = (wallClock, timeZone) => {
+	const first = (0, _date_fns_tz.tzOffset)(timeZone, new Date(wallClock));
+	if (Number.isNaN(first)) {
+		warnOnce(`parse:timeZone:${timeZone}`, `timeZone ${JSON.stringify(timeZone)} is not a zone Intl accepts, so dates are read in the browser's zone. Pass an IANA name or a UTC offset such as "+05:30".`);
+		return null;
+	}
+	const guess = wallClock - first * 6e4;
+	const second = (0, _date_fns_tz.tzOffset)(timeZone, new Date(guess));
+	if (first === second) return new Date(guess);
+	const corrected = wallClock - second * 6e4;
+	const third = (0, _date_fns_tz.tzOffset)(timeZone, new Date(corrected));
+	if (second === third) return new Date(corrected);
+	return /* @__PURE__ */ new Date(wallClock - Math.min(second, third) * 6e4);
+};
+/**
+* Parses any supported date string format into an instant, dated in `timeZone` or the runtime's own
+*
+* Uses date-fns for robust parsing and validation. A string carrying timezone info
+* is already an instant and is returned as one, whatever `timeZone` says. A string
+* without it is a wall-clock reading, dated in `timeZone` when one is supplied and
+* in the runtime's own zone when none is.
+*
+* A wall clock a DST gap deleted is moved forward past the gap; one a fall-back repeated
+* resolves to a single instant. Neither policy is selectable. A zone `Intl` rejects falls
+* back to the runtime's own, and warns once outside production.
+*
+* @param {string} dateString - The date string to parse into a date
+* @param {string} [timeZone] - IANA zone a naive string is read in; the runtime's own when absent, and ignored by a string that carries its own offset
+* @return {Date} A Date object representing the parsed instant, or an invalid Date if parsing fails
+*/
+const parseAsLocalDate = (dateString, timeZone) => {
 	const trimmedString = dateString.trim();
 	if (hasTimezone(trimmedString)) {
 		const isoDate = (0, date_fns.parseISO)(trimmedString);
@@ -170,7 +189,10 @@ const parseAsLocalDate = (dateString) => {
 		"yyyy-MM-dd'T'HH:mm"
 	]) {
 		const result = (0, date_fns.parse)(trimmedString, format, /* @__PURE__ */ new Date());
-		if ((0, date_fns.isValid)(result)) return result;
+		if (!(0, date_fns.isValid)(result)) continue;
+		if (!timeZone) return result;
+		const fields = NAIVE.exec(trimmedString);
+		return (fields && wallClockToInstant(asUtcMs(fields), timeZone)) ?? result;
 	}
 	return /* @__PURE__ */ new Date(NaN);
 };
@@ -275,6 +297,31 @@ const formatPercentage = (value) => {
 	} });
 };
 //#endregion
+//#region src/utils/get-edge-tick-widths.ts
+/**
+* Rendered widths of the first and last tick labels on an axis.
+*
+* An unmeasurable label reserves nothing, which is what a width of 0 already
+* means to every caller, so it is reported as 0 rather than as its own case.
+*
+* @param          ticks      - Tick values, in axis order.
+* @param          formatTick - Function to format a tick.
+* @param {object} labelStyle - Style object for the label.
+* @return {object} - Widths in pixels.
+*/
+const getEdgeTickWidths = (ticks, formatTick, labelStyle) => {
+	if (!ticks.length) return {
+		first: 0,
+		last: 0
+	};
+	const lastIndex = ticks.length - 1;
+	const label = (tick, index) => String(formatTick ? formatTick(tick, index, []) ?? "" : tick);
+	return {
+		first: (0, _visx_text.getStringWidth)(label(ticks[0], 0), labelStyle) ?? 0,
+		last: (0, _visx_text.getStringWidth)(label(ticks[lastIndex], lastIndex), labelStyle) ?? 0
+	};
+};
+//#endregion
 //#region src/utils/get-longest-tick-width.ts
 /**
 * Returns the width of the longest tick.
@@ -661,12 +708,6 @@ const getFormatter$1 = (options, { locale, timeZone }) => {
 	}
 	return formatter;
 };
-const warned = /* @__PURE__ */ new Set();
-const warnOnce = (key, message) => {
-	if (warned.has(key) || process.env.NODE_ENV === "production") return;
-	warned.add(key);
-	console.warn(`[Charts] ${message}`);
-};
 const isUsable = (formatting) => {
 	try {
 		Intl.DateTimeFormat(formatting.locale, { timeZone: formatting.timeZone });
@@ -1292,13 +1333,28 @@ const useXYChartTheme = (data) => {
 	]);
 };
 //#endregion
+//#region src/providers/chart-context/hooks/use-chart-formatting.ts
+const RUNTIME_FORMATTING = {};
+/**
+* The locale and time zone dates are rendered in, as set on `GlobalChartsProvider`.
+*
+* Falls back to the runtime's own rather than throwing: charts render outside a
+* provider, and a host that sets neither gets exactly the browser-default
+* behavior this package had before the context existed.
+*
+* @return The host's formatting context.
+*/
+const useChartFormatting = () => {
+	return (0, react.useContext)(GlobalChartsContext)?.formatting ?? RUNTIME_FORMATTING;
+};
+//#endregion
 //#region src/hooks/use-chart-data-transform.ts
 /**
 * Hook that transforms and sorts chart data, handling date parsing and sorting
 *
 * This hook extracts the common data transformation logic used in both line-chart
 * and bar-chart components. It:
-* 1. Parses date strings into Date objects using parseAsLocalDate
+* 1. Parses date strings into Date objects, dated in the provider's time zone
 * 2. Sorts data points by date when date properties are present
 * 3. Returns the original data unchanged when no date properties are found
 *
@@ -1306,6 +1362,7 @@ const useXYChartTheme = (data) => {
 * @return {SeriesData[]} The transformed and sorted data
 */
 const useChartDataTransform = (data) => {
+	const { timeZone } = useChartFormatting();
 	return (0, react.useMemo)(() => {
 		const firstPoint = data?.[0]?.data?.[0];
 		if (!(firstPoint && ("date" in firstPoint || "dateString" in firstPoint))) return data;
@@ -1314,7 +1371,7 @@ const useChartDataTransform = (data) => {
 			data: series.data.map((point) => {
 				let date;
 				if ("date" in point && point.date) date = point.date;
-				else if ("dateString" in point && point.dateString) date = parseAsLocalDate(point.dateString);
+				else if ("dateString" in point && point.dateString) date = parseAsLocalDate(point.dateString, timeZone);
 				return {
 					...point,
 					date
@@ -1324,7 +1381,7 @@ const useChartDataTransform = (data) => {
 				return a.date.getTime() - b.date.getTime();
 			})
 		}));
-	}, [data]);
+	}, [data, timeZone]);
 };
 //#endregion
 //#region src/hooks/use-chart-margin.tsx
@@ -1366,11 +1423,32 @@ const DEFAULT_TICK_LENGTH = 8;
 * measure them via getLongestTickWidth.
 */
 const DEFAULT_Y_TICK_WIDTH = 40;
+/**
+* Copy a label style with its lengths spelled out in px.
+*
+* `getStringWidth` applies the style through CSSOM. Blink resolves a bare number
+* on an SVG `<text>`, but that is its own leniency rather than the CSS rule, and
+* `buildChartTheme` hands us bare numbers.
+*
+* @param style - Raw label style from the theme.
+* @return The same style with px-qualified lengths.
+*/
+const toMeasurableStyle = (style) => {
+	if (!style) return style;
+	const fontSize = resolveFontSize(style.fontSize);
+	const { letterSpacing } = style;
+	return {
+		...style,
+		...fontSize === void 0 ? {} : { fontSize: `${fontSize}px` },
+		...typeof letterSpacing === "number" ? { letterSpacing: `${letterSpacing}px` } : {}
+	};
+};
 const getXAxisLabelMetrics = (theme, orientation) => {
 	const xAxisStyles = orientation === "top" ? theme.axisStyles?.x?.top : theme.axisStyles?.x?.bottom;
 	return {
 		fontSize: resolveFontSize(xAxisStyles?.axisLabel?.fontSize) || resolveFontSize(theme.svgLabelSmall?.fontSize) || DEFAULT_FONT_SIZE,
-		tickLength: xAxisStyles?.tickLength ?? DEFAULT_TICK_LENGTH
+		tickLength: xAxisStyles?.tickLength ?? DEFAULT_TICK_LENGTH,
+		tickLabelStyle: toMeasurableStyle(xAxisStyles?.tickLabel)
 	};
 };
 const useChartMargin = (height, options, data, theme, horizontal = false) => {
@@ -1382,7 +1460,7 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		const maxY = Math.max(...allDataPoints.map((d) => d.value));
 		const yScale = (0, _visx_scale.createScale)({
 			...options.yScale,
-			domain: [minY, maxY],
+			domain: options.yScale?.domain ?? [minY, maxY],
 			range: [height, 0]
 		});
 		return (0, _visx_scale.getTicks)(yScale, options.axis?.y?.numTicks);
@@ -1401,18 +1479,25 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		};
 		const yAxisOrientation = options.axis?.y?.orientation;
 		const yAxisStyles = yAxisOrientation === "right" ? theme.axisStyles.y.right : theme.axisStyles.y.left;
-		const yTickWidth = getLongestTickWidth(yTicks, options.axis?.y?.tickFormat, yAxisStyles.axisLabel);
+		const yTickWidth = getLongestTickWidth(yTicks, options.axis?.y?.tickFormat, toMeasurableStyle(yAxisStyles.axisLabel));
 		const yTickLabelFontSize = resolveFontSize(yAxisStyles?.tickLabel?.fontSize) || DEFAULT_FONT_SIZE;
 		const yMarginValue = (yTickWidth ?? DEFAULT_Y_TICK_WIDTH) + (yAxisStyles?.tickLength ?? 0) + Math.ceil(yTickLabelFontSize * .25);
-		if (yAxisOrientation === "right") defaultMargin.right = yMarginValue;
-		else defaultMargin.left = yMarginValue;
+		if (options.axis?.y?.display !== false) {
+			if (yAxisOrientation === "right") defaultMargin.right = yMarginValue;
+			else defaultMargin.left = yMarginValue;
+		}
 		const xOrientation = options.axis?.x?.orientation === "top" ? "top" : "bottom";
-		const { fontSize, tickLength } = getXAxisLabelMetrics(theme, xOrientation);
+		const { fontSize, tickLength, tickLabelStyle } = getXAxisLabelMetrics(theme, xOrientation);
 		const computedXMargin = fontSize + tickLength;
 		if (xOrientation === "top") {
 			defaultMargin.top = Math.max(defaultMargin.top, computedXMargin);
 			defaultMargin.bottom = DEFAULT_BOTTOM_FOR_TOP_AXIS;
 		} else defaultMargin.bottom = Math.max(defaultMargin.bottom, computedXMargin);
+		if (options.axis?.x?.display !== false) {
+			const { first, last } = getEdgeTickWidths(options.axis?.x?.tickValues ?? [], options.axis?.x?.tickFormat, tickLabelStyle);
+			defaultMargin.left = Math.max(defaultMargin.left, Math.ceil(first / 2));
+			defaultMargin.right = Math.max(defaultMargin.right, Math.ceil(last / 2));
+		}
 		return defaultMargin;
 	}, [
 		options,
@@ -1688,21 +1773,6 @@ const useGlobalChartsTheme = () => {
 	return (0, react.useContext)(GlobalChartsContext)?.theme ?? defaultTheme;
 };
 //#endregion
-//#region src/providers/chart-context/hooks/use-chart-formatting.ts
-const RUNTIME_FORMATTING = {};
-/**
-* The locale and time zone dates are rendered in, as set on `GlobalChartsProvider`.
-*
-* Falls back to the runtime's own rather than throwing: charts render outside a
-* provider, and a host that sets neither gets exactly the browser-default
-* behavior this package had before the context existed.
-*
-* @return The host's formatting context.
-*/
-const useChartFormatting = () => {
-	return (0, react.useContext)(GlobalChartsContext)?.formatting ?? RUNTIME_FORMATTING;
-};
-//#endregion
 //#region src/components/legend/utils/value-or-identity.ts
 /**
 * Returns an object's value if defined, or the object.
@@ -2142,6 +2212,8 @@ const BaseTooltip = ({ data, top, left, component: Component = DefaultTooltipCon
 //#endregion
 //#region src/components/tooltip/private/bounded-tooltip.tsx
 const DEFAULT_OFFSET = 10;
+const POINTER_HEIGHT = 6;
+const clamp = (position, min, max, size) => Math.min(Math.max(position, min), Math.max(min, max - size));
 const isClipping = (element) => {
 	const { overflow, overflowX, overflowY } = getComputedStyle(element);
 	return [
@@ -2159,33 +2231,49 @@ const findClippingAncestor = (wrapper) => {
 	return null;
 };
 /**
-* Where the box goes, in wrapper coordinates. Below and to the right of the
-* anchor; flipped to the other side when that side clips less, as visx's
-* `TooltipWithBounds` decides it; then clamped so the box stays inside
-* `bounds` whenever it fits at all.
+* 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.
+*
+* 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
+* chart on one side stays there, so it does not reach past the chart into
+* siblings that paint over it.
 *
-* @param params            - Anchor, offsets, the box size and the bounds to keep inside.
+* @param params            - Anchor, offsets, the box size and the rects to keep inside.
 * @param params.left       - Anchor x, in wrapper coordinates.
 * @param params.top        - Anchor y, in wrapper coordinates.
 * @param params.offsetLeft - Gap between the anchor and the box, horizontally.
 * @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.bounds     - Edges the box must keep inside, in wrapper coordinates.
-* @return The box's top-left corner, rounded to whole pixels.
+* @return The box's top-left corner; fixed placement preserves the axis's subpixel y.
 */
-const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, bounds }) => {
+const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, wrapper, bounds, placement = "auto" }) => {
+	if (placement === "below-axis") return {
+		x: Math.round(clamp(left - box.width / 2, bounds.left, bounds.right, box.width)),
+		y: top + POINTER_HEIGHT
+	};
+	const fit = {
+		left: Math.max(wrapper.left, bounds.left),
+		top: Math.max(wrapper.top, bounds.top),
+		right: Math.min(wrapper.right, bounds.right),
+		bottom: Math.min(wrapper.bottom, bounds.bottom)
+	};
 	const rightX = left + offsetLeft;
 	const leftX = left - offsetLeft - box.width;
-	const rightOverflow = rightX + box.width - bounds.right;
-	const leftOverflow = bounds.left - leftX;
+	const rightOverflow = rightX + box.width - fit.right;
+	const leftOverflow = fit.left - leftX;
 	let x = rightOverflow > 0 && rightOverflow > leftOverflow ? leftX : rightX;
 	const downY = top + offsetTop;
 	const upY = top - offsetTop - box.height;
-	const downOverflow = downY + box.height - bounds.bottom;
-	const upOverflow = bounds.top - upY;
+	const downOverflow = downY + box.height - fit.bottom;
+	const upOverflow = fit.top - upY;
 	let y = downOverflow > 0 && downOverflow > upOverflow ? upY : downY;
-	x = Math.min(Math.max(x, bounds.left), Math.max(bounds.left, bounds.right - box.width));
-	y = Math.min(Math.max(y, bounds.top), Math.max(bounds.top, bounds.bottom - box.height));
+	x = clamp(x, bounds.left, bounds.right, box.width);
+	y = clamp(y, bounds.top, bounds.bottom, box.height);
 	return {
 		x: Math.round(x),
 		y: Math.round(y)
@@ -2199,7 +2287,8 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, bounds }) =
 * 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.
+* two hovers is placed for its current size. See `getBoundedPosition` for the
+* below-axis exception.
 *
 * @param props            - visx `Tooltip` props.
 * @param props.left       - Anchor x, in wrapper coordinates.
@@ -2209,9 +2298,10 @@ const getBoundedPosition = ({ left, top, offsetLeft, offsetTop, box, bounds }) =
 * @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.
 * @return The tooltip box.
 */
-const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style = _visx_tooltip.defaultStyles, unstyled = false, children, ...rest }) => {
+const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style = _visx_tooltip.defaultStyles, unstyled = false, children, placement = "auto", ...rest }) => {
 	const nodeRef = (0, react.useRef)(null);
 	const clipRef = (0, react.useRef)(null);
 	const [position, setPosition] = (0, react.useState)(null);
@@ -2236,10 +2326,17 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 			top,
 			offsetLeft,
 			offsetTop,
+			placement,
 			box: {
 				width: own.width,
 				height: own.height
 			},
+			wrapper: {
+				left: 0,
+				top: 0,
+				right: wrapperRect.width,
+				bottom: wrapperRect.height
+			},
 			bounds: {
 				left: clipRect.left - wrapperRect.left,
 				top: clipRect.top - wrapperRect.top,
@@ -2253,11 +2350,12 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 		top,
 		offsetLeft,
 		offsetTop,
-		children
+		children,
+		placement
 	]);
 	const x = position?.x ?? left + offsetLeft;
-	const y = position?.y ?? top + offsetTop;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_tooltip.Tooltip, {
+	const y = position?.y ?? top + (placement === "below-axis" ? POINTER_HEIGHT : offsetTop);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_tooltip.Tooltip, {
 		ref: nodeRef,
 		style: {
 			position: "absolute",
@@ -2267,12 +2365,40 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 			...!unstyled && style
 		},
 		...rest,
-		children
+		children: [placement === "below-axis" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			style: {
+				position: "absolute",
+				left: left - x - POINTER_HEIGHT,
+				top: -6,
+				width: 12,
+				height: POINTER_HEIGHT,
+				background: "inherit",
+				clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
+				pointerEvents: "none"
+			}
+		}), children]
 	});
 };
 //#endregion
 //#region src/components/tooltip/xy-chart-tooltip.tsx
 const CROSSHAIR_STROKE_WIDTH = 1.5;
+const CROSSHAIR_PAINT_PROPERTIES = /* @__PURE__ */ new Set([
+	"stroke",
+	"strokeWidth",
+	"strokeOpacity",
+	"strokeDasharray",
+	"strokeLinecap",
+	"opacity"
+]);
+const crosshairPaintProps = (props = {}) => {
+	const pickPaint = (value) => Object.fromEntries(Object.entries(value).filter(([key]) => CROSSHAIR_PAINT_PROPERTIES.has(key)));
+	return {
+		...pickPaint(props),
+		...props.className === void 0 ? {} : { className: props.className },
+		...props.style === void 0 ? {} : { style: pickPaint(props.style) }
+	};
+};
 const DEFAULT_GLYPH_RADIUS = 4;
 const FALLBACK_COLOR = "#222";
 const DEFAULT_TOOLTIP_Z_INDEX = 3;
@@ -2303,7 +2429,7 @@ const defaultRenderGlyph$1 = ({ key, ...props }) => /* @__PURE__ */ (0, react_js
 	seriesKey: key,
 	...props
 }, key);
-const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, renderGlyph = defaultRenderGlyph$1, glyphStyle, snapTooltipToDatumX = false, snapTooltipToDatumY = false, showVerticalCrosshair = false, showHorizontalCrosshair = false, showDatumGlyph = false, showSeriesGlyphs = false, verticalCrosshairStyle, horizontalCrosshairStyle, detectBounds = true, zIndex = DEFAULT_TOOLTIP_Z_INDEX, ...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", zIndex = DEFAULT_TOOLTIP_Z_INDEX, style, ...rest }) => {
 	const tooltipProps = Object.fromEntries(Object.entries(rest).filter(([key]) => !PORTAL_OPTIONS.has(key)));
 	const { colorScale, theme, innerHeight = 0, innerWidth = 0, margin, xScale, yScale, dataRegistry } = (0, react.useContext)(_visx_xychart.DataContext) || {};
 	const tooltipContent = renderTooltip ? renderTooltip({
@@ -2322,9 +2448,9 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 	};
 	const nearestDatum = tooltipContext.tooltipData?.nearestDatum;
 	let { tooltipLeft, tooltipTop } = tooltipContext;
-	if (nearestDatum && (snapTooltipToDatumX || snapTooltipToDatumY)) {
+	if (nearestDatum && (snapTooltipToDatumX || snapTooltipToDatumY || tooltipPlacement === "below-axis")) {
 		const { left, top } = getDatumLeftTop(nearestDatum.key, nearestDatum.datum);
-		if (snapTooltipToDatumX && isValidNumber(left)) tooltipLeft = left;
+		if ((snapTooltipToDatumX || tooltipPlacement === "below-axis") && isValidNumber(left)) tooltipLeft = left;
 		if (snapTooltipToDatumY && isValidNumber(top)) tooltipTop = top;
 	}
 	const glyphs = [];
@@ -2358,13 +2484,14 @@ 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 ? BoundedTooltip : _visx_tooltip.Tooltip;
+	const TooltipComponent = detectBounds || tooltipPlacement === "below-axis" ? BoundedTooltip : _visx_tooltip.Tooltip;
 	const boxStyle = {
 		..._visx_tooltip.defaultStyles,
 		zIndex,
-		background: theme?.backgroundColor ?? "white",
-		boxShadow: `0 1px 2px ${theme?.htmlLabel?.color ? `${theme.htmlLabel.color}55` : "#22222255"}`,
-		...theme?.htmlLabel
+		backgroundColor: theme?.backgroundColor ?? "white",
+		boxShadow: `0 1px 2px ${isValidHexColor(theme?.htmlLabel?.color) ? `${theme.htmlLabel.color}55` : "#22222255"}`,
+		...theme?.htmlLabel,
+		...style
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
 		className: "visx-tooltip-overlay",
@@ -2372,32 +2499,33 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 		children: [
 			showVerticalCrosshair && isValidNumber(tooltipLeft) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
 				className: "visx-crosshair visx-crosshair-vertical",
+				stroke: crosshairStroke,
+				strokeWidth: CROSSHAIR_STROKE_WIDTH,
+				...crosshairPaintProps(verticalCrosshairStyle),
 				x1: tooltipLeft,
 				x2: tooltipLeft,
 				y1: marginTop,
-				y2: marginTop + innerHeight,
-				stroke: crosshairStroke,
-				strokeWidth: CROSSHAIR_STROKE_WIDTH,
-				...verticalCrosshairStyle
+				y2: marginTop + innerHeight
 			}),
 			showHorizontalCrosshair && isValidNumber(tooltipTop) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
 				className: "visx-crosshair visx-crosshair-horizontal",
+				stroke: crosshairStroke,
+				strokeWidth: CROSSHAIR_STROKE_WIDTH,
+				...crosshairPaintProps(horizontalCrosshairStyle),
 				x1: marginLeft,
 				x2: marginLeft + innerWidth,
 				y1: tooltipTop,
-				y2: tooltipTop,
-				stroke: crosshairStroke,
-				strokeWidth: CROSSHAIR_STROKE_WIDTH,
-				...horizontalCrosshairStyle
+				y2: tooltipTop
 			}),
 			glyphs
 		]
 	}), container && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipComponent, {
 		left: tooltipLeft,
-		top: tooltipTop,
+		top: tooltipPlacement === "below-axis" ? marginTop + innerHeight + (margin?.bottom ?? 0) : tooltipTop,
 		style: boxStyle,
 		applyPositionStyle: true,
 		...tooltipProps,
+		...tooltipPlacement === "below-axis" && { placement: tooltipPlacement },
 		children: tooltipContent
 	}), container)] });
 };
@@ -2418,7 +2546,8 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 * isolation keeps the box's `zIndex` from competing with page chrome. The box
 * flips and clamps to stay inside the nearest ancestor that clips its overflow
 * (or the viewport), so it may extend past the chart wrapper but is never cut
-* off unless that ancestor is smaller than the box itself.
+* off unless that ancestor is smaller than the box itself. Below-axis placement
+* pins it beneath the x-axis and applies horizontal bounds only.
 *
 * @param props - visx's `Tooltip` options. `scroll`, `debounce` and `resizeObserverPolyfill` are accepted and ignored.
 * @return An anchor in the SVG, plus the overlay and the tooltip box while the tooltip is open.
@@ -2535,12 +2664,16 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		renderTooltip: focusableRenderTooltip
 	});
 };
-const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate }) => {
+const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating, setIsNavigating, chartRef, totalPoints, onActivate, preventTooltipScroll = false }) => {
 	return {
 		tooltipRef: (0, react.useCallback)((element) => {
-			if (element && selectedIndex !== void 0) element.focus();
-		}, [selectedIndex]),
-		onChartFocus: (0, react.useCallback)(() => {
+			if (element && selectedIndex !== void 0) {
+				if (preventTooltipScroll) element.focus({ preventScroll: true });
+				else element.focus();
+			}
+		}, [preventTooltipScroll, selectedIndex]),
+		onChartFocus: (0, react.useCallback)((event) => {
+			if (event.currentTarget.contains(event.relatedTarget)) return;
 			if (!isNavigating && selectedIndex !== void 0) setSelectedIndex(0);
 		}, [
 			isNavigating,
@@ -2552,15 +2685,19 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 		}, [setIsNavigating]),
 		onChartKeyDown: (0, react.useCallback)((event) => {
 			if (totalPoints === 0) return;
+			const focusChart = () => {
+				if (preventTooltipScroll) chartRef.current?.focus({ preventScroll: true });
+				else chartRef.current?.focus();
+			};
 			if (event.key === "Tab") {
-				chartRef.current?.focus();
+				focusChart();
 				setSelectedIndex(void 0);
 				setIsNavigating(false);
 				return;
 			}
 			const currentSelectedIndex = selectedIndex === void 0 ? -1 : selectedIndex;
 			if (currentSelectedIndex + 1 >= totalPoints && ["ArrowRight"].includes(event.key)) {
-				chartRef.current?.focus();
+				focusChart();
 				setSelectedIndex(void 0);
 				setIsNavigating(false);
 				return;
@@ -2575,7 +2712,7 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 			} else if (event.key === "Escape") {
 				setSelectedIndex(void 0);
 				setIsNavigating(false);
-				chartRef.current?.focus();
+				focusChart();
 			} else if ((event.key === "Enter" || event.key === " ") && selectedIndex !== void 0) onActivate?.(selectedIndex);
 		}, [
 			totalPoints,
@@ -2583,7 +2720,8 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 			setSelectedIndex,
 			setIsNavigating,
 			chartRef,
-			onActivate
+			onActivate,
+			preventTooltipScroll
 		])
 	};
 };
@@ -3871,10 +4009,11 @@ const TooltipDate = ({ date, displayResolution }) => {
 * one row per visible series (label + formatted value), sorted descending by
 * value. Reused by AreaChart, which has the same multi-series shape.
 *
-* @param params - visx `RenderTooltipParams< DataPointDate >`, plus the chart's optional `bucketInfo`.
+* @param params       - visx tooltip data and the chart's optional `bucketInfo`.
+* @param contentStyle - Explicit tooltip content color overrides.
 * @return Tooltip JSX, or `null` when no datum is hovered.
 */
-const renderDefaultTooltip = (params) => {
+const renderDefaultTooltip = (params, contentStyle) => {
 	const { tooltipData, bucketInfo } = params;
 	const nearestDatum = tooltipData?.nearestDatum?.datum;
 	if (!nearestDatum) return null;
@@ -3884,6 +4023,7 @@ const renderDefaultTooltip = (params) => {
 	})).sort((a, b) => b.value - a.value);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: line_chart_module_default["line-chart__tooltip"],
+		style: contentStyle,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: line_chart_module_default["line-chart__tooltip-date"],
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipDate, {
@@ -3933,7 +4073,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, tooltipPlacement, tooltipStyle, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, onDatumActivate = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendShape = legend.shape ?? "line";
@@ -4011,7 +4151,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		setIsNavigating,
 		chartRef,
 		totalPoints: dataSorted[0]?.data.length || 0,
-		onActivate: activateSelectedPoint
+		onActivate: activateSelectedPoint,
+		preventTooltipScroll: tooltipPlacement === "below-axis"
 	});
 	const chartOptions = (0, react.useMemo)(() => {
 		return {
@@ -4120,10 +4261,29 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		xAccessor: (d) => d?.date,
 		yAccessor: (d) => d?.value
 	};
-	const tooltipRenderer = (0, react.useMemo)(() => (params) => renderTooltip({
+	const resolvedTooltipStyle = (0, react.useMemo)(() => {
+		if (renderTooltip !== renderDefaultTooltip || !tooltipStyle) return tooltipStyle;
+		if (!tooltipStyle.color || tooltipStyle.background || tooltipStyle.backgroundColor) return tooltipStyle;
+		return {
+			backgroundColor: "var(--a8c-charts-color-tooltip-surface, rgb(0 0 0 / 85%))",
+			...tooltipStyle
+		};
+	}, [renderTooltip, tooltipStyle]);
+	const tooltipRenderer = (0, react.useMemo)(() => (params) => renderTooltip === renderDefaultTooltip ? renderDefaultTooltip({
 		...params,
 		bucketInfo
-	}), [renderTooltip, bucketInfo]);
+	}, {
+		color: tooltipStyle?.color,
+		background: tooltipStyle?.background,
+		backgroundColor: tooltipStyle?.backgroundColor
+	}) : renderTooltip({
+		...params,
+		bucketInfo
+	}), [
+		renderTooltip,
+		bucketInfo,
+		tooltipStyle
+	]);
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, clsx.default)("line-chart", line_chart_module_default["line-chart"]),
 		children: error
@@ -4164,6 +4324,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			children: ({ contentHeight }) => {
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: chartRef,
 					role: "grid",
 					"aria-label": (0, _wordpress_i18n.__)("Line chart", "jetpack-charts"),
 					tabIndex: 0,
@@ -4171,7 +4332,6 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 					onFocus: onChartFocus,
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						ref: chartRef,
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
 							theme,
@@ -4262,6 +4422,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
+									tooltipPlacement,
+									style: resolvedTooltipStyle,
 									snapTooltipToDatumY: true,
 									showSeriesGlyphs: true,
 									renderTooltip: tooltipRenderer,
@@ -4269,6 +4431,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									glyphStyle,
 									showVerticalCrosshair: withTooltipCrosshairs?.showVertical,
 									showHorizontalCrosshair: withTooltipCrosshairs?.showHorizontal,
+									verticalCrosshairStyle: withTooltipCrosshairs?.verticalStyle,
+									horizontalCrosshairStyle: withTooltipCrosshairs?.horizontalStyle,
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: line_chart_module_default["line-chart__tooltip--keyboard-focused"],
@@ -4665,6 +4829,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			children: ({ contentHeight }) => {
 				const chartHeight = contentHeight > 0 ? contentHeight : height;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: chartRef,
 					role: "grid",
 					"aria-label": (0, _wordpress_i18n.__)("Area chart", "jetpack-charts"),
 					tabIndex: 0,
@@ -4672,7 +4837,6 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 					onFocus: onChartFocus,
 					onBlur: onChartBlur,
 					children: chartHeight > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						ref: chartRef,
 						className: xy_plot_module_default["xy-plot"],
 						children: [zoomable && zoom.domain && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomResetButton, { onClick: zoom.reset }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_xychart.XYChart, {
 							theme,
@@ -6421,9 +6585,13 @@ var heatmap_chart_module_default = {
 	"heatmap-chart__cell--placeholder": "a8ccharts-O3YMOW-heatmap-chart__cell--placeholder",
 	"heatmap-chart__cell--selected": "a8ccharts-O3YMOW-heatmap-chart__cell--selected",
 	"heatmap-chart__cell--strong": "a8ccharts-O3YMOW-heatmap-chart__cell--strong",
+	"heatmap-chart__cell--summary": "a8ccharts-O3YMOW-heatmap-chart__cell--summary",
 	"heatmap-chart__cell-value": "a8ccharts-O3YMOW-heatmap-chart__cell-value",
 	"heatmap-chart__col-label": "a8ccharts-O3YMOW-heatmap-chart__col-label",
+	"heatmap-chart__col-label--summary": "a8ccharts-O3YMOW-heatmap-chart__col-label--summary",
 	"heatmap-chart__empty": "a8ccharts-O3YMOW-heatmap-chart__empty",
+	"heatmap-chart__gap-end": "a8ccharts-O3YMOW-heatmap-chart__gap-end",
+	"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--height-capped": "a8ccharts-O3YMOW-heatmap-chart__grid--height-capped",
@@ -6437,17 +6605,21 @@ var heatmap_chart_module_default = {
 //#region src/charts/heatmap-chart/private/use-heatmap-colors.ts
 const isPresent = (value) => value !== null && value !== void 0 && !isNaN(value);
 /**
-* Get the min and max values from heatmap data, ignoring null/NaN.
+* Get the min and max values from heatmap data, ignoring null/NaN. Summary
+* columns stay out: a roll-up on the scale would flatten every real cell.
 * @param data - The heatmap columns
 * @return Tuple of [min, max] values
 */
 const getValueExtent = (data) => {
 	let min = Infinity;
 	let max = -Infinity;
-	for (const column of data) for (const cell of column.data) {
-		if (!isPresent(cell.value)) continue;
-		if (cell.value < min) min = cell.value;
-		if (cell.value > max) max = cell.value;
+	for (const column of data) {
+		if (column.summary) continue;
+		for (const cell of column.data) {
+			if (!isPresent(cell.value)) continue;
+			if (cell.value < min) min = cell.value;
+			if (cell.value > max) max = cell.value;
+		}
 	}
 	if (min === Infinity) return [0, 0];
 	return [min, max];
@@ -6468,101 +6640,6 @@ const getNormalizedValue = (value, extent) => {
 	return Math.min(1, Math.max(0, (value - min) / (max - min)));
 };
 //#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 bound to draw to.
-*/
-const widenTo = (bound, fallback, direction) => {
-	if (!bound) return fallback;
-	const parsed = (0, date_fns.parseISO)(bound);
-	if (isNaN(parsed.getTime())) return fallback;
-	if (direction === "earlier") return parsed < fallback ? parsed : fallback;
-	return parsed > fallback ? parsed : fallback;
-};
-const toDate = (point) => {
-	if (point.date instanceof Date && !isNaN(point.date.getTime())) return point.date;
-	if (point.dateString) {
-		const parsed = (0, date_fns.parseISO)(point.dateString);
-		if (!isNaN(parsed.getTime())) return parsed;
-	}
-	return null;
-};
-const buildCalendarHeatmapData = (series, options = {}) => {
-	const weekStartsOn = options.weekStartsOn ?? 1;
-	const hideOutOfRangeDays = options.hideOutOfRangeDays ?? true;
-	const entries = series.map((point) => ({
-		date: toDate(point),
-		value: point.value
-	})).filter((entry) => entry.date !== null);
-	if (!entries.length) return {
-		data: [],
-		rowLabels: []
-	};
-	const valueByDay = /* @__PURE__ */ new Map();
-	let minDate = entries[0].date;
-	let maxDate = entries[0].date;
-	for (const { date, value } of entries) {
-		valueByDay.set((0, date_fns.format)(date, "yyyy-MM-dd"), value);
-		if (date < minDate) minDate = date;
-		if (date > maxDate) maxDate = date;
-	}
-	const minDayKey = (0, date_fns.format)(minDate, "yyyy-MM-dd");
-	const maxDayKey = (0, date_fns.format)(maxDate, "yyyy-MM-dd");
-	const gridMinDate = widenTo(options.gridSpan?.start, minDate, "earlier");
-	const gridMaxDate = widenTo(options.gridSpan?.end, maxDate, "later");
-	const gridMaxDayKey = (0, date_fns.format)(gridMaxDate, "yyyy-MM-dd");
-	const gridStart = (0, date_fns.startOfWeek)(gridMinDate, { weekStartsOn });
-	const gridMinDayKey = (0, date_fns.format)(gridMinDate < minDate ? gridStart : gridMinDate, "yyyy-MM-dd");
-	const weekCount = (0, date_fns.differenceInCalendarWeeks)(gridMaxDate, gridStart, { weekStartsOn }) + 1;
-	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? (0, date_fns.format)((0, date_fns.addDays)(gridStart, row), "EEE") : "");
-	const MIN_FIRST_MONTH_WEEKS = 2;
-	const firstMonth = gridStart.getMonth();
-	let firstMonthWeeks = 0;
-	while (firstMonthWeeks < weekCount && (0, date_fns.addDays)(gridStart, firstMonthWeeks * 7).getMonth() === 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 = (0, date_fns.addDays)(gridStart, week * 7);
-		const month = columnStart.getMonth();
-		const label = month !== previousMonth && (week !== 0 || showFirstMonthLabel) ? (0, date_fns.format)(columnStart, "MMM") : "";
-		previousMonth = month;
-		const cells = [];
-		for (let row = 0; row < 7; row++) {
-			const day = (0, date_fns.addDays)(gridStart, week * 7 + row);
-			const key = (0, date_fns.format)(day, "yyyy-MM-dd");
-			const cell = {
-				label: (0, date_fns.format)(day, "EEE, MMM d, yyyy"),
-				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 = (0, react.createContext)(null);
@@ -6612,7 +6689,8 @@ const HeatmapLegend = ({ steps = 5, lessLabel, moreLabel }) => {
 //#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.tsx
 const CELL_MIX_FLOOR = .15;
-const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, height = 0, className, compact = false, showValues, maxCellWidth, maxCellHeight, minCellWidth, minCellHeight, rowLabels = [], primaryColor, gap = "md", withTooltips = false, renderTooltip, children }) => {
+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 chartId = useChartId(providedChartId);
 	const { getElementStyles, theme } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
@@ -6763,13 +6841,20 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const rowTrack = compact ? "var(--a8c-charts-dimension-heatmap-cell-size)" : `minmax(${minCellHeight ?? 0}px, ${maxCellHeight ? `${maxCellHeight}px` : "1fr"})`;
 	const gridStyle = {
 		"--a8c-charts-color-heatmap-primary": primaryColorHex,
-		gridTemplateColumns: `auto repeat(${columns}, ${columnTrack})`,
+		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})`
 	};
 	if (compact) {
 		gridStyle["--a8c-charts-dimension-heatmap-cell-gap"] = `${compactCellGap}px`;
 		gridStyle["--a8c-charts-dimension-heatmap-cell-size"] = `${compactCellSize}px`;
 	}
+	const summaryGaps = (columnIndex) => {
+		if (!data[columnIndex]?.summary) return {};
+		return {
+			[heatmap_chart_module_default["heatmap-chart__gap-start"]]: columnIndex > 0 && !data[columnIndex - 1]?.summary,
+			[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 heightCapped = !compact && Boolean(maxCellHeight);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatmapContext.Provider, {
@@ -6807,7 +6892,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 						"aria-hidden": "true",
 						className: heatmap_chart_module_default["heatmap-chart__row"],
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), data.map((column, columnIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: heatmap_chart_module_default["heatmap-chart__col-label"],
+							className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__col-label"], {
+								[heatmap_chart_module_default["heatmap-chart__col-label--summary"]]: column.summary,
+								...summaryGaps(columnIndex)
+							}),
 							children: column.label
 						}, `col-${columnIndex}`))]
 					}), Array.from({ length: rows }).map((_row, rowIndex) => {
@@ -6832,7 +6920,8 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 								}, `cell-${columnIndex}-${rowIndex}`);
 								const value = cell?.value ?? null;
 								const present = isPresent(value);
-								const normalized = present ? getNormalizedValue(value, extent) : 0;
+								const filled = present && !column.summary;
+								const normalized = filled ? getNormalizedValue(value, extent) : 0;
 								const flatIndex = columnIndex * rows + rowIndex;
 								const info = buildTooltipData(columnIndex, rowIndex);
 								const accessibleLabel = `${info.cellLabel || `${info.columnLabel ?? ""} ${info.rowLabel ?? ""}`.trim()}: ${info.value === null ? (0, _wordpress_i18n.__)("No data", "jetpack-charts") : (0, _automattic_number_formatters.formatNumber)(info.value)}`;
@@ -6845,14 +6934,16 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 									"data-column": columnIndex,
 									"data-row": rowIndex,
 									className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__cell"], {
-										[heatmap_chart_module_default["heatmap-chart__cell--filled"]]: present,
-										[heatmap_chart_module_default["heatmap-chart__cell--strong"]]: present && cellHasLightText(normalized),
+										[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: present ? { "--a8c-charts-heatmap-cell-intensity": normalized } : void 0,
+									style: filled ? { "--a8c-charts-heatmap-cell-intensity": normalized } : void 0,
 									onMouseMove: handleCellMouseMove,
 									onMouseLeave: handleCellMouseLeave,
-									children: drawValues && present && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									children: (drawValues || column.summary) && present && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										className: heatmap_chart_module_default["heatmap-chart__cell-value"],
 										children: (0, _automattic_number_formatters.formatNumberCompact)(value)
 									})
@@ -6888,6 +6979,269 @@ const HeatmapChartResponsiveInner = (props) => /* @__PURE__ */ (0, react_jsx_run
 HeatmapChartResponsiveInner.displayName = "HeatmapChart";
 const HeatmapChartResponsive = attachSubComponents(withResponsive(HeatmapChartResponsiveInner), { Legend: HeatmapLegend });
 //#endregion
+//#region src/charts/heatmap-chart/private/civil-day.ts
+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;
+};
+/**
+* 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 = (0, date_fns.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 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/use-calendar-heatmap-data.ts
+/**
+* `buildCalendarHeatmapData` with the locale and zone taken from
+* `GlobalChartsProvider` where the caller names neither.
+*
+* @param series  - Points to bucket. Held by reference, so a caller that rebuilds it each render defeats the memo.
+* @param options - As for `buildCalendarHeatmapData`; `locale` and `timeZone` win over the provider.
+* @return Columns and row labels for `HeatmapChart`.
+*/
+const useCalendarHeatmapData = (series, options = {}) => {
+	const formatting = useChartFormatting();
+	const locale = options.locale ?? formatting.locale;
+	const timeZone = options.timeZone ?? formatting.timeZone;
+	const { weekStartsOn, hideOutOfRangeDays } = options;
+	const gridStart = options.gridSpan?.start;
+	const gridEnd = options.gridSpan?.end;
+	return (0, react.useMemo)(() => buildCalendarHeatmapData(series, {
+		locale,
+		timeZone,
+		weekStartsOn,
+		hideOutOfRangeDays,
+		gridSpan: {
+			start: gridStart,
+			end: gridEnd
+		}
+	}), [
+		series,
+		locale,
+		timeZone,
+		weekStartsOn,
+		hideOutOfRangeDays,
+		gridStart,
+		gridEnd
+	]);
+};
+//#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>
@@ -7251,7 +7605,7 @@ var require_dist = /* @__PURE__ */ __commonJSMin(((exports) => {
 	tslib_1.__exportStar(require_dist$1(), exports);
 }));
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.mjs
+//#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
 function useUpdateEffect(effect, deps) {
 	const mountedRef = (0, react.useRef)(false);
 	(0, react.useEffect)(() => {
@@ -8889,7 +9243,7 @@ _createEmotion.css;
 _createEmotion.sheet;
 _createEmotion.cache;
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/hooks/use-cx.mjs
+//#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
 var isSerializedStyles = (o) => typeof o !== "undefined" && o !== null && ["name", "styles"].every((p) => typeof o[p] !== "undefined");
 var useCx = () => {
 	const cache = __unsafe_useEmotionCache();
@@ -8996,7 +9350,7 @@ function memize(fn, options) {
 	return memoized;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/colors-values.mjs
+//#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
 var white = "#fff";
 var GRAY = {
 	900: "#1e1e1e",
@@ -9075,7 +9429,7 @@ var COLORS = Object.freeze({
 	ui: UI
 });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/config-values.mjs
+//#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
 var CONTROL_HEIGHT = "36px";
 var CONTROL_PROPS = {
 	controlPaddingX: 12,
@@ -9193,7 +9547,7 @@ function warning(message) {
 	logged.add(message);
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
+//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@date-fns+tz@1.4.1_@types+react-dom@18.3.7_@types+react@18_4546240ebdf94d561ebf2fde285113fe/node_modules/@wordpress/components/build-module/context/context-system-provider.mjs
 var import_es6 = /* @__PURE__ */ __toESM(require_es6(), 1);
 var ComponentsContext = (0, react.createContext)(
 	/** @type {Record<string, any>} */
@@ -9220,19 +9574,19 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 (0, react.memo)(BaseContextSystemProvider);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/constants.mjs
+//#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
 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_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/get-styled-class-name-from-key.mjs
+//#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
 var import_dist = require_dist();
 function getStyledClassName(namespace) {
 	return `components-${(0, import_dist.paramCase)(namespace)}`;
 }
 var getStyledClassNameFromKey = memize(getStyledClassName);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/context-connect.mjs
+//#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
 function contextConnect(Component, namespace) {
 	return _contextConnect(Component, namespace, { forwardsRef: true });
 }
@@ -9249,7 +9603,7 @@ function _contextConnect(Component, namespace, options) {
 	});
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/utils.mjs
+//#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
 function getNamespace(componentName) {
 	return { [COMPONENT_NAMESPACE]: componentName };
 }
@@ -9257,7 +9611,7 @@ function getConnectedNamespace() {
 	return { [CONNECTED_NAMESPACE]: true };
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/context/use-context-system.mjs
+//#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
 function useContextSystem(props, namespace) {
 	const contextSystemProps = useComponentsContext();
 	if (typeof namespace === "undefined") globalThis.SCRIPT_DEBUG === true && warning("useContextSystem: Please provide a namespace");
@@ -9277,7 +9631,7 @@ function useContextSystem(props, namespace) {
 	return finalComponentProps;
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/visually-hidden/styles.mjs
+//#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
 var visuallyHidden = {
 	border: 0,
 	clip: "rect(1px, 1px, 1px, 1px)",
@@ -9293,7 +9647,7 @@ var visuallyHidden = {
 	wordBreak: "normal"
 };
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/polymorphic-element.mjs
+//#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
 var customAttributeRegExp = /^(data|aria|x)-/i;
 var eventHandlerRegExp = /^on[A-Z]/;
 var svgElementNames = new Set(`animate animateMotion animateTransform circle clipPath defs desc ellipse
@@ -9383,7 +9737,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = (0, react.forwardRef)(UnforwardedPolymorphicElement);
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/view/component.mjs
+//#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
 function UnforwardedView({ css, ...restProps }, ref) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PolymorphicElement, {
 		ref,
@@ -9392,7 +9746,7 @@ function UnforwardedView({ css, ...restProps }, ref) {
 }
 var component_default$2 = Object.assign((0, react.forwardRef)(UnforwardedView), { selector: ".components-view" });
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/visually-hidden/component.mjs
+//#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
 function UnconnectedVisuallyHidden(props, forwardedRef) {
 	const { style: styleProp, ...contextProps } = useContextSystem(props, "VisuallyHidden");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -9407,7 +9761,7 @@ function UnconnectedVisuallyHidden(props, forwardedRef) {
 }
 var component_default$1 = contextConnect(UnconnectedVisuallyHidden, "VisuallyHidden");
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/utils/use-responsive-value.mjs
+//#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
 var breakpoints = [
 	"40em",
 	"52em",
@@ -9441,7 +9795,7 @@ function useResponsiveValue(values, options = {}) {
 	return array[index >= array.length ? array.length - 1 : index];
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/grid/utils.mjs
+//#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
 var ALIGNMENTS = {
 	bottom: {
 		alignItems: "flex-end",
@@ -9489,7 +9843,7 @@ function getAlignmentProps(alignment) {
 	return alignment ? ALIGNMENTS[alignment] : {};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/grid/hook.mjs
+//#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
 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]);
@@ -9531,7 +9885,7 @@ function useGrid(props) {
 	};
 }
 //#endregion
-//#region ../../../node_modules/.pnpm/@wordpress+components@40.0.0_@types+react-dom@18.3.7_@types+react@18.3.31__@types+react_d122c1aea9dc8a45ffffc1d3c2f19116/node_modules/@wordpress/components/build-module/grid/component.mjs
+//#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
 function UnconnectedGrid(props, forwardedRef) {
 	const gridProps = useGrid(props);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default$2, {
@@ -10833,6 +11187,7 @@ exports.parseHslString = parseHslString;
 exports.prefersLightText = prefersLightText;
 exports.relativeLuminance = relativeLuminance;
 exports.resolveCssVariable = resolveCssVariable;
+exports.useCalendarHeatmapData = useCalendarHeatmapData;
 exports.useChartFormatting = useChartFormatting;
 exports.useChartLegendItems = useChartLegendItems;
 exports.useChartRegistration = useChartRegistration;