@automattic/charts 4.0.0 → 4.1.1

package/dist/index.js

@@ -6,7 +6,8 @@ import clsx from "clsx";
 import * as React from "react";
 import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1 } from "react";
 import { color, hsl } from "@visx/vendor/d3-color";
-import { addDays, differenceInCalendarWeeks, differenceInHours, differenceInYears, format, isValid, parse, parseISO, startOfWeek } from "date-fns";
+import { differenceInHours, differenceInYears, isValid, parse, parseISO } from "date-fns";
+import { tzOffset } from "@date-fns/tz";
 import { Text, getStringWidth } from "@visx/text";
 import deepmerge from "deepmerge";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -84,46 +85,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
 */
@@ -131,28 +121,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 = 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 = tzOffset(timeZone, new Date(guess));
+	if (first === second) return new Date(guess);
+	const corrected = wallClock - second * 6e4;
+	const third = 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 = parseISO(trimmedString);
@@ -168,7 +187,10 @@ const parseAsLocalDate = (dateString) => {
 		"yyyy-MM-dd'T'HH:mm"
 	]) {
 		const result = parse(trimmedString, format, /* @__PURE__ */ new Date());
-		if (isValid(result)) return result;
+		if (!isValid(result)) continue;
+		if (!timeZone) return result;
+		const fields = NAIVE.exec(trimmedString);
+		return (fields && wallClockToInstant(asUtcMs(fields), timeZone)) ?? result;
 	}
 	return /* @__PURE__ */ new Date(NaN);
 };
@@ -273,6 +295,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: getStringWidth(label(ticks[0], 0), labelStyle) ?? 0,
+		last: getStringWidth(label(ticks[lastIndex], lastIndex), labelStyle) ?? 0
+	};
+};
+//#endregion
 //#region src/utils/get-longest-tick-width.ts
 /**
 * Returns the width of the longest tick.
@@ -659,12 +706,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 });
@@ -1290,13 +1331,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 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
 *
@@ -1304,6 +1360,7 @@ const useXYChartTheme = (data) => {
 * @return {SeriesData[]} The transformed and sorted data
 */
 const useChartDataTransform = (data) => {
+	const { timeZone } = useChartFormatting();
 	return useMemo(() => {
 		const firstPoint = data?.[0]?.data?.[0];
 		if (!(firstPoint && ("date" in firstPoint || "dateString" in firstPoint))) return data;
@@ -1312,7 +1369,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
@@ -1322,7 +1379,7 @@ const useChartDataTransform = (data) => {
 				return a.date.getTime() - b.date.getTime();
 			})
 		}));
-	}, [data]);
+	}, [data, timeZone]);
 };
 //#endregion
 //#region src/hooks/use-chart-margin.tsx
@@ -1364,11 +1421,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) => {
@@ -1380,7 +1458,7 @@ const useChartMargin = (height, options, data, theme, horizontal = false) => {
 		const maxY = Math.max(...allDataPoints.map((d) => d.value));
 		const yScale = createScale({
 			...options.yScale,
-			domain: [minY, maxY],
+			domain: options.yScale?.domain ?? [minY, maxY],
 			range: [height, 0]
 		});
 		return getTicks(yScale, options.axis?.y?.numTicks);
@@ -1399,18 +1477,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,
@@ -1686,21 +1771,6 @@ const useGlobalChartsTheme = () => {
 	return 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 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.
@@ -2140,6 +2210,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 [
@@ -2157,33 +2229,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)
@@ -2197,7 +2285,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.
@@ -2207,9 +2296,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 = defaultStyles, unstyled = false, children, ...rest }) => {
+const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offsetTop = DEFAULT_OFFSET, style = defaultStyles, unstyled = false, children, placement = "auto", ...rest }) => {
 	const nodeRef = useRef(null);
 	const clipRef = useRef(null);
 	const [position, setPosition] = useState(null);
@@ -2234,10 +2324,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,
@@ -2251,11 +2348,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__ */ jsx(Tooltip, {
+	const y = position?.y ?? top + (placement === "below-axis" ? POINTER_HEIGHT : offsetTop);
+	return /* @__PURE__ */ jsxs(Tooltip, {
 		ref: nodeRef,
 		style: {
 			position: "absolute",
@@ -2265,12 +2363,40 @@ const BoundedTooltip = ({ left = 0, top = 0, offsetLeft = DEFAULT_OFFSET, offset
 			...!unstyled && style
 		},
 		...rest,
-		children
+		children: [placement === "below-axis" && /* @__PURE__ */ 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;
@@ -2301,7 +2427,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, 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 } = useContext(DataContext) || {};
 	const tooltipContent = renderTooltip ? renderTooltip({
@@ -2320,9 +2446,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 = [];
@@ -2356,13 +2482,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 : Tooltip;
+	const TooltipComponent = detectBounds || tooltipPlacement === "below-axis" ? BoundedTooltip : Tooltip;
 	const boxStyle = {
 		...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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("g", {
 		className: "visx-tooltip-overlay",
@@ -2370,32 +2497,33 @@ const XyChartTooltipContent = ({ tooltipContext, container, renderTooltip, rende
 		children: [
 			showVerticalCrosshair && isValidNumber(tooltipLeft) && /* @__PURE__ */ 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__ */ 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 && createPortal(/* @__PURE__ */ 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)] });
 };
@@ -2416,7 +2544,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.
@@ -2533,12 +2662,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: useCallback((element) => {
-			if (element && selectedIndex !== void 0) element.focus();
-		}, [selectedIndex]),
-		onChartFocus: useCallback(() => {
+			if (element && selectedIndex !== void 0) {
+				if (preventTooltipScroll) element.focus({ preventScroll: true });
+				else element.focus();
+			}
+		}, [preventTooltipScroll, selectedIndex]),
+		onChartFocus: useCallback((event) => {
+			if (event.currentTarget.contains(event.relatedTarget)) return;
 			if (!isNavigating && selectedIndex !== void 0) setSelectedIndex(0);
 		}, [
 			isNavigating,
@@ -2550,15 +2683,19 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 		}, [setIsNavigating]),
 		onChartKeyDown: useCallback((event) => {
 			if (totalPoints === 0) return;
+			const focusChart = () => {
+				if (preventTooltipScroll) chartRef.current?.focus({ preventScroll: true });
+				else chartRef.current?.focus();
+			};
 			if (event.key === "Tab") {
-				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;
@@ -2573,7 +2710,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,
@@ -2581,7 +2718,8 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 			setSelectedIndex,
 			setIsNavigating,
 			chartRef,
-			onActivate
+			onActivate,
+			preventTooltipScroll
 		])
 	};
 };
@@ -3869,10 +4007,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;
@@ -3882,6 +4021,7 @@ const renderDefaultTooltip = (params) => {
 	})).sort((a, b) => b.value - a.value);
 	return /* @__PURE__ */ jsxs("div", {
 		className: line_chart_module_default["line-chart__tooltip"],
+		style: contentStyle,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: line_chart_module_default["line-chart__tooltip-date"],
 			children: /* @__PURE__ */ jsx(TooltipDate, {
@@ -3931,7 +4071,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = 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 = 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";
@@ -4009,7 +4149,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		setIsNavigating,
 		chartRef,
 		totalPoints: dataSorted[0]?.data.length || 0,
-		onActivate: activateSelectedPoint
+		onActivate: activateSelectedPoint,
+		preventTooltipScroll: tooltipPlacement === "below-axis"
 	});
 	const chartOptions = useMemo(() => {
 		return {
@@ -4118,10 +4259,29 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		xAccessor: (d) => d?.date,
 		yAccessor: (d) => d?.value
 	};
-	const tooltipRenderer = useMemo(() => (params) => renderTooltip({
+	const resolvedTooltipStyle = 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 = 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__ */ jsx("div", {
 		className: clsx("line-chart", line_chart_module_default["line-chart"]),
 		children: error
@@ -4162,6 +4322,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,
@@ -4169,7 +4330,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,
@@ -4260,6 +4420,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 								withTooltips && /* @__PURE__ */ jsx(AccessibleTooltip, {
 									detectBounds: true,
 									snapTooltipToDatumX: true,
+									tooltipPlacement,
+									style: resolvedTooltipStyle,
 									snapTooltipToDatumY: true,
 									showSeriesGlyphs: true,
 									renderTooltip: tooltipRenderer,
@@ -4267,6 +4429,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									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"],
@@ -4663,6 +4827,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,
@@ -4670,7 +4835,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,
@@ -6419,9 +6583,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",
@@ -6435,17 +6603,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];
@@ -6466,101 +6638,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 = 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 = 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(format(date, "yyyy-MM-dd"), value);
-		if (date < minDate) minDate = date;
-		if (date > maxDate) maxDate = date;
-	}
-	const minDayKey = format(minDate, "yyyy-MM-dd");
-	const maxDayKey = format(maxDate, "yyyy-MM-dd");
-	const gridMinDate = widenTo(options.gridSpan?.start, minDate, "earlier");
-	const gridMaxDate = widenTo(options.gridSpan?.end, maxDate, "later");
-	const gridMaxDayKey = format(gridMaxDate, "yyyy-MM-dd");
-	const gridStart = startOfWeek(gridMinDate, { weekStartsOn });
-	const gridMinDayKey = format(gridMinDate < minDate ? gridStart : gridMinDate, "yyyy-MM-dd");
-	const weekCount = differenceInCalendarWeeks(gridMaxDate, gridStart, { weekStartsOn }) + 1;
-	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? format(addDays(gridStart, row), "EEE") : "");
-	const MIN_FIRST_MONTH_WEEKS = 2;
-	const firstMonth = gridStart.getMonth();
-	let firstMonthWeeks = 0;
-	while (firstMonthWeeks < weekCount && 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 = addDays(gridStart, week * 7);
-		const month = columnStart.getMonth();
-		const label = month !== previousMonth && (week !== 0 || showFirstMonthLabel) ? format(columnStart, "MMM") : "";
-		previousMonth = month;
-		const cells = [];
-		for (let row = 0; row < 7; row++) {
-			const day = addDays(gridStart, week * 7 + row);
-			const key = format(day, "yyyy-MM-dd");
-			const cell = {
-				label: 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 = createContext(null);
@@ -6610,7 +6687,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();
@@ -6761,13 +6839,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__ */ jsx(HeatmapContext.Provider, {
@@ -6805,7 +6890,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 						"aria-hidden": "true",
 						className: heatmap_chart_module_default["heatmap-chart__row"],
 						children: [/* @__PURE__ */ jsx("span", {}), data.map((column, columnIndex) => /* @__PURE__ */ jsx("span", {
-							className: heatmap_chart_module_default["heatmap-chart__col-label"],
+							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) => {
@@ -6830,7 +6918,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 ? __("No data", "jetpack-charts") : formatNumber(info.value)}`;
@@ -6843,14 +6932,16 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 									"data-column": columnIndex,
 									"data-row": rowIndex,
 									className: clsx(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__ */ jsx("span", {
+									children: (drawValues || column.summary) && present && /* @__PURE__ */ jsx("span", {
 										className: heatmap_chart_module_default["heatmap-chart__cell-value"],
 										children: formatNumberCompact(value)
 									})
@@ -6886,6 +6977,269 @@ 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})/;
+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 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 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>
@@ -6953,7 +7307,7 @@ function paramCase(input, options) {
 	return dotCase(input, __assign({ delimiter: "-" }, 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/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 = useRef$1(false);
 	useEffect$1(() => {
@@ -8523,7 +8877,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();
@@ -8630,7 +8984,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",
@@ -8709,7 +9063,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,
@@ -8827,7 +9181,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 = createContext$1(
 	/** @type {Record<string, any>} */
@@ -8854,18 +9208,18 @@ var BaseContextSystemProvider = ({ children, value }) => {
 };
 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
 function getStyledClassName(namespace) {
 	return `components-${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 });
 }
@@ -8882,7 +9236,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 };
 }
@@ -8890,7 +9244,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");
@@ -8910,7 +9264,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)",
@@ -8926,7 +9280,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
@@ -9016,7 +9370,7 @@ function UnforwardedPolymorphicElement({ as, ...props }, ref) {
 }
 var PolymorphicElement = forwardRef$1(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__ */ jsx(PolymorphicElement, {
 		ref,
@@ -9025,7 +9379,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_@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__ */ jsx(component_default$2, {
@@ -9040,7 +9394,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",
@@ -9074,7 +9428,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",
@@ -9122,7 +9476,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]);
@@ -9164,7 +9518,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__ */ jsx(component_default$2, {
@@ -10420,6 +10774,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, 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, 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 };
 
 //# sourceMappingURL=index.js.map